@boostdev/design-system-components 1.1.1 → 1.2.0

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

@@ -0,0 +1,117 @@
+import { fixture, cleanup } from '../../test/helpers';
+import { BdsCombobox } from './bds-combobox';
+
+const OPTIONS = JSON.stringify([
+  { value: 'nl', label: 'Netherlands' },
+  { value: 'be', label: 'Belgium' },
+  { value: 'de', label: 'Germany', disabled: true },
+]);
+
+describe('bds-combobox', () => {
+  it('is registered as a custom element', () => {
+    expect(customElements.get('bds-combobox')).toBe(BdsCombobox);
+  });
+
+  it('renders a text input with role="combobox"', async () => {
+    const el = await fixture(`<bds-combobox name="country" options='${OPTIONS}'></bds-combobox>`);
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    expect(input).not.toBeNull();
+    expect(input.getAttribute('role')).toBe('combobox');
+    cleanup(el);
+  });
+
+  it('forwards placeholder to the input', async () => {
+    const el = await fixture(`<bds-combobox name="country" placeholder="Search…" options='${OPTIONS}'></bds-combobox>`);
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    expect(input.placeholder).toBe('Search…');
+    cleanup(el);
+  });
+
+  it('input is disabled when disabled attribute is set', async () => {
+    const el = await fixture(`<bds-combobox name="country" disabled options='${OPTIONS}'></bds-combobox>`);
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    expect(input.disabled).toBe(true);
+    cleanup(el);
+  });
+
+  it('shows listbox when input is focused', async () => {
+    const el = await fixture(`<bds-combobox name="country" options='${OPTIONS}'></bds-combobox>`);
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    input.dispatchEvent(new Event('focus'));
+    await el.updateComplete;
+    expect(el.shadowRoot!.querySelector('[role="listbox"]')).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('renders options in the listbox', async () => {
+    const el = await fixture(`<bds-combobox name="country" options='${OPTIONS}'></bds-combobox>`);
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    input.dispatchEvent(new Event('focus'));
+    await el.updateComplete;
+    const listItems = el.shadowRoot!.querySelectorAll('[role="option"]');
+    expect(listItems.length).toBe(3);
+    cleanup(el);
+  });
+
+  it('selects an option on mousedown', async () => {
+    const el = await fixture(`<bds-combobox name="country" options='${OPTIONS}'></bds-combobox>`) as BdsCombobox;
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    input.dispatchEvent(new Event('focus'));
+    await el.updateComplete;
+    const option = el.shadowRoot!.querySelector<HTMLElement>('[role="option"]')!;
+    option.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
+    expect(el.value).toBe('nl');
+    cleanup(el);
+  });
+
+  it('fires bds-change when an option is selected', async () => {
+    const el = await fixture(`<bds-combobox name="country" options='${OPTIONS}'></bds-combobox>`);
+    const handler = vi.fn();
+    el.addEventListener('bds-change', handler);
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    input.dispatchEvent(new Event('focus'));
+    await el.updateComplete;
+    const option = el.shadowRoot!.querySelector<HTMLElement>('[role="option"]')!;
+    option.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
+    expect(handler).toHaveBeenCalledOnce();
+    expect(handler.mock.calls[0][0].detail).toMatchObject({ value: 'nl' });
+    cleanup(el);
+  });
+
+  it('filters options based on input text', async () => {
+    const el = await fixture(`<bds-combobox name="country" options='${OPTIONS}'></bds-combobox>`);
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    input.value = 'Neth';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    await el.updateComplete;
+    const options = el.shadowRoot!.querySelectorAll('[role="option"]');
+    expect(options.length).toBe(1);
+    expect(options[0].textContent?.trim()).toBe('Netherlands');
+    cleanup(el);
+  });
+
+  it('shows no results message when filter matches nothing', async () => {
+    const el = await fixture(`<bds-combobox name="country" options='${OPTIONS}'></bds-combobox>`);
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    input.value = 'zzz';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    await el.updateComplete;
+    expect(el.shadowRoot!.querySelector('.no-results')).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('closes listbox on Escape key', async () => {
+    const el = await fixture(`<bds-combobox name="country" options='${OPTIONS}'></bds-combobox>`);
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    input.dispatchEvent(new Event('focus'));
+    await el.updateComplete;
+    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+    await el.updateComplete;
+    expect(el.shadowRoot!.querySelector('[role="listbox"]')).toBeNull();
+    cleanup(el);
+  });
+
+  it('is form-associated', () => {
+    expect(BdsCombobox.formAssociated).toBe(true);
+  });
+});

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

@@ -0,0 +1,334 @@
+import { LitElement, css, html } from 'lit';
+
+export interface ComboboxOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+/**
+ * `<bds-combobox>` — form-associated Combobox (autocomplete) custom element.
+ *
+ * Renders a text input with a filterable dropdown. Keyboard navigation:
+ * ArrowDown/ArrowUp to move focus, Enter to select, Escape to close.
+ *
+ * Attributes:
+ *   name        — form field name
+ *   value       — currently selected value
+ *   options     — JSON array of `{ value, label, disabled? }` option objects
+ *   placeholder — input placeholder text
+ *   disabled    — boolean
+ *
+ * Events:
+ *   bds-change — fired with `{ detail: { value, label } }` when an option is selected
+ *
+ * @example
+ * <bds-combobox
+ *   name="country"
+ *   placeholder="Search…"
+ *   options='[{"value":"nl","label":"Netherlands"},{"value":"be","label":"Belgium"}]'
+ * ></bds-combobox>
+ */
+export class BdsCombobox extends LitElement {
+  static formAssociated = true;
+
+  static styles = css`
+    :host {
+      display: block;
+      position: relative;
+    }
+
+    :host([disabled]) {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    .wrapper {
+      position: relative;
+    }
+
+    .input {
+      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);
+
+      border-radius: var(--combobox_radius, var(--bdc-outline_radius));
+      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;
+      transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
+    }
+
+    .input:focus {
+      --bdc_color: var(--bdc_color--focus);
+    }
+
+    .input: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%;
+    }
+
+    .listbox {
+      position: absolute;
+      inset-block-start: calc(100% + var(--bds-space_xs));
+      inset-inline-start: 0;
+      inline-size: 100%;
+      max-block-size: 15rem;
+      overflow-y: auto;
+      background-color: var(--combobox_list-bg, var(--bds-color_bg));
+      border-radius: var(--bds-border_radius--s);
+      box-shadow: var(--bds-shadow_m);
+      z-index: var(--combobox_z-index, 100);
+      padding-block: var(--bds-space_xs);
+    }
+
+    .option {
+      display: block;
+      padding: var(--bds-space_s) var(--bds-space_m);
+      cursor: pointer;
+      font-family: var(--bds-font_family--body);
+      font-size: var(--bds-font_size--body);
+      color: var(--bds-color_on-bg);
+      transition: background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
+    }
+
+    .option:hover,
+    .option[aria-selected='true'] {
+      background-color: var(--bds-color_bg--subtle);
+    }
+
+    .option[aria-disabled='true'] {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    .option.--focused {
+      background-color: var(--bds-color_bg--subtle);
+      outline: none;
+    }
+
+    .no-results {
+      padding: var(--bds-space_s) var(--bds-space_m);
+      font-family: var(--bds-font_family--body);
+      font-size: var(--bds-font_size--body--s);
+      color: var(--bds-color_on-bg--subtle);
+    }
+  `;
+
+  static properties = {
+    name:        { type: String, reflect: true },
+    value:       { type: String },
+    options:     { type: String },
+    placeholder: { type: String },
+    disabled:    { type: Boolean, reflect: true },
+  };
+
+  declare name: string;
+  declare value: string;
+  declare options: string;
+  declare placeholder: string;
+  declare disabled: boolean;
+
+  private _internals!: ElementInternals;
+  private _open = false;
+  private _query = '';
+  private _focusedIndex = -1;
+
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+    this.name = '';
+    this.value = '';
+    this.options = '[]';
+    this.placeholder = '';
+    this.disabled = false;
+  }
+
+  private get _options(): ComboboxOption[] {
+    try {
+      return JSON.parse(this.options) as ComboboxOption[];
+    } catch {
+      return [];
+    }
+  }
+
+  private get _filtered(): ComboboxOption[] {
+    const q = this._query.toLowerCase();
+    return q
+      ? this._options.filter(o => o.label.toLowerCase().includes(q))
+      : this._options;
+  }
+
+  private get _displayLabel(): string {
+    if (this.value) {
+      return this._options.find(o => o.value === this.value)?.label ?? '';
+    }
+    return '';
+  }
+
+  updated(changed: Map<string, unknown>) {
+    super.updated(changed);
+    if (changed.has('value')) {
+      this._internals.setFormValue?.(this.value || null);
+    }
+  }
+
+  formResetCallback() {
+    this.value = '';
+    this._query = '';
+    this._open = false;
+    this._internals.setFormValue?.(null);
+    this.requestUpdate();
+  }
+
+  private _openList() {
+    this._open = true;
+    this._focusedIndex = this._filtered.findIndex(o => o.value === this.value);
+    this.requestUpdate();
+  }
+
+  private _closeList() {
+    this._open = false;
+    this._query = '';
+    this._focusedIndex = -1;
+    this.requestUpdate();
+  }
+
+  private _selectOption(opt: ComboboxOption) {
+    if (opt.disabled) return;
+    this.value = opt.value;
+    this._closeList();
+    this.dispatchEvent(new CustomEvent('bds-change', {
+      bubbles: true,
+      composed: true,
+      detail: { value: opt.value, label: opt.label },
+    }));
+  }
+
+  private _handleInput(e: Event) {
+    this._query = (e.target as HTMLInputElement).value;
+    this._open = true;
+    this._focusedIndex = -1;
+    this.requestUpdate();
+  }
+
+  private _handleFocus() {
+    this._openList();
+  }
+
+  private _handleBlur() {
+    // Delay close so option clicks register first
+    setTimeout(() => {
+      this._closeList();
+    }, 150);
+  }
+
+  private _handleKeydown(e: KeyboardEvent) {
+    const filtered = this._filtered;
+    if (!this._open) {
+      if (e.key === 'ArrowDown' || e.key === 'Enter') {
+        e.preventDefault();
+        this._openList();
+      }
+      return;
+    }
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      let next = this._focusedIndex + 1;
+      while (next < filtered.length && filtered[next].disabled) next++;
+      if (next < filtered.length) this._focusedIndex = next;
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      let prev = this._focusedIndex - 1;
+      while (prev >= 0 && filtered[prev].disabled) prev--;
+      if (prev >= 0) this._focusedIndex = prev;
+    } else if (e.key === 'Enter') {
+      e.preventDefault();
+      if (this._focusedIndex >= 0 && this._focusedIndex < filtered.length) {
+        this._selectOption(filtered[this._focusedIndex]);
+      }
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      this._closeList();
+    }
+    this.requestUpdate();
+  }
+
+  render() {
+    const filtered = this._filtered;
+    const inputValue = this._open ? this._query : this._displayLabel;
+
+    return html`
+      <div class="wrapper">
+        <input
+          type="text"
+          class="input"
+          role="combobox"
+          aria-expanded=${this._open}
+          aria-autocomplete="list"
+          aria-haspopup="listbox"
+          name=${this.name}
+          placeholder=${this.placeholder}
+          .value=${inputValue}
+          ?disabled=${this.disabled}
+          @input=${this._handleInput}
+          @focus=${this._handleFocus}
+          @blur=${this._handleBlur}
+          @keydown=${this._handleKeydown}
+        />
+        <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>
+        ${this._open ? html`
+          <ul class="listbox" role="listbox" aria-label="Options">
+            ${filtered.length === 0
+              ? html`<li class="no-results">No results</li>`
+              : filtered.map((opt, i) => html`
+                  <li
+                    class="option ${i === this._focusedIndex ? '--focused' : ''}"
+                    role="option"
+                    aria-selected=${opt.value === this.value}
+                    aria-disabled=${opt.disabled ?? false}
+                    @mousedown=${(e: Event) => { e.preventDefault(); this._selectOption(opt); }}
+                  >${opt.label}</li>
+                `)
+            }
+          </ul>
+        ` : ''}
+      </div>
+    `;
+  }
+}
+
+customElements.define('bds-combobox', BdsCombobox);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bds-combobox': BdsCombobox;
+  }
+}

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

