@brandsync/wc 1.2.0 → 1.4.0

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

@@ -0,0 +1,72 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../stories-utils";
+const types = ['determinate', 'indeterminate'];
+const sizes = ['small', 'medium', 'large'];
+const strokeWidths = [4, 8];
+const meta = {
+    title: 'Components/bs-progress/Circular',
+    parameters: { docs: { description: { component: componentDescription('bs-progress') } } },
+    render: args => html `
+    <bs-progress
+      type=${args.type}
+      size=${args.size}
+      stroke-width=${args.strokeWidth}
+      value=${args.value}
+      show-label=${args.showLabel}
+    ></bs-progress>
+  `,
+    argTypes: {
+        type: { control: { type: 'select' }, options: types, description: propDescription('bs-progress', 'type') },
+        size: { control: { type: 'select' }, options: sizes, description: propDescription('bs-progress', 'size') },
+        strokeWidth: {
+            control: { type: 'select' },
+            options: strokeWidths,
+            description: propDescription('bs-progress', 'stroke-width'),
+        },
+        value: { control: { type: 'range', min: 0, max: 100 }, description: propDescription('bs-progress', 'value') },
+        showLabel: { control: 'boolean', description: propDescription('bs-progress', 'show-label') },
+    },
+    args: {
+        type: 'determinate',
+        size: 'small',
+        strokeWidth: 4,
+        value: 50,
+        showLabel: true,
+    },
+};
+export default meta;
+export const Default = {};
+// One instance per size, side by side, at a fixed mid-range value.
+export const Sizes = {
+    name: 'Sizes',
+    render: () => html `
+    <div style="display: flex; align-items: flex-end; gap: 24px;">
+      ${sizes.map(size => html `<bs-progress size=${size} value="50"></bs-progress>`)}
+    </div>
+  `,
+};
+// One instance per stroke width, at a fixed size/value, to compare ring thickness directly.
+export const StrokeWidths = {
+    name: 'Stroke widths',
+    render: () => html `
+    <div style="display: flex; align-items: flex-end; gap: 24px;">
+      ${strokeWidths.map(strokeWidth => html `<bs-progress size="large" stroke-width=${strokeWidth} value="50"></bs-progress>`)}
+    </div>
+  `,
+};
+// A few sample values across the range, illustrating the arc sweep from empty to full.
+export const Values = {
+    name: 'Values',
+    render: () => html `
+    <div style="display: flex; align-items: flex-end; gap: 24px;">
+      ${[0, 25, 50, 75, 100].map(value => html `<bs-progress value=${value}></bs-progress>`)}
+    </div>
+  `,
+};
+export const WithoutLabel = {
+    name: 'Without label',
+    args: { showLabel: false },
+};
+export const Indeterminate = {
+    args: { type: 'indeterminate' },
+};

package/dist/collection/components/bs-progress-linear/bs-progress-linear.cmp.test.js

