@boostdev/design-system-components 1.1.1 → 1.1.2

package/src/web-components/interaction/bds-tooltip.ts

@@ -0,0 +1,127 @@
+import { LitElement, css, html } from 'lit';
+
+export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+
+/**
+ * `<bds-tooltip>` — framework-agnostic Tooltip custom element.
+ *
+ * Shows a tooltip panel on hover and keyboard focus using CSS-only visibility.
+ * The tooltip position is controlled via the `placement` attribute.
+ *
+ * Attributes:
+ *   content   — text to display in the tooltip
+ *   placement — "top" (default) | "bottom" | "left" | "right"
+ *
+ * Slots:
+ *   (default) — the trigger element (button, icon, etc.)
+ *
+ * Accessibility:
+ *   The `aria-describedby` relationship between trigger and tooltip panel
+ *   cannot cross shadow DOM boundaries; screen readers will announce the tooltip
+ *   via role="tooltip" proximity when it becomes visible.
+ *
+ * @example
+ * <bds-tooltip content="More information" placement="bottom">
+ *   <button type="button">?</button>
+ * </bds-tooltip>
+ */
+export class BdsTooltip extends LitElement {
+  static styles = css`
+    :host {
+      display: inline-flex;
+      align-items: center;
+      position: relative;
+    }
+
+    .tooltip {
+      position: absolute;
+      z-index: var(--bds-z-index_popover, 200);
+      padding: var(--bds-space_xxs) var(--bds-space_xs);
+      border-radius: var(--bds-border_radius--xs);
+      background-color: var(--tooltip_bg, var(--bds-color_on-bg));
+      color: var(--tooltip_text, var(--bds-color_bg));
+      font-size: var(--bds-font_size--body--s);
+      line-height: var(--bds-font_line-height--body);
+      white-space: nowrap;
+      pointer-events: none;
+
+      /* Hidden by default */
+      visibility: hidden;
+      opacity: 0;
+      transition: opacity var(--bds-animation_transition-duration) var(--bds-animation_easing);
+    }
+
+    /* Show on hover and keyboard focus */
+    :host(:hover) .tooltip,
+    :host(:focus-within) .tooltip {
+      visibility: visible;
+      opacity: 1;
+    }
+
+    /* Placement: top (default) */
+    .tooltip.--placement_top {
+      inset-block-end: calc(100% + var(--bds-space_xs));
+      inset-inline-start: 50%;
+      transform: translateX(-50%);
+    }
+
+    /* Placement: bottom */
+    .tooltip.--placement_bottom {
+      inset-block-start: calc(100% + var(--bds-space_xs));
+      inset-inline-start: 50%;
+      transform: translateX(-50%);
+    }
+
+    /* Placement: left */
+    .tooltip.--placement_left {
+      inset-inline-end: calc(100% + var(--bds-space_xs));
+      inset-block-start: 50%;
+      transform: translateY(-50%);
+    }
+
+    /* Placement: right */
+    .tooltip.--placement_right {
+      inset-inline-start: calc(100% + var(--bds-space_xs));
+      inset-block-start: 50%;
+      transform: translateY(-50%);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .tooltip {
+        transition: none;
+      }
+    }
+  `;
+
+  static properties = {
+    content:   { type: String },
+    placement: { type: String, reflect: true },
+  };
+
+  declare content: string;
+  declare placement: TooltipPlacement;
+
+  constructor() {
+    super();
+    this.content = '';
+    this.placement = 'top';
+  }
+
+  render() {
+    return html`
+      <slot></slot>
+      <span
+        class="tooltip --placement_${this.placement}"
+        role="tooltip"
+      >${this.content}</span>
+    `;
+  }
+}
+
+customElements.define('bds-tooltip', BdsTooltip);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bds-tooltip': BdsTooltip;
+  }
+}

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

