@fluentui/react-button 9.8.1 → 9.9.0

package/CHANGELOG.md

@@ -1,12 +1,35 @@
 # Change Log - @fluentui/react-button
 
-This log was last generated on Thu, 12 Feb 2026 10:42:46 GMT and should not be manually modified.
+This log was last generated on Thu, 26 Mar 2026 08:10:38 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.9.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.9.0)
+
+Thu, 26 Mar 2026 08:10:38 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.8.2..@fluentui/react-button_v9.9.0)
+
+### Minor changes
+
+- fix: ToggleButton provides an opt-in isAccessible variant for accessible checked colors ([PR #35837](https://github.com/microsoft/fluentui/pull/35837) by sarah.higley@microsoft.com)
+- feat: expose button base hooks and types ([PR #35890](https://github.com/microsoft/fluentui/pull/35890) by dmytrokirpa@microsoft.com)
+
+## [9.8.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.8.2)
+
+Wed, 25 Feb 2026 13:32:28 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.8.1..@fluentui/react-button_v9.8.2)
+
+### Patches
+
+- Bump @fluentui/react-aria to v9.17.10 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.1 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.26.2 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+- Bump @fluentui/react-tabster to v9.26.13 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+- Bump @fluentui/react-utilities to v9.26.2 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+
 ## [9.8.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.8.1)
 
-Thu, 12 Feb 2026 10:42:46 GMT 
+Thu, 12 Feb 2026 10:46:12 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.8.0..@fluentui/react-button_v9.8.1)
 
 ### Patches

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import type { ARIAButtonSlotProps } from '@fluentui/react-aria';
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
+import type { DistributiveOmit } from '@fluentui/react-utilities';
 import { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
@@ -12,17 +13,23 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
  */
 export declare const Button: ForwardRefComponent<ButtonProps>;
 
+export declare type ButtonBaseProps = DistributiveOmit<ButtonProps, 'appearance' | 'size' | 'shape'>;
+
+export declare type ButtonBaseState = DistributiveOmit<ButtonState, 'appearance' | 'size' | 'shape'>;
+
 export declare const buttonClassNames: SlotClassNames<ButtonSlots>;
 
 /**
- * @internal
  * Internal context provider used to update default values between internal components
+ *
+ * @internal
  */
 export declare const ButtonContextProvider: React_2.Provider<ButtonContextValue | undefined>;
 
 /**
- * @internal
  * Internal context value used to update default values between internal components
+ *
+ * @internal
  */
 export declare interface ButtonContextValue {
     size?: ButtonSize;
@@ -194,6 +201,10 @@ export declare type SplitButtonState = ComponentState<SplitButtonSlots> & Omit<B
  */
 export declare const ToggleButton: ForwardRefComponent<ToggleButtonProps>;
 
+export declare type ToggleButtonBaseProps = ButtonBaseProps & Pick<ToggleButtonProps, 'defaultChecked' | 'checked' | 'isAccessible'>;
+
+export declare type ToggleButtonBaseState = ButtonBaseState & Required<Pick<ToggleButtonProps, 'checked' | 'isAccessible'>>;
+
 export declare const toggleButtonClassNames: SlotClassNames<ButtonSlots>;
 
 export declare type ToggleButtonProps = ButtonProps & {
@@ -212,9 +223,15 @@ export declare type ToggleButtonProps = ButtonProps & {
      * @default false
      */
     checked?: boolean;
+    /**
+     * Defines whether the `ToggleButton` should use the alternate selected styles that have adequate contrast with the rest style
+     *
+     * @default false
+     */
+    isAccessible?: boolean;
 };
 
-export declare type ToggleButtonState = ButtonState & Required<Pick<ToggleButtonProps, 'checked'>>;
+export declare type ToggleButtonState = ButtonState & Required<Pick<ToggleButtonProps, 'checked' | 'isAccessible'>>;
 
 /**
  * Given user props, defines default props for the Button, calls useButtonState, and returns processed state.
@@ -224,8 +241,17 @@ export declare type ToggleButtonState = ButtonState & Required<Pick<ToggleButton
 export declare const useButton_unstable: (props: ButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => ButtonState;
 
 /**
- * @internal
+ * Base hook for Button component, which manages state related to slots structure and ARIA attributes.
+ *
+ * @param props - User provided props to the Button component.
+ * @param ref - User provided ref to be passed to the Button component.
+ */
+export declare const useButtonBase_unstable: (props: ButtonBaseProps, ref?: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => ButtonBaseState;
+
+/**
  * Internal context hook used to update default values between internal components
+ *
+ * @internal
  */
 export declare const useButtonContext: () => ButtonContextValue;
 
@@ -264,8 +290,16 @@ export declare const useSplitButtonStyles_unstable: (state: SplitButtonState) =>
  */
 export declare const useToggleButton_unstable: (props: ToggleButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => ToggleButtonState;
 
+/**
+ * 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 declare const useToggleButtonBase_unstable: (props: ToggleButtonProps, ref?: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => ToggleButtonBaseState;
+
 export declare const useToggleButtonStyles_unstable: (state: ToggleButtonState) => ToggleButtonState;
 
-export declare function useToggleState<TToggleButtonProps extends Pick<ToggleButtonProps, 'checked' | 'defaultChecked' | 'disabled' | 'disabledFocusable'>, TButtonState extends Pick<ButtonState, 'root'>, TToggleButtonState extends Pick<ToggleButtonState, 'checked' | 'root'>>(props: TToggleButtonProps, state: TButtonState): TToggleButtonState;
+export declare function useToggleState<TToggleButtonProps extends Pick<ToggleButtonProps, 'checked' | 'defaultChecked' | 'disabled' | 'disabledFocusable' | 'isAccessible'>, TButtonState extends Pick<ButtonState, 'root'>, TToggleButtonState extends Pick<ToggleButtonState, 'checked' | 'root' | 'isAccessible'>>(props: TToggleButtonProps, state: TButtonState): TToggleButtonState;
 
 export { }

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

@@ -1 +1 @@
-{"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\nexport type ToggleButtonBaseProps = ButtonBaseProps & Pick<ToggleButtonProps, 'defaultChecked' | 'checked'>;\n\nexport type ToggleButtonState = ButtonState & Required<Pick<ToggleButtonProps, 'checked'>>;\n\nexport type ToggleButtonBaseState = ButtonBaseState & Required<Pick<ToggleButtonProps, 'checked'>>;\n"],"names":[],"mappings":"AAyBA,WAAmG"}
+{"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/useToggleButton.js

@@ -8,7 +8,7 @@ import { useButton_unstable, useButtonBase_unstable } from '../Button/useButton'
  * @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)=>{
-    const { checked = false, defaultChecked = false, ...buttonProps } = props;
+    const { checked = false, defaultChecked = false, isAccessible = false, ...buttonProps } = props;
     const buttonState = useButton_unstable(buttonProps, ref);
     return useToggleState(props, buttonState);
 };
@@ -18,7 +18,7 @@ import { useButton_unstable, useButtonBase_unstable } from '../Button/useButton'
  * @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, ...buttonProps } = props;
+    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 { 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, ...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, ...buttonProps } = props;\n  const buttonState = useButtonBase_unstable(buttonProps, ref);\n\n  return useToggleState(props, buttonState);\n};\n"],"names":["React","useToggleState","useButton_unstable","useButtonBase_unstable","useToggleButton_unstable","props","ref","checked","defaultChecked","buttonProps","buttonState","useToggleButtonBase_unstable"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,kBAAkB,EAAEC,sBAAsB,QAAQ,sBAAsB;AAGjF;;;;;CAKC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,MAAM,EAAEC,UAAU,KAAK,EAAEC,iBAAiB,KAAK,EAAE,GAAGC,aAAa,GAAGJ;IACpE,MAAMK,cAAcR,mBAAmBO,aAAaH;IAEpD,OAAOL,eAAeI,OAAOK;AAC/B,EAAE;AAEF;;;;;CAKC,GACD,OAAO,MAAMC,+BAA+B,CAC1CN,OACAC;IAEA,MAAM,EAAEC,UAAU,KAAK,EAAEC,iBAAiB,KAAK,EAAE,GAAGC,aAAa,GAAGJ;IACpE,MAAMK,cAAcP,uBAAuBM,aAAaH;IAExD,OAAOL,eAAeI,OAAOK;AAC/B,EAAE"}
+{"version":3,"sources":["../src/components/ToggleButton/useToggleButton.ts"],"sourcesContent":["'use client';\n\nimport * 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":["React","useToggleState","useButton_unstable","useButtonBase_unstable","useToggleButton_unstable","props","ref","checked","defaultChecked","isAccessible","buttonProps","buttonState","useToggleButtonBase_unstable"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,kBAAkB,EAAEC,sBAAsB,QAAQ,sBAAsB;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

@@ -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",
@@ -337,6 +389,7 @@ 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 +397,22 @@ export const useToggleButtonStyles_unstable = state => {
     appearance,
     checked,
     disabled,
-    disabledFocusable
+    disabledFocusable,
+    isAccessible
   } = state;
   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);
+    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":"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","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';\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    'use no memo';\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    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        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":[]}

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

@@ -118,6 +118,51 @@ const useRootCheckedStyles = makeStyles({
         }
     }
 });
+const useCheckedAccessibleStyles = makeStyles({
+    // Base styles
+    base: {
+        backgroundColor: tokens.colorBrandBackground,
+        ...shorthands.borderColor('transparent'),
+        color: tokens.colorNeutralForegroundOnBrand,
+        ':hover': {
+            backgroundColor: tokens.colorBrandBackgroundHover,
+            ...shorthands.borderColor('transparent'),
+            color: tokens.colorNeutralForegroundOnBrand
+        },
+        ':hover:active,:active:focus-visible': {
+            backgroundColor: tokens.colorBrandBackgroundPressed,
+            ...shorthands.borderColor('transparent'),
+            color: tokens.colorNeutralForegroundOnBrand
+        }
+    },
+    // Appearance variations
+    outline: {
+        // There's no longer a reason to thicken the outline variant's border
+        ...shorthands.borderWidth(tokens.strokeWidthThin)
+    },
+    primary: {
+        // primary has an inner stroke for the checked style
+        outline: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForegroundOnBrand}`,
+        outlineOffset: `calc(${tokens.strokeWidthThicker} * -1)`,
+        // need to not have the default focus style that removes the outline
+        ...createCustomFocusIndicatorStyle({
+            outline: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForegroundOnBrand}`,
+            outlineOffset: `calc(${tokens.strokeWidthThickest} * -1)`
+        })
+    },
+    subtle: {
+        // override subtle-appearance-specific icon color on hover
+        ':hover': {
+            [`& .${toggleButtonClassNames.icon}`]: {
+                color: tokens.colorNeutralForegroundOnBrand
+            }
+        }
+    },
+    transparent: {
+    },
+    secondary: {
+    }
+});
 const useRootDisabledStyles = makeStyles({
     // Base styles
     base: {
@@ -175,7 +220,7 @@ const useRootDisabledStyles = makeStyles({
     }
 });
 const useIconCheckedStyles = makeStyles({
-    // Appearance variations
+    // Appearance variations with isAccessible=false
     subtleOrTransparent: {
         color: tokens.colorNeutralForeground2BrandSelected
     },
@@ -210,17 +255,19 @@ const usePrimaryHighContrastStyles = makeStyles({
 export const useToggleButtonStyles_unstable = (state)=>{
     'use no memo';
     const rootCheckedStyles = useRootCheckedStyles();
+    const accessibleCheckedStyles = useCheckedAccessibleStyles();
     const rootDisabledStyles = useRootDisabledStyles();
     const iconCheckedStyles = useIconCheckedStyles();
     const primaryHighContrastStyles = usePrimaryHighContrastStyles();
-    const { appearance, checked, disabled, disabledFocusable } = state;
+    const { appearance, checked, disabled, disabledFocusable, isAccessible } = state;
     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], // Disabled 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);
+        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.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ToggleButton/useToggleButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\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';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ButtonSlots } from '../Button/Button.types';\nimport type { ToggleButtonState } from './ToggleButton.types';\n\nexport const toggleButtonClassNames: SlotClassNames<ButtonSlots> = {\n  root: 'fui-ToggleButton',\n  icon: 'fui-ToggleButton__icon',\n};\n\nconst useRootCheckedStyles = makeStyles({\n  // Base styles\n  base: {\n    backgroundColor: tokens.colorNeutralBackground1Selected,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    color: tokens.colorNeutralForeground1Selected,\n\n    ...shorthands.borderWidth(tokens.strokeWidthThin),\n\n    [`& .${iconFilledClassName}`]: {\n      display: 'inline',\n    },\n    [`& .${iconRegularClassName}`]: {\n      display: 'none',\n    },\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      color: tokens.colorNeutralForeground1Hover,\n    },\n\n    ':hover:active,:active:focus-visible': {\n      backgroundColor: tokens.colorNeutralBackground1Pressed,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      color: tokens.colorNeutralForeground1Pressed,\n    },\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\n      ':hover': {\n        backgroundColor: 'HighlightText',\n        ...shorthands.borderColor('Highlight'),\n        color: 'Highlight',\n      },\n\n      ':hover:active,:active:focus-visible': {\n        backgroundColor: 'HighlightText',\n        ...shorthands.borderColor('Highlight'),\n        color: 'Highlight',\n      },\n\n      ':focus': {\n        border: '1px solid HighlightText',\n        outlineColor: 'Highlight',\n      },\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    backgroundColor: tokens.colorTransparentBackgroundSelected,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    ...shorthands.borderWidth(tokens.strokeWidthThicker),\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n    },\n\n    ':hover:active,:active:focus-visible': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n    },\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\n    ':hover': {\n      backgroundColor: tokens.colorBrandBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n\n    ':hover:active,:active:focus-visible': {\n      backgroundColor: tokens.colorBrandBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    backgroundColor: tokens.colorSubtleBackgroundSelected,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForeground2Selected,\n\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2Hover,\n    },\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\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2BrandHover,\n    },\n\n    ':hover:active,:active:focus-visible': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2BrandPressed,\n    },\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\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    ':hover:active,:active:focus-visible': {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    /* No styles */\n  },\n  primary: {\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active,:active:focus-visible': {\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n    },\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\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active,:active:focus-visible': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n    },\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});\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\n  disabled: {\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n      color: 'GrayText',\n\n      ':focus': {\n        ...shorthands.borderColor('GrayText'),\n      },\n    },\n  },\n});\n\nexport const useToggleButtonStyles_unstable = (state: ToggleButtonState): ToggleButtonState => {\n  'use no memo';\n\n  const rootCheckedStyles = useRootCheckedStyles();\n  const rootDisabledStyles = useRootDisabledStyles();\n  const iconCheckedStyles = useIconCheckedStyles();\n  const primaryHighContrastStyles = usePrimaryHighContrastStyles();\n\n  const { appearance, checked, disabled, disabledFocusable } = state;\n\n  state.root.className = mergeClasses(\n    toggleButtonClassNames.root,\n\n    // Primary high contrast styles\n    appearance === 'primary' && primaryHighContrastStyles.base,\n    appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled,\n\n    // Checked styles\n    checked && rootCheckedStyles.base,\n    checked && rootCheckedStyles.highContrast,\n    appearance && checked && rootCheckedStyles[appearance],\n\n    // Disabled styles\n    (disabled || disabledFocusable) && rootDisabledStyles.base,\n    appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],\n\n    // User provided class name\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      toggleButtonClassNames.icon,\n      checked && (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent,\n      iconCheckedStyles.highContrast,\n      state.icon.className,\n    );\n  }\n\n  useButtonStyles_unstable(state);\n\n  return state;\n};\n"],"names":["iconFilledClassName","iconRegularClassName","createCustomFocusIndicatorStyle","tokens","shorthands","mergeClasses","makeStyles","useButtonStyles_unstable","toggleButtonClassNames","root","icon","useRootCheckedStyles","base","backgroundColor","colorNeutralBackground1Selected","borderColor","colorNeutralStroke1","color","colorNeutralForeground1Selected","borderWidth","strokeWidthThin","display","colorNeutralBackground1Hover","colorNeutralStroke1Hover","colorNeutralForeground1Hover","colorNeutralBackground1Pressed","colorNeutralStroke1Pressed","colorNeutralForeground1Pressed","highContrast","forcedColorAdjust","border","outlineColor","outline","colorTransparentBackgroundSelected","strokeWidthThicker","colorTransparentBackgroundHover","colorTransparentBackgroundPressed","primary","colorBrandBackgroundSelected","colorNeutralForegroundOnBrand","colorBrandBackgroundHover","colorBrandBackgroundPressed","secondary","subtle","colorSubtleBackgroundSelected","colorNeutralForeground2Selected","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","transparent","colorNeutralForeground2BrandSelected","colorNeutralForeground2BrandHover","colorNeutralForeground2BrandPressed","useRootDisabledStyles","colorNeutralBackgroundDisabled","colorNeutralStrokeDisabled","colorNeutralForegroundDisabled","colorTransparentBackground","useIconCheckedStyles","subtleOrTransparent","usePrimaryHighContrastStyles","disabled","useToggleButtonStyles_unstable","state","rootCheckedStyles","rootDisabledStyles","iconCheckedStyles","primaryHighContrastStyles","appearance","checked","disabledFocusable","className"],"mappings":"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"}
+{"version":3,"sources":["../src/components/ToggleButton/useToggleButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\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';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ButtonSlots } from '../Button/Button.types';\nimport type { ToggleButtonState } from './ToggleButton.types';\n\nexport const toggleButtonClassNames: SlotClassNames<ButtonSlots> = {\n  root: 'fui-ToggleButton',\n  icon: 'fui-ToggleButton__icon',\n};\n\nconst useRootCheckedStyles = makeStyles({\n  // Base styles\n  base: {\n    backgroundColor: tokens.colorNeutralBackground1Selected,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    color: tokens.colorNeutralForeground1Selected,\n\n    ...shorthands.borderWidth(tokens.strokeWidthThin),\n\n    [`& .${iconFilledClassName}`]: {\n      display: 'inline',\n    },\n    [`& .${iconRegularClassName}`]: {\n      display: 'none',\n    },\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      color: tokens.colorNeutralForeground1Hover,\n    },\n\n    ':hover:active,:active:focus-visible': {\n      backgroundColor: tokens.colorNeutralBackground1Pressed,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      color: tokens.colorNeutralForeground1Pressed,\n    },\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\n      ':hover': {\n        backgroundColor: 'HighlightText',\n        ...shorthands.borderColor('Highlight'),\n        color: 'Highlight',\n      },\n\n      ':hover:active,:active:focus-visible': {\n        backgroundColor: 'HighlightText',\n        ...shorthands.borderColor('Highlight'),\n        color: 'Highlight',\n      },\n\n      ':focus': {\n        border: '1px solid HighlightText',\n        outlineColor: 'Highlight',\n      },\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    backgroundColor: tokens.colorTransparentBackgroundSelected,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    ...shorthands.borderWidth(tokens.strokeWidthThicker),\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n    },\n\n    ':hover:active,:active:focus-visible': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n    },\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\n    ':hover': {\n      backgroundColor: tokens.colorBrandBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n\n    ':hover:active,:active:focus-visible': {\n      backgroundColor: tokens.colorBrandBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    backgroundColor: tokens.colorSubtleBackgroundSelected,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForeground2Selected,\n\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2Hover,\n    },\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\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2BrandHover,\n    },\n\n    ':hover:active,:active:focus-visible': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2BrandPressed,\n    },\n  },\n});\n\nconst useCheckedAccessibleStyles = makeStyles({\n  // Base styles\n  base: {\n    backgroundColor: tokens.colorBrandBackground,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForegroundOnBrand,\n\n    ':hover': {\n      backgroundColor: tokens.colorBrandBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n\n    ':hover:active,:active:focus-visible': {\n      backgroundColor: tokens.colorBrandBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\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\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\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\n  subtle: {\n    // override subtle-appearance-specific icon color on hover\n    ':hover': {\n      [`& .${toggleButtonClassNames.icon}`]: {\n        color: tokens.colorNeutralForegroundOnBrand,\n      },\n    },\n  },\n\n  transparent: {\n    /* No styles */\n  },\n\n  secondary: {\n    /* No styles */\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\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    ':hover:active,:active:focus-visible': {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    /* No styles */\n  },\n  primary: {\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active,:active:focus-visible': {\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n    },\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\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active,:active:focus-visible': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n    },\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});\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\n  disabled: {\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n      color: 'GrayText',\n\n      ':focus': {\n        ...shorthands.borderColor('GrayText'),\n      },\n    },\n  },\n});\n\nexport const useToggleButtonStyles_unstable = (state: ToggleButtonState): ToggleButtonState => {\n  'use no memo';\n\n  const rootCheckedStyles = useRootCheckedStyles();\n  const accessibleCheckedStyles = useCheckedAccessibleStyles();\n  const rootDisabledStyles = useRootDisabledStyles();\n  const iconCheckedStyles = useIconCheckedStyles();\n  const primaryHighContrastStyles = usePrimaryHighContrastStyles();\n\n  const { appearance, checked, disabled, disabledFocusable, isAccessible } = state;\n\n  state.root.className = mergeClasses(\n    toggleButtonClassNames.root,\n\n    // Primary high contrast styles\n    appearance === 'primary' && primaryHighContrastStyles.base,\n    appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled,\n\n    // Checked styles\n    checked && rootCheckedStyles.base,\n    checked && rootCheckedStyles.highContrast,\n    appearance && checked && rootCheckedStyles[appearance],\n\n    // Opt-in accessible checked styles\n    isAccessible && checked && accessibleCheckedStyles.base,\n    isAccessible && appearance && checked && accessibleCheckedStyles[appearance],\n\n    // Disabled styles\n    (disabled || disabledFocusable) && rootDisabledStyles.base,\n    appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],\n\n    // User provided class name\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      toggleButtonClassNames.icon,\n      checked &&\n        !isAccessible &&\n        (appearance === 'subtle' || appearance === 'transparent') &&\n        iconCheckedStyles.subtleOrTransparent,\n      iconCheckedStyles.highContrast,\n      state.icon.className,\n    );\n  }\n\n  useButtonStyles_unstable(state);\n\n  return state;\n};\n"],"names":["iconFilledClassName","iconRegularClassName","createCustomFocusIndicatorStyle","tokens","shorthands","mergeClasses","makeStyles","useButtonStyles_unstable","toggleButtonClassNames","root","icon","useRootCheckedStyles","base","backgroundColor","colorNeutralBackground1Selected","borderColor","colorNeutralStroke1","color","colorNeutralForeground1Selected","borderWidth","strokeWidthThin","display","colorNeutralBackground1Hover","colorNeutralStroke1Hover","colorNeutralForeground1Hover","colorNeutralBackground1Pressed","colorNeutralStroke1Pressed","colorNeutralForeground1Pressed","highContrast","forcedColorAdjust","border","outlineColor","outline","colorTransparentBackgroundSelected","strokeWidthThicker","colorTransparentBackgroundHover","colorTransparentBackgroundPressed","primary","colorBrandBackgroundSelected","colorNeutralForegroundOnBrand","colorBrandBackgroundHover","colorBrandBackgroundPressed","secondary","subtle","colorSubtleBackgroundSelected","colorNeutralForeground2Selected","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","transparent","colorNeutralForeground2BrandSelected","colorNeutralForeground2BrandHover","colorNeutralForeground2BrandPressed","useCheckedAccessibleStyles","colorBrandBackground","outlineOffset","strokeWidthThickest","useRootDisabledStyles","colorNeutralBackgroundDisabled","colorNeutralStrokeDisabled","colorNeutralForegroundDisabled","colorTransparentBackground","useIconCheckedStyles","subtleOrTransparent","usePrimaryHighContrastStyles","disabled","useToggleButtonStyles_unstable","state","rootCheckedStyles","accessibleCheckedStyles","rootDisabledStyles","iconCheckedStyles","primaryHighContrastStyles","appearance","checked","disabledFocusable","isAccessible","className"],"mappings":"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"}

package/lib/contexts/ButtonContext.js

@@ -3,12 +3,14 @@ import * as React from 'react';
 const buttonContext = React.createContext(undefined);
 const buttonContextDefaultValue = {};
 /**
- * @internal
  * Internal context provider used to update default values between internal components
+ *
+ * @internal
  */ export const ButtonContextProvider = buttonContext.Provider;
 /**
- * @internal
  * Internal context hook used to update default values between internal components
+ *
+ * @internal
  */ export const useButtonContext = ()=>{
     var _React_useContext;
     return (_React_useContext = React.useContext(buttonContext)) !== null && _React_useContext !== void 0 ? _React_useContext : buttonContextDefaultValue;

package/lib/contexts/ButtonContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/ButtonContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ButtonSize } from '../components/Button/Button.types';\n\nconst buttonContext = React.createContext<ButtonContextValue | undefined>(undefined);\n\n/**\n * @internal\n * Internal context value used to update default values between internal components\n */\nexport interface ButtonContextValue {\n  size?: ButtonSize;\n}\n\nconst buttonContextDefaultValue: ButtonContextValue = {};\n\n/**\n * @internal\n * Internal context provider used to update default values between internal components\n */\nexport const ButtonContextProvider = buttonContext.Provider;\n\n/**\n * @internal\n * Internal context hook used to update default values between internal components\n */\nexport const useButtonContext = (): ButtonContextValue => {\n  return React.useContext(buttonContext) ?? buttonContextDefaultValue;\n};\n"],"names":["React","buttonContext","createContext","undefined","buttonContextDefaultValue","ButtonContextProvider","Provider","useButtonContext","useContext"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,gBAAgBD,MAAME,aAAa,CAAiCC;AAU1E,MAAMC,4BAAgD,CAAC;AAEvD;;;CAGC,GACD,OAAO,MAAMC,wBAAwBJ,cAAcK,QAAQ,CAAC;AAE5D;;;CAGC,GACD,OAAO,MAAMC,mBAAmB;QACvBP;IAAP,OAAOA,CAAAA,oBAAAA,MAAMQ,UAAU,CAACP,4BAAjBD,+BAAAA,oBAAmCI;AAC5C,EAAE"}
+{"version":3,"sources":["../src/contexts/ButtonContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ButtonSize } from '../components/Button/Button.types';\n\nconst buttonContext = React.createContext<ButtonContextValue | undefined>(undefined);\n\n/**\n * Internal context value used to update default values between internal components\n *\n * @internal\n */\nexport interface ButtonContextValue {\n  size?: ButtonSize;\n}\n\nconst buttonContextDefaultValue: ButtonContextValue = {};\n\n/**\n * Internal context provider used to update default values between internal components\n *\n * @internal\n */\nexport const ButtonContextProvider = buttonContext.Provider;\n\n/**\n * Internal context hook used to update default values between internal components\n *\n * @internal\n */\nexport const useButtonContext = (): ButtonContextValue => {\n  return React.useContext(buttonContext) ?? buttonContextDefaultValue;\n};\n"],"names":["React","buttonContext","createContext","undefined","buttonContextDefaultValue","ButtonContextProvider","Provider","useButtonContext","useContext"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,gBAAgBD,MAAME,aAAa,CAAiCC;AAW1E,MAAMC,4BAAgD,CAAC;AAEvD;;;;CAIC,GACD,OAAO,MAAMC,wBAAwBJ,cAAcK,QAAQ,CAAC;AAE5D;;;;CAIC,GACD,OAAO,MAAMC,mBAAmB;QACvBP;IAAP,OAAOA,CAAAA,oBAAAA,MAAMQ,UAAU,CAACP,4BAAjBD,+BAAAA,oBAAmCI;AAC5C,EAAE"}

package/lib/index.js

@@ -1,12 +1,7 @@
-export { Button, buttonClassNames, renderButton_unstable, useButtonStyles_unstable, useButton_unstable } from './Button';
+export { Button, buttonClassNames, renderButton_unstable, useButtonStyles_unstable, useButton_unstable, useButtonBase_unstable } from './Button';
 export { CompoundButton, compoundButtonClassNames, renderCompoundButton_unstable, useCompoundButtonStyles_unstable, useCompoundButton_unstable } from './CompoundButton';
 export { MenuButton, menuButtonClassNames, renderMenuButton_unstable, useMenuButtonStyles_unstable, useMenuButton_unstable } from './MenuButton';
 export { SplitButton, renderSplitButton_unstable, splitButtonClassNames, useSplitButtonStyles_unstable, useSplitButton_unstable } from './SplitButton';
-export { ToggleButton, renderToggleButton_unstable, toggleButtonClassNames, useToggleButtonStyles_unstable, useToggleButton_unstable } from './ToggleButton';
+export { ToggleButton, renderToggleButton_unstable, toggleButtonClassNames, useToggleButtonStyles_unstable, useToggleButton_unstable, useToggleButtonBase_unstable } from './ToggleButton';
 export { useToggleState } from './utils/index';
 export { ButtonContextProvider, useButtonContext } from './contexts/index';
- // Experimental APIs - will be uncommented in the experimental release branch
- // export { useButtonBase_unstable } from './Button';
- // export type { ButtonBaseProps, ButtonBaseState } from './Button';
- // export { useToggleButtonBase_unstable } from './ToggleButton';
- // export type { ToggleButtonBaseProps, ToggleButtonBaseState } from './ToggleButton';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Button,\n  buttonClassNames,\n  renderButton_unstable,\n  useButtonStyles_unstable,\n  useButton_unstable,\n} from './Button';\nexport type { ButtonProps, ButtonSlots, ButtonState } from './Button';\nexport {\n  CompoundButton,\n  compoundButtonClassNames,\n  renderCompoundButton_unstable,\n  useCompoundButtonStyles_unstable,\n  useCompoundButton_unstable,\n} from './CompoundButton';\nexport type { CompoundButtonProps, CompoundButtonSlots, CompoundButtonState } from './CompoundButton';\nexport {\n  MenuButton,\n  menuButtonClassNames,\n  renderMenuButton_unstable,\n  useMenuButtonStyles_unstable,\n  useMenuButton_unstable,\n} from './MenuButton';\nexport type { MenuButtonProps, MenuButtonSlots, MenuButtonState } from './MenuButton';\nexport {\n  SplitButton,\n  renderSplitButton_unstable,\n  splitButtonClassNames,\n  useSplitButtonStyles_unstable,\n  useSplitButton_unstable,\n} from './SplitButton';\nexport type { SplitButtonProps, SplitButtonSlots, SplitButtonState } from './SplitButton';\nexport {\n  ToggleButton,\n  renderToggleButton_unstable,\n  toggleButtonClassNames,\n  useToggleButtonStyles_unstable,\n  useToggleButton_unstable,\n} from './ToggleButton';\nexport type { ToggleButtonProps, ToggleButtonState } from './ToggleButton';\n\nexport { useToggleState } from './utils/index';\n\nexport { ButtonContextProvider, useButtonContext } from './contexts/index';\nexport type { ButtonContextValue } from './contexts/index';\n\n// Experimental APIs - will be uncommented in the experimental release branch\n// export { useButtonBase_unstable } from './Button';\n// export type { ButtonBaseProps, ButtonBaseState } from './Button';\n// export { useToggleButtonBase_unstable } from './ToggleButton';\n// export type { ToggleButtonBaseProps, ToggleButtonBaseState } from './ToggleButton';\n"],"names":["Button","buttonClassNames","renderButton_unstable","useButtonStyles_unstable","useButton_unstable","CompoundButton","compoundButtonClassNames","renderCompoundButton_unstable","useCompoundButtonStyles_unstable","useCompoundButton_unstable","MenuButton","menuButtonClassNames","renderMenuButton_unstable","useMenuButtonStyles_unstable","useMenuButton_unstable","SplitButton","renderSplitButton_unstable","splitButtonClassNames","useSplitButtonStyles_unstable","useSplitButton_unstable","ToggleButton","renderToggleButton_unstable","toggleButtonClassNames","useToggleButtonStyles_unstable","useToggleButton_unstable","useToggleState","ButtonContextProvider","useButtonContext"],"mappings":"AAAA,SACEA,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,QACb,WAAW;AAElB,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,mBAAmB;AAE1B,SACEC,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,QACjB,eAAe;AAEtB,SACEC,WAAW,EACXC,0BAA0B,EAC1BC,qBAAqB,EACrBC,6BAA6B,EAC7BC,uBAAuB,QAClB,gBAAgB;AAEvB,SACEC,YAAY,EACZC,2BAA2B,EAC3BC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,QACnB,iBAAiB;AAGxB,SAASC,cAAc,QAAQ,gBAAgB;AAE/C,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ,mBAAmB;CAG3E,6EAA6E;CAC7E,qDAAqD;CACrD,oEAAoE;CACpE,iEAAiE;CACjE,sFAAsF"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Button,\n  buttonClassNames,\n  renderButton_unstable,\n  useButtonStyles_unstable,\n  useButton_unstable,\n  useButtonBase_unstable,\n} from './Button';\nexport type { ButtonProps, ButtonSlots, ButtonState, ButtonBaseProps, ButtonBaseState } from './Button';\nexport {\n  CompoundButton,\n  compoundButtonClassNames,\n  renderCompoundButton_unstable,\n  useCompoundButtonStyles_unstable,\n  useCompoundButton_unstable,\n} from './CompoundButton';\nexport type { CompoundButtonProps, CompoundButtonSlots, CompoundButtonState } from './CompoundButton';\nexport {\n  MenuButton,\n  menuButtonClassNames,\n  renderMenuButton_unstable,\n  useMenuButtonStyles_unstable,\n  useMenuButton_unstable,\n} from './MenuButton';\nexport type { MenuButtonProps, MenuButtonSlots, MenuButtonState } from './MenuButton';\nexport {\n  SplitButton,\n  renderSplitButton_unstable,\n  splitButtonClassNames,\n  useSplitButtonStyles_unstable,\n  useSplitButton_unstable,\n} from './SplitButton';\nexport type { SplitButtonProps, SplitButtonSlots, SplitButtonState } from './SplitButton';\nexport {\n  ToggleButton,\n  renderToggleButton_unstable,\n  toggleButtonClassNames,\n  useToggleButtonStyles_unstable,\n  useToggleButton_unstable,\n  useToggleButtonBase_unstable,\n} from './ToggleButton';\nexport type {\n  ToggleButtonProps,\n  ToggleButtonState,\n  ToggleButtonBaseProps,\n  ToggleButtonBaseState,\n} from './ToggleButton';\n\nexport { useToggleState } from './utils/index';\n\nexport { ButtonContextProvider, useButtonContext } from './contexts/index';\nexport type { ButtonContextValue } from './contexts/index';\n"],"names":["Button","buttonClassNames","renderButton_unstable","useButtonStyles_unstable","useButton_unstable","useButtonBase_unstable","CompoundButton","compoundButtonClassNames","renderCompoundButton_unstable","useCompoundButtonStyles_unstable","useCompoundButton_unstable","MenuButton","menuButtonClassNames","renderMenuButton_unstable","useMenuButtonStyles_unstable","useMenuButton_unstable","SplitButton","renderSplitButton_unstable","splitButtonClassNames","useSplitButtonStyles_unstable","useSplitButton_unstable","ToggleButton","renderToggleButton_unstable","toggleButtonClassNames","useToggleButtonStyles_unstable","useToggleButton_unstable","useToggleButtonBase_unstable","useToggleState","ButtonContextProvider","useButtonContext"],"mappings":"AAAA,SACEA,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,EAClBC,sBAAsB,QACjB,WAAW;AAElB,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,mBAAmB;AAE1B,SACEC,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,QACjB,eAAe;AAEtB,SACEC,WAAW,EACXC,0BAA0B,EAC1BC,qBAAqB,EACrBC,6BAA6B,EAC7BC,uBAAuB,QAClB,gBAAgB;AAEvB,SACEC,YAAY,EACZC,2BAA2B,EAC3BC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,EACxBC,4BAA4B,QACvB,iBAAiB;AAQxB,SAASC,cAAc,QAAQ,gBAAgB;AAE/C,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ,mBAAmB"}