@brandsync/wc 1.17.0 → 1.19.0

package/dist/collection/components/bs-mega-menu/bs-mega-menu.js

@@ -0,0 +1,443 @@
+import { Host, h } from "@stencil/core";
+import { cancelMotion, play, readMotion } from "../../utils/motion";
+let uid = 0;
+/**
+ * The dropdown panel under a navigation header tab: columns of links grouped under headings, an optional
+ * featured area on the right, and a footer with recently used items and a shortcut hint. Matches the Figma
+ * "Mega menu" (types Columns, Column with featured, Compact and Compact with featured).
+ *
+ * This is the panel only. Put it in `bs-navigation-header`'s `menu` slot, which anchors it under the bar at the
+ * header's full width, and show it from the tab that opens it; the panel does not open or close itself. Escape
+ * inside the panel fires `bsClose` so you can close it.
+ *
+ * There are two ways to show and hide it. Toggle the host's `hidden` attribute and it appears and disappears at once
+ * (the original contract, unchanged). Or set `open` and it fades and drops in from under the bar, then fades back out
+ * and is removed once the exit finishes. Leave `open` unset to keep using `hidden` only. `hidden` always wins: with it
+ * set the panel is not shown whatever `open` says.
+ *
+ * Built from `bs-card` (panel surface), `bs-menu-block` or `bs-compact-menu-block` (the links), `bs-divider` and
+ * `bs-key-caps` (the shortcut). The column layout, headings, featured text and footer row are plain layout
+ * markup: no component covers them.
+ *
+ * ## Responsive
+ * The panel reacts to its own width (a container query), not the viewport's. Below 600px it becomes one column (heading
+ * above its links, featured area below), titles and descriptions wrap, links are at least 44px tall, the footer stacks
+ * and the default shortcut hint is hidden (`display: none`; a keyboard hint means nothing on a touch screen). A custom
+ * `footer-end` slot is not hidden.
+ *
+ * ## When to use
+ * - A header tab that leads to many destinations that need grouping (Sell, Finance, Inventory).
+ *
+ * ## When not to use
+ * - A short list of commands -- use `bs-menu` in a `bs-popover`.
+ * - Switching app or company -- use `bs-app-switcher` or `bs-company-switcher`.
+ *
+ * `columns`, `featured` and `recent` are arrays or objects and must be set as JS properties. Each item's `icon` is
+ * the URL of a monochrome SVG. You own the data: listen to `bsMenuSelect` (cancelable: `preventDefault()` cancels the
+ * originating click).
+ *
+ * @slot featured - The featured area on the right. Overrides the `featured` prop.
+ * @slot footer-start - Left side of the footer. Overrides the recently used line.
+ * @slot footer-end - Right side of the footer. Overrides the shortcut hint.
+ * @part panel - The panel surface (`bs-card`).
+ * @part columns - The grid of columns and the featured area.
+ * @part column - One column (group).
+ * @part heading - A column heading.
+ * @part list - A column's list of links.
+ * @part block - A link (`bs-menu-block` or `bs-compact-menu-block`).
+ * @part featured - The featured area.
+ * @part featured-title - The featured title.
+ * @part featured-description - The featured description.
+ * @part footer - The footer.
+ * @part shortcut - The shortcut hint's key caps (`bs-key-caps`).
+ * @prop --bs-mega-menu-width - Panel width. Defaults to `1100px` (Figma); capped at the viewport.
+ * @prop --bs-mega-menu-radius - Panel corner radius. Aliased to `--bs-border-radius-150`.
+ * @prop --bs-mega-menu-bg - Panel background. Aliased to `--bs-surface-base`.
+ * @prop --bs-mega-menu-border-color - Panel border. Aliased to `--bs-border-default`.
+ * @prop --bs-mega-menu-shadow - Panel shadow (elevation level 3). Aliased to the `--bs-shadow-*` position and blur tokens and `--bs-elevation-high`.
+ * @prop --bs-mega-menu-padding - Padding around the columns. Aliased to `--bs-spacing-300` and `--bs-spacing-350`.
+ * @prop --bs-mega-menu-gap - Gap between columns. Aliased to `--bs-spacing-300`.
+ * @prop --bs-mega-menu-heading-color - Column headings. Aliased to `--bs-text-muted`.
+ * @prop --bs-mega-menu-text-color - Featured title. Aliased to `--bs-text-default`.
+ * @prop --bs-mega-menu-muted-color - Featured description and footer text. Aliased to `--bs-text-secondary`.
+ * @prop --bs-mega-menu-duration - Length of the open/close motion (`open` only). Aliased to `--bs-duration-default`.
+ * @prop --bs-mega-menu-easing - Curve of the open/close motion. Aliased to `--bs-easing-standard`.
+ * @prop --bs-mega-menu-distance - How far the panel drops while it fades. Aliased to `--bs-spacing-100`.
+ *
+ * Under `prefers-reduced-motion: reduce` (or a duration of `0ms`) setting `open` shows and hides the panel instantly.
+ */
+export class BsMegaMenu {
+    el;
+    id = `bs-mm-${++uid}`;
+    /** `columns` shows menu blocks with icon and description; `compact` plain text links. */
+    type = 'columns';
+    /**
+     * Shows the panel with an enter/exit motion. Unset (the default) leaves visibility to the host's `hidden`
+     * attribute, which shows and hides instantly. `true` shows the panel; `false` fades it out and then removes it.
+     * The panel stays in the DOM and is `inert` while it fades out.
+     */
+    open;
+    /** The groups of links. JS property only (an array cannot be an attribute). */
+    columns = [];
+    /** The featured area on the right. JS property only. The `featured` slot overrides it. */
+    featured;
+    /** Recently used destinations, already translated, shown in the footer. JS property only. */
+    recent = [];
+    /** Accessible name of the panel. */
+    label = 'Menu';
+    /** Text before the recently used items. */
+    recentLabel = 'Recently used:';
+    /** Text before the shortcut keys. */
+    shortcutLabel = 'Can’t find it? Press';
+    /** The shortcut keys, joined by "+". */
+    shortcutKeys = 'Ctrl+K';
+    /** Accessible name of the shortcut keys. Defaults to the keys joined with " plus ". */
+    shortcutKeysLabel;
+    /** Fires when a link is chosen (click or Enter), with the item. Cancelable: `preventDefault()` cancels the originating click. */
+    bsMenuSelect;
+    /** Fires when Escape is pressed inside the panel, so you can close it. */
+    bsClose;
+    /** True while the exit motion plays after `open` went false, so the panel stays visible for it. */
+    closing = false;
+    panelEl;
+    enterPending = false;
+    exitPending = false;
+    motionRun = 0;
+    onOpenChange(next, prev) {
+        this.motionRun++;
+        cancelMotion(this.panelEl);
+        this.closing = false;
+        if (next === true) {
+            this.enterPending = true;
+        }
+        else if (next === false && prev === true && !this.el.hidden && readMotion(this.el, 'bs-mega-menu').ms > 0) {
+            this.closing = true;
+            this.exitPending = true;
+        }
+    }
+    componentDidRender() {
+        if (this.exitPending) {
+            this.exitPending = false;
+            if (this.closing && this.open === false) {
+                const { ms, easing, distance } = readMotion(this.el, 'bs-mega-menu');
+                const run = ++this.motionRun;
+                play(this.panelEl, [{ opacity: 1, transform: 'none' }, { opacity: 0, transform: `translateY(${-distance}px)` }], ms, easing, 'forwards').then(() => {
+                    if (run === this.motionRun)
+                        this.closing = false;
+                });
+            }
+        }
+        if (this.enterPending) {
+            this.enterPending = false;
+            const { ms, easing, distance } = readMotion(this.el, 'bs-mega-menu');
+            if (ms > 0 && this.open === true)
+                play(this.panelEl, [{ opacity: 0, transform: `translateY(${-distance}px)` }, { opacity: 1, transform: 'none' }], ms, easing);
+        }
+    }
+    select(item, ev) {
+        const e = this.bsMenuSelect.emit(item);
+        if (e.defaultPrevented)
+            ev.preventDefault();
+    }
+    onKeyDown = (ev) => {
+        if (ev.key === 'Escape')
+            this.bsClose.emit();
+    };
+    renderItem(item) {
+        const onClick = (ev) => this.select(item, ev);
+        return (h("li", null, this.type === 'compact' ? (h("bs-compact-menu-block", { part: "block", name: item.label, onClick: onClick })) : (h("bs-menu-block", { part: "block", name: item.label, description: item.description, icon: item.icon, badge: item.badge, onClick: onClick }))));
+    }
+    renderColumn(col) {
+        const hid = `${this.id}-h-${col.id}`;
+        return (h("div", { part: "column", class: "bs-mega-menu__column", role: "group", "aria-labelledby": hid }, h("div", { part: "heading", id: hid, class: "bs-mega-menu__heading" }, col.label), h("ul", { part: "list", role: "list", class: "bs-mega-menu__list" }, col.items.map(item => this.renderItem(item)))));
+    }
+    renderFeatured() {
+        const tid = `${this.id}-featured`;
+        return (h("div", { part: "featured", class: "bs-mega-menu__featured", role: "group", "aria-labelledby": this.featured ? tid : undefined }, h("slot", { name: "featured" }, this.featured && [
+            h("p", { part: "featured-title", id: tid, class: "bs-mega-menu__featured-title" }, this.featured.title),
+            this.featured.description && (h("p", { part: "featured-description", class: "bs-mega-menu__featured-description" }, this.featured.description)),
+        ])));
+    }
+    render() {
+        const hasFeatured = !!this.featured || !!this.el.querySelector(':scope > [slot="featured"]');
+        const tracks = this.columns.length + (hasFeatured ? 1 : 0);
+        const removed = this.open === false && !this.closing;
+        return (h(Host, { key: '036de0d22f6fd097b063cf3e18db04bbffac3590', "data-closed": removed ? '' : undefined }, h("bs-card", { key: '551c8aa2d4d2dcaca5d50d6fa1b694007685cde9', part: "panel", class: "bs-mega-menu", surface: "base", role: "navigation", "aria-label": this.label, onKeyDown: this.onKeyDown, inert: this.closing, ref: el => (this.panelEl = el) }, h("div", { key: '00fd782414ca6032b20fd5bb9d07c892389dd9fe', part: "columns", class: "bs-mega-menu__columns", style: { '--bs-mega-menu-tracks': String(Math.max(tracks, 1)) } }, this.columns.map(col => this.renderColumn(col)), hasFeatured && this.renderFeatured()), h("bs-divider", { key: 'f1e4ea55ae169e992cf7b48698016cc9c13382ff', decorative: true }), h("div", { key: '4a71517320983a6f01f81fdb44a893750ecc0516', part: "footer", class: "bs-mega-menu__footer" }, h("span", { key: 'b4192ab9c345ce706aaab400c0445b0ac50472f0', class: "bs-mega-menu__footer-start" }, h("slot", { key: 'ebdb724b4546c04243c7c5d65f9b2acfb001df6b', name: "footer-start" }, this.recent.length > 0 && `${this.recentLabel} ${this.recent.join(', ')}`)), h("span", { key: '78554ecd4de584ed7aedec599f6dd8556f4652cc', class: "bs-mega-menu__footer-end" }, h("slot", { key: '68bd8c2fc4a76dc78e4f0399a875bf509974d760', name: "footer-end" }, h("span", { key: '5a26bb373a4b3a0934df88c2f4b138fe153332e2', class: "bs-mega-menu__shortcut" }, this.shortcutLabel, h("bs-key-caps", { key: 'be2bc62ab7d2aaada1ab1539d341bead5d2f8897', part: "shortcut", keys: this.shortcutKeys, label: this.shortcutKeysLabel }))))))));
+    }
+    static get is() { return "bs-mega-menu"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-mega-menu.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-mega-menu.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsMegaMenuType",
+                    "resolved": "\"columns\" | \"compact\"",
+                    "references": {
+                        "BsMegaMenuType": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-mega-menu/bs-mega-menu.tsx",
+                            "id": "src/components/bs-mega-menu/bs-mega-menu.tsx::BsMegaMenuType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`columns` shows menu blocks with icon and description; `compact` plain text links."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "type",
+                "defaultValue": "'columns'"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows the panel with an enter/exit motion. Unset (the default) leaves visibility to the host's `hidden`\nattribute, which shows and hides instantly. `true` shows the panel; `false` fades it out and then removes it.\nThe panel stays in the DOM and is `inert` while it fades out."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open"
+            },
+            "columns": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsMegaMenuColumn[]",
+                    "resolved": "BsMegaMenuColumn[]",
+                    "references": {
+                        "BsMegaMenuColumn": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-mega-menu/bs-mega-menu.tsx",
+                            "id": "src/components/bs-mega-menu/bs-mega-menu.tsx::BsMegaMenuColumn"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The groups of links. JS property only (an array cannot be an attribute)."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "featured": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsMegaMenuFeatured",
+                    "resolved": "BsMegaMenuFeatured",
+                    "references": {
+                        "BsMegaMenuFeatured": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-mega-menu/bs-mega-menu.tsx",
+                            "id": "src/components/bs-mega-menu/bs-mega-menu.tsx::BsMegaMenuFeatured"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The featured area on the right. JS property only. The `featured` slot overrides it."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "recent": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Recently used destinations, already translated, shown in the footer. JS property only."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the panel."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "'Menu'"
+            },
+            "recentLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text before the recently used items."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "recent-label",
+                "defaultValue": "'Recently used:'"
+            },
+            "shortcutLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text before the shortcut keys."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shortcut-label",
+                "defaultValue": "'Can\u2019t find it? Press'"
+            },
+            "shortcutKeys": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The shortcut keys, joined by \"+\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shortcut-keys",
+                "defaultValue": "'Ctrl+K'"
+            },
+            "shortcutKeysLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the shortcut keys. Defaults to the keys joined with \" plus \"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shortcut-keys-label"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "closing": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsMenuSelect",
+                "name": "bsMenuSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when a link is chosen (click or Enter), with the item. Cancelable: `preventDefault()` cancels the originating click."
+                },
+                "complexType": {
+                    "original": "BsMegaMenuItem",
+                    "resolved": "BsMegaMenuItem",
+                    "references": {
+                        "BsMegaMenuItem": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-mega-menu/bs-mega-menu.tsx",
+                            "id": "src/components/bs-mega-menu/bs-mega-menu.tsx::BsMegaMenuItem"
+                        }
+                    }
+                }
+            }, {
+                "method": "bsClose",
+                "name": "bsClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when Escape is pressed inside the panel, so you can close it."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "onOpenChange"
+            }];
+    }
+}

