@w5-ui/svelte 0.1.0

package/src/lib/components/Menubar.svelte

@@ -0,0 +1,131 @@
+<script context="module" lang="ts">
+  let counter = 0;
+  export interface MenubarItem { id: string; label: string; disabled?: boolean; separator?: boolean; }
+  export interface MenubarMenu { id: string; label: string; items: MenubarItem[]; }
+</script>
+
+<script lang="ts">
+  import { createEventDispatcher, onMount, onDestroy } from 'svelte';
+
+  export let menus: MenubarMenu[] = [];
+  export let label: string = 'Menu';
+  let klass = '';
+  export { klass as class };
+
+  const dispatch = createEventDispatcher<{ action: { menuId: string; itemId: string } }>();
+  const uid = `dash-ui-mb-${++counter}`;
+
+  let openIdx: number | null = null;
+  let activeItemIdx = 0;
+  let triggerEls: HTMLButtonElement[] = [];
+  let rootEl: HTMLDivElement;
+
+  $: currentEligible = openIdx !== null
+    ? menus[openIdx].items.filter((i) => !i.separator && !i.disabled)
+    : [];
+
+  function openMenu(idx: number, focusLast = false) {
+    const items = menus[idx].items.filter((i) => !i.separator && !i.disabled);
+    activeItemIdx = focusLast ? items.length - 1 : 0;
+    openIdx = idx;
+  }
+
+  function closeMenu() { openIdx = null; }
+
+  function activate(menuId: string, itemId: string) {
+    dispatch('action', { menuId, itemId });
+    openIdx = null;
+  }
+
+  function handleTriggerKeyDown(e: KeyboardEvent, idx: number) {
+    const count = menus.length;
+    if (openIdx === null) {
+      if (e.key === 'ArrowRight') { e.preventDefault(); triggerEls[(idx + 1) % count]?.focus(); }
+      else if (e.key === 'ArrowLeft') { e.preventDefault(); triggerEls[(idx - 1 + count) % count]?.focus(); }
+      else if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openMenu(idx, false); }
+      else if (e.key === 'ArrowUp') { e.preventDefault(); openMenu(idx, true); }
+      else if (e.key === 'Home') { e.preventDefault(); triggerEls[0]?.focus(); }
+      else if (e.key === 'End') { e.preventDefault(); triggerEls[count - 1]?.focus(); }
+    } else {
+      const savedIdx = openIdx;
+      if (e.key === 'Escape') { e.preventDefault(); closeMenu(); triggerEls[savedIdx]?.focus(); }
+      else if (e.key === 'ArrowDown') { e.preventDefault(); activeItemIdx = Math.min(activeItemIdx + 1, currentEligible.length - 1); }
+      else if (e.key === 'ArrowUp') { e.preventDefault(); activeItemIdx = Math.max(activeItemIdx - 1, 0); }
+      else if (e.key === 'Home') { e.preventDefault(); activeItemIdx = 0; }
+      else if (e.key === 'End') { e.preventDefault(); activeItemIdx = currentEligible.length - 1; }
+      else if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        const item = currentEligible[activeItemIdx];
+        if (item) activate(menus[savedIdx].id, item.id);
+      }
+      else if (e.key === 'ArrowRight') {
+        e.preventDefault();
+        const nextIdx = (savedIdx + 1) % count;
+        openMenu(nextIdx, false);
+        triggerEls[nextIdx]?.focus();
+      }
+      else if (e.key === 'ArrowLeft') {
+        e.preventDefault();
+        const prevIdx = (savedIdx - 1 + count) % count;
+        openMenu(prevIdx, false);
+        triggerEls[prevIdx]?.focus();
+      }
+      else if (e.key === 'Tab') { closeMenu(); }
+    }
+  }
+
+  function handleOutside(e: MouseEvent) {
+    if (openIdx !== null && !rootEl?.contains(e.target as Node)) openIdx = null;
+  }
+
+  onMount(() => document.addEventListener('mousedown', handleOutside));
+  onDestroy(() => document.removeEventListener('mousedown', handleOutside));
+</script>
+
+<div
+  bind:this={rootEl}
+  role="menubar"
+  aria-label={label}
+  class={`menubar${klass ? ' ' + klass : ''}`}
+>
+  {#each menus as menu, idx (menu.id)}
+    {@const isOpen = openIdx === idx}
+    {@const menuId = `${uid}-menu-${idx}`}
+    {@const elig = menu.items.filter((i) => !i.separator && !i.disabled)}
+    <div class="menubar-menu">
+      <button
+        bind:this={triggerEls[idx]}
+        type="button"
+        role="menuitem"
+        aria-haspopup="menu"
+        aria-expanded={isOpen}
+        aria-controls={isOpen ? menuId : undefined}
+        class={`menubar-trigger${isOpen ? ' is-open' : ''}`}
+        on:click={() => { if (isOpen) closeMenu(); else openMenu(idx); }}
+        on:keydown={(e) => handleTriggerKeyDown(e, idx)}
+      >
+        {menu.label}
+      </button>
+      {#if isOpen}
+        <ul id={menuId} role="menu" aria-label={menu.label} class="menubar-dropdown">
+          {#each menu.items as item (item.id)}
+            {#if item.separator}
+              <li role="separator" class="menubar-sep" aria-hidden="true" />
+            {:else}
+              {@const eligIdx = elig.indexOf(item)}
+              <li
+                role="menuitem"
+                tabindex="-1"
+                aria-disabled={item.disabled}
+                data-active={eligIdx === activeItemIdx && !item.disabled ? 'true' : undefined}
+                class="menubar-item"
+                on:mouseenter={() => { if (!item.disabled) activeItemIdx = eligIdx; }}
+                on:mousedown|preventDefault={() => { if (!item.disabled) activate(menu.id, item.id); }}
+              >{item.label}</li>
+            {/if}
+          {/each}
+        </ul>
+      {/if}
+    </div>
+  {/each}
+</div>

package/src/lib/components/MirroredBarChart.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+  export interface MirroredBarItem {
+    label: string;
+    left: number;
+    right: number;
+  }
+
+  export let items: MirroredBarItem[] = [];
+  export let leftLabel: string = 'Download';
+  export let rightLabel: string = 'Upload';
+  export let leftColor: string = '#006FFF';
+  export let rightColor: string = '#00C8C8';
+  export let unit: string = '';
+  export let ariaLabel: string = 'Mirrored bar chart';
+
+  const VW = 340;
+  const LABEL_W = 80;
+  const PAD_T = 20;
+  const PAD_B = 8;
+  const ROW_H = 26;
+  const HALF_W = (VW - LABEL_W) / 2;
+  const CX = VW / 2;
+
+  $: svgH = PAD_T + items.length * ROW_H + PAD_B;
+  $: maxVal = Math.max(...items.flatMap((it) => [it.left, it.right]), 1);
+
+  function bw(val: number): number {
+    return (val / maxVal) * HALF_W;
+  }
+</script>
+
+<div role="img" aria-label={ariaLabel} style="width:100%;">
+  <svg
+    viewBox="0 0 {VW} {svgH}"
+    style="width:100%;height:auto;display:block;"
+    aria-hidden="true"
+    focusable="false"
+  >
+    <text
+      x={CX - LABEL_W / 2 - 6}
+      y={13}
+      fill="#6E7079"
+      font-size="9"
+      text-anchor="end"
+      font-family="inherit"
+    >{leftLabel}</text>
+
+    <text
+      x={CX + LABEL_W / 2 + 6}
+      y={13}
+      fill="#6E7079"
+      font-size="9"
+      text-anchor="start"
+      font-family="inherit"
+    >{rightLabel}</text>
+
+    <line
+      x1={CX} y1={PAD_T - 4}
+      x2={CX} y2={PAD_T + items.length * ROW_H}
+      stroke="rgba(255,255,255,0.12)" stroke-width="1"
+    />
+
+    {#each items as item, i (i)}
+      {@const y = PAD_T + i * ROW_H}
+      {@const midY = y + ROW_H / 2}
+      {@const bh = ROW_H - 8}
+      {@const by = y + 4}
+      {@const lw = bw(item.left)}
+      {@const rw = bw(item.right)}
+      <g>
+        <rect
+          x={CX - LABEL_W / 2 - lw}
+          y={by}
+          width={lw}
+          height={bh}
+          fill={leftColor}
+          opacity="0.85"
+          rx="2"
+        />
+        <rect
+          x={CX + LABEL_W / 2}
+          y={by}
+          width={rw}
+          height={bh}
+          fill={rightColor}
+          opacity="0.85"
+          rx="2"
+        />
+        <text
+          x={CX}
+          y={midY + 4}
+          fill="#CDD0DB"
+          font-size="10"
+          text-anchor="middle"
+          font-family="inherit"
+        >{item.label}</text>
+        {#if lw >= 28}
+          <text
+            x={CX - LABEL_W / 2 - lw + 4}
+            y={midY + 4}
+            fill="rgba(255,255,255,0.55)"
+            font-size="9"
+            text-anchor="start"
+            font-family="inherit"
+          >{item.left}{unit}</text>
+        {/if}
+        {#if rw >= 28}
+          <text
+            x={CX + LABEL_W / 2 + rw - 4}
+            y={midY + 4}
+            fill="rgba(255,255,255,0.55)"
+            font-size="9"
+            text-anchor="end"
+            font-family="inherit"
+          >{item.right}{unit}</text>
+        {/if}
+      </g>
+    {/each}
+  </svg>
+</div>

package/src/lib/components/Modal.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+  import { tick } from 'svelte';
+  import IconButton from './IconButton.svelte';
+  import CloseIcon from '../icons/CloseIcon.svelte';
+  export let open: boolean = false;
+  export let title: string;
+  const titleId = `modal-title-${Math.random().toString(36).slice(2, 9)}`;
+  const FOCUSABLE =
+    'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
+  let modalEl: HTMLDivElement;
+  let previouslyFocused: HTMLElement | null = null;
+  let prevOverflow = '';
+  let wasOpen = false;
+  let downOnBackdrop = false;
+  $: if (open && !wasOpen) {
+    previouslyFocused = (typeof document !== 'undefined'
+      ? (document.activeElement as HTMLElement | null)
+      : null);
+    if (typeof document !== 'undefined') {
+      prevOverflow = document.body.style.overflow;
+      document.body.style.overflow = 'hidden';
+    }
+    wasOpen = true;
+    tick().then(() => {
+      const first = modalEl?.querySelector<HTMLElement>(FOCUSABLE);
+      (first ?? modalEl)?.focus();
+    });
+  } else if (!open && wasOpen) {
+    wasOpen = false;
+    if (typeof document !== 'undefined') {
+      document.body.style.overflow = prevOverflow;
+    }
+    previouslyFocused?.focus?.();
+  }
+  function onKeydown(e: KeyboardEvent) {
+    if (!open) return;
+    if (e.key === 'Escape') {
+      open = false;
+      return;
+    }
+    if (e.key !== 'Tab' || !modalEl) return;
+    const items = Array.from(modalEl.querySelectorAll<HTMLElement>(FOCUSABLE));
+    if (items.length === 0) {
+      e.preventDefault();
+      return;
+    }
+    const f = items[0]!;
+    const l = items[items.length - 1]!;
+    const active = document.activeElement;
+    if (e.shiftKey && active === f) {
+      e.preventDefault();
+      l.focus();
+    } else if (!e.shiftKey && active === l) {
+      e.preventDefault();
+      f.focus();
+    }
+  }
+</script>
+
+<svelte:window on:keydown={onKeydown} />
+
+<div
+  class="backdrop {open ? 'show' : ''}"
+  on:mousedown={(e) => (downOnBackdrop = e.target === e.currentTarget)}
+  on:click={(e) => {
+    if (downOnBackdrop && e.target === e.currentTarget) open = false;
+    downOnBackdrop = false;
+  }}
+  role="presentation"
+>
+  <div
+    bind:this={modalEl}
+    class="modal"
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby={titleId}
+    tabindex="-1"
+  >
+    <div class="modal-h">
+      <h2 id={titleId}>{title}</h2>
+      <IconButton title="Close" on:click={() => (open = false)}>
+        <CloseIcon />
+      </IconButton>
+    </div>
+    <div class="modal-b"><slot /></div>
+    {#if $$slots.footer}
+      <div class="modal-f"><slot name="footer" /></div>
+    {/if}
+  </div>
+</div>

package/src/lib/components/MultiSelect.svelte

@@ -0,0 +1,165 @@
+<script context="module" lang="ts">
+  let counter = 0;
+  export interface MultiSelectOption { value: string; label: string; }
+</script>
+
+<script lang="ts">
+  import { createEventDispatcher, onMount, onDestroy } from 'svelte';
+
+  export let options: MultiSelectOption[] = [];
+  export let value: string[] = [];
+  export let label: string | undefined = undefined;
+  export let placeholder: string = 'Select…';
+  export let id: string | undefined = undefined;
+  export let disabled: boolean = false;
+  let className = '';
+  export { className as class };
+
+  const uid = `dash-ui-ms-${++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;
+
+  $: selectedSet = new Set(value);
+
+  $: filtered =
+    query.trim() === ''
+      ? options
+      : options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase()));
+
+  $: activeOptionId =
+    activeIdx >= 0 && filtered[activeIdx] ? `${listboxId}-opt-${activeIdx}` : undefined;
+
+  function toggle(optValue: string) {
+    const next = new Set(selectedSet);
+    if (next.has(optValue)) next.delete(optValue);
+    else next.add(optValue);
+    dispatch('change', Array.from(next));
+  }
+
+  function onKeyDown(e: KeyboardEvent) {
+    if (disabled) return;
+    if (e.key === 'Escape') { open = false; query = ''; return; }
+    if (e.key === 'Backspace' && query === '' && value.length > 0) {
+      dispatch('change', value.slice(0, -1));
+      return;
+    }
+    if (!open) {
+      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') { e.preventDefault(); open = true; activeIdx = 0; }
+      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]) toggle(filtered[activeIdx].value); }
+    else if (e.key === 'Tab') { open = false; query = ''; }
+  }
+
+  function handleOutside(e: MouseEvent) {
+    if (open && !wrapperEl?.contains(e.target as Node)) { open = false; query = ''; }
+  }
+
+  function onInput(e: Event) {
+    query = (e.target as HTMLInputElement).value;
+    activeIdx = -1;
+    if (!open) open = true;
+  }
+
+  onMount(() => document.addEventListener('mousedown', handleOutside));
+  onDestroy(() => document.removeEventListener('mousedown', handleOutside));
+</script>
+
+<div class="multiselect-wrapper {className}" bind:this={wrapperEl}>
+  {#if label}<label for={inputId} class="sr-only">{label}</label>{/if}
+  <!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
+  <div
+    class="multiselect-field{open ? ' multiselect-field--open' : ''}"
+    on:click={() => { if (!disabled) inputEl?.focus(); }}
+  >
+    {#each value as v (v)}
+      {@const opt = options.find((o) => o.value === v)}
+      {#if opt}
+        <span class="tag">
+          <span class="tag__label">{opt.label}</span>
+          <button
+            type="button"
+            class="tag__remove"
+            aria-label="Remove {opt.label} filter"
+            on:click|stopPropagation={() => toggle(v)}
+          >
+            <svg viewBox="0 0 10 10" width="10" height="10" fill="none" aria-hidden="true" focusable="false">
+              <path d="M2 2l6 6M8 2l-6 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+            </svg>
+          </button>
+        </span>
+      {/if}
+    {/each}
+    <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.length === 0 ? placeholder : ''}
+      value={query}
+      on:input={onInput}
+      on:focus={() => { if (!disabled) open = true; }}
+      on:keydown={onKeyDown}
+      class="multiselect-input"
+    />
+    <button
+      type="button"
+      tabindex="-1"
+      aria-hidden="true"
+      class="combobox-chevron-btn"
+      on:click|stopPropagation={() => { if (open) { open = false; query = ''; } else { inputEl?.focus(); open = true; } }}
+    >
+      <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} aria-multiselectable="true" class="select-listbox multiselect-listbox">
+      {#if filtered.length === 0}
+        <li class="combobox-empty">No results</li>
+      {:else}
+        {#each filtered as opt, idx (opt.value)}
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
+          <li
+            id="{listboxId}-opt-{idx}"
+            role="option"
+            aria-selected={selectedSet.has(opt.value)}
+            data-active={idx === activeIdx ? 'true' : undefined}
+            class="select-option multiselect-option"
+            on:mousedown|preventDefault={() => toggle(opt.value)}
+            on:mouseenter={() => { activeIdx = idx; }}
+          >
+            <span class="multiselect-check" aria-hidden="true">
+              {#if selectedSet.has(opt.value)}
+                <svg viewBox="0 0 12 12" width="12" height="12" fill="none" aria-hidden="true">
+                  <path d="M2 6l3 3 5-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+                </svg>
+              {/if}
+            </span>
+            {opt.label}
+          </li>
+        {/each}
+      {/if}
+    </ul>
+  {/if}
+</div>

package/src/lib/components/NightingaleChart.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  export interface NightingaleSegment {
+    label: string;
+    value: number;
+    color?: string;
+  }
+
+  export let segments: NightingaleSegment[] = [];
+  export let color: string = '#006FFF';
+  export let ariaLabel: string = 'Nightingale chart';
+
+  const SIZE = 280;
+  const CX = SIZE / 2;
+  const CY = SIZE / 2;
+  const MAX_R = 108;
+  const MIN_R = 8;
+  const LABEL_R = MAX_R + 16;
+
+  function wedgePath(r: number, sa: number, ea: number): string {
+    const x1 = CX + r * Math.cos(sa);
+    const y1 = CY + r * Math.sin(sa);
+    const x2 = CX + r * Math.cos(ea);
+    const y2 = CY + r * Math.sin(ea);
+    return `M ${CX} ${CY} L ${x1.toFixed(2)} ${y1.toFixed(2)} A ${r.toFixed(2)} ${r.toFixed(2)} 0 0 1 ${x2.toFixed(2)} ${y2.toFixed(2)} Z`;
+  }
+
+  $: n = segments.length;
+  $: maxVal = n ? Math.max(...segments.map((s) => s.value), 1) : 1;
+  $: step = n ? (2 * Math.PI) / n : 0;
+  $: labelEvery = n <= 8 ? 1 : Math.round(n / 8);
+  $: wedges = segments.map((seg, i) => {
+    const sa = -Math.PI / 2 + i * step;
+    const ea = -Math.PI / 2 + (i + 1) * step;
+    const r = MIN_R + (seg.value / maxVal) * (MAX_R - MIN_R);
+    const mid = sa + step / 2;
+    return {
+      d: wedgePath(r, sa, ea),
+      c: seg.color ?? color,
+      opacity: 0.3 + 0.7 * (seg.value / maxVal),
+      lx: CX + LABEL_R * Math.cos(mid),
+      ly: CY + LABEL_R * Math.sin(mid),
+      label: seg.label,
+      showLabel: i % labelEvery === 0,
+    };
+  });
+</script>
+
+{#if segments.length}
+  <div role="img" aria-label={ariaLabel} style="width:100%;">
+    <svg viewBox="0 0 {SIZE} {SIZE}" style="width:100%;height:auto;display:block;" aria-hidden="true" focusable="false">
+      {#each [0.25, 0.5, 0.75, 1] as f}
+        <circle cx={CX} cy={CY} r={MIN_R + (MAX_R - MIN_R) * f} fill="none" stroke="rgba(255,255,255,0.06)" stroke-width="1" />
+      {/each}
+      {#each wedges as w, i (i)}
+        <path d={w.d} fill={w.c} opacity={w.opacity} />
+        {#if w.showLabel}
+          <text x={w.lx.toFixed(1)} y={w.ly.toFixed(1)} fill="#6E7079" font-size="8" text-anchor="middle" dominant-baseline="middle" font-family="inherit">{w.label}</text>
+        {/if}
+      {/each}
+      <circle cx={CX} cy={CY} r={MIN_R} fill="#13131A" stroke="rgba(255,255,255,0.1)" stroke-width="1" />
+    </svg>
+  </div>
+{/if}