@brandsync/wc 1.16.0 → 1.18.0

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

@@ -0,0 +1,131 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+import axe from "axe-core";
+import { userEvent } from "vitest/browser";
+import { assertShadowParts, assertCssCustomProperties } from "../../test/helpers/conventions";
+import { COLUMNS, COMPACT_COLUMNS, FEATURED, RECENT } from "./bs-mega-menu.stories";
+const q = (el, s) => el.shadowRoot.querySelector(s);
+const qa = (el, s) => Array.from(el.shadowRoot.querySelectorAll(s));
+const make = async (props = {}) => {
+    const r = await render(h("div", { style: { width: '1100px' } }, h("bs-mega-menu", { label: "Sales menu" })));
+    const el = r.root.querySelector('bs-mega-menu');
+    Object.assign(el, { columns: COLUMNS, recent: RECENT, ...props });
+    await r.waitForChanges();
+    await new Promise(res => setTimeout(res, 80));
+    return { ...r, el };
+};
+describe('bs-mega-menu', () => {
+    it('is a labelled navigation with a group per column, real lists, and the parts and custom properties', async () => {
+        const { el } = await make();
+        const panel = q(el, '[part="panel"]');
+        expect(panel.getAttribute('role')).toBe('navigation');
+        expect(panel.getAttribute('aria-label')).toBe('Sales menu');
+        const groups = qa(el, '[part="column"]');
+        expect(groups.length).toBe(3);
+        for (const g of groups) {
+            expect(g.getAttribute('role')).toBe('group');
+            expect(el.shadowRoot.getElementById(g.getAttribute('aria-labelledby')).textContent).toBeTruthy();
+            expect(g.querySelector('ul > li > bs-menu-block')).not.toBeNull();
+        }
+        assertShadowParts(el.shadowRoot, ['panel', 'columns', 'column', 'heading', 'list', 'block', 'footer', 'shortcut']);
+        assertCssCustomProperties(el, ['--bs-mega-menu-width', '--bs-mega-menu-shadow', '--bs-mega-menu-heading-color']);
+    });
+    it('renders the item data: description, badge and icon on menu blocks', async () => {
+        const { el } = await make();
+        const blocks = qa(el, 'bs-menu-block');
+        expect(blocks.length).toBe(6);
+        const subs = blocks.find(b => b.name === 'Subscriptions');
+        expect(subs.badge).toBe('New');
+        expect(subs.description).toBe('Recurring billing for services');
+        expect(subs.icon).toContain('data:image/svg+xml');
+    });
+    it('compact type renders compact blocks only', async () => {
+        const { el } = await make({ type: 'compact', columns: COMPACT_COLUMNS });
+        expect(qa(el, 'bs-menu-block').length).toBe(0);
+        expect(qa(el, 'bs-compact-menu-block').length).toBe(14);
+        expect(qa(el, '[part="column"]').length).toBe(4);
+    });
+    it('gives the featured area its own grid track', async () => {
+        const { el, waitForChanges } = await make({ columns: COLUMNS.slice(0, 2) });
+        expect(q(el, '[part="featured"]')).toBeNull();
+        el.featured = FEATURED;
+        await waitForChanges();
+        const f = q(el, '[part="featured"]');
+        expect(f.textContent).toContain('Smarter payment reminders');
+        expect(f.getAttribute('aria-labelledby')).toBe(q(el, '[part="featured-title"]').id);
+        const tracks = getComputedStyle(q(el, '[part="columns"]')).gridTemplateColumns.split(' ');
+        expect(tracks.length).toBe(3);
+    });
+    it('shows the recently used line and the shortcut hint, both overridable by slots', async () => {
+        const { el } = await make();
+        expect(q(el, '[part="footer"]').textContent).toContain('Recently used: Invoices, Sales orders');
+        expect(q(el, '[part="footer"]').textContent).toContain('Can’t find it? Press');
+        expect(q(el, 'bs-key-caps').keys).toBe('Ctrl+K');
+        expect(q(el, 'slot[name="footer-start"]')).not.toBeNull();
+        expect(q(el, 'slot[name="footer-end"]')).not.toBeNull();
+        expect(q(el, 'slot[name="featured"]')).toBeNull();
+    });
+    it('fires a cancelable bsMenuSelect with the item, and Escape fires bsClose', async () => {
+        const { el } = await make();
+        const picked = [];
+        el.addEventListener('bsMenuSelect', (e) => {
+            picked.push(e.detail.id);
+            e.preventDefault();
+        });
+        let closed = 0;
+        el.addEventListener('bsClose', () => closed++);
+        qa(el, 'bs-menu-block')[2].shadowRoot.querySelector('button').click();
+        expect(picked).toEqual(['invoices']);
+        qa(el, 'bs-menu-block')[0].shadowRoot.querySelector('button').focus();
+        await userEvent.keyboard('{Escape}');
+        expect(closed).toBe(1);
+    });
+    describe('narrow container', () => {
+        const makeAt = async (width, props = {}) => {
+            const r = await render(h("div", { style: { width: `${width}px` } }, h("bs-mega-menu", { label: "Sales menu" })));
+            const el = r.root.querySelector('bs-mega-menu');
+            Object.assign(el, { columns: COLUMNS, recent: RECENT, ...props });
+            await r.waitForChanges();
+            await new Promise(res => setTimeout(res, 80));
+            return el;
+        };
+        it('is one column, with wrapping text, 44px links, and no shortcut hint below 600px', async () => {
+            const el = await makeAt(375, { featured: FEATURED });
+            expect(getComputedStyle(q(el, '[part="columns"]')).gridTemplateColumns.split(' ').length).toBe(1);
+            const cols = qa(el, '[part="column"]').map(c => c.getBoundingClientRect());
+            expect(cols[1].top).toBeGreaterThanOrEqual(cols[0].bottom);
+            expect(q(el, '[part="featured"]').getBoundingClientRect().top).toBeGreaterThanOrEqual(cols[cols.length - 1].bottom);
+            qa(el, 'bs-menu-block').forEach(b => expect(b.getBoundingClientRect().height).toBeGreaterThanOrEqual(44));
+            expect(getComputedStyle(qa(el, 'bs-menu-block')[0].shadowRoot.querySelector('.bs-menu-block__name')).whiteSpace).toBe('normal');
+            expect(getComputedStyle(q(el, '.bs-mega-menu__shortcut')).display).toBe('none');
+            expect(q(el, '[part="footer"]').textContent).toContain('Recently used');
+            expect(el.getBoundingClientRect().width).toBe(375);
+        });
+        it('makes compact links at least 44px tall', async () => {
+            const el = await makeAt(375, { type: 'compact', columns: COMPACT_COLUMNS });
+            qa(el, 'bs-compact-menu-block').forEach(b => expect(b.getBoundingClientRect().height).toBeGreaterThanOrEqual(44));
+        });
+        it('keeps the multi-column layout and the shortcut hint at 600px and wider', async () => {
+            const wide = await makeAt(600);
+            expect(getComputedStyle(q(wide, '[part="columns"]')).gridTemplateColumns.split(' ').length).toBe(3);
+            expect(getComputedStyle(q(wide, '.bs-mega-menu__shortcut')).display).not.toBe('none');
+        });
+        it('has no axe violations when narrow', async () => {
+            const el = await makeAt(375, { featured: FEATURED });
+            const results = await axe.run(el);
+            expect(results.violations.map(v => `${v.id}: ${v.help}`)).toEqual([]);
+        });
+    });
+    it('is hidden with the hidden attribute', async () => {
+        const { el, waitForChanges } = await make();
+        el.hidden = true;
+        await waitForChanges();
+        expect(getComputedStyle(el).display).toBe('none');
+    });
+    it('has no axe violations in any type', async () => {
+        for (const props of [{}, { featured: FEATURED, columns: COLUMNS.slice(0, 2) }, { type: 'compact', columns: COMPACT_COLUMNS }, { type: 'compact', columns: COMPACT_COLUMNS.slice(0, 3), featured: FEATURED }]) {
+            const { el } = await make(props);
+            const results = await axe.run(el);
+            expect(results.violations.map(v => `${v.id}: ${v.help}`)).toEqual([]);
+        }
+    });
+});

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

