@fluentui/react-menu 9.75.1-experimental.css-modules.20261103-d6c85ee2a9.0 → 9.75.1-experimental.positioning-engine.20261103-19efe125d1.0

package/CHANGELOG.md

@@ -1,29 +1,29 @@
 # Change Log - @fluentui/react-menu
 
-<!-- This log was last generated on Tue, 03 Nov 2026 14:02:52 GMT and should not be manually modified. -->
+<!-- This log was last generated on Tue, 03 Nov 2026 14:18:28 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
-## [9.75.1-experimental.css-modules.20261103-d6c85ee2a9.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.75.1-experimental.css-modules.20261103-d6c85ee2a9.0)
+## [9.75.1-experimental.positioning-engine.20261103-19efe125d1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.75.1-experimental.positioning-engine.20261103-19efe125d1.0)
 
-Tue, 03 Nov 2026 14:02:52 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.25.8..@fluentui/react-menu_v9.75.1-experimental.css-modules.20261103-d6c85ee2a9.0)
+Tue, 03 Nov 2026 14:18:28 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.25.8..@fluentui/react-menu_v9.75.1-experimental.positioning-engine.20261103-19efe125d1.0)
 
 ### Changes
 
-- Release 9.75.1-experimental.css-modules.20261103-d6c85ee2a9 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by 257645319+office-ogx-auth-helper[bot]@users.noreply.github.com)
-- Bump @fluentui/keyboard-keys to v9.75.1-experimental.css-modules.20261103-d6c85ee2a9.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
-- Bump @fluentui/react-aria to v9.75.1-experimental.css-modules.20261103-d6c85ee2a9.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
-- Bump @fluentui/react-context-selector to v9.75.1-experimental.css-modules.20261103-d6c85ee2a9.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.75.1-experimental.css-modules.20261103-d6c85ee2a9.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
-- Bump @fluentui/react-motion to v9.75.1-experimental.css-modules.20261103-d6c85ee2a9.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
-- Bump @fluentui/react-motion-components-preview to v9.75.1-experimental.css-modules.20261103-d6c85ee2a9.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
-- Bump @fluentui/react-portal to v9.75.1-experimental.css-modules.20261103-d6c85ee2a9.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
-- Bump @fluentui/react-positioning to v9.75.1-experimental.css-modules.20261103-d6c85ee2a9.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
-- Bump @fluentui/react-shared-contexts to v9.75.1-experimental.css-modules.20261103-d6c85ee2a9.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
-- Bump @fluentui/react-tabster to v9.75.1-experimental.css-modules.20261103-d6c85ee2a9.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
-- Bump @fluentui/react-theme to v9.75.1-experimental.css-modules.20261103-d6c85ee2a9.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
-- Bump @fluentui/react-utilities to v9.75.1-experimental.css-modules.20261103-d6c85ee2a9.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Release 9.75.1-experimental.positioning-engine.20261103-19efe125d1 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by 257645319+office-ogx-auth-helper[bot]@users.noreply.github.com)
+- Bump @fluentui/keyboard-keys to v9.75.1-experimental.positioning-engine.20261103-19efe125d1.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-aria to v9.75.1-experimental.positioning-engine.20261103-19efe125d1.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-context-selector to v9.75.1-experimental.positioning-engine.20261103-19efe125d1.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.75.1-experimental.positioning-engine.20261103-19efe125d1.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-motion to v9.75.1-experimental.positioning-engine.20261103-19efe125d1.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-motion-components-preview to v9.75.1-experimental.positioning-engine.20261103-19efe125d1.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-portal to v9.75.1-experimental.positioning-engine.20261103-19efe125d1.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-positioning to v9.75.1-experimental.positioning-engine.20261103-19efe125d1.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.75.1-experimental.positioning-engine.20261103-19efe125d1.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-tabster to v9.75.1-experimental.positioning-engine.20261103-19efe125d1.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-theme to v9.75.1-experimental.positioning-engine.20261103-19efe125d1.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-utilities to v9.75.1-experimental.positioning-engine.20261103-19efe125d1.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
 
 ## [9.25.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.25.8)
 

package/README.md

