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

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.93799279)
 
-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.93799279` 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/docs/introduction/theming.md

@@ -42,6 +42,7 @@ Primer Brand supports the following color modes through a dedicated prop by appl
 | ----- | ---------------------- | ------------------------- |
 | Light | `light`                | `data-color-mode="light"` |
 | Dark  | `dark`                 | `data-color-mode="dark"`  |
+| Auto  | `auto`                 | `data-color-mode="auto"`  |
 
 In-product appearance modes such as `dark_dimmed` and `light_high_contrast` resolve internally to Primer Brand's `dark` or `light` defaults. The resolved value is returned by `useTheme().colorMode` and applied to `data-color-mode`.
 
@@ -84,6 +85,18 @@ const Example = () => {
 render(Example)
 ```
 
+### Following the system preference
+
+Use `colorMode="auto"` to use the browser's system preference:
+
+```jsx
+<ThemeProvider colorMode="auto">
+  <App />
+</ThemeProvider>
+```
+
+`useTheme()` returns a `colorMode` property with a resolved light or dark value. `originalColorMode` is also returned, which can be helpful for forwarding or persisting the unresolved value.
+
 ### Locking the color mode
 
 For tighter control over appearance - such as forcing areas of a layout to appear in dark mode - we recommend nesting `ThemeProvider` and explicitly applying a color mode.

package/esm/Accordion/Accordion.js

@@ -3,7 +3,7 @@ import { BiColorGradients as t, Colors as n } from "../constants.js";
 import { useProvidedRefOrCreate as r } from "../hooks/useRef.js";
 import { Heading as i } from "../Heading/Heading.js";
 import { TriangleDownIcon as a } from "../node_modules/@primer/octicons-react/dist/icons/TriangleDownIcon.js";
-import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/accordion/colors-with-modes-PcQKqJQI.css';/* empty css                                                                                                       */
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/accordion/colors-with-modes-DKHKbQRW.css';/* empty css                                                                                                       */
 import o from "./Accordion.module.js";
 import { createContext as s, forwardRef as c, useCallback as l, useContext as u, useEffect as d, useMemo as f, useRef as p } from "react";
 import { jsx as m, jsxs as h } from "react/jsx-runtime";

package/esm/Accordion/{Accordion.module-B-iFuyHy.css → Accordion.module-B-vGHUg7.css}