@@ -0,0 +1,139 @@
+:host {
+  display: block;
+  box-sizing: border-box;
+  /* The panel reacts to its own width (it may sit in a header slot), not the viewport's. */
+  container-type: inline-size;
+  width: var(--bs-mega-menu-width);
+  max-width: 100%;
+  --bs-mega-menu-width: 1100px;
+  --bs-mega-menu-radius: var(--bs-border-radius-150);
+  --bs-mega-menu-bg: var(--bs-surface-base);
+  --bs-mega-menu-border-color: var(--bs-border-default);
+  --bs-mega-menu-shadow: var(--bs-shadow-position-0) var(--bs-shadow-position-50) var(--bs-shadow-blur-100) var(--bs-elevation-high);
+  --bs-mega-menu-padding: var(--bs-spacing-300) calc(var(--bs-spacing-300) + var(--bs-spacing-50));
+  --bs-mega-menu-gap: var(--bs-spacing-300);
+  --bs-mega-menu-heading-color: var(--bs-text-muted);
+  --bs-mega-menu-text-color: var(--bs-text-default);
+  --bs-mega-menu-muted-color: var(--bs-text-secondary);
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.bs-mega-menu {
+  display: block;
+  --bs-card-bg: var(--bs-mega-menu-bg);
+  --bs-card-radius: var(--bs-mega-menu-radius);
+  --bs-card-padding: 0px;
+  --bs-card-border-width: 1px;
+  --bs-card-border-color: var(--bs-mega-menu-border-color);
+  --bs-card-shadow: var(--bs-mega-menu-shadow);
+  font-family: var(--bs-typography-font-family-body, Roboto), sans-serif;
+}
+
+.bs-mega-menu__columns {
+  display: grid;
+  grid-template-columns: repeat(var(--bs-mega-menu-tracks), minmax(0, 1fr));
+  gap: var(--bs-mega-menu-gap);
+  padding: var(--bs-mega-menu-padding);
+  padding-bottom: var(--bs-spacing-100);
+}
+
+.bs-mega-menu__heading {
+  margin: 0 0 var(--bs-spacing-50);
+  color: var(--bs-mega-menu-heading-color);
+  font-size: var(--bs-fontsize-caption-sm);
+  font-weight: var(--bs-font-weight-semibold);
+  line-height: calc(var(--bs-line-height-caption-sm) * 1px);
+}
+
+.bs-mega-menu__list {
+  display: block;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.bs-mega-menu__featured {
+  padding-top: var(--bs-spacing-300);
+}
+
+.bs-mega-menu__featured-title,
+.bs-mega-menu__featured-description {
+  margin: 0;
+}
+
+.bs-mega-menu__featured-title {
+  color: var(--bs-mega-menu-text-color);
+  font-size: var(--bs-fontsize-caption-sm);
+  font-weight: var(--bs-font-weight-bold);
+  line-height: calc(var(--bs-line-height-caption-sm) * 1px);
+}
+
+.bs-mega-menu__featured-description {
+  margin-top: var(--bs-spacing-100);
+  color: var(--bs-mega-menu-muted-color);
+  font-size: var(--bs-fontsize-caption-sm);
+  line-height: calc(var(--bs-line-height-caption-sm) * 1px);
+}
+
+.bs-mega-menu__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--bs-spacing-200);
+  padding: var(--bs-spacing-150) var(--bs-spacing-200);
+  color: var(--bs-mega-menu-muted-color);
+  font-size: var(--bs-fontsize-caption-sm);
+  line-height: calc(var(--bs-line-height-caption-sm) * 1px);
+}
+
+.bs-mega-menu__footer-end {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bs-spacing-100);
+}
+
+.bs-mega-menu__shortcut {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bs-spacing-100);
+}
+
+/* Narrow panel (below 600px, where three columns stop fitting; documentation only -- CSS can't read a custom
+   property in a container query): one column, group heading above its links, featured area below, titles and
+   descriptions wrap, links are at least 44px tall (--bs-scale-550), the footer stacks and the default shortcut
+   hint is removed (a keyboard hint is meaningless on a touch screen; display: none also drops it from the
+   accessibility tree). A `footer-end` slot override is the consumer's content and stays. */
+@container (max-width: 599px) {
+  .bs-mega-menu__columns {
+    grid-template-columns: minmax(0, 1fr);
+    padding: var(--bs-spacing-200);
+    padding-bottom: var(--bs-spacing-100);
+  }
+
+  bs-menu-block {
+    --bs-menu-block-white-space: normal;
+    min-height: var(--bs-scale-550);
+  }
+
+  bs-compact-menu-block {
+    --bs-compact-menu-block-padding: var(--bs-spacing-150) var(--bs-spacing-100);
+    min-height: var(--bs-scale-550);
+  }
+
+  .bs-mega-menu__featured {
+    padding-top: var(--bs-spacing-100);
+  }
+
+  .bs-mega-menu__footer {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--bs-spacing-100);
+  }
+
+  .bs-mega-menu__shortcut {
+    display: none;
+  }
+}

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

