@fluentui/react-button 9.72.9-experimental.component-base-hooks.20260122-49fc330360.0 → 9.74.3-experimental.esm.20260709-49ee7a20cf.0

package/lib/components/SplitButton/useSplitButton.js

@@ -1,29 +1,65 @@
-'use client';
-import * as React from 'react';
-import { useSplitButtonBase_unstable } from './useSplitButtonBase';
+import { useId, slot } from "@fluentui/react-utilities";
+import { Button } from "../Button/Button.js";
+import { MenuButton } from "../MenuButton/MenuButton.js";
 /**
  * Given user props, defines default props for the SplitButton and returns processed state.
  * @param props - User provided props to the SplitButton component.
  * @param ref - User provided ref to be passed to the SplitButton component.
  */ export const useSplitButton_unstable = (props, ref)=>{
-    const { appearance = 'secondary', shape = 'rounded', size = 'medium' } = props;
-    const state = useSplitButtonBase_unstable(props, ref);
-    return {
-        appearance,
-        shape,
-        size,
-        ...state,
-        menuButton: {
+    const { appearance = 'secondary', children, disabled = false, disabledFocusable = false, icon, iconPosition = 'before', menuButton, menuIcon, primaryActionButton, shape = 'rounded', size = 'medium', ...rest } = props;
+    const baseId = useId('splitButton-');
+    const menuButtonShorthand = slot.optional(menuButton, {
+        defaultProps: {
             appearance,
+            disabled,
+            disabledFocusable,
+            menuIcon,
             shape,
-            size,
-            ...state.menuButton
+            size
         },
-        primaryActionButton: {
+        renderByDefault: true,
+        elementType: MenuButton
+    });
+    const primaryActionButtonShorthand = slot.optional(primaryActionButton, {
+        defaultProps: {
             appearance,
+            children,
+            disabled,
+            disabledFocusable,
+            icon,
+            iconPosition,
+            id: baseId + '__primaryActionButton',
             shape,
-            size,
-            ...state.primaryActionButton
-        }
+            size
+        },
+        renderByDefault: true,
+        elementType: Button
+    });
+    // Resolve menu button's aria-labelledby to be labelled by the primary action button if no label was provided by the
+    // user.
+    if (menuButtonShorthand && primaryActionButtonShorthand && !menuButtonShorthand['aria-label'] && !menuButtonShorthand['aria-labelledby']) {
+        menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;
+    }
+    return {
+        // Props passed at the top-level
+        appearance,
+        disabled,
+        disabledFocusable,
+        iconPosition,
+        shape,
+        size,
+        components: {
+            root: 'div',
+            menuButton: MenuButton,
+            primaryActionButton: Button
+        },
+        root: slot.always({
+            ref: ref,
+            ...rest
+        }, {
+            elementType: 'div'
+        }),
+        menuButton: menuButtonShorthand,
+        primaryActionButton: primaryActionButtonShorthand
     };
 };

package/lib/components/SplitButton/useSplitButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SplitButton/useSplitButton.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { SplitButtonProps, SplitButtonState } from './SplitButton.types';\nimport { useSplitButtonBase_unstable } from './useSplitButtonBase';\n\n/**\n * Given user props, defines default props for the SplitButton and returns processed state.\n * @param props - User provided props to the SplitButton component.\n * @param ref - User provided ref to be passed to the SplitButton component.\n */\nexport const useSplitButton_unstable = (\n  props: SplitButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): SplitButtonState => {\n  const { appearance = 'secondary', shape = 'rounded', size = 'medium' } = props;\n\n  const state = useSplitButtonBase_unstable(props, ref);\n\n  return {\n    appearance,\n    shape,\n    size,\n    ...state,\n    menuButton: {\n      appearance,\n      shape,\n      size,\n      ...state.menuButton,\n    },\n    primaryActionButton: {\n      appearance,\n      shape,\n      size,\n      ...state.primaryActionButton,\n    },\n  };\n};\n"],"names":["React","useSplitButtonBase_unstable","useSplitButton_unstable","props","ref","appearance","shape","size","state","menuButton","primaryActionButton"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,uBAAuB;AAEnE;;;;CAIC,GACD,OAAO,MAAMC,0BAA0B,CACrCC,OACAC;IAEA,MAAM,EAAEC,aAAa,WAAW,EAAEC,QAAQ,SAAS,EAAEC,OAAO,QAAQ,EAAE,GAAGJ;IAEzE,MAAMK,QAAQP,4BAA4BE,OAAOC;IAEjD,OAAO;QACLC;QACAC;QACAC;QACA,GAAGC,KAAK;QACRC,YAAY;YACVJ;YACAC;YACAC;YACA,GAAGC,MAAMC,UAAU;QACrB;QACAC,qBAAqB;YACnBL;YACAC;YACAC;YACA,GAAGC,MAAME,mBAAmB;QAC9B;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/SplitButton/useSplitButton.ts"],"sourcesContent":["import type * as React from 'react';\nimport { useId, slot } from '@fluentui/react-utilities';\nimport { Button } from '../Button/Button';\nimport { MenuButton } from '../MenuButton/MenuButton';\nimport type { SplitButtonProps, SplitButtonState } from './SplitButton.types';\n\n/**\n * Given user props, defines default props for the SplitButton and returns processed state.\n * @param props - User provided props to the SplitButton component.\n * @param ref - User provided ref to be passed to the SplitButton component.\n */\nexport const useSplitButton_unstable = (\n  props: SplitButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): SplitButtonState => {\n  const {\n    appearance = 'secondary',\n    children,\n    disabled = false,\n    disabledFocusable = false,\n    icon,\n    iconPosition = 'before',\n    menuButton,\n    menuIcon,\n    primaryActionButton,\n    shape = 'rounded',\n    size = 'medium',\n    ...rest\n  } = props;\n  const baseId = useId('splitButton-');\n\n  const menuButtonShorthand = slot.optional(menuButton, {\n    defaultProps: {\n      appearance,\n      disabled,\n      disabledFocusable,\n      menuIcon,\n      shape,\n      size,\n    },\n    renderByDefault: true,\n    elementType: MenuButton,\n  });\n  const primaryActionButtonShorthand = slot.optional(primaryActionButton, {\n    defaultProps: {\n      appearance,\n      children,\n      disabled,\n      disabledFocusable,\n      icon,\n      iconPosition,\n      id: baseId + '__primaryActionButton',\n      shape,\n      size,\n    },\n    renderByDefault: true,\n    elementType: Button,\n  });\n\n  // Resolve menu button's aria-labelledby to be labelled by the primary action button if no label was provided by the\n  // user.\n  if (\n    menuButtonShorthand &&\n    primaryActionButtonShorthand &&\n    !menuButtonShorthand['aria-label'] &&\n    !menuButtonShorthand['aria-labelledby']\n  ) {\n    menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;\n  }\n\n  return {\n    // Props passed at the top-level\n    appearance,\n    disabled,\n    disabledFocusable,\n    iconPosition,\n    shape,\n    size, // Slots definition\n    components: { root: 'div', menuButton: MenuButton, primaryActionButton: Button },\n    root: slot.always({ ref: ref as React.Ref<HTMLDivElement>, ...rest }, { elementType: 'div' }),\n    menuButton: menuButtonShorthand,\n    primaryActionButton: primaryActionButtonShorthand,\n  };\n};\n"],"names":["useId","slot","Button","MenuButton","useSplitButton_unstable","props","ref","appearance","children","disabled","disabledFocusable","icon","iconPosition","menuButton","menuIcon","primaryActionButton","shape","size","rest","baseId","menuButtonShorthand","optional","defaultProps","renderByDefault","elementType","primaryActionButtonShorthand","id","components","root","always"],"mappings":"AACA,SAASA,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AACxD,SAASC,MAAM,QAAQ,sBAAmB;AAC1C,SAASC,UAAU,QAAQ,8BAA2B;AAGtD;;;;CAIC,GACD,OAAO,MAAMC,0BAA0B,CACrCC,OACAC;IAEA,MAAM,EACJC,aAAa,WAAW,EACxBC,QAAQ,EACRC,WAAW,KAAK,EAChBC,oBAAoB,KAAK,EACzBC,IAAI,EACJC,eAAe,QAAQ,EACvBC,UAAU,EACVC,QAAQ,EACRC,mBAAmB,EACnBC,QAAQ,SAAS,EACjBC,OAAO,QAAQ,EACf,GAAGC,MACJ,GAAGb;IACJ,MAAMc,SAASnB,MAAM;IAErB,MAAMoB,sBAAsBnB,KAAKoB,QAAQ,CAACR,YAAY;QACpDS,cAAc;YACZf;YACAE;YACAC;YACAI;YACAE;YACAC;QACF;QACAM,iBAAiB;QACjBC,aAAarB;IACf;IACA,MAAMsB,+BAA+BxB,KAAKoB,QAAQ,CAACN,qBAAqB;QACtEO,cAAc;YACZf;YACAC;YACAC;YACAC;YACAC;YACAC;YACAc,IAAIP,SAAS;YACbH;YACAC;QACF;QACAM,iBAAiB;QACjBC,aAAatB;IACf;IAEA,oHAAoH;IACpH,QAAQ;IACR,IACEkB,uBACAK,gCACA,CAACL,mBAAmB,CAAC,aAAa,IAClC,CAACA,mBAAmB,CAAC,kBAAkB,EACvC;QACAA,mBAAmB,CAAC,kBAAkB,GAAGK,6BAA6BC,EAAE;IAC1E;IAEA,OAAO;QACL,gCAAgC;QAChCnB;QACAE;QACAC;QACAE;QACAI;QACAC;QACAU,YAAY;YAAEC,MAAM;YAAOf,YAAYV;YAAYY,qBAAqBb;QAAO;QAC/E0B,MAAM3B,KAAK4B,MAAM,CAAC;YAAEvB,KAAKA;YAAkC,GAAGY,IAAI;QAAC,GAAG;YAAEM,aAAa;QAAM;QAC3FX,YAAYO;QACZL,qBAAqBU;IACvB;AACF,EAAE"}

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

@@ -1,8 +1,8 @@
 'use client';
 
