@primer/react-brand 0.79.1-rc.ed00156c → 0.80.0-rc.e1dc6447

package/docs/components/LogoSuite/react.md

@@ -81,6 +81,184 @@ import {LogoSuite} from '@primer/react-brand'
 </LogoSuite>
 ```
 
+### Linked logos
+
+Wrap every logo in a native `<a>` element to add links and preserve its original colors. Do not mix linked and unlinked logos or use custom link components.
+
+```jsx
+<LogoSuite>
+  <LogoSuite.Heading visuallyHidden>Featured logos</LogoSuite.Heading>
+  <LogoSuite.Logobar>
+    <a href="/microsoft" aria-label="Microsoft">
+      <svg role="img" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" focusable="false">
+        <title>Microsoft</title>
+        <path fill="#F1511B" d="M121.666 121.666H0V0h121.666z" />
+        <path fill="#80CC28" d="M256 121.666H134.335V0H256z" />
+        <path fill="#00ADEF" d="M121.663 256.002H0V134.336h121.663z" />
+        <path fill="#FBBC09" d="M256 256.002H134.335V134.336H256z" />
+      </svg>
+    </a>
+    <a href="/azure" aria-label="Azure">
+      <svg role="img" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg" focusable="false">
+        <title>Azure</title>
+        <defs>
+          <linearGradient
+            id="azureGradientA"
+            x1="-1032.17"
+            x2="-1059.21"
+            y1="145.31"
+            y2="65.43"
+            gradientTransform="matrix(1 0 0 -1 1075 158)"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop offset="0" stopColor="#114a8b" />
+            <stop offset="1" stopColor="#0669bc" />
+          </linearGradient>
+          <linearGradient
+            id="azureGradientB"
+            x1="-1023.73"
+            x2="-1029.98"
+            y1="108.08"
+            y2="105.97"
+            gradientTransform="matrix(1 0 0 -1 1075 158)"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop offset="0" stopOpacity=".3" />
+            <stop offset=".07" stopOpacity=".2" />
+            <stop offset=".32" stopOpacity=".1" />
+            <stop offset=".62" stopOpacity=".05" />
+            <stop offset="1" stopOpacity="0" />
+          </linearGradient>
+          <linearGradient
+            id="azureGradientC"
+            x1="-1027.16"
+            x2="-997.48"
+            y1="147.64"
+            y2="68.56"
+            gradientTransform="matrix(1 0 0 -1 1075 158)"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop offset="0" stopColor="#3ccbf4" />
+            <stop offset="1" stopColor="#2892df" />
+          </linearGradient>
+        </defs>
+        <path
+          fill="url(#azureGradientA)"
+          d="M33.34 6.54h26.04l-27.03 80.1a4.15 4.15 0 0 1-3.94 2.81H8.15a4.14 4.14 0 0 1-3.93-5.47L29.4 9.38a4.15 4.15 0 0 1 3.94-2.83z"
+        />
+        <path
+          fill="#0078d4"
+          d="M71.17 60.26H29.88a1.91 1.91 0 0 0-1.3 3.31l26.53 24.76a4.17 4.17 0 0 0 2.85 1.13h23.38z"
+        />
+        <path
+          fill="url(#azureGradientB)"
+          d="M33.34 6.54a4.12 4.12 0 0 0-3.95 2.88L4.25 83.92a4.14 4.14 0 0 0 3.91 5.54h20.79a4.44 4.44 0 0 0 3.4-2.9l5.02-14.78 17.91 16.7a4.24 4.24 0 0 0 2.67.97h23.29L71.02 60.26H41.24L59.47 6.55z"
+        />
+        <path
+          fill="url(#azureGradientC)"
+          d="M66.6 9.36a4.14 4.14 0 0 0-3.93-2.82H33.65a4.15 4.15 0 0 1 3.93 2.82l25.18 74.62a4.15 4.15 0 0 1-3.93 5.48h29.02a4.15 4.15 0 0 0 3.93-5.48z"
+        />
+      </svg>
+    </a>
+    <a href="/microsoft-copilot" aria-label="Microsoft Copilot">
+      <svg role="img" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="2 4 43.998 40" focusable="false">
+        <title>Microsoft Copilot</title>
+        <defs>
+          <radialGradient
+            id="copilotGradientA"
+            cx="0"
+            cy="0"
+            r="1"
+            gradientTransform="matrix(-10.96051 -13.38922 12.59013 -10.30637 38.005 20.514)"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop offset=".096" stopColor="#00AEFF" />
+            <stop offset=".773" stopColor="#2253CE" />
+            <stop offset="1" stopColor="#0736C4" />
+          </radialGradient>
+          <radialGradient
+            id="copilotGradientB"
+            cx="0"
+            cy="0"
+            r="1"
+            gradientTransform="rotate(51.84 -28.201 27.85) scale(15.9912 15.5119)"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#FFB657" />
+            <stop offset=".634" stopColor="#FF5F3D" />
+            <stop offset=".923" stopColor="#C02B3C" />
+          </radialGradient>
+          <radialGradient
+            id="copilotGradientE"
+            cx="0"
+            cy="0"
+            r="1"
+            gradientTransform="rotate(109.274 16.301 20.802) scale(38.3873 45.9867)"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop offset=".066" stopColor="#8C48FF" />
+            <stop offset=".5" stopColor="#F2598A" />
+            <stop offset=".896" stopColor="#FFB152" />
+          </radialGradient>
+          <linearGradient
+            id="copilotGradientC"
+            x1="12.5"
+            x2="14.788"
+            y1="7.5"
+            y2="33.975"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop offset=".156" stopColor="#0D91E1" />
+            <stop offset=".487" stopColor="#52B471" />
+            <stop offset=".652" stopColor="#98BD42" />
+            <stop offset=".937" stopColor="#FFC800" />
+          </linearGradient>
+          <linearGradient id="copilotGradientD" x1="14.5" x2="15.75" y1="4" y2="32.885" gradientUnits="userSpaceOnUse">
+            <stop stopColor="#3DCBFF" />
+            <stop offset=".247" stopColor="#0588F7" stopOpacity="0" />
+          </linearGradient>
+          <linearGradient
+            id="copilotGradientF"
+            x1="42.586"
+            x2="42.569"
+            y1="13.346"
+            y2="21.215"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop offset=".058" stopColor="#F8ADFA" />
+            <stop offset=".708" stopColor="#A86EDD" stopOpacity="0" />
+          </linearGradient>
+        </defs>
+        <path
+          fill="url(#copilotGradientA)"
+          d="M34.142 7.325A4.63 4.63 0 0 0 29.7 4h-1.35a4.63 4.63 0 0 0-4.554 3.794L21.48 20.407l.575-1.965a4.63 4.63 0 0 1 4.444-3.33h7.853l3.294 1.282 3.175-1.283h-.926a4.63 4.63 0 0 1-4.443-3.325l-1.31-4.461z"
+        />
+        <path
+          fill="url(#copilotGradientB)"
+          d="M14.33 40.656A4.63 4.63 0 0 0 18.779 44h2.87a4.63 4.63 0 0 0 4.629-4.51l.312-12.163-.654 2.233a4.63 4.63 0 0 1-4.443 3.329h-7.919l-2.823-1.532-3.057 1.532h.912a4.63 4.63 0 0 1 4.447 3.344l1.279 4.423z"
+        />
+        <path
+          fill="url(#copilotGradientC)"
+          d="M29.5 4H13.46c-4.583 0-7.332 6.057-9.165 12.113C2.123 23.29-.72 32.885 7.503 32.885h6.925a4.63 4.63 0 0 0 4.456-3.358 2078.617 2078.617 0 0 1 4.971-17.156c.843-2.843 1.544-5.284 2.621-6.805C27.08 4.714 28.086 4 29.5 4z"
+        />
+        <path
+          fill="url(#copilotGradientD)"
+          d="M29.5 4H13.46c-4.583 0-7.332 6.057-9.165 12.113C2.123 23.29-.72 32.885 7.503 32.885h6.925a4.63 4.63 0 0 0 4.456-3.358 2078.617 2078.617 0 0 1 4.971-17.156c.843-2.843 1.544-5.284 2.621-6.805C27.08 4.714 28.086 4 29.5 4z"
+        />
+        <path
+          fill="url(#copilotGradientE)"
+          d="M18.498 44h16.04c4.582 0 7.332-6.058 9.165-12.115 2.171-7.177 5.013-16.775-3.208-16.775h-6.926a4.63 4.63 0 0 0-4.455 3.358 2084.036 2084.036 0 0 1-4.972 17.16c-.842 2.843-1.544 5.285-2.62 6.806-.604.852-1.61 1.566-3.024 1.566z"
+        />
+        <path
+          fill="url(#copilotGradientF)"
+          d="M18.498 44h16.04c4.582 0 7.332-6.058 9.165-12.115 2.171-7.177 5.013-16.775-3.208-16.775h-6.926a4.63 4.63 0 0 0-4.455 3.358 2084.036 2084.036 0 0 1-4.972 17.16c-.842 2.843-1.544 5.285-2.62 6.806-.604.852-1.61 1.566-3.024 1.566z"
+        />
+      </svg>
+    </a>
+  </LogoSuite.Logobar>
+</LogoSuite>
+```
+
 ### Optional heading and description
 
 ```jsx