@@ -1,11 +1,3 @@
 # @fluentui/react-menu
 
 **React Menu components for [Fluent UI React](https://react.fluentui.dev)**
-
-## Opt-in CSS Modules styles
-
-Menu items, selectable checkmarks, groups, lists, and popovers have layered CSS Modules alternatives beside their Griffel style hooks.
-Resolve the relevant `.styles.js` imports to `.styles.css.js` (and source `.styles`
-imports to `.styles.css.ts`) only in an explicitly opted-in bundler configuration.
-Keep CSS assets and process the headless icon stylesheet in the `fluentui` layer.
-The default component imports and Griffel implementations are unchanged.

package/package.json

@@ -1,35 +1,32 @@
 {
   "name": "@fluentui/react-menu",
-  "version": "9.75.1-experimental.css-modules.20261103-d6c85ee2a9.0",
+  "version": "9.75.1-experimental.positioning-engine.20261103-19efe125d1.0",
   "description": "Fluent UI menu component",
   "main": "lib-commonjs/index.cjs",
   "module": "lib/index.js",
   "typings": "./dist/index.d.ts",
-  "sideEffects": [
-    "**/*.css"
-  ],
+  "sideEffects": false,
   "repository": {
     "type": "git",
     "url": "https://github.com/microsoft/fluentui"
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui/keyboard-keys": "9.75.1-experimental.css-modules.20261103-d6c85ee2a9.0",
-    "@fluentui/react-aria": "9.75.1-experimental.css-modules.20261103-d6c85ee2a9.0",
-    "@fluentui/react-context-selector": "9.75.1-experimental.css-modules.20261103-d6c85ee2a9.0",
+    "@fluentui/keyboard-keys": "9.75.1-experimental.positioning-engine.20261103-19efe125d1.0",
+    "@fluentui/react-aria": "9.75.1-experimental.positioning-engine.20261103-19efe125d1.0",
+    "@fluentui/react-context-selector": "9.75.1-experimental.positioning-engine.20261103-19efe125d1.0",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-jsx-runtime": "9.75.1-experimental.css-modules.20261103-d6c85ee2a9.0",
-    "@fluentui/react-motion": "9.75.1-experimental.css-modules.20261103-d6c85ee2a9.0",
-    "@fluentui/react-motion-components-preview": "9.75.1-experimental.css-modules.20261103-d6c85ee2a9.0",
-    "@fluentui/react-portal": "9.75.1-experimental.css-modules.20261103-d6c85ee2a9.0",
-    "@fluentui/react-positioning": "9.75.1-experimental.css-modules.20261103-d6c85ee2a9.0",
-    "@fluentui/react-shared-contexts": "9.75.1-experimental.css-modules.20261103-d6c85ee2a9.0",
-    "@fluentui/react-tabster": "9.75.1-experimental.css-modules.20261103-d6c85ee2a9.0",
-    "@fluentui/react-theme": "9.75.1-experimental.css-modules.20261103-d6c85ee2a9.0",
-    "@fluentui/react-utilities": "9.75.1-experimental.css-modules.20261103-d6c85ee2a9.0",
+    "@fluentui/react-jsx-runtime": "9.75.1-experimental.positioning-engine.20261103-19efe125d1.0",
+    "@fluentui/react-motion": "9.75.1-experimental.positioning-engine.20261103-19efe125d1.0",
+    "@fluentui/react-motion-components-preview": "9.75.1-experimental.positioning-engine.20261103-19efe125d1.0",
+    "@fluentui/react-portal": "9.75.1-experimental.positioning-engine.20261103-19efe125d1.0",
+    "@fluentui/react-positioning": "9.75.1-experimental.positioning-engine.20261103-19efe125d1.0",
+    "@fluentui/react-shared-contexts": "9.75.1-experimental.positioning-engine.20261103-19efe125d1.0",
+    "@fluentui/react-tabster": "9.75.1-experimental.positioning-engine.20261103-19efe125d1.0",
+    "@fluentui/react-theme": "9.75.1-experimental.positioning-engine.20261103-19efe125d1.0",
+    "@fluentui/react-utilities": "9.75.1-experimental.positioning-engine.20261103-19efe125d1.0",
     "@griffel/react": "^1.5.32",
-    "@swc/helpers": "^0.5.1",
-    "clsx": "^2.1.1"
+    "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {
     "@types/react": ">=16.14.0 <20.0.0",

package/lib/components/MenuDivider/MenuDivider.module.css

@@ -1,8 +0,0 @@
-@layer fluent {
-  .root {
-    margin-block: var(--spacingVerticalXS);
-    margin-inline: calc(0px - var(--spacingHorizontalXS) - var(--strokeWidthThin));
-    width: auto;
-    border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
-  }
-}

package/lib/components/MenuDivider/useMenuDividerStyles.styles.css.js

@@ -1,9 +0,0 @@
-import { clsx } from "clsx";
-import styles from "./MenuDivider.module.css";
-export const menuDividerClassNames = {
-    root: 'fui-MenuDivider'
-};
-export const useMenuDividerStyles_unstable = (state)=>{
-    state.root.className = clsx(menuDividerClassNames.root, styles.root, state.root.className);
-    return state;
-};

package/lib/components/MenuDivider/useMenuDividerStyles.styles.css.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/MenuDivider/useMenuDividerStyles.styles.css.ts"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MenuDividerSlots, MenuDividerState } from './MenuDivider.types';\nimport styles from './MenuDivider.module.css';\n\nexport const menuDividerClassNames: SlotClassNames<MenuDividerSlots> = {\n  root: 'fui-MenuDivider',\n};\n\nexport const useMenuDividerStyles_unstable = (state: MenuDividerState): MenuDividerState => {\n  state.root.className = clsx(menuDividerClassNames.root, styles.root, state.root.className);\n  return state;\n};\n"],"names":["clsx","styles","menuDividerClassNames","root","useMenuDividerStyles_unstable","state","className"],"mappings":"AAAA,SAASA,IAAI,QAAQ,OAAO;AAG5B,OAAOC,YAAY,2BAA2B;AAE9C,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;AACR,EAAE;AAEF,OAAO,MAAMC,gCAAgC,CAACC;IAC5CA,MAAMF,IAAI,CAACG,SAAS,GAAGN,KAAKE,sBAAsBC,IAAI,EAAEF,OAAOE,IAAI,EAAEE,MAAMF,IAAI,CAACG,SAAS;IACzF,OAAOD;AACT,EAAE"}

package/lib/components/MenuDivider/useMenuDividerStyles.styles.raw.css.js

@@ -1,9 +0,0 @@
-import { clsx } from "clsx";
-import styles from "./MenuDivider.module.css";
-export const menuDividerClassNames = {
-    root: 'fui-MenuDivider'
-};
-export const useMenuDividerStyles_unstable = (state)=>{
-    state.root.className = clsx(menuDividerClassNames.root, styles.root, state.root.className);
-    return state;
-};

package/lib/components/MenuDivider/useMenuDividerStyles.styles.raw.css.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/MenuDivider/useMenuDividerStyles.styles.css.ts"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MenuDividerSlots, MenuDividerState } from './MenuDivider.types';\nimport styles from './MenuDivider.module.css';\n\nexport const menuDividerClassNames: SlotClassNames<MenuDividerSlots> = {\n  root: 'fui-MenuDivider',\n};\n\nexport const useMenuDividerStyles_unstable = (state: MenuDividerState): MenuDividerState => {\n  state.root.className = clsx(menuDividerClassNames.root, styles.root, state.root.className);\n  return state;\n};\n"],"names":["clsx","styles","menuDividerClassNames","root","useMenuDividerStyles_unstable","state","className"],"mappings":"AAAA,SAASA,IAAI,QAAQ,OAAO;AAG5B,OAAOC,YAAY,2BAA2B;AAE9C,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;AACR,EAAE;AAEF,OAAO,MAAMC,gCAAgC,CAACC;IAC5CA,MAAMF,IAAI,CAACG,SAAS,GAAGN,KAAKE,sBAAsBC,IAAI,EAAEF,OAAOE,IAAI,EAAEE,MAAMF,IAAI,CAACG,SAAS;IACzF,OAAOD;AACT,EAAE"}

