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

package/docs/components/CarouselPagination/index.md

@@ -0,0 +1,96 @@
+---
+title: Carousel pagination
+description: Use carousel pagination to navigate a collection of items.
+keywords: ['carousel', 'pagination', 'navigation', 'controls']
+ready: true
+source: https://github.com/primer/brand/blob/main/packages/react/src/CarouselPagination/CarouselPagination.tsx
+storybook: '/brand/storybook/?path=/story/components-carouselpagination--playground'
+---
+
+```js
+import {CarouselPagination} from '@primer/react-brand'
+```
+
+## Examples
+
+### Default
+
+```jsx filename="noinline"
+const App = () => {
+  const [activeIndex, setActiveIndex] = React.useState(0)
+
+  return (
+    <CarouselPagination
+      aria-label="Choose featured story"
+      itemCount={5}
+      activeIndex={activeIndex}
+      onChange={setActiveIndex}
+    />
+  )
+}
+
+render(<App />)
+```
+
+### Looping navigation
+
+Use `loop` to let the previous and next controls wrap between the first and last items.
+
+```jsx filename="noinline"
+const App = () => {
+  const [activeIndex, setActiveIndex] = React.useState(0)
+
+  return (
+    <CarouselPagination
+      aria-label="Choose featured story"
+      itemCount={5}
+      activeIndex={activeIndex}
+      loop
+      onChange={setActiveIndex}
+    />
+  )
+}
+
+render(<App />)
+```
+
+### Accessible labels
+
+Provide translated labels for both arrow controls and the numbered item selectors.
+
+```jsx filename="noinline"
+const App = () => {
+  const [activeIndex, setActiveIndex] = React.useState(0)
+
+  return (
+    <CarouselPagination
+      aria-label="Elegir testimonio"
+      itemCount={3}
+      activeIndex={activeIndex}
+      labels={{
+        previous: 'Testimonio anterior',
+        next: 'Testimonio siguiente',
+        item: 'Testimonio {current} de {total}',
+      }}
+      onChange={setActiveIndex}
+    />
+  )
+}
+
+render(<App />)
+```
+
+## Component props
+
+| Name                    | Type                                                  | Default | Description                                                                |
+| :---------------------- | :---------------------------------------------------- | :------ | :------------------------------------------------------------------------- |
+| `itemCount`             | `number`                                              |         | Total number of carousel items. Controls are hidden when fewer than two.   |
+| `activeIndex`           | `number`                                              |         | Zero-based active item index.                                              |
+| `onChange`              | `(activeIndex: number) => void`                       |         | Requests a new active index. The parent remains responsible for selection. |
+| `loop`                  | `boolean`                                             | `false` | Wraps previous and next navigation at the collection boundaries.           |
+| `labels`                | `CarouselPaginationLabels`                            | English | Accessible labels for arrow controls and the numbered selectors.           |
+| `itemAttributesBuilder` | `(index: number) => CarouselPaginationItemAttributes` |         | Adds attributes or a composed click handler to an item selector.           |
+| `aria-label`            | `string`                                              |         | Required accessible name for the complete control group.                   |
+| `className`             | `string`                                              |         | Custom root class.                                                         |
+| `id`                    | `string`                                              |         | Custom root ID.                                                            |
+| `ref`                   | `React.Ref<HTMLDivElement>`                           |         | Ref to the root element.                                                   |

package/docs/components/IconButton/react.md

@@ -1,6 +1,6 @@
 ---
 title: Icon button
-description: Use an icon button to represent an action with an Octicon instead of a visible text label.
+description: Use an icon button to represent an action with an icon instead of a visible text label.
 keywords: ['action', 'button', 'control', 'icon', 'interactive']
 ready: true
 a11yReviewed: false