@@ -0,0 +1,58 @@
+import { fixture, cleanup } from '../../test/helpers';
+import { BdsFileInput } from './bds-file-input';
+
+describe('bds-file-input', () => {
+  it('is registered as a custom element', () => {
+    expect(customElements.get('bds-file-input')).toBe(BdsFileInput);
+  });
+
+  it('renders a file input in shadow DOM', async () => {
+    const el = await fixture('<bds-file-input name="avatar"></bds-file-input>');
+    expect(el.shadowRoot!.querySelector('input[type="file"]')).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('renders a drop zone with role="button"', async () => {
+    const el = await fixture('<bds-file-input name="avatar"></bds-file-input>');
+    expect(el.shadowRoot!.querySelector('[role="button"]')).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('drop zone has aria-label="Upload file"', async () => {
+    const el = await fixture('<bds-file-input name="avatar"></bds-file-input>');
+    const zone = el.shadowRoot!.querySelector('[role="button"]')!;
+    expect(zone.getAttribute('aria-label')).toBe('Upload file');
+    cleanup(el);
+  });
+
+  it('input is disabled when disabled attribute is set', async () => {
+    const el = await fixture('<bds-file-input name="avatar" disabled></bds-file-input>');
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    expect(input.disabled).toBe(true);
+    cleanup(el);
+  });
+
+  it('forwards accept attribute to input', async () => {
+    const el = await fixture('<bds-file-input name="avatar" accept="image/*"></bds-file-input>');
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    expect(input.accept).toBe('image/*');
+    cleanup(el);
+  });
+
+  it('forwards multiple attribute to input', async () => {
+    const el = await fixture('<bds-file-input name="files" multiple></bds-file-input>');
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    expect(input.multiple).toBe(true);
+    cleanup(el);
+  });
+
+  it('renders slotted label text', async () => {
+    const el = await fixture('<bds-file-input name="avatar">Upload photo</bds-file-input>');
+    expect(el.textContent?.trim()).toBe('Upload photo');
+    cleanup(el);
+  });
+
+  it('is form-associated', () => {
+    expect(BdsFileInput.formAssociated).toBe(true);
+  });
+});