@@ -0,0 +1,92 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-progress-linear', () => {
+    describe('size/type combinations', () => {
+        ['small', 'large'].forEach(size => {
+            it(`renders size="${size}" type="determinate"`, async () => {
+                const { root } = await render(h("bs-progress-linear", { size: size, type: "determinate", value: 40 }));
+                expect(root.shadowRoot.querySelector(`.bs-progress-linear__track--${size}`)).not.toBeNull();
+                expect(root.shadowRoot.querySelector('[part="track"]')).not.toBeNull();
+                expect(root.shadowRoot.querySelector('[part="fill"]')).not.toBeNull();
+            });
+            it(`renders size="${size}" type="indeterminate"`, async () => {
+                const { root } = await render(h("bs-progress-linear", { size: size, type: "indeterminate" }));
+                expect(root.shadowRoot.querySelector('.bs-progress-linear__fill--indeterminate')).not.toBeNull();
+                expect(root.shadowRoot.querySelector('[part="fill"]')).not.toBeNull();
+            });
+        });
+    });
+    describe('fill width', () => {
+        [0, 50, 100].forEach(value => {
+            it(`sets fill width to ${value}% for value=${value}`, async () => {
+                const { root } = await render(h("bs-progress-linear", { value: value }));
+                const fill = root.shadowRoot.querySelector('[part="fill"]');
+                expect(fill.style.width).toBe(`${value}%`);
+            });
+        });
+        it('produces a larger width for a larger value', async () => {
+            const { root: rootLow } = await render(h("bs-progress-linear", { value: 10 }));
+            const { root: rootHigh } = await render(h("bs-progress-linear", { value: 90 }));
+            const lowFill = rootLow.shadowRoot.querySelector('[part="fill"]');
+            const highFill = rootHigh.shadowRoot.querySelector('[part="fill"]');
+            expect(parseFloat(highFill.style.width)).toBeGreaterThan(parseFloat(lowFill.style.width));
+        });
+    });
+    describe('value clamping', () => {
+        it('clamps a value above 100 down to 100', async () => {
+            const { root } = await render(h("bs-progress-linear", { value: 150 }));
+            const fill = root.shadowRoot.querySelector('[part="fill"]');
+            expect(fill.style.width).toBe('100%');
+            const track = root.shadowRoot.querySelector('[part="track"]');
+            expect(track).toEqualAttribute('aria-valuenow', '100');
+        });
+        it('clamps a negative value up to 0', async () => {
+            const { root } = await render(h("bs-progress-linear", { value: -10 }));
+            const fill = root.shadowRoot.querySelector('[part="fill"]');
+            expect(fill.style.width).toBe('0%');
+            const track = root.shadowRoot.querySelector('[part="track"]');
+            expect(track).toEqualAttribute('aria-valuenow', '0');
+        });
+    });
+    describe('label', () => {
+        it('renders slotted content when showLabel is true (default)', async () => {
+            const { root } = await render(h("bs-progress-linear", { value: 42 }, "Uploading..."));
+            const label = root.shadowRoot.querySelector('[part="label"]');
+            expect(label).not.toBeNull();
+            // `label.textContent` only reflects a <slot>'s own fallback content, not its assigned
+            // (projected) nodes -- the projected text lives on the host itself.
+            expect(root.textContent.trim()).toBe('Uploading...');
+        });
+        it('omits the label when showLabel is false', async () => {
+            const { root } = await render(h("bs-progress-linear", { value: 42, showLabel: false }, "Uploading..."));
+            expect(root.shadowRoot.querySelector('[part="label"]')).toBeNull();
+        });
+        it('omits the label when showLabel is true but there is no slotted content', async () => {
+            const { root } = await render(h("bs-progress-linear", { value: 42 }));
+            expect(root.shadowRoot.querySelector('[part="label"]')).toBeNull();
+        });
+        it('omits the label when slotted content is only whitespace', async () => {
+            const { root } = await render(h("bs-progress-linear", { value: 42 }, " "));
+            expect(root.shadowRoot.querySelector('[part="label"]')).toBeNull();
+        });
+    });
+    describe('aria attributes', () => {
+        it('sets aria-valuemin/max/now for determinate', async () => {
+            const { root } = await render(h("bs-progress-linear", { type: "determinate", value: 65 }));
+            const track = root.shadowRoot.querySelector('[part="track"]');
+            expect(track).toEqualAttribute('role', 'progressbar');
+            expect(track).toEqualAttribute('aria-valuemin', '0');
+            expect(track).toEqualAttribute('aria-valuemax', '100');
+            expect(track).toEqualAttribute('aria-valuenow', '65');
+            expect(track.hasAttribute('aria-busy')).toBe(false);
+        });
+        it('omits aria-valuenow and sets aria-busy for indeterminate', async () => {
+            const { root } = await render(h("bs-progress-linear", { type: "indeterminate" }));
+            const track = root.shadowRoot.querySelector('[part="track"]');
+            expect(track).toEqualAttribute('role', 'progressbar');
+            expect(track.hasAttribute('aria-valuenow')).toBe(false);
+            expect(track.hasAttribute('aria-valuemin')).toBe(false);
+            expect(track.hasAttribute('aria-valuemax')).toBe(false);
+            expect(track).toEqualAttribute('aria-busy', 'true');
+        });
+    });
+});

