@boostdev/design-system-components 1.1.1 → 1.2.0

package/src/web-components/interaction/bds-collapsible.spec.ts

@@ -0,0 +1,56 @@
+import { fixture, cleanup } from '../test/helpers';
+import { BdsCollapsible } from './bds-collapsible';
+
+describe('bds-collapsible', () => {
+  it('is registered as a custom element', () => {
+    expect(customElements.get('bds-collapsible')).toBe(BdsCollapsible);
+  });
+
+  it('is closed by default', async () => {
+    const el = await fixture('<bds-collapsible><span slot="summary">Title</span><p>Content</p></bds-collapsible>') as BdsCollapsible;
+    expect(el.open).toBe(false);
+    expect(el.hasAttribute('open')).toBe(false);
+    cleanup(el);
+  });
+
+  it('renders a native <details> element in shadow DOM', async () => {
+    const el = await fixture('<bds-collapsible><span slot="summary">Title</span><p>Content</p></bds-collapsible>');
+    expect(el.shadowRoot!.querySelector('details')).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('renders a <summary> element', async () => {
+    const el = await fixture('<bds-collapsible><span slot="summary">Title</span><p>Content</p></bds-collapsible>');
+    expect(el.shadowRoot!.querySelector('summary')).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('is open when open attribute is set', async () => {
+    const el = await fixture('<bds-collapsible open><span slot="summary">Title</span><p>Content</p></bds-collapsible>') as BdsCollapsible;
+    expect(el.open).toBe(true);
+    const details = el.shadowRoot!.querySelector('details');
+    expect(details!.hasAttribute('open')).toBe(true);
+    cleanup(el);
+  });
+
+  it('fires bds-toggle event when toggled', async () => {
+    const el = await fixture('<bds-collapsible><span slot="summary">Title</span><p>Content</p></bds-collapsible>') as BdsCollapsible;
+    const handler = vi.fn();
+    el.addEventListener('bds-toggle', handler);
+    // jsdom does not fire the native toggle event on summary click;
+    // dispatch it directly on the <details> element instead.
+    const details = el.shadowRoot!.querySelector('details')!;
+    details.dispatchEvent(new Event('toggle', { bubbles: false }));
+    await el.updateComplete;
+    expect(handler).toHaveBeenCalledOnce();
+    cleanup(el);
+  });
+
+  it('reflects open state change from outside', async () => {
+    const el = await fixture('<bds-collapsible><span slot="summary">Title</span><p>Content</p></bds-collapsible>') as BdsCollapsible;
+    el.open = true;
+    await el.updateComplete;
+    expect(el.getAttribute('open')).not.toBeNull();
+    cleanup(el);
+  });
+});

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

@@ -0,0 +1,170 @@
+import { LitElement, css, html } from 'lit';
+
+/**
+ * `<bds-collapsible>` — framework-agnostic Collapsible custom element.
+ *
+ * Wraps a native `<details>/<summary>` element for built-in toggle behaviour.
+ *
+ * Attributes:
+ *   open     — boolean; controlled open state
+ *   name     — groups multiple collapsibles so only one is open at a time
+ *               (native <details name="…"> behaviour)
+ *
+ * Slots:
+ *   summary  — the always-visible trigger text
+ *   (default) — the content revealed when expanded
+ *
+ * Events:
+ *   bds-toggle — fired (bubbles, composed) when the collapsible opens or closes;
+ *                event.detail.open reflects the new state
+ *
+ * @example
+ * <bds-collapsible>
+ *   <span slot="summary">What is this?</span>
+ *   <p>It's a collapsible panel.</p>
+ * </bds-collapsible>
+ */
+export class BdsCollapsible extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+    }
+
+    .collapsible {
+      border: var(--collapsible_border-width, 1px) solid var(--collapsible_border-color, var(--bds-color_bg--subtle));
+      border-radius: var(--collapsible_border-radius, var(--bds-border_radius--m));
+      overflow: hidden;
+    }
+
+    .summary {
+      list-style: none;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--bds-space_m);
+      padding: var(--bds-space_m);
+      cursor: pointer;
+      font-weight: var(--bds-font_weight--semibold);
+      font-size: var(--bds-font_size--body);
+      color: var(--collapsible_color, var(--bds-color_on-bg));
+      background-color: var(--collapsible_bg, var(--bds-color_bg));
+      user-select: none;
+      transition: var(--bds-animation_transition);
+    }
+
+    .summary::-webkit-details-marker {
+      display: none;
+    }
+
+    .summary:focus-visible {
+      outline: var(--bds-outline_default);
+      outline-offset: calc(var(--bds-outline_offset) * -1);
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+      .summary:hover {
+        background-color: var(--collapsible_bg--hover, var(--bds-color_bg--subtle));
+      }
+    }
+
+    .collapsible[open] > .summary {
+      border-block-end: var(--collapsible_border-width, 1px) solid var(--collapsible_border-color, var(--bds-color_bg--subtle));
+    }
+
+    .summary-content {
+      flex: 1;
+    }
+
+    .icon {
+      inline-size: 0.5rem;
+      block-size: 0.5rem;
+      border-inline-end: 2px solid currentcolor;
+      border-block-end: 2px solid currentcolor;
+      transform: rotate(45deg);
+      flex-shrink: 0;
+      transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
+    }
+
+    .collapsible[open] > .summary .icon {
+      transform: rotate(-135deg);
+    }
+
+    .content {
+      padding: var(--bds-space_m);
+      color: var(--collapsible_on-color, var(--bds-color_on-bg));
+      font-size: var(--bds-font_size--body);
+      line-height: var(--bds-font_line-height--body);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .icon {
+        transition: none;
+      }
+    }
+  `;
+
+  static properties = {
+    open: { type: Boolean, reflect: true },
+    name: { type: String },
+  };
+
+  declare open: boolean;
+  declare name: string;
+
+  constructor() {
+    super();
+    this.open = false;
+    this.name = '';
+  }
+
+  updated(changed: Map<string, unknown>) {
+    super.updated(changed);
+    // Keep the inner <details> name attribute in sync since it can't be bound directly
+    if (changed.has('name')) {
+      const details = this.shadowRoot?.querySelector('details');
+      if (details) {
+        if (this.name) {
+          details.setAttribute('name', this.name);
+        } else {
+          details.removeAttribute('name');
+        }
+      }
+    }
+  }
+
+  private _onToggle(e: Event) {
+    const details = e.currentTarget as HTMLDetailsElement;
+    this.open = details.open;
+    this.dispatchEvent(
+      new CustomEvent('bds-toggle', {
+        bubbles: true,
+        composed: true,
+        detail: { open: this.open },
+      }),
+    );
+  }
+
+  render() {
+    return html`
+      <details
+        class="collapsible"
+        ?open=${this.open}
+        @toggle=${this._onToggle}
+      >
+        <summary class="summary">
+          <span class="summary-content"><slot name="summary"></slot></span>
+          <span class="icon" aria-hidden="true"></span>
+        </summary>
+        <div class="content"><slot></slot></div>
+      </details>
+    `;
+  }
+}
+
+customElements.define('bds-collapsible', BdsCollapsible);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bds-collapsible': BdsCollapsible;
+  }
+}

package/src/web-components/interaction/bds-dialog.spec.ts

@@ -0,0 +1,119 @@
+import { fixture, cleanup, makeCommandEvent } from '../test/helpers';
+import { BdsDialog } from './bds-dialog';
+
+beforeEach(() => {
+  // jsdom doesn't implement showModal/close — mock them to simulate the open attribute
+  HTMLDialogElement.prototype.showModal = vi.fn(function (this: HTMLDialogElement) {
+    this.setAttribute('open', '');
+  });
+  HTMLDialogElement.prototype.close = vi.fn(function (this: HTMLDialogElement) {
+    this.removeAttribute('open');
+  });
+  document.body.style.overflow = '';
+});
+
+describe('bds-dialog', () => {
+  it('is registered as a custom element', () => {
+    expect(customElements.get('bds-dialog')).toBe(BdsDialog);
+  });
+
+  it('renders a <dialog> element in shadow DOM', async () => {
+    const el = await fixture('<bds-dialog><p>Content</p></bds-dialog>');
+    expect(el.shadowRoot!.querySelector('dialog')).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('dialog has aria-modal="true"', async () => {
+    const el = await fixture('<bds-dialog><p>Content</p></bds-dialog>');
+    const dialog = el.shadowRoot!.querySelector('dialog')!;
+    expect(dialog.getAttribute('aria-modal')).toBe('true');
+    cleanup(el);
+  });
+
+  it('renders a close button with aria-label="Close dialog"', async () => {
+    const el = await fixture('<bds-dialog><p>Content</p></bds-dialog>');
+    const btn = el.shadowRoot!.querySelector('button.close-button');
+    expect(btn).not.toBeNull();
+    expect(btn!.getAttribute('aria-label')).toBe('Close dialog');
+    cleanup(el);
+  });
+
+  it('calls showModal when open attribute is set', async () => {
+    const el = await fixture('<bds-dialog open><p>Content</p></bds-dialog>');
+    expect(HTMLDialogElement.prototype.showModal).toHaveBeenCalled();
+    cleanup(el);
+  });
+
+  it('does not call showModal when closed', async () => {
+    const el = await fixture('<bds-dialog><p>Content</p></bds-dialog>');
+    expect(HTMLDialogElement.prototype.showModal).not.toHaveBeenCalled();
+    cleanup(el);
+  });
+
+  it('sets body overflow to hidden when open', async () => {
+    const el = await fixture('<bds-dialog open><p>Content</p></bds-dialog>');
+    expect(document.body.style.overflow).toBe('hidden');
+    cleanup(el);
+  });
+
+  it('calls close() and restores body scroll when open is toggled to false', async () => {
+    const el = await fixture('<bds-dialog open><p>Content</p></bds-dialog>') as BdsDialog;
+    expect(document.body.style.overflow).toBe('hidden');
+    el.open = false;
+    await el.updateComplete;
+    expect(HTMLDialogElement.prototype.close).toHaveBeenCalled();
+    expect(document.body.style.overflow).toBe('');
+    cleanup(el);
+  });
+
+  it('fires bds-open when opened programmatically', async () => {
+    const el = await fixture('<bds-dialog><p>Content</p></bds-dialog>') as BdsDialog;
+    const handler = vi.fn();
+    el.addEventListener('bds-open', handler);
+    el.dispatchEvent(makeCommandEvent('show-modal'));
+    expect(handler).toHaveBeenCalledOnce();
+    cleanup(el);
+  });
+
+  it('fires bds-close when closed programmatically', async () => {
+    const el = await fixture('<bds-dialog open><p>Content</p></bds-dialog>') as BdsDialog;
+    const handler = vi.fn();
+    el.addEventListener('bds-close', handler);
+    el.dispatchEvent(makeCommandEvent('close'));
+    expect(handler).toHaveBeenCalledOnce();
+    cleanup(el);
+  });
+
+  it('responds to show-modal command event', async () => {
+    const el = await fixture('<bds-dialog><p>Content</p></bds-dialog>') as BdsDialog;
+    expect(el.open).toBeFalsy();
+    el.dispatchEvent(makeCommandEvent('show-modal'));
+    await el.updateComplete;
+    expect(HTMLDialogElement.prototype.showModal).toHaveBeenCalled();
+    cleanup(el);
+  });
+
+  it('responds to close command event', async () => {
+    const el = await fixture('<bds-dialog open><p>Content</p></bds-dialog>') as BdsDialog;
+    el.dispatchEvent(makeCommandEvent('close'));
+    await el.updateComplete;
+    expect(HTMLDialogElement.prototype.close).toHaveBeenCalled();
+    cleanup(el);
+  });
+
+  it('close button click fires bds-close', async () => {
+    const el = await fixture('<bds-dialog open><p>Content</p></bds-dialog>');
+    const handler = vi.fn();
+    el.addEventListener('bds-close', handler);
+    const btn = el.shadowRoot!.querySelector<HTMLButtonElement>('button.close-button')!;
+    btn.click();
+    expect(handler).toHaveBeenCalledOnce();
+    cleanup(el);
+  });
+
+  it('renders slotted content', async () => {
+    const el = await fixture('<bds-dialog><p>Hello world</p></bds-dialog>');
+    expect(el.querySelector('p')!.textContent).toBe('Hello world');
+    cleanup(el);
+  });
+});

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

@@ -0,0 +1,221 @@
+import { LitElement, css, html } from 'lit';
+
+const FOCUSABLE = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+
+/**
+ * `<bds-dialog>` — framework-agnostic Dialog custom element.
+ *
+ * Wraps a native `<dialog>` element with `showModal()` / `close()` lifecycle,
+ * backdrop-click to dismiss, Escape key handling, Tab focus trapping, and
+ * the Invoker Commands API (`command="show-modal"` / `command="close"`).
+ *
+ * Attributes:
+ *   open — boolean; controlled open state (syncs to native showModal/close)
+ *
+ * Slots:
+ *   (default) — dialog content
+ *
+ * Events:
+ *   bds-open  — fired (bubbles, composed) when the dialog opens
+ *   bds-close — fired (bubbles, composed) when the dialog closes
+ *
+ * @example
+ * <bds-dialog id="my-dialog">
+ *   <p>Dialog content</p>
+ * </bds-dialog>
+ * <button commandfor="my-dialog" command="show-modal">Open</button>
+ */
+export class BdsDialog extends LitElement {
+  static styles = css`
+    :host {
+      display: contents;
+    }
+
+    .dialog {
+      font-size: var(--bds-font_size--body--s);
+      border: var(--dialog_border, none);
+      --bdc_color: currentcolor;
+      --bdc-outline_radius: var(--bds-border_radius--m);
+
+      border-radius: var(--dialog_radius, var(--bdc-outline_radius));
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--dialog_shadow, var(--bdc-outline_shadow));
+      background-color: var(--dialog_color, var(--bds-color_grey--subtle));
+      color: var(--dialog_on-color, var(--bds-color_on-grey--subtle));
+      padding: var(--bds-space_l);
+      max-inline-size: 90svw;
+      max-block-size: 90svh;
+      overflow: visible;
+      position: relative;
+    }
+
+    .dialog-content {
+      display: grid;
+      gap: var(--bds-grid_gap);
+      overflow-block: auto;
+      min-block-size: 0;
+      flex: 1;
+    }
+
+    .close-button {
+      all: unset;
+      position: absolute;
+      inset-block-start: -1em;
+      inset-inline-end: -1em;
+      inline-size: 2em;
+      block-size: 2em;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      background-color: var(--bds-color_bg);
+      color: currentcolor;
+      border: var(--dialog_close-border, none);
+      --bdc_color: currentcolor;
+
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
+      cursor: pointer;
+    }
+
+    .close-button svg {
+      inline-size: 1.25em;
+      block-size: 1.25em;
+    }
+
+    .dialog::backdrop {
+      background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
+      backdrop-filter: blur(3px);
+    }
+  `;
+
+  static properties = {
+    open: { type: Boolean, reflect: true },
+  };
+
+  declare open: boolean;
+
+  private _triggerEl: Element | null = null;
+
+  constructor() {
+    super();
+    this.open = false;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('command', this._onCommand);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener('command', this._onCommand);
+  }
+
+  updated(changed: Map<string, unknown>) {
+    super.updated(changed);
+    if (changed.has('open')) {
+      const dialog = this._dialog;
+      if (!dialog) return;
+      if (this.open && !dialog.open) {
+        this._triggerEl = document.activeElement;
+        dialog.showModal();
+        document.body.style.overflow = 'hidden';
+      } else if (!this.open && dialog.open) {
+        dialog.close();
+        document.body.style.overflow = '';
+        (this._triggerEl as HTMLElement | null)?.focus();
+        this._triggerEl = null;
+      }
+    }
+  }
+
+  private get _dialog(): HTMLDialogElement | null {
+    return this.shadowRoot?.querySelector('dialog') ?? null;
+  }
+
+  private _onCommand = (e: Event) => {
+    const command = (e as CommandEvent).command;
+    if (command === 'show-modal') this._openDialog();
+    else if (command === 'close') this._closeDialog();
+  };
+
+  private _openDialog() {
+    if (this.open) return;
+    this._triggerEl = document.activeElement;
+    this.open = true;
+    this.dispatchEvent(new CustomEvent('bds-open', { bubbles: true, composed: true }));
+  }
+
+  private _closeDialog() {
+    if (!this.open) return;
+    this.open = false;
+    this.dispatchEvent(new CustomEvent('bds-close', { bubbles: true, composed: true }));
+  }
+
+  private _handleBackdropClick(e: MouseEvent) {
+    if (e.target === this._dialog) this._closeDialog();
+  }
+
+  private _handleCancel(e: Event) {
+    e.preventDefault();
+    this._closeDialog();
+  }
+
+  private _handleKeydown(e: KeyboardEvent) {
+    if (e.key !== 'Tab') return;
+    const dialog = this._dialog;
+    if (!dialog) return;
+    const focusable = Array.from(dialog.querySelectorAll<HTMLElement>(FOCUSABLE));
+    // Also include slotted elements from light DOM via the slot
+    const slot = dialog.querySelector('slot');
+    const slottedFocusable = slot
+      ? (slot as HTMLSlotElement).assignedElements({ flatten: true })
+          .flatMap(el => [
+            ...(el.matches(FOCUSABLE) ? [el as HTMLElement] : []),
+            ...Array.from(el.querySelectorAll<HTMLElement>(FOCUSABLE)),
+          ])
+      : [];
+    const all = [...focusable, ...slottedFocusable];
+    if (all.length === 0) return;
+    const first = all[0];
+    const last = all[all.length - 1];
+    if (e.shiftKey) {
+      if (document.activeElement === first) { e.preventDefault(); last.focus(); }
+    } else {
+      if (document.activeElement === last) { e.preventDefault(); first.focus(); }
+    }
+  }
+
+  render() {
+    return html`
+      <dialog
+        class="dialog"
+        aria-modal="true"
+        @click=${this._handleBackdropClick}
+        @cancel=${this._handleCancel}
+        @keydown=${this._handleKeydown}
+      >
+        <button
+          type="button"
+          class="close-button"
+          aria-label="Close dialog"
+          @click=${this._closeDialog}
+        >
+          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M18 6L6 18M6 6l12 12" />
+          </svg>
+        </button>
+        <div class="dialog-content">
+          <slot></slot>
+        </div>
+      </dialog>
+    `;
+  }
+}
+
+customElements.define('bds-dialog', BdsDialog);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bds-dialog': BdsDialog;
+  }
+}

package/src/web-components/interaction/bds-drawer.spec.ts

@@ -0,0 +1,113 @@
+import { fixture, cleanup, makeCommandEvent } from '../test/helpers';
+import { BdsDrawer } from './bds-drawer';
+
+beforeEach(() => {
+  HTMLDialogElement.prototype.showModal = vi.fn(function (this: HTMLDialogElement) {
+    this.setAttribute('open', '');
+  });
+  HTMLDialogElement.prototype.close = vi.fn(function (this: HTMLDialogElement) {
+    this.removeAttribute('open');
+  });
+  document.body.style.overflow = '';
+});
+
+describe('bds-drawer', () => {
+  it('is registered as a custom element', () => {
+    expect(customElements.get('bds-drawer')).toBe(BdsDrawer);
+  });
+
+  it('renders a <dialog> element in shadow DOM', async () => {
+    const el = await fixture('<bds-drawer><p>Content</p></bds-drawer>');
+    expect(el.shadowRoot!.querySelector('dialog')).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('dialog has aria-modal="true"', async () => {
+    const el = await fixture('<bds-drawer><p>Content</p></bds-drawer>');
+    const dialog = el.shadowRoot!.querySelector('dialog')!;
+    expect(dialog.getAttribute('aria-modal')).toBe('true');
+    cleanup(el);
+  });
+
+  it('defaults to side="right"', async () => {
+    const el = await fixture('<bds-drawer><p>Content</p></bds-drawer>') as BdsDrawer;
+    expect(el.side).toBe('right');
+    cleanup(el);
+  });
+
+  it('reflects side attribute', async () => {
+    const el = await fixture('<bds-drawer side="left"><p>Content</p></bds-drawer>') as BdsDrawer;
+    await el.updateComplete;
+    expect(el.getAttribute('side')).toBe('left');
+    cleanup(el);
+  });
+
+  it('renders a close button with aria-label="Close drawer"', async () => {
+    const el = await fixture('<bds-drawer><p>Content</p></bds-drawer>');
+    const btn = el.shadowRoot!.querySelector('button.close-button');
+    expect(btn).not.toBeNull();
+    expect(btn!.getAttribute('aria-label')).toBe('Close drawer');
+    cleanup(el);
+  });
+
+  it('calls showModal when open attribute is set', async () => {
+    const el = await fixture('<bds-drawer open><p>Content</p></bds-drawer>');
+    expect(HTMLDialogElement.prototype.showModal).toHaveBeenCalled();
+    cleanup(el);
+  });
+
+  it('sets body overflow to hidden when open', async () => {
+    const el = await fixture('<bds-drawer open><p>Content</p></bds-drawer>');
+    expect(document.body.style.overflow).toBe('hidden');
+    cleanup(el);
+  });
+
+  it('calls close() and restores body scroll when open is set to false', async () => {
+    const el = await fixture('<bds-drawer open><p>Content</p></bds-drawer>') as BdsDrawer;
+    el.open = false;
+    await el.updateComplete;
+    expect(HTMLDialogElement.prototype.close).toHaveBeenCalled();
+    expect(document.body.style.overflow).toBe('');
+    cleanup(el);
+  });
+
+  it('fires bds-open on show-modal command', async () => {
+    const el = await fixture('<bds-drawer><p>Content</p></bds-drawer>');
+    const handler = vi.fn();
+    el.addEventListener('bds-open', handler);
+    el.dispatchEvent(makeCommandEvent('show-modal'));
+    expect(handler).toHaveBeenCalledOnce();
+    cleanup(el);
+  });
+
+  it('fires bds-close on close command', async () => {
+    const el = await fixture('<bds-drawer open><p>Content</p></bds-drawer>');
+    const handler = vi.fn();
+    el.addEventListener('bds-close', handler);
+    el.dispatchEvent(makeCommandEvent('close'));
+    expect(handler).toHaveBeenCalledOnce();
+    cleanup(el);
+  });
+
+  it('close button click fires bds-close', async () => {
+    const el = await fixture('<bds-drawer open><p>Content</p></bds-drawer>');
+    const handler = vi.fn();
+    el.addEventListener('bds-close', handler);
+    const btn = el.shadowRoot!.querySelector<HTMLButtonElement>('button.close-button')!;
+    btn.click();
+    expect(handler).toHaveBeenCalledOnce();
+    cleanup(el);
+  });
+
+  it('renders slotted title content', async () => {
+    const el = await fixture('<bds-drawer><span slot="title">Settings</span></bds-drawer>');
+    expect(el.querySelector('[slot="title"]')!.textContent).toBe('Settings');
+    cleanup(el);
+  });
+
+  it('renders slotted body content', async () => {
+    const el = await fixture('<bds-drawer><p>Body content</p></bds-drawer>');
+    expect(el.querySelector('p')!.textContent).toBe('Body content');
+    cleanup(el);
+  });
+});