@brandsync/wc 1.16.0 → 1.18.0

package/dist/collection/components/bs-global-search/bs-global-search.stories.js

@@ -0,0 +1,146 @@
+import { html } from "lit";
+import { componentDescription } from "../../stories-utils";
+const svg = (inner) => {
+    const t = document.createElement('template');
+    t.innerHTML = `<svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${inner}</svg>`;
+    return t.content.firstElementChild;
+};
+/** Inline icon paths (no external URLs). */
+export const ICON_PATHS = {
+    history: '<path d="M3 12a9 9 0 1 0 3-6.7L3 8" /><path d="M3 3v5h5M12 7v5l3 2" />',
+    users: '<circle cx="9" cy="8" r="3.5" /><path d="M2.5 20a6.5 6.5 0 0 1 13 0" /><path d="M16 4.6a3.5 3.5 0 0 1 0 6.8M18 14a6.5 6.5 0 0 1 3.5 6" />',
+    package: '<path d="M21 8 12 3 3 8v8l9 5 9-5V8Z" /><path d="m3 8 9 5 9-5M12 13v8" />',
+    receipt: '<path d="M6 3h12v18l-3-2-3 2-3-2-3 2V3Z" /><path d="M9 8h6M9 12h6" />',
+    invoice: '<path d="M7 3h8l4 4v14H7V3Z" /><path d="M15 3v4h4M10 12h6M10 16h6" />',
+    search: '<circle cx="11" cy="11" r="7" /><path d="m20 20-3.5-3.5" />',
+};
+/** Figma "Global Search" data, shared by the stories. */
+export const RECENT = [
+    { value: 'r1', label: 'nordic sports', trailing: '2 min ago' },
+    { value: 'r2', label: 'INV-20931', trailing: 'Yesterday' },
+    { value: 'r3', label: 'wool sweater', trailing: 'Mon' },
+];
+export const JUMP_TO = [
+    { value: 'customers', label: 'Customers', trailing: '1,284', icon: 'users' },
+    { value: 'products', label: 'Products', trailing: '8,930', icon: 'package' },
+    { value: 'orders', label: 'Orders', trailing: '24,117', icon: 'receipt' },
+    { value: 'invoices', label: 'Invoices', trailing: '19,402', icon: 'invoice' },
+];
+export const TOP_MATCHES = [
+    { value: 'c-nordic-sports', match: 'Nordic', rest: ' Sports AS', description: 'Customer · Oslo · 48 orders', trailing: 'Customer', icon: 'users' },
+    { value: 'p-10442', match: 'Nordic', rest: ' Wool Sweater', description: 'SKU 10442 · 126 in stock', trailing: 'Product', icon: 'package' },
+    { value: 'o-48213', prefix: 'Order #48213 · ', match: 'Nordic', rest: ' Sports AS', description: '12 Oct · NOK 12 480', trailing: 'Order', icon: 'receipt' },
+];
+export const SEARCH_IN = [
+    { value: 'in-customers', label: 'Customers', trailing: '12' },
+    { value: 'in-products', label: 'Products', trailing: '38' },
+    { value: 'in-orders', label: 'Orders', trailing: '146' },
+];
+const recentItems = () => RECENT.map(r => html `<bs-search-item slot="recent" value=${r.value} trailing=${r.trailing}>${svg(ICON_PATHS.history)}${r.label}</bs-search-item>`);
+const jumpItems = () => JUMP_TO.map(j => html `<bs-search-item slot="jump-to" value=${j.value} trailing=${j.trailing}>${svg(ICON_PATHS[j.icon])}${j.label}</bs-search-item>`);
+const topItems = () => TOP_MATCHES.map(m => html `<bs-search-item slot="top-matches" value=${m.value}>
+      ${svg(ICON_PATHS[m.icon])}${'prefix' in m ? m.prefix : ''}<strong>${m.match}</strong>${m.rest}
+      <span slot="description">${m.description}</span>
+      <span slot="trailing">${m.trailing}</span>
+    </bs-search-item>`);
+const searchInItems = () => SEARCH_IN.map(s => html `<bs-search-item slot="search-in" value=${s.value} trailing=${s.trailing}>${svg(ICON_PATHS.search)}“nordic” in ${s.label}</bs-search-item>`);
+const meta = {
+    // The shared story data constants are exported for the tests; keep them out of the sidebar.
+    excludeStories: /^[A-Z0-9_]+$/,
+    title: 'Components/bs-global-search',
+    parameters: { layout: 'padded', docs: { description: { component: componentDescription('bs-global-search') } } },
+    argTypes: {
+        value: { control: 'text' },
+        open: { control: 'boolean' },
+        status: { control: 'select', options: ['default', 'results', 'empty', 'error'] },
+        totalResults: { control: 'number' },
+        placeholder: { control: 'text' },
+        disabled: { control: 'boolean' },
+    },
+    args: { value: '', open: true, status: 'default', placeholder: 'Search customers, orders, products…', disabled: false },
+    render: args => html `
+    <div style="min-height: 700px">
+      <bs-global-search
+        .value=${args.value}
+        .open=${args.open}
+        .status=${args.status}
+        .totalResults=${args.totalResults}
+        .placeholder=${args.placeholder}
+        .disabled=${args.disabled}
+      >
+        ${recentItems()} ${jumpItems()}
+      </bs-global-search>
+    </div>
+  `,
+};
+export default meta;
+export const Closed = { args: { open: false } };
+export const Default = {};
+export const Results = {
+    args: { value: 'nordic', status: 'results', totalResults: 196 },
+    render: args => html `
+    <div style="min-height: 700px">
+      <bs-global-search .value=${args.value} .open=${args.open} .status=${args.status} .totalResults=${args.totalResults}>
+        ${topItems()} ${searchInItems()}
+      </bs-global-search>
+    </div>
+  `,
+};
+export const NoResults = {
+    args: { value: 'zzzz', status: 'empty' },
+    render: args => html `
+    <div style="min-height: 700px">
+      <bs-global-search
+        .value=${args.value}
+        .open=${args.open}
+        status="empty"
+        empty-heading="No events match these filters"
+        empty-description="Try a wider date range or clear filters."
+        clear-search-label="Clear filters"
+      ></bs-global-search>
+    </div>
+  `,
+};
+export const Error = {
+    args: { value: 'nordic', status: 'error' },
+    render: args => html `
+    <div style="min-height: 700px">
+      <bs-global-search .value=${args.value} .open=${args.open} status="error"></bs-global-search>
+    </div>
+  `,
+};
+export const Interactive = {
+    args: { open: false },
+    render: () => {
+        const log = (out, name, detail) => {
+            out.textContent = `${name}${detail === undefined ? '' : ' ' + JSON.stringify(detail)}`;
+        };
+        const wrap = document.createElement('div');
+        wrap.style.minHeight = '700px';
+        const out = document.createElement('output');
+        out.style.cssText = 'display:block;margin-top:8px;font:14px/20px monospace;color:var(--bs-text-secondary)';
+        out.textContent = 'Type, use the arrow keys, press Enter or Esc.';
+        const gs = document.createElement('bs-global-search');
+        gs.innerHTML = [
+            ...RECENT.map(r => `<bs-search-item slot="recent" value="${r.value}" trailing="${r.trailing}">${r.label}</bs-search-item>`),
+            ...JUMP_TO.map(j => `<bs-search-item slot="jump-to" value="${j.value}" trailing="${j.trailing}">${j.label}</bs-search-item>`),
+            ...TOP_MATCHES.map(m => `<bs-search-item slot="top-matches" value="${m.value}">${'prefix' in m ? m.prefix : ''}<strong>${m.match}</strong>${m.rest}<span slot="description">${m.description}</span><span slot="trailing">${m.trailing}</span></bs-search-item>`),
+            ...SEARCH_IN.map(s => `<bs-search-item slot="search-in" value="${s.value}" trailing="${s.trailing}">“nordic” in ${s.label}</bs-search-item>`),
+        ].join('');
+        // The app owns the search logic: show results while there is a query.
+        gs.addEventListener('bsInput', e => {
+            const q = e.detail;
+            gs.status = q ? (q.toLowerCase().includes('zz') ? 'empty' : 'results') : 'default';
+            gs.totalResults = q ? 196 : undefined;
+            log(out, 'bsInput', q);
+        });
+        for (const n of ['bsSearch', 'bsSelect', 'bsOpenChange', 'bsClearRecent', 'bsClearSearch', 'bsSeeAll', 'bsRetry']) {
+            gs.addEventListener(n, e => log(out, n, e.detail));
+        }
+        gs.addEventListener('bsClearSearch', () => {
+            gs.status = 'default';
+        });
+        wrap.append(gs, out);
+        return wrap;
+    },
+};

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