-import { __styles, mergeClasses } from '@griffel/react';
-import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
-import { tokens } from '@fluentui/react-theme';
+import { __styles, mergeClasses } from "@griffel/react";
+import { createCustomFocusIndicatorStyle } from "@fluentui/react-tabster";
+import { tokens } from "@fluentui/react-theme";
 export const splitButtonClassNames = {
   root: 'fui-SplitButton',
   menuButton: 'fui-SplitButton__menuButton',
@@ -88,8 +88,6 @@ const useRootStyles = /*#__PURE__*/__styles({
   }]]
 });
 export const useSplitButtonStyles_unstable = state => {
-  'use no memo';
-
   const rootStyles = useRootStyles();
   const focusStyles = useFocusStyles();
   const {
@@ -97,11 +95,14 @@ export const useSplitButtonStyles_unstable = state => {
     disabled,
     disabledFocusable
   } = state;
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(splitButtonClassNames.root, rootStyles.base, appearance && rootStyles[appearance], (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, state.root.className);
   if (state.menuButton) {
+    // eslint-disable-next-line react-hooks/immutability
     state.menuButton.className = mergeClasses(splitButtonClassNames.menuButton, focusStyles.menuButton, state.menuButton.className);
   }
   if (state.primaryActionButton) {
+    // eslint-disable-next-line react-hooks/immutability
     state.primaryActionButton.className = mergeClasses(splitButtonClassNames.primaryActionButton, focusStyles.primaryActionButton, state.primaryActionButton.className);
   }
   return state;

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","createCustomFocusIndicatorStyle","tokens","splitButtonClassNames","root","menuButton","primaryActionButton","MIN_TARGET_SIZE","useFocusStyles","B6xbmo0","kdpuga","lbo84a","dm238s","Bw81rd7","d","useRootStyles","base","mc9l5x","Brf1p80","qhf8xq","ha4doy","kn2xc0","Bs76p8a","cuxpm9","Biffepf","Defnvf","z0pv9t","outline","primary","B1l9wao","lcnrd8","vlshuh","B3s9tpx","rfylfo","k5lds2","secondary","subtle","transparent","circular","rounded","square","disabled","disabledHighContrast","h","m","useSplitButtonStyles_unstable","state","rootStyles","focusStyles","appearance","disabledFocusable","className"],"sources":["useSplitButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const splitButtonClassNames = {\n    root: 'fui-SplitButton',\n    menuButton: 'fui-SplitButton__menuButton',\n    primaryActionButton: 'fui-SplitButton__primaryActionButton'\n};\n// WCAG minimum target size for pointer targets that are immediately adjacent to other targets:\n// https://w3c.github.io/wcag/guidelines/22/#target-size-minimum\nconst MIN_TARGET_SIZE = '24px';\nconst useFocusStyles = makeStyles({\n    primaryActionButton: createCustomFocusIndicatorStyle({\n        borderTopRightRadius: 0,\n        borderBottomRightRadius: 0\n    }),\n    menuButton: createCustomFocusIndicatorStyle({\n        borderLeftWidth: 0,\n        borderTopLeftRadius: 0,\n        borderBottomLeftRadius: 0\n    })\n});\nconst useRootStyles = makeStyles({\n    // Base styles\n    base: {\n        display: 'inline-flex',\n        justifyContent: 'stretch',\n        position: 'relative',\n        verticalAlign: 'middle',\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n            borderTopRightRadius: 0,\n            borderBottomRightRadius: 0\n        },\n        [`& .${splitButtonClassNames.menuButton}`]: {\n            borderLeftWidth: 0,\n            borderTopLeftRadius: 0,\n            borderBottomLeftRadius: 0,\n            minWidth: MIN_TARGET_SIZE\n        }\n    },\n    // Appearance variations\n    outline: {\n    },\n    primary: {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n            borderRightColor: tokens.colorNeutralStrokeOnBrand\n        },\n        ':hover': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: tokens.colorNeutralStrokeOnBrand\n            }\n        },\n        ':hover:active,:active:focus-visible': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: tokens.colorNeutralStrokeOnBrand\n            }\n        },\n        '@media (forced-colors: active)': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: 'HighlightText'\n            },\n            ':hover': {\n                [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                    borderRightColor: 'Highlight'\n                }\n            },\n            ':hover:active,:active:focus-visible': {\n                [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                    borderRightColor: 'Highlight'\n                }\n            }\n        }\n    },\n    secondary: {\n    },\n    subtle: {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n            borderRightColor: tokens.colorTransparentBackground\n        },\n        ':hover': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: tokens.colorTransparentBackgroundHover\n            }\n        },\n        ':hover:active,:active:focus-visible': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: tokens.colorTransparentBackgroundPressed\n            }\n        }\n    },\n    transparent: {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n            borderRightColor: tokens.colorTransparentBackground\n        },\n        ':hover': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: tokens.colorTransparentBackgroundHover\n            }\n        },\n        ':hover:active,:active:focus-visible': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: tokens.colorTransparentBackgroundPressed\n            }\n        }\n    },\n    // Shape variations\n    circular: {},\n    rounded: {},\n    square: {},\n    // Disabled styles\n    disabled: {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n            borderRightColor: tokens.colorNeutralStrokeDisabled\n        },\n        ':hover': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: tokens.colorNeutralStrokeDisabled\n            }\n        },\n        ':hover:active,:active:focus-visible': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: tokens.colorNeutralStrokeDisabled\n            }\n        }\n    },\n    // Disabled high contrast styles\n    disabledHighContrast: {\n        '@media (forced-colors: active)': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: 'GrayText'\n            },\n            ':hover': {\n                [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                    borderRightColor: 'GrayText'\n                }\n            },\n            ':hover:active,:active:focus-visible': {\n                [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                    borderRightColor: 'GrayText'\n                }\n            }\n        }\n    }\n});\nexport const useSplitButtonStyles_unstable = (state)=>{\n    'use no memo';\n    const rootStyles = useRootStyles();\n    const focusStyles = useFocusStyles();\n    const { appearance, disabled, disabledFocusable } = state;\n    state.root.className = mergeClasses(splitButtonClassNames.root, rootStyles.base, appearance && rootStyles[appearance], (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, state.root.className);\n    if (state.menuButton) {\n        state.menuButton.className = mergeClasses(splitButtonClassNames.menuButton, focusStyles.menuButton, state.menuButton.className);\n    }\n    if (state.primaryActionButton) {\n        state.primaryActionButton.className = mergeClasses(splitButtonClassNames.primaryActionButton, focusStyles.primaryActionButton, state.primaryActionButton.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE,iBAAiB;EACvBC,UAAU,EAAE,6BAA6B;EACzCC,mBAAmB,EAAE;AACzB,CAAC;AACD;AACA;AACA,MAAMC,eAAe,GAAG,MAAM;AAC9B,MAAMC,cAAc,gBAAGT,QAAA;EAAAO,mBAAA;IAAAG,OAAA;IAAAC,MAAA;EAAA;EAAAL,UAAA;IAAAM,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAUtB,CAAC;AACF,MAAMC,aAAa,gBAAGhB,QAAA;EAAAiB,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;EAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,SAAA;EAAAC,MAAA;IAAAP,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAM,WAAA;IAAAR,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAO,QAAA;EAAAC,OAAA;EAAAC,MAAA;EAAAC,QAAA;IAAAZ,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAW,oBAAA;IAAAV,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAApB,CAAA;EAAA6B,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAyHrB,CAAC;AACF,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EAClD,aAAa;;EACb,MAAMC,UAAU,GAAGhC,aAAa,CAAC,CAAC;EAClC,MAAMiC,WAAW,GAAGxC,cAAc,CAAC,CAAC;EACpC,MAAM;IAAEyC,UAAU;IAAER,QAAQ;IAAES;EAAkB,CAAC,GAAGJ,KAAK;EACzDA,KAAK,CAAC1C,IAAI,CAAC+C,SAAS,GAAGnD,YAAY,CAACG,qBAAqB,CAACC,IAAI,EAAE2C,UAAU,CAAC/B,IAAI,EAAEiC,UAAU,IAAIF,UAAU,CAACE,UAAU,CAAC,EAAE,CAACR,QAAQ,IAAIS,iBAAiB,KAAKH,UAAU,CAACN,QAAQ,EAAE,CAACA,QAAQ,IAAIS,iBAAiB,KAAKH,UAAU,CAACL,oBAAoB,EAAEI,KAAK,CAAC1C,IAAI,CAAC+C,SAAS,CAAC;EACxQ,IAAIL,KAAK,CAACzC,UAAU,EAAE;IAClByC,KAAK,CAACzC,UAAU,CAAC8C,SAAS,GAAGnD,YAAY,CAACG,qBAAqB,CAACE,UAAU,EAAE2C,WAAW,CAAC3C,UAAU,EAAEyC,KAAK,CAACzC,UAAU,CAAC8C,SAAS,CAAC;EACnI;EACA,IAAIL,KAAK,CAACxC,mBAAmB,EAAE;IAC3BwC,KAAK,CAACxC,mBAAmB,CAAC6C,SAAS,GAAGnD,YAAY,CAACG,qBAAqB,CAACG,mBAAmB,EAAE0C,WAAW,CAAC1C,mBAAmB,EAAEwC,KAAK,CAACxC,mBAAmB,CAAC6C,SAAS,CAAC;EACvK;EACA,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","createCustomFocusIndicatorStyle","tokens","splitButtonClassNames","root","menuButton","primaryActionButton","MIN_TARGET_SIZE","useFocusStyles","B6xbmo0","kdpuga","lbo84a","dm238s","Bw81rd7","d","useRootStyles","base","mc9l5x","Brf1p80","qhf8xq","ha4doy","kn2xc0","Bs76p8a","cuxpm9","Biffepf","Defnvf","z0pv9t","outline","primary","B1l9wao","lcnrd8","vlshuh","B3s9tpx","rfylfo","k5lds2","secondary","subtle","transparent","circular","rounded","square","disabled","disabledHighContrast","h","m","useSplitButtonStyles_unstable","state","rootStyles","focusStyles","appearance","disabledFocusable","className"],"sources":["useSplitButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from \"@griffel/react\";\nimport { createCustomFocusIndicatorStyle } from \"@fluentui/react-tabster\";\nimport { tokens } from \"@fluentui/react-theme\";\nexport const splitButtonClassNames = {\n    root: 'fui-SplitButton',\n    menuButton: 'fui-SplitButton__menuButton',\n    primaryActionButton: 'fui-SplitButton__primaryActionButton'\n};\n// WCAG minimum target size for pointer targets that are immediately adjacent to other targets:\n// https://w3c.github.io/wcag/guidelines/22/#target-size-minimum\nconst MIN_TARGET_SIZE = '24px';\nconst useFocusStyles = makeStyles({\n    primaryActionButton: createCustomFocusIndicatorStyle({\n        borderTopRightRadius: 0,\n        borderBottomRightRadius: 0\n    }),\n    menuButton: createCustomFocusIndicatorStyle({\n        borderLeftWidth: 0,\n        borderTopLeftRadius: 0,\n        borderBottomLeftRadius: 0\n    })\n});\nconst useRootStyles = makeStyles({\n    // Base styles\n    base: {\n        display: 'inline-flex',\n        justifyContent: 'stretch',\n        position: 'relative',\n        verticalAlign: 'middle',\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n            borderTopRightRadius: 0,\n            borderBottomRightRadius: 0\n        },\n        [`& .${splitButtonClassNames.menuButton}`]: {\n            borderLeftWidth: 0,\n            borderTopLeftRadius: 0,\n            borderBottomLeftRadius: 0,\n            minWidth: MIN_TARGET_SIZE\n        }\n    },\n    // Appearance variations\n    outline: {\n    },\n    primary: {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n            borderRightColor: tokens.colorNeutralStrokeOnBrand\n        },\n        ':hover': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: tokens.colorNeutralStrokeOnBrand\n            }\n        },\n        ':hover:active,:active:focus-visible': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: tokens.colorNeutralStrokeOnBrand\n            }\n        },\n        '@media (forced-colors: active)': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: 'HighlightText'\n            },\n            ':hover': {\n                [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                    borderRightColor: 'Highlight'\n                }\n            },\n            ':hover:active,:active:focus-visible': {\n                [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                    borderRightColor: 'Highlight'\n                }\n            }\n        }\n    },\n    secondary: {\n    },\n    subtle: {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n            borderRightColor: tokens.colorTransparentBackground\n        },\n        ':hover': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: tokens.colorTransparentBackgroundHover\n            }\n        },\n        ':hover:active,:active:focus-visible': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: tokens.colorTransparentBackgroundPressed\n            }\n        }\n    },\n    transparent: {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n            borderRightColor: tokens.colorTransparentBackground\n        },\n        ':hover': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: tokens.colorTransparentBackgroundHover\n            }\n        },\n        ':hover:active,:active:focus-visible': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: tokens.colorTransparentBackgroundPressed\n            }\n        }\n    },\n    // Shape variations\n    circular: {},\n    rounded: {},\n    square: {},\n    // Disabled styles\n    disabled: {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n            borderRightColor: tokens.colorNeutralStrokeDisabled\n        },\n        ':hover': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: tokens.colorNeutralStrokeDisabled\n            }\n        },\n        ':hover:active,:active:focus-visible': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: tokens.colorNeutralStrokeDisabled\n            }\n        }\n    },\n    // Disabled high contrast styles\n    disabledHighContrast: {\n        '@media (forced-colors: active)': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: 'GrayText'\n            },\n            ':hover': {\n                [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                    borderRightColor: 'GrayText'\n                }\n            },\n            ':hover:active,:active:focus-visible': {\n                [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                    borderRightColor: 'GrayText'\n                }\n            }\n        }\n    }\n});\nexport const useSplitButtonStyles_unstable = (state)=>{\n    const rootStyles = useRootStyles();\n    const focusStyles = useFocusStyles();\n    const { appearance, disabled, disabledFocusable } = state;\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(splitButtonClassNames.root, rootStyles.base, appearance && rootStyles[appearance], (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, state.root.className);\n    if (state.menuButton) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.menuButton.className = mergeClasses(splitButtonClassNames.menuButton, focusStyles.menuButton, state.menuButton.className);\n    }\n    if (state.primaryActionButton) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.primaryActionButton.className = mergeClasses(splitButtonClassNames.primaryActionButton, focusStyles.primaryActionButton, state.primaryActionButton.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE,iBAAiB;EACvBC,UAAU,EAAE,6BAA6B;EACzCC,mBAAmB,EAAE;AACzB,CAAC;AACD;AACA;AACA,MAAMC,eAAe,GAAG,MAAM;AAC9B,MAAMC,cAAc,gBAAGT,QAAA;EAAAO,mBAAA;IAAAG,OAAA;IAAAC,MAAA;EAAA;EAAAL,UAAA;IAAAM,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAUtB,CAAC;AACF,MAAMC,aAAa,gBAAGhB,QAAA;EAAAiB,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;EAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,SAAA;EAAAC,MAAA;IAAAP,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAM,WAAA;IAAAR,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAO,QAAA;EAAAC,OAAA;EAAAC,MAAA;EAAAC,QAAA;IAAAZ,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAW,oBAAA;IAAAV,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAApB,CAAA;EAAA6B,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAyHrB,CAAC;AACF,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EAClD,MAAMC,UAAU,GAAGhC,aAAa,CAAC,CAAC;EAClC,MAAMiC,WAAW,GAAGxC,cAAc,CAAC,CAAC;EACpC,MAAM;IAAEyC,UAAU;IAAER,QAAQ;IAAES;EAAkB,CAAC,GAAGJ,KAAK;EACzD;EACAA,KAAK,CAAC1C,IAAI,CAAC+C,SAAS,GAAGnD,YAAY,CAACG,qBAAqB,CAACC,IAAI,EAAE2C,UAAU,CAAC/B,IAAI,EAAEiC,UAAU,IAAIF,UAAU,CAACE,UAAU,CAAC,EAAE,CAACR,QAAQ,IAAIS,iBAAiB,KAAKH,UAAU,CAACN,QAAQ,EAAE,CAACA,QAAQ,IAAIS,iBAAiB,KAAKH,UAAU,CAACL,oBAAoB,EAAEI,KAAK,CAAC1C,IAAI,CAAC+C,SAAS,CAAC;EACxQ,IAAIL,KAAK,CAACzC,UAAU,EAAE;IAClB;IACAyC,KAAK,CAACzC,UAAU,CAAC8C,SAAS,GAAGnD,YAAY,CAACG,qBAAqB,CAACE,UAAU,EAAE2C,WAAW,CAAC3C,UAAU,EAAEyC,KAAK,CAACzC,UAAU,CAAC8C,SAAS,CAAC;EACnI;EACA,IAAIL,KAAK,CAACxC,mBAAmB,EAAE;IAC3B;IACAwC,KAAK,CAACxC,mBAAmB,CAAC6C,SAAS,GAAGnD,YAAY,CAACG,qBAAqB,CAACG,mBAAmB,EAAE0C,WAAW,CAAC1C,mBAAmB,EAAEwC,KAAK,CAACxC,mBAAmB,CAAC6C,SAAS,CAAC;EACvK;EACA,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}

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

@@ -1,7 +1,7 @@
 'use client';
-import { makeStyles, mergeClasses } from '@griffel/react';
-import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
-import { tokens } from '@fluentui/react-theme';
+import { makeStyles, mergeClasses } from "@griffel/react";
+import { createCustomFocusIndicatorStyle } from "@fluentui/react-tabster";
+import { tokens } from "@fluentui/react-theme";
 export const splitButtonClassNames = {
     root: 'fui-SplitButton',
     menuButton: 'fui-SplitButton__menuButton',
@@ -144,15 +144,17 @@ const useRootStyles = makeStyles({
     }
 });
 export const useSplitButtonStyles_unstable = (state)=>{
-    'use no memo';
     const rootStyles = useRootStyles();
     const focusStyles = useFocusStyles();
     const { appearance, disabled, disabledFocusable } = state;
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(splitButtonClassNames.root, rootStyles.base, appearance && rootStyles[appearance], (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, state.root.className);
     if (state.menuButton) {
+        // eslint-disable-next-line react-hooks/immutability
         state.menuButton.className = mergeClasses(splitButtonClassNames.menuButton, focusStyles.menuButton, state.menuButton.className);
     }
     if (state.primaryActionButton) {
+        // eslint-disable-next-line react-hooks/immutability
         state.primaryActionButton.className = mergeClasses(splitButtonClassNames.primaryActionButton, focusStyles.primaryActionButton, state.primaryActionButton.className);
     }
     return state;

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SplitButton/useSplitButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\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// WCAG minimum target size for pointer targets that are immediately adjacent to other targets:\n// https://w3c.github.io/wcag/guidelines/22/#target-size-minimum\nconst MIN_TARGET_SIZE = '24px';\n\nconst useFocusStyles = makeStyles({\n  primaryActionButton: createCustomFocusIndicatorStyle({\n    borderTopRightRadius: 0,\n    borderBottomRightRadius: 0,\n  }),\n\n  menuButton: createCustomFocusIndicatorStyle({\n    borderLeftWidth: 0,\n    borderTopLeftRadius: 0,\n    borderBottomLeftRadius: 0,\n  }),\n});\n\nconst useRootStyles = makeStyles({\n  // Base styles\n  base: {\n    display: 'inline-flex',\n    justifyContent: 'stretch',\n    position: 'relative',\n    verticalAlign: 'middle',\n\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderTopRightRadius: 0,\n      borderBottomRightRadius: 0,\n    },\n\n    [`& .${splitButtonClassNames.menuButton}`]: {\n      borderLeftWidth: 0,\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n      minWidth: MIN_TARGET_SIZE,\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    /* No styles */\n  },\n  primary: {\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorNeutralStrokeOnBrand,\n    },\n\n    ':hover': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStrokeOnBrand,\n      },\n    },\n\n    ':hover:active,:active:focus-visible': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStrokeOnBrand,\n      },\n    },\n\n    '@media (forced-colors: active)': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: 'HighlightText',\n      },\n\n      ':hover': {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n          borderRightColor: 'Highlight',\n        },\n      },\n\n      ':hover:active,:active:focus-visible': {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n          borderRightColor: 'Highlight',\n        },\n      },\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorTransparentBackground,\n    },\n\n    ':hover': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorTransparentBackgroundHover,\n      },\n    },\n\n    ':hover:active,:active:focus-visible': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorTransparentBackgroundPressed,\n      },\n    },\n  },\n  transparent: {\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorTransparentBackground,\n    },\n\n    ':hover': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorTransparentBackgroundHover,\n      },\n    },\n\n    ':hover:active,:active:focus-visible': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorTransparentBackgroundPressed,\n      },\n    },\n  },\n\n  // Shape variations\n  circular: {},\n  rounded: {},\n  square: {},\n\n  // Disabled styles\n  disabled: {\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorNeutralStrokeDisabled,\n    },\n\n    ':hover': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStrokeDisabled,\n      },\n    },\n\n    ':hover:active,:active:focus-visible': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStrokeDisabled,\n      },\n    },\n  },\n\n  // Disabled high contrast styles\n  disabledHighContrast: {\n    '@media (forced-colors: active)': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: 'GrayText',\n      },\n\n      ':hover': {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n          borderRightColor: 'GrayText',\n        },\n      },\n\n      ':hover:active,:active:focus-visible': {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n          borderRightColor: 'GrayText',\n        },\n      },\n    },\n  },\n});\n\nexport const useSplitButtonStyles_unstable = (state: SplitButtonState): SplitButtonState => {\n  'use no memo';\n\n  const rootStyles = useRootStyles();\n  const focusStyles = useFocusStyles();\n\n  const { appearance, disabled, disabledFocusable } = state;\n\n  state.root.className = mergeClasses(\n    splitButtonClassNames.root,\n    rootStyles.base,\n    appearance && rootStyles[appearance],\n    (disabled || disabledFocusable) && rootStyles.disabled,\n    (disabled || disabledFocusable) && rootStyles.disabledHighContrast,\n    state.root.className,\n  );\n\n  if (state.menuButton) {\n    state.menuButton.className = mergeClasses(\n      splitButtonClassNames.menuButton,\n      focusStyles.menuButton,\n      state.menuButton.className,\n    );\n  }\n\n  if (state.primaryActionButton) {\n    state.primaryActionButton.className = mergeClasses(\n      splitButtonClassNames.primaryActionButton,\n      focusStyles.primaryActionButton,\n      state.primaryActionButton.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","splitButtonClassNames","root","menuButton","primaryActionButton","MIN_TARGET_SIZE","useFocusStyles","borderTopRightRadius","borderBottomRightRadius","borderLeftWidth","borderTopLeftRadius","borderBottomLeftRadius","useRootStyles","base","display","justifyContent","position","verticalAlign","minWidth","outline","primary","borderRightColor","colorNeutralStrokeOnBrand","secondary","subtle","colorTransparentBackground","colorTransparentBackgroundHover","colorTransparentBackgroundPressed","transparent","circular","rounded","square","disabled","colorNeutralStrokeDisabled","disabledHighContrast","useSplitButtonStyles_unstable","state","rootStyles","focusStyles","appearance","disabledFocusable","className"],"mappings":"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"}
+{"version":3,"sources":["../src/components/SplitButton/useSplitButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\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// WCAG minimum target size for pointer targets that are immediately adjacent to other targets:\n// https://w3c.github.io/wcag/guidelines/22/#target-size-minimum\nconst MIN_TARGET_SIZE = '24px';\n\nconst useFocusStyles = makeStyles({\n  primaryActionButton: createCustomFocusIndicatorStyle({\n    borderTopRightRadius: 0,\n    borderBottomRightRadius: 0,\n  }),\n\n  menuButton: createCustomFocusIndicatorStyle({\n    borderLeftWidth: 0,\n    borderTopLeftRadius: 0,\n    borderBottomLeftRadius: 0,\n  }),\n});\n\nconst useRootStyles = makeStyles({\n  // Base styles\n  base: {\n    display: 'inline-flex',\n    justifyContent: 'stretch',\n    position: 'relative',\n    verticalAlign: 'middle',\n\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderTopRightRadius: 0,\n      borderBottomRightRadius: 0,\n    },\n\n    [`& .${splitButtonClassNames.menuButton}`]: {\n      borderLeftWidth: 0,\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n      minWidth: MIN_TARGET_SIZE,\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    /* No styles */\n  },\n  primary: {\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorNeutralStrokeOnBrand,\n    },\n\n    ':hover': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStrokeOnBrand,\n      },\n    },\n\n    ':hover:active,:active:focus-visible': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStrokeOnBrand,\n      },\n    },\n\n    '@media (forced-colors: active)': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: 'HighlightText',\n      },\n\n      ':hover': {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n          borderRightColor: 'Highlight',\n        },\n      },\n\n      ':hover:active,:active:focus-visible': {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n          borderRightColor: 'Highlight',\n        },\n      },\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorTransparentBackground,\n    },\n\n    ':hover': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorTransparentBackgroundHover,\n      },\n    },\n\n    ':hover:active,:active:focus-visible': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorTransparentBackgroundPressed,\n      },\n    },\n  },\n  transparent: {\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorTransparentBackground,\n    },\n\n    ':hover': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorTransparentBackgroundHover,\n      },\n    },\n\n    ':hover:active,:active:focus-visible': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorTransparentBackgroundPressed,\n      },\n    },\n  },\n\n  // Shape variations\n  circular: {},\n  rounded: {},\n  square: {},\n\n  // Disabled styles\n  disabled: {\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorNeutralStrokeDisabled,\n    },\n\n    ':hover': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStrokeDisabled,\n      },\n    },\n\n    ':hover:active,:active:focus-visible': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStrokeDisabled,\n      },\n    },\n  },\n\n  // Disabled high contrast styles\n  disabledHighContrast: {\n    '@media (forced-colors: active)': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: 'GrayText',\n      },\n\n      ':hover': {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n          borderRightColor: 'GrayText',\n        },\n      },\n\n      ':hover:active,:active:focus-visible': {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n          borderRightColor: 'GrayText',\n        },\n      },\n    },\n  },\n});\n\nexport const useSplitButtonStyles_unstable = (state: SplitButtonState): SplitButtonState => {\n  const rootStyles = useRootStyles();\n  const focusStyles = useFocusStyles();\n\n  const { appearance, disabled, disabledFocusable } = state;\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    splitButtonClassNames.root,\n    rootStyles.base,\n    appearance && rootStyles[appearance],\n    (disabled || disabledFocusable) && rootStyles.disabled,\n    (disabled || disabledFocusable) && rootStyles.disabledHighContrast,\n    state.root.className,\n  );\n\n  if (state.menuButton) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.menuButton.className = mergeClasses(\n      splitButtonClassNames.menuButton,\n      focusStyles.menuButton,\n      state.menuButton.className,\n    );\n  }\n\n  if (state.primaryActionButton) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.primaryActionButton.className = mergeClasses(\n      splitButtonClassNames.primaryActionButton,\n      focusStyles.primaryActionButton,\n      state.primaryActionButton.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","splitButtonClassNames","root","menuButton","primaryActionButton","MIN_TARGET_SIZE","useFocusStyles","borderTopRightRadius","borderBottomRightRadius","borderLeftWidth","borderTopLeftRadius","borderBottomLeftRadius","useRootStyles","base","display","justifyContent","position","verticalAlign","minWidth","outline","primary","borderRightColor","colorNeutralStrokeOnBrand","secondary","subtle","colorTransparentBackground","colorTransparentBackgroundHover","colorTransparentBackgroundPressed","transparent","circular","rounded","square","disabled","colorNeutralStrokeDisabled","disabledHighContrast","useSplitButtonStyles_unstable","state","rootStyles","focusStyles","appearance","disabledFocusable","className"],"mappings":"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"}

package/lib/components/ToggleButton/ToggleButton.js

@@ -1,9 +1,9 @@
 'use client';
-import * as React from 'react';
-import { renderToggleButton_unstable } from './renderToggleButton';
-import { useToggleButton_unstable } from './useToggleButton';
-import { useToggleButtonStyles_unstable } from './useToggleButtonStyles.styles';
-import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import * as React from "react";
+import { renderToggleButton_unstable } from "./renderToggleButton.js";
+import { useToggleButton_unstable } from "./useToggleButton.js";
+import { useToggleButtonStyles_unstable } from "./useToggleButtonStyles.styles.js";
+import { useCustomStyleHook_unstable } from "@fluentui/react-shared-contexts";
 /**
  * ToggleButtons are buttons that toggle between two defined states when triggered.
  */ export const ToggleButton = /*#__PURE__*/ React.forwardRef((props, ref)=>{

package/lib/components/ToggleButton/ToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ToggleButton/ToggleButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderToggleButton_unstable } from './renderToggleButton';\nimport { useToggleButton_unstable } from './useToggleButton';\nimport { useToggleButtonStyles_unstable } from './useToggleButtonStyles.styles';\nimport type { ToggleButtonProps } from './ToggleButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ToggleButtons are buttons that toggle between two defined states when triggered.\n */\nexport const ToggleButton: ForwardRefComponent<ToggleButtonProps> = React.forwardRef((props, ref) => {\n  const state = useToggleButton_unstable(props, ref);\n\n  useToggleButtonStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useToggleButtonStyles_unstable')(state);\n\n  return renderToggleButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ToggleButtonProps>;\n\nToggleButton.displayName = 'ToggleButton';\n"],"names":["React","renderToggleButton_unstable","useToggleButton_unstable","useToggleButtonStyles_unstable","useCustomStyleHook_unstable","ToggleButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,8BAA8B,QAAQ,iCAAiC;AAGhF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,6BAAuDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQP,yBAAyBK,OAAOC;IAE9CL,+BAA+BM;IAE/BL,4BAA4B,kCAAkCK;IAE9D,OAAOR,4BAA4BQ;AACnC,0FAA0F;AAC5F,GAA6C;AAE7CJ,aAAaK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/ToggleButton/ToggleButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderToggleButton_unstable } from './renderToggleButton';\nimport { useToggleButton_unstable } from './useToggleButton';\nimport { useToggleButtonStyles_unstable } from './useToggleButtonStyles.styles';\nimport type { ToggleButtonProps } from './ToggleButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ToggleButtons are buttons that toggle between two defined states when triggered.\n */\nexport const ToggleButton: ForwardRefComponent<ToggleButtonProps> = React.forwardRef((props, ref) => {\n  const state = useToggleButton_unstable(props, ref);\n\n  useToggleButtonStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useToggleButtonStyles_unstable')(state);\n\n  return renderToggleButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ToggleButtonProps>;\n\nToggleButton.displayName = 'ToggleButton';\n"],"names":["React","renderToggleButton_unstable","useToggleButton_unstable","useToggleButtonStyles_unstable","useCustomStyleHook_unstable","ToggleButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,QAAQ,0BAAuB;AACnE,SAASC,wBAAwB,QAAQ,uBAAoB;AAC7D,SAASC,8BAA8B,QAAQ,oCAAiC;AAGhF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,6BAAuDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQP,yBAAyBK,OAAOC;IAE9CL,+BAA+BM;IAE/BL,4BAA4B,kCAAkCK;IAE9D,OAAOR,4BAA4BQ;AACnC,0FAA0F;AAC5F,GAA6C;AAE7CJ,aAAaK,WAAW,GAAG"}

package/lib/components/ToggleButton/ToggleButton.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ToggleButton/ToggleButton.types.ts"],"sourcesContent":["import type { DistributiveOmit } from '@fluentui/react-utilities';\nimport type { ButtonDesignPropNames, ButtonProps, ButtonState } from '../Button/Button.types';\n\nexport type ToggleButtonProps = ButtonProps & {\n  /**\n   * Defines whether the `ToggleButton` is initially in a checked state or not when rendered.\n   *\n   * @default false\n   */\n  defaultChecked?: boolean;\n\n  /**\n   * Defines the controlled checked state of the `ToggleButton`.\n   * If passed, `ToggleButton` ignores the `defaultChecked` property.\n   * This should only be used if the checked state is to be controlled at a higher level and there is a plan to pass the\n   * correct value based on handling `onClick` events and re-rendering.\n   *\n   * @default false\n   */\n  checked?: boolean;\n};\n\nexport type ToggleButtonBaseProps = DistributiveOmit<ToggleButtonProps, ButtonDesignPropNames>;\n\nexport type ToggleButtonState = ButtonState & Required<Pick<ToggleButtonProps, 'checked'>>;\n\nexport type ToggleButtonBaseState = DistributiveOmit<ToggleButtonState, ButtonDesignPropNames>;\n"],"names":[],"mappings":"AA0BA,WAA+F"}
+{"version":3,"sources":["../src/components/ToggleButton/ToggleButton.types.ts"],"sourcesContent":["import type { ButtonBaseProps, ButtonBaseState, ButtonProps, ButtonState } from '../Button/Button.types';\n\nexport type ToggleButtonProps = ButtonProps & {\n  /**\n   * Defines whether the `ToggleButton` is initially in a checked state or not when rendered.\n   *\n   * @default false\n   */\n  defaultChecked?: boolean;\n\n  /**\n   * Defines the controlled checked state of the `ToggleButton`.\n   * If passed, `ToggleButton` ignores the `defaultChecked` property.\n   * This should only be used if the checked state is to be controlled at a higher level and there is a plan to pass the\n   * correct value based on handling `onClick` events and re-rendering.\n   *\n   * @default false\n   */\n  checked?: boolean;\n\n  /**\n   * Defines whether the `ToggleButton` should use the alternate selected styles that have adequate contrast with the rest style\n   *\n   * @default false\n   */\n  isAccessible?: boolean;\n};\n\nexport type ToggleButtonBaseProps = ButtonBaseProps &\n  Pick<ToggleButtonProps, 'defaultChecked' | 'checked' | 'isAccessible'>;\n\nexport type ToggleButtonState = ButtonState & Required<Pick<ToggleButtonProps, 'checked' | 'isAccessible'>>;\n\nexport type ToggleButtonBaseState = ButtonBaseState & Required<Pick<ToggleButtonProps, 'checked' | 'isAccessible'>>;\n"],"names":[],"mappings":"AAiCA,WAAoH"}

package/lib/components/ToggleButton/index.js

@@ -1,5 +1,4 @@
-export { ToggleButton } from './ToggleButton';
-export { renderToggleButton_unstable } from './renderToggleButton';
-export { useToggleButton_unstable } from './useToggleButton';
-export { useToggleButtonBase_unstable } from './useToggleButtonBase';
-export { toggleButtonClassNames, useToggleButtonStyles_unstable } from './useToggleButtonStyles.styles';
+export { ToggleButton } from "./ToggleButton.js";
+export { renderToggleButton_unstable } from "./renderToggleButton.js";
+export { useToggleButton_unstable, useToggleButtonBase_unstable } from "./useToggleButton.js";
+export { toggleButtonClassNames, useToggleButtonStyles_unstable } from "./useToggleButtonStyles.styles.js";

package/lib/components/ToggleButton/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ToggleButton/index.ts"],"sourcesContent":["export { ToggleButton } from './ToggleButton';\nexport type {\n  ToggleButtonBaseProps,\n  ToggleButtonProps,\n  ToggleButtonBaseState,\n  ToggleButtonState,\n} from './ToggleButton.types';\nexport { renderToggleButton_unstable } from './renderToggleButton';\nexport { useToggleButton_unstable } from './useToggleButton';\nexport { useToggleButtonBase_unstable } from './useToggleButtonBase';\nexport { toggleButtonClassNames, useToggleButtonStyles_unstable } from './useToggleButtonStyles.styles';\n"],"names":["ToggleButton","renderToggleButton_unstable","useToggleButton_unstable","useToggleButtonBase_unstable","toggleButtonClassNames","useToggleButtonStyles_unstable"],"mappings":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAO9C,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,sBAAsB,EAAEC,8BAA8B,QAAQ,iCAAiC"}
+{"version":3,"sources":["../src/components/ToggleButton/index.ts"],"sourcesContent":["export { ToggleButton } from './ToggleButton';\nexport type {\n  ToggleButtonBaseProps,\n  ToggleButtonProps,\n  ToggleButtonState,\n  ToggleButtonBaseState,\n} from './ToggleButton.types';\nexport { renderToggleButton_unstable } from './renderToggleButton';\nexport { useToggleButton_unstable, useToggleButtonBase_unstable } from './useToggleButton';\nexport { toggleButtonClassNames, useToggleButtonStyles_unstable } from './useToggleButtonStyles.styles';\n"],"names":["ToggleButton","renderToggleButton_unstable","useToggleButton_unstable","useToggleButtonBase_unstable","toggleButtonClassNames","useToggleButtonStyles_unstable"],"mappings":"AAAA,SAASA,YAAY,QAAQ,oBAAiB;AAO9C,SAASC,2BAA2B,QAAQ,0BAAuB;AACnE,SAASC,wBAAwB,EAAEC,4BAA4B,QAAQ,uBAAoB;AAC3F,SAASC,sBAAsB,EAAEC,8BAA8B,QAAQ,oCAAiC"}

package/lib/components/ToggleButton/renderToggleButton.js

@@ -1 +1 @@
-export { renderButton_unstable as renderToggleButton_unstable } from '../Button/renderButton';
+export { renderButton_unstable as renderToggleButton_unstable } from "../Button/renderButton.js";

package/lib/components/ToggleButton/renderToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ToggleButton/renderToggleButton.tsx"],"sourcesContent":["export { renderButton_unstable as renderToggleButton_unstable } from '../Button/renderButton';\n"],"names":["renderButton_unstable","renderToggleButton_unstable"],"mappings":"AAAA,SAASA,yBAAyBC,2BAA2B,QAAQ,yBAAyB"}
+{"version":3,"sources":["../src/components/ToggleButton/renderToggleButton.tsx"],"sourcesContent":["export { renderButton_unstable as renderToggleButton_unstable } from '../Button/renderButton';\n"],"names":["renderButton_unstable","renderToggleButton_unstable"],"mappings":"AAAA,SAASA,yBAAyBC,2BAA2B,QAAQ,4BAAyB"}

package/lib/components/ToggleButton/useToggleButton.js

@@ -1,21 +1,23 @@
 'use client';
-import * as React from 'react';
-import { useToggleButtonBase_unstable } from './useToggleButtonBase';
-import { useButtonContext } from '../../contexts';
+import { useToggleState } from "../../utils/useToggleState.js";
+import { useButton_unstable, useButtonBase_unstable } from "../Button/useButton.js";
 /**
- * Given user props, defines default props for the ToggleButton, calls `useToggleButtonBase_unstable` and adds design-related props, and returns
+ * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns
  * processed state.
  * @param props - User provided props to the ToggleButton component.
  * @param ref - User provided ref to be passed to the ToggleButton component.
  */ export const useToggleButton_unstable = (props, ref)=>{
-    'use no memo';
-    const { size: contextSize } = useButtonContext();
-    const { appearance = 'secondary', shape = 'rounded', size = contextSize !== null && contextSize !== void 0 ? contextSize : 'medium' } = props;
-    const buttonState = useToggleButtonBase_unstable(props, ref);
-    return {
-        appearance,
-        shape,
-        size,
-        ...buttonState
-    };
+    const { checked = false, defaultChecked = false, isAccessible = false, ...buttonProps } = props;
+    const buttonState = useButton_unstable(buttonProps, ref);
+    return useToggleState(props, buttonState);
+};
+/**
+ * Base hook for ToggleButton component, which manages state related to slots structure and ARIA attributes.
+ *
+ * @param props - User provided props to the ToggleButton component.
+ * @param ref - User provided ref to be passed to the ToggleButton component.
+ */ export const useToggleButtonBase_unstable = (props, ref)=>{
+    const { checked = false, defaultChecked = false, isAccessible = false, ...buttonProps } = props;
+    const buttonState = useButtonBase_unstable(buttonProps, ref);
+    return useToggleState(props, buttonState);
 };

package/lib/components/ToggleButton/useToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ToggleButton/useToggleButton.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ToggleButtonProps, ToggleButtonState } from './ToggleButton.types';\nimport { useToggleButtonBase_unstable } from './useToggleButtonBase';\nimport { useButtonContext } from '../../contexts';\n\n/**\n * Given user props, defines default props for the ToggleButton, calls `useToggleButtonBase_unstable` and adds design-related props, and returns\n * processed state.\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToggleButton_unstable = (\n  props: ToggleButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToggleButtonState => {\n  'use no memo';\n\n  const { size: contextSize } = useButtonContext();\n  const { appearance = 'secondary', shape = 'rounded', size = contextSize ?? 'medium' } = props;\n\n  const buttonState = useToggleButtonBase_unstable(props, ref);\n\n  return {\n    appearance,\n    shape,\n    size,\n    ...buttonState,\n  };\n};\n"],"names":["React","useToggleButtonBase_unstable","useButtonContext","useToggleButton_unstable","props","ref","size","contextSize","appearance","shape","buttonState"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,gBAAgB,QAAQ,iBAAiB;AAElD;;;;;CAKC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA;IAEA,MAAM,EAAEC,MAAMC,WAAW,EAAE,GAAGL;IAC9B,MAAM,EAAEM,aAAa,WAAW,EAAEC,QAAQ,SAAS,EAAEH,OAAOC,wBAAAA,yBAAAA,cAAe,QAAQ,EAAE,GAAGH;IAExF,MAAMM,cAAcT,6BAA6BG,OAAOC;IAExD,OAAO;QACLG;QACAC;QACAH;QACA,GAAGI,WAAW;IAChB;AACF,EAAE"}
+{"version":3,"sources":["../src/components/ToggleButton/useToggleButton.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { useToggleState } from '../../utils/useToggleState';\nimport { useButton_unstable, useButtonBase_unstable } from '../Button/useButton';\nimport type { ToggleButtonBaseState, ToggleButtonProps, ToggleButtonState } from './ToggleButton.types';\n\n/**\n * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToggleButton_unstable = (\n  props: ToggleButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToggleButtonState => {\n  const { checked = false, defaultChecked = false, isAccessible = false, ...buttonProps } = props;\n  const buttonState = useButton_unstable(buttonProps, ref);\n\n  return useToggleState(props, buttonState);\n};\n\n/**\n * Base hook for ToggleButton component, which manages state related to slots structure and ARIA attributes.\n *\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToggleButtonBase_unstable = (\n  props: ToggleButtonProps,\n  ref?: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToggleButtonBaseState => {\n  const { checked = false, defaultChecked = false, isAccessible = false, ...buttonProps } = props;\n  const buttonState = useButtonBase_unstable(buttonProps, ref);\n\n  return useToggleState(props, buttonState);\n};\n"],"names":["useToggleState","useButton_unstable","useButtonBase_unstable","useToggleButton_unstable","props","ref","checked","defaultChecked","isAccessible","buttonProps","buttonState","useToggleButtonBase_unstable"],"mappings":"AAAA;AAGA,SAASA,cAAc,QAAQ,gCAA6B;AAC5D,SAASC,kBAAkB,EAAEC,sBAAsB,QAAQ,yBAAsB;AAGjF;;;;;CAKC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,MAAM,EAAEC,UAAU,KAAK,EAAEC,iBAAiB,KAAK,EAAEC,eAAe,KAAK,EAAE,GAAGC,aAAa,GAAGL;IAC1F,MAAMM,cAAcT,mBAAmBQ,aAAaJ;IAEpD,OAAOL,eAAeI,OAAOM;AAC/B,EAAE;AAEF;;;;;CAKC,GACD,OAAO,MAAMC,+BAA+B,CAC1CP,OACAC;IAEA,MAAM,EAAEC,UAAU,KAAK,EAAEC,iBAAiB,KAAK,EAAEC,eAAe,KAAK,EAAE,GAAGC,aAAa,GAAGL;IAC1F,MAAMM,cAAcR,uBAAuBO,aAAaJ;IAExD,OAAOL,eAAeI,OAAOM;AAC/B,EAAE"}

package/lib/components/ToggleButton/useToggleButtonStyles.styles.js

@@ -1,10 +1,10 @@
 'use client';
 
-import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
-import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
-import { tokens } from '@fluentui/react-theme';
-import { shorthands, mergeClasses, __styles } from '@griffel/react';
-import { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';
+import { iconFilledClassName, iconRegularClassName } from "@fluentui/react-icons";
+import { createCustomFocusIndicatorStyle } from "@fluentui/react-tabster";
+import { tokens } from "@fluentui/react-theme";
+import { shorthands, mergeClasses, __styles } from "@griffel/react";
+import { useButtonStyles_unstable } from "../Button/useButtonStyles.styles.js";
 export const toggleButtonClassNames = {
   root: 'fui-ToggleButton',
   icon: 'fui-ToggleButton__icon'
@@ -195,6 +195,58 @@ const useRootCheckedStyles = /*#__PURE__*/__styles({
     m: "(forced-colors: active)"
   }]]
 });
