@boostdev/design-system-components 1.1.0 → 1.1.2

package/src/web-components/interaction/bds-accordion-item.spec.ts

@@ -0,0 +1,75 @@
+import { fixture, cleanup } from '../test/helpers';
+import { BdsAccordionItem } from './bds-accordion-item';
+
+describe('bds-accordion-item', () => {
+  it('is registered as a custom element', () => {
+    expect(customElements.get('bds-accordion-item')).toBe(BdsAccordionItem);
+  });
+
+  it('is closed by default', async () => {
+    const el = await fixture('<bds-accordion-item><span slot="header">Q</span><p>A</p></bds-accordion-item>') as BdsAccordionItem;
+    expect(el.open).toBe(false);
+    cleanup(el);
+  });
+
+  it('renders a trigger button', async () => {
+    const el = await fixture('<bds-accordion-item><span slot="header">Q</span><p>A</p></bds-accordion-item>');
+    expect(el.shadowRoot!.querySelector('button.trigger')).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('trigger has aria-expanded="false" when closed', async () => {
+    const el = await fixture('<bds-accordion-item><span slot="header">Q</span><p>A</p></bds-accordion-item>');
+    const btn = el.shadowRoot!.querySelector('button')!;
+    expect(btn.getAttribute('aria-expanded')).toBe('false');
+    cleanup(el);
+  });
+
+  it('trigger has aria-expanded="true" when open', async () => {
+    const el = await fixture('<bds-accordion-item open><span slot="header">Q</span><p>A</p></bds-accordion-item>');
+    const btn = el.shadowRoot!.querySelector('button')!;
+    expect(btn.getAttribute('aria-expanded')).toBe('true');
+    cleanup(el);
+  });
+
+  it('panel is hidden when closed', async () => {
+    const el = await fixture('<bds-accordion-item><span slot="header">Q</span><p>A</p></bds-accordion-item>');
+    const panel = el.shadowRoot!.querySelector('[role="region"]')!;
+    expect(panel.hasAttribute('hidden')).toBe(true);
+    cleanup(el);
+  });
+
+  it('panel is visible when open', async () => {
+    const el = await fixture('<bds-accordion-item open><span slot="header">Q</span><p>A</p></bds-accordion-item>');
+    const panel = el.shadowRoot!.querySelector('[role="region"]')!;
+    expect(panel.hasAttribute('hidden')).toBe(false);
+    cleanup(el);
+  });
+
+  it('fires bds-accordion-item-toggle when trigger is clicked', async () => {
+    const el = await fixture('<bds-accordion-item><span slot="header">Q</span><p>A</p></bds-accordion-item>');
+    const btn = el.shadowRoot!.querySelector('button')!;
+    const handler = vi.fn();
+    el.addEventListener('bds-accordion-item-toggle', handler);
+    btn.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true }));
+    expect(handler).toHaveBeenCalledOnce();
+    cleanup(el);
+  });
+
+  it('does not fire toggle event when disabled', async () => {
+    const el = await fixture('<bds-accordion-item disabled><span slot="header">Q</span><p>A</p></bds-accordion-item>');
+    const btn = el.shadowRoot!.querySelector('button')!;
+    const handler = vi.fn();
+    el.addEventListener('bds-accordion-item-toggle', handler);
+    btn.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true }));
+    expect(handler).not.toHaveBeenCalled();
+    cleanup(el);
+  });
+
+  it('button is disabled when disabled attribute is set', async () => {
+    const el = await fixture('<bds-accordion-item disabled><span slot="header">Q</span><p>A</p></bds-accordion-item>');
+    const btn = el.shadowRoot!.querySelector('button')!;
+    expect(btn.hasAttribute('disabled')).toBe(true);
+    cleanup(el);
+  });
+});

package/src/web-components/interaction/bds-accordion-item.ts