package/lib/components/MenuGroup/useMenuGroupStyles.styles.css.js

@@ -1,8 +0,0 @@
-import { clsx } from "clsx";
-export const menuGroupClassNames = {
-    root: 'fui-MenuGroup'
-};
-export const useMenuGroupStyles_unstable = (state)=>{
-    state.root.className = clsx(menuGroupClassNames.root, state.root.className);
-    return state;
-};

package/lib/components/MenuGroup/useMenuGroupStyles.styles.css.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/MenuGroup/useMenuGroupStyles.styles.css.ts"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MenuGroupSlots, MenuGroupState } from './MenuGroup.types';\nexport const menuGroupClassNames: SlotClassNames<MenuGroupSlots> = {\n  root: 'fui-MenuGroup',\n};\n\nexport const useMenuGroupStyles_unstable = (state: MenuGroupState): MenuGroupState => {\n  state.root.className = clsx(menuGroupClassNames.root, state.root.className);\n\n  return state;\n};\n"],"names":["clsx","menuGroupClassNames","root","useMenuGroupStyles_unstable","state","className"],"mappings":"AAAA,SAASA,IAAI,QAAQ,OAAO;AAG5B,OAAO,MAAMC,sBAAsD;IACjEC,MAAM;AACR,EAAE;AAEF,OAAO,MAAMC,8BAA8B,CAACC;IAC1CA,MAAMF,IAAI,CAACG,SAAS,GAAGL,KAAKC,oBAAoBC,IAAI,EAAEE,MAAMF,IAAI,CAACG,SAAS;IAE1E,OAAOD;AACT,EAAE"}

package/lib/components/MenuGroup/useMenuGroupStyles.styles.raw.css.js

@@ -1,8 +0,0 @@
-import { clsx } from "clsx";
-export const menuGroupClassNames = {
-    root: 'fui-MenuGroup'
-};
-export const useMenuGroupStyles_unstable = (state)=>{
-    state.root.className = clsx(menuGroupClassNames.root, state.root.className);
-    return state;
-};

