@boostdev/design-system-components 1.1.1 → 1.2.0

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

@@ -0,0 +1,151 @@
+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%;
+
+      border-radius: 50%;
+      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;
+    }
+
+    .input:checked {
+      background: radial-gradient(
+        circle,
+        var(--radio_color-active, var(--bdc-color_active)) 35%,
+        var(--radio_color_bg, var(--bds-color_bg)) 42%
+      );
+      --bdc_color: var(--radio_color-active, var(--bdc-color_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,282 @@
+import { LitElement, css, html, nothing } from 'lit';
+
+export interface SegmentedOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+  /** When set, renders the option as an <a> link instead of a radio button */
+  href?: string;
+}
+
+/**
+ * `<bds-segmented-control>` — form-associated Segmented Control custom element.
+ *
+ * Renders a group of radio buttons (or links) 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?, href? }` option objects
+ *   disabled — boolean; disables all options
+ *   variant  — "outline" (inset border on active item, default) | "filled" (sliding thumb)
+ *
+ * Events:
+ *   change — fired when a new segment is selected (radio mode only)
+ *
+ * @example
+ * <bds-segmented-control
+ *   name="view"
+ *   value="list"
+ *   options='[{"value":"list","label":"List"},{"value":"grid","label":"Grid"}]'
+ * ></bds-segmented-control>
+ *
+ * @example Outline variant with links
+ * <bds-segmented-control
+ *   variant="outline"
+ *   value="home"
+ *   options='[{"value":"home","label":"Home","href":"/"},{"value":"about","label":"About","href":"/about"}]'
+ * ></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_interactive));
+      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;
+      text-decoration: none;
+    }
+
+    .item.--active {
+      color: var(--segmented_color--active, var(--bds-color_on-interactive));
+    }
+
+    .item.--disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    .radio:focus-visible + .item-label {
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
+    }
+
+    /* Outline variant: sliding inset-border indicator (positioned via JS like .thumb) */
+    .indicator {
+      position: absolute;
+      inset-block: 0.25rem;
+      border-radius: calc(var(--bds-border_radius--s) - 2px);
+      pointer-events: none;
+      z-index: 2;
+      display: none;
+      transition: inset-inline-start var(--bds-animation_transition-duration) var(--bds-animation_easing),
+                  inline-size var(--bds-animation_transition-duration) var(--bds-animation_easing);
+    }
+
+    /* Outline variant — no thumb, sliding inset-border indicator, interactive active color */
+    :host([variant='outline']) .thumb {
+      display: none;
+    }
+
+    :host([variant='outline']) .item.--active {
+      color: var(--segmented_color--active, var(--bds-color_interactive));
+    }
+
+    :host([variant='outline']) .indicator {
+      display: block;
+      box-shadow: inset 0 0 0 2px var(--bds-color_interactive);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .thumb,
+      .indicator {
+        transition: none;
+      }
+    }
+  `;
+
+  static properties = {
+    name:     { type: String, reflect: true },
+    value:    { type: String },
+    options:  { type: String },
+    disabled: { type: Boolean, reflect: true },
+    variant:  { type: String, reflect: true },
+  };
+
+  declare name: string;
+  declare value: string;
+  declare options: string;
+  declare disabled: boolean;
+  declare variant: 'outline' | 'filled';
+
+  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;
+    this.variant = 'outline';
+  }
+
+  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);
+      if (this.variant === 'filled') this._updateThumb();
+      if (this.variant === 'outline') this._updateIndicator();
+    }
+    if (changed.has('variant')) {
+      if (this.variant === 'filled') this._updateThumb();
+      if (this.variant === 'outline') this._updateIndicator();
+    }
+  }
+
+  private _positionSlider(el: HTMLElement | null | undefined, items: NodeListOf<HTMLElement>, selectedIndex: number) {
+    if (!el || items.length === 0) return;
+    const item = items[selectedIndex];
+    if (!item) return;
+    const controlRect = (item.parentElement as HTMLElement).getBoundingClientRect();
+    const itemRect = item.getBoundingClientRect();
+    el.style.insetInlineStart = `${itemRect.left - controlRect.left}px`;
+    el.style.inlineSize = `${itemRect.width}px`;
+  }
+
+  private _updateThumb() {
+    const selectedIndex = Math.max(0, this._options.findIndex(o => o.value === this.value));
+    const items = this.shadowRoot?.querySelectorAll<HTMLElement>('.item');
+    this._positionSlider(this.shadowRoot?.querySelector<HTMLElement>('.thumb'), items!, selectedIndex);
+  }
+
+  private _updateIndicator() {
+    const selectedIndex = Math.max(0, this._options.findIndex(o => o.value === this.value));
+    const items = this.shadowRoot?.querySelectorAll<HTMLElement>('.item');
+    this._positionSlider(this.shadowRoot?.querySelector<HTMLElement>('.indicator'), items!, selectedIndex);
+  }
+
+  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>
+        <span class="indicator" aria-hidden="true"></span>
+        ${opts.map((opt, i) => {
+          const isActive = opt.value === this.value;
+          const isDisabled = this.disabled || opt.disabled;
+          const itemClass = `item ${isActive ? '--active' : ''} ${isDisabled ? '--disabled' : ''}`.trim();
+
+          if (opt.href) {
+            return html`
+              <a
+                class=${itemClass}
+                href=${isDisabled ? nothing : opt.href}
+                aria-current=${isActive ? 'page' : nothing}
+                ?aria-disabled=${isDisabled}
+              >${opt.label}</a>
+            `;
+          }
+
+          const id = `bds-seg-${this._uid}-${i}`;
+          return html`
+            <label class=${itemClass} 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);
+  });
+});