@boostdev/design-system-components 2.8.0 → 2.11.0

package/src/web-components/interaction/form/bds-number-input.ts

@@ -10,18 +10,31 @@ import { LitElement, css, html } from 'lit';
  *   max      — maximum allowed value
  *   step     — increment/decrement step (default: 1)
  *   disabled — boolean
+ *   label    — visible label text, associated with the input via `for`/`id`
+ *   hint     — helper text shown below the input
+ *   error    — error message; when set the input enters error state
  *
  * Events:
  *   input  — fired on stepper click and native input
  *   change — native change event
  *
  * @example
- * <bds-number-input name="qty" value="1" min="0" max="99" step="1"></bds-number-input>
+ * <bds-number-input name="qty" label="Quantity" value="1" min="0" max="99" step="1"></bds-number-input>
  */
 export class BdsNumberInput 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: block;
     }
@@ -31,42 +44,67 @@ export class BdsNumberInput extends LitElement {
       pointer-events: none;
     }
 
+    .label {
+      display: block;
+      font-size: var(--bds-font_size--body--s);
+      font-family: var(--bds-font_family--body);
+      font-weight: var(--bds-font_weight--semibold);
+      color: var(--bds-color_on-bg);
+      margin-block-end: var(--bds-space_xxs);
+    }
+
     .row {
       display: flex;
-      align-items: center;
+      align-items: stretch;
+      border: var(--numberInput_border, none);
+      /* deprecated: --number-input_border-color kept as a legacy override for the frame colour */
+      --bdc_color: var(--number-input_border-color, currentcolor);
+      --bdc-outline_radius: var(--bds-border_radius--full);
+
+      /* deprecated: --number-input_radius kept as a legacy fallback below --numberInput_radius */
+      --_radius: var(--numberInput_radius, var(--number-input_radius, var(--bdc-outline_radius)));
+
+      border-radius: var(--_radius);
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--numberInput_shadow, var(--number-input_shadow, var(--bdc-outline_shadow)));
+      overflow: hidden;
+      transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
+    }
+
+    :host([error]) .row {
+      --bdc_color: var(--bdc_color--error);
+    }
+
+    .row:focus-within {
+      --bdc_color: var(--bdc_color--focus);
+    }
+
+    :host([error]) .row:focus-within {
+      --bdc_color: var(--bdc_color--error);
+    }
+
+    .row:focus-within:has(:focus-visible) {
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
     }
 
     .input {
       flex: 1;
-      font-family: var(--bds-font_family--body);
-      font-size: var(--bds-font_size--body);
-      padding: var(--bds-space_s);
       border: none;
-      --bdc_color: var(--number-input_border-color, currentcolor);
-      --bdc-outline_radius: var(--bds-border_radius--xs);
-
-      border-radius: var(--number-input_radius, var(--bdc-outline_radius));
-      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--number-input_shadow, var(--bdc-outline_shadow));
-      background-color: var(--number-input_color_bg, var(--bds-color_bg));
-      color: var(--number-input_color, var(--bds-color_on-bg));
+      outline: none;
+      font-family: var(--bds-font_family--body);
+      font-size: var(--numberInput_font-size, var(--bds-font_size--body));
+      padding: var(--numberInput_padding, var(--bds-space_s));
+      /* deprecated: --number-input_color_bg kept as a legacy override; React default is transparent */
+      background: var(--number-input_color_bg, transparent);
+      color: var(--numberInput_color, var(--number-input_color, var(--bds-color_on-bg)));
       text-align: center;
