@primer/react-brand 0.81.0 → 0.81.1-rc.019987d3

package/docs/forms/ToggleSwitch/index.md

@@ -64,6 +64,29 @@ render(Example)
 </Stack>
 ```
 
+### Status label
+
+Enable `hasStatusLabel` when space permits to make the current state easier to understand. The text appears before the track by default. Use `statusLabelPosition` to move it after the track, and `labels` to localize or reword it. The status text increases the control width.
+
+Custom status text supplements the setting label; it does not replace it. The switch exposes its state as on or off to assistive technology, so the setting label must make sense with on and off. For example, use "Make repository public" rather than "Repository visibility" with "Public" and "Private" status text.
+
+```jsx
+<Stack>
+  <FormControl>
+    <FormControl.Label>Status label at end</FormControl.Label>
+    <ToggleSwitch hasStatusLabel statusLabelPosition="end" defaultChecked />
+  </FormControl>
+  <FormControl>
+    <FormControl.Label>Custom status labels</FormControl.Label>
+    <ToggleSwitch hasStatusLabel labels={{on: 'Enabled', off: 'Disabled'}} />
+  </FormControl>
+  <FormControl>
+    <FormControl.Label>Without status label</FormControl.Label>
+    <ToggleSwitch />
+  </FormControl>
+</Stack>
+```
+
 ### Disabled
 
 ```jsx
