@brandsync/wc 1.6.0 → 1.8.0

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

@@ -45,6 +45,11 @@ export class BsProgress {
      * `indeterminate` never shows a label regardless of this prop, since there's no percentage to
      * show. Defaults to `true`. */
     showLabel = true;
+    /** Accessible name for the progress bar (e.g. "Uploading report"). Required for assistive tech --
+     * a `role="progressbar"` with no name is an axe-core `aria-progressbar-name` violation. Setting
+     * `aria-label` on the host doesn't reach the inner element across the shadow boundary, so this
+     * prop binds it directly -- same pattern as `bs-button`'s `ariaLabel`. */
+    ariaLabel = null;
     get clampedValue() {
         return Math.min(100, Math.max(0, this.value));
     }
@@ -64,7 +69,7 @@ export class BsProgress {
         const isDeterminate = this.type === 'determinate';
         const value = this.clampedValue;
         const dashOffset = circumference * (1 - value / 100);
-        return (h("div", { key: 'be12c5ee854fc0d82e66719458355543627f28b5', part: "container", class: "bs-progress" }, h("div", { key: '59eb972d0aeb33feea5ef4e8f4fa4eef99f7fcde', class: "bs-progress__box", style: { width: `${diameter}px`, height: `${diameter}px` }, 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("svg", { class: "bs-progress__ring", width: diameter, height: diameter, viewBox: `0 0 ${diameter} ${diameter}` }, h("circle", { part: "track", class: "bs-progress__track", cx: diameter / 2, cy: diameter / 2, r: radius, "stroke-width": this.strokeWidth, fill: "none" }), h("circle", { part: "arc", class: "bs-progress__arc", cx: diameter / 2, cy: diameter / 2, r: radius, "stroke-width": this.strokeWidth, fill: "none", "stroke-linecap": "round", "stroke-dasharray": circumference, "stroke-dashoffset": dashOffset }))) : (
+        return (h("div", { key: 'add8dfafdbee4eaa9712c6e2ba6ddff6f8f6c47f', part: "container", class: "bs-progress" }, h("div", { key: 'fd89c73aa247fc3770187a45dc4681857e257d4e', class: "bs-progress__box", style: { width: `${diameter}px`, height: `${diameter}px` }, role: "progressbar", "aria-label": this.ariaLabel, "aria-valuemin": isDeterminate ? '0' : undefined, "aria-valuemax": isDeterminate ? '100' : undefined, "aria-valuenow": isDeterminate ? String(value) : undefined, "aria-busy": isDeterminate ? undefined : 'true' }, isDeterminate ? (h("svg", { class: "bs-progress__ring", width: diameter, height: diameter, viewBox: `0 0 ${diameter} ${diameter}` }, h("circle", { part: "track", class: "bs-progress__track", cx: diameter / 2, cy: diameter / 2, r: radius, "stroke-width": this.strokeWidth, fill: "none" }), h("circle", { part: "arc", class: "bs-progress__arc", cx: diameter / 2, cy: diameter / 2, r: radius, "stroke-width": this.strokeWidth, fill: "none", "stroke-linecap": "round", "stroke-dasharray": circumference, "stroke-dashoffset": dashOffset }))) : (
         // Figma's indeterminate ring is a fading "comet tail" (transparent -> solid color),
         // not a flat-colored partial arc -- SVG has no angular/conic gradient primitive, so a
         // CSS conic-gradient (color varying by angle) + a radial-gradient mask (carving the
@@ -73,7 +78,7 @@ export class BsProgress {
         h("div", { part: "arc", class: "bs-progress__spinner", style: {
                 '--bs-progress-spinner-stroke-width': `${this.strokeWidth}px`,
                 '--bs-progress-spinner-sweep': `${INDETERMINATE_SWEEP_DEGREES}deg`,
-            } }))), isDeterminate && this.showLabel && (h("span", { key: 'dab01ef700c872174a1f0ff9eff0ef9b534f6f89', part: "label", class: `bs-progress__label bs-progress__label--${this.size}` }, value, "%"))));
+            } }))), isDeterminate && this.showLabel && (h("span", { key: '9c86dc195204f28c06e05bf09f823241bf9f3a86', part: "label", class: `bs-progress__label bs-progress__label--${this.size}` }, value, "%"))));
     }
     static get is() { return "bs-progress"; }
     static get encapsulation() { return "shadow"; }
@@ -206,6 +211,26 @@ export class BsProgress {
                 "reflect": false,
                 "attribute": "show-label",
                 "defaultValue": "true"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name for the progress bar (e.g. \"Uploading report\"). Required for assistive tech --\na `role=\"progressbar\"` with no name is an axe-core `aria-progressbar-name` violation. Setting\n`aria-label` on the host doesn't reach the inner element across the shadow boundary, so this\nprop binds it directly -- same pattern as `bs-button`'s `ariaLabel`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "null"
             }
         };
     }

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

