@xplortech/apollo-core 2.12.0 → 3.1.0

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

@@ -1,764 +0,0 @@
-import { addons } from "storybook/preview-api";
-import { INITIAL_VIEWPORTS } from "storybook/viewport";
-import { setAutoSnapshotOptions } from "vitest-plugin-vis";
-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: inherit;
-  font-size: var(--xpl-font-size-body);
-  border: 0;
-  border-radius: var(--xpl-border-radius-small);
-  appearance: none;
-  background: transparent;
-  display: flex;
-  align-items: center;
-  gap: var(--xpl-space-8);
-  cursor: pointer;
-  text-align: inherit;
-  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);
-  color: var(--xpl-text-strong);
-}
-.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: var(--xpl-text-default);
-  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: var(--xpl-text-default);
-  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) {
-    const next = previewViewport ?? 'responsive';
-    const raw = globalsSnapshot?.viewport?.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) {
-    const viewport = context.globals?.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`), grouping container (`xpl-top-nav-menu`), 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.',
-    '',
-    'Group a parent nav item\'s children with **`xpl-top-nav-menu`** in its **`slot="dropdown"`**: on desktop it opens as a flyout under the parent; on narrow viewports the **same markup** drives a mobile cascade — the drawer swaps its top-level list for the group\'s rows in place (auto back row + `chevron-left`, no second panel). See the **`TopNavItem`** story\'s **`showDropdown`** control, or the grouped "Xplor Ops" item in this story\'s Controls, and switch **`previewViewport`** to a narrow preset to try the cascade.',
-    '',
-    '**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-top-nav-item`** | `openChange` | `open` changes (click, hover, keyboard, Escape, outside click, or programmatic). | `boolean` — new open state. |',
-    '| **`xpl-nav-header-menu`** | — | No custom events. | — |',
-    '| **`xpl-top-nav-menu`** | — | No custom events — the back row calls `closeMenu()` on the parent trigger directly. | — |',
-].join('\n');
-const meta = {
-    title: 'Components/Navigation/Top Navigation',
-    component: 'xpl-top-nav',
-    tags: ['vrt'],
-    decorators: [topNavDarkStoryDecorator],
-    beforeEach() {
-        setAutoSnapshotOptions({ enable: true });
-    },
-    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?.trim() ? escapeAttr(menuUsername.trim()) : '';
-    const email = 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>
-        `;
-    const groupedNavItem = `
-    <xpl-top-nav-item slot="left-aside" label="Xplor Ops" open-mode="hover">
-        <xpl-top-nav-menu slot="dropdown" label="Xplor Ops">
-            <xpl-top-nav-item label="Payroll" href="#"></xpl-top-nav-item>
-            <xpl-top-nav-item label="Capital" href="#">
-                <xpl-icon slot="trailing-icon" icon="open-rect-arrow-out"></xpl-icon>
-            </xpl-top-nav-item>
-        </xpl-top-nav-menu>
-    </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>${groupedNavItem}${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"
-            description="Acme Corp — Downtown Location"
-        ></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: {
-            ...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.description != null && args.description !== ''
-            ? `description="${escapeAttr(args.description)}"`
-            : '',
-        args.itemAriaLabel != null && args.itemAriaLabel !== ''
-            ? `item-aria-label="${escapeAttr(args.itemAriaLabel)}"`
-            : '',
-        args.openMode === 'hover' ? ' open-mode="hover"' : '',
-        args.selected === true ? ' selected' : '',
-    ]
-        .filter(Boolean)
-        .join(' ');
-    const hasLabel = args.label != null && args.label !== '';
-    const trailingIconSlot = args.trailingIcon != null && args.trailingIcon !== ''
-        ? `\n        <xpl-icon slot="trailing-icon" icon="${escapeAttr(args.trailingIcon)}"></xpl-icon>`
-        : '';
-    const dropdownSlot = args.showDropdown === true
-        ? `\n        <xpl-top-nav-menu slot="dropdown" label="${escapeAttr(args.label ?? 'Menu')}">
-            <xpl-top-nav-item label="Payroll" href="#"></xpl-top-nav-item>
-            <xpl-top-nav-item label="Capital" href="#" selected>
-                <xpl-icon slot="trailing-icon" icon="open-rect-arrow-out"></xpl-icon>
-            </xpl-top-nav-item>
-        </xpl-top-nav-menu>`
-        : '';
-    return `
-<div class="dark sb-top-nav-item-story-bar">
-    <xpl-top-nav-item ${attrs.trim()}>
-${hasLabel ? '' : '        <span>Custom slot content</span>'}${trailingIconSlot}${dropdownSlot}
-    </xpl-top-nav-item>
-</div>
-`.trim();
-};
-const HtmlTopNavItem = (args) => {
-    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(args.href ?? '')}"${ariaCurrent} class="${innerClasses}">`
-        : `    <button type="button"${ariaCurrent} class="${innerClasses}">`;
-    const innerClose = hasHref ? '    </a>' : '    </button>';
-    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,
-    openMode: 'click',
-    showDropdown: 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 native `<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 for `slot="leading-icon"`\'s fallback (e.g. house-4, wrench). Empty = no icon. Ignored when `slot="leading-icon"` content is present.',
-    },
-    description: {
-        control: 'text',
-        description: 'Optional second line below `label` (row context — e.g. inside `xpl-nav-header-menu`). Empty = single-line row.',
-    },
-    trailingIcon: {
-        control: 'text',
-        description: 'Storybook-only: demos `slot="trailing-icon"` with the given icon name (e.g. `open-rect-arrow-out` for "opens in new window"). When `showDropdown` is also on, this replaces the auto `chevron-down`.',
-        table: { category: 'Storybook' },
-    },
-    itemAriaLabel: {
-        control: 'text',
-        description: 'Maps to `item-aria-label`: accessible name for icon-only items (no label / default-slot text).',
-    },
-    openMode: {
-        control: 'select',
-        options: ['click', 'hover'],
-        description: 'How `slot="dropdown"` opens. `hover` only activates on hover-capable, fine-pointer, `md`-and-up devices (falls back to click/tap otherwise); Enter/Space always toggles regardless. Requires `showDropdown`.',
-    },
-    selected: {
-        control: 'boolean',
-        description: 'Whether the item is selected. Sets aria-current="page" and selected styling.',
-    },
-    showDropdown: {
-        control: 'boolean',
-        description: 'Storybook-only: demos this item as a dropdown trigger with `slot="dropdown"` content (auto chevron, `open` state, `openMode`).',
-        table: { category: 'Storybook' },
-    },
-    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' },
-    },
-    openChange: {
-        control: false,
-        description: '**Event** (not a prop): `openChange` — `CustomEvent<boolean>`; fires whenever `open` changes (click, hover, keyboard, Escape, outside click, or programmatic).',
-        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 TopNavMenuGroup = (args) => {
-    const label = args.label != null && args.label !== '' ? args.label : 'Xplor Ops';
-    return `
-<div class="dark sb-top-nav-menu-shell--min">
-    <xpl-top-nav-menu label="${escapeAttr(label)}">
-        <xpl-top-nav-item label="Payroll" href="#"></xpl-top-nav-item>
-        <xpl-top-nav-item label="Capital" href="#" selected>
-            <xpl-icon slot="trailing-icon" icon="open-rect-arrow-out"></xpl-icon>
-        </xpl-top-nav-item>
-        <xpl-top-nav-item label="Xplor Ops Home" description="xplorops.com" href="#"></xpl-top-nav-item>
-    </xpl-top-nav-menu>
-</div>
-`.trim();
-};
-const HtmlTopNavMenuGroup = (args) => {
-    const label = args.label != null && args.label !== '' ? args.label : 'Xplor Ops';
-    return [
-        '<div class="dark sb-top-nav-menu-shell--min">',
-        `  <div role="list" aria-label="${escapeAttr(label)}" class="sb-top-nav-menu-list">`,
-        '    <a href="#">Payroll</a>',
-        '    <a href="#">Capital</a>',
-        '    <a href="#">Xplor Ops Home</a>',
-        '  </div>',
-        '</div>',
-    ].join('\n');
-};
-TopNavMenuGroup.storyName = 'Nav Menu (grouping container)';
-TopNavMenuGroup.args = {
-    label: 'Xplor Ops',
-};
-TopNavMenuGroup.argTypes = {
-    label: {
-        control: 'text',
-        description: 'Accessible name for the list (`aria-label`) and, on small screens, the mobile cascade back-row label for this group.',
-    },
-};
-TopNavMenuGroup.parameters = {
-    layout: 'centered',
-    design: TOP_NAV_FIGMA_DESIGN,
-    docs: {
-        description: {
-            story: '**`xpl-top-nav-menu`** — a thin grouping container for `xpl-top-nav-item` rows. It is the panel ' +
-                'content for a **dropdown nav item**: nest it in a parent `xpl-top-nav-item`\'s `slot="dropdown"` ' +
-                "(see the `TopNavItem` story's `showDropdown` control). On desktop it renders as a flyout under the " +
-                'parent; on narrow viewports the same markup drives the **mobile cascade** (drill-in with an auto ' +
-                'back row). This is **not** the account menu — for the profile/account panel see **Nav Header Menu ' +
-                '(account)** (`xpl-nav-header-menu`). The two only share panel chrome (width, surface, shadow, radius, ' +
-                'padding); their roles differ.',
-        },
-    },
-    'web-component': {
-        render: TopNavMenuGroup(TopNavMenuGroup.args),
-    },
-    html: {
-        render: HtmlTopNavMenuGroup(TopNavMenuGroup.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.storyName = 'Nav Header Menu (account)';
-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,
-    docs: {
-        description: {
-            story: '**`xpl-nav-header-menu`** — the account/profile panel: a profile header (`username`, `email`), an ' +
-                'optional narrow-only `slot="right-aside-mobile"` strip, and a default slot of `xpl-top-nav-item` ' +
-                'rows. It is usually slotted into `xpl-top-nav` `slot="user-menu"` and shown inside the account ' +
-                'popover. This is **not** the dropdown grouping container — for grouping child links under a parent ' +
-                'nav item (desktop flyout / mobile cascade) see **Nav Menu (grouping container)** ' +
-                '(`xpl-top-nav-menu`).',
-        },
-    },
-    'web-component': {
-        render: TopNavMenu(TopNavMenu.args),
-    },
-    html: {
-        render: HtmlTopNavMenu(TopNavMenu.args),
-    },
-};