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

package/docs/components/AnchorNav/index.md

@@ -21,7 +21,7 @@ import {AnchorNav} from '@primer/react-brand'
 ### Basic
 
 ```jsx
-<div style={{position: 'relative', overflowX: 'scroll', width: '100%'}}>
+<div style={{position: 'relative', overflowX: 'scroll', width: '100%', contain: 'layout'}}>
   <AnchorNav>
     <AnchorNav.Link href="#basic-section1">Section one</AnchorNav.Link>
     <AnchorNav.Link href="#basic-section2">Section two</AnchorNav.Link>
@@ -35,6 +35,7 @@ import {AnchorNav} from '@primer/react-brand'
     style={{
       padding: '100px 2rem',
       backgroundColor: 'var(--base-color-scale-lemon-0)',
+      color: 'var(--base-color-scale-black-0)',
     }}
   >
     Section 1
@@ -44,6 +45,7 @@ import {AnchorNav} from '@primer/react-brand'
     style={{
       padding: '100px 2rem',
       backgroundColor: 'var(--base-color-scale-yellow-0)',
+      color: 'var(--base-color-scale-black-0)',
     }}
   >
     Section 2
@@ -53,6 +55,7 @@ import {AnchorNav} from '@primer/react-brand'
     style={{
       padding: '100px 2rem',
       backgroundColor: 'var(--base-color-scale-lime-0)',
+      color: 'var(--base-color-scale-black-0)',
     }}
   >
     Section 3
@@ -62,6 +65,7 @@ import {AnchorNav} from '@primer/react-brand'
     style={{
       padding: '100px 2rem',
       backgroundColor: 'var(--base-color-scale-green-0)',
+      color: 'var(--base-color-scale-black-0)',
     }}
   >
     Section 4
@@ -71,6 +75,7 @@ import {AnchorNav} from '@primer/react-brand'
     style={{
       padding: '100px 2rem',
       backgroundColor: 'var(--base-color-scale-teal-0)',
+      color: 'var(--base-color-scale-black-0)',
     }}
   >
     Section 5
@@ -83,7 +88,7 @@ import {AnchorNav} from '@primer/react-brand'
 `AnchorNav` can also feature secondary actions. When two actions are present, the first will be presented as the `primary` variant.
 
 ```jsx
-<div style={{position: 'relative', overflowX: 'scroll', width: '100%'}}>
+<div style={{position: 'relative', overflowX: 'scroll', width: '100%', contain: 'layout'}}>
   <AnchorNav>
     <AnchorNav.Link href="#fewer-links-section1">Section one</AnchorNav.Link>
     <AnchorNav.Link href="#fewer-links-section2">Section two</AnchorNav.Link>
@@ -96,6 +101,7 @@ import {AnchorNav} from '@primer/react-brand'
     style={{
       padding: '100px 2rem',
       backgroundColor: 'var(--base-color-scale-lemon-0)',
+      color: 'var(--base-color-scale-black-0)',
     }}
   >
     Section 1
@@ -105,6 +111,7 @@ import {AnchorNav} from '@primer/react-brand'
     style={{
       padding: '100px 2rem',
       backgroundColor: 'var(--base-color-scale-yellow-0)',
+      color: 'var(--base-color-scale-black-0)',
     }}
   >
     Section 2
@@ -114,6 +121,7 @@ import {AnchorNav} from '@primer/react-brand'
     style={{
       padding: '100px 2rem',
       backgroundColor: 'var(--base-color-scale-lime-0)',
+      color: 'var(--base-color-scale-black-0)',
     }}
   >
     Section 3
