[Brand Refactor] Update SubdomainNavBar

.changeset/quiet-pills-align.md

@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Updated `SubdomainNavBar` desktop navigation links with compact hover, current-page, focus, and expanded overflow-trigger pill states.

.changeset/tasty-cameras-search.md

@@ -0,0 +1,89 @@
+---
+'@primer/react-brand': minor
+'@primer/brand-primitives': patch
+---
+
+Updated `SubdomainNavBar` with a gridline visual design, content slots, search APIs, and responsive navigation behavior.
+
+- Added `leadingComponent` and `trailingComponent` props for rendering custom content around the navigation links and actions.
+- Added a typed `id` prop for setting an HTML ID on the root element.
+- Added a `style` prop for forwarding custom styles to the root element.
+
+```tsx
+<SubdomainNavBar
+  title="Subdomain"
+  fullWidth
+  leadingComponent={<span>Leading content</span>}
+  trailingComponent={<span>Trailing content</span>}
+>
+  <SubdomainNavBar.Link href="/item-1">Item 1</SubdomainNavBar.Link>
+  <SubdomainNavBar.Link href="/item-2">Item 2</SubdomainNavBar.Link>
+  <SubdomainNavBar.PrimaryAction href="/action">Action</SubdomainNavBar.PrimaryAction>
+</SubdomainNavBar>
+```
+
+- Added a responsive input-style search trigger that collapses to an icon-only button on smaller viewports, custom placeholder and shortcut labels, configurable keyboard shortcuts, grouped results, and a `labels` prop for localizing visible and accessible search text. The default `/` shortcut can be remapped or disabled with `keyboardShortcut`.
+
+  Exported `SubdomainNavBarSearchLabels` and `SubdomainNavBarSearchProps` for typed search configuration. The `SubdomainNavBar` ref now exposes `openSearch()` and `closeSearch()` methods.
+
+  ```tsx
+  import * as React from 'react'
+  import {
+    Button,
+    SubdomainNavBar,
+    type SubdomainNavBarHandle,
+    type SubdomainNavBarSearchLabels,
+    type SubdomainNavBarSearchProps,
+    type SubdomainNavBarSearchResults,
+  } from '@primer/react-brand'
+
+  function Example() {
+    const navRef = React.useRef<SubdomainNavBarHandle | null>(null)
+    const [searchTerm, setSearchTerm] = React.useState('')
+    const searchResults: SubdomainNavBarSearchResults = [
+      {
+        title: 'Group',
+        results: [
+          {
+            title: 'Result',
+            description: 'Result description',
+            url: '/result',
+            date: '2026-01-01',
+          },
+        ],
+      },
+    ]
+    const labels = {
+      searchLabel: 'Buscar',
+      closeLabel: 'Cerrar',
+      formatResultsHeading: (term: string) => `Resultados para “${term}”`,
+      formatSuggestions: (count: number) => `${count} sugerencias.`,
+    } satisfies Partial<SubdomainNavBarSearchLabels>
+    const searchProps: SubdomainNavBarSearchProps = {
+      placeholder: 'Buscar',
+      keyboardShortcut: 'Command+Option+k',
+      shortcutLabel: '⌘+⌥+k',
+      labels,
+      searchResults,
+      searchTerm,
+      onChange: event => setSearchTerm(event.currentTarget.value),
+      onSubmit: event => event.preventDefault(),
+    }
+
+    return (
+      <>
+        <SubdomainNavBar ref={navRef} title="Subdomain">
+          <SubdomainNavBar.Link href="/item">Item</SubdomainNavBar.Link>
+          <SubdomainNavBar.Search {...searchProps} />
+        </SubdomainNavBar>
+
+        <Button onClick={() => navRef.current?.openSearch()}>Open search</Button>
+        <Button onClick={() => navRef.current?.closeSearch()}>Close search</Button>
+      </>
+    )
+  }
+  ```
+
+- Updated desktop overflow handling so a contiguous set of links moves into the More menu when space is limited and returns when space becomes available. Overflowed links are removed from keyboard and assistive technology navigation, and focus returns to the More button when its menu closes.
+
+- Updated responsive and mobile menu behavior. Mobile navigation stays out of the desktop overflow menu, disclosures remain keyboard accessible when only slot content is present, and each control is associated with its menu. Leading content renders before navigation links, while actions and trailing content render in the menu footer.

packages/design-tokens/src/tokens/functional/components/subdomain-nav-bar/colors.js

@@ -28,6 +28,16 @@ module.exports = {
         },
       },
     },
