@brandsync/wc 0.0.10 → 0.0.12

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

@@ -0,0 +1,170 @@
+import { h } from "@stencil/core";
+/**
+ * A single radio button with its label, for one mutually-exclusive choice within a group.
+ *
+ * ## When to use
+ * - One option within a set of mutually-exclusive choices, where all options should stay visible
+ *   (a radio group).
+ *
+ * ## When not to use
+ * - An independent, non-exclusive binary choice, or one item in a set of independent choices --
+ *   use `bs-checkbox` instead.
+ * - An on/off setting that takes effect immediately (no explicit form submission) -- use `bs-switch`.
+ *
+ * @slot - Default slot: the label text.
+ * @part circle - The visual radio ring.
+ * @part dot - The center fill shown inside the ring when `checked`.
+ * @part label - The label text wrapper.
+ */
+// Note: this component's CSS Custom Properties (--bs-radio-*) are documented via @prop comments
+// in bs-radio.css, not here -- Stencil's docs generator only parses @prop out of CSS file
+// comments, not the class-level JSDoc (see bs-checkbox.tsx's equivalent note).
+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. */
+    name;
+    /** The native radio input's `value` attribute -- read from `event.target.value`, or used when
+     * wiring the group up to a form. */
+    value;
+    /** Whether the radio is checked. Mutable so clicking the label/input sets it directly. */
+    checked = false;
+    /** Disables the radio: sets the native `disabled` attribute, suppresses hover/focus styling, and
+     * prevents toggling. */
+    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. */
+    bsChange;
+    onChange = (ev) => {
+        const checked = ev.target.checked;
+        this.checked = checked;
+        if (checked) {
+            this.bsChange.emit(this.value);
+        }
+    };
+    render() {
+        return (h("label", { key: 'da5cdc3a3661ed9d2f10741e46f87cc9beb9dbfd', class: `bs-radio ${this.disabled ? 'bs-radio--disabled' : ''}` }, h("input", { key: '431a861dbbd5ea993272714e5c366eaea3a0bd8d', class: "bs-radio__input", type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, onChange: this.onChange }), h("span", { key: '525d9b9d3d980a70af93a7ee800043ce0ba8d98e', class: "bs-radio__hit-area" }, h("span", { key: '8c19cc4f2eb771fe82d4cb20376563b61da0f69e', class: "bs-radio__state-layer" }, h("span", { key: '33829a5a6c179a8bc3289f4a25fe65ddbcce5c96', part: "circle", class: `bs-radio__circle ${this.checked ? 'bs-radio__circle--selected' : ''}` }, this.checked && h("span", { key: '36fc0fa7d46a6bd32879c83a3d084afb282fd39d', part: "dot", class: "bs-radio__dot" })))), h("span", { key: 'efc3e222bae86289767794a23ede57b349567238', part: "label", class: "bs-radio__label" }, h("slot", { key: 'd4842d16ecade0d79572bf53a37549f017f846dd' }))));
+    }
+    static get is() { return "bs-radio"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-radio.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-radio.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "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."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The native radio input's `value` attribute -- read from `event.target.value`, or used when\nwiring the group up to a form."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the radio is checked. Mutable so clicking the label/input sets it directly."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "checked",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the radio: sets the native `disabled` attribute, suppresses hover/focus styling, and\nprevents toggling."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsChange",
+                "name": "bsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "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."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,56 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../stories-utils";
+const meta = {
+    title: 'Components/bs-radio',
+    parameters: { docs: { description: { component: componentDescription('bs-radio') } } },
+    render: args => html `
+    <bs-radio name=${args.name} value=${args.value} ?checked=${args.checked} ?disabled=${args.disabled}>
+      ${args.label}
+    </bs-radio>
+  `,
+    argTypes: {
+        name: { control: 'text', description: propDescription('bs-radio', 'name') },
+        value: { control: 'text', description: propDescription('bs-radio', 'value') },
+        checked: { control: 'boolean', description: propDescription('bs-radio', 'checked') },
+        disabled: { control: 'boolean', description: propDescription('bs-radio', 'disabled') },
+        label: { control: 'text' },
+    },
+    args: {
+        name: 'default-group',
+        value: 'option-1',
+        checked: false,
+        disabled: false,
+        label: 'Option 1',
+    },
+};
+export default meta;
+export const Default = {};
+export const Checked = {
+    args: { checked: true },
+};
+export const Disabled = {
+    args: { disabled: true },
+};
+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}>
+      <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>
+    </div>
+  `,
+};

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

@@ -0,0 +1,139 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-slider', () => {
+    it('renders a native range input by default with the given value/min/max', async () => {
+        const { root } = await render(h("bs-slider", { min: 0, max: 100, value: 40 }));
+        const input = root.shadowRoot.querySelector('input[type="range"]');
+        expect(input).not.toBeNull();
+        expect(input.value).toBe('40');
+        expect(input).toEqualAttribute('min', '0');
+        expect(input).toEqualAttribute('max', '100');
+    });
+    it('renders the label and one editable percentage field when showLabel is true (default)', async () => {
+        const { root } = await render(h("bs-slider", { label: "Volume", value: 20 }));
+        expect(root.shadowRoot.querySelector('[part="label"]').textContent).toBe('Volume');
+        expect(root.shadowRoot.querySelectorAll('[part="field"]').length).toBe(1);
+    });
+    it('renders static min/max bound labels flanking the track when showLabel is true', async () => {
+        const { root } = await render(h("bs-slider", { min: 0, max: 100, value: 20 }));
+        const bounds = root.shadowRoot.querySelectorAll('[part="bound"]');
+        expect(bounds.length).toBe(2);
+        expect(bounds[0].textContent).toBe('0');
+        expect(bounds[1].textContent).toBe('100');
+    });
+    describe('accessible name', () => {
+        it('associates the range input with the visible "Label" text via aria-labelledby when no ariaLabel is set', async () => {
+            const { root } = await render(h("bs-slider", { label: "Volume", value: 20 }));
+            const input = root.shadowRoot.querySelector('input[type="range"]');
+            const labelId = input.getAttribute('aria-labelledby');
+            expect(labelId).not.toBeNull();
+            expect(root.shadowRoot.getElementById(labelId).textContent).toBe('Volume');
+            expect(input.getAttribute('aria-label')).toBeNull();
+        });
+        it('prefers an explicit ariaLabel over the visible label text', async () => {
+            const { root } = await render(h("bs-slider", { label: "Volume", ariaLabel: "Custom name", value: 20 }));
+            const input = root.shadowRoot.querySelector('input[type="range"]');
+            expect(input.getAttribute('aria-label')).toBe('Custom name');
+            expect(input.getAttribute('aria-labelledby')).toBeNull();
+        });
+    });
+    it('renders no label, value field, or bounds when showLabel is false', async () => {
+        const { root } = await render(h("bs-slider", { showLabel: false }));
+        expect(root.shadowRoot.querySelector('[part="label"]')).toBeNull();
+        expect(root.shadowRoot.querySelectorAll('[part="field"]').length).toBe(0);
+        expect(root.shadowRoot.querySelectorAll('[part="bound"]').length).toBe(0);
+    });
+    describe('value clamping', () => {
+        it('clamps a percentage entered in the value field above 100 down to max', async () => {
+            const { root, waitForChanges } = await render(h("bs-slider", { min: 0, max: 100, value: 40 }));
+            const valueField = root.shadowRoot.querySelector('[part="field"] input');
+            valueField.value = '999';
+            valueField.dispatchEvent(new Event('change'));
+            await waitForChanges();
+            const rangeInput = root.shadowRoot.querySelector('input[type="range"]');
+            expect(rangeInput.value).toBe('100');
+        });
+        it('clamps a percentage entered in the value field below 0 up to min', async () => {
+            const { root, waitForChanges } = await render(h("bs-slider", { min: 10, max: 100, value: 40 }));
+            const valueField = root.shadowRoot.querySelector('[part="field"] input');
+            valueField.value = '-50';
+            valueField.dispatchEvent(new Event('change'));
+            await waitForChanges();
+            const rangeInput = root.shadowRoot.querySelector('input[type="range"]');
+            expect(rangeInput.value).toBe('10');
+        });
+    });
+    it('fires bsChange with the new value when the range input changes', async () => {
+        const { root, waitForChanges, spyOnEvent } = await render(h("bs-slider", { min: 0, max: 100, value: 10 }));
+        const bsChangeSpy = spyOnEvent('bsChange');
+        const input = root.shadowRoot.querySelector('input[type="range"]');
+        input.value = '55';
+        input.dispatchEvent(new Event('change'));
+        await waitForChanges();
+        expect(bsChangeSpy).toHaveReceivedEventTimes(1);
+        expect(bsChangeSpy).toHaveReceivedEventDetail(55);
+    });
+    describe('disabled', () => {
+        it('sets the disabled attribute on the range input and value fields', async () => {
+            const { root } = await render(h("bs-slider", { disabled: true }));
+            const input = root.shadowRoot.querySelector('input[type="range"]');
+            expect(input).toHaveAttribute('disabled');
+            root.shadowRoot.querySelectorAll('[part="field"] input').forEach(field => {
+                expect(field).toHaveAttribute('disabled');
+            });
+        });
+        it('prevents value changes via the range input', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(h("bs-slider", { disabled: true, value: 10 }));
+            const bsChangeSpy = spyOnEvent('bsChange');
+            const input = root.shadowRoot.querySelector('input[type="range"]');
+            input.value = '90';
+            input.dispatchEvent(new Event('change'));
+            await waitForChanges();
+            expect(bsChangeSpy).toHaveReceivedEventTimes(0);
+        });
+    });
+    describe('type="range"', () => {
+        it('renders two range inputs for the start/end thumbs', async () => {
+            const { root } = await render(h("bs-slider", { type: "range", min: 0, max: 100, valueStart: 20, valueEnd: 80 }));
+            const inputs = root.shadowRoot.querySelectorAll('input[type="range"]');
+            expect(inputs.length).toBe(2);
+            expect(inputs[0].value).toBe('20');
+            expect(inputs[1].value).toBe('80');
+        });
+        it('fires bsRangeChange when the start thumb changes, clamped to not exceed the end value', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(h("bs-slider", { type: "range", min: 0, max: 100, valueStart: 20, valueEnd: 80 }));
+            const bsRangeChangeSpy = spyOnEvent('bsRangeChange');
+            const inputs = root.shadowRoot.querySelectorAll('input[type="range"]');
+            const startInput = inputs[0];
+            startInput.value = '95';
+            startInput.dispatchEvent(new Event('change'));
+            await waitForChanges();
+            expect(bsRangeChangeSpy).toHaveReceivedEventTimes(1);
+            expect(bsRangeChangeSpy).toHaveReceivedEventDetail({ start: 80, end: 80 });
+        });
+        it('fires bsRangeChange when the end thumb changes, clamped to not go below the start value', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(h("bs-slider", { type: "range", min: 0, max: 100, valueStart: 20, valueEnd: 80 }));
+            const bsRangeChangeSpy = spyOnEvent('bsRangeChange');
+            const inputs = root.shadowRoot.querySelectorAll('input[type="range"]');
+            const endInput = inputs[1];
+            endInput.value = '5';
+            endInput.dispatchEvent(new Event('change'));
+            await waitForChanges();
+            expect(bsRangeChangeSpy).toHaveReceivedEventTimes(1);
+            expect(bsRangeChangeSpy).toHaveReceivedEventDetail({ start: 20, end: 20 });
+        });
+    });
+    describe('type="segmented"', () => {
+        it('renders segments + 1 tick marks, with the first hidden', async () => {
+            const { root } = await render(h("bs-slider", { type: "segmented", segments: 5 }));
+            const ticks = root.shadowRoot.querySelectorAll('.bs-slider__tick');
+            expect(ticks.length).toBe(6);
+            expect(ticks[0]).toHaveClass('bs-slider__tick--hidden');
+            expect(ticks[1]).not.toHaveClass('bs-slider__tick--hidden');
+        });
+        it('derives the range input step from (max - min) / segments', async () => {
+            const { root } = await render(h("bs-slider", { type: "segmented", min: 0, max: 100, segments: 4 }));
+            const input = root.shadowRoot.querySelector('input[type="range"]');
+            expect(input).toEqualAttribute('step', '25');
+        });
+    });
+});