@boostdev/design-system-components 1.1.0 → 1.1.2

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

@@ -0,0 +1,157 @@
+import { LitElement, css, html } 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.
+ *
+ * Attributes:
+ *   name     — form field name (groups radio buttons)
+ *   value    — submitted value when selected
+ *   checked  — boolean; whether this option is selected
+ *   required — boolean
+ *   disabled — boolean
+ *
+ * Slots:
+ *   (default) — label text
+ *
+ * @example
+ * <bds-radio name="size" value="s">Small</bds-radio>
+ * <bds-radio name="size" value="m" checked>Medium</bds-radio>
+ * <bds-radio name="size" value="l">Large</bds-radio>
+ */
+export class BdsRadio extends LitElement {
+  static formAssociated = true;
+
+  static styles = css`
+    :host {
+      display: inline-flex;
+      align-items: flex-start;
+      gap: var(--bds-space_xs);
+      cursor: pointer;
+      font-size: var(--bds-font_size--body);
+      font-family: var(--bds-font_family--body);
+      color: var(--bds-color_on-bg);
+    }
+
+    :host([disabled]) {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    .input {
+      --inputSize: calc(var(--bds-space_s) * 2);
+      margin-block-start: 0.25em;
+      inline-size: var(--inputSize);
+      block-size: var(--inputSize);
+      flex-shrink: 0;
+      --bdc_color: currentcolor;
+      --bdc-outline_radius: 50%;
+
+      outline: var(--bdc-outline_width) solid var(--bdc_color);
+      outline-offset: var(--bdc-outline_offset);
+      border-radius: 50%;
+      box-shadow: 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;
+    }
+
+    .input:checked {
+      background-color: var(--radio_color-active, var(--bdc-color_active));
+      --bdc_color: var(--radio_color-active, var(--bdc-color_active));
+    }
+
+    .input:checked::after {
+      content: '';
+      position: absolute;
+      inset: 25%;
+      border-radius: 50%;
+      background-color: var(--radio_color-on-active, var(--bdc-color_on-active));
+    }
+
+    .input:focus-visible {
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
+    }
+
+    label {
+      cursor: pointer;
+      flex: 1;
+    }
+  `;
+
+  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 },
+  };
+
+  declare name: string;
+  declare value: string;
+  declare checked: boolean;
+  declare required: boolean;
+  declare disabled: boolean;
+
+  private _internals!: ElementInternals;
+  private readonly _uid = Math.random().toString(36).slice(2, 8);
+
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+    this.name = '';
+    this.value = '';
+    this.checked = false;
+    this.required = false;
+    this.disabled = false;
+  }
+
+  updated(changed: Map<string, unknown>) {
+    super.updated(changed);
+    if (changed.has('checked') || changed.has('value')) {
+      this._internals.setFormValue?.(this.checked ? this.value : null);
+    }
+  }
+
+  formResetCallback() {
+    this.checked = false;
+    this._internals.setFormValue?.(null);
+  }
+
+  private _handleChange(e: Event) {
+    this.checked = (e.target as HTMLInputElement).checked;
+  }
+
+  render() {
+    const id = `bds-radio-${this._uid}`;
+    return html`
+      <input
+        id=${id}
+        type="radio"
+        class="input"
+        name=${this.name}
+        value=${this.value}
+        .checked=${this.checked}
+        ?required=${this.required}
+        ?disabled=${this.disabled}
+        @change=${this._handleChange}
+      />
+      <label for=${id}><slot></slot></label>
+    `;
+  }
+}
+
+customElements.define('bds-radio', BdsRadio);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bds-radio': BdsRadio;
+  }
+}

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