@@ -20,6 +20,24 @@ import {IconButton} from '@primer/react-brand'
 <IconButton icon={HeartIcon} aria-label="Favorite" />
 ```
 
+### Custom icons
+
+Pass an SVG element to use a custom icon.
+
+```jsx
+<IconButton
+  aria-label="Play"
+  icon={
+    <svg viewBox="0 0 16 16" fill="none">
+      <path
+        d="M13.3777 6.94756C14.2069 7.40341 14.2069 8.59489 13.3777 9.05073L5.37808 13.4483C4.57834 13.8879 3.60001 13.3093 3.60001 12.3967L3.60001 3.60161C3.60001 2.689 4.57834 2.1104 5.37808 2.55003L13.3777 6.94756Z"
+        fill="currentColor"
+      />
+    </svg>
+  }
+/>
+```
+
 ### Variants
 
 IconButton inherits standard variants from Button and adds `danger` and `invisible` variants.
@@ -173,17 +191,17 @@ Inactive controls use the same muted style for every variant and retain focus an
 
 ## Component props
 
-| Name                  | Type                 |    Default    | Required | Description                                                                             |
-| :-------------------- | :------------------- | :-----------: | :------: | :-------------------------------------------------------------------------------------- |
-| `icon`                | `Icon`               |               |  `true`  | Octicon component rendered in the center of the button                                  |
-| `aria-label`          | `string`             |               |  `true`  | Required non-empty accessible action name and default tooltip label                     |
-| `variant`             | `IconButtonVariants` | `'secondary'` |  `false` | Button variants plus IconButton-only `danger` and `invisible` variations                |
-| `size`                | `IconButtonSizes`    |   `'medium'`  |  `false` | Control sizes inherited from Button                                                     |
-| `description`         | `string`             |  `undefined`  |  `false` | Supplementary tooltip description                                                       |
-| `tooltipDirection`    | `TooltipDirections`  |     `'s'`     |  `false` | Preferred tooltip direction                                                             |
-| `inactive`            | `boolean`            |    `false`    |  `false` | Applies variant-independent muted styling while preserving input for required feedback  |
-| `loading`             | `boolean`            |    `false`    |  `false` | Replaces the icon with a loading indicator and blocks activation without removing focus |
-| `loadingAnnouncement` | `string`             |  `'Loading'`  |  `false` | Polite live-region message announced while loading                                      |
-| `rounded`             | `boolean`            |    `false`    |  `false` | Renders the control with a fully circular shape                                         |
-| `disabled`            | `boolean`            |    `false`    |  `false` | Disables the control using Button's native or polymorphic behavior                      |
-| `as`                  | `React.ElementType`  |   `'button'`  |  `false` | Element rendered by Button; provide `href` when rendering an anchor                     |
+| Name                  | Type                   |    Default    | Required | Description                                                                             |
+| :-------------------- | :--------------------- | :-----------: | :------: | :-------------------------------------------------------------------------------------- |
+| `icon`                | `Icon \| ReactElement` |               |  `true`  | Octicon component or custom SVG element rendered in the center of the button            |
+| `aria-label`          | `string`               |               |  `true`  | Required non-empty accessible action name and default tooltip label                     |
+| `variant`             | `IconButtonVariants`   | `'secondary'` |  `false` | Button variants plus IconButton-only `danger` and `invisible` variations                |
+| `size`                | `IconButtonSizes`      |   `'medium'`  |  `false` | Control sizes inherited from Button                                                     |
+| `description`         | `string`               |  `undefined`  |  `false` | Supplementary tooltip description                                                       |
+| `tooltipDirection`    | `TooltipDirections`    |     `'s'`     |  `false` | Preferred tooltip direction                                                             |
+| `inactive`            | `boolean`              |    `false`    |  `false` | Applies variant-independent muted styling while preserving input for required feedback  |
+| `loading`             | `boolean`              |    `false`    |  `false` | Replaces the icon with a loading indicator and blocks activation without removing focus |
+| `loadingAnnouncement` | `string`               |  `'Loading'`  |  `false` | Polite live-region message announced while loading                                      |
+| `rounded`             | `boolean`              |    `false`    |  `false` | Renders the control with a fully circular shape                                         |
+| `disabled`            | `boolean`              |    `false`    |  `false` | Disables the control using Button's native or polymorphic behavior                      |
+| `as`                  | `React.ElementType`    |   `'button'`  |  `false` | Element rendered by Button; provide `href` when rendering an anchor                     |

package/docs/components/Testimonial/react.md

@@ -22,8 +22,8 @@ import {Testimonial} from '@primer/react-brand'
     GitHub helps us ensure that we have our security controls baked into our pipelines all the way from the first line
     of code we're writing.
   </Testimonial.Quote>
-  <Testimonial.Name position="Staff Security Engineer">David Ross</Testimonial.Name>
-  <Testimonial.Avatar src="/images/avatar-mona.png" alt="Circular avatar from David Ross's GitHub profile" />
+  <Testimonial.Name position="Chief Octocat">Mona Lisa</Testimonial.Name>
+  <Testimonial.Avatar src="/images/avatar-mona.png" alt="Mona Lisa's avatar" />
 </Testimonial>
 ```
 