@@ -0,0 +1,63 @@
+import { fixture, cleanup } from '../../test/helpers';
+import { BdsCheckbox } from './bds-checkbox';
+
+describe('bds-checkbox', () => {
+  it('is registered as a custom element', () => {
+    expect(customElements.get('bds-checkbox')).toBe(BdsCheckbox);
+  });
+
+  it('renders a checkbox input in shadow DOM', async () => {
+    const el = await fixture('<bds-checkbox name="agree">Accept</bds-checkbox>');
+    expect(el.shadowRoot!.querySelector('input[type="checkbox"]')).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('is not checked by default', async () => {
+    const el = await fixture('<bds-checkbox name="agree">Accept</bds-checkbox>');
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    expect(input.checked).toBe(false);
+    cleanup(el);
+  });
+
+  it('is checked when checked attribute is set', async () => {
+    const el = await fixture('<bds-checkbox name="agree" checked>Accept</bds-checkbox>');
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    expect(input.checked).toBe(true);
+    cleanup(el);
+  });
+
+  it('input is disabled when disabled attribute is set', async () => {
+    const el = await fixture('<bds-checkbox name="agree" disabled>Accept</bds-checkbox>');
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    expect(input.disabled).toBe(true);
+    cleanup(el);
+  });
+
+  it('renders a label linked to the input', async () => {
+    const el = await fixture('<bds-checkbox name="agree">Accept</bds-checkbox>');
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    const label = el.shadowRoot!.querySelector('label')!;
+    expect(input.id).toBeTruthy();
+    expect(label.getAttribute('for')).toBe(input.id);
+    cleanup(el);
+  });
+
+  it('renders slotted label text', async () => {
+    const el = await fixture('<bds-checkbox name="agree">Accept terms</bds-checkbox>');
+    expect(el.textContent?.trim()).toBe('Accept terms');
+    cleanup(el);
+  });
+
+  it('updates checked property on change', async () => {
+    const el = await fixture('<bds-checkbox name="agree">Accept</bds-checkbox>') as BdsCheckbox;
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    input.checked = true;
+    input.dispatchEvent(new Event('change', { bubbles: true }));
+    expect(el.checked).toBe(true);
+    cleanup(el);
+  });
+
+  it('is form-associated', () => {
+    expect(BdsCheckbox.formAssociated).toBe(true);
+  });
+});

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

@@ -0,0 +1,168 @@
+import { LitElement, css, html } from 'lit';
+
+/**
+ * `<bds-checkbox>` — form-associated Checkbox custom element.
+ *
+ * Participates in HTML forms via the Form-Associated Custom Elements API
+ * (`ElementInternals`). Native browser validation (required, etc.) works
+ * without any wrapper.
+ *
+ * Attributes:
+ *   name     — form field name
+ *   value    — submitted value when checked (default: "on")
+ *   checked  — boolean; whether the checkbox is checked
+ *   required — boolean
+ *   disabled — boolean
+ *
+ * Slots:
+ *   (default) — label text
+ *
+ * Events:
+ *   change — native change event (forwarded from inner input)
+ *
+ * @example
+ * <bds-checkbox name="agree" value="yes" required>I agree</bds-checkbox>
+ */
+export class BdsCheckbox 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: 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));
+      border: none;
+      appearance: none;
+      background-color: var(--checkbox_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(--checkbox_color-active, var(--bdc-color_active));
+      --bdc_color: var(--checkbox_color-active, var(--bdc-color_active));
+    }
+
+    .input:checked::after {
+      content: '';
+      position: absolute;
+      inset-inline-start: 0.6em;
+      inset-block-start: 0.2em;
+      inline-size: 0.5em;
+      block-size: 1em;
+      border: solid var(--checkbox_color-on-active, var(--bdc-color_on-active));
+      border-width: 0 2px 2px 0;
+      transform: rotate(45deg);
+    }
+
+    .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 = 'on';
+    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);
+    }
+    if (changed.has('required')) {
+      if (this.required && !this.checked) {
+        this._internals.setValidity?.({ valueMissing: true }, 'Required');
+      } else {
+        this._internals.setValidity?.({});
+      }
+    }
+  }
+
+  formResetCallback() {
+    this.checked = false;
+    this._internals.setFormValue?.(null);
+  }
+
+  private _handleChange(e: Event) {
+    this.checked = (e.target as HTMLInputElement).checked;
+  }
+
+  render() {
+    const id = `bds-checkbox-${this._uid}`;
+    return html`
+      <input
+        id=${id}
+        type="checkbox"
+        class="input"
+        .checked=${this.checked}
+        ?required=${this.required}
+        ?disabled=${this.disabled}
+        @change=${this._handleChange}
+      />
+      <label for=${id}><slot></slot></label>
+    `;
+  }
+}
+
+customElements.define('bds-checkbox', BdsCheckbox);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bds-checkbox': BdsCheckbox;
+  }
+}

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