@@ -0,0 +1,74 @@
+import { fixture, cleanup } from '../../test/helpers';
+import { BdsSegmentedControl } from './bds-segmented-control';
+
+const OPTIONS = JSON.stringify([
+  { value: 'list', label: 'List' },
+  { value: 'grid', label: 'Grid' },
+  { value: 'table', label: 'Table', disabled: true },
+]);
+
+describe('bds-segmented-control', () => {
+  it('is registered as a custom element', () => {
+    expect(customElements.get('bds-segmented-control')).toBe(BdsSegmentedControl);
+  });
+
+  it('renders radio inputs for each option', async () => {
+    const el = await fixture(`<bds-segmented-control name="view" options='${OPTIONS}'></bds-segmented-control>`);
+    const radios = el.shadowRoot!.querySelectorAll('input[type="radio"]');
+    expect(radios.length).toBe(3);
+    cleanup(el);
+  });
+
+  it('renders a group role wrapper', async () => {
+    const el = await fixture(`<bds-segmented-control name="view" options='${OPTIONS}'></bds-segmented-control>`);
+    expect(el.shadowRoot!.querySelector('[role="group"]')).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('marks the selected option as checked', async () => {
+    const el = await fixture(`<bds-segmented-control name="view" value="grid" options='${OPTIONS}'></bds-segmented-control>`);
+    await el.updateComplete;
+    const radios = [...el.shadowRoot!.querySelectorAll<HTMLInputElement>('input[type="radio"]')];
+    const gridRadio = radios.find(r => r.value === 'grid')!;
+    expect(gridRadio.checked).toBe(true);
+    cleanup(el);
+  });
+
+  it('marks a disabled option as disabled', async () => {
+    const el = await fixture(`<bds-segmented-control name="view" options='${OPTIONS}'></bds-segmented-control>`);
+    const radios = [...el.shadowRoot!.querySelectorAll<HTMLInputElement>('input[type="radio"]')];
+    const tableRadio = radios.find(r => r.value === 'table')!;
+    expect(tableRadio.disabled).toBe(true);
+    cleanup(el);
+  });
+
+  it('updates value property when a radio is changed', async () => {
+    const el = await fixture(`<bds-segmented-control name="view" options='${OPTIONS}'></bds-segmented-control>`) as BdsSegmentedControl;
+    const radios = [...el.shadowRoot!.querySelectorAll<HTMLInputElement>('input[type="radio"]')];
+    const gridRadio = radios.find(r => r.value === 'grid')!;
+    gridRadio.checked = true;
+    gridRadio.dispatchEvent(new Event('change', { bubbles: true }));
+    expect(el.value).toBe('grid');
+    cleanup(el);
+  });
+
+  it('fires a change event when an option is selected', async () => {
+    const el = await fixture(`<bds-segmented-control name="view" options='${OPTIONS}'></bds-segmented-control>`);
+    const handler = vi.fn();
+    el.addEventListener('change', handler);
+    const radios = [...el.shadowRoot!.querySelectorAll<HTMLInputElement>('input[type="radio"]')];
+    radios[0].dispatchEvent(new Event('change', { bubbles: true }));
+    expect(handler).toHaveBeenCalledOnce();
+    cleanup(el);
+  });
+
+  it('renders a sliding thumb element', async () => {
+    const el = await fixture(`<bds-segmented-control name="view" options='${OPTIONS}'></bds-segmented-control>`);
+    expect(el.shadowRoot!.querySelector('.thumb')).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('is form-associated', () => {
+    expect(BdsSegmentedControl.formAssociated).toBe(true);
+  });
+});

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

@@ -0,0 +1,211 @@
+import { LitElement, css, html } from 'lit';
+
+export interface SegmentedOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+/**
+ * `<bds-segmented-control>` — form-associated Segmented Control custom element.
+ *
+ * Renders a group of radio buttons styled as a unified segmented control.
+ * Passes a JSON `options` attribute because reactive slot content can't be
+ * easily converted to radio groups.
+ *
+ * Attributes:
+ *   name     — form field name (also used for the internal radio group)
+ *   value    — currently selected value
+ *   options  — JSON array of `{ value, label, disabled? }` option objects
+ *   disabled — boolean; disables all options
+ *
+ * Events:
+ *   change — fired when a new segment is selected
+ *
+ * @example
+ * <bds-segmented-control
+ *   name="view"
+ *   value="list"
+ *   options='[{"value":"list","label":"List"},{"value":"grid","label":"Grid"}]'
+ * ></bds-segmented-control>
+ */
+export class BdsSegmentedControl extends LitElement {
+  static formAssociated = true;
+
+  static styles = css`
+    :host {
+      display: inline-flex;
+    }
+
+    :host([disabled]) {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    .control {
+      display: inline-flex;
+      position: relative;
+      border-radius: var(--bds-border_radius--s);
+      background-color: var(--segmented_color_bg, var(--bds-color_bg--subtle));
+      padding: 0.25rem;
+      gap: 0;
+    }
+
+    /* Sliding thumb */
+    .thumb {
+      position: absolute;
+      inset-block: 0.25rem;
+      border-radius: calc(var(--bds-border_radius--s) - 2px);
+      background-color: var(--segmented_thumb-color, var(--bds-color_bg));
+      box-shadow: var(--bds-shadow_m);
+      transition: inset-inline-start var(--bds-animation_transition-duration) var(--bds-animation_easing),
+                  inline-size var(--bds-animation_transition-duration) var(--bds-animation_easing);
+      pointer-events: none;
+      /* Position set via JS in updated() */
+    }
+
+    .radio {
+      position: absolute;
+      opacity: 0;
+      inline-size: 0;
+      block-size: 0;
+      margin: 0;
+    }
+
+    .item {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      padding: var(--bds-space_xs) var(--bds-space_m);
+      font-size: var(--bds-font_size--body--s);
+      font-family: var(--bds-font_family--body);
+      font-weight: var(--bds-font_weight--semibold);
+      color: var(--segmented_color, var(--bds-color_on-bg));
+      cursor: pointer;
+      border-radius: calc(var(--bds-border_radius--s) - 2px);
+      transition: color var(--bds-animation_transition-duration) var(--bds-animation_easing);
+      user-select: none;
+      white-space: nowrap;
+    }
+
+    .item.--active {
+      color: var(--segmented_color--active, var(--bds-color_interactive_on-bg));
+    }
+
+    .item.--disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    .radio:focus-visible + .item-label {
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
+    }
+  `;
+
+  static properties = {
+    name:     { type: String, reflect: true },
+    value:    { type: String },
+    options:  { type: String },
+    disabled: { type: Boolean, reflect: true },
+  };
+
+  declare name: string;
+  declare value: string;
+  declare options: string;
+  declare disabled: boolean;
+
+  private _internals!: ElementInternals;
+  private readonly _uid = Math.random().toString(36).slice(2, 8);
+
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+    this.name = '';
+    this.value = '';
+    this.options = '[]';
+    this.disabled = false;
+  }
+
+  private get _options(): SegmentedOption[] {
+    try {
+      return JSON.parse(this.options) as SegmentedOption[];
+    } catch {
+      return [];
+    }
+  }
+
+  updated(changed: Map<string, unknown>) {
+    super.updated(changed);
+    if (changed.has('value') || changed.has('options')) {
+      this._internals.setFormValue?.(this.value || null);
+      this._updateThumb();
+    }
+  }
+
+  private _updateThumb() {
+    const opts = this._options;
+    const selectedIndex = Math.max(0, opts.findIndex(o => o.value === this.value));
+    const items = this.shadowRoot?.querySelectorAll<HTMLElement>('.item');
+    const thumb = this.shadowRoot?.querySelector<HTMLElement>('.thumb');
+    if (!items || !thumb || items.length === 0) return;
+    const item = items[selectedIndex];
+    if (!item) return;
+    const controlRect = (item.parentElement as HTMLElement).getBoundingClientRect();
+    const itemRect = item.getBoundingClientRect();
+    thumb.style.insetInlineStart = `${itemRect.left - controlRect.left}px`;
+    thumb.style.inlineSize = `${itemRect.width}px`;
+  }
+
+  formResetCallback() {
+    const firstOption = this._options[0];
+    this.value = firstOption?.value ?? '';
+    this._internals.setFormValue?.(this.value || null);
+  }
+
+  private _handleChange(optionValue: string) {
+    this.value = optionValue;
+    this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+  }
+
+  render() {
+    const opts = this._options;
+    return html`
+      <div class="control" role="group">
+        <span class="thumb" aria-hidden="true"></span>
+        ${opts.map((opt, i) => {
+          const id = `bds-seg-${this._uid}-${i}`;
+          const isActive = opt.value === this.value;
+          const isDisabled = this.disabled || opt.disabled;
+          return html`
+            <label
+              class="item ${isActive ? '--active' : ''} ${isDisabled ? '--disabled' : ''}"
+              for=${id}
+            >
+              <input
+                id=${id}
+                type="radio"
+                class="radio"
+                name=${this.name || this._uid}
+                value=${opt.value}
+                .checked=${isActive}
+                ?disabled=${isDisabled}
+                @change=${() => this._handleChange(opt.value)}
+              />
+              ${opt.label}
+            </label>
+          `;
+        })}
+      </div>
+    `;
+  }
+}
+
+customElements.define('bds-segmented-control', BdsSegmentedControl);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bds-segmented-control': BdsSegmentedControl;
+  }
+}

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

@@ -0,0 +1,74 @@
+import { fixture, cleanup } from '../../test/helpers';
+import { BdsSelect } from './bds-select';
+
+const OPTIONS = JSON.stringify([
+  { value: 'nl', label: 'Netherlands' },
+  { value: 'be', label: 'Belgium' },
+  { value: 'de', label: 'Germany', disabled: true },
+]);
+
+describe('bds-select', () => {
+  it('is registered as a custom element', () => {
+    expect(customElements.get('bds-select')).toBe(BdsSelect);
+  });
+
+  it('renders a <select> element in shadow DOM', async () => {
+    const el = await fixture(`<bds-select name="country" options='${OPTIONS}'></bds-select>`);
+    expect(el.shadowRoot!.querySelector('select')).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('renders options from the options attribute', async () => {
+    const el = await fixture(`<bds-select name="country" options='${OPTIONS}'></bds-select>`);
+    const select = el.shadowRoot!.querySelector('select')!;
+    const options = [...select.querySelectorAll('option')];
+    expect(options.length).toBe(3);
+    expect(options[0].value).toBe('nl');
+    expect(options[1].value).toBe('be');
+    cleanup(el);
+  });
+
+  it('renders a placeholder option when placeholder is set', async () => {
+    const el = await fixture(`<bds-select name="country" placeholder="Choose..." options='${OPTIONS}'></bds-select>`);
+    const select = el.shadowRoot!.querySelector('select')!;
+    const placeholder = select.querySelector<HTMLOptionElement>('option[value=""]');
+    expect(placeholder).not.toBeNull();
+    expect(placeholder!.textContent?.trim()).toBe('Choose...');
+    cleanup(el);
+  });
+
+  it('marks a disabled option as disabled', async () => {
+    const el = await fixture(`<bds-select name="country" options='${OPTIONS}'></bds-select>`);
+    const select = el.shadowRoot!.querySelector('select')!;
+    const deOption = select.querySelector<HTMLOptionElement>('option[value="de"]');
+    expect(deOption!.disabled).toBe(true);
+    cleanup(el);
+  });
+
+  it('select is disabled when disabled attribute is set', async () => {
+    const el = await fixture(`<bds-select name="country" disabled options='${OPTIONS}'></bds-select>`);
+    const select = el.shadowRoot!.querySelector<HTMLSelectElement>('select')!;
+    expect(select.disabled).toBe(true);
+    cleanup(el);
+  });
+
+  it('updates value property on change', async () => {
+    const el = await fixture(`<bds-select name="country" options='${OPTIONS}'></bds-select>`) as BdsSelect;
+    const select = el.shadowRoot!.querySelector<HTMLSelectElement>('select')!;
+    select.value = 'nl';
+    select.dispatchEvent(new Event('change', { bubbles: true }));
+    expect(el.value).toBe('nl');
+    cleanup(el);
+  });
+
+  it('handles invalid JSON options gracefully', async () => {
+    const el = await fixture(`<bds-select name="country" options='not-json'></bds-select>`);
+    const select = el.shadowRoot!.querySelector('select')!;
+    expect([...select.querySelectorAll('option')].length).toBe(0);
+    cleanup(el);
+  });
+
+  it('is form-associated', () => {
+    expect(BdsSelect.formAssociated).toBe(true);
+  });
+});

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

@@ -0,0 +1,190 @@
+import { LitElement, css, html } from 'lit';
+
+export interface SelectOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+/**
+ * `<bds-select>` — form-associated Select custom element.
+ *
+ * Uses a JSON `options` attribute because slotting `<option>` elements into a
+ * shadow-DOM `<select>` is not supported cross-browser.
+ *
+ * Attributes:
+ *   name        — form field name
+ *   value       — currently selected value
+ *   options     — JSON array of `{ value, label, disabled? }` option objects
+ *   placeholder — placeholder option label (disabled, empty value)
+ *   required    — boolean
+ *   disabled    — boolean
+ *
+ * Events:
+ *   change — native change event (forwarded from inner select)
+ *
+ * @example
+ * <bds-select
+ *   name="country"
+ *   placeholder="Choose…"
+ *   options='[{"value":"nl","label":"Netherlands"},{"value":"be","label":"Belgium"}]'
+ * ></bds-select>
+ */
+export class BdsSelect extends LitElement {
+  static formAssociated = true;
+
+  static styles = css`
+    :host {
+      display: block;
+    }
+
+    :host([disabled]) {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    .wrapper {
+      position: relative;
+      display: block;
+    }
+
+    .select {
+      inline-size: 100%;
+      font-family: var(--bds-font_family--body);
+      font-size: var(--bds-font_size--body);
+      padding: var(--bds-space_s);
+      padding-inline-end: var(--bds-space_xl);
+      border: none;
+      --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(--select_radius, var(--bdc-outline_radius));
+      box-shadow: var(--select_shadow, var(--bdc-outline_shadow));
+      background-color: var(--select_color_bg, var(--bds-color_bg));
+      color: var(--select_color, var(--bds-color_on-bg));
+      appearance: none;
+      cursor: pointer;
+      transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
+    }
+
+    .select:focus {
+      --bdc_color: var(--bdc_color--focus);
+    }
+
+    .select:focus-visible {
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
+    }
+
+    .chevron {
+      position: absolute;
+      inset-inline-end: var(--bds-space_s);
+      inset-block-start: 50%;
+      transform: translateY(-50%);
+      pointer-events: none;
+      inline-size: 1rem;
+      block-size: 1rem;
+      color: currentcolor;
+    }
+
+    .chevron svg {
+      inline-size: 100%;
+      block-size: 100%;
+    }
+  `;
+
+  static properties = {
+    name:        { type: String, reflect: true },
+    value:       { type: String },
+    options:     { type: String },
+    placeholder: { type: String },
+    required:    { type: Boolean, reflect: true },
+    disabled:    { type: Boolean, reflect: true },
+  };
+
+  declare name: string;
+  declare value: string;
+  declare options: string;
+  declare placeholder: string;
+  declare required: boolean;
+  declare disabled: boolean;
+
+  private _internals!: ElementInternals;
+
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+    this.name = '';
+    this.value = '';
+    this.options = '[]';
+    this.placeholder = '';
+    this.required = false;
+    this.disabled = false;
+  }
+
+  private get _options(): SelectOption[] {
+    try {
+      return JSON.parse(this.options) as SelectOption[];
+    } catch {
+      return [];
+    }
+  }
+
+  updated(changed: Map<string, unknown>) {
+    super.updated(changed);
+    if (changed.has('value') || changed.has('name')) {
+      this._internals.setFormValue?.(this.value || null);
+    }
+  }
+
+  formResetCallback() {
+    this.value = '';
+    this._internals.setFormValue?.(null);
+  }
+
+  private _handleChange(e: Event) {
+    this.value = (e.target as HTMLSelectElement).value;
+  }
+
+  render() {
+    const opts = this._options;
+    return html`
+      <div class="wrapper">
+        <select
+          class="select"
+          name=${this.name}
+          .value=${this.value}
+          ?required=${this.required}
+          ?disabled=${this.disabled}
+          @change=${this._handleChange}
+        >
+          ${this.placeholder ? html`
+            <option value="" disabled ?selected=${!this.value}>${this.placeholder}</option>
+          ` : ''}
+          ${opts.map(opt => html`
+            <option
+              value=${opt.value}
+              ?disabled=${opt.disabled}
+              ?selected=${opt.value === this.value}
+            >${opt.label}</option>
+          `)}
+        </select>
+        <span class="chevron" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6" />
+          </svg>
+        </span>
+      </div>
+    `;
+  }
+}
+
+customElements.define('bds-select', BdsSelect);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bds-select': BdsSelect;
+  }
+}