@@ -59,12 +59,12 @@ export class BsGrid {
         const row = this.rowGap ? this.token(this.rowGap) : gapValue;
         const col = this.columnGap ? this.token(this.columnGap) : gapValue;
         const align = ALIGNS.includes(this.align) ? this.align : 'stretch';
-        return (h("div", { key: 'a89d345eac5d88dd24b21606eb35b1f21e1b54dd', class: "bs-grid", part: "container", style: {
+        return (h("div", { key: 'd504eaf0d6db8c106094f3efb60600b65774ea4d', class: "bs-grid", part: "container", style: {
                 gridTemplateColumns: this.template(),
                 rowGap: `var(--bs-grid-row-gap, ${row})`,
                 columnGap: `var(--bs-grid-column-gap, ${col})`,
                 alignItems: align,
-            } }, h("slot", { key: 'f5676a0cc12cf0fafc04045b4fed50aee50d2995' })));
+            } }, h("slot", { key: 'd127b6a767777b1d2cc3fe981e1846e5a8726a60' })));
     }
     static get is() { return "bs-grid"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-icon-tile/bs-icon-tile.js

@@ -24,6 +24,7 @@ import { h } from "@stencil/core";
  * @part text - The wrapper around the `text` slot (only shown when something is slotted).
  */
 export class BsIconTile {
+    el;
     /** Tile size: `sm` 24px, `md` 32px, `lg` 48px. */
     size = 'sm';
     /** Colour and default glyph. `brand` uses the brand colours; `information` the info palette. */
@@ -35,11 +36,18 @@ export class BsIconTile {
     hasCustomIcon = false;
     /** True while something is assigned to the `text` slot, so the text wrapper (and its gap) only exists then. */
     hasText = false;
+    /** `slotchange` alone is not enough: when the icon is already a child at first render (or is added in the same
+     * pass that upgrades this element) the event can fire before the handler is attached, leaving the default
+     * glyph drawn next to the slotted icon. Read the light DOM once up front. */
+    componentWillLoad() {
+        this.hasCustomIcon = Array.from(this.el.childNodes).some(n => (n.nodeType === Node.ELEMENT_NODE && !n.hasAttribute('slot')) || (n.nodeType === Node.TEXT_NODE && !!n.textContent?.trim()));
+        this.hasText = Array.from(this.el.children).some(c => c.getAttribute('slot') === 'text');
+    }
     render() {
         const labelled = !!this.label;
         return [
-            h("div", { key: '47586c94633cb072243559352fff92ffc178b59e', part: "container", class: "bs-icon-tile", role: labelled ? 'img' : undefined, "aria-label": labelled ? this.label : undefined, "aria-hidden": labelled ? undefined : 'true' }, h("span", { key: 'af1f942a94eed409beaaf6845eee09003ef70fd4', part: "icon", class: "bs-icon-tile__icon" }, h("slot", { key: 'be9df10596772e84a65d4de467117ea6c6a13c29', onSlotchange: (ev) => (this.hasCustomIcon = hasContent(ev.target)) }), !this.hasCustomIcon && (GLYPHS[this.intent] ?? GLYPHS.default))),
-            h("span", { key: '0522505b1001e511e5c2446025a05b6e80ef0176', part: "text", class: { 'bs-icon-tile__text': true, 'bs-icon-tile__text--visible': this.hasText } }, h("slot", { key: '0fc0bb97e5b23a984bcd64eafc0133eb93782c2f', name: "text", onSlotchange: (ev) => (this.hasText = ev.target.assignedNodes().length > 0) })),
+            h("div", { key: 'ea92c7e93e3283dccf7feb0afcc87947eb9f3087', part: "container", class: "bs-icon-tile", role: labelled ? 'img' : undefined, "aria-label": labelled ? this.label : undefined, "aria-hidden": labelled ? undefined : 'true' }, h("span", { key: '50ba78a85b831869ea60882b89739cc0ef36a6b4', part: "icon", class: "bs-icon-tile__icon" }, h("slot", { key: 'ab395f4bfc9a40be9ac74f05ebf227a241cdfca8', onSlotchange: (ev) => (this.hasCustomIcon = hasContent(ev.target)) }), !this.hasCustomIcon && (GLYPHS[this.intent] ?? GLYPHS.default))),
+            h("span", { key: '07ad1aa22ba646f82b8eb2782ddda0c816dc47a5', part: "text", class: { 'bs-icon-tile__text': true, 'bs-icon-tile__text--visible': this.hasText } }, h("slot", { key: 'f4209dee495bf82b95c95fcd754bdf8305d5b02f', name: "text", onSlotchange: (ev) => (this.hasText = ev.target.assignedNodes().length > 0) })),
         ];
     }
     static get is() { return "bs-icon-tile"; }
@@ -135,6 +143,7 @@ export class BsIconTile {
             "hasText": {}
         };
     }
+    static get elementRef() { return "el"; }
 }
 function hasContent(slot) {
     return slot.assignedNodes().some(n => n.nodeType === Node.ELEMENT_NODE || (n.nodeType === Node.TEXT_NODE && !!n.textContent?.trim()));

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

@@ -397,10 +397,10 @@ export class BsInput {
         return (h("div", { part: "field", class: `bs-input__field bs-input__field--pin ${errorClass} ${disabledClass}` }, Array.from({ length: this.length }).map((_, i) => (h("input", { id: i === 0 ? 'control' : undefined, ref: el => (this.pinInputs[i] = el), part: "control", class: "bs-input__pin-cell", type: "text", inputMode: "numeric", maxLength: 1, value: this.value[i] ?? '', disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, onInput: this.onPinInput(i), onKeyDown: this.onPinKeydown(i) })))));
     }
     render() {
-        return (h("div", { key: 'ec191e3590785654e3701c7c49b1643f671dcc16', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
+        return (h("div", { key: '3c0ea65d5b8852b14e1295d6a6a33aef95d02d01', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
         // "control" is a fixed id, not a generated one -- safe because Shadow DOM scopes ids
         // to this instance's own shadow root, so it can never collide with another bs-input.
-        h("label", { key: '264558031d7bdf104254724ad1891c893668da60', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label, this.required && (h("span", { key: '225d41e84484f1f160765a9f01e49a0bd850650c', part: "required", class: "bs-input__required", "aria-hidden": "true" }, "*")))), this.type === 'pin' ? this.renderPinField() : this.type === 'initials' ? this.renderInitialsField() : this.renderField(), this.error ? (h("span", { id: "description-or-error", part: "error", class: "bs-input__error" }, h("svg", { part: "error-icon", class: "bs-input__error-icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", "stroke-width": "1.2" }), h("path", { d: "M8 5V8.5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" }), h("circle", { cx: "8", cy: "11", r: "0.75", fill: "currentColor" })), this.error)) : this.description ? (h("span", { id: "description-or-error", part: "description", class: "bs-input__description" }, this.description)) : null));
+        h("label", { key: '13e99193d9906c7c7534df1c9bd6395f1a758524', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label, this.required && (h("span", { key: 'ac14aa6322a8ce40624cdc392dde96b7bad298a8', part: "required", class: "bs-input__required", "aria-hidden": "true" }, "*")))), this.type === 'pin' ? this.renderPinField() : this.type === 'initials' ? this.renderInitialsField() : this.renderField(), this.error ? (h("span", { id: "description-or-error", part: "error", class: "bs-input__error" }, h("svg", { part: "error-icon", class: "bs-input__error-icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", "stroke-width": "1.2" }), h("path", { d: "M8 5V8.5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" }), h("circle", { cx: "8", cy: "11", r: "0.75", fill: "currentColor" })), this.error)) : this.description ? (h("span", { id: "description-or-error", part: "description", class: "bs-input__description" }, this.description)) : null));
     }
     static get is() { return "bs-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-key/bs-key.cmp.test.js

@@ -0,0 +1,59 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+import { assertShadowParts, runAxeCheck } from "../../test/helpers/conventions";
+const cap = (host) => host.shadowRoot.querySelector('[part="container"]');
+const tokenColor = (token, prop = 'backgroundColor') => {
+    const p = document.createElement('div');
+    p.style[prop === 'backgroundColor' ? 'background' : prop === 'color' ? 'color' : 'borderTopColor'] = `var(${token})`;
+    if (prop === 'borderTopColor')
+        p.style.borderTopStyle = 'solid';
+    document.body.appendChild(p);
+    const c = getComputedStyle(p)[prop];
+    p.remove();
+    return c;
+};
+describe('bs-key', () => {
+    it('renders a <kbd> cap with the label from the prop', async () => {
+        const { root } = await render(h("bs-key", { label: "Ctrl" }));
+        expect(cap(root).tagName).toBe('KBD');
+        expect(root.shadowRoot.querySelector('[part="label"]')).not.toBeNull();
+        expect(root).toHaveTextContent('');
+        expect(root.shadowRoot.querySelector('slot:not([name])').textContent).toBe('Ctrl');
+    });
+    it('lets the default slot override the label prop', async () => {
+        const { root } = await render(h("bs-key", { label: "Ignored" }, "Esc"));
+        const slot = root.shadowRoot.querySelector('slot:not([name])');
+        expect(slot.assignedNodes()[0].textContent).toBe('Esc');
+    });
+    it('has the Figma cap geometry and colours', async () => {
+        const { root } = await render(h("bs-key", { label: "Ctrl" }));
+        const cs = getComputedStyle(cap(root));
+        expect(cs.paddingTop).toBe('4px');
+        expect(cs.paddingLeft).toBe('6px');
+        expect(cs.borderRadius).toBe('4px');
+        expect(cs.borderTopWidth).toBe('1px');
+        expect(cs.fontSize).toBe('12px');
+        expect(cs.lineHeight).toBe('16px');
+        expect(cs.backgroundColor).toBe(tokenColor('--bs-surface-base'));
+        expect(cs.color).toBe(tokenColor('--bs-text-secondary', 'color'));
+        expect(cs.borderTopColor).toBe(tokenColor('--bs-border-default', 'borderTopColor'));
+        // 16px line + 8px padding + 2px border
+        expect(Math.round(cap(root).getBoundingClientRect().height)).toBe(26);
+    });
+    it('keeps a keycap shape for a single character (25px minimum width)', async () => {
+        const { root } = await render(h("bs-key", { label: "K" }));
+        expect(Math.round(cap(root).getBoundingClientRect().width)).toBe(25);
+    });
+    it('shows a 16px icon instead of the label when the icon slot is filled', async () => {
+        const { root, waitForChanges } = await render(h("bs-key", { label: "Enter" }, h("svg", { slot: "icon", viewBox: "0 0 24 24" })));
+        await waitForChanges();
+        expect(root.shadowRoot.querySelector('[part="label"]')).toBeNull();
+        const icon = root.shadowRoot.querySelector('[part="icon"]');
+        expect(Math.round(icon.getBoundingClientRect().width)).toBe(16);
+        expect(Math.round(icon.getBoundingClientRect().height)).toBe(16);
+    });
+    it('exposes the documented shadow parts and passes axe', async () => {
+        const { root } = await render(h("bs-key", { label: "Ctrl" }));
+        assertShadowParts(root.shadowRoot, ['container', 'label', 'icon']);
+        await runAxeCheck(root);
+    });
+});

package/dist/collection/components/bs-key/bs-key.css

@@ -0,0 +1,58 @@
+:host {
+  display: inline-flex;
+  align-items: center;
+  /* Gap between a "+" separator (drawn by bs-key-caps as ::before on this host) and the cap. */
+  gap: var(--bs-spacing-100);
+  --bs-key-bg: var(--bs-surface-base);
+  --bs-key-border-color: var(--bs-border-default);
+  --bs-key-radius: var(--bs-border-radius-50);
+  --bs-key-padding-x: var(--bs-spacing-75);
+  --bs-key-padding-y: var(--bs-spacing-50);
+  /* Literal values from the Figma "Base keys" component (25px minimum width, 16px icon). */
+  --bs-key-min-width: 25px;
+  --bs-key-color: var(--bs-text-secondary);
+  --bs-key-font-size: var(--bs-font-size-xs);
+  --bs-key-icon-size: 16px;
+}
+
+.bs-key {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--bs-key-min-width);
+  padding: var(--bs-key-padding-y) var(--bs-key-padding-x);
+  background: var(--bs-key-bg);
+  border: 1px solid var(--bs-key-border-color);
+  border-radius: var(--bs-key-radius);
+  color: var(--bs-key-color);
+  /* <kbd> defaults to monospace; Figma uses the regular UI font. */
+  font-family: inherit;
+  font-size: var(--bs-key-font-size);
+  font-weight: var(--bs-font-weight-regular);
+  line-height: calc(var(--bs-line-height-caption-sm) * 1px);
+  text-align: center;
+  white-space: nowrap;
+}
+
+.bs-key__label {
+  display: block;
+}
+
+.bs-key__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--bs-key-icon-size);
+  height: var(--bs-key-icon-size);
+}
+
+.bs-key__icon--hidden {
+  display: none;
+}
+
+.bs-key__icon ::slotted(*) {
+  display: block;
+  width: 100%;
+  height: 100%;
+}

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