+const useCheckedAccessibleStyles = /*#__PURE__*/__styles({
+  base: {
+    De3pzq: "ffp7eso",
+    g2u3we: "f1p3nwhy",
+    h3c5rm: ["f11589ue", "f1pdflbu"],
+    B9xav0g: "f1q5o8ev",
+    zhjwy3: ["f1pdflbu", "f11589ue"],
+    sj55zd: "f1phragk",
+    Jwef8y: "f15wkkf3",
+    Bgoe8wy: "f1s2uweq",
+    Bwzppfd: ["fr80ssc", "fecsdlb"],
+    oetu4i: "f1ukrpxl",
+    gg5e9n: ["fecsdlb", "fr80ssc"],
+    Bi91k9c: "f1rq72xc",
+    Bpjbzib: "f1ksv2xa",
+    im15vp: "fhvnf4x",
+    Hjvxdg: ["fb6swo4", "f232fm2"],
+    Gpfmf1: "f1klyf7k",
+    ustxxc: ["f232fm2", "fb6swo4"],
+    Brsut9c: "f1d6mv4x"
+  },
+  outline: {
+    B4j52fo: "f192inf7",
+    Bekrc4i: ["f5tn483", "f1ojsxk5"],
+    Bn0qgzm: "f1vxd6vx",
+    ibv6hh: ["f1ojsxk5", "f5tn483"]
+  },
+  primary: {
+    Bw0xxkn: 0,
+    oeaueh: 0,
+    Bpd4iqm: 0,
+    Befb4lg: "f12rpxh0",
+    Dhobit: "f10okvgz",
+    Bfpq7zp: 0,
+    g9k6zt: 0,
+    Bn4voq9: 0,
+    giviqs: "f40way",
+    Bpkdmpa: "ftbw7yw"
+  },
+  subtle: {
+    ysa4qo: "f17xzaca"
+  },
+  transparent: {},
+  secondary: {}
+}, {
+  d: [".ffp7eso{background-color:var(--colorBrandBackground);}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", [".f12rpxh0{outline:var(--strokeWidthThin) solid var(--colorNeutralForegroundOnBrand);}", {
+    p: -1
+  }], ".f10okvgz{outline-offset:calc(var(--strokeWidthThicker) * -1);}", [".f40way[data-fui-focus-visible]{outline:var(--strokeWidthThin) solid var(--colorNeutralForegroundOnBrand);}", {
+    p: -1
+  }], ".ftbw7yw[data-fui-focus-visible]{outline-offset:calc(var(--strokeWidthThickest) * -1);}"],
+  h: [".f15wkkf3:hover{background-color:var(--colorBrandBackgroundHover);}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".f1rq72xc:hover{color:var(--colorNeutralForegroundOnBrand);}", ".f1ksv2xa:hover:active,.f1ksv2xa:active:focus-visible{background-color:var(--colorBrandBackgroundPressed);}", ".fhvnf4x:hover:active,.fhvnf4x:active:focus-visible{border-top-color:transparent;}", ".fb6swo4:hover:active,.fb6swo4:active:focus-visible{border-right-color:transparent;}", ".f232fm2:hover:active,.f232fm2:active:focus-visible{border-left-color:transparent;}", ".f1klyf7k:hover:active,.f1klyf7k:active:focus-visible{border-bottom-color:transparent;}", ".f1d6mv4x:hover:active,.f1d6mv4x:active:focus-visible{color:var(--colorNeutralForegroundOnBrand);}", ".f17xzaca:hover .fui-ToggleButton__icon{color:var(--colorNeutralForegroundOnBrand);}"]
+});
 const useRootDisabledStyles = /*#__PURE__*/__styles({
   base: {
     De3pzq: "f1bg9a2p",
@@ -334,9 +386,8 @@ const usePrimaryHighContrastStyles = /*#__PURE__*/__styles({
   }]]
 });
 export const useToggleButtonStyles_unstable = state => {
-  'use no memo';
-
   const rootCheckedStyles = useRootCheckedStyles();
+  const accessibleCheckedStyles = useCheckedAccessibleStyles();
   const rootDisabledStyles = useRootDisabledStyles();
   const iconCheckedStyles = useIconCheckedStyles();
   const primaryHighContrastStyles = usePrimaryHighContrastStyles();
@@ -344,19 +395,24 @@ export const useToggleButtonStyles_unstable = state => {
     appearance,
     checked,
     disabled,
-    disabledFocusable
+    disabledFocusable,
+    isAccessible
   } = state;
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(toggleButtonClassNames.root,
   // Primary high contrast styles
   appearance === 'primary' && primaryHighContrastStyles.base, appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled,
   // Checked styles
   checked && rootCheckedStyles.base, checked && rootCheckedStyles.highContrast, appearance && checked && rootCheckedStyles[appearance],
+  // Opt-in accessible checked styles
+  isAccessible && checked && accessibleCheckedStyles.base, isAccessible && appearance && checked && accessibleCheckedStyles[appearance],
   // Disabled styles
   (disabled || disabledFocusable) && rootDisabledStyles.base, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],
   // User provided class name
   state.root.className);
   if (state.icon) {
-    state.icon.className = mergeClasses(toggleButtonClassNames.icon, checked && (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent, iconCheckedStyles.highContrast, state.icon.className);
+    // eslint-disable-next-line react-hooks/immutability
+    state.icon.className = mergeClasses(toggleButtonClassNames.icon, checked && !isAccessible && (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent, iconCheckedStyles.highContrast, state.icon.className);
   }
   useButtonStyles_unstable(state);
   return state;

package/lib/components/ToggleButton/useToggleButtonStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["iconFilledClassName","iconRegularClassName","createCustomFocusIndicatorStyle","tokens","shorthands","mergeClasses","__styles","useButtonStyles_unstable","toggleButtonClassNames","root","icon","useRootCheckedStyles","base","De3pzq","g2u3we","h3c5rm","B9xav0g","zhjwy3","sj55zd","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","D0sxk3","t6yez3","Jwef8y","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","Bi91k9c","Bpjbzib","im15vp","Hjvxdg","Gpfmf1","ustxxc","Brsut9c","highContrast","By8wz76","Bcq6wej","Jcjdmf","sc4o1m","Bosien3","B7iucu3","B8gzw0y","Bbkh6qg","F230oe","Bdw8ktp","Bj1xduy","Bhh2cfd","Bahaeuw","Bv2bamp","vxuvv6","Bli9q98","Bx2tt8t","yad0b3","j2fop7","B6rz4yo","Buk7464","Bqg8rp8","pjr8j7","Bgs2klq","Hwei09","Bi9aqk7","Fihjvf","nhyz0p","Buw724y","Bn7qjfh","B0u7xl9","md97jv","h3ptyc","s1kvfj","kogrdj","dqx2i2","o0nolc","outline","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","primary","secondary","subtle","transparent","d","h","m","p","useRootDisabledStyles","useIconCheckedStyles","subtleOrTransparent","usePrimaryHighContrastStyles","disabled","useToggleButtonStyles_unstable","state","rootCheckedStyles","rootDisabledStyles","iconCheckedStyles","primaryHighContrastStyles","appearance","checked","disabledFocusable","className"],"sources":["useToggleButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\nexport const toggleButtonClassNames = {\n    root: 'fui-ToggleButton',\n    icon: 'fui-ToggleButton__icon'\n};\nconst useRootCheckedStyles = makeStyles({\n    // Base styles\n    base: {\n        backgroundColor: tokens.colorNeutralBackground1Selected,\n        ...shorthands.borderColor(tokens.colorNeutralStroke1),\n        color: tokens.colorNeutralForeground1Selected,\n        ...shorthands.borderWidth(tokens.strokeWidthThin),\n        [`& .${iconFilledClassName}`]: {\n            display: 'inline'\n        },\n        [`& .${iconRegularClassName}`]: {\n            display: 'none'\n        },\n        ':hover': {\n            backgroundColor: tokens.colorNeutralBackground1Hover,\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n            color: tokens.colorNeutralForeground1Hover\n        },\n        ':hover:active,:active:focus-visible': {\n            backgroundColor: tokens.colorNeutralBackground1Pressed,\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n            color: tokens.colorNeutralForeground1Pressed\n        }\n    },\n    // High contrast styles\n    highContrast: {\n        '@media (forced-colors: active)': {\n            backgroundColor: 'Highlight',\n            ...shorthands.borderColor('Highlight'),\n            color: 'HighlightText',\n            forcedColorAdjust: 'none',\n            ':hover': {\n                backgroundColor: 'HighlightText',\n                ...shorthands.borderColor('Highlight'),\n                color: 'Highlight'\n            },\n            ':hover:active,:active:focus-visible': {\n                backgroundColor: 'HighlightText',\n                ...shorthands.borderColor('Highlight'),\n                color: 'Highlight'\n            },\n            ':focus': {\n                border: '1px solid HighlightText',\n                outlineColor: 'Highlight'\n            }\n        }\n    },\n    // Appearance variations\n    outline: {\n        backgroundColor: tokens.colorTransparentBackgroundSelected,\n        ...shorthands.borderColor(tokens.colorNeutralStroke1),\n        ...shorthands.borderWidth(tokens.strokeWidthThicker),\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackgroundHover\n        },\n        ':hover:active,:active:focus-visible': {\n            backgroundColor: tokens.colorTransparentBackgroundPressed\n        },\n        ...createCustomFocusIndicatorStyle({\n            ...shorthands.borderColor(tokens.colorNeutralStroke1)\n        })\n    },\n    primary: {\n        backgroundColor: tokens.colorBrandBackgroundSelected,\n        ...shorthands.borderColor('transparent'),\n        color: tokens.colorNeutralForegroundOnBrand,\n        ':hover': {\n            backgroundColor: tokens.colorBrandBackgroundHover,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForegroundOnBrand\n        },\n        ':hover:active,:active:focus-visible': {\n            backgroundColor: tokens.colorBrandBackgroundPressed,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForegroundOnBrand\n        }\n    },\n    secondary: {\n    },\n    subtle: {\n        backgroundColor: tokens.colorSubtleBackgroundSelected,\n        ...shorthands.borderColor('transparent'),\n        color: tokens.colorNeutralForeground2Selected,\n        ':hover': {\n            backgroundColor: tokens.colorSubtleBackgroundHover,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForeground2Hover\n        },\n        ':hover:active,:active:focus-visible': {\n            backgroundColor: tokens.colorSubtleBackgroundPressed,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForeground2Pressed\n        }\n    },\n    transparent: {\n        backgroundColor: tokens.colorTransparentBackgroundSelected,\n        ...shorthands.borderColor('transparent'),\n        color: tokens.colorNeutralForeground2BrandSelected,\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackgroundHover,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForeground2BrandHover\n        },\n        ':hover:active,:active:focus-visible': {\n            backgroundColor: tokens.colorTransparentBackgroundPressed,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForeground2BrandPressed\n        }\n    }\n});\nconst useRootDisabledStyles = makeStyles({\n    // Base styles\n    base: {\n        backgroundColor: tokens.colorNeutralBackgroundDisabled,\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n        color: tokens.colorNeutralForegroundDisabled,\n        ':hover': {\n            backgroundColor: tokens.colorNeutralBackgroundDisabled,\n            ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n            color: tokens.colorNeutralForegroundDisabled\n        },\n        ':hover:active,:active:focus-visible': {\n            backgroundColor: tokens.colorNeutralBackgroundDisabled,\n            ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n            color: tokens.colorNeutralForegroundDisabled\n        }\n    },\n    // Appearance variations\n    outline: {\n    },\n    primary: {\n        ...shorthands.borderColor('transparent'),\n        ':hover': {\n            ...shorthands.borderColor('transparent')\n        },\n        ':hover:active,:active:focus-visible': {\n            ...shorthands.borderColor('transparent')\n        }\n    },\n    secondary: {\n    },\n    subtle: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderColor('transparent'),\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackgroundHover,\n            ...shorthands.borderColor('transparent')\n        },\n        ':hover:active,:active:focus-visible': {\n            backgroundColor: tokens.colorTransparentBackgroundPressed,\n            ...shorthands.borderColor('transparent')\n        }\n    },\n    transparent: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderColor('transparent'),\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackgroundHover,\n            ...shorthands.borderColor('transparent')\n        },\n        ':hover:active,:active:focus-visible': {\n            backgroundColor: tokens.colorTransparentBackgroundPressed,\n            ...shorthands.borderColor('transparent')\n        }\n    }\n});\nconst useIconCheckedStyles = makeStyles({\n    // Appearance variations\n    subtleOrTransparent: {\n        color: tokens.colorNeutralForeground2BrandSelected\n    },\n    // High contrast styles\n    highContrast: {\n        '@media (forced-colors: active)': {\n            forcedColorAdjust: 'auto'\n        }\n    }\n});\nconst usePrimaryHighContrastStyles = makeStyles({\n    // Do not use primary variant high contrast styles for toggle buttons\n    // otherwise there isn't enough difference between on/off states\n    base: {\n        '@media (forced-colors: active)': {\n            backgroundColor: 'ButtonFace',\n            ...shorthands.borderColor('ButtonBorder'),\n            color: 'ButtonText',\n            forcedColorAdjust: 'auto'\n        }\n    },\n    disabled: {\n        '@media (forced-colors: active)': {\n            ...shorthands.borderColor('GrayText'),\n            color: 'GrayText',\n            ':focus': {\n                ...shorthands.borderColor('GrayText')\n            }\n        }\n    }\n});\nexport const useToggleButtonStyles_unstable = (state)=>{\n    'use no memo';\n    const rootCheckedStyles = useRootCheckedStyles();\n    const rootDisabledStyles = useRootDisabledStyles();\n    const iconCheckedStyles = useIconCheckedStyles();\n    const primaryHighContrastStyles = usePrimaryHighContrastStyles();\n    const { appearance, checked, disabled, disabledFocusable } = state;\n    state.root.className = mergeClasses(toggleButtonClassNames.root, // Primary high contrast styles\n    appearance === 'primary' && primaryHighContrastStyles.base, appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled, // Checked styles\n    checked && rootCheckedStyles.base, checked && rootCheckedStyles.highContrast, appearance && checked && rootCheckedStyles[appearance], // Disabled styles\n    (disabled || disabledFocusable) && rootDisabledStyles.base, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], // User provided class name\n    state.root.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(toggleButtonClassNames.icon, checked && (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent, iconCheckedStyles.highContrast, state.icon.className);\n    }\n    useButtonStyles_unstable(state);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,mBAAmB,EAAEC,oBAAoB,QAAQ,uBAAuB;AACjF,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,UAAU,EAAEC,YAAY,EAAAC,QAAA,QAAoB,gBAAgB;AACrE,SAASC,wBAAwB,QAAQ,kCAAkC;AAC3E,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE,kBAAkB;EACxBC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,oBAAoB,gBAAGL,QAAA;EAAAM,IAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,YAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;IAAA9D,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAE,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAG,MAAA;IAAAM,OAAA;IAAA6C,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,OAAA;IAAAnE,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAO,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAA6C,SAAA;EAAAC,MAAA;IAAArE,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAO,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAA+C,WAAA;IAAAtE,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAO,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAgD,CAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAC,CAAA;IAAAD,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CA6G5B,CAAC;AACF,MAAME,qBAAqB,gBAAGlF,QAAA;EAAAM,IAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAO,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAuC,OAAA;EAAAK,OAAA;IAAAlE,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAS,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAG,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAA8C,SAAA;EAAAC,MAAA;IAAArE,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAQ,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAE,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAgD,WAAA;IAAAtE,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAQ,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAE,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAiD,CAAA;EAAAC,CAAA;AAAA,CAuD7B,CAAC;AACF,MAAMI,oBAAoB,gBAAGnF,QAAA;EAAAoF,mBAAA;IAAAxE,MAAA;EAAA;EAAAmB,YAAA;IAAAO,OAAA;EAAA;AAAA;EAAAwC,CAAA;EAAAE,CAAA;IAAAA,CAAA;EAAA;AAAA,CAW5B,CAAC;AACF,MAAMK,4BAA4B,gBAAGrF,QAAA;EAAAM,IAAA;IAAA0B,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAgD,QAAA;IAAArD,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAA2B,MAAA;IAAAJ,OAAA;IAAAR,OAAA;IAAAI,MAAA;EAAA;AAAA;EAAAwB,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAoBpC,CAAC;AACF,OAAO,MAAMO,8BAA8B,GAAIC,KAAK,IAAG;EACnD,aAAa;;EACb,MAAMC,iBAAiB,GAAGpF,oBAAoB,CAAC,CAAC;EAChD,MAAMqF,kBAAkB,GAAGR,qBAAqB,CAAC,CAAC;EAClD,MAAMS,iBAAiB,GAAGR,oBAAoB,CAAC,CAAC;EAChD,MAAMS,yBAAyB,GAAGP,4BAA4B,CAAC,CAAC;EAChE,MAAM;IAAEQ,UAAU;IAAEC,OAAO;IAAER,QAAQ;IAAES;EAAkB,CAAC,GAAGP,KAAK;EAClEA,KAAK,CAACrF,IAAI,CAAC6F,SAAS,GAAGjG,YAAY,CAACG,sBAAsB,CAACC,IAAI;EAAE;EACjE0F,UAAU,KAAK,SAAS,IAAID,yBAAyB,CAACtF,IAAI,EAAEuF,UAAU,KAAK,SAAS,KAAKP,QAAQ,IAAIS,iBAAiB,CAAC,IAAIH,yBAAyB,CAACN,QAAQ;EAAE;EAC/JQ,OAAO,IAAIL,iBAAiB,CAACnF,IAAI,EAAEwF,OAAO,IAAIL,iBAAiB,CAAC1D,YAAY,EAAE8D,UAAU,IAAIC,OAAO,IAAIL,iBAAiB,CAACI,UAAU,CAAC;EAAE;EACtI,CAACP,QAAQ,IAAIS,iBAAiB,KAAKL,kBAAkB,CAACpF,IAAI,EAAEuF,UAAU,KAAKP,QAAQ,IAAIS,iBAAiB,CAAC,IAAIL,kBAAkB,CAACG,UAAU,CAAC;EAAE;EAC7IL,KAAK,CAACrF,IAAI,CAAC6F,SAAS,CAAC;EACrB,IAAIR,KAAK,CAACpF,IAAI,EAAE;IACZoF,KAAK,CAACpF,IAAI,CAAC4F,SAAS,GAAGjG,YAAY,CAACG,sBAAsB,CAACE,IAAI,EAAE0F,OAAO,KAAKD,UAAU,KAAK,QAAQ,IAAIA,UAAU,KAAK,aAAa,CAAC,IAAIF,iBAAiB,CAACP,mBAAmB,EAAEO,iBAAiB,CAAC5D,YAAY,EAAEyD,KAAK,CAACpF,IAAI,CAAC4F,SAAS,CAAC;EACzO;EACA/F,wBAAwB,CAACuF,KAAK,CAAC;EAC/B,OAAOA,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["iconFilledClassName","iconRegularClassName","createCustomFocusIndicatorStyle","tokens","shorthands","mergeClasses","__styles","useButtonStyles_unstable","toggleButtonClassNames","root","icon","useRootCheckedStyles","base","De3pzq","g2u3we","h3c5rm","B9xav0g","zhjwy3","sj55zd","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","D0sxk3","t6yez3","Jwef8y","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","Bi91k9c","Bpjbzib","im15vp","Hjvxdg","Gpfmf1","ustxxc","Brsut9c","highContrast","By8wz76","Bcq6wej","Jcjdmf","sc4o1m","Bosien3","B7iucu3","B8gzw0y","Bbkh6qg","F230oe","Bdw8ktp","Bj1xduy","Bhh2cfd","Bahaeuw","Bv2bamp","vxuvv6","Bli9q98","Bx2tt8t","yad0b3","j2fop7","B6rz4yo","Buk7464","Bqg8rp8","pjr8j7","Bgs2klq","Hwei09","Bi9aqk7","Fihjvf","nhyz0p","Buw724y","Bn7qjfh","B0u7xl9","md97jv","h3ptyc","s1kvfj","kogrdj","dqx2i2","o0nolc","outline","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","primary","secondary","subtle","transparent","d","h","m","p","useCheckedAccessibleStyles","Bw0xxkn","oeaueh","Bpd4iqm","Befb4lg","Dhobit","Bfpq7zp","g9k6zt","Bn4voq9","giviqs","Bpkdmpa","ysa4qo","useRootDisabledStyles","useIconCheckedStyles","subtleOrTransparent","usePrimaryHighContrastStyles","disabled","useToggleButtonStyles_unstable","state","rootCheckedStyles","accessibleCheckedStyles","rootDisabledStyles","iconCheckedStyles","primaryHighContrastStyles","appearance","checked","disabledFocusable","isAccessible","className"],"sources":["useToggleButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { iconFilledClassName, iconRegularClassName } from \"@fluentui/react-icons\";\nimport { createCustomFocusIndicatorStyle } from \"@fluentui/react-tabster\";\nimport { tokens } from \"@fluentui/react-theme\";\nimport { shorthands, mergeClasses, makeStyles } from \"@griffel/react\";\nimport { useButtonStyles_unstable } from \"../Button/useButtonStyles.styles.js\";\nexport const toggleButtonClassNames = {\n    root: 'fui-ToggleButton',\n    icon: 'fui-ToggleButton__icon'\n};\nconst useRootCheckedStyles = makeStyles({\n    // Base styles\n    base: {\n        backgroundColor: tokens.colorNeutralBackground1Selected,\n        ...shorthands.borderColor(tokens.colorNeutralStroke1),\n        color: tokens.colorNeutralForeground1Selected,\n        ...shorthands.borderWidth(tokens.strokeWidthThin),\n        [`& .${iconFilledClassName}`]: {\n            display: 'inline'\n        },\n        [`& .${iconRegularClassName}`]: {\n            display: 'none'\n        },\n        ':hover': {\n            backgroundColor: tokens.colorNeutralBackground1Hover,\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n            color: tokens.colorNeutralForeground1Hover\n        },\n        ':hover:active,:active:focus-visible': {\n            backgroundColor: tokens.colorNeutralBackground1Pressed,\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n            color: tokens.colorNeutralForeground1Pressed\n        }\n    },\n    // High contrast styles\n    highContrast: {\n        '@media (forced-colors: active)': {\n            backgroundColor: 'Highlight',\n            ...shorthands.borderColor('Highlight'),\n            color: 'HighlightText',\n            forcedColorAdjust: 'none',\n            ':hover': {\n                backgroundColor: 'HighlightText',\n                ...shorthands.borderColor('Highlight'),\n                color: 'Highlight'\n            },\n            ':hover:active,:active:focus-visible': {\n                backgroundColor: 'HighlightText',\n                ...shorthands.borderColor('Highlight'),\n                color: 'Highlight'\n            },\n            ':focus': {\n                border: '1px solid HighlightText',\n                outlineColor: 'Highlight'\n            }\n        }\n    },\n    // Appearance variations\n    outline: {\n        backgroundColor: tokens.colorTransparentBackgroundSelected,\n        ...shorthands.borderColor(tokens.colorNeutralStroke1),\n        ...shorthands.borderWidth(tokens.strokeWidthThicker),\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackgroundHover\n        },\n        ':hover:active,:active:focus-visible': {\n            backgroundColor: tokens.colorTransparentBackgroundPressed\n        },\n        ...createCustomFocusIndicatorStyle({\n            ...shorthands.borderColor(tokens.colorNeutralStroke1)\n        })\n    },\n    primary: {\n        backgroundColor: tokens.colorBrandBackgroundSelected,\n        ...shorthands.borderColor('transparent'),\n        color: tokens.colorNeutralForegroundOnBrand,\n        ':hover': {\n            backgroundColor: tokens.colorBrandBackgroundHover,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForegroundOnBrand\n        },\n        ':hover:active,:active:focus-visible': {\n            backgroundColor: tokens.colorBrandBackgroundPressed,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForegroundOnBrand\n        }\n    },\n    secondary: {\n    },\n    subtle: {\n        backgroundColor: tokens.colorSubtleBackgroundSelected,\n        ...shorthands.borderColor('transparent'),\n        color: tokens.colorNeutralForeground2Selected,\n        ':hover': {\n            backgroundColor: tokens.colorSubtleBackgroundHover,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForeground2Hover\n        },\n        ':hover:active,:active:focus-visible': {\n            backgroundColor: tokens.colorSubtleBackgroundPressed,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForeground2Pressed\n        }\n    },\n    transparent: {\n        backgroundColor: tokens.colorTransparentBackgroundSelected,\n        ...shorthands.borderColor('transparent'),\n        color: tokens.colorNeutralForeground2BrandSelected,\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackgroundHover,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForeground2BrandHover\n        },\n        ':hover:active,:active:focus-visible': {\n            backgroundColor: tokens.colorTransparentBackgroundPressed,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForeground2BrandPressed\n        }\n    }\n});\nconst useCheckedAccessibleStyles = makeStyles({\n    // Base styles\n    base: {\n        backgroundColor: tokens.colorBrandBackground,\n        ...shorthands.borderColor('transparent'),\n        color: tokens.colorNeutralForegroundOnBrand,\n        ':hover': {\n            backgroundColor: tokens.colorBrandBackgroundHover,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForegroundOnBrand\n        },\n        ':hover:active,:active:focus-visible': {\n            backgroundColor: tokens.colorBrandBackgroundPressed,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForegroundOnBrand\n        }\n    },\n    // Appearance variations\n    outline: {\n        // There's no longer a reason to thicken the outline variant's border\n        ...shorthands.borderWidth(tokens.strokeWidthThin)\n    },\n    primary: {\n        // primary has an inner stroke for the checked style\n        outline: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForegroundOnBrand}`,\n        outlineOffset: `calc(${tokens.strokeWidthThicker} * -1)`,\n        // need to not have the default focus style that removes the outline\n        ...createCustomFocusIndicatorStyle({\n            outline: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForegroundOnBrand}`,\n            outlineOffset: `calc(${tokens.strokeWidthThickest} * -1)`\n        })\n    },\n    subtle: {\n        // override subtle-appearance-specific icon color on hover\n        ':hover': {\n            [`& .${toggleButtonClassNames.icon}`]: {\n                color: tokens.colorNeutralForegroundOnBrand\n            }\n        }\n    },\n    transparent: {\n    },\n    secondary: {\n    }\n});\nconst useRootDisabledStyles = makeStyles({\n    // Base styles\n    base: {\n        backgroundColor: tokens.colorNeutralBackgroundDisabled,\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n        color: tokens.colorNeutralForegroundDisabled,\n        ':hover': {\n            backgroundColor: tokens.colorNeutralBackgroundDisabled,\n            ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n            color: tokens.colorNeutralForegroundDisabled\n        },\n        ':hover:active,:active:focus-visible': {\n            backgroundColor: tokens.colorNeutralBackgroundDisabled,\n            ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n            color: tokens.colorNeutralForegroundDisabled\n        }\n    },\n    // Appearance variations\n    outline: {\n    },\n    primary: {\n        ...shorthands.borderColor('transparent'),\n        ':hover': {\n            ...shorthands.borderColor('transparent')\n        },\n        ':hover:active,:active:focus-visible': {\n            ...shorthands.borderColor('transparent')\n        }\n    },\n    secondary: {\n    },\n    subtle: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderColor('transparent'),\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackgroundHover,\n            ...shorthands.borderColor('transparent')\n        },\n        ':hover:active,:active:focus-visible': {\n            backgroundColor: tokens.colorTransparentBackgroundPressed,\n            ...shorthands.borderColor('transparent')\n        }\n    },\n    transparent: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderColor('transparent'),\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackgroundHover,\n            ...shorthands.borderColor('transparent')\n        },\n        ':hover:active,:active:focus-visible': {\n            backgroundColor: tokens.colorTransparentBackgroundPressed,\n            ...shorthands.borderColor('transparent')\n        }\n    }\n});\nconst useIconCheckedStyles = makeStyles({\n    // Appearance variations with isAccessible=false\n    subtleOrTransparent: {\n        color: tokens.colorNeutralForeground2BrandSelected\n    },\n    // High contrast styles\n    highContrast: {\n        '@media (forced-colors: active)': {\n            forcedColorAdjust: 'auto'\n        }\n    }\n});\nconst usePrimaryHighContrastStyles = makeStyles({\n    // Do not use primary variant high contrast styles for toggle buttons\n    // otherwise there isn't enough difference between on/off states\n    base: {\n        '@media (forced-colors: active)': {\n            backgroundColor: 'ButtonFace',\n            ...shorthands.borderColor('ButtonBorder'),\n            color: 'ButtonText',\n            forcedColorAdjust: 'auto'\n        }\n    },\n    disabled: {\n        '@media (forced-colors: active)': {\n            ...shorthands.borderColor('GrayText'),\n            color: 'GrayText',\n            ':focus': {\n                ...shorthands.borderColor('GrayText')\n            }\n        }\n    }\n});\nexport const useToggleButtonStyles_unstable = (state)=>{\n    const rootCheckedStyles = useRootCheckedStyles();\n    const accessibleCheckedStyles = useCheckedAccessibleStyles();\n    const rootDisabledStyles = useRootDisabledStyles();\n    const iconCheckedStyles = useIconCheckedStyles();\n    const primaryHighContrastStyles = usePrimaryHighContrastStyles();\n    const { appearance, checked, disabled, disabledFocusable, isAccessible } = state;\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(toggleButtonClassNames.root, // Primary high contrast styles\n    appearance === 'primary' && primaryHighContrastStyles.base, appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled, // Checked styles\n    checked && rootCheckedStyles.base, checked && rootCheckedStyles.highContrast, appearance && checked && rootCheckedStyles[appearance], // Opt-in accessible checked styles\n    isAccessible && checked && accessibleCheckedStyles.base, isAccessible && appearance && checked && accessibleCheckedStyles[appearance], // Disabled styles\n    (disabled || disabledFocusable) && rootDisabledStyles.base, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], // User provided class name\n    state.root.className);\n    if (state.icon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.icon.className = mergeClasses(toggleButtonClassNames.icon, checked && !isAccessible && (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent, iconCheckedStyles.highContrast, state.icon.className);\n    }\n    useButtonStyles_unstable(state);\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}