@w5-ui/svelte 0.1.0

package/src/lib/components/ColumnToggle.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  export interface ColumnDef {
+    key: string;
+    label: string;
+    required?: boolean;
+  }
+
+  export let columns: ColumnDef[] = [];
+  export let visible: Set<string> = new Set();
+  export let onChange: (visible: Set<string>) => void = () => {};
+
+  let open = false;
+  let btnEl: HTMLButtonElement;
+  let panelEl: HTMLDivElement;
+  const panelId = `col-toggle-${Math.random().toString(36).slice(2)}`;
+
+  function close() {
+    open = false;
+    btnEl?.focus();
+  }
+
+  function toggle(key: string) {
+    const next = new Set(visible);
+    if (next.has(key)) next.delete(key);
+    else next.add(key);
+    onChange(next);
+    visible = next;
+  }
+
+  function onKey(e: KeyboardEvent) {
+    if (open && e.key === 'Escape') close();
+  }
+
+  function onDown(e: MouseEvent) {
+    if (open && !panelEl?.contains(e.target as Node) && !btnEl?.contains(e.target as Node)) {
+      close();
+    }
+  }
+
+  onMount(() => {
+    document.addEventListener('keydown', onKey);
+    document.addEventListener('mousedown', onDown);
+    return () => {
+      document.removeEventListener('keydown', onKey);
+      document.removeEventListener('mousedown', onDown);
+    };
+  });
+</script>
+
+<div class="col-toggle">
+  <button
+    bind:this={btnEl}
+    type="button"
+    class="col-toggle__btn{open ? ' col-toggle__btn--active' : ''}"
+    aria-haspopup="dialog"
+    aria-expanded={open}
+    aria-controls={panelId}
+    on:click={() => (open = !open)}
+  >
+    <svg viewBox="0 0 14 14" width="14" height="14" fill="none" aria-hidden="true" focusable="false">
+      <rect x="1" y="2" width="3" height="10" rx="1" stroke="currentColor" stroke-width="1.3" />
+      <rect x="5.5" y="2" width="3" height="10" rx="1" stroke="currentColor" stroke-width="1.3" />
+      <rect x="10" y="2" width="3" height="10" rx="1" stroke="currentColor" stroke-width="1.3" />
+    </svg>
+    <span>Columns</span>
+  </button>
+  {#if open}
+    <div
+      bind:this={panelEl}
+      id={panelId}
+      class="col-toggle__panel"
+      role="dialog"
+      aria-label="Toggle columns"
+    >
+      <div class="col-toggle__header">Columns</div>
+      <ul class="col-toggle__list" role="list">
+        {#each columns as col (col.key)}
+          <li class="col-toggle__item">
+            <label class="col-toggle__label">
+              <input
+                type="checkbox"
+                class="col-toggle__check"
+                checked={visible.has(col.key)}
+                disabled={col.required}
+                on:change={() => { if (!col.required) toggle(col.key); }}
+              />
+              <span>{col.label}</span>
+            </label>
+          </li>
+        {/each}
+      </ul>
+    </div>
+  {/if}
+</div>

package/src/lib/components/Combobox.svelte

@@ -0,0 +1,138 @@
+<script context="module" lang="ts">
+  let counter = 0;
+  export interface ComboboxOption { value: string; label: string; }
+</script>
+
+<script lang="ts">
+  import { createEventDispatcher, onMount, onDestroy } from 'svelte';
+
+  export let options: ComboboxOption[] = [];
+  export let value: string | undefined = undefined;
+  export let label: string | undefined = undefined;
+  export let placeholder: string = 'Search…';
+  export let id: string | undefined = undefined;
+  export let disabled: boolean = false;
+  let className = '';
+  export { className as class };
+
+  const uid = `dash-ui-cb-${++counter}`;
+  $: inputId = id ?? uid;
+  $: listboxId = `${inputId}-lb`;
+
+  const dispatch = createEventDispatcher<{ change: string }>();
+
+  let open = false;
+  let query = '';
+  let activeIdx = -1;
+  let inputEl: HTMLInputElement;
+  let wrapperEl: HTMLDivElement;
+
+  $: selectedOption = options.find((o) => o.value === value);
+
+  $: filtered = query.trim() === ''
+    ? options
+    : options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase()));
+
+  $: activeOptionId = activeIdx >= 0 && filtered[activeIdx]
+    ? `${listboxId}-opt-${activeIdx}`
+    : undefined;
+
+  $: displayValue = open ? query : (selectedOption?.label ?? '');
+
+  function openList() {
+    if (disabled) return;
+    query = selectedOption?.label ?? '';
+    activeIdx = options.findIndex((o) => o.value === value);
+    open = true;
+  }
+
+  function pick(opt: ComboboxOption) {
+    dispatch('change', opt.value);
+    open = false;
+    query = '';
+    inputEl?.focus();
+  }
+
+  function onInputChange(e: Event) {
+    query = (e.target as HTMLInputElement).value;
+    activeIdx = -1;
+    if (!open) open = true;
+  }
+
+  function onKeyDown(e: KeyboardEvent) {
+    if (disabled) return;
+    if (e.key === 'Escape') { open = false; query = ''; return; }
+    if (!open) {
+      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') { e.preventDefault(); openList(); }
+      return;
+    }
+    if (e.key === 'ArrowDown') { e.preventDefault(); activeIdx = Math.min(activeIdx + 1, filtered.length - 1); }
+    else if (e.key === 'ArrowUp') { e.preventDefault(); activeIdx = Math.max(activeIdx - 1, 0); }
+    else if (e.key === 'Home') { e.preventDefault(); activeIdx = 0; }
+    else if (e.key === 'End') { e.preventDefault(); activeIdx = filtered.length - 1; }
+    else if (e.key === 'Enter') { e.preventDefault(); if (activeIdx >= 0 && filtered[activeIdx]) pick(filtered[activeIdx]); }
+    else if (e.key === 'Tab') { open = false; query = ''; }
+  }
+
+  function handleOutside(e: MouseEvent) {
+    if (open && !wrapperEl?.contains(e.target as Node)) { open = false; query = ''; }
+  }
+
+  onMount(() => document.addEventListener('mousedown', handleOutside));
+  onDestroy(() => document.removeEventListener('mousedown', handleOutside));
+</script>
+
+<div class="combobox-wrapper {className}" bind:this={wrapperEl}>
+  {#if label}<label for={inputId} class="sr-only">{label}</label>{/if}
+  <div class="combobox-field">
+    <input
+      bind:this={inputEl}
+      id={inputId}
+      role="combobox"
+      aria-expanded={open}
+      aria-controls={listboxId}
+      aria-autocomplete="list"
+      aria-activedescendant={activeOptionId}
+      aria-label={label}
+      autocomplete="off"
+      spellcheck="false"
+      {disabled}
+      {placeholder}
+      value={displayValue}
+      on:input={onInputChange}
+      on:focus={openList}
+      on:keydown={onKeyDown}
+      class="combobox-input"
+    />
+    <button
+      type="button"
+      tabindex="-1"
+      aria-hidden="true"
+      class="combobox-chevron-btn"
+      on:click={() => { if (open) { open = false; query = ''; } else { inputEl?.focus(); openList(); } }}
+    >
+      <svg class="select-chevron{open ? ' combobox-chevron-open' : ''}" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+        <path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      </svg>
+    </button>
+  </div>
+  {#if open}
+    <ul id={listboxId} role="listbox" aria-label={label} class="select-listbox combobox-listbox">
+      {#if filtered.length === 0}
+        <li class="combobox-empty">No results</li>
+      {:else}
+        {#each filtered as opt, idx (opt.value)}
+          <li
+            id="{listboxId}-opt-{idx}"
+            role="option"
+            aria-selected={opt.value === value}
+            data-active={idx === activeIdx ? 'true' : undefined}
+            class="select-option"
+            on:mousedown|preventDefault={() => pick(opt)}
+            on:mouseenter={() => { activeIdx = idx; }}
+          >{opt.label}</li>
+        {/each}
+      {/if}
+    </ul>
+  {/if}
+</div>

package/src/lib/components/CommandPalette.svelte

@@ -0,0 +1,152 @@
+<script context="module" lang="ts">
+  export interface CommandItem {
+    id: string;
+    label: string;
+    group?: string;
+    shortcut?: string;
+  }
+</script>
+
+<script lang="ts">
+  import { createEventDispatcher, tick } from 'svelte';
+  import Kbd from './Kbd.svelte';
+
+  export let open: boolean = false;
+  export let items: CommandItem[] = [];
+  export let placeholder: string = 'Search pages and actions…';
+
+  const dispatch = createEventDispatcher<{ select: string; close: void }>();
+
+  let query = '';
+  let activeIdx = 0;
+  let inputEl: HTMLInputElement;
+  const listboxId = `cp-list-${Math.random().toString(36).slice(2)}`;
+
+  $: filtered =
+    query.trim() === ''
+      ? items
+      : items.filter((i) => i.label.toLowerCase().includes(query.toLowerCase()));
+
+  $: grouped = filtered.reduce(
+    (acc, item) => {
+      const g = item.group ?? '';
+      const found = acc.find((a: { group: string }) => a.group === g);
+      if (found) found.items.push(item);
+      else acc.push({ group: g, items: [item] });
+      return acc;
+    },
+    [] as { group: string; items: CommandItem[] }[],
+  );
+
+  $: if (open) {
+    query = '';
+    activeIdx = 0;
+    tick().then(() => inputEl?.focus());
+  }
+
+  $: if (query !== undefined) activeIdx = 0;
+
+  function handleKey(e: KeyboardEvent) {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      activeIdx = Math.min(activeIdx + 1, filtered.length - 1);
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      activeIdx = Math.max(activeIdx - 1, 0);
+    } else if (e.key === 'Enter') {
+      e.preventDefault();
+      const item = filtered[activeIdx];
+      if (item) commit(item.id);
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      dispatch('close');
+    }
+  }
+
+  function commit(id: string) {
+    dispatch('select', id);
+    dispatch('close');
+    query = '';
+  }
+
+  function handleBackdrop(e: MouseEvent) {
+    if (e.target === e.currentTarget) dispatch('close');
+  }
+</script>
+
+{#if open}
+  <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+  <div class="cp-backdrop" role="presentation" on:click={handleBackdrop} on:keydown={handleKey}>
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-label="Command palette"
+      class="cp-panel"
+    >
+      <div class="cp-search">
+        <svg
+          class="cp-search-icon"
+          width="16"
+          height="16"
+          viewBox="0 0 16 16"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+          focusable="false"
+        >
+          <circle cx="6.5" cy="6.5" r="4.5" />
+          <path d="M10.5 10.5l3 3" />
+        </svg>
+        <input
+          bind:this={inputEl}
+          class="cp-input"
+          type="text"
+          role="combobox"
+          aria-expanded={filtered.length > 0}
+          aria-autocomplete="list"
+          aria-controls={listboxId}
+          {placeholder}
+          bind:value={query}
+          on:keydown={handleKey}
+        />
+        <span class="cp-kbd">Esc</span>
+      </div>
+      <ul id={listboxId} role="listbox" aria-label="Results" class="cp-list">
+        {#if filtered.length === 0}
+          <li class="cp-empty">No results for &ldquo;{query}&rdquo;</li>
+        {:else}
+          {#each grouped as { group, items: groupItems }}
+            <li role="presentation">
+              {#if group}
+                <div class="cp-group-label">{group}</div>
+              {/if}
+              {#each groupItems as item}
+                {@const idx = filtered.indexOf(item)}
+                <!-- svelte-ignore a11y-click-events-have-key-events -->
+                <div
+                  role="option"
+                  tabindex="-1"
+                  aria-selected={idx === activeIdx}
+                  data-active={idx === activeIdx ? 'true' : undefined}
+                  class="cp-item"
+                  on:click={() => commit(item.id)}
+                  on:mouseenter={() => (activeIdx = idx)}
+                >
+                  {item.label}
+                  {#if item.shortcut}
+                    <span class="cp-item-shortcut" aria-label={item.shortcut.replace(/\+/g, ' then ')}>
+                      <Kbd keys={item.shortcut} />
+                    </span>
+                  {/if}
+                </div>
+              {/each}
+            </li>
+          {/each}
+        {/if}
+      </ul>
+    </div>
+  </div>
+{/if}

package/src/lib/components/ConfirmDialog.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+  import { onDestroy, afterUpdate } from 'svelte';
+
+  export let open = false;
+  export let title = '';
+  export let description: string | undefined = undefined;
+  export let confirmLabel = 'Confirm';
+  export let cancelLabel = 'Cancel';
+  export let variant: 'danger' | 'warning' | 'info' = 'info';
+  export let onConfirm: () => void = () => {};
+  export let onCancel: () => void = () => {};
+
+  const FOCUSABLE = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
+
+  const VARIANT_CLASS: Record<string, string> = {
+    danger: 'btn cd-confirm cd-confirm--danger',
+    warning: 'btn cd-confirm cd-confirm--warning',
+    info: 'btn cd-confirm cd-confirm--info',
+  };
+
+  let dialogEl: HTMLDivElement;
+  let prev: HTMLElement | null = null;
+  let prevOverflow = '';
+
+  function onKey(e: KeyboardEvent) {
+    if (e.key === 'Escape') { onCancel(); return; }
+    if (e.key !== 'Tab' || !dialogEl) return;
+    const els = Array.from(dialogEl.querySelectorAll<HTMLElement>(FOCUSABLE));
+    if (!els.length) { e.preventDefault(); return; }
+    const first = els[0]!;
+    const last = els[els.length - 1]!;
+    const active = document.activeElement;
+    if (e.shiftKey && active === first) { e.preventDefault(); last.focus(); }
+    else if (!e.shiftKey && active === last) { e.preventDefault(); first.focus(); }
+  }
+
+  $: if (open) {
+    prev = document.activeElement as HTMLElement | null;
+    prevOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    window.addEventListener('keydown', onKey);
+  }
+
+  afterUpdate(() => {
+    if (open && dialogEl) {
+      const first = dialogEl.querySelector<HTMLElement>(FOCUSABLE);
+      (first ?? dialogEl).focus();
+    }
+  });
+
+  $: if (!open) {
+    window.removeEventListener('keydown', onKey);
+    document.body.style.overflow = prevOverflow;
+    prev?.focus?.();
+  }
+
+  onDestroy(() => {
+    window.removeEventListener('keydown', onKey);
+    document.body.style.overflow = prevOverflow;
+  });
+</script>
+
+<div class="backdrop {open ? 'show' : ''}" role="presentation" on:click={(e) => { if (e.target === e.currentTarget) onCancel(); }}>
+  <div
+    bind:this={dialogEl}
+    class="modal cd-dialog"
+    role="alertdialog"
+    aria-modal="true"
+    aria-labelledby="cd-title"
+    aria-describedby={description ? 'cd-desc' : undefined}
+    tabindex="-1"
+  >
+    <div class="modal-h">
+      <h2 id="cd-title">{title}</h2>
+    </div>
+    {#if description}
+      <div id="cd-desc" class="cd-body">{description}</div>
+    {/if}
+    <div class="modal-f">
+      <button type="button" class="btn btn-ghost" on:click={onCancel}>{cancelLabel}</button>
+      <button type="button" class={VARIANT_CLASS[variant]} on:click={onConfirm}>{confirmLabel}</button>
+    </div>
+  </div>
+</div>

package/src/lib/components/ContextMenu.svelte

@@ -0,0 +1,107 @@
+<script lang="ts" context="module">
+  export interface ContextMenuItem {
+    id: string;
+    label: string;
+    danger?: boolean;
+    disabled?: boolean;
+  }
+  export type ContextMenuEntry = ContextMenuItem | { separator: true };
+</script>
+
+<script lang="ts">
+  import { onDestroy, tick, createEventDispatcher } from 'svelte';
+
+  export let items: ContextMenuEntry[] = [];
+  export let x = 0;
+  export let y = 0;
+  export let open = false;
+  export let label = 'Context menu';
+
+  const dispatch = createEventDispatcher<{ close: void; action: string }>();
+
+  let menuEl: HTMLUListElement;
+  let activeIdx = 0;
+
+  $: actionItems = items.reduce<ContextMenuItem[]>((acc, e) => {
+    if (!('separator' in e)) acc.push(e);
+    return acc;
+  }, []);
+
+  const menuW = 168;
+  $: menuH = items.length * 30 + 8;
+  $: cx = Math.min(x, (typeof window !== 'undefined' ? window.innerWidth : 1200) - menuW - 8);
+  $: cy = Math.min(y, (typeof window !== 'undefined' ? window.innerHeight : 800) - menuH - 8);
+
+  function activate(id: string) {
+    dispatch('action', id);
+    dispatch('close');
+  }
+
+  function handleKeyDown(e: KeyboardEvent) {
+    if (e.key === 'Escape') { e.preventDefault(); dispatch('close'); }
+    else if (e.key === 'ArrowDown') { e.preventDefault(); activeIdx = Math.min(activeIdx + 1, actionItems.length - 1); }
+    else if (e.key === 'ArrowUp') { e.preventDefault(); activeIdx = Math.max(activeIdx - 1, 0); }
+    else if (e.key === 'Home') { e.preventDefault(); activeIdx = 0; }
+    else if (e.key === 'End') { e.preventDefault(); activeIdx = actionItems.length - 1; }
+    else if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      const item = actionItems[activeIdx];
+      if (item && !item.disabled) activate(item.id);
+    }
+    else if (e.key === 'Tab') { dispatch('close'); }
+  }
+
+  function handleOutside(e: MouseEvent) {
+    if (!menuEl?.contains(e.target as Node)) dispatch('close');
+  }
+
+  $: if (open) {
+    activeIdx = 0;
+    tick().then(() => menuEl?.focus());
+    document.addEventListener('mousedown', handleOutside);
+  } else {
+    document.removeEventListener('mousedown', handleOutside);
+  }
+
+  onDestroy(() => {
+    document.removeEventListener('mousedown', handleOutside);
+  });
+
+  function actionIndex(entry: ContextMenuEntry): number {
+    if ('separator' in entry) return -1;
+    return actionItems.indexOf(entry as ContextMenuItem);
+  }
+</script>
+
+{#if open}
+  <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+  <ul
+    bind:this={menuEl}
+    role="menu"
+    aria-label={label}
+    tabindex="-1"
+    class="ctx-menu"
+    style="left:{cx}px;top:{cy}px"
+    on:keydown={handleKeyDown}
+  >
+    {#each items as entry, i (i)}
+      {#if 'separator' in entry}
+        <li role="separator" class="ctx-menu-sep"></li>
+      {:else}
+        <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+        <li
+          role="menuitem"
+          tabindex="-1"
+          aria-disabled={entry.disabled || undefined}
+          data-active={actionIndex(entry) === activeIdx ? 'true' : undefined}
+          data-danger={entry.danger || undefined}
+          class="ctx-menu-item"
+          on:mouseenter={() => (activeIdx = actionIndex(entry))}
+          on:mousedown|preventDefault={() => { if (!entry.disabled) activate(entry.id); }}
+        >
+          {entry.label}
+        </li>
+      {/if}
+    {/each}
+  </ul>
+{/if}

package/src/lib/components/ContextualHelp.svelte

@@ -0,0 +1,73 @@
+<script context="module" lang="ts">
+  let counter = 0;
+</script>
+
+<script lang="ts">
+  import { onMount, onDestroy, tick } from 'svelte';
+
+  export let title: string;
+  export let body: string;
+  export let placement: 'top' | 'bottom' = 'top';
+
+  const uid = `dash-ui-ch-${++counter}`;
+  const titleId = `${uid}-title`;
+
+  let open = false;
+  let rootEl: HTMLSpanElement;
+  let triggerEl: HTMLButtonElement;
+  let panelEl: HTMLDivElement;
+
+  async function toggle() {
+    open = !open;
+    if (open) {
+      await tick();
+      panelEl?.focus();
+    }
+  }
+
+  function onKey(e: KeyboardEvent) {
+    if (!open) return;
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      open = false;
+      triggerEl?.focus();
+    }
+  }
+
+  function onPointer(e: PointerEvent) {
+    if (open && !rootEl?.contains(e.target as Node)) open = false;
+  }
+
+  onMount(() => {
+    window.addEventListener('keydown', onKey);
+    document.addEventListener('pointerdown', onPointer);
+  });
+  onDestroy(() => {
+    window.removeEventListener('keydown', onKey);
+    document.removeEventListener('pointerdown', onPointer);
+  });
+</script>
+
+<span class="ch-root" bind:this={rootEl}>
+  <button
+    bind:this={triggerEl}
+    type="button"
+    class="ch-trigger"
+    aria-label="Help"
+    aria-haspopup="dialog"
+    aria-expanded={open}
+    on:click={toggle}
+  >?</button>
+  {#if open}
+    <div
+      bind:this={panelEl}
+      role="dialog"
+      aria-labelledby={titleId}
+      class="ch-panel ch-panel--{placement}"
+      tabindex="-1"
+    >
+      <div id={titleId} class="ch-title">{title}</div>
+      <div class="ch-body">{body}</div>
+    </div>
+  {/if}
+</span>