@brandsync/wc 1.17.0 → 1.18.0

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 `hidden`,
+ * 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.hidden = !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.hidden;
+        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.hidden || !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}
+          hidden
+          @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: '850122bbadc472043159746a66002281d53ddd7b', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: '5a64d51431e7cad88d5a7f4d01aa004098e9b2d2' })));
     }
     static get is() { return "bs-menu"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,44 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+import axe from "axe-core";
+import { assertShadowParts, assertCssCustomProperties } from "../../test/helpers/conventions";
+import { ICONS } from "../bs-mega-menu/bs-mega-menu.stories";
+const q = (el, s) => el.shadowRoot.querySelector(s);
+const make = async (props = {}) => {
+    const r = await render(h("div", { style: { width: '340px' } }, h("bs-menu-block", { name: "Quotes" })));
+    const el = r.root.querySelector('bs-menu-block');
+    Object.assign(el, { icon: ICONS.quotes, description: 'Create and send price quotes', ...props });
+    await r.waitForChanges();
+    return { ...r, el };
+};
+describe('bs-menu-block', () => {
+    it('is a button named by its title and description, with the parts and custom properties', async () => {
+        const { el } = await make();
+        const c = q(el, '[part="container"]');
+        expect(c.tagName).toBe('BUTTON');
+        expect(c.textContent).toContain('Quotes');
+        expect(c.textContent).toContain('Create and send price quotes');
+        expect(q(el, '.bs-menu-block__glyph')).not.toBeNull();
+        assertShadowParts(el.shadowRoot, ['container', 'icon', 'name', 'description']);
+        assertCssCustomProperties(el, ['--bs-menu-block-padding', '--bs-menu-block-bg-hover', '--bs-menu-block-focus-ring']);
+    });
+    it('shows the badge chip only when set, and exactly one icon', async () => {
+        const { el, waitForChanges } = await make();
+        expect(q(el, '[part="badge"]')).toBeNull();
+        el.badge = 'New';
+        await waitForChanges();
+        expect(q(el, '[part="badge"]').textContent).toBe('New');
+        await new Promise(r => setTimeout(r, 100));
+        expect(q(el, 'bs-icon-tile').shadowRoot.querySelector('svg')).toBeNull();
+    });
+    it('uses the 32px icon square', async () => {
+        const { el } = await make();
+        expect(Math.round(q(el, 'bs-icon-tile').getBoundingClientRect().width)).toBe(32);
+    });
+    it('has no axe violations', async () => {
+        for (const props of [{}, { badge: 'New' }]) {
+            const { el } = await make(props);
+            const results = await axe.run(el);
+            expect(results.violations.map(v => `${JSON.stringify(props)} ${v.id}: ${v.help}`)).toEqual([]);
+        }
+    });
+});

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

@@ -0,0 +1,106 @@
+:host {
+  display: block;
+  box-sizing: border-box;
+  --bs-menu-block-padding: var(--bs-spacing-150);
+  --bs-menu-block-gap: var(--bs-spacing-150);
+  --bs-menu-block-radius: var(--bs-border-radius-100);
+  --bs-menu-block-bg: transparent;
+  --bs-menu-block-bg-hover: var(--bs-surface-hover);
+  --bs-menu-block-bg-pressed: var(--bs-surface-pressed);
+  --bs-menu-block-icon-bg: var(--bs-color-neutral-container);
+  --bs-menu-block-color: var(--bs-text-default);
+  --bs-menu-block-color-muted: var(--bs-text-secondary);
+  --bs-menu-block-focus-ring: var(--bs-border-info);
+  --bs-menu-block-white-space: nowrap;
+}
+
+.bs-menu-block {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--bs-menu-block-gap);
+  width: 100%;
+  margin: 0;
+  padding: var(--bs-menu-block-padding);
+  border: 0;
+  border-radius: var(--bs-menu-block-radius);
+  background: var(--bs-menu-block-bg);
+  color: var(--bs-menu-block-color);
+  font-family: var(--bs-typography-font-family-body, Roboto), sans-serif;
+  text-align: left;
+  cursor: pointer;
+}
+
+.bs-menu-block:hover,
+.bs-menu-block:active {
+  --bs-menu-block-icon-bg: var(--bs-surface-base);
+}
+
+.bs-menu-block:hover,
+.bs-menu-block:focus-visible {
+  background: var(--bs-menu-block-bg-hover);
+}
+
+.bs-menu-block:active {
+  background: var(--bs-menu-block-bg-pressed);
+}
+
+/* The secondary text is too faint on the pressed background, so it takes the title colour while pressed. */
+.bs-menu-block:active .bs-menu-block__description {
+  color: var(--bs-menu-block-color);
+}
+
+.bs-menu-block:focus-visible {
+  outline: var(--bs-spacing-25) solid var(--bs-menu-block-focus-ring);
+  outline-offset: 0;
+}
+
+.bs-menu-block__icon {
+  --bs-icon-tile-bg: var(--bs-menu-block-icon-bg);
+  --bs-icon-tile-color: var(--bs-icon-default);
+}
+
+.bs-menu-block__glyph {
+  display: block;
+  width: var(--bs-icon-tile-icon-size);
+  height: var(--bs-icon-tile-icon-size);
+  background: currentColor;
+  -webkit-mask: var(--bs-menu-block-glyph) center / contain no-repeat;
+  mask: var(--bs-menu-block-glyph) center / contain no-repeat;
+}
+
+.bs-menu-block__text {
+  flex: 1 1 0;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.bs-menu-block__title {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-spacing-100);
+}
+
+.bs-menu-block__name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: var(--bs-menu-block-white-space);
+  font-size: var(--bs-fontsize-body-sm);
+  font-weight: var(--bs-font-weight-semibold);
+  line-height: calc(var(--bs-line-height-body-sm) * 1px);
+}
+
+.bs-menu-block__badge {
+  flex: none;
+}
+
+.bs-menu-block__description {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: var(--bs-menu-block-white-space);
+  color: var(--bs-menu-block-color-muted);
+  font-size: var(--bs-fontsize-caption-sm);
+  line-height: calc(var(--bs-line-height-caption-sm) * 1px);
+}

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