+    searchDialog: {
+      shadowColor: {
+        value: 'rgba(0, 0, 0, 0.1)',
+        dark: 'rgba(0, 0, 0, 0.1)',
+      },
+      backdropColor: {
+        value: 'rgba(0, 0, 0, 0.2)',
+        dark: 'rgba(0, 0, 0, 0.2)',
+      },
+    },
     border: {
       nav: {
         default: {

packages/e2e/scripts/playwright/playwright.generate-tests.ts

@@ -39,6 +39,8 @@ const waitForTimeoutLookup = {
   'components-subdomainnavbar--mobile-menu-open-many-items': 5500, // for all staggered animations
   'components-subdomainnavbar--mobile-search-results-visible': 5500, // for the animation
   'components-subdomainnavbar--mobile-no-links': 5500, // for the animation
+  'components-subdomainnavbar--mobile-leading-component-only-menu-open': 5500, // for the animation
+  'components-subdomainnavbar--overflow-menu-open': 1500, // wait for responsive overflow measurement
   'components-subdomainnavbar--reversed-button-order-narrow': 5500, // for the animation
   'components-button-features--primary-focus-non-standard-bg': 2000, // for the interaction test
   'components-button-features--primary-focus': 2000, // for the interaction test
@@ -113,6 +115,28 @@ const waitForTimeoutLookup = {
   'recipes-flexsuite-details--ai': 7000, // for the youtube video posters to load
 }
 
+const beforeScreenshotLookup: Partial<Record<string, string>> = {
+  'components-subdomainnavbar--overflow-menu-open': `
+    const moreButton = page.getByRole('button', {name: 'More'})
+    if ((await moreButton.getAttribute('aria-expanded')) !== 'true') {
+      await moreButton.click()
+    }
+    const overflowMenu = page.locator(\`[id="\${await moreButton.getAttribute('aria-controls')}"]\`)
+    await expect(moreButton).toHaveAttribute('aria-expanded', 'true')
+    await expect(overflowMenu).toBeVisible()
+    await expect(overflowMenu.getByRole('link', {name: 'Resources'})).toBeVisible()
+  `,
+}
+
+const screenshotOptionsLookup: Partial<Record<string, string>> = {
+  'components-subdomainnavbar--overflow-menu-open': `{animations: 'allow'}`,
+}
+
+const viewportLookup: Partial<Record<string, {width: number; height: number}>> = {
+  'components-subdomainnavbar--desktop-pill-states': {width: 1440, height: 900},
+  'components-subdomainnavbar--overflow-menu-open': {width: 1440, height: 900},
+}
+
 // const skipLocalizationsTestsFor = [
 //   'components-actionmenu-features--disabled-item', // for the menu to open
 //   'components-actionmenu-features--anchored-positioning', // for the menu to open
@@ -145,7 +169,6 @@ const skipTestLookup = [
   'components-logosuite-features--mixed-width', // animation only
   'components-logosuite-features--following-hero', // animation only
   'components-logosuite-features--stacked', // animation only
-  'components-subdomainnavbar--overflow-menu-open', // flakey despite timeout
   'components-ide-features--editor-only', // animation too long
   'components-ide-features--editor-no-replay-button', // animation too long
   'components-ide-features--chat-only', // animation too long
@@ -226,6 +249,7 @@ for (const key of Object.keys(categorisedStories)) {
         )
 
         const requiresTabletViewport = storyName.toLowerCase().includes('tablet')
+        const viewport = viewportLookup[id]
         const requiresTouch = touchTestLookup.includes(id)
         if (skipTestLookup.includes(id)) {
           return acc
@@ -242,8 +266,8 @@ for (const key of Object.keys(categorisedStories)) {
             await page.goto('http://localhost:${port}/iframe.html?${localeParam}args=&id=${id}&viewMode=story', { waitUntil: 'networkidle' })
             await page.locator('body.sb-show-main').waitFor({ state: 'visible' })
 
-            ${timeout ? `await page.waitForTimeout(${timeout})` : ''}
-            await expect(page).toHaveScreenshot({ fullPage: true })
+            ${timeout ? `await page.waitForTimeout(${timeout})` : ''}${beforeScreenshotLookup[id] ?? ''}
+            await expect(page).toHaveScreenshot(${screenshotOptionsLookup[id] ?? '{fullPage: true}'})
           });
 
           `
@@ -252,6 +276,16 @@ for (const key of Object.keys(categorisedStories)) {
         const languagesToTest = ['en']
         const allLanguageTests = languagesToTest.map(language => generateTestForLanguage(language)).join('')
 
+        if (viewport) {
+          return (acc += `
+          // eslint-disable-next-line i18n-text/no-en
+          test.describe('Custom viewport test for ${storyName}', () => {
+            test.use({ viewport: { width: ${viewport.width}, height: ${viewport.height} } });
+            ${allLanguageTests}
+          });
+          `)
+        }
+
         if (requiresMobileViewport) {
           return (acc += `
           // eslint-disable-next-line i18n-text/no-en