@brandsync/wc 1.18.0 → 1.20.0

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

@@ -0,0 +1,233 @@
+import { Host, h } from "@stencil/core";
+/**
+ * A small label that categorises or annotates an item (a topic, a keyword, a status of a record). It can be
+ * neutral or coloured, optionally removable, and optionally a link.
+ *
+ * ## When to use
+ * - Metadata on a record: topics, categories, keywords, owners.
+ * - A removable tag in a list of applied values you edit one by one (`removable`).
+ * - A tag that leads to a filtered view or detail page (`href`).
+ *
+ * ## When not to use
+ * - A pure count or notification marker -- use `bs-badge`.
+ * - A read-only status pill with a leading icon -- use `bs-chip-informative`.
+ * - Toggling a filter on and off -- use `bs-chip-filter`; entering free text values -- use `bs-chip-input`.
+ *
+ * **Built from:** `bs-icon-button` (the remove control, `size="xs"`).
+ *
+ * @slot - The tag label.
+ * @slot icon - Optional leading icon (16px).
+ * @part container - The tag surface.
+ * @part icon - The icon wrapper.
+ * @part label - The label (a link when `href` is set).
+ * @part remove - The remove button (`bs-icon-button`), only when `removable`.
+ */
+export class BsTag {
+    el;
+    /** Semantic colour. `neutral` is the default. */
+    color = 'neutral';
+    /** Sizing scale. */
+    size = 'md';
+    /** Shows a remove button that emits `bsRemove`. The consumer removes the tag. */
+    removable = false;
+    /** Turns the label into a link to this URL. */
+    href;
+    /** Link target, only used with `href`. */
+    target;
+    /** Prefix of the remove button's accessible name ("Remove {label}"). */
+    removeLabel = 'Remove';
+    /** Fires when the remove button is activated. No payload; the consumer removes the element. */
+    bsRemove;
+    hasIcon = false;
+    labelText = '';
+    componentWillLoad() {
+        this.hasIcon = Array.from(this.el.children).some(c => c.getAttribute('slot') === 'icon');
+        this.labelText = this.readLabel();
+    }
+    readLabel() {
+        return Array.from(this.el.childNodes)
+            .filter(n => !(n.nodeType === Node.ELEMENT_NODE && n.hasAttribute('slot')))
+            .map(n => n.textContent || '')
+            .join('')
+            .trim();
+    }
+    onRemove = () => {
+        this.bsRemove.emit();
+    };
+    render() {
+        const rel = this.href && this.target === '_blank' ? 'noopener noreferrer' : undefined;
+        const label = h("slot", { key: '08ceba56454f3419009e4714cdb264cf377a2ca1', onSlotchange: () => (this.labelText = this.readLabel()) });
+        return (h(Host, { key: '02747ac2c8afd9204257bbcd212bdf6db5c061fe' }, h("span", { key: '2f65cb5c37463a196f79e5a0149e0be810ae15ff', part: "container", class: { 'bs-tag': true, 'bs-tag--removable': this.removable } }, h("span", { key: '7520ed22f21e2fb3dbaa24113cf7740de1a52dcc', part: "icon", class: { 'bs-tag__icon': true, 'bs-tag__icon--visible': this.hasIcon } }, h("slot", { key: 'e6ccfd5de8815950e466a107d731a817fa5d2f06', name: "icon", onSlotchange: (e) => (this.hasIcon = e.target.assignedNodes().length > 0) })), this.href ? (h("a", { part: "label", class: "bs-tag__label bs-tag__label--link", href: this.href, target: this.target, rel: rel }, label)) : (h("span", { part: "label", class: "bs-tag__label" }, label)), this.removable && (h("bs-icon-button", { key: 'fddf2c1f5c3e8a12cd317a19652e800837c741ea', part: "remove", class: "bs-tag__remove", size: "xs", variant: "subtle", ariaLabel: `${this.removeLabel} ${this.labelText}`.trim(), onClick: this.onRemove }, h("svg", { key: '7c708bd1a08d9c8897bdb9e76b133fa2ed52a3e7', viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: 'b7641a61417f15eddf96fa9e580dd999b2077d08', d: "M12.5 3.5L3.5 12.5M12.5 12.5L3.5 3.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))));
+    }
+    static get is() { return "bs-tag"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-tag.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-tag.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsTagColor",
+                    "resolved": "\"error\" | \"info\" | \"neutral\" | \"success\" | \"warning\"",
+                    "references": {
+                        "BsTagColor": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-tag/bs-tag.tsx",
+                            "id": "src/components/bs-tag/bs-tag.tsx::BsTagColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Semantic colour. `neutral` is the default."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "color",
+                "defaultValue": "'neutral'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsTagSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "BsTagSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-tag/bs-tag.tsx",
+                            "id": "src/components/bs-tag/bs-tag.tsx::BsTagSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sizing scale."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "removable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows a remove button that emits `bsRemove`. The consumer removes the tag."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "removable",
+                "defaultValue": "false"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Turns the label into a link to this URL."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href"
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Link target, only used with `href`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "target"
+            },
+            "removeLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Prefix of the remove button's accessible name (\"Remove {label}\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "remove-label",
+                "defaultValue": "'Remove'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasIcon": {},
+            "labelText": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsRemove",
+                "name": "bsRemove",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the remove button is activated. No payload; the consumer removes the element."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,59 @@
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { componentDescription } from "../../stories-utils";
+const meta = {
+    title: 'Components/bs-tag',
+    parameters: { docs: { description: { component: componentDescription('bs-tag') } } },
+    argTypes: {
+        label: { control: 'text' },
+        color: { control: 'select', options: ['neutral', 'info', 'success', 'warning', 'error'] },
+        size: { control: 'select', options: ['sm', 'md', 'lg'] },
+        removable: { control: 'boolean' },
+        href: { control: 'text' },
+    },
+    args: { label: 'Design', color: 'neutral', size: 'md', removable: false, href: '' },
+    render: args => html `
+    <bs-tag color=${args.color} size=${args.size} ?removable=${args.removable} href=${ifDefined(args.href || undefined)}>${args.label}</bs-tag>
+  `,
+};
+export default meta;
+export const Default = {};
+export const Colors = {
+    render: () => html `
+    <div style="display:flex;gap:8px;flex-wrap:wrap">
+      <bs-tag>Neutral</bs-tag>
+      <bs-tag color="info">Info</bs-tag>
+      <bs-tag color="success">Success</bs-tag>
+      <bs-tag color="warning">Warning</bs-tag>
+      <bs-tag color="error">Error</bs-tag>
+    </div>
+  `,
+};
+export const Sizes = {
+    render: () => html `
+    <div style="display:flex;gap:8px;align-items:center">
+      <bs-tag size="sm">Small</bs-tag>
+      <bs-tag size="md">Medium</bs-tag>
+      <bs-tag size="lg">Large</bs-tag>
+    </div>
+  `,
+};
+export const Removable = {
+    parameters: { docs: { description: { story: 'Clicking the remove button only emits `bsRemove`; here the handler removes the element.' } } },
+    render: () => html `
+    <div style="display:flex;gap:8px;flex-wrap:wrap" @bsRemove=${(e) => e.target.remove()}>
+      <bs-tag removable>Design</bs-tag>
+      <bs-tag removable color="info">Research</bs-tag>
+      <bs-tag removable color="success">Shipped</bs-tag>
+    </div>
+  `,
+};
+export const AsLink = {
+    name: 'As link',
+    render: () => html `
+    <div style="display:flex;gap:8px">
+      <bs-tag href="#design">Design</bs-tag>
+      <bs-tag href="#research" color="info">Research</bs-tag>
+    </div>
+  `,
+};

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

@@ -0,0 +1,33 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+import { runAxeCheck } from "../../test/helpers/conventions";
+const el = (host) => host.shadowRoot.querySelector('[part="text"]');
+describe('bs-text', () => {
+    it('renders a body paragraph by default', async () => {
+        const { root } = await render(h("bs-text", null, "Hello"));
+        expect(el(root).tagName).toBe('P');
+        expect(getComputedStyle(el(root)).fontSize).toBe('16px');
+    });
+    it('maps variants to the type scale', async () => {
+        const sizes = { lead: '18px', body: '16px', small: '14px', caption: '12px' };
+        for (const [variant, px] of Object.entries(sizes)) {
+            const { root } = await render(h("bs-text", { variant: variant }, "T"));
+            expect(getComputedStyle(el(root)).fontSize).toBe(px);
+        }
+    });
+    it('`as` picks the element independently of the variant', async () => {
+        const { root } = await render(h("bs-text", { as: "span", variant: "caption" }, "T"));
+        expect(el(root).tagName).toBe('SPAN');
+        expect(getComputedStyle(el(root)).fontSize).toBe('12px');
+        expect(getComputedStyle(root).display).toBe('inline');
+    });
+    it('tone switches the colour; inherit follows the parent', async () => {
+        const { root } = await render(h("div", { style: { color: 'rgb(9, 8, 7)' } }, h("bs-text", { tone: "inherit" }, "T")));
+        expect(getComputedStyle(el(root.querySelector('bs-text'))).color).toBe('rgb(9, 8, 7)');
+        const { root: err } = await render(h("bs-text", { tone: "error" }, "T"));
+        expect(getComputedStyle(el(err)).color).not.toBe('rgb(9, 8, 7)');
+    });
+    it('passes axe', async () => {
+        const { root } = await render(h("bs-text", null, "Some text"));
+        await runAxeCheck(root);
+    });
+});

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

@@ -0,0 +1,48 @@
+/**
+ * @prop --bs-text-color: Text colour. Set per `tone` on the host from the --bs-text-* tokens (default: --bs-text-default).
+ * @prop --bs-text-font-family: Font family. Aliased to --bs-typography-font-family-body.
+ * @prop --bs-text-font-weight: Font weight. Aliased to --bs-font-weight-regular.
+ * @prop --bs-text-font-size: Font size. Set per `variant`: lead --bs-font-size-lg, body --bs-font-size-md, small --bs-font-size-sm, caption --bs-font-size-xs.
+ * @prop --bs-text-line-height: Line height. Aliased to --bs-line-height-normal.
+ */
+:host {
+  display: block;
+
+  --bs-text-color: var(--bs-text-default);
+  --bs-text-font-family: var(--bs-typography-font-family-body);
+  --bs-text-font-weight: var(--bs-font-weight-regular);
+  --bs-text-line-height: var(--bs-line-height-normal);
+}
+
+:host([as='span']),
+:host([as='small']),
+:host([as='strong']),
+:host([as='em']),
+:host([as='label']) {
+  display: inline;
+}
+
+:host([tone='secondary']) { --bs-text-color: var(--bs-text-secondary); }
+:host([tone='muted']) { --bs-text-color: var(--bs-text-muted); }
+:host([tone='action']) { --bs-text-color: var(--bs-text-action); }
+:host([tone='link']) { --bs-text-color: var(--bs-text-link); }
+:host([tone='success']) { --bs-text-color: var(--bs-text-success); }
+:host([tone='info']) { --bs-text-color: var(--bs-text-info); }
+:host([tone='warning']) { --bs-text-color: var(--bs-text-warning); }
+:host([tone='error']) { --bs-text-color: var(--bs-text-error); }
+:host([tone='inverse']) { --bs-text-color: var(--bs-text-inverse); }
+:host([tone='inherit']) { --bs-text-color: inherit; }
+
+.bs-text {
+  margin: 0;
+  font-family: var(--bs-text-font-family);
+  font-weight: var(--bs-text-font-weight);
+  font-size: var(--bs-text-font-size);
+  line-height: var(--bs-text-line-height);
+  color: var(--bs-text-color);
+}
+
+.bs-text--lead { --bs-text-font-size: var(--bs-font-size-lg); }
+.bs-text--body { --bs-text-font-size: var(--bs-font-size-md); }
+.bs-text--small { --bs-text-font-size: var(--bs-font-size-sm); }
+.bs-text--caption { --bs-text-font-size: var(--bs-font-size-xs); }

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

@@ -0,0 +1,126 @@
+import { h } from "@stencil/core";
+/**
+ * Body and caption text mapped to the typography tokens, with the element (`as`) chosen separately
+ * from the look (`variant`) and the colour (`tone`).
+ *
+ * Variants: `lead` 18px, `body` 16px, `small` 14px, `caption` 12px (`--bs-font-size-*`,
+ * `--bs-typography-font-family-body`).
+ *
+ * Composed from: nothing (leaf).
+ *
+ * ## When to use
+ * - Paragraphs, helper copy, captions and inline spans that should follow the type scale and theme.
+ *
+ * ## When not to use
+ * - Headings: use `bs-heading` so the document outline is right.
+ * - Code: use `bs-code-block`.
+ *
+ * @slot - The text.
+ * @part text - The rendered text element.
+ */
+export class BsText {
+    /** The rendered element. `span` (and `small`, `strong`, `em`, `label`) make the host inline. */
+    as = 'p';
+    /** Visual style. */
+    variant = 'body';
+    /** Text colour from the text tokens. `inherit` uses the surrounding colour. */
+    tone = 'default';
+    render() {
+        const Tag = this.as;
+        return (h(Tag, { key: '249b8ddd92904587ac8eff6a585f03e8d228aae9', part: "text", class: `bs-text bs-text--${this.variant}` }, h("slot", { key: '2e29e03955058bb6feb8aff484ddf0f7d5836cd0' })));
+    }
+    static get is() { return "bs-text"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-text.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-text.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "as": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsTextAs",
+                    "resolved": "\"div\" | \"em\" | \"label\" | \"p\" | \"small\" | \"span\" | \"strong\"",
+                    "references": {
+                        "BsTextAs": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-text/bs-text.tsx",
+                            "id": "src/components/bs-text/bs-text.tsx::BsTextAs"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The rendered element. `span` (and `small`, `strong`, `em`, `label`) make the host inline."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "as",
+                "defaultValue": "'p'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsTextVariant",
+                    "resolved": "\"body\" | \"caption\" | \"lead\" | \"small\"",
+                    "references": {
+                        "BsTextVariant": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-text/bs-text.tsx",
+                            "id": "src/components/bs-text/bs-text.tsx::BsTextVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual style."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'body'"
+            },
+            "tone": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsTextTone",
+                    "resolved": "\"action\" | \"default\" | \"error\" | \"info\" | \"inherit\" | \"inverse\" | \"link\" | \"muted\" | \"secondary\" | \"success\" | \"warning\"",
+                    "references": {
+                        "BsTextTone": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-text/bs-text.tsx",
+                            "id": "src/components/bs-text/bs-text.tsx::BsTextTone"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text colour from the text tokens. `inherit` uses the surrounding colour."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "tone",
+                "defaultValue": "'default'"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,25 @@
+import { html } from "lit";
+import { componentDescription } from "../../stories-utils";
+const meta = {
+    title: 'Components/bs-text',
+    parameters: { docs: { description: { component: componentDescription('bs-text') } } },
+    render: args => html `<bs-text as=${args.as} variant=${args.variant} tone=${args.tone}>${args.text}</bs-text>`,
+    argTypes: {
+        as: { control: 'select', options: ['p', 'span', 'div', 'label', 'small', 'strong', 'em'] },
+        variant: { control: 'inline-radio', options: ['lead', 'body', 'small', 'caption'] },
+        tone: { control: 'select', options: ['default', 'secondary', 'muted', 'action', 'link', 'success', 'info', 'warning', 'error', 'inverse', 'inherit'] },
+        text: { control: 'text' },
+    },
+    args: { as: 'p', variant: 'body', tone: 'default', text: 'Payment reminders are sent at the time your customers are most likely to respond.' },
+};
+export default meta;
+export const Default = {};
+export const Variants = {
+    render: () => html `${['lead', 'body', 'small', 'caption'].map(v => html `<bs-text variant=${v}>${v}: The quick brown fox jumps over the lazy dog.</bs-text>`)}`,
+};
+export const Tones = {
+    render: () => html `${['default', 'secondary', 'muted', 'action', 'link', 'success', 'info', 'warning', 'error'].map(t => html `<bs-text tone=${t}>Tone ${t}</bs-text>`)}`,
+};
+export const Inline = {
+    render: () => html `<bs-text>Total due <bs-text as="span" tone="error">kr 1 480,00</bs-text> by Friday.</bs-text>`,
+};

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

@@ -200,14 +200,14 @@ export class BsTimepicker {
         return (h("div", { part: "spinner", class: "bs-timepicker__spinner" }, h("button", { part: "step", type: "button", class: "bs-timepicker__step", "aria-label": stepLabel(this.increaseLabel), tabindex: -1, onClick: () => this.stepBy(col, 1) }, h("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { d: "M18 15L12 9L6 15", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("div", { part: "value", class: "bs-timepicker__value", role: "spinbutton", tabindex: 0, "aria-label": label, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": n, "aria-valuetext": pad(n), onKeyDown: this.onKeyDown(col), onBlur: () => (this.typed = '') }, pad(n)), h("button", { part: "step", type: "button", class: "bs-timepicker__step", "aria-label": stepLabel(this.decreaseLabel), tabindex: -1, onClick: () => this.stepBy(col, -1) }, h("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { d: "M6 9L12 15L18 9", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
     }
     render() {
-        return (h("bs-card", { key: '185b44b483c9cf247656ae469ad69f9c64c8e41c', part: "container", class: "bs-timepicker", surface: "raised" }, h("div", { key: 'b23908efe3abf9882be697f92bf457bbe6a55ec1', class: "bs-timepicker__body" }, h("div", { key: '61fa7ba86099a2c53963a09864f3c2ca3f027111', part: "header", class: "bs-timepicker__header" }, h("div", { key: '6a70e05d3aa012f5941db7212a67ed2345946c15', part: "title", class: "bs-timepicker__title" }, this.heading), h("label", { key: 'd2f5829e927ec0e28a4523c4a7d5b03260e8c8f0', class: "bs-timepicker__format" }, h("span", { key: '3354f298b48c8ec801cce4594d317e01858b8b71' }, this.formatLabel), h("bs-switch", { key: '0a57baeffb981e3a571d0f1822523d3b97da7988', part: "format-toggle", size: "md", ariaLabel: this.formatLabel, checked: !this.is12h, onBsChange: (ev) => (this.format = ev.detail ? '24h' : '12h') }))), h("div", { key: 'b48f10a8c7548b25e0ff50910f64f1f02790bb76', class: "bs-timepicker__divider" }), h("div", { key: 'a10ba57ccd51a56ea23b6a61dfdfd2729004855e', part: "selector", class: "bs-timepicker__selector" }, this.renderColumn('hour', this.hourLabel), h("div", { key: '16599630eb6f2d58dc190d1b094e8c243fa6659d', part: "separator", class: "bs-timepicker__separator", "aria-hidden": "true" }, h("svg", { key: '82749333115eba07a03d22e5ac9fe913160d6af8', viewBox: "0 0 4 32", fill: "currentColor" }, h("circle", { key: '09e97173b802d10629481ea89a51f8f18b0dba20', cx: "2", cy: "10", r: "2" }), h("circle", { key: 'ae5f855f4d40a2688b253d054ec3af8821beb1cb', cx: "2", cy: "22", r: "2" }))), this.renderColumn('minute', this.minuteLabel), this.is12h && (h("bs-input", { key: 'c245dda70d5c59f6aff109a24532c6ad2e288372', part: "period", class: "bs-timepicker__period", type: "dropdown", label: this.periodLabel, value: this.isPm ? 'PM' : 'AM', options: [
+        return (h("bs-card", { key: 'fdbf8e19525a53d43094d1b2115c232fb0ea9500', part: "container", class: "bs-timepicker", surface: "raised" }, h("div", { key: 'a2b9aa1ce9529d3f52fd45f4ca5af02582930a15', class: "bs-timepicker__body" }, h("div", { key: 'c59f6c9fdec3a1f9ffb81aa7e5bac9421dadcd35', part: "header", class: "bs-timepicker__header" }, h("div", { key: '2825b6a11f97a7186eb6340faa816b0b6d8be28a', part: "title", class: "bs-timepicker__title" }, this.heading), h("label", { key: '4f6dc3e9768f0396b3e59943496a9d9443a8501c', class: "bs-timepicker__format" }, h("span", { key: 'b94eccc6949019c78b98051a8eba3d41a4546cf1' }, this.formatLabel), h("bs-switch", { key: '6a2d43b1b37472720d5ca1f84951dc908b37689e', part: "format-toggle", size: "md", ariaLabel: this.formatLabel, checked: !this.is12h, onBsChange: (ev) => (this.format = ev.detail ? '24h' : '12h') }))), h("div", { key: '01efb69cc03be59785b36df9fccf4452a1894225', class: "bs-timepicker__divider" }), h("div", { key: 'ead194685c2ae0976d4f134ad0231208e3fab1ea', part: "selector", class: "bs-timepicker__selector" }, this.renderColumn('hour', this.hourLabel), h("div", { key: '0250edfefe27363208489c147026462edbf7648a', part: "separator", class: "bs-timepicker__separator", "aria-hidden": "true" }, h("svg", { key: 'e79c68f3dd11a3ee9edd5d18ebd9065e4019f029', viewBox: "0 0 4 32", fill: "currentColor" }, h("circle", { key: 'b0fcd6e48bddfbf722c0aa6356be05665258cda6', cx: "2", cy: "10", r: "2" }), h("circle", { key: '892630f5f5a51aa48f97d8a7c86791aef6bd2ba2', cx: "2", cy: "22", r: "2" }))), this.renderColumn('minute', this.minuteLabel), this.is12h && (h("bs-input", { key: '502e6bebb0f241b3800b699efbb8cdbcf671597d', part: "period", class: "bs-timepicker__period", type: "dropdown", label: this.periodLabel, value: this.isPm ? 'PM' : 'AM', options: [
                 { label: 'AM', value: 'AM' },
                 { label: 'PM', value: 'PM' },
             ], onBsChange: (ev) => {
                 const pm = ev.detail === 'PM';
                 if (pm !== this.isPm)
                     this.hour = (this.hour + 12) % 24;
-            } }))), h("div", { key: '1b2357274665377d31590aa3e5561a27bfc90100', class: "bs-timepicker__divider" }), h("div", { key: 'cfa3b7f3c98cc732b33e0a7a2ff76ecefb029f6c', part: "footer", class: "bs-timepicker__footer" }, h("bs-button", { key: '0d4127041258cc0066517d4b5588307306356cda', part: "cancel", variant: "subtle", onClick: this.cancel }, this.cancelLabel), h("bs-button", { key: 'd8b5d5867275490d03ae1741fb1795b670c72514', part: "confirm", variant: "primary", onClick: this.confirm }, this.confirmLabel)))));
+            } }))), h("div", { key: 'ed95958ca424696e252fe90eab8855d0bdffd89c', class: "bs-timepicker__divider" }), h("div", { key: '77c404d4617a5ee6f669a2ffba63fa5729f98cf5', part: "footer", class: "bs-timepicker__footer" }, h("bs-button", { key: 'fbeb76d30f1eea912b3e37def67f8058b74626a7', part: "cancel", variant: "subtle", onClick: this.cancel }, this.cancelLabel), h("bs-button", { key: '1baf37a0708379ef23951f76765d048087d3083b', part: "confirm", variant: "primary", onClick: this.confirm }, this.confirmLabel)))));
     }
     static get is() { return "bs-timepicker"; }
     static get encapsulation() { return "shadow"; }

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

@@ -27,7 +27,7 @@ export class BsToast {
         this.bsDismiss.emit();
     };
     render() {
-        return (h("div", { key: '0bf6aadc817b574c07c2ed2cc00cb4a756591902', part: "container", class: `bs-toast bs-toast--${this.state}`, role: "status", "aria-live": this.state === 'error' ? 'assertive' : 'polite' }, h("div", { key: '961e5d3223d58061e1009fa823cd6e85b90637c2', class: "bs-toast__content" }, h("span", { key: '7b677b94135c89a16121a5fd81ff9a2a000c2dee', part: "icon", class: "bs-toast__icon", "aria-hidden": "true" }, h(StateIcon, { key: '88b0339e7b503cf2c415d1988f0aab1173b196c1', state: this.state })), h("span", { key: '34f3fb2f09d743405ad095251ced770a9ee790e8', part: "message", class: "bs-toast__message" }, h("slot", { key: '078843c14efaa0c9a8b1949393516cc2dd456de3' }))), h("div", { key: '9d968f0a028c950335f5b8b3540e22a152c39645', class: "bs-toast__actions" }, h("button", { key: '5fe8bd9e2bdd97df7ef8909a834c321e00ae022f', part: "close", type: "button", class: "bs-toast__close", "aria-label": this.dismissLabel, onClick: this.onDismiss }, h(CloseIcon, { key: '448afe4578a31afb0b1a9316d3e035d5eadadff3' })))));
+        return (h("div", { key: '8cca96362a50acd1f552c08163e8a2991b191d17', part: "container", class: `bs-toast bs-toast--${this.state}`, role: "status", "aria-live": this.state === 'error' ? 'assertive' : 'polite' }, h("div", { key: '01cc2a6b9b8ba851dec751efff862fe3225058be', class: "bs-toast__content" }, h("span", { key: '29ed8cc01ac3f5b46d0cb8299bc60af5fdaf281c', part: "icon", class: "bs-toast__icon", "aria-hidden": "true" }, h(StateIcon, { key: '568f57389206d284b9717fa7f1cb894f20d50cf7', state: this.state })), h("span", { key: '7271784969a334c9e5f297a1ca845c2c08d12c5d', part: "message", class: "bs-toast__message" }, h("slot", { key: 'b46cf88eb3ac95c47ea8aff52f9accd1a9755546' }))), h("div", { key: '23d69f46262dbd5a4279d608f4a72c2a9c2e1463', class: "bs-toast__actions" }, h("button", { key: '722b445b6fcf22f97ed44fca3ecd9a2d286f8bad', part: "close", type: "button", class: "bs-toast__close", "aria-label": this.dismissLabel, onClick: this.onDismiss }, h(CloseIcon, { key: '2401bd61c3f8873b8a37d2f9474850c253b1b9ab' })))));
     }
     static get is() { return "bs-toast"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-toggle-button/bs-toggle-button.cmp.test.js

@@ -0,0 +1,47 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-toggle-button', () => {
+    it('is a toggle with aria-pressed by default and emits bsChange', async () => {
+        const { root, waitForChanges, spyOnEvent } = await render(h("bs-toggle-button", null, "Bold"));
+        const spy = spyOnEvent('bsChange');
+        const btn = root.shadowRoot.querySelector('button');
+        expect(btn.getAttribute('aria-pressed')).toBe('false');
+        btn.click();
+        await waitForChanges();
+        expect(btn.getAttribute('aria-pressed')).toBe('true');
+        expect(root.pressed).toBe(true);
+        expect(spy).toHaveReceivedEventDetail(true);
+        btn.click();
+        await waitForChanges();
+        expect(spy).toHaveReceivedEventDetail(false);
+    });
+    it('radio mode uses role=radio/aria-checked and does not unpress', async () => {
+        const { root, waitForChanges, spyOnEvent } = await render(h("bs-toggle-button", { mode: "radio", pressed: true }, "A"));
+        const spy = spyOnEvent('bsChange');
+        const btn = root.shadowRoot.querySelector('button');
+        expect(btn.getAttribute('role')).toBe('radio');
+        expect(btn.getAttribute('aria-checked')).toBe('true');
+        expect(btn.hasAttribute('aria-pressed')).toBe(false);
+        btn.click();
+        await waitForChanges();
+        expect(spy).toHaveReceivedEventTimes(0);
+    });
+    it('disabled blocks interaction', async () => {
+        const { root, waitForChanges, spyOnEvent } = await render(h("bs-toggle-button", { disabled: true }, "A"));
+        const spy = spyOnEvent('bsChange');
+        const btn = root.shadowRoot.querySelector('button');
+        expect(btn.disabled).toBe(true);
+        btn.click();
+        await waitForChanges();
+        expect(spy).toHaveReceivedEventTimes(0);
+    });
+    it('is icon-only without label text and passes ariaLabel', async () => {
+        const { root } = await render(h("bs-toggle-button", { ariaLabel: "Grid view" }, h("svg", { slot: "icon", viewBox: "0 0 8 8" })));
+        const btn = root.shadowRoot.querySelector('button');
+        expect(btn.getAttribute('aria-label')).toBe('Grid view');
+        expect(btn).toHaveClass('bs-toggle-button--icon-only');
+    });
+    it('tabbable=false sets tabindex -1', async () => {
+        const { root } = await render(h("bs-toggle-button", { tabbable: false }, "A"));
+        expect(root.shadowRoot.querySelector('button').getAttribute('tabindex')).toBe('-1');
+    });
+});