@brandsync/wc 1.15.0 → 1.17.0

package/dist/collection/components/bs-search-item/bs-search-item.cmp.test.js

@@ -0,0 +1,147 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+import { userEvent } from "vitest/browser";
+import { assertShadowParts, runAxeCheck } from "../../test/helpers/conventions";
+const row = (host) => host.shadowRoot.querySelector('[part="container"]');
+const part = (host, p) => host.shadowRoot.querySelector(`[part="${p}"]`);
+const tokenColor = (token, prop = 'backgroundColor') => {
+    const p = document.createElement('div');
+    p.style[prop === 'color' ? 'color' : 'background'] = `var(${token})`;
+    document.body.appendChild(p);
+    const c = getComputedStyle(p)[prop];
+    p.remove();
+    return c;
+};
+const bg = (host) => getComputedStyle(row(host)).backgroundColor;
+const settle = () => new Promise(r => setTimeout(r, 250));
+describe('bs-search-item', () => {
+    it('has the Figma geometry', async () => {
+        const { root } = await render(h("bs-search-item", { value: "a" }, "Label"));
+        const cs = getComputedStyle(row(root));
+        expect(cs.minHeight).toBe('48px');
+        expect(Math.round(row(root).getBoundingClientRect().height)).toBe(48);
+        expect(cs.paddingTop).toBe('8px');
+        expect(cs.paddingLeft).toBe('12px');
+        expect(cs.columnGap).toBe('8px');
+        expect(cs.borderRadius).toBe('8px');
+        expect(cs.cursor).toBe('pointer');
+        expect(cs.alignItems).toBe('center');
+        const label = getComputedStyle(part(root, 'label'));
+        expect(label.fontSize).toBe('16px');
+        expect(label.lineHeight).toBe('24px');
+        expect(label.fontWeight).toBe('400');
+        assertShadowParts(root.shadowRoot, ['container', 'icon', 'content', 'label', 'description', 'trailing']);
+    });
+    it('styles slotted description, trailing text and strong matches', async () => {
+        const { root, waitForChanges } = await render(h("bs-search-item", { value: "a" }, h("svg", { slot: "icon", viewBox: "0 0 24 24" }), h("strong", null, "Nor"), "dic", h("span", { slot: "description" }, "Customer"), h("span", { slot: "trailing" }, "Order")));
+        await waitForChanges();
+        const d = getComputedStyle(part(root, 'description'));
+        expect(d.fontSize).toBe('14px');
+        expect(d.lineHeight).toBe('20px');
+        expect(d.color).toBe(tokenColor('--bs-text-muted', 'color'));
+        const t = getComputedStyle(part(root, 'trailing'));
+        expect(t.whiteSpace).toBe('nowrap');
+        expect(t.flexShrink).toBe('0');
+        expect(t.color).toBe(tokenColor('--bs-text-muted', 'color'));
+        expect(getComputedStyle(root.querySelector('strong')).fontWeight).toBe('600');
+        expect(Math.round(part(root, 'icon').getBoundingClientRect().width)).toBe(24);
+    });
+    it('hides empty icon, description and trailing wrappers', async () => {
+        const { root } = await render(h("bs-search-item", null, "Label"));
+        expect(getComputedStyle(part(root, 'icon')).display).toBe('none');
+        expect(getComputedStyle(part(root, 'description')).display).toBe('none');
+        expect(getComputedStyle(part(root, 'trailing')).display).toBe('none');
+    });
+    it('shows the trailing prop as shorthand and lets the slot override it', async () => {
+        const { root, waitForChanges } = await render(h("bs-search-item", { trailing: "1,284" }, "Customers"));
+        expect(part(root, 'trailing').textContent).toBe('1,284');
+        expect(getComputedStyle(part(root, 'trailing')).display).not.toBe('none');
+        const span = document.createElement('span');
+        span.slot = 'trailing';
+        span.textContent = 'Slotted';
+        root.appendChild(span);
+        await waitForChanges();
+        const slot = part(root, 'trailing').querySelector('slot');
+        expect(slot.assignedNodes()[0]).toBe(span);
+    });
+    it('has no role standalone and option semantics when the parent sets selectionRole', async () => {
+        const { root, waitForChanges } = await render(h("bs-search-item", null, "Label"));
+        expect(row(root).hasAttribute('role')).toBe(false);
+        expect(root.hasAttribute('role')).toBe(false);
+        root.selectionRole = 'option';
+        await waitForChanges();
+        expect(row(root)).toEqualAttribute('role', 'option');
+        expect(row(root)).toEqualAttribute('aria-selected', 'false');
+        root.setAttribute('active', '');
+        await waitForChanges();
+        expect(row(root)).toEqualAttribute('aria-selected', 'true');
+        root.setAttribute('disabled', '');
+        await waitForChanges();
+        expect(row(root)).toEqualAttribute('aria-disabled', 'true');
+    });
+    it('resolves resting, active, hover and pressed backgrounds from tokens', async () => {
+        const { root, waitForChanges } = await render(h("bs-search-item", { value: "a" }, "Label"));
+        await userEvent.unhover(row(root));
+        await settle();
+        expect(bg(root)).toBe('rgba(0, 0, 0, 0)');
+        root.setAttribute('active', '');
+        await waitForChanges();
+        await settle();
+        expect(bg(root)).toBe(tokenColor('--bs-surface-hover'));
+        root.removeAttribute('active');
+        await waitForChanges();
+        await settle();
+        expect(bg(root)).toBe('rgba(0, 0, 0, 0)');
+        await userEvent.hover(root);
+        await settle();
+        expect(bg(root)).toBe(tokenColor('--bs-surface-hover'));
+    });
+    it('wires the pressed background to the surface-pressed token', async () => {
+        const { root } = await render(h("bs-search-item", { value: "a" }, "Label"));
+        // Rule check: the stylesheet carries an :active rule using --bs-search-item-bg-pressed.
+        const sheets = root.shadowRoot.adoptedStyleSheets;
+        const text = [...(sheets ?? []), ...Array.from(root.shadowRoot.styleSheets)].map(s => Array.from(s.cssRules).map(r => r.cssText).join('')).join('');
+        expect(text).toContain(':active');
+        expect(text).toContain('--bs-search-item-bg-pressed');
+        const probe = document.createElement('div');
+        probe.style.background = 'var(--bs-surface-pressed)';
+        root.shadowRoot.appendChild(probe);
+        const pressedToken = getComputedStyle(probe).backgroundColor;
+        probe.remove();
+        const holder = document.createElement('div');
+        holder.style.background = getComputedStyle(root).getPropertyValue('--bs-search-item-bg-pressed');
+        document.body.appendChild(holder);
+        expect(getComputedStyle(holder).backgroundColor).toBe(pressedToken);
+        holder.remove();
+    });
+    it('dims and ignores clicks while disabled', async () => {
+        const { root } = await render(h("bs-search-item", { value: "a", disabled: true }, "Label"));
+        let n = 0;
+        root.addEventListener('bsItemSelect', () => n++);
+        root.click();
+        expect(n).toBe(0);
+        expect(getComputedStyle(row(root)).color).toBe(tokenColor('--bs-text-on-disabled', 'color'));
+    });
+    it('emits bsItemSelect with the value on click', async () => {
+        const { root } = await render(h("bs-search-item", { value: "orders" }, "Orders"));
+        const got = [];
+        root.addEventListener('bsItemSelect', (e) => got.push(e.detail));
+        root.click();
+        expect(got).toEqual(['orders']);
+    });
+    it('uses the light and dark text colour from tokens', async () => {
+        const { root } = await render(h("bs-search-item", null, "Label"));
+        const light = getComputedStyle(part(root, 'label')).color;
+        document.documentElement.setAttribute('data-theme', 'dark');
+        try {
+            await new Promise(r => setTimeout(r, 100));
+            expect(getComputedStyle(part(root, 'label')).color).not.toBe(light);
+        }
+        finally {
+            document.documentElement.removeAttribute('data-theme');
+        }
+    });
+    it('passes axe standalone', async () => {
+        const { root } = await render(h("bs-search-item", { value: "a", trailing: "x" }, "Label"));
+        await runAxeCheck(root);
+    });
+});