@@ -0,0 +1,84 @@
+import { h } from "@stencil/core";
+/**
+ * One key of a keyboard shortcut, e.g. `Ctrl`, `K` or `Esc` -- rendered as a `<kbd>` keycap.
+ * Shows a text label, or an icon (e.g. a return arrow) via the `icon` slot.
+ *
+ * ## When to use
+ * - Showing a keyboard shortcut hint next to a control or inside a search field.
+ * - Alone for a single key, or as the children of `bs-key-caps` for a multi-key shortcut.
+ *
+ * ## When not to use
+ * - As a button or any clickable control -- a key is a static hint, not interactive.
+ *
+ * @slot - The key's label text (overrides the `label` prop), e.g. `Ctrl`.
+ * @slot icon - An icon shown instead of the label (16px), e.g. a return arrow.
+ * @part container - The `<kbd>` cap.
+ * @part label - The label text wrapper (not rendered while the `icon` slot is filled).
+ * @part icon - The icon wrapper (only rendered while the `icon` slot is filled).
+ * @prop --bs-key-bg - Cap background. Aliased to `--bs-surface-base`.
+ * @prop --bs-key-border-color - Cap border colour. Aliased to `--bs-border-default`.
+ * @prop --bs-key-radius - Cap corner radius. Aliased to `--bs-border-radius-50`.
+ * @prop --bs-key-padding-x - Horizontal padding. Aliased to `--bs-spacing-75`.
+ * @prop --bs-key-padding-y - Vertical padding. Aliased to `--bs-spacing-50`.
+ * @prop --bs-key-min-width - Smallest cap width, so single characters keep a keycap shape. Defaults to `25px` (Figma).
+ * @prop --bs-key-color - Label colour. Aliased to `--bs-text-secondary`.
+ * @prop --bs-key-font-size - Label size. Aliased to `--bs-font-size-xs` (12px).
+ * @prop --bs-key-icon-size - Icon size. Defaults to `16px` (Figma).
+ */
+export class BsKey {
+    el;
+    /** The key's text, e.g. `Ctrl`. The default slot overrides it. */
+    label;
+    /** Tracks whether the `icon` slot has content, so the label is replaced by the icon. */
+    hasIcon = false;
+    componentWillLoad() {
+        this.hasIcon = Array.from(this.el.children).some(c => c.getAttribute('slot') === 'icon');
+    }
+    onIconSlotChange = (ev) => {
+        this.hasIcon = ev.target.assignedNodes().length > 0;
+    };
+    render() {
+        return (h("kbd", { key: '45bd298f9fcf91ac4a6fd1c10c879a9373c53fae', part: "container", class: "bs-key" }, !this.hasIcon && (h("span", { key: '019bb8652eef6eafbe3d11ac0a179aa06a853e99', part: "label", class: "bs-key__label" }, h("slot", { key: '9b4e0c377ad3a6ab51125894aca36164e3f4546c' }, this.label))), h("span", { key: '2d8618a0a71f799d6b4c3c8ecd3364d2a744879d', part: "icon", class: { 'bs-key__icon': true, 'bs-key__icon--hidden': !this.hasIcon } }, h("slot", { key: '9c7bf13a4ddf4ad57fcee6c81653783eb0bde3c4', name: "icon", onSlotchange: this.onIconSlotChange }))));
+    }
+    static get is() { return "bs-key"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-key.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-key.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The key's text, e.g. `Ctrl`. The default slot overrides it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasIcon": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/bs-key/bs-key.stories.js

@@ -0,0 +1,19 @@
+import { html } from "lit";
+import { componentDescription } from "../../stories-utils";
+const RETURN_ICON = html `<svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 14 4 9l5-5" /><path d="M4 9h10.5a5.5 5.5 0 0 1 0 11H11" /></svg>`;
+const meta = {
+    title: 'Components/bs-key',
+    parameters: { docs: { description: { component: componentDescription('bs-key') } } },
+    render: args => html `<bs-key label=${args.label}></bs-key>`,
+    argTypes: { label: { control: 'text' } },
+    args: { label: 'Ctrl' },
+};
+export default meta;
+export const Text = {};
+export const Icon = {
+    render: () => html `<bs-key>${RETURN_ICON}</bs-key>`,
+};
+export const SingleCharacter = { args: { label: 'K' } };
+export const LabelFromSlot = {
+    render: () => html `<bs-key>Esc</bs-key>`,
+};

package/dist/collection/components/bs-key-caps/bs-key-caps.cmp.test.js

@@ -0,0 +1,60 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+import { runAxeCheck } from "../../test/helpers/conventions";
+const group = (host) => host.shadowRoot.querySelector('[part="container"]');
+const keysIn = (host) => Array.from(host.shadowRoot.querySelectorAll('bs-key'));
+const sepContent = (el) => getComputedStyle(el, '::before').content;
+describe('bs-key-caps', () => {
+    it('renders one bs-key per "+"-separated key in the string', async () => {
+        const { root } = await render(h("bs-key-caps", { keys: "Ctrl + Shift+K" }));
+        const keys = keysIn(root);
+        expect(keys.length).toBe(3);
+        expect(keys.map(k => k.label)).toEqual(['Ctrl', 'Shift', 'K']);
+    });
+    it('accepts an array so a literal plus key is possible', async () => {
+        const { root } = await render(h("bs-key-caps", { keys: ['Ctrl', '+'] }));
+        expect(keysIn(root).map(k => k.label)).toEqual(['Ctrl', '+']);
+    });
+    it('draws a "+" before every key except the first', async () => {
+        const { root } = await render(h("bs-key-caps", { keys: "Ctrl+Alt+Del" }));
+        const keys = keysIn(root);
+        expect(sepContent(keys[0])).toBe('none');
+        expect(sepContent(keys[1])).toBe('"+"');
+        expect(sepContent(keys[2])).toBe('"+"');
+    });
+    it('lays keys out 8px apart, centred, like Figma (Keys=2 is two caps and one "+")', async () => {
+        const { root } = await render(h("bs-key-caps", { keys: "Ctrl+Ctrl" }));
+        const cs = getComputedStyle(group(root));
+        expect(cs.columnGap).toBe('8px');
+        expect(cs.alignItems).toBe('center');
+        const k = keysIn(root);
+        expect(Math.round(k[0].getBoundingClientRect().height)).toBe(26);
+    });
+    it('supports slotted bs-key elements, including icon keys, with the same separators', async () => {
+        const { root, waitForChanges } = await render(h("bs-key-caps", null, h("bs-key", { label: "Ctrl" }), h("bs-key", null, h("svg", { slot: "icon", viewBox: "0 0 24 24" }))));
+        await waitForChanges();
+        const slotted = Array.from(root.querySelectorAll('bs-key'));
+        expect(sepContent(slotted[0])).toBe('none');
+        expect(sepContent(slotted[1])).toBe('"+"');
+    });
+    it('is a labelled group: label defaults to the keys joined with "plus"', async () => {
+        const { root } = await render(h("bs-key-caps", { keys: "Ctrl+K" }));
+        expect(group(root)).toEqualAttribute('role', 'group');
+        expect(group(root)).toEqualAttribute('aria-label', 'Ctrl plus K');
+    });
+    it('lets label override the accessible name', async () => {
+        const { root } = await render(h("bs-key-caps", { keys: "Ctrl+K", label: "Open search" }));
+        expect(group(root)).toEqualAttribute('aria-label', 'Open search');
+    });
+    it('dims the whole shortcut to 38% and marks it aria-disabled when disabled', async () => {
+        const { root, waitForChanges } = await render(h("bs-key-caps", { keys: "Ctrl+K" }));
+        expect(getComputedStyle(group(root)).opacity).toBe('1');
+        root.setAttribute('disabled', '');
+        await waitForChanges();
+        expect(getComputedStyle(group(root)).opacity).toBe('0.38');
+        expect(group(root)).toEqualAttribute('aria-disabled', 'true');
+    });
+    it('passes axe', async () => {
+        const { root } = await render(h("bs-key-caps", { keys: "Ctrl+K" }));
+        await runAxeCheck(root);
+    });
+});

package/dist/collection/components/bs-key-caps/bs-key-caps.css

@@ -0,0 +1,28 @@
+:host {
+  display: inline-block;
+  --bs-key-caps-gap: var(--bs-spacing-100);
+  --bs-key-caps-separator-color: var(--bs-text-muted);
+  /* Literal from the Figma "Key caps" Disabled variant; there is no 38% opacity token. */
+  --bs-key-caps-disabled-opacity: 0.38;
+}
+
+.bs-key-caps {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bs-key-caps-gap);
+}
+
+/* The "+" is drawn as ::before on each key after the first (the key host is a flex row with its
+   own gap), so it works for both generated keys and slotted ones without moving any nodes. */
+.bs-key-caps bs-key:not(:first-child)::before,
+::slotted(bs-key:not(:first-child))::before {
+  content: '+';
+  color: var(--bs-key-caps-separator-color);
+  font-size: var(--bs-font-size-xs);
+  line-height: calc(var(--bs-line-height-caption-sm) * 1px);
+}
+
+/* Slotted keys are laid out by this group's gap; the separator already includes its own spacing. */
+:host([disabled]) .bs-key-caps {
+  opacity: var(--bs-key-caps-disabled-opacity);
+}