@fluentui/react-button 9.6.11 → 9.7.0

package/lib/components/CompoundButton/useCompoundButtonStyles.styles.js

@@ -14,31 +14,31 @@ const useRootStyles = /*#__PURE__*/__styles({
     Bqenvij: "f11ysow2",
     J657lq: "f1um431h",
     Jlnjib: "fte7hqw",
-    Bc29nj9: "f1yh8ef3"
+    Bo7webf: "frw79jk"
   },
   highContrast: {
-    pu7qz5: "fi3u9nm",
-    B10010i: "f1tdgb9w"
+    m3fafd: "ffcivv0",
+    pus4l6: "f1wchxtt"
   },
   outline: {},
   primary: {
     J657lq: "foe7gw6",
     Jlnjib: "fvxlz81",
-    Bc29nj9: "f1c2mdy",
-    B8ia98v: "f1r39r2s"
+    Bo7webf: "f16twlsn",
+    D126e9: "fsglouz"
   },
   secondary: {},
   subtle: {
     J657lq: "f1um431h",
     Jlnjib: "fte7hqw",
-    Bc29nj9: "f1yh8ef3",
-    pu7qz5: "f1xoeh18",
-    B10010i: "f1ca1nd7"
+    Bo7webf: "frw79jk",
+    m3fafd: "f13lnigs",
+    pus4l6: "f1ba77l5"
   },
   transparent: {
     J657lq: "f1um431h",
     Jlnjib: "f1wn9xqz",
-    Bc29nj9: "f1a8q4d0"
+    Bo7webf: "f1juxwb4"
   },
   small: {
     Byoj8tv: 0,
@@ -70,12 +70,12 @@ const useRootStyles = /*#__PURE__*/__styles({
   disabled: {
     J657lq: "f1rlv8bf",
     Jlnjib: "fd1dbtm",
-    Bc29nj9: "f1vqmdmi"
+    Bo7webf: "f1x3eb98"
   },
   disabledHighContrast: {
-    B8ia98v: "f1csacz4",
-    pu7qz5: "f1s5tkfe",
-    B10010i: "fs0rda3"
+    D126e9: "fbqh1p7",
+    m3fafd: "fu2tbix",
+    pus4l6: "f1g2tosm"
   }
 }, {
   d: [".f11ysow2{height:auto;}", ".f1um431h .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2);}", ".foe7gw6 .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundOnBrand);}", [".f1ge6w2w{padding:var(--spacingHorizontalS) var(--spacingHorizontalS) var(--spacingHorizontalMNudge) var(--spacingHorizontalS);}", {
@@ -85,22 +85,22 @@ const useRootStyles = /*#__PURE__*/__styles({
   }], [".f14s4sho{padding:18px var(--spacingHorizontalL) var(--spacingHorizontalXL) var(--spacingHorizontalL);}", {
     p: -1
   }], ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1rlv8bf .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundDisabled);}"],
-  h: [".fte7hqw:hover .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2Hover);}", ".f1yh8ef3:hover:active .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2Pressed);}", ".fvxlz81:hover .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundOnBrand);}", ".f1c2mdy:hover:active .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundOnBrand);}", ".f1wn9xqz:hover .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2BrandHover);}", ".f1a8q4d0:hover:active .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2BrandPressed);}", ".fd1dbtm:hover .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundDisabled);}", ".f1vqmdmi:hover:active .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundDisabled);}"],
-  m: [["@media (forced-colors: active){.fi3u9nm:hover .fui-CompoundButton__secondaryContent{color:Highlight;}}", {
+  h: [".fte7hqw:hover .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2Hover);}", ".frw79jk:hover:active .fui-CompoundButton__secondaryContent,.frw79jk:active:focus-visible .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2Pressed);}", ".fvxlz81:hover .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundOnBrand);}", ".f16twlsn:hover:active .fui-CompoundButton__secondaryContent,.f16twlsn:active:focus-visible .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundOnBrand);}", ".f1wn9xqz:hover .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2BrandHover);}", ".f1juxwb4:hover:active .fui-CompoundButton__secondaryContent,.f1juxwb4:active:focus-visible .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2BrandPressed);}", ".fd1dbtm:hover .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundDisabled);}", ".f1x3eb98:hover:active .fui-CompoundButton__secondaryContent,.f1x3eb98:active:focus-visible .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundDisabled);}"],
+  m: [["@media (forced-colors: active){.ffcivv0:hover .fui-CompoundButton__secondaryContent{color:Highlight;}}", {
     m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f1tdgb9w:hover:active .fui-CompoundButton__secondaryContent{color:Highlight;}}", {
+  }], ["@media (forced-colors: active){.f1wchxtt:hover:active .fui-CompoundButton__secondaryContent,.f1wchxtt:active:focus-visible .fui-CompoundButton__secondaryContent{color:Highlight;}}", {
     m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f1r39r2s .fui-CompoundButton__secondaryContent{color:HighlightText;}}", {
+  }], ["@media (forced-colors: active){.fsglouz .fui-CompoundButton__secondaryContent{color:HighlightText;}}", {
     m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f1xoeh18:hover .fui-CompoundButton__secondaryContent{color:Canvas;}}", {
+  }], ["@media (forced-colors: active){.f13lnigs:hover .fui-CompoundButton__secondaryContent{color:Canvas;}}", {
     m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f1ca1nd7:hover:active .fui-CompoundButton__secondaryContent{color:Canvas;}}", {
+  }], ["@media (forced-colors: active){.f1ba77l5:hover:active .fui-CompoundButton__secondaryContent,.f1ba77l5:active:focus-visible .fui-CompoundButton__secondaryContent{color:Canvas;}}", {
     m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f1csacz4 .fui-CompoundButton__secondaryContent{color:GrayText;}}", {
+  }], ["@media (forced-colors: active){.fbqh1p7 .fui-CompoundButton__secondaryContent{color:GrayText;}}", {
     m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f1s5tkfe:hover .fui-CompoundButton__secondaryContent{color:GrayText;}}", {
+  }], ["@media (forced-colors: active){.fu2tbix:hover .fui-CompoundButton__secondaryContent{color:GrayText;}}", {
     m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.fs0rda3:hover:active .fui-CompoundButton__secondaryContent{color:GrayText;}}", {
+  }], ["@media (forced-colors: active){.f1g2tosm:hover:active .fui-CompoundButton__secondaryContent,.f1g2tosm:active:focus-visible .fui-CompoundButton__secondaryContent{color:GrayText;}}", {
     m: "(forced-colors: active)"
   }]]
 });