@@ -38,16 +38,16 @@ For an alternative visual appearance and layout, without altering semantic meani
       GitHub helps us ensure that we have our security controls baked into our pipelines all the way from the first line
       of code we&apos;re writing.
     </Testimonial.Quote>
-    <Testimonial.Name position="Staff Security Engineer">David Ross</Testimonial.Name>
-    <Testimonial.Avatar src="/images/avatar-mona.png" alt="Circular avatar from David Ross's GitHub profile" />
+    <Testimonial.Name position="Chief Octocat">Mona Lisa</Testimonial.Name>
+    <Testimonial.Avatar src="/images/avatar-mona.png" alt="Mona Lisa's avatar" />
   </Testimonial>
   <Testimonial variant="subtle">
     <Testimonial.Quote>
       GitHub helps us ensure that we have our security controls baked into our pipelines all the way from the first line
       of code we&apos;re writing.
     </Testimonial.Quote>
-    <Testimonial.Name position="Staff Security Engineer">David Ross</Testimonial.Name>
-    <Testimonial.Avatar src="/images/avatar-mona.png" alt="Circular avatar from David Ross's GitHub profile" />
+    <Testimonial.Name position="Mona's Sidekick">Hubot</Testimonial.Name>
+    <Testimonial.Avatar src="/images/avatar-hubot.png" alt="Hubot's avatar" />
   </Testimonial>
 </Stack>
 ```
@@ -62,7 +62,7 @@ A logo (or similar) visual can be provided as an alternative to avatars.
     GitHub helps us ensure that we have our security controls baked into our pipelines all the way from the first line
     of code we&apos;re writing.
   </Testimonial.Quote>
-  <Testimonial.Name>David Ross</Testimonial.Name>
+  <Testimonial.Name position="Mona's Sidekick">Hubot</Testimonial.Name>
   <Testimonial.Logo>
     <img alt="GitHub Logo" src="https://github.githubassets.com/images/modules/logos_page/GitHub-Logo.png" width={60} />
   </Testimonial.Logo>
@@ -79,7 +79,7 @@ Use `size` to alternate the text size. Available options are `small` (default) a
     GitHub helps us ensure that we have our security controls baked into our pipelines all the way from the first line
     of code we&apos;re writing.
   </Testimonial.Quote>
-  <Testimonial.Name position="Staff Software Engineer">David Ross</Testimonial.Name>
+  <Testimonial.Name position="Chief Octocat">Mona Lisa</Testimonial.Name>
 </Testimonial>
 ```
 
@@ -96,14 +96,14 @@ Use `Stack` to help position multiple, adjacent Testimonials alongside one anoth
       GitHub helps us ensure that we have our security controls baked into our pipelines all the way from the first line
       of code we&apos;re writing.
     </Testimonial.Quote>
-    <Testimonial.Name>David Ross</Testimonial.Name>
+    <Testimonial.Name position="Chief Octocat">Mona Lisa</Testimonial.Name>
   </Testimonial>
   <Testimonial>
     <Testimonial.Quote>
       GitHub helps us ensure that we have our security controls baked into our pipelines all the way from the first line
       of code we&apos;re writing.
     </Testimonial.Quote>
-    <Testimonial.Name>David Ross</Testimonial.Name>
+    <Testimonial.Name position="Mona's Sidekick">Hubot</Testimonial.Name>
   </Testimonial>
 </Stack>
 ```
@@ -116,7 +116,7 @@ Use the `expressive` variant to place the quote on the left and the attribution
     GitHub helps us ensure that we have our security controls baked into our pipelines all the way from the first line
     of code we&apos;re writing.
   </Testimonial.Quote>
-  <Testimonial.Name position="Staff Security Engineer">David Ross</Testimonial.Name>
+  <Testimonial.Name position="Chief Octocat">Mona Lisa</Testimonial.Name>
   <Testimonial.Logo>
     <img alt="GitHub Logo" src="https://github.githubassets.com/images/modules/logos_page/GitHub-Logo.png" width={60} />
   </Testimonial.Logo>
@@ -133,7 +133,7 @@ Pass additional content about the testimonial provider using `position`.
     GitHub helps us ensure that we have our security controls baked into our pipelines all the way from the first line
     of code we&apos;re writing.
   </Testimonial.Quote>
-  <Testimonial.Name position="Staff Software Engineer">David Ross</Testimonial.Name>
+  <Testimonial.Name position="Mona's Sidekick">Hubot</Testimonial.Name>
 </Testimonial>
 ```
 
