@fluentui/react-switch 9.5.4 → 9.6.1

package/CHANGELOG.md

@@ -1,12 +1,30 @@
 # Change Log - @fluentui/react-switch
 
-This log was last generated on Wed, 25 Feb 2026 13:28:23 GMT and should not be manually modified.
+This log was last generated on Wed, 11 Mar 2026 09:20:38 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.6.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.6.1)
+
+Wed, 11 Mar 2026 09:20:38 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.6.0..@fluentui/react-switch_v9.6.1)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.4.16 ([PR #35854](https://github.com/microsoft/fluentui/pull/35854) by beachball)
+
+## [9.6.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.6.0)
+
+Tue, 03 Mar 2026 09:43:41 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.5.4..@fluentui/react-switch_v9.6.0)
+
+### Minor changes
+
+- feat: add disabledFocusable prop to Switch component ([PR #35799](https://github.com/microsoft/fluentui/pull/35799) by copilot@microsoft.com)
+
 ## [9.5.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.5.4)
 
-Wed, 25 Feb 2026 13:28:23 GMT 
+Wed, 25 Feb 2026 13:32:28 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.5.3..@fluentui/react-switch_v9.5.4)
 
 ### Patches

package/dist/index.d.ts

@@ -41,6 +41,13 @@ export declare type SwitchProps = Omit<ComponentProps<Partial<SwitchSlots>, 'inp
      * @default false
      */
     checked?: boolean;
+    /**
+     * When set, allows the Switch to be focusable even when it has been disabled. This is used in scenarios where it is
+     * important to keep a consistent tab order for screen reader and keyboard users.
+     *
+     * @default false
+     */
+    disabledFocusable?: boolean;
     /**
      * Defines whether the Switch is initially in a checked state or not when rendered.
      *
@@ -93,7 +100,7 @@ export declare type SwitchSlots = {
 /**
  * State used in rendering Switch
  */
-export declare type SwitchState = ComponentState<SwitchSlots> & Required<Pick<SwitchProps, 'labelPosition' | 'size'>>;
+export declare type SwitchState = ComponentState<SwitchSlots> & Required<Pick<SwitchProps, 'disabledFocusable' | 'labelPosition' | 'size'>>;
 
 /**
  * Create the state required to render Switch.

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Switch/Switch.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type SwitchSlots = {\n  /**\n   * The root element of the Switch.\n   *\n   * The root slot receives the `className` and `style` specified directly on the `<Switch>` tag.\n   * All other native props will be applied to the primary slot: `input`.\n   */\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * The track and the thumb sliding over it indicating the on and off status of the Switch.\n   */\n  indicator: NonNullable<Slot<'div'>>;\n\n  /**\n   * Hidden input that handles the Switch's functionality.\n   *\n   * This is the PRIMARY slot: all native properties specified directly on the `<Switch>` tag will be applied to this\n   * slot, except `className` and `style`, which remain on the root slot.\n   */\n  input: NonNullable<Slot<'input'>>;\n\n  /**\n   * The Switch's label.\n   */\n  label?: Slot<typeof Label>;\n};\n\nexport type SwitchOnChangeData = {\n  checked: boolean;\n};\n\n/**\n * Switch Props\n */\nexport type SwitchProps = Omit<\n  ComponentProps<Partial<SwitchSlots>, 'input'>,\n  'checked' | 'defaultChecked' | 'onChange' | 'size'\n> & {\n  /**\n   * Defines the controlled checked state of the Switch.\n   * If passed, Switch 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 `onChange` events and re-rendering.\n   *\n   * @default false\n   */\n  checked?: boolean;\n\n  /**\n   * Defines whether the Switch is initially in a checked state or not when rendered.\n   *\n   * @default false\n   */\n  defaultChecked?: boolean;\n\n  /**\n   * The position of the label relative to the Switch.\n   *\n   * @default after\n   */\n  labelPosition?: 'above' | 'after' | 'before';\n\n  /**\n   * The size of the Switch.\n   *\n   *  @default 'medium'\n   */\n  size?: 'small' | 'medium';\n\n  /**\n   * Callback to be called when the checked state value changes.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: SwitchOnChangeData) => void;\n};\n\n/**\n * Switch base props, excluding design-related props like size\n */\nexport type SwitchBaseProps = Omit<SwitchProps, 'size'>;\n\n/**\n * State used in rendering Switch\n */\nexport type SwitchState = ComponentState<SwitchSlots> & Required<Pick<SwitchProps, 'labelPosition' | 'size'>>;\n\n/**\n * Switch base state, excluding design-related state like size\n */\nexport type SwitchBaseState = Omit<SwitchState, 'size'>;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["../src/components/Switch/Switch.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type SwitchSlots = {\n  /**\n   * The root element of the Switch.\n   *\n   * The root slot receives the `className` and `style` specified directly on the `<Switch>` tag.\n   * All other native props will be applied to the primary slot: `input`.\n   */\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * The track and the thumb sliding over it indicating the on and off status of the Switch.\n   */\n  indicator: NonNullable<Slot<'div'>>;\n\n  /**\n   * Hidden input that handles the Switch's functionality.\n   *\n   * This is the PRIMARY slot: all native properties specified directly on the `<Switch>` tag will be applied to this\n   * slot, except `className` and `style`, which remain on the root slot.\n   */\n  input: NonNullable<Slot<'input'>>;\n\n  /**\n   * The Switch's label.\n   */\n  label?: Slot<typeof Label>;\n};\n\nexport type SwitchOnChangeData = {\n  checked: boolean;\n};\n\n/**\n * Switch Props\n */\nexport type SwitchProps = Omit<\n  ComponentProps<Partial<SwitchSlots>, 'input'>,\n  'checked' | 'defaultChecked' | 'onChange' | 'size'\n> & {\n  /**\n   * Defines the controlled checked state of the Switch.\n   * If passed, Switch 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 `onChange` events and re-rendering.\n   *\n   * @default false\n   */\n  checked?: boolean;\n\n  /**\n   * When set, allows the Switch to be focusable even when it has been disabled. This is used in scenarios where it is\n   * important to keep a consistent tab order for screen reader and keyboard users.\n   *\n   * @default false\n   */\n  disabledFocusable?: boolean;\n\n  /**\n   * Defines whether the Switch is initially in a checked state or not when rendered.\n   *\n   * @default false\n   */\n  defaultChecked?: boolean;\n\n  /**\n   * The position of the label relative to the Switch.\n   *\n   * @default after\n   */\n  labelPosition?: 'above' | 'after' | 'before';\n\n  /**\n   * The size of the Switch.\n   *\n   *  @default 'medium'\n   */\n  size?: 'small' | 'medium';\n\n  /**\n   * Callback to be called when the checked state value changes.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: SwitchOnChangeData) => void;\n};\n\n/**\n * Switch base props, excluding design-related props like size\n */\nexport type SwitchBaseProps = Omit<SwitchProps, 'size'>;\n\n/**\n * State used in rendering Switch\n */\nexport type SwitchState = ComponentState<SwitchSlots> &\n  Required<Pick<SwitchProps, 'disabledFocusable' | 'labelPosition' | 'size'>>;\n\n/**\n * Switch base state, excluding design-related state like size\n */\nexport type SwitchBaseState = Omit<SwitchState, 'size'>;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/components/Switch/useSwitch.js

@@ -32,14 +32,15 @@ import { getPartitionedNativeProps, mergeCallbacks, useId, slot } from '@fluentu
         supportsLabelFor: true,
         supportsRequired: true
     });
-    const { checked, defaultChecked, disabled, labelPosition = 'after', onChange, required } = props;
+    const { checked, defaultChecked, disabled, disabledFocusable = false, labelPosition = 'after', onChange, required } = props;
     const nativeProps = getPartitionedNativeProps({
         props,
         primarySlotTagName: 'input',
         excludedPropNames: [
             'checked',
             'defaultChecked',
-            'onChange'
+            'onChange',
+            'disabledFocusable'
         ]
     });
     const id = useId('switch-', nativeProps.primary.id);
@@ -65,16 +66,30 @@ import { getPartitionedNativeProps, mergeCallbacks, useId, slot } from '@fluentu
             ref,
             role: 'switch',
             type: 'checkbox',
-            ...nativeProps.primary
+            ...nativeProps.primary,
+            disabled: disabled && !disabledFocusable,
+            ...disabledFocusable && {
+                'aria-disabled': true
+            }
         },
         elementType: 'input'
     });
     input.onChange = mergeCallbacks(input.onChange, (ev)=>onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
             checked: ev.currentTarget.checked
         }));