package/lib/components/CompoundButton/useCompoundButtonStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["tokens","mergeClasses","__styles","useButtonStyles_unstable","compoundButtonClassNames","root","icon","contentContainer","secondaryContent","useRootStyles","base","Bqenvij","J657lq","Jlnjib","Bc29nj9","highContrast","pu7qz5","B10010i","outline","primary","B8ia98v","secondary","subtle","transparent","small","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Be2twd7","Bg96gwp","medium","large","disabled","disabledHighContrast","d","p","h","m","useRootIconOnlyStyles","B2u0y6b","Bf4jedk","useIconStyles","a9b677","before","t21cq0","after","Frg6f3","useContentContainerStyles","mc9l5x","Beiy3e4","fsow6f","useSecondaryContentStyles","Bhrd7zp","useCompoundButtonStyles_unstable","state","rootStyles","rootIconOnlyStyles","iconStyles","contentContainerStyles","secondaryContentStyles","appearance","disabledFocusable","iconOnly","iconPosition","size","className","children","undefined"],"sources":["useCompoundButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\nexport const compoundButtonClassNames = {\n    root: 'fui-CompoundButton',\n    icon: 'fui-CompoundButton__icon',\n    contentContainer: 'fui-CompoundButton__contentContainer',\n    secondaryContent: 'fui-CompoundButton__secondaryContent'\n};\nconst useRootStyles = makeStyles({\n    // Base styles\n    base: {\n        height: 'auto',\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n            color: tokens.colorNeutralForeground2\n        },\n        ':hover': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForeground2Hover\n            }\n        },\n        ':hover:active': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForeground2Pressed\n            }\n        }\n    },\n    // High contrast styles\n    highContrast: {\n        '@media (forced-colors: active)': {\n            ':hover': {\n                [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                    color: 'Highlight'\n                }\n            },\n            ':hover:active': {\n                [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                    color: 'Highlight'\n                }\n            }\n        }\n    },\n    // Appearance variations\n    outline: {\n    },\n    primary: {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n            color: tokens.colorNeutralForegroundOnBrand\n        },\n        ':hover': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForegroundOnBrand\n            }\n        },\n        ':hover:active': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForegroundOnBrand\n            }\n        },\n        '@media (forced-colors: active)': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: 'HighlightText'\n            }\n        }\n    },\n    secondary: {\n    },\n    subtle: {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n            color: tokens.colorNeutralForeground2\n        },\n        ':hover': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForeground2Hover\n            }\n        },\n        ':hover:active': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForeground2Pressed\n            }\n        },\n        '@media (forced-colors: active)': {\n            ':hover': {\n                [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                    color: 'Canvas'\n                }\n            },\n            ':hover:active': {\n                [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                    color: 'Canvas'\n                }\n            }\n        }\n    },\n    transparent: {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n            color: tokens.colorNeutralForeground2\n        },\n        ':hover': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForeground2BrandHover\n            }\n        },\n        ':hover:active': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForeground2BrandPressed\n            }\n        }\n    },\n    // Size variations\n    small: {\n        padding: `${tokens.spacingHorizontalS} ${tokens.spacingHorizontalS} ${tokens.spacingHorizontalMNudge} ${tokens.spacingHorizontalS}`,\n        fontSize: tokens.fontSizeBase300,\n        lineHeight: tokens.lineHeightBase300\n    },\n    medium: {\n        padding: `14px ${tokens.spacingHorizontalM} ${tokens.spacingHorizontalL} ${tokens.spacingHorizontalM}`,\n        fontSize: tokens.fontSizeBase300,\n        lineHeight: tokens.lineHeightBase300\n    },\n    large: {\n        padding: `18px ${tokens.spacingHorizontalL} ${tokens.spacingHorizontalXL} ${tokens.spacingHorizontalL}`,\n        fontSize: tokens.fontSizeBase400,\n        lineHeight: tokens.lineHeightBase400\n    },\n    // Disabled styles\n    disabled: {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n            color: tokens.colorNeutralForegroundDisabled\n        },\n        ':hover': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForegroundDisabled\n            }\n        },\n        ':hover:active': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForegroundDisabled\n            }\n        }\n    },\n    // Disabled high contrast styles\n    disabledHighContrast: {\n        '@media (forced-colors: active)': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: 'GrayText'\n            },\n            ':hover': {\n                [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                    color: 'GrayText'\n                }\n            },\n            ':hover:active': {\n                [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                    color: 'GrayText'\n                }\n            }\n        }\n    }\n});\nconst useRootIconOnlyStyles = makeStyles({\n    // Size variations\n    small: {\n        padding: tokens.spacingHorizontalXS,\n        maxWidth: '48px',\n        minWidth: '48px'\n    },\n    medium: {\n        padding: tokens.spacingHorizontalSNudge,\n        maxWidth: '52px',\n        minWidth: '52px'\n    },\n    large: {\n        padding: tokens.spacingHorizontalS,\n        maxWidth: '56px',\n        minWidth: '56px'\n    }\n});\nconst useIconStyles = makeStyles({\n    // Base styles\n    base: {\n        fontSize: '40px',\n        height: '40px',\n        width: '40px'\n    },\n    // Icon position variations\n    before: {\n        marginRight: tokens.spacingHorizontalM\n    },\n    after: {\n        marginLeft: tokens.spacingHorizontalM\n    }\n});\nconst useContentContainerStyles = makeStyles({\n    // Base styles\n    base: {\n        display: 'flex',\n        flexDirection: 'column',\n        textAlign: 'left'\n    }\n});\nconst useSecondaryContentStyles = makeStyles({\n    // Base styles\n    base: {\n        lineHeight: '100%',\n        fontWeight: tokens.fontWeightRegular\n    },\n    // Size variations\n    small: {\n        fontSize: tokens.fontSizeBase200\n    },\n    medium: {\n        fontSize: tokens.fontSizeBase200\n    },\n    large: {\n        fontSize: tokens.fontSizeBase300\n    }\n});\nexport const useCompoundButtonStyles_unstable = (state)=>{\n    'use no memo';\n    const rootStyles = useRootStyles();\n    const rootIconOnlyStyles = useRootIconOnlyStyles();\n    const iconStyles = useIconStyles();\n    const contentContainerStyles = useContentContainerStyles();\n    const secondaryContentStyles = useSecondaryContentStyles();\n    const { appearance, disabled, disabledFocusable, iconOnly, iconPosition, size } = state;\n    state.root.className = mergeClasses(compoundButtonClassNames.root, // Root styles\n    rootStyles.base, rootStyles.highContrast, appearance && rootStyles[appearance], rootStyles[size], // Disabled styles\n    (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, // Icon-only styles\n    iconOnly && rootIconOnlyStyles[size], // User provided class name\n    state.root.className);\n    state.contentContainer.className = mergeClasses(compoundButtonClassNames.contentContainer, contentContainerStyles.base, state.contentContainer.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(compoundButtonClassNames.icon, iconStyles.base, state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition], state.icon.className);\n    }\n    if (state.secondaryContent) {\n        state.secondaryContent.className = mergeClasses(compoundButtonClassNames.secondaryContent, secondaryContentStyles.base, secondaryContentStyles[size], state.secondaryContent.className);\n    }\n    useButtonStyles_unstable(state);\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["tokens","mergeClasses","__styles","useButtonStyles_unstable","compoundButtonClassNames","root","icon","contentContainer","secondaryContent","useRootStyles","base","Bqenvij","J657lq","Jlnjib","Bo7webf","highContrast","m3fafd","pus4l6","outline","primary","D126e9","secondary","subtle","transparent","small","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Be2twd7","Bg96gwp","medium","large","disabled","disabledHighContrast","d","p","h","m","useRootIconOnlyStyles","B2u0y6b","Bf4jedk","useIconStyles","a9b677","before","t21cq0","after","Frg6f3","useContentContainerStyles","mc9l5x","Beiy3e4","fsow6f","useSecondaryContentStyles","Bhrd7zp","useCompoundButtonStyles_unstable","state","rootStyles","rootIconOnlyStyles","iconStyles","contentContainerStyles","secondaryContentStyles","appearance","disabledFocusable","iconOnly","iconPosition","size","className","children","undefined"],"sources":["useCompoundButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\nexport const compoundButtonClassNames = {\n    root: 'fui-CompoundButton',\n    icon: 'fui-CompoundButton__icon',\n    contentContainer: 'fui-CompoundButton__contentContainer',\n    secondaryContent: 'fui-CompoundButton__secondaryContent'\n};\nconst useRootStyles = makeStyles({\n    // Base styles\n    base: {\n        height: 'auto',\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n            color: tokens.colorNeutralForeground2\n        },\n        ':hover': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForeground2Hover\n            }\n        },\n        ':hover:active,:active:focus-visible': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForeground2Pressed\n            }\n        }\n    },\n    // High contrast styles\n    highContrast: {\n        '@media (forced-colors: active)': {\n            ':hover': {\n                [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                    color: 'Highlight'\n                }\n            },\n            ':hover:active,:active:focus-visible': {\n                [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                    color: 'Highlight'\n                }\n            }\n        }\n    },\n    // Appearance variations\n    outline: {\n    },\n    primary: {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n            color: tokens.colorNeutralForegroundOnBrand\n        },\n        ':hover': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForegroundOnBrand\n            }\n        },\n        ':hover:active,:active:focus-visible': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForegroundOnBrand\n            }\n        },\n        '@media (forced-colors: active)': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: 'HighlightText'\n            }\n        }\n    },\n    secondary: {\n    },\n    subtle: {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n            color: tokens.colorNeutralForeground2\n        },\n        ':hover': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForeground2Hover\n            }\n        },\n        ':hover:active,:active:focus-visible': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForeground2Pressed\n            }\n        },\n        '@media (forced-colors: active)': {\n            ':hover': {\n                [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                    color: 'Canvas'\n                }\n            },\n            ':hover:active,:active:focus-visible': {\n                [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                    color: 'Canvas'\n                }\n            }\n        }\n    },\n    transparent: {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n            color: tokens.colorNeutralForeground2\n        },\n        ':hover': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForeground2BrandHover\n            }\n        },\n        ':hover:active,:active:focus-visible': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForeground2BrandPressed\n            }\n        }\n    },\n    // Size variations\n    small: {\n        padding: `${tokens.spacingHorizontalS} ${tokens.spacingHorizontalS} ${tokens.spacingHorizontalMNudge} ${tokens.spacingHorizontalS}`,\n        fontSize: tokens.fontSizeBase300,\n        lineHeight: tokens.lineHeightBase300\n    },\n    medium: {\n        padding: `14px ${tokens.spacingHorizontalM} ${tokens.spacingHorizontalL} ${tokens.spacingHorizontalM}`,\n        fontSize: tokens.fontSizeBase300,\n        lineHeight: tokens.lineHeightBase300\n    },\n    large: {\n        padding: `18px ${tokens.spacingHorizontalL} ${tokens.spacingHorizontalXL} ${tokens.spacingHorizontalL}`,\n        fontSize: tokens.fontSizeBase400,\n        lineHeight: tokens.lineHeightBase400\n    },\n    // Disabled styles\n    disabled: {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n            color: tokens.colorNeutralForegroundDisabled\n        },\n        ':hover': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForegroundDisabled\n            }\n        },\n        ':hover:active,:active:focus-visible': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForegroundDisabled\n            }\n        }\n    },\n    // Disabled high contrast styles\n    disabledHighContrast: {\n        '@media (forced-colors: active)': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: 'GrayText'\n            },\n            ':hover': {\n                [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                    color: 'GrayText'\n                }\n            },\n            ':hover:active,:active:focus-visible': {\n                [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                    color: 'GrayText'\n                }\n            }\n        }\n    }\n});\nconst useRootIconOnlyStyles = makeStyles({\n    // Size variations\n    small: {\n        padding: tokens.spacingHorizontalXS,\n        maxWidth: '48px',\n        minWidth: '48px'\n    },\n    medium: {\n        padding: tokens.spacingHorizontalSNudge,\n        maxWidth: '52px',\n        minWidth: '52px'\n    },\n    large: {\n        padding: tokens.spacingHorizontalS,\n        maxWidth: '56px',\n        minWidth: '56px'\n    }\n});\nconst useIconStyles = makeStyles({\n    // Base styles\n    base: {\n        fontSize: '40px',\n        height: '40px',\n        width: '40px'\n    },\n    // Icon position variations\n    before: {\n        marginRight: tokens.spacingHorizontalM\n    },\n    after: {\n        marginLeft: tokens.spacingHorizontalM\n    }\n});\nconst useContentContainerStyles = makeStyles({\n    // Base styles\n    base: {\n        display: 'flex',\n        flexDirection: 'column',\n        textAlign: 'left'\n    }\n});\nconst useSecondaryContentStyles = makeStyles({\n    // Base styles\n    base: {\n        lineHeight: '100%',\n        fontWeight: tokens.fontWeightRegular\n    },\n    // Size variations\n    small: {\n        fontSize: tokens.fontSizeBase200\n    },\n    medium: {\n        fontSize: tokens.fontSizeBase200\n    },\n    large: {\n        fontSize: tokens.fontSizeBase300\n    }\n});\nexport const useCompoundButtonStyles_unstable = (state)=>{\n    'use no memo';\n    const rootStyles = useRootStyles();\n    const rootIconOnlyStyles = useRootIconOnlyStyles();\n    const iconStyles = useIconStyles();\n    const contentContainerStyles = useContentContainerStyles();\n    const secondaryContentStyles = useSecondaryContentStyles();\n    const { appearance, disabled, disabledFocusable, iconOnly, iconPosition, size } = state;\n    state.root.className = mergeClasses(compoundButtonClassNames.root, // Root styles\n    rootStyles.base, rootStyles.highContrast, appearance && rootStyles[appearance], rootStyles[size], // Disabled styles\n    (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, // Icon-only styles\n    iconOnly && rootIconOnlyStyles[size], // User provided class name\n    state.root.className);\n    state.contentContainer.className = mergeClasses(compoundButtonClassNames.contentContainer, contentContainerStyles.base, state.contentContainer.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(compoundButtonClassNames.icon, iconStyles.base, state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition], state.icon.className);\n    }\n    if (state.secondaryContent) {\n        state.secondaryContent.className = mergeClasses(compoundButtonClassNames.secondaryContent, secondaryContentStyles.base, secondaryContentStyles[size], state.secondaryContent.className);\n    }\n    useButtonStyles_unstable(state);\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/CompoundButton/useCompoundButtonStyles.styles.raw.headless.js

@@ -0,0 +1,49 @@
+'use client';
+// Re-export the same slot class names mapping used by the griffel styles file
+export const compoundButtonClassNames = {
+    root: 'fui-CompoundButton',
+    icon: 'fui-CompoundButton__icon',
+    contentContainer: 'fui-CompoundButton__contentContainer',
+    secondaryContent: 'fui-CompoundButton__secondaryContent'
+};
+/**
+ * Attaches only semantic slot class names and state modifiers
+ */ export const useCompoundButtonStyles_unstable = (state)=>{
+    'use no memo';
+    const { appearance, disabled, disabledFocusable, icon, iconOnly, iconPosition, shape, size } = state;
+    state.root.className = [
+        compoundButtonClassNames.root,
+        // Appearance
+        appearance && `${compoundButtonClassNames.root}--${appearance}`,
+        // Size
+        size && `${compoundButtonClassNames.root}--${size}`,
+        // Shape
+        shape && `${compoundButtonClassNames.root}--${shape}`,
+        // Disabled styles
+        disabled && `${compoundButtonClassNames.root}--disabled`,
+        disabledFocusable && `${compoundButtonClassNames.root}--disabledFocusable`,
+        // Icon styles
+        icon && iconPosition === 'before' && `${compoundButtonClassNames.root}--iconBefore`,
+        icon && iconPosition === 'after' && `${compoundButtonClassNames.root}--iconAfter`,
+        icon && iconOnly && `${compoundButtonClassNames.root}--iconOnly`,
+        // User provided class name
+        state.root.className
+    ].filter(Boolean).join(' ');
+    if (state.icon) {
+        state.icon.className = [
+            compoundButtonClassNames.icon,
+            state.icon.className
+        ].filter(Boolean).join(' ');
+    }
+    state.contentContainer.className = [
+        compoundButtonClassNames.contentContainer,
+        state.contentContainer.className
+    ].filter(Boolean).join(' ');
+    if (state.secondaryContent) {
+        state.secondaryContent.className = [
+            compoundButtonClassNames.secondaryContent,
+            state.secondaryContent.className
+        ].filter(Boolean).join(' ');
+    }
+    return state;
+};

package/lib/components/CompoundButton/useCompoundButtonStyles.styles.raw.headless.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CompoundButton/useCompoundButtonStyles.styles.headless.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CompoundButtonSlots, CompoundButtonState } from './CompoundButton.types';\n\n// Re-export the same slot class names mapping used by the griffel styles file\nexport const compoundButtonClassNames: SlotClassNames<CompoundButtonSlots> = {\n  root: 'fui-CompoundButton',\n  icon: 'fui-CompoundButton__icon',\n  contentContainer: 'fui-CompoundButton__contentContainer',\n  secondaryContent: 'fui-CompoundButton__secondaryContent',\n};\n\n/**\n * Attaches only semantic slot class names and state modifiers\n */\nexport const useCompoundButtonStyles_unstable = (state: CompoundButtonState): CompoundButtonState => {\n  'use no memo';\n\n  const { appearance, disabled, disabledFocusable, icon, iconOnly, iconPosition, shape, size } = state;\n\n  state.root.className = [\n    compoundButtonClassNames.root,\n\n    // Appearance\n    appearance && `${compoundButtonClassNames.root}--${appearance}`,\n\n    // Size\n    size && `${compoundButtonClassNames.root}--${size}`,\n\n    // Shape\n    shape && `${compoundButtonClassNames.root}--${shape}`,\n\n    // Disabled styles\n    disabled && `${compoundButtonClassNames.root}--disabled`,\n    disabledFocusable && `${compoundButtonClassNames.root}--disabledFocusable`,\n\n    // Icon styles\n    icon && iconPosition === 'before' && `${compoundButtonClassNames.root}--iconBefore`,\n    icon && iconPosition === 'after' && `${compoundButtonClassNames.root}--iconAfter`,\n    icon && iconOnly && `${compoundButtonClassNames.root}--iconOnly`,\n\n    // User provided class name\n    state.root.className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  if (state.icon) {\n    state.icon.className = [compoundButtonClassNames.icon, state.icon.className].filter(Boolean).join(' ');\n  }\n\n  state.contentContainer.className = [compoundButtonClassNames.contentContainer, state.contentContainer.className]\n    .filter(Boolean)\n    .join(' ');\n\n  if (state.secondaryContent) {\n    state.secondaryContent.className = [compoundButtonClassNames.secondaryContent, state.secondaryContent.className]\n      .filter(Boolean)\n      .join(' ');\n  }\n\n  return state;\n};\n"],"names":["compoundButtonClassNames","root","icon","contentContainer","secondaryContent","useCompoundButtonStyles_unstable","state","appearance","disabled","disabledFocusable","iconOnly","iconPosition","shape","size","className","filter","Boolean","join"],"mappings":"AAAA;AAKA,8EAA8E;AAC9E,OAAO,MAAMA,2BAAgE;IAC3EC,MAAM;IACNC,MAAM;IACNC,kBAAkB;IAClBC,kBAAkB;AACpB,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/C;IAEA,MAAM,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,iBAAiB,EAAEP,IAAI,EAAEQ,QAAQ,EAAEC,YAAY,EAAEC,KAAK,EAAEC,IAAI,EAAE,GAAGP;IAE/FA,MAAML,IAAI,CAACa,SAAS,GAAG;QACrBd,yBAAyBC,IAAI;QAE7B,aAAa;QACbM,cAAc,GAAGP,yBAAyBC,IAAI,CAAC,EAAE,EAAEM,YAAY;QAE/D,OAAO;QACPM,QAAQ,GAAGb,yBAAyBC,IAAI,CAAC,EAAE,EAAEY,MAAM;QAEnD,QAAQ;QACRD,SAAS,GAAGZ,yBAAyBC,IAAI,CAAC,EAAE,EAAEW,OAAO;QAErD,kBAAkB;QAClBJ,YAAY,GAAGR,yBAAyBC,IAAI,CAAC,UAAU,CAAC;QACxDQ,qBAAqB,GAAGT,yBAAyBC,IAAI,CAAC,mBAAmB,CAAC;QAE1E,cAAc;QACdC,QAAQS,iBAAiB,YAAY,GAAGX,yBAAyBC,IAAI,CAAC,YAAY,CAAC;QACnFC,QAAQS,iBAAiB,WAAW,GAAGX,yBAAyBC,IAAI,CAAC,WAAW,CAAC;QACjFC,QAAQQ,YAAY,GAAGV,yBAAyBC,IAAI,CAAC,UAAU,CAAC;QAEhE,2BAA2B;QAC3BK,MAAML,IAAI,CAACa,SAAS;KACrB,CACEC,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,IAAIX,MAAMJ,IAAI,EAAE;QACdI,MAAMJ,IAAI,CAACY,SAAS,GAAG;YAACd,yBAAyBE,IAAI;YAAEI,MAAMJ,IAAI,CAACY,SAAS;SAAC,CAACC,MAAM,CAACC,SAASC,IAAI,CAAC;IACpG;IAEAX,MAAMH,gBAAgB,CAACW,SAAS,GAAG;QAACd,yBAAyBG,gBAAgB;QAAEG,MAAMH,gBAAgB,CAACW,SAAS;KAAC,CAC7GC,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,IAAIX,MAAMF,gBAAgB,EAAE;QAC1BE,MAAMF,gBAAgB,CAACU,SAAS,GAAG;YAACd,yBAAyBI,gBAAgB;YAAEE,MAAMF,gBAAgB,CAACU,SAAS;SAAC,CAC7GC,MAAM,CAACC,SACPC,IAAI,CAAC;IACV;IAEA,OAAOX;AACT,EAAE"}

package/lib/components/CompoundButton/useCompoundButtonStyles.styles.raw.js

@@ -20,7 +20,7 @@ const useRootStyles = makeStyles({
                 color: tokens.colorNeutralForeground2Hover
             }
         },
-        ':hover:active': {
+        ':hover:active,:active:focus-visible': {
             [`& .${compoundButtonClassNames.secondaryContent}`]: {
                 color: tokens.colorNeutralForeground2Pressed
             }
@@ -34,7 +34,7 @@ const useRootStyles = makeStyles({
                     color: 'Highlight'
                 }
             },
-            ':hover:active': {
+            ':hover:active,:active:focus-visible': {
                 [`& .${compoundButtonClassNames.secondaryContent}`]: {
                     color: 'Highlight'
                 }
@@ -53,7 +53,7 @@ const useRootStyles = makeStyles({
                 color: tokens.colorNeutralForegroundOnBrand
             }
         },
-        ':hover:active': {
+        ':hover:active,:active:focus-visible': {
             [`& .${compoundButtonClassNames.secondaryContent}`]: {
                 color: tokens.colorNeutralForegroundOnBrand
             }
@@ -75,7 +75,7 @@ const useRootStyles = makeStyles({
                 color: tokens.colorNeutralForeground2Hover
             }
         },
-        ':hover:active': {
+        ':hover:active,:active:focus-visible': {
             [`& .${compoundButtonClassNames.secondaryContent}`]: {
                 color: tokens.colorNeutralForeground2Pressed
             }
@@ -86,7 +86,7 @@ const useRootStyles = makeStyles({
                     color: 'Canvas'
                 }
             },
-            ':hover:active': {
+            ':hover:active,:active:focus-visible': {
                 [`& .${compoundButtonClassNames.secondaryContent}`]: {
                     color: 'Canvas'
                 }
@@ -102,7 +102,7 @@ const useRootStyles = makeStyles({
                 color: tokens.colorNeutralForeground2BrandHover
             }
         },
-        ':hover:active': {
+        ':hover:active,:active:focus-visible': {
             [`& .${compoundButtonClassNames.secondaryContent}`]: {
                 color: tokens.colorNeutralForeground2BrandPressed
             }
@@ -134,7 +134,7 @@ const useRootStyles = makeStyles({
                 color: tokens.colorNeutralForegroundDisabled
             }
         },
-        ':hover:active': {
+        ':hover:active,:active:focus-visible': {
             [`& .${compoundButtonClassNames.secondaryContent}`]: {
                 color: tokens.colorNeutralForegroundDisabled
             }
@@ -151,7 +151,7 @@ const useRootStyles = makeStyles({
                     color: 'GrayText'
                 }
             },
-            ':hover:active': {
+            ':hover:active,:active:focus-visible': {
                 [`& .${compoundButtonClassNames.secondaryContent}`]: {
                     color: 'GrayText'
                 }

package/lib/components/CompoundButton/useCompoundButtonStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CompoundButton/useCompoundButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CompoundButtonSlots, CompoundButtonState } from './CompoundButton.types';\n\nexport const compoundButtonClassNames: SlotClassNames<CompoundButtonSlots> = {\n  root: 'fui-CompoundButton',\n  icon: 'fui-CompoundButton__icon',\n  contentContainer: 'fui-CompoundButton__contentContainer',\n  secondaryContent: 'fui-CompoundButton__secondaryContent',\n};\n\nconst useRootStyles = makeStyles({\n  // Base styles\n  base: {\n    height: 'auto',\n\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2Hover,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2Pressed,\n      },\n    },\n  },\n\n  // High contrast styles\n  highContrast: {\n    '@media (forced-colors: active)': {\n      ':hover': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'Highlight',\n        },\n      },\n\n      ':hover:active': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'Highlight',\n        },\n      },\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    /* No styles */\n  },\n  primary: {\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundOnBrand,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundOnBrand,\n      },\n    },\n\n    '@media (forced-colors: active)': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: 'HighlightText',\n      },\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2Hover,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2Pressed,\n      },\n    },\n\n    '@media (forced-colors: active)': {\n      ':hover': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'Canvas',\n        },\n      },\n      ':hover:active': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'Canvas',\n        },\n      },\n    },\n  },\n  transparent: {\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2BrandHover,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2BrandPressed,\n      },\n    },\n  },\n\n  // Size variations\n  small: {\n    padding: `${tokens.spacingHorizontalS} ${tokens.spacingHorizontalS} ${tokens.spacingHorizontalMNudge} ${tokens.spacingHorizontalS}`,\n\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: tokens.lineHeightBase300,\n  },\n  medium: {\n    padding: `14px ${tokens.spacingHorizontalM} ${tokens.spacingHorizontalL} ${tokens.spacingHorizontalM}`,\n\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: tokens.lineHeightBase300,\n  },\n  large: {\n    padding: `18px ${tokens.spacingHorizontalL} ${tokens.spacingHorizontalXL} ${tokens.spacingHorizontalL}`,\n\n    fontSize: tokens.fontSizeBase400,\n    lineHeight: tokens.lineHeightBase400,\n  },\n\n  // Disabled styles\n  disabled: {\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n  },\n\n  // Disabled high contrast styles\n  disabledHighContrast: {\n    '@media (forced-colors: active)': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: 'GrayText',\n      },\n\n      ':hover': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'GrayText',\n        },\n      },\n\n      ':hover:active': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'GrayText',\n        },\n      },\n    },\n  },\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n  // Size variations\n  small: {\n    padding: tokens.spacingHorizontalXS,\n\n    maxWidth: '48px',\n    minWidth: '48px',\n  },\n  medium: {\n    padding: tokens.spacingHorizontalSNudge,\n\n    maxWidth: '52px',\n    minWidth: '52px',\n  },\n  large: {\n    padding: tokens.spacingHorizontalS,\n\n    maxWidth: '56px',\n    minWidth: '56px',\n  },\n});\n\nconst useIconStyles = makeStyles({\n  // Base styles\n  base: {\n    fontSize: '40px',\n    height: '40px',\n    width: '40px',\n  },\n\n  // Icon position variations\n  before: {\n    marginRight: tokens.spacingHorizontalM,\n  },\n  after: {\n    marginLeft: tokens.spacingHorizontalM,\n  },\n});\n\nconst useContentContainerStyles = makeStyles({\n  // Base styles\n  base: {\n    display: 'flex',\n    flexDirection: 'column',\n    textAlign: 'left',\n  },\n});\n\nconst useSecondaryContentStyles = makeStyles({\n  // Base styles\n  base: {\n    lineHeight: '100%',\n    fontWeight: tokens.fontWeightRegular,\n  },\n\n  // Size variations\n  small: {\n    fontSize: tokens.fontSizeBase200,\n  },\n  medium: {\n    fontSize: tokens.fontSizeBase200,\n  },\n  large: {\n    fontSize: tokens.fontSizeBase300,\n  },\n});\n\nexport const useCompoundButtonStyles_unstable = (state: CompoundButtonState): CompoundButtonState => {\n  'use no memo';\n\n  const rootStyles = useRootStyles();\n  const rootIconOnlyStyles = useRootIconOnlyStyles();\n  const iconStyles = useIconStyles();\n  const contentContainerStyles = useContentContainerStyles();\n  const secondaryContentStyles = useSecondaryContentStyles();\n\n  const { appearance, disabled, disabledFocusable, iconOnly, iconPosition, size } = state;\n\n  state.root.className = mergeClasses(\n    compoundButtonClassNames.root,\n\n    // Root styles\n    rootStyles.base,\n    rootStyles.highContrast,\n    appearance && rootStyles[appearance],\n    rootStyles[size],\n\n    // Disabled styles\n    (disabled || disabledFocusable) && rootStyles.disabled,\n    (disabled || disabledFocusable) && rootStyles.disabledHighContrast,\n\n    // Icon-only styles\n    iconOnly && rootIconOnlyStyles[size],\n\n    // User provided class name\n    state.root.className,\n  );\n\n  state.contentContainer.className = mergeClasses(\n    compoundButtonClassNames.contentContainer,\n    contentContainerStyles.base,\n    state.contentContainer.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      compoundButtonClassNames.icon,\n      iconStyles.base,\n      state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition],\n      state.icon.className,\n    );\n  }\n\n  if (state.secondaryContent) {\n    state.secondaryContent.className = mergeClasses(\n      compoundButtonClassNames.secondaryContent,\n      secondaryContentStyles.base,\n      secondaryContentStyles[size],\n      state.secondaryContent.className,\n    );\n  }\n\n  useButtonStyles_unstable(state);\n\n  return state;\n};\n"],"names":["tokens","mergeClasses","makeStyles","useButtonStyles_unstable","compoundButtonClassNames","root","icon","contentContainer","secondaryContent","useRootStyles","base","height","color","colorNeutralForeground2","colorNeutralForeground2Hover","colorNeutralForeground2Pressed","highContrast","outline","primary","colorNeutralForegroundOnBrand","secondary","subtle","transparent","colorNeutralForeground2BrandHover","colorNeutralForeground2BrandPressed","small","padding","spacingHorizontalS","spacingHorizontalMNudge","fontSize","fontSizeBase300","lineHeight","lineHeightBase300","medium","spacingHorizontalM","spacingHorizontalL","large","spacingHorizontalXL","fontSizeBase400","lineHeightBase400","disabled","colorNeutralForegroundDisabled","disabledHighContrast","useRootIconOnlyStyles","spacingHorizontalXS","maxWidth","minWidth","spacingHorizontalSNudge","useIconStyles","width","before","marginRight","after","marginLeft","useContentContainerStyles","display","flexDirection","textAlign","useSecondaryContentStyles","fontWeight","fontWeightRegular","fontSizeBase200","useCompoundButtonStyles_unstable","state","rootStyles","rootIconOnlyStyles","iconStyles","contentContainerStyles","secondaryContentStyles","appearance","disabledFocusable","iconOnly","iconPosition","size","className","children","undefined"],"mappings":"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"}
+{"version":3,"sources":["../src/components/CompoundButton/useCompoundButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CompoundButtonSlots, CompoundButtonState } from './CompoundButton.types';\n\nexport const compoundButtonClassNames: SlotClassNames<CompoundButtonSlots> = {\n  root: 'fui-CompoundButton',\n  icon: 'fui-CompoundButton__icon',\n  contentContainer: 'fui-CompoundButton__contentContainer',\n  secondaryContent: 'fui-CompoundButton__secondaryContent',\n};\n\nconst useRootStyles = makeStyles({\n  // Base styles\n  base: {\n    height: 'auto',\n\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2Hover,\n      },\n    },\n\n    ':hover:active,:active:focus-visible': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2Pressed,\n      },\n    },\n  },\n\n  // High contrast styles\n  highContrast: {\n    '@media (forced-colors: active)': {\n      ':hover': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'Highlight',\n        },\n      },\n\n      ':hover:active,:active:focus-visible': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'Highlight',\n        },\n      },\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    /* No styles */\n  },\n  primary: {\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundOnBrand,\n      },\n    },\n\n    ':hover:active,:active:focus-visible': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundOnBrand,\n      },\n    },\n\n    '@media (forced-colors: active)': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: 'HighlightText',\n      },\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2Hover,\n      },\n    },\n\n    ':hover:active,:active:focus-visible': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2Pressed,\n      },\n    },\n\n    '@media (forced-colors: active)': {\n      ':hover': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'Canvas',\n        },\n      },\n      ':hover:active,:active:focus-visible': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'Canvas',\n        },\n      },\n    },\n  },\n  transparent: {\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2BrandHover,\n      },\n    },\n\n    ':hover:active,:active:focus-visible': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2BrandPressed,\n      },\n    },\n  },\n\n  // Size variations\n  small: {\n    padding: `${tokens.spacingHorizontalS} ${tokens.spacingHorizontalS} ${tokens.spacingHorizontalMNudge} ${tokens.spacingHorizontalS}`,\n\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: tokens.lineHeightBase300,\n  },\n  medium: {\n    padding: `14px ${tokens.spacingHorizontalM} ${tokens.spacingHorizontalL} ${tokens.spacingHorizontalM}`,\n\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: tokens.lineHeightBase300,\n  },\n  large: {\n    padding: `18px ${tokens.spacingHorizontalL} ${tokens.spacingHorizontalXL} ${tokens.spacingHorizontalL}`,\n\n    fontSize: tokens.fontSizeBase400,\n    lineHeight: tokens.lineHeightBase400,\n  },\n\n  // Disabled styles\n  disabled: {\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n\n    ':hover:active,:active:focus-visible': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n  },\n\n  // Disabled high contrast styles\n  disabledHighContrast: {\n    '@media (forced-colors: active)': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: 'GrayText',\n      },\n\n      ':hover': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'GrayText',\n        },\n      },\n\n      ':hover:active,:active:focus-visible': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'GrayText',\n        },\n      },\n    },\n  },\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n  // Size variations\n  small: {\n    padding: tokens.spacingHorizontalXS,\n\n    maxWidth: '48px',\n    minWidth: '48px',\n  },\n  medium: {\n    padding: tokens.spacingHorizontalSNudge,\n\n    maxWidth: '52px',\n    minWidth: '52px',\n  },\n  large: {\n    padding: tokens.spacingHorizontalS,\n\n    maxWidth: '56px',\n    minWidth: '56px',\n  },\n});\n\nconst useIconStyles = makeStyles({\n  // Base styles\n  base: {\n    fontSize: '40px',\n    height: '40px',\n    width: '40px',\n  },\n\n  // Icon position variations\n  before: {\n    marginRight: tokens.spacingHorizontalM,\n  },\n  after: {\n    marginLeft: tokens.spacingHorizontalM,\n  },\n});\n\nconst useContentContainerStyles = makeStyles({\n  // Base styles\n  base: {\n    display: 'flex',\n    flexDirection: 'column',\n    textAlign: 'left',\n  },\n});\n\nconst useSecondaryContentStyles = makeStyles({\n  // Base styles\n  base: {\n    lineHeight: '100%',\n    fontWeight: tokens.fontWeightRegular,\n  },\n\n  // Size variations\n  small: {\n    fontSize: tokens.fontSizeBase200,\n  },\n  medium: {\n    fontSize: tokens.fontSizeBase200,\n  },\n  large: {\n    fontSize: tokens.fontSizeBase300,\n  },\n});\n\nexport const useCompoundButtonStyles_unstable = (state: CompoundButtonState): CompoundButtonState => {\n  'use no memo';\n\n  const rootStyles = useRootStyles();\n  const rootIconOnlyStyles = useRootIconOnlyStyles();\n  const iconStyles = useIconStyles();\n  const contentContainerStyles = useContentContainerStyles();\n  const secondaryContentStyles = useSecondaryContentStyles();\n\n  const { appearance, disabled, disabledFocusable, iconOnly, iconPosition, size } = state;\n\n  state.root.className = mergeClasses(\n    compoundButtonClassNames.root,\n\n    // Root styles\n    rootStyles.base,\n    rootStyles.highContrast,\n    appearance && rootStyles[appearance],\n    rootStyles[size],\n\n    // Disabled styles\n    (disabled || disabledFocusable) && rootStyles.disabled,\n    (disabled || disabledFocusable) && rootStyles.disabledHighContrast,\n\n    // Icon-only styles\n    iconOnly && rootIconOnlyStyles[size],\n\n    // User provided class name\n    state.root.className,\n  );\n\n  state.contentContainer.className = mergeClasses(\n    compoundButtonClassNames.contentContainer,\n    contentContainerStyles.base,\n    state.contentContainer.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      compoundButtonClassNames.icon,\n      iconStyles.base,\n      state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition],\n      state.icon.className,\n    );\n  }\n\n  if (state.secondaryContent) {\n    state.secondaryContent.className = mergeClasses(\n      compoundButtonClassNames.secondaryContent,\n      secondaryContentStyles.base,\n      secondaryContentStyles[size],\n      state.secondaryContent.className,\n    );\n  }\n\n  useButtonStyles_unstable(state);\n\n  return state;\n};\n"],"names":["tokens","mergeClasses","makeStyles","useButtonStyles_unstable","compoundButtonClassNames","root","icon","contentContainer","secondaryContent","useRootStyles","base","height","color","colorNeutralForeground2","colorNeutralForeground2Hover","colorNeutralForeground2Pressed","highContrast","outline","primary","colorNeutralForegroundOnBrand","secondary","subtle","transparent","colorNeutralForeground2BrandHover","colorNeutralForeground2BrandPressed","small","padding","spacingHorizontalS","spacingHorizontalMNudge","fontSize","fontSizeBase300","lineHeight","lineHeightBase300","medium","spacingHorizontalM","spacingHorizontalL","large","spacingHorizontalXL","fontSizeBase400","lineHeightBase400","disabled","colorNeutralForegroundDisabled","disabledHighContrast","useRootIconOnlyStyles","spacingHorizontalXS","maxWidth","minWidth","spacingHorizontalSNudge","useIconStyles","width","before","marginRight","after","marginLeft","useContentContainerStyles","display","flexDirection","textAlign","useSecondaryContentStyles","fontWeight","fontWeightRegular","fontSizeBase200","useCompoundButtonStyles_unstable","state","rootStyles","rootIconOnlyStyles","iconStyles","contentContainerStyles","secondaryContentStyles","appearance","disabledFocusable","iconOnly","iconPosition","size","className","children","undefined"],"mappings":"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"}

package/lib/components/MenuButton/useMenuButtonStyles.styles.headless.js

@@ -0,0 +1,44 @@
+'use client';
+export const menuButtonClassNames = {
+    root: 'fui-MenuButton',
+    icon: 'fui-MenuButton__icon',
+    menuIcon: 'fui-MenuButton__menuIcon'
+};
+/**
+ * Attaches only semantic slot class names and state modifiers
+ */ export const useMenuButtonStyles_unstable = (state)=>{
+    'use no memo';
+    const { appearance, disabled, disabledFocusable, shape, size, icon, iconOnly } = state;
+    const expanded = !!state.root['aria-expanded'];
+    state.root.className = [
+        menuButtonClassNames.root,
+        // Appearance
+        appearance && `${menuButtonClassNames.root}--${appearance}`,
+        // Size
+        size && `${menuButtonClassNames.root}--${size}`,
+        // Shape
+        shape && `${menuButtonClassNames.root}--${shape}`,
+        // Disabled styles
+        disabled && `${menuButtonClassNames.root}--disabled`,
+        disabledFocusable && `${menuButtonClassNames.root}--disabledFocusable`,
+        // Expanded
+        expanded && `${menuButtonClassNames.root}--expanded`,
+        // Icons
+        icon && iconOnly && `${menuButtonClassNames.root}--iconOnly`,
+        // User provided class name
+        state.root.className
+    ].filter(Boolean).join(' ');
+    if (state.icon) {
+        state.icon.className = [
+            menuButtonClassNames.icon,
+            state.icon.className
+        ].filter(Boolean).join(' ');
+    }
+    if (state.menuIcon) {
+        state.menuIcon.className = [
+            menuButtonClassNames.menuIcon,
+            state.menuIcon.className
+        ].filter(Boolean).join(' ');
+    }
+    return state;
+};

package/lib/components/MenuButton/useMenuButtonStyles.styles.headless.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MenuButton/useMenuButtonStyles.styles.headless.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MenuButtonSlots, MenuButtonState } from './MenuButton.types';\n\nexport const menuButtonClassNames: SlotClassNames<MenuButtonSlots> = {\n  root: 'fui-MenuButton',\n  icon: 'fui-MenuButton__icon',\n  menuIcon: 'fui-MenuButton__menuIcon',\n};\n\n/**\n * Attaches only semantic slot class names and state modifiers\n */\nexport const useMenuButtonStyles_unstable = (state: MenuButtonState): MenuButtonState => {\n  'use no memo';\n\n  const { appearance, disabled, disabledFocusable, shape, size, icon, iconOnly } = state;\n  const expanded = !!state.root['aria-expanded'];\n\n  state.root.className = [\n    menuButtonClassNames.root,\n\n    // Appearance\n    appearance && `${menuButtonClassNames.root}--${appearance}`,\n\n    // Size\n    size && `${menuButtonClassNames.root}--${size}`,\n\n    // Shape\n    shape && `${menuButtonClassNames.root}--${shape}`,\n\n    // Disabled styles\n    disabled && `${menuButtonClassNames.root}--disabled`,\n    disabledFocusable && `${menuButtonClassNames.root}--disabledFocusable`,\n\n    // Expanded\n    expanded && `${menuButtonClassNames.root}--expanded`,\n\n    // Icons\n    icon && iconOnly && `${menuButtonClassNames.root}--iconOnly`,\n\n    // User provided class name\n    state.root.className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  if (state.icon) {\n    state.icon.className = [menuButtonClassNames.icon, state.icon.className].filter(Boolean).join(' ');\n  }\n\n  if (state.menuIcon) {\n    state.menuIcon.className = [menuButtonClassNames.menuIcon, state.menuIcon.className].filter(Boolean).join(' ');\n  }\n\n  return state;\n};\n"],"names":["menuButtonClassNames","root","icon","menuIcon","useMenuButtonStyles_unstable","state","appearance","disabled","disabledFocusable","shape","size","iconOnly","expanded","className","filter","Boolean","join"],"mappings":"AAAA;AAKA,OAAO,MAAMA,uBAAwD;IACnEC,MAAM;IACNC,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC;IAC3C;IAEA,MAAM,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,iBAAiB,EAAEC,KAAK,EAAEC,IAAI,EAAER,IAAI,EAAES,QAAQ,EAAE,GAAGN;IACjF,MAAMO,WAAW,CAAC,CAACP,MAAMJ,IAAI,CAAC,gBAAgB;IAE9CI,MAAMJ,IAAI,CAACY,SAAS,GAAG;QACrBb,qBAAqBC,IAAI;QAEzB,aAAa;QACbK,cAAc,GAAGN,qBAAqBC,IAAI,CAAC,EAAE,EAAEK,YAAY;QAE3D,OAAO;QACPI,QAAQ,GAAGV,qBAAqBC,IAAI,CAAC,EAAE,EAAES,MAAM;QAE/C,QAAQ;QACRD,SAAS,GAAGT,qBAAqBC,IAAI,CAAC,EAAE,EAAEQ,OAAO;QAEjD,kBAAkB;QAClBF,YAAY,GAAGP,qBAAqBC,IAAI,CAAC,UAAU,CAAC;QACpDO,qBAAqB,GAAGR,qBAAqBC,IAAI,CAAC,mBAAmB,CAAC;QAEtE,WAAW;QACXW,YAAY,GAAGZ,qBAAqBC,IAAI,CAAC,UAAU,CAAC;QAEpD,QAAQ;QACRC,QAAQS,YAAY,GAAGX,qBAAqBC,IAAI,CAAC,UAAU,CAAC;QAE5D,2BAA2B;QAC3BI,MAAMJ,IAAI,CAACY,SAAS;KACrB,CACEC,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,IAAIX,MAAMH,IAAI,EAAE;QACdG,MAAMH,IAAI,CAACW,SAAS,GAAG;YAACb,qBAAqBE,IAAI;YAAEG,MAAMH,IAAI,CAACW,SAAS;SAAC,CAACC,MAAM,CAACC,SAASC,IAAI,CAAC;IAChG;IAEA,IAAIX,MAAMF,QAAQ,EAAE;QAClBE,MAAMF,QAAQ,CAACU,SAAS,GAAG;YAACb,qBAAqBG,QAAQ;YAAEE,MAAMF,QAAQ,CAACU,SAAS;SAAC,CAACC,MAAM,CAACC,SAASC,IAAI,CAAC;IAC5G;IAEA,OAAOX;AACT,EAAE"}

package/lib/components/MenuButton/useMenuButtonStyles.styles.js

@@ -62,11 +62,11 @@ const useIconExpandedStyles = /*#__PURE__*/__styles({
     sj55zd: "f1qj7y59"
   },
   highContrast: {
-    ze5xyy: "f4xjyn1"
+    Bahaeuw: "f1v3eptx"
   }
 }, {
   d: [".f14nttnl{color:var(--colorNeutralForeground1Selected);}", ".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}"],
-  m: [["@media (forced-colors: active){.f4xjyn1:hover{color:Highlight;}}", {
+  m: [["@media (forced-colors: active){.f1v3eptx:hover{color:Highlight;}}", {
     m: "(forced-colors: active)"
   }]]
 });

package/lib/components/MenuButton/useMenuButtonStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["iconFilledClassName","iconRegularClassName","tokens","mergeClasses","__styles","shorthands","useButtonStyles_unstable","menuButtonClassNames","root","icon","menuIcon","useRootExpandedStyles","base","D0sxk3","t6yez3","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","sj55zd","primary","De3pzq","secondary","subtle","transparent","d","useIconExpandedStyles","highContrast","ze5xyy","m","useMenuIconStyles","Bg96gwp","small","Be2twd7","Bqenvij","a9b677","medium","large","notIconOnly","Frg6f3","useMenuButtonStyles_unstable","state","rootExpandedStyles","iconExpandedStyles","menuIconStyles","className","appearance","size","iconOnly","iconPosition"],"sources":["useMenuButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { tokens } from '@fluentui/react-theme';\nimport { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\nexport const menuButtonClassNames = {\n    root: 'fui-MenuButton',\n    icon: 'fui-MenuButton__icon',\n    menuIcon: 'fui-MenuButton__menuIcon'\n};\nconst useRootExpandedStyles = makeStyles({\n    base: {\n        [`& .${iconFilledClassName}`]: {\n            display: 'inline'\n        },\n        [`& .${iconRegularClassName}`]: {\n            display: 'none'\n        }\n    },\n    // Appearance variations\n    outline: {\n        ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n        ...shorthands.borderWidth(tokens.strokeWidthThicker),\n        color: tokens.colorNeutralForeground1Selected\n    },\n    primary: {\n        backgroundColor: tokens.colorBrandBackgroundSelected\n    },\n    secondary: {\n        backgroundColor: tokens.colorNeutralBackground1Selected,\n        ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n        color: tokens.colorNeutralForeground1Selected\n    },\n    subtle: {\n        backgroundColor: tokens.colorSubtleBackgroundSelected,\n        color: tokens.colorNeutralForeground2Selected\n    },\n    transparent: {\n        backgroundColor: tokens.colorTransparentBackgroundSelected,\n        color: tokens.colorNeutralForeground2BrandSelected\n    }\n});\nconst useIconExpandedStyles = makeStyles({\n    // Appearance variations\n    outline: {\n        color: tokens.colorNeutralForeground1Selected\n    },\n    primary: {\n    },\n    secondary: {\n        color: tokens.colorNeutralForeground1Selected\n    },\n    subtle: {\n        color: tokens.colorNeutralForeground2BrandSelected\n    },\n    transparent: {\n        color: tokens.colorNeutralForeground2BrandSelected\n    },\n    highContrast: {\n        // High contrast styles\n        '@media (forced-colors: active)': {\n            ':hover': {\n                color: 'Highlight'\n            }\n        }\n    }\n});\nconst useMenuIconStyles = makeStyles({\n    base: {\n        lineHeight: 0\n    },\n    // Size appearance\n    small: {\n        fontSize: '12px',\n        height: '12px',\n        lineHeight: tokens.lineHeightBase200,\n        width: '12px'\n    },\n    medium: {\n        fontSize: '12px',\n        height: '12px',\n        lineHeight: tokens.lineHeightBase200,\n        width: '12px'\n    },\n    large: {\n        fontSize: '16px',\n        height: '16px',\n        lineHeight: tokens.lineHeightBase400,\n        width: '16px'\n    },\n    // Not-icon only\n    notIconOnly: {\n        marginLeft: tokens.spacingHorizontalXS\n    }\n});\nexport const useMenuButtonStyles_unstable = (state)=>{\n    'use no memo';\n    const rootExpandedStyles = useRootExpandedStyles();\n    const iconExpandedStyles = useIconExpandedStyles();\n    const menuIconStyles = useMenuIconStyles();\n    state.root.className = mergeClasses(menuButtonClassNames.root, state.root['aria-expanded'] && rootExpandedStyles.base, state.root['aria-expanded'] && rootExpandedStyles[state.appearance], state.root.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(menuButtonClassNames.icon, state.root['aria-expanded'] && iconExpandedStyles[state.appearance] && iconExpandedStyles.highContrast, state.icon.className);\n    }\n    if (state.menuIcon) {\n        state.menuIcon.className = mergeClasses(menuButtonClassNames.menuIcon, menuIconStyles.base, menuIconStyles[state.size], !state.iconOnly && menuIconStyles.notIconOnly, state.menuIcon.className);\n    }\n    useButtonStyles_unstable({\n        ...state,\n        iconPosition: 'before'\n    });\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,mBAAmB,EAAEC,oBAAoB,QAAQ,uBAAuB;AACjF,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,YAAY,EAAAC,QAAA,EAAcC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,wBAAwB,QAAQ,kCAAkC;AAC3E,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE,gBAAgB;EACtBC,IAAI,EAAE,sBAAsB;EAC5BC,QAAQ,EAAE;AACd,CAAC;AACD,MAAMC,qBAAqB,gBAAGP,QAAA;EAAAQ,IAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,SAAA;IAAAD,MAAA;IAAAV,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAK,MAAA;EAAA;EAAAI,MAAA;IAAAF,MAAA;IAAAF,MAAA;EAAA;EAAAK,WAAA;IAAAH,MAAA;IAAAF,MAAA;EAAA;AAAA;EAAAM,CAAA;AAAA,CA+B7B,CAAC;AACF,MAAMC,qBAAqB,gBAAG3B,QAAA;EAAAW,OAAA;IAAAS,MAAA;EAAA;EAAAC,OAAA;EAAAE,SAAA;IAAAH,MAAA;EAAA;EAAAI,MAAA;IAAAJ,MAAA;EAAA;EAAAK,WAAA;IAAAL,MAAA;EAAA;EAAAQ,YAAA;IAAAC,MAAA;EAAA;AAAA;EAAAH,CAAA;EAAAI,CAAA;IAAAA,CAAA;EAAA;AAAA,CAwB7B,CAAC;AACF,MAAMC,iBAAiB,gBAAG/B,QAAA;EAAAQ,IAAA;IAAAwB,OAAA;EAAA;EAAAC,KAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAH,OAAA;IAAAI,MAAA;EAAA;EAAAC,MAAA;IAAAH,OAAA;IAAAC,OAAA;IAAAH,OAAA;IAAAI,MAAA;EAAA;EAAAE,KAAA;IAAAJ,OAAA;IAAAC,OAAA;IAAAH,OAAA;IAAAI,MAAA;EAAA;EAAAG,WAAA;IAAAC,MAAA;EAAA;AAAA;EAAAd,CAAA;AAAA,CA2BzB,CAAC;AACF,OAAO,MAAMe,4BAA4B,GAAIC,KAAK,IAAG;EACjD,aAAa;;EACb,MAAMC,kBAAkB,GAAGpC,qBAAqB,CAAC,CAAC;EAClD,MAAMqC,kBAAkB,GAAGjB,qBAAqB,CAAC,CAAC;EAClD,MAAMkB,cAAc,GAAGd,iBAAiB,CAAC,CAAC;EAC1CW,KAAK,CAACtC,IAAI,CAAC0C,SAAS,GAAG/C,YAAY,CAACI,oBAAoB,CAACC,IAAI,EAAEsC,KAAK,CAACtC,IAAI,CAAC,eAAe,CAAC,IAAIuC,kBAAkB,CAACnC,IAAI,EAAEkC,KAAK,CAACtC,IAAI,CAAC,eAAe,CAAC,IAAIuC,kBAAkB,CAACD,KAAK,CAACK,UAAU,CAAC,EAAEL,KAAK,CAACtC,IAAI,CAAC0C,SAAS,CAAC;EACjN,IAAIJ,KAAK,CAACrC,IAAI,EAAE;IACZqC,KAAK,CAACrC,IAAI,CAACyC,SAAS,GAAG/C,YAAY,CAACI,oBAAoB,CAACE,IAAI,EAAEqC,KAAK,CAACtC,IAAI,CAAC,eAAe,CAAC,IAAIwC,kBAAkB,CAACF,KAAK,CAACK,UAAU,CAAC,IAAIH,kBAAkB,CAAChB,YAAY,EAAEc,KAAK,CAACrC,IAAI,CAACyC,SAAS,CAAC;EAChM;EACA,IAAIJ,KAAK,CAACpC,QAAQ,EAAE;IAChBoC,KAAK,CAACpC,QAAQ,CAACwC,SAAS,GAAG/C,YAAY,CAACI,oBAAoB,CAACG,QAAQ,EAAEuC,cAAc,CAACrC,IAAI,EAAEqC,cAAc,CAACH,KAAK,CAACM,IAAI,CAAC,EAAE,CAACN,KAAK,CAACO,QAAQ,IAAIJ,cAAc,CAACN,WAAW,EAAEG,KAAK,CAACpC,QAAQ,CAACwC,SAAS,CAAC;EACpM;EACA5C,wBAAwB,CAAC;IACrB,GAAGwC,KAAK;IACRQ,YAAY,EAAE;EAClB,CAAC,CAAC;EACF,OAAOR,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["iconFilledClassName","iconRegularClassName","tokens","mergeClasses","__styles","shorthands","useButtonStyles_unstable","menuButtonClassNames","root","icon","menuIcon","useRootExpandedStyles","base","D0sxk3","t6yez3","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","sj55zd","primary","De3pzq","secondary","subtle","transparent","d","useIconExpandedStyles","highContrast","Bahaeuw","m","useMenuIconStyles","Bg96gwp","small","Be2twd7","Bqenvij","a9b677","medium","large","notIconOnly","Frg6f3","useMenuButtonStyles_unstable","state","rootExpandedStyles","iconExpandedStyles","menuIconStyles","className","appearance","size","iconOnly","iconPosition"],"sources":["useMenuButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { tokens } from '@fluentui/react-theme';\nimport { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\nexport const menuButtonClassNames = {\n    root: 'fui-MenuButton',\n    icon: 'fui-MenuButton__icon',\n    menuIcon: 'fui-MenuButton__menuIcon'\n};\nconst useRootExpandedStyles = makeStyles({\n    base: {\n        [`& .${iconFilledClassName}`]: {\n            display: 'inline'\n        },\n        [`& .${iconRegularClassName}`]: {\n            display: 'none'\n        }\n    },\n    // Appearance variations\n    outline: {\n        ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n        ...shorthands.borderWidth(tokens.strokeWidthThicker),\n        color: tokens.colorNeutralForeground1Selected\n    },\n    primary: {\n        backgroundColor: tokens.colorBrandBackgroundSelected\n    },\n    secondary: {\n        backgroundColor: tokens.colorNeutralBackground1Selected,\n        ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n        color: tokens.colorNeutralForeground1Selected\n    },\n    subtle: {\n        backgroundColor: tokens.colorSubtleBackgroundSelected,\n        color: tokens.colorNeutralForeground2Selected\n    },\n    transparent: {\n        backgroundColor: tokens.colorTransparentBackgroundSelected,\n        color: tokens.colorNeutralForeground2BrandSelected\n    }\n});\nconst useIconExpandedStyles = makeStyles({\n    // Appearance variations\n    outline: {\n        color: tokens.colorNeutralForeground1Selected\n    },\n    primary: {\n    },\n    secondary: {\n        color: tokens.colorNeutralForeground1Selected\n    },\n    subtle: {\n        color: tokens.colorNeutralForeground2BrandSelected\n    },\n    transparent: {\n        color: tokens.colorNeutralForeground2BrandSelected\n    },\n    highContrast: {\n        // High contrast styles\n        '@media (forced-colors: active)': {\n            ':hover': {\n                color: 'Highlight'\n            }\n        }\n    }\n});\nconst useMenuIconStyles = makeStyles({\n    base: {\n        lineHeight: 0\n    },\n    // Size appearance\n    small: {\n        fontSize: '12px',\n        height: '12px',\n        lineHeight: tokens.lineHeightBase200,\n        width: '12px'\n    },\n    medium: {\n        fontSize: '12px',\n        height: '12px',\n        lineHeight: tokens.lineHeightBase200,\n        width: '12px'\n    },\n    large: {\n        fontSize: '16px',\n        height: '16px',\n        lineHeight: tokens.lineHeightBase400,\n        width: '16px'\n    },\n    // Not-icon only\n    notIconOnly: {\n        marginLeft: tokens.spacingHorizontalXS\n    }\n});\nexport const useMenuButtonStyles_unstable = (state)=>{\n    'use no memo';\n    const rootExpandedStyles = useRootExpandedStyles();\n    const iconExpandedStyles = useIconExpandedStyles();\n    const menuIconStyles = useMenuIconStyles();\n    state.root.className = mergeClasses(menuButtonClassNames.root, state.root['aria-expanded'] && rootExpandedStyles.base, state.root['aria-expanded'] && rootExpandedStyles[state.appearance], state.root.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(menuButtonClassNames.icon, state.root['aria-expanded'] && iconExpandedStyles[state.appearance] && iconExpandedStyles.highContrast, state.icon.className);\n    }\n    if (state.menuIcon) {\n        state.menuIcon.className = mergeClasses(menuButtonClassNames.menuIcon, menuIconStyles.base, menuIconStyles[state.size], !state.iconOnly && menuIconStyles.notIconOnly, state.menuIcon.className);\n    }\n    useButtonStyles_unstable({\n        ...state,\n        iconPosition: 'before'\n    });\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/MenuButton/useMenuButtonStyles.styles.raw.headless.js

@@ -0,0 +1,44 @@
+'use client';
+export const menuButtonClassNames = {
+    root: 'fui-MenuButton',
+    icon: 'fui-MenuButton__icon',
+    menuIcon: 'fui-MenuButton__menuIcon'
+};
+/**
+ * Attaches only semantic slot class names and state modifiers
+ */ export const useMenuButtonStyles_unstable = (state)=>{
+    'use no memo';
+    const { appearance, disabled, disabledFocusable, shape, size, icon, iconOnly } = state;
+    const expanded = !!state.root['aria-expanded'];
+    state.root.className = [
+        menuButtonClassNames.root,
+        // Appearance
+        appearance && `${menuButtonClassNames.root}--${appearance}`,
+        // Size
+        size && `${menuButtonClassNames.root}--${size}`,
+        // Shape
+        shape && `${menuButtonClassNames.root}--${shape}`,
+        // Disabled styles
+        disabled && `${menuButtonClassNames.root}--disabled`,
+        disabledFocusable && `${menuButtonClassNames.root}--disabledFocusable`,
+        // Expanded
+        expanded && `${menuButtonClassNames.root}--expanded`,
+        // Icons
+        icon && iconOnly && `${menuButtonClassNames.root}--iconOnly`,
+        // User provided class name
+        state.root.className
+    ].filter(Boolean).join(' ');
+    if (state.icon) {
+        state.icon.className = [
+            menuButtonClassNames.icon,
+            state.icon.className
+        ].filter(Boolean).join(' ');
+    }
+    if (state.menuIcon) {
+        state.menuIcon.className = [
+            menuButtonClassNames.menuIcon,
+            state.menuIcon.className
+        ].filter(Boolean).join(' ');
+    }
+    return state;
+};

package/lib/components/MenuButton/useMenuButtonStyles.styles.raw.headless.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MenuButton/useMenuButtonStyles.styles.headless.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MenuButtonSlots, MenuButtonState } from './MenuButton.types';\n\nexport const menuButtonClassNames: SlotClassNames<MenuButtonSlots> = {\n  root: 'fui-MenuButton',\n  icon: 'fui-MenuButton__icon',\n  menuIcon: 'fui-MenuButton__menuIcon',\n};\n\n/**\n * Attaches only semantic slot class names and state modifiers\n */\nexport const useMenuButtonStyles_unstable = (state: MenuButtonState): MenuButtonState => {\n  'use no memo';\n\n  const { appearance, disabled, disabledFocusable, shape, size, icon, iconOnly } = state;\n  const expanded = !!state.root['aria-expanded'];\n\n  state.root.className = [\n    menuButtonClassNames.root,\n\n    // Appearance\n    appearance && `${menuButtonClassNames.root}--${appearance}`,\n\n    // Size\n    size && `${menuButtonClassNames.root}--${size}`,\n\n    // Shape\n    shape && `${menuButtonClassNames.root}--${shape}`,\n\n    // Disabled styles\n    disabled && `${menuButtonClassNames.root}--disabled`,\n    disabledFocusable && `${menuButtonClassNames.root}--disabledFocusable`,\n\n    // Expanded\n    expanded && `${menuButtonClassNames.root}--expanded`,\n\n    // Icons\n    icon && iconOnly && `${menuButtonClassNames.root}--iconOnly`,\n\n    // User provided class name\n    state.root.className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  if (state.icon) {\n    state.icon.className = [menuButtonClassNames.icon, state.icon.className].filter(Boolean).join(' ');\n  }\n\n  if (state.menuIcon) {\n    state.menuIcon.className = [menuButtonClassNames.menuIcon, state.menuIcon.className].filter(Boolean).join(' ');\n  }\n\n  return state;\n};\n"],"names":["menuButtonClassNames","root","icon","menuIcon","useMenuButtonStyles_unstable","state","appearance","disabled","disabledFocusable","shape","size","iconOnly","expanded","className","filter","Boolean","join"],"mappings":"AAAA;AAKA,OAAO,MAAMA,uBAAwD;IACnEC,MAAM;IACNC,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC;IAC3C;IAEA,MAAM,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,iBAAiB,EAAEC,KAAK,EAAEC,IAAI,EAAER,IAAI,EAAES,QAAQ,EAAE,GAAGN;IACjF,MAAMO,WAAW,CAAC,CAACP,MAAMJ,IAAI,CAAC,gBAAgB;IAE9CI,MAAMJ,IAAI,CAACY,SAAS,GAAG;QACrBb,qBAAqBC,IAAI;QAEzB,aAAa;QACbK,cAAc,GAAGN,qBAAqBC,IAAI,CAAC,EAAE,EAAEK,YAAY;QAE3D,OAAO;QACPI,QAAQ,GAAGV,qBAAqBC,IAAI,CAAC,EAAE,EAAES,MAAM;QAE/C,QAAQ;QACRD,SAAS,GAAGT,qBAAqBC,IAAI,CAAC,EAAE,EAAEQ,OAAO;QAEjD,kBAAkB;QAClBF,YAAY,GAAGP,qBAAqBC,IAAI,CAAC,UAAU,CAAC;QACpDO,qBAAqB,GAAGR,qBAAqBC,IAAI,CAAC,mBAAmB,CAAC;QAEtE,WAAW;QACXW,YAAY,GAAGZ,qBAAqBC,IAAI,CAAC,UAAU,CAAC;QAEpD,QAAQ;QACRC,QAAQS,YAAY,GAAGX,qBAAqBC,IAAI,CAAC,UAAU,CAAC;QAE5D,2BAA2B;QAC3BI,MAAMJ,IAAI,CAACY,SAAS;KACrB,CACEC,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,IAAIX,MAAMH,IAAI,EAAE;QACdG,MAAMH,IAAI,CAACW,SAAS,GAAG;YAACb,qBAAqBE,IAAI;YAAEG,MAAMH,IAAI,CAACW,SAAS;SAAC,CAACC,MAAM,CAACC,SAASC,IAAI,CAAC;IAChG;IAEA,IAAIX,MAAMF,QAAQ,EAAE;QAClBE,MAAMF,QAAQ,CAACU,SAAS,GAAG;YAACb,qBAAqBG,QAAQ;YAAEE,MAAMF,QAAQ,CAACU,SAAS;SAAC,CAACC,MAAM,CAACC,SAASC,IAAI,CAAC;IAC5G;IAEA,OAAOX;AACT,EAAE"}

package/lib/components/SplitButton/useSplitButtonStyles.styles.headless.js

@@ -0,0 +1,39 @@
+'use client';
+export const splitButtonClassNames = {
+    root: 'fui-SplitButton',
+    menuButton: 'fui-SplitButton__menuButton',
+    primaryActionButton: 'fui-SplitButton__primaryActionButton'
+};
+/**
+ * Attaches only semantic slot class names and state modifiers
+ */ export const useSplitButtonStyles_unstable = (state)=>{
+    'use no memo';
+    const { appearance, disabled, disabledFocusable, shape, size } = state;
+    state.root.className = [
+        splitButtonClassNames.root,
+        // Appearance
+        appearance && `${splitButtonClassNames.root}--${appearance}`,
+        // Size
+        size && `${splitButtonClassNames.root}--${size}`,
+        // Shape
+        shape && `${splitButtonClassNames.root}--${shape}`,
+        // Disabled styles
+        disabled && `${splitButtonClassNames.root}--disabled`,
+        disabledFocusable && !disabled && `${splitButtonClassNames.root}--disabledFocusable`,
+        // User provided class name
+        state.root.className
+    ].filter(Boolean).join(' ');
+    if (state.primaryActionButton) {
+        state.primaryActionButton.className = [
+            splitButtonClassNames.primaryActionButton,
+            state.primaryActionButton.className
+        ].filter(Boolean).join(' ');
+    }
+    if (state.menuButton) {
+        state.menuButton.className = [
+            splitButtonClassNames.menuButton,
+            state.menuButton.className
+        ].filter(Boolean).join(' ');
+    }
+    return state;
+};

package/lib/components/SplitButton/useSplitButtonStyles.styles.headless.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SplitButton/useSplitButtonStyles.styles.headless.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SplitButtonSlots, SplitButtonState } from './SplitButton.types';\n\nexport const splitButtonClassNames: SlotClassNames<SplitButtonSlots> = {\n  root: 'fui-SplitButton',\n  menuButton: 'fui-SplitButton__menuButton',\n  primaryActionButton: 'fui-SplitButton__primaryActionButton',\n};\n\n/**\n * Attaches only semantic slot class names and state modifiers\n */\nexport const useSplitButtonStyles_unstable = (state: SplitButtonState): SplitButtonState => {\n  'use no memo';\n\n  const { appearance, disabled, disabledFocusable, shape, size } = state;\n\n  state.root.className = [\n    splitButtonClassNames.root,\n\n    // Appearance\n    appearance && `${splitButtonClassNames.root}--${appearance}`,\n\n    // Size\n    size && `${splitButtonClassNames.root}--${size}`,\n\n    // Shape\n    shape && `${splitButtonClassNames.root}--${shape}`,\n\n    // Disabled styles\n    disabled && `${splitButtonClassNames.root}--disabled`,\n    disabledFocusable && !disabled && `${splitButtonClassNames.root}--disabledFocusable`,\n\n    // User provided class name\n    state.root.className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  if (state.primaryActionButton) {\n    state.primaryActionButton.className = [\n      splitButtonClassNames.primaryActionButton,\n      state.primaryActionButton.className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n  }\n\n  if (state.menuButton) {\n    state.menuButton.className = [splitButtonClassNames.menuButton, state.menuButton.className]\n      .filter(Boolean)\n      .join(' ');\n  }\n\n  return state;\n};\n"],"names":["splitButtonClassNames","root","menuButton","primaryActionButton","useSplitButtonStyles_unstable","state","appearance","disabled","disabledFocusable","shape","size","className","filter","Boolean","join"],"mappings":"AAAA;AAKA,OAAO,MAAMA,wBAA0D;IACrEC,MAAM;IACNC,YAAY;IACZC,qBAAqB;AACvB,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5C;IAEA,MAAM,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,iBAAiB,EAAEC,KAAK,EAAEC,IAAI,EAAE,GAAGL;IAEjEA,MAAMJ,IAAI,CAACU,SAAS,GAAG;QACrBX,sBAAsBC,IAAI;QAE1B,aAAa;QACbK,cAAc,GAAGN,sBAAsBC,IAAI,CAAC,EAAE,EAAEK,YAAY;QAE5D,OAAO;QACPI,QAAQ,GAAGV,sBAAsBC,IAAI,CAAC,EAAE,EAAES,MAAM;QAEhD,QAAQ;QACRD,SAAS,GAAGT,sBAAsBC,IAAI,CAAC,EAAE,EAAEQ,OAAO;QAElD,kBAAkB;QAClBF,YAAY,GAAGP,sBAAsBC,IAAI,CAAC,UAAU,CAAC;QACrDO,qBAAqB,CAACD,YAAY,GAAGP,sBAAsBC,IAAI,CAAC,mBAAmB,CAAC;QAEpF,2BAA2B;QAC3BI,MAAMJ,IAAI,CAACU,SAAS;KACrB,CACEC,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,IAAIT,MAAMF,mBAAmB,EAAE;QAC7BE,MAAMF,mBAAmB,CAACQ,SAAS,GAAG;YACpCX,sBAAsBG,mBAAmB;YACzCE,MAAMF,mBAAmB,CAACQ,SAAS;SACpC,CACEC,MAAM,CAACC,SACPC,IAAI,CAAC;IACV;IAEA,IAAIT,MAAMH,UAAU,EAAE;QACpBG,MAAMH,UAAU,CAACS,SAAS,GAAG;YAACX,sBAAsBE,UAAU;YAAEG,MAAMH,UAAU,CAACS,SAAS;SAAC,CACxFC,MAAM,CAACC,SACPC,IAAI,CAAC;IACV;IAEA,OAAOT;AACT,EAAE"}