package/lib/components/MenuGroup/useMenuGroupStyles.styles.raw.css.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/MenuGroup/useMenuGroupStyles.styles.css.ts"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MenuGroupSlots, MenuGroupState } from './MenuGroup.types';\nexport const menuGroupClassNames: SlotClassNames<MenuGroupSlots> = {\n  root: 'fui-MenuGroup',\n};\n\nexport const useMenuGroupStyles_unstable = (state: MenuGroupState): MenuGroupState => {\n  state.root.className = clsx(menuGroupClassNames.root, state.root.className);\n\n  return state;\n};\n"],"names":["clsx","menuGroupClassNames","root","useMenuGroupStyles_unstable","state","className"],"mappings":"AAAA,SAASA,IAAI,QAAQ,OAAO;AAG5B,OAAO,MAAMC,sBAAsD;IACjEC,MAAM;AACR,EAAE;AAEF,OAAO,MAAMC,8BAA8B,CAACC;IAC1CA,MAAMF,IAAI,CAACG,SAAS,GAAGL,KAAKC,oBAAoBC,IAAI,EAAEE,MAAMF,IAAI,CAACG,SAAS;IAE1E,OAAOD;AACT,EAAE"}

package/lib/components/MenuGroupHeader/MenuGroupHeader.module.css

@@ -1,12 +0,0 @@
-@layer fluent {
-  .root {
-    font-size: var(--fontSizeBase200);
-    color: var(--colorNeutralForeground3);
-    padding-inline-start: var(--spacingHorizontalS);
-    padding-inline-end: var(--spacingHorizontalS);
-    font-weight: var(--fontWeightSemibold);
-    height: var(--spacingHorizontalXXXL);
-    display: flex;
-    align-items: center;
-  }
-}

package/lib/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.css.js

@@ -1,9 +0,0 @@
-import { clsx } from "clsx";
-import styles from "./MenuGroupHeader.module.css";
-export const menuGroupHeaderClassNames = {
-    root: 'fui-MenuGroupHeader'
-};
-export const useMenuGroupHeaderStyles_unstable = (state)=>{
-    state.root.className = clsx(menuGroupHeaderClassNames.root, styles.root, state.root.className);
-    return state;
-};

package/lib/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.css.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.css.ts"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { MenuGroupHeaderSlots, MenuGroupHeaderState } from './MenuGroupHeader.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport styles from './MenuGroupHeader.module.css';\n\nexport const menuGroupHeaderClassNames: SlotClassNames<MenuGroupHeaderSlots> = {\n  root: 'fui-MenuGroupHeader',\n};\n\nexport const useMenuGroupHeaderStyles_unstable = (state: MenuGroupHeaderState): MenuGroupHeaderState => {\n  state.root.className = clsx(menuGroupHeaderClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["clsx","styles","menuGroupHeaderClassNames","root","useMenuGroupHeaderStyles_unstable","state","className"],"mappings":"AAAA,SAASA,IAAI,QAAQ,OAAO;AAG5B,OAAOC,YAAY,+BAA+B;AAElD,OAAO,MAAMC,4BAAkE;IAC7EC,MAAM;AACR,EAAE;AAEF,OAAO,MAAMC,oCAAoC,CAACC;IAChDA,MAAMF,IAAI,CAACG,SAAS,GAAGN,KAAKE,0BAA0BC,IAAI,EAAEF,OAAOE,IAAI,EAAEE,MAAMF,IAAI,CAACG,SAAS;IAE7F,OAAOD;AACT,EAAE"}

package/lib/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.raw.css.js

@@ -1,9 +0,0 @@
-import { clsx } from "clsx";
-import styles from "./MenuGroupHeader.module.css";
-export const menuGroupHeaderClassNames = {
-    root: 'fui-MenuGroupHeader'
-};
-export const useMenuGroupHeaderStyles_unstable = (state)=>{
-    state.root.className = clsx(menuGroupHeaderClassNames.root, styles.root, state.root.className);
-    return state;
-};

package/lib/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.raw.css.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.css.ts"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { MenuGroupHeaderSlots, MenuGroupHeaderState } from './MenuGroupHeader.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport styles from './MenuGroupHeader.module.css';\n\nexport const menuGroupHeaderClassNames: SlotClassNames<MenuGroupHeaderSlots> = {\n  root: 'fui-MenuGroupHeader',\n};\n\nexport const useMenuGroupHeaderStyles_unstable = (state: MenuGroupHeaderState): MenuGroupHeaderState => {\n  state.root.className = clsx(menuGroupHeaderClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["clsx","styles","menuGroupHeaderClassNames","root","useMenuGroupHeaderStyles_unstable","state","className"],"mappings":"AAAA,SAASA,IAAI,QAAQ,OAAO;AAG5B,OAAOC,YAAY,+BAA+B;AAElD,OAAO,MAAMC,4BAAkE;IAC7EC,MAAM;AACR,EAAE;AAEF,OAAO,MAAMC,oCAAoC,CAACC;IAChDA,MAAMF,IAAI,CAACG,SAAS,GAAGN,KAAKE,0BAA0BC,IAAI,EAAEF,OAAOE,IAAI,EAAEE,MAAMF,IAAI,CAACG,SAAS;IAE7F,OAAOD;AACT,EAAE"}

package/lib/components/MenuItem/MenuItem.module.css

