@brandsync/wc 1.18.0 → 1.20.0

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

@@ -0,0 +1,101 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../stories-utils";
+const presets = ['fade', 'slide-up', 'slide-down', 'scale', 'collapse'];
+const durations = ['instant', 'fast', 'default', 'slow', 'slower'];
+const easings = ['standard', 'decelerate', 'accelerate', 'linear'];
+const card = html `
+  <bs-card style="width: 320px">
+    <span slot="header">Booking summary</span>
+    Room 214 · 2 nights
+  </bs-card>
+`;
+const motionMs = (el) => {
+    const value = getComputedStyle(el).getPropertyValue('--bs-presence-duration').trim();
+    if (value.endsWith('ms'))
+        return parseFloat(value);
+    if (value.endsWith('s'))
+        return parseFloat(value) * 1000;
+    return 0;
+};
+// Hide, wait out the exit, then show again. Flipping `active` in one frame never paints the
+// hidden state, so the enter transition has nothing to animate from.
+const replay = (event) => {
+    const demo = event.currentTarget.closest('[data-presence-demo]');
+    const nodes = Array.from(demo?.querySelectorAll('bs-presence') ?? []);
+    nodes.forEach(el => {
+        el.active = false;
+    });
+    const wait = Math.max(0, ...nodes.map(motionMs)) + 40;
+    window.setTimeout(() => {
+        nodes.forEach(el => {
+            el.active = true;
+        });
+    }, wait);
+};
+const demo = (body) => html `
+  <div data-presence-demo>
+    <bs-stack gap="300">
+      <bs-button @click=${replay}>Replay</bs-button>
+      ${body}
+    </bs-stack>
+  </div>
+`;
+const meta = {
+    title: 'Motion/bs-presence',
+    parameters: { docs: { description: { component: componentDescription('bs-presence') } } },
+    render: args => demo(html `
+      <bs-presence
+        ?active=${args.active}
+        preset=${args.preset}
+        duration=${args.duration}
+        easing=${args.easing}
+      >
+        ${card}
+      </bs-presence>
+    `),
+    argTypes: {
+        active: { control: 'boolean', description: propDescription('bs-presence', 'active') },
+        preset: { control: 'inline-radio', options: presets, description: propDescription('bs-presence', 'preset') },
+        duration: { control: 'inline-radio', options: durations, description: propDescription('bs-presence', 'duration') },
+        easing: { control: 'inline-radio', options: easings, description: propDescription('bs-presence', 'easing') },
+    },
+    args: { active: true, preset: 'fade', duration: 'default', easing: 'standard' },
+};
+export default meta;
+export const Default = {};
+export const Presets = {
+    render: () => demo(html `
+      <bs-grid min-column-width="220px" gap="300">
+        ${presets.map(preset => html `
+            <bs-stack gap="100">
+              <span>${preset}</span>
+              <bs-presence active preset=${preset} duration="slow"> ${card} </bs-presence>
+            </bs-stack>
+          `)}
+      </bs-grid>
+    `),
+};
+export const Durations = {
+    render: () => demo(html `
+      <bs-stack gap="200">
+        ${durations.map(duration => html `
+            <bs-stack gap="100">
+              <span>${duration}</span>
+              <bs-presence active preset="slide-up" duration=${duration}> ${card} </bs-presence>
+            </bs-stack>
+          `)}
+      </bs-stack>
+    `),
+};
+export const Easings = {
+    render: () => demo(html `
+      <bs-stack gap="200">
+        ${easings.map(easing => html `
+            <bs-stack gap="100">
+              <span>${easing}</span>
+              <bs-presence active preset="slide-up" duration="slower" easing=${easing}> ${card} </bs-presence>
+            </bs-stack>
+          `)}
+      </bs-stack>
+    `),
+};

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

