Add river breakout tabs component

[rezrah]

Summary

Adds a new RiverBreakoutTabs component that is similar to RiverBreakout, but introduces wide tab list + narrow accordion behavior for the same content set.

🔗 Docs
🔗 Storybook

List of notable changes:

• added RiverBreakoutTabs component
• added Storybook coverage (default, features, examples) + localizations
• added test coverage
• updated RiverBreakout tablet styling to apply a max width per design specs

What should reviewers focus on?

• Behavior between wide tab list and narrow accordion modes.
• Keyboard and accessibility behavior
• Any regressions in River/RiverBreakout shared styling (especially visuals with background media).

Steps to test:

1. Use this for Storybook
2. Use this link for public docs

Contributor checklist:

• All new and existing CI checks pass
• Tests prove that the feature works and covers both happy and unhappy paths
• Any drop in coverage, breaking changes or regressions have been documented above
• UI Changes contain new visual snapshots (generated by adding update snapshots label to the PR)
• All developer debugging and non-functional logging has been removed
• Related issues have been referenced in the PR description

Reviewer checklist:

• Check that pull request and proposed changes adhere to our contribution guidelines and code of conduct
• Check that tests prove the feature works and covers both happy and unhappy paths
• Check that there aren't other open Pull Requests for the same update/change

Screenshots:

[changeset-bot]

🦋 Changeset detected

Latest commit: 2de2554

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 8 packages

Name	Type
@primer/react-brand	Minor
@primer/brand-docs	Minor
@primer/brand-css	Minor
@primer/brand-primitives	Minor
@primer/brand-e2e	Minor
@primer/brand-fonts	Minor
@primer/brand-config	Minor
@primer/brand-storybook	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

🟢 No design token changes found

[github-actions]

🟢 Unit test coverage changes found

Unit test coverage has been updated through this PR.

Changes: 1 new tests, 0 removed tests, 0 improved, 0 decreased

Component/Hook	Statements	Functions	Branches	Change
RiverBreakoutTabs	87.7%	88.2%	81.3%	NEW

[Copilot]

Pull request overview

Adds a new RiverBreakoutTabs component to @primer/react-brand for “river breakout” storytelling sections that use a tabbed layout on wide viewports and an accordion layout on narrower viewports, plus a few supporting styling and docs updates.

Changes:

• Added RiverBreakoutTabs (component, styles, tests, Storybook stories, docs, and i18n strings).
• Updated gridline RiverBreakout shared styles (tablet centering + side borders) and added a stable CSS hook for VideoPlayer so it can be styled within river visuals.
• Adjusted Link label styling to resist parent specificity overrides.

Show a summary per file

File	Description
packages/react/src/VideoPlayer/VideoPlayer.tsx	Adds data-video-player-container attribute hook for styling the VideoPlayer root.
packages/react/src/river/RiverBreakoutTabs/RiverBreakoutTabs.tsx	New RiverBreakoutTabs implementation (tabs on wide, accordion on narrow).
packages/react/src/river/RiverBreakoutTabs/RiverBreakoutTabs.test.tsx	Unit + a11y tests (RTL + jest-axe) for the new component.
packages/react/src/river/RiverBreakoutTabs/RiverBreakoutTabs.stories.tsx	Default Storybook story with i18n content + controls.
packages/react/src/river/RiverBreakoutTabs/RiverBreakoutTabs.features.stories.tsx	Feature stories covering layouts and controlled/uncontrolled usage.
packages/react/src/river/RiverBreakoutTabs/RiverBreakoutTabs.examples.stories.tsx	Example stories (images/videos/rivers) demonstrating real compositions.
packages/react/src/river/RiverBreakoutTabs/RiverBreakoutTabs.module.css	Component styling for wide tablist + accordion modes.
packages/react/src/river/RiverBreakoutTabs/RiverBreakoutTabs.module.css.d.ts	Generated CSS module typings.
packages/react/src/river/RiverBreakoutTabs/index.ts	Barrel export for the new component folder.
packages/react/src/river/river-shared.module.css	Updates shared RiverBreakout gridline styling + VideoPlayer radius overrides.
packages/react/src/river/index.ts	Exports RiverBreakoutTabs from the river package entrypoint.
packages/react/src/Link/Link.module.css	Updates .Link--label color behavior to avoid parent overrides.
apps/storybook/static/locales/en/RiverBreakoutTabs.json	Adds RiverBreakoutTabs Storybook strings (en).
apps/storybook/static/locales/de/RiverBreakoutTabs.json	Adds RiverBreakoutTabs Storybook strings (de).
apps/storybook/static/locales/es/RiverBreakoutTabs.json	Adds RiverBreakoutTabs Storybook strings (es).
apps/storybook/static/locales/fr/RiverBreakoutTabs.json	Adds RiverBreakoutTabs Storybook strings (fr).
apps/storybook/static/locales/ja/RiverBreakoutTabs.json	Adds RiverBreakoutTabs Storybook strings (ja).
apps/storybook/static/locales/pt-BR/RiverBreakoutTabs.json	Adds RiverBreakoutTabs Storybook strings (pt-BR).
apps/next-docs/next-env.d.ts	Updates the referenced Next route types file path.
apps/next-docs/content/components/RiverBreakoutTabs/index.mdx	New docs page for RiverBreakoutTabs usage + props.
.changeset/sweet-carpets-jump.md	Changeset for introducing RiverBreakoutTabs (minor).
.changeset/quick-eagles-grab.md	Changeset for RiverBreakout gridline tablet appearance update (patch).
.changeset/clean-birds-share.md	Changeset for Link specificity override behavior (patch).
.changeset/brave-lobsters-cry.md	Changeset for the VideoPlayer data attribute hook (patch).

Copilot's findings

Comments suppressed due to low confidence (1)

packages/react/src/river/RiverBreakoutTabs/RiverBreakoutTabs.module.css:265

• This file adds border-inline rules at 618px / 63.25rem / 1300px on .RiverBreakoutTabs, but the same border behavior for gridline breakouts is now defined on .RiverBreakout--variant-gridline in river-shared.module.css. Since the root element includes both classes, these rules are redundant; consider removing them here so breakouts have a single source of truth for gridline borders.

@media screen and (min-width: 618px) {
  .RiverBreakoutTabs {
    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
  }
}

@media screen and (min-width: 63.25rem) {
  .RiverBreakoutTabs {
    border-inline: none;
  }
}

@media screen and (min-width: 1300px) {
  .RiverBreakoutTabs {
    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
  }
}

• Files reviewed: 22/24 changed files
• Comments generated: 6

[github-actions]

🟢 No visual differences found

Our visual comparison tests did not find any differences in the UI.