@@ -126,7 +134,7 @@ import {AnchorNav} from '@primer/react-brand'
 `AnchorNav` implementations with fewer than `5` links, will automatically align links to the `start`.
 
 ```jsx
-<div style={{position: 'relative', overflowX: 'scroll', width: '100%'}}>
+<div style={{position: 'relative', overflowX: 'scroll', width: '100%', contain: 'layout'}}>
   <AnchorNav>
     <AnchorNav.Link href="#fewer-links-section1">Section one</AnchorNav.Link>
     <AnchorNav.Link href="#fewer-links-section2">Section two</AnchorNav.Link>
@@ -138,6 +146,7 @@ import {AnchorNav} from '@primer/react-brand'
     style={{
       padding: '100px 2rem',
       backgroundColor: 'var(--base-color-scale-lemon-0)',
+      color: 'var(--base-color-scale-black-0)',
     }}
   >
     Section 1
@@ -147,6 +156,7 @@ import {AnchorNav} from '@primer/react-brand'
     style={{
       padding: '100px 2rem',
       backgroundColor: 'var(--base-color-scale-yellow-0)',
+      color: 'var(--base-color-scale-black-0)',
     }}
   >
     Section 2
@@ -156,6 +166,7 @@ import {AnchorNav} from '@primer/react-brand'
     style={{
       padding: '100px 2rem',
       backgroundColor: 'var(--base-color-scale-lime-0)',
+      color: 'var(--base-color-scale-black-0)',
     }}
   >
     Section 3

package/docs/components/BreakoutBanner/react.md

@@ -116,7 +116,7 @@ The content alignment can be changed using the `align` prop on the root `Breakou
 ### Optional background color
 
 ```jsx
-<BreakoutBanner backgroundColor="var(--base-color-scale-blue-0)">
+<BreakoutBanner backgroundColor="var(--brand-color-success-subtle)">
   <BreakoutBanner.Heading>Where the most ambitious teams build great things</BreakoutBanner.Heading>
   <BreakoutBanner.Description>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis

package/docs/components/MinimalFooter/index.md

@@ -17,7 +17,9 @@ import {MinimalFooter} from '@primer/react-brand'
 ### Default
 
 ```jsx
-<MinimalFooter />
+<div style={{width: '100%'}}>
+  <MinimalFooter />
+</div>
 ```
 
 ### Footer links
@@ -25,35 +27,39 @@ import {MinimalFooter} from '@primer/react-brand'
 Use up to five `MinimalFooter.Link` children. Links can render as anchors or buttons.
 
 ```jsx
-<MinimalFooter>
-  <MinimalFooter.Link href="https://github.com/organizations/enterprise_plan">Try GitHub for free</MinimalFooter.Link>
-  <MinimalFooter.Link href="https://github.com/enterprise">Enterprise</MinimalFooter.Link>
-  <MinimalFooter.Link href="https://github.com/enterprise/contact">Email us</MinimalFooter.Link>
-</MinimalFooter>
+<div style={{width: '100%'}}>
+  <MinimalFooter>
+    <MinimalFooter.Link href="https://github.com/organizations/enterprise_plan">Try GitHub for free</MinimalFooter.Link>
+    <MinimalFooter.Link href="https://github.com/enterprise">Enterprise</MinimalFooter.Link>
+    <MinimalFooter.Link href="https://github.com/enterprise/contact">Email us</MinimalFooter.Link>
+  </MinimalFooter>
+</div>
 ```
 
 ### Footnotes
 
 ```jsx