@@ -1,335 +0,0 @@
-@import url('@fluentui/react-icons/headless/styles.css') layer(fluent);
-
-@layer fluent {
-  .root {
-    border-radius: var(--borderRadiusMedium);
-    position: relative;
-    color: var(--colorNeutralForeground2);
-    background-color: var(--colorNeutralBackground1);
-    padding-inline-end: var(--spacingVerticalSNudge);
-    padding-inline-start: var(--spacingVerticalSNudge);
-    padding-top: var(--spacingVerticalSNudge);
-    padding-bottom: var(--spacingVerticalSNudge);
-    box-sizing: border-box;
-    max-width: calc(9 * var(--spacingHorizontalXXXL) + var(--spacingHorizontalXXS));
-    min-height: var(--spacingHorizontalXXXL);
-    flex-shrink: 0;
-    display: flex;
-    align-items: start;
-    font-size: var(--fontSizeBase300);
-    cursor: pointer;
-    gap: var(--spacingHorizontalXS);
-    &:hover {
-      background-color: var(--colorNeutralBackground1Hover);
-      color: var(--colorNeutralForeground2Hover);
-      & :global(.fui-Icon-filled) {
-        display: inline;
-      }
-      & :global(.fui-Icon-regular) {
-        display: none;
-      }
-      & :global(.fui-MenuItem__icon) {
-        color: var(--colorNeutralForeground2BrandSelected);
-      }
-      & :global(.fui-MenuItem__subText) {
-        color: var(--colorNeutralForeground3Hover);
-      }
-    }
-    &:hover:active {
-      background-color: var(--colorNeutralBackground1Pressed);
-      color: var(--colorNeutralForeground2Pressed);
-      & :global(.fui-MenuItem__subText) {
-        color: var(--colorNeutralForeground3Pressed);
-      }
-    }
-    user-select: none;
-    &:focus {
-      outline-style: none;
-    }
-    &:focus-visible {
-      outline-style: none;
-    }
-    &[data-fui-focus-visible] {
-      border-top-color: var(--colorTransparentBackground);
-      border-right-color: var(--colorTransparentBackground);
-      border-bottom-color: var(--colorTransparentBackground);
-      border-left-color: var(--colorTransparentBackground);
-      &::after {
-        content: '';
-        position: absolute;
-        pointer-events: none;
-        z-index: 1;
-        border: var(--strokeWidthThick) solid var(--colorStrokeFocus2);
-        border-radius: var(--borderRadiusMedium);
-        top: calc(-1 * var(--strokeWidthThick));
-        right: calc(-1 * var(--strokeWidthThick));
-        bottom: calc(-1 * var(--strokeWidthThick));
-        left: calc(-1 * var(--strokeWidthThick));
-      }
-      @media (forced-colors: active) {
-        &::after {
-          border-top-color: Highlight;
-          border-right-color: Highlight;
-          border-bottom-color: Highlight;
-          border-left-color: Highlight;
-        }
-      }
-    }
-    @media (forced-colors: active) {
-      &:hover {
-        forced-color-adjust: none;
-        background-color: Highlight;
-        color: HighlightText;
-        & :global(.fui-MenuItem__icon),
-        & :global(.fui-MenuItem__checkmark),
-        & :global(.fui-MenuItem__subText),
-        & :global(.fui-MenuItem__secondaryContent) {
-          color: HighlightText;
-        }
-      }
-      &:focus {
-        outline-style: none;
-      }
-      &:focus-visible {
-        outline-style: none;
-      }
-      &[data-fui-focus-visible] {
-        border-top-color: var(--colorTransparentBackground);
-        border-right-color: var(--colorTransparentBackground);
-        border-bottom-color: var(--colorTransparentBackground);
-        border-left-color: var(--colorTransparentBackground);
-        &::after {
-          content: '';
-          position: absolute;
-          pointer-events: none;
-          z-index: 1;
-          border: var(--strokeWidthThick) solid Highlight;
-          border-radius: var(--borderRadiusMedium);
-          top: calc(-1 * var(--strokeWidthThick));
-          right: calc(-1 * var(--strokeWidthThick));
-          bottom: calc(-1 * var(--strokeWidthThick));
-          left: calc(-1 * var(--strokeWidthThick));
-        }
-        @media (forced-colors: active) {
-          &::after {
-            border-top-color: Highlight;
-            border-right-color: Highlight;
-            border-bottom-color: Highlight;
-            border-left-color: Highlight;
-          }
-        }
-      }
-    }
-  }
-  .content {
-    padding-inline-start: var(--spacingHorizontalXXS);
-    padding-inline-end: var(--spacingHorizontalXXS);
-    background-color: var(--colorTransparentBackground);
-    flex-grow: 1;
-  }
-  .secondaryContent {
-    padding-inline-start: var(--spacingHorizontalXXS);
-    padding-inline-end: var(--spacingHorizontalXXS);
-    font-family: var(--fontFamilyBase);
-    font-size: var(--fontSizeBase200);
-    font-weight: var(--fontWeightRegular);
-    line-height: var(--lineHeightBase300);
-    color: var(--colorNeutralForeground3);
-    &:hover {
-      color: var(--colorNeutralForeground3Hover);
-    }
-    &:focus {
-      color: var(--colorNeutralForeground3Hover);
-    }
-  }
-  .icon {
-    width: var(--spacingHorizontalXL);
-    height: var(--spacingHorizontalXL);
-    font-size: var(--fontSizeBase500);
-    line-height: 0;
-    align-items: center;
-    display: inline-flex;
-    justify-content: center;
-    flex-shrink: 0;
-  }
-  .submenuIndicator {
-    width: var(--spacingHorizontalXL);
-    height: var(--spacingHorizontalXL);
-    font-size: var(--fontSizeBase500);
-    line-height: 0;
-    align-items: center;
-    display: inline-flex;
-    justify-content: center;
-  }
-  .subText {
-    font-family: var(--fontFamilyBase);
-    font-size: var(--fontSizeBase100);
-    font-weight: var(--fontWeightRegular);
-    line-height: var(--lineHeightBase100);
-    color: var(--colorNeutralForeground3);
-  }
-  .checkmark {
-    margin-top: var(--spacingHorizontalXXS);
-  }
-  .submenuOpen {
-    background-color: var(--colorNeutralBackground1Hover);
-    color: var(--colorNeutralForeground2Hover);
-    & :global(.fui-Icon-filled) {
-      display: inline;
-    }
-    & :global(.fui-Icon-regular) {
-      display: none;
-    }
-    & :global(.fui-MenuItem__icon) {
-      color: var(--colorNeutralForeground2BrandSelected);
-    }
-    & :global(.fui-MenuItem__subText) {
-      color: var(--colorNeutralForeground3Hover);
-    }
-    @media (forced-colors: active) {
-      forced-color-adjust: none;
-      background-color: Highlight;
-      color: HighlightText;
-      & :global(.fui-MenuItem__icon),
-      & :global(.fui-MenuItem__checkmark),
-      & :global(.fui-MenuItem__subText),
-      & :global(.fui-MenuItem__secondaryContent) {
-        color: HighlightText;
-      }
-    }
-  }
-  .disabled {
-    color: var(--colorNeutralForegroundDisabled);
-    &:hover {
-      color: var(--colorNeutralForegroundDisabled);
-      background-color: var(--colorNeutralBackground1);
-      cursor: not-allowed;
-      & :global(.fui-Icon-filled) {
-        display: none;
-      }
-      & :global(.fui-Icon-regular) {
-        display: inline;
-      }
-      & :global(.fui-MenuItem__icon) {
-        color: var(--colorNeutralForegroundDisabled);
-      }
-      & :global(.fui-MenuItem__subText) {
-        color: var(--colorNeutralForegroundDisabled);
-      }
-    }
-    &:hover:active {
-      color: var(--colorNeutralForegroundDisabled);
-      background-color: var(--colorNeutralBackground1);
-      & :global(.fui-MenuItem__subText) {
-        color: var(--colorNeutralForegroundDisabled);
-      }
-    }
-    &:focus {
-      color: var(--colorNeutralForegroundDisabled);
-    }
-    @media (forced-colors: active) {
-      color: GrayText;
-      &:hover {
-        forced-color-adjust: auto;
-        color: GrayText;
-        background-color: Canvas;
-        & :global(.fui-MenuItem__icon) {
-          color: GrayText;
-          background-color: Canvas;
-        }
-        & :global(.fui-MenuItem__icon),
-        & :global(.fui-MenuItem__checkmark),
-        & :global(.fui-MenuItem__subText),
-        & :global(.fui-MenuItem__secondaryContent) {
-          color: GrayText;
-        }
-      }
-      &:hover:active {
-        color: GrayText;
-        background-color: Canvas;
-        & :global(.fui-MenuItem__subText) {
-          color: GrayText;
-        }
-      }
-      &:focus {
-        color: GrayText;
-        background-color: Canvas;
-      }
-    }
-  }
-  :where(.disabled) > :where(.content) > .subText {
-    color: var(--colorNeutralForegroundDisabled);
-    @media (forced-colors: active) {
-      color: GrayText;
-    }
-  }
-  :where(.multiline) > .content {
-    display: flex;
-    flex-direction: column;
-  }
-  :where(.multiline) > .secondaryContent {
-    align-self: center;
-  }
-  :where(.multiline) > .submenuIndicator {
-    align-self: center;
-  }
-  :where(.disabled) > .secondaryContent {
-    color: var(--colorNeutralForegroundDisabled);
-    &:hover {
-      color: var(--colorNeutralForegroundDisabled);
-      background-color: var(--colorNeutralBackground1);
-      cursor: not-allowed;
-      & :global(.fui-Icon-filled) {
-        display: none;
-      }
-      & :global(.fui-Icon-regular) {
-        display: inline;
-      }
-      & :global(.fui-MenuItem__icon) {
-        color: var(--colorNeutralForegroundDisabled);
-      }
-      & :global(.fui-MenuItem__subText) {
-        color: var(--colorNeutralForegroundDisabled);
-      }
-    }
-    &:hover:active {
-      color: var(--colorNeutralForegroundDisabled);
-      background-color: var(--colorNeutralBackground1);
-      & :global(.fui-MenuItem__subText) {
-        color: var(--colorNeutralForegroundDisabled);
-      }
-    }
-    &:focus {
-      color: var(--colorNeutralForegroundDisabled);
-    }
-    @media (forced-colors: active) {
-      color: GrayText;
-      &:hover {
-        forced-color-adjust: auto;
-        color: GrayText;
-        background-color: Canvas;
-        & :global(.fui-MenuItem__icon) {
-          color: GrayText;
-          background-color: Canvas;
-        }
-        & :global(.fui-MenuItem__icon),
-        & :global(.fui-MenuItem__checkmark),
-        & :global(.fui-MenuItem__subText),
-        & :global(.fui-MenuItem__secondaryContent) {
-          color: GrayText;
-        }
-      }
-      &:hover:active {
-        color: GrayText;
-        background-color: Canvas;
-        & :global(.fui-MenuItem__subText) {
-          color: GrayText;
-        }
-      }
-      &:focus {
-        color: GrayText;
-        background-color: Canvas;
-      }
-    }
-  }
-}

