@boostdev/design-system-components 1.1.2 → 1.2.1

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

@@ -37,44 +37,65 @@ export class BdsDrawer extends LitElement {
 
     .drawer {
       position: fixed;
-      inset: 0;
+      inset-block: 0;
+      inset-inline: auto 0;
+      inline-size: min(28rem, 90vw);
+      max-inline-size: 100vw;
+      block-size: 100dvh;
+      max-block-size: 100dvh;
       margin: 0;
       padding: 0;
-      inline-size: 100%;
-      max-inline-size: 100%;
-      block-size: 100%;
-      max-block-size: 100%;
+      display: flex;
+      flex-direction: column;
+      background-color: var(--drawer_color, var(--bds-color_bg));
+      color: var(--drawer_on-color, var(--bds-color_on-bg));
       border: none;
-      background: transparent;
+      box-shadow: var(--bds-shadow_xl);
       overflow: hidden;
+      translate: 100% 0;
+      transition:
+        translate var(--bds-animation_transition-duration) var(--bds-animation_easing),
+        display var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete,
+        overlay var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete;
+    }
+
+    :host([side='left']) .drawer {
+      inset-inline: 0 auto;
+      translate: -100% 0;
+    }
+
+    .drawer[open] {
+      translate: 0 0;
+    }
+
+    @starting-style {
+      .drawer[open] {
+        translate: 100% 0;
+      }
+
+      :host([side='left']) .drawer[open] {
+        translate: -100% 0;
+      }
     }
 
     .drawer::backdrop {
       background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
       backdrop-filter: blur(3px);
+      opacity: 0;
+      transition:
+        opacity var(--bds-animation_transition-duration) var(--bds-animation_easing),
+        display var(--bds-animation_transition-duration) allow-discrete,
+        overlay var(--bds-animation_transition-duration) allow-discrete;
     }
 
-    .panel {
-      position: absolute;
-      inset-block: 0;
-      display: flex;
-      flex-direction: column;
-      inline-size: min(28rem, 90vw);
-      block-size: 100%;
-      background-color: var(--drawer_color, var(--bds-color_bg));
-      color: var(--drawer_on-color, var(--bds-color_on-bg));
-      box-shadow: var(--bds-shadow_xl);
-      overflow: hidden;
-      transition: var(--bds-animation_transition);
-    }
-
-    :host([side='right']) .panel {
-      inset-inline-end: 0;
+    .drawer[open]::backdrop {
+      opacity: 1;
     }
 
-    :host([side='left']) .panel,
-    :host(:not([side])) .panel {
-      inset-inline-start: 0;
+    @starting-style {
+      .drawer[open]::backdrop {
+        opacity: 0;
+      }
     }
 
     .header {
@@ -128,7 +149,8 @@ export class BdsDrawer extends LitElement {
     }
 
     @media (prefers-reduced-motion: reduce) {
-      .panel {
+      .drawer,
+      .drawer::backdrop {
         transition: none;
       }
     }
@@ -202,7 +224,13 @@ export class BdsDrawer extends LitElement {
   }
 
   private _handleBackdropClick(e: MouseEvent) {
-    if (e.target === this._dialog) this._closeDrawer();
+    const dialog = this._dialog;
+    if (!dialog) return;
+    const rect = dialog.getBoundingClientRect();
+    const outside =
+      e.clientX < rect.left || e.clientX > rect.right ||
+      e.clientY < rect.top  || e.clientY > rect.bottom;
+    if (outside) this._closeDrawer();
   }
 
   private _handleCancel(e: Event) {
@@ -234,23 +262,21 @@ export class BdsDrawer extends LitElement {
         @cancel=${this._handleCancel}
         @keydown=${this._handleKeydown}
       >
-        <div class="panel">
-          <div class="header">
-            <span class="title"><slot name="title"></slot></span>
-            <button
-              type="button"
-              class="close-button"
-              aria-label="Close drawer"
-              @click=${this._closeDrawer}
-            >
-              <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>
-          <div class="body">
-            <slot></slot>
-          </div>
+        <div class="header">
+          <span class="title"><slot name="title"></slot></span>
+          <button
+            type="button"
+            class="close-button"
+            aria-label="Close drawer"
+            @click=${this._closeDrawer}
+          >
+            <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>
+        <div class="body">
+          <slot></slot>
         </div>
       </dialog>
     `;

package/src/web-components/interaction/bds-dropdown-menu-item.ts

@@ -0,0 +1,124 @@
+import { LitElement, css, html } from 'lit';
+
+/**
+ * `<bds-dropdown-menu-item>` — a single item inside a `<bds-dropdown-menu>`.
+ *
+ * Attributes:
+ *   value       — value associated with this item
+ *   disabled    — disables this item
+ *   destructive — renders the item in a destructive (red) style
+ *
+ * Slots:
+ *   (default) — item label text
+ *
+ * Events:
+ *   bds-select — fired when the item is clicked or activated; `detail: { value: string }`
+ *
+ * @example
+ * <bds-dropdown-menu-item value="delete" destructive>Delete</bds-dropdown-menu-item>
+ */
+export class BdsDropdownMenuItem extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+    }
+
+    :host([disabled]) {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    .item {
+      display: flex;
+      align-items: center;
+      gap: var(--bds-space_xs);
+      inline-size: 100%;
+      padding: var(--bds-space_xs) var(--bds-space_s);
+      font-size: var(--bds-font_size--body);
+      font-family: var(--bds-font_family--body);
+      color: var(--bds-color_on-bg);
+      background: none;
+      border: none;
+      text-align: start;
+      cursor: pointer;
+      border-radius: var(--bds-border_radius--xs);
+      transition: var(--bds-animation_transition);
+    }
+
+    :host([destructive]) .item {
+      color: var(--bds-color_error);
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+      .item:hover {
+        background-color: var(--bds-color_bg--subtle);
+      }
+
+      :host([destructive]) .item:hover {
+        background-color: color-mix(in srgb, var(--bds-color_error) 10%, transparent);
+      }
+    }
+
+    .item:focus-visible {
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
+    }
+  `;
+
+  static properties = {
+    value:       { type: String, reflect: true },
+    disabled:    { type: Boolean, reflect: true },
+    destructive: { type: Boolean, reflect: true },
+  };
+
+  declare value: string;
+  declare disabled: boolean;
+  declare destructive: boolean;
+
+  constructor() {
+    super();
+    this.value = '';
+    this.disabled = false;
+    this.destructive = false;
+  }
+
+  private _handleClick() {
+    if (this.disabled) return;
+    this.dispatchEvent(new CustomEvent('bds-select', {
+      detail: { value: this.value },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  private _handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      this._handleClick();
+    }
+  }
+
+  render() {
+    return html`
+      <button
+        class="item"
+        type="button"
+        role="menuitem"
+        tabindex=${this.disabled ? '-1' : '0'}
+        ?disabled=${this.disabled}
+        @click=${this._handleClick}
+        @keydown=${this._handleKeydown}
+      >
+        <slot></slot>
+      </button>
+    `;
+  }
+}
+
+customElements.define('bds-dropdown-menu-item', BdsDropdownMenuItem);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bds-dropdown-menu-item': BdsDropdownMenuItem;
+  }
+}

package/src/web-components/interaction/bds-dropdown-menu.spec.ts

@@ -0,0 +1,102 @@
+import { fixture, cleanup } from '../test/helpers';
+import { BdsDropdownMenu } from './bds-dropdown-menu';
+import { BdsDropdownMenuItem } from './bds-dropdown-menu-item';
+
+describe('bds-dropdown-menu', () => {
+  it('is registered as a custom element', () => {
+    expect(customElements.get('bds-dropdown-menu')).toBe(BdsDropdownMenu);
+  });
+
+  it('is closed by default', async () => {
+    const el = await fixture('<bds-dropdown-menu></bds-dropdown-menu>') as BdsDropdownMenu;
+    expect(el.open).toBe(false);
+    cleanup(el);
+  });
+
+  it('open attribute is absent when closed', async () => {
+    const el = await fixture('<bds-dropdown-menu></bds-dropdown-menu>') as BdsDropdownMenu;
+    expect(el.open).toBe(false);
+    expect(el.hasAttribute('open')).toBe(false);
+    cleanup(el);
+  });
+
+  it('fires bds-open when _open() is called', async () => {
+    const el = await fixture('<bds-dropdown-menu></bds-dropdown-menu>') as BdsDropdownMenu;
+    const events: string[] = [];
+    el.addEventListener('bds-open', () => events.push('open'));
+    el._open();
+    expect(events).toContain('open');
+    cleanup(el);
+  });
+
+  it('fires bds-close when _close() is called', async () => {
+    const el = await fixture('<bds-dropdown-menu></bds-dropdown-menu>') as BdsDropdownMenu;
+    el._open();
+    const events: string[] = [];
+    el.addEventListener('bds-close', () => events.push('close'));
+    el._close();
+    expect(events).toContain('close');
+    cleanup(el);
+  });
+
+  it('does not fire bds-open if already open (state guard)', async () => {
+    const el = await fixture('<bds-dropdown-menu></bds-dropdown-menu>') as BdsDropdownMenu;
+    el._open();
+    const events: string[] = [];
+    el.addEventListener('bds-open', () => events.push('open'));
+    el._open(); // call again
+    expect(events.length).toBe(0);
+    cleanup(el);
+  });
+
+  it('does not fire bds-close if already closed (state guard)', async () => {
+    const el = await fixture('<bds-dropdown-menu></bds-dropdown-menu>') as BdsDropdownMenu;
+    const events: string[] = [];
+    el.addEventListener('bds-close', () => events.push('close'));
+    el._close(); // already closed
+    expect(events.length).toBe(0);
+    cleanup(el);
+  });
+
+  it('closes on Escape key', async () => {
+    const el = await fixture('<bds-dropdown-menu></bds-dropdown-menu>') as BdsDropdownMenu;
+    el._open();
+    expect(el.open).toBe(true);
+    el.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+    expect(el.open).toBe(false);
+    cleanup(el);
+  });
+});
+
+describe('bds-dropdown-menu-item', () => {
+  it('is registered as a custom element', () => {
+    expect(customElements.get('bds-dropdown-menu-item')).toBe(BdsDropdownMenuItem);
+  });
+
+  it('renders a button with role="menuitem"', async () => {
+    const el = await fixture('<bds-dropdown-menu-item value="edit">Edit</bds-dropdown-menu-item>');
+    const btn = el.shadowRoot!.querySelector('button')!;
+    expect(btn.getAttribute('role')).toBe('menuitem');
+    cleanup(el);
+  });
+
+  it('fires bds-select on click', async () => {
+    const el = await fixture('<bds-dropdown-menu-item value="edit">Edit</bds-dropdown-menu-item>');
+    const events: string[] = [];
+    el.addEventListener('bds-select', (e: Event) => {
+      events.push((e as CustomEvent).detail.value);
+    });
+    el.shadowRoot!.querySelector<HTMLButtonElement>('button')!.click();
+    expect(events).toEqual(['edit']);
+    cleanup(el);
+  });
+
+  it('does not fire bds-select when disabled', async () => {
+    const el = await fixture('<bds-dropdown-menu-item value="edit" disabled>Edit</bds-dropdown-menu-item>');
+    const events: string[] = [];
+    el.addEventListener('bds-select', () => events.push('selected'));
+    el.shadowRoot!.querySelector<HTMLButtonElement>('button')!.click();
+    expect(events.length).toBe(0);
+    cleanup(el);
+  });
+});

package/src/web-components/interaction/bds-dropdown-menu.ts

@@ -0,0 +1,200 @@
+import { LitElement, css, html } from 'lit';
+import type { BdsDropdownMenuItem } from './bds-dropdown-menu-item';
+
+export type DropdownMenuPlacement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+
+/**
+ * `<bds-dropdown-menu>` — anchored dropdown menu with keyboard navigation.
+ *
+ * Uses the native Popover API for the floating panel (light-dismiss, top-layer).
+ * The trigger slot element controls open/close. The component handles keyboard
+ * navigation (Arrow keys, Escape, Tab) and focus management.
+ *
+ * Attributes:
+ *   open      — controls open/closed state (reflected)
+ *   placement — menu position relative to trigger (default: `"bottom-start"`)
+ *
+ * Slots:
+ *   trigger   — the activating element (button or similar)
+ *   (default) — `<bds-dropdown-menu-item>` elements
+ *
+ * Events:
+ *   bds-open  — fired when the menu opens
+ *   bds-close — fired when the menu closes
+ *
+ * @example
+ * <bds-dropdown-menu>
+ *   <button slot="trigger">Options</button>
+ *   <bds-dropdown-menu-item value="edit">Edit</bds-dropdown-menu-item>
+ *   <bds-dropdown-menu-item value="delete" destructive>Delete</bds-dropdown-menu-item>
+ * </bds-dropdown-menu>
+ */
+export class BdsDropdownMenu extends LitElement {
+  static styles = css`
+    :host {
+      display: inline-block;
+      position: relative;
+    }
+
+    .panel {
+      position: absolute;
+      inset-block-start: calc(100% + var(--bds-space_xxs));
+      inset-inline-start: 0;
+      min-inline-size: 10rem;
+      background-color: var(--bds-color_bg);
+      border-radius: var(--bds-border_radius--s);
+      box-shadow: var(--bds-shadow_m);
+      padding: var(--bds-space_xxs);
+      z-index: var(--bds-z-index_dropdown, 200);
+      display: none;
+      flex-direction: column;
+    }
+
+    :host([placement='bottom-end']) .panel {
+      inset-inline-start: auto;
+      inset-inline-end: 0;
+    }
+
+    :host([placement='top-start']) .panel {
+      inset-block-start: auto;
+      inset-block-end: calc(100% + var(--bds-space_xxs));
+      inset-inline-start: 0;
+    }
+
+    :host([placement='top-end']) .panel {
+      inset-block-start: auto;
+      inset-block-end: calc(100% + var(--bds-space_xxs));
+      inset-inline-start: auto;
+      inset-inline-end: 0;
+    }
+
+    :host([open]) .panel {
+      display: flex;
+    }
+  `;
+
+  static properties = {
+    open:      { type: Boolean, reflect: true },
+    placement: { type: String, reflect: true },
+  };
+
+  declare open: boolean;
+  declare placement: DropdownMenuPlacement;
+
+  constructor() {
+    super();
+    this.open = false;
+    this.placement = 'bottom-start';
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener('click', this._handleOutsideClick);
+    this.addEventListener('keydown', this._handleKeydown);
+    this.addEventListener('bds-select', this._handleItemSelect);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener('click', this._handleOutsideClick);
+    this.removeEventListener('keydown', this._handleKeydown);
+    this.removeEventListener('bds-select', this._handleItemSelect);
+  }
+
+  private get _items(): BdsDropdownMenuItem[] {
+    return [...this.querySelectorAll<BdsDropdownMenuItem>('bds-dropdown-menu-item')].filter(
+      item => !item.disabled,
+    );
+  }
+
+  private get _trigger(): HTMLElement | null {
+    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name="trigger"]');
+    return (slot?.assignedElements()[0] as HTMLElement) ?? null;
+  }
+
+  _open() {
+    if (this.open) return;
+    this.open = true;
+    this.dispatchEvent(new CustomEvent('bds-open', { bubbles: true, composed: true }));
+    // Focus first item after render
+    this.updateComplete.then(() => {
+      this._items[0]?.shadowRoot?.querySelector<HTMLElement>('button')?.focus();
+    });
+  }
+
+  _close() {
+    if (!this.open) return;
+    this.open = false;
+    this.dispatchEvent(new CustomEvent('bds-close', { bubbles: true, composed: true }));
+    this._trigger?.focus();
+  }
+
+  private _handleTriggerClick = (e: Event) => {
+    e.stopPropagation();
+    if (this.open) { this._close(); } else { this._open(); }
+  };
+
+  private _handleOutsideClick = (e: Event) => {
+    if (this.open && !this.contains(e.target as Node)) {
+      this._close();
+    }
+  };
+
+  private _handleKeydown = (e: KeyboardEvent) => {
+    if (!this.open) return;
+
+    const items = this._items;
+    const focused = items.findIndex(item =>
+      item.shadowRoot?.activeElement !== null &&
+      item.shadowRoot?.querySelector('button') === item.shadowRoot?.activeElement,
+    );
+
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      this._close();
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      const next = (focused + 1) % items.length;
+      items[next]?.shadowRoot?.querySelector<HTMLElement>('button')?.focus();
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      const prev = (focused - 1 + items.length) % items.length;
+      items[prev]?.shadowRoot?.querySelector<HTMLElement>('button')?.focus();
+    } else if (e.key === 'Tab') {
+      this._close();
+    }
+  };
+
+  private _handleItemSelect = () => {
+    this._close();
+  };
+
+  private _onTriggerSlotChange() {
+    const trigger = this._trigger;
+    if (trigger) {
+      trigger.removeEventListener('click', this._handleTriggerClick);
+      trigger.addEventListener('click', this._handleTriggerClick);
+    }
+  }
+
+  render() {
+    return html`
+      <slot name="trigger" @slotchange=${this._onTriggerSlotChange}></slot>
+      <div
+        class="panel"
+        role="menu"
+        aria-hidden=${!this.open ? 'true' : 'false'}
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+customElements.define('bds-dropdown-menu', BdsDropdownMenu);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bds-dropdown-menu': BdsDropdownMenu;
+  }
+}

package/src/web-components/interaction/form/BdsCheckbox.mdx

@@ -0,0 +1,76 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './BdsCheckbox.stories';
+
+<Meta of={Stories} />
+
+# &lt;bds-checkbox&gt;
+
+Form-associated checkbox custom element. Participates in HTML forms via the Form-Associated Custom Elements API — native browser validation (required, etc.) works without any wrapper.
+
+> **Status: experimental** — API may change before stable release.
+
+## Installation
+
+```js
+import '@boostdev/components/web-components';
+```
+
+## When to use
+
+Use `<bds-checkbox>` whenever you need a single boolean toggle that participates in a form. For grouping multiple checkboxes under a shared label, wrap them in `<bds-checkbox-group>`.
+
+## Examples
+
+### Default
+<Canvas of={Stories.Default} />
+
+### Checked
+<Canvas of={Stories.Checked} />
+
+### Required
+<Canvas of={Stories.Required} />
+
+### Disabled
+<Canvas of={Stories.Disabled} />
+
+### Visual group (without group wrapper)
+<Canvas of={Stories.WithGroup} />
+
+## Props
+
+<ArgTypes of={Stories} />
+
+## Attributes
+
+| Attribute  | Type    | Default | Description                                      |
+|------------|---------|---------|--------------------------------------------------|
+| `name`     | string  | `""`    | Form field name                                  |
+| `value`    | string  | `"on"`  | Value submitted when checked                     |
+| `checked`  | boolean | `false` | Whether the checkbox is checked                  |
+| `required` | boolean | `false` | Marks the field as required                      |
+| `disabled` | boolean | `false` | Disables the checkbox                            |
+
+## Slots
+
+| Slot        | Description        |
+|-------------|--------------------|
+| `(default)` | Label text content |
+
+## Events
+
+| Event    | Detail | Description                         |
+|----------|--------|-------------------------------------|
+| `change` | —      | Native change event forwarded from the inner `<input>` |
+
+## Usage in plain HTML
+
+```html
+<bds-checkbox name="agree" value="yes" required>I agree to the terms</bds-checkbox>
+```
+
+## Accessibility
+
+- The inner `<input type="checkbox">` is associated with a `<label>` via matching `id`/`for` attributes
+- `required` triggers native browser validation
+- `disabled` sets `pointer-events: none` and reduces opacity
+- Use `<bds-checkbox-group>` for accessible grouping with `<fieldset>`/`<legend>`