@@ -143,16 +143,18 @@ Pass additional content about the testimonial provider using `position`.
 
 `Testimonial` passes contextual data to its child inputs, labels, validation messaging and more.
 
-| Name             | Type                                                                                                           |   Default   | Description                                             |
-| :--------------- | :------------------------------------------------------------------------------------------------------------- | :---------: | :------------------------------------------------------ |
-| `children`       | `'Testimonial.Quote' \| 'Testimonial.Name' \| 'Testimonial.Logo' \| 'Testimonial.Avatar' \| 'React.ReactNode'` |             | Valid child nodes                                       |
-| `className`      | `string`                                                                                                       |             | Sets a custom class                                     |
-| `id`             | `string`                                                                                                       |             | Sets a custom id                                        |
-| `ref`            | `React.RefObject`                                                                                              |             | Forward a Ref to the underlying DOM node                |
-| `size`           |                                                                                                                |  `'small'`  | Set size of quote's text                                |
-| `quoteMarkColor` |                                                                                                                | `'default'` | Color or gradient fill of the the quote mark.           |
-| `variant`        |                                                                                                                | `'minimal'` | Alternative visual appearance.                          |
-| `hasBorder`      | `boolean`                                                                                                      |    `true`   | Applies an optional border where a variant supports it. |
+| Name                 | Type                                                                                                           |   Default   | Description                                             |
+| :------------------- | :------------------------------------------------------------------------------------------------------------- | :---------: | :------------------------------------------------------ |
+| `children`           | `'Testimonial.Quote' \| 'Testimonial.Name' \| 'Testimonial.Logo' \| 'Testimonial.Avatar' \| 'React.ReactNode'` |             | Valid child nodes                                       |
+| `className`          | `string`                                                                                                       |             | Sets a custom class                                     |
+| `quoteMarkClassName` | `string`                                                                                                       |             | Class applied to the quote mark.                        |
+| `mediaClassName`     | `string`                                                                                                       |             | Class applied to the attribution wrapper.               |
+| `id`                 | `string`                                                                                                       |             | Sets a custom id                                        |
+| `ref`                | `React.RefObject`                                                                                              |             | Forward a Ref to the underlying DOM node                |
+| `size`               |                                                                                                                |  `'small'`  | Set size of quote's text                                |
+| `quoteMarkColor`     |                                                                                                                |  `'green'`  | Solid color of the quote mark.                          |
+| `variant`            |                                                                                                                | `'minimal'` | Alternative visual appearance.                          |
+| `hasBorder`          | `boolean`                                                                                                      |    `true`   | Applies an optional border where a variant supports it. |
 
 ### Testimonial.Name `Required`
 
@@ -189,3 +191,7 @@ Pass additional content about the testimonial provider using `position`.
 | `className` | `string`          |         | Applies a custom class                                 |
 | `id`        | `string`          |         | Sets a custom id                                       |
 | `ref`       | `React.RefObject` |         | Forward a Ref to the underlying DOM node               |
+
+## Related components
+
+- [Testimonial group](../TestimonialGroup/index.md): To display a collection of testimonials in a carousel.

package/docs/components/TestimonialGroup/index.md