@@ -445,6 +623,30 @@ Logobars using the `emphasis` variant will appear with relatively higher contras
 </Stack>
 ```
 
+### Gridline variant
+
+The `gridline` variant displays the heading and description above the logos in a single-column layout.
+
+```jsx
+<LogoSuite variant="gridline">
+  <LogoSuite.Heading>Trusted by the world's leading organizations</LogoSuite.Heading>
+  <LogoSuite.Logobar marquee>
+    <svg role="img" viewBox="0 0 300 100">
+      <title>Placeholder logo</title>
+      <rect width="100%" height="100%" />
+    </svg>
+    <svg role="img" viewBox="0 0 300 100">
+      <title>Placeholder logo</title>
+      <rect width="100%" height="100%" />
+    </svg>
+    <svg role="img" viewBox="0 0 300 100">
+      <title>Placeholder logo</title>
+      <rect width="100%" height="100%" />
+    </svg>
+  </LogoSuite.Logobar>
+</LogoSuite>
+```
+
 ### Gridline expressive variant
 
 The `gridline-expressive` variant displays the logo suite in a side-by-side layout with heading/description on the left and logos on the right, separated by a vertical border.
@@ -637,11 +839,11 @@ The `takeoverButton` prop on `LogoSuite.Logobar` adds an interactive hover effec
 
 ### LogoSuite
 
-| Name         | Type                                 | Default     | Description                                                 |
-| :----------- | :----------------------------------- | :---------- | :---------------------------------------------------------- |
-| `align`      | `'start' \| 'center' \| 'justify'`   | `'center'`  | The horizontal alignment of the LogoSuite.                  |
-| `hasDivider` | `boolean`                            | `true`      | Whether to render a divider immediately after the LogoSuite |
-| `variant`    | `'default' \| 'gridline-expressive'` | `'default'` | The presentational variant of the LogoSuite.                |
+| Name         | Type                                               | Default     | Description                                                 |
+| :----------- | :------------------------------------------------- | :---------- | :---------------------------------------------------------- |
+| `align`      | `'start' \| 'center' \| 'justify'`                 | `'center'`  | The horizontal alignment of the LogoSuite.                  |
+| `hasDivider` | `boolean`                                          | `true`      | Whether to render a divider immediately after the LogoSuite |
+| `variant`    | `'default' \| 'gridline' \| 'gridline-expressive'` | `'default'` | The presentational variant of the LogoSuite.                |
 
 ### LogoSuite.Heading `Required`
 
@@ -657,11 +859,11 @@ Forwards all props from the [Text component](../../typography/Text/index.md), in
 
 ### LogoSuite.Logobar
 
-| Name             | Type                                    | Default     | Description                                                                                   |
-| :--------------- | :-------------------------------------- | :---------- | :-------------------------------------------------------------------------------------------- |
-| `children`       |                                         | `undefined` | Logobar requires SVG or Image elements to render correctly                                    |
-| `marquee`        | `boolean`                               | `false`     | Enables an optional marquee effect.                                                           |
-| `marqueeSpeed`   | `'slow' \| 'normal'`                    | `'normal'`  | The speed of the marquee effect.                                                              |
-| `gap`            | `'default' \| 'condensed'`              | `'default'` | The gap between logos.                                                                        |
-| `variant`        | `'muted' \| 'emphasis'`                 | `undefined` | The stylistic variant of the LogoBar.                                                         |
-| `takeoverButton` | `` `{label: string \| href: string}` `` | `undefined` | Displays a takeover button on hover/focus. Cannot be used with `marquee`. Requires a `label`. |
+| Name             | Type                                    | Default     | Description                                                                                                       |
+| :--------------- | :-------------------------------------- | :---------- | :---------------------------------------------------------------------------------------------------------------- |
+| `children`       |                                         | `undefined` | SVG/Image elements, either all unlinked or all wrapped in native anchors. Custom link components are unsupported. |
+| `marquee`        | `boolean`                               | `false`     | Enables an optional marquee effect.                                                                               |
+| `marqueeSpeed`   | `'slow' \| 'normal'`                    | `'normal'`  | The speed of the marquee effect.                                                                                  |
+| `gap`            | `'default' \| 'condensed'`              | `'default'` | The gap between logos.                                                                                            |
+| `variant`        | `'muted' \| 'emphasis'`                 | `undefined` | The stylistic variant of the LogoBar.                                                                             |
+| `takeoverButton` | `` `{label: string \| href: string}` `` | `undefined` | Displays a takeover button on hover/focus. Cannot be used with `marquee`. Requires a `label`.                     |

package/docs/components/Spinner/index.md

@@ -0,0 +1,56 @@
+---
+title: Spinner
+description: Use a spinner to indicate that content or an action is loading.
+source: https://github.com/primer/brand/blob/main/packages/react/src/Spinner/Spinner.tsx
+keywords: ['loading', 'progress', 'status', 'spinner']
+storybook: '/brand/storybook/?path=/story/components-spinner--playground'
+---
+
+```js
+import {Spinner} from '@primer/react-brand'
+```
+
+## Examples
+
+### Default
+
+```jsx
+<Spinner />
+```
+
+### Sizes
+
+Use a named size or a number of CSS pixels for a custom size.
+
+```jsx
+<Stack direction="horizontal" alignItems="center" gap="spacious">
+  <Spinner size="small" />
+  <Spinner size="medium" />
+  <Spinner size="large" />
+  <Spinner size={32} />
+</Stack>
+```
+
+### Custom accessible label
+
+Use a concise label that describes the pending operation. Set `accessibleLabel` to `null` only when a parent component already communicates the loading state to assistive technologies.
+
+```jsx
+<Spinner accessibleLabel="Loading notification settings" />
+```
+
+## Accessibility
+
+`Spinner` is non-interactive, and its SVG is hidden from assistive technologies. Use `accessibleLabel` to provide equivalent visually hidden loading text.
+
+Do not rely on Spinner alone to communicate loading. It should be used as part of a broader loading state UI, which announces progress through a persistent `role="status"` or `aria-live` region.
+
+When available, prefer a component's built-in loading behavior. Components such as [ToggleSwitch](../../forms/ToggleSwitch/index.md) and [IconButton](../IconButton/index.md) already provide the appropriate semantics and announcements.
+
+## Component Props
+
+| Name              | Type                                       | Default     | Description                                                                      |
+| ----------------- | ------------------------------------------ | ----------- | -------------------------------------------------------------------------------- |
+| `size`            | `'small' \| 'medium' \| 'large' \| number` | `'medium'`  | Named size or custom dimensions in CSS pixels.                                   |
+| `accessibleLabel` | `string \| null`                           | `'Loading'` | Visually hidden loading text. Use `null` when loading is communicated elsewhere. |
+| `className`       | `string`                                   |             | Class applied to the animated SVG.                                               |

package/docs/components/index.md

@@ -44,6 +44,7 @@ description: Primer Brand UI components
 - [Section](Section/react.md): Use the section component to group related content together.
 - [Section intro](SectionIntro/react.md): Use the section intro component to provide a title, optional description and link to a new section in the page.
 - [Section intro stacked](SectionIntroStacked/index.md): Use this section intro component to provide a heading, link and itemized content in a stacked layout.
+- [Spinner](Spinner/index.md): Use a spinner to indicate that content or an action is loading.
 - [Statistic](Statistic/index.md): Use the statistic component display concise numerical information
 - [Sub nav](SubNav/index.md): A sub nav is a secondary navigation element, typically positioned beneath a primary navigation.
 - [Subdomain nav bar](SubdomainNavBar/index.md): Use the subdomain nav bar component for top level navigation for subdomain sites.

package/docs/forms/FormControl/index.md

@@ -56,6 +56,11 @@ import {FormControl} from '@primer/react-brand'
     <FormControl.Label>Textarea</FormControl.Label>
     <Textarea />
   </FormControl>
+  {/* ToggleSwitch */}
+  <FormControl>
+    <FormControl.Label>Enable notifications</FormControl.Label>
+    <ToggleSwitch />
+  </FormControl>
 </Stack>
 ```
 

