@brandsync/wc 1.19.0 → 1.20.0

package/dist/collection/components/bs-skip-link/bs-skip-link.cmp.test.js

@@ -0,0 +1,60 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+import { runAxeCheck, assertShadowParts } from "../../test/helpers/conventions";
+import { blockLinkNavigation } from "../../test/helpers/block-link-navigation";
+blockLinkNavigation();
+describe('bs-skip-link', () => {
+    it('renders a real anchor with the default label and href', async () => {
+        const { root } = await render(h("bs-skip-link", null));
+        const a = root.shadowRoot.querySelector('a');
+        expect(a.getAttribute('href')).toBe('#main-content');
+        expect(a.textContent.trim()).toBe('Skip to main content');
+        assertShadowParts(root.shadowRoot, ['link']);
+    });
+    it('uses slotted label and custom href', async () => {
+        const { root } = await render(h("bs-skip-link", { href: "#nav" }, "Skip navigation"));
+        expect(root.shadowRoot.querySelector('a').getAttribute('href')).toBe('#nav');
+        expect(root).toHaveTextContent('Skip navigation');
+    });
+    it('is off-screen until focused, then on-screen', async () => {
+        const { root } = await render(h("bs-skip-link", null));
+        const a = root.shadowRoot.querySelector('a');
+        expect(a.getBoundingClientRect().bottom).toBeLessThan(0);
+        a.focus();
+        expect(a.getBoundingClientRect().top).toBeGreaterThanOrEqual(0);
+        expect(a.getBoundingClientRect().bottom).toBeGreaterThan(0);
+    });
+    it('is reachable by focus() on the host (delegatesFocus)', async () => {
+        const { root } = await render(h("bs-skip-link", null));
+        root.focus();
+        expect(root.shadowRoot.activeElement).toBe(root.shadowRoot.querySelector('a'));
+    });
+    it('moves focus to the target on activation, adding a temporary tabindex', async () => {
+        const { root } = await render(h("div", null, h("bs-skip-link", { href: "#skip-target" }), h("main", { id: "skip-target" }, "Main")));
+        const link = root.querySelector('bs-skip-link');
+        const main = root.querySelector('main');
+        const events = [];
+        link.addEventListener('bsSkip', (e) => events.push(e.detail));
+        link.shadowRoot.querySelector('a').click();
+        expect(document.activeElement).toBe(main);
+        expect(main.getAttribute('tabindex')).toBe('-1');
+        expect(events[0].target).toBe(main);
+        main.blur();
+        expect(main.hasAttribute('tabindex')).toBe(false);
+    });
+    it('does not move focus when bsSkip is cancelled', async () => {
+        const { root } = await render(h("div", null, h("bs-skip-link", { href: "#skip-target2" }), h("main", { id: "skip-target2" }, "Main")));
+        const link = root.querySelector('bs-skip-link');
+        link.addEventListener('bsSkip', e => e.preventDefault());
+        link.shadowRoot.querySelector('a').click();
+        expect(document.activeElement).not.toBe(root.querySelector('main'));
+    });
+    it('does nothing harmful when the target does not exist', async () => {
+        const { root } = await render(h("bs-skip-link", { href: "#nope-x" }));
+        root.shadowRoot.querySelector('a').click();
+        expect(root.isConnected).toBe(true);
+    });
+    it('has no axe violations', async () => {
+        const { root } = await render(h("div", null, h("bs-skip-link", null), h("main", { id: "main-content" }, "Content")));
+        await runAxeCheck(root);
+    });
+});

package/dist/collection/components/bs-skip-link/bs-skip-link.css

