@brandsync/wc 1.18.0 → 1.20.0

package/dist/collection/components/bs-side-panel/bs-side-panel.js

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { cancelMotion, play, readMotion } from "../../utils/motion";
 let panelId = 0;
 /**
  * A generic slide-in panel (drawer) anchored to the start or end edge, for history, filters, FAQ
@@ -30,6 +31,8 @@ let panelId = 0;
  * @prop --bs-side-panel-overlay-bg - Backdrop color. Aliased to `--bs-surface-overlay`.
  * @prop --bs-side-panel-color - Text color. Aliased to `--bs-text-default`.
  * @prop --bs-side-panel-z-index - Stacking order. Aliased to `--bs-z-index-modal`.
+ * @prop --bs-side-panel-duration - Length of the slide in/out. Aliased to `--bs-duration-slow`.
+ * @prop --bs-side-panel-easing - Curve of the slide in/out. Aliased to `--bs-easing-standard`.
  */
 export class BsSidePanel {
     el;
@@ -50,7 +53,24 @@ export class BsSidePanel {
     panelEl;
     /** Elements we set `inert` on (so we only undo our own changes). */
     inertified = [];
+    /** True while the slide-out plays after `open` went false, so the panel stays mounted for it. */
+    closing = false;
+    overlayEl;
+    enterPending = false;
+    exitPending = false;
+    motionRun = 0;
+    wasRendered = false;
     onOpenChange(next) {
+        this.motionRun++;
+        cancelMotion(this.overlayEl, this.panelEl);
+        if (next) {
+            this.closing = false;
+            this.enterPending = true;
+        }
+        else if (this.wasRendered && readMotion(this.el, 'bs-side-panel').ms > 0) {
+            this.closing = true;
+            this.exitPending = true;
+        }
         if (next) {
             this.previouslyFocused = document.activeElement ?? null;
             this.applyInert();
@@ -144,7 +164,38 @@ export class BsSidePanel {
             first.focus();
         }
     }
+    /** Where the panel sits when hidden: fully past its own edge. Physical, like the panel's own left/right. */
+    offscreen() {
+        return this.side === 'start' ? 'translateX(-100%)' : 'translateX(100%)';
+    }
+    playEnter() {
+        const { ms, easing } = readMotion(this.el, 'bs-side-panel');
+        if (ms === 0)
+            return;
+        play(this.overlayEl, [{ opacity: 0 }, { opacity: 1 }], ms, easing);
+        play(this.panelEl, [{ transform: this.offscreen() }, { transform: 'none' }], ms, easing);
+    }
+    playExit() {
+        const { ms, easing } = readMotion(this.el, 'bs-side-panel');
+        const run = ++this.motionRun;
+        Promise.all([
+            play(this.overlayEl, [{ opacity: 1 }, { opacity: 0 }], ms, easing, 'forwards'),
+            play(this.panelEl, [{ transform: 'none' }, { transform: this.offscreen() }], ms, easing, 'forwards'),
+        ]).then(() => {
+            if (run === this.motionRun)
+                this.closing = false;
+        });
+    }
     componentDidRender() {
+        this.wasRendered = this.open || this.closing;
+        if (this.open && this.enterPending) {
+            this.enterPending = false;
+            this.playEnter();
+        }
+        else if (!this.open && this.closing && this.exitPending) {
+            this.exitPending = false;
+            this.playExit();
+        }
         if (this.open && this.panelEl && !this.focusedIn) {
             this.focusedIn = true;
             this.panelEl.focus();
@@ -168,9 +219,9 @@ export class BsSidePanel {
         }
     };
     render() {
-        if (!this.open)
+        if (!this.open && !this.closing)
             return null;
-        return (h("div", { class: `bs-side-panel bs-side-panel--${this.side}`, onKeyDown: this.onKeyDown }, this.overlay && h("div", { part: "overlay", class: "bs-side-panel__overlay", onClick: this.close }), h("div", { part: "panel", class: "bs-side-panel__panel", role: "dialog", "aria-modal": "true", "aria-labelledby": this.headingId, tabindex: "-1", ref: el => (this.panelEl = el) }, h("div", { part: "header", class: "bs-side-panel__header" }, h("h2", { part: "heading", id: this.headingId, class: "bs-side-panel__heading" }, this.heading), h("div", { class: "bs-side-panel__actions" }, h("slot", { name: "header-actions" }), h("bs-icon-button", { variant: "subtle", ariaLabel: this.closeLabel, onClick: this.close }, h("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { d: "M6 6L18 18M18 6L6 18", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" }))))), h("div", { part: "body", class: "bs-side-panel__body" }, h("slot", null)), h("div", { part: "footer", class: "bs-side-panel__footer" }, h("slot", { name: "footer" })))));
+        return (h("div", { class: `bs-side-panel bs-side-panel--${this.side} ${this.open ? '' : 'bs-side-panel--closing'}`, onKeyDown: this.onKeyDown }, this.overlay && h("div", { part: "overlay", class: "bs-side-panel__overlay", onClick: this.close, ref: el => (this.overlayEl = el) }), h("div", { part: "panel", class: "bs-side-panel__panel", role: "dialog", "aria-modal": "true", "aria-labelledby": this.headingId, tabindex: "-1", ref: el => (this.panelEl = el) }, h("div", { part: "header", class: "bs-side-panel__header" }, h("h2", { part: "heading", id: this.headingId, class: "bs-side-panel__heading" }, this.heading), h("div", { class: "bs-side-panel__actions" }, h("slot", { name: "header-actions" }), h("bs-icon-button", { variant: "subtle", ariaLabel: this.closeLabel, onClick: this.close }, h("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { d: "M6 6L18 18M18 6L6 18", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" }))))), h("div", { part: "body", class: "bs-side-panel__body" }, h("slot", null)), h("div", { part: "footer", class: "bs-side-panel__footer" }, h("slot", { name: "footer" })))));
     }
     static get is() { return "bs-side-panel"; }
     static get encapsulation() { return "shadow"; }