package/docs/forms/ToggleSwitch/index.md

@@ -0,0 +1,129 @@
+---
+title: ToggleSwitch
+description: Use a toggle switch for a boolean setting that takes effect immediately.
+source: https://github.com/primer/brand/blob/main/packages/react/src/forms/ToggleSwitch/ToggleSwitch.tsx
+keywords: ['form', 'control', 'switch', 'toggle', 'setting']
+figma: 'https://www.figma.com/design/hUT1gnfCRTX7iPZSjOg8Vp/?node-id=7985-43209'
+storybook: '/brand/storybook/?path=/story/components-forms-toggleswitch--playground'
+---
+
+```js
+import {ToggleSwitch} from '@primer/react-brand'
+```
+
+## Examples
+
+### Default
+
+```jsx
+<FormControl>
+  <FormControl.Label>Enable notifications</FormControl.Label>
+  <ToggleSwitch />
+</FormControl>
+```
+
+### Uncontrolled
+
+`defaultChecked` sets the initial value. `onChange` receives the next boolean value, not a native change event.
+
+```jsx
+<FormControl>
+  <FormControl.Label>Automatically watch repositories</FormControl.Label>
+  <ToggleSwitch defaultChecked />
+</FormControl>
+```
+
+### Controlled
+
+```jsx filename="noinline"
+function Example() {
+  const [checked, setChecked] = React.useState(false)
+  return (
+    <FormControl>
+      <FormControl.Label>Automatically watch repositories</FormControl.Label>
+      <ToggleSwitch checked={checked} onChange={setChecked} />
+    </FormControl>
+  )
+}
+
+render(Example)
+```
+
+### Sizes
+
+```jsx
+<Stack direction="horizontal">
+  <FormControl>
+    <FormControl.Label>Small</FormControl.Label>
+    <ToggleSwitch size="small" />
+  </FormControl>
+  <FormControl>
+    <FormControl.Label>Medium</FormControl.Label>
+    <ToggleSwitch />
+  </FormControl>
+</Stack>
+```
+
+### Disabled
+
+```jsx
+<FormControl>
+  <FormControl.Label>Enable notifications</FormControl.Label>
+  <ToggleSwitch defaultChecked disabled />
+  <FormControl.Hint>Notification settings are managed by your organization.</FormControl.Hint>
+</FormControl>
+```
+
+### Without `FormControl`
+
+```jsx
+<Stack direction="horizontal" alignItems="center" gap="normal">
+  <Text as="span" id="notification-setting-label">
+    Enable notifications
+  </Text>
+  <ToggleSwitch aria-labelledby="notification-setting-label" />
+</Stack>
+```
+
+### Visually hidden label with `FormControl`
+
+```jsx
+<Stack gap="normal" direction="horizontal">
+  <Text as="span" id="visible-notification-label">
+    Enable notifications
+  </Text>
+  <FormControl>
+    <FormControl.Label visuallyHidden>Enable notifications</FormControl.Label>
+    <ToggleSwitch aria-labelledby="visible-notification-label" />
+  </FormControl>
+</Stack>
+```
+
+## 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.                                             |
+
+Other standard button attributes, including `aria-controls`, `tabIndex`, keyboard handlers, and `style`, apply to the switch button.
+
+## Related Components
+
+- [FormControl](../FormControl/index.md)
+- [Checkbox](../Checkbox/index.md)

