@boostdev/design-system-components 2.7.1 → 2.11.0

package/src/web-components/interaction/form/bds-radio-group.spec.ts

@@ -59,4 +59,61 @@ describe('bds-radio-group', () => {
     expect(radio?.getAttribute('name')).toBe('contact');
     cleanup(el);
   });
+
+  it('propagates disabled to slotted bds-radio elements', async () => {
+    const el = await fixture(
+      '<bds-radio-group label="Contact" name="contact" disabled><bds-radio value="email">Email</bds-radio><bds-radio value="phone">Phone</bds-radio></bds-radio-group>',
+    ) as BdsRadioGroup;
+    await Promise.resolve();
+    const radios = Array.from(el.querySelectorAll('bds-radio'));
+    expect(radios.every(radio => radio.hasAttribute('disabled'))).toBe(true);
+    cleanup(el);
+  });
+
+  it('removes propagated disabled from slotted bds-radio elements when re-enabled, keeping individually-disabled ones', async () => {
+    const el = await fixture(
+      '<bds-radio-group label="Contact" name="contact" disabled>' +
+        '<bds-radio value="email">Email</bds-radio>' +
+        '<bds-radio value="phone" disabled>Phone</bds-radio>' +
+        '</bds-radio-group>',
+    ) as BdsRadioGroup;
+    await Promise.resolve();
+
+    el.disabled = false;
+    await el.updateComplete;
+    await Promise.resolve();
+
+    const [email, phone] = Array.from(el.querySelectorAll('bds-radio'));
+    expect(email.hasAttribute('disabled')).toBe(false);
+    expect(phone.hasAttribute('disabled')).toBe(true);
+    cleanup(el);
+  });
+
+  it('sets aria-required on the fieldset when required', async () => {
+    const el = await fixture('<bds-radio-group label="Test" required></bds-radio-group>');
+    const fieldset = el.shadowRoot!.querySelector('fieldset')!;
+    expect(fieldset.getAttribute('aria-required')).toBe('true');
+    cleanup(el);
+  });
+
+  it('does not set aria-required when not required', async () => {
+    const el = await fixture('<bds-radio-group label="Test"></bds-radio-group>');
+    const fieldset = el.shadowRoot!.querySelector('fieldset')!;
+    expect(fieldset.hasAttribute('aria-required')).toBe(false);
+    cleanup(el);
+  });
+
+  it('wires aria-describedby on the fieldset to the error message id', async () => {
+    const el = await fixture('<bds-radio-group label="Test" error="Required field"></bds-radio-group>');
+    const fieldset = el.shadowRoot!.querySelector('fieldset')!;
+    const message = el.shadowRoot!.querySelector('.message--error')!;
+    expect(fieldset.getAttribute('aria-describedby')).toBe(message.id);
+    cleanup(el);
+  });
+
+  it('uses medium font-weight token for the legend (not semibold)', () => {
+    const styles = BdsRadioGroup.styles.toString();
+    expect(styles).toContain('--bds-font_weight--medium');
+    expect(styles).not.toContain('--bds-font_weight--semibold');
+  });
 });

package/src/web-components/interaction/form/bds-radio-group.ts

