@w5-ui/svelte 0.1.0

package/src/lib/components/SplitButton.svelte

@@ -0,0 +1,102 @@
+<script context="module" lang="ts">
+  let counter = 0;
+  export interface SplitButtonItem { id: string; label: string; disabled?: boolean; }
+</script>
+
+<script lang="ts">
+  import { createEventDispatcher, onMount, onDestroy } from 'svelte';
+
+  export let label: string;
+  export let variant: 'primary' | 'ghost' | 'danger' = 'ghost';
+  export let disabled: boolean = false;
+  export let items: SplitButtonItem[] = [];
+
+  const dispatch = createEventDispatcher<{ primary: void; action: string }>();
+  const uid = `dash-ui-spbtn-${++counter}`;
+  const menuId = `${uid}-menu`;
+
+  let open = false;
+  let activeIdx = 0;
+  let caretEl: HTMLButtonElement;
+  let wrapperEl: HTMLDivElement;
+
+  function toggleMenu() {
+    if (!open) activeIdx = 0;
+    open = !open;
+  }
+
+  function activate(id: string) {
+    dispatch('action', id);
+    open = false;
+    caretEl?.focus();
+  }
+
+  function onKeyDown(e: KeyboardEvent) {
+    if (!open) {
+      if (['ArrowDown', 'Enter', ' '].includes(e.key)) {
+        e.preventDefault();
+        activeIdx = 0;
+        open = true;
+      }
+      return;
+    }
+    if (e.key === 'Escape') { e.preventDefault(); open = false; caretEl?.focus(); }
+    else if (e.key === 'ArrowDown') { e.preventDefault(); activeIdx = Math.min(activeIdx + 1, items.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 = items.length - 1; }
+    else if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      const item = items[activeIdx];
+      if (item && !item.disabled) activate(item.id);
+    }
+    else if (e.key === 'Tab') { open = false; }
+  }
+
+  function handleOutside(e: MouseEvent) {
+    if (open && !wrapperEl?.contains(e.target as Node)) open = false;
+  }
+
+  onMount(() => document.addEventListener('mousedown', handleOutside));
+  onDestroy(() => document.removeEventListener('mousedown', handleOutside));
+</script>
+
+<div class="split-btn" bind:this={wrapperEl}>
+  <button
+    type="button"
+    class="btn btn-{variant} split-btn-primary"
+    {disabled}
+    on:click={() => dispatch('primary')}
+  >{label}</button>
+  <button
+    bind:this={caretEl}
+    type="button"
+    class="btn btn-{variant} split-btn-caret"
+    {disabled}
+    aria-label="{label} options"
+    aria-haspopup="menu"
+    aria-expanded={open}
+    aria-controls={open ? menuId : undefined}
+    on:click={toggleMenu}
+    on:keydown={onKeyDown}
+  >
+    <svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M1 3 L5 7 L9 3" />
+    </svg>
+  </button>
+  {#if open}
+    <ul id={menuId} role="menu" aria-label="{label} options" class="action-menu">
+      {#each items as item, idx (item.id)}
+        <li
+          role="menuitem"
+          tabindex="-1"
+          aria-disabled={item.disabled}
+          data-active={idx === activeIdx ? 'true' : undefined}
+          class="action-menu-item"
+          on:mouseenter={() => { activeIdx = idx; }}
+          on:mousedown|preventDefault={() => { if (!item.disabled) activate(item.id); }}
+        >{item.label}</li>
+      {/each}
+    </ul>
+  {/if}
+</div>

package/src/lib/components/Spoiler.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  export let maxHeight: number = 80;
+  export let showLabel: string = 'Show more';
+  export let hideLabel: string = 'Show less';
+  let klass: string = '';
+  export { klass as class };
+
+  let expanded = false;
+  let clipped = false;
+  let bodyEl: HTMLDivElement;
+
+  onMount(() => {
+    if (bodyEl) clipped = bodyEl.scrollHeight > maxHeight;
+  });
+</script>
+
+<div class="spoiler {klass}">
+  <div class="spoiler-outer" style="position:relative">
+    <div
+      bind:this={bodyEl}
+      style={!expanded && clipped ? `max-height:${maxHeight}px;overflow:hidden` : undefined}
+    >
+      <slot />
+    </div>
+    {#if !expanded && clipped}
+      <div class="spoiler-fade" aria-hidden="true" />
+    {/if}
+  </div>
+  {#if clipped}
+    <button
+      type="button"
+      class="spoiler-toggle"
+      aria-expanded={expanded}
+      on:click={() => (expanded = !expanded)}
+    >
+      {expanded ? hideLabel : showLabel}
+    </button>
+  {/if}
+</div>

package/src/lib/components/StackedBarChart.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  export interface StackedBarSeries {
+    label: string;
+    color: string;
+    values: number[];
+  }
+
+  export let series: StackedBarSeries[] = [];
+  export let labels: string[] = [];
+  export let height = 180;
+  export let normalized = false;
+  export let ariaLabel = 'Stacked bar chart';
+
+  const VW = 400;
+  const PAD = { t: 10, r: 8, b: 28, l: 36 };
+
+  $: n = series.length && series[0].values.length ? series[0].values.length : 0;
+  $: chartW = VW - PAD.l - PAD.r;
+  $: chartH = height - PAD.t - PAD.b;
+  $: bot = PAD.t + chartH;
+  $: barW = n > 0 ? (chartW / n) * 0.72 : 0;
+  $: gap = n > 0 ? (chartW / n) * 0.28 : 0;
+
+  $: totals = Array.from({ length: n }, (_, i) =>
+    series.reduce((s, ser) => s + (ser.values[i] ?? 0), 0)
+  );
+
+  $: maxTotal = normalized ? 1 : (totals.length ? Math.max(...totals) : 1) || 1;
+
+  $: stacks = Array.from({ length: n }, (_, gi) => {
+    let y = bot;
+    const total = totals[gi] || 1;
+    return series.map((ser) => {
+      const raw = ser.values[gi] ?? 0;
+      const v = normalized ? raw / total : raw;
+      const bh = (v / maxTotal) * chartH;
+      const rect = {
+        x: PAD.l + gi * (barW + gap) + gap / 2,
+        y: y - bh,
+        w: barW,
+        h: bh,
+        color: ser.color,
+        key: `${gi}-${ser.label}`,
+      };
+      y -= bh;
+      return rect;
+    });
+  });
+
+  $: gridFracs = [0.25, 0.5, 0.75, 1];
+  $: gridLines = gridFracs.map((f) => ({
+    y: PAD.t + (1 - f) * chartH,
+    label: normalized ? `${Math.round(f * 100)}%` : String(Math.round(f * maxTotal)),
+  }));
+
+  $: xLabels = Array.from({ length: n }, (_, i) => ({
+    x: PAD.l + i * (barW + gap) + gap / 2 + barW / 2,
+    text: labels[i] ?? String(i),
+  }));
+</script>
+
+{#if n > 0}
+  <div role="img" aria-label={ariaLabel} style="width:100%;">
+    <svg viewBox="0 0 {VW} {height}" style="width:100%;height:auto;display:block;" aria-hidden="true" focusable="false">
+      {#each gridLines as g, i (i)}
+        <line x1={PAD.l} y1={g.y} x2={VW - PAD.r} y2={g.y} stroke="rgba(255,255,255,0.06)" stroke-width="1" />
+        <text x={PAD.l - 4} y={g.y + 3} fill="#6E7079" font-size="8" text-anchor="end" font-family="inherit">{g.label}</text>
+      {/each}
+
+      {#each stacks as rects, gi (gi)}
+        {#each rects as r (r.key)}
+          {#if r.h > 0}
+            <rect x={r.x} y={r.y} width={r.w} height={r.h} fill={r.color} fill-opacity="0.9" />
+          {/if}
+        {/each}
+      {/each}
+
+      {#each xLabels as l, i (i)}
+        <text x={l.x} y={height - 6} fill="#6E7079" font-size="8" text-anchor="middle" font-family="inherit">{l.text}</text>
+      {/each}
+    </svg>
+  </div>
+{/if}

package/src/lib/components/StackedProgress.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  export interface StackedProgressSegment {
+    label: string;
+    value: number;
+    color: string;
+  }
+  export let segments: StackedProgressSegment[];
+  export let total: number | undefined = undefined;
+  export let ariaLabel: string | undefined = undefined;
+  export let showLegend: boolean = true;
+  $: sum = total ?? segments.reduce((a, s) => a + s.value, 0);
+  $: text = ariaLabel ?? segments.map((s) => `${s.label} ${Math.round((s.value / sum) * 100)}%`).join(', ');
+</script>
+
+<div class="sp" role="img" aria-label={text}>
+  <div class="sp-bar" aria-hidden="true">
+    {#each segments as { label, value, color }}
+      <div class="sp-seg" style="width:{((value / sum) * 100).toFixed(2)}%;background:{color}" />
+    {/each}
+  </div>
+  {#if showLegend}
+    <div class="sp-legend" aria-hidden="true">
+      {#each segments as { label, value, color }}
+        <span class="sp-item">
+          <span class="sp-dot" style="background:{color}" />
+          {label}
+          <span class="sp-pct">{Math.round((value / sum) * 100)}%</span>
+        </span>
+      {/each}
+    </div>
+  {/if}
+</div>

package/src/lib/components/StarRating.svelte

@@ -0,0 +1,64 @@
+<script context="module" lang="ts">
+  let counter = 0;
+</script>
+
+<script lang="ts">
+  export let label: string;
+  export let value: number = 0;
+  export let max: number = 5;
+  export let readOnly: boolean = false;
+  export let size: 'sm' | 'md' = 'md';
+  export let onChange: ((v: number) => void) | undefined = undefined;
+
+  const gid = `dash-ui-sr-${++counter}`;
+  let hovered = 0;
+
+  function pick(star: number) {
+    value = star;
+    onChange?.(star);
+  }
+</script>
+
+{#if readOnly}
+  <span
+    class="star-rating{size === 'sm' ? ' star-rating--sm' : ''} star-rating--readonly"
+    role="img"
+    aria-label="{value} out of {max} stars"
+  >
+    {#each Array(max) as _, i}
+      <span class="star-icon{i < value ? ' star-icon--on' : ''}" aria-hidden="true">
+        <svg viewBox="0 0 24 24" fill={i < value ? 'currentColor' : 'none'} stroke="currentColor" stroke-width="1.5" aria-hidden="true" focusable="false">
+          <polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26" />
+        </svg>
+      </span>
+    {/each}
+  </span>
+{:else}
+  <fieldset class="star-rating{size === 'sm' ? ' star-rating--sm' : ''}">
+    <legend class="sr-only">{label}</legend>
+    {#each Array(max) as _, i}
+      {@const star = i + 1}
+      {@const on = star <= (hovered || value)}
+      <label
+        for="{gid}-{star}"
+        class="star-label{on ? ' star-label--on' : ''}"
+        on:mouseenter={() => (hovered = star)}
+        on:mouseleave={() => (hovered = 0)}
+      >
+        <input
+          type="radio"
+          id="{gid}-{star}"
+          name={gid}
+          value={String(star)}
+          checked={value === star}
+          class="star-radio"
+          aria-label="{star} out of {max}"
+          on:change={() => pick(star)}
+        />
+        <svg viewBox="0 0 24 24" fill={on ? 'currentColor' : 'none'} stroke="currentColor" stroke-width="1.5" aria-hidden="true" focusable="false">
+          <polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26" />
+        </svg>
+      </label>
+    {/each}
+  </fieldset>
+{/if}

package/src/lib/components/Stat.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import Card from './Card.svelte';
+  export let label: string;
+  export let value: string = '';
+  export let unit: string | undefined = undefined;
+  export let sub: string | undefined = undefined;
+  export let delta: string | undefined = undefined;
+  export let deltaDir: 'up' | 'down' | 'neutral' = 'neutral';
+  export let span: number | undefined = undefined;
+  export let color: string | undefined = undefined;
+  $: deltaClass = deltaDir === 'up' ? 'delta-up' : deltaDir === 'down' ? 'delta-down' : '';
+</script>
+
+<Card {span}>
+  <h3>{label}</h3>
+  <div class="stat" style={color ? `color:${color};` : ''}>
+    <slot name="value">{value}</slot>{#if unit}<span class="unit">{unit}</span>{/if}
+  </div>
+  {#if sub || delta}
+    <div class="submeta">
+      {#if sub}{sub}{/if}{#if sub && delta} · {/if}{#if delta}<span class="sr-only">Trend: </span><span class={deltaClass}>{delta}</span>{/if}
+    </div>
+  {/if}
+</Card>

package/src/lib/components/StatusIndicator.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  export let color: string;
+  export let text: string;
+  export let textColor: string | undefined = undefined;
+</script>
+
+<span style="display:inline-flex;align-items:center;gap:6px;color:{textColor ?? color};font-size:12px;">
+  <span aria-hidden="true" style="width:6px;height:6px;border-radius:50%;background:{color};"></span>
+  {text}
+</span>

package/src/lib/components/StepChart.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+  export interface StepChartSeries {
+    label: string;
+    color: string;
+    values: number[];
+  }
+
+  export let series: StepChartSeries[] = [];
+  export let labels: string[] = [];
+  export let height: number = 160;
+  export let ariaLabel: string = 'Step chart';
+
+  const VW = 400;
+  const PAD = { t: 12, r: 8, b: 28, l: 8 };
+
+  $: allValues = series.flatMap((s) => s.values);
+  $: minV = allValues.length ? Math.min(...allValues) : 0;
+  $: maxV = allValues.length ? Math.max(...allValues) : 1;
+  $: range = maxV - minV || 1;
+  $: chartW = VW - PAD.l - PAD.r;
+  $: chartH = height - PAD.t - PAD.b;
+  $: n = series[0]?.values.length ?? 0;
+
+  function toX(i: number): number {
+    return PAD.l + (n > 1 ? (i / (n - 1)) * chartW : chartW / 2);
+  }
+  function toY(v: number): number {
+    return PAD.t + chartH - ((v - minV) / range) * chartH;
+  }
+
+  function stepPath(s: StepChartSeries): string {
+    if (!s.values.length) return '';
+    let d = `M ${toX(0).toFixed(1)},${toY(s.values[0]).toFixed(1)}`;
+    for (let i = 1; i < s.values.length; i++) {
+      d += ` H ${toX(i).toFixed(1)} V ${toY(s.values[i]).toFixed(1)}`;
+    }
+    return d;
+  }
+
+  function stepArea(s: StepChartSeries): string {
+    if (!s.values.length) return '';
+    const bot = (PAD.t + chartH).toFixed(1);
+    let d = `M ${toX(0).toFixed(1)},${bot} V ${toY(s.values[0]).toFixed(1)}`;
+    for (let i = 1; i < s.values.length; i++) {
+      d += ` H ${toX(i).toFixed(1)} V ${toY(s.values[i]).toFixed(1)}`;
+    }
+    d += ` H ${toX(s.values.length - 1).toFixed(1)} V ${bot} Z`;
+    return d;
+  }
+
+  $: gridLines = [0, 0.25, 0.5, 0.75, 1].map((f) => PAD.t + (1 - f) * chartH);
+  $: paths = series.map((s) => ({ color: s.color, label: s.label, d: stepPath(s) }));
+  $: areas = series.map((s) => ({ color: s.color, label: s.label, d: stepArea(s) }));
+</script>
+
+<div role="img" aria-label={ariaLabel} style="width:100%;">
+  <svg viewBox="0 0 {VW} {height}" style="width:100%;height:auto;display:block;" aria-hidden="true" focusable="false">
+    {#each gridLines as y}
+      <line x1={PAD.l} y1={y} x2={VW - PAD.r} y2={y} stroke="rgba(255,255,255,0.06)" stroke-width="1" />
+    {/each}
+    {#each areas as s (s.label)}
+      <path d={s.d} fill={s.color} fill-opacity="0.1" />
+    {/each}
+    {#each paths as s (s.label)}
+      <path d={s.d} fill="none" stroke={s.color} stroke-width="2" stroke-linejoin="round" stroke-linecap="round" />
+    {/each}
+    {#if labels.length > 0}
+      {#each labels as lbl, i}
+        {@const x = PAD.l + (labels.length > 1 ? (i / (labels.length - 1)) * chartW : chartW / 2)}
+        <text x={x} y={height - 4} text-anchor="middle" fill="#6E7079" font-size="9" font-family="inherit">{lbl}</text>
+      {/each}
+    {/if}
+  </svg>
+</div>

package/src/lib/components/Stepper.svelte

@@ -0,0 +1,40 @@
+<script context="module" lang="ts">
+  export interface StepperStep {
+    id: string;
+    label: string;
+  }
+</script>
+
+<script lang="ts">
+  export let steps: StepperStep[];
+  export let active: string;
+  let className = '';
+  export { className as class };
+
+  $: activeIdx = steps.findIndex(s => s.id === active);
+</script>
+
+<nav aria-label="Progress" class="stepper {className}">
+  <ol class="stepper__list">
+    {#each steps as step, idx}
+      {@const isActive = step.id === active}
+      {@const isDone = idx < activeIdx}
+      {@const state = isActive ? 'active' : isDone ? 'done' : 'upcoming'}
+      <li class="stepper__item stepper__item--{state}">
+        <span class="stepper__num" aria-hidden="true">
+          {#if isDone}
+            <svg viewBox="0 0 12 12" width="12" height="12" fill="none">
+              <path d="M2 6l3 3 5-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          {:else}
+            {idx + 1}
+          {/if}
+        </span>
+        {#if isDone}<span class="sr-only">completed: </span>{/if}
+        <span class="stepper__label" aria-current={isActive ? 'step' : undefined}>
+          {step.label}
+        </span>
+      </li>
+    {/each}
+  </ol>
+</nav>

package/src/lib/components/StreamGraph.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+  export interface StreamSeries {
+    label: string;
+    values: number[];
+    color?: string;
+  }
+
+  export let labels: string[] = [];
+  export let series: StreamSeries[] = [];
+  export let ariaLabel: string = 'Stream graph';
+
+  const VW = 380;
+  const VH = 120;
+  const PAD_L = 8;
+  const PAD_R = 8;
+  const PAD_T = 8;
+  const PAD_B = 20;
+  const COLORS = ['#006FFF', '#00C8C8', '#F5A623', '#7FB6FF', '#A878F5', '#F56342'];
+
+  $: n = labels.length;
+  $: TRACK_W = VW - PAD_L - PAD_R;
+  $: TRACK_H = VH - PAD_T - PAD_B;
+
+  $: totals = Array.from({ length: n }, (_, i) =>
+    series.reduce((sum, s) => sum + (s.values[i] ?? 0), 0)
+  );
+  $: maxTotal = Math.max(...totals, 1);
+
+  function xOf(i: number): number {
+    return n > 1 ? PAD_L + (i / (n - 1)) * TRACK_W : PAD_L + TRACK_W / 2;
+  }
+
+  $: layers = series.map((s, si) => {
+    const tops: number[] = [];
+    const bots: number[] = [];
+    for (let i = 0; i < n; i++) {
+      const total = totals[i];
+      const baseline = (maxTotal - total) / 2;
+      let bottom = baseline;
+      for (let k = 0; k < si; k++) bottom += series[k].values[i] ?? 0;
+      const top = bottom + (s.values[i] ?? 0);
+      bots[i] = PAD_T + (bottom / maxTotal) * TRACK_H;
+      tops[i] = PAD_T + (top / maxTotal) * TRACK_H;
+    }
+    return { tops, bots, color: s.color ?? COLORS[si % COLORS.length] };
+  });
+
+  function buildArea(tops: number[], bots: number[]): string {
+    const fwd = tops.map((y, i) => {
+      const x = xOf(i);
+      if (i === 0) return `M${x},${y}`;
+      const px = xOf(i - 1);
+      const cpX = (px + x) / 2;
+      return `C${cpX},${tops[i - 1]} ${cpX},${y} ${x},${y}`;
+    });
+    const bwd = [...bots].reverse().map((y, ri) => {
+      const i = bots.length - 1 - ri;
+      const x = xOf(i);
+      if (ri === 0) return `L${x},${y}`;
+      const nx = xOf(i + 1);
+      const cpX = (nx + x) / 2;
+      return `C${cpX},${bots[i + 1]} ${cpX},${y} ${x},${y}`;
+    });
+    return [...fwd, ...bwd, 'Z'].join(' ');
+  }
+</script>
+
+<div role="img" aria-label={ariaLabel} style="width:100%;">
+  <svg
+    viewBox="0 0 {VW} {VH}"
+    style="width:100%;height:auto;display:block;"
+    aria-hidden="true"
+    focusable="false"
+  >
+    {#each layers as layer, si (si)}
+      <path
+        d={buildArea(layer.tops, layer.bots)}
+        fill={layer.color}
+        opacity="0.82"
+      />
+    {/each}
+    {#each labels as label, i (i)}
+      <text
+        x={xOf(i)}
+        y={VH - 5}
+        fill="#6E7079"
+        font-size="9"
+        text-anchor={i === 0 ? 'start' : i === n - 1 ? 'end' : 'middle'}
+        font-family="inherit"
+      >{label}</text>
+    {/each}
+  </svg>
+</div>

package/src/lib/components/StripeChart.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  export let data: { label: string; value: number }[] = [];
+  export let height: number = 48;
+  export let colorLow: string = '#0A2840';
+  export let colorHigh: string = '#FF4040';
+  export let ariaLabel: string = 'Stripe chart';
+
+  function hexToRgb(hex: string): [number, number, number] {
+    const h = hex.replace('#', '');
+    const n = parseInt(h, 16);
+    return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+  }
+  function lerp(a: number, b: number, t: number) {
+    return Math.round(a + (b - a) * t);
+  }
+  function interpColor(low: string, high: string, t: number): string {
+    const [r1, g1, b1] = hexToRgb(low);
+    const [r2, g2, b2] = hexToRgb(high);
+    return `rgb(${lerp(r1, r2, t)},${lerp(g1, g2, t)},${lerp(b1, b2, t)})`;
+  }
+
+  $: vals = data.map((d) => d.value);
+  $: min = vals.length ? Math.min(...vals) : 0;
+  $: max = vals.length ? Math.max(...vals) : 1;
+  $: range = (max - min) || 1;
+  $: sw = 400 / (data.length || 1);
+  $: stripes = data.map((d, i) => ({
+    x: i * sw,
+    w: sw,
+    color: interpColor(colorLow, colorHigh, (d.value - min) / range),
+    label: d.label,
+    value: d.value,
+  }));
+</script>
+
+<div role="img" aria-label={ariaLabel} style="line-height:0;">
+  <svg
+    viewBox="0 0 400 {height}"
+    width="100%"
+    height={height}
+    aria-hidden="true"
+    focusable="false"
+    preserveAspectRatio="none"
+  >
+    {#each stripes as s, i (i)}
+      <g>
+        <rect x={s.x} y={0} width={s.w} height={height} fill={s.color} />
+        <title>{s.label}: {s.value}</title>
+      </g>
+    {/each}
+  </svg>
+</div>