package/docs/forms/index.md

@@ -12,3 +12,4 @@ title: Forms
 - [Select](Select/index.md): Use the select component to enable selection of one option from a list.
 - [Text input](TextInput/index.md): Use the text input component for single-line text field.
 - [Textarea](TextArea/index.md): Use the textarea component for multi-line text input form fields.
+- [ToggleSwitch](ToggleSwitch/index.md): Use a toggle switch for a boolean setting that takes effect immediately.

package/docs/index.md

@@ -1,6 +1,6 @@
-# Primer Brand docs (v0.79.1-rc.ed00156c)
+# Primer Brand docs (v0.80.0-rc.e1dc6447)
 
-These docs are bundled with `@primer/react-brand@0.79.1-rc.ed00156c` and match your installed version.
+These docs are bundled with `@primer/react-brand@0.80.0-rc.e1dc6447` 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.
@@ -78,6 +78,7 @@ stylesheet and font setup. Component directories are named after their import (e
 - [Section](components/Section/react.md): Use the section component to group related content together.
 - [Section intro](components/SectionIntro/react.md): Use the section intro component to provide a title, optional description and link to a new section in the page.
 - [Section intro stacked](components/SectionIntroStacked/index.md): Use this section intro component to provide a heading, link and itemized content in a stacked layout.
+- [Spinner](components/Spinner/index.md): Use a spinner to indicate that content or an action is loading.
 - [Statistic](components/Statistic/index.md): Use the statistic component display concise numerical information
 - [Sub nav](components/SubNav/index.md): A sub nav is a secondary navigation element, typically positioned beneath a primary navigation.
 - [Subdomain nav bar](components/SubdomainNavBar/index.md): Use the subdomain nav bar component for top level navigation for subdomain sites.
@@ -101,3 +102,4 @@ stylesheet and font setup. Component directories are named after their import (e
 - [Select](forms/Select/index.md): Use the select component to enable selection of one option from a list.
 - [Text input](forms/TextInput/index.md): Use the text input component for single-line text field.
 - [Textarea](forms/TextArea/index.md): Use the textarea component for multi-line text input form fields.
+- [ToggleSwitch](forms/ToggleSwitch/index.md): Use a toggle switch for a boolean setting that takes effect immediately.

package/esm/IconButton/IconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/IconButton/IconButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAA6B,MAAM,OAAO,CAAA;AACjD,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,wBAAwB,CAAA;AAUhD,OAAO,EAA0B,KAAK,gBAAgB,EAAC,MAAM,YAAY,CAAA;AACzE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAEnD,OAAO,kGAAkG,CAAA;AACzG,OAAO,+GAA+G,CAAA;AAGtH,eAAO,MAAM,kBAAkB,oEAAsD,CAAA;AACrF,eAAO,MAAM,eAAe,uCAA4B,CAAA;AACxD,eAAO,MAAM,wBAAwB,aAAuB,CAAA;AAC5D,eAAO,MAAM,qBAAqB,UAAoB,CAAA;AAEtD,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAA;AACnE,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAA;AAE7D,KAAK,mBAAmB,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,GAAG;IAClF,EAAE,CAAC,EAAE,CAAC,CAAA;IACN,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,IAAI,EAAE,IAAI,CAAA;IACV,YAAY,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;CACpC,CAAA;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI,mBAAmB,CAAC,CAAC,CAAC,GAC1F,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,mBAAmB,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAAA;AAYpF,KAAK,mBAAmB,GAAG,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EAChE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAC/D,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;AAwG9B,eAAO,MAAM,UAAU,EAAiC,mBAAmB,CAAA"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/IconButton/IconButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAA6B,MAAM,OAAO,CAAA;AACjD,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,wBAAwB,CAAA;AAUhD,OAAO,EAA0B,KAAK,gBAAgB,EAAC,MAAM,YAAY,CAAA;AACzE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAGnD,OAAO,kGAAkG,CAAA;AACzG,OAAO,+GAA+G,CAAA;AAGtH,eAAO,MAAM,kBAAkB,oEAAsD,CAAA;AACrF,eAAO,MAAM,eAAe,uCAA4B,CAAA;AACxD,eAAO,MAAM,wBAAwB,aAAuB,CAAA;AAC5D,eAAO,MAAM,qBAAqB,UAAoB,CAAA;AAEtD,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAA;AACnE,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAA;AAE7D,KAAK,mBAAmB,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,GAAG;IAClF,EAAE,CAAC,EAAE,CAAC,CAAA;IACN,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,IAAI,EAAE,IAAI,CAAA;IACV,YAAY,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;CACpC,CAAA;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI,mBAAmB,CAAC,CAAC,CAAC,GAC1F,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,mBAAmB,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAAA;AAYpF,KAAK,mBAAmB,GAAG,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EAChE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAC/D,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;AAwG9B,eAAO,MAAM,UAAU,EAAiC,mBAAmB,CAAA"}

package/esm/IconButton/IconButton.js

@@ -1,68 +1,70 @@
 import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import { Button as t, ButtonSizes as n, ButtonVariants as r, defaultButtonSize as i, defaultButtonVariant as a } from "../Button/Button.js";
 import { Tooltip as o, TooltipContext as s } from "../Tooltip/Tooltip.js";
-import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/icon-button/colors-with-modes-D7iaptsa.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/icon-button/base-DLPw97mz.css';/* empty css                                                                                            */
+import { Spinner as c } from "../Spinner/Spinner.js";
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/icon-button/colors-with-modes-D7iaptsa.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/icon-button/base-_lTjJKpQ.css';/* empty css                                                                                            */
 /* empty css                                                                                                         */
-import c from "./IconButton.module.js";
-import l, { forwardRef as u } from "react";
-import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+import l from "./IconButton.module.js";
+import u, { forwardRef as d } from "react";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/IconButton/IconButton.tsx
-var m = [
+var h = [
 	...r,
 	"danger",
 	"invisible"
-], h = [...n], g = a, _ = i, v = {
+], g = [...n], _ = a, v = i, y = {
 	root: "IconButton",
-	get loadingIndicator() {
-		return `${this.root}-loading-indicator`;
+	get spinner() {
+		return `${this.root}-spinner`;
 	},
 	get loadingAnnouncement() {
 		return `${this.root}-loading-announcement`;
 	}
 };
-function y({ as: n, icon: r, "aria-label": i, description: a, loading: u = !1, loadingAnnouncement: m = "Loading", rounded: h = !1, tooltipDirection: y = "s", size: b = _, variant: x = g, inactive: S = !1, disabled: C, className: w, onClick: T, "aria-disabled": E, "aria-expanded": D, "aria-haspopup": O, "data-testid": k, ...A }, j) {
-	let { tooltipId: M } = l.useContext(s), N = u && !C, P = S && !C && !N, F = !C && !M, I = a || i, L = x === "danger" ? "secondary" : x === "invisible" ? "subtle" : x;
+function b({ as: n, icon: r, "aria-label": i, description: a, loading: d = !1, loadingAnnouncement: h = "Loading", rounded: g = !1, tooltipDirection: b = "s", size: x = v, variant: S = _, inactive: C = !1, disabled: w, className: T, onClick: E, "aria-disabled": D, "aria-expanded": O, "aria-haspopup": k, "data-testid": A, ...j }, M) {
+	let { tooltipId: N } = u.useContext(s), P = d && !w, F = C && !w && !P, I = !w && !N, L = a || i, R = S === "danger" ? "secondary" : S === "invisible" ? "subtle" : S;
 	process.env.NODE_ENV !== "production" && (i.trim() || console.warn("IconButton requires a non-empty `aria-label`."), [
-		C,
-		u,
-		S
+		w,
+		d,
+		C
 	].filter(Boolean).length > 1 && console.warn("IconButton has conflicting props for `disabled`, `loading`, or `inactive` states."));
-	let R = N ? /* @__PURE__ */ f("span", {
-		className: c.IconButton__loadingIndicator,
-		"data-testid": v.loadingIndicator
-	}) : /* @__PURE__ */ f(r, { className: c.IconButton__icon }), z = /* @__PURE__ */ f(t, {
-		...A,
-		ref: F ? void 0 : j,
+	let z = P ? /* @__PURE__ */ p(c, {
+		accessibleLabel: null,
+		className: l.IconButton__spinner,
+		"data-testid": y.spinner
+	}) : /* @__PURE__ */ p(r, { className: l.IconButton__icon }), B = /* @__PURE__ */ p(t, {
+		...j,
+		ref: I ? void 0 : M,
 		as: n,
-		variant: L,
-		size: b,
-		disabled: C,
-		"aria-disabled": N || P ? !0 : E,
-		"aria-expanded": D,
-		"aria-haspopup": O,
-		"aria-label": !F || a ? i : void 0,
-		className: e(c.IconButton, c[`IconButton--${b}`], c[`IconButton--variant-${x}`], P && c["IconButton--inactive"], h && c["IconButton--rounded"], w),
-		"data-testid": k || v.root,
-		leadingVisual: R,
-		onClick: N ? (e) => {
+		variant: R,
+		size: x,
+		disabled: w,
+		"aria-disabled": P || F ? !0 : D,
+		"aria-expanded": O,
+		"aria-haspopup": k,
+		"aria-label": !I || a ? i : void 0,
+		className: e(l.IconButton, l[`IconButton--${x}`], l[`IconButton--variant-${S}`], F && l["IconButton--inactive"], g && l["IconButton--rounded"], T),
+		"data-testid": A || y.root,
+		leadingVisual: z,
+		onClick: P ? (e) => {
 			e.preventDefault(), e.stopPropagation();
-		} : T
+		} : E
 	});
-	return /* @__PURE__ */ p(d, { children: [F ? /* @__PURE__ */ f(o, {
-		ref: j,
-		direction: y,
-		text: I,
+	return /* @__PURE__ */ m(f, { children: [I ? /* @__PURE__ */ p(o, {
+		ref: M,
+		direction: b,
+		text: L,
 		type: a ? "description" : "label",
-		children: z
-	}) : z, /* @__PURE__ */ f("span", {
+		children: B
+	}) : B, /* @__PURE__ */ p("span", {
 		"aria-live": "polite",
-		className: c.IconButton__loadingAnnouncement,
-		"data-testid": v.loadingAnnouncement,
-		children: N ? m : null
+		className: l.IconButton__loadingAnnouncement,
+		"data-testid": y.loadingAnnouncement,
+		children: P ? h : null
 	})] });
 }
-var b = u(y);
+var x = d(b);
 //#endregion
-export { b as IconButton, h as IconButtonSizes, m as IconButtonVariants, _ as defaultIconButtonSize, g as defaultIconButtonVariant };
+export { x as IconButton, g as IconButtonSizes, h as IconButtonVariants, v as defaultIconButtonSize, _ as defaultIconButtonVariant };
 
 //# sourceMappingURL=IconButton.js.map