package/dist/collection/components/bs-progress-linear/bs-progress-linear.css

@@ -0,0 +1,108 @@
+/**
+ * @prop --bs-progress-linear-gap: Gap between the bar and the label. Aliased to --bs-spacing-100.
+ * @prop --bs-progress-linear-track: Track bar background color. Aliased to --bs-surface-container
+ *   (matches the Figma spec's `--color/surface/container` token exactly).
+ * @prop --bs-progress-linear-fill: Determinate fill / indeterminate comet color. Aliased to
+ *   --bs-color-primary-default (the same brand-blue accent bs-progress's arc and bs-button's
+ *   primary variant already use).
+ * @prop --bs-progress-linear-radius: Track/fill border-radius (full pill). A fixed 120px, matching
+ *   the Figma spec's "rounded-full" treatment.
+ * @prop --bs-progress-linear-height-sm: Bar height, size="small". Fixed at 4px per the Figma spec.
+ * @prop --bs-progress-linear-height-lg: Bar height, size="large". Fixed at 8px per the Figma spec.
+ * @prop --bs-progress-linear-label-color: Label text color. Aliased to --bs-text-default.
+ * @prop --bs-progress-linear-label-font-size: Label font size (body/md). Aliased to --bs-fontsize-body-md.
+ * @prop --bs-progress-linear-label-line-height: Label line height (body/md). Aliased to --bs-line-height-body-md.
+ * @prop --bs-progress-linear-transition-duration: Determinate fill width transition. Aliased to
+ *   --bs-duration-default if defined by brandsync-tokens, otherwise a plain 0.3s fallback.
+ * @prop --bs-progress-linear-slide-duration: Indeterminate comet slide duration. Aliased to
+ *   --bs-duration-slower if defined by brandsync-tokens, otherwise a plain 1.6s fallback.
+ */
+:host {
+  display: flex;
+
+  --bs-progress-linear-gap: var(--bs-spacing-100);
+  --bs-progress-linear-track: var(--bs-surface-container);
+  --bs-progress-linear-fill: var(--bs-color-primary-default);
+  --bs-progress-linear-radius: 120px;
+  --bs-progress-linear-height-sm: 4px;
+  --bs-progress-linear-height-lg: 8px;
+  --bs-progress-linear-label-color: var(--bs-text-default);
+  --bs-progress-linear-label-font-size: var(--bs-fontsize-body-md);
+  --bs-progress-linear-label-line-height: var(--bs-line-height-body-md);
+  --bs-progress-linear-transition-duration: 0.3s;
+  --bs-progress-linear-slide-duration: 1.6s;
+}
+
+.bs-progress-linear {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: var(--bs-progress-linear-gap);
+  font-family: inherit;
+}
+
+.bs-progress-linear__track {
+  position: relative;
+  width: 100%;
+  border-radius: var(--bs-progress-linear-radius);
+  background: var(--bs-progress-linear-track);
+  overflow: hidden;
+}
+
+.bs-progress-linear__track--small {
+  height: var(--bs-progress-linear-height-sm);
+}
+
+.bs-progress-linear__track--large {
+  height: var(--bs-progress-linear-height-lg);
+}
+
+.bs-progress-linear__fill {
+  height: 100%;
+  border-radius: var(--bs-progress-linear-radius);
+  background: var(--bs-progress-linear-fill);
+  transition: width var(--bs-progress-linear-transition-duration) ease;
+}
+
+/* Indeterminate: Figma's bar is a soft "comet" gradient segment (transparent -> solid color ->
+   transparent) sliding across the track's full width, not a flat-colored partial fill -- the same
+   fade concept as bs-progress's indeterminate ring's conic-gradient comet tail, but along a
+   straight line. A fixed-width gradient band is animated via `transform: translateX(...)` from
+   fully off-screen left to fully off-screen right, looping continuously. */
+.bs-progress-linear__fill--indeterminate {
+  position: absolute;
+  top: 0;
+  left: 0;
+  /* Figma's static snapshot (left-9.01%/right-66.58% of the track) puts the comet band at ~24% of
+     the track's width -- matching that proportion here rather than the wider 40% guess this was
+     originally built with. */
+  width: 24%;
+  min-width: 80px;
+  background: linear-gradient(90deg, transparent 0%, var(--bs-progress-linear-fill) 50%, transparent 100%);
+  animation: bs-progress-linear-slide var(--bs-progress-linear-slide-duration) ease-in-out infinite;
+}
+
+@keyframes bs-progress-linear-slide {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(250%);
+  }
+}
+
+/* Reduced motion: freezing the slide entirely would remove the only visual signal that work is
+   still in progress (indeterminate has no percentage to fall back on), so this slows the slide to
+   a much slower loop instead of stopping it -- still obviously "in progress" without being
+   motion-sickness-inducing. Same intent/rationale as bs-progress's indeterminate ring. */
+@media (prefers-reduced-motion: reduce) {
+  .bs-progress-linear__fill--indeterminate {
+    animation-duration: calc(var(--bs-progress-linear-slide-duration) * 4);
+  }
+}
+
+.bs-progress-linear__label {
+  color: var(--bs-progress-linear-label-color);
+  font-size: var(--bs-progress-linear-label-font-size);
+  line-height: calc(var(--bs-progress-linear-label-line-height) * 1px);
+}