@@ -99,27 +122,38 @@ render(Example)
 </Stack>
 ```
 
+## Accessibility
+
+`ToggleSwitch` exposes its state with `role="switch"` and `aria-checked`. Give it a descriptive setting label with `FormControl.Label` or `aria-labelledby`. The label describes the setting; status text does not replace it or change the switch's accessible name. The thumb position also communicates state, beyond color.
+
+Enable `hasStatusLabel` when space permits. The visible On/Off text is part of the switch's click target and stays visible in both sizes, light and dark modes, and forced-colors mode. Default On/Off text is hidden from assistive technology because `aria-checked` already exposes the state. With `hasStatusLabel`, custom `labels.on` and `labels.off` text becomes the accessible description. Immediate activation changes politely announce custom text; later controlled updates change the description without an announcement. Translated labels can repeat the state. Both labels reserve the same width to prevent layout shifts. In narrow containers, `FormControl` places the setting label above the switch so longer labels can wrap without horizontal scrolling.
+
+The default track border and enabled thumb each meet 3:1 contrast against adjacent colors in light and dark modes. ToggleSwitch uses existing Brand palette colors. Recheck contrast if you override its colors or place it on a custom background.
+
 ## Component Props
 
-| Name                | Type                                         | Default     | Description                                                                           |
-| ------------------- | -------------------------------------------- | ----------- | ------------------------------------------------------------------------------------- |
-| `checked`           | `boolean`                                    |             | Controlled on/off value.                                                              |
-| `defaultChecked`    | `boolean`                                    | `false`     | Initial uncontrolled value.                                                           |
-| `onChange`          | `(checked: boolean) => void`                 |             | Called once per accepted activation with the next value.                              |
-| `onClick`           | `React.MouseEventHandler<HTMLButtonElement>` |             | Activation callback receiving the button event.                                       |
-| `disabled`          | `boolean`                                    | `false`     | Blocks activation while retaining keyboard focusability.                              |
-| `loading`           | `boolean`                                    | `false`     | Displays pending feedback and exposes `aria-busy` without blocking interaction.       |
-| `size`              | `'small' \| 'medium'`                        | `'medium'`  | Alternative sizes.                                                                    |
-| `loadingLabel`      | `string`                                     | `'Loading'` | Localized loading announcement.                                                       |
-| `loadingLabelDelay` | `number`                                     | `2000`      | Announcement delay in milliseconds.                                                   |
-| `spinnerPosition`   | `'start' \| 'end'`                           | `'end'`     | Indicator placement beside the switch when no visible FormControl label is available. |
-| `aria-label`        | `string`                                     |             | Explicit accessible name matching equivalent visible labeling.                        |
-| `aria-labelledby`   | `string`                                     |             | IDs of visible labeling elements.                                                     |
-| `aria-describedby`  | `string`                                     |             | Description IDs, combined with FormControl and loading descriptions.                  |
-| `aria-invalid`      | React ARIA attribute                         |             | Validation state of the switch button.                                                |
-| `ref`               | `React.Ref<HTMLButtonElement>`               |             | Ref for the focusable button.                                                         |
-| `className`         | `string`                                     |             | Class applied to the component wrapper.                                               |
-| `data-testid`       | `string`                                     |             | Test ID applied to the component wrapper.                                             |
+| Name                  | Type                                         | Default      | Description                                                                           |
+| --------------------- | -------------------------------------------- | ------------ | ------------------------------------------------------------------------------------- |
+| `checked`             | `boolean`                                    |              | Controlled on/off value.                                                              |
+| `defaultChecked`      | `boolean`                                    | `false`      | Initial uncontrolled value.                                                           |
+| `onChange`            | `(checked: boolean) => void`                 |              | Called once per accepted activation with the next value.                              |
+| `onClick`             | `React.MouseEventHandler<HTMLButtonElement>` |              | Activation callback receiving the button event.                                       |
+| `disabled`            | `boolean`                                    | `false`      | Blocks activation while retaining keyboard focusability.                              |
+| `loading`             | `boolean`                                    | `false`      | Displays pending feedback and exposes `aria-busy` without blocking interaction.       |
+| `size`                | `'small' \| 'medium'`                        | `'medium'`   | Alternative sizes.                                                                    |
+| `loadingLabel`        | `string`                                     | `'Loading'`  | Localized loading announcement.                                                       |
+| `loadingLabelDelay`   | `number`                                     | `2000`       | Announcement delay in milliseconds.                                                   |
+| `spinnerPosition`     | `'start' \| 'end'`                           | `'end'`      | Indicator placement beside the switch when no visible FormControl label is available. |
+| `hasStatusLabel`      | `boolean`                                    | `false`      | Shows visible On/Off status text beside the track.                                    |
+| `statusLabelPosition` | `'start' \| 'end'`                           | `'start'`    | Status text placement relative to the track.                                          |
+| `labels`              | `{on?: string; off?: string}`                | `On` / `Off` | Visible status text for each state. Custom text describes the switch when shown.      |
+| `aria-label`          | `string`                                     |              | Explicit accessible name matching equivalent visible labeling.                        |
+| `aria-labelledby`     | `string`                                     |              | IDs of visible labeling elements.                                                     |
+| `aria-describedby`    | `string`                                     |              | Description IDs, combined with status, FormControl, and loading descriptions.         |
+| `aria-invalid`        | React ARIA attribute                         |              | Validation state of the switch button.                                                |
+| `ref`                 | `React.Ref<HTMLButtonElement>`               |              | Ref for the focusable button.                                                         |
+| `className`           | `string`                                     |              | Class applied to the component wrapper.                                               |
+| `data-testid`         | `string`                                     |              | Test ID applied to the component wrapper.                                             |
 
 Other standard button attributes, including `aria-controls`, `tabIndex`, keyboard handlers, and `style`, apply to the switch button.
 

package/docs/index.md

@@ -1,6 +1,6 @@
-# Primer Brand docs (v0.81.0)
+# Primer Brand docs (v0.81.1-rc.019987d3)
 
-These docs are bundled with `@primer/react-brand@0.81.0` and match your installed version.
+These docs are bundled with `@primer/react-brand@0.81.1-rc.019987d3` and match your installed version.
 
 New here? Start with [Getting started](getting-started/index.md) for installation, global
 stylesheet and font setup. Component directories are named after their import (e.g.

package/esm/forms/FormControl/FormControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormControl.d.ts","sourceRoot":"","sources":["../../../src/forms/FormControl/FormControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAK9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AACtD,OAAO,KAAK,EAAC,oBAAoB,EAAE,cAAc,EAAC,MAAM,KAAK,CAAA;AAY7D,OAAO,2GAA2G,CAAA;AAIlH,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC,WAAW,CAAC,GAAG;IACtD;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;OAIG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB;;OAEG;IACH,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;CACxC,CAAA;AAmMD,KAAK,qBAAqB,GAAG;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;IACvC,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,GAAG,SAAS,CAAC,gBAAgB,CAAC,CAAA;AA4C/B,KAAK,0BAA0B,GAAG;IAChC,QAAQ,EAAE,MAAM,CAAA;IAChB,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;CACxC,GAAG,SAAS,CAAC,eAAe,CAAC,CAAA;AA8B9B,KAAK,oBAAoB,GAAG,iBAAiB,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,CAAA;AAMzE;;;GAGG;AACH,eAAO,MAAM,WAAW,kGA3QrB,iBAAiB,CAAC,gBAAgB,CAAC;gIAgMnC,iBAAiB,CAAC,qBAAqB,CAAC;sEAqCuC,0BAA0B;mCA8B7D,oBAAoB;CAYjE,CAAA"}
+{"version":3,"file":"FormControl.d.ts","sourceRoot":"","sources":["../../../src/forms/FormControl/FormControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAK9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AACtD,OAAO,KAAK,EAAC,oBAAoB,EAAE,cAAc,EAAC,MAAM,KAAK,CAAA;AAY7D,OAAO,2GAA2G,CAAA;AAIlH,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC,WAAW,CAAC,GAAG;IACtD;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;OAIG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB;;OAEG;IACH,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;CACxC,CAAA;AAqMD,KAAK,qBAAqB,GAAG;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;IACvC,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,GAAG,SAAS,CAAC,gBAAgB,CAAC,CAAA;AA4C/B,KAAK,0BAA0B,GAAG;IAChC,QAAQ,EAAE,MAAM,CAAA;IAChB,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;CACxC,GAAG,SAAS,CAAC,eAAe,CAAC,CAAA;AA8B9B,KAAK,oBAAoB,GAAG,iBAAiB,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,CAAA;AAMzE;;;GAGG;AACH,eAAO,MAAM,WAAW,kGA7QrB,iBAAiB,CAAC,gBAAgB,CAAC;gIAkMnC,iBAAiB,CAAC,qBAAqB,CAAC;sEAqCuC,0BAA0B;mCA8B7D,oBAAoB;CAYjE,CAAA"}

package/esm/forms/FormControl/FormControl.js

@@ -17,10 +17,10 @@ import m from "react";
 import { jsx as h, jsxs as g } from "react/jsx-runtime";
 //#region src/forms/FormControl/FormControl.tsx
 var _ = ({ children: n, className: i, hasBorder: a, fullWidth: g, id: _, required: x, size: S = "medium", validationStatus: C, ...w }) => {
-	let T = t(_), E = m.Children.toArray(n), D = E.some((e) => m.isValidElement(e) && (e.type === o || e.type === u)), O = E.find((e) => m.isValidElement(e) && e.type === f), k = !!O, A = [E.some((e) => m.isValidElement(e) && e.type === b) && `${T}-hint`, E.some((e) => m.isValidElement(e) && e.type === y) && `${T}-validation`].filter(Boolean).join(" ") || void 0;
+	let T = t(_), E = m.Children.toArray(n), D = E.some((e) => m.isValidElement(e) && (e.type === o || e.type === u)), O = E.find((e) => m.isValidElement(e) && e.type === f), k = !!O, A = !!O?.props.hasStatusLabel, j = [E.some((e) => m.isValidElement(e) && e.type === b) && `${T}-hint`, E.some((e) => m.isValidElement(e) && e.type === y) && `${T}-validation`].filter(Boolean).join(" ") || void 0;
 	return /* @__PURE__ */ h("section", {
 		id: `FormControl--${T}`,
-		className: e(p.FormControl, g && p["FormControl--fullWidth"], D && p["FormControl--checkbox"], k && p["FormControl--toggle-switch"], a && p["FormControl--border"], i),
+		className: e(p.FormControl, g && p["FormControl--fullWidth"], D && p["FormControl--checkbox"], k && p["FormControl--toggle-switch"], A && p["FormControl--toggle-switch-with-status-label"], a && p["FormControl--border"], i),
 		...w,
 		children: m.Children.map(n, (t) => {
 			if (!m.isValidElement(t)) return t;
@@ -34,7 +34,7 @@ var _ = ({ children: n, className: i, hasBorder: a, fullWidth: g, id: _, require
 					validationStatus: n.props.validationStatus || C,
 					fullWidth: g,
 					size: S,
-					"aria-describedby": A
+					"aria-describedby": j
 				});
 			}
 			if (t.type === s) {
@@ -47,7 +47,7 @@ var _ = ({ children: n, className: i, hasBorder: a, fullWidth: g, id: _, require
 					validationStatus: n.props.validationStatus || C,
 					fullWidth: g,
 					size: S,
-					"aria-describedby": A
+					"aria-describedby": j
 				});
 			}
 			if (t.type === l) {
@@ -60,7 +60,7 @@ var _ = ({ children: n, className: i, hasBorder: a, fullWidth: g, id: _, require
 					validationStatus: n.props.validationStatus || C,
 					fullWidth: g,
 					size: S,
-					"aria-describedby": A
+					"aria-describedby": j
 				});
 			}
 			if (t.type === o) {
@@ -71,7 +71,7 @@ var _ = ({ children: n, className: i, hasBorder: a, fullWidth: g, id: _, require
 					name: n.props.name || T,
 					required: n.props.required || x,
 					validationStatus: n.props.validationStatus || C,
-					"aria-describedby": A
+					"aria-describedby": j
 				});
 			}
 			if (t.type === u) {
@@ -81,11 +81,11 @@ var _ = ({ children: n, className: i, hasBorder: a, fullWidth: g, id: _, require
 					id: T,
 					name: n.props.name,
 					required: n.props.required || x,
-					"aria-describedby": A
+					"aria-describedby": j
 				});
 			}
 			if (t.type === f) {
-				let n = t, r = [n.props["aria-describedby"], A].filter(Boolean).join(" ");
+				let n = t, r = [n.props["aria-describedby"], j].filter(Boolean).join(" ");
 				return m.cloneElement(n, {
 					className: e(p["FormControl-control--toggle-switch"], n.props.className),
 					id: T,

package/esm/forms/FormControl/FormControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormControl.js","names":[],"sources":["../../../src/forms/FormControl/FormControl.tsx"],"sourcesContent":["import React, {PropsWithChildren} from 'react'\nimport {useId} from '../../hooks/useId'\nimport {clsx} from 'clsx'\nimport {AlertFillIcon, CheckCircleFillIcon} from '@primer/octicons-react'\n\nimport type {BaseProps} from '../../component-helpers'\nimport type {FormValidationStatus, FormInputSizes} from '../'\n\nimport {Checkbox} from '../Checkbox'\nimport {Select} from '../Select'\nimport {TextInput} from '../TextInput'\nimport {Textarea} from '../Textarea'\nimport {Radio} from '../Radio'\nimport {ToggleSwitch} from '../ToggleSwitch'\nimport type {ToggleSwitchInternalProps} from '../ToggleSwitch/ToggleSwitch'\nimport {Spinner} from '../../Spinner/Spinner'\nimport {Text} from '../../Text'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css'\nimport styles from './FormControl.module.css'\nimport toggleSwitchStyles from '../ToggleSwitch/ToggleSwitch.module.css'\n\nexport type FormControlProps = BaseProps<HTMLElement> & {\n  /**\n   * Apply a decorative border to the form control.\n   */\n  hasBorder?: boolean\n  /**\n   * Applies full width styling.\n   */\n  fullWidth?: boolean\n  /**\n   * A unique identifier for the form control.\n   * This is used to associate the form control with its associated label.\n   * If an id is not provided, a unique id will be generated.\n   */\n  id?: string\n  /**\n   * Applies required styling to the label and input.\n   */\n  required?: boolean\n  /**\n   * Alternative sizes for inputs and labels.\n   */\n  size?: FormInputSizes\n  /**\n   * Provides contextual validation feedback to all children, showing relevant messaging where applicable.\n   */\n  validationStatus?: FormValidationStatus\n}\n\n/**\n * The Checkbox and the Radio components both use the trick of using a <label> to render the visual control,\n * and visually hiding the <input>. This means that, when you add a FormControl.Label alongside your\n * Checkbox/Radio, the <input> technically has two <label> elements associated with it.\n * That doesn't appear to be a problem (it's valid HTML and NVDA announces it correctly) but it does annoy\n * our Storybook Axe tests because they only seem to look at one of the labels.\n * To fix this, we recommend that the FormControl.Label always appears before the Checkbox/Radio in the DOM,\n * even though it visually appears after the Checkbox/Radio, as this keeps Storybook Axe happy.\n */\n\nconst Root = ({\n  children,\n  className,\n  hasBorder,\n  fullWidth,\n  id,\n  required,\n  size = 'medium',\n  validationStatus,\n  ...rest\n}: PropsWithChildren<FormControlProps>) => {\n  const uniqueId = useId(id)\n  const childrenArr = React.Children.toArray(children)\n\n  const isCheckboxOrRadio = childrenArr.some(\n    child => React.isValidElement(child) && (child.type === Checkbox || child.type === Radio),\n  )\n  const toggleSwitchElement = childrenArr.find(child => React.isValidElement(child) && child.type === ToggleSwitch) as\n    | React.ReactElement<ToggleSwitchInternalProps>\n    | undefined\n  const isToggleSwitch = Boolean(toggleSwitchElement)\n  const describedBy =\n    [\n      childrenArr.some(child => React.isValidElement(child) && child.type === FormControlHint) && `${uniqueId}-hint`,\n      childrenArr.some(child => React.isValidElement(child) && child.type === FormControlValidation) &&\n        `${uniqueId}-validation`,\n    ]\n      .filter(Boolean)\n      .join(' ') || undefined\n\n  return (\n    <section\n      id={`FormControl--${uniqueId}`}\n      className={clsx(\n        styles.FormControl,\n        fullWidth && styles[`FormControl--fullWidth`],\n        isCheckboxOrRadio && styles['FormControl--checkbox'],\n        isToggleSwitch && styles['FormControl--toggle-switch'],\n        hasBorder && styles['FormControl--border'],\n        className,\n      )}\n      {...rest}\n    >\n      {React.Children.map(children, child => {\n        if (!React.isValidElement(child)) return child\n\n        if (child.type === TextInput) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof TextInput>>\n          return React.cloneElement(element, {\n            className: clsx(element.props.className),\n            id: uniqueId,\n            name: element.props.name || uniqueId,\n            required: element.props.required || required,\n            validationStatus: element.props.validationStatus || validationStatus,\n            fullWidth,\n            size,\n            'aria-describedby': describedBy,\n          })\n        }\n\n        if (child.type === Textarea) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof Textarea>>\n          return React.cloneElement(element, {\n            className: clsx(element.props.className),\n            id: uniqueId,\n            name: element.props.name || uniqueId,\n            required: element.props.required || required,\n            validationStatus: element.props.validationStatus || validationStatus,\n            fullWidth,\n            size,\n            'aria-describedby': describedBy,\n          })\n        }\n\n        if (child.type === Select) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof Select>>\n          return React.cloneElement(element, {\n            className: clsx(element.props.className),\n            id: uniqueId,\n            name: element.props.name || uniqueId,\n            required: element.props.required || required,\n            validationStatus: element.props.validationStatus || validationStatus,\n            fullWidth,\n            size,\n            'aria-describedby': describedBy,\n          })\n        }\n\n        if (child.type === Checkbox) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof Checkbox>>\n          return React.cloneElement(element, {\n            className: clsx(element.props.className, styles['FormControl-control--checkbox']),\n            id: uniqueId,\n            name: element.props.name || uniqueId,\n            required: element.props.required || required,\n            validationStatus: element.props.validationStatus || validationStatus,\n            'aria-describedby': describedBy,\n          })\n        }\n\n        if (child.type === Radio) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof Radio>>\n          return React.cloneElement(element, {\n            className: clsx(isCheckboxOrRadio && styles['FormControl-control--radio'], element.props.className),\n            id: uniqueId,\n            name: element.props.name,\n            required: element.props.required || required,\n            'aria-describedby': describedBy,\n          })\n        }\n\n        if (child.type === ToggleSwitch) {\n          const element = child as React.ReactElement<ToggleSwitchInternalProps>\n          const descriptions = [element.props['aria-describedby'], describedBy].filter(Boolean).join(' ')\n          return React.cloneElement(element, {\n            className: clsx(styles['FormControl-control--toggle-switch'], element.props.className),\n            id: uniqueId,\n            toggleSwitchSpinnerInLabel: childrenArr.some(\n              labelChild =>\n                React.isValidElement<React.ComponentProps<typeof FormControlLabel>>(labelChild) &&\n                labelChild.type === FormControlLabel &&\n                !labelChild.props.visuallyHidden,\n            ),\n            'aria-describedby': descriptions ? [...new Set(descriptions.split(/\\s+/))].join(' ') : undefined,\n            'aria-invalid': element.props['aria-invalid'] ?? (validationStatus === 'error' ? true : undefined),\n          })\n        }\n\n        if (child.type === FormControlLabel) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof FormControlLabel>>\n          return React.cloneElement(element, {\n            className: clsx(\n              isCheckboxOrRadio && styles['FormControl-label--checkbox'],\n              isToggleSwitch && styles['FormControl-label--toggle-switch'],\n              element.props.className,\n            ),\n            htmlFor: uniqueId,\n            children:\n              toggleSwitchElement?.props.loading && !element.props.visuallyHidden\n                ? [\n                    ...React.Children.toArray(element.props.children),\n                    <span\n                      key=\"toggleSwitch-spinner\"\n                      aria-hidden=\"true\"\n                      className={styles['FormControl-toggleSwitch-spinnerSlot']}\n                    >\n                      <Spinner\n                        size=\"small\"\n                        accessibleLabel={null}\n                        className={toggleSwitchStyles['ToggleSwitch-spinner']}\n                        data-testid={ToggleSwitch.testIds.spinner}\n                      />\n                    </span>,\n                  ]\n                : element.props.children,\n            required: isToggleSwitch ? false : required,\n            validationStatus,\n            size,\n            showRequiredIndicator: isCheckboxOrRadio ? false : element.props.showRequiredIndicator,\n          })\n        }\n\n        if (child.type === FormControlValidation) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof FormControlValidation>>\n          return React.cloneElement(element, {\n            validationStatus,\n            id: `${uniqueId}-validation`,\n          })\n        }\n\n        if (child.type === FormControlHint) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof FormControlHint>>\n          return React.cloneElement(element, {\n            id: `${uniqueId}-hint`,\n          })\n        }\n\n        return child\n      })}\n    </section>\n  )\n}\n\ntype FormControlLabelProps = {\n  htmlFor?: string\n  required?: boolean\n  showRequiredIndicator?: boolean\n  size?: FormInputSizes\n  validationStatus?: FormValidationStatus\n  visuallyHidden?: boolean\n} & BaseProps<HTMLLabelElement>\n\nconst FormControlLabel = ({\n  children,\n  className,\n  htmlFor,\n  required,\n  showRequiredIndicator = true,\n  size = 'medium',\n  validationStatus,\n  visuallyHidden,\n  ...rest\n}: PropsWithChildren<FormControlLabelProps>) => {\n  return (\n    <label\n      htmlFor={htmlFor}\n      className={clsx(\n        styles['FormControl-label'],\n        validationStatus && styles[`FormControl-label--${validationStatus}`],\n        styles[`FormControl-label--${size}`],\n        visuallyHidden && styles['FormControl-label--visually-hidden'],\n        className,\n      )}\n      {...rest}\n    >\n      {React.Children.map(children, child => {\n        if (React.isValidElement<FormControlHintProps>(child) && child.type === FormControlHint) {\n          return React.cloneElement(child, {\n            className: clsx(styles['FormControl--visible'], child.props.className),\n          })\n        }\n        return child\n      })}\n\n      {required && showRequiredIndicator && (\n        <span className={styles['FormControl-label-required']} aria-hidden>\n          {' '}\n          *\n        </span>\n      )}\n    </label>\n  )\n}\n\ntype FormControlValidationProps = {\n  children: string\n  validationStatus?: FormValidationStatus\n} & BaseProps<HTMLSpanElement>\n\nconst FormControlValidation = ({children, validationStatus, className, ...props}: FormControlValidationProps) => {\n  return (\n    <Text\n      as=\"span\"\n      size=\"100\"\n      className={clsx(\n        styles['FormControl-validation'],\n        validationStatus && styles['FormControl-validation--animate-in'],\n        validationStatus && styles[`FormControl-validation--${validationStatus}`],\n        className,\n      )}\n      {...props}\n    >\n      {validationStatus === 'error' && (\n        <span className={styles['FormControl-validation-error-icon']}>\n          <AlertFillIcon />\n        </span>\n      )}\n      {validationStatus === 'success' && (\n        <span className={styles['FormControl-validation-success-icon']}>\n          <CheckCircleFillIcon />\n        </span>\n      )}\n      {children}\n    </Text>\n  )\n}\n\ntype FormControlHintProps = PropsWithChildren<BaseProps<HTMLSpanElement>>\n\nconst FormControlHint = ({className, ...rest}: FormControlHintProps) => {\n  return <Text as=\"span\" size=\"100\" variant=\"muted\" className={clsx(styles['FormControl-hint'], className)} {...rest} />\n}\n\n/**\n * FormControl\n * {@link https://primer.style/brand/components/FormControl/ See usage examples}.\n */\nexport const FormControl = Object.assign(Root, {\n  Label: FormControlLabel,\n  Validation: FormControlValidation,\n  Hint: FormControlHint,\n})\n"],"mappings":"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"}
+{"version":3,"file":"FormControl.js","names":[],"sources":["../../../src/forms/FormControl/FormControl.tsx"],"sourcesContent":["import React, {PropsWithChildren} from 'react'\nimport {useId} from '../../hooks/useId'\nimport {clsx} from 'clsx'\nimport {AlertFillIcon, CheckCircleFillIcon} from '@primer/octicons-react'\n\nimport type {BaseProps} from '../../component-helpers'\nimport type {FormValidationStatus, FormInputSizes} from '../'\n\nimport {Checkbox} from '../Checkbox'\nimport {Select} from '../Select'\nimport {TextInput} from '../TextInput'\nimport {Textarea} from '../Textarea'\nimport {Radio} from '../Radio'\nimport {ToggleSwitch} from '../ToggleSwitch'\nimport type {ToggleSwitchInternalProps} from '../ToggleSwitch/ToggleSwitch'\nimport {Spinner} from '../../Spinner/Spinner'\nimport {Text} from '../../Text'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css'\nimport styles from './FormControl.module.css'\nimport toggleSwitchStyles from '../ToggleSwitch/ToggleSwitch.module.css'\n\nexport type FormControlProps = BaseProps<HTMLElement> & {\n  /**\n   * Apply a decorative border to the form control.\n   */\n  hasBorder?: boolean\n  /**\n   * Applies full width styling.\n   */\n  fullWidth?: boolean\n  /**\n   * A unique identifier for the form control.\n   * This is used to associate the form control with its associated label.\n   * If an id is not provided, a unique id will be generated.\n   */\n  id?: string\n  /**\n   * Applies required styling to the label and input.\n   */\n  required?: boolean\n  /**\n   * Alternative sizes for inputs and labels.\n   */\n  size?: FormInputSizes\n  /**\n   * Provides contextual validation feedback to all children, showing relevant messaging where applicable.\n   */\n  validationStatus?: FormValidationStatus\n}\n\n/**\n * The Checkbox and the Radio components both use the trick of using a <label> to render the visual control,\n * and visually hiding the <input>. This means that, when you add a FormControl.Label alongside your\n * Checkbox/Radio, the <input> technically has two <label> elements associated with it.\n * That doesn't appear to be a problem (it's valid HTML and NVDA announces it correctly) but it does annoy\n * our Storybook Axe tests because they only seem to look at one of the labels.\n * To fix this, we recommend that the FormControl.Label always appears before the Checkbox/Radio in the DOM,\n * even though it visually appears after the Checkbox/Radio, as this keeps Storybook Axe happy.\n */\n\nconst Root = ({\n  children,\n  className,\n  hasBorder,\n  fullWidth,\n  id,\n  required,\n  size = 'medium',\n  validationStatus,\n  ...rest\n}: PropsWithChildren<FormControlProps>) => {\n  const uniqueId = useId(id)\n  const childrenArr = React.Children.toArray(children)\n\n  const isCheckboxOrRadio = childrenArr.some(\n    child => React.isValidElement(child) && (child.type === Checkbox || child.type === Radio),\n  )\n  const toggleSwitchElement = childrenArr.find(child => React.isValidElement(child) && child.type === ToggleSwitch) as\n    | React.ReactElement<ToggleSwitchInternalProps>\n    | undefined\n  const isToggleSwitch = Boolean(toggleSwitchElement)\n  const hasToggleSwitchStatusLabel = Boolean(toggleSwitchElement?.props.hasStatusLabel)\n  const describedBy =\n    [\n      childrenArr.some(child => React.isValidElement(child) && child.type === FormControlHint) && `${uniqueId}-hint`,\n      childrenArr.some(child => React.isValidElement(child) && child.type === FormControlValidation) &&\n        `${uniqueId}-validation`,\n    ]\n      .filter(Boolean)\n      .join(' ') || undefined\n\n  return (\n    <section\n      id={`FormControl--${uniqueId}`}\n      className={clsx(\n        styles.FormControl,\n        fullWidth && styles[`FormControl--fullWidth`],\n        isCheckboxOrRadio && styles['FormControl--checkbox'],\n        isToggleSwitch && styles['FormControl--toggle-switch'],\n        hasToggleSwitchStatusLabel && styles['FormControl--toggle-switch-with-status-label'],\n        hasBorder && styles['FormControl--border'],\n        className,\n      )}\n      {...rest}\n    >\n      {React.Children.map(children, child => {\n        if (!React.isValidElement(child)) return child\n\n        if (child.type === TextInput) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof TextInput>>\n          return React.cloneElement(element, {\n            className: clsx(element.props.className),\n            id: uniqueId,\n            name: element.props.name || uniqueId,\n            required: element.props.required || required,\n            validationStatus: element.props.validationStatus || validationStatus,\n            fullWidth,\n            size,\n            'aria-describedby': describedBy,\n          })\n        }\n\n        if (child.type === Textarea) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof Textarea>>\n          return React.cloneElement(element, {\n            className: clsx(element.props.className),\n            id: uniqueId,\n            name: element.props.name || uniqueId,\n            required: element.props.required || required,\n            validationStatus: element.props.validationStatus || validationStatus,\n            fullWidth,\n            size,\n            'aria-describedby': describedBy,\n          })\n        }\n\n        if (child.type === Select) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof Select>>\n          return React.cloneElement(element, {\n            className: clsx(element.props.className),\n            id: uniqueId,\n            name: element.props.name || uniqueId,\n            required: element.props.required || required,\n            validationStatus: element.props.validationStatus || validationStatus,\n            fullWidth,\n            size,\n            'aria-describedby': describedBy,\n          })\n        }\n\n        if (child.type === Checkbox) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof Checkbox>>\n          return React.cloneElement(element, {\n            className: clsx(element.props.className, styles['FormControl-control--checkbox']),\n            id: uniqueId,\n            name: element.props.name || uniqueId,\n            required: element.props.required || required,\n            validationStatus: element.props.validationStatus || validationStatus,\n            'aria-describedby': describedBy,\n          })\n        }\n\n        if (child.type === Radio) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof Radio>>\n          return React.cloneElement(element, {\n            className: clsx(isCheckboxOrRadio && styles['FormControl-control--radio'], element.props.className),\n            id: uniqueId,\n            name: element.props.name,\n            required: element.props.required || required,\n            'aria-describedby': describedBy,\n          })\n        }\n\n        if (child.type === ToggleSwitch) {\n          const element = child as React.ReactElement<ToggleSwitchInternalProps>\n          const descriptions = [element.props['aria-describedby'], describedBy].filter(Boolean).join(' ')\n          return React.cloneElement(element, {\n            className: clsx(styles['FormControl-control--toggle-switch'], element.props.className),\n            id: uniqueId,\n            toggleSwitchSpinnerInLabel: childrenArr.some(\n              labelChild =>\n                React.isValidElement<React.ComponentProps<typeof FormControlLabel>>(labelChild) &&\n                labelChild.type === FormControlLabel &&\n                !labelChild.props.visuallyHidden,\n            ),\n            'aria-describedby': descriptions ? [...new Set(descriptions.split(/\\s+/))].join(' ') : undefined,\n            'aria-invalid': element.props['aria-invalid'] ?? (validationStatus === 'error' ? true : undefined),\n          })\n        }\n\n        if (child.type === FormControlLabel) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof FormControlLabel>>\n          return React.cloneElement(element, {\n            className: clsx(\n              isCheckboxOrRadio && styles['FormControl-label--checkbox'],\n              isToggleSwitch && styles['FormControl-label--toggle-switch'],\n              element.props.className,\n            ),\n            htmlFor: uniqueId,\n            children:\n              toggleSwitchElement?.props.loading && !element.props.visuallyHidden\n                ? [\n                    ...React.Children.toArray(element.props.children),\n                    <span\n                      key=\"toggleSwitch-spinner\"\n                      aria-hidden=\"true\"\n                      className={styles['FormControl-toggleSwitch-spinnerSlot']}\n                    >\n                      <Spinner\n                        size=\"small\"\n                        accessibleLabel={null}\n                        className={toggleSwitchStyles['ToggleSwitch-spinner']}\n                        data-testid={ToggleSwitch.testIds.spinner}\n                      />\n                    </span>,\n                  ]\n                : element.props.children,\n            required: isToggleSwitch ? false : required,\n            validationStatus,\n            size,\n            showRequiredIndicator: isCheckboxOrRadio ? false : element.props.showRequiredIndicator,\n          })\n        }\n\n        if (child.type === FormControlValidation) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof FormControlValidation>>\n          return React.cloneElement(element, {\n            validationStatus,\n            id: `${uniqueId}-validation`,\n          })\n        }\n\n        if (child.type === FormControlHint) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof FormControlHint>>\n          return React.cloneElement(element, {\n            id: `${uniqueId}-hint`,\n          })\n        }\n\n        return child\n      })}\n    </section>\n  )\n}\n\ntype FormControlLabelProps = {\n  htmlFor?: string\n  required?: boolean\n  showRequiredIndicator?: boolean\n  size?: FormInputSizes\n  validationStatus?: FormValidationStatus\n  visuallyHidden?: boolean\n} & BaseProps<HTMLLabelElement>\n\nconst FormControlLabel = ({\n  children,\n  className,\n  htmlFor,\n  required,\n  showRequiredIndicator = true,\n  size = 'medium',\n  validationStatus,\n  visuallyHidden,\n  ...rest\n}: PropsWithChildren<FormControlLabelProps>) => {\n  return (\n    <label\n      htmlFor={htmlFor}\n      className={clsx(\n        styles['FormControl-label'],\n        validationStatus && styles[`FormControl-label--${validationStatus}`],\n        styles[`FormControl-label--${size}`],\n        visuallyHidden && styles['FormControl-label--visually-hidden'],\n        className,\n      )}\n      {...rest}\n    >\n      {React.Children.map(children, child => {\n        if (React.isValidElement<FormControlHintProps>(child) && child.type === FormControlHint) {\n          return React.cloneElement(child, {\n            className: clsx(styles['FormControl--visible'], child.props.className),\n          })\n        }\n        return child\n      })}\n\n      {required && showRequiredIndicator && (\n        <span className={styles['FormControl-label-required']} aria-hidden>\n          {' '}\n          *\n        </span>\n      )}\n    </label>\n  )\n}\n\ntype FormControlValidationProps = {\n  children: string\n  validationStatus?: FormValidationStatus\n} & BaseProps<HTMLSpanElement>\n\nconst FormControlValidation = ({children, validationStatus, className, ...props}: FormControlValidationProps) => {\n  return (\n    <Text\n      as=\"span\"\n      size=\"100\"\n      className={clsx(\n        styles['FormControl-validation'],\n        validationStatus && styles['FormControl-validation--animate-in'],\n        validationStatus && styles[`FormControl-validation--${validationStatus}`],\n        className,\n      )}\n      {...props}\n    >\n      {validationStatus === 'error' && (\n        <span className={styles['FormControl-validation-error-icon']}>\n          <AlertFillIcon />\n        </span>\n      )}\n      {validationStatus === 'success' && (\n        <span className={styles['FormControl-validation-success-icon']}>\n          <CheckCircleFillIcon />\n        </span>\n      )}\n      {children}\n    </Text>\n  )\n}\n\ntype FormControlHintProps = PropsWithChildren<BaseProps<HTMLSpanElement>>\n\nconst FormControlHint = ({className, ...rest}: FormControlHintProps) => {\n  return <Text as=\"span\" size=\"100\" variant=\"muted\" className={clsx(styles['FormControl-hint'], className)} {...rest} />\n}\n\n/**\n * FormControl\n * {@link https://primer.style/brand/components/FormControl/ See usage examples}.\n */\nexport const FormControl = Object.assign(Root, {\n  Label: FormControlLabel,\n  Validation: FormControlValidation,\n  Hint: FormControlHint,\n})\n"],"mappings":"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"}

package/esm/forms/FormControl/FormControl.module-B7McDwHm.css

@@ -0,0 +1 @@
+.Primer_Brand__FormControl-module__FormControl___xyCI6{font-family:var(--brand-body-fontFamily);gap:var(--base-size-8);flex-direction:column;display:inline-flex}.Primer_Brand__FormControl-module__FormControl--fullWidth____kgvY{width:100%}.Primer_Brand__FormControl-module__FormControl--checkbox___bF4ig{grid-template-columns:auto 1fr;display:grid}.Primer_Brand__FormControl-module__FormControl--toggle-switch___HomKh{grid-column-gap:var(--brand-ToggleSwitch-label-gap);-moz-column-gap:var(--brand-ToggleSwitch-label-gap);column-gap:var(--brand-ToggleSwitch-label-gap);grid-template-columns:auto minmax(0,1fr);align-items:center;display:grid}.Primer_Brand__FormControl-module__FormControl-control--toggle-switch___pwbrT{grid-area:1/1;align-self:start}.Primer_Brand__FormControl-module__FormControl-label--toggle-switch____nCka{cursor:pointer;word-wrap:anywhere;grid-area:1/2;min-width:0}.Primer_Brand__FormControl-module__FormControl--toggle-switch-with-status-label___dZbot{flex-flow:row-reverse wrap;justify-content:flex-end;display:flex}.Primer_Brand__FormControl-module__FormControl--toggle-switch-with-status-label___dZbot .Primer_Brand__FormControl-module__FormControl-label--toggle-switch____nCka:not(.Primer_Brand__FormControl-module__FormControl-label--visually-hidden___1ZVMo){min-inline-size:min(100%, var(--base-size-96));flex:1 1 0;order:0}.Primer_Brand__FormControl-module__FormControl--toggle-switch-with-status-label___dZbot .Primer_Brand__FormControl-module__FormControl-control--toggle-switch___pwbrT{flex:0 auto;order:1;min-inline-size:0;max-inline-size:100%}.Primer_Brand__FormControl-module__FormControl--toggle-switch-with-status-label___dZbot .Primer_Brand__FormControl-module__FormControl-hint___DmKlt,.Primer_Brand__FormControl-module__FormControl--toggle-switch-with-status-label___dZbot .Primer_Brand__FormControl-module__FormControl-validation___GOPld{flex-basis:100%;order:2}.Primer_Brand__FormControl-module__FormControl-label--medium___bj84g.Primer_Brand__FormControl-module__FormControl-label--toggle-switch____nCka{font-size:var(--brand-ToggleSwitch-label-fontSize);line-height:max(var(--brand-ToggleSwitch-label-lineHeight), var(--brand-ToggleSwitch-target-minHeight))}.Primer_Brand__FormControl-module__FormControl-toggleSwitch-spinnerSlot___WwrPk{width:var(--brand-ToggleSwitch-loading-size);height:var(--brand-ToggleSwitch-loading-size);vertical-align:middle;pointer-events:none;justify-content:center;align-items:center;margin-inline-start:var(--brand-ToggleSwitch-loading-gap);display:inline-flex}.Primer_Brand__FormControl-module__FormControl--border___JkgNP{border:1px solid var(--brand-control-color-border-default);border-radius:var(--brand-borderRadius-medium);padding:var(--base-size-12)}.Primer_Brand__FormControl-module__FormControl-label____oJE0{color:var(--brand-color-text-default);font-weight:var(--base-text-weight-medium);font-family:var(--brand-body-fontFamily)}.Primer_Brand__FormControl-module__FormControl-label--visually-hidden___1ZVMo{clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.Primer_Brand__FormControl-module__FormControl-label--medium___bj84g{letter-spacing:var(--brand-text-letterSpacing-100);font-size:var(--brand-text-size-100);line-height:var(--brand-text-lineHeight-100)}.Primer_Brand__FormControl-module__FormControl-label--large___o1TMW{letter-spacing:var(--brand-text-letterSpacing-300);font-size:var(--brand-text-size-300);line-height:var(--brand-text-lineHeight-300)}.Primer_Brand__FormControl-module__FormControl-label--checkbox___xZxFK{cursor:pointer;font-size:var(--brand-text-size-100);font-weight:var(--base-text-weight-medium);line-height:var(--base-size-24);width:100%;position:relative;top:1px}.Primer_Brand__FormControl-module__FormControl-control--radio___ml5zt{margin:2px 0 0}.Primer_Brand__FormControl-module__FormControl-hint___DmKlt{grid-column:1/3;display:block}.Primer_Brand__FormControl-module__FormControl-validation___GOPld{gap:var(--base-size-4);grid-column:1/3;align-items:center;display:flex}.Primer_Brand__FormControl-module__FormControl-validation--success___kOKNY{color:var(--brand-color-success-fg)}.Primer_Brand__FormControl-module__FormControl-validation--error___T5KVh{color:var(--brand-control-color-validation-error)}.Primer_Brand__FormControl-module__FormControl-validation-success-icon___zPbVN,.Primer_Brand__FormControl-module__FormControl-validation-error-icon___hijkD{display:flex}.Primer_Brand__FormControl-module__FormControl-validation--animate-in___bQToQ{animation:.17s cubic-bezier(.44,.74,.36,1) Primer_Brand__FormControl-module__FormControlValidationFadeIn___tj0TP}@media screen and (width<=47.99rem){.Primer_Brand__FormControl-module__FormControl--toggle-switch-with-status-label___dZbot{flex-direction:column;align-items:stretch}.Primer_Brand__FormControl-module__FormControl--toggle-switch-with-status-label___dZbot .Primer_Brand__FormControl-module__FormControl-label--toggle-switch____nCka:not(.Primer_Brand__FormControl-module__FormControl-label--visually-hidden___1ZVMo){flex:initial;min-inline-size:0}.Primer_Brand__FormControl-module__FormControl--toggle-switch-with-status-label___dZbot .Primer_Brand__FormControl-module__FormControl-control--toggle-switch___pwbrT,.Primer_Brand__FormControl-module__FormControl--toggle-switch-with-status-label___dZbot .Primer_Brand__FormControl-module__FormControl-hint___DmKlt,.Primer_Brand__FormControl-module__FormControl--toggle-switch-with-status-label___dZbot .Primer_Brand__FormControl-module__FormControl-validation___GOPld{flex:initial}}@keyframes Primer_Brand__FormControl-module__FormControlValidationFadeIn___tj0TP{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}

package/esm/forms/FormControl/FormControl.module.js

@@ -1,4 +1,4 @@
-import './FormControl.module-NDvIk_Aq.css';//#region src/forms/FormControl/FormControl.module.css
+import './FormControl.module-B7McDwHm.css';//#region src/forms/FormControl/FormControl.module.css
 var e = "Primer_Brand__FormControl-module__FormControl___xyCI6", t = "Primer_Brand__FormControl-module__FormControlValidationFadeIn___tj0TP", n = {
 	FormControl: e,
 	"FormControl--fullWidth": "Primer_Brand__FormControl-module__FormControl--fullWidth____kgvY",
@@ -6,16 +6,17 @@ var e = "Primer_Brand__FormControl-module__FormControl___xyCI6", t = "Primer_Bra
 	"FormControl--toggle-switch": "Primer_Brand__FormControl-module__FormControl--toggle-switch___HomKh",
 	"FormControl-control--toggle-switch": "Primer_Brand__FormControl-module__FormControl-control--toggle-switch___pwbrT",
 	"FormControl-label--toggle-switch": "Primer_Brand__FormControl-module__FormControl-label--toggle-switch____nCka",
+	"FormControl--toggle-switch-with-status-label": "Primer_Brand__FormControl-module__FormControl--toggle-switch-with-status-label___dZbot",
+	"FormControl-label--visually-hidden": "Primer_Brand__FormControl-module__FormControl-label--visually-hidden___1ZVMo",
+	"FormControl-hint": "Primer_Brand__FormControl-module__FormControl-hint___DmKlt",
+	"FormControl-validation": "Primer_Brand__FormControl-module__FormControl-validation___GOPld",
 	"FormControl-label--medium": "Primer_Brand__FormControl-module__FormControl-label--medium___bj84g",
 	"FormControl-toggleSwitch-spinnerSlot": "Primer_Brand__FormControl-module__FormControl-toggleSwitch-spinnerSlot___WwrPk",
 	"FormControl--border": "Primer_Brand__FormControl-module__FormControl--border___JkgNP",
 	"FormControl-label": "Primer_Brand__FormControl-module__FormControl-label____oJE0",
-	"FormControl-label--visually-hidden": "Primer_Brand__FormControl-module__FormControl-label--visually-hidden___1ZVMo",
 	"FormControl-label--large": "Primer_Brand__FormControl-module__FormControl-label--large___o1TMW",
 	"FormControl-label--checkbox": "Primer_Brand__FormControl-module__FormControl-label--checkbox___xZxFK",
 	"FormControl-control--radio": "Primer_Brand__FormControl-module__FormControl-control--radio___ml5zt",
-	"FormControl-hint": "Primer_Brand__FormControl-module__FormControl-hint___DmKlt",
-	"FormControl-validation": "Primer_Brand__FormControl-module__FormControl-validation___GOPld",
 	"FormControl-validation--success": "Primer_Brand__FormControl-module__FormControl-validation--success___kOKNY",
 	"FormControl-validation--error": "Primer_Brand__FormControl-module__FormControl-validation--error___T5KVh",
 	"FormControl-validation-success-icon": "Primer_Brand__FormControl-module__FormControl-validation-success-icon___zPbVN",

package/esm/forms/FormControl/FormControl.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormControl.module.js","names":[],"sources":["../../../src/forms/FormControl/FormControl.module.css"],"sourcesContent":[".FormControl {\n  display: inline-flex;\n  font-family: var(--brand-body-fontFamily);\n  flex-direction: column;\n  gap: var(--base-size-8);\n}\n\n.FormControl--fullWidth {\n  width: 100%;\n}\n\n.FormControl--checkbox {\n  display: grid;\n  grid-template-columns: auto 1fr;\n}\n\n.FormControl--toggle-switch {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr);\n  column-gap: var(--brand-ToggleSwitch-label-gap);\n  align-items: center;\n}\n\n.FormControl-control--toggle-switch {\n  grid-column: 1;\n  grid-row: 1;\n  align-self: start;\n}\n\n.FormControl-label--toggle-switch {\n  grid-column: 2;\n  grid-row: 1;\n  min-width: 0;\n  cursor: pointer;\n  overflow-wrap: anywhere;\n}\n\n.FormControl-label--medium.FormControl-label--toggle-switch {\n  font-size: var(--brand-ToggleSwitch-label-fontSize);\n  line-height: max(var(--brand-ToggleSwitch-label-lineHeight), var(--brand-ToggleSwitch-target-minHeight));\n}\n\n.FormControl-toggleSwitch-spinnerSlot {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--brand-ToggleSwitch-loading-size);\n  height: var(--brand-ToggleSwitch-loading-size);\n  margin-inline-start: var(--brand-ToggleSwitch-loading-gap);\n  vertical-align: middle;\n  pointer-events: none;\n}\n\n.FormControl--border {\n  border: 1px solid var(--brand-control-color-border-default);\n  border-radius: var(--brand-borderRadius-medium);\n  padding: var(--base-size-12);\n}\n\n.FormControl-label {\n  color: var(--brand-color-text-default);\n  font-weight: var(--base-text-weight-medium);\n  font-family: var(--brand-body-fontFamily);\n}\n\n.FormControl-label--visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n\n.FormControl-label--medium {\n  letter-spacing: var(--brand-text-letterSpacing-100);\n  font-size: var(--brand-text-size-100);\n  line-height: var(--brand-text-lineHeight-100);\n}\n\n.FormControl-label--large {\n  letter-spacing: var(--brand-text-letterSpacing-300);\n  font-size: var(--brand-text-size-300);\n  line-height: var(--brand-text-lineHeight-300);\n}\n\n.FormControl-label--checkbox {\n  cursor: pointer;\n  font-size: var(--brand-text-size-100);\n  font-weight: var(--base-text-weight-medium);\n  line-height: var(--base-size-24);\n  width: 100%;\n  position: relative;\n  top: 1px;\n}\n\n.FormControl-control--radio {\n  margin: 2px 0 0;\n}\n\n.FormControl-hint {\n  grid-column: 1 / 3;\n  display: block;\n}\n\n/*Validation*/\n.FormControl-validation {\n  grid-column: 1 / 3;\n  display: flex;\n  gap: var(--base-size-4);\n  align-items: center;\n}\n\n.FormControl-validation--success {\n  color: var(--brand-color-success-fg);\n}\n\n.FormControl-validation--error {\n  color: var(--brand-control-color-validation-error);\n}\n\n.FormControl-validation-success-icon {\n  display: flex;\n}\n\n.FormControl-validation-error-icon {\n  display: flex;\n}\n\n.FormControl-validation--animate-in {\n  animation: 170ms FormControlValidationFadeIn cubic-bezier(0.44, 0.74, 0.36, 1);\n}\n\n@keyframes FormControlValidationFadeIn {\n  0% {\n    opacity: 0;\n    transform: translateY(-100%);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"FormControl.module.js","names":[],"sources":["../../../src/forms/FormControl/FormControl.module.css"],"sourcesContent":[".FormControl {\n  display: inline-flex;\n  font-family: var(--brand-body-fontFamily);\n  flex-direction: column;\n  gap: var(--base-size-8);\n}\n\n.FormControl--fullWidth {\n  width: 100%;\n}\n\n.FormControl--checkbox {\n  display: grid;\n  grid-template-columns: auto 1fr;\n}\n\n.FormControl--toggle-switch {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr);\n  column-gap: var(--brand-ToggleSwitch-label-gap);\n  align-items: center;\n}\n\n.FormControl-control--toggle-switch {\n  grid-column: 1;\n  grid-row: 1;\n  align-self: start;\n}\n\n.FormControl-label--toggle-switch {\n  grid-column: 2;\n  grid-row: 1;\n  min-width: 0;\n  cursor: pointer;\n  overflow-wrap: anywhere;\n}\n\n.FormControl--toggle-switch-with-status-label {\n  display: flex;\n  flex-flow: row-reverse wrap;\n  justify-content: flex-end;\n}\n\n.FormControl--toggle-switch-with-status-label\n  .FormControl-label--toggle-switch:not(.FormControl-label--visually-hidden) {\n  flex: 1 1 0;\n  min-inline-size: min(100%, var(--base-size-96));\n  order: 0;\n}\n\n.FormControl--toggle-switch-with-status-label .FormControl-control--toggle-switch {\n  flex: 0 1 auto;\n  min-inline-size: 0;\n  max-inline-size: 100%;\n  order: 1;\n}\n\n.FormControl--toggle-switch-with-status-label .FormControl-hint,\n.FormControl--toggle-switch-with-status-label .FormControl-validation {\n  flex-basis: 100%;\n  order: 2;\n}\n\n.FormControl-label--medium.FormControl-label--toggle-switch {\n  font-size: var(--brand-ToggleSwitch-label-fontSize);\n  line-height: max(var(--brand-ToggleSwitch-label-lineHeight), var(--brand-ToggleSwitch-target-minHeight));\n}\n\n.FormControl-toggleSwitch-spinnerSlot {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--brand-ToggleSwitch-loading-size);\n  height: var(--brand-ToggleSwitch-loading-size);\n  margin-inline-start: var(--brand-ToggleSwitch-loading-gap);\n  vertical-align: middle;\n  pointer-events: none;\n}\n\n.FormControl--border {\n  border: 1px solid var(--brand-control-color-border-default);\n  border-radius: var(--brand-borderRadius-medium);\n  padding: var(--base-size-12);\n}\n\n.FormControl-label {\n  color: var(--brand-color-text-default);\n  font-weight: var(--base-text-weight-medium);\n  font-family: var(--brand-body-fontFamily);\n}\n\n.FormControl-label--visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n\n.FormControl-label--medium {\n  letter-spacing: var(--brand-text-letterSpacing-100);\n  font-size: var(--brand-text-size-100);\n  line-height: var(--brand-text-lineHeight-100);\n}\n\n.FormControl-label--large {\n  letter-spacing: var(--brand-text-letterSpacing-300);\n  font-size: var(--brand-text-size-300);\n  line-height: var(--brand-text-lineHeight-300);\n}\n\n.FormControl-label--checkbox {\n  cursor: pointer;\n  font-size: var(--brand-text-size-100);\n  font-weight: var(--base-text-weight-medium);\n  line-height: var(--base-size-24);\n  width: 100%;\n  position: relative;\n  top: 1px;\n}\n\n.FormControl-control--radio {\n  margin: 2px 0 0;\n}\n\n.FormControl-hint {\n  grid-column: 1 / 3;\n  display: block;\n}\n\n/*Validation*/\n.FormControl-validation {\n  grid-column: 1 / 3;\n  display: flex;\n  gap: var(--base-size-4);\n  align-items: center;\n}\n\n.FormControl-validation--success {\n  color: var(--brand-color-success-fg);\n}\n\n.FormControl-validation--error {\n  color: var(--brand-control-color-validation-error);\n}\n\n.FormControl-validation-success-icon {\n  display: flex;\n}\n\n.FormControl-validation-error-icon {\n  display: flex;\n}\n\n.FormControl-validation--animate-in {\n  animation: 170ms FormControlValidationFadeIn cubic-bezier(0.44, 0.74, 0.36, 1);\n}\n\n@media screen and (max-width: 47.99rem) {\n  .FormControl--toggle-switch-with-status-label {\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  .FormControl--toggle-switch-with-status-label\n    .FormControl-label--toggle-switch:not(.FormControl-label--visually-hidden) {\n    flex: initial;\n    min-inline-size: 0;\n  }\n\n  .FormControl--toggle-switch-with-status-label .FormControl-control--toggle-switch {\n    flex: initial;\n  }\n\n  .FormControl--toggle-switch-with-status-label .FormControl-hint,\n  .FormControl--toggle-switch-with-status-label .FormControl-validation {\n    flex: initial;\n  }\n}\n\n@keyframes FormControlValidationFadeIn {\n  0% {\n    opacity: 0;\n    transform: translateY(-100%);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n"],"mappings":""}

package/esm/forms/ToggleSwitch/ToggleSwitch.d.ts

@@ -3,6 +3,11 @@ import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/compone
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/toggle-switch/colors-with-modes.css';
 type ToggleSwitchSize = 'small' | 'medium';
 type ToggleSwitchSpinnerPosition = 'start' | 'end';
+type ToggleSwitchStatusLabelPosition = 'start' | 'end';
+type ToggleSwitchLabels = {
+    on?: string;
+    off?: string;
+};
 type ToggleSwitchButtonPropKeysToOmit = 'aria-busy' | 'aria-checked' | 'aria-disabled' | 'children' | 'onChange' | 'role' | 'type';
 export type ToggleSwitchProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, ToggleSwitchButtonPropKeysToOmit> & {
     'data-testid'?: string;
@@ -14,6 +19,9 @@ export type ToggleSwitchProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, To
     loadingLabel?: string;
     loadingLabelDelay?: number;
     spinnerPosition?: ToggleSwitchSpinnerPosition;
+    hasStatusLabel?: boolean;
+    statusLabelPosition?: ToggleSwitchStatusLabelPosition;
+    labels?: ToggleSwitchLabels;
 };
 export type ToggleSwitchInternalProps = ToggleSwitchProps & {
     toggleSwitchSpinnerInLabel?: boolean;
@@ -28,6 +36,8 @@ export declare const ToggleSwitch: ToggleSwitchComponent & {
         root: string;
         spinner: string;
         loadingAnnouncement: string;
+        statusAnnouncement: string;
+        statusLabel: string;
     };
 };
 export {};

package/esm/forms/ToggleSwitch/ToggleSwitch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleSwitch.d.ts","sourceRoot":"","sources":["../../../src/forms/ToggleSwitch/ToggleSwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAkC,KAAK,oBAAoB,EAAyB,MAAM,OAAO,CAAA;AAK/G,OAAO,oGAAoG,CAAA;AAC3G,OAAO,iHAAiH,CAAA;AAGxH,KAAK,gBAAgB,GAAG,OAAO,GAAG,QAAQ,CAAA;AAC1C,KAAK,2BAA2B,GAAG,OAAO,GAAG,KAAK,CAAA;AAElD,KAAK,gCAAgC,GACjC,WAAW,GACX,cAAc,GACd,eAAe,GACf,UAAU,GACV,UAAU,GACV,MAAM,GACN,MAAM,CAAA;AAEV,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,gCAAgC,CAAC,GAAG;IAChH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,gBAAgB,CAAA;IACvB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,eAAe,CAAC,EAAE,2BAA2B,CAAA;CAC9C,CAAA;AAED,MAAM,MAAM,yBAAyB,GAAG,iBAAiB,GAAG;IAC1D,0BAA0B,CAAC,EAAE,OAAO,CAAA;CACrC,CAAA;AAQD,KAAK,qBAAqB,GAAG,KAAK,CAAC,yBAAyB,CAAC,iBAAiB,GAAG,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC,CAAA;AAqHxH;;;GAGG;AACH,eAAO,MAAM,YAAY;;;;;;CAAiC,CAAA"}
+{"version":3,"file":"ToggleSwitch.d.ts","sourceRoot":"","sources":["../../../src/forms/ToggleSwitch/ToggleSwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA0C,KAAK,oBAAoB,EAAyB,MAAM,OAAO,CAAA;AAMvH,OAAO,oGAAoG,CAAA;AAC3G,OAAO,iHAAiH,CAAA;AAGxH,KAAK,gBAAgB,GAAG,OAAO,GAAG,QAAQ,CAAA;AAC1C,KAAK,2BAA2B,GAAG,OAAO,GAAG,KAAK,CAAA;AAClD,KAAK,+BAA+B,GAAG,OAAO,GAAG,KAAK,CAAA;AACtD,KAAK,kBAAkB,GAAG;IACxB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,CAAA;AAED,KAAK,gCAAgC,GACjC,WAAW,GACX,cAAc,GACd,eAAe,GACf,UAAU,GACV,UAAU,GACV,MAAM,GACN,MAAM,CAAA;AAEV,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,gCAAgC,CAAC,GAAG;IAChH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,gBAAgB,CAAA;IACvB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,eAAe,CAAC,EAAE,2BAA2B,CAAA;IAC7C,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,mBAAmB,CAAC,EAAE,+BAA+B,CAAA;IACrD,MAAM,CAAC,EAAE,kBAAkB,CAAA;CAC5B,CAAA;AAED,MAAM,MAAM,yBAAyB,GAAG,iBAAiB,GAAG;IAC1D,0BAA0B,CAAC,EAAE,OAAO,CAAA;CACrC,CAAA;AAUD,KAAK,qBAAqB,GAAG,KAAK,CAAC,yBAAyB,CAAC,iBAAiB,GAAG,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC,CAAA;AA2MxH;;;GAGG;AACH,eAAO,MAAM,YAAY;;;;;;;;CAAiC,CAAA"}

package/esm/forms/ToggleSwitch/ToggleSwitch.js

@@ -1,81 +1,130 @@
 import { clsx as e } from "../../node_modules/clsx/dist/clsx.js";
 import { useId as t } from "../../hooks/useId.js";
-import { Spinner as n } from "../../Spinner/Spinner.js";
-import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/toggle-switch/colors-with-modes-Byi9AmE8.css';import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/toggle-switch/base-CWVI8qLT.css';/* empty css                                                                                                 */
+import { Text as n } from "../../Text/Text.js";
+import { Spinner as r } from "../../Spinner/Spinner.js";
+import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/toggle-switch/colors-with-modes-QUNsZVCZ.css';import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/toggle-switch/base-CWVI8qLT.css';/* empty css                                                                                                 */
 /* empty css                                                                                                              */
-import r from "./ToggleSwitch.module.js";
-import { forwardRef as i, useEffect as a, useState as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import i from "./ToggleSwitch.module.js";
+import { forwardRef as a, useEffect as o, useRef as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/forms/ToggleSwitch/ToggleSwitch.tsx
-var l = {
+var d = {
 	root: "ToggleSwitch",
 	spinner: "ToggleSwitch-spinner",
-	loadingAnnouncement: "ToggleSwitch-loading-announcement"
-}, u = i(function({ checked: i, defaultChecked: u = !1, onChange: d, onClick: f, disabled: p = !1, loading: m = !1, size: h = "medium", loadingLabel: g = "Loading", loadingLabelDelay: _ = 2e3, spinnerPosition: v = "end", toggleSwitchSpinnerInLabel: y = !1, id: b, className: x, "aria-label": S, "aria-labelledby": C, "aria-describedby": w, "aria-invalid": T, "data-testid": E, ...D }, O) {
-	let k = t(b), A = `${k}-loading`, [j, M] = o(u), [N, P] = o(!1), F = i ?? j;
-	a(() => {
-		if (P(!1), !m) return;
-		let e = setTimeout(() => P(!0), Math.max(0, _));
+	loadingAnnouncement: "ToggleSwitch-loading-announcement",
+	statusAnnouncement: "ToggleSwitch-status-announcement",
+	statusLabel: "ToggleSwitch-status-label"
+}, f = a(function({ checked: a, defaultChecked: f = !1, onChange: p, onClick: m, disabled: h = !1, loading: g = !1, size: _ = "medium", loadingLabel: v = "Loading", loadingLabelDelay: y = 2e3, spinnerPosition: b = "end", hasStatusLabel: x = !1, statusLabelPosition: S = "start", labels: { on: C = "On", off: w = "Off" } = {}, toggleSwitchSpinnerInLabel: T = !1, id: E, className: D, "aria-label": O, "aria-labelledby": k, "aria-describedby": A, "aria-invalid": j, "data-testid": M, ...ee }, te) {
+	let N = t(E), P = t(), F = `${N}-loading`, [I, L] = c(f), [R, z] = c(!1), [B, V] = c(""), [H, U] = c(null), W = a ?? I, G = W ? C : w, K = W ? "On" : "Off", q = C !== "On" || w !== "Off", J = x && G !== K, Y = s(W);
+	o(() => {
+		let e = Y.current !== W;
+		Y.current = W, V(e ? H === W && J ? G : "" : (e) => J && e === G ? e : ""), H !== null && U(null);
+	}, [
+		G,
+		J,
+		W,
+		H
+	]), o(() => {
+		if (z(!1), !g) return;
+		let e = setTimeout(() => z(!0), Math.max(0, y));
 		return () => clearTimeout(e);
-	}, [m, _]);
-	let I = [w, m && N && g && A].filter(Boolean).join(" ") || void 0, L = (e) => {
-		if (p) {
+	}, [g, y]);
+	let X = [
+		J && P,
+		A,
+		g && R && v && F
+	].filter(Boolean).join(" ") || void 0, Z = (e) => {
+		if (h) {
 			e.preventDefault(), e.stopPropagation();
 			return;
 		}
-		if (f?.(e), e.defaultPrevented) return;
-		let t = !F;
-		i === void 0 && M(t), d?.(t);
-	}, R = !y && m ? /* @__PURE__ */ s("span", {
-		className: r["ToggleSwitch-spinnerSlot"],
+		if (m?.(e), e.defaultPrevented) return;
+		let t = !W;
+		x && q && U(t), a === void 0 && L(t), p?.(t);
+	}, Q = !T && g ? /* @__PURE__ */ l("span", {
+		className: i["ToggleSwitch-spinnerSlot"],
 		"aria-hidden": "true",
-		children: /* @__PURE__ */ s(n, {
+		children: /* @__PURE__ */ l(r, {
 			size: "small",
 			accessibleLabel: null,
-			className: r["ToggleSwitch-spinner"],
-			"data-testid": l.spinner
+			className: i["ToggleSwitch-spinner"],
+			"data-testid": d.spinner
 		})
+	}) : null, $ = x ? /* @__PURE__ */ u("span", {
+		className: e(i["ToggleSwitch-statusLabel"], i[`ToggleSwitch-statusLabel--${S}`]),
+		"aria-hidden": "true",
+		"data-testid": d.statusLabel,
+		children: [/* @__PURE__ */ l(n, {
+			as: "span",
+			size: "100",
+			variant: "muted",
+			className: e(i["ToggleSwitch-statusLabelText"], !W && i["ToggleSwitch-statusLabelText--hidden"]),
+			children: C
+		}), /* @__PURE__ */ l(n, {
+			as: "span",
+			size: "100",
+			variant: "muted",
+			className: e(i["ToggleSwitch-statusLabelText"], W && i["ToggleSwitch-statusLabelText--hidden"]),
+			children: w
+		})]
 	}) : null;
-	return /* @__PURE__ */ c("div", {
-		className: e(r.ToggleSwitch, r[`ToggleSwitch--${h}`], x),
-		"data-testid": E || l.root,
+	return /* @__PURE__ */ u("div", {
+		className: e(i.ToggleSwitch, i[`ToggleSwitch--${_}`], x && i["ToggleSwitch--withStatusLabel"], D),
+		"data-testid": M || d.root,
 		children: [
-			v === "start" && R,
-			/* @__PURE__ */ s("button", {
-				...D,
-				id: k,
-				ref: O,
+			b === "start" && Q,
+			/* @__PURE__ */ u("button", {
+				...ee,
+				id: N,
+				ref: te,
 				type: "button",
 				role: "switch",
-				"aria-checked": F,
-				"aria-disabled": p || void 0,
-				"aria-busy": m || void 0,
-				"aria-label": S,
-				"aria-labelledby": C,
-				"aria-describedby": I,
-				"aria-invalid": T,
-				className: e(r["ToggleSwitch-button"], p && r["ToggleSwitch-button--unavailable"]),
-				onClick: L,
-				children: /* @__PURE__ */ s("span", {
-					className: r["ToggleSwitch-track"],
-					"aria-hidden": "true",
-					children: /* @__PURE__ */ s("span", { className: e(r["ToggleSwitch-thumb"], F && r["ToggleSwitch-thumb--checked"], p && r["ToggleSwitch-thumb--disabled"]) })
-				})
+				"aria-checked": W,
+				"aria-disabled": h || void 0,
+				"aria-busy": g || void 0,
+				"aria-label": O,
+				"aria-labelledby": k,
+				"aria-describedby": X,
+				"aria-invalid": j,
+				className: e(i["ToggleSwitch-button"], h && i["ToggleSwitch-button--unavailable"]),
+				onClick: Z,
+				children: [
+					S === "start" && $,
+					/* @__PURE__ */ l("span", {
+						className: i["ToggleSwitch-track"],
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ l("span", { className: e(i["ToggleSwitch-thumb"], W && i["ToggleSwitch-thumb--checked"], h && i["ToggleSwitch-thumb--disabled"]) })
+					}),
+					S === "end" && $
+				]
 			}),
-			v === "end" && R,
-			/* @__PURE__ */ s("span", {
-				id: A,
+			b === "end" && Q,
+			J ? /* @__PURE__ */ l("span", {
+				id: P,
+				className: "visually-hidden",
+				children: G
+			}) : null,
+			x && q ? /* @__PURE__ */ l("span", {
+				role: "status",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				className: "visually-hidden",
+				"data-testid": d.statusAnnouncement,
+				children: B
+			}) : null,
+			/* @__PURE__ */ l("span", {
+				id: F,
 				role: "status",
 				"aria-live": "polite",
 				"aria-atomic": "true",
 				className: "visually-hidden",
-				"data-testid": l.loadingAnnouncement,
-				children: m && N ? g : null
+				"data-testid": d.loadingAnnouncement,
+				children: g && R ? v : null
 			})
 		]
 	});
-}), d = Object.assign(u, { testIds: l });
+}), p = Object.assign(f, { testIds: d });
 //#endregion
-export { d as ToggleSwitch };
+export { p as ToggleSwitch };
 
 //# sourceMappingURL=ToggleSwitch.js.map