-<MinimalFooter>
-  <MinimalFooter.Footnotes>
-    <Text>
-      <sup>1</sup>By signing up, GitHub may use your information to personalize and measure the effectiveness of
-      enterprise business ads, including those you see off of GitHub, promotional communications or marketing you
-      receive related to the Enterprise Marketing Pages. We will send you relevant emails and promotional information
-      based on your GitHub profile and any additional information provided in the sign-up form. If you change your mind,
-      you can unsubscribe at any time (an unsubscribe link is provided in every email). For more information on how
-      GitHub uses your personal information, please see the{' '}
-      <InlineLink
-        href="https://docs.github.com/en/site-policy/privacy-policies/github-privacy-statement"
-        target="_blank"
-      >
-        GitHub Privacy Statement
-      </InlineLink>
-      .
-    </Text>
-  </MinimalFooter.Footnotes>
-</MinimalFooter>
+<div style={{width: '100%'}}>
+  <MinimalFooter>
+    <MinimalFooter.Footnotes>
+      <Text>
+        <sup>1</sup>By signing up, GitHub may use your information to personalize and measure the effectiveness of
+        enterprise business ads, including those you see off of GitHub, promotional communications or marketing you
+        receive related to the Enterprise Marketing Pages. We will send you relevant emails and promotional information
+        based on your GitHub profile and any additional information provided in the sign-up form. If you change your
+        mind, you can unsubscribe at any time (an unsubscribe link is provided in every email). For more information on
+        how GitHub uses your personal information, please see the{' '}
+        <InlineLink
+          href="https://docs.github.com/en/site-policy/privacy-policies/github-privacy-statement"
+          target="_blank"
+        >
+          GitHub Privacy Statement
+        </InlineLink>
+        .
+      </Text>
+    </MinimalFooter.Footnotes>
+  </MinimalFooter>
+</div>
 ```
 
 ### Footer social links
@@ -61,7 +67,7 @@ Use up to five `MinimalFooter.Link` children. Links can render as anchors or but
 `MinimalFooter` will render all supported social links by default. Social links can be removed however, by passing `socialLinks={false}`. Alternatively, pass an array of valid social links to filter and reorder the default list.
 
 ```jsx
-<Stack>
+<Stack style={{width: '100%'}}>
   Hide all social links:
   <MinimalFooter socialLinks={false} />
   <br />
@@ -75,18 +81,20 @@ Use up to five `MinimalFooter.Link` children. Links can render as anchors or but
 Use `centerComponent` for an exceptional page-specific control or status indicator between the top and bottom sections.
 
 ```jsx
-<MinimalFooter
-  centerComponent={
-    <Stack direction="horizontal" gap="condensed" padding="none">
-      <Text size="200" variant="muted">
-        Status:
-      </Text>
-      <InlineLink href="https://www.githubstatus.com" size="200">
-        All systems operational
-      </InlineLink>
-    </Stack>
-  }
-/>
+<div style={{width: '100%'}}>
+  <MinimalFooter
+    centerComponent={
+      <Stack direction="horizontal" gap="condensed" padding="none">
+        <Text size="200" variant="muted">
+          Status:
+        </Text>
+        <InlineLink href="https://www.githubstatus.com" size="200">
+          All systems operational
+        </InlineLink>
+      </Stack>
+    }
+  />
+</div>
 ```
 
 ### Back to top
@@ -96,9 +104,11 @@ Use `MinimalFooter.BackToTop` to opt into a control in the top row that scrolls
 After keyboard activation, focus moves to the first `<main>` element, falling back to `<body>` or `<html>` when a main landmark is unavailable. Use `focusTargetId` to identify a different semantic top-of-page destination.
 
 ```jsx
-<MinimalFooter socialLinks={false}>
-  <MinimalFooter.BackToTop>Back to top</MinimalFooter.BackToTop>
-</MinimalFooter>
+<div style={{width: '100%'}}>
+  <MinimalFooter socialLinks={false}>
+    <MinimalFooter.BackToTop>Back to top</MinimalFooter.BackToTop>
+  </MinimalFooter>
+</div>
 ```
 
 ## Component props

package/docs/components/PricingOptions/index.md

@@ -392,15 +392,17 @@ automatically generated label:
 ```jsx
 function FeatureWithCustomContent({customContent}) {
   return (
-    <PricingOptions.FeatureListItem
-      infoTooltip="Interact with Copilot using natural language."
-      infoTooltipAriaLabel="More information about Chat in IDE and Mobile"
-    >
-      <>
-        Chat in IDE and Mobile
-        {customContent ? <Text>Custom footnote</Text> : null}
-      </>
-    </PricingOptions.FeatureListItem>
+    <PricingOptions.FeatureList>
+      <PricingOptions.FeatureListItem
+        infoTooltip="Interact with Copilot using natural language."
+        infoTooltipAriaLabel="More information about Chat in IDE and Mobile"
+      >
+        <>
+          Chat in IDE and Mobile
+          {customContent ? <Text>Custom footnote</Text> : null}
+        </>
+      </PricingOptions.FeatureListItem>
+    </PricingOptions.FeatureList>
   )
 }
 ```