package/dist/collection/components/bs-mega-menu/bs-mega-menu.stories.js

@@ -0,0 +1,188 @@
+import { html } from "lit";
+import { componentDescription } from "../../stories-utils";
+import quotesIcon from "@phosphor-icons/core/assets/regular/file-text.svg?inline";
+import ordersIcon from "@phosphor-icons/core/assets/regular/shopping-cart.svg?inline";
+import invoicesIcon from "@phosphor-icons/core/assets/regular/currency-circle-dollar.svg?inline";
+import subscriptionsIcon from "@phosphor-icons/core/assets/regular/arrows-clockwise.svg?inline";
+import customersIcon from "@phosphor-icons/core/assets/regular/users.svg?inline";
+import priceListsIcon from "@phosphor-icons/core/assets/regular/tag.svg?inline";
+/** Phosphor (regular) icons as monochrome SVG data URIs; a real app supplies its own URLs. */
+export const ICONS = {
+    quotes: quotesIcon,
+    orders: ordersIcon,
+    invoices: invoicesIcon,
+    subscriptions: subscriptionsIcon,
+    customers: customersIcon,
+    priceLists: priceListsIcon,
+};
+/** Sample data (invented for the stories and tests; not real EG products). */
+export const COLUMNS = [
+    {
+        id: 'sell',
+        label: 'Sell',
+        items: [
+            { id: 'quotes', label: 'Quotes', description: 'Create and send price quotes', icon: ICONS.quotes },
+            { id: 'orders', label: 'Sales orders', description: 'Track orders from confirmation to delivery', icon: ICONS.orders },
+        ],
+    },
+    {
+        id: 'paid',
+        label: 'Get paid',
+        items: [
+            { id: 'invoices', label: 'Invoices', description: 'Send, remind and credit invoices', icon: ICONS.invoices },
+            { id: 'subscriptions', label: 'Subscriptions', description: 'Recurring billing for services', icon: ICONS.subscriptions, badge: 'New' },
+        ],
+    },
+    {
+        id: 'customers',
+        label: 'Customers',
+        items: [
+            { id: 'customers', label: 'Customers', description: 'Contacts, credit limits and history', icon: ICONS.customers },
+            { id: 'prices', label: 'Price lists', description: 'Customer-specific prices and discounts', icon: ICONS.priceLists },
+        ],
+    },
+];
+export const COMPACT_COLUMNS = [
+    { id: 'accounting', label: 'Accounting', items: ['General ledger', 'Journal entries', 'Chart of accounts', 'Year-end closing'] },
+    { id: 'bank', label: 'Bank', items: ['Bank reconciliation', 'Payments', 'Direct debit', 'Bank rules'] },
+    { id: 'tax', label: 'Tax', items: ['VAT returns', 'SAF-T export', 'Tax codes'] },
+    { id: 'assets', label: 'Assets', items: ['Fixed assets', 'Depreciation', 'Disposals'] },
+].map(c => ({ id: c.id, label: c.label, items: c.items.map(label => ({ id: label, label })) }));
+export const FEATURED = { title: 'Smarter payment reminders', description: 'Reminders are now sent at the time each customer is most likely to pay.' };
+export const RECENT = ['Invoices', 'Sales orders'];
+const meta = {
+    title: 'Components/bs-mega-menu',
+    excludeStories: /^[A-Z0-9_]+$/,
+    parameters: { layout: 'padded', docs: { description: { component: componentDescription('bs-mega-menu') } } },
+    argTypes: { type: { control: 'inline-radio', options: ['columns', 'compact'] }, featured: { control: 'boolean' } },
+    args: { type: 'columns', featured: false },
+    render: args => {
+        const compact = args.type === 'compact';
+        // Two columns fit beside the featured area in `columns`, three in `compact` (as in the Figma).
+        const columns = compact ? COMPACT_COLUMNS.slice(0, args.featured ? 3 : 4) : COLUMNS.slice(0, args.featured ? 2 : 3);
+        return html ` <bs-mega-menu .type=${args.type} .columns=${columns} .featured=${args.featured ? FEATURED : undefined} .recent=${RECENT} label="Sales menu"></bs-mega-menu> `;
+    },
+};
+export default meta;
+export const Columns = {};
+export const ColumnWithFeatured = { args: { featured: true } };
+export const Compact = { args: { type: 'compact' } };
+export const CompactWithFeatured = { args: { type: 'compact', featured: true } };
+/** Wired up: pick a link, press Escape, and the last event is printed below. */
+export const Interactive = {
+    render: () => {
+        const wrap = document.createElement('div');
+        const out = document.createElement('output');
+        out.style.cssText = 'display:block;margin-top:8px;font:14px/20px monospace;color:var(--bs-text-secondary)';
+        out.textContent = 'Pick a link or press Escape.';
+        const mm = document.createElement('bs-mega-menu');
+        mm.columns = COLUMNS;
+        mm.featured = undefined;
+        mm.recent = RECENT;
+        mm.setAttribute('label', 'Sales menu');
+        mm.addEventListener('bsMenuSelect', e => (out.textContent = `bsMenuSelect ${e.detail.label}`));
+        mm.addEventListener('bsClose', () => (out.textContent = 'bsClose'));
+        wrap.append(mm, out);
+        return wrap;
+    },
+};
+/**
+ * The consumer-owned trigger for the header's `menu` slot: the "Sales" tab toggles the panel's `open` (so it fades in and out),
+ * keeps `aria-expanded` in step (`aria-controls`/`aria-haspopup` are left off: `bs-tab` does not forward them to
+ * its inner button and axe rejects them on the host, see the mdx), closes it on `bsClose` (Escape), on an outside click and on a second
+ * click, and returns focus to the tab. `bs-navigation-header` only positions the panel.
+ */
+function inNavigationHeader(type, featured) {
+    const compact = type === 'compact';
+    const columns = compact ? COMPACT_COLUMNS.slice(0, featured ? 3 : 4) : COLUMNS.slice(0, featured ? 2 : 3);
+    const menuId = `nav-header-mega-menu-${type}`;
+    // Each story instance gets its own state through these closures; the trigger/menu are looked up from the event.
+    const parts = (from) => {
+        const root = from.closest('[data-nav-header-story]');
+        return { root, tab: root.querySelector('bs-tab[data-controls]'), menu: root.querySelector('bs-mega-menu') };
+    };
+    const setOpen = (from, open, restoreFocus = false) => {
+        const { tab, menu } = parts(from);
+        menu.open = open;
+        tab.setAttribute('aria-expanded', String(open));
+        if (!open && restoreFocus)
+            tab.shadowRoot?.querySelector('button')?.focus();
+    };
+    const onTabClick = (e) => {
+        const { root, menu } = parts(e.currentTarget);
+        const opening = !menu.open;
+        setOpen(root, opening);
+        // Outside click closes it; attached once the panel opens, removed when it closes.
+        if (opening) {
+            const outside = (ev) => {
+                const path = ev.composedPath();
+                if (!menu.open || !root.isConnected)
+                    return document.removeEventListener('click', outside);
+                if (!path.includes(menu) && !path.includes(e.currentTarget)) {
+                    setOpen(root, false);
+                    document.removeEventListener('click', outside);
+                }
+            };
+            setTimeout(() => document.addEventListener('click', outside));
+        }
+    };
+    const onClose = (e) => setOpen(e.currentTarget, false, true);
+    return html `
+    <div data-nav-header-story style="min-height: 560px; background: var(--bs-surface-base);">
+      <bs-navigation-header aria-label="Sample header">
+        <bs-tabs slot="left" type="bs-tab">
+          <bs-tab selected data-controls=${menuId} aria-expanded="false" @click=${onTabClick}>Sales</bs-tab>
+          <bs-tab>Finance</bs-tab>
+          <bs-tab>Inventory</bs-tab>
+          <bs-tab>Reports</bs-tab>
+        </bs-tabs>
+        <bs-input slot="right" type="search" placeholder="Search" style="width: 160px;"></bs-input>
+        <bs-avatar slot="right" type="initials" initials="SL" aria-label="Signed in as SL (sample)"></bs-avatar>
+        <bs-mega-menu
+          slot="menu"
+          id=${menuId}
+          .open=${false}
+          @bsClose=${onClose}
+          .type=${type}
+          .columns=${columns}
+          .featured=${featured ? FEATURED : undefined}
+          .recent=${RECENT}
+          label="Sales menu"
+        ></bs-mega-menu>
+      </bs-navigation-header>
+      <main style="padding: var(--bs-spacing-400); font-family: sans-serif; color: var(--bs-text-secondary);">Page content (sample). The open panel overlays this area.</main>
+    </div>
+  `;
+}
+/** The mega menu in `bs-navigation-header`'s `menu` slot, opened by the "Sales" tab (sample data; columns type). */
+export const InNavigationHeader = {
+    name: 'In navigation header',
+    parameters: { layout: 'fullscreen' },
+    render: () => inNavigationHeader('columns', false),
+};
+/** Compact type with the featured area, in the same header composition. */
+export const InNavigationHeaderCompact = {
+    args: {
+        featured: false,
+    },
+    name: 'In navigation header (compact with featured)',
+    parameters: { layout: 'fullscreen' },
+    render: () => inNavigationHeader('compact', true),
+};
+const PHONE_VIEWPORT = {
+    options: { phone375: { name: 'Phone (375px)', styles: { width: '375px', height: '812px' }, type: 'mobile' } },
+};
+/** The same composition at 375px: the tabs scroll inside the bar, the panel is one column with no shortcut hint. */
+export const InNavigationHeaderMobile = {
+    name: 'In navigation header (mobile)',
+    parameters: { layout: 'fullscreen', viewport: PHONE_VIEWPORT },
+    globals: { viewport: { value: 'phone375', isRotated: false } },
+    render: () => inNavigationHeader('columns', false),
+};
+/** Compact with featured at 375px. */
+export const InNavigationHeaderCompactMobile = {
+    name: 'In navigation header (compact with featured, mobile)',
+    parameters: { layout: 'fullscreen', viewport: PHONE_VIEWPORT },
+    globals: { viewport: { value: 'phone375', isRotated: false } },
+    render: () => inNavigationHeader('compact', true),
+};

package/dist/collection/components/bs-menu/bs-menu.js

@@ -44,7 +44,7 @@ export class BsMenu {
         items[next].shadowRoot?.querySelector('button')?.focus();
     }
     render() {
-        return (h("div", { key: '8acfe07941922ce4ad0bbb5eef11bb6eecba2c08', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: 'a3482ba2653512937d3c1f2b4fa798f1bd81859c' })));
+        return (h("div", { key: 'b6cc3be6f6df9dab73a50bc0c398ec48e9c81c04', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: 'ee7a51748f40144e04f9deac9117b175e9cc2f3d' })));
     }
     static get is() { return "bs-menu"; }
     static get encapsulation() { return "shadow"; }