@@ -0,0 +1,147 @@
+import { h } from "@stencil/core";
+/**
+ * A rich entry in a mega menu: an icon tile, a title with an optional "New" chip, and a one-line description.
+ * Matches the Figma "Menu block" component (Default, Hover, Pressed and Focused).
+ *
+ * The block is always a native button and only emits events; it never navigates. Hover, pressed and focus come from the
+ * native element. Its accessible name is its text: the title, the badge and the description, read once.
+ *
+ * Built from `bs-icon-tile` (the icon) and `bs-chip-informative` (the badge). The icon is either a URL of a
+ * monochrome SVG in `icon` (painted with the theme's icon colour through a CSS mask, so it follows light and
+ * dark mode), or any element in the default slot (an `<svg>` drawn with `currentColor`).
+ *
+ * ## When to use
+ * - A destination in a mega menu that needs an icon and a sentence of explanation, usually inside `bs-mega-menu`.
+ *
+ * ## When not to use
+ * - A plain text destination -- use `bs-compact-menu-block`.
+ * - A command in a dropdown list -- use `bs-menu-item`.
+ *
+ * @slot - The icon (16px, `currentColor`). Overrides the `icon` prop.
+ * @part container - The button.
+ * @part icon - The icon tile (`bs-icon-tile`).
+ * @part name - The title.
+ * @part badge - The badge chip (`bs-chip-informative`).
+ * @part description - The description.
+ * @prop --bs-menu-block-padding - Padding inside the block. Aliased to `--bs-spacing-150`.
+ * @prop --bs-menu-block-gap - Gap between icon and text. Aliased to `--bs-spacing-150`.
+ * @prop --bs-menu-block-radius - Corner radius. Aliased to `--bs-border-radius-100`.
+ * @prop --bs-menu-block-bg - Resting background. `transparent`.
+ * @prop --bs-menu-block-bg-hover - Aliased to `--bs-surface-hover`.
+ * @prop --bs-menu-block-bg-pressed - Aliased to `--bs-surface-pressed`.
+ * @prop --bs-menu-block-icon-bg - Icon square background. Aliased to `--bs-color-neutral-container`; `--bs-surface-base` while hovered or pressed.
+ * @prop --bs-menu-block-color - Title colour. Aliased to `--bs-text-default`.
+ * @prop --bs-menu-block-color-muted - Description colour. Aliased to `--bs-text-secondary`.
+ * @prop --bs-menu-block-focus-ring - Focus ring colour. Aliased to `--bs-border-info`.
+ * @prop --bs-menu-block-white-space - `white-space` of the title and description. `nowrap` (single line, ellipsis); set `normal` to let them wrap.
+ */
+export class BsMenuBlock {
+    /** The title, and the start of the accessible name. */
+    name;
+    /** One line under the title; part of the accessible name. */
+    description;
+    /** URL of a monochrome SVG painted with the icon colour. The default slot overrides it. */
+    icon;
+    /** Short text for a chip beside the title, e.g. "New". */
+    badge;
+    render() {
+        const common = { part: 'container', class: 'bs-menu-block' };
+        const body = [
+            h("bs-icon-tile", { key: '6d46f853f1673374675ede6c701e3e01fa5c3a4a', part: "icon", class: "bs-menu-block__icon", size: "md" }, this.icon ? h("span", { class: "bs-menu-block__glyph", style: { '--bs-menu-block-glyph': `url(${JSON.stringify(this.icon)})` } }) : h("slot", null)),
+            h("span", { key: '8a24502be4a71f7c6a74f6600ee0f411a37f9d58', class: "bs-menu-block__text" }, h("span", { key: 'fd71ce8072d8bb8b83f5831c9d16ac190b3b2b0f', class: "bs-menu-block__title" }, h("span", { key: '99f4a8008a50274e7306a91b8d57ce8c98782f9b', part: "name", class: "bs-menu-block__name" }, this.name), this.badge && (h("bs-chip-informative", { key: 'd71237f056ca413aa1b9640df4507d52e94e47b2', part: "badge", class: "bs-menu-block__badge", color: "info", size: "sm" }, this.badge))), this.description && (h("span", { key: '857ce6dbdc7885a9099f4e9cd94967ba187ce892', part: "description", class: "bs-menu-block__description" }, this.description))),
+        ];
+        return (h("button", { key: '6ca8eed231c6b061aab714398975b2f9dc4eb091', ...common, type: "button" }, body));
+    }
+    static get is() { return "bs-menu-block"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-menu-block.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-menu-block.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The title, and the start of the accessible name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "One line under the title; part of the accessible name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "URL of a monochrome SVG painted with the icon colour. The default slot overrides it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            },
+            "badge": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Short text for a chip beside the title, e.g. \"New\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "badge"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,36 @@
+import { html } from "lit";
+import { componentDescription } from "../../stories-utils";
+import { ICONS } from "../bs-mega-menu/bs-mega-menu.stories";
+const meta = {
+    title: 'Components/bs-menu-block',
+    parameters: { layout: 'padded', docs: { description: { component: componentDescription('bs-menu-block') } } },
+    argTypes: { name: { control: 'text' }, description: { control: 'text' }, badge: { control: 'text' } },
+    args: { name: 'Quotes', description: 'Create and send price quotes', badge: '' },
+    render: args => html `
+    <div style="width: 340px">
+      <bs-menu-block .icon=${ICONS.quotes} name=${args.name} description=${args.description} badge=${args.badge}></bs-menu-block>
+    </div>
+  `,
+};
+export default meta;
+export const Default = {};
+export const WithBadge = { args: { name: 'Subscriptions', description: 'Recurring billing for services', badge: 'New' } };
+/** The four states in the design. Hover, pressed and focus come from the native element: point at a block, press it, or Tab to it. */
+export const States = {
+    render: () => html `
+    <div style="display:flex;flex-direction:column;gap:8px;width:340px">
+      <bs-menu-block .icon=${ICONS.quotes} name="Quotes" description="Create and send price quotes"></bs-menu-block>
+      <bs-menu-block .icon=${ICONS.subscriptions} name="Subscriptions" description="Recurring billing for services" badge="New"></bs-menu-block>
+    </div>
+  `,
+};
+/** A slotted `<svg>` instead of the `icon` URL. */
+export const SlottedIcon = {
+    render: () => html `
+    <div style="width: 340px">
+      <bs-menu-block name="Custom" description="An icon drawn with currentColor">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><circle cx="12" cy="12" r="8" /></svg>
+      </bs-menu-block>
+    </div>
+  `,
+};

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

@@ -47,7 +47,7 @@ export class BsMenuItem {
         this.bsSelect.emit();
     };
     render() {
-        return (h("button", { key: '09c4e8582ce6a31ff4aa293e20c3d7f1caa6e845', type: "button", part: "item", role: "menuitem", class: `bs-menu-item ${this.disabled ? 'bs-menu-item--disabled' : ''}`, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.onClick }, h("span", { key: 'ecfc57bc3eab836edd5f0ef0d009da8ccbbce563', part: "icon", class: `bs-menu-item__icon ${this.hasIcon ? 'bs-menu-item__icon--has-content' : ''}` }, h("slot", { key: '8eb2a0b480c7fbe7aa17ec5cd193764353a394e9', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'e67b7512fd58b0e0847b5d3d14658cfc1bd4a00c', part: "label", class: "bs-menu-item__label" }, h("slot", { key: '466a45cb85e7cdadde2fb994243689873482d65c' }))));
+        return (h("button", { key: '6b051d2fd71b1be59a253c9eb10e7a8f1242e110', type: "button", part: "item", role: "menuitem", class: `bs-menu-item ${this.disabled ? 'bs-menu-item--disabled' : ''}`, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.onClick }, h("span", { key: '245b088e3d5243d4b6ca8871b087d53174405590', part: "icon", class: `bs-menu-item__icon ${this.hasIcon ? 'bs-menu-item__icon--has-content' : ''}` }, h("slot", { key: 'f325951ecf61f5b2e39d54fb9dd7deda9fc313cb', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '2d89029982559af29db78a0ba2fd48ccfbc1c416', part: "label", class: "bs-menu-item__label" }, h("slot", { key: '56681e9c1241233fc36e9bcd5a19c58ef3af5b4b' }))));
     }
     static get is() { return "bs-menu-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -45,7 +45,7 @@ export class BsMessage {
     /** Delivery/render state. `error` uses error colours; `pending` dims the bubble and sets `aria-busy`. */
     status = 'default';
     render() {
-        return (h("div", { key: '86285bfd68e06327c2d2afbb0f2c24974303093e', class: "bs-message", "aria-busy": this.status === 'pending' ? 'true' : undefined }, h("div", { key: 'd82b3e6fe9d3863269600ef1a3ccc2feac0423b6', part: "avatar", class: "bs-message__avatar" }, h("slot", { key: 'c6832f12575eaf2e16c7eb65040ea799501f97ce', name: "avatar" })), h("div", { key: '0fc91e323599e56c4f61c12cec0b7ce7bdddc00f', class: "bs-message__column" }, h("bs-card", { key: '72de58c03aff4643103f8bedf1e699c31fcabe18', part: "container", class: "bs-message__bubble", surface: "base" }, h("div", { key: 'd71851df11559320977e3597bc30d7833940194c', part: "content", class: "bs-message__content" }, h("slot", { key: '956564ce3766240c7e75c8fdf83b5471c7804965' }))), h("div", { key: '09d2d29c20ce847fa06ac91048212ed14cebcfa1', part: "footer", class: "bs-message__footer" }, h("slot", { key: 'e2a7a23597b0ac6d6c9ba7c1eb26ef865746b5f8', name: "footer" })), h("div", { key: '9ce9ef000dcc68f5c2b8e3254dbd3ad37a59e930', part: "timestamp", class: "bs-message__timestamp" }, h("slot", { key: '3d906d1c18bbc6b1cffb7fba18bcc74324f6dd5d', name: "timestamp" }, this.timestamp && h("time", { key: '6f04b8166126cd7d1543c4211bace9caaac99571', dateTime: this.datetime }, this.timestamp))))));
+        return (h("div", { key: 'c159d43edf61a61bb87fa72c650a8642e0ae154f', class: "bs-message", "aria-busy": this.status === 'pending' ? 'true' : undefined }, h("div", { key: 'a503d44dd040849e1db3327f3c33981eea8fcd9d', part: "avatar", class: "bs-message__avatar" }, h("slot", { key: 'bef63a196f9ffcaeb6b729f2c9b67722e9e5afe1', name: "avatar" })), h("div", { key: 'a27a5dd8bff4350c882eeab12f8ebcf32d629333', class: "bs-message__column" }, h("bs-card", { key: '4dd1f9da16be30b04f1c6bea178600ff11f6b654', part: "container", class: "bs-message__bubble", surface: "base" }, h("div", { key: 'c4dbf71df32e0b962e20929488952149c88f3b04', part: "content", class: "bs-message__content" }, h("slot", { key: '2b251a032180bc3e1ef4b027179ddde73a7f9dcc' }))), h("div", { key: '749ba9490b9204fe4f514bb5f15190e658309e9b', part: "footer", class: "bs-message__footer" }, h("slot", { key: '43e305fe85d7fcf81afb115d7477035108cece44', name: "footer" })), h("div", { key: '4c224882dbe5d0f01117cd276f5d3050426cd344', part: "timestamp", class: "bs-message__timestamp" }, h("slot", { key: 'e9a2ccfb8628e5c3d3840fbda5b70009af6e0c6f', name: "timestamp" }, this.timestamp && h("time", { key: '9b4dc4a6e042367420c8b7355621ad42075f335e', dateTime: this.datetime }, this.timestamp))))));
     }
     static get is() { return "bs-message"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-message-list/bs-message-list.js

@@ -75,7 +75,7 @@ export class BsMessageList {
         }
     };
     render() {
-        return (h("div", { key: '027f7d1e7a442e3c669cc5ce5a798c64f9f1239e', class: "bs-message-list" }, h("div", { key: '6b428190b1fadeacfa0e090d6d17e2455da816aa', part: "viewport", class: "bs-message-list__viewport", role: "log", "aria-live": "polite", tabindex: "0", ref: el => (this.viewport = el), onScroll: this.onScroll }, h("slot", { key: '947524fe3d132633bffd151bb7aecb316aadf382' })), this.showScrollButton && (h("bs-icon-button", { key: '17069d19e0e931a14dbeb71ae09bc521a697eabf', part: "scroll-to-latest", class: "bs-message-list__scroll", variant: "neutral", ariaLabel: this.scrollToLatestLabel, onClick: () => this.scrollToLatest() }, h("svg", { key: '7ee28b01218310357a7102cd9eee7cc207101813', width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: '5880bf08092901ad03ee071c6ea4a4401d9517d9', d: "M8 3v10M3.5 8.5L8 13l4.5-4.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))));
+        return (h("div", { key: 'e474c22e93a8559c37efa3e13670bf6f48da5140', class: "bs-message-list" }, h("div", { key: 'f29d2f07b872743353ac0595399f5d87d94b2ace', part: "viewport", class: "bs-message-list__viewport", role: "log", "aria-live": "polite", tabindex: "0", ref: el => (this.viewport = el), onScroll: this.onScroll }, h("slot", { key: '265e61fefe2219e57cb9724f68ca76752849a1f6' })), this.showScrollButton && (h("bs-icon-button", { key: '960398acea1fe8b6cdb00469ee23531b40715ac9', part: "scroll-to-latest", class: "bs-message-list__scroll", variant: "neutral", ariaLabel: this.scrollToLatestLabel, onClick: () => this.scrollToLatest() }, h("svg", { key: '748dfcd735223d1482ebe6e0b24383c8018a976f', width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: 'af9d03ca412502d46822588c9bcb303e44dd33c3', d: "M8 3v10M3.5 8.5L8 13l4.5-4.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))));
     }
     static get is() { return "bs-message-list"; }
     static get encapsulation() { return "shadow"; }