@@ -1,17 +1,20 @@
-import { LitElement, css, html } from 'lit';
+import { LitElement, css, html, nothing } from 'lit';
 
 /**
  * `<bds-radio-group>` — groups related radio buttons with a shared label and name.
  *
  * Renders a `<fieldset>` with a `<legend>`. Propagates the `name` attribute to
- * all slotted `<bds-radio>` elements so radios form a mutually-exclusive set.
+ * all slotted `<bds-radio>` elements so radios form a mutually-exclusive set,
+ * and propagates `disabled` the same way — a group-level `disabled` attribute
+ * disables every slotted `<bds-radio>` (a shadow-DOM `<fieldset disabled>` has
+ * no effect on slotted light-DOM content on its own).
  *
  * Attributes:
  *   label    — visible group label (rendered as `<legend>`)
  *   name     — shared name forwarded to all slotted `<bds-radio>` elements
  *   error    — error message shown below items
  *   hint     — hint text shown below items
- *   disabled — disables the entire fieldset
+ *   disabled — disables the entire fieldset and all slotted `<bds-radio>` elements
  *   required — marks the group as required
  *
  * Slots:
@@ -25,6 +28,16 @@ import { LitElement, css, html } from 'lit';
  */
 export class BdsRadioGroup extends LitElement {
   static styles = css`
+    /* Shadow DOM does not inherit the global box-sizing reset, so set it
+       here; otherwise elements with an explicit size + padding size as
+       content-box and layouts drift from the React (light-DOM) versions. */
+    :host,
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
     :host {
       display: block;
     }
@@ -38,7 +51,7 @@ export class BdsRadioGroup extends LitElement {
     .legend {
       font-size: var(--bds-font_size--body--s);
       font-family: var(--bds-font_family--body);
-      font-weight: var(--bds-font_weight--semibold);
+      font-weight: var(--bds-font_weight--medium);
       color: var(--bds-color_on-bg);
       margin-block-end: var(--bds-space_xs);
     }
@@ -86,6 +99,8 @@ export class BdsRadioGroup extends LitElement {
   declare disabled: boolean;
   declare required: boolean;
 
+  private readonly _uid = Math.random().toString(36).slice(2, 8);
+
   constructor() {
     super();
     this.label = '';
@@ -101,33 +116,66 @@ export class BdsRadioGroup extends LitElement {
     });
   };
 
+  /**
+   * Propagates `disabled` to slotted `<bds-radio>` elements. Only radios that were
+   * enabled before the group disabled them are re-enabled when the group re-enables —
+   * a radio individually marked `disabled` in markup stays disabled.
+   */
+  private _propagateDisabled = () => {
+    this.querySelectorAll('bds-radio').forEach(radio => {
+      const el = radio as HTMLElement;
+      if (this.disabled) {
+        if (!el.hasAttribute('disabled')) {
+          el.setAttribute('data-bds-group-disabled', '');
+        }
+        el.setAttribute('disabled', '');
+      } else if (el.hasAttribute('data-bds-group-disabled')) {
+        el.removeAttribute('disabled');
+        el.removeAttribute('data-bds-group-disabled');
+      }
+    });
+  };
+
+  private _propagateToRadios = () => {
+    this._propagateName();
+    this._propagateDisabled();
+  };
+
   connectedCallback() {
     super.connectedCallback();
-    // Propagate name after slot content has been parsed
-    Promise.resolve().then(this._propagateName);
+    // Propagate after slot content has been parsed
+    Promise.resolve().then(this._propagateToRadios);
   }
 
   updated(changed: Map<string, unknown>) {
     super.updated(changed);
-    if (changed.has('name')) {
-      this._propagateName();
+    if (changed.has('name') || changed.has('disabled')) {
+      this._propagateToRadios();
     }
   }
 
   render() {
+    const errorId = `bds-radio-group-${this._uid}-error`;
+    const hintId = `bds-radio-group-${this._uid}-hint`;
+    const describedBy = [this.error && errorId, this.hint && hintId].filter(Boolean).join(' ') || undefined;
+
     return html`
-      <fieldset ?disabled=${this.disabled}>
+      <fieldset
+        ?disabled=${this.disabled}
+        aria-required=${this.required ? 'true' : nothing}
+        aria-describedby=${describedBy ?? nothing}
+      >
         <legend class="legend">
           ${this.label}
           ${this.required ? html`<span class="required" aria-hidden="true"> *</span>` : ''}
         </legend>
         <div class="items">
-          <slot @slotchange=${this._propagateName}></slot>
+          <slot @slotchange=${this._propagateToRadios}></slot>
         </div>
         ${this.error
-          ? html`<p class="message message--error" role="alert">${this.error}</p>`
+          ? html`<p id=${errorId} class="message message--error" role="alert">${this.error}</p>`
           : this.hint
-            ? html`<p class="message message--hint">${this.hint}</p>`
+            ? html`<p id=${hintId} class="message message--hint">${this.hint}</p>`
             : ''}
       </fieldset>
     `;

package/src/web-components/interaction/form/bds-radio.spec.ts

@@ -67,4 +67,127 @@ describe('bds-radio', () => {
   it('is form-associated', () => {
     expect(BdsRadio.formAssociated).toBe(true);
   });
+
+  it('sets aria-invalid on the input when error is set', async () => {
+    const el = await fixture('<bds-radio name="size" value="m" error>Medium</bds-radio>');
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    expect(input.getAttribute('aria-invalid')).toBe('true');
+    cleanup(el);
+  });
+
+  it('renders description text linked via aria-describedby', async () => {
+    const el = await fixture('<bds-radio name="size" value="m" description="Fits most people">Medium</bds-radio>');
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    const description = el.shadowRoot!.querySelector('.description')!;
+    expect(description.textContent?.trim()).toBe('Fits most people');
+    expect(input.getAttribute('aria-describedby')).toBe(description.id);
+    cleanup(el);
+  });
+
+  it('restores the initial checked state on form reset', async () => {
+    const el = await fixture('<bds-radio name="size" value="m" checked>Medium</bds-radio>') as BdsRadio;
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    input.checked = false;
+    input.dispatchEvent(new Event('change', { bubbles: true }));
+    expect(el.checked).toBe(false);
+
+    el.formResetCallback();
+    await el.updateComplete;
+    expect(el.checked).toBe(true);
+    cleanup(el);
+  });
+
+  it('resets to unchecked when it was not initially checked', async () => {
+    const el = await fixture('<bds-radio name="size" value="m">Medium</bds-radio>') as BdsRadio;
+    el.checked = true;
+    await el.updateComplete;
+
+    el.formResetCallback();
+    await el.updateComplete;
+    expect(el.checked).toBe(false);
+    cleanup(el);
+  });
+
+  describe('group semantics (multiple bds-radio elements sharing a name)', () => {
+    it('unchecks other bds-radio elements sharing the same name when one becomes checked', async () => {
+      const a = await fixture('<bds-radio name="plan" value="a" checked>A</bds-radio>') as BdsRadio;
+      const b = await fixture('<bds-radio name="plan" value="b">B</bds-radio>') as BdsRadio;
+      const bInput = b.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+
+      bInput.checked = true;
+      bInput.dispatchEvent(new Event('change', { bubbles: true }));
+      await b.updateComplete;
+      await a.updateComplete;
+
+      expect(b.checked).toBe(true);
+      expect(a.checked).toBe(false);
+      cleanup(a);
+      cleanup(b);
+    });
+
+    it('does not affect bds-radio elements with a different name', async () => {
+      const a = await fixture('<bds-radio name="plan-x" value="a" checked>A</bds-radio>') as BdsRadio;
+      const c = await fixture('<bds-radio name="plan-y" value="c">C</bds-radio>') as BdsRadio;
+      const cInput = c.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+
+      cInput.checked = true;
+      cInput.dispatchEvent(new Event('change', { bubbles: true }));
+      await c.updateComplete;
+      await a.updateComplete;
+
+      expect(c.checked).toBe(true);
+      expect(a.checked).toBe(true);
+      cleanup(a);
+      cleanup(c);
+    });
+
+    it('dispatches a composed bds-change event when checked via user interaction', async () => {
+      const el = await fixture('<bds-radio name="notify" value="on">Notify</bds-radio>') as BdsRadio;
+      const handler = vi.fn();
+      el.addEventListener('bds-change', handler);
+
+      const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+      input.checked = true;
+      input.dispatchEvent(new Event('change', { bubbles: true }));
+
+      expect(handler).toHaveBeenCalledTimes(1);
+      const event = handler.mock.calls[0][0] as CustomEvent;
+      expect(event.composed).toBe(true);
+      expect(event.detail).toEqual({ value: 'on', checked: true });
+      cleanup(el);
+    });
+
+    it('moves selection to the next radio on ArrowDown', async () => {
+      const a = await fixture('<bds-radio name="nav" value="a" checked>A</bds-radio>') as BdsRadio;
+      const b = await fixture('<bds-radio name="nav" value="b">B</bds-radio>') as BdsRadio;
+
+      const aInput = a.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+      aInput.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+      await a.updateComplete;
+      await b.updateComplete;
+
+      expect(a.checked).toBe(false);
+      expect(b.checked).toBe(true);
+      cleanup(a);
+      cleanup(b);
+    });
+
+    it('skips disabled radios when navigating with arrow keys', async () => {
+      const a = await fixture('<bds-radio name="nav-2" value="a" checked>A</bds-radio>') as BdsRadio;
+      const b = await fixture('<bds-radio name="nav-2" value="b" disabled>B</bds-radio>') as BdsRadio;
+      const c = await fixture('<bds-radio name="nav-2" value="c">C</bds-radio>') as BdsRadio;
+
+      const aInput = a.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+      aInput.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+      await a.updateComplete;
+      await c.updateComplete;
+
+      expect(a.checked).toBe(false);
+      expect(b.checked).toBe(false);
+      expect(c.checked).toBe(true);
+      cleanup(a);
+      cleanup(b);
+      cleanup(c);
+    });
+  });
 });

package/src/web-components/interaction/form/bds-radio.ts

@@ -1,21 +1,31 @@
-import { LitElement, css, html } from 'lit';
+import { LitElement, css, html, nothing } from 'lit';
 
 /**
  * `<bds-radio>` — form-associated Radio custom element.
  *
  * Participates in HTML forms via the Form-Associated Custom Elements API.
- * Use multiple `<bds-radio>` elements with the same `name` to form a group.
+ * Use multiple `<bds-radio>` elements with the same `name` to form a group —
+ * checking one automatically unchecks the others sharing that `name`
+ * (searched within the same document/shadow root), and Arrow Up/Down/Left/Right
+ * move selection between them, mirroring native `<input type="radio">` semantics.
  *
  * Attributes:
- *   name     — form field name (groups radio buttons)
- *   value    — submitted value when selected
- *   checked  — boolean; whether this option is selected
- *   required — boolean
- *   disabled — boolean
+ *   name        — form field name (groups radio buttons)
+ *   value       — submitted value when selected
+ *   checked     — boolean; whether this option is selected
+ *   required    — boolean
+ *   disabled    — boolean
+ *   error       — boolean; visual + aria-invalid error state
+ *   description — optional supporting text rendered below the label
  *
  * Slots:
  *   (default) — label text
  *
+ * Events:
+ *   bds-change — fired when this radio becomes checked via user interaction;
+ *                `detail: { value: string, checked: true }`. Composed so it
+ *                crosses the shadow boundary (unlike the native `change` event).
+ *
  * @example
  * <bds-radio name="size" value="s">Small</bds-radio>
  * <bds-radio name="size" value="m" checked>Medium</bds-radio>
@@ -25,6 +35,16 @@ export class BdsRadio extends LitElement {
   static formAssociated = true;
 
   static styles = css`
+    /* Shadow DOM does not inherit the global box-sizing reset, so set it
+       here; otherwise elements with an explicit size + padding size as
+       content-box and layouts drift from the React (light-DOM) versions. */
+    :host,
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
     :host {
       display: inline-flex;
       align-items: flex-start;
@@ -42,22 +62,25 @@ export class BdsRadio extends LitElement {
     }
 
     .input {
+      box-sizing: border-box;
       --inputSize: calc(var(--bds-space_s) * 2);
-      margin-block-start: 0.25em;
+      margin-block-start: var(--radio_offset, 0.2em);
       inline-size: var(--inputSize);
       block-size: var(--inputSize);
       flex-shrink: 0;
-      --bdc_color: var(--radio_border-color, currentcolor);
-      --bdc-outline_radius: 50%;
+      color: var(--radio_color, var(--radio_border-color, var(--bds-color_on-bg)));
+      border: var(--radio_border, none);
+      --bdc_color: currentcolor;
+      --bdc-outline_radius: var(--bds-border_radius--circle);
 
-      border-radius: 50%;
+      border-radius: var(--radio_radius, var(--bdc-outline_radius));
       box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--radio_shadow, var(--bdc-outline_shadow));
-      border: none;
       appearance: none;
       background-color: var(--radio_color_bg, var(--bds-color_bg));
       cursor: pointer;
       position: relative;
-      transition: --bdc_color 0.3s ease, background-color 0.3s ease;
+      transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing),
+        background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
     }
 
     .input:checked {
@@ -69,23 +92,45 @@ export class BdsRadio extends LitElement {
       --bdc_color: var(--radio_color-active, var(--bdc-color_active));
     }
 
+    .input:focus {
+      --bdc_color: var(--bdc_color--focus);
+    }
+
     .input:focus-visible {
       outline: var(--bds-outline_default);
       outline-offset: var(--bds-outline_offset);
     }
 
+    :host([error]) .input {
+      --bdc_color: var(--bdc_color--error);
+    }
+
+    .textWrapper {
+      display: flex;
+      flex-direction: column;
+      gap: var(--bds-space_xxxs);
+      flex: 1;
+    }
+
     label {
       cursor: pointer;
-      flex: 1;
+    }
+
+    .description {
+      font-size: var(--bds-font_size--body--s);
+      color: var(--radio_description-color, var(--bds-color_on-bg--subtle));
+      line-height: var(--bds-font_line-height--body);
     }
   `;
 
   static properties = {
-    name:     { type: String, reflect: true },
-    value:    { type: String },
-    checked:  { type: Boolean, reflect: true },
-    required: { type: Boolean, reflect: true },
-    disabled: { type: Boolean, reflect: true },
+    name:        { type: String, reflect: true },
+    value:       { type: String },
+    checked:     { type: Boolean, reflect: true },
+    required:    { type: Boolean, reflect: true },
+    disabled:    { type: Boolean, reflect: true },
+    error:       { type: Boolean, reflect: true },
+    description: { type: String },
   };
 
   declare name: string;
@@ -93,9 +138,12 @@ export class BdsRadio extends LitElement {
   declare checked: boolean;
   declare required: boolean;
   declare disabled: boolean;
+  declare error: boolean;
+  declare description: string | undefined;
 
   private _internals!: ElementInternals;
   private readonly _uid = Math.random().toString(36).slice(2, 8);
+  private _initialChecked = false;
 
   constructor() {
     super();
@@ -105,6 +153,12 @@ export class BdsRadio extends LitElement {
     this.checked = false;
     this.required = false;
     this.disabled = false;
+    this.error = false;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._initialChecked = this.hasAttribute('checked');
   }
 
   updated(changed: Map<string, unknown>) {
@@ -115,16 +169,68 @@ export class BdsRadio extends LitElement {
   }
 
   formResetCallback() {
-    this.checked = false;
-    this._internals.setFormValue?.(null);
+    this.checked = this._initialChecked;
+    this._internals.setFormValue?.(this._initialChecked ? this.value : null);
+  }
+
+  /** All `<bds-radio>` elements sharing this radio's `name`, in document order (including this one). */
+  private _getGroupMembers(): BdsRadio[] {
+    if (!this.name) return [this];
+    const root = this.getRootNode() as Document | ShadowRoot;
+    return Array.from(root.querySelectorAll('bds-radio')).filter(radio => radio.name === this.name);
+  }
+
+  /** Marks `radio` as the sole checked member of its group and notifies listeners. */
+  private _selectRadio(radio: BdsRadio) {
+    this._getGroupMembers().forEach(member => {
+      if (member !== radio) member.checked = false;
+    });
+    radio.checked = true;
+    radio.dispatchEvent(new CustomEvent('bds-change', {
+      detail: { value: radio.value, checked: true },
+      bubbles: true,
+      composed: true,
+    }));
   }
 
   private _handleChange(e: Event) {
-    this.checked = (e.target as HTMLInputElement).checked;
+    const isChecked = (e.target as HTMLInputElement).checked;
+    if (isChecked) {
+      this._selectRadio(this);
+    } else {
+      this.checked = false;
+    }
+  }
+
+  private _handleKeydown = (e: KeyboardEvent) => {
+    if (this.disabled) return;
+    if (!['ArrowDown', 'ArrowRight', 'ArrowUp', 'ArrowLeft'].includes(e.key)) return;
+
+    const group = this._getGroupMembers().filter(member => !member.disabled);
+    if (group.length < 2) return;
+
+    e.preventDefault();
+    const currentIndex = group.indexOf(this);
+    const direction = e.key === 'ArrowDown' || e.key === 'ArrowRight' ? 1 : -1;
+    const next = group[(currentIndex + direction + group.length) % group.length];
+
+    this._selectRadio(next);
+    void next.updateComplete.then(() => {
+      next.shadowRoot?.querySelector<HTMLInputElement>('input')?.focus();
+    });
+  };
+
+  /** Roving tabindex: only the checked member (or the first member if none is checked) is tabbable. */
+  private _isTabbable(): boolean {
+    const group = this._getGroupMembers();
+    if (group.length <= 1) return true;
+    const checkedMember = group.find(member => member.checked);
+    return checkedMember ? checkedMember === this : group[0] === this;
   }
 
   render() {
     const id = `bds-radio-${this._uid}`;
+    const descriptionId = `${id}-description`;
     return html`
       <input
         id=${id}
@@ -135,9 +241,16 @@ export class BdsRadio extends LitElement {
         .checked=${this.checked}
         ?required=${this.required}
         ?disabled=${this.disabled}
+        tabindex=${this._isTabbable() ? 0 : -1}
+        aria-invalid=${this.error ? 'true' : 'false'}
+        aria-describedby=${this.description ? descriptionId : nothing}
         @change=${this._handleChange}
+        @keydown=${this._handleKeydown}
       />
-      <label for=${id}><slot></slot></label>
+      <div class="textWrapper">
+        <label for=${id}><slot></slot></label>
+        ${this.description ? html`<span id=${descriptionId} class="description">${this.description}</span>` : ''}
+      </div>
     `;
   }
 }

package/src/web-components/interaction/form/bds-segmented-control.spec.ts

@@ -71,4 +71,59 @@ describe('bds-segmented-control', () => {
   it('is form-associated', () => {
     expect(BdsSegmentedControl.formAssociated).toBe(true);
   });
+
+  it('fires a bds-change event with the selected value in detail', async () => {
+    const el = await fixture(`<bds-segmented-control name="view" options='${OPTIONS}'></bds-segmented-control>`);
+    const handler = vi.fn();
+    el.addEventListener('bds-change', handler);
+    const radios = [...el.shadowRoot!.querySelectorAll<HTMLInputElement>('input[type="radio"]')];
+    radios[0].dispatchEvent(new Event('change', { bubbles: true }));
+    expect(handler).toHaveBeenCalledOnce();
+    expect((handler.mock.calls[0][0] as CustomEvent).detail).toEqual({ value: 'list' });
+    cleanup(el);
+  });
+
+  it('sets a string aria-disabled value on disabled link-mode options', async () => {
+    const navOptions = JSON.stringify([
+      { value: 'home', label: 'Home', href: '/' },
+      { value: 'about', label: 'About', href: '/about', disabled: true },
+    ]);
+    const el = await fixture(`<bds-segmented-control value="home" options='${navOptions}'></bds-segmented-control>`);
+    const links = [...el.shadowRoot!.querySelectorAll('a')];
+    const disabledLink = links.find(a => a.textContent?.trim() === 'About')!;
+    const enabledLink = links.find(a => a.textContent?.trim() === 'Home')!;
+    expect(disabledLink.getAttribute('aria-disabled')).toBe('true');
+    expect(enabledLink.hasAttribute('aria-disabled')).toBe(false);
+    cleanup(el);
+  });
+
+  it('restores the initial value attribute on form reset', async () => {
+    const el = await fixture(`<bds-segmented-control name="view" value="grid" options='${OPTIONS}'></bds-segmented-control>`) as BdsSegmentedControl;
+    el.value = 'list';
+    el.formResetCallback();
+    expect(el.value).toBe('grid');
+    cleanup(el);
+  });
+
+  it('falls back to the first option on form reset when no initial value was set', async () => {
+    const el = await fixture(`<bds-segmented-control name="view" options='${OPTIONS}'></bds-segmented-control>`) as BdsSegmentedControl;
+    el.value = 'grid';
+    el.formResetCallback();
+    expect(el.value).toBe('list');
+    cleanup(el);
+  });
+
+  it('exposes --control_count and --control_selected-index on the control for CSS-driven positioning', async () => {
+    const el = await fixture(`<bds-segmented-control name="view" value="grid" options='${OPTIONS}'></bds-segmented-control>`);
+    const control = el.shadowRoot!.querySelector<HTMLElement>('.control')!;
+    expect(control.style.getPropertyValue('--control_count')).toBe('3');
+    expect(control.style.getPropertyValue('--control_selected-index')).toBe('1');
+    cleanup(el);
+  });
+
+  it('uses a focus-visible selector that can actually match (label wrapping the radio)', () => {
+    const cssText = BdsSegmentedControl.styles.toString();
+    expect(cssText).not.toContain('.item-label');
+    expect(cssText).toContain(':has(> .radio:focus-visible)');
+  });
 });