@boostdev/design-system-components 1.1.2 → 1.2.1

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

@@ -0,0 +1,55 @@
+import { fixture, cleanup } from '../../test/helpers';
+import { BdsCheckboxGroup } from './bds-checkbox-group';
+
+describe('bds-checkbox-group', () => {
+  it('is registered as a custom element', () => {
+    expect(customElements.get('bds-checkbox-group')).toBe(BdsCheckboxGroup);
+  });
+
+  it('renders a fieldset', async () => {
+    const el = await fixture('<bds-checkbox-group label="Interests"></bds-checkbox-group>');
+    expect(el.shadowRoot!.querySelector('fieldset')).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('renders the label as a legend', async () => {
+    const el = await fixture('<bds-checkbox-group label="My Group"></bds-checkbox-group>');
+    const legend = el.shadowRoot!.querySelector('legend');
+    expect(legend?.textContent?.trim()).toContain('My Group');
+    cleanup(el);
+  });
+
+  it('renders slotted children', async () => {
+    const el = await fixture('<bds-checkbox-group label="Test"><span id="child">item</span></bds-checkbox-group>');
+    expect(el.shadowRoot!.querySelector('slot')).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('disables the fieldset when disabled attribute is set', async () => {
+    const el = await fixture('<bds-checkbox-group label="Test" disabled></bds-checkbox-group>');
+    const fieldset = el.shadowRoot!.querySelector('fieldset')!;
+    expect(fieldset.disabled).toBe(true);
+    cleanup(el);
+  });
+
+  it('shows required asterisk when required', async () => {
+    const el = await fixture('<bds-checkbox-group label="Test" required></bds-checkbox-group>');
+    const required = el.shadowRoot!.querySelector('.required');
+    expect(required).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('renders error message when error attribute is set', async () => {
+    const el = await fixture('<bds-checkbox-group label="Test" error="Select at least one"></bds-checkbox-group>');
+    const message = el.shadowRoot!.querySelector('.message--error');
+    expect(message?.textContent?.trim()).toBe('Select at least one');
+    cleanup(el);
+  });
+
+  it('renders hint message when hint attribute is set', async () => {
+    const el = await fixture('<bds-checkbox-group label="Test" hint="Select all that apply"></bds-checkbox-group>');
+    const message = el.shadowRoot!.querySelector('.message--hint');
+    expect(message?.textContent?.trim()).toBe('Select all that apply');
+    cleanup(el);
+  });
+});

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

@@ -0,0 +1,117 @@
+import { LitElement, css, html } from 'lit';
+
+/**
+ * `<bds-checkbox-group>` — groups related checkboxes with a shared label.
+ *
+ * Renders a `<fieldset>` with a `<legend>` for accessible grouping.
+ *
+ * Attributes:
+ *   label    — visible group label (rendered as `<legend>`)
+ *   error    — error message shown below items
+ *   hint     — hint text shown below items
+ *   disabled — disables the entire fieldset
+ *   required — marks the group as required
+ *
+ * Slots:
+ *   (default) — `<bds-checkbox>` elements
+ *
+ * @example
+ * <bds-checkbox-group label="Interests" required>
+ *   <bds-checkbox name="sports" value="sports">Sports</bds-checkbox>
+ *   <bds-checkbox name="music"  value="music">Music</bds-checkbox>
+ * </bds-checkbox-group>
+ */
+export class BdsCheckboxGroup extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+    }
+
+    fieldset {
+      border: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    .legend {
+      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_xs);
+    }
+
+    .required {
+      color: var(--bds-color_error);
+      margin-inline-start: var(--bds-space_xxxs);
+    }
+
+    .items {
+      display: flex;
+      flex-direction: column;
+      gap: var(--bds-space_xs);
+    }
+
+    .message {
+      margin-block-start: var(--bds-space_xs);
+      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);
+    }
+  `;
+
+  static properties = {
+    label:    { type: String },
+    error:    { type: String },
+    hint:     { type: String },
+    disabled: { type: Boolean, reflect: true },
+    required: { type: Boolean, reflect: true },
+  };
+
+  declare label: string;
+  declare error: string | undefined;
+  declare hint: string | undefined;
+  declare disabled: boolean;
+  declare required: boolean;
+
+  constructor() {
+    super();
+    this.label = '';
+    this.disabled = false;
+    this.required = false;
+  }
+
+  render() {
+    return html`
+      <fieldset ?disabled=${this.disabled}>
+        <legend class="legend">
+          ${this.label}
+          ${this.required ? html`<span class="required" aria-hidden="true"> *</span>` : ''}
+        </legend>
+        <div class="items">
+          <slot></slot>
+        </div>
+        ${this.error
+          ? html`<p class="message message--error" role="alert">${this.error}</p>`
+          : this.hint
+            ? html`<p class="message message--hint">${this.hint}</p>`
+            : ''}
+      </fieldset>
+    `;
+  }
+}
+
+customElements.define('bds-checkbox-group', BdsCheckboxGroup);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bds-checkbox-group': BdsCheckboxGroup;
+  }
+}

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

@@ -52,10 +52,8 @@ export class BdsCheckbox extends LitElement {
       --bdc_color: currentcolor;
       --bdc-outline_radius: var(--bds-border_radius--xs);
 
-      outline: var(--bdc-outline_width) solid var(--bdc_color);
-      outline-offset: var(--bdc-outline_offset);
       border-radius: var(--checkbox_radius, var(--bdc-outline_radius));
-      box-shadow: var(--checkbox_shadow, var(--bdc-outline_shadow));
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--checkbox_shadow, var(--bdc-outline_shadow));
       border: none;
       appearance: none;
       background-color: var(--checkbox_color_bg, var(--bds-color_bg));

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

@@ -57,10 +57,8 @@ export class BdsCombobox extends LitElement {
       --bdc_color: currentcolor;
       --bdc-outline_radius: var(--bds-border_radius--xs);
 
-      outline: var(--bdc-outline_width) solid var(--bdc_color);
-      outline-offset: var(--bdc-outline_offset);
       border-radius: var(--combobox_radius, var(--bdc-outline_radius));
-      box-shadow: var(--combobox_shadow, var(--bdc-outline_shadow));
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--combobox_shadow, var(--bdc-outline_shadow));
       background-color: var(--combobox_color_bg, var(--bds-color_bg));
       color: var(--combobox_color, var(--bds-color_on-bg));
       box-sizing: border-box;

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

@@ -0,0 +1,83 @@
+import { fixture, cleanup } from '../../test/helpers';
+import { BdsFormInput } from './bds-form-input';
+
+describe('bds-form-input', () => {
+  it('is registered as a custom element', () => {
+    expect(customElements.get('bds-form-input')).toBe(BdsFormInput);
+  });
+
+  it('is form-associated', () => {
+    expect(BdsFormInput.formAssociated).toBe(true);
+  });
+
+  it('renders an input element', async () => {
+    const el = await fixture('<bds-form-input name="email"></bds-form-input>');
+    expect(el.shadowRoot!.querySelector('input')).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('renders a label when label attribute is set', async () => {
+    const el = await fixture('<bds-form-input name="email" label="Email"></bds-form-input>');
+    expect(el.shadowRoot!.querySelector('label')?.textContent?.trim()).toContain('Email');
+    cleanup(el);
+  });
+
+  it('input id matches label for attribute', async () => {
+    const el = await fixture('<bds-form-input name="email" label="Email"></bds-form-input>');
+    const input = el.shadowRoot!.querySelector('input')!;
+    const label = el.shadowRoot!.querySelector('label')!;
+    expect(input.id).toBeTruthy();
+    expect(label.getAttribute('for')).toBe(input.id);
+    cleanup(el);
+  });
+
+  it('defaults type to text', async () => {
+    const el = await fixture('<bds-form-input name="search"></bds-form-input>') as BdsFormInput;
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    expect(input.type).toBe('text');
+    cleanup(el);
+  });
+
+  it('applies the specified type', async () => {
+    const el = await fixture('<bds-form-input name="pass" type="password"></bds-form-input>');
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    expect(input.type).toBe('password');
+    cleanup(el);
+  });
+
+  it('disables input when disabled attribute is set', async () => {
+    const el = await fixture('<bds-form-input name="email" disabled></bds-form-input>');
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    expect(input.disabled).toBe(true);
+    cleanup(el);
+  });
+
+  it('renders error message and sets aria-invalid when error is set', async () => {
+    const el = await fixture('<bds-form-input name="email" error="Invalid email"></bds-form-input>');
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    const errorMsg = el.shadowRoot!.querySelector('.message--error');
+    expect(input.getAttribute('aria-invalid')).toBe('true');
+    expect(errorMsg?.textContent?.trim()).toBe('Invalid email');
+    cleanup(el);
+  });
+
+  it('renders hint message when hint is set (no error)', async () => {
+    const el = await fixture('<bds-form-input name="email" hint="We will not share your email"></bds-form-input>');
+    const hint = el.shadowRoot!.querySelector('.message--hint');
+    expect(hint?.textContent?.trim()).toBe('We will not share your email');
+    cleanup(el);
+  });
+
+  it('fires bds-change on change', async () => {
+    const el = await fixture('<bds-form-input name="email"></bds-form-input>');
+    const values: string[] = [];
+    el.addEventListener('bds-change', (e: Event) => {
+      values.push((e as CustomEvent).detail.value);
+    });
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    Object.defineProperty(input, 'value', { value: 'test@example.com', writable: true });
+    input.dispatchEvent(new Event('change', { bubbles: true }));
+    expect(values).toEqual(['test@example.com']);
+    cleanup(el);
+  });
+});

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

@@ -0,0 +1,268 @@
+import { LitElement, css, html } from 'lit';
+
+/**
+ * `<bds-form-input>` — form-associated text input with label, hint, and error support.
+ *
+ * Participates in HTML forms via the Form-Associated Custom Elements API.
+ *
+ * Attributes:
+ *   name        — form field name
+ *   type        — input type: text | email | password | search | url | tel (default: "text")
+ *   value       — current value
+ *   placeholder — placeholder text
+ *   label       — visible label text
+ *   hint        — helper text shown below the input
+ *   error       — error message; when set the input enters error state
+ *   disabled    — disables the input
+ *   required    — marks the field as required
+ *
+ * Slots:
+ *   prefix — icon or text rendered before the input
+ *   suffix — icon or text rendered after the input
+ *
+ * Events:
+ *   bds-change — fired on value change; `detail: { value: string }`
+ *   bds-input  — fired on every keystroke; `detail: { value: string }`
+ *
+ * @example
+ * <bds-form-input name="email" type="email" label="Email address" required></bds-form-input>
+ */
+export class BdsFormInput extends LitElement {
+  static formAssociated = true;
+
+  static styles = css`
+    :host {
+      display: block;
+    }
+
+    :host([disabled]) {
+      opacity: 0.5;
+      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);
+    }
+
+    .required {
+      color: var(--bds-color_error);
+      margin-inline-start: var(--bds-space_xxxs);
+    }
+
+    .wrapper {
+      position: relative;
+      display: flex;
+      align-items: center;
+      --bdc_color: currentcolor;
+      --bdc-outline_radius: var(--bds-border_radius--xs);
+
+      border-radius: var(--formInput_radius, var(--bdc-outline_radius));
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--formInput_shadow, var(--bdc-outline_shadow));
+      background-color: var(--bds-color_bg);
+      transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
+    }
+
+    :host([error]) .wrapper {
+      --bdc_color: var(--bds-color_error);
+    }
+
+    .wrapper:focus-within {
+      --bdc_color: var(--bdc_color--focus);
+    }
+
+    :host([error]) .wrapper:focus-within {
+      --bdc_color: var(--bds-color_error);
+    }
+
+    .input {
+      flex: 1;
+      min-inline-size: 0;
+      border: none;
+      background: transparent;
+      padding: var(--bds-space_s);
+      font-size: var(--bds-font_size--body);
+      font-family: var(--bds-font_family--body);
+      color: var(--bds-color_on-bg);
+      outline: none;
+    }
+
+    .input::placeholder {
+      color: var(--bds-color_on-bg--subtle);
+    }
+
+    .input:focus-visible {
+      outline: none;
+    }
+
+    .wrapper:focus-within {
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
+      border-radius: var(--formInput_radius, var(--bdc-outline_radius));
+    }
+
+    .prefix,
+    .suffix {
+      display: flex;
+      align-items: center;
+      color: var(--bds-color_on-bg--subtle);
+      flex-shrink: 0;
+    }
+
+    .prefix {
+      padding-inline-start: var(--bds-space_s);
+    }
+
+    .suffix {
+      padding-inline-end: var(--bds-space_s);
+    }
+
+    .prefix:empty,
+    .suffix:empty {
+      display: none;
+    }
+
+    .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);
+    }
+  `;
+
+  static properties = {
+    name:        { type: String, reflect: true },
+    type:        { type: String, reflect: true },
+    value:       { type: String },
+    placeholder: { type: String },
+    label:       { type: String },
+    hint:        { type: String },
+    error:       { type: String, reflect: true },
+    disabled:    { type: Boolean, reflect: true },
+    required:    { type: Boolean, reflect: true },
+  };
+
+  declare name: string;
+  declare type: string;
+  declare value: string;
+  declare placeholder: string;
+  declare label: string;
+  declare hint: string | undefined;
+  declare error: string | undefined;
+  declare disabled: boolean;
+  declare required: boolean;
+
+  private _internals!: ElementInternals;
+  private readonly _uid = Math.random().toString(36).slice(2, 8);
+
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+    this.name = '';
+    this.type = 'text';
+    this.value = '';
+    this.placeholder = '';
+    this.label = '';
+    this.disabled = false;
+    this.required = false;
+  }
+
+  updated(changed: Map<string, unknown>) {
+    super.updated(changed);
+    if (changed.has('value')) {
+      this._internals.setFormValue?.(this.value);
+    }
+    if (changed.has('required') || changed.has('value')) {
+      if (this.required && !this.value) {
+        this._internals.setValidity?.({ valueMissing: true }, 'Required');
+      } else {
+        this._internals.setValidity?.({});
+      }
+    }
+  }
+
+  formResetCallback() {
+    this.value = '';
+    this._internals.setFormValue?.('');
+  }
+
+  private _handleInput(e: Event) {
+    const input = e.target as HTMLInputElement;
+    this.value = input.value;
+    this.dispatchEvent(new CustomEvent('bds-input', {
+      detail: { value: this.value },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  private _handleChange(e: Event) {
+    const input = e.target as HTMLInputElement;
+    this.value = input.value;
+    this.dispatchEvent(new CustomEvent('bds-change', {
+      detail: { value: this.value },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  render() {
+    const id = `bds-form-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}
+              ${this.required ? html`<span class="required" aria-hidden="true">*</span>` : ''}
+            </label>
+          `
+        : ''}
+      <div class="wrapper">
+        <span class="prefix"><slot name="prefix"></slot></span>
+        <input
+          id=${id}
+          class="input"
+          type=${this.type}
+          .value=${this.value}
+          placeholder=${this.placeholder}
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+          aria-invalid=${this.error ? 'true' : 'false'}
+          aria-describedby=${describedBy ?? ''}
+          aria-required=${this.required ? 'true' : 'false'}
+          @input=${this._handleInput}
+          @change=${this._handleChange}
+        />
+        <span class="suffix"><slot name="suffix"></slot></span>
+      </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>`
+          : ''}
+    `;
+  }
+}
+
+customElements.define('bds-form-input', BdsFormInput);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bds-form-input': BdsFormInput;
+  }
+}

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

@@ -45,10 +45,8 @@ export class BdsNumberInput extends LitElement {
       --bdc_color: currentcolor;
       --bdc-outline_radius: var(--bds-border_radius--xs);
 
-      outline: var(--bdc-outline_width) solid var(--bdc_color);
-      outline-offset: var(--bdc-outline_offset);
       border-radius: var(--number-input_radius, var(--bdc-outline_radius));
-      box-shadow: var(--number-input_shadow, var(--bdc-outline_shadow));
+      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));
       text-align: center;
@@ -76,12 +74,13 @@ 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);
       cursor: pointer;
       flex-shrink: 0;
-      color: var(--bds-color_on-bg);
+      color: var(--bds-color_interactive);
       transition: var(--bds-animation_transition);
     }
 

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

@@ -0,0 +1,62 @@
+import { fixture, cleanup } from '../../test/helpers';
+import { BdsRadioGroup } from './bds-radio-group';
+
+describe('bds-radio-group', () => {
+  it('is registered as a custom element', () => {
+    expect(customElements.get('bds-radio-group')).toBe(BdsRadioGroup);
+  });
+
+  it('renders a fieldset', async () => {
+    const el = await fixture('<bds-radio-group label="Options"></bds-radio-group>');
+    expect(el.shadowRoot!.querySelector('fieldset')).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('renders the label as a legend', async () => {
+    const el = await fixture('<bds-radio-group label="Select one"></bds-radio-group>');
+    const legend = el.shadowRoot!.querySelector('legend');
+    expect(legend?.textContent?.trim()).toContain('Select one');
+    cleanup(el);
+  });
+
+  it('disables the fieldset when disabled', async () => {
+    const el = await fixture('<bds-radio-group label="Test" disabled></bds-radio-group>');
+    const fieldset = el.shadowRoot!.querySelector('fieldset')!;
+    expect(fieldset.disabled).toBe(true);
+    cleanup(el);
+  });
+
+  it('renders a slot for radio children', async () => {
+    const el = await fixture('<bds-radio-group label="Test"></bds-radio-group>');
+    expect(el.shadowRoot!.querySelector('slot')).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('renders error message when error attribute is set', async () => {
+    const el = await fixture('<bds-radio-group label="Test" error="Required field"></bds-radio-group>');
+    const message = el.shadowRoot!.querySelector('.message--error');
+    expect(message?.textContent?.trim()).toBe('Required field');
+    cleanup(el);
+  });
+
+  it('reflects name attribute', async () => {
+    const el = await fixture('<bds-radio-group label="Test" name="contact"></bds-radio-group>') as BdsRadioGroup;
+    expect(el.name).toBe('contact');
+    cleanup(el);
+  });
+
+  it('propagates name to slotted bds-radio elements', async () => {
+    // Define a minimal bds-radio stub so querySelectorAll finds it
+    if (!customElements.get('bds-radio-stub')) {
+      customElements.define('bds-radio-stub', class extends HTMLElement {});
+    }
+    const el = await fixture(
+      '<bds-radio-group label="Contact" name="contact"><bds-radio value="email">Email</bds-radio></bds-radio-group>',
+    ) as BdsRadioGroup;
+    // Wait for propagation promise
+    await Promise.resolve();
+    const radio = el.querySelector('bds-radio');
+    expect(radio?.getAttribute('name')).toBe('contact');
+    cleanup(el);
+  });
+});