@@ -1 +1 @@
-.Primer_Brand__Accordion-module__Accordion___RSoMC{--brand-Accordion-content-height:0px;box-sizing:border-box;position:relative}.Primer_Brand__Accordion-module__Accordion--disableAnimation____eC_8:after,.Primer_Brand__Accordion-module__Accordion--disableAnimation____eC_8 .Primer_Brand__Accordion-module__Accordion__summary-toggleIcon___WFUk5,.Primer_Brand__Accordion-module__Accordion--disableAnimation____eC_8>.Primer_Brand__Accordion-module__Accordion__content___GhUVO,.Primer_Brand__Accordion-module__Accordion--disableAnimation____eC_8>.Primer_Brand__Accordion-module__Accordion__content___GhUVO>.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof{transition:none}.Primer_Brand__Accordion-module__Accordion--default___R_5ld{border-bottom:var(--brand-borderWidth-thin) solid var(--brand-Accordion-border-color-default)}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT:not(.Primer_Brand__Accordion-module__Accordion___RSoMC .Primer_Brand__Accordion-module__Accordion___RSoMC)>.Primer_Brand__Accordion-module__Accordion__summary___zYOXC{background-color:var(--brand-color-canvas-subtle);border-block:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);padding-block:var(--base-size-20);padding-inline:var(--base-size-20);justify-content:flex-start;align-items:center;gap:0}.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI:before{content:"";width:calc(var(--base-size-8) - 1px);height:var(--base-size-12);background-color:var(--brand-Accordion-indicator-idle);flex-shrink:0;margin-inline-end:var(--base-size-12);display:block}.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI:hover:before{background-color:var(--brand-Accordion-indicator-hover)}details[open]>.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI:before{background-color:var(--brand-Accordion-indicator-active)}.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI h3,.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI h4,.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI h5,.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI h6{font-family:var(--brand-fontStack-monospace);font-size:var(--brand-text-size-100);font-weight:var(--brand-text-weight-500);line-height:var(--brand-text-lineHeight-100);letter-spacing:.15px;text-transform:uppercase}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT:not(.Primer_Brand__Accordion-module__Accordion___RSoMC .Primer_Brand__Accordion-module__Accordion___RSoMC)+.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT:not(.Primer_Brand__Accordion-module__Accordion___RSoMC .Primer_Brand__Accordion-module__Accordion___RSoMC)>.Primer_Brand__Accordion-module__Accordion__summary___zYOXC{border-block-start:none}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT:not(.Primer_Brand__Accordion-module__Accordion___RSoMC .Primer_Brand__Accordion-module__Accordion___RSoMC)>.Primer_Brand__Accordion-module__Accordion__content___GhUVO{border-block-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT:not(.Primer_Brand__Accordion-module__Accordion___RSoMC .Primer_Brand__Accordion-module__Accordion___RSoMC)>.Primer_Brand__Accordion-module__Accordion__content___GhUVO>.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof{padding-block-start:var(--base-size-12);padding-inline:var(--base-size-20)}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT:not(.Primer_Brand__Accordion-module__Accordion___RSoMC .Primer_Brand__Accordion-module__Accordion___RSoMC)>.Primer_Brand__Accordion-module__Accordion__content___GhUVO>.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof:after{block-size:var(--base-size-12)}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT .Primer_Brand__Accordion-module__Accordion--default___R_5ld:last-child{border-bottom:none}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT .Primer_Brand__Accordion-module__Accordion--default___R_5ld:last-child:after{display:none}.Primer_Brand__Accordion-module__Accordion--default___R_5ld:after{content:"";background-color:var(--brand-Accordion-border-color-default);height:var(--brand-borderWidth-thin);transition:background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-glide), transform var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);transform-origin:50% 100%;width:100%;position:absolute;bottom:0;left:0;transform:scaleY(0)}.Primer_Brand__Accordion-module__Accordion--default___R_5ld:hover:after,details[open].Primer_Brand__Accordion-module__Accordion--default___R_5ld:after{background-color:var(--brand-color-accent-primary);transform:scaleY(1)}.Primer_Brand__Accordion-module__Accordion__summary___zYOXC{cursor:pointer;padding:var(--base-size-24) 0;justify-content:space-between;align-items:center;display:flex;position:relative}.Primer_Brand__Accordion-module__Accordion__summary___zYOXC::-webkit-details-marker{display:none}.Primer_Brand__Accordion-module__Accordion__summary___zYOXC:focus-visible{outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus)}details[open].Primer_Brand__Accordion-module__Accordion___RSoMC:has(>summary:focus-visible){outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus);outline-offset:var(--base-size-2)}details[open].Primer_Brand__Accordion-module__Accordion___RSoMC>.Primer_Brand__Accordion-module__Accordion__summary___zYOXC:focus-visible{outline:none}.Primer_Brand__Accordion-module__Accordion__summary-toggle___YSgM_{cursor:pointer;height:var(--base-size-24);width:var(--base-size-24);color:var(--brand-color-text-emphasized);justify-content:center;align-items:center;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.Primer_Brand__Accordion-module__Accordion__summary___zYOXC:not(.Primer_Brand__Accordion-module__Accordion__summary--reversed-toggles____uX_W) .Primer_Brand__Accordion-module__Accordion__summary-toggle___YSgM_{right:0}.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI .Primer_Brand__Accordion-module__Accordion__summary-toggle___YSgM_{color:var(--brand-color-text-default);order:1;margin-inline-start:auto;position:static;transform:none}.Primer_Brand__Accordion-module__Accordion__summary--reversed-toggles____uX_W .Primer_Brand__Accordion-module__Accordion__summary-toggle___YSgM_{left:0}.Primer_Brand__Accordion-module__Accordion__summary--default___LV2dT .Primer_Brand__Accordion-module__Accordion__summary-toggle___YSgM_{color:var(--brand-Accordion-toggle-color-start,var(--brand-color-text-emphasized))}.Primer_Brand__Accordion-module__Accordion__summary-toggleIcon___WFUk5{transform-origin:50%;transition:transform var(--brand-animation-duration-fast) var(--brand-animation-easing-glide)}details[open]>.Primer_Brand__Accordion-module__Accordion__summary___zYOXC .Primer_Brand__Accordion-module__Accordion__summary-toggleIcon___WFUk5{transform:rotate(-180deg)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-default___Hd_up{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-default)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-blue___TGA5S{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-blue)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-blue-purple___dnh9G{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-blue-purple-start)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-coral____IedP{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-coral)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-green___Q_oKN{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-green)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-green-blue___UPhxW{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-green-blue-start)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-gray___XAdlE{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-gray)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-indigo___MbEJo{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-indigo)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-lemon___yKljE{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-lemon)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-lime___dXlEo{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-lime)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-orange___DIqep{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-orange)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-pink___JQk2J{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-pink)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-pink-blue___8wMk6{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-pink-blue-start)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-purple___P3aRT{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-purple)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-purple-red___DuF8G{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-purple-red-start)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-red___uRFGS{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-red)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-red-orange___cmXlh{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-red-orange-start)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-teal___fE9fd{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-teal)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-yellow___ws5We{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-yellow)}.Primer_Brand__Accordion-module__Accordion__summary--default___LV2dT:not(.Primer_Brand__Accordion-module__Accordion__summary--reversed-toggles____uX_W){padding-inline-end:var(--base-size-48)}.Primer_Brand__Accordion-module__Accordion__summary--reversed-toggles____uX_W{padding-inline-start:var(--base-size-48)}.Primer_Brand__Accordion-module__Accordion__content___GhUVO,.Primer_Brand__Accordion-module__Accordion__content___GhUVO p,.Primer_Brand__Accordion-module__Accordion__content___GhUVO span:not(.Primer_Brand__Accordion-module__Accordion__summary-toggle___YSgM_),.Primer_Brand__Accordion-module__Accordion__content___GhUVO ul,.Primer_Brand__Accordion-module__Accordion__content___GhUVO ol{color:var(--brand-color-text-muted);font-family:var(--brand-fontStack-sansSerif);font-weight:var(--brand-text-weight-200);font-size:var(--brand-text-size-200);line-height:var(--brand-text-lineHeight-200)}.Primer_Brand__Accordion-module__Accordion__content___GhUVO{max-height:0;transition:max-height var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);position:relative;overflow:hidden}.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof{opacity:0;transition:opacity var(--brand-animation-duration-fast) var(--brand-animation-easing-glide)}.Primer_Brand__Accordion-module__Accordion--default___R_5ld>.Primer_Brand__Accordion-module__Accordion__content___GhUVO{top:calc(var(--base-size-2) - var(--base-size-24))}.Primer_Brand__Accordion-module__Accordion__summary--default___LV2dT+.Primer_Brand__Accordion-module__Accordion__content___GhUVO>.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof:before{content:"";block-size:var(--base-size-12);display:block}.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof:after{content:"";display:block}[data-color-mode=dark] .Primer_Brand__Accordion-module__Accordion__content___GhUVO{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:auto}.Primer_Brand__Accordion-module__Accordion__content___GhUVO p:not(:first-child){margin-block-start:var(--base-size-16)}.Primer_Brand__Accordion-module__Accordion__content___GhUVO a{color:var(--brand-InlineLink-color-rest);-webkit-text-decoration:underline;text-decoration:underline;-webkit-text-decoration-color:var(--brand-InlineLink-color-rest);text-decoration-color:var(--brand-InlineLink-color-rest);text-decoration-thickness:var(--brand-borderWidth-thin);text-underline-position:under;transition:var(--brand-InlineLink-transition-timing) text-decoration;position:relative}.Primer_Brand__Accordion-module__Accordion__content___GhUVO a:hover{text-decoration-thickness:var(--brand-borderWidth-thick)}.Primer_Brand__Accordion-module__Accordion__content___GhUVO a,.Primer_Brand__Accordion-module__Accordion__content___GhUVO a>span{font-weight:inherit;color:var(--brand-InlineLink-color-rest)}.Primer_Brand__Accordion-module__Accordion__content___GhUVO a:active,.Primer_Brand__Accordion-module__Accordion__content___GhUVO a:active>span{color:var(--brand-InlineLink-color-pressed)}details[open]>.Primer_Brand__Accordion-module__Accordion__content___GhUVO{max-height:var(--brand-Accordion-content-height);z-index:0;position:relative}details[open].Primer_Brand__Accordion-module__Accordion--disableAnimation____eC_8>.Primer_Brand__Accordion-module__Accordion__content___GhUVO{max-height:none}details[open]>.Primer_Brand__Accordion-module__Accordion__content___GhUVO>.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof{opacity:1}details.Primer_Brand__Accordion-module__Accordion--closing___R_qJH>.Primer_Brand__Accordion-module__Accordion__content___GhUVO{max-height:0}details.Primer_Brand__Accordion-module__Accordion--closing___R_qJH>.Primer_Brand__Accordion-module__Accordion__content___GhUVO>.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof{opacity:0}.Primer_Brand__Accordion-module__Accordion__summary--default___LV2dT+.Primer_Brand__Accordion-module__Accordion__content___GhUVO,details[open]>.Primer_Brand__Accordion-module__Accordion__summary--default___LV2dT+.Primer_Brand__Accordion-module__Accordion__content___GhUVO,details.Primer_Brand__Accordion-module__Accordion--closing___R_qJH>.Primer_Brand__Accordion-module__Accordion__summary--default___LV2dT+.Primer_Brand__Accordion-module__Accordion__content___GhUVO{margin-block-start:0}details.Primer_Brand__Accordion-module__Accordion--closing___R_qJH>.Primer_Brand__Accordion-module__Accordion__summary___zYOXC .Primer_Brand__Accordion-module__Accordion__summary-toggleIcon___WFUk5{transform:rotate(0)}details[open]>.Primer_Brand__Accordion-module__Accordion__summary--reversed-toggles____uX_W+.Primer_Brand__Accordion-module__Accordion__content___GhUVO{padding-inline-start:var(--base-size-48)}@media screen and (width>=48rem){.Primer_Brand__Accordion-module__Accordion__summary___zYOXC{gap:var(--base-size-40)}}@media (prefers-reduced-motion:reduce){.Primer_Brand__Accordion-module__Accordion___RSoMC,.Primer_Brand__Accordion-module__Accordion___RSoMC:before,.Primer_Brand__Accordion-module__Accordion___RSoMC:after,.Primer_Brand__Accordion-module__Accordion___RSoMC *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
+.Primer_Brand__Accordion-module__Accordion___RSoMC{--brand-Accordion-content-height:0px;box-sizing:border-box;position:relative}.Primer_Brand__Accordion-module__Accordion--disableAnimation____eC_8:after,.Primer_Brand__Accordion-module__Accordion--disableAnimation____eC_8 .Primer_Brand__Accordion-module__Accordion__summary-toggleIcon___WFUk5,.Primer_Brand__Accordion-module__Accordion--disableAnimation____eC_8>.Primer_Brand__Accordion-module__Accordion__content___GhUVO,.Primer_Brand__Accordion-module__Accordion--disableAnimation____eC_8>.Primer_Brand__Accordion-module__Accordion__content___GhUVO>.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof{transition:none}.Primer_Brand__Accordion-module__Accordion--default___R_5ld{border-bottom:var(--brand-borderWidth-thin) solid var(--brand-Accordion-border-color-default)}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT:not(.Primer_Brand__Accordion-module__Accordion___RSoMC .Primer_Brand__Accordion-module__Accordion___RSoMC)>.Primer_Brand__Accordion-module__Accordion__summary___zYOXC{background-color:var(--brand-color-canvas-subtle);border-block:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);padding-block:var(--base-size-20);padding-inline:var(--base-size-20);justify-content:flex-start;align-items:center;gap:0}.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI:before{content:"";width:calc(var(--base-size-8) - 1px);height:var(--base-size-12);background-color:var(--brand-Accordion-indicator-idle);flex-shrink:0;margin-inline-end:var(--base-size-12);display:block}.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI:hover:before{background-color:var(--brand-Accordion-indicator-hover)}details[open]>.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI:before{background-color:var(--brand-Accordion-indicator-active)}.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI h3,.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI h4,.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI h5,.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI h6{font-family:var(--brand-fontStack-monospace);font-size:var(--brand-text-size-100);font-weight:var(--brand-text-weight-500);line-height:var(--brand-text-lineHeight-100);letter-spacing:.15px;text-transform:uppercase}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT:not(.Primer_Brand__Accordion-module__Accordion___RSoMC .Primer_Brand__Accordion-module__Accordion___RSoMC)+.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT:not(.Primer_Brand__Accordion-module__Accordion___RSoMC .Primer_Brand__Accordion-module__Accordion___RSoMC)>.Primer_Brand__Accordion-module__Accordion__summary___zYOXC{border-block-start:none}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT:not(.Primer_Brand__Accordion-module__Accordion___RSoMC .Primer_Brand__Accordion-module__Accordion___RSoMC)>.Primer_Brand__Accordion-module__Accordion__content___GhUVO{border-block-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT:not(.Primer_Brand__Accordion-module__Accordion___RSoMC .Primer_Brand__Accordion-module__Accordion___RSoMC)>.Primer_Brand__Accordion-module__Accordion__content___GhUVO>.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof{padding-block-start:var(--base-size-12);padding-inline:var(--base-size-20)}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT:not(.Primer_Brand__Accordion-module__Accordion___RSoMC .Primer_Brand__Accordion-module__Accordion___RSoMC)>.Primer_Brand__Accordion-module__Accordion__content___GhUVO>.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof:after{block-size:var(--base-size-12)}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT .Primer_Brand__Accordion-module__Accordion--default___R_5ld:last-child{border-bottom:none}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT .Primer_Brand__Accordion-module__Accordion--default___R_5ld:last-child:after{display:none}.Primer_Brand__Accordion-module__Accordion--default___R_5ld:after{content:"";background-color:var(--brand-Accordion-border-color-default);height:var(--brand-borderWidth-thin);transition:background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-glide), transform var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);transform-origin:50% 100%;width:100%;position:absolute;bottom:0;left:0;transform:scaleY(0)}.Primer_Brand__Accordion-module__Accordion--default___R_5ld:hover:after,details[open].Primer_Brand__Accordion-module__Accordion--default___R_5ld:after{background-color:var(--brand-color-accent-primary);transform:scaleY(1)}.Primer_Brand__Accordion-module__Accordion__summary___zYOXC{cursor:pointer;padding:var(--base-size-24) 0;justify-content:space-between;align-items:center;display:flex;position:relative}.Primer_Brand__Accordion-module__Accordion__summary___zYOXC::-webkit-details-marker{display:none}.Primer_Brand__Accordion-module__Accordion__summary___zYOXC:focus-visible{outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus)}details[open].Primer_Brand__Accordion-module__Accordion___RSoMC:has(>summary:focus-visible){outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus);outline-offset:var(--base-size-2)}details[open].Primer_Brand__Accordion-module__Accordion___RSoMC>.Primer_Brand__Accordion-module__Accordion__summary___zYOXC:focus-visible{outline:none}.Primer_Brand__Accordion-module__Accordion__summary-toggle___YSgM_{cursor:pointer;height:var(--base-size-24);width:var(--base-size-24);color:var(--brand-color-text-emphasized);justify-content:center;align-items:center;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.Primer_Brand__Accordion-module__Accordion__summary___zYOXC:not(.Primer_Brand__Accordion-module__Accordion__summary--reversed-toggles____uX_W) .Primer_Brand__Accordion-module__Accordion__summary-toggle___YSgM_{right:0}.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI .Primer_Brand__Accordion-module__Accordion__summary-toggle___YSgM_{color:var(--brand-color-text-default);order:1;margin-inline-start:auto;position:static;transform:none}.Primer_Brand__Accordion-module__Accordion__summary--reversed-toggles____uX_W .Primer_Brand__Accordion-module__Accordion__summary-toggle___YSgM_{left:0}.Primer_Brand__Accordion-module__Accordion__summary--default___LV2dT .Primer_Brand__Accordion-module__Accordion__summary-toggle___YSgM_{color:var(--brand-Accordion-toggle-color-start,var(--brand-color-text-emphasized))}.Primer_Brand__Accordion-module__Accordion__summary-toggleIcon___WFUk5{transform-origin:50%;transition:transform var(--brand-animation-duration-fast) var(--brand-animation-easing-glide)}details[open]>.Primer_Brand__Accordion-module__Accordion__summary___zYOXC .Primer_Brand__Accordion-module__Accordion__summary-toggleIcon___WFUk5{transform:rotate(-180deg)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-default___Hd_up{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-default)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-blue___TGA5S{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-blue)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-blue-purple___dnh9G{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-blue-purple-start)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-coral____IedP{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-coral)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-green___Q_oKN{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-green)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-green-blue___UPhxW{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-green-blue-start)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-gray___XAdlE{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-gray)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-indigo___MbEJo{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-indigo)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-lemon___yKljE{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-lemon)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-lime___dXlEo{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-lime)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-orange___DIqep{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-orange)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-pink___JQk2J{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-pink)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-pink-blue___8wMk6{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-pink-blue-start)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-purple___P3aRT{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-purple)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-purple-red___DuF8G{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-purple-red-start)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-red___uRFGS{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-red)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-red-orange___cmXlh{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-red-orange-start)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-teal___fE9fd{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-teal)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-yellow___ws5We{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-yellow)}.Primer_Brand__Accordion-module__Accordion__summary--default___LV2dT:not(.Primer_Brand__Accordion-module__Accordion__summary--reversed-toggles____uX_W){padding-inline-end:var(--base-size-48)}.Primer_Brand__Accordion-module__Accordion__summary--reversed-toggles____uX_W{padding-inline-start:var(--base-size-48)}.Primer_Brand__Accordion-module__Accordion__content___GhUVO,.Primer_Brand__Accordion-module__Accordion__content___GhUVO p,.Primer_Brand__Accordion-module__Accordion__content___GhUVO span:not(.Primer_Brand__Accordion-module__Accordion__summary-toggle___YSgM_),.Primer_Brand__Accordion-module__Accordion__content___GhUVO ul,.Primer_Brand__Accordion-module__Accordion__content___GhUVO ol{color:var(--brand-color-text-muted);font-family:var(--brand-fontStack-sansSerif);font-weight:var(--brand-text-weight-200);font-size:var(--brand-text-size-200);line-height:var(--brand-text-lineHeight-200)}.Primer_Brand__Accordion-module__Accordion__content___GhUVO{max-height:0;transition:max-height var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);position:relative;overflow:hidden}.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof{opacity:0;transition:opacity var(--brand-animation-duration-fast) var(--brand-animation-easing-glide)}.Primer_Brand__Accordion-module__Accordion--default___R_5ld>.Primer_Brand__Accordion-module__Accordion__content___GhUVO{top:calc(var(--base-size-2) - var(--base-size-24))}.Primer_Brand__Accordion-module__Accordion__summary--default___LV2dT+.Primer_Brand__Accordion-module__Accordion__content___GhUVO>.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof:before{content:"";block-size:var(--base-size-12);display:block}.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof:after{content:"";display:block}[data-color-mode=dark] .Primer_Brand__Accordion-module__Accordion__content___GhUVO{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:auto}@media (prefers-color-scheme:dark){[data-color-mode=auto] .Primer_Brand__Accordion-module__Accordion__content___GhUVO{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:auto}}.Primer_Brand__Accordion-module__Accordion__content___GhUVO p:not(:first-child){margin-block-start:var(--base-size-16)}.Primer_Brand__Accordion-module__Accordion__content___GhUVO a{color:var(--brand-InlineLink-color-rest);-webkit-text-decoration:underline;text-decoration:underline;-webkit-text-decoration-color:var(--brand-InlineLink-color-rest);text-decoration-color:var(--brand-InlineLink-color-rest);text-decoration-thickness:var(--brand-borderWidth-thin);text-underline-position:under;transition:var(--brand-InlineLink-transition-timing) text-decoration;position:relative}.Primer_Brand__Accordion-module__Accordion__content___GhUVO a:hover{text-decoration-thickness:var(--brand-borderWidth-thick)}.Primer_Brand__Accordion-module__Accordion__content___GhUVO a,.Primer_Brand__Accordion-module__Accordion__content___GhUVO a>span{font-weight:inherit;color:var(--brand-InlineLink-color-rest)}.Primer_Brand__Accordion-module__Accordion__content___GhUVO a:active,.Primer_Brand__Accordion-module__Accordion__content___GhUVO a:active>span{color:var(--brand-InlineLink-color-pressed)}details[open]>.Primer_Brand__Accordion-module__Accordion__content___GhUVO{max-height:var(--brand-Accordion-content-height);z-index:0;position:relative}details[open].Primer_Brand__Accordion-module__Accordion--disableAnimation____eC_8>.Primer_Brand__Accordion-module__Accordion__content___GhUVO{max-height:none}details[open]>.Primer_Brand__Accordion-module__Accordion__content___GhUVO>.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof{opacity:1}details.Primer_Brand__Accordion-module__Accordion--closing___R_qJH>.Primer_Brand__Accordion-module__Accordion__content___GhUVO{max-height:0}details.Primer_Brand__Accordion-module__Accordion--closing___R_qJH>.Primer_Brand__Accordion-module__Accordion__content___GhUVO>.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof{opacity:0}.Primer_Brand__Accordion-module__Accordion__summary--default___LV2dT+.Primer_Brand__Accordion-module__Accordion__content___GhUVO,details[open]>.Primer_Brand__Accordion-module__Accordion__summary--default___LV2dT+.Primer_Brand__Accordion-module__Accordion__content___GhUVO,details.Primer_Brand__Accordion-module__Accordion--closing___R_qJH>.Primer_Brand__Accordion-module__Accordion__summary--default___LV2dT+.Primer_Brand__Accordion-module__Accordion__content___GhUVO{margin-block-start:0}details.Primer_Brand__Accordion-module__Accordion--closing___R_qJH>.Primer_Brand__Accordion-module__Accordion__summary___zYOXC .Primer_Brand__Accordion-module__Accordion__summary-toggleIcon___WFUk5{transform:rotate(0)}details[open]>.Primer_Brand__Accordion-module__Accordion__summary--reversed-toggles____uX_W+.Primer_Brand__Accordion-module__Accordion__content___GhUVO{padding-inline-start:var(--base-size-48)}@media screen and (width>=48rem){.Primer_Brand__Accordion-module__Accordion__summary___zYOXC{gap:var(--base-size-40)}}@media (prefers-reduced-motion:reduce){.Primer_Brand__Accordion-module__Accordion___RSoMC,.Primer_Brand__Accordion-module__Accordion___RSoMC:before,.Primer_Brand__Accordion-module__Accordion___RSoMC:after,.Primer_Brand__Accordion-module__Accordion___RSoMC *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

package/esm/Accordion/Accordion.module.js

@@ -1,4 +1,4 @@
-import './Accordion.module-B-iFuyHy.css';//#region src/Accordion/Accordion.module.css
+import './Accordion.module-B-vGHUg7.css';//#region src/Accordion/Accordion.module.css
 var e = "Primer_Brand__Accordion-module__Accordion___RSoMC", t = "Primer_Brand__Accordion-module__Accordion__content___GhUVO", n = "Primer_Brand__Accordion-module__Accordion__summary___zYOXC", r = {
 	Accordion: e,
 	"Accordion--disableAnimation": "Primer_Brand__Accordion-module__Accordion--disableAnimation____eC_8",