@@ -0,0 +1,152 @@
+---
+title: Testimonial group
+description: Display a collection of testimonials with carousel navigation.
+keywords: ['testimonial', 'quote', 'carousel', 'customer', 'social proof']
+ready: true
+source: https://github.com/primer/brand/blob/main/packages/react/src/TestimonialGroup/TestimonialGroup.tsx
+storybook: '/brand/storybook/?path=/story/components-testimonialgroup--playground'
+---
+
+```js
+import {Testimonial, TestimonialGroup} from '@primer/react-brand'
+```
+
+## Examples
+
+### Default
+
+```jsx
+<TestimonialGroup labels={{carousel: 'Customer testimonials'}}>
+  <Testimonial>
+    <Testimonial.Quote>Our team spends more time solving problems and less time on repetitive work.</Testimonial.Quote>
+    <Testimonial.Avatar src="/images/avatar-mona.png" alt="" />
+    <Testimonial.Name position="Chief Octocat">Mona Lisa</Testimonial.Name>
+  </Testimonial>
+  <Testimonial>
+    <Testimonial.Quote>We build better software when everyone can contribute.</Testimonial.Quote>
+    <Testimonial.Avatar src="/images/avatar-hubot.png" alt="" />
+    <Testimonial.Name position="Mona's Sidekick">Hubot</Testimonial.Name>
+  </Testimonial>
+</TestimonialGroup>
+```
+
+### Without avatars
+
+```jsx
+<TestimonialGroup aria-label="Team testimonials">
+  <Testimonial>
+    <Testimonial.Quote>Our tools help the whole team work together.</Testimonial.Quote>
+    <Testimonial.Name position="Chief Octocat">Mona Lisa</Testimonial.Name>
+  </Testimonial>
+  <Testimonial>
+    <Testimonial.Quote>Shared patterns give us more time to focus on the experience.</Testimonial.Quote>
+    <Testimonial.Name position="Mona's Sidekick">Hubot</Testimonial.Name>
+  </Testimonial>
+</TestimonialGroup>
+```
+
+### Testimonial variants
+
+`TestimonialGroup` supports all available [`Testimonial`](../Testimonial/react.md) variants. Always use the same `variant`. Do not mix them.
+
+```jsx
+<TestimonialGroup aria-label="Customer testimonials">
+  <Testimonial variant="expressive">
+    <Testimonial.Quote>Our team can focus on building the right experience.</Testimonial.Quote>
+    <Testimonial.Avatar src="/images/avatar-mona.png" alt="" />
+    <Testimonial.Name position="Chief Octocat">Mona Lisa</Testimonial.Name>
+  </Testimonial>
+  <Testimonial variant="expressive">
+    <Testimonial.Quote>Consistent tools help us turn ideas into working software.</Testimonial.Quote>
+    <Testimonial.Avatar src="/images/avatar-hubot.png" alt="" />
+    <Testimonial.Name position="Mona's Sidekick">Hubot</Testimonial.Name>
+  </Testimonial>
+</TestimonialGroup>
+```
+
+### Localization
+
+Provide complete phrases through `labels` so translations can control word order and punctuation. An explicit `aria-label` overrides `labels.carousel`.
+
+```jsx
+<TestimonialGroup
+  lang="es"
+  labels={{
+    carousel: 'Testimonios',
+    controlsPrev: 'Anterior',
+    controlsNext: 'Siguiente',
+    controlsNavigation: 'Controles de {carousel}',
+    carouselRoleDescription: 'carrusel',
+    slideRoleDescription: 'testimonio',
+    indicator: 'Ver testimonio {current}',
+    slide: 'Testimonio {current} de {total}',
+    announcement: '{author}: testimonio {current} de {total}',
+  }}
+>
+  <Testimonial>
+    <Testimonial.Quote>
+      Nuestro equipo puede crear software con confianza y colaborar en un solo lugar.
+    </Testimonial.Quote>
+    <Testimonial.Avatar src="/images/avatar-mona.png" alt="" />
+    <Testimonial.Name position="Chief Octocat">Mona Lisa</Testimonial.Name>
+  </Testimonial>
+  <Testimonial>
+    <Testimonial.Quote>
+      Los componentes compartidos nos permiten trabajar juntos y mejorar cada experiencia.
+    </Testimonial.Quote>
+    <Testimonial.Avatar src="/images/avatar-hubot.png" alt="" />
+    <Testimonial.Name position="Mona's Sidekick">Hubot</Testimonial.Name>
+  </Testimonial>
+</TestimonialGroup>
+```
+
+## Component props
+
+| Name                 | Type                            | Default           | Description                                             |
+| :------------------- | :------------------------------ | :---------------- | :------------------------------------------------------ |
+| `children`           | `ReactNode`                     |                   | Direct `Testimonial` children.                          |
+| `defaultActiveIndex` | `number`                        | `0`               | Initial testimonial: 0 for the first, 1 for the second. |
+| `onChange`           | `(activeIndex: number) => void` |                   | Called after selection changes; the first index is 0.   |
+| `labels`             | `object`                        | English labels    | Accessible control labels and slide announcements.      |
+| `aria-label`         | `string`                        | `labels.carousel` | Accessible name override for the carousel.              |
+| `className`          | `string`                        |                   | Custom root class.                                      |
+| `id`                 | `string`                        |                   | Custom root ID.                                         |
+| `ref`                | `React.Ref<HTMLDivElement>`     |                   | Ref to the root element.                                |
+
+### Labels
+
+Provide partial overrides through `labels`. Unspecified fields keep their English defaults.
+
+| Name                      | Default                                        | Description                                  |
+| :------------------------ | :--------------------------------------------- | :------------------------------------------- |
+| `carousel`                | `'Testimonials'`                               | Carousel name when `aria-label` is omitted.  |
+| `controlsPrev`            | `'Previous testimonial'`                       | Previous control label.                      |
+| `controlsNext`            | `'Next testimonial'`                           | Next control label.                          |
+| `controlsNavigation`      | `'{carousel} navigation'`                      | Accessible name for the pagination controls. |
+| `carouselRoleDescription` | `'carousel'`                                   | Localized carousel role description.         |
+| `slideRoleDescription`    | `'slide'`                                      | Localized slide role description.            |
+| `indicator`               | `'Go to testimonial {current}'`                | Complete item selector label.                |
+| `slide`                   | `'Testimonial {current} of {total}'`           | Complete slide label.                        |
+| `announcement`            | `'Testimonial {current} of {total}: {author}'` | Complete announcement with an author.        |
+
+Templates use simple placeholder replacement, not ICU message syntax. Select translated templates and plural forms through your application's localization system.
+
+| Placeholder  | Available in                         | Value                                                                    |
+| :----------- | :----------------------------------- | :----------------------------------------------------------------------- |
+| `{carousel}` | `controlsNavigation`                 | The resolved carousel name, including an explicit `aria-label` override. |
+| `{current}`  | `indicator`, `slide`, `announcement` | One-based testimonial position.                                          |
+| `{total}`    | `indicator`, `slide`, `announcement` | Total number of testimonials.                                            |
+| `{author}`   | `announcement`                       | The selected testimonial's plain-text `Testimonial.Name`.                |
+
+When the selected testimonial has no nonempty plain-text name, its complete `slide` phrase is announced instead. Unknown placeholders remain unchanged. Testimonial content is not translated automatically.
+
+## Animation timing
+
+Override these CSS custom properties on `TestimonialGroup` or an ancestor to customize the fades. Use valid CSS durations such as `350ms` or `0.7s`.
+
+| Token                                      | Default | Description                    |
+| :----------------------------------------- | :------ | :----------------------------- |
+| `--brand-TestimonialGroup-fadeInDuration`  | `475ms` | Duration of the incoming fade. |
+| `--brand-TestimonialGroup-fadeOutDuration` | `250ms` | Duration of the outgoing fade. |
+
+Slide changes wait for the rendered fades, including their stagger delays. Reduced-motion preferences still make navigation immediate. Spacing and avatar geometry are not component-specific token overrides.