@@ -0,0 +1,58 @@
+/**
+ * @prop --bs-skip-link-bg: Background once focused into view. Aliased to --bs-surface-action.
+ * @prop --bs-skip-link-color: Text colour once focused. Aliased to --bs-text-on-action.
+ * @prop --bs-skip-link-radius: Corner radius. Aliased to --bs-border-radius-100.
+ * @prop --bs-skip-link-padding-x: Horizontal padding. Aliased to --bs-spacing-200.
+ * @prop --bs-skip-link-padding-y: Vertical padding. Aliased to --bs-spacing-100.
+ * @prop --bs-skip-link-font-size: Font size. Aliased to --bs-font-size-md.
+ * @prop --bs-skip-link-font-weight: Font weight. Aliased to --bs-font-weight-semibold.
+ * @prop --bs-skip-link-offset: Distance from the top and start edge of the viewport when shown. Aliased to --bs-spacing-100.
+ * @prop --bs-skip-link-focus-ring-color: Focus ring colour. Aliased to --bs-border-neutral-focus.
+ * @prop --bs-skip-link-z-index: Stacking order when shown. Aliased to --bs-z-index-modal.
+ */
+:host {
+  display: block;
+  /* The host takes no space: the link is out of flow whether hidden or shown. */
+  height: 0;
+
+  --bs-skip-link-bg: var(--bs-surface-action);
+  --bs-skip-link-color: var(--bs-text-on-action);
+  --bs-skip-link-radius: var(--bs-border-radius-100);
+  --bs-skip-link-padding-x: var(--bs-spacing-200);
+  --bs-skip-link-padding-y: var(--bs-spacing-100);
+  --bs-skip-link-font-size: var(--bs-font-size-md);
+  --bs-skip-link-font-weight: var(--bs-font-weight-semibold);
+  --bs-skip-link-offset: var(--bs-spacing-100);
+  --bs-skip-link-focus-ring-color: var(--bs-border-neutral-focus);
+  --bs-skip-link-z-index: var(--bs-z-index-modal);
+}
+
+/* Hidden by moving it off-screen, not display:none/visibility:hidden, which would drop it from the
+   tab order. :focus brings it to the top-start corner of the viewport. */
+.bs-skip-link {
+  position: fixed;
+  inset-block-start: var(--bs-skip-link-offset);
+  inset-inline-start: var(--bs-skip-link-offset);
+  z-index: var(--bs-skip-link-z-index);
+  box-sizing: border-box;
+  padding: var(--bs-skip-link-padding-y) var(--bs-skip-link-padding-x);
+  border-radius: var(--bs-skip-link-radius);
+  background: var(--bs-skip-link-bg);
+  color: var(--bs-skip-link-color);
+  font-family: inherit;
+  font-size: var(--bs-skip-link-font-size);
+  font-weight: var(--bs-skip-link-font-weight);
+  text-decoration: underline;
+  transform: translateY(-300%);
+}
+
+.bs-skip-link:focus,
+.bs-skip-link:focus-visible {
+  transform: none;
+  outline: 2px solid var(--bs-skip-link-focus-ring-color);
+  outline-offset: 2px;
+}
+
+@media (forced-colors: active) {
+  .bs-skip-link { border: 1px solid CanvasText; }
+}

package/dist/collection/components/bs-skip-link/bs-skip-link.js