@@ -294,6 +345,11 @@ export class BsSidePanel {
             }
         };
     }
+    static get states() {
+        return {
+            "closing": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "bsClose",

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

@@ -60,7 +60,7 @@ export class BsSkeleton {
             lines.push(h("span", { part: "line", class: { 'bs-skeleton__line': true, [`bs-skeleton__line--${this.variant}`]: true, 'bs-skeleton__line--short': isShortLast }, style: style }));
         }
         const hasLabel = !!this.label;
-        return (h("span", { key: 'e0351fc81dcf42831238b46015159672c5f05044', part: "container", class: { 'bs-skeleton': true, 'bs-skeleton--animated': this.animated, [`bs-skeleton--${this.variant}`]: true }, role: hasLabel ? 'status' : undefined, "aria-label": hasLabel ? this.label : undefined, "aria-hidden": hasLabel ? undefined : 'true' }, lines));
+        return (h("span", { key: 'cdaaa8a2de9a1552a900a1ef33e3a7259e57ed3e', part: "container", class: { 'bs-skeleton': true, 'bs-skeleton--animated': this.animated, [`bs-skeleton--${this.variant}`]: true }, role: hasLabel ? 'status' : undefined, "aria-label": hasLabel ? this.label : undefined, "aria-hidden": hasLabel ? undefined : 'true' }, lines));
     }
     static get is() { return "bs-skeleton"; }
     static get encapsulation() { return "shadow"; }

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: 'd9db9ea41a0bf6b19513967b97aace0dcf8441ad', class: rootClasses }, this.showLabel && (h("div", { key: 'cd526f47736d86f89ef498cfdef32a0e2d6eff41', class: "bs-slider__header" }, h("span", { key: 'f69780fc00ed0aa8fb91612646883a9a2594cdee', 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: 'b010c143ed9717fd2c5de226d8f069dbf6c4d6f8', class: "bs-slider__row" }, this.showLabel && (h("span", { key: 'dc880f89d866fb2f32bc5a0bb3213678e9ede851', part: "bound", class: "bs-slider__bound" }, this.min)), isRange ? this.renderRangeThumbs() : this.renderSingleThumb(), this.showLabel && (h("span", { key: 'f99450e8ff78789f88b6f4eafb31d48cb623d6d6', 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: 'b16a2868bd2de4cb2d1acc8e0f01ba6b2b249d07', part: "container", class: `bs-snackbar bs-snackbar--${this.variant}`, role: "status", "aria-live": this.variant === 'error' ? 'assertive' : 'polite' }, h("div", { key: 'cbd5c263b03734f7f43858a28d7b81abd529b06a', class: "bs-snackbar__content" }, h("span", { key: '8dec1eb35c2cbb9d611f84f49c0db993fb6c8d67', part: "icon", class: "bs-snackbar__icon", "aria-hidden": "true" }, this.loading ? h("span", { class: "bs-snackbar__spinner" }) : h(CheckCircleIcon, null)), h("span", { key: '6fada5eb6ce220e4a0c19e12afc238e04f094058', part: "message", class: "bs-snackbar__message" }, h("slot", { key: 'c13059e6ce29b13323f2498eb4228ad8976adedc' }))), h("div", { key: '43128f9b4faf428b3fa2b631aaf2ee6241d85028', class: "bs-snackbar__actions" }, this.actionLabel && (h("bs-button", { key: '99aa344e0e668a7867f64be05088d9ac0d509c97', part: "action", variant: this.actionVariant ?? ACTION_VARIANT[this.variant], size: "sm", onClick: this.onAction }, this.actionLabel)), !this.hideClose && (h("bs-icon-button", { key: '9ab854da28d9c5f2c3f4c001896d0bc311a6fa96', part: "close", variant: "subtle", size: "md", ariaLabel: "Dismiss", onClick: this.onDismiss }, h(CloseIcon, { key: '79d37f2641743f006e5a1fd6462e6998284c9c23' }))))));
+        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.css

@@ -14,6 +14,8 @@
 }
 
 .bs-source-link {
+  /* Containing block for the absolutely-positioned bs-ripple layer. */
+  position: relative;
   box-sizing: border-box;
   display: flex;
   align-items: center;

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

@@ -32,6 +32,7 @@ import { h } from "@stencil/core";
  * @prop --bs-source-link-icon-color - File icon and arrow color. Aliased to `--bs-icon-default`.
  * @prop --bs-source-link-dot-color - Separator dot between source and version. Aliased to
  *   `--bs-text-secondary`.
+ * @part ripple - The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
  */
 export class BsSourceLink {
     /** The cited document's filename. */
@@ -51,8 +52,9 @@ export class BsSourceLink {
     };
     render() {
         const inner = [
-            h("span", { key: '9572b79e4cd438c467f929176f8902add784daa9', class: "bs-source-link__left" }, h("span", { key: '4e78ee66c58ce90028f808c8dfe6e47073935dfb', class: "bs-source-link__filename-row" }, h("span", { key: '28fe6cb713250185200574cb84046dd81162d408', part: "icon", class: "bs-source-link__icon" }, h("slot", { key: '539a353101091a029b9c0b719c518e20b12c328b', name: "icon" }, h(FileTextIcon, { key: '165fd7898e00afc33aee871a5d9bea62af150d42' }))), h("p", { key: '2ed7dd64c0999eb1a9f776edc0cdf3663f7144f9', part: "filename", class: "bs-source-link__filename" }, this.fileName)), h("span", { key: '929373efd21a172ea8cf8364c60bf8fad750c0f0', class: "bs-source-link__meta" }, this.sourceName && (h("span", { key: '4ec488047359b61b875fdfb35b051fdaaea529dd', part: "source", class: "bs-source-link__source" }, this.sourceName)), this.sourceName && this.version && h("span", { key: '2db5112b0d0d5e1f1bad743f008bcd492a88bf24', class: "bs-source-link__dot", "aria-hidden": "true" }), this.version && (h("span", { key: '2ffbec44121787991c57b662a7ab3ea2b7eda848', part: "version", class: "bs-source-link__version" }, this.version)))),
-            h("span", { key: '4207fea42538d9da5139eb12f9441faf87555215', part: "arrow", class: "bs-source-link__arrow", "aria-hidden": "true" }, h(ArrowUpRightIcon, { key: '9ca2ac0f0ed7fc1b5f90ae7650620281b4a5b1ee' })),
+            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: '73a069aba17ae7ddd5e18e203801d367b017352f', 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: '087c596109a43266ec8d3ad9aa61cacee53c9694', part: "svg", class: "bs-spinner__svg", viewBox: "0 0 24 24", fill: "none", focusable: "false" }, h("circle", { key: '1de135213d827e2397815890d6606dfe908c10d7', class: "bs-spinner__track", cx: "12", cy: "12", r: "9", "stroke-width": "3" }), h("path", { key: 'c5a6f2689dfdc3e35fe253a20dab2133fc25d4c4', 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: '393f6696b4ee66188aba4bb9ddf3ab30b64d00e1', 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: '3dd99af43522ccafcafc9104fbed43e4e2f6380e', style: { '--bs-stack-gap-token': `var(--bs-spacing-${gap})` } }, h("slot", { key: 'b193f6ccb5f81420c67cf467c1163130b9e37a68', 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"; }