package/docs/components/index.md

@@ -14,6 +14,7 @@ description: Primer Brand UI components
 - [Button](Button/react.md): Use the button component for the main actions on a page or form.
 - [Button group](ButtonGroup/react.md): Use the button group component to group related buttons and action menus together.
 - [Card](Card/react.md): Use the card component to display information in a compact way and link to other internal pages.
+- [Carousel pagination](CarouselPagination/index.md): Use carousel pagination to navigate a collection of items.
 - [Comparison table](ComparisonTable/index.md): Use the comparison table component to compare two products or features in a table format.
 - [CTA banner](CTABanner/react.md): Use the CTA banner component to highlight and create urgency around user actions.
 - [CTA form](CTAForm/react.md): Use the CTA form component to create a form that is used to collect minimal information from users.
@@ -23,7 +24,7 @@ description: Primer Brand UI components
 - [Footnotes](Footnotes/react.md): Use footnotes to display contextual information and cite sources in the page content.
 - [Hero](Hero/react.md): Use the hero component to render a full-width banner at the top of a page.
 - [Icon](Icon/index.md): Use the icon component to display Octicons with an optional background
-- [Icon button](IconButton/react.md): Use an icon button to represent an action with an Octicon instead of a visible text label.
+- [Icon button](IconButton/react.md): Use an icon button to represent an action with an icon instead of a visible text label.
 - [IDE](IDE/index.md): Use the IDE to showcase a simulated integrated developer environment, complete with a code editor and AI chat that's intended to enhance code representation in marketing contexts.
 - [Image](Image/react.md): Use the image component to display a graphical representation.
 - [Inline code](InlineCode/index.md): Use InlineCode to render a short inline code fragment.