@@ -0,0 +1,181 @@
+import { LitElement, css, html } from 'lit';
+
+/**
+ * `<bds-accordion-item>` — child element of `<bds-accordion>`.
+ *
+ * Manages a single collapsible panel. The `open` and `disabled` state is
+ * controlled by the parent `<bds-accordion>` element.
+ *
+ * Attributes:
+ *   open     — boolean; whether the panel is expanded
+ *   disabled — boolean; prevents the user from toggling this item
+ *
+ * Slots:
+ *   header   — the always-visible trigger label
+ *   (default) — the content revealed when open
+ *
+ * Events:
+ *   bds-accordion-item-toggle — fired (bubbles, composed) when the trigger
+ *                               button is clicked; the parent accordion handles
+ *                               the state change.
+ *
+ * @example
+ * <bds-accordion-item>
+ *   <span slot="header">Question</span>
+ *   <p>Answer content</p>
+ * </bds-accordion-item>
+ */
+export class BdsAccordionItem extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+      border-block-end: 1px solid var(--bds-color_bg--subtle);
+    }
+
+    :host(:last-child) {
+      border-block-end: none;
+    }
+
+    .heading {
+      margin: 0;
+    }
+
+    .trigger {
+      all: unset;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      inline-size: 100%;
+      padding: var(--bds-space_m);
+      font-family: var(--bds-font_family--body);
+      font-size: var(--bds-font_size--body);
+      font-weight: var(--bds-font_weight--semibold);
+      color: var(--bds-color_on-bg);
+      cursor: pointer;
+      transition: var(--bds-animation_transition);
+      box-sizing: border-box;
+    }
+
+    .trigger:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    .trigger:focus-visible {
+      outline: var(--bds-outline_default);
+      outline-offset: calc(var(--bds-outline_offset) * -1);
+      border-radius: var(--bds-border_radius--xs);
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+      .trigger:not(:disabled):hover {
+        background-color: var(--bds-color_bg--subtle);
+      }
+    }
+
+    .trigger-label {
+      flex: 1;
+      text-align: start;
+    }
+
+    .chevron {
+      inline-size: 1.25rem;
+      block-size: 1.25rem;
+      flex-shrink: 0;
+      transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
+    }
+
+    :host([open]) .chevron {
+      transform: rotate(180deg);
+    }
+
+    .panel {
+      overflow: hidden;
+    }
+
+    .panel-content {
+      padding: 0 var(--bds-space_m) var(--bds-space_m);
+      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) {
+      .chevron {
+        transition: none;
+      }
+    }
+  `;
+
+  static properties = {
+    open:     { type: Boolean, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+  };
+
+  declare open: boolean;
+  declare disabled: boolean;
+
+  // Stable IDs for aria-controls / aria-labelledby
+  private readonly _uid = Math.random().toString(36).slice(2, 8);
+
+  constructor() {
+    super();
+    this.open = false;
+    this.disabled = false;
+  }
+
+  private _handleTriggerClick() {
+    if (this.disabled) return;
+    this.dispatchEvent(
+      new CustomEvent('bds-accordion-item-toggle', { bubbles: true, composed: true }),
+    );
+  }
+
+  render() {
+    const triggerId = `bds-acc-trigger-${this._uid}`;
+    const panelId = `bds-acc-panel-${this._uid}`;
+
+    return html`
+      <h3 class="heading">
+        <button
+          type="button"
+          id=${triggerId}
+          class="trigger"
+          aria-expanded=${this.open}
+          aria-controls=${panelId}
+          ?disabled=${this.disabled}
+          @click=${this._handleTriggerClick}
+        >
+          <span class="trigger-label"><slot name="header"></slot></span>
+          <svg
+            class="chevron"
+            aria-hidden="true"
+            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>
+        </button>
+      </h3>
+      <div
+        id=${panelId}
+        class="panel"
+        role="region"
+        aria-labelledby=${triggerId}
+        ?hidden=${!this.open}
+      >
+        <div class="panel-content"><slot></slot></div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('bds-accordion-item', BdsAccordionItem);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bds-accordion-item': BdsAccordionItem;
+  }
+}

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