-      -moz-appearance: textfield;
+      appearance: textfield;
       min-inline-size: 0;
     }
 
     .input::-webkit-inner-spin-button,
     .input::-webkit-outer-spin-button {
       appearance: none;
-      margin: 0;
-    }
-
-    .input:focus {
-      --bdc_color: var(--bdc_color--focus);
-    }
-
-    .input:focus-visible {
-      outline: var(--bds-outline_default);
-      outline-offset: var(--bds-outline_offset);
     }
 
     .stepper {
@@ -74,16 +112,25 @@ export class BdsNumberInput extends LitElement {
       display: flex;
       align-items: center;
       justify-content: center;
-      margin: 1px;
-      inline-size: 2rem;
-      block-size: 2rem;
-      border-radius: var(--bds-border_radius--xs);
+      padding: var(--numberInput_stepper-padding, var(--bds-space_xs));
+      margin: var(--bdc-outline_width);
       cursor: pointer;
       flex-shrink: 0;
-      color: var(--bds-color_interactive);
+      background-color: var(--numberInput_stepper-bg, var(--bds-color_bg--subtle));
+      color: var(--numberInput_stepper-color, var(--bds-color_interactive));
       transition: var(--bds-animation_transition);
     }
 
+    .stepper:first-child {
+      border-start-start-radius: var(--_radius);
+      border-end-start-radius: var(--_radius);
+    }
+
+    .stepper:last-child {
+      border-start-end-radius: var(--_radius);
+      border-end-end-radius: var(--_radius);
+    }
+
     .stepper:focus-visible {
       outline: var(--bds-outline_default);
       outline-offset: var(--bds-outline_offset);
@@ -96,13 +143,30 @@ export class BdsNumberInput extends LitElement {
 
     @media (hover: hover) and (pointer: fine) {
       .stepper:not(:disabled):hover {
-        background-color: var(--bds-color_bg--subtle);
+        background-color: var(--numberInput_stepper-bg--hover, var(--bds-color_bg--subtle));
+        opacity: var(--numberInput_stepper-opacity--hover, 0.7);
       }
     }
 
     .stepper svg {
       inline-size: 1rem;
       block-size: 1rem;
+      color: var(--numberInput_stepper-color, var(--bds-color_interactive));
+    }
+
+    .message {
+      margin-block-start: var(--bds-space_xxs);
+      font-size: var(--bds-font_size--body--s);
+      font-family: var(--bds-font_family--body);
+    }
+
+    .message--error {
+      color: var(--bds-color_error);
+    }
+
+    .message--hint {
+      color: var(--bds-color_on-bg--subtle);
+      font-style: italic;
     }
   `;
 
@@ -113,6 +177,9 @@ export class BdsNumberInput extends LitElement {
     max:      { type: Number },
     step:     { type: Number },
     disabled: { type: Boolean, reflect: true },
+    label:    { type: String },
+    hint:     { type: String },
+    error:    { type: String, reflect: true },
   };
 
   declare name: string;
@@ -121,8 +188,12 @@ export class BdsNumberInput extends LitElement {
   declare max: number | undefined;
   declare step: number;
   declare disabled: boolean;
+  declare label: string;
+  declare hint: string | undefined;
+  declare error: string | undefined;
 
   private _internals!: ElementInternals;
+  private readonly _uid = Math.random().toString(36).slice(2, 8);
 
   constructor() {
     super();
@@ -133,6 +204,9 @@ export class BdsNumberInput extends LitElement {
     this.max = undefined;
     this.step = 1;
     this.disabled = false;
+    this.label = '';
+    this.hint = undefined;
+    this.error = undefined;
   }
 
   updated(changed: Map<string, unknown>) {
@@ -168,13 +242,19 @@ export class BdsNumberInput extends LitElement {
   render() {
     const atMin = this.min !== undefined && this.value <= this.min;
     const atMax = this.max !== undefined && this.value >= this.max;
+    const id = `bds-number-input-${this._uid}`;
+    const hintId = `${id}-hint`;
+    const errorId = `${id}-error`;
+    const describedBy = [this.error && errorId, this.hint && hintId].filter(Boolean).join(' ') || undefined;
 
     return html`
+      ${this.label ? html`<label class="label" for=${id}>${this.label}</label>` : ''}
       <div class="row">
         <button
           type="button"
           class="stepper"
           aria-label="Decrease"
+          aria-controls=${id}
           tabindex="-1"
           ?disabled=${this.disabled || atMin}
           @click=${() => this._adjust(-this.step)}
@@ -184,6 +264,7 @@ export class BdsNumberInput extends LitElement {
           </svg>
         </button>
         <input
+          id=${id}
           type="number"
           class="input"
           name=${this.name}
@@ -192,12 +273,15 @@ export class BdsNumberInput extends LitElement {
           max=${this.max ?? ''}
           step=${this.step}
           ?disabled=${this.disabled}
+          aria-invalid=${this.error ? 'true' : 'false'}
+          aria-describedby=${describedBy ?? ''}
           @change=${this._handleChange}
         />
         <button
           type="button"
           class="stepper"
           aria-label="Increase"
+          aria-controls=${id}
           tabindex="-1"
           ?disabled=${this.disabled || atMax}
           @click=${() => this._adjust(this.step)}
@@ -207,6 +291,11 @@ export class BdsNumberInput extends LitElement {
           </svg>
         </button>
       </div>
+      ${this.error
+        ? html`<p id=${errorId} class="message message--error" role="alert">${this.error}</p>`
+        : this.hint
+          ? html`<p id=${hintId} class="message message--hint">${this.hint}</p>`
+          : ''}
     `;
   }
 }

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);
+    });
+  });
 });