package/lib/components/MenuItem/useMenuItemStyles.styles.css.js

@@ -1,43 +0,0 @@
-'use client';
-import { clsx } from "clsx";
-import { useCheckmarkStyles_unstable } from "../../selectable/useCheckmarkStyles.styles.css.js";
-import styles from "./MenuItem.module.css";
-export const menuItemClassNames = {
-    root: 'fui-MenuItem',
-    icon: 'fui-MenuItem__icon',
-    checkmark: 'fui-MenuItem__checkmark',
-    submenuIndicator: 'fui-MenuItem__submenuIndicator',
-    content: 'fui-MenuItem__content',
-    secondaryContent: 'fui-MenuItem__secondaryContent',
-    subText: 'fui-MenuItem__subText'
-};
-/** Applies style classnames to slots */ export const useMenuItemStyles_unstable = (state)=>{
-    // eslint-disable-next-line react-hooks/immutability
-    state.root.className = clsx(menuItemClassNames.root, styles.root, state.submenuOpen && styles.submenuOpen, state.disabled && styles.disabled, state.subText && styles.multiline, state.root.className);
-    if (state.content) {
-        // eslint-disable-next-line react-hooks/immutability
-        state.content.className = clsx(menuItemClassNames.content, styles.content, state.content.className);
-    }
-    if (state.checkmark) {
-        // eslint-disable-next-line react-hooks/immutability
-        state.checkmark.className = clsx(menuItemClassNames.checkmark, styles.checkmark, state.checkmark.className);
-    }
-    if (state.secondaryContent) {
-        // eslint-disable-next-line react-hooks/immutability
-        state.secondaryContent.className = clsx(menuItemClassNames.secondaryContent, styles.secondaryContent, state.secondaryContent.className);
-    }
-    if (state.icon) {
-        // eslint-disable-next-line react-hooks/immutability
-        state.icon.className = clsx(menuItemClassNames.icon, styles.icon, state.icon.className);
-    }
-    if (state.submenuIndicator) {
-        // eslint-disable-next-line react-hooks/immutability
-        state.submenuIndicator.className = clsx(menuItemClassNames.submenuIndicator, styles.submenuIndicator, state.submenuIndicator.className);
-    }
-    if (state.subText) {
-        // eslint-disable-next-line react-hooks/immutability
-        state.subText.className = clsx(menuItemClassNames.subText, styles.subText, state.subText.className);
-    }
-    useCheckmarkStyles_unstable(state);
-    return state;
-};