@@ -40,19 +40,24 @@ export class BsProgressLinear {
     /** 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;
+    /** Accessible name for the progress bar (e.g. "Uploading report"). Required for assistive tech --
+     * a `role="progressbar"` with no name is an axe-core `aria-progressbar-name` violation. Setting
+     * `aria-label` on the host doesn't reach the inner element across the shadow boundary, so this
+     * prop binds it directly -- same pattern as `bs-button`'s `ariaLabel`. */
+    ariaLabel = null;
     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: 'a740b860487e2f163fe7103191bd34b7fb1633ad', part: "container", class: "bs-progress-linear" }, h("div", { key: 'a1400ddeb695c45edaff4a6501589e191237c0aa', 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}%` } })) : (
+        return (h("div", { key: '279dbb0cd17b9584b500570d58cc09bd91e8a0d7', part: "container", class: "bs-progress-linear" }, h("div", { key: '9299c229184d172f743fb7fb0dce2a9c55a4496f', part: "track", class: `bs-progress-linear__track bs-progress-linear__track--${this.size}`, role: "progressbar", "aria-label": this.ariaLabel, "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: '30ea4feeb5fa09cea28a89b515366b8d08fe6425', part: "label", class: "bs-progress-linear__label" }, h("slot", { key: 'b361ed81b85f3cd76ccb885ab1a0de5ec10b97b9' })))));
+        h("div", { part: "fill", class: "bs-progress-linear__fill bs-progress-linear__fill--indeterminate" }))), this.showLabel && this.hasLabelContent && (h("span", { key: '51a75cae90630fec1d8757d483c239a534385aa7', part: "label", class: "bs-progress-linear__label" }, h("slot", { key: '7e6639ff4f7219cbb3fa09d7c7570268534530b4' })))));
     }
     // 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
@@ -180,6 +185,26 @@ export class BsProgressLinear {
                 "reflect": false,
                 "attribute": "show-label",
                 "defaultValue": "true"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name for the progress bar (e.g. \"Uploading report\"). Required for assistive tech --\na `role=\"progressbar\"` with no name is an axe-core `aria-progressbar-name` violation. Setting\n`aria-label` on the host doesn't reach the inner element across the shadow boundary, so this\nprop binds it directly -- same pattern as `bs-button`'s `ariaLabel`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "null"
             }
         };
     }

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

@@ -30,14 +30,9 @@ describe('bs-radio', () => {
         expect(input).toEqualAttribute('name', 'fruit');
         expect(input).toEqualAttribute('value', 'apple');
     });
