@xplortech/apollo-core 2.6.0 → 2.7.1

package/dist/collection/components/xpl-top-nav/top-nav.stories.js

@@ -0,0 +1,625 @@
+import { addons } from "storybook/preview-api";
+import { INITIAL_VIEWPORTS } from "storybook/viewport";
+const UPDATE_GLOBALS = 'updateGlobals';
+const TOP_NAV_MOBILE600_VIEWPORT = {
+    name: 'Mobile (600px)',
+    styles: { width: '600px', height: '900px' },
+    type: 'mobile',
+};
+const TOP_NAV_STORY_STYLE_ID = 'sb-top-nav-story-styles';
+const TOP_NAV_STORY_CSS = `
+.sb-top-nav-story-canvas {
+  box-sizing: border-box;
+  min-height: 100vh;
+  width: 100%;
+  padding: var(--xpl-space-0);
+}
+.sb-top-nav-html-root { width: 100%; }
+.sb-top-nav-html-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--xpl-space-8) var(--xpl-space-16);
+  height: var(--xpl-size-350);
+  background: var(--xpl-background-surface-default);
+  color: var(--xpl-text-subdued);
+  border-bottom: var(--xpl-border-small) solid var(--xpl-border-default);
+}
+.sb-top-nav-html-inner-left { display: flex; align-items: center; }
+.sb-top-nav-html-nav-control {
+  margin-right: var(--xpl-space-16);
+  border: none;
+  padding: var(--xpl-space-0);
+  cursor: pointer;
+}
+.sb-top-nav-html-aside-left {
+  display: flex;
+  align-items: center;
+  gap: var(--xpl-space-8);
+  flex: 1;
+}
+.sb-top-nav-html-brand-link {
+  display: flex;
+  align-items: center;
+  gap: var(--xpl-space-8);
+  text-decoration: none;
+  color: inherit;
+}
+.sb-top-nav-html-brand-img { height: var(--xpl-size-100); width: auto; }
+.sb-top-nav-html-brand-text,
+.sb-top-nav-html-brand-text-link {
+  font-size: var(--xpl-font-size-title-4);
+  font-weight: var(--xpl-font-weight-medium);
+  color: var(--xpl-text-strong);
+}
+.sb-top-nav-html-brand-text-link { text-decoration: none; }
+.sb-top-nav-html-brand-row {
+  display: flex;
+  align-items: center;
+  gap: var(--xpl-space-8);
+}
+.sb-top-nav-html-nav-link {
+  padding: var(--xpl-space-8);
+  font-size: var(--xpl-font-size-body);
+}
+.sb-top-nav-html-aside-right {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--xpl-space-8);
+  flex: 1;
+}
+.sb-top-nav-html-account-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--xpl-space-8);
+  padding: var(--xpl-space-8);
+  font-size: var(--xpl-font-size-title-4);
+  font-weight: var(--xpl-font-weight-medium);
+  color: var(--xpl-text-strong);
+  border: none;
+  background-color: var(--xpl-background-surface-transparent-0);
+  cursor: pointer;
+}
+.sb-top-nav-item-story-bar {
+  display: flex;
+  align-items: center;
+  height: var(--xpl-size-350);
+  padding: var(--xpl-space-0) var(--xpl-space-16);
+  gap: var(--xpl-space-8);
+  background: var(--xpl-background-surface-default);
+  border: var(--xpl-border-small) solid var(--xpl-border-default);
+  border-radius: var(--xpl-border-radius-default);
+}
+.sb-top-nav-html-item-icon {
+  width: var(--xpl-size-100);
+  height: var(--xpl-size-100);
+  display: inline-block;
+  margin-right: var(--xpl-space-8);
+}
+.sb-top-nav-html-item-inner {
+  padding: var(--xpl-space-8);
+  font-size: var(--xpl-font-size-body);
+  border-radius: var(--xpl-border-radius-small);
+  display: flex;
+  align-items: center;
+  gap: var(--xpl-space-8);
+  cursor: pointer;
+  text-decoration: none;
+  color: inherit;
+}
+.sb-top-nav-html-item-inner--selected { color: var(--xpl-text-strong); }
+.sb-top-nav-menu-shell {
+  background: var(--xpl-background-surface-default);
+  border: var(--xpl-border-small) solid var(--xpl-border-default);
+  border-radius: var(--xpl-border-radius-default);
+  width: var(--xpl-top-nav-panel-width);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: var(--xpl-space-0);
+}
+.sb-top-nav-menu-shell--min {
+  min-width: var(--xpl-top-nav-panel-width);
+  border: var(--xpl-border-small) solid var(--xpl-border-default);
+  border-radius: var(--xpl-border-radius-default);
+  overflow: hidden;
+}
+.sb-top-nav-menu-profile {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: var(--xpl-space-16);
+  border-bottom: var(--xpl-border-small) solid var(--xpl-border-default);
+}
+.sb-top-nav-menu-profile-inner { width: 100%; min-width: 0; }
+.sb-top-nav-menu-username { font-weight: var(--xpl-font-weight-medium); }
+.sb-top-nav-menu-email {
+  font-size: var(--xpl-font-size-caption);
+  color: var(--xpl-text-subdued);
+}
+.sb-top-nav-menu-list {
+  padding: var(--xpl-space-8) var(--xpl-space-0);
+}
+.sb-top-nav-menu-list a {
+  display: flex;
+  align-items: center;
+  gap: var(--xpl-space-8);
+  padding: var(--xpl-space-8) var(--xpl-space-16);
+  color: inherit;
+  text-decoration: none;
+}
+.sb-top-nav-menu-right-aside-mobile {
+  display: flex;
+  flex-direction: column;
+  gap: var(--xpl-space-4);
+  padding: var(--xpl-space-4) var(--xpl-space-0);
+  border-bottom: var(--xpl-border-small) solid var(--xpl-border-default);
+}
+.sb-top-nav-menu-right-aside-mobile a {
+  display: flex;
+  align-items: center;
+  gap: var(--xpl-space-8);
+  padding: var(--xpl-space-10) var(--xpl-space-12);
+  color: inherit;
+  text-decoration: none;
+}
+`.trim();
+function ensureTopNavStoryStyles() {
+    if (typeof document === 'undefined')
+        return;
+    if (document.getElementById(TOP_NAV_STORY_STYLE_ID))
+        return;
+    const style = document.createElement('style');
+    style.id = TOP_NAV_STORY_STYLE_ID;
+    style.textContent = TOP_NAV_STORY_CSS;
+    document.head.appendChild(style);
+}
+function syncTopNavPreviewViewportToGlobals(previewViewport, globalsSnapshot) {
+    var _a;
+    const next = previewViewport !== null && previewViewport !== void 0 ? previewViewport : 'responsive';
+    const raw = (_a = globalsSnapshot === null || globalsSnapshot === void 0 ? void 0 : globalsSnapshot.viewport) === null || _a === void 0 ? void 0 : _a.value;
+    const normalizedCurrent = raw == null || raw === '' || raw === 'reset' ? undefined : String(raw);
+    const desiredValue = next === 'responsive' ? undefined : next;
+    if (normalizedCurrent === desiredValue) {
+        return;
+    }
+    const channel = addons.getChannel();
+    if (channel == null) {
+        return;
+    }
+    if (next === 'responsive') {
+        channel.emit(UPDATE_GLOBALS, {
+            globals: { viewport: { value: undefined, isRotated: false } },
+        });
+        return;
+    }
+    channel.emit(UPDATE_GLOBALS, {
+        globals: { viewport: { value: next, isRotated: false } },
+    });
+}
+function topNavPreviewViewportDecorator(story, context) {
+    var _a;
+    const viewport = (_a = context.globals) === null || _a === void 0 ? void 0 : _a.viewport;
+    syncTopNavPreviewViewportToGlobals(context.args.previewViewport, { viewport });
+    return story();
+}
+function topNavDarkStoryDecorator(story) {
+    ensureTopNavStoryStyles();
+    const wrap = document.createElement('div');
+    wrap.className = 'dark sb-top-nav-story-canvas';
+    const result = story();
+    if (typeof result === 'string') {
+        const fragment = document.createRange().createContextualFragment(result);
+        wrap.append(fragment);
+    }
+    else if (result != null &&
+        typeof Node !== 'undefined' &&
+        result.nodeType !== undefined) {
+        wrap.appendChild(result);
+    }
+    return wrap;
+}
+const TOP_NAV_FIGMA_DESIGN = {
+    type: 'figma',
+    url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=36021-13064&p=f&t=zPkMI4H5nK5XE3ZU-11',
+};
+const topNavFamilyDocsDescription = [
+    'Horizontal top bar (`xpl-top-nav`), nav items (`xpl-top-nav-item`), and profile header (`xpl-nav-header-menu`). **`xpl-top-nav`** supports **`brand-name`**, **`brand-href`**, **`brand-logo`** (image URL), and **`slot="brand-logo"`** for the built-in brand row; **`slot="left-aside"`** holds primary links; **`slot="right-aside"`** then **`slot="user-menu"`**; on narrow viewports (**one pixel below Tailwind `md`** — **`max-width: 767px`** with default **`screens.md`**) **`right-aside`** is hidden in the bar — duplicate those actions into **`slot="right-aside-mobile"`** on **`xpl-nav-header-menu`**. The account region uses an **internal** **`xpl-popover`** (**`bottom-end`**, **`display="menu"`**): set **`child-account-label`** for the built-in trigger label beside **`chevron-down`**, put the panel in **`slot="user-menu"`**, or use **`slot="user-menu-trigger"`** to replace the built-in trigger. Use **Top Navigation** Controls for props + **Actions** for **`navOpen`** / **`brandClick`**. With **`nav-control`**, the hamburger is visible only on those narrow widths (CSS **`top-nav.css`**). **`brandClick`** fires when the built-in brand is activated and **`brand-href`** is **not** set.',
+    '',
+    '**Storybook:** These stories wrap the canvas in Foundation **`dark`** so previews match the components’ dark palette. The manager **moon** toggle targets the addon store and may still look “light” in the chrome; the preview area uses dark tokens regardless.',
+    '',
+    '### Events',
+    '',
+    '| Component | Event | When it fires | `event.detail` |',
+    '| --- | --- | --- | --- |',
+    '| **`xpl-top-nav`** | `navOpen` | Mobile menu toggled via control, or drawer closed with **Escape** (`nav-control` must be set). | `boolean` — `true` when open, `false` when closed. |',
+    '| **`xpl-top-nav`** | `brandClick` | Built-in brand is activated (click or keyboard) and **`brand-href`** is unset. | `MouseEvent` — same as **`navItemClick`** on the internal brand **`xpl-top-nav-item`**. |',
+    '| **`xpl-top-nav-item`** | `navItemClick` | User activates a plain item (click or Enter/Space). Not emitted for dropdown items (`slot="dropdown"`) or for internal chevron-only toggles. | `MouseEvent` (the original click). |',
+    '| **`xpl-nav-header-menu`** | — | No custom events. | — |',
+].join('\n');
+const meta = {
+    title: 'Components/Navigation/Top Navigation',
+    component: 'xpl-top-nav',
+    decorators: [topNavDarkStoryDecorator],
+    parameters: {
+        design: TOP_NAV_FIGMA_DESIGN,
+        darkMode: {
+            current: 'dark',
+        },
+        actions: {
+            handles: ['navOpen', 'brandClick'],
+        },
+        docs: {
+            description: {
+                component: topNavFamilyDocsDescription,
+            },
+        },
+    },
+};
+export default meta;
+function escapeAttr(value) {
+    return value.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');
+}
+function topNavLabelAttr(label) {
+    if (label == null || String(label).trim() === '') {
+        return '';
+    }
+    return ` label="${String(label).replace(/"/g, '&quot;')}"`;
+}
+function topNavBrandAttrs(brandName, brandHref, brandLogo) {
+    const parts = [];
+    if (brandName != null && String(brandName).trim() !== '') {
+        parts.push(` brand-name="${escapeAttr(String(brandName))}"`);
+    }
+    if (brandHref != null && String(brandHref).trim() !== '') {
+        parts.push(` brand-href="${escapeAttr(String(brandHref))}"`);
+    }
+    if (brandLogo != null && String(brandLogo).trim() !== '') {
+        parts.push(` brand-logo="${escapeAttr(String(brandLogo).trim())}"`);
+    }
+    return parts.join('');
+}
+function topNavChildAccountLabelAttr(childAccountLabel) {
+    if (childAccountLabel == null || String(childAccountLabel).trim() === '') {
+        return '';
+    }
+    return ` child-account-label="${escapeAttr(String(childAccountLabel).trim())}"`;
+}
+export const TopNavigation = (args) => {
+    const { navControl, label, childAccountLabel, brandName, brandHref, brandLogo, menuUsername = 'Jane', menuEmail = 'jane@example.com', } = args;
+    const navControlAttr = navControl === true ? ' nav-control' : '';
+    const labelAttr = topNavLabelAttr(label);
+    const childAccountAttr = topNavChildAccountLabelAttr(childAccountLabel);
+    const brandAttr = topNavBrandAttrs(brandName, brandHref, brandLogo);
+    const username = (menuUsername === null || menuUsername === void 0 ? void 0 : menuUsername.trim()) ? escapeAttr(menuUsername.trim()) : '';
+    const email = (menuEmail === null || menuEmail === void 0 ? void 0 : menuEmail.trim()) ? escapeAttr(menuEmail.trim()) : '';
+    const navHeaderMenuAttrs = [
+        username ? `username="${username}"` : '',
+        email ? `email="${email}"` : '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const brandLogoSlot = brandLogo != null && String(brandLogo).trim() !== ''
+        ? ''
+        : `
+    <xpl-icon slot="brand-logo" icon="rocket" size="24"></xpl-icon>`;
+    const rightAsideBlock = `
+        <xpl-button variant="tertiary" size="lg" slot="right-aside">
+            <xpl-icon icon="message-writing" size="20"></xpl-icon>
+            Inbox
+            <xpl-badge dot-only>7</xpl-badge>
+        </xpl-button>`;
+    const rightAsideMobileBlock = `
+            <xpl-top-nav-item slot="right-aside-mobile" label="Inbox" icon="message-writing"></xpl-top-nav-item>
+        `;
+    return `
+<xpl-top-nav${navControlAttr}${labelAttr}${childAccountAttr}${brandAttr}>
+${brandLogoSlot}
+    <xpl-top-nav-item slot="left-aside" label="Home" selected></xpl-top-nav-item>
+    <xpl-top-nav-item slot="left-aside" label="Dashboard"></xpl-top-nav-item>
+    <xpl-top-nav-item slot="left-aside" label="Settings"></xpl-top-nav-item>${rightAsideBlock}
+    <xpl-nav-header-menu slot="user-menu" ${navHeaderMenuAttrs}>${rightAsideMobileBlock}
+        <xpl-top-nav-item label="View Account" icon="house-4" selected></xpl-top-nav-item>
+        <xpl-top-nav-item label="Change Account" icon="refresh"></xpl-top-nav-item>
+        <xpl-top-nav-item label="Logout" icon="open-rect-arrow-out"></xpl-top-nav-item>
+    </xpl-nav-header-menu>
+</xpl-top-nav>
+`.trim();
+};
+const HtmlTopNavigation = (args) => {
+    const { navControl, label, childAccountLabel, brandName, brandHref, brandLogo } = args;
+    const navAriaLabel = label != null && String(label).trim() !== '' ? String(label) : 'top-navigation-bar';
+    const demoBrand = brandName != null && String(brandName).trim() !== '' ? String(brandName).trim() : 'My App';
+    const demoBrandLink = brandHref != null && String(brandHref).trim() !== '' ? brandHref : '#';
+    const safeBrandText = demoBrand
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+    const logoUrl = brandLogo != null && String(brandLogo).trim() !== '' ? String(brandLogo).trim() : '';
+    const showChildRow = childAccountLabel != null && String(childAccountLabel).trim() !== '';
+    const safeChildLabel = showChildRow && childAccountLabel != null
+        ? String(childAccountLabel)
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+        : '';
+    const lines = [
+        '<div class="dark xpl-top-nav sb-top-nav-html-root">',
+        `  <nav aria-label="${navAriaLabel.replace(/"/g, '&quot;')}" class="xpl-top-nav__bar sb-top-nav-html-bar">`,
+        '    <div class="xpl-top-nav__inner-left sb-top-nav-html-inner-left">',
+    ];
+    if (navControl) {
+        lines.push('      <button type="button" class="xpl-top-nav__nav-control sb-top-nav-html-nav-control" aria-expanded="false" aria-label="Open navigation menu">', '        <xpl-icon icon="menu" class="xpl-top-nav__control-icon" aria-hidden="true"></xpl-icon>', '      </button>');
+    }
+    lines.push('      <div class="xpl-top-nav__aside xpl-nav-left sb-top-nav-html-aside-left">');
+    if (logoUrl) {
+        const alt = demoBrand ? escapeAttr(demoBrand) : 'Brand';
+        lines.push(`        <a href="${demoBrandLink.replace(/"/g, '&quot;')}" class="sb-top-nav-html-brand-link">`, `          <img src="${escapeAttr(logoUrl)}" alt="${alt}" class="sb-top-nav-html-brand-img" />`);
+        if (demoBrand) {
+            lines.push(`          <span class="sb-top-nav-html-brand-text">${safeBrandText}</span>`);
+        }
+        lines.push('        </a>');
+    }
+    else {
+        lines.push('        <div class="sb-top-nav-html-brand-row">', '          <xpl-icon icon="rocket" size="24"></xpl-icon>', `          <a href="${demoBrandLink.replace(/"/g, '&quot;')}" class="sb-top-nav-html-brand-text-link">${safeBrandText}</a>`, '        </div>');
+    }
+    lines.push('        <a href="#" class="sb-top-nav-html-nav-link">Home</a>', '        <a href="#" class="sb-top-nav-html-nav-link">Dashboard</a>', '        <a href="#" class="sb-top-nav-html-nav-link">Settings</a>', '      </div>', '    </div>', '    <div class="xpl-top-nav__aside xpl-nav-right sb-top-nav-html-aside-right">', '      <xpl-button variant="tertiary" size="lg">', '        <xpl-icon icon="message-writing" size="20"></xpl-icon>', '        Inbox', '        <xpl-badge dot-only>7</xpl-badge>', '      </xpl-button>');
+    if (showChildRow) {
+        lines.push(`      <button type="button" class="sb-top-nav-html-account-btn">${safeChildLabel} <xpl-icon icon="chevron-down" size="20"></xpl-icon></button>`);
+    }
+    lines.push(`      <!-- user-menu: internal xpl-popover opened by the built-in child-account trigger -->`, '    </div>', '  </nav>', '</div>');
+    return lines.join('\n');
+};
+TopNavigation.args = {
+    previewViewport: 'responsive',
+    navControl: true,
+    label: 'Main navigation',
+    childAccountLabel: 'Child Account',
+    brandName: 'My App',
+    brandHref: '#',
+    brandLogo: '',
+    menuUsername: 'Jane',
+    menuEmail: 'jane@example.com',
+};
+TopNavigation.decorators = [topNavPreviewViewportDecorator];
+TopNavigation.argTypes = {
+    previewViewport: {
+        control: 'select',
+        options: ['responsive', 'iphone12'],
+        description: '**Storybook preview width** (updates **`globals.viewport`** — same as the viewport toolbar). **`responsive`** = full iframe (desktop nav). **`iphone12`** /  narrow the iframe so **`top-nav.css`** mobile rules apply. Switch back to **Responsive** before leaving this story if other stories need a wide canvas.',
+        table: { category: 'Storybook' },
+    },
+    brandName: {
+        control: 'text',
+        description: 'Built-in **`brand-name`** attribute (shown next to **`slot="brand-logo"`** / **`brand-logo`** URL). Clear both **`brand-name`** and **`brand-href`** in Controls to hide the brand row in the Web Component panel (keep **`slot="brand-logo"`** only if you still need a logo-only row).',
+    },
+    brandHref: {
+        control: 'text',
+        description: 'Built-in **`brand-href`** — native navigation for the brand control. **`#`** is fine for Storybook. **Clear** this field so the brand uses **`role="button"`** and emits **`brandClick`** (see **Actions**).',
+    },
+    brandLogo: {
+        control: 'text',
+        description: 'Optional **`brand-logo`** image URL. When set, the built-in **`&lt;img&gt;`** is used and **`slot="brand-logo"`** (icon) is omitted in this story.',
+        table: { category: 'Brand' },
+    },
+    childAccountLabel: {
+        control: 'text',
+        description: '**`child-account-label`** — label beside the chevron on the built-in account menu trigger (with **`slot="user-menu"`**). Clear for chevron-only trigger.',
+    },
+    navControl: {
+        control: 'boolean',
+        description: 'Renders the hamburger in the DOM. CSS shows it only below **`md`** (**max-width 767px** at default Tailwind); **`left-aside`** is hidden at that width until the drawer opens. When **off**, **`left-aside`** stays hidden on narrow viewports **with no drawer**. Emits **`navOpen`** when the control is used.',
+    },
+    label: {
+        control: 'text',
+        description: 'Accessible name for the `<nav>` landmark (`aria-label`). Use a unique value when the page has multiple navigation regions. Clear to use default `top-navigation-bar`.',
+    },
+    menuUsername: {
+        control: 'text',
+        description: '**`username`** on **`xpl-nav-header-menu`**.',
+        table: { category: 'User menu (panel)' },
+    },
+    menuEmail: {
+        control: 'text',
+        description: '**`email`** on **`xpl-nav-header-menu`**.',
+        table: { category: 'User menu (panel)' },
+    },
+    navOpen: {
+        control: false,
+        description: '**Event** (not a prop): `navOpen` — `CustomEvent<boolean>`; `detail` is the new open state when the nav control is used or **Escape** closes the mobile drawer (when **`nav-control`** is set).',
+        table: { category: 'Events' },
+    },
+    brandClick: {
+        control: false,
+        description: '**Event** (not a prop): `brandClick` — `CustomEvent<MouseEvent>`; fires when the built-in brand is activated and **`brand-href`** is **not** set. Clear **`brand-href`** in Controls, then click the brand.',
+        table: { category: 'Events' },
+    },
+};
+TopNavigation.parameters = {
+    layout: 'fullscreen',
+    design: TOP_NAV_FIGMA_DESIGN,
+    viewport: {
+        viewports: Object.assign(Object.assign({}, INITIAL_VIEWPORTS), { mobile600: TOP_NAV_MOBILE600_VIEWPORT }),
+    },
+    'web-component': {
+        render: TopNavigation(TopNavigation.args),
+    },
+    html: {
+        render: HtmlTopNavigation(TopNavigation.args),
+    },
+};
+export const TopNavItem = (args) => {
+    const attrs = [
+        args.active === true ? ' active' : '',
+        args.href != null && args.href !== '' ? `href="${escapeAttr(args.href)}"` : '',
+        args.label != null && args.label !== '' ? `label="${escapeAttr(args.label)}"` : '',
+        args.icon != null && args.icon !== '' ? `icon="${escapeAttr(args.icon)}"` : '',
+        args.itemAriaLabel != null && args.itemAriaLabel !== ''
+            ? `item-aria-label="${escapeAttr(args.itemAriaLabel)}"`
+            : '',
+        args.selected === true ? ' selected' : '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const hasLabel = args.label != null && args.label !== '';
+    return `
+<div class="dark sb-top-nav-item-story-bar">
+    <xpl-top-nav-item ${attrs.trim()}>
+${hasLabel ? '' : '        <span>Custom slot content</span>'}
+    </xpl-top-nav-item>
+</div>
+`.trim();
+};
+const HtmlTopNavItem = (args) => {
+    var _a;
+    const label = args.label != null && args.label !== '' ? args.label : 'Custom slot content';
+    const selected = args.selected === true;
+    const hasIcon = args.icon != null && args.icon !== '';
+    const hasHref = args.href != null && args.href !== '';
+    const ariaCurrent = selected ? ' aria-current="page"' : '';
+    const iconPlaceholder = hasIcon ? '<span class="sb-top-nav-html-item-icon">◆</span>' : '';
+    const innerContent = hasIcon
+        ? `      ${iconPlaceholder}\n      <span>${label}</span>`
+        : `      <span>${label}</span>`;
+    const innerClasses = [
+        'sb-top-nav-html-item-inner',
+        selected ? 'sb-top-nav-html-item-inner--selected' : '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const innerTag = hasHref
+        ? `    <a href="${escapeAttr((_a = args.href) !== null && _a !== void 0 ? _a : '')}"${ariaCurrent} class="${innerClasses}">`
+        : `    <div role="button" tabindex="0"${ariaCurrent} class="${innerClasses}">`;
+    const innerClose = hasHref ? '    </a>' : '    </div>';
+    const lines = [
+        '<div class="dark sb-top-nav-item-story-bar">',
+        '  <div role="listitem">',
+        innerTag,
+        innerContent,
+        innerClose,
+        '  </div>',
+        '</div>',
+    ];
+    return lines.join('\n');
+};
+TopNavItem.args = {
+    href: '',
+    label: 'Nav item',
+    selected: false,
+};
+TopNavItem.argTypes = {
+    active: {
+        control: 'boolean',
+        description: 'Adds `xpl-top-nav-item--active` for accent styling (separate from `selected` / current page).',
+    },
+    href: {
+        control: 'text',
+        description: 'When set, the item renders as a native `<a>` link instead of a `div[role="button"]`. Use `#` for in-page demo. Clear to switch back to button mode.',
+    },
+    label: {
+        control: 'text',
+        description: 'Optional label to display as text. Omit to use the default slot for custom content.',
+    },
+    icon: {
+        control: 'text',
+        description: 'Icon name from the Apollo icon set to display before the label (e.g. house-4, wrench). Empty = no icon.',
+    },
+    itemAriaLabel: {
+        control: 'text',
+        description: 'Maps to `item-aria-label`: accessible name for icon-only items (no label / default-slot text).',
+    },
+    selected: {
+        control: 'boolean',
+        description: 'Whether the item is selected. Sets aria-current="page" and selected styling.',
+    },
+    navItemClick: {
+        control: false,
+        description: '**Event** (not a prop): `navItemClick` — `CustomEvent<MouseEvent>`; `detail` is the originating click. Not emitted when `slot="dropdown"` is used.',
+        table: { category: 'Events' },
+    },
+};
+TopNavItem.parameters = {
+    layout: 'centered',
+    design: TOP_NAV_FIGMA_DESIGN,
+    'web-component': {
+        render: TopNavItem(TopNavItem.args),
+    },
+    html: {
+        render: HtmlTopNavItem(TopNavItem.args),
+    },
+};
+export const TopNavMenu = (args) => {
+    const attrs = [
+        args.username != null && args.username !== ''
+            ? `username="${escapeAttr(args.username)}"`
+            : '',
+        args.email != null && args.email !== '' ? `email="${escapeAttr(args.email)}"` : '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const rightAsideMobile = args.showRightAsideMobile !== false
+        ? `
+        <xpl-top-nav-item slot="right-aside-mobile" label="Inbox" icon="message-writing"></xpl-top-nav-item>`
+        : '';
+    return `
+<div class="dark sb-top-nav-menu-shell">
+    <xpl-nav-header-menu ${attrs.trim()}>${rightAsideMobile}
+        <xpl-top-nav-item label="View Account" icon="house-4" selected></xpl-top-nav-item>
+        <xpl-top-nav-item label="Change Account" icon="refresh"></xpl-top-nav-item>
+        <xpl-top-nav-item label="Logout" icon="open-rect-arrow-out"></xpl-top-nav-item>
+    </xpl-nav-header-menu>
+</div>
+`.trim();
+};
+const HtmlTopNavMenu = (args) => {
+    const username = args.username != null && args.username !== '' ? args.username : '';
+    const email = args.email != null && args.email !== '' ? args.email : '';
+    const lines = [
+        '<div class="dark sb-top-nav-menu-shell--min">',
+        '  <div class="sb-top-nav-menu-profile">',
+        '    <div class="sb-top-nav-menu-profile-inner">',
+    ];
+    if (username) {
+        lines.push(`      <div class="sb-top-nav-menu-username">${escapeAttr(username)}</div>`);
+    }
+    if (email) {
+        lines.push(`      <div class="sb-top-nav-menu-email">${escapeAttr(email)}</div>`);
+    }
+    lines.push('    </div>', '  </div>');
+    if (args.showRightAsideMobile !== false) {
+        lines.push('  <div class="sb-top-nav-menu-right-aside-mobile">', '    <a href="#">Inbox</a>', '  </div>');
+    }
+    lines.push('  <div role="list" class="sb-top-nav-menu-list">', '    <a href="#">View Account</a>', '    <a href="#">Change Account</a>', '    <a href="#">Logout</a>', '  </div>', '</div>');
+    return lines.join('\n');
+};
+TopNavMenu.args = {
+    username: 'Katie Wilson',
+    email: 'katie01@email.com',
+    showRightAsideMobile: true,
+};
+TopNavMenu.argTypes = {
+    username: {
+        control: 'text',
+        description: 'Username to display.',
+    },
+    email: {
+        control: 'text',
+        description: 'Email to display.',
+    },
+    showRightAsideMobile: {
+        control: 'boolean',
+        description: '**`slot="right-aside-mobile"`** strip (Inbox) between profile and list — matches **`xpl-top-nav`** narrow **`right-aside`** duplication.',
+    },
+};
+TopNavMenu.parameters = {
+    layout: 'centered',
+    design: TOP_NAV_FIGMA_DESIGN,
+    'web-component': {
+        render: TopNavMenu(TopNavMenu.args),
+    },
+    html: {
+        render: HtmlTopNavMenu(TopNavMenu.args),
+    },
+};