package/docs/components/Prose/index.md

@@ -48,7 +48,7 @@ import {Prose} from '@primer/react-brand'
     <h4>Heading level  4</h4>
     <p>
       Secure code as you write it. Automatically review every change to your codebase and identify vulnerabilities
-      before they reach production. <a href="/#">Learn more here.</a>
+      before they reach production. <a href="https://github.com/security/advanced-security/code-security">Learn more about GitHub Code Security.</a>
     </p>
     <h5>Heading level 5</h5>
     <ol>

package/docs/components/River/react.md

@@ -9,7 +9,7 @@ storybook: '/brand/storybook/?path=/story/components-river--default'
 ---
 
 ```js
-import {River, RiverBreakout} from '@primer/react-brand'
+import {MinimalVideoPlayer, River, RiverBreakout} from '@primer/react-brand'
 ```
 
 ## Examples
@@ -150,11 +150,8 @@ The `gridline` variant adds lateral padding and applies a full-bleed visual back
 ```jsx
 <River style={{width: '100%'}} imageTextRatio="60:40">
   <River.Visual hasShadow={false}>
-    <video
-      loop
-      playsInline
-      autoPlay
-      muted
+    <MinimalVideoPlayer
+      title="Break issues into actionable tasks"
       poster="https://github.githubassets.com/images/modules/site/issues/issue-tasks-progress-placeholder.png"
     >
       <source
@@ -165,7 +162,7 @@ The `gridline` variant adds lateral padding and applies a full-bleed visual back
         type="video/mp4; codecs=avc1.4D401E,mp4a.40.2"
         src="https://github.githubassets.com/images/modules/site/issues/issue-tasks-progress.h264.mp4"
       />
-    </video>
+    </MinimalVideoPlayer>
   </River.Visual>
   <River.Content>
     <Heading>Break issues into actionable tasks</Heading>

package/docs/components/Tabs/index.md

@@ -92,7 +92,7 @@ function CustomPanels() {
   }, [])
 
   return (
-    <Stack alignItems="center">
+    <Stack alignItems="center" style={{width: '100%'}}>
       <Tabs onChange={handleTabChange} aria-label="Lifecycle tabs">
         <Tabs.Item id="tab-1" aria-controls="panel-1">
           Code

package/docs/components/Testimonial/react.md

@@ -32,7 +32,7 @@ import {Testimonial} from '@primer/react-brand'
 For an alternative visual appearance and layout, without altering semantic meaning.
 
 ```jsx
-<Stack direction="horizontal" gap="spacious" padding="none">
+<Stack direction={{narrow: 'vertical', regular: 'horizontal'}} gap="spacious" padding="none">
   <Testimonial variant="default">
     <Testimonial.Quote>
       GitHub helps us ensure that we have our security controls baked into our pipelines all the way from the first line