package/dist/collection/components/bs-progress-linear/bs-progress-linear.js

@@ -0,0 +1,192 @@
+import { h } from "@stencil/core";
+/**
+ * A linear (horizontal) progress indicator -- either a static bar showing a percentage fill
+ * (`type="determinate"`) or a continuously sliding bar signaling in-progress work with no known
+ * completion percentage (`type="indeterminate"`).
+ *
+ * ## When to use
+ * - Showing the progress of a task with a known, quantifiable completion percentage (`determinate`),
+ *   e.g. a file upload.
+ * - Signaling that work is happening in the background with no meaningful percentage to report
+ *   (`indeterminate`), e.g. while waiting on a network response.
+ *
+ * ## When not to use
+ * - For a compact, ring-shaped progress indicator -- use `bs-progress` (circular) instead.
+ * - For a percentage that's better expressed as plain text, without the reserved space and visual
+ *   weight of a bar.
+ *
+ * @slot - Free-form label content rendered below the bar (e.g. "Uploading..."), gated by
+ *   `showLabel`. Unlike `bs-progress`'s label, this is not a computed `${value}%` string -- it's
+ *   consumer-supplied content, per the Figma spec's free-text "Label" placeholder.
+ * @part container - The outer wrapper (bar + optional label).
+ * @part track - The background track bar.
+ * @part fill - The colored progress/sliding fill bar.
+ * @part label - The label wrapper (only rendered when `showLabel` is true and slotted content exists).
+ */
+export class BsProgressLinear {
+    el;
+    /** Whether the default slot currently has any real (non-whitespace) content -- the label
+     * wrapper is only rendered when `showLabel` is true AND slotted content exists, so an empty
+     * label never reserves visual space/line-height for nothing. Recomputed on `slotchange`. */
+    hasLabelContent = false;
+    /** `determinate` renders a static fill reflecting `value`; `indeterminate` renders a
+     * continuously sliding gradient bar and ignores `value`. */
+    type = 'determinate';
+    /** Bar height: `small` (4px) or `large` (8px). */
+    size = 'large';
+    /** Progress percentage, `0`-`100`. Only meaningful for `type="determinate"` -- ignored (and
+     * never rendered) for `type="indeterminate"`. Out-of-range values are clamped defensively. */
+    value = 0;
+    /** Shows the slotted label below the bar. When `false`, or when no content is slotted, the
+     * label wrapper isn't rendered at all. Defaults to `true`. */
+    showLabel = true;
+    get clampedValue() {
+        return Math.min(100, Math.max(0, this.value));
+    }
+    render() {
+        const isDeterminate = this.type === 'determinate';
+        const value = this.clampedValue;
+        return (h("div", { key: '5195d1db1d788c4ad70913aff780ae966e2ae4c7', part: "container", class: "bs-progress-linear" }, h("div", { key: '518f1a552262d455b085acae72388bdcb9437624', part: "track", class: `bs-progress-linear__track bs-progress-linear__track--${this.size}`, role: "progressbar", "aria-valuemin": isDeterminate ? '0' : undefined, "aria-valuemax": isDeterminate ? '100' : undefined, "aria-valuenow": isDeterminate ? String(value) : undefined, "aria-busy": isDeterminate ? undefined : 'true' }, isDeterminate ? (h("div", { part: "fill", class: "bs-progress-linear__fill", style: { width: `${value}%` } })) : (
+        // Figma's indeterminate bar is a soft "comet" gradient segment (transparent -> blue ->
+        // transparent) sliding left-to-right across the track's full width in a loop -- the
+        // same fade concept as bs-progress's indeterminate ring's conic-gradient comet tail,
+        // but along a straight line via a linear-gradient + `transform: translateX(...)`
+        // keyframe animation instead of a rotating conic-gradient.
+        h("div", { part: "fill", class: "bs-progress-linear__fill bs-progress-linear__fill--indeterminate" }))), this.showLabel && this.hasLabelContent && (h("span", { key: '7f7fc5eaf10993bdc7b7f0033a483a16b8b33a56', part: "label", class: "bs-progress-linear__label" }, h("slot", { key: '7eab67f682d84fe4808052b5f5eeb5701075af11' })))));
+    }
+    // The default slot's assigned content lives in the host's light DOM regardless of whether a
+    // <slot> is currently rendered in the shadow tree, so this can be computed directly from the
+    // host's childNodes -- no need to render an always-present hidden <slot> just to observe it.
+    componentWillLoad() {
+        this.updateLabelVisibility();
+        this.mutationObserver = new MutationObserver(() => this.updateLabelVisibility());
+        this.mutationObserver.observe(this.el, { childList: true, characterData: true, subtree: true });
+    }
+    disconnectedCallback() {
+        this.mutationObserver?.disconnect();
+    }
+    mutationObserver;
+    updateLabelVisibility() {
+        this.hasLabelContent = Array.from(this.el.childNodes).some(node => {
+            if (node.nodeType === Node.TEXT_NODE)
+                return (node.textContent ?? '').trim().length > 0;
+            if (node.nodeType === Node.ELEMENT_NODE)
+                return true;
+            return false;
+        });
+    }
+    static get is() { return "bs-progress-linear"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-progress-linear.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-progress-linear.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsProgressLinearType",
+                    "resolved": "\"determinate\" | \"indeterminate\"",
+                    "references": {
+                        "BsProgressLinearType": {
+                            "location": "local",
+                            "path": "/home/runner/work/Brandsync-webcomponents/Brandsync-webcomponents/packages/wc/src/components/bs-progress-linear/bs-progress-linear.tsx",
+                            "id": "src/components/bs-progress-linear/bs-progress-linear.tsx::BsProgressLinearType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`determinate` renders a static fill reflecting `value`; `indeterminate` renders a\ncontinuously sliding gradient bar and ignores `value`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'determinate'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsProgressLinearSize",
+                    "resolved": "\"large\" | \"small\"",
+                    "references": {
+                        "BsProgressLinearSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/Brandsync-webcomponents/Brandsync-webcomponents/packages/wc/src/components/bs-progress-linear/bs-progress-linear.tsx",
+                            "id": "src/components/bs-progress-linear/bs-progress-linear.tsx::BsProgressLinearSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Bar height: `small` (4px) or `large` (8px)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'large'"
+            },
+            "value": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Progress percentage, `0`-`100`. Only meaningful for `type=\"determinate\"` -- ignored (and\nnever rendered) for `type=\"indeterminate\"`. Out-of-range values are clamped defensively."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "0"
+            },
+            "showLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows the slotted label below the bar. When `false`, or when no content is slotted, the\nlabel wrapper isn't rendered at all. Defaults to `true`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-label",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasLabelContent": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/bs-progress-linear/bs-progress-linear.stories.js

@@ -0,0 +1,66 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../stories-utils";
+const types = ['determinate', 'indeterminate'];
+const sizes = ['small', 'large'];
+const meta = {
+    title: 'Components/bs-progress/Linear',
+    parameters: { docs: { description: { component: componentDescription('bs-progress-linear') } } },
+    render: args => html `
+    <bs-progress-linear type=${args.type} size=${args.size} value=${args.value} show-label=${args.showLabel}>
+      ${args.label}
+    </bs-progress-linear>
+  `,
+    argTypes: {
+        type: { control: { type: 'select' }, options: types, description: propDescription('bs-progress-linear', 'type') },
+        size: { control: { type: 'select' }, options: sizes, description: propDescription('bs-progress-linear', 'size') },
+        value: { control: { type: 'range', min: 0, max: 100 }, description: propDescription('bs-progress-linear', 'value') },
+        showLabel: { control: 'boolean', description: propDescription('bs-progress-linear', 'show-label') },
+        label: { control: 'text', description: 'Slotted label content (default slot).' },
+    },
+    args: {
+        type: 'determinate',
+        size: 'large',
+        value: 40,
+        showLabel: true,
+        label: 'Label',
+    },
+};
+export default meta;
+export const Default = {};
+// One instance per size, stacked, at a fixed mid-range value.
+export const Sizes = {
+    name: 'Sizes',
+    render: () => html `
+    <div style="display: flex; flex-direction: column; gap: 24px; width: 320px;">
+      ${sizes.map(size => html `<bs-progress-linear size=${size} value="40">Label</bs-progress-linear>`)}
+    </div>
+  `,
+};
+// A few sample values across the range, illustrating the fill from empty to full.
+export const Values = {
+    name: 'Values',
+    render: () => html `
+    <div style="display: flex; flex-direction: column; gap: 24px; width: 320px;">
+      ${[0, 25, 50, 75, 100].map(value => html `<bs-progress-linear value=${value}>${value}%</bs-progress-linear>`)}
+    </div>
+  `,
+};
+export const WithoutLabel = {
+    name: 'Without label',
+    args: { showLabel: false },
+    render: args => html `
+    <div style="width: 320px;">
+      <bs-progress-linear type=${args.type} size=${args.size} value=${args.value} show-label=${args.showLabel}>
+        ${args.label}
+      </bs-progress-linear>
+    </div>
+  `,
+};
+export const Indeterminate = {
+    args: { type: 'indeterminate' },
+    render: args => html `
+    <div style="width: 320px;">
+      <bs-progress-linear type=${args.type} size=${args.size} show-label=${args.showLabel}> ${args.label} </bs-progress-linear>
+    </div>
+  `,
+};

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

@@ -51,7 +51,7 @@ export class BsRadio {
         }
     };
     render() {
-        return (h("label", { key: 'd2b90d388d4a165490c9e97f4716dc7b07a97d48', class: `bs-radio ${this.disabled ? 'bs-radio--disabled' : ''}` }, h("input", { key: 'a748a2fbcf810332d4046c4daec9c4a138ee127d', class: "bs-radio__input", type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, onChange: this.onChange }), h("span", { key: 'f4aa8ca7333a598d921cad22c2ceb9e44745dbf4', class: "bs-radio__hit-area" }, h("span", { key: 'ecc93fe3be2284e86d2e8a8539edad55d40ce176', class: "bs-radio__state-layer" }, h("span", { key: 'e0f23810c8a7608654a75718aff71c468c24aecf', part: "circle", class: `bs-radio__circle ${this.checked ? 'bs-radio__circle--selected' : ''}` }, this.checked && h("span", { key: 'bb25cca2041b6c8a8978ee81d3c745530a1b660c', part: "dot", class: "bs-radio__dot" })))), h("span", { key: 'f8acfe4cac4182d922c63d7d9e96241c3eefabe9', part: "label", class: "bs-radio__label" }, h("slot", { key: '4b50c3944202d40f268c1e55bea8804273339e51' }))));
+        return (h("label", { key: 'dcf048ee4d4779e54bbefafffe624af7f4714b51', class: `bs-radio ${this.disabled ? 'bs-radio--disabled' : ''}` }, h("input", { key: 'b79b3a21bddfb3a043a3c509001b1be62ae260c7', class: "bs-radio__input", type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, onChange: this.onChange }), h("span", { key: 'fea39784ffd4e99990fe217f3a6d0fbfd33fb999', class: "bs-radio__hit-area" }, h("span", { key: '30063338cf704559bfe141ba6aed997a30db00e1', class: "bs-radio__state-layer" }, h("span", { key: '528a36ac263b7711a8147306074679f53d48afc6', part: "circle", class: `bs-radio__circle ${this.checked ? 'bs-radio__circle--selected' : ''}` }, this.checked && h("span", { key: '56a4dbed5c8ba67446b2f790e47fc68374676e94', part: "dot", class: "bs-radio__dot" })))), h("span", { key: '018d3fe6d395d9dc571806f47dd4202a28590203', part: "label", class: "bs-radio__label" }, h("slot", { key: '35b436c2b3ccc1de215b1a6613d3351f030f9134' }))));
     }
     static get is() { return "bs-radio"; }
     static get encapsulation() { return "shadow"; }

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

@@ -199,7 +199,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: 'e4647158959bb507711a1d9872e68f64d5f7bd34', class: rootClasses }, this.showLabel && (h("div", { key: 'eb5d67b8717cc627b63a17f85471e757d35cec85', class: "bs-slider__header" }, h("span", { key: '48f6184206774111a5beb1869857020d7008f013', 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 ?? 'Start value'), h("span", { class: "bs-slider__separator" }, "\u2013"), this.renderPercentField(this.percent(this.effectiveValueEnd), this.onEndPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} end` : 'End value'))) : (this.renderPercentField(this.percent(this.value), this.onPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} value` : 'Value')))), h("div", { key: '1ee4796e51f2d29b1b5bad812d81f037d1d2d29f', class: "bs-slider__row" }, this.showLabel && (h("span", { key: '4bfdfd86f9c5ae5c2f8ca08c0758be9fce483056', part: "bound", class: "bs-slider__bound" }, this.min)), isRange ? this.renderRangeThumbs() : this.renderSingleThumb(), this.showLabel && (h("span", { key: '06ee3063570c858bcdf49960b9021a301e56288e', part: "bound", class: "bs-slider__bound" }, this.max)))));
+        return (h("div", { key: 'ddb7ca5769b3d59ef372b95b23fd5cc656f4c425', class: rootClasses }, this.showLabel && (h("div", { key: '8a5d6639e1d4affb8efb874727eae3361eeac8e5', class: "bs-slider__header" }, h("span", { key: '41a26138a837cb6a976d23162443825c8b3ab7ff', 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 ?? 'Start value'), h("span", { class: "bs-slider__separator" }, "\u2013"), this.renderPercentField(this.percent(this.effectiveValueEnd), this.onEndPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} end` : 'End value'))) : (this.renderPercentField(this.percent(this.value), this.onPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} value` : 'Value')))), h("div", { key: 'c8275425323bb3ecdffeb7455572d60379be8fe3', class: "bs-slider__row" }, this.showLabel && (h("span", { key: 'aaaaa6d800478963f615bad21af88bb1ffddfa58', part: "bound", class: "bs-slider__bound" }, this.min)), isRange ? this.renderRangeThumbs() : this.renderSingleThumb(), this.showLabel && (h("span", { key: '23b49ac1dc4968a1b3a6cd0706283818c5ebe234', 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

@@ -53,7 +53,10 @@ describe('bs-snackbar', () => {
             const { root } = await render(h("bs-snackbar", null, "Message"));
             const close = root.shadowRoot.querySelector('[part="close"]');
             expect(close).not.toBeNull();
-            expect(close).toEqualAttribute('aria-label', 'Dismiss');
+            // bs-icon-button sets aria-label on its OWN inner <button> (inside its own shadow DOM), not
+            // on its host element -- so the accessible name lives one shadow root deeper than `close` itself.
+            const innerButton = close.shadowRoot.querySelector('button');
+            expect(innerButton).toEqualAttribute('aria-label', 'Dismiss');
         });
         it('emits bsDismiss when the close button is clicked', async () => {
             const { root, spyOnEvent } = await render(h("bs-snackbar", null, "Message"));