@brandsync/wc 1.17.0 → 1.18.0

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"; }
+}