@@ -69,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: '76f9b0175af7e6300a901f8c0e26da4b9de2a192', part: "container", class: "bs-progress" }, h("div", { key: '10d34faab3d49fa21e72d0cf2bd1d1c2804ef442', 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 }))) : (
+        return (h("div", { key: '187ceff8a1b9d4f0adedaea62de6ac2aeb416d84', part: "container", class: "bs-progress" }, h("div", { key: '89b1434e55d1e431a298a8744a3b3bc2f305f68c', 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
@@ -78,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: 'bfc9b155c8b8d68255a0ad223e31bc25f79566b8', part: "label", class: `bs-progress__label bs-progress__label--${this.size}` }, value, "%"))));
+            } }))), isDeterminate && this.showLabel && (h("span", { key: 'be64ef0cb99048d327e42799915544cd5eff1205', part: "label", class: `bs-progress__label bs-progress__label--${this.size}` }, value, "%"))));
     }
     static get is() { return "bs-progress"; }
     static get encapsulation() { return "shadow"; }

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

@@ -47,6 +47,9 @@
   border-radius: var(--bs-progress-linear-radius);
   background: var(--bs-progress-linear-track);
   overflow: hidden;
+  /* Lets the indeterminate keyframes translate by the track's width (100cqw); a % translate would
+     be relative to the comet's own, much narrower, width. */
+  container-type: inline-size;
 }
 
 .bs-progress-linear__track--small {
@@ -87,7 +90,7 @@
     transform: translateX(-100%);
   }
   to {
-    transform: translateX(250%);
+    transform: translateX(100cqw);
   }
 }
 

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