@@ -50,6 +51,7 @@ description: Primer Brand UI components
 - [Subdomain nav bar](SubdomainNavBar/index.md): Use the subdomain nav bar component for top level navigation for subdomain sites.
 - [Tabs](Tabs/index.md): Use Tabs to display a list of tabs with associated content panels.
 - [Testimonial](Testimonial/react.md): Use testimonial to display a quote from a customer or user.
+- [Testimonial group](TestimonialGroup/index.md): Display a collection of testimonials with carousel navigation.
 - [Tiles](Tiles/index.md): Use tiles to display a grid of logos or icons with optional links.
 - [Timeline](Timeline/index.md): Use the timeline component to display a list of connected items as a vertical timeline.
 - [Token](Token/index.md): Use Token to display compact metadata that describes or supports adjacent content.

package/docs/index.md

@@ -1,6 +1,6 @@
-# Primer Brand docs (v0.80.0-rc.e1dc6447)
+# Primer Brand docs (v0.80.0)
 
-These docs are bundled with `@primer/react-brand@0.80.0-rc.e1dc6447` and match your installed version.
+These docs are bundled with `@primer/react-brand@0.80.0` 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.
@@ -47,6 +47,7 @@ stylesheet and font setup. Component directories are named after their import (e
 - [Button](components/Button/react.md): Use the button component for the main actions on a page or form.
 - [Button group](components/ButtonGroup/react.md): Use the button group component to group related buttons and action menus together.
 - [Card](components/Card/react.md): Use the card component to display information in a compact way and link to other internal pages.
+- [Carousel pagination](components/CarouselPagination/index.md): Use carousel pagination to navigate a collection of items.
 - [Comparison table](components/ComparisonTable/index.md): Use the comparison table component to compare two products or features in a table format.
 - [Components](components/index.md): Primer Brand UI components
 - [CTA banner](components/CTABanner/react.md): Use the CTA banner component to highlight and create urgency around user actions.
@@ -57,7 +58,7 @@ stylesheet and font setup. Component directories are named after their import (e
 - [Footnotes](components/Footnotes/react.md): Use footnotes to display contextual information and cite sources in the page content.
 - [Hero](components/Hero/react.md): Use the hero component to render a full-width banner at the top of a page.
 - [Icon](components/Icon/index.md): Use the icon component to display Octicons with an optional background
-- [Icon button](components/IconButton/react.md): Use an icon button to represent an action with an Octicon instead of a visible text label.
+- [Icon button](components/IconButton/react.md): Use an icon button to represent an action with an icon instead of a visible text label.
 - [IDE](components/IDE/index.md): Use the IDE to showcase a simulated integrated developer environment, complete with a code editor and AI chat that's intended to enhance code representation in marketing contexts.
 - [Image](components/Image/react.md): Use the image component to display a graphical representation.
 - [Inline code](components/InlineCode/index.md): Use InlineCode to render a short inline code fragment.
@@ -84,6 +85,7 @@ stylesheet and font setup. Component directories are named after their import (e
 - [Subdomain nav bar](components/SubdomainNavBar/index.md): Use the subdomain nav bar component for top level navigation for subdomain sites.
 - [Tabs](components/Tabs/index.md): Use Tabs to display a list of tabs with associated content panels.
 - [Testimonial](components/Testimonial/react.md): Use testimonial to display a quote from a customer or user.
+- [Testimonial group](components/TestimonialGroup/index.md): Display a collection of testimonials with carousel navigation.
 - [Tiles](components/Tiles/index.md): Use tiles to display a grid of logos or icons with optional links.
 - [Timeline](components/Timeline/index.md): Use the timeline component to display a list of connected items as a vertical timeline.
 - [Token](components/Token/index.md): Use Token to display compact metadata that describes or supports adjacent content.

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",