@brandsync/wc 0.0.10 → 0.0.12

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

@@ -0,0 +1,499 @@
+import { h } from "@stencil/core";
+/**
+ * A slider for picking a single numeric value (`type="default"`), a value snapped to evenly
+ * spaced ticks (`type="segmented"`), or a min/max pair (`type="range"`) from within a bounded
+ * `min`/`max` range.
+ *
+ * ## When to use
+ * - A numeric value that's easiest to reason about relative to its bounds (volume, brightness,
+ *   a price range) rather than typed digit-by-digit.
+ * - `type="segmented"` when only a fixed number of discrete stops make sense (e.g. a 5-star
+ *   rating-like scale) but a visual track is still preferable to discrete buttons.
+ * - `type="range"` for picking a min/max pair (e.g. a price range filter) with two thumbs.
+ *
+ * ## When not to use
+ * - A precise value where mis-dragging by a pixel matters more than the at-a-glance bounds --
+ *   use `bs-input[type="number"]` instead.
+ * - A small, fixed set of mutually exclusive choices -- use a radio group instead.
+ *
+ * @part label - The "Label" text above the track.
+ * @part field - Each editable percentage-value field, shown top-right above the track.
+ * @part bound - Each static min/max bound label flanking the track itself.
+ * @part track - The background (inactive) track.
+ * @part fill - The active/filled portion of the track.
+ * @part control - The native range input(s) that drive the knob(s).
+ * @part tooltip - The value tooltip shown above a knob while focused/dragging.
+ */
+// Note: this component's CSS Custom Properties are documented via @prop comments in
+// bs-slider.css, not here.
+export class BsSlider {
+    el;
+    /** Which slider shape to render. `range` uses two thumbs (`valueStart`/`valueEnd`); `default`
+     * and `segmented` use one thumb (`value`). `segmented` additionally draws `segments` tick marks
+     * along the track. */
+    type = 'default';
+    /** 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. */
+    showLabel = true;
+    /** Label text shown above the track when `showLabel` is set. */
+    label = 'Label';
+    /** Minimum selectable value, for all `type`s. */
+    min = 0;
+    /** Maximum selectable value, for all `type`s. */
+    max = 100;
+    /** Step size between selectable values. For `type="segmented"`, the effective step is derived
+     * from `(max - min) / segments` instead, so the thumb always snaps to a tick. */
+    step = 1;
+    /** Current value for `type="default"`/`type="segmented"`. Ignored for `type="range"` -- use
+     * `valueStart`/`valueEnd` instead. Mutable so dragging the thumb updates it directly. */
+    value = 0;
+    /** Lower thumb's value for `type="range"`. Defaults to `min` when unset. Mutable so dragging the
+     * thumb updates it directly. */
+    valueStart;
+    /** Upper thumb's value for `type="range"`. Defaults to `max` when unset. Mutable so dragging the
+     * thumb updates it directly. */
+    valueEnd;
+    /** Number of equal divisions marked by tick lines along the track, for `type="segmented"` only.
+     * The first tick (at the very start of the track) is rendered with `opacity: 0` to keep the
+     * tick spacing math consistent while not visually doubling up with the track's own start edge --
+     * this matches the design spec, not a bug. */
+    segments = 10;
+    /** Disables the slider: sets the native `disabled` attribute on the range input(s), suppresses
+     * hover/focus/drag styling and the value tooltip, and prevents interaction. */
+    disabled = false;
+    /**
+     * Accessible name for the slider's native range input(s). Required whenever `showLabel` is
+     * `false` (a bare track with no visible "Label" text) -- without it, the internal native
+     * `<input>` has no accessible name at all. Setting `aria-label` directly on the `<bs-slider>`
+     * host does NOT work for this: that attribute stays on the light-DOM host and is never forwarded
+     * into the shadow DOM by the browser. Same pattern/reasoning as `bs-switch`'s and `bs-checkbox`'s
+     * identical `ariaLabel` prop. For `type="range"`, this labels the lower-bound thumb; the
+     * upper-bound thumb gets `"${ariaLabel} end"` (or `"End value"` when `ariaLabel` is unset).
+     */
+    ariaLabel = null;
+    /** Emitted when `value` changes via user interaction (dragging the thumb, or committing the
+     * value field), with the new value. Only fires for `type="default"`/`type="segmented"`. */
+    bsChange;
+    /** Emitted when `valueStart`/`valueEnd` changes via user interaction, with both current values.
+     * Only fires for `type="range"`. */
+    bsRangeChange;
+    get effectiveValueStart() {
+        return this.valueStart ?? this.min;
+    }
+    get effectiveValueEnd() {
+        return this.valueEnd ?? this.max;
+    }
+    /** Effective step for the native range input(s): `step` as-is, except for `type="segmented"`,
+     * where it's derived from `segments` so the thumb always lands on a tick. */
+    get effectiveStep() {
+        if (this.type === 'segmented' && this.segments > 0) {
+            return (this.max - this.min) / this.segments;
+        }
+        return this.step;
+    }
+    clamp(n) {
+        if (Number.isNaN(n))
+            return this.min;
+        return Math.min(this.max, Math.max(this.min, n));
+    }
+    percent(value) {
+        if (this.max === this.min)
+            return 0;
+        return ((value - this.min) / (this.max - this.min)) * 100;
+    }
+    onInputChange = (ev) => {
+        if (this.disabled)
+            return;
+        const next = this.clamp(parseFloat(ev.target.value));
+        this.value = next;
+        this.bsChange.emit(next);
+    };
+    clampPercent(n) {
+        if (Number.isNaN(n))
+            return 0;
+        return Math.min(100, Math.max(0, n));
+    }
+    /** Converts an edited percentage (0-100, from the header field) back to a raw value in
+     * min/max units. */
+    fromPercent(pct) {
+        return this.min + (this.clampPercent(pct) / 100) * (this.max - this.min);
+    }
+    onPercentFieldChange = (ev) => {
+        if (this.disabled)
+            return;
+        const next = this.clamp(this.fromPercent(parseFloat(ev.target.value)));
+        this.value = next;
+        this.bsChange.emit(next);
+    };
+    onStartInputChange = (ev) => {
+        if (this.disabled)
+            return;
+        let next = this.clamp(parseFloat(ev.target.value));
+        next = Math.min(next, this.effectiveValueEnd);
+        this.valueStart = next;
+        this.bsRangeChange.emit({ start: next, end: this.effectiveValueEnd });
+    };
+    onEndInputChange = (ev) => {
+        if (this.disabled)
+            return;
+        let next = this.clamp(parseFloat(ev.target.value));
+        next = Math.max(next, this.effectiveValueStart);
+        this.valueEnd = next;
+        this.bsRangeChange.emit({ start: this.effectiveValueStart, end: next });
+    };
+    onStartPercentFieldChange = (ev) => {
+        if (this.disabled)
+            return;
+        let next = this.clamp(this.fromPercent(parseFloat(ev.target.value)));
+        next = Math.min(next, this.effectiveValueEnd);
+        this.valueStart = next;
+        this.bsRangeChange.emit({ start: next, end: this.effectiveValueEnd });
+    };
+    onEndPercentFieldChange = (ev) => {
+        if (this.disabled)
+            return;
+        let next = this.clamp(this.fromPercent(parseFloat(ev.target.value)));
+        next = Math.max(next, this.effectiveValueStart);
+        this.valueEnd = next;
+        this.bsRangeChange.emit({ start: this.effectiveValueStart, end: next });
+    };
+    /** The editable field shown top-right (or as a pair for `type="range"`), displaying/editing
+     * the thumb's position as a rounded 0-100 percentage of min/max -- not the raw value -- per
+     * the Figma spec (every state screenshot shows this field suffixed "%", matching the same
+     * percentage the tooltip shows while dragging). */
+    renderPercentField(percentValue, onChange, ariaLabel) {
+        return (h("span", { part: "field", class: "bs-slider__field" }, h("input", { type: "number", class: "bs-slider__field-input", value: Math.round(this.clampPercent(percentValue)), min: 0, max: 100, disabled: this.disabled, "aria-label": ariaLabel, onChange: onChange }), h("span", { class: "bs-slider__field-suffix", "aria-hidden": "true" }, "%")));
+    }
+    renderSegmentedTicks() {
+        if (this.type !== 'segmented' || this.segments <= 0)
+            return null;
+        // segments+1 ticks (both track ends plus every division), per the Figma spec -- the first
+        // tick is invisible (opacity: 0) so the spacing math stays consistent even though it would
+        // otherwise sit right on top of the track's own start edge.
+        const tickCount = this.segments + 1;
+        return (h("div", { class: "bs-slider__ticks", "aria-hidden": "true" }, Array.from({ length: tickCount }).map((_, i) => (h("span", { class: `bs-slider__tick ${i === 0 ? 'bs-slider__tick--hidden' : ''}` })))));
+    }
+    renderSingleThumb() {
+        const fillEnd = this.percent(this.value);
+        return (h("div", { class: "bs-slider__track-wrapper", style: { '--bs-slider-fill-start': '0%', '--bs-slider-fill-end': `${fillEnd}%` } }, h("div", { part: "track", class: "bs-slider__track" }, h("div", { part: "fill", class: "bs-slider__track-fill" }), this.renderSegmentedTicks()), h("input", { type: "range", part: "control", class: "bs-slider__input", min: this.min, max: this.max, step: this.effectiveStep, value: this.value, disabled: this.disabled, "aria-label": this.ariaLabel ?? undefined, "aria-labelledby": !this.ariaLabel && this.showLabel ? 'bs-slider-label' : undefined, onInput: this.onInputChange, onChange: this.onInputChange }), h("span", { class: "bs-slider__tooltip", part: "tooltip", style: { left: `${fillEnd}%` }, "aria-hidden": "true" }, Math.round(this.percent(this.value)), "%")));
+    }
+    renderRangeThumbs() {
+        const start = this.effectiveValueStart;
+        const end = this.effectiveValueEnd;
+        const fillStart = this.percent(start);
+        const fillEnd = this.percent(end);
+        // Two thumbs can't be done with a single native <input type="range"> -- the CSS spec only
+        // gives a range input one thumb. This is the well-known dual-range-slider pattern instead:
+        // two overlapping native range inputs, each with a fully transparent track (only their thumb
+        // is visible/interactive -- see bs-slider.css's pointer-events rules), plus a separate
+        // absolutely-positioned div for the "filled" segment between them.
+        //
+        // Both inputs sit at the same z-index by default, except whichever thumb is in the upper half
+        // of the track gets a higher z-index -- without that, once the two thumbs are close together
+        // near one end, only the topmost one is reachable by click, and the topmost one is always the
+        // one rendered last (the end thumb) unless we compensate.
+        const startOnTop = this.percent(start) > 50;
+        return (h("div", { class: "bs-slider__track-wrapper", style: { '--bs-slider-fill-start': `${fillStart}%`, '--bs-slider-fill-end': `${fillEnd}%` } }, h("div", { part: "track", class: "bs-slider__track" }, h("div", { part: "fill", class: "bs-slider__track-fill" })), h("input", { type: "range", part: "control", class: "bs-slider__input bs-slider__input--start", style: { zIndex: startOnTop ? '4' : '3' }, min: this.min, max: this.max, step: this.step, value: start, disabled: this.disabled, "aria-label": this.ariaLabel ?? 'Start value', onInput: this.onStartInputChange, onChange: this.onStartInputChange }), h("input", { type: "range", part: "control", class: "bs-slider__input bs-slider__input--end", style: { zIndex: startOnTop ? '3' : '4' }, min: this.min, max: this.max, step: this.step, value: end, disabled: this.disabled, "aria-label": this.ariaLabel ? `${this.ariaLabel} end` : 'End value', onInput: this.onEndInputChange, onChange: this.onEndInputChange }), h("span", { class: "bs-slider__tooltip bs-slider__tooltip--start", part: "tooltip", style: { left: `${fillStart}%` }, "aria-hidden": "true" }, Math.round(this.percent(start)), "%"), h("span", { class: "bs-slider__tooltip bs-slider__tooltip--end", part: "tooltip", style: { left: `${fillEnd}%` }, "aria-hidden": "true" }, Math.round(this.percent(end)), "%")));
+    }
+    render() {
+        const isRange = this.type === 'range';
+        const rootClasses = ['bs-slider', this.disabled ? 'bs-slider--disabled' : ''].filter(Boolean).join(' ');
+        return (h("div", { key: '85529486524fc9859b4b1706a69e70f46537ab77', class: rootClasses }, this.showLabel && (h("div", { key: '4871263c05627057e838478048caed54554db6fc', class: "bs-slider__header" }, h("span", { key: '91ef26112441bdd1bdc7b4b0d1653c81db88bf4a', 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: '336901d2c9195c4415fce9fe9c683c51b652feb8', class: "bs-slider__row" }, this.showLabel && (h("span", { key: '49330dd4efe29c2f4d27ded8a5ed812b5a98d6af', part: "bound", class: "bs-slider__bound" }, this.min)), isRange ? this.renderRangeThumbs() : this.renderSingleThumb(), this.showLabel && (h("span", { key: '6daa487800d4303d2d43c7d526bd457d3caddf7f', 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 originalStyleUrls() {
+        return {
+            "$": ["bs-slider.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-slider.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsSliderType",
+                    "resolved": "\"default\" | \"range\" | \"segmented\"",
+                    "references": {
+                        "BsSliderType": {
+                            "location": "local",
+                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-slider/bs-slider.tsx",
+                            "id": "src/components/bs-slider/bs-slider.tsx::BsSliderType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Which slider shape to render. `range` uses two thumbs (`valueStart`/`valueEnd`); `default`\nand `segmented` use one thumb (`value`). `segmented` additionally draws `segments` tick marks\nalong the track."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'default'"
+            },
+            "showLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows/hides the \"Label\" text and editable percentage field(s) above the track, and the\nstatic min/max bound labels flanking it. When `false`, only the bare track (and its\nknob/knobs) renders."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-label",
+                "defaultValue": "true"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label text shown above the track when `showLabel` is set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "'Label'"
+            },
+            "min": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum selectable value, for all `type`s."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min",
+                "defaultValue": "0"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum selectable value, for all `type`s."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max",
+                "defaultValue": "100"
+            },
+            "step": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Step size between selectable values. For `type=\"segmented\"`, the effective step is derived\nfrom `(max - min) / segments` instead, so the thumb always snaps to a tick."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "step",
+                "defaultValue": "1"
+            },
+            "value": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current value for `type=\"default\"`/`type=\"segmented\"`. Ignored for `type=\"range\"` -- use\n`valueStart`/`valueEnd` instead. Mutable so dragging the thumb updates it directly."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "0"
+            },
+            "valueStart": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Lower thumb's value for `type=\"range\"`. Defaults to `min` when unset. Mutable so dragging the\nthumb updates it directly."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value-start"
+            },
+            "valueEnd": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Upper thumb's value for `type=\"range\"`. Defaults to `max` when unset. Mutable so dragging the\nthumb updates it directly."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value-end"
+            },
+            "segments": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of equal divisions marked by tick lines along the track, for `type=\"segmented\"` only.\nThe first tick (at the very start of the track) is rendered with `opacity: 0` to keep the\ntick spacing math consistent while not visually doubling up with the track's own start edge --\nthis matches the design spec, not a bug."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "segments",
+                "defaultValue": "10"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the slider: sets the native `disabled` attribute on the range input(s), suppresses\nhover/focus/drag styling and the value tooltip, and prevents interaction."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name for the slider's native range input(s). Required whenever `showLabel` is\n`false` (a bare track with no visible \"Label\" text) -- without it, the internal native\n`<input>` has no accessible name at all. Setting `aria-label` directly on the `<bs-slider>`\nhost does NOT work for this: that attribute stays on the light-DOM host and is never forwarded\ninto the shadow DOM by the browser. Same pattern/reasoning as `bs-switch`'s and `bs-checkbox`'s\nidentical `ariaLabel` prop. For `type=\"range\"`, this labels the lower-bound thumb; the\nupper-bound thumb gets `\"${ariaLabel} end\"` (or `\"End value\"` when `ariaLabel` is unset)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsChange",
+                "name": "bsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when `value` changes via user interaction (dragging the thumb, or committing the\nvalue field), with the new value. Only fires for `type=\"default\"`/`type=\"segmented\"`."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "bsRangeChange",
+                "name": "bsRangeChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when `valueStart`/`valueEnd` changes via user interaction, with both current values.\nOnly fires for `type=\"range\"`."
+                },
+                "complexType": {
+                    "original": "{ start: number; end: number }",
+                    "resolved": "{ start: number; end: number; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,70 @@
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { componentDescription, propDescription } from "../../stories-utils";
+const types = ['default', 'segmented', 'range'];
+const meta = {
+    title: 'Components/bs-slider',
+    parameters: { docs: { description: { component: componentDescription('bs-slider') } } },
+    render: args => html `
+    <bs-slider
+      type=${args.type}
+      show-label=${args.showLabel}
+      label=${args.label}
+      min=${args.min}
+      max=${args.max}
+      step=${args.step}
+      value=${args.value}
+      value-start=${args.valueStart}
+      value-end=${args.valueEnd}
+      segments=${args.segments}
+      ?disabled=${args.disabled}
+      aria-label=${ifDefined(args.ariaLabel || undefined)}
+    ></bs-slider>
+  `,
+    argTypes: {
+        type: { control: 'select', options: types, description: propDescription('bs-slider', 'type') },
+        showLabel: { control: 'boolean', description: propDescription('bs-slider', 'showLabel') },
+        label: { control: 'text', description: propDescription('bs-slider', 'label') },
+        min: { control: 'number', description: propDescription('bs-slider', 'min') },
+        max: { control: 'number', description: propDescription('bs-slider', 'max') },
+        step: { control: 'number', description: propDescription('bs-slider', 'step') },
+        value: { control: 'number', description: propDescription('bs-slider', 'value') },
+        valueStart: { control: 'number', description: propDescription('bs-slider', 'valueStart') },
+        valueEnd: { control: 'number', description: propDescription('bs-slider', 'valueEnd') },
+        segments: { control: 'number', description: propDescription('bs-slider', 'segments') },
+        disabled: { control: 'boolean', description: propDescription('bs-slider', 'disabled') },
+        ariaLabel: { control: 'text', description: propDescription('bs-slider', 'ariaLabel') },
+    },
+    args: {
+        type: 'default',
+        showLabel: true,
+        label: 'Label',
+        min: 0,
+        max: 100,
+        step: 1,
+        value: 40,
+        valueStart: 25,
+        valueEnd: 75,
+        segments: 10,
+        disabled: false,
+        ariaLabel: '',
+    },
+};
+export default meta;
+export const Default = {};
+export const Segmented = {
+    args: { type: 'segmented', value: 30 },
+};
+export const Range = {
+    args: { type: 'range' },
+};
+export const Disabled = {
+    args: { disabled: true },
+};
+export const BareTrack = {
+    name: 'showLabel=false',
+    // ariaLabel is required here: with showLabel false there's no visible "Label" text left to
+    // associate via aria-labelledby, so the native range input would otherwise have no accessible
+    // name at all (a real WCAG 4.1.2 violation caught via axe-core against this exact story).
+    args: { showLabel: false, ariaLabel: 'Volume' },
+};

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

@@ -51,8 +51,8 @@ export class BsSourceLink {
     };
     render() {
         const inner = [
-            h("span", { key: '0e55cdcd04b7d6574835c1b5b21c20ad804fc36c', class: "bs-source-link__left" }, h("span", { key: '989f52e1b6b0a353470d65f5e3d75e40486b3842', class: "bs-source-link__filename-row" }, h("span", { key: 'e21ccdb9b78d4db3b18ca07039d61632b4390d80', part: "icon", class: "bs-source-link__icon" }, h("slot", { key: 'fe35c5c3084af9ddba25db3c46c2d8bbe7e927d0', name: "icon" }, h(FileTextIcon, { key: '5612acc39809cca4d483ab22f2e0b1cb95cdb2e8' }))), h("p", { key: '39d92f5e7e7a50e943ff9a85efd314df5a2abf0b', part: "filename", class: "bs-source-link__filename" }, this.fileName)), h("span", { key: 'd2eace60d67a344cd2bf522af38950fd3275bea2', class: "bs-source-link__meta" }, this.sourceName && (h("span", { key: 'd8d3fa79fa888db77ef44f402fd8747eb2cecad1', part: "source", class: "bs-source-link__source" }, this.sourceName)), this.sourceName && this.version && h("span", { key: '738770f5c4b091e59832100a17bda2f2d251ed75', class: "bs-source-link__dot", "aria-hidden": "true" }), this.version && (h("span", { key: '56fcf72b43eebb138745d212e8bcaa680f808cd0', part: "version", class: "bs-source-link__version" }, this.version)))),
-            h("span", { key: 'da453b51265f923c19505645cb33832c93863179', part: "arrow", class: "bs-source-link__arrow", "aria-hidden": "true" }, h(ArrowUpRightIcon, { key: 'c23d308322df780d109691f87945bb511461304f' })),
+            h("span", { key: '79756193e545c7bc24f6df3aa25a644294933536', class: "bs-source-link__left" }, h("span", { key: 'e3aee2ee301d383149f242ee40d681a75782a4b2', class: "bs-source-link__filename-row" }, h("span", { key: '6cc1a0f55f54a0cca0f2ca305c2f8566e3016243', part: "icon", class: "bs-source-link__icon" }, h("slot", { key: 'b61ee4c11179ce958dbc5f3eb4cf1f3a0ff90c26', name: "icon" }, h(FileTextIcon, { key: '2d94ec22dade078f3828e8d0d64adb984716fb00' }))), h("p", { key: 'a727c77f11c68b61b0307d31dd9c79e811a75406', part: "filename", class: "bs-source-link__filename" }, this.fileName)), h("span", { key: 'bec3857211075ce8ce4ff33c649ee6370b6039f5', class: "bs-source-link__meta" }, this.sourceName && (h("span", { key: '5ca4e697485e1f82d8375afe48b2ab13380efe40', part: "source", class: "bs-source-link__source" }, this.sourceName)), this.sourceName && this.version && h("span", { key: '4a69cae984e34e5329750bd19c868c9b0a83da28', class: "bs-source-link__dot", "aria-hidden": "true" }), this.version && (h("span", { key: '8abd2c99dcea7b95bc7d79d24c1ba1f6fdd10436', part: "version", class: "bs-source-link__version" }, this.version)))),
+            h("span", { key: 'c5ff90d23096ab0cc70f6f906b8d04d29498e735', part: "arrow", class: "bs-source-link__arrow", "aria-hidden": "true" }, h(ArrowUpRightIcon, { key: '2bfc3acc65b7d9401c30999f4dd0adbf15f8a8d3' })),
         ];
         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-switch/bs-switch.cmp.test.js

@@ -0,0 +1,71 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-switch', () => {
+    it('renders an unchecked native switch input by default', async () => {
+        const { root } = await render(h("bs-switch", null));
+        const input = root.shadowRoot.querySelector('input');
+        expect(input).toEqualAttribute('type', 'checkbox');
+        expect(input).toEqualAttribute('role', 'switch');
+        expect(input.checked).toBe(false);
+        expect(root.shadowRoot.querySelector('[part="track"]')).not.toHaveClass('bs-switch__track--checked');
+    });
+    it('reflects ariaLabel to the native input, for label-less accessible names', async () => {
+        const { root } = await render(h("bs-switch", { ariaLabel: "Enable notifications" }));
+        const input = root.shadowRoot.querySelector('input');
+        expect(input).toEqualAttribute('aria-label', 'Enable notifications');
+    });
+    it('does not set aria-label on the native input when ariaLabel is not provided', async () => {
+        const { root } = await render(h("bs-switch", null));
+        const input = root.shadowRoot.querySelector('input');
+        expect(input).not.toHaveAttribute('aria-label');
+    });
+    it('reflects the checked prop to the native input and the track', async () => {
+        const { root } = await render(h("bs-switch", { checked: true }));
+        const input = root.shadowRoot.querySelector('input');
+        expect(input.checked).toBe(true);
+        expect(root.shadowRoot.querySelector('[part="track"]')).toHaveClass('bs-switch__track--checked');
+    });
+    it('clicking the input toggles checked and emits bsChange with the new value', async () => {
+        const { root, waitForChanges, spyOnEvent } = await render(h("bs-switch", null));
+        const bsChangeSpy = spyOnEvent('bsChange');
+        const input = root.shadowRoot.querySelector('input');
+        input.click();
+        await waitForChanges();
+        expect(input.checked).toBe(true);
+        expect(bsChangeSpy).toHaveReceivedEventTimes(1);
+        expect(bsChangeSpy).toHaveReceivedEventDetail(true);
+        input.click();
+        await waitForChanges();
+        expect(input.checked).toBe(false);
+        expect(bsChangeSpy).toHaveReceivedEventTimes(2);
+        expect(bsChangeSpy).toHaveReceivedEventDetail(false);
+    });
+    describe('disabled', () => {
+        it('sets the disabled attribute on the native input', async () => {
+            const { root } = await render(h("bs-switch", { disabled: true }));
+            const input = root.shadowRoot.querySelector('input');
+            expect(input).toHaveAttribute('disabled');
+        });
+        it('prevents toggling via click', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(h("bs-switch", { disabled: true }));
+            const bsChangeSpy = spyOnEvent('bsChange');
+            const input = root.shadowRoot.querySelector('input');
+            input.click();
+            await waitForChanges();
+            expect(input.checked).toBe(false);
+            expect(bsChangeSpy).toHaveReceivedEventTimes(0);
+        });
+    });
+    ['md', 'lg'].forEach(size => {
+        it(`renders size="${size}" with the matching track modifier class`, async () => {
+            const { root } = await render(h("bs-switch", { size: size }));
+            const track = root.shadowRoot.querySelector('[part="track"]');
+            expect(track).toHaveClass(`bs-switch__track--${size}`);
+        });
+    });
+    it('renders label slot content', async () => {
+        const { root } = await render(h("bs-switch", null, "Enable notifications"));
+        expect(root).toHaveTextContent('Enable notifications');
+        const label = root.shadowRoot.querySelector('[part="label"]');
+        expect(label.querySelector('slot')).not.toBeNull();
+    });
+});