-    // NOTE: each <bs-radio> has its own shadow root, so its native <input> lives in its own separate
-    // DOM tree. Per the HTML spec, a "radio button group" is scoped to a single tree -- shadow DOM
-    // boundaries mean same-`name` inputs in *different* <bs-radio> instances are NOT part of the same
-    // native radio group, so clicking one does not natively uncheck another. This is a real, tested
-    // limitation of composing native <input type="radio"> inside separate shadow roots, not a bug in
-    // this component -- see bs-radio.mdx's Accessibility section for the documented gap. Within a
-    // single instance's own shadow root the native input still behaves like a normal radio input.
-    it('same-name bs-radio instances do NOT natively uncheck each other, since each lives in its own shadow root', async () => {
+    // Native same-name grouping can't cross each <bs-radio>'s own shadow root, so the component
+    // implements mutual exclusion itself (see bs-radio.tsx's `name` prop doc).
+    it('same-name bs-radio instances uncheck each other', async () => {
         const { root, waitForChanges } = await render(h("div", null, h("bs-radio", { name: "fruit", value: "apple" }), h("bs-radio", { name: "fruit", value: "banana" })));
         const [first, second] = Array.from(root.querySelectorAll('bs-radio'));
         const firstInput = first.shadowRoot.querySelector('input');
@@ -48,8 +43,7 @@ describe('bs-radio', () => {
         secondInput.click();
         await waitForChanges();
         expect(secondInput.checked).toBe(true);
-        // Real (shadow-DOM-scoped) native behavior: the first input is untouched, not unchecked.
-        expect(firstInput.checked).toBe(true);
+        expect(firstInput.checked).toBe(false);
     });
     describe('disabled', () => {
         it('sets the disabled attribute on the native input', async () => {

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

@@ -34,7 +34,7 @@
 .bs-radio__input {
   position: absolute;
   top: 0;
-  left: 0;
+  inset-inline-start: 0;
   width: 100%;
   height: 100%;
   margin: 0;
@@ -162,3 +162,9 @@
 .bs-radio--disabled .bs-radio__label {
   color: var(--bs-radio-label-disabled);
 }
+
+/* Windows High Contrast: ring and dot in system colors. */
+@media (forced-colors: active) {
+  .bs-radio__circle { border: 2px solid ButtonText; forced-color-adjust: none; background: Canvas; }
+  .bs-radio__dot { background: Highlight; }
+}

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

@@ -22,13 +22,10 @@ import { h } from "@stencil/core";
 export class BsRadio {
     el;
     /** The native radio input's `name` attribute. Passed straight through to the native input inside.
-     * NOTE: because each `bs-radio` renders its own shadow root, native `<input type="radio">`
-     * mutual-exclusion grouping (which the HTML spec scopes to a single DOM tree) does NOT extend
-     * across separate `bs-radio` instances sharing the same `name` -- checking one will not natively
-     * uncheck another. Within a single instance this still behaves like a normal radio input. See
-     * bs-radio.mdx's Accessibility section for this known gap; consumers building a group currently
-     * need to manage mutual exclusivity themselves (e.g. via `bsChange`) until a `bs-radio-group`
-     * wrapper exists. */
+     * Also the group key: `bs-radio` elements sharing a `name` within the same root (document or
+     * shadow root) behave as one radio group -- checking one unchecks the others, arrow keys move
+     * between them, and only one is in the tab order. Native grouping can't cross each radio's own
+     * shadow root, so this component implements it itself. */
     name;
     /** The native radio input's `value` attribute -- read from `event.target.value`, or used when
      * wiring the group up to a form. */
@@ -40,9 +37,65 @@ export class BsRadio {
     disabled = false;
     /** Emitted with this radio's own `value` when it becomes checked via user interaction. Since
      * native same-`name` grouping doesn't cross shadow-root boundaries (see the `name` prop's doc),
-     * a consumer wiring up a group of `bs-radio`s must itself set `checked = false` on the others in
-     * response to this event -- there's no automatic un-checking to rely on here. */
+     * a consumer wiring up a group of `bs-radio`s does not need to un-check the others itself. */
     bsChange;
+    internals;
+    initialChecked = false;
+    /** Whether any radio in this group is checked -- drives roving tabindex (an unchecked radio is
+     * only tabbable while nothing in its group is checked). */
+    groupHasChecked = false;
+    /** Other `bs-radio`s sharing this one's `name` within the same root, in DOM order (including
+     * this one). */
+    groupMembers() {
+        if (!this.name)
+            return [this.el];
+        const root = this.el.getRootNode();
+        return Array.from(root.querySelectorAll('bs-radio')).filter(r => r.name === this.name);
+    }
+    onCheckedChange() {
+        this.internals?.setFormValue?.(this.checked ? this.value ?? 'on' : null);
+        if (this.checked) {
+            this.groupMembers().forEach(r => {
+                if (r !== this.el && r.checked)
+                    r.checked = false;
+            });
+        }
+        this.refreshGroupState();
+    }
+    onAnyRadioChange() {
+        this.refreshGroupState();
+    }
+    refreshGroupState() {
+        this.groupHasChecked = this.groupMembers().some(r => r.checked);
+    }
+    componentWillLoad() {
+        this.initialChecked = this.checked;
+        this.internals?.setFormValue?.(this.checked ? this.value ?? 'on' : null);
+    }
+    componentDidLoad() {
+        this.refreshGroupState();
+    }
+    /** Called by the browser when the surrounding `<form>` is reset. */
+    formResetCallback() {
+        this.checked = this.initialChecked;
+    }
+    /** WAI-ARIA radio group pattern: arrows move selection (and focus) to the previous/next enabled
+     * radio in the group, wrapping at the ends. */
+    onKeyDown = (ev) => {
+        const forward = ev.key === 'ArrowRight' || ev.key === 'ArrowDown';
+        const backward = ev.key === 'ArrowLeft' || ev.key === 'ArrowUp';
+        if (!forward && !backward)
+            return;
+        const members = this.groupMembers().filter(r => !r.disabled);
+        if (members.length < 2)
+            return;
+        ev.preventDefault();
+        const idx = members.indexOf(this.el);
+        const next = members[(idx + (forward ? 1 : -1) + members.length) % members.length];
+        const input = next.shadowRoot?.querySelector('input');
+        input?.click();
+        input?.focus();
+    };
     onChange = (ev) => {
         const checked = ev.target.checked;
         this.checked = checked;
@@ -51,11 +104,12 @@ export class BsRadio {
         }
     };
     render() {
-        return (h("label", { key: '0301eaf2b9f71e6e1eb7189ee424afa3eb66e3ea', class: `bs-radio ${this.disabled ? 'bs-radio--disabled' : ''}` }, h("input", { key: 'dd12fc11f43171fbfa1955747477d2e538f0d1db', class: "bs-radio__input", type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, onChange: this.onChange }), h("span", { key: '3d6af7472becac1be3f080093587c54e5acbbb04', class: "bs-radio__hit-area" }, h("span", { key: 'e6b7384a4e87d6c216030bd4c5831b91f1bd409f', class: "bs-radio__state-layer" }, h("span", { key: '4b7c97752705660b97a6fb8b2157b5fcd37cd2e9', part: "circle", class: `bs-radio__circle ${this.checked ? 'bs-radio__circle--selected' : ''}` }, this.checked && h("span", { key: '5944fa6ac89d4806e8f243d8f216939f35d3f56f', part: "dot", class: "bs-radio__dot" })))), h("span", { key: 'df20ccc3d840b649f2b7a3ca627282e9a9ba480c', part: "label", class: "bs-radio__label" }, h("slot", { key: 'fc042c04e85bf2991b463d2fe0147ed9724c2aa5' }))));
+        return (h("label", { key: '84bfc39d5714d15c45936c8150b9bd7473b79574', class: `bs-radio ${this.disabled ? 'bs-radio--disabled' : ''}` }, h("input", { key: '0a118d5e59f4d33b0411f7be0fba08a706cda298', class: "bs-radio__input", type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, tabIndex: this.checked || !this.groupHasChecked ? 0 : -1, onKeyDown: this.onKeyDown, onChange: this.onChange }), h("span", { key: '889dadd67126819c3d39a5823d48be58a9c71f9f', class: "bs-radio__hit-area" }, h("span", { key: '5bbed4d44bcf4d810693b5912a90855d680540d0', class: "bs-radio__state-layer" }, h("span", { key: '509389527b876127ca456900e3bb4aa21c735f72', part: "circle", class: `bs-radio__circle ${this.checked ? 'bs-radio__circle--selected' : ''}` }, this.checked && h("span", { key: '9a7e335f9646eb72fb06fb0ca9436e763c3ad278', part: "dot", class: "bs-radio__dot" })))), h("span", { key: '2017790d3d99355b4eb93e3659c809df58c61065', part: "label", class: "bs-radio__label" }, h("slot", { key: '199450bb26f7966cdd64b04c78e3015300d793c9' }))));
     }
     static get is() { return "bs-radio"; }
     static get encapsulation() { return "shadow"; }
     static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["bs-radio.css"]
@@ -80,11 +134,11 @@ export class BsRadio {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The native radio input's `name` attribute. Passed straight through to the native input inside.\nNOTE: because each `bs-radio` renders its own shadow root, native `<input type=\"radio\">`\nmutual-exclusion grouping (which the HTML spec scopes to a single DOM tree) does NOT extend\nacross separate `bs-radio` instances sharing the same `name` -- checking one will not natively\nuncheck another. Within a single instance this still behaves like a normal radio input. See\nbs-radio.mdx's Accessibility section for this known gap; consumers building a group currently\nneed to manage mutual exclusivity themselves (e.g. via `bsChange`) until a `bs-radio-group`\nwrapper exists."
+                    "text": "The native radio input's `name` attribute. Passed straight through to the native input inside.\nAlso the group key: `bs-radio` elements sharing a `name` within the same root (document or\nshadow root) behave as one radio group -- checking one unchecks the others, arrow keys move\nbetween them, and only one is in the tab order. Native grouping can't cross each radio's own\nshadow root, so this component implements it itself."
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "name"
             },
             "value": {
@@ -142,12 +196,17 @@ export class BsRadio {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "disabled",
                 "defaultValue": "false"
             }
         };
     }
+    static get states() {
+        return {
+            "groupHasChecked": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "bsChange",
@@ -157,7 +216,7 @@ export class BsRadio {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted with this radio's own `value` when it becomes checked via user interaction. Since\nnative same-`name` grouping doesn't cross shadow-root boundaries (see the `name` prop's doc),\na consumer wiring up a group of `bs-radio`s must itself set `checked = false` on the others in\nresponse to this event -- there's no automatic un-checking to rely on here."
+                    "text": "Emitted with this radio's own `value` when it becomes checked via user interaction. Since\nnative same-`name` grouping doesn't cross shadow-root boundaries (see the `name` prop's doc),\na consumer wiring up a group of `bs-radio`s does not need to un-check the others itself."
                 },
                 "complexType": {
                     "original": "string",
@@ -167,4 +226,23 @@ export class BsRadio {
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "checked",
+                "methodName": "onCheckedChange"
+            }, {
+                "propName": "value",
+                "methodName": "onCheckedChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "bsChange",
+                "method": "onAnyRadioChange",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
 }

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

@@ -35,19 +35,10 @@ export const DisabledChecked = {
     name: 'Disabled + checked',
     args: { disabled: true, checked: true },
 };
-// Native same-name radio grouping doesn't extend across separate <bs-radio> instances (each has
-// its own shadow root -- see bs-radio.mdx's Accessibility section), so this story manages mutual
-// exclusivity itself by listening for bsChange and unchecking the siblings.
-const onGroupChange = (ev) => {
-    const group = ev.target.closest('[data-radio-group]');
-    group?.querySelectorAll('bs-radio').forEach(radio => {
-        radio.checked = radio === ev.target;
-    });
-};
 export const Group = {
     name: 'Radio group',
     render: () => html `
-    <div data-radio-group style="display: flex; flex-direction: column; gap: 8px;" @bsChange=${onGroupChange}>
+    <div role="radiogroup" aria-label="Options" style="display: flex; flex-direction: column; gap: 8px;">
       <bs-radio name="group-story" value="option-1" checked>Option 1</bs-radio>
       <bs-radio name="group-story" value="option-2">Option 2</bs-radio>
       <bs-radio name="group-story" value="option-3">Option 3</bs-radio>

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

@@ -32,6 +32,9 @@ export class BsSlider {
      * and `segmented` use one thumb (`value`). `segmented` additionally draws `segments` tick marks
      * along the track. */
     type = 'default';
+    /** The `name` the value is submitted under in a surrounding `<form>`'s `FormData`. `type="range"`
+     * submits two entries under this name: the start value, then the end value. */
+    name;
     /** Shows/hides the "Label" text and editable percentage field(s) above the track, and the
      * static min/max bound labels flanking it. When `false`, only the bare track (and its
      * knob/knobs) renders. */
@@ -78,6 +81,33 @@ export class BsSlider {
     /** Emitted when `valueStart`/`valueEnd` changes via user interaction, with both current values.
      * Only fires for `type="range"`. */
     bsRangeChange;
+    internals;
+    initial = { value: 0, valueStart: undefined, valueEnd: undefined };
+    componentWillLoad() {
+        this.initial = { value: this.value, valueStart: this.valueStart, valueEnd: this.valueEnd };
+        this.syncFormValue();
+    }
+    syncFormValue() {
+        if (!this.internals?.setFormValue)
+            return;
+        if (this.type === 'range') {
+            const data = new FormData();
+            if (this.name) {
+                data.append(this.name, String(this.effectiveValueStart));
+                data.append(this.name, String(this.effectiveValueEnd));
+            }
+            this.internals.setFormValue(data);
+        }
+        else {
+            this.internals.setFormValue(String(this.value));
+        }
+    }
+    /** Called by the browser when the surrounding `<form>` is reset. */
+    formResetCallback() {
+        this.value = this.initial.value;
+        this.valueStart = this.initial.valueStart;
+        this.valueEnd = this.initial.valueEnd;
+    }
     get effectiveValueStart() {
         return this.valueStart ?? this.min;
     }
@@ -199,11 +229,12 @@ 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: 'eea08bf9b13476683a75c02c3b2880acc2a5830d', class: rootClasses }, this.showLabel && (h("div", { key: 'ce7a0f60767b6eccf537e121ab588a273d82170b', class: "bs-slider__header" }, h("span", { key: '9de6ffe94a76e896e007d9928e11f1599443aa76', 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: '7c1d900c13c1890b587c5ac4e326434b44e33895', class: "bs-slider__row" }, this.showLabel && (h("span", { key: '5ed265337a997272765c4a94a985081dc25cebea', part: "bound", class: "bs-slider__bound" }, this.min)), isRange ? this.renderRangeThumbs() : this.renderSingleThumb(), this.showLabel && (h("span", { key: '63da44c53587366349113f9f7f7ec0bc290dad35', part: "bound", class: "bs-slider__bound" }, this.max)))));
+        return (h("div", { key: 'f2db9b3d88d97f4183227dca165e4943586100b7', class: rootClasses }, this.showLabel && (h("div", { key: 'b5898da538670e481c1e0c0120f8ac67fec49ffe', class: "bs-slider__header" }, h("span", { key: '3f0257ee85b18fdce7a51825f9e3005b7c8c8985', 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: '74adbfd1c596cb0de4bf484cd2ffbc2f283d9074', class: "bs-slider__row" }, this.showLabel && (h("span", { key: '334f03095f5246d4156e7853a1b9d3ddcb594f0a', part: "bound", class: "bs-slider__bound" }, this.min)), isRange ? this.renderRangeThumbs() : this.renderSingleThumb(), this.showLabel && (h("span", { key: '5173a19292bd029121cf9412a2087383700ec61b', part: "bound", class: "bs-slider__bound" }, this.max)))));
     }
     static get is() { return "bs-slider"; }
     static get encapsulation() { return "shadow"; }
     static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["bs-slider.css"]
@@ -242,6 +273,25 @@ export class BsSlider {
                 "attribute": "type",
                 "defaultValue": "'default'"
             },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The `name` the value is submitted under in a surrounding `<form>`'s `FormData`. `type=\"range\"`\nsubmits two entries under this name: the start value, then the end value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name"
+            },
             "showLabel": {
                 "type": "boolean",
                 "mutable": false,
@@ -436,7 +486,7 @@ export class BsSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "disabled",
                 "defaultValue": "false"
             },
@@ -496,4 +546,20 @@ export class BsSlider {
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "syncFormValue"
+            }, {
+                "propName": "valueStart",
+                "methodName": "syncFormValue"
+            }, {
+                "propName": "valueEnd",
+                "methodName": "syncFormValue"
+            }, {
+                "propName": "type",
+                "methodName": "syncFormValue"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
 }

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

@@ -61,7 +61,7 @@ export class BsSnackbar {
         this.bsDismiss.emit();
     };
     render() {
-        return (h("div", { key: '21d9ad89971ec2f6c8a546bb601caf9fe0fdeaad', part: "container", class: `bs-snackbar bs-snackbar--${this.variant}`, role: "status", "aria-live": this.variant === 'error' ? 'assertive' : 'polite' }, h("div", { key: '4c0a6eeae82f0183269952d12203030c8e38707f', class: "bs-snackbar__content" }, h("span", { key: 'd7702b65066518434b571fdc2a9bba4b715daf80', part: "icon", class: "bs-snackbar__icon", "aria-hidden": "true" }, this.loading ? h("span", { class: "bs-snackbar__spinner" }) : h(CheckCircleIcon, null)), h("span", { key: '943f72a2a1829a2859daef2cf1852d35d8da8a1e', part: "message", class: "bs-snackbar__message" }, h("slot", { key: 'c5cc1160992c936603abb57201beabe1e6eb4664' }))), h("div", { key: '31764bce2583aa5c794084ea1f532b5bca7e1f8c', class: "bs-snackbar__actions" }, this.actionLabel && (h("bs-button", { key: 'b7ae59d32bd58358f9090251f0fcd033925b4cba', part: "action", variant: ACTION_VARIANT[this.variant], size: "sm", onClick: this.onAction }, this.actionLabel)), h("bs-icon-button", { key: 'ce995bb3ba94cd67628bb0d281395b700c6075df', part: "close", variant: "subtle", size: "md", ariaLabel: "Dismiss", onClick: this.onDismiss }, h(CloseIcon, { key: '51562d0658077d511ce46466386735456c4b6a77' })))));
+        return (h("div", { key: 'c84de130f993938339fd16d9f534f1da18fe6c0a', part: "container", class: `bs-snackbar bs-snackbar--${this.variant}`, role: "status", "aria-live": this.variant === 'error' ? 'assertive' : 'polite' }, h("div", { key: '0941f900229f6b3208f8268d34b0cde49e4dba22', class: "bs-snackbar__content" }, h("span", { key: 'cf89eff5ea640950573f9b610d6eff46e5d0154e', part: "icon", class: "bs-snackbar__icon", "aria-hidden": "true" }, this.loading ? h("span", { class: "bs-snackbar__spinner" }) : h(CheckCircleIcon, null)), h("span", { key: 'd4ae7e62ecaea7b53962b08d69bae435ecf0a810', part: "message", class: "bs-snackbar__message" }, h("slot", { key: 'a99ec601f27f79f42fc61cd14c0fed742d2fa334' }))), h("div", { key: 'a139c0287e2eacb26ccbd604ff0343bca23eeb5d', class: "bs-snackbar__actions" }, this.actionLabel && (h("bs-button", { key: 'f22c4a63903fdb50da087ab2c38dd076298a12ed', part: "action", variant: ACTION_VARIANT[this.variant], size: "sm", onClick: this.onAction }, this.actionLabel)), h("bs-icon-button", { key: '4cd5c8f367ee71f11dad1f6f47ff1cdf6436a764', part: "close", variant: "subtle", size: "md", ariaLabel: "Dismiss", onClick: this.onDismiss }, h(CloseIcon, { key: 'a52e6af7acf7c95a54aa6cb5237f2b53e30ea601' })))));
     }
     static get is() { return "bs-snackbar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -24,7 +24,7 @@
   border: none;
   border-radius: var(--bs-source-link-radius);
   font-family: inherit;
-  text-align: left;
+  text-align: start;
   text-decoration: none;
   cursor: pointer;
   transition: background-color var(--bs-duration-fast) var(--bs-easing-standard);
@@ -84,7 +84,7 @@
   display: flex;
   align-items: center;
   gap: var(--bs-spacing-50);
-  padding-left: 22px;
+  padding-inline-start: 22px;
 }
 
 .bs-source-link__source,

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

@@ -51,8 +51,8 @@ export class BsSourceLink {
     };
     render() {
         const inner = [
-            h("span", { key: 'c492c873401ffec62e4079b9254f9e8d82ef2160', class: "bs-source-link__left" }, h("span", { key: 'aa6e13547e540d9bd649a31fd185edb75db27af0', class: "bs-source-link__filename-row" }, h("span", { key: 'f540d25f1504c5a70dfcff3d46b69545b30cc3ce', part: "icon", class: "bs-source-link__icon" }, h("slot", { key: 'bb9c39f0f55161fef91d693da05d966ed0e8b52f', name: "icon" }, h(FileTextIcon, { key: 'cd092cc8acc6c4dc94b1fd0df3813eea321a6322' }))), h("p", { key: '8b80cdf2e65bba6f79ce4df85df9e7891b4688eb', part: "filename", class: "bs-source-link__filename" }, this.fileName)), h("span", { key: '6b1403dc64d26773e61a385ce79c15a9e526bca8', class: "bs-source-link__meta" }, this.sourceName && (h("span", { key: 'a10ac29439339287e551cd5d67a68b57ba32a732', part: "source", class: "bs-source-link__source" }, this.sourceName)), this.sourceName && this.version && h("span", { key: '219e40bd91dd4c9f830f2124474408c10d660241', class: "bs-source-link__dot", "aria-hidden": "true" }), this.version && (h("span", { key: '47da27d3758239a74b6f3baf246c5cdc90dbeaec', part: "version", class: "bs-source-link__version" }, this.version)))),
-            h("span", { key: '383bdb322e97930920f11312d6b3e475fc490c0e', part: "arrow", class: "bs-source-link__arrow", "aria-hidden": "true" }, h(ArrowUpRightIcon, { key: '543df594e433598dfe2275fab1e0af2ba3431788' })),
+            h("span", { key: '5c6382ad80cc971f302da1d80af089306a612e73', class: "bs-source-link__left" }, h("span", { key: '07c8591469e23fe4304846e9282cea0a9eae3ba2', class: "bs-source-link__filename-row" }, h("span", { key: 'ffdb99816134be212cc4d30ebdbf8dd8bcdc085f', part: "icon", class: "bs-source-link__icon" }, h("slot", { key: '475cd85bcb5caa1d3a82d08318731ef4bdf6cb60', name: "icon" }, h(FileTextIcon, { key: '6915810a89f15b823b2b744d30db5b2cefff8162' }))), h("p", { key: '14facc92c71f91701654ea2ce2f9f2ef4b980c5e', part: "filename", class: "bs-source-link__filename" }, this.fileName)), h("span", { key: 'ecd7080f8bc8ce5d7e169f917aaae275ac7a474e', class: "bs-source-link__meta" }, this.sourceName && (h("span", { key: 'f1697d3e278225b26909ec1c40ce2c4cb51c884b', part: "source", class: "bs-source-link__source" }, this.sourceName)), this.sourceName && this.version && h("span", { key: '8efe25341dc7c68ec9c66b91f5f399c9b8ed659f', class: "bs-source-link__dot", "aria-hidden": "true" }), this.version && (h("span", { key: 'cddd46792f911af65434554e56d1cb72d2b88cae', part: "version", class: "bs-source-link__version" }, this.version)))),
+            h("span", { key: '166b5070329771cd7e8f20689e5b257d3f6f1fd0', part: "arrow", class: "bs-source-link__arrow", "aria-hidden": "true" }, h(ArrowUpRightIcon, { key: 'c2a820c6b36ead5f1bbfd74d84c70cb9894c8f1f' })),
         ];
         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-stepper/bs-stepper/bs-stepper.js

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 /**
  * A sequence of named steps showing overall progress through a multi-step flow (e.g. a checkout,
  * an onboarding wizard) -- each step reads as enabled (not yet reached), current, done, error, or
@@ -61,7 +61,8 @@ export class BsStepper {
         });
     }
     render() {
-        return h("slot", { key: 'b2c5468b93468b4cab41afb39364bb9f84eea22f', onSlotchange: this.onSlotChange });
+        // role="list" so each bs-stepper-step's role="listitem" has the required parent.
+        return (h(Host, { key: 'a9c1838c549b0c3ea9cc145624bc38e9edb32a51', role: "list" }, h("slot", { key: '549a18512ad246b5988008b8d2b6a9142e5380a5', onSlotchange: this.onSlotChange })));
     }
     static get is() { return "bs-stepper"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-stepper/bs-stepper-step/bs-stepper-step.css

@@ -147,7 +147,7 @@
    the icon's own right edge to .top's right edge with no positioning assumptions to get wrong. */
 :host(.bs-stepper-step--horizontal) .bs-stepper-step__connector {
   flex: 1 1 auto;
-  margin-left: var(--bs-stepper-step-gap);
+  margin-inline-start: var(--bs-stepper-step-gap);
 }
 
 :host(.bs-stepper-step--vertical) .bs-stepper-step__connector {
@@ -218,8 +218,8 @@
 }
 
 :host(.bs-stepper-step--vertical) .bs-stepper-step__label {
-  margin-left: var(--bs-stepper-step-gap);
-  text-align: left;
+  margin-inline-start: var(--bs-stepper-step-gap);
+  text-align: start;
 }
 
 /* white-space: nowrap -- .label is deliberately narrowed to just the icon's width (see .label's own

package/dist/collection/components/bs-stepper/bs-stepper-step/bs-stepper-step.js

@@ -57,7 +57,7 @@ export class BsStepperStep {
     }
     render() {
         const state = this.state;
-        return (h(Host, { key: 'b67337d4b2effe8ff1fa464ca099898e02b73bc5', role: "listitem", class: `bs-stepper-step--${this.direction}` }, h("div", { key: '0d7c52bc6dc8be1686a89d8b385176ec2cf0e968', class: "bs-stepper-step__top" }, h("span", { key: '4a4a42431c2b989c4a6f16c08f9f6bc208d13b9e', part: "icon", class: `bs-stepper-step__icon bs-stepper-step__icon--${state}` }, state === 'current' && h("span", { key: '4ec68f74e86a332a3d44114b82c4cbaa9490cf27', class: "bs-stepper-step__icon-dot" }), state === 'done' && h(CheckIcon, { key: '4697669ec3c6a9b214383319a6217783a24baf9c' }), state === 'error' && h(ExclamationIcon, { key: '2c08710bdde154d466dea2009162a7935333d3e8' })), h("span", { key: '4d51b40f0436d2874d8734735b1a68ccae8d7a00', part: "connector", class: "bs-stepper-step__connector", "aria-hidden": "true" }, h("span", { key: '93657587c505a5ccd279acc21afcef2c92147a12', class: "bs-stepper-step__connector-line" }))), h("span", { key: 'f887e799dea83c792ce6547f08e28f9d9f8f3c45', part: "label", class: `bs-stepper-step__label bs-stepper-step__label--${state}` }, h("span", { key: 'b233032bf31f50bb83ad6ba5f8fed4893fe7f2fe', part: "name", class: "bs-stepper-step__name" }, this.name), this.showDescription && this.description && (h("span", { key: '17ff926779a02578b700d3086a84911ffcca33a1', part: "description", class: "bs-stepper-step__description" }, this.description)))));
+        return (h(Host, { key: 'fe270c356f44c25a3a12450eec8e1a7657d4d88f', role: "listitem", class: `bs-stepper-step--${this.direction}` }, h("div", { key: '1bc833a5ca917d141078e3b69e9e455ec8d877ad', class: "bs-stepper-step__top" }, h("span", { key: 'aa91b7e91d600b08c389be456b28f4a65450d72e', part: "icon", class: `bs-stepper-step__icon bs-stepper-step__icon--${state}` }, state === 'current' && h("span", { key: 'e3fee594c97bf9f5d47e1b922bf9adffa1c0d438', class: "bs-stepper-step__icon-dot" }), state === 'done' && h(CheckIcon, { key: '4930e7653d7c81c8fcf18920fdd0a9a0e975eee4' }), state === 'error' && h(ExclamationIcon, { key: 'ca757e769dd4411c987bf5f22b7cda904d9fd067' })), h("span", { key: '2b0621849727e355d4d0944087ff1d9eacb5b5f7', part: "connector", class: "bs-stepper-step__connector", "aria-hidden": "true" }, h("span", { key: '0d08b9591ea2c9a967ebf85dce105f667cb86370', class: "bs-stepper-step__connector-line" }))), h("span", { key: '3bd0490ef190a4e4f33f822383be230e4e20e7dc', part: "label", class: `bs-stepper-step__label bs-stepper-step__label--${state}` }, h("span", { key: 'cf6cb4f72fcf546a954085d125a72548cfe521fe', part: "name", class: "bs-stepper-step__name" }, this.name), this.showDescription && this.description && (h("span", { key: 'b0ef234071983ae8c87d68440e7bfa4a491a35f5', part: "description", class: "bs-stepper-step__description" }, this.description)))));
     }
     static get is() { return "bs-stepper-step"; }
     static get encapsulation() { return "shadow"; }

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

@@ -85,7 +85,7 @@
 .bs-switch__input {
   position: absolute;
   top: 0;
-  left: 0;
+  inset-inline-start: 0;
   width: 100%;
   height: 100%;
   margin: 0;
@@ -194,3 +194,12 @@
 .bs-switch--disabled .bs-switch__label {
   color: var(--bs-switch-label-color-disabled);
 }
+
+/* Windows High Contrast: track outline + knob in system colors; checked = Highlight. */
+@media (forced-colors: active) {
+  .bs-switch__track { border: 2px solid ButtonText; forced-color-adjust: none; background: Canvas; }
+  .bs-switch__track--checked { background: Highlight; border-color: Highlight; }
+  .bs-switch__knob { background: ButtonText; }
+  .bs-switch__track--checked .bs-switch__knob { background: HighlightText; }
+  .bs-switch__track--disabled { border-color: GrayText; }
+}