@@ -0,0 +1,123 @@
+import { h } from "@stencil/core";
+/**
+ * A "skip to main content" link: invisible until it receives keyboard focus, then shown at the top
+ * of the page. Activating it moves focus to the element its `href` points at, so keyboard and
+ * screen-reader users can bypass repeated navigation (WCAG 2.4.1 Bypass Blocks).
+ *
+ * Place it as the very first focusable element on the page. Renders a real `<a>`; the focus move is
+ * done explicitly (the target gets a temporary `tabindex="-1"` when it is not natively focusable),
+ * because a fragment navigation alone does not reliably move focus in every browser.
+ *
+ * ## When to use
+ * - Once per page, before the header/navigation, pointing at the `<main>` landmark.
+ * - Additionally before large repeated blocks (e.g. a long sidebar) pointing past them.
+ *
+ * ## When not to use
+ * - As a general in-page link -- use a plain link or `bs-table-of-contents`.
+ * - When the page has no repeated blocks before its main content.
+ *
+ * Composition: a leaf element (a single anchor); no existing `bs-*` component renders a link.
+ *
+ * @slot - Default slot: the link text. Falls back to "Skip to main content".
+ * @part link - The anchor element.
+ */
+// Note: CSS Custom Properties (--bs-skip-link-*) are documented via @prop comments in bs-skip-link.css.
+export class BsSkipLink {
+    el;
+    /** Target to skip to: a fragment (`#main-content`) naming an element id in the same document or
+     * shadow tree, or any URL (then the browser just navigates). Point it at an element that exists --
+     * if the id is not found, activating the link does nothing beyond the native fragment jump. */
+    href = '#main-content';
+    /** Fires when the link is activated, before focus moves. **Cancelable**: `preventDefault()` stops
+     * both the focus move and the native navigation so you can handle it yourself. Detail is
+     * `{ href, target }` (`target` is the resolved element or `null`). Bubbles and is composed. */
+    bsSkip;
+    resolveTarget() {
+        if (!this.href || !this.href.startsWith('#') || this.href.length < 2)
+            return null;
+        const id = decodeURIComponent(this.href.slice(1));
+        const root = this.el.getRootNode();
+        return (root.getElementById?.(id) ?? document.getElementById(id));
+    }
+    onClick = (ev) => {
+        if (ev.defaultPrevented || ev.button !== 0 || ev.metaKey || ev.ctrlKey || ev.shiftKey || ev.altKey)
+            return;
+        const target = this.resolveTarget();
+        const proceed = this.bsSkip.emit({ href: this.href, target });
+        if (proceed.defaultPrevented) {
+            ev.preventDefault();
+            return;
+        }
+        if (!target)
+            return;
+        if (!target.hasAttribute('tabindex') && !target.matches('a[href],button,input,select,textarea,[contenteditable]')) {
+            target.setAttribute('tabindex', '-1');
+            target.addEventListener('blur', () => target.removeAttribute('tabindex'), { once: true });
+        }
+        target.focus();
+    };
+    render() {
+        return (h("a", { key: '7f3d5a4e355caaa5529b5602c048c864a5e7e5a9', part: "link", class: "bs-skip-link", href: this.href, onClick: this.onClick }, h("slot", { key: '938c117509a209ac79d99af9cbe8e1eccf7a4c22' }, "Skip to main content")));
+    }
+    static get is() { return "bs-skip-link"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-skip-link.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-skip-link.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Target to skip to: a fragment (`#main-content`) naming an element id in the same document or\nshadow tree, or any URL (then the browser just navigates). Point it at an element that exists --\nif the id is not found, activating the link does nothing beyond the native fragment jump."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href",
+                "defaultValue": "'#main-content'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsSkip",
+                "name": "bsSkip",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the link is activated, before focus moves. **Cancelable**: `preventDefault()` stops\nboth the focus move and the native navigation so you can handle it yourself. Detail is\n`{ href, target }` (`target` is the resolved element or `null`). Bubbles and is composed."
+                },
+                "complexType": {
+                    "original": "{ href: string; target: HTMLElement | null }",
+                    "resolved": "{ href: string; target: HTMLElement; }",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/bs-skip-link/bs-skip-link.stories.js

@@ -0,0 +1,27 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../stories-utils";
+const meta = {
+    title: 'Components/bs-skip-link',
+    parameters: { docs: { description: { component: componentDescription('bs-skip-link') } } },
+    render: args => html `
+    <div style="min-height: 160px;">
+      <p>Click here, then press Tab: the skip link appears at the top-left of the viewport.</p>
+      <bs-skip-link href=${args.href}>${args.label}</bs-skip-link>
+      <nav aria-label="Demo navigation" style="margin: 16px 0;">
+        <a href="#nav-a">Link A</a> | <a href="#nav-b">Link B</a> | <a href="#nav-c">Link C</a>
+      </nav>
+      <main id="main-content"><h1 style="font-size: 20px;">Main content</h1><p>Focus lands here when the skip link is activated.</p></main>
+    </div>
+  `,
+    argTypes: {
+        href: { control: 'text', description: propDescription('bs-skip-link', 'href') },
+        label: { control: 'text', description: 'Link text (default slot).' },
+    },
+    args: { href: '#main-content', label: 'Skip to main content' },
+};
+export default meta;
+export const Default = {};
+export const CustomLabelAndTarget = {
+    name: 'Custom label and target',
+    args: { href: '#main-content', label: 'Skip navigation' },
+};

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

@@ -130,6 +130,19 @@ describe('bs-slider', () => {
             expect(ticks[0]).toHaveClass('bs-slider__tick--hidden');
             expect(ticks[1]).not.toHaveClass('bs-slider__tick--hidden');
         });
+        it('ticks span the full knob/frame height, centred on the track, without blocking pointer events', async () => {
+            const { root } = await render(h("bs-slider", { type: "segmented", segments: 5, value: 40 }));
+            const tick = root.shadowRoot.querySelectorAll('.bs-slider__tick')[2];
+            const track = root.shadowRoot.querySelector('.bs-slider__track');
+            const ticks = root.shadowRoot.querySelector('.bs-slider__ticks');
+            const tr = tick.getBoundingClientRect();
+            const kr = track.getBoundingClientRect();
+            const knob = parseFloat(getComputedStyle(root).getPropertyValue('--bs-slider-knob-size')) || 24;
+            expect(tr.height).toBeGreaterThan(kr.height * 2);
+            expect(Math.round(tr.height)).toBe(Math.round(knob));
+            expect(Math.abs(tr.top + tr.height / 2 - (kr.top + kr.height / 2))).toBeLessThan(1);
+            expect(getComputedStyle(ticks).pointerEvents).toBe('none');
+        });
         it('derives the range input step from (max - min) / segments', async () => {
             const { root } = await render(h("bs-slider", { type: "segmented", min: 0, max: 100, segments: 4 }));
             const input = root.shadowRoot.querySelector('input[type="range"]');

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

@@ -239,7 +239,8 @@
   top: 50%;
   left: 0;
   width: 100%;
-  height: 0;
+  /* Ticks span the full visible slider frame (the knob's height), not just the 4px track. */
+  height: var(--bs-slider-knob-size);
   display: flex;
   justify-content: space-between;
   transform: translateY(-50%);
@@ -248,7 +249,7 @@
 
 .bs-slider__tick {
   width: 2px;
-  height: var(--bs-spacing-50);
+  height: 100%;
   background: var(--bs-slider-tick-bg);
 }
 

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

@@ -233,7 +233,7 @@ export class BsSlider {
     render() {
         const isRange = this.type === 'range';
         const rootClasses = ['bs-slider', this.disabled ? 'bs-slider--disabled' : ''].filter(Boolean).join(' ');
-        return (h("div", { key: '78480dc37808335f258e1ad06e8b19ca97aed1b9', class: rootClasses }, this.showLabel && (h("div", { key: '0fd24602403f811367605786a07d9962c6f3522f', class: "bs-slider__header" }, h("span", { key: 'dd1c85fa0c4718e381bfef7f00977230d60e9d6c', id: "bs-slider-label", part: "label", class: "bs-slider__label" }, this.label), isRange ? (h("span", { class: "bs-slider__value-fields" }, this.renderPercentField(this.percent(this.effectiveValueStart), this.onStartPercentFieldChange, this.ariaLabel ?? this.startValueLabel), h("span", { class: "bs-slider__separator" }, "\u2013"), this.renderPercentField(this.percent(this.effectiveValueEnd), this.onEndPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} end` : this.endValueLabel))) : (this.renderPercentField(this.percent(this.value), this.onPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} value` : 'Value')))), h("div", { key: '6628c6c2332590f3580a759903bfc2b817ec1ef6', class: "bs-slider__row" }, this.showLabel && (h("span", { key: 'ecda7ec3285991312fbd0fba003294ba94fa8777', part: "bound", class: "bs-slider__bound" }, this.min)), isRange ? this.renderRangeThumbs() : this.renderSingleThumb(), this.showLabel && (h("span", { key: '3db1ee50efbfe1d14aae2609997bbd589710f2d1', part: "bound", class: "bs-slider__bound" }, this.max)))));
+        return (h("div", { key: '242e99440bf989ab9e8370772a415ef98ea4df97', class: rootClasses }, this.showLabel && (h("div", { key: '23063ed9dd2dfefc2df1ae8794fdb6d54195ee39', class: "bs-slider__header" }, h("span", { key: '15debc72803ed291564d1573179e9e30fd4a40f6', id: "bs-slider-label", part: "label", class: "bs-slider__label" }, this.label), isRange ? (h("span", { class: "bs-slider__value-fields" }, this.renderPercentField(this.percent(this.effectiveValueStart), this.onStartPercentFieldChange, this.ariaLabel ?? this.startValueLabel), h("span", { class: "bs-slider__separator" }, "\u2013"), this.renderPercentField(this.percent(this.effectiveValueEnd), this.onEndPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} end` : this.endValueLabel))) : (this.renderPercentField(this.percent(this.value), this.onPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} value` : 'Value')))), h("div", { key: 'b975a8200846dbd43622473d3e62255c805e0359', class: "bs-slider__row" }, this.showLabel && (h("span", { key: 'c82b225aa14924963005a578fdaf0ab1accf8c2b', part: "bound", class: "bs-slider__bound" }, this.min)), isRange ? this.renderRangeThumbs() : this.renderSingleThumb(), this.showLabel && (h("span", { key: '5e85c40cb85d2b71591020249cac4d5ae0c300a4', part: "bound", class: "bs-slider__bound" }, this.max)))));
     }
     static get is() { return "bs-slider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
 import { render, h, describe, it, expect } from "@stencil/vitest";
+import { contrastRatio, withTheme } from "../../test/helpers/contrast";
 describe('bs-snackbar', () => {
     it('defaults to the "default" variant', async () => {
         const { root } = await render(h("bs-snackbar", null, "Files uploaded successfully."));
@@ -97,4 +98,25 @@ describe('bs-snackbar', () => {
             expect(container).toEqualAttribute('aria-live', 'assertive');
         });
     });
+    describe('action button contrast (#39)', () => {
+        for (const theme of ['light', 'dark']) {
+            for (const variant of ['default', 'info', 'warning', 'success', 'error']) {
+                it(`${variant} / ${theme}: action label >= 4.5:1 on its surface; default border equals label`, async () => {
+                    await withTheme(theme, async () => {
+                        const { root } = await render(h("bs-snackbar", { variant: variant, actionLabel: "Undo" }, "Saved"));
+                        const bar = getComputedStyle(root.shadowRoot.querySelector('.bs-snackbar'));
+                        const btn = root.shadowRoot.querySelector('bs-button').shadowRoot.querySelector('button');
+                        const cs = getComputedStyle(btn);
+                        const fill = cs.backgroundColor !== 'rgba(0, 0, 0, 0)' ? cs.backgroundColor : bar.backgroundColor;
+                        // Translucent surfaces (dark inverse) sit on the page: black in dark, white in light.
+                        const backdrop = theme === 'dark' ? 'rgb(0, 0, 0)' : 'rgb(255, 255, 255)';
+                        expect(contrastRatio(cs.color, fill, backdrop)).toBeGreaterThanOrEqual(4.5);
+                        if (variant === 'default') {
+                            expect(cs.borderTopColor).toBe(cs.color);
+                        }
+                    });
+                });
+            }
+        }
+    });
 });

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

@@ -21,6 +21,8 @@
  * @prop --bs-snackbar-text-success: Icon/message/close color, variant="success". Aliased to --bs-text-success.
  * @prop --bs-snackbar-surface-error: Bar background, variant="error". Aliased to --bs-color-error-container.
  * @prop --bs-snackbar-text-error: Icon/message/close color, variant="error". Aliased to --bs-text-error.
+ * @prop --bs-snackbar-action-color: Action button label AND border colour on the dark default bar (outlined/subtle action). Aliased to --bs-text-inverse.
+ * @prop --bs-snackbar-action-hover: Action button hover/pressed fill on the dark default bar. A translucent mix of --bs-snackbar-action-color.
  * @prop --bs-snackbar-spinner-track: Loading spinner's background ring. Aliased to --bs-neutral-200.
  *
  * The action/close buttons are composed from bs-button/bs-icon-button (see bs-snackbar.tsx) --
@@ -66,6 +68,9 @@
   --bs-snackbar-text-error: var(--bs-text-error);
 
   --bs-snackbar-spinner-track: var(--bs-neutral-200);
+
+  --bs-snackbar-action-color: var(--bs-text-inverse);
+  --bs-snackbar-action-hover: color-mix(in srgb, var(--bs-snackbar-action-color) 16%, transparent);
 }
 
 .bs-snackbar {
@@ -174,3 +179,21 @@
    (see bs-snackbar.tsx) instead of hand-rolled <button> markup -- all the button-level styling
    (fill colors, hover/pressed states, focus rings, and slotted-icon sizing) lives in those
    components' own CSS, so there's nothing left to style here. */
+
+/* Dark default bar (#39): the outlined/subtle action's label AND border use the same inverse token
+   (the default blue border/label pair has poor contrast on the dark surface). Hover, pressed and
+   focus stay defined from the same token. Coloured variants keep bs-button's own filled variants,
+   whose on-action label is already high contrast on their fill. */
+.bs-snackbar--default bs-button {
+  --bs-button-outlined-color: var(--bs-snackbar-action-color);
+  --bs-button-outlined-border: var(--bs-snackbar-action-color);
+  --bs-button-outlined-border-hover: var(--bs-snackbar-action-color);
+  --bs-button-outlined-border-pressed: var(--bs-snackbar-action-color);
+  --bs-button-outlined-text-hover: var(--bs-snackbar-action-color);
+  --bs-button-outlined-container: var(--bs-snackbar-action-hover);
+  --bs-button-outlined-focus: var(--bs-snackbar-action-color);
+  --bs-button-subtle-color: var(--bs-snackbar-action-color);
+  --bs-button-subtle-hover: var(--bs-snackbar-action-hover);
+  --bs-button-subtle-pressed: var(--bs-snackbar-action-hover);
+  --bs-button-subtle-focus: var(--bs-snackbar-action-color);
+}

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

@@ -67,7 +67,7 @@ export class BsSnackbar {
         this.bsDismiss.emit();
     };
     render() {
-        return (h("div", { key: '26aad3204c2d6ca34162da66a173afab22663973', part: "container", class: `bs-snackbar bs-snackbar--${this.variant}`, role: "status", "aria-live": this.variant === 'error' ? 'assertive' : 'polite' }, h("div", { key: '8837bc51a479fbd276b2c02fccf98eb3e6683801', class: "bs-snackbar__content" }, h("span", { key: '791564815c28aebeabff97b6b113f04acc4fa0b6', part: "icon", class: "bs-snackbar__icon", "aria-hidden": "true" }, this.loading ? h("span", { class: "bs-snackbar__spinner" }) : h(CheckCircleIcon, null)), h("span", { key: '28920c114f18f996d0dc4778d4de2ff523626c99', part: "message", class: "bs-snackbar__message" }, h("slot", { key: '4bf02f4ad00ab5a3def30c066648b4df55bf7457' }))), h("div", { key: '7f3c619ba2164e8e7eb780c737b410a50fdf813b', class: "bs-snackbar__actions" }, this.actionLabel && (h("bs-button", { key: '43886c3acaef928d08cf76d8d4660df6100f1ba3', part: "action", variant: this.actionVariant ?? ACTION_VARIANT[this.variant], size: "sm", onClick: this.onAction }, this.actionLabel)), !this.hideClose && (h("bs-icon-button", { key: 'd28c20079af83708865ad4b6ba72a65de2a1d458', part: "close", variant: "subtle", size: "md", ariaLabel: "Dismiss", onClick: this.onDismiss }, h(CloseIcon, { key: '7f9df3eef9dcf22f587b69e4ecd36566876c29b9' }))))));
+        return (h("div", { key: 'e0e55c6a5c3de86ef00ac24c9050df32d837fde1', part: "container", class: `bs-snackbar bs-snackbar--${this.variant}`, role: "status", "aria-live": this.variant === 'error' ? 'assertive' : 'polite' }, h("div", { key: '229c3d183ac1fe74f81bbbdd96def0eeb64a4e45', class: "bs-snackbar__content" }, h("span", { key: 'af87602a2346ed594c559a4ddc73dfa463f8d849', part: "icon", class: "bs-snackbar__icon", "aria-hidden": "true" }, this.loading ? h("span", { class: "bs-snackbar__spinner" }) : h(CheckCircleIcon, null)), h("span", { key: '1b19b6ac5560905902999a9cdfaca75afab57731', part: "message", class: "bs-snackbar__message" }, h("slot", { key: '9192722d75632f0eabe2200f72a9a828dc0137df' }))), h("div", { key: 'df8a454adb4bf591908a50f2ab67513fe12c00a2', class: "bs-snackbar__actions" }, this.actionLabel && (h("bs-button", { key: '50a8f6a4cd75a2fc22150bf14b15e0dce665104f', part: "action", variant: this.actionVariant ?? ACTION_VARIANT[this.variant], size: "sm", onClick: this.onAction }, this.actionLabel)), !this.hideClose && (h("bs-icon-button", { key: '9c5358e0094800a6e0085ddf7ca8e98fc2cf4d14', part: "close", variant: "subtle", size: "md", ariaLabel: "Dismiss", onClick: this.onDismiss }, h(CloseIcon, { key: 'b00d5ce56c2d40a3a612e4506f5c1c5ccc0859a9' }))))));
     }
     static get is() { return "bs-snackbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-source-link/bs-source-link.js

@@ -52,9 +52,9 @@ export class BsSourceLink {
     };
     render() {
         const inner = [
-            h("bs-ripple", { key: '2ddd937da894bc3584b82489e35d41167c19cb6c', part: "ripple" }),
-            h("span", { key: 'd1141377078beec80d8726b1633ea9261bce215d', class: "bs-source-link__left" }, h("span", { key: '75d04109faa8168ba271c8bfc2cfd15abf02fb57', class: "bs-source-link__filename-row" }, h("span", { key: '50f28021063c49b0ccc7348e7b0b9cd6ca0749b7', part: "icon", class: "bs-source-link__icon" }, h("slot", { key: 'aca4ff56e585d65d2b38d0b1f8634d56d521b549', name: "icon" }, h(FileTextIcon, { key: 'e89b337ded8658b2b76ba59e6ea79e70763ddb72' }))), h("p", { key: '5d9cdf3618072784aeb9bd067ae505b57afa625c', part: "filename", class: "bs-source-link__filename" }, this.fileName)), h("span", { key: '35d6d485989679eb05b6fcf2096477456e6b7bc0', class: "bs-source-link__meta" }, this.sourceName && (h("span", { key: 'e3ffae28c3ed65d255961c172eb823d52583c7b2', part: "source", class: "bs-source-link__source" }, this.sourceName)), this.sourceName && this.version && h("span", { key: 'c460e9ccfa2d92b11d8bb2a1e87fcedc94d392ae', class: "bs-source-link__dot", "aria-hidden": "true" }), this.version && (h("span", { key: '9a33d16c96a6d904dd1b69169170da0d0801b9f1', part: "version", class: "bs-source-link__version" }, this.version)))),
-            h("span", { key: 'c2f42b73b59ae97bb8e95e80c20a2038826329bf', part: "arrow", class: "bs-source-link__arrow", "aria-hidden": "true" }, h(ArrowUpRightIcon, { key: '61d67aaa0a4382ecb12ed49d5716e1c4385c6af5' })),
+            h("bs-ripple", { key: '075746e101103adfdf0a18aef1e0149b137fd542', part: "ripple" }),
+            h("span", { key: '466a693b6abe05191356d81e86cc60e0391171e3', class: "bs-source-link__left" }, h("span", { key: 'e8b570d2f99693271492d333d0c7f49e68ee39a9', class: "bs-source-link__filename-row" }, h("span", { key: '9e88d1377a38deb11bec9de4e0715d3ad2ce97c2', part: "icon", class: "bs-source-link__icon" }, h("slot", { key: 'bf8bd319bea1f81e623e1abd6d17700fe65979a5', name: "icon" }, h(FileTextIcon, { key: 'ed754e533962bfe6354d4a3350495b0838886ec0' }))), h("p", { key: 'b623db1019d63064708896a629c0a7f5db406453', part: "filename", class: "bs-source-link__filename" }, this.fileName)), h("span", { key: '97f3d0841d0650227cfa50e5301ae5bfffb528ff', class: "bs-source-link__meta" }, this.sourceName && (h("span", { key: '857afee71f6b359f7354362427930cc7ae3ebf52', part: "source", class: "bs-source-link__source" }, this.sourceName)), this.sourceName && this.version && h("span", { key: '0ce6a6368f9b550f6122598e4b259af813728410', class: "bs-source-link__dot", "aria-hidden": "true" }), this.version && (h("span", { key: 'f0d6d7be2db179ad3f0eed720df04b082c856da2', part: "version", class: "bs-source-link__version" }, this.version)))),
+            h("span", { key: '704fbe31e50ba22c8fe8703262d4050377336f07', part: "arrow", class: "bs-source-link__arrow", "aria-hidden": "true" }, h(ArrowUpRightIcon, { key: 'b7e4f15c4f5818db70ab7ae9bb4b94544b971f68' })),
         ];
         return this.href ? (h("a", { class: "bs-source-link", href: this.href, target: this.target, rel: "noopener noreferrer", onClick: this.onClick }, inner)) : (h("button", { type: "button", class: "bs-source-link", onClick: this.onClick }, inner));
     }

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

@@ -30,7 +30,7 @@ export class BsSpinner {
     label;
     render() {
         const hasLabel = !!this.label;
-        return (h("span", { key: '17b3ac21aefe35279e52717c529bcba6d2ae7b75', part: "container", class: `bs-spinner bs-spinner--${this.size}`, role: hasLabel ? 'status' : undefined, "aria-label": hasLabel ? this.label : undefined, "aria-hidden": hasLabel ? undefined : 'true' }, h("svg", { key: '8ca1165795b8fadb7ea3c3c8228fc6f24d3ce3b2', part: "svg", class: "bs-spinner__svg", viewBox: "0 0 24 24", fill: "none", focusable: "false" }, h("circle", { key: '07d9b05e6e6f11e742bdbeea99e7f31322696363', class: "bs-spinner__track", cx: "12", cy: "12", r: "9", "stroke-width": "3" }), h("path", { key: '83d83f51d3c89cc3997950ff94e4911c6d1c0748', class: "bs-spinner__arc", d: "M12 3a9 9 0 0 1 9 9", "stroke-width": "3", "stroke-linecap": "round" }))));
+        return (h("span", { key: '536b5a9eeee4583c4a6e513deb458baa0c2351c7', part: "container", class: `bs-spinner bs-spinner--${this.size}`, role: hasLabel ? 'status' : undefined, "aria-label": hasLabel ? this.label : undefined, "aria-hidden": hasLabel ? undefined : 'true' }, h("svg", { key: '2daa95caf00c24adfbb181b54c510262494b51ae', part: "svg", class: "bs-spinner__svg", viewBox: "0 0 24 24", fill: "none", focusable: "false" }, h("circle", { key: '27f9997a334a11d735a42ff72a5d6b2293f45087', class: "bs-spinner__track", cx: "12", cy: "12", r: "9", "stroke-width": "3" }), h("path", { key: '3d82ac0c874c564dc6383161c0b6b1b293370b88', class: "bs-spinner__arc", d: "M12 3a9 9 0 0 1 9 9", "stroke-width": "3", "stroke-linecap": "round" }))));
     }
     static get is() { return "bs-spinner"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-split-pane/bs-split-pane.js

@@ -215,7 +215,7 @@ export class BsSplitPane {
                 nodes.push(h("div", { part: "divider", class: { 'bs-split-pane__divider': true, 'bs-split-pane__divider--active': this.draggingIndex === i, 'bs-split-pane__divider--static': !this.resizable }, role: "separator", "aria-orientation": dividerOrientation, "aria-label": this.dividerLabel, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": this.percentFor(i), tabindex: this.resizable ? 0 : undefined, onPointerDown: this.onPointerDown(i), onPointerMove: this.onPointerMove, onPointerUp: this.onPointerUp, onPointerCancel: this.onPointerUp, onKeyDown: this.onKeyDown(i) }, h("span", { part: "divider-thumb", class: "bs-split-pane__thumb" })));
             }
         }
-        return (h("div", { key: 'c427313cbfcd736d044ced8e07658ad6de6ed0bd', part: "container", class: `bs-split-pane bs-split-pane--${this.orientation}` }, nodes));
+        return (h("div", { key: 'a8907feecf4f151d88192eea0fbdffeedac25d09', part: "container", class: `bs-split-pane bs-split-pane--${this.orientation}` }, nodes));
     }
     static get is() { return "bs-split-pane"; }
     static get encapsulation() { return "shadow"; }

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

@@ -81,7 +81,7 @@ export class BsStack {
                 parts.push(h("slot", { name: `bs-stack-item-${i}`, onSlotchange: this.sync }));
             }
         }
-        return (h(Host, { key: '39852df38f3638826e331e5e1028fa069e15322c', style: { '--bs-stack-gap-token': `var(--bs-spacing-${gap})` } }, h("slot", { key: '9e303ef2361fd7b804aea37b1b5bf4269f480b2d', onSlotchange: this.sync }), parts));
+        return (h(Host, { key: '778684be1eb1af11919fd4d374031f03bdea3f30', style: { '--bs-stack-gap-token': `var(--bs-spacing-${gap})` } }, h("slot", { key: '43efd637eb76a62d3c3591158f4e17edbe6f5907', onSlotchange: this.sync }), parts));
     }
     static get is() { return "bs-stack"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,49 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+import { assertShadowParts, assertCssCustomProperties, runAxeCheck } from "../../test/helpers/conventions";
+const q = (el, s) => el.shadowRoot.querySelector(s);
+describe('bs-stat', () => {
+    it('renders label and value inside a bs-card with dl semantics', async () => {
+        const { root } = await render(h("bs-stat", { label: "Active users", value: "1,284" }));
+        expect(q(root, '[part="container"]').tagName).toBe('BS-CARD');
+        expect(q(root, 'dl dt [part="label"]').textContent).toBe('Active users');
+        expect(q(root, 'dl dd [part="value"]').textContent).toBe('1,284');
+        expect(q(root, '[part="trend"]')).toBeNull();
+        assertShadowParts(root.shadowRoot, ['container', 'label', 'value']);
+        assertCssCustomProperties(root, ['--bs-stat-value-size', '--bs-stat-label-color', '--bs-stat-trend-color-positive']);
+    });
+    it.each([
+        ['up', 'positive', 'Increase of'],
+        ['down', 'negative', 'Decrease of'],
+        ['neutral', 'neutral', 'No change'],
+    ])('trend %s has %s styling and accessible text', async (trend, intent, text) => {
+        const { root } = await render(h("bs-stat", { label: "L", value: "1", trend: trend, trendValue: "12%" }));
+        const t = q(root, '[part="trend"]');
+        expect(t.classList.contains(`bs-stat__trend--${intent}`)).toBe(true);
+        expect(t.textContent).toContain(text);
+        expect(t.textContent).toContain('12%');
+        expect(q(root, '[part="trend-icon"]').getAttribute('aria-hidden')).toBe('true');
+    });
+    it('trendIntent overrides the direction colour (e.g. churn going up)', async () => {
+        const { root } = await render(h("bs-stat", { label: "Churn", value: "4%", trend: "up", trendValue: "1%", trendIntent: "negative" }));
+        expect(q(root, '[part="trend"]').classList.contains('bs-stat__trend--negative')).toBe(true);
+        expect(q(root, '[part="trend"]').textContent).toContain('Increase of');
+    });
+    it('uses custom trend labels', async () => {
+        const { root } = await render(h("bs-stat", { label: "L", value: "1", trend: "up", trendValue: "2", trendUpLabel: "Op med" }));
+        expect(q(root, '[part="trend"]').textContent).toContain('Op med');
+    });
+    it('passes surface to bs-card', async () => {
+        const { root } = await render(h("bs-stat", { label: "L", value: "1", surface: "base" }));
+        expect(q(root, '[part="container"]').getAttribute('surface')).toBe('base');
+    });
+    it('shows the icon wrapper only with a slotted icon', async () => {
+        const { root } = await render(h("bs-stat", { label: "L", value: "1" }, h("svg", { slot: "icon", viewBox: "0 0 20 20" })));
+        expect(getComputedStyle(q(root, '.bs-stat__icon')).display).not.toBe('none');
+        const { root: plain } = await render(h("bs-stat", { label: "L", value: "1" }));
+        expect(getComputedStyle(q(plain, '.bs-stat__icon')).display).toBe('none');
+    });
+    it('passes axe', async () => {
+        const { root } = await render(h("div", null, h("bs-stat", { label: "Active users", value: "1,284", trend: "up", trendValue: "12%" }), h("bs-stat", { label: "Churn", value: "4%", trend: "down", trendValue: "1%" }), h("bs-stat", { label: "Revenue", value: "$2M", trend: "neutral" })));
+        await runAxeCheck(root);
+    });
+});

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

@@ -0,0 +1,116 @@
+/**
+ * @prop --bs-stat-gap: Gap between label, value and extra content. Aliased to --bs-spacing-50.
+ * @prop --bs-stat-padding: Card padding. Aliased to --bs-spacing-200 (forwarded to --bs-card-padding).
+ * @prop --bs-stat-label-color: Aliased to --bs-text-secondary.
+ * @prop --bs-stat-label-size: Aliased to --bs-font-size-sm.
+ * @prop --bs-stat-value-color: Aliased to --bs-text-default.
+ * @prop --bs-stat-value-size: Aliased to --bs-font-size-4xl.
+ * @prop --bs-stat-value-weight: Aliased to --bs-font-weight-bold.
+ * @prop --bs-stat-trend-size: Aliased to --bs-font-size-sm.
+ * @prop --bs-stat-trend-color-positive: Aliased to --bs-text-success.
+ * @prop --bs-stat-trend-color-negative: Aliased to --bs-text-error.
+ * @prop --bs-stat-trend-color-neutral: Aliased to --bs-text-secondary.
+ */
+:host {
+  display: block;
+  --bs-stat-gap: var(--bs-spacing-50);
+  --bs-stat-padding: var(--bs-spacing-200);
+  --bs-stat-label-color: var(--bs-text-secondary);
+  --bs-stat-label-size: var(--bs-font-size-sm);
+  --bs-stat-value-color: var(--bs-text-default);
+  --bs-stat-value-size: var(--bs-font-size-4xl);
+  --bs-stat-value-weight: var(--bs-font-weight-bold);
+  --bs-stat-trend-size: var(--bs-font-size-sm);
+  --bs-stat-trend-color-positive: var(--bs-text-success);
+  --bs-stat-trend-color-negative: var(--bs-text-error);
+  --bs-stat-trend-color-neutral: var(--bs-text-secondary);
+}
+
+.bs-stat {
+  --bs-card-padding: var(--bs-stat-padding);
+}
+
+.bs-stat__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-stat-gap);
+  margin: 0;
+  font-family: inherit;
+}
+.bs-stat__body dd,
+.bs-stat__body dt {
+  margin: 0;
+}
+
+.bs-stat__head {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-spacing-100);
+  color: var(--bs-stat-label-color);
+  font-size: var(--bs-stat-label-size);
+  line-height: 1.4;
+}
+.bs-stat__icon {
+  display: none;
+}
+.bs-stat__icon--visible {
+  display: inline-flex;
+}
+.bs-stat__icon ::slotted(*) {
+  width: 20px;
+  height: 20px;
+}
+
+.bs-stat__figure {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  column-gap: var(--bs-spacing-150);
+}
+.bs-stat__value {
+  color: var(--bs-stat-value-color);
+  font-size: var(--bs-stat-value-size);
+  font-weight: var(--bs-stat-value-weight);
+  line-height: 1.2;
+}
+
+.bs-stat__trend {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bs-spacing-25);
+  font-size: var(--bs-stat-trend-size);
+  font-weight: var(--bs-font-weight-semibold);
+}
+.bs-stat__trend--positive {
+  color: var(--bs-stat-trend-color-positive);
+}
+.bs-stat__trend--negative {
+  color: var(--bs-stat-trend-color-negative);
+}
+.bs-stat__trend--neutral {
+  color: var(--bs-stat-trend-color-neutral);
+}
+.bs-stat__trend-icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+.bs-stat__sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.bs-stat__extra {
+  color: var(--bs-stat-label-color);
+  font-size: var(--bs-stat-label-size);
+}
+.bs-stat__extra:not(.bs-stat__extra--visible) {
+  display: none;
+}