@@ -0,0 +1,358 @@
+import { h } from "@stencil/core";
+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 toggle the host's `hidden` attribute 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.
+ *
+ * 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`.
+ */
+export class BsMegaMenu {
+    el;
+    id = `bs-mm-${++uid}`;
+    /** `columns` shows menu blocks with icon and description; `compact` plain text links. */
+    type = 'columns';
+    /** 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;
+    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);
+        return (h("bs-card", { key: '005653cc6235b7aa26268e3bf97b1a985df89843', part: "panel", class: "bs-mega-menu", surface: "base", role: "navigation", "aria-label": this.label, onKeyDown: this.onKeyDown }, h("div", { key: '22808dd74ea84ae0511dc92e4a3d2d3045a8157c', 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: '105dd2102501c21303f0cd115f2a8797a8996195', decorative: true }), h("div", { key: '0f20d9d01cb29d29735612d2708cb48af2e30bf0', part: "footer", class: "bs-mega-menu__footer" }, h("span", { key: 'e2d7e8bf77b15b735015342ef6a21b946cdcf2cb', class: "bs-mega-menu__footer-start" }, h("slot", { key: '1d34e50c301329ea2bd381a08ffab99b9bce5394', name: "footer-start" }, this.recent.length > 0 && `${this.recentLabel} ${this.recent.join(', ')}`)), h("span", { key: '773eae68920c131c8dea1182a41a78e6ceef4222', class: "bs-mega-menu__footer-end" }, h("slot", { key: '70e2b5dce40e19423b55c1df869d1326f5fdbfa4', name: "footer-end" }, h("span", { key: '10bb8e18aaa162b06209f65f7e9136ff716466f8', class: "bs-mega-menu__shortcut" }, this.shortcutLabel, h("bs-key-caps", { key: 'a9991ceab494255b81fccb97e8290432bcc0cff2', 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'"
+            },
+            "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 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"; }
+}