@@ -0,0 +1,73 @@
+import { fixture, cleanup } from '../test/helpers';
+import { BdsAccordion } from './bds-accordion';
+import { BdsAccordionItem } from './bds-accordion-item';
+
+const html = `
+  <bds-accordion>
+    <bds-accordion-item><span slot="header">Q1</span><p>A1</p></bds-accordion-item>
+    <bds-accordion-item><span slot="header">Q2</span><p>A2</p></bds-accordion-item>
+    <bds-accordion-item><span slot="header">Q3</span><p>A3</p></bds-accordion-item>
+  </bds-accordion>
+`;
+
+describe('bds-accordion', () => {
+  it('is registered as a custom element', () => {
+    expect(customElements.get('bds-accordion')).toBe(BdsAccordion);
+  });
+
+  it('all items are closed by default', async () => {
+    const el = await fixture(html);
+    const items = [...el.querySelectorAll<BdsAccordionItem>('bds-accordion-item')];
+    // Reflect: true means open=false removes the attribute; check attribute absence.
+    expect(items.every(i => !i.hasAttribute('open'))).toBe(true);
+    cleanup(el);
+  });
+
+  it('opens the toggled item when a bds-accordion-item-toggle fires', async () => {
+    const el = await fixture(html);
+    const items = [...el.querySelectorAll<BdsAccordionItem>('bds-accordion-item')];
+    items[0].dispatchEvent(new CustomEvent('bds-accordion-item-toggle', { bubbles: true, composed: true }));
+    expect(items[0].open).toBe(true);
+    cleanup(el);
+  });
+
+  it('closes other items when a new one is toggled (exclusive by default)', async () => {
+    const el = await fixture(html);
+    const items = [...el.querySelectorAll<BdsAccordionItem>('bds-accordion-item')];
+    // Open first
+    items[0].dispatchEvent(new CustomEvent('bds-accordion-item-toggle', { bubbles: true, composed: true }));
+    expect(items[0].open).toBe(true);
+    // Toggle second
+    items[1].dispatchEvent(new CustomEvent('bds-accordion-item-toggle', { bubbles: true, composed: true }));
+    expect(items[1].open).toBe(true);
+    expect(items[0].open).toBe(false);
+    cleanup(el);
+  });
+
+  it('allows multiple open items when allow-multiple is set', async () => {
+    const el = await fixture(`
+      <bds-accordion allow-multiple>
+        <bds-accordion-item><span slot="header">Q1</span><p>A1</p></bds-accordion-item>
+        <bds-accordion-item><span slot="header">Q2</span><p>A2</p></bds-accordion-item>
+      </bds-accordion>
+    `);
+    const items = [...el.querySelectorAll<BdsAccordionItem>('bds-accordion-item')];
+    items[0].dispatchEvent(new CustomEvent('bds-accordion-item-toggle', { bubbles: true, composed: true }));
+    items[1].dispatchEvent(new CustomEvent('bds-accordion-item-toggle', { bubbles: true, composed: true }));
+    expect(items[0].open).toBe(true);
+    expect(items[1].open).toBe(true);
+    cleanup(el);
+  });
+
+  it('closes an already-open item when toggled again', async () => {
+    const el = await fixture(html);
+    const items = [...el.querySelectorAll<BdsAccordionItem>('bds-accordion-item')];
+    // Open first
+    items[0].dispatchEvent(new CustomEvent('bds-accordion-item-toggle', { bubbles: true, composed: true }));
+    expect(items[0].open).toBe(true);
+    // Toggle again to close
+    items[0].dispatchEvent(new CustomEvent('bds-accordion-item-toggle', { bubbles: true, composed: true }));
+    expect(items[0].open).toBe(false);
+    cleanup(el);
+  });
+});

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

@@ -0,0 +1,99 @@
+import { LitElement, css, html } from 'lit';
+import type { BdsAccordionItem } from './bds-accordion-item';
+
+/**
+ * `<bds-accordion>` — framework-agnostic Accordion custom element.
+ *
+ * Contains `<bds-accordion-item>` children. Coordinates open/closed state
+ * across items; by default only one item is open at a time.
+ *
+ * Attributes:
+ *   allow-multiple — boolean; when set, multiple items can be open simultaneously
+ *
+ * @example
+ * <bds-accordion>
+ *   <bds-accordion-item>
+ *     <span slot="header">Question 1</span>
+ *     <p>Answer 1</p>
+ *   </bds-accordion-item>
+ *   <bds-accordion-item>
+ *     <span slot="header">Question 2</span>
+ *     <p>Answer 2</p>
+ *   </bds-accordion-item>
+ * </bds-accordion>
+ */
+export class BdsAccordion extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+      --bdc_color: var(--bds-color_bg--subtle);
+      --bdc-outline_radius: var(--bds-border_radius--s);
+      outline: var(--bdc-outline_width) solid var(--bdc_color);
+      outline-offset: var(--bdc-outline_offset);
+      border-radius: var(--accordion_radius, var(--bdc-outline_radius));
+      overflow: hidden;
+    }
+  `;
+
+  static properties = {
+    allowMultiple: { type: Boolean, attribute: 'allow-multiple', reflect: true },
+  };
+
+  declare allowMultiple: boolean;
+
+  private _mo: MutationObserver | null = null;
+
+  constructor() {
+    super();
+    this.allowMultiple = false;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('bds-accordion-item-toggle', this._handleItemToggle);
+    this._mo = new MutationObserver(() => this._discoverItems());
+    this._mo.observe(this, { childList: true, subtree: false });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener('bds-accordion-item-toggle', this._handleItemToggle);
+    this._mo?.disconnect();
+    this._mo = null;
+  }
+
+  private get _items(): BdsAccordionItem[] {
+    return [...this.querySelectorAll<BdsAccordionItem>('bds-accordion-item')];
+  }
+
+  private _discoverItems() {
+    // No-op: items are queried on demand via _items getter.
+    // The MutationObserver ensures we react to added/removed items.
+    this.requestUpdate();
+  }
+
+  private _handleItemToggle = (e: Event) => {
+    const toggled = e.target as BdsAccordionItem;
+    const items = this._items;
+    const wasOpen = toggled.open;
+
+    if (!this.allowMultiple) {
+      // Close all others
+      items.forEach(item => { item.open = false; });
+    }
+    // Toggle the clicked item
+    toggled.open = !wasOpen;
+  };
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+customElements.define('bds-accordion', BdsAccordion);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bds-accordion': BdsAccordion;
+  }
+}

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