fix(menu): disabled color for value text and add disabled stories (#2579)

- Updates two existing stories to include a disabled menu item with the
  Switch input.
- Updates disabled styles so that the value area text also appears with
  the disabled content color when the menu item is disabled. Noticed
  when updating the stories and confirmed on newer design spec.

Author: jawinn

components/menu/index.css

@@ -779,7 +779,8 @@ governing permissions and limitations under the License.
   background-color: transparent;
 
   .spectrum-Menu-itemLabel,
-  .spectrum-Menu-sectionHeading {
+  .spectrum-Menu-sectionHeading,
+  .spectrum-Menu-itemValue {
     color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-content-color-disabled, var(--spectrum-menu-item-label-content-color-disabled)));
   }
 
@@ -797,7 +798,8 @@ governing permissions and limitations under the License.
     background-color: transparent;
 
     .spectrum-Menu-itemLabel,
-    .spectrum-Menu-sectionHeading {
+    .spectrum-Menu-sectionHeading,
+    .spectrum-Menu-itemValue {
       color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-content-color-disabled, var(--spectrum-menu-item-label-content-color-disabled)));
     }
 

components/menu/stories/menu.stories.js

@@ -328,6 +328,10 @@ WithActions.args = {
     {
       label: "Subtract",
     },
+    {
+      label: "Example of a disabled menu item",
+      isDisabled: true,
+    },
   ],
 };
 
@@ -348,6 +352,11 @@ WithValueAndActions.args = {
       label: "Subtract",
       value: "Value"
     },
+    {
+      label: "Example of a disabled menu item",
+      value: "Value",
+      isDisabled: true,
+    },
   ],
 };
 

components/menu/stories/template.js

@@ -1,7 +1,7 @@
 import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
-import { styleMap } from "lit/directives/style-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { styleMap } from "lit/directives/style-map.js";
 import { when } from "lit/directives/when.js";
 
 import { Template as Checkbox } from "@spectrum-css/checkbox/stories/template.js";
@@ -109,6 +109,7 @@ export const MenuItem = ({
           size,
           isEmphasized: true,
           isChecked: isSelected,
+          isDisabled,
           id: `menu-checkbox-${idx}`,
           customClasses: [
             `${rootClass}Checkbox`,
@@ -136,6 +137,7 @@ export const MenuItem = ({
               ...globals,
               size,
               isChecked: isSelected,
+              isDisabled,
               label: null,
               id: `menu-switch-${idx}`,
               customClasses: [