package/lib/components/MenuItem/useMenuItemStyles.styles.css.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/MenuItem/useMenuItemStyles.styles.css.ts"],"sourcesContent":["'use client';\n\nimport { clsx } from 'clsx';\nimport { useCheckmarkStyles_unstable } from '../../selectable/useCheckmarkStyles.styles.css';\nimport type { MenuItemCheckboxState } from '../MenuItemCheckbox/index';\nimport type { MenuItemSlots, MenuItemState } from './MenuItem.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport styles from './MenuItem.module.css';\n\nexport const menuItemClassNames: SlotClassNames<MenuItemSlots> = {\n  root: 'fui-MenuItem',\n  icon: 'fui-MenuItem__icon',\n  checkmark: 'fui-MenuItem__checkmark',\n  submenuIndicator: 'fui-MenuItem__submenuIndicator',\n  content: 'fui-MenuItem__content',\n  secondaryContent: 'fui-MenuItem__secondaryContent',\n  subText: 'fui-MenuItem__subText',\n};\n\n/** Applies style classnames to slots */\nexport const useMenuItemStyles_unstable = (state: MenuItemState): MenuItemState => {\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = clsx(\n    menuItemClassNames.root,\n    styles.root,\n    state.submenuOpen && styles.submenuOpen,\n    state.disabled && styles.disabled,\n    state.subText && styles.multiline,\n    state.root.className,\n  );\n  if (state.content) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.content.className = clsx(menuItemClassNames.content, styles.content, state.content.className);\n  }\n  if (state.checkmark) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.checkmark.className = clsx(menuItemClassNames.checkmark, styles.checkmark, state.checkmark.className);\n  }\n  if (state.secondaryContent) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.secondaryContent.className = clsx(\n      menuItemClassNames.secondaryContent,\n      styles.secondaryContent,\n      state.secondaryContent.className,\n    );\n  }\n  if (state.icon) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.icon.className = clsx(menuItemClassNames.icon, styles.icon, state.icon.className);\n  }\n  if (state.submenuIndicator) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.submenuIndicator.className = clsx(\n      menuItemClassNames.submenuIndicator,\n      styles.submenuIndicator,\n      state.submenuIndicator.className,\n    );\n  }\n  if (state.subText) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.subText.className = clsx(menuItemClassNames.subText, styles.subText, state.subText.className);\n  }\n  useCheckmarkStyles_unstable(state as MenuItemCheckboxState);\n  return state;\n};\n"],"names":["clsx","useCheckmarkStyles_unstable","styles","menuItemClassNames","root","icon","checkmark","submenuIndicator","content","secondaryContent","subText","useMenuItemStyles_unstable","state","className","submenuOpen","disabled","multiline"],"mappings":"AAAA;AAEA,SAASA,IAAI,QAAQ,OAAO;AAC5B,SAASC,2BAA2B,QAAQ,oDAAiD;AAI7F,OAAOC,YAAY,wBAAwB;AAE3C,OAAO,MAAMC,qBAAoD;IAC/DC,MAAM;IACNC,MAAM;IACNC,WAAW;IACXC,kBAAkB;IAClBC,SAAS;IACTC,kBAAkB;IAClBC,SAAS;AACX,EAAE;AAEF,sCAAsC,GACtC,OAAO,MAAMC,6BAA6B,CAACC;IACzC,oDAAoD;IACpDA,MAAMR,IAAI,CAACS,SAAS,GAAGb,KACrBG,mBAAmBC,IAAI,EACvBF,OAAOE,IAAI,EACXQ,MAAME,WAAW,IAAIZ,OAAOY,WAAW,EACvCF,MAAMG,QAAQ,IAAIb,OAAOa,QAAQ,EACjCH,MAAMF,OAAO,IAAIR,OAAOc,SAAS,EACjCJ,MAAMR,IAAI,CAACS,SAAS;IAEtB,IAAID,MAAMJ,OAAO,EAAE;QACjB,oDAAoD;QACpDI,MAAMJ,OAAO,CAACK,SAAS,GAAGb,KAAKG,mBAAmBK,OAAO,EAAEN,OAAOM,OAAO,EAAEI,MAAMJ,OAAO,CAACK,SAAS;IACpG;IACA,IAAID,MAAMN,SAAS,EAAE;QACnB,oDAAoD;QACpDM,MAAMN,SAAS,CAACO,SAAS,GAAGb,KAAKG,mBAAmBG,SAAS,EAAEJ,OAAOI,SAAS,EAAEM,MAAMN,SAAS,CAACO,SAAS;IAC5G;IACA,IAAID,MAAMH,gBAAgB,EAAE;QAC1B,oDAAoD;QACpDG,MAAMH,gBAAgB,CAACI,SAAS,GAAGb,KACjCG,mBAAmBM,gBAAgB,EACnCP,OAAOO,gBAAgB,EACvBG,MAAMH,gBAAgB,CAACI,SAAS;IAEpC;IACA,IAAID,MAAMP,IAAI,EAAE;QACd,oDAAoD;QACpDO,MAAMP,IAAI,CAACQ,SAAS,GAAGb,KAAKG,mBAAmBE,IAAI,EAAEH,OAAOG,IAAI,EAAEO,MAAMP,IAAI,CAACQ,SAAS;IACxF;IACA,IAAID,MAAML,gBAAgB,EAAE;QAC1B,oDAAoD;QACpDK,MAAML,gBAAgB,CAACM,SAAS,GAAGb,KACjCG,mBAAmBI,gBAAgB,EACnCL,OAAOK,gBAAgB,EACvBK,MAAML,gBAAgB,CAACM,SAAS;IAEpC;IACA,IAAID,MAAMF,OAAO,EAAE;QACjB,oDAAoD;QACpDE,MAAMF,OAAO,CAACG,SAAS,GAAGb,KAAKG,mBAAmBO,OAAO,EAAER,OAAOQ,OAAO,EAAEE,MAAMF,OAAO,CAACG,SAAS;IACpG;IACAZ,4BAA4BW;IAC5B,OAAOA;AACT,EAAE"}