@@ -90,7 +90,7 @@ Use `size` to alternate the text size. Available options are `small` (default) a
 Use `Stack` to help position multiple, adjacent Testimonials alongside one another.
 
 ```jsx
-<Stack direction="horizontal" gap="spacious" padding="spacious">
+<Stack direction={{narrow: 'vertical', regular: 'horizontal'}} gap="spacious" padding="spacious">
   <Testimonial>
     <Testimonial.Quote>
       GitHub helps us ensure that we have our security controls baked into our pipelines all the way from the first line

package/docs/forms/ToggleSwitch/index.md

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

package/docs/index.md

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

package/esm/LogoSuite/LogoSuite.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LogoSuite.d.ts","sourceRoot":"","sources":["../../src/LogoSuite/LogoSuite.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAC,KAAK,iBAAiB,EAAkE,MAAM,OAAO,CAAA;AAGpH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AACnD,OAAO,EAAU,YAAY,EAA2B,SAAS,EAAe,MAAM,KAAK,CAAA;AAG3F;;GAEG;AACH,OAAO,6GAA6G,CAAA;AACpH,OAAO,gGAAgG,CAAA;AAYvG,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAA;IACtC;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,qBAAqB,CAAA;CACzD,GAAG,SAAS,CAAC,cAAc,CAAC,GAC3B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AA4EtC,MAAM,MAAM,qBAAqB,GAAG,SAAS,CAAC,kBAAkB,CAAC,GAC/D,YAAY,GAAG;IACb;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,CAAA;AAiCH,MAAM,MAAM,yBAAyB,GAAG,SAAS,CAAC,oBAAoB,CAAC,GACrE,SAAS,GAAG;IACV,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;CAC9C,CAAA;AAgDH,MAAM,MAAM,qBAAqB,GAAG,SAAS,CAAC,cAAc,CAAC,GAAG;IAC9D;;;OAGG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;IAC7C;;OAEG;IACH,GAAG,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;IAC7B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAA;IACzC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,UAAU,CAAA;IAC9B;;OAEG;IACH,cAAc,CAAC,EAAE;QACf,KAAK,EAAE,MAAM,CAAA;KACd,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC,GACjE,SAAS,CAAC,iBAAiB,CAAC,CAAA;CAC/B,CAAA;AAmJD;;;GAGG;AACH,eAAO,MAAM,SAAS,iFAjVnB,iBAAiB,CAAC,cAAc,CAAC;;;;;;;;;;;;;;kBA4GtB,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE;;;;;;;;;;;;;kBAAnC,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE;;;;;;;;;;;;;kBAAnC,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE;;;;;;;;;;;;;kBAAnC,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE;;;;;;;;;;;;;kBAAnC,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE;;;;;;;CA0O/C,CAAA"}
+{"version":3,"file":"LogoSuite.d.ts","sourceRoot":"","sources":["../../src/LogoSuite/LogoSuite.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAC,KAAK,iBAAiB,EAAkE,MAAM,OAAO,CAAA;AAGpH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AACnD,OAAO,EAAU,YAAY,EAA2B,SAAS,EAAe,MAAM,KAAK,CAAA;AAG3F;;GAEG;AACH,OAAO,6GAA6G,CAAA;AACpH,OAAO,gGAAgG,CAAA;AAYvG,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAA;IACtC;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,qBAAqB,CAAA;CACzD,GAAG,SAAS,CAAC,cAAc,CAAC,GAC3B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AA4EtC,MAAM,MAAM,qBAAqB,GAAG,SAAS,CAAC,kBAAkB,CAAC,GAC/D,YAAY,GAAG;IACb;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,CAAA;AAiCH,MAAM,MAAM,yBAAyB,GAAG,SAAS,CAAC,oBAAoB,CAAC,GACrE,SAAS,GAAG;IACV,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;CAC9C,CAAA;AAgDH,MAAM,MAAM,qBAAqB,GAAG,SAAS,CAAC,cAAc,CAAC,GAAG;IAC9D;;;OAGG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;IAC7C;;OAEG;IACH,GAAG,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;IAC7B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAA;IACzC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,UAAU,CAAA;IAC9B;;OAEG;IACH,cAAc,CAAC,EAAE;QACf,KAAK,EAAE,MAAM,CAAA;KACd,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC,GACjE,SAAS,CAAC,iBAAiB,CAAC,CAAA;CAC/B,CAAA;AAyID;;;GAGG;AACH,eAAO,MAAM,SAAS,iFAvUnB,iBAAiB,CAAC,cAAc,CAAC;;;;;;;;;;;;;;kBA4GtB,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE;;;;;;;;;;;;;kBAAnC,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE;;;;;;;;;;;;;kBAAnC,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE;;;;;;;;;;;;;kBAAnC,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE;;;;;;;;;;;;;kBAAnC,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE;;;;;;;CAgO/C,CAAA"}

package/esm/LogoSuite/LogoSuite.js

@@ -67,27 +67,23 @@ var y = {
 		"aria-label": e ? "Pause animation" : "Play animation",
 		children: _(e ? s : c, {})
 	});
-}, w = d(({ className: t, children: r, gap: i = "default", marquee: a = !1, marqueeSpeed: s = "normal", variant: c = "muted", takeoverButton: d, ...m }, g) => {
-	let b = n(), [x, S] = h(() => a && !b && s !== "idle");
+}, w = d(({ className: t, children: r, gap: i = "default", marquee: a = !1, marqueeSpeed: s = "normal", variant: c = "muted", takeoverButton: d, ...f }, m) => {
+	let g = n(), [b, x] = h(() => a && !g && s !== "idle");
 	p(() => {
-		S(a && !b && s !== "idle");
+		x(a && !g && s !== "idle");
 	}, [
 		a,
-		b,
+		g,
 		s
 	]), a && d && (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn("LogoSuite.Logobar: `takeoverButton` cant be used with `marquee` prop due to accessibility risks. Set `marquee={false}` to use the takeover feature.");
-	let w = (e) => {
+	let S = (e) => {
 		let t = u.Children.toArray(e);
-		return t.length > 0 && t.every((e) => u.isValidElement(e) ? e.type === "a" || e.type === u.Fragment && w(e.props.children) : !1);
-	}, T = w(r), E = {
-		ref: g,
-		className: e(l.LogoSuite__logobar, l[`LogoSuite__logobar--variant-${c}`], l[`LogoSuite__logobar--gap-${i}`], T && l["LogoSuite__logobar--has-linked-logos"], t),
-		...m
-	}, [D, O] = h(!1), k = f(() => {
-		O(!0);
-	}, []), A = f((e) => {
-		e.currentTarget.contains(e.relatedTarget) || O(!1);
-	}, []), j = () => {
+		return t.length > 0 && t.every((e) => u.isValidElement(e) ? e.type === "a" || e.type === u.Fragment && S(e.props.children) : !1);
+	}, w = S(r), T = (e) => u.Children.map(e, (e) => u.isValidElement(e) ? e.type === u.Fragment ? u.cloneElement(e, { children: T(e.props.children) }) : u.cloneElement(e, { tabIndex: -1 }) : e), E = {
+		ref: m,
+		className: e(l.LogoSuite__logobar, l[`LogoSuite__logobar--variant-${c}`], l[`LogoSuite__logobar--gap-${i}`], w && l["LogoSuite__logobar--has-linked-logos"], t),
+		...f
+	}, D = () => {
 		if (!d) return null;
 		let { className: t, label: n, ref: r, ...i } = d;
 		return /* @__PURE__ */ _("div", {
@@ -102,27 +98,25 @@ var y = {
 		});
 	};
 	if (a) {
-		let { className: t, ...n } = E, i = !x || b;
+		let { className: t, ...n } = E, i = !b || g;
 		return /* @__PURE__ */ v("div", {
 			...n,
 			className: e(l["LogoSuite__logobar--has-marquee"], t, i && l["LogoSuite__logobar--paused"]),
 			children: [/* @__PURE__ */ v("div", {
-				className: e(l["LogoSuite__logobar-marquee"], D && l["LogoSuite__logobar-marquee--focused"]),
-				onFocus: k,
-				onBlur: A,
+				className: l["LogoSuite__logobar-marquee"],
 				children: [/* @__PURE__ */ _("div", {
 					className: e(l["LogoSuite__logobar-marqueeGroup"], l[`LogoSuite__logobar-marqueeGroup--speed-${s}`]),
 					"data-testid": y.marqueeGroup,
 					children: r
 				}), /* @__PURE__ */ _("div", {
-					inert: !0,
 					"aria-hidden": "true",
+					onPointerDown: (e) => e.preventDefault(),
 					className: e(l["LogoSuite__logobar-marqueeGroup"], l[`LogoSuite__logobar-marqueeGroup--speed-${s}`]),
-					children: r
+					children: T(r)
 				})]
 			}), /* @__PURE__ */ _(C, {
-				onPlayPause: S,
-				isPlaying: x
+				onPlayPause: x,
+				isPlaying: b
 			})]
 		});
 	}
@@ -131,7 +125,7 @@ var y = {
 		return /* @__PURE__ */ v("div", {
 			...n,
 			className: e(t, l["LogoSuite__logobar--has-takeover"]),
-			children: [r, j()]
+			children: [r, D()]
 		});
 	}
 	return /* @__PURE__ */ _("div", {