+    input.onClick = mergeCallbacks(input.onClick, (ev)=>{
+        if (disabledFocusable) {
+            ev.preventDefault();
+        }
+    });
+    input.onKeyDown = mergeCallbacks(input.onKeyDown, (ev)=>{
+        if (disabledFocusable && (ev.key === ' ' || ev.key === 'Enter')) {
+            ev.preventDefault();
+        }
+    });
     const label = slot.optional(props.label, {
         defaultProps: {
-            disabled,
+            disabled: disabled || disabledFocusable,
             htmlFor: id,
             required,
             size: 'medium'
@@ -82,6 +97,7 @@ import { getPartitionedNativeProps, mergeCallbacks, useId, slot } from '@fluentu
         elementType: Label
     });
     return {
+        disabledFocusable,
         labelPosition,
         components: {
             root: 'div',

package/lib/components/Switch/useSwitch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Switch/useSwitch.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport { getPartitionedNativeProps, mergeCallbacks, useId, slot } from '@fluentui/react-utilities';\nimport type { SwitchProps, SwitchState, SwitchBaseProps, SwitchBaseState } from './Switch.types';\n\n/**\n * Create the state required to render Switch.\n *\n * The returned state can be modified with hooks such as useSwitchStyles_unstable,\n * before being passed to renderSwitch_unstable.\n *\n * @param props - props from this instance of Switch\n * @param ref - reference to `<input>` element of Switch\n */\nexport const useSwitch_unstable = (props: SwitchProps, ref: React.Ref<HTMLInputElement>): SwitchState => {\n  const { size = 'medium', ...baseProps } = props;\n\n  const baseState = useSwitchBase_unstable(baseProps, ref);\n\n  return {\n    ...baseState,\n    size,\n  };\n};\n\n/**\n * Base hook for Switch component, manages state and structure common to all variants of Switch\n *\n * @param props - base props from this instance of Switch\n * @param ref - reference to `<input>` element of Switch\n */\nexport const useSwitchBase_unstable = (props: SwitchBaseProps, ref?: React.Ref<HTMLInputElement>): SwitchBaseState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true });\n\n  const { checked, defaultChecked, disabled, labelPosition = 'after', onChange, required } = props;\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['checked', 'defaultChecked', 'onChange'],\n  });\n\n  const id = useId('switch-', nativeProps.primary.id);\n\n  const root = slot.always(props.root, {\n    defaultProps: { ref: useFocusWithin<HTMLDivElement>(), ...nativeProps.root },\n    elementType: 'div',\n  });\n  const indicator = slot.always(props.indicator, {\n    defaultProps: { 'aria-hidden': true, children: <CircleFilled /> },\n    elementType: 'div',\n  });\n  const input = slot.always(props.input, {\n    defaultProps: { checked, defaultChecked, id, ref, role: 'switch', type: 'checkbox', ...nativeProps.primary },\n    elementType: 'input',\n  });\n  input.onChange = mergeCallbacks(input.onChange, ev => onChange?.(ev, { checked: ev.currentTarget.checked }));\n  const label = slot.optional(props.label, {\n    defaultProps: { disabled, htmlFor: id, required, size: 'medium' },\n    elementType: Label,\n  });\n  return {\n    labelPosition,\n    components: { root: 'div', indicator: 'div', input: 'input', label: Label },\n\n    root,\n    indicator,\n    input,\n    label,\n  };\n};\n"],"names":["React","useFieldControlProps_unstable","CircleFilled","Label","useFocusWithin","getPartitionedNativeProps","mergeCallbacks","useId","slot","useSwitch_unstable","props","ref","size","baseProps","baseState","useSwitchBase_unstable","supportsLabelFor","supportsRequired","checked","defaultChecked","disabled","labelPosition","onChange","required","nativeProps","primarySlotTagName","excludedPropNames","id","primary","root","always","defaultProps","elementType","indicator","children","input","role","type","ev","currentTarget","label","optional","htmlFor","components"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,KAAK,QAAQ,wBAAwB;AAC9C,SAASC,cAAc,QAAQ,0BAA0B;AACzD,SAASC,yBAAyB,EAAEC,cAAc,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAGnG;;;;;;;;CAQC,GACD,OAAO,MAAMC,qBAAqB,CAACC,OAAoBC;IACrD,MAAM,EAAEC,OAAO,QAAQ,EAAE,GAAGC,WAAW,GAAGH;IAE1C,MAAMI,YAAYC,uBAAuBF,WAAWF;IAEpD,OAAO;QACL,GAAGG,SAAS;QACZF;IACF;AACF,EAAE;AAEF;;;;;CAKC,GACD,OAAO,MAAMG,yBAAyB,CAACL,OAAwBC;IAC7D,+CAA+C;IAC/CD,QAAQT,8BAA8BS,OAAO;QAAEM,kBAAkB;QAAMC,kBAAkB;IAAK;IAE9F,MAAM,EAAEC,OAAO,EAAEC,cAAc,EAAEC,QAAQ,EAAEC,gBAAgB,OAAO,EAAEC,QAAQ,EAAEC,QAAQ,EAAE,GAAGb;IAE3F,MAAMc,cAAcnB,0BAA0B;QAC5CK;QACAe,oBAAoB;QACpBC,mBAAmB;YAAC;YAAW;YAAkB;SAAW;IAC9D;IAEA,MAAMC,KAAKpB,MAAM,WAAWiB,YAAYI,OAAO,CAACD,EAAE;IAElD,MAAME,OAAOrB,KAAKsB,MAAM,CAACpB,MAAMmB,IAAI,EAAE;QACnCE,cAAc;YAAEpB,KAAKP;YAAkC,GAAGoB,YAAYK,IAAI;QAAC;QAC3EG,aAAa;IACf;IACA,MAAMC,YAAYzB,KAAKsB,MAAM,CAACpB,MAAMuB,SAAS,EAAE;QAC7CF,cAAc;YAAE,eAAe;YAAMG,wBAAU,oBAAChC;QAAgB;QAChE8B,aAAa;IACf;IACA,MAAMG,QAAQ3B,KAAKsB,MAAM,CAACpB,MAAMyB,KAAK,EAAE;QACrCJ,cAAc;YAAEb;YAASC;YAAgBQ;YAAIhB;YAAKyB,MAAM;YAAUC,MAAM;YAAY,GAAGb,YAAYI,OAAO;QAAC;QAC3GI,aAAa;IACf;IACAG,MAAMb,QAAQ,GAAGhB,eAAe6B,MAAMb,QAAQ,EAAEgB,CAAAA,KAAMhB,qBAAAA,+BAAAA,SAAWgB,IAAI;YAAEpB,SAASoB,GAAGC,aAAa,CAACrB,OAAO;QAAC;IACzG,MAAMsB,QAAQhC,KAAKiC,QAAQ,CAAC/B,MAAM8B,KAAK,EAAE;QACvCT,cAAc;YAAEX;YAAUsB,SAASf;YAAIJ;YAAUX,MAAM;QAAS;QAChEoB,aAAa7B;IACf;IACA,OAAO;QACLkB;QACAsB,YAAY;YAAEd,MAAM;YAAOI,WAAW;YAAOE,OAAO;YAASK,OAAOrC;QAAM;QAE1E0B;QACAI;QACAE;QACAK;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/Switch/useSwitch.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport { getPartitionedNativeProps, mergeCallbacks, useId, slot } from '@fluentui/react-utilities';\nimport type { SwitchProps, SwitchState, SwitchBaseProps, SwitchBaseState } from './Switch.types';\n\n/**\n * Create the state required to render Switch.\n *\n * The returned state can be modified with hooks such as useSwitchStyles_unstable,\n * before being passed to renderSwitch_unstable.\n *\n * @param props - props from this instance of Switch\n * @param ref - reference to `<input>` element of Switch\n */\nexport const useSwitch_unstable = (props: SwitchProps, ref: React.Ref<HTMLInputElement>): SwitchState => {\n  const { size = 'medium', ...baseProps } = props;\n\n  const baseState = useSwitchBase_unstable(baseProps, ref);\n\n  return {\n    ...baseState,\n    size,\n  };\n};\n\n/**\n * Base hook for Switch component, manages state and structure common to all variants of Switch\n *\n * @param props - base props from this instance of Switch\n * @param ref - reference to `<input>` element of Switch\n */\nexport const useSwitchBase_unstable = (props: SwitchBaseProps, ref?: React.Ref<HTMLInputElement>): SwitchBaseState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true });\n\n  const {\n    checked,\n    defaultChecked,\n    disabled,\n    disabledFocusable = false,\n    labelPosition = 'after',\n    onChange,\n    required,\n  } = props;\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['checked', 'defaultChecked', 'onChange', 'disabledFocusable'],\n  });\n\n  const id = useId('switch-', nativeProps.primary.id);\n\n  const root = slot.always(props.root, {\n    defaultProps: { ref: useFocusWithin<HTMLDivElement>(), ...nativeProps.root },\n    elementType: 'div',\n  });\n  const indicator = slot.always(props.indicator, {\n    defaultProps: { 'aria-hidden': true, children: <CircleFilled /> },\n    elementType: 'div',\n  });\n  const input = slot.always(props.input, {\n    defaultProps: {\n      checked,\n      defaultChecked,\n      id,\n      ref,\n      role: 'switch',\n      type: 'checkbox',\n      ...nativeProps.primary,\n      disabled: disabled && !disabledFocusable,\n      ...(disabledFocusable && { 'aria-disabled': true }),\n    },\n    elementType: 'input',\n  });\n  input.onChange = mergeCallbacks(input.onChange, ev => onChange?.(ev, { checked: ev.currentTarget.checked }));\n  input.onClick = mergeCallbacks(input.onClick, ev => {\n    if (disabledFocusable) {\n      ev.preventDefault();\n    }\n  });\n  input.onKeyDown = mergeCallbacks(input.onKeyDown, ev => {\n    if (disabledFocusable && (ev.key === ' ' || ev.key === 'Enter')) {\n      ev.preventDefault();\n    }\n  });\n  const label = slot.optional(props.label, {\n    defaultProps: { disabled: disabled || disabledFocusable, htmlFor: id, required, size: 'medium' },\n    elementType: Label,\n  });\n  return {\n    disabledFocusable,\n    labelPosition,\n    components: { root: 'div', indicator: 'div', input: 'input', label: Label },\n\n    root,\n    indicator,\n    input,\n    label,\n  };\n};\n"],"names":["React","useFieldControlProps_unstable","CircleFilled","Label","useFocusWithin","getPartitionedNativeProps","mergeCallbacks","useId","slot","useSwitch_unstable","props","ref","size","baseProps","baseState","useSwitchBase_unstable","supportsLabelFor","supportsRequired","checked","defaultChecked","disabled","disabledFocusable","labelPosition","onChange","required","nativeProps","primarySlotTagName","excludedPropNames","id","primary","root","always","defaultProps","elementType","indicator","children","input","role","type","ev","currentTarget","onClick","preventDefault","onKeyDown","key","label","optional","htmlFor","components"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,KAAK,QAAQ,wBAAwB;AAC9C,SAASC,cAAc,QAAQ,0BAA0B;AACzD,SAASC,yBAAyB,EAAEC,cAAc,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAGnG;;;;;;;;CAQC,GACD,OAAO,MAAMC,qBAAqB,CAACC,OAAoBC;IACrD,MAAM,EAAEC,OAAO,QAAQ,EAAE,GAAGC,WAAW,GAAGH;IAE1C,MAAMI,YAAYC,uBAAuBF,WAAWF;IAEpD,OAAO;QACL,GAAGG,SAAS;QACZF;IACF;AACF,EAAE;AAEF;;;;;CAKC,GACD,OAAO,MAAMG,yBAAyB,CAACL,OAAwBC;IAC7D,+CAA+C;IAC/CD,QAAQT,8BAA8BS,OAAO;QAAEM,kBAAkB;QAAMC,kBAAkB;IAAK;IAE9F,MAAM,EACJC,OAAO,EACPC,cAAc,EACdC,QAAQ,EACRC,oBAAoB,KAAK,EACzBC,gBAAgB,OAAO,EACvBC,QAAQ,EACRC,QAAQ,EACT,GAAGd;IAEJ,MAAMe,cAAcpB,0BAA0B;QAC5CK;QACAgB,oBAAoB;QACpBC,mBAAmB;YAAC;YAAW;YAAkB;YAAY;SAAoB;IACnF;IAEA,MAAMC,KAAKrB,MAAM,WAAWkB,YAAYI,OAAO,CAACD,EAAE;IAElD,MAAME,OAAOtB,KAAKuB,MAAM,CAACrB,MAAMoB,IAAI,EAAE;QACnCE,cAAc;YAAErB,KAAKP;YAAkC,GAAGqB,YAAYK,IAAI;QAAC;QAC3EG,aAAa;IACf;IACA,MAAMC,YAAY1B,KAAKuB,MAAM,CAACrB,MAAMwB,SAAS,EAAE;QAC7CF,cAAc;YAAE,eAAe;YAAMG,wBAAU,oBAACjC;QAAgB;QAChE+B,aAAa;IACf;IACA,MAAMG,QAAQ5B,KAAKuB,MAAM,CAACrB,MAAM0B,KAAK,EAAE;QACrCJ,cAAc;YACZd;YACAC;YACAS;YACAjB;YACA0B,MAAM;YACNC,MAAM;YACN,GAAGb,YAAYI,OAAO;YACtBT,UAAUA,YAAY,CAACC;YACvB,GAAIA,qBAAqB;gBAAE,iBAAiB;YAAK,CAAC;QACpD;QACAY,aAAa;IACf;IACAG,MAAMb,QAAQ,GAAGjB,eAAe8B,MAAMb,QAAQ,EAAEgB,CAAAA,KAAMhB,qBAAAA,+BAAAA,SAAWgB,IAAI;YAAErB,SAASqB,GAAGC,aAAa,CAACtB,OAAO;QAAC;IACzGkB,MAAMK,OAAO,GAAGnC,eAAe8B,MAAMK,OAAO,EAAEF,CAAAA;QAC5C,IAAIlB,mBAAmB;YACrBkB,GAAGG,cAAc;QACnB;IACF;IACAN,MAAMO,SAAS,GAAGrC,eAAe8B,MAAMO,SAAS,EAAEJ,CAAAA;QAChD,IAAIlB,qBAAsBkB,CAAAA,GAAGK,GAAG,KAAK,OAAOL,GAAGK,GAAG,KAAK,OAAM,GAAI;YAC/DL,GAAGG,cAAc;QACnB;IACF;IACA,MAAMG,QAAQrC,KAAKsC,QAAQ,CAACpC,MAAMmC,KAAK,EAAE;QACvCb,cAAc;YAAEZ,UAAUA,YAAYC;YAAmB0B,SAASnB;YAAIJ;YAAUZ,MAAM;QAAS;QAC/FqB,aAAa9B;IACf;IACA,OAAO;QACLkB;QACAC;QACA0B,YAAY;YAAElB,MAAM;YAAOI,WAAW;YAAOE,OAAO;YAASS,OAAO1C;QAAM;QAE1E2B;QACAI;QACAE;QACAS;IACF;AACF,EAAE"}

package/lib/components/Switch/useSwitchStyles.styles.js

@@ -50,9 +50,9 @@ const useIndicatorStyles = /*#__PURE__*/__styles({
 }, {
   d: [".f1hu3pq6{margin-top:0;}", ".fses1vf{font-size:14px;}", ".fd461yt{height:16px;}", ".f1szoe96{width:32px;}"]
 });
-const useInputBaseClassName = /*#__PURE__*/__resetStyles("rsji9ng", "r15xih98", {
-  r: [".rsji9ng{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;width:calc(40px + 2 * var(--spacingHorizontalS));}", ".rsji9ng:checked~.fui-Switch__indicator>*{transform:translateX(20px);}", ".rsji9ng:disabled{cursor:default;}", ".rsji9ng:disabled~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}", ".rsji9ng:disabled~.fui-Switch__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}", ".rsji9ng:enabled:not(:checked)~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);border-color:var(--colorNeutralStrokeAccessible);}", ".rsji9ng:enabled:not(:checked)~.fui-Switch__label{color:var(--colorNeutralForeground1);}", ".rsji9ng:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);border-color:var(--colorNeutralStrokeAccessibleHover);}", ".rsji9ng:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);border-color:var(--colorNeutralStrokeAccessiblePressed);}", ".rsji9ng:enabled:checked~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorTransparentStroke);}", ".rsji9ng:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorTransparentStrokeInteractive);}", ".rsji9ng:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorTransparentStrokeInteractive);}", ".rsji9ng:disabled:not(:checked)~.fui-Switch__indicator{border-color:var(--colorNeutralStrokeDisabled);}", ".rsji9ng:disabled:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);border-color:var(--colorTransparentStrokeDisabled);}", ".r15xih98{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;width:calc(40px + 2 * var(--spacingHorizontalS));}", ".r15xih98:checked~.fui-Switch__indicator>*{transform:translateX(-20px);}", ".r15xih98:disabled{cursor:default;}", ".r15xih98:disabled~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}", ".r15xih98:disabled~.fui-Switch__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}", ".r15xih98:enabled:not(:checked)~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);border-color:var(--colorNeutralStrokeAccessible);}", ".r15xih98:enabled:not(:checked)~.fui-Switch__label{color:var(--colorNeutralForeground1);}", ".r15xih98:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);border-color:var(--colorNeutralStrokeAccessibleHover);}", ".r15xih98:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);border-color:var(--colorNeutralStrokeAccessiblePressed);}", ".r15xih98:enabled:checked~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorTransparentStroke);}", ".r15xih98:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorTransparentStrokeInteractive);}", ".r15xih98:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorTransparentStrokeInteractive);}", ".r15xih98:disabled:not(:checked)~.fui-Switch__indicator{border-color:var(--colorNeutralStrokeDisabled);}", ".r15xih98:disabled:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);border-color:var(--colorTransparentStrokeDisabled);}"],
-  s: ["@media (forced-colors: active){.rsji9ng:disabled~.fui-Switch__indicator{color:GrayText;border-color:GrayText;}.rsji9ng:disabled~.fui-Switch__label{color:GrayText;}.rsji9ng:hover{color:CanvasText;}.rsji9ng:hover:active{color:CanvasText;}.rsji9ng:enabled:checked:hover~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.rsji9ng:enabled:checked:hover:active~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.rsji9ng:enabled:checked~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}}", "@media (forced-colors: active){.r15xih98:disabled~.fui-Switch__indicator{color:GrayText;border-color:GrayText;}.r15xih98:disabled~.fui-Switch__label{color:GrayText;}.r15xih98:hover{color:CanvasText;}.r15xih98:hover:active{color:CanvasText;}.r15xih98:enabled:checked:hover~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.r15xih98:enabled:checked:hover:active~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.r15xih98:enabled:checked~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}}"]
+const useInputBaseClassName = /*#__PURE__*/__resetStyles("r12ojtgy", "rhc0e9x", {
+  r: [".r12ojtgy{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;width:calc(40px + 2 * var(--spacingHorizontalS));}", ".r12ojtgy:checked~.fui-Switch__indicator>*{transform:translateX(20px);}", ".r12ojtgy:disabled,.r12ojtgy[aria-disabled=\"true\"]{cursor:default;}", ".r12ojtgy:disabled~.fui-Switch__indicator,.r12ojtgy[aria-disabled=\"true\"]~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}", ".r12ojtgy:disabled~.fui-Switch__label,.r12ojtgy[aria-disabled=\"true\"]~.fui-Switch__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}", ".r12ojtgy:enabled:not(:checked):not([aria-disabled=\"true\"])~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);border-color:var(--colorNeutralStrokeAccessible);}", ".r12ojtgy:enabled:not(:checked):not([aria-disabled=\"true\"])~.fui-Switch__label{color:var(--colorNeutralForeground1);}", ".r12ojtgy:enabled:not(:checked):not([aria-disabled=\"true\"]):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);border-color:var(--colorNeutralStrokeAccessibleHover);}", ".r12ojtgy:enabled:not(:checked):not([aria-disabled=\"true\"]):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);border-color:var(--colorNeutralStrokeAccessiblePressed);}", ".r12ojtgy:enabled:checked:not([aria-disabled=\"true\"])~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorTransparentStroke);}", ".r12ojtgy:enabled:checked:not([aria-disabled=\"true\"]):hover~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorTransparentStrokeInteractive);}", ".r12ojtgy:enabled:checked:not([aria-disabled=\"true\"]):hover:active~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorTransparentStrokeInteractive);}", ".r12ojtgy:disabled:not(:checked)~.fui-Switch__indicator,.r12ojtgy[aria-disabled=\"true\"]:not(:checked)~.fui-Switch__indicator{border-color:var(--colorNeutralStrokeDisabled);}", ".r12ojtgy:disabled:checked~.fui-Switch__indicator,.r12ojtgy[aria-disabled=\"true\"]:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);border-color:var(--colorTransparentStrokeDisabled);}", ".rhc0e9x{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;width:calc(40px + 2 * var(--spacingHorizontalS));}", ".rhc0e9x:checked~.fui-Switch__indicator>*{transform:translateX(-20px);}", ".rhc0e9x:disabled,.rhc0e9x[aria-disabled=\"true\"]{cursor:default;}", ".rhc0e9x:disabled~.fui-Switch__indicator,.rhc0e9x[aria-disabled=\"true\"]~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}", ".rhc0e9x:disabled~.fui-Switch__label,.rhc0e9x[aria-disabled=\"true\"]~.fui-Switch__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}", ".rhc0e9x:enabled:not(:checked):not([aria-disabled=\"true\"])~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);border-color:var(--colorNeutralStrokeAccessible);}", ".rhc0e9x:enabled:not(:checked):not([aria-disabled=\"true\"])~.fui-Switch__label{color:var(--colorNeutralForeground1);}", ".rhc0e9x:enabled:not(:checked):not([aria-disabled=\"true\"]):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);border-color:var(--colorNeutralStrokeAccessibleHover);}", ".rhc0e9x:enabled:not(:checked):not([aria-disabled=\"true\"]):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);border-color:var(--colorNeutralStrokeAccessiblePressed);}", ".rhc0e9x:enabled:checked:not([aria-disabled=\"true\"])~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorTransparentStroke);}", ".rhc0e9x:enabled:checked:not([aria-disabled=\"true\"]):hover~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorTransparentStrokeInteractive);}", ".rhc0e9x:enabled:checked:not([aria-disabled=\"true\"]):hover:active~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorTransparentStrokeInteractive);}", ".rhc0e9x:disabled:not(:checked)~.fui-Switch__indicator,.rhc0e9x[aria-disabled=\"true\"]:not(:checked)~.fui-Switch__indicator{border-color:var(--colorNeutralStrokeDisabled);}", ".rhc0e9x:disabled:checked~.fui-Switch__indicator,.rhc0e9x[aria-disabled=\"true\"]:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);border-color:var(--colorTransparentStrokeDisabled);}"],
+  s: ["@media (forced-colors: active){.r12ojtgy:disabled~.fui-Switch__indicator,.r12ojtgy[aria-disabled=\"true\"]~.fui-Switch__indicator{color:GrayText;border-color:GrayText;}.r12ojtgy:disabled~.fui-Switch__label,.r12ojtgy[aria-disabled=\"true\"]~.fui-Switch__label{color:GrayText;}.r12ojtgy:hover{color:CanvasText;}.r12ojtgy:hover:active{color:CanvasText;}.r12ojtgy:enabled:checked:not([aria-disabled=\"true\"]):hover~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.r12ojtgy:enabled:checked:not([aria-disabled=\"true\"]):hover:active~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.r12ojtgy:enabled:checked:not([aria-disabled=\"true\"])~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}}", "@media (forced-colors: active){.rhc0e9x:disabled~.fui-Switch__indicator,.rhc0e9x[aria-disabled=\"true\"]~.fui-Switch__indicator{color:GrayText;border-color:GrayText;}.rhc0e9x:disabled~.fui-Switch__label,.rhc0e9x[aria-disabled=\"true\"]~.fui-Switch__label{color:GrayText;}.rhc0e9x:hover{color:CanvasText;}.rhc0e9x:hover:active{color:CanvasText;}.rhc0e9x:enabled:checked:not([aria-disabled=\"true\"]):hover~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.rhc0e9x:enabled:checked:not([aria-disabled=\"true\"]):hover:active~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.rhc0e9x:enabled:checked:not([aria-disabled=\"true\"])~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}}"]
 });
 const useInputStyles = /*#__PURE__*/__styles({
   before: {

package/lib/components/Switch/useSwitchStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["createFocusOutlineStyle","tokens","__resetStyles","__styles","mergeClasses","switchClassNames","root","indicator","input","label","switchClassName","spaceBetweenThumbAndTrack","trackHeightMedium","trackWidthMedium","thumbSizeMedium","trackHeightSmall","trackWidthSmall","thumbSizeSmall","useRootBaseClassName","r","s","useRootStyles","vertical","Beiy3e4","d","useIndicatorBaseClassName","useIndicatorStyles","labelAbove","B6of3ja","sizeSmall","Be2twd7","Bqenvij","a9b677","useInputBaseClassName","useInputStyles","before","j35jbq","Bhzewxz","after","oyh7mz","above","B5kzvoi","oedwrj","useLabelStyles","base","Bceei9c","jrapky","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Bg96gwp","p","useSwitchStyles_unstable","state","rootBaseClassName","rootStyles","indicatorBaseClassName","indicatorStyles","inputBaseClassName","inputStyles","labelStyles","labelPosition","size","className"],"sources":["useSwitchStyles.styles.js"],"sourcesContent":["'use client';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nexport const switchClassNames = {\n    root: 'fui-Switch',\n    indicator: 'fui-Switch__indicator',\n    input: 'fui-Switch__input',\n    label: 'fui-Switch__label'\n};\n/**\n * @deprecated Use `switchClassNames.root` instead.\n */ export const switchClassName = switchClassNames.root;\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\n// Medium size dimensions\nconst trackHeightMedium = 20;\nconst trackWidthMedium = 40;\nconst thumbSizeMedium = trackHeightMedium - spaceBetweenThumbAndTrack;\n// Small size dimensions (from design mockup)\nconst trackHeightSmall = 16;\nconst trackWidthSmall = 32;\nconst thumbSizeSmall = trackHeightSmall - spaceBetweenThumbAndTrack;\nconst useRootBaseClassName = makeResetStyles({\n    alignItems: 'flex-start',\n    boxSizing: 'border-box',\n    display: 'inline-flex',\n    position: 'relative',\n    ...createFocusOutlineStyle({\n        style: {},\n        selector: 'focus-within'\n    })\n});\nconst useRootStyles = makeStyles({\n    vertical: {\n        flexDirection: 'column'\n    }\n});\nconst useIndicatorBaseClassName = makeResetStyles({\n    borderRadius: tokens.borderRadiusCircular,\n    border: '1px solid',\n    lineHeight: 0,\n    boxSizing: 'border-box',\n    fill: 'currentColor',\n    flexShrink: 0,\n    fontSize: `${thumbSizeMedium}px`,\n    height: `${trackHeightMedium}px`,\n    margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n    pointerEvents: 'none',\n    transitionDuration: tokens.durationNormal,\n    transitionTimingFunction: tokens.curveEasyEase,\n    transitionProperty: 'background, border, color',\n    width: `${trackWidthMedium}px`,\n    '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms'\n    },\n    '@media (forced-colors: active)': {\n        color: 'CanvasText',\n        '> i': {\n            forcedColorAdjust: 'none'\n        }\n    },\n    '> *': {\n        transitionDuration: tokens.durationNormal,\n        transitionTimingFunction: tokens.curveEasyEase,\n        transitionProperty: 'transform',\n        '@media screen and (prefers-reduced-motion: reduce)': {\n            transitionDuration: '0.01ms'\n        }\n    }\n});\nconst useIndicatorStyles = makeStyles({\n    labelAbove: {\n        marginTop: 0\n    },\n    sizeSmall: {\n        fontSize: `${thumbSizeSmall}px`,\n        height: `${trackHeightSmall}px`,\n        width: `${trackWidthSmall}px`\n    }\n});\nconst useInputBaseClassName = makeResetStyles({\n    boxSizing: 'border-box',\n    cursor: 'pointer',\n    height: '100%',\n    margin: 0,\n    opacity: 0,\n    position: 'absolute',\n    // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n    // This is done so that clicking on that \"empty space\" still toggles the switch.\n    width: `calc(${trackWidthMedium}px + 2 * ${tokens.spacingHorizontalS})`,\n    // Checked (both enabled and disabled)\n    ':checked': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n            '> *': {\n                transform: `translateX(${trackWidthMedium - thumbSizeMedium - spaceBetweenThumbAndTrack}px)`\n            }\n        }\n    },\n    // Disabled (both checked and unchecked)\n    ':disabled': {\n        cursor: 'default',\n        [`& ~ .${switchClassNames.indicator}`]: {\n            color: tokens.colorNeutralForegroundDisabled\n        },\n        [`& ~ .${switchClassNames.label}`]: {\n            cursor: 'default',\n            color: tokens.colorNeutralForegroundDisabled\n        }\n    },\n    // Enabled and unchecked\n    ':enabled:not(:checked)': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n            color: tokens.colorNeutralStrokeAccessible,\n            borderColor: tokens.colorNeutralStrokeAccessible\n        },\n        [`& ~ .${switchClassNames.label}`]: {\n            color: tokens.colorNeutralForeground1\n        },\n        ':hover': {\n            [`& ~ .${switchClassNames.indicator}`]: {\n                color: tokens.colorNeutralStrokeAccessibleHover,\n                borderColor: tokens.colorNeutralStrokeAccessibleHover\n            }\n        },\n        ':hover:active': {\n            [`& ~ .${switchClassNames.indicator}`]: {\n                color: tokens.colorNeutralStrokeAccessiblePressed,\n                borderColor: tokens.colorNeutralStrokeAccessiblePressed\n            }\n        }\n    },\n    // Enabled and checked\n    ':enabled:checked': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n            backgroundColor: tokens.colorCompoundBrandBackground,\n            color: tokens.colorNeutralForegroundInverted,\n            borderColor: tokens.colorTransparentStroke\n        },\n        ':hover': {\n            [`& ~ .${switchClassNames.indicator}`]: {\n                backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n                borderColor: tokens.colorTransparentStrokeInteractive\n            }\n        },\n        ':hover:active': {\n            [`& ~ .${switchClassNames.indicator}`]: {\n                backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n                borderColor: tokens.colorTransparentStrokeInteractive\n            }\n        }\n    },\n    // Disabled and unchecked\n    ':disabled:not(:checked)': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n            borderColor: tokens.colorNeutralStrokeDisabled\n        }\n    },\n    // Disabled and checked\n    ':disabled:checked': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n            backgroundColor: tokens.colorNeutralBackgroundDisabled,\n            borderColor: tokens.colorTransparentStrokeDisabled\n        }\n    },\n    '@media (forced-colors: active)': {\n        ':disabled': {\n            [`& ~ .${switchClassNames.indicator}`]: {\n                color: 'GrayText',\n                borderColor: 'GrayText'\n            },\n            [`& ~ .${switchClassNames.label}`]: {\n                color: 'GrayText'\n            }\n        },\n        ':hover': {\n            color: 'CanvasText'\n        },\n        ':hover:active': {\n            color: 'CanvasText'\n        },\n        ':enabled:checked': {\n            ':hover': {\n                [`& ~ .${switchClassNames.indicator}`]: {\n                    backgroundColor: 'Highlight',\n                    color: 'Canvas'\n                }\n            },\n            ':hover:active': {\n                [`& ~ .${switchClassNames.indicator}`]: {\n                    backgroundColor: 'Highlight',\n                    color: 'Canvas'\n                }\n            },\n            [`& ~ .${switchClassNames.indicator}`]: {\n                backgroundColor: 'Highlight',\n                color: 'Canvas'\n            }\n        }\n    }\n});\nconst useInputStyles = makeStyles({\n    before: {\n        right: 0,\n        top: 0\n    },\n    after: {\n        left: 0,\n        top: 0\n    },\n    above: {\n        bottom: 0,\n        height: `calc(${trackHeightMedium}px + ${tokens.spacingVerticalS})`,\n        width: '100%'\n    },\n    sizeSmall: {\n        width: `calc(${trackWidthSmall}px + 2 * ${tokens.spacingHorizontalS})`,\n        ':checked': {\n            [`& ~ .${switchClassNames.indicator}`]: {\n                '> *': {\n                    transform: `translateX(${trackWidthSmall - thumbSizeSmall - spaceBetweenThumbAndTrack}px)`\n                }\n            }\n        }\n    }\n});\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n    base: {\n        cursor: 'pointer',\n        // Use a (negative) margin to account for the difference between the track's height and the label's line height.\n        // This prevents the label from expanding the height of the switch, but preserves line height if the label wraps.\n        marginBottom: `calc((${trackHeightMedium}px - ${tokens.lineHeightBase300}) / 2)`,\n        marginTop: `calc((${trackHeightMedium}px - ${tokens.lineHeightBase300}) / 2)`,\n        padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`\n    },\n    sizeSmall: {\n        fontSize: tokens.fontSizeBase200,\n        lineHeight: tokens.lineHeightBase200,\n        marginBottom: `calc((${trackHeightSmall}px - ${tokens.lineHeightBase200}) / 2)`,\n        marginTop: `calc((${trackHeightSmall}px - ${tokens.lineHeightBase200}) / 2)`\n    },\n    above: {\n        paddingTop: tokens.spacingVerticalXS,\n        paddingBottom: tokens.spacingVerticalXS,\n        width: '100%'\n    },\n    after: {\n        paddingLeft: tokens.spacingHorizontalXS\n    },\n    before: {\n        paddingRight: tokens.spacingHorizontalXS\n    }\n});\n/**\n * Apply styling to the Switch slots based on the state\n */ export const useSwitchStyles_unstable = (state)=>{\n    'use no memo';\n    const rootBaseClassName = useRootBaseClassName();\n    const rootStyles = useRootStyles();\n    const indicatorBaseClassName = useIndicatorBaseClassName();\n    const indicatorStyles = useIndicatorStyles();\n    const inputBaseClassName = useInputBaseClassName();\n    const inputStyles = useInputStyles();\n    const labelStyles = useLabelStyles();\n    const { label, labelPosition, size } = state;\n    state.root.className = mergeClasses(switchClassNames.root, rootBaseClassName, labelPosition === 'above' && rootStyles.vertical, state.root.className);\n    state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorBaseClassName, label && labelPosition === 'above' && indicatorStyles.labelAbove, size === 'small' && indicatorStyles.sizeSmall, state.indicator.className);\n    state.input.className = mergeClasses(switchClassNames.input, inputBaseClassName, label && inputStyles[labelPosition], size === 'small' && inputStyles.sizeSmall, state.input.className);\n    if (state.label) {\n        state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, labelStyles[labelPosition], size === 'small' && labelStyles.sizeSmall, state.label.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["createFocusOutlineStyle","tokens","__resetStyles","__styles","mergeClasses","switchClassNames","root","indicator","input","label","switchClassName","spaceBetweenThumbAndTrack","trackHeightMedium","trackWidthMedium","thumbSizeMedium","trackHeightSmall","trackWidthSmall","thumbSizeSmall","useRootBaseClassName","r","s","useRootStyles","vertical","Beiy3e4","d","useIndicatorBaseClassName","useIndicatorStyles","labelAbove","B6of3ja","sizeSmall","Be2twd7","Bqenvij","a9b677","useInputBaseClassName","useInputStyles","before","j35jbq","Bhzewxz","after","oyh7mz","above","B5kzvoi","oedwrj","useLabelStyles","base","Bceei9c","jrapky","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Bg96gwp","p","useSwitchStyles_unstable","state","rootBaseClassName","rootStyles","indicatorBaseClassName","indicatorStyles","inputBaseClassName","inputStyles","labelStyles","labelPosition","size","className"],"sources":["useSwitchStyles.styles.js"],"sourcesContent":["'use client';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nexport const switchClassNames = {\n    root: 'fui-Switch',\n    indicator: 'fui-Switch__indicator',\n    input: 'fui-Switch__input',\n    label: 'fui-Switch__label'\n};\n/**\n * @deprecated Use `switchClassNames.root` instead.\n */ export const switchClassName = switchClassNames.root;\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\n// Medium size dimensions\nconst trackHeightMedium = 20;\nconst trackWidthMedium = 40;\nconst thumbSizeMedium = trackHeightMedium - spaceBetweenThumbAndTrack;\n// Small size dimensions (from design mockup)\nconst trackHeightSmall = 16;\nconst trackWidthSmall = 32;\nconst thumbSizeSmall = trackHeightSmall - spaceBetweenThumbAndTrack;\nconst useRootBaseClassName = makeResetStyles({\n    alignItems: 'flex-start',\n    boxSizing: 'border-box',\n    display: 'inline-flex',\n    position: 'relative',\n    ...createFocusOutlineStyle({\n        style: {},\n        selector: 'focus-within'\n    })\n});\nconst useRootStyles = makeStyles({\n    vertical: {\n        flexDirection: 'column'\n    }\n});\nconst useIndicatorBaseClassName = makeResetStyles({\n    borderRadius: tokens.borderRadiusCircular,\n    border: '1px solid',\n    lineHeight: 0,\n    boxSizing: 'border-box',\n    fill: 'currentColor',\n    flexShrink: 0,\n    fontSize: `${thumbSizeMedium}px`,\n    height: `${trackHeightMedium}px`,\n    margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n    pointerEvents: 'none',\n    transitionDuration: tokens.durationNormal,\n    transitionTimingFunction: tokens.curveEasyEase,\n    transitionProperty: 'background, border, color',\n    width: `${trackWidthMedium}px`,\n    '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms'\n    },\n    '@media (forced-colors: active)': {\n        color: 'CanvasText',\n        '> i': {\n            forcedColorAdjust: 'none'\n        }\n    },\n    '> *': {\n        transitionDuration: tokens.durationNormal,\n        transitionTimingFunction: tokens.curveEasyEase,\n        transitionProperty: 'transform',\n        '@media screen and (prefers-reduced-motion: reduce)': {\n            transitionDuration: '0.01ms'\n        }\n    }\n});\nconst useIndicatorStyles = makeStyles({\n    labelAbove: {\n        marginTop: 0\n    },\n    sizeSmall: {\n        fontSize: `${thumbSizeSmall}px`,\n        height: `${trackHeightSmall}px`,\n        width: `${trackWidthSmall}px`\n    }\n});\nconst useInputBaseClassName = makeResetStyles({\n    boxSizing: 'border-box',\n    cursor: 'pointer',\n    height: '100%',\n    margin: 0,\n    opacity: 0,\n    position: 'absolute',\n    // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n    // This is done so that clicking on that \"empty space\" still toggles the switch.\n    width: `calc(${trackWidthMedium}px + 2 * ${tokens.spacingHorizontalS})`,\n    // Checked (both enabled and disabled)\n    ':checked': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n            '> *': {\n                transform: `translateX(${trackWidthMedium - thumbSizeMedium - spaceBetweenThumbAndTrack}px)`\n            }\n        }\n    },\n    // Disabled (both checked and unchecked)\n    ':disabled, &[aria-disabled=\"true\"]': {\n        cursor: 'default',\n        [`& ~ .${switchClassNames.indicator}`]: {\n            color: tokens.colorNeutralForegroundDisabled\n        },\n        [`& ~ .${switchClassNames.label}`]: {\n            cursor: 'default',\n            color: tokens.colorNeutralForegroundDisabled\n        }\n    },\n    // Enabled and unchecked\n    ':enabled:not(:checked):not([aria-disabled=\"true\"])': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n            color: tokens.colorNeutralStrokeAccessible,\n            borderColor: tokens.colorNeutralStrokeAccessible\n        },\n        [`& ~ .${switchClassNames.label}`]: {\n            color: tokens.colorNeutralForeground1\n        },\n        ':hover': {\n            [`& ~ .${switchClassNames.indicator}`]: {\n                color: tokens.colorNeutralStrokeAccessibleHover,\n                borderColor: tokens.colorNeutralStrokeAccessibleHover\n            }\n        },\n        ':hover:active': {\n            [`& ~ .${switchClassNames.indicator}`]: {\n                color: tokens.colorNeutralStrokeAccessiblePressed,\n                borderColor: tokens.colorNeutralStrokeAccessiblePressed\n            }\n        }\n    },\n    // Enabled and checked\n    ':enabled:checked:not([aria-disabled=\"true\"])': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n            backgroundColor: tokens.colorCompoundBrandBackground,\n            color: tokens.colorNeutralForegroundInverted,\n            borderColor: tokens.colorTransparentStroke\n        },\n        ':hover': {\n            [`& ~ .${switchClassNames.indicator}`]: {\n                backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n                borderColor: tokens.colorTransparentStrokeInteractive\n            }\n        },\n        ':hover:active': {\n            [`& ~ .${switchClassNames.indicator}`]: {\n                backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n                borderColor: tokens.colorTransparentStrokeInteractive\n            }\n        }\n    },\n    // Disabled and unchecked\n    ':disabled:not(:checked), &[aria-disabled=\"true\"]:not(:checked)': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n            borderColor: tokens.colorNeutralStrokeDisabled\n        }\n    },\n    // Disabled and checked\n    ':disabled:checked, &[aria-disabled=\"true\"]:checked': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n            backgroundColor: tokens.colorNeutralBackgroundDisabled,\n            borderColor: tokens.colorTransparentStrokeDisabled\n        }\n    },\n    '@media (forced-colors: active)': {\n        ':disabled, &[aria-disabled=\"true\"]': {\n            [`& ~ .${switchClassNames.indicator}`]: {\n                color: 'GrayText',\n                borderColor: 'GrayText'\n            },\n            [`& ~ .${switchClassNames.label}`]: {\n                color: 'GrayText'\n            }\n        },\n        ':hover': {\n            color: 'CanvasText'\n        },\n        ':hover:active': {\n            color: 'CanvasText'\n        },\n        ':enabled:checked:not([aria-disabled=\"true\"])': {\n            ':hover': {\n                [`& ~ .${switchClassNames.indicator}`]: {\n                    backgroundColor: 'Highlight',\n                    color: 'Canvas'\n                }\n            },\n            ':hover:active': {\n                [`& ~ .${switchClassNames.indicator}`]: {\n                    backgroundColor: 'Highlight',\n                    color: 'Canvas'\n                }\n            },\n            [`& ~ .${switchClassNames.indicator}`]: {\n                backgroundColor: 'Highlight',\n                color: 'Canvas'\n            }\n        }\n    }\n});\nconst useInputStyles = makeStyles({\n    before: {\n        right: 0,\n        top: 0\n    },\n    after: {\n        left: 0,\n        top: 0\n    },\n    above: {\n        bottom: 0,\n        height: `calc(${trackHeightMedium}px + ${tokens.spacingVerticalS})`,\n        width: '100%'\n    },\n    sizeSmall: {\n        width: `calc(${trackWidthSmall}px + 2 * ${tokens.spacingHorizontalS})`,\n        ':checked': {\n            [`& ~ .${switchClassNames.indicator}`]: {\n                '> *': {\n                    transform: `translateX(${trackWidthSmall - thumbSizeSmall - spaceBetweenThumbAndTrack}px)`\n                }\n            }\n        }\n    }\n});\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n    base: {\n        cursor: 'pointer',\n        // Use a (negative) margin to account for the difference between the track's height and the label's line height.\n        // This prevents the label from expanding the height of the switch, but preserves line height if the label wraps.\n        marginBottom: `calc((${trackHeightMedium}px - ${tokens.lineHeightBase300}) / 2)`,\n        marginTop: `calc((${trackHeightMedium}px - ${tokens.lineHeightBase300}) / 2)`,\n        padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`\n    },\n    sizeSmall: {\n        fontSize: tokens.fontSizeBase200,\n        lineHeight: tokens.lineHeightBase200,\n        marginBottom: `calc((${trackHeightSmall}px - ${tokens.lineHeightBase200}) / 2)`,\n        marginTop: `calc((${trackHeightSmall}px - ${tokens.lineHeightBase200}) / 2)`\n    },\n    above: {\n        paddingTop: tokens.spacingVerticalXS,\n        paddingBottom: tokens.spacingVerticalXS,\n        width: '100%'\n    },\n    after: {\n        paddingLeft: tokens.spacingHorizontalXS\n    },\n    before: {\n        paddingRight: tokens.spacingHorizontalXS\n    }\n});\n/**\n * Apply styling to the Switch slots based on the state\n */ export const useSwitchStyles_unstable = (state)=>{\n    'use no memo';\n    const rootBaseClassName = useRootBaseClassName();\n    const rootStyles = useRootStyles();\n    const indicatorBaseClassName = useIndicatorBaseClassName();\n    const indicatorStyles = useIndicatorStyles();\n    const inputBaseClassName = useInputBaseClassName();\n    const inputStyles = useInputStyles();\n    const labelStyles = useLabelStyles();\n    const { label, labelPosition, size } = state;\n    state.root.className = mergeClasses(switchClassNames.root, rootBaseClassName, labelPosition === 'above' && rootStyles.vertical, state.root.className);\n    state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorBaseClassName, label && labelPosition === 'above' && indicatorStyles.labelAbove, size === 'small' && indicatorStyles.sizeSmall, state.indicator.className);\n    state.input.className = mergeClasses(switchClassNames.input, inputBaseClassName, label && inputStyles[labelPosition], size === 'small' && inputStyles.sizeSmall, state.input.className);\n    if (state.label) {\n        state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, labelStyles[labelPosition], size === 'small' && labelStyles.sizeSmall, state.label.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAAAC,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,OAAO,MAAMC,gBAAgB,GAAG;EAC5BC,IAAI,EAAE,YAAY;EAClBC,SAAS,EAAE,uBAAuB;EAClCC,KAAK,EAAE,mBAAmB;EAC1BC,KAAK,EAAE;AACX,CAAC;AACD;AACA;AACA;AAAI,OAAO,MAAMC,eAAe,GAAGL,gBAAgB,CAACC,IAAI;AACxD;AACA,MAAMK,yBAAyB,GAAG,CAAC;AACnC;AACA,MAAMC,iBAAiB,GAAG,EAAE;AAC5B,MAAMC,gBAAgB,GAAG,EAAE;AAC3B,MAAMC,eAAe,GAAGF,iBAAiB,GAAGD,yBAAyB;AACrE;AACA,MAAMI,gBAAgB,GAAG,EAAE;AAC3B,MAAMC,eAAe,GAAG,EAAE;AAC1B,MAAMC,cAAc,GAAGF,gBAAgB,GAAGJ,yBAAyB;AACnE,MAAMO,oBAAoB,gBAAGhB,aAAA;EAAAiB,CAAA;EAAAC,CAAA;AAAA,CAS5B,CAAC;AACF,MAAMC,aAAa,gBAAGlB,QAAA;EAAAmB,QAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAIrB,CAAC;AACF,MAAMC,yBAAyB,gBAAGvB,aAAA;EAAAiB,CAAA;EAAAC,CAAA;AAAA,CAgCjC,CAAC;AACF,MAAMM,kBAAkB,gBAAGvB,QAAA;EAAAwB,UAAA;IAAAC,OAAA;EAAA;EAAAC,SAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAR,CAAA;AAAA,CAS1B,CAAC;AACF,MAAMS,qBAAqB,gBAAG/B,aAAA;EAAAiB,CAAA;EAAAC,CAAA;AAAA,CAuH7B,CAAC;AACF,MAAMc,cAAc,gBAAG/B,QAAA;EAAAgC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,KAAA;IAAAC,MAAA;IAAAF,OAAA;EAAA;EAAAG,KAAA;IAAAC,OAAA;IAAAV,OAAA;IAAAC,MAAA;EAAA;EAAAH,SAAA;IAAAG,MAAA;IAAAU,MAAA;EAAA;AAAA;EAAAlB,CAAA;AAAA,CAwBtB,CAAC;AACF;AACA,MAAMmB,cAAc,gBAAGxC,QAAA;EAAAyC,IAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAlB,OAAA;IAAAmB,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAtB,SAAA;IAAAC,OAAA;IAAAsB,OAAA;IAAAN,MAAA;IAAAlB,OAAA;EAAA;EAAAY,KAAA;IAAAU,MAAA;IAAAH,OAAA;IAAAf,MAAA;EAAA;EAAAM,KAAA;IAAAU,MAAA;EAAA;EAAAb,MAAA;IAAAc,MAAA;EAAA;AAAA;EAAAzB,CAAA;IAAA6B,CAAA;EAAA;AAAA,CA0BtB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,wBAAwB,GAAIC,KAAK,IAAG;EACjD,aAAa;;EACb,MAAMC,iBAAiB,GAAGtC,oBAAoB,CAAC,CAAC;EAChD,MAAMuC,UAAU,GAAGpC,aAAa,CAAC,CAAC;EAClC,MAAMqC,sBAAsB,GAAGjC,yBAAyB,CAAC,CAAC;EAC1D,MAAMkC,eAAe,GAAGjC,kBAAkB,CAAC,CAAC;EAC5C,MAAMkC,kBAAkB,GAAG3B,qBAAqB,CAAC,CAAC;EAClD,MAAM4B,WAAW,GAAG3B,cAAc,CAAC,CAAC;EACpC,MAAM4B,WAAW,GAAGnB,cAAc,CAAC,CAAC;EACpC,MAAM;IAAElC,KAAK;IAAEsD,aAAa;IAAEC;EAAK,CAAC,GAAGT,KAAK;EAC5CA,KAAK,CAACjD,IAAI,CAAC2D,SAAS,GAAG7D,YAAY,CAACC,gBAAgB,CAACC,IAAI,EAAEkD,iBAAiB,EAAEO,aAAa,KAAK,OAAO,IAAIN,UAAU,CAACnC,QAAQ,EAAEiC,KAAK,CAACjD,IAAI,CAAC2D,SAAS,CAAC;EACrJV,KAAK,CAAChD,SAAS,CAAC0D,SAAS,GAAG7D,YAAY,CAACC,gBAAgB,CAACE,SAAS,EAAEmD,sBAAsB,EAAEjD,KAAK,IAAIsD,aAAa,KAAK,OAAO,IAAIJ,eAAe,CAAChC,UAAU,EAAEqC,IAAI,KAAK,OAAO,IAAIL,eAAe,CAAC9B,SAAS,EAAE0B,KAAK,CAAChD,SAAS,CAAC0D,SAAS,CAAC;EACxOV,KAAK,CAAC/C,KAAK,CAACyD,SAAS,GAAG7D,YAAY,CAACC,gBAAgB,CAACG,KAAK,EAAEoD,kBAAkB,EAAEnD,KAAK,IAAIoD,WAAW,CAACE,aAAa,CAAC,EAAEC,IAAI,KAAK,OAAO,IAAIH,WAAW,CAAChC,SAAS,EAAE0B,KAAK,CAAC/C,KAAK,CAACyD,SAAS,CAAC;EACvL,IAAIV,KAAK,CAAC9C,KAAK,EAAE;IACb8C,KAAK,CAAC9C,KAAK,CAACwD,SAAS,GAAG7D,YAAY,CAACC,gBAAgB,CAACI,KAAK,EAAEqD,WAAW,CAAClB,IAAI,EAAEkB,WAAW,CAACC,aAAa,CAAC,EAAEC,IAAI,KAAK,OAAO,IAAIF,WAAW,CAACjC,SAAS,EAAE0B,KAAK,CAAC9C,KAAK,CAACwD,SAAS,CAAC;EAChL;EACA,OAAOV,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/Switch/useSwitchStyles.styles.raw.js

@@ -98,7 +98,7 @@ const useInputBaseClassName = makeResetStyles({
         }
     },
     // Disabled (both checked and unchecked)
-    ':disabled': {
+    ':disabled, &[aria-disabled="true"]': {
         cursor: 'default',
         [`& ~ .${switchClassNames.indicator}`]: {
             color: tokens.colorNeutralForegroundDisabled
@@ -109,7 +109,7 @@ const useInputBaseClassName = makeResetStyles({
         }
     },
     // Enabled and unchecked
-    ':enabled:not(:checked)': {
+    ':enabled:not(:checked):not([aria-disabled="true"])': {
         [`& ~ .${switchClassNames.indicator}`]: {
             color: tokens.colorNeutralStrokeAccessible,
             borderColor: tokens.colorNeutralStrokeAccessible
@@ -131,7 +131,7 @@ const useInputBaseClassName = makeResetStyles({
         }
     },
     // Enabled and checked
-    ':enabled:checked': {
+    ':enabled:checked:not([aria-disabled="true"])': {
         [`& ~ .${switchClassNames.indicator}`]: {
             backgroundColor: tokens.colorCompoundBrandBackground,
             color: tokens.colorNeutralForegroundInverted,
@@ -151,20 +151,20 @@ const useInputBaseClassName = makeResetStyles({
         }
     },
     // Disabled and unchecked
-    ':disabled:not(:checked)': {
+    ':disabled:not(:checked), &[aria-disabled="true"]:not(:checked)': {
         [`& ~ .${switchClassNames.indicator}`]: {
             borderColor: tokens.colorNeutralStrokeDisabled
         }
     },
     // Disabled and checked
-    ':disabled:checked': {
+    ':disabled:checked, &[aria-disabled="true"]:checked': {
         [`& ~ .${switchClassNames.indicator}`]: {
             backgroundColor: tokens.colorNeutralBackgroundDisabled,
             borderColor: tokens.colorTransparentStrokeDisabled
         }
     },
     '@media (forced-colors: active)': {
-        ':disabled': {
+        ':disabled, &[aria-disabled="true"]': {
             [`& ~ .${switchClassNames.indicator}`]: {
                 color: 'GrayText',
                 borderColor: 'GrayText'
@@ -179,7 +179,7 @@ const useInputBaseClassName = makeResetStyles({
         ':hover:active': {
             color: 'CanvasText'
         },
-        ':enabled:checked': {
+        ':enabled:checked:not([aria-disabled="true"])': {
             ':hover': {
                 [`& ~ .${switchClassNames.indicator}`]: {
                     backgroundColor: 'Highlight',

package/lib/components/Switch/useSwitchStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Switch/useSwitchStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SwitchSlots, SwitchState } from './Switch.types';\n\nexport const switchClassNames: SlotClassNames<SwitchSlots> = {\n  root: 'fui-Switch',\n  indicator: 'fui-Switch__indicator',\n  input: 'fui-Switch__input',\n  label: 'fui-Switch__label',\n};\n\n/**\n * @deprecated Use `switchClassNames.root` instead.\n */\nexport const switchClassName = switchClassNames.root;\n\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\n// Medium size dimensions\nconst trackHeightMedium = 20;\nconst trackWidthMedium = 40;\nconst thumbSizeMedium = trackHeightMedium - spaceBetweenThumbAndTrack;\n// Small size dimensions (from design mockup)\nconst trackHeightSmall = 16;\nconst trackWidthSmall = 32;\nconst thumbSizeSmall = trackHeightSmall - spaceBetweenThumbAndTrack;\n\nconst useRootBaseClassName = makeResetStyles({\n  alignItems: 'flex-start',\n  boxSizing: 'border-box',\n  display: 'inline-flex',\n  position: 'relative',\n\n  ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useRootStyles = makeStyles({\n  vertical: {\n    flexDirection: 'column',\n  },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\n  borderRadius: tokens.borderRadiusCircular,\n  border: '1px solid',\n  lineHeight: 0,\n  boxSizing: 'border-box',\n  fill: 'currentColor',\n  flexShrink: 0,\n  fontSize: `${thumbSizeMedium}px`,\n  height: `${trackHeightMedium}px`,\n  margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n  pointerEvents: 'none',\n  transitionDuration: tokens.durationNormal,\n  transitionTimingFunction: tokens.curveEasyEase,\n  transitionProperty: 'background, border, color',\n  width: `${trackWidthMedium}px`,\n\n  '@media screen and (prefers-reduced-motion: reduce)': {\n    transitionDuration: '0.01ms',\n  },\n\n  '@media (forced-colors: active)': {\n    color: 'CanvasText',\n    '> i': {\n      forcedColorAdjust: 'none',\n    },\n  },\n\n  '> *': {\n    transitionDuration: tokens.durationNormal,\n    transitionTimingFunction: tokens.curveEasyEase,\n    transitionProperty: 'transform',\n\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      transitionDuration: '0.01ms',\n    },\n  },\n});\n\nconst useIndicatorStyles = makeStyles({\n  labelAbove: {\n    marginTop: 0,\n  },\n  sizeSmall: {\n    fontSize: `${thumbSizeSmall}px`,\n    height: `${trackHeightSmall}px`,\n    width: `${trackWidthSmall}px`,\n  },\n});\n\nconst useInputBaseClassName = makeResetStyles({\n  boxSizing: 'border-box',\n  cursor: 'pointer',\n  height: '100%',\n  margin: 0,\n  opacity: 0,\n  position: 'absolute',\n\n  // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n  // This is done so that clicking on that \"empty space\" still toggles the switch.\n  width: `calc(${trackWidthMedium}px + 2 * ${tokens.spacingHorizontalS})`,\n\n  // Checked (both enabled and disabled)\n  ':checked': {\n    [`& ~ .${switchClassNames.indicator}`]: {\n      '> *': {\n        transform: `translateX(${trackWidthMedium - thumbSizeMedium - spaceBetweenThumbAndTrack}px)`,\n      },\n    },\n  },\n\n  // Disabled (both checked and unchecked)\n  ':disabled': {\n    cursor: 'default',\n\n    [`& ~ .${switchClassNames.indicator}`]: {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    [`& ~ .${switchClassNames.label}`]: {\n      cursor: 'default',\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n\n  // Enabled and unchecked\n  ':enabled:not(:checked)': {\n    [`& ~ .${switchClassNames.indicator}`]: {\n      color: tokens.colorNeutralStrokeAccessible,\n      borderColor: tokens.colorNeutralStrokeAccessible,\n    },\n\n    [`& ~ .${switchClassNames.label}`]: {\n      color: tokens.colorNeutralForeground1,\n    },\n\n    ':hover': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        color: tokens.colorNeutralStrokeAccessibleHover,\n        borderColor: tokens.colorNeutralStrokeAccessibleHover,\n      },\n    },\n\n    ':hover:active': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        color: tokens.colorNeutralStrokeAccessiblePressed,\n        borderColor: tokens.colorNeutralStrokeAccessiblePressed,\n      },\n    },\n  },\n\n  // Enabled and checked\n  ':enabled:checked': {\n    [`& ~ .${switchClassNames.indicator}`]: {\n      backgroundColor: tokens.colorCompoundBrandBackground,\n      color: tokens.colorNeutralForegroundInverted,\n      borderColor: tokens.colorTransparentStroke,\n    },\n\n    ':hover': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n        borderColor: tokens.colorTransparentStrokeInteractive,\n      },\n    },\n\n    ':hover:active': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n        borderColor: tokens.colorTransparentStrokeInteractive,\n      },\n    },\n  },\n\n  // Disabled and unchecked\n  ':disabled:not(:checked)': {\n    [`& ~ .${switchClassNames.indicator}`]: {\n      borderColor: tokens.colorNeutralStrokeDisabled,\n    },\n  },\n\n  // Disabled and checked\n  ':disabled:checked': {\n    [`& ~ .${switchClassNames.indicator}`]: {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      borderColor: tokens.colorTransparentStrokeDisabled,\n    },\n  },\n\n  '@media (forced-colors: active)': {\n    ':disabled': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        color: 'GrayText',\n        borderColor: 'GrayText',\n      },\n\n      [`& ~ .${switchClassNames.label}`]: {\n        color: 'GrayText',\n      },\n    },\n    ':hover': {\n      color: 'CanvasText',\n    },\n    ':hover:active': {\n      color: 'CanvasText',\n    },\n    ':enabled:checked': {\n      ':hover': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n          backgroundColor: 'Highlight',\n          color: 'Canvas',\n        },\n      },\n      ':hover:active': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n          backgroundColor: 'Highlight',\n          color: 'Canvas',\n        },\n      },\n      [`& ~ .${switchClassNames.indicator}`]: {\n        backgroundColor: 'Highlight',\n        color: 'Canvas',\n      },\n    },\n  },\n});\n\nconst useInputStyles = makeStyles({\n  before: {\n    right: 0,\n    top: 0,\n  },\n  after: {\n    left: 0,\n    top: 0,\n  },\n  above: {\n    bottom: 0,\n    height: `calc(${trackHeightMedium}px + ${tokens.spacingVerticalS})`,\n    width: '100%',\n  },\n  sizeSmall: {\n    width: `calc(${trackWidthSmall}px + 2 * ${tokens.spacingHorizontalS})`,\n    ':checked': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        '> *': {\n          transform: `translateX(${trackWidthSmall - thumbSizeSmall - spaceBetweenThumbAndTrack}px)`,\n        },\n      },\n    },\n  },\n});\n\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n  base: {\n    cursor: 'pointer',\n\n    // Use a (negative) margin to account for the difference between the track's height and the label's line height.\n    // This prevents the label from expanding the height of the switch, but preserves line height if the label wraps.\n    marginBottom: `calc((${trackHeightMedium}px - ${tokens.lineHeightBase300}) / 2)`,\n    marginTop: `calc((${trackHeightMedium}px - ${tokens.lineHeightBase300}) / 2)`,\n    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n  },\n  sizeSmall: {\n    fontSize: tokens.fontSizeBase200,\n    lineHeight: tokens.lineHeightBase200,\n    marginBottom: `calc((${trackHeightSmall}px - ${tokens.lineHeightBase200}) / 2)`,\n    marginTop: `calc((${trackHeightSmall}px - ${tokens.lineHeightBase200}) / 2)`,\n  },\n  above: {\n    paddingTop: tokens.spacingVerticalXS,\n    paddingBottom: tokens.spacingVerticalXS,\n    width: '100%',\n  },\n  after: {\n    paddingLeft: tokens.spacingHorizontalXS,\n  },\n  before: {\n    paddingRight: tokens.spacingHorizontalXS,\n  },\n});\n\n/**\n * Apply styling to the Switch slots based on the state\n */\nexport const useSwitchStyles_unstable = (state: SwitchState): SwitchState => {\n  'use no memo';\n\n  const rootBaseClassName = useRootBaseClassName();\n  const rootStyles = useRootStyles();\n  const indicatorBaseClassName = useIndicatorBaseClassName();\n  const indicatorStyles = useIndicatorStyles();\n  const inputBaseClassName = useInputBaseClassName();\n  const inputStyles = useInputStyles();\n  const labelStyles = useLabelStyles();\n\n  const { label, labelPosition, size } = state;\n\n  state.root.className = mergeClasses(\n    switchClassNames.root,\n    rootBaseClassName,\n    labelPosition === 'above' && rootStyles.vertical,\n    state.root.className,\n  );\n\n  state.indicator.className = mergeClasses(\n    switchClassNames.indicator,\n    indicatorBaseClassName,\n    label && labelPosition === 'above' && indicatorStyles.labelAbove,\n    size === 'small' && indicatorStyles.sizeSmall,\n    state.indicator.className,\n  );\n\n  state.input.className = mergeClasses(\n    switchClassNames.input,\n    inputBaseClassName,\n    label && inputStyles[labelPosition],\n    size === 'small' && inputStyles.sizeSmall,\n    state.input.className,\n  );\n\n  if (state.label) {\n    state.label.className = mergeClasses(\n      switchClassNames.label,\n      labelStyles.base,\n      labelStyles[labelPosition],\n      size === 'small' && labelStyles.sizeSmall,\n      state.label.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["createFocusOutlineStyle","tokens","makeResetStyles","makeStyles","mergeClasses","switchClassNames","root","indicator","input","label","switchClassName","spaceBetweenThumbAndTrack","trackHeightMedium","trackWidthMedium","thumbSizeMedium","trackHeightSmall","trackWidthSmall","thumbSizeSmall","useRootBaseClassName","alignItems","boxSizing","display","position","style","selector","useRootStyles","vertical","flexDirection","useIndicatorBaseClassName","borderRadius","borderRadiusCircular","border","lineHeight","fill","flexShrink","fontSize","height","margin","spacingVerticalS","spacingHorizontalS","pointerEvents","transitionDuration","durationNormal","transitionTimingFunction","curveEasyEase","transitionProperty","width","color","forcedColorAdjust","useIndicatorStyles","labelAbove","marginTop","sizeSmall","useInputBaseClassName","cursor","opacity","transform","colorNeutralForegroundDisabled","colorNeutralStrokeAccessible","borderColor","colorNeutralForeground1","colorNeutralStrokeAccessibleHover","colorNeutralStrokeAccessiblePressed","backgroundColor","colorCompoundBrandBackground","colorNeutralForegroundInverted","colorTransparentStroke","colorCompoundBrandBackgroundHover","colorTransparentStrokeInteractive","colorCompoundBrandBackgroundPressed","colorNeutralStrokeDisabled","colorNeutralBackgroundDisabled","colorTransparentStrokeDisabled","useInputStyles","before","right","top","after","left","above","bottom","useLabelStyles","base","marginBottom","lineHeightBase300","padding","fontSizeBase200","lineHeightBase200","paddingTop","spacingVerticalXS","paddingBottom","paddingLeft","spacingHorizontalXS","paddingRight","useSwitchStyles_unstable","state","rootBaseClassName","rootStyles","indicatorBaseClassName","indicatorStyles","inputBaseClassName","inputStyles","labelStyles","labelPosition","size","className"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Switch/useSwitchStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SwitchSlots, SwitchState } from './Switch.types';\n\nexport const switchClassNames: SlotClassNames<SwitchSlots> = {\n  root: 'fui-Switch',\n  indicator: 'fui-Switch__indicator',\n  input: 'fui-Switch__input',\n  label: 'fui-Switch__label',\n};\n\n/**\n * @deprecated Use `switchClassNames.root` instead.\n */\nexport const switchClassName = switchClassNames.root;\n\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\n// Medium size dimensions\nconst trackHeightMedium = 20;\nconst trackWidthMedium = 40;\nconst thumbSizeMedium = trackHeightMedium - spaceBetweenThumbAndTrack;\n// Small size dimensions (from design mockup)\nconst trackHeightSmall = 16;\nconst trackWidthSmall = 32;\nconst thumbSizeSmall = trackHeightSmall - spaceBetweenThumbAndTrack;\n\nconst useRootBaseClassName = makeResetStyles({\n  alignItems: 'flex-start',\n  boxSizing: 'border-box',\n  display: 'inline-flex',\n  position: 'relative',\n\n  ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useRootStyles = makeStyles({\n  vertical: {\n    flexDirection: 'column',\n  },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\n  borderRadius: tokens.borderRadiusCircular,\n  border: '1px solid',\n  lineHeight: 0,\n  boxSizing: 'border-box',\n  fill: 'currentColor',\n  flexShrink: 0,\n  fontSize: `${thumbSizeMedium}px`,\n  height: `${trackHeightMedium}px`,\n  margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n  pointerEvents: 'none',\n  transitionDuration: tokens.durationNormal,\n  transitionTimingFunction: tokens.curveEasyEase,\n  transitionProperty: 'background, border, color',\n  width: `${trackWidthMedium}px`,\n\n  '@media screen and (prefers-reduced-motion: reduce)': {\n    transitionDuration: '0.01ms',\n  },\n\n  '@media (forced-colors: active)': {\n    color: 'CanvasText',\n    '> i': {\n      forcedColorAdjust: 'none',\n    },\n  },\n\n  '> *': {\n    transitionDuration: tokens.durationNormal,\n    transitionTimingFunction: tokens.curveEasyEase,\n    transitionProperty: 'transform',\n\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      transitionDuration: '0.01ms',\n    },\n  },\n});\n\nconst useIndicatorStyles = makeStyles({\n  labelAbove: {\n    marginTop: 0,\n  },\n  sizeSmall: {\n    fontSize: `${thumbSizeSmall}px`,\n    height: `${trackHeightSmall}px`,\n    width: `${trackWidthSmall}px`,\n  },\n});\n\nconst useInputBaseClassName = makeResetStyles({\n  boxSizing: 'border-box',\n  cursor: 'pointer',\n  height: '100%',\n  margin: 0,\n  opacity: 0,\n  position: 'absolute',\n\n  // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n  // This is done so that clicking on that \"empty space\" still toggles the switch.\n  width: `calc(${trackWidthMedium}px + 2 * ${tokens.spacingHorizontalS})`,\n\n  // Checked (both enabled and disabled)\n  ':checked': {\n    [`& ~ .${switchClassNames.indicator}`]: {\n      '> *': {\n        transform: `translateX(${trackWidthMedium - thumbSizeMedium - spaceBetweenThumbAndTrack}px)`,\n      },\n    },\n  },\n\n  // Disabled (both checked and unchecked)\n  ':disabled, &[aria-disabled=\"true\"]': {\n    cursor: 'default',\n\n    [`& ~ .${switchClassNames.indicator}`]: {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    [`& ~ .${switchClassNames.label}`]: {\n      cursor: 'default',\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n\n  // Enabled and unchecked\n  ':enabled:not(:checked):not([aria-disabled=\"true\"])': {\n    [`& ~ .${switchClassNames.indicator}`]: {\n      color: tokens.colorNeutralStrokeAccessible,\n      borderColor: tokens.colorNeutralStrokeAccessible,\n    },\n\n    [`& ~ .${switchClassNames.label}`]: {\n      color: tokens.colorNeutralForeground1,\n    },\n\n    ':hover': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        color: tokens.colorNeutralStrokeAccessibleHover,\n        borderColor: tokens.colorNeutralStrokeAccessibleHover,\n      },\n    },\n\n    ':hover:active': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        color: tokens.colorNeutralStrokeAccessiblePressed,\n        borderColor: tokens.colorNeutralStrokeAccessiblePressed,\n      },\n    },\n  },\n\n  // Enabled and checked\n  ':enabled:checked:not([aria-disabled=\"true\"])': {\n    [`& ~ .${switchClassNames.indicator}`]: {\n      backgroundColor: tokens.colorCompoundBrandBackground,\n      color: tokens.colorNeutralForegroundInverted,\n      borderColor: tokens.colorTransparentStroke,\n    },\n\n    ':hover': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n        borderColor: tokens.colorTransparentStrokeInteractive,\n      },\n    },\n\n    ':hover:active': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n        borderColor: tokens.colorTransparentStrokeInteractive,\n      },\n    },\n  },\n\n  // Disabled and unchecked\n  ':disabled:not(:checked), &[aria-disabled=\"true\"]:not(:checked)': {\n    [`& ~ .${switchClassNames.indicator}`]: {\n      borderColor: tokens.colorNeutralStrokeDisabled,\n    },\n  },\n\n  // Disabled and checked\n  ':disabled:checked, &[aria-disabled=\"true\"]:checked': {\n    [`& ~ .${switchClassNames.indicator}`]: {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      borderColor: tokens.colorTransparentStrokeDisabled,\n    },\n  },\n\n  '@media (forced-colors: active)': {\n    ':disabled, &[aria-disabled=\"true\"]': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        color: 'GrayText',\n        borderColor: 'GrayText',\n      },\n\n      [`& ~ .${switchClassNames.label}`]: {\n        color: 'GrayText',\n      },\n    },\n    ':hover': {\n      color: 'CanvasText',\n    },\n    ':hover:active': {\n      color: 'CanvasText',\n    },\n    ':enabled:checked:not([aria-disabled=\"true\"])': {\n      ':hover': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n          backgroundColor: 'Highlight',\n          color: 'Canvas',\n        },\n      },\n      ':hover:active': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n          backgroundColor: 'Highlight',\n          color: 'Canvas',\n        },\n      },\n      [`& ~ .${switchClassNames.indicator}`]: {\n        backgroundColor: 'Highlight',\n        color: 'Canvas',\n      },\n    },\n  },\n});\n\nconst useInputStyles = makeStyles({\n  before: {\n    right: 0,\n    top: 0,\n  },\n  after: {\n    left: 0,\n    top: 0,\n  },\n  above: {\n    bottom: 0,\n    height: `calc(${trackHeightMedium}px + ${tokens.spacingVerticalS})`,\n    width: '100%',\n  },\n  sizeSmall: {\n    width: `calc(${trackWidthSmall}px + 2 * ${tokens.spacingHorizontalS})`,\n    ':checked': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        '> *': {\n          transform: `translateX(${trackWidthSmall - thumbSizeSmall - spaceBetweenThumbAndTrack}px)`,\n        },\n      },\n    },\n  },\n});\n\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n  base: {\n    cursor: 'pointer',\n\n    // Use a (negative) margin to account for the difference between the track's height and the label's line height.\n    // This prevents the label from expanding the height of the switch, but preserves line height if the label wraps.\n    marginBottom: `calc((${trackHeightMedium}px - ${tokens.lineHeightBase300}) / 2)`,\n    marginTop: `calc((${trackHeightMedium}px - ${tokens.lineHeightBase300}) / 2)`,\n    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n  },\n  sizeSmall: {\n    fontSize: tokens.fontSizeBase200,\n    lineHeight: tokens.lineHeightBase200,\n    marginBottom: `calc((${trackHeightSmall}px - ${tokens.lineHeightBase200}) / 2)`,\n    marginTop: `calc((${trackHeightSmall}px - ${tokens.lineHeightBase200}) / 2)`,\n  },\n  above: {\n    paddingTop: tokens.spacingVerticalXS,\n    paddingBottom: tokens.spacingVerticalXS,\n    width: '100%',\n  },\n  after: {\n    paddingLeft: tokens.spacingHorizontalXS,\n  },\n  before: {\n    paddingRight: tokens.spacingHorizontalXS,\n  },\n});\n\n/**\n * Apply styling to the Switch slots based on the state\n */\nexport const useSwitchStyles_unstable = (state: SwitchState): SwitchState => {\n  'use no memo';\n\n  const rootBaseClassName = useRootBaseClassName();\n  const rootStyles = useRootStyles();\n  const indicatorBaseClassName = useIndicatorBaseClassName();\n  const indicatorStyles = useIndicatorStyles();\n  const inputBaseClassName = useInputBaseClassName();\n  const inputStyles = useInputStyles();\n  const labelStyles = useLabelStyles();\n\n  const { label, labelPosition, size } = state;\n\n  state.root.className = mergeClasses(\n    switchClassNames.root,\n    rootBaseClassName,\n    labelPosition === 'above' && rootStyles.vertical,\n    state.root.className,\n  );\n\n  state.indicator.className = mergeClasses(\n    switchClassNames.indicator,\n    indicatorBaseClassName,\n    label && labelPosition === 'above' && indicatorStyles.labelAbove,\n    size === 'small' && indicatorStyles.sizeSmall,\n    state.indicator.className,\n  );\n\n  state.input.className = mergeClasses(\n    switchClassNames.input,\n    inputBaseClassName,\n    label && inputStyles[labelPosition],\n    size === 'small' && inputStyles.sizeSmall,\n    state.input.className,\n  );\n\n  if (state.label) {\n    state.label.className = mergeClasses(\n      switchClassNames.label,\n      labelStyles.base,\n      labelStyles[labelPosition],\n      size === 'small' && labelStyles.sizeSmall,\n      state.label.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["createFocusOutlineStyle","tokens","makeResetStyles","makeStyles","mergeClasses","switchClassNames","root","indicator","input","label","switchClassName","spaceBetweenThumbAndTrack","trackHeightMedium","trackWidthMedium","thumbSizeMedium","trackHeightSmall","trackWidthSmall","thumbSizeSmall","useRootBaseClassName","alignItems","boxSizing","display","position","style","selector","useRootStyles","vertical","flexDirection","useIndicatorBaseClassName","borderRadius","borderRadiusCircular","border","lineHeight","fill","flexShrink","fontSize","height","margin","spacingVerticalS","spacingHorizontalS","pointerEvents","transitionDuration","durationNormal","transitionTimingFunction","curveEasyEase","transitionProperty","width","color","forcedColorAdjust","useIndicatorStyles","labelAbove","marginTop","sizeSmall","useInputBaseClassName","cursor","opacity","transform","colorNeutralForegroundDisabled","colorNeutralStrokeAccessible","borderColor","colorNeutralForeground1","colorNeutralStrokeAccessibleHover","colorNeutralStrokeAccessiblePressed","backgroundColor","colorCompoundBrandBackground","colorNeutralForegroundInverted","colorTransparentStroke","colorCompoundBrandBackgroundHover","colorTransparentStrokeInteractive","colorCompoundBrandBackgroundPressed","colorNeutralStrokeDisabled","colorNeutralBackgroundDisabled","colorTransparentStrokeDisabled","useInputStyles","before","right","top","after","left","above","bottom","useLabelStyles","base","marginBottom","lineHeightBase300","padding","fontSizeBase200","lineHeightBase200","paddingTop","spacingVerticalXS","paddingBottom","paddingLeft","spacingHorizontalXS","paddingRight","useSwitchStyles_unstable","state","rootBaseClassName","rootStyles","indicatorBaseClassName","indicatorStyles","inputBaseClassName","inputStyles","labelStyles","labelPosition","size","className"],"mappings":"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"}

package/lib-commonjs/components/Switch/Switch.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Switch/Switch.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type SwitchSlots = {\n  /**\n   * The root element of the Switch.\n   *\n   * The root slot receives the `className` and `style` specified directly on the `<Switch>` tag.\n   * All other native props will be applied to the primary slot: `input`.\n   */\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * The track and the thumb sliding over it indicating the on and off status of the Switch.\n   */\n  indicator: NonNullable<Slot<'div'>>;\n\n  /**\n   * Hidden input that handles the Switch's functionality.\n   *\n   * This is the PRIMARY slot: all native properties specified directly on the `<Switch>` tag will be applied to this\n   * slot, except `className` and `style`, which remain on the root slot.\n   */\n  input: NonNullable<Slot<'input'>>;\n\n  /**\n   * The Switch's label.\n   */\n  label?: Slot<typeof Label>;\n};\n\nexport type SwitchOnChangeData = {\n  checked: boolean;\n};\n\n/**\n * Switch Props\n */\nexport type SwitchProps = Omit<\n  ComponentProps<Partial<SwitchSlots>, 'input'>,\n  'checked' | 'defaultChecked' | 'onChange' | 'size'\n> & {\n  /**\n   * Defines the controlled checked state of the Switch.\n   * If passed, Switch 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 `onChange` events and re-rendering.\n   *\n   * @default false\n   */\n  checked?: boolean;\n\n  /**\n   * Defines whether the Switch is initially in a checked state or not when rendered.\n   *\n   * @default false\n   */\n  defaultChecked?: boolean;\n\n  /**\n   * The position of the label relative to the Switch.\n   *\n   * @default after\n   */\n  labelPosition?: 'above' | 'after' | 'before';\n\n  /**\n   * The size of the Switch.\n   *\n   *  @default 'medium'\n   */\n  size?: 'small' | 'medium';\n\n  /**\n   * Callback to be called when the checked state value changes.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: SwitchOnChangeData) => void;\n};\n\n/**\n * Switch base props, excluding design-related props like size\n */\nexport type SwitchBaseProps = Omit<SwitchProps, 'size'>;\n\n/**\n * State used in rendering Switch\n */\nexport type SwitchState = ComponentState<SwitchSlots> & Required<Pick<SwitchProps, 'labelPosition' | 'size'>>;\n\n/**\n * Switch base state, excluding design-related state like size\n */\nexport type SwitchBaseState = Omit<SwitchState, 'size'>;\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}
+{"version":3,"sources":["../src/components/Switch/Switch.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type SwitchSlots = {\n  /**\n   * The root element of the Switch.\n   *\n   * The root slot receives the `className` and `style` specified directly on the `<Switch>` tag.\n   * All other native props will be applied to the primary slot: `input`.\n   */\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * The track and the thumb sliding over it indicating the on and off status of the Switch.\n   */\n  indicator: NonNullable<Slot<'div'>>;\n\n  /**\n   * Hidden input that handles the Switch's functionality.\n   *\n   * This is the PRIMARY slot: all native properties specified directly on the `<Switch>` tag will be applied to this\n   * slot, except `className` and `style`, which remain on the root slot.\n   */\n  input: NonNullable<Slot<'input'>>;\n\n  /**\n   * The Switch's label.\n   */\n  label?: Slot<typeof Label>;\n};\n\nexport type SwitchOnChangeData = {\n  checked: boolean;\n};\n\n/**\n * Switch Props\n */\nexport type SwitchProps = Omit<\n  ComponentProps<Partial<SwitchSlots>, 'input'>,\n  'checked' | 'defaultChecked' | 'onChange' | 'size'\n> & {\n  /**\n   * Defines the controlled checked state of the Switch.\n   * If passed, Switch 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 `onChange` events and re-rendering.\n   *\n   * @default false\n   */\n  checked?: boolean;\n\n  /**\n   * When set, allows the Switch to be focusable even when it has been disabled. This is used in scenarios where it is\n   * important to keep a consistent tab order for screen reader and keyboard users.\n   *\n   * @default false\n   */\n  disabledFocusable?: boolean;\n\n  /**\n   * Defines whether the Switch is initially in a checked state or not when rendered.\n   *\n   * @default false\n   */\n  defaultChecked?: boolean;\n\n  /**\n   * The position of the label relative to the Switch.\n   *\n   * @default after\n   */\n  labelPosition?: 'above' | 'after' | 'before';\n\n  /**\n   * The size of the Switch.\n   *\n   *  @default 'medium'\n   */\n  size?: 'small' | 'medium';\n\n  /**\n   * Callback to be called when the checked state value changes.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: SwitchOnChangeData) => void;\n};\n\n/**\n * Switch base props, excluding design-related props like size\n */\nexport type SwitchBaseProps = Omit<SwitchProps, 'size'>;\n\n/**\n * State used in rendering Switch\n */\nexport type SwitchState = ComponentState<SwitchSlots> &\n  Required<Pick<SwitchProps, 'disabledFocusable' | 'labelPosition' | 'size'>>;\n\n/**\n * Switch base state, excluding design-related state like size\n */\nexport type SwitchBaseState = Omit<SwitchState, 'size'>;\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

package/lib-commonjs/components/Switch/useSwitch.js

@@ -38,14 +38,15 @@ const useSwitchBase_unstable = (props, ref)=>{
         supportsLabelFor: true,
         supportsRequired: true
     });
-    const { checked, defaultChecked, disabled, labelPosition = 'after', onChange, required } = props;
+    const { checked, defaultChecked, disabled, disabledFocusable = false, labelPosition = 'after', onChange, required } = props;
     const nativeProps = (0, _reactutilities.getPartitionedNativeProps)({
         props,
         primarySlotTagName: 'input',
         excludedPropNames: [
             'checked',
             'defaultChecked',
-            'onChange'
+            'onChange',
+            'disabledFocusable'
         ]
     });
     const id = (0, _reactutilities.useId)('switch-', nativeProps.primary.id);
@@ -71,16 +72,30 @@ const useSwitchBase_unstable = (props, ref)=>{
             ref,
             role: 'switch',
             type: 'checkbox',
-            ...nativeProps.primary
+            ...nativeProps.primary,
+            disabled: disabled && !disabledFocusable,
+            ...disabledFocusable && {
+                'aria-disabled': true
+            }
         },
         elementType: 'input'
     });
     input.onChange = (0, _reactutilities.mergeCallbacks)(input.onChange, (ev)=>onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
             checked: ev.currentTarget.checked
         }));
+    input.onClick = (0, _reactutilities.mergeCallbacks)(input.onClick, (ev)=>{
+        if (disabledFocusable) {
+            ev.preventDefault();
+        }
+    });
+    input.onKeyDown = (0, _reactutilities.mergeCallbacks)(input.onKeyDown, (ev)=>{
+        if (disabledFocusable && (ev.key === ' ' || ev.key === 'Enter')) {
+            ev.preventDefault();
+        }
+    });
     const label = _reactutilities.slot.optional(props.label, {
         defaultProps: {
-            disabled,
+            disabled: disabled || disabledFocusable,
             htmlFor: id,
             required,
             size: 'medium'
@@ -88,6 +103,7 @@ const useSwitchBase_unstable = (props, ref)=>{
         elementType: _reactlabel.Label
     });
     return {
+        disabledFocusable,
         labelPosition,
         components: {
             root: 'div',

package/lib-commonjs/components/Switch/useSwitch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Switch/useSwitch.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport { getPartitionedNativeProps, mergeCallbacks, useId, slot } from '@fluentui/react-utilities';\nimport type { SwitchProps, SwitchState, SwitchBaseProps, SwitchBaseState } from './Switch.types';\n\n/**\n * Create the state required to render Switch.\n *\n * The returned state can be modified with hooks such as useSwitchStyles_unstable,\n * before being passed to renderSwitch_unstable.\n *\n * @param props - props from this instance of Switch\n * @param ref - reference to `<input>` element of Switch\n */\nexport const useSwitch_unstable = (props: SwitchProps, ref: React.Ref<HTMLInputElement>): SwitchState => {\n  const { size = 'medium', ...baseProps } = props;\n\n  const baseState = useSwitchBase_unstable(baseProps, ref);\n\n  return {\n    ...baseState,\n    size,\n  };\n};\n\n/**\n * Base hook for Switch component, manages state and structure common to all variants of Switch\n *\n * @param props - base props from this instance of Switch\n * @param ref - reference to `<input>` element of Switch\n */\nexport const useSwitchBase_unstable = (props: SwitchBaseProps, ref?: React.Ref<HTMLInputElement>): SwitchBaseState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true });\n\n  const { checked, defaultChecked, disabled, labelPosition = 'after', onChange, required } = props;\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['checked', 'defaultChecked', 'onChange'],\n  });\n\n  const id = useId('switch-', nativeProps.primary.id);\n\n  const root = slot.always(props.root, {\n    defaultProps: { ref: useFocusWithin<HTMLDivElement>(), ...nativeProps.root },\n    elementType: 'div',\n  });\n  const indicator = slot.always(props.indicator, {\n    defaultProps: { 'aria-hidden': true, children: <CircleFilled /> },\n    elementType: 'div',\n  });\n  const input = slot.always(props.input, {\n    defaultProps: { checked, defaultChecked, id, ref, role: 'switch', type: 'checkbox', ...nativeProps.primary },\n    elementType: 'input',\n  });\n  input.onChange = mergeCallbacks(input.onChange, ev => onChange?.(ev, { checked: ev.currentTarget.checked }));\n  const label = slot.optional(props.label, {\n    defaultProps: { disabled, htmlFor: id, required, size: 'medium' },\n    elementType: Label,\n  });\n  return {\n    labelPosition,\n    components: { root: 'div', indicator: 'div', input: 'input', label: Label },\n\n    root,\n    indicator,\n    input,\n    label,\n  };\n};\n"],"names":["React","useFieldControlProps_unstable","CircleFilled","Label","useFocusWithin","getPartitionedNativeProps","mergeCallbacks","useId","slot","useSwitch_unstable","props","ref","size","baseProps","baseState","useSwitchBase_unstable","supportsLabelFor","supportsRequired","checked","defaultChecked","disabled","labelPosition","onChange","required","nativeProps","primarySlotTagName","excludedPropNames","id","primary","root","always","defaultProps","elementType","indicator","children","input","role","type","ev","currentTarget","label","optional","htmlFor","components"],"mappings":"AAAA;;;;;;;;;;;;0BAoCae;eAAAA;;IAjBAN,kBAAAA;;;;;iEAjBU,QAAQ;4BACe,wBAAwB;4BACzC,wBAAwB;4BAC/B,wBAAwB;8BACf,0BAA0B;gCACc,4BAA4B;AAY5F,2BAA2B,CAACC,OAAoBC;IACrD,MAAM,EAAEC,OAAO,QAAQ,EAAE,GAAGC,WAAW,GAAGH;IAE1C,MAAMI,YAAYC,uBAAuBF,WAAWF;IAEpD,OAAO;QACL,GAAGG,SAAS;QACZF;IACF;AACF,EAAE;AAQK,+BAA+B,CAACF,OAAwBC;IAC7D,+CAA+C;IAC/CD,YAAQT,yCAAAA,EAA8BS,OAAO;QAAEM,kBAAkB;QAAMC,kBAAkB;IAAK;IAE9F,MAAM,EAAEC,OAAO,EAAEC,cAAc,EAAEC,QAAQ,EAAEC,gBAAgB,OAAO,EAAEC,QAAQ,EAAEC,QAAQ,EAAE,GAAGb;IAE3F,MAAMc,kBAAcnB,yCAAAA,EAA0B;QAC5CK;QACAe,oBAAoB;QACpBC,mBAAmB;YAAC;YAAW;YAAkB;SAAW;IAC9D;IAEA,MAAMC,SAAKpB,qBAAAA,EAAM,WAAWiB,YAAYI,OAAO,CAACD,EAAE;IAElD,MAAME,OAAOrB,oBAAAA,CAAKsB,MAAM,CAACpB,MAAMmB,IAAI,EAAE;QACnCE,cAAc;YAAEpB,SAAKP,4BAAAA;YAAkC,GAAGoB,YAAYK,IAAI;QAAC;QAC3EG,aAAa;IACf;IACA,MAAMC,YAAYzB,oBAAAA,CAAKsB,MAAM,CAACpB,MAAMuB,SAAS,EAAE;QAC7CF,cAAc;YAAE,eAAe;YAAMG,UAAAA,WAAAA,GAAU,OAAA,aAAA,CAAChC,wBAAAA,EAAAA;QAAgB;QAChE8B,aAAa;IACf;IACA,MAAMG,QAAQ3B,oBAAAA,CAAKsB,MAAM,CAACpB,MAAMyB,KAAK,EAAE;QACrCJ,cAAc;YAAEb;YAASC;YAAgBQ;YAAIhB;YAAKyB,MAAM;YAAUC,MAAM;YAAY,GAAGb,YAAYI,OAAO;QAAC;QAC3GI,aAAa;IACf;IACAG,MAAMb,QAAQ,OAAGhB,8BAAAA,EAAe6B,MAAMb,QAAQ,EAAEgB,CAAAA,KAAMhB,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAWgB,IAAI;YAAEpB,SAASoB,GAAGC,aAAa,CAACrB,OAAO;QAAC;IACzG,MAAMsB,QAAQhC,oBAAAA,CAAKiC,QAAQ,CAAC/B,MAAM8B,KAAK,EAAE;QACvCT,cAAc;YAAEX;YAAUsB,SAASf;YAAIJ;YAAUX,MAAM;QAAS;QAChEoB,aAAa7B,iBAAAA;IACf;IACA,OAAO;QACLkB;QACAsB,YAAY;YAAEd,MAAM;YAAOI,WAAW;YAAOE,OAAO;YAASK,OAAOrC,iBAAAA;QAAM;QAE1E0B;QACAI;QACAE;QACAK;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/Switch/useSwitch.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport { getPartitionedNativeProps, mergeCallbacks, useId, slot } from '@fluentui/react-utilities';\nimport type { SwitchProps, SwitchState, SwitchBaseProps, SwitchBaseState } from './Switch.types';\n\n/**\n * Create the state required to render Switch.\n *\n * The returned state can be modified with hooks such as useSwitchStyles_unstable,\n * before being passed to renderSwitch_unstable.\n *\n * @param props - props from this instance of Switch\n * @param ref - reference to `<input>` element of Switch\n */\nexport const useSwitch_unstable = (props: SwitchProps, ref: React.Ref<HTMLInputElement>): SwitchState => {\n  const { size = 'medium', ...baseProps } = props;\n\n  const baseState = useSwitchBase_unstable(baseProps, ref);\n\n  return {\n    ...baseState,\n    size,\n  };\n};\n\n/**\n * Base hook for Switch component, manages state and structure common to all variants of Switch\n *\n * @param props - base props from this instance of Switch\n * @param ref - reference to `<input>` element of Switch\n */\nexport const useSwitchBase_unstable = (props: SwitchBaseProps, ref?: React.Ref<HTMLInputElement>): SwitchBaseState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true });\n\n  const {\n    checked,\n    defaultChecked,\n    disabled,\n    disabledFocusable = false,\n    labelPosition = 'after',\n    onChange,\n    required,\n  } = props;\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['checked', 'defaultChecked', 'onChange', 'disabledFocusable'],\n  });\n\n  const id = useId('switch-', nativeProps.primary.id);\n\n  const root = slot.always(props.root, {\n    defaultProps: { ref: useFocusWithin<HTMLDivElement>(), ...nativeProps.root },\n    elementType: 'div',\n  });\n  const indicator = slot.always(props.indicator, {\n    defaultProps: { 'aria-hidden': true, children: <CircleFilled /> },\n    elementType: 'div',\n  });\n  const input = slot.always(props.input, {\n    defaultProps: {\n      checked,\n      defaultChecked,\n      id,\n      ref,\n      role: 'switch',\n      type: 'checkbox',\n      ...nativeProps.primary,\n      disabled: disabled && !disabledFocusable,\n      ...(disabledFocusable && { 'aria-disabled': true }),\n    },\n    elementType: 'input',\n  });\n  input.onChange = mergeCallbacks(input.onChange, ev => onChange?.(ev, { checked: ev.currentTarget.checked }));\n  input.onClick = mergeCallbacks(input.onClick, ev => {\n    if (disabledFocusable) {\n      ev.preventDefault();\n    }\n  });\n  input.onKeyDown = mergeCallbacks(input.onKeyDown, ev => {\n    if (disabledFocusable && (ev.key === ' ' || ev.key === 'Enter')) {\n      ev.preventDefault();\n    }\n  });\n  const label = slot.optional(props.label, {\n    defaultProps: { disabled: disabled || disabledFocusable, htmlFor: id, required, size: 'medium' },\n    elementType: Label,\n  });\n  return {\n    disabledFocusable,\n    labelPosition,\n    components: { root: 'div', indicator: 'div', input: 'input', label: Label },\n\n    root,\n    indicator,\n    input,\n    label,\n  };\n};\n"],"names":["React","useFieldControlProps_unstable","CircleFilled","Label","useFocusWithin","getPartitionedNativeProps","mergeCallbacks","useId","slot","useSwitch_unstable","props","ref","size","baseProps","baseState","useSwitchBase_unstable","supportsLabelFor","supportsRequired","checked","defaultChecked","disabled","disabledFocusable","labelPosition","onChange","required","nativeProps","primarySlotTagName","excludedPropNames","id","primary","root","always","defaultProps","elementType","indicator","children","input","role","type","ev","currentTarget","onClick","preventDefault","onKeyDown","key","label","optional","htmlFor","components"],"mappings":"AAAA;;;;;;;;;;;;0BAoCae;;;IAjBAN,kBAAAA;;;;;iEAjBU,QAAQ;4BACe,wBAAwB;4BACzC,wBAAwB;4BAC/B,wBAAwB;8BACf,0BAA0B;gCACc,4BAA4B;AAY5F,2BAA2B,CAACC,OAAoBC;IACrD,MAAM,EAAEC,OAAO,QAAQ,EAAE,GAAGC,WAAW,GAAGH;IAE1C,MAAMI,YAAYC,uBAAuBF,WAAWF;IAEpD,OAAO;QACL,GAAGG,SAAS;QACZF;IACF;AACF,EAAE;AAQK,MAAMG,yBAAyB,CAACL,OAAwBC;IAC7D,+CAA+C;IAC/CD,YAAQT,yCAAAA,EAA8BS,OAAO;QAAEM,kBAAkB;QAAMC,kBAAkB;IAAK;IAE9F,MAAM,EACJC,OAAO,EACPC,cAAc,EACdC,QAAQ,EACRC,oBAAoB,KAAK,EACzBC,gBAAgB,OAAO,EACvBC,QAAQ,EACRC,QAAQ,EACT,GAAGd;IAEJ,MAAMe,kBAAcpB,yCAAAA,EAA0B;QAC5CK;QACAgB,oBAAoB;QACpBC,mBAAmB;YAAC;YAAW;YAAkB;YAAY;SAAoB;IACnF;IAEA,MAAMC,SAAKrB,qBAAAA,EAAM,WAAWkB,YAAYI,OAAO,CAACD,EAAE;IAElD,MAAME,OAAOtB,oBAAAA,CAAKuB,MAAM,CAACrB,MAAMoB,IAAI,EAAE;QACnCE,cAAc;YAAErB,SAAKP,4BAAAA;YAAkC,GAAGqB,YAAYK,IAAI;QAAC;QAC3EG,aAAa;IACf;IACA,MAAMC,YAAY1B,oBAAAA,CAAKuB,MAAM,CAACrB,MAAMwB,SAAS,EAAE;QAC7CF,cAAc;YAAE,eAAe;YAAMG,UAAAA,WAAAA,GAAU,OAAA,aAAA,CAACjC,wBAAAA,EAAAA;QAAgB;QAChE+B,aAAa;IACf;IACA,MAAMG,QAAQ5B,oBAAAA,CAAKuB,MAAM,CAACrB,MAAM0B,KAAK,EAAE;QACrCJ,cAAc;YACZd;YACAC;YACAS;YACAjB;YACA0B,MAAM;YACNC,MAAM;YACN,GAAGb,YAAYI,OAAO;YACtBT,UAAUA,YAAY,CAACC;YACvB,GAAIA,qBAAqB;gBAAE,iBAAiB;YAAK,CAAC;QACpD;QACAY,aAAa;IACf;IACAG,MAAMb,QAAQ,OAAGjB,8BAAAA,EAAe8B,MAAMb,QAAQ,EAAEgB,CAAAA,KAAMhB,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAWgB,IAAI;YAAErB,SAASqB,GAAGC,aAAa,CAACtB,OAAO;QAAC;IACzGkB,MAAMK,OAAO,OAAGnC,8BAAAA,EAAe8B,MAAMK,OAAO,EAAEF,CAAAA;QAC5C,IAAIlB,mBAAmB;YACrBkB,GAAGG,cAAc;QACnB;IACF;IACAN,MAAMO,SAAS,OAAGrC,8BAAAA,EAAe8B,MAAMO,SAAS,EAAEJ,CAAAA;QAChD,IAAIlB,qBAAsBkB,CAAAA,GAAGK,GAAG,KAAK,OAAOL,GAAGK,GAAG,KAAK,OAAA,CAAM,EAAI;YAC/DL,GAAGG,cAAc;QACnB;IACF;IACA,MAAMG,QAAQrC,oBAAAA,CAAKsC,QAAQ,CAACpC,MAAMmC,KAAK,EAAE;QACvCb,cAAc;YAAEZ,UAAUA,YAAYC;YAAmB0B,SAASnB;YAAIJ;YAAUZ,MAAM;QAAS;QAC/FqB,aAAa9B,iBAAAA;IACf;IACA,OAAO;QACLkB;QACAC;QACA0B,YAAY;YAAElB,MAAM;YAAOI,WAAW;YAAOE,OAAO;YAASS,OAAO1C,iBAAAA;QAAM;QAE1E2B;QACAI;QACAE;QACAS;IACF;AACF,EAAE"}

package/lib-commonjs/components/Switch/useSwitchStyles.styles.js

@@ -93,40 +93,40 @@ const useIndicatorStyles = /*#__PURE__*/ (0, _react.__styles)({
         ".f1szoe96{width:32px;}"
     ]
 });
-const useInputBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("rsji9ng", "r15xih98", {
+const useInputBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r12ojtgy", "rhc0e9x", {
     r: [
-        ".rsji9ng{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;width:calc(40px + 2 * var(--spacingHorizontalS));}",
-        ".rsji9ng:checked~.fui-Switch__indicator>*{transform:translateX(20px);}",
-        ".rsji9ng:disabled{cursor:default;}",
-        ".rsji9ng:disabled~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}",
-        ".rsji9ng:disabled~.fui-Switch__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}",
-        ".rsji9ng:enabled:not(:checked)~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);border-color:var(--colorNeutralStrokeAccessible);}",
-        ".rsji9ng:enabled:not(:checked)~.fui-Switch__label{color:var(--colorNeutralForeground1);}",
-        ".rsji9ng:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);border-color:var(--colorNeutralStrokeAccessibleHover);}",
-        ".rsji9ng:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);border-color:var(--colorNeutralStrokeAccessiblePressed);}",
-        ".rsji9ng:enabled:checked~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorTransparentStroke);}",
-        ".rsji9ng:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorTransparentStrokeInteractive);}",
-        ".rsji9ng:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorTransparentStrokeInteractive);}",
-        ".rsji9ng:disabled:not(:checked)~.fui-Switch__indicator{border-color:var(--colorNeutralStrokeDisabled);}",
-        ".rsji9ng:disabled:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);border-color:var(--colorTransparentStrokeDisabled);}",
-        ".r15xih98{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;width:calc(40px + 2 * var(--spacingHorizontalS));}",
-        ".r15xih98:checked~.fui-Switch__indicator>*{transform:translateX(-20px);}",
-        ".r15xih98:disabled{cursor:default;}",
-        ".r15xih98:disabled~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}",
-        ".r15xih98:disabled~.fui-Switch__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}",
-        ".r15xih98:enabled:not(:checked)~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);border-color:var(--colorNeutralStrokeAccessible);}",
-        ".r15xih98:enabled:not(:checked)~.fui-Switch__label{color:var(--colorNeutralForeground1);}",
-        ".r15xih98:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);border-color:var(--colorNeutralStrokeAccessibleHover);}",
-        ".r15xih98:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);border-color:var(--colorNeutralStrokeAccessiblePressed);}",
-        ".r15xih98:enabled:checked~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorTransparentStroke);}",
-        ".r15xih98:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorTransparentStrokeInteractive);}",
-        ".r15xih98:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorTransparentStrokeInteractive);}",
-        ".r15xih98:disabled:not(:checked)~.fui-Switch__indicator{border-color:var(--colorNeutralStrokeDisabled);}",
-        ".r15xih98:disabled:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);border-color:var(--colorTransparentStrokeDisabled);}"
+        ".r12ojtgy{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;width:calc(40px + 2 * var(--spacingHorizontalS));}",
+        ".r12ojtgy:checked~.fui-Switch__indicator>*{transform:translateX(20px);}",
+        ".r12ojtgy:disabled,.r12ojtgy[aria-disabled=\"true\"]{cursor:default;}",
+        ".r12ojtgy:disabled~.fui-Switch__indicator,.r12ojtgy[aria-disabled=\"true\"]~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}",
+        ".r12ojtgy:disabled~.fui-Switch__label,.r12ojtgy[aria-disabled=\"true\"]~.fui-Switch__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}",
+        ".r12ojtgy:enabled:not(:checked):not([aria-disabled=\"true\"])~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);border-color:var(--colorNeutralStrokeAccessible);}",
+        ".r12ojtgy:enabled:not(:checked):not([aria-disabled=\"true\"])~.fui-Switch__label{color:var(--colorNeutralForeground1);}",
+        ".r12ojtgy:enabled:not(:checked):not([aria-disabled=\"true\"]):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);border-color:var(--colorNeutralStrokeAccessibleHover);}",
+        ".r12ojtgy:enabled:not(:checked):not([aria-disabled=\"true\"]):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);border-color:var(--colorNeutralStrokeAccessiblePressed);}",
+        ".r12ojtgy:enabled:checked:not([aria-disabled=\"true\"])~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorTransparentStroke);}",
+        ".r12ojtgy:enabled:checked:not([aria-disabled=\"true\"]):hover~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorTransparentStrokeInteractive);}",
+        ".r12ojtgy:enabled:checked:not([aria-disabled=\"true\"]):hover:active~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorTransparentStrokeInteractive);}",
+        ".r12ojtgy:disabled:not(:checked)~.fui-Switch__indicator,.r12ojtgy[aria-disabled=\"true\"]:not(:checked)~.fui-Switch__indicator{border-color:var(--colorNeutralStrokeDisabled);}",
+        ".r12ojtgy:disabled:checked~.fui-Switch__indicator,.r12ojtgy[aria-disabled=\"true\"]:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);border-color:var(--colorTransparentStrokeDisabled);}",
+        ".rhc0e9x{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;width:calc(40px + 2 * var(--spacingHorizontalS));}",
+        ".rhc0e9x:checked~.fui-Switch__indicator>*{transform:translateX(-20px);}",
+        ".rhc0e9x:disabled,.rhc0e9x[aria-disabled=\"true\"]{cursor:default;}",
+        ".rhc0e9x:disabled~.fui-Switch__indicator,.rhc0e9x[aria-disabled=\"true\"]~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}",
+        ".rhc0e9x:disabled~.fui-Switch__label,.rhc0e9x[aria-disabled=\"true\"]~.fui-Switch__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}",
+        ".rhc0e9x:enabled:not(:checked):not([aria-disabled=\"true\"])~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);border-color:var(--colorNeutralStrokeAccessible);}",
+        ".rhc0e9x:enabled:not(:checked):not([aria-disabled=\"true\"])~.fui-Switch__label{color:var(--colorNeutralForeground1);}",
+        ".rhc0e9x:enabled:not(:checked):not([aria-disabled=\"true\"]):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);border-color:var(--colorNeutralStrokeAccessibleHover);}",
+        ".rhc0e9x:enabled:not(:checked):not([aria-disabled=\"true\"]):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);border-color:var(--colorNeutralStrokeAccessiblePressed);}",
+        ".rhc0e9x:enabled:checked:not([aria-disabled=\"true\"])~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorTransparentStroke);}",
+        ".rhc0e9x:enabled:checked:not([aria-disabled=\"true\"]):hover~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorTransparentStrokeInteractive);}",
+        ".rhc0e9x:enabled:checked:not([aria-disabled=\"true\"]):hover:active~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorTransparentStrokeInteractive);}",
+        ".rhc0e9x:disabled:not(:checked)~.fui-Switch__indicator,.rhc0e9x[aria-disabled=\"true\"]:not(:checked)~.fui-Switch__indicator{border-color:var(--colorNeutralStrokeDisabled);}",
+        ".rhc0e9x:disabled:checked~.fui-Switch__indicator,.rhc0e9x[aria-disabled=\"true\"]:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);border-color:var(--colorTransparentStrokeDisabled);}"
     ],
     s: [
-        "@media (forced-colors: active){.rsji9ng:disabled~.fui-Switch__indicator{color:GrayText;border-color:GrayText;}.rsji9ng:disabled~.fui-Switch__label{color:GrayText;}.rsji9ng:hover{color:CanvasText;}.rsji9ng:hover:active{color:CanvasText;}.rsji9ng:enabled:checked:hover~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.rsji9ng:enabled:checked:hover:active~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.rsji9ng:enabled:checked~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}}",
-        "@media (forced-colors: active){.r15xih98:disabled~.fui-Switch__indicator{color:GrayText;border-color:GrayText;}.r15xih98:disabled~.fui-Switch__label{color:GrayText;}.r15xih98:hover{color:CanvasText;}.r15xih98:hover:active{color:CanvasText;}.r15xih98:enabled:checked:hover~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.r15xih98:enabled:checked:hover:active~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.r15xih98:enabled:checked~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}}"
+        "@media (forced-colors: active){.r12ojtgy:disabled~.fui-Switch__indicator,.r12ojtgy[aria-disabled=\"true\"]~.fui-Switch__indicator{color:GrayText;border-color:GrayText;}.r12ojtgy:disabled~.fui-Switch__label,.r12ojtgy[aria-disabled=\"true\"]~.fui-Switch__label{color:GrayText;}.r12ojtgy:hover{color:CanvasText;}.r12ojtgy:hover:active{color:CanvasText;}.r12ojtgy:enabled:checked:not([aria-disabled=\"true\"]):hover~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.r12ojtgy:enabled:checked:not([aria-disabled=\"true\"]):hover:active~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.r12ojtgy:enabled:checked:not([aria-disabled=\"true\"])~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}}",
+        "@media (forced-colors: active){.rhc0e9x:disabled~.fui-Switch__indicator,.rhc0e9x[aria-disabled=\"true\"]~.fui-Switch__indicator{color:GrayText;border-color:GrayText;}.rhc0e9x:disabled~.fui-Switch__label,.rhc0e9x[aria-disabled=\"true\"]~.fui-Switch__label{color:GrayText;}.rhc0e9x:hover{color:CanvasText;}.rhc0e9x:hover:active{color:CanvasText;}.rhc0e9x:enabled:checked:not([aria-disabled=\"true\"]):hover~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.rhc0e9x:enabled:checked:not([aria-disabled=\"true\"]):hover:active~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.rhc0e9x:enabled:checked:not([aria-disabled=\"true\"])~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}}"
     ]
 });
 const useInputStyles = /*#__PURE__*/ (0, _react.__styles)({

package/lib-commonjs/components/Switch/useSwitchStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useSwitchStyles.styles.js"],"sourcesContent":["'use client';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nexport const switchClassNames = {\n    root: 'fui-Switch',\n    indicator: 'fui-Switch__indicator',\n    input: 'fui-Switch__input',\n    label: 'fui-Switch__label'\n};\n/**\n * @deprecated Use `switchClassNames.root` instead.\n */ export const switchClassName = switchClassNames.root;\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\n// Medium size dimensions\nconst trackHeightMedium = 20;\nconst trackWidthMedium = 40;\nconst thumbSizeMedium = trackHeightMedium - spaceBetweenThumbAndTrack;\n// Small size dimensions (from design mockup)\nconst trackHeightSmall = 16;\nconst trackWidthSmall = 32;\nconst thumbSizeSmall = trackHeightSmall - spaceBetweenThumbAndTrack;\nconst useRootBaseClassName = makeResetStyles({\n    alignItems: 'flex-start',\n    boxSizing: 'border-box',\n    display: 'inline-flex',\n    position: 'relative',\n    ...createFocusOutlineStyle({\n        style: {},\n        selector: 'focus-within'\n    })\n});\nconst useRootStyles = makeStyles({\n    vertical: {\n        flexDirection: 'column'\n    }\n});\nconst useIndicatorBaseClassName = makeResetStyles({\n    borderRadius: tokens.borderRadiusCircular,\n    border: '1px solid',\n    lineHeight: 0,\n    boxSizing: 'border-box',\n    fill: 'currentColor',\n    flexShrink: 0,\n    fontSize: `${thumbSizeMedium}px`,\n    height: `${trackHeightMedium}px`,\n    margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n    pointerEvents: 'none',\n    transitionDuration: tokens.durationNormal,\n    transitionTimingFunction: tokens.curveEasyEase,\n    transitionProperty: 'background, border, color',\n    width: `${trackWidthMedium}px`,\n    '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms'\n    },\n    '@media (forced-colors: active)': {\n        color: 'CanvasText',\n        '> i': {\n            forcedColorAdjust: 'none'\n        }\n    },\n    '> *': {\n        transitionDuration: tokens.durationNormal,\n        transitionTimingFunction: tokens.curveEasyEase,\n        transitionProperty: 'transform',\n        '@media screen and (prefers-reduced-motion: reduce)': {\n            transitionDuration: '0.01ms'\n        }\n    }\n});\nconst useIndicatorStyles = makeStyles({\n    labelAbove: {\n        marginTop: 0\n    },\n    sizeSmall: {\n        fontSize: `${thumbSizeSmall}px`,\n        height: `${trackHeightSmall}px`,\n        width: `${trackWidthSmall}px`\n    }\n});\nconst useInputBaseClassName = makeResetStyles({\n    boxSizing: 'border-box',\n    cursor: 'pointer',\n    height: '100%',\n    margin: 0,\n    opacity: 0,\n    position: 'absolute',\n    // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n    // This is done so that clicking on that \"empty space\" still toggles the switch.\n    width: `calc(${trackWidthMedium}px + 2 * ${tokens.spacingHorizontalS})`,\n    // Checked (both enabled and disabled)\n    ':checked': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n            '> *': {\n                transform: `translateX(${trackWidthMedium - thumbSizeMedium - spaceBetweenThumbAndTrack}px)`\n            }\n        }\n    },\n    // Disabled (both checked and unchecked)\n    ':disabled': {\n        cursor: 'default',\n        [`& ~ .${switchClassNames.indicator}`]: {\n            color: tokens.colorNeutralForegroundDisabled\n        },\n        [`& ~ .${switchClassNames.label}`]: {\n            cursor: 'default',\n            color: tokens.colorNeutralForegroundDisabled\n        }\n    },\n    // Enabled and unchecked\n    ':enabled:not(:checked)': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n            color: tokens.colorNeutralStrokeAccessible,\n            borderColor: tokens.colorNeutralStrokeAccessible\n        },\n        [`& ~ .${switchClassNames.label}`]: {\n            color: tokens.colorNeutralForeground1\n        },\n        ':hover': {\n            [`& ~ .${switchClassNames.indicator}`]: {\n                color: tokens.colorNeutralStrokeAccessibleHover,\n                borderColor: tokens.colorNeutralStrokeAccessibleHover\n            }\n        },\n        ':hover:active': {\n            [`& ~ .${switchClassNames.indicator}`]: {\n                color: tokens.colorNeutralStrokeAccessiblePressed,\n                borderColor: tokens.colorNeutralStrokeAccessiblePressed\n            }\n        }\n    },\n    // Enabled and checked\n    ':enabled:checked': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n            backgroundColor: tokens.colorCompoundBrandBackground,\n            color: tokens.colorNeutralForegroundInverted,\n            borderColor: tokens.colorTransparentStroke\n        },\n        ':hover': {\n            [`& ~ .${switchClassNames.indicator}`]: {\n                backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n                borderColor: tokens.colorTransparentStrokeInteractive\n            }\n        },\n        ':hover:active': {\n            [`& ~ .${switchClassNames.indicator}`]: {\n                backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n                borderColor: tokens.colorTransparentStrokeInteractive\n            }\n        }\n    },\n    // Disabled and unchecked\n    ':disabled:not(:checked)': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n            borderColor: tokens.colorNeutralStrokeDisabled\n        }\n    },\n    // Disabled and checked\n    ':disabled:checked': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n            backgroundColor: tokens.colorNeutralBackgroundDisabled,\n            borderColor: tokens.colorTransparentStrokeDisabled\n        }\n    },\n    '@media (forced-colors: active)': {\n        ':disabled': {\n            [`& ~ .${switchClassNames.indicator}`]: {\n                color: 'GrayText',\n                borderColor: 'GrayText'\n            },\n            [`& ~ .${switchClassNames.label}`]: {\n                color: 'GrayText'\n            }\n        },\n        ':hover': {\n            color: 'CanvasText'\n        },\n        ':hover:active': {\n            color: 'CanvasText'\n        },\n        ':enabled:checked': {\n            ':hover': {\n                [`& ~ .${switchClassNames.indicator}`]: {\n                    backgroundColor: 'Highlight',\n                    color: 'Canvas'\n                }\n            },\n            ':hover:active': {\n                [`& ~ .${switchClassNames.indicator}`]: {\n                    backgroundColor: 'Highlight',\n                    color: 'Canvas'\n                }\n            },\n            [`& ~ .${switchClassNames.indicator}`]: {\n                backgroundColor: 'Highlight',\n                color: 'Canvas'\n            }\n        }\n    }\n});\nconst useInputStyles = makeStyles({\n    before: {\n        right: 0,\n        top: 0\n    },\n    after: {\n        left: 0,\n        top: 0\n    },\n    above: {\n        bottom: 0,\n        height: `calc(${trackHeightMedium}px + ${tokens.spacingVerticalS})`,\n        width: '100%'\n    },\n    sizeSmall: {\n        width: `calc(${trackWidthSmall}px + 2 * ${tokens.spacingHorizontalS})`,\n        ':checked': {\n            [`& ~ .${switchClassNames.indicator}`]: {\n                '> *': {\n                    transform: `translateX(${trackWidthSmall - thumbSizeSmall - spaceBetweenThumbAndTrack}px)`\n                }\n            }\n        }\n    }\n});\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n    base: {\n        cursor: 'pointer',\n        // Use a (negative) margin to account for the difference between the track's height and the label's line height.\n        // This prevents the label from expanding the height of the switch, but preserves line height if the label wraps.\n        marginBottom: `calc((${trackHeightMedium}px - ${tokens.lineHeightBase300}) / 2)`,\n        marginTop: `calc((${trackHeightMedium}px - ${tokens.lineHeightBase300}) / 2)`,\n        padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`\n    },\n    sizeSmall: {\n        fontSize: tokens.fontSizeBase200,\n        lineHeight: tokens.lineHeightBase200,\n        marginBottom: `calc((${trackHeightSmall}px - ${tokens.lineHeightBase200}) / 2)`,\n        marginTop: `calc((${trackHeightSmall}px - ${tokens.lineHeightBase200}) / 2)`\n    },\n    above: {\n        paddingTop: tokens.spacingVerticalXS,\n        paddingBottom: tokens.spacingVerticalXS,\n        width: '100%'\n    },\n    after: {\n        paddingLeft: tokens.spacingHorizontalXS\n    },\n    before: {\n        paddingRight: tokens.spacingHorizontalXS\n    }\n});\n/**\n * Apply styling to the Switch slots based on the state\n */ export const useSwitchStyles_unstable = (state)=>{\n    'use no memo';\n    const rootBaseClassName = useRootBaseClassName();\n    const rootStyles = useRootStyles();\n    const indicatorBaseClassName = useIndicatorBaseClassName();\n    const indicatorStyles = useIndicatorStyles();\n    const inputBaseClassName = useInputBaseClassName();\n    const inputStyles = useInputStyles();\n    const labelStyles = useLabelStyles();\n    const { label, labelPosition, size } = state;\n    state.root.className = mergeClasses(switchClassNames.root, rootBaseClassName, labelPosition === 'above' && rootStyles.vertical, state.root.className);\n    state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorBaseClassName, label && labelPosition === 'above' && indicatorStyles.labelAbove, size === 'small' && indicatorStyles.sizeSmall, state.indicator.className);\n    state.input.className = mergeClasses(switchClassNames.input, inputBaseClassName, label && inputStyles[labelPosition], size === 'small' && inputStyles.sizeSmall, state.input.className);\n    if (state.label) {\n        state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, labelStyles[labelPosition], size === 'small' && labelStyles.sizeSmall, state.label.className);\n    }\n    return state;\n};\n"],"names":["createFocusOutlineStyle","tokens","__resetStyles","__styles","mergeClasses","switchClassNames","root","indicator","input","label","switchClassName","spaceBetweenThumbAndTrack","trackHeightMedium","trackWidthMedium","thumbSizeMedium","trackHeightSmall","trackWidthSmall","thumbSizeSmall","useRootBaseClassName","r","s","useRootStyles","vertical","Beiy3e4","d","useIndicatorBaseClassName","useIndicatorStyles","labelAbove","B6of3ja","sizeSmall","Be2twd7","Bqenvij","a9b677","useInputBaseClassName","useInputStyles","before","j35jbq","Bhzewxz","after","oyh7mz","above","B5kzvoi","oedwrj","useLabelStyles","base","Bceei9c","jrapky","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Bg96gwp","p","useSwitchStyles_unstable","state","rootBaseClassName","rootStyles","indicatorBaseClassName","indicatorStyles","inputBaseClassName","inputStyles","labelStyles","labelPosition","size","className"],"mappings":"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"}
+{"version":3,"sources":["useSwitchStyles.styles.js"],"sourcesContent":["'use client';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nexport const switchClassNames = {\n    root: 'fui-Switch',\n    indicator: 'fui-Switch__indicator',\n    input: 'fui-Switch__input',\n    label: 'fui-Switch__label'\n};\n/**\n * @deprecated Use `switchClassNames.root` instead.\n */ export const switchClassName = switchClassNames.root;\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\n// Medium size dimensions\nconst trackHeightMedium = 20;\nconst trackWidthMedium = 40;\nconst thumbSizeMedium = trackHeightMedium - spaceBetweenThumbAndTrack;\n// Small size dimensions (from design mockup)\nconst trackHeightSmall = 16;\nconst trackWidthSmall = 32;\nconst thumbSizeSmall = trackHeightSmall - spaceBetweenThumbAndTrack;\nconst useRootBaseClassName = makeResetStyles({\n    alignItems: 'flex-start',\n    boxSizing: 'border-box',\n    display: 'inline-flex',\n    position: 'relative',\n    ...createFocusOutlineStyle({\n        style: {},\n        selector: 'focus-within'\n    })\n});\nconst useRootStyles = makeStyles({\n    vertical: {\n        flexDirection: 'column'\n    }\n});\nconst useIndicatorBaseClassName = makeResetStyles({\n    borderRadius: tokens.borderRadiusCircular,\n    border: '1px solid',\n    lineHeight: 0,\n    boxSizing: 'border-box',\n    fill: 'currentColor',\n    flexShrink: 0,\n    fontSize: `${thumbSizeMedium}px`,\n    height: `${trackHeightMedium}px`,\n    margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n    pointerEvents: 'none',\n    transitionDuration: tokens.durationNormal,\n    transitionTimingFunction: tokens.curveEasyEase,\n    transitionProperty: 'background, border, color',\n    width: `${trackWidthMedium}px`,\n    '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms'\n    },\n    '@media (forced-colors: active)': {\n        color: 'CanvasText',\n        '> i': {\n            forcedColorAdjust: 'none'\n        }\n    },\n    '> *': {\n        transitionDuration: tokens.durationNormal,\n        transitionTimingFunction: tokens.curveEasyEase,\n        transitionProperty: 'transform',\n        '@media screen and (prefers-reduced-motion: reduce)': {\n            transitionDuration: '0.01ms'\n        }\n    }\n});\nconst useIndicatorStyles = makeStyles({\n    labelAbove: {\n        marginTop: 0\n    },\n    sizeSmall: {\n        fontSize: `${thumbSizeSmall}px`,\n        height: `${trackHeightSmall}px`,\n        width: `${trackWidthSmall}px`\n    }\n});\nconst useInputBaseClassName = makeResetStyles({\n    boxSizing: 'border-box',\n    cursor: 'pointer',\n    height: '100%',\n    margin: 0,\n    opacity: 0,\n    position: 'absolute',\n    // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n    // This is done so that clicking on that \"empty space\" still toggles the switch.\n    width: `calc(${trackWidthMedium}px + 2 * ${tokens.spacingHorizontalS})`,\n    // Checked (both enabled and disabled)\n    ':checked': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n            '> *': {\n                transform: `translateX(${trackWidthMedium - thumbSizeMedium - spaceBetweenThumbAndTrack}px)`\n            }\n        }\n    },\n    // Disabled (both checked and unchecked)\n    ':disabled, &[aria-disabled=\"true\"]': {\n        cursor: 'default',\n        [`& ~ .${switchClassNames.indicator}`]: {\n            color: tokens.colorNeutralForegroundDisabled\n        },\n        [`& ~ .${switchClassNames.label}`]: {\n            cursor: 'default',\n            color: tokens.colorNeutralForegroundDisabled\n        }\n    },\n    // Enabled and unchecked\n    ':enabled:not(:checked):not([aria-disabled=\"true\"])': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n            color: tokens.colorNeutralStrokeAccessible,\n            borderColor: tokens.colorNeutralStrokeAccessible\n        },\n        [`& ~ .${switchClassNames.label}`]: {\n            color: tokens.colorNeutralForeground1\n        },\n        ':hover': {\n            [`& ~ .${switchClassNames.indicator}`]: {\n                color: tokens.colorNeutralStrokeAccessibleHover,\n                borderColor: tokens.colorNeutralStrokeAccessibleHover\n            }\n        },\n        ':hover:active': {\n            [`& ~ .${switchClassNames.indicator}`]: {\n                color: tokens.colorNeutralStrokeAccessiblePressed,\n                borderColor: tokens.colorNeutralStrokeAccessiblePressed\n            }\n        }\n    },\n    // Enabled and checked\n    ':enabled:checked:not([aria-disabled=\"true\"])': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n            backgroundColor: tokens.colorCompoundBrandBackground,\n            color: tokens.colorNeutralForegroundInverted,\n            borderColor: tokens.colorTransparentStroke\n        },\n        ':hover': {\n            [`& ~ .${switchClassNames.indicator}`]: {\n                backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n                borderColor: tokens.colorTransparentStrokeInteractive\n            }\n        },\n        ':hover:active': {\n            [`& ~ .${switchClassNames.indicator}`]: {\n                backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n                borderColor: tokens.colorTransparentStrokeInteractive\n            }\n        }\n    },\n    // Disabled and unchecked\n    ':disabled:not(:checked), &[aria-disabled=\"true\"]:not(:checked)': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n            borderColor: tokens.colorNeutralStrokeDisabled\n        }\n    },\n    // Disabled and checked\n    ':disabled:checked, &[aria-disabled=\"true\"]:checked': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n            backgroundColor: tokens.colorNeutralBackgroundDisabled,\n            borderColor: tokens.colorTransparentStrokeDisabled\n        }\n    },\n    '@media (forced-colors: active)': {\n        ':disabled, &[aria-disabled=\"true\"]': {\n            [`& ~ .${switchClassNames.indicator}`]: {\n                color: 'GrayText',\n                borderColor: 'GrayText'\n            },\n            [`& ~ .${switchClassNames.label}`]: {\n                color: 'GrayText'\n            }\n        },\n        ':hover': {\n            color: 'CanvasText'\n        },\n        ':hover:active': {\n            color: 'CanvasText'\n        },\n        ':enabled:checked:not([aria-disabled=\"true\"])': {\n            ':hover': {\n                [`& ~ .${switchClassNames.indicator}`]: {\n                    backgroundColor: 'Highlight',\n                    color: 'Canvas'\n                }\n            },\n            ':hover:active': {\n                [`& ~ .${switchClassNames.indicator}`]: {\n                    backgroundColor: 'Highlight',\n                    color: 'Canvas'\n                }\n            },\n            [`& ~ .${switchClassNames.indicator}`]: {\n                backgroundColor: 'Highlight',\n                color: 'Canvas'\n            }\n        }\n    }\n});\nconst useInputStyles = makeStyles({\n    before: {\n        right: 0,\n        top: 0\n    },\n    after: {\n        left: 0,\n        top: 0\n    },\n    above: {\n        bottom: 0,\n        height: `calc(${trackHeightMedium}px + ${tokens.spacingVerticalS})`,\n        width: '100%'\n    },\n    sizeSmall: {\n        width: `calc(${trackWidthSmall}px + 2 * ${tokens.spacingHorizontalS})`,\n        ':checked': {\n            [`& ~ .${switchClassNames.indicator}`]: {\n                '> *': {\n                    transform: `translateX(${trackWidthSmall - thumbSizeSmall - spaceBetweenThumbAndTrack}px)`\n                }\n            }\n        }\n    }\n});\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n    base: {\n        cursor: 'pointer',\n        // Use a (negative) margin to account for the difference between the track's height and the label's line height.\n        // This prevents the label from expanding the height of the switch, but preserves line height if the label wraps.\n        marginBottom: `calc((${trackHeightMedium}px - ${tokens.lineHeightBase300}) / 2)`,\n        marginTop: `calc((${trackHeightMedium}px - ${tokens.lineHeightBase300}) / 2)`,\n        padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`\n    },\n    sizeSmall: {\n        fontSize: tokens.fontSizeBase200,\n        lineHeight: tokens.lineHeightBase200,\n        marginBottom: `calc((${trackHeightSmall}px - ${tokens.lineHeightBase200}) / 2)`,\n        marginTop: `calc((${trackHeightSmall}px - ${tokens.lineHeightBase200}) / 2)`\n    },\n    above: {\n        paddingTop: tokens.spacingVerticalXS,\n        paddingBottom: tokens.spacingVerticalXS,\n        width: '100%'\n    },\n    after: {\n        paddingLeft: tokens.spacingHorizontalXS\n    },\n    before: {\n        paddingRight: tokens.spacingHorizontalXS\n    }\n});\n/**\n * Apply styling to the Switch slots based on the state\n */ export const useSwitchStyles_unstable = (state)=>{\n    'use no memo';\n    const rootBaseClassName = useRootBaseClassName();\n    const rootStyles = useRootStyles();\n    const indicatorBaseClassName = useIndicatorBaseClassName();\n    const indicatorStyles = useIndicatorStyles();\n    const inputBaseClassName = useInputBaseClassName();\n    const inputStyles = useInputStyles();\n    const labelStyles = useLabelStyles();\n    const { label, labelPosition, size } = state;\n    state.root.className = mergeClasses(switchClassNames.root, rootBaseClassName, labelPosition === 'above' && rootStyles.vertical, state.root.className);\n    state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorBaseClassName, label && labelPosition === 'above' && indicatorStyles.labelAbove, size === 'small' && indicatorStyles.sizeSmall, state.indicator.className);\n    state.input.className = mergeClasses(switchClassNames.input, inputBaseClassName, label && inputStyles[labelPosition], size === 'small' && inputStyles.sizeSmall, state.input.className);\n    if (state.label) {\n        state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, labelStyles[labelPosition], size === 'small' && labelStyles.sizeSmall, state.label.className);\n    }\n    return state;\n};\n"],"names":["createFocusOutlineStyle","tokens","__resetStyles","__styles","mergeClasses","switchClassNames","root","indicator","input","label","switchClassName","spaceBetweenThumbAndTrack","trackHeightMedium","trackWidthMedium","thumbSizeMedium","trackHeightSmall","trackWidthSmall","thumbSizeSmall","useRootBaseClassName","r","s","useRootStyles","vertical","Beiy3e4","d","useIndicatorBaseClassName","useIndicatorStyles","labelAbove","B6of3ja","sizeSmall","Be2twd7","Bqenvij","a9b677","useInputBaseClassName","useInputStyles","before","j35jbq","Bhzewxz","after","oyh7mz","above","B5kzvoi","oedwrj","useLabelStyles","base","Bceei9c","jrapky","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Bg96gwp","p","useSwitchStyles_unstable","state","rootBaseClassName","rootStyles","indicatorBaseClassName","indicatorStyles","inputBaseClassName","inputStyles","labelStyles","labelPosition","size","className"],"mappings":"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"}

package/lib-commonjs/components/Switch/useSwitchStyles.styles.raw.js

@@ -117,7 +117,7 @@ const useInputBaseClassName = (0, _react.makeResetStyles)({
         }
     },
     // Disabled (both checked and unchecked)
-    ':disabled': {
+    ':disabled, &[aria-disabled="true"]': {
         cursor: 'default',
         [`& ~ .${switchClassNames.indicator}`]: {
             color: _reacttheme.tokens.colorNeutralForegroundDisabled
@@ -128,7 +128,7 @@ const useInputBaseClassName = (0, _react.makeResetStyles)({
         }
     },
     // Enabled and unchecked
-    ':enabled:not(:checked)': {
+    ':enabled:not(:checked):not([aria-disabled="true"])': {
         [`& ~ .${switchClassNames.indicator}`]: {
             color: _reacttheme.tokens.colorNeutralStrokeAccessible,
             borderColor: _reacttheme.tokens.colorNeutralStrokeAccessible
@@ -150,7 +150,7 @@ const useInputBaseClassName = (0, _react.makeResetStyles)({
         }
     },
     // Enabled and checked
-    ':enabled:checked': {
+    ':enabled:checked:not([aria-disabled="true"])': {
         [`& ~ .${switchClassNames.indicator}`]: {
             backgroundColor: _reacttheme.tokens.colorCompoundBrandBackground,
             color: _reacttheme.tokens.colorNeutralForegroundInverted,
@@ -170,20 +170,20 @@ const useInputBaseClassName = (0, _react.makeResetStyles)({
         }
     },
     // Disabled and unchecked
-    ':disabled:not(:checked)': {
+    ':disabled:not(:checked), &[aria-disabled="true"]:not(:checked)': {
         [`& ~ .${switchClassNames.indicator}`]: {
             borderColor: _reacttheme.tokens.colorNeutralStrokeDisabled
         }
     },
     // Disabled and checked
-    ':disabled:checked': {
+    ':disabled:checked, &[aria-disabled="true"]:checked': {
         [`& ~ .${switchClassNames.indicator}`]: {
             backgroundColor: _reacttheme.tokens.colorNeutralBackgroundDisabled,
             borderColor: _reacttheme.tokens.colorTransparentStrokeDisabled
         }
     },
     '@media (forced-colors: active)': {
-        ':disabled': {
+        ':disabled, &[aria-disabled="true"]': {
             [`& ~ .${switchClassNames.indicator}`]: {
                 color: 'GrayText',
                 borderColor: 'GrayText'
@@ -198,7 +198,7 @@ const useInputBaseClassName = (0, _react.makeResetStyles)({
         ':hover:active': {
             color: 'CanvasText'
         },
-        ':enabled:checked': {
+        ':enabled:checked:not([aria-disabled="true"])': {
             ':hover': {
                 [`& ~ .${switchClassNames.indicator}`]: {
                     backgroundColor: 'Highlight',

package/lib-commonjs/components/Switch/useSwitchStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Switch/useSwitchStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SwitchSlots, SwitchState } from './Switch.types';\n\nexport const switchClassNames: SlotClassNames<SwitchSlots> = {\n  root: 'fui-Switch',\n  indicator: 'fui-Switch__indicator',\n  input: 'fui-Switch__input',\n  label: 'fui-Switch__label',\n};\n\n/**\n * @deprecated Use `switchClassNames.root` instead.\n */\nexport const switchClassName = switchClassNames.root;\n\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\n// Medium size dimensions\nconst trackHeightMedium = 20;\nconst trackWidthMedium = 40;\nconst thumbSizeMedium = trackHeightMedium - spaceBetweenThumbAndTrack;\n// Small size dimensions (from design mockup)\nconst trackHeightSmall = 16;\nconst trackWidthSmall = 32;\nconst thumbSizeSmall = trackHeightSmall - spaceBetweenThumbAndTrack;\n\nconst useRootBaseClassName = makeResetStyles({\n  alignItems: 'flex-start',\n  boxSizing: 'border-box',\n  display: 'inline-flex',\n  position: 'relative',\n\n  ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useRootStyles = makeStyles({\n  vertical: {\n    flexDirection: 'column',\n  },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\n  borderRadius: tokens.borderRadiusCircular,\n  border: '1px solid',\n  lineHeight: 0,\n  boxSizing: 'border-box',\n  fill: 'currentColor',\n  flexShrink: 0,\n  fontSize: `${thumbSizeMedium}px`,\n  height: `${trackHeightMedium}px`,\n  margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n  pointerEvents: 'none',\n  transitionDuration: tokens.durationNormal,\n  transitionTimingFunction: tokens.curveEasyEase,\n  transitionProperty: 'background, border, color',\n  width: `${trackWidthMedium}px`,\n\n  '@media screen and (prefers-reduced-motion: reduce)': {\n    transitionDuration: '0.01ms',\n  },\n\n  '@media (forced-colors: active)': {\n    color: 'CanvasText',\n    '> i': {\n      forcedColorAdjust: 'none',\n    },\n  },\n\n  '> *': {\n    transitionDuration: tokens.durationNormal,\n    transitionTimingFunction: tokens.curveEasyEase,\n    transitionProperty: 'transform',\n\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      transitionDuration: '0.01ms',\n    },\n  },\n});\n\nconst useIndicatorStyles = makeStyles({\n  labelAbove: {\n    marginTop: 0,\n  },\n  sizeSmall: {\n    fontSize: `${thumbSizeSmall}px`,\n    height: `${trackHeightSmall}px`,\n    width: `${trackWidthSmall}px`,\n  },\n});\n\nconst useInputBaseClassName = makeResetStyles({\n  boxSizing: 'border-box',\n  cursor: 'pointer',\n  height: '100%',\n  margin: 0,\n  opacity: 0,\n  position: 'absolute',\n\n  // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n  // This is done so that clicking on that \"empty space\" still toggles the switch.\n  width: `calc(${trackWidthMedium}px + 2 * ${tokens.spacingHorizontalS})`,\n\n  // Checked (both enabled and disabled)\n  ':checked': {\n    [`& ~ .${switchClassNames.indicator}`]: {\n      '> *': {\n        transform: `translateX(${trackWidthMedium - thumbSizeMedium - spaceBetweenThumbAndTrack}px)`,\n      },\n    },\n  },\n\n  // Disabled (both checked and unchecked)\n  ':disabled': {\n    cursor: 'default',\n\n    [`& ~ .${switchClassNames.indicator}`]: {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    [`& ~ .${switchClassNames.label}`]: {\n      cursor: 'default',\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n\n  // Enabled and unchecked\n  ':enabled:not(:checked)': {\n    [`& ~ .${switchClassNames.indicator}`]: {\n      color: tokens.colorNeutralStrokeAccessible,\n      borderColor: tokens.colorNeutralStrokeAccessible,\n    },\n\n    [`& ~ .${switchClassNames.label}`]: {\n      color: tokens.colorNeutralForeground1,\n    },\n\n    ':hover': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        color: tokens.colorNeutralStrokeAccessibleHover,\n        borderColor: tokens.colorNeutralStrokeAccessibleHover,\n      },\n    },\n\n    ':hover:active': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        color: tokens.colorNeutralStrokeAccessiblePressed,\n        borderColor: tokens.colorNeutralStrokeAccessiblePressed,\n      },\n    },\n  },\n\n  // Enabled and checked\n  ':enabled:checked': {\n    [`& ~ .${switchClassNames.indicator}`]: {\n      backgroundColor: tokens.colorCompoundBrandBackground,\n      color: tokens.colorNeutralForegroundInverted,\n      borderColor: tokens.colorTransparentStroke,\n    },\n\n    ':hover': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n        borderColor: tokens.colorTransparentStrokeInteractive,\n      },\n    },\n\n    ':hover:active': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n        borderColor: tokens.colorTransparentStrokeInteractive,\n      },\n    },\n  },\n\n  // Disabled and unchecked\n  ':disabled:not(:checked)': {\n    [`& ~ .${switchClassNames.indicator}`]: {\n      borderColor: tokens.colorNeutralStrokeDisabled,\n    },\n  },\n\n  // Disabled and checked\n  ':disabled:checked': {\n    [`& ~ .${switchClassNames.indicator}`]: {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      borderColor: tokens.colorTransparentStrokeDisabled,\n    },\n  },\n\n  '@media (forced-colors: active)': {\n    ':disabled': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        color: 'GrayText',\n        borderColor: 'GrayText',\n      },\n\n      [`& ~ .${switchClassNames.label}`]: {\n        color: 'GrayText',\n      },\n    },\n    ':hover': {\n      color: 'CanvasText',\n    },\n    ':hover:active': {\n      color: 'CanvasText',\n    },\n    ':enabled:checked': {\n      ':hover': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n          backgroundColor: 'Highlight',\n          color: 'Canvas',\n        },\n      },\n      ':hover:active': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n          backgroundColor: 'Highlight',\n          color: 'Canvas',\n        },\n      },\n      [`& ~ .${switchClassNames.indicator}`]: {\n        backgroundColor: 'Highlight',\n        color: 'Canvas',\n      },\n    },\n  },\n});\n\nconst useInputStyles = makeStyles({\n  before: {\n    right: 0,\n    top: 0,\n  },\n  after: {\n    left: 0,\n    top: 0,\n  },\n  above: {\n    bottom: 0,\n    height: `calc(${trackHeightMedium}px + ${tokens.spacingVerticalS})`,\n    width: '100%',\n  },\n  sizeSmall: {\n    width: `calc(${trackWidthSmall}px + 2 * ${tokens.spacingHorizontalS})`,\n    ':checked': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        '> *': {\n          transform: `translateX(${trackWidthSmall - thumbSizeSmall - spaceBetweenThumbAndTrack}px)`,\n        },\n      },\n    },\n  },\n});\n\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n  base: {\n    cursor: 'pointer',\n\n    // Use a (negative) margin to account for the difference between the track's height and the label's line height.\n    // This prevents the label from expanding the height of the switch, but preserves line height if the label wraps.\n    marginBottom: `calc((${trackHeightMedium}px - ${tokens.lineHeightBase300}) / 2)`,\n    marginTop: `calc((${trackHeightMedium}px - ${tokens.lineHeightBase300}) / 2)`,\n    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n  },\n  sizeSmall: {\n    fontSize: tokens.fontSizeBase200,\n    lineHeight: tokens.lineHeightBase200,\n    marginBottom: `calc((${trackHeightSmall}px - ${tokens.lineHeightBase200}) / 2)`,\n    marginTop: `calc((${trackHeightSmall}px - ${tokens.lineHeightBase200}) / 2)`,\n  },\n  above: {\n    paddingTop: tokens.spacingVerticalXS,\n    paddingBottom: tokens.spacingVerticalXS,\n    width: '100%',\n  },\n  after: {\n    paddingLeft: tokens.spacingHorizontalXS,\n  },\n  before: {\n    paddingRight: tokens.spacingHorizontalXS,\n  },\n});\n\n/**\n * Apply styling to the Switch slots based on the state\n */\nexport const useSwitchStyles_unstable = (state: SwitchState): SwitchState => {\n  'use no memo';\n\n  const rootBaseClassName = useRootBaseClassName();\n  const rootStyles = useRootStyles();\n  const indicatorBaseClassName = useIndicatorBaseClassName();\n  const indicatorStyles = useIndicatorStyles();\n  const inputBaseClassName = useInputBaseClassName();\n  const inputStyles = useInputStyles();\n  const labelStyles = useLabelStyles();\n\n  const { label, labelPosition, size } = state;\n\n  state.root.className = mergeClasses(\n    switchClassNames.root,\n    rootBaseClassName,\n    labelPosition === 'above' && rootStyles.vertical,\n    state.root.className,\n  );\n\n  state.indicator.className = mergeClasses(\n    switchClassNames.indicator,\n    indicatorBaseClassName,\n    label && labelPosition === 'above' && indicatorStyles.labelAbove,\n    size === 'small' && indicatorStyles.sizeSmall,\n    state.indicator.className,\n  );\n\n  state.input.className = mergeClasses(\n    switchClassNames.input,\n    inputBaseClassName,\n    label && inputStyles[labelPosition],\n    size === 'small' && inputStyles.sizeSmall,\n    state.input.className,\n  );\n\n  if (state.label) {\n    state.label.className = mergeClasses(\n      switchClassNames.label,\n      labelStyles.base,\n      labelStyles[labelPosition],\n      size === 'small' && labelStyles.sizeSmall,\n      state.label.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["createFocusOutlineStyle","tokens","makeResetStyles","makeStyles","mergeClasses","switchClassNames","root","indicator","input","label","switchClassName","spaceBetweenThumbAndTrack","trackHeightMedium","trackWidthMedium","thumbSizeMedium","trackHeightSmall","trackWidthSmall","thumbSizeSmall","useRootBaseClassName","alignItems","boxSizing","display","position","style","selector","useRootStyles","vertical","flexDirection","useIndicatorBaseClassName","borderRadius","borderRadiusCircular","border","lineHeight","fill","flexShrink","fontSize","height","margin","spacingVerticalS","spacingHorizontalS","pointerEvents","transitionDuration","durationNormal","transitionTimingFunction","curveEasyEase","transitionProperty","width","color","forcedColorAdjust","useIndicatorStyles","labelAbove","marginTop","sizeSmall","useInputBaseClassName","cursor","opacity","transform","colorNeutralForegroundDisabled","colorNeutralStrokeAccessible","borderColor","colorNeutralForeground1","colorNeutralStrokeAccessibleHover","colorNeutralStrokeAccessiblePressed","backgroundColor","colorCompoundBrandBackground","colorNeutralForegroundInverted","colorTransparentStroke","colorCompoundBrandBackgroundHover","colorTransparentStrokeInteractive","colorCompoundBrandBackgroundPressed","colorNeutralStrokeDisabled","colorNeutralBackgroundDisabled","colorTransparentStrokeDisabled","useInputStyles","before","right","top","after","left","above","bottom","useLabelStyles","base","marginBottom","lineHeightBase300","padding","fontSizeBase200","lineHeightBase200","paddingTop","spacingVerticalXS","paddingBottom","paddingLeft","spacingHorizontalXS","paddingRight","useSwitchStyles_unstable","state","rootBaseClassName","rootStyles","indicatorBaseClassName","indicatorStyles","inputBaseClassName","inputStyles","labelStyles","labelPosition","size","className"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Switch/useSwitchStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SwitchSlots, SwitchState } from './Switch.types';\n\nexport const switchClassNames: SlotClassNames<SwitchSlots> = {\n  root: 'fui-Switch',\n  indicator: 'fui-Switch__indicator',\n  input: 'fui-Switch__input',\n  label: 'fui-Switch__label',\n};\n\n/**\n * @deprecated Use `switchClassNames.root` instead.\n */\nexport const switchClassName = switchClassNames.root;\n\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\n// Medium size dimensions\nconst trackHeightMedium = 20;\nconst trackWidthMedium = 40;\nconst thumbSizeMedium = trackHeightMedium - spaceBetweenThumbAndTrack;\n// Small size dimensions (from design mockup)\nconst trackHeightSmall = 16;\nconst trackWidthSmall = 32;\nconst thumbSizeSmall = trackHeightSmall - spaceBetweenThumbAndTrack;\n\nconst useRootBaseClassName = makeResetStyles({\n  alignItems: 'flex-start',\n  boxSizing: 'border-box',\n  display: 'inline-flex',\n  position: 'relative',\n\n  ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useRootStyles = makeStyles({\n  vertical: {\n    flexDirection: 'column',\n  },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\n  borderRadius: tokens.borderRadiusCircular,\n  border: '1px solid',\n  lineHeight: 0,\n  boxSizing: 'border-box',\n  fill: 'currentColor',\n  flexShrink: 0,\n  fontSize: `${thumbSizeMedium}px`,\n  height: `${trackHeightMedium}px`,\n  margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n  pointerEvents: 'none',\n  transitionDuration: tokens.durationNormal,\n  transitionTimingFunction: tokens.curveEasyEase,\n  transitionProperty: 'background, border, color',\n  width: `${trackWidthMedium}px`,\n\n  '@media screen and (prefers-reduced-motion: reduce)': {\n    transitionDuration: '0.01ms',\n  },\n\n  '@media (forced-colors: active)': {\n    color: 'CanvasText',\n    '> i': {\n      forcedColorAdjust: 'none',\n    },\n  },\n\n  '> *': {\n    transitionDuration: tokens.durationNormal,\n    transitionTimingFunction: tokens.curveEasyEase,\n    transitionProperty: 'transform',\n\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      transitionDuration: '0.01ms',\n    },\n  },\n});\n\nconst useIndicatorStyles = makeStyles({\n  labelAbove: {\n    marginTop: 0,\n  },\n  sizeSmall: {\n    fontSize: `${thumbSizeSmall}px`,\n    height: `${trackHeightSmall}px`,\n    width: `${trackWidthSmall}px`,\n  },\n});\n\nconst useInputBaseClassName = makeResetStyles({\n  boxSizing: 'border-box',\n  cursor: 'pointer',\n  height: '100%',\n  margin: 0,\n  opacity: 0,\n  position: 'absolute',\n\n  // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n  // This is done so that clicking on that \"empty space\" still toggles the switch.\n  width: `calc(${trackWidthMedium}px + 2 * ${tokens.spacingHorizontalS})`,\n\n  // Checked (both enabled and disabled)\n  ':checked': {\n    [`& ~ .${switchClassNames.indicator}`]: {\n      '> *': {\n        transform: `translateX(${trackWidthMedium - thumbSizeMedium - spaceBetweenThumbAndTrack}px)`,\n      },\n    },\n  },\n\n  // Disabled (both checked and unchecked)\n  ':disabled, &[aria-disabled=\"true\"]': {\n    cursor: 'default',\n\n    [`& ~ .${switchClassNames.indicator}`]: {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    [`& ~ .${switchClassNames.label}`]: {\n      cursor: 'default',\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n\n  // Enabled and unchecked\n  ':enabled:not(:checked):not([aria-disabled=\"true\"])': {\n    [`& ~ .${switchClassNames.indicator}`]: {\n      color: tokens.colorNeutralStrokeAccessible,\n      borderColor: tokens.colorNeutralStrokeAccessible,\n    },\n\n    [`& ~ .${switchClassNames.label}`]: {\n      color: tokens.colorNeutralForeground1,\n    },\n\n    ':hover': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        color: tokens.colorNeutralStrokeAccessibleHover,\n        borderColor: tokens.colorNeutralStrokeAccessibleHover,\n      },\n    },\n\n    ':hover:active': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        color: tokens.colorNeutralStrokeAccessiblePressed,\n        borderColor: tokens.colorNeutralStrokeAccessiblePressed,\n      },\n    },\n  },\n\n  // Enabled and checked\n  ':enabled:checked:not([aria-disabled=\"true\"])': {\n    [`& ~ .${switchClassNames.indicator}`]: {\n      backgroundColor: tokens.colorCompoundBrandBackground,\n      color: tokens.colorNeutralForegroundInverted,\n      borderColor: tokens.colorTransparentStroke,\n    },\n\n    ':hover': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n        borderColor: tokens.colorTransparentStrokeInteractive,\n      },\n    },\n\n    ':hover:active': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n        borderColor: tokens.colorTransparentStrokeInteractive,\n      },\n    },\n  },\n\n  // Disabled and unchecked\n  ':disabled:not(:checked), &[aria-disabled=\"true\"]:not(:checked)': {\n    [`& ~ .${switchClassNames.indicator}`]: {\n      borderColor: tokens.colorNeutralStrokeDisabled,\n    },\n  },\n\n  // Disabled and checked\n  ':disabled:checked, &[aria-disabled=\"true\"]:checked': {\n    [`& ~ .${switchClassNames.indicator}`]: {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      borderColor: tokens.colorTransparentStrokeDisabled,\n    },\n  },\n\n  '@media (forced-colors: active)': {\n    ':disabled, &[aria-disabled=\"true\"]': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        color: 'GrayText',\n        borderColor: 'GrayText',\n      },\n\n      [`& ~ .${switchClassNames.label}`]: {\n        color: 'GrayText',\n      },\n    },\n    ':hover': {\n      color: 'CanvasText',\n    },\n    ':hover:active': {\n      color: 'CanvasText',\n    },\n    ':enabled:checked:not([aria-disabled=\"true\"])': {\n      ':hover': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n          backgroundColor: 'Highlight',\n          color: 'Canvas',\n        },\n      },\n      ':hover:active': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n          backgroundColor: 'Highlight',\n          color: 'Canvas',\n        },\n      },\n      [`& ~ .${switchClassNames.indicator}`]: {\n        backgroundColor: 'Highlight',\n        color: 'Canvas',\n      },\n    },\n  },\n});\n\nconst useInputStyles = makeStyles({\n  before: {\n    right: 0,\n    top: 0,\n  },\n  after: {\n    left: 0,\n    top: 0,\n  },\n  above: {\n    bottom: 0,\n    height: `calc(${trackHeightMedium}px + ${tokens.spacingVerticalS})`,\n    width: '100%',\n  },\n  sizeSmall: {\n    width: `calc(${trackWidthSmall}px + 2 * ${tokens.spacingHorizontalS})`,\n    ':checked': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        '> *': {\n          transform: `translateX(${trackWidthSmall - thumbSizeSmall - spaceBetweenThumbAndTrack}px)`,\n        },\n      },\n    },\n  },\n});\n\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n  base: {\n    cursor: 'pointer',\n\n    // Use a (negative) margin to account for the difference between the track's height and the label's line height.\n    // This prevents the label from expanding the height of the switch, but preserves line height if the label wraps.\n    marginBottom: `calc((${trackHeightMedium}px - ${tokens.lineHeightBase300}) / 2)`,\n    marginTop: `calc((${trackHeightMedium}px - ${tokens.lineHeightBase300}) / 2)`,\n    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n  },\n  sizeSmall: {\n    fontSize: tokens.fontSizeBase200,\n    lineHeight: tokens.lineHeightBase200,\n    marginBottom: `calc((${trackHeightSmall}px - ${tokens.lineHeightBase200}) / 2)`,\n    marginTop: `calc((${trackHeightSmall}px - ${tokens.lineHeightBase200}) / 2)`,\n  },\n  above: {\n    paddingTop: tokens.spacingVerticalXS,\n    paddingBottom: tokens.spacingVerticalXS,\n    width: '100%',\n  },\n  after: {\n    paddingLeft: tokens.spacingHorizontalXS,\n  },\n  before: {\n    paddingRight: tokens.spacingHorizontalXS,\n  },\n});\n\n/**\n * Apply styling to the Switch slots based on the state\n */\nexport const useSwitchStyles_unstable = (state: SwitchState): SwitchState => {\n  'use no memo';\n\n  const rootBaseClassName = useRootBaseClassName();\n  const rootStyles = useRootStyles();\n  const indicatorBaseClassName = useIndicatorBaseClassName();\n  const indicatorStyles = useIndicatorStyles();\n  const inputBaseClassName = useInputBaseClassName();\n  const inputStyles = useInputStyles();\n  const labelStyles = useLabelStyles();\n\n  const { label, labelPosition, size } = state;\n\n  state.root.className = mergeClasses(\n    switchClassNames.root,\n    rootBaseClassName,\n    labelPosition === 'above' && rootStyles.vertical,\n    state.root.className,\n  );\n\n  state.indicator.className = mergeClasses(\n    switchClassNames.indicator,\n    indicatorBaseClassName,\n    label && labelPosition === 'above' && indicatorStyles.labelAbove,\n    size === 'small' && indicatorStyles.sizeSmall,\n    state.indicator.className,\n  );\n\n  state.input.className = mergeClasses(\n    switchClassNames.input,\n    inputBaseClassName,\n    label && inputStyles[labelPosition],\n    size === 'small' && inputStyles.sizeSmall,\n    state.input.className,\n  );\n\n  if (state.label) {\n    state.label.className = mergeClasses(\n      switchClassNames.label,\n      labelStyles.base,\n      labelStyles[labelPosition],\n      size === 'small' && labelStyles.sizeSmall,\n      state.label.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["createFocusOutlineStyle","tokens","makeResetStyles","makeStyles","mergeClasses","switchClassNames","root","indicator","input","label","switchClassName","spaceBetweenThumbAndTrack","trackHeightMedium","trackWidthMedium","thumbSizeMedium","trackHeightSmall","trackWidthSmall","thumbSizeSmall","useRootBaseClassName","alignItems","boxSizing","display","position","style","selector","useRootStyles","vertical","flexDirection","useIndicatorBaseClassName","borderRadius","borderRadiusCircular","border","lineHeight","fill","flexShrink","fontSize","height","margin","spacingVerticalS","spacingHorizontalS","pointerEvents","transitionDuration","durationNormal","transitionTimingFunction","curveEasyEase","transitionProperty","width","color","forcedColorAdjust","useIndicatorStyles","labelAbove","marginTop","sizeSmall","useInputBaseClassName","cursor","opacity","transform","colorNeutralForegroundDisabled","colorNeutralStrokeAccessible","borderColor","colorNeutralForeground1","colorNeutralStrokeAccessibleHover","colorNeutralStrokeAccessiblePressed","backgroundColor","colorCompoundBrandBackground","colorNeutralForegroundInverted","colorTransparentStroke","colorCompoundBrandBackgroundHover","colorTransparentStrokeInteractive","colorCompoundBrandBackgroundPressed","colorNeutralStrokeDisabled","colorNeutralBackgroundDisabled","colorTransparentStrokeDisabled","useInputStyles","before","right","top","after","left","above","bottom","useLabelStyles","base","marginBottom","lineHeightBase300","padding","fontSizeBase200","lineHeightBase200","paddingTop","spacingVerticalXS","paddingBottom","paddingLeft","spacingHorizontalXS","paddingRight","useSwitchStyles_unstable","state","rootBaseClassName","rootStyles","indicatorBaseClassName","indicatorStyles","inputBaseClassName","inputStyles","labelStyles","labelPosition","size","className"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-switch",
-  "version": "9.5.4",
+  "version": "9.6.1",
   "description": "Fluent UI React Switch component.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -12,7 +12,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui/react-field": "^9.4.15",
+    "@fluentui/react-field": "^9.4.16",
     "@fluentui/react-icons": "^2.0.245",
     "@fluentui/react-jsx-runtime": "^9.4.1",
     "@fluentui/react-label": "^9.3.15",