@@ -51,13 +51,13 @@ export class BsProgressLinear {
     render() {
         const isDeterminate = this.type === 'determinate';
         const value = this.clampedValue;
-        return (h("div", { key: '8cb0ed265f5fae4146ace2ff2cb4e9876b0011c6', part: "container", class: "bs-progress-linear" }, h("div", { key: '62b448cc83f5b317b41277c414cf7712ef4ee1b5', 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}%` } })) : (
+        return (h("div", { key: '3573f6a22f8fd305b00e6e6a6cbd956225c84d23', part: "container", class: "bs-progress-linear" }, h("div", { key: 'a5ea4ab901d1d944b279846855b12995f6cb7bed', 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: '26e60beb19a7f45a903667928d7256a4d24875c9', part: "label", class: "bs-progress-linear__label" }, h("slot", { key: 'ca9c57dc3b3ee22eedf489ee4e6b3444f85b59df' })))));
+        h("div", { part: "fill", class: "bs-progress-linear__fill bs-progress-linear__fill--indeterminate" }))), this.showLabel && this.hasLabelContent && (h("span", { key: '5108afa0263e9532864557f284a78e101825e32f', part: "label", class: "bs-progress-linear__label" }, h("slot", { key: 'f11208b6b20dd14946b9c8a115677749d0d4c524' })))));
     }
     // 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

package/dist/collection/components/bs-qr-code/bs-qr-code.js

@@ -168,7 +168,7 @@ export class BsQrCode {
         const buttonSize = this.size === 'sm' ? 'sm' : 'md';
         // Figma shows the unavailable actions as filled-disabled (grey) rather than a faded outline,
         // which is what bs-button's disabled primary looks like.
-        return (h("bs-card", { key: 'c69bffccb96c2c76fabc8a68caa33598d330925c', part: "container", class: "bs-qr-code", surface: "base" }, this.closable && (h("bs-icon-button", { key: 'eddf5fd0434ef1d4a79c65cb76e643f5607c3690', part: "close", class: "bs-qr-code__close", variant: "subtle", size: "sm", ariaLabel: this.closeLabel, onClick: () => this.bsClose.emit() }, h("svg", { key: '04751b373bc8ccf24b0777646598f6b0b594dd1d', viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", "stroke-width": "1.6", "stroke-linecap": "round", "aria-hidden": "true" }, h("path", { key: 'e40257103cb9c062af6806874a44cc4050b91a09', d: "M5 5L15 15M15 5L5 15" })))), h("div", { key: '55689fd3950bf8a52fcc13e51447b329414c846d', class: "bs-qr-code__body" }, h("div", { key: '7335ae0ae9f42fe3b99b1dc8096338c1b0d12fc4', part: "head", class: "bs-qr-code__head" }, h("p", { key: '1d6288133f9619f865782d75352e02ffbd4b3cb3', part: "title", class: "bs-qr-code__title" }, this.heading), this.description && (h("p", { key: '2ac5a838cc0d524b726363a5711fcfd3558e7738', part: "description", class: "bs-qr-code__description" }, this.description))), h("div", { key: '2412e4792a4ba605c3e8c68652600901f00fbd9c', part: "qr", class: "bs-qr-code__qr" }, h("div", { key: '480f7b27bdb7521592cf200fa2e8a36b89742d94', part: "code", class: "bs-qr-code__code" }, h("slot", { key: 'cc20adaeea528bdaddc2187fd48d8c33b6c29984', name: "code" }, this.renderMatrix()), h("div", { key: '98ad7405250536002da78c856fe34f29101d6b8b', part: "logo", class: { 'bs-qr-code__logo': true, 'bs-qr-code__logo--visible': this.hasLogo } }, h("slot", { key: 'fa3ad80018891516474a16cdc74f7c40b3ff7193', name: "logo", onSlotchange: (ev) => (this.hasLogo = ev.target.assignedNodes().length > 0) }))), this.renderOverlay()), this.type === 'payment' && this.amount && (h("div", { key: '16aea140dffc0b85679923c72ff68f73496cd382', part: "amount", class: "bs-qr-code__amount" }, this.amountLabel && h("p", { key: '4b6c14f95fbc75fa750361bedb63e06f6cf8fbfa', class: "bs-qr-code__amount-label" }, this.amountLabel), h("p", { key: '23ef126293fe71e364e2fe6d8bf7e9570a0a8073', class: "bs-qr-code__amount-value" }, this.amount))), this.type === 'default' && this.url && (h("div", { key: '055769372c728d26f4a7b0ca15b4c1e9d9182f85', part: "url", class: "bs-qr-code__url" }, this.url)), this.expiry && (h("bs-chip-informative", { key: '2bda390d9e14ba387015619c5d51c136f344d42c', part: "expiry", size: "md" }, h(TimerIcon, { key: 'daa9d8dd4b9dbbc3f0a01d4c203020a7a128e3e4', slot: "icon" }), this.expiry)), showActions && (h("div", { key: '42fdca6de6985912a93580b60a69b06de86ab240', part: "actions", class: "bs-qr-code__actions" }, !this.hideDownload && (h("bs-button", { key: 'da9f965b3c996842c2f7c853b12baa7cd1523d0b', part: "download", variant: interactive ? 'outlined' : 'primary', size: buttonSize, disabled: !interactive, onClick: () => interactive && this.bsDownload.emit() }, h(DownloadIcon, { key: 'c0ff457c873583ba21dc0ef936b5b75723170921', slot: "icon" }), this.downloadLabel)), !this.hideCopy && (h("bs-button", { key: '023df4653bdbcf8440c511818a27f8363218c202', part: "copy", variant: interactive ? 'outlined' : 'primary', size: buttonSize, disabled: !interactive, onClick: () => interactive && this.onCopy() }, h(CopyIcon, { key: '0abdffdb59b543625340be0af0bfabd21fa57bca', slot: "icon" }), this.copyLabel)))))));
+        return (h("bs-card", { key: '9dcc08a36b53be095268fa035cd353e9b7c41c99', part: "container", class: "bs-qr-code", surface: "base" }, this.closable && (h("bs-icon-button", { key: 'a21cc673270c2c62b45d940f64c0bb699015aea6', part: "close", class: "bs-qr-code__close", variant: "subtle", size: "sm", ariaLabel: this.closeLabel, onClick: () => this.bsClose.emit() }, h("svg", { key: '041c7fa3a28984132b902790be6eb39a705d3264', viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", "stroke-width": "1.6", "stroke-linecap": "round", "aria-hidden": "true" }, h("path", { key: '98674de35512104169431e97649bc3c96503e0f8', d: "M5 5L15 15M15 5L5 15" })))), h("div", { key: '7a23d1ca31ca4783e1dbd38b104d9b03b9005a22', class: "bs-qr-code__body" }, h("div", { key: '6dd6d0b87236d6014a0139cde0eb4f1c49f58b6f', part: "head", class: "bs-qr-code__head" }, h("p", { key: 'daceb6bc02f5222d57d2927646eaf070b7bd2eb8', part: "title", class: "bs-qr-code__title" }, this.heading), this.description && (h("p", { key: '093646862310a7c1e1e69d50ce2fbb3e4a314b4c', part: "description", class: "bs-qr-code__description" }, this.description))), h("div", { key: '1f72b15e61abefa109b2df0fbce25ca2361dc7ad', part: "qr", class: "bs-qr-code__qr" }, h("div", { key: '734ed44250b1c83b06cebadb1a79c4fdab8bd08a', part: "code", class: "bs-qr-code__code" }, h("slot", { key: 'c2387e32896dcff0b40cf6120c9a87288d473e2d', name: "code" }, this.renderMatrix()), h("div", { key: '2201211627ac42a11c353d436133cc130d69fafd', part: "logo", class: { 'bs-qr-code__logo': true, 'bs-qr-code__logo--visible': this.hasLogo } }, h("slot", { key: 'f9951a31812036669bf4a478964b3ebfab6d1de6', name: "logo", onSlotchange: (ev) => (this.hasLogo = ev.target.assignedNodes().length > 0) }))), this.renderOverlay()), this.type === 'payment' && this.amount && (h("div", { key: '13f499cb0d56c35f86dfd068e576d61ea2e7780f', part: "amount", class: "bs-qr-code__amount" }, this.amountLabel && h("p", { key: 'ac7fa6ac5d9367812f679c8d43a5abdb65b07bbb', class: "bs-qr-code__amount-label" }, this.amountLabel), h("p", { key: '93d93733c7fa87f8def870f000b713347b0c991c', class: "bs-qr-code__amount-value" }, this.amount))), this.type === 'default' && this.url && (h("div", { key: '6ba70952dc39ec3feb3e1e93bcdbddad1ae0502d', part: "url", class: "bs-qr-code__url" }, this.url)), this.expiry && (h("bs-chip-informative", { key: '9a010954e75bee6c336aa252497309774d99b186', part: "expiry", size: "md" }, h(TimerIcon, { key: 'b8e4be04e71c93ce27c0ce62e33414d83a710d45', slot: "icon" }), this.expiry)), showActions && (h("div", { key: '6f3c1a0894ddf3dad11981fae385fd5f8e8c1c22', part: "actions", class: "bs-qr-code__actions" }, !this.hideDownload && (h("bs-button", { key: '6fcc1e9e93b22ce2a71195e471fc0283eba308ae', part: "download", variant: interactive ? 'outlined' : 'primary', size: buttonSize, disabled: !interactive, onClick: () => interactive && this.bsDownload.emit() }, h(DownloadIcon, { key: 'c8f881995f35bba01785f8c170625857c24c1a62', slot: "icon" }), this.downloadLabel)), !this.hideCopy && (h("bs-button", { key: 'd0277646f40e5703dafa7d526d873c1f68506396', part: "copy", variant: interactive ? 'outlined' : 'primary', size: buttonSize, disabled: !interactive, onClick: () => interactive && this.onCopy() }, h(CopyIcon, { key: 'e4e0c6bd298beba16a1f60c11a0cbecff494a972', slot: "icon" }), this.copyLabel)))))));
     }
     static get is() { return "bs-qr-code"; }
     static get encapsulation() { return "shadow"; }

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

@@ -67,4 +67,12 @@ describe('bs-radio', () => {
         const label = root.shadowRoot.querySelector('[part="label"]');
         expect(label.querySelector('slot')).not.toBeNull();
     });
+    it('forwards ariaLabel to the native input as aria-label', async () => {
+        const { root } = await render(h("bs-radio", { name: "g", value: "a", ariaLabel: "Light theme" }));
+        expect(root.shadowRoot.querySelector('input')).toEqualAttribute('aria-label', 'Light theme');
+    });
+    it('has no aria-label by default', async () => {
+        const { root } = await render(h("bs-radio", { name: "g", value: "a" }, "Light"));
+        expect(root.shadowRoot.querySelector('input').hasAttribute('aria-label')).toBe(false);
+    });
 });

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

@@ -168,3 +168,9 @@
   .bs-radio__circle { border: 2px solid ButtonText; forced-color-adjust: none; background: Canvas; }
   .bs-radio__dot { background: Highlight; }
 }
+
+/* The hit area is already the round halo's size; tint with the brand colour. The press target is the whole label. */
+.bs-radio__ripple {
+  border-radius: 50%;
+  --bs-ripple-color: var(--bs-color-primary-default);
+}

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

@@ -15,6 +15,7 @@ import { h } from "@stencil/core";
  * @part circle - The visual radio ring.
  * @part dot - The center fill shown inside the ring when `checked`.
  * @part label - The label text wrapper.
+ * @part ripple - The press-ripple halo (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
  */
 // 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
@@ -30,6 +31,10 @@ export class BsRadio {
     /** The native radio input's `value` attribute -- read from `event.target.value`, or used when
      * wiring the group up to a form. */
     value;
+    /** Accessible name for the radio, set as `aria-label` on the native input. Use it when the radio
+     * has no slotted label text (an icon-only choice) or its visible label lives elsewhere. Same as
+     * `bs-checkbox` / `bs-switch`. */
+    ariaLabel = null;
     /** 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
@@ -53,7 +58,7 @@ export class BsRadio {
         return Array.from(root.querySelectorAll('bs-radio')).filter(r => r.name === this.name);
     }
     onCheckedChange() {
-        this.internals?.setFormValue?.(this.checked ? this.value ?? 'on' : null);
+        this.internals?.setFormValue?.(this.checked ? (this.value ?? 'on') : null);
         if (this.checked) {
             this.groupMembers().forEach(r => {
                 if (r !== this.el && r.checked)
@@ -70,7 +75,7 @@ export class BsRadio {
     }
     componentWillLoad() {
         this.initialChecked = this.checked;
-        this.internals?.setFormValue?.(this.checked ? this.value ?? 'on' : null);
+        this.internals?.setFormValue?.(this.checked ? (this.value ?? 'on') : null);
     }
     componentDidLoad() {
         this.refreshGroupState();
@@ -104,7 +109,7 @@ export class BsRadio {
         }
     };
     render() {
-        return (h("label", { key: '886be8e0972dcb7d918447186ac6972a9132eb02', class: `bs-radio ${this.disabled ? 'bs-radio--disabled' : ''}` }, h("input", { key: 'd82e6e5d9a5a283bf3a0590add040cfb8f153fb7', 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: '3844f7c165afc6c2de1b4befbe0d6aa5b89dab42', class: "bs-radio__hit-area" }, h("span", { key: 'd710b061715195882f889284e4b13dc872df03be', class: "bs-radio__state-layer" }, h("span", { key: 'd7eaa53202cfd9884ea6f890ff609e678d043fb0', part: "circle", class: `bs-radio__circle ${this.checked ? 'bs-radio__circle--selected' : ''}` }, this.checked && h("span", { key: 'c4942a1f370d7822a88e05a5d150bc5cb9cdd426', part: "dot", class: "bs-radio__dot" })))), h("span", { key: '79b5334b22ffe48a63bff43b0a8ce3df8c57e9cb', part: "label", class: "bs-radio__label" }, h("slot", { key: 'f71e839a6afe980e2ef54d40c4b40d6513ff0540' }))));
+        return (h("label", { key: '1dfd58a24e299fe2a26e16dbfeb7d7246b7ae061', class: `bs-radio ${this.disabled ? 'bs-radio--disabled' : ''}` }, h("input", { key: '3fd3733f26e706e37721bc7e5444aeba2f9ca635', class: "bs-radio__input", type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, "aria-label": this.ariaLabel, tabIndex: this.checked || !this.groupHasChecked ? 0 : -1, onKeyDown: this.onKeyDown, onChange: this.onChange }), h("span", { key: 'c3a5a1e790748393f384525413a4cf59be9d1885', class: "bs-radio__hit-area" }, h("bs-ripple", { key: '20b0b6b017644e259a3935ab88b9a512ea9471b7', part: "ripple", class: "bs-radio__ripple", centered: true, triggerSelector: ".bs-radio", disabled: this.disabled }), h("span", { key: '0bed296533c97c2e94260969a5486c76b905e205', class: "bs-radio__state-layer" }, h("span", { key: 'a8f71a9aecdaff2329d3179de0d37797c53a79d6', part: "circle", class: `bs-radio__circle ${this.checked ? 'bs-radio__circle--selected' : ''}` }, this.checked && h("span", { key: '0409d98b080ac54541353068548d149fb22e0dba', part: "dot", class: "bs-radio__dot" })))), h("span", { key: 'ce380ae5ab8ccb1b0b033d04095bb53dd2090be4', part: "label", class: "bs-radio__label" }, h("slot", { key: '39b83b5fd4a2337379cfbba0dd931a93e9c379e3' }))));
     }
     static get is() { return "bs-radio"; }
     static get encapsulation() { return "shadow"; }
@@ -160,6 +165,26 @@ export class BsRadio {
                 "reflect": false,
                 "attribute": "value"
             },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name for the radio, set as `aria-label` on the native input. Use it when the radio\nhas no slotted label text (an icon-only choice) or its visible label lives elsewhere. Same as\n`bs-checkbox` / `bs-switch`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "null"
+            },
             "checked": {
                 "type": "boolean",
                 "mutable": true,

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

@@ -0,0 +1,85 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+import { runAxeCheck } from "../../test/helpers/conventions";
+const radios = (root) => Array.from(root.querySelectorAll('bs-radio'));
+const input = (r) => r.shadowRoot.querySelector('input');
+const group = (root) => root.shadowRoot.querySelector('[role="radiogroup"]');
+const basic = (extra = {}) => (h("bs-radio-group", { label: "Plan", ...extra }, h("bs-radio", { value: "a" }, "A"), h("bs-radio", { value: "b" }, "B"), h("bs-radio", { value: "c" }, "C")));
+describe('bs-radio-group', () => {
+    it('is a radiogroup named by its label', async () => {
+        const { root } = await render(basic());
+        const g = group(root);
+        const label = root.shadowRoot.querySelector('[part="label"]');
+        expect(g).toEqualAttribute('aria-labelledby', label.id);
+        expect(label.textContent).toBe('Plan');
+    });
+    it('gives all radios one shared name', async () => {
+        const { root, waitForChanges } = await render(basic({ name: 'plan' }));
+        await waitForChanges();
+        expect(radios(root).map(r => r.name)).toEqual(['plan', 'plan', 'plan']);
+        const { root: auto } = await render(basic());
+        const names = new Set(radios(auto).map(r => r.name));
+        expect(names.size).toBe(1);
+        expect([...names][0]).toBeTruthy();
+    });
+    it('value checks the matching radio only', async () => {
+        const { root, waitForChanges } = await render(basic({ value: 'b' }));
+        await waitForChanges();
+        expect(radios(root).map(r => r.checked)).toEqual([false, true, false]);
+        root.value = 'c';
+        await waitForChanges();
+        expect(radios(root).map(r => r.checked)).toEqual([false, false, true]);
+    });
+    it('keeps only the first radio when several start checked', async () => {
+        const { root, waitForChanges } = await render(h("bs-radio-group", { label: "x" }, h("bs-radio", { value: "a", checked: true }, "A"), h("bs-radio", { value: "b", checked: true }, "B")));
+        await waitForChanges();
+        expect(radios(root).map(r => r.checked)).toEqual([true, false]);
+        expect(root.value).toBe('a');
+    });
+    it('selectFirst checks the first enabled radio', async () => {
+        const { root, waitForChanges } = await render(h("bs-radio-group", { label: "x", selectFirst: true }, h("bs-radio", { value: "a", disabled: true }, "A"), h("bs-radio", { value: "b" }, "B")));
+        await waitForChanges();
+        expect(radios(root).map(r => r.checked)).toEqual([false, true]);
+    });
+    it('emits one bsChange with the value when a radio is clicked', async () => {
+        const { root, waitForChanges, spyOnEvent } = await render(basic());
+        await waitForChanges();
+        const spy = spyOnEvent('bsChange');
+        input(radios(root)[1]).click();
+        await waitForChanges();
+        expect(spy).toHaveReceivedEventTimes(1);
+        expect(spy).toHaveReceivedEventDetail('b');
+        expect(root.value).toBe('b');
+    });
+    it('arrow keys move the selection', async () => {
+        const { root, waitForChanges } = await render(basic({ value: 'a' }));
+        await waitForChanges();
+        input(radios(root)[0]).dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true, cancelable: true }));
+        await waitForChanges();
+        expect(root.value).toBe('b');
+        expect(radios(root).map(r => r.checked)).toEqual([false, true, false]);
+    });
+    it('shows helper text, replaced by the error, wired with aria-describedby', async () => {
+        const { root, waitForChanges } = await render(basic({ description: 'Pick one' }));
+        const desc = root.shadowRoot.querySelector('[part="description"]');
+        expect(desc.textContent).toBe('Pick one');
+        expect(group(root)).toEqualAttribute('aria-describedby', desc.id);
+        root.error = 'Required';
+        await waitForChanges();
+        expect(root.shadowRoot.querySelector('[part="description"]')).toBeNull();
+        const err = root.shadowRoot.querySelector('[part="error"]');
+        expect(err.textContent).toBe('Required');
+        expect(group(root)).toEqualAttribute('aria-invalid', 'true');
+        expect(group(root)).toEqualAttribute('aria-describedby', err.id);
+    });
+    it('horizontal orientation lays radios in a row', async () => {
+        const { root } = await render(basic({ orientation: 'horizontal' }));
+        expect(getComputedStyle(root.shadowRoot.querySelector('[part="options"]')).flexDirection).toBe('row');
+        const { root: v } = await render(basic());
+        expect(getComputedStyle(v.shadowRoot.querySelector('[part="options"]')).flexDirection).toBe('column');
+    });
+    it('passes axe', async () => {
+        const { root, waitForChanges } = await render(basic({ value: 'a', description: 'Pick one', required: true }));
+        await waitForChanges();
+        await runAxeCheck(root);
+    });
+});

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

@@ -0,0 +1,59 @@
+/**
+ * @prop --bs-radio-group-gap: Gap between the label, the options and the helper/error text. Aliased to --bs-spacing-50.
+ * @prop --bs-radio-group-options-gap: Gap between radios. Aliased to --bs-spacing-0 (vertical) / --bs-spacing-300 (horizontal); each radio already has a 48px hit area.
+ * @prop --bs-radio-group-label-color: Label colour. Aliased to --bs-text-default.
+ * @prop --bs-radio-group-description-color: Helper text colour. Aliased to --bs-text-secondary.
+ * @prop --bs-radio-group-error-color: Error text colour. Aliased to --bs-text-error.
+ */
+:host {
+  display: block;
+
+  --bs-radio-group-gap: var(--bs-spacing-50);
+  --bs-radio-group-options-gap: var(--bs-spacing-0);
+  --bs-radio-group-label-color: var(--bs-text-default);
+  --bs-radio-group-description-color: var(--bs-text-secondary);
+  --bs-radio-group-error-color: var(--bs-text-error);
+}
+
+:host([orientation='horizontal']) {
+  --bs-radio-group-options-gap: var(--bs-spacing-300);
+}
+
+.bs-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-radio-group-gap);
+  font-family: inherit;
+}
+
+.bs-radio-group__label {
+  font-size: var(--bs-font-size-md);
+  font-weight: var(--bs-font-weight-medium);
+  color: var(--bs-radio-group-label-color);
+}
+
+.bs-radio-group__options {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--bs-radio-group-options-gap);
+}
+
+:host([orientation='horizontal']) .bs-radio-group__options {
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.bs-radio-group__description,
+.bs-radio-group__error {
+  font-size: var(--bs-font-size-xs);
+}
+
+.bs-radio-group__description {
+  color: var(--bs-radio-group-description-color);
+}
+
+.bs-radio-group__error {
+  color: var(--bs-radio-group-error-color);
+}