package/dist/collection/components/bs-search-item/bs-search-item.css

@@ -0,0 +1,112 @@
+:host {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  --bs-search-item-min-height: var(--bs-spacing-600);
+  --bs-search-item-padding-y: var(--bs-spacing-100);
+  --bs-search-item-padding-x: var(--bs-spacing-150);
+  --bs-search-item-gap: var(--bs-spacing-100);
+  --bs-search-item-radius: var(--bs-border-radius-100);
+  --bs-search-item-bg: transparent;
+  --bs-search-item-bg-active: var(--bs-surface-hover);
+  --bs-search-item-bg-pressed: var(--bs-surface-pressed);
+  --bs-search-item-color: var(--bs-text-default);
+  --bs-search-item-color-muted: var(--bs-text-muted);
+  --bs-search-item-color-disabled: var(--bs-text-on-disabled);
+  --bs-search-item-icon-color: var(--bs-icon-default);
+}
+
+.bs-search-item {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--bs-search-item-gap);
+  width: 100%;
+  min-height: var(--bs-search-item-min-height);
+  padding: var(--bs-search-item-padding-y) var(--bs-search-item-padding-x);
+  border-radius: var(--bs-search-item-radius);
+  background: var(--bs-search-item-bg);
+  color: var(--bs-search-item-color);
+  font-family: inherit;
+  cursor: pointer;
+  transition: background-color 120ms ease;
+}
+
+:host([active]) .bs-search-item,
+.bs-search-item:hover {
+  background: var(--bs-search-item-bg-active);
+}
+
+.bs-search-item:active {
+  background: var(--bs-search-item-bg-pressed);
+}
+
+:host([disabled]) .bs-search-item {
+  background: var(--bs-search-item-bg);
+  color: var(--bs-search-item-color-disabled);
+  cursor: default;
+}
+
+.bs-search-item__icon {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  color: var(--bs-search-item-icon-color);
+}
+
+.bs-search-item__icon--hidden,
+.bs-search-item__description--hidden,
+.bs-search-item__trailing--hidden {
+  display: none;
+}
+
+.bs-search-item__icon ::slotted(svg) {
+  width: 24px;
+  height: 24px;
+}
+
+.bs-search-item__content {
+  flex: 1 1 0;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.bs-search-item__label {
+  font-size: var(--bs-font-size-md);
+  font-weight: var(--bs-font-weight-regular);
+  line-height: 24px;
+}
+
+.bs-search-item__label ::slotted(b),
+.bs-search-item__label ::slotted(strong) {
+  font-weight: var(--bs-font-weight-semibold);
+}
+
+.bs-search-item__description {
+  color: var(--bs-search-item-color-muted);
+  font-size: var(--bs-font-size-sm);
+  line-height: 20px;
+}
+
+.bs-search-item__trailing {
+  flex: 0 0 auto;
+  color: var(--bs-search-item-color-muted);
+  font-size: var(--bs-font-size-sm);
+  line-height: 20px;
+  white-space: nowrap;
+}
+
+:host([disabled]) .bs-search-item__description,
+:host([disabled]) .bs-search-item__trailing {
+  color: var(--bs-search-item-color-disabled);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bs-search-item {
+    transition: none;
+  }
+}

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

@@ -0,0 +1,222 @@
+import { h } from "@stencil/core";
+/**
+ * One result or suggestion row of a search dropdown: a leading icon, a primary line, an optional
+ * description line and trailing text. Static, not focusable -- focus stays in the search field and the
+ * parent (`bs-global-search`) marks the highlighted row with `active`.
+ *
+ * Standalone it has no role. `bs-global-search` sets `selectionRole="option"` (and an `id`) on its rows,
+ * the same pattern as `bs-list-item` and `bs-shortcut-row`.
+ *
+ * ## When to use
+ * - A suggestion, recent search or result inside `bs-global-search`.
+ *
+ * ## When not to use
+ * - A row in a generic list -- use `bs-list-item`.
+ * - A command in a popup menu -- use `bs-menu-item`.
+ *
+ * @slot icon - A leading glyph (24px, `currentColor`).
+ * @slot - The primary text. Wrap the matched part in `<strong>` or `<b>` to show it semibold.
+ * @slot description - An optional second line.
+ * @slot trailing - Trailing text (overrides the `trailing` prop).
+ * @part container - The row.
+ * @part icon - The icon wrapper.
+ * @part content - The text column.
+ * @part label - The primary line.
+ * @part description - The description line.
+ * @part trailing - The trailing text wrapper.
+ * @prop --bs-search-item-min-height - Aliased to `--bs-spacing-600` (48px).
+ * @prop --bs-search-item-padding-y - Aliased to `--bs-spacing-100`.
+ * @prop --bs-search-item-padding-x - Aliased to `--bs-spacing-150`.
+ * @prop --bs-search-item-gap - Aliased to `--bs-spacing-100`.
+ * @prop --bs-search-item-radius - Aliased to `--bs-border-radius-100`.
+ * @prop --bs-search-item-bg - Resting background. `transparent`.
+ * @prop --bs-search-item-bg-active - Active (highlighted) and hover background. Aliased to `--bs-surface-hover`.
+ * @prop --bs-search-item-bg-pressed - Aliased to `--bs-surface-pressed`.
+ * @prop --bs-search-item-color - Primary text. Aliased to `--bs-text-default`.
+ * @prop --bs-search-item-color-muted - Description and trailing text. Aliased to `--bs-text-muted`.
+ * @prop --bs-search-item-color-disabled - Aliased to `--bs-text-on-disabled`.
+ * @prop --bs-search-item-icon-color - Aliased to `--bs-icon-default`.
+ */
+export class BsSearchItem {
+    el;
+    /** Identifies the item; emitted by `bsItemSelect`. */
+    value;
+    /** Highlighted row (keyboard or hover). Set by the parent. */
+    active = false;
+    /** Dims the row and ignores clicks. */
+    disabled = false;
+    /** Trailing text shorthand. The `trailing` slot overrides it. */
+    trailing;
+    /** Set by the parent (`"option"`). Standalone rows have no role. */
+    selectionRole = null;
+    hasIcon = false;
+    hasDescription = false;
+    hasTrailingSlot = false;
+    /** Fires with `value` when the row is clicked, or when the parent selects it with Enter. */
+    bsItemSelect;
+    componentWillLoad() {
+        const has = (name) => Array.from(this.el.children).some(c => c.getAttribute('slot') === name);
+        this.hasIcon = has('icon');
+        this.hasDescription = has('description');
+        this.hasTrailingSlot = has('trailing');
+    }
+    onClick() {
+        if (this.disabled)
+            return;
+        this.bsItemSelect.emit(this.value);
+    }
+    slotFilled = (set) => (ev) => set(ev.target.assignedNodes().length > 0);
+    render() {
+        const role = this.selectionRole ?? undefined;
+        return (h("div", { key: '0c570b63e05b1fc0294329710fbf88b2fc21e1ff', part: "container", class: "bs-search-item", role: role, "aria-selected": role ? String(this.active) : undefined, "aria-disabled": role && this.disabled ? 'true' : undefined }, h("span", { key: '5dd4eebb10183d38704ac1669c024ef863846c00', part: "icon", class: { 'bs-search-item__icon': true, 'bs-search-item__icon--hidden': !this.hasIcon } }, h("slot", { key: '4c1b4f5d589201f1fa98081cc432d630950311e0', name: "icon", onSlotchange: this.slotFilled(v => (this.hasIcon = v)) })), h("span", { key: '0908a9fc5a42c00e6bae6e5f69fe1f3224a73147', part: "content", class: "bs-search-item__content" }, h("span", { key: '817216a76634be9b203bb324c8ee5cb54505f44f', part: "label", class: "bs-search-item__label" }, h("slot", { key: '7ee0d2da1dc6e2ddd9dc25e5a3d2238c87b223b1' })), h("span", { key: '765a7dae7761d72b1b3a5571549a044420c88a05', part: "description", class: { 'bs-search-item__description': true, 'bs-search-item__description--hidden': !this.hasDescription } }, h("slot", { key: '8d1da1dc91b3133b10a17f711227031daa40e5ee', name: "description", onSlotchange: this.slotFilled(v => (this.hasDescription = v)) }))), h("span", { key: '33fcb4ab13f5ab8659249c70626699ee831a008d', part: "trailing", class: { 'bs-search-item__trailing': true, 'bs-search-item__trailing--hidden': !this.hasTrailingSlot && !this.trailing } }, h("slot", { key: '21cd86383493354482304367794e557c1b20bf17', name: "trailing", onSlotchange: this.slotFilled(v => (this.hasTrailingSlot = v)) }, this.trailing))));
+    }
+    static get is() { return "bs-search-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-search-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-search-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Identifies the item; emitted by `bsItemSelect`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Highlighted row (keyboard or hover). Set by the parent."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "active",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Dims the row and ignores clicks."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "trailing": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Trailing text shorthand. The `trailing` slot overrides it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "trailing"
+            },
+            "selectionRole": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'option' | null",
+                    "resolved": "\"option\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set by the parent (`\"option\"`). Standalone rows have no role."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selection-role",
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasIcon": {},
+            "hasDescription": {},
+            "hasTrailingSlot": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsItemSelect",
+                "name": "bsItemSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires with `value` when the row is clicked, or when the parent selects it with Enter."
+                },
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "onClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

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

@@ -0,0 +1,31 @@
+import { html } from "lit";
+import { componentDescription } from "../../stories-utils";
+const USER_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"><circle cx="12" cy="8" r="4" /><path d="M4 21a8 8 0 0 1 16 0" /></svg>`;
+const meta = {
+    title: 'Components/bs-search-item',
+    parameters: { docs: { description: { component: componentDescription('bs-search-item') } } },
+    argTypes: { active: { control: 'boolean' }, disabled: { control: 'boolean' }, trailing: { control: 'text' } },
+    args: { active: false, disabled: false, trailing: '' },
+    render: args => html `
+    <div style="width: 456px">
+      <bs-search-item value="customers" ?active=${args.active} ?disabled=${args.disabled} trailing=${args.trailing}>
+        ${USER_ICON}Customers
+      </bs-search-item>
+    </div>
+  `,
+};
+export default meta;
+export const Default = { args: { trailing: '1,284' } };
+export const WithDescription = {
+    render: () => html `
+    <div style="width: 456px">
+      <bs-search-item value="nordic-sports">
+        ${USER_ICON}<strong>Nordic</strong> Sports AS
+        <span slot="description">Customer · Oslo · 48 orders</span>
+        <span slot="trailing">Customer</span>
+      </bs-search-item>
+    </div>
+  `,
+};
+export const Active = { args: { active: true, trailing: '1,284' } };
+export const Disabled = { args: { disabled: true, trailing: '1,284' } };

package/dist/collection/components/bs-session-timeout/bs-session-timeout.js

@@ -196,7 +196,7 @@ export class BsSessionTimeout {
         const description = this.description ?? d.description;
         const primary = this.primaryLabel ?? d.primary;
         const secondary = this.secondaryLabel ?? d.secondary;
-        return (h("bs-card", { key: '8922ea5cb968852d3ce425364278348c71c10be2', part: "container", class: "bs-session-timeout", surface: "base", role: "region", "aria-labelledby": "heading" }, h("div", { key: 'b613354d729da81aea5d05b6c3ccb8de5e64b075', class: "bs-session-timeout__body" }, !this.hideIcon && (h("bs-icon-tile", { key: '852e15692bd30510cd5cb52b092868684ff8d73b', part: "art", intent: d.intent, size: "lg" }, h("slot", { key: '5a5b89e4c85536710217b5e3d29d87c333152472', name: "icon" }, d.glyph()))), this.renderHeading(heading, description), this.type === 'warning' && this.renderWarning(), this.type === 'warning' && this.savedMessage && (h("p", { key: '626014fca6ecdc96934996f0a0f9aef368fb8635', part: "saved", class: "bs-session-timeout__saved" }, h(InfoIcon, { key: '2ba9eaeba78425078d43d2c01ade39475e779cc9' }), h("span", { key: '45e7fae171cc6bfe738aabf42784cfabd27eab0d' }, this.savedMessage))), this.type === 'signed-out' && this.renderAccount(), this.type === 'confirm-identity' && this.renderConfirm(), this.type === 'warning' && (primary || secondary) && (h("div", { key: '4378b0b81c299b4ace854b4f9e41c3c8da0a2936', part: "actions", class: "bs-session-timeout__actions" }, secondary && (h("bs-button", { key: '7c25a927573c57c1dabc905eb4ecee8d3195f0e0', part: "secondary", variant: "outlined", onClick: () => this.bsSecondary.emit() }, secondary)), primary && (h("bs-button", { key: '21a301ea8780ad05517d2f45524d6c3133dbe256', part: "primary", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)))), this.type === 'signed-out' && (primary || secondary) && (h("div", { key: 'f741f30b96c640df5f33ced255dcd5929f779e5f', part: "actions", class: "bs-session-timeout__actions bs-session-timeout__actions--stacked" }, primary && (h("bs-button", { key: '16d6dbe5c3cc201b8b8de2818053faedc0fd3107', part: "primary", class: "bs-session-timeout__block-button", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)), secondary && (h("bs-button", { key: 'a37390a6c98d099a1f50938a9d45e43483318ea2', part: "secondary", class: "bs-session-timeout__text-button", variant: "subtle", size: "lg", onClick: () => this.bsSecondary.emit() }, secondary)))), h("div", { key: 'bcafa657342437a24caa5979299688b60d61f02e', class: "bs-session-timeout__sr-only", role: "status", "aria-live": "polite" }, this.announcement))));
+        return (h("bs-card", { key: 'd24c6a8c35ba5fa00d09789ae3b9fb9c13478aa2', part: "container", class: "bs-session-timeout", surface: "base", role: "region", "aria-labelledby": "heading" }, h("div", { key: '519212dd44edaf8b6083d0b4a0aa554721030edb', class: "bs-session-timeout__body" }, !this.hideIcon && (h("bs-icon-tile", { key: '0afcc5d7ac6331327c54f207c7bf17a85e1d4ca6', part: "art", intent: d.intent, size: "lg" }, h("slot", { key: '9b23c1e0ac3338026d9fd865f388156f79dbbccf', name: "icon" }, d.glyph()))), this.renderHeading(heading, description), this.type === 'warning' && this.renderWarning(), this.type === 'warning' && this.savedMessage && (h("p", { key: '28feba54a260237d0fbd4f1fd73c0a2f759f1de7', part: "saved", class: "bs-session-timeout__saved" }, h(InfoIcon, { key: 'cf8cc480add0d2269e5dc60b6eca92429f2747bd' }), h("span", { key: '9bcaa1f9605dec86b2323b6b30ea433426c760dc' }, this.savedMessage))), this.type === 'signed-out' && this.renderAccount(), this.type === 'confirm-identity' && this.renderConfirm(), this.type === 'warning' && (primary || secondary) && (h("div", { key: '3c5da6d79a8e7958d24d4a5426f4e44c04333b65', part: "actions", class: "bs-session-timeout__actions" }, secondary && (h("bs-button", { key: '0e552712f93f9a59919ed2a64bd71d9d79908978', part: "secondary", variant: "outlined", onClick: () => this.bsSecondary.emit() }, secondary)), primary && (h("bs-button", { key: 'f461ea7b8119d8608a7d560b6aa52c404c61028c', part: "primary", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)))), this.type === 'signed-out' && (primary || secondary) && (h("div", { key: '8e4ea5ec9e71e233bfd1a125bacf4ada41ee3a6d', part: "actions", class: "bs-session-timeout__actions bs-session-timeout__actions--stacked" }, primary && (h("bs-button", { key: '104e37dc1b7b7ce672c12a8a81e3069d2c85a7f2', part: "primary", class: "bs-session-timeout__block-button", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)), secondary && (h("bs-button", { key: '3ab259894ba4ab7362e3543762c575ca5c5c1feb', part: "secondary", class: "bs-session-timeout__text-button", variant: "subtle", size: "lg", onClick: () => this.bsSecondary.emit() }, secondary)))), h("div", { key: 'e44f63e49fc80fa1f297d9b10beadfd2a192c586', class: "bs-session-timeout__sr-only", role: "status", "aria-live": "polite" }, this.announcement))));
     }
     static get is() { return "bs-session-timeout"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-shortcut-row/bs-shortcut-row.cmp.test.js

@@ -0,0 +1,60 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+import { assertShadowParts, runAxeCheck } from "../../test/helpers/conventions";
+const part = (host, p) => host.shadowRoot.querySelector(`[part="${p}"]`);
+const caps = (host) => host.shadowRoot.querySelector('bs-key-caps');
+describe('bs-shortcut-row', () => {
+    it('has the Figma geometry', async () => {
+        const { root } = await render(h("bs-shortcut-row", { style: { width: '318px' }, action: "Save", keys: "Ctrl+S" }));
+        const cs = getComputedStyle(part(root, 'container'));
+        expect(cs.height).toBe('36px');
+        expect(cs.paddingLeft).toBe('8px');
+        expect(cs.paddingRight).toBe('8px');
+        expect(cs.columnGap).toBe('8px');
+        expect(cs.borderRadius).toBe('6px');
+        expect(cs.alignItems).toBe('center');
+        expect(cs.fontSize).toBe('14px');
+        expect(cs.lineHeight).toBe('20px');
+        expect(Math.round(root.getBoundingClientRect().width)).toBe(318);
+    });
+    it('shows the action and passes keys to a bs-key-caps on the right', async () => {
+        const { root } = await render(h("bs-shortcut-row", { action: "Save", keys: "Ctrl+S", label: "Control plus S" }));
+        expect(part(root, 'action').textContent).toBe('Save');
+        expect(caps(root).keys).toBe('Ctrl+S');
+        expect(caps(root).shadowRoot.querySelector('[part="container"]')).toEqualAttribute('aria-label', 'Control plus S');
+        const a = part(root, 'action').getBoundingClientRect();
+        const k = part(root, 'keys').getBoundingClientRect();
+        expect(k.left).toBeGreaterThanOrEqual(a.right - 1);
+    });
+    it('lets the default slot override the action and the keys slot replace the caps', async () => {
+        const { root, waitForChanges } = await render(h("bs-shortcut-row", { action: "ignored" }, "Custom", h("bs-key-caps", { slot: "keys", keys: "F1" })));
+        await waitForChanges();
+        const slot = root.shadowRoot.querySelector('slot[name="keys"]');
+        expect(slot.assignedElements().length).toBe(1);
+        expect(root.textContent).toContain('Custom');
+    });
+    it('dims the label and the keys when disabled', async () => {
+        const { root, waitForChanges } = await render(h("bs-shortcut-row", { action: "Save", keys: "Ctrl+S" }));
+        const normal = getComputedStyle(part(root, 'container')).color;
+        root.setAttribute('disabled', '');
+        await waitForChanges();
+        expect(getComputedStyle(part(root, 'container')).color).not.toBe(normal);
+        expect(caps(root).disabled).toBe(true);
+        const inner = caps(root).shadowRoot.querySelector('[part="container"]');
+        expect(getComputedStyle(inner).opacity).toBe('0.38');
+    });
+    it('has no role standalone and listitem when selectionRole is set', async () => {
+        const { root, waitForChanges } = await render(h("bs-shortcut-row", { action: "Save", keys: "Ctrl+S" }));
+        expect(part(root, 'container').getAttribute('role')).toBeNull();
+        root.selectionRole = 'listitem';
+        await waitForChanges();
+        expect(part(root, 'container')).toEqualAttribute('role', 'listitem');
+    });
+    it('exposes its parts', async () => {
+        const { root } = await render(h("bs-shortcut-row", { action: "Save", keys: "Ctrl+S" }));
+        assertShadowParts(root.shadowRoot, ['container', 'action', 'keys']);
+    });
+    it('passes axe', async () => {
+        const { root } = await render(h("bs-shortcut-row", { action: "Save", keys: "Ctrl+S" }));
+        await runAxeCheck(root);
+    });
+});

package/dist/collection/components/bs-shortcut-row/bs-shortcut-row.css

@@ -0,0 +1,42 @@
+:host {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  --bs-shortcut-row-height: 36px;
+  --bs-shortcut-row-padding-x: var(--bs-spacing-100);
+  --bs-shortcut-row-gap: var(--bs-spacing-100);
+  --bs-shortcut-row-radius: var(--bs-border-radius-75);
+  --bs-shortcut-row-color: var(--bs-text-default);
+  --bs-shortcut-row-color-disabled: var(--bs-text-on-disabled);
+}
+
+.bs-shortcut-row {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--bs-shortcut-row-gap);
+  width: 100%;
+  height: var(--bs-shortcut-row-height);
+  padding-inline: var(--bs-shortcut-row-padding-x);
+  border-radius: var(--bs-shortcut-row-radius);
+  color: var(--bs-shortcut-row-color);
+  font-family: inherit;
+  font-size: var(--bs-font-size-sm);
+  font-weight: var(--bs-font-weight-regular);
+  line-height: calc(var(--bs-line-height-body-sm) * 1px);
+}
+
+:host([disabled]) .bs-shortcut-row {
+  color: var(--bs-shortcut-row-color-disabled);
+}
+
+.bs-shortcut-row__action {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.bs-shortcut-row__keys {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}