@w5-ui/svelte 0.1.0

package/src/lib/components/NotificationPanel.svelte

@@ -0,0 +1,170 @@
+<script lang="ts">
+  import { onDestroy } from 'svelte';
+
+  export type NotifType = 'alarm' | 'system' | 'update';
+  export type NotifSeverity = 'danger' | 'warn' | 'info' | 'success';
+
+  export interface Notification {
+    id: string;
+    type: NotifType;
+    severity?: NotifSeverity;
+    title: string;
+    description?: string;
+    time: string;
+    read: boolean;
+  }
+
+  export let open: boolean = false;
+  export let notifications: Notification[] = [];
+  export let onClose: () => void = () => {};
+  export let onMarkRead: ((id: string) => void) | undefined = undefined;
+  export let onMarkAllRead: (() => void) | undefined = undefined;
+
+  let filter: 'all' | NotifType = 'all';
+  let panelEl: HTMLDivElement;
+  let prevFocus: HTMLElement | null = null;
+
+  const SEV_COLOR: Record<string, string> = {
+    danger: '#F03A3A',
+    warn: '#F5A623',
+    info: '#006FFF',
+    success: '#00B070',
+  };
+
+  const TYPE_LABEL: Record<string, string> = {
+    all: 'All',
+    alarm: 'Alarm',
+    system: 'System',
+    update: 'Update',
+  };
+
+  function setFilter(f: string) { filter = f as 'all' | NotifType; }
+
+  $: unread = notifications.filter((n) => !n.read).length;
+  $: filtered = filter === 'all' ? notifications : notifications.filter((n) => n.type === filter);
+
+  const FOCUSABLE =
+    'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
+
+  function trapFocus(e: KeyboardEvent) {
+    if (!panelEl) return;
+    if (e.key === 'Escape') { onClose(); return; }
+    if (e.key !== 'Tab') return;
+    const items = Array.from(panelEl.querySelectorAll<HTMLElement>(FOCUSABLE));
+    if (!items.length) { e.preventDefault(); return; }
+    const f = items[0]!, 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(); }
+  }
+
+  $: if (open) {
+    prevFocus = document.activeElement as HTMLElement | null;
+    setTimeout(() => {
+      if (!panelEl) return;
+      const first = panelEl.querySelector<HTMLElement>(FOCUSABLE);
+      (first ?? panelEl)?.focus();
+    }, 0);
+    window.addEventListener('keydown', trapFocus);
+  } else {
+    window.removeEventListener('keydown', trapFocus);
+    prevFocus?.focus?.();
+  }
+
+  onDestroy(() => {
+    window.removeEventListener('keydown', trapFocus);
+  });
+
+  let titleId = 'np-title-' + Math.random().toString(36).slice(2);
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
+<div
+  class="np-overlay{open ? ' np-overlay--show' : ''}"
+  on:click={onClose}
+  aria-hidden="true"
+/>
+<div
+  bind:this={panelEl}
+  class="np-panel{open ? ' np-panel--show' : ''}"
+  role="dialog"
+  aria-modal="true"
+  aria-labelledby={titleId}
+  tabindex="-1"
+>
+  <div class="np-header">
+    <div class="np-title-row">
+      <h2 id={titleId} class="np-title">
+        Notifications
+        {#if unread > 0}
+          <span class="np-badge" aria-label="{unread} unread">{unread}</span>
+        {/if}
+      </h2>
+      <div class="np-header-actions">
+        {#if unread > 0 && onMarkAllRead}
+          <button type="button" class="np-mark-all" on:click={onMarkAllRead}>
+            Mark all read
+          </button>
+        {/if}
+        <button type="button" class="icon-btn" on:click={onClose} aria-label="Close notifications">
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+            <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.75.75 0 1 1 1.06 1.06L9.06 8l3.22 3.22a.75.75 0 1 1-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 0 1-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06z"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+    <div class="np-filters" role="tablist" aria-label="Filter by type">
+      {#each ['all', 'alarm', 'system', 'update'] as f}
+        <button
+          type="button"
+          role="tab"
+          aria-selected={filter === f}
+          class="np-filter{filter === f ? ' np-filter--active' : ''}"
+          on:click={() => setFilter(f)}
+        >
+          {TYPE_LABEL[f] ?? f}
+        </button>
+      {/each}
+    </div>
+  </div>
+  <div
+    class="np-list"
+    role="log"
+    aria-live="polite"
+    aria-label="Notifications"
+    aria-relevant="additions"
+  >
+    {#if filtered.length === 0}
+      <div class="np-empty">No notifications</div>
+    {:else}
+      {#each filtered as n (n.id)}
+        <div class="np-item{n.read ? ' np-item--read' : ''}">
+          <span
+            class="np-dot"
+            style="background:{SEV_COLOR[n.severity ?? 'info']};"
+            aria-hidden="true"
+          ></span>
+          <div class="np-item-body">
+            <div class="np-item-top">
+              <span class="np-item-title">{n.title}</span>
+              <span class="np-item-time">{n.time}</span>
+            </div>
+            {#if n.description}
+              <p class="np-item-desc">{n.description}</p>
+            {/if}
+            <span class="np-type-badge">{TYPE_LABEL[n.type]}</span>
+          </div>
+          {#if !n.read && onMarkRead}
+            <button
+              type="button"
+              class="np-read-btn"
+              on:click={() => onMarkRead?.(n.id)}
+              aria-label="Mark as read: {n.title}"
+              title="Mark as read"
+            >&#10003;</button>
+          {/if}
+        </div>
+      {/each}
+    {/if}
+  </div>
+</div>

package/src/lib/components/NumberInput.svelte

@@ -0,0 +1,93 @@
+<script context="module" lang="ts">
+  let counter = 0;
+</script>
+
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+
+  export let label: string | undefined = undefined;
+  export let value: number = 0;
+  export let min: number | undefined = undefined;
+  export let max: number | undefined = undefined;
+  export let step: number = 1;
+  export let suffix: string | undefined = undefined;
+  export let disabled: boolean = false;
+  export let id: string | undefined = undefined;
+  let className = '';
+  export { className as class };
+
+  const uid = `dash-ui-ni-${++counter}`;
+  $: inputId = id ?? uid;
+
+  const dispatch = createEventDispatcher<{ change: number }>();
+
+  function clamp(n: number): number {
+    let v = n;
+    if (min !== undefined) v = Math.max(min, v);
+    if (max !== undefined) v = Math.min(max, v);
+    return v;
+  }
+
+  function commit(next: number) {
+    value = clamp(next);
+    dispatch('change', value);
+  }
+
+  function handleKey(e: KeyboardEvent) {
+    if (e.key === 'ArrowUp') { e.preventDefault(); commit(value + step); }
+    else if (e.key === 'ArrowDown') { e.preventDefault(); commit(value - step); }
+    else if (e.key === 'PageUp') { e.preventDefault(); commit(value + step * 10); }
+    else if (e.key === 'PageDown') { e.preventDefault(); commit(value - step * 10); }
+    else if (e.key === 'Home' && min !== undefined) { e.preventDefault(); commit(min); }
+    else if (e.key === 'End' && max !== undefined) { e.preventDefault(); commit(max); }
+  }
+
+  function handleChange(e: Event) {
+    const n = Number((e.target as HTMLInputElement).value);
+    if (!isNaN(n)) commit(n);
+  }
+
+  $: canDecrement = !disabled && (min === undefined || value > min);
+  $: canIncrement = !disabled && (max === undefined || value < max);
+</script>
+
+<div class="number-input {className}">
+  {#if label}
+    <label for={inputId} class="number-input__label">{label}</label>
+  {/if}
+  <div class="number-input__control">
+    <button
+      type="button"
+      class="number-input__btn"
+      aria-label="Decrement"
+      tabindex="-1"
+      disabled={!canDecrement}
+      on:click={() => commit(value - step)}
+    >−</button>
+    <input
+      id={inputId}
+      type="number"
+      role="spinbutton"
+      aria-valuenow={value}
+      aria-valuemin={min}
+      aria-valuemax={max}
+      aria-valuetext={suffix ? `${value} ${suffix}` : undefined}
+      {value}
+      {disabled}
+      class="number-input__field"
+      on:change={handleChange}
+      on:keydown={handleKey}
+    />
+    {#if suffix}
+      <span class="number-input__suffix" aria-hidden="true">{suffix}</span>
+    {/if}
+    <button
+      type="button"
+      class="number-input__btn"
+      aria-label="Increment"
+      tabindex="-1"
+      disabled={!canIncrement}
+      on:click={() => commit(value + step)}
+    >+</button>
+  </div>
+</div>

package/src/lib/components/OTPInput.svelte

@@ -0,0 +1,94 @@
+<script context="module" lang="ts">
+  let counter = 0;
+</script>
+
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+
+  export let label: string | undefined = undefined;
+  export let length: number = 6;
+  export let value: string = '';
+  export let disabled: boolean = false;
+  let className = '';
+  export { className as class };
+
+  const dispatch = createEventDispatcher<{ change: string }>();
+  const uid = `dash-ui-otp-${++counter}`;
+
+  let digits: string[] = Array.from({ length }, (_, i) => value[i] ?? '');
+  let inputs: (HTMLInputElement | null)[] = Array(length).fill(null);
+
+  const half = Math.floor(length / 2);
+
+  function focusAt(i: number) {
+    const el = inputs[i];
+    if (el) { el.focus(); el.select(); }
+  }
+
+  function commit(next: string[]) {
+    digits = next;
+    value = next.join('');
+    dispatch('change', value);
+  }
+
+  function handleInput(i: number, raw: string) {
+    const char = raw.replace(/\D/g, '').slice(-1);
+    const next = [...digits];
+    next[i] = char;
+    commit(next);
+    if (char && i < length - 1) setTimeout(() => focusAt(i + 1), 0);
+  }
+
+  function handleKey(i: number, e: KeyboardEvent) {
+    if (e.key === 'Backspace') {
+      if (digits[i]) {
+        const next = [...digits]; next[i] = ''; commit(next);
+      } else if (i > 0) {
+        e.preventDefault(); focusAt(i - 1);
+      }
+    } else if (e.key === 'ArrowLeft' && i > 0) {
+      e.preventDefault(); focusAt(i - 1);
+    } else if (e.key === 'ArrowRight' && i < length - 1) {
+      e.preventDefault(); focusAt(i + 1);
+    }
+  }
+
+  function handlePaste(e: ClipboardEvent) {
+    const text = (e.clipboardData?.getData('text') ?? '').replace(/\D/g, '').slice(0, length);
+    if (!text.length) return;
+    e.preventDefault();
+    const next = Array.from({ length }, (_, i) => text[i] ?? digits[i] ?? '');
+    commit(next);
+    setTimeout(() => focusAt(Math.min(text.length, length - 1)), 0);
+  }
+</script>
+
+<div class="otp-input-wrapper {className}">
+  {#if label}
+    <label for="{uid}-0" class="otp-input__label">{label}</label>
+  {/if}
+  <div class="otp-input{disabled ? ' otp-input--disabled' : ''}" role="group" aria-label={label ?? 'One-time password'}>
+    {#each digits as d, i}
+      {#if i === half}
+        <span class="otp-input__separator" aria-hidden="true">&ndash;</span>
+      {/if}
+      <input
+        bind:this={inputs[i]}
+        id={i === 0 ? `${uid}-0` : undefined}
+        type="text"
+        inputmode="numeric"
+        pattern="[0-9]*"
+        maxlength={1}
+        aria-label="Digit {i + 1} of {length}"
+        value={d}
+        {disabled}
+        class="otp-input__digit"
+        autocomplete={i === 0 ? 'one-time-code' : 'off'}
+        on:input={(e) => handleInput(i, e.currentTarget.value)}
+        on:keydown={(e) => handleKey(i, e)}
+        on:paste={handlePaste}
+        on:focus={(e) => e.currentTarget.select()}
+      />
+    {/each}
+  </div>
+</div>

package/src/lib/components/Pagination.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+
+  export let page: number = 1;
+  export let pageSize: number = 10;
+  export let total: number = 0;
+
+  const dispatch = createEventDispatcher<{ change: number }>();
+
+  $: totalPages = Math.max(1, Math.ceil(total / pageSize));
+  $: pages = getPageNumbers(page, totalPages);
+
+  function getPageNumbers(p: number, tp: number): (number | '...')[] {
+    if (tp <= 7) return Array.from({ length: tp }, (_, i) => i + 1);
+    const items: (number | '...')[] = [1];
+    const lo = Math.max(2, p - 1);
+    const hi = Math.min(tp - 1, p + 1);
+    if (lo > 2) items.push('...');
+    for (let i = lo; i <= hi; i++) items.push(i);
+    if (hi < tp - 1) items.push('...');
+    items.push(tp);
+    return items;
+  }
+
+  function go(p: number) { dispatch('change', p); }
+</script>
+
+{#if totalPages > 1}
+  <nav class="pagination" aria-label="Pagination">
+    <button
+      type="button"
+      class="pagination-btn"
+      aria-label="Previous page"
+      disabled={page <= 1}
+      on:click={() => go(page - 1)}
+    >&#x2039;</button>
+    {#each pages as p, i (typeof p === 'number' ? p : `e${i}`)}
+      {#if p === '...'}
+        <span class="pagination-ellipsis" aria-hidden="true">&#x2026;</span>
+      {:else}
+        <button
+          type="button"
+          class="pagination-btn{p === page ? ' active' : ''}"
+          aria-label="Page {p}"
+          aria-current={p === page ? 'page' : undefined}
+          on:click={() => go(p)}
+        >{p}</button>
+      {/if}
+    {/each}
+    <button
+      type="button"
+      class="pagination-btn"
+      aria-label="Next page"
+      disabled={page >= totalPages}
+      on:click={() => go(page + 1)}
+    >&#x203A;</button>
+  </nav>
+{/if}

package/src/lib/components/ParallelCoordinates.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+  const COLORS = ['#006FFF', '#00C8C8', '#F5A623', '#7FB6FF', '#A878F5', '#F56342'];
+
+  export interface ParallelAxis {
+    label: string;
+    min: number;
+    max: number;
+    unit?: string;
+    invert?: boolean;
+  }
+
+  export interface ParallelSeries {
+    label: string;
+    color?: string;
+    values: number[];
+  }
+
+  export let axes: ParallelAxis[] = [];
+  export let series: ParallelSeries[] = [];
+  export let height: number = 200;
+  export let ariaLabel: string = 'Parallel coordinates chart';
+
+  const VW = 380;
+  $: VH = height;
+  const PAD_L = 28;
+  const PAD_R = 28;
+  const PAD_T = 32;
+  const PAD_B = 20;
+
+  $: TRACK_W = VW - PAD_L - PAD_R;
+  $: TRACK_H = VH - PAD_T - PAD_B;
+  $: nAxes = axes.length;
+
+  function axisX(i: number, tw: number, n: number): number {
+    return PAD_L + (n > 1 ? i * (tw / (n - 1)) : tw / 2);
+  }
+
+  function valueY(axis: ParallelAxis, v: number, th: number): number {
+    const t = Math.max(0, Math.min(1, (v - axis.min) / (axis.max - axis.min)));
+    return axis.invert ? PAD_T + t * th : PAD_T + (1 - t) * th;
+  }
+
+  function seriesPath(s: ParallelSeries, tw: number, th: number, n: number): string {
+    return axes
+      .map((axis, i) => {
+        const x = axisX(i, tw, n).toFixed(1);
+        const y = valueY(axis, s.values[i] ?? axis.min, th).toFixed(1);
+        return i === 0 ? `M${x},${y}` : `L${x},${y}`;
+      })
+      .join(' ');
+  }
+
+  const TICKS = [0, 0.5, 1];
+
+  $: paths = series.map((s, si) => ({
+    d: seriesPath(s, TRACK_W, TRACK_H, nAxes),
+    stroke: s.color ?? COLORS[si % COLORS.length],
+  }));
+
+  $: axisData = axes.map((axis, i) => {
+    const x = axisX(i, TRACK_W, nAxes);
+    const ticks = TICKS.map(t => {
+      const v = axis.invert
+        ? axis.min + t * (axis.max - axis.min)
+        : axis.max - t * (axis.max - axis.min);
+      const y = PAD_T + t * TRACK_H;
+      return { t, v, y };
+    });
+    return { axis, x, ticks };
+  });
+</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 axisData as { axis, x, ticks } (axis.label)}
+      <line x1={x} y1={PAD_T} x2={x} y2={VH - PAD_B} stroke="rgba(255,255,255,0.2)" stroke-width="1" />
+      <text x={x} y={PAD_T - 8} fill="#A4A7B5" font-size="8" text-anchor="middle" font-family="inherit">{axis.label}</text>
+      {#if axis.unit}
+        <text x={x} y={PAD_T - 1} fill="#6E7079" font-size="7" text-anchor="middle" font-family="inherit">{axis.unit}</text>
+      {/if}
+      {#each ticks as tick (tick.t)}
+        <line x1={x - 3} y1={tick.y} x2={x + 3} y2={tick.y} stroke="rgba(255,255,255,0.25)" stroke-width="1" />
+        <text x={x - 5} y={tick.y + 3} fill="#6E7079" font-size="7" text-anchor="end" font-family="inherit">
+          {tick.v % 1 === 0 ? tick.v.toFixed(0) : tick.v.toFixed(1)}
+        </text>
+      {/each}
+    {/each}
+
+    {#each paths as p, si (si)}
+      <path d={p.d} fill="none" stroke={p.stroke} stroke-width="1.5" opacity="0.75" />
+    {/each}
+  </svg>
+</div>

package/src/lib/components/ParetoChart.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+  export interface ParetoItem {
+    label: string;
+    value: number;
+    color?: string;
+  }
+
+  export let items: ParetoItem[] = [];
+  export let height: number = 160;
+  export let ariaLabel: string = 'Pareto chart';
+  export let barColor: string = '#006FFF';
+  export let lineColor: string = '#F5A623';
+  export let threshold: number = 0.8;
+
+  const VW = 400;
+  const PAD = { t: 12, r: 40, b: 28, l: 8 };
+
+  $: sorted = [...items].sort((a, b) => b.value - a.value);
+  $: total = sorted.reduce((s, it) => s + it.value, 0) || 1;
+  $: chartW = VW - PAD.l - PAD.r;
+  $: chartH = height - PAD.t - PAD.b;
+  $: bot = PAD.t + chartH;
+  $: maxV = sorted[0]?.value || 1;
+  $: barW = sorted.length > 0 ? chartW / sorted.length : chartW;
+  $: gap = barW * 0.15;
+  $: bw = Math.max(barW - gap * 2, 1);
+
+  $: gridLines = [0.25, 0.5, 0.75, 1].map((f) => PAD.t + (1 - f) * chartH);
+
+  $: bars = sorted.map((item, i) => {
+    const bh = (item.value / maxV) * chartH;
+    const x = PAD.l + i * barW + gap;
+    return {
+      x: x.toFixed(1),
+      y: (bot - bh).toFixed(1),
+      w: bw.toFixed(1),
+      h: bh.toFixed(1),
+      label: item.label,
+      color: item.color ?? barColor,
+      key: `b${i}`,
+    };
+  });
+
+  $: linePoints = (() => {
+    let cumSum = 0;
+    const pts: string[] = [`${PAD.l},${bot}`];
+    sorted.forEach((item, i) => {
+      cumSum += item.value;
+      const pct = cumSum / total;
+      const x = PAD.l + (i + 1) * barW;
+      const y = PAD.t + (1 - pct) * chartH;
+      pts.push(`${x.toFixed(1)},${y.toFixed(1)}`);
+    });
+    return pts.join(' ');
+  })();
+
+  $: thresholdY = threshold > 0 ? (PAD.t + (1 - threshold) * chartH).toFixed(1) : null;
+
+  $: pctLabels = [0, 50, 100].map((pct) => ({
+    label: `${pct}%`,
+    y: (PAD.t + (1 - pct / 100) * chartH + 3).toFixed(1),
+  }));
+</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 bars as b (b.key)}
+      <rect x={b.x} y={b.y} width={b.w} height={b.h} fill={b.color} fill-opacity="0.85" rx="2" />
+    {/each}
+    {#if thresholdY}
+      <line x1={PAD.l} y1={thresholdY} x2={VW - PAD.r} y2={thresholdY}
+        stroke="rgba(255,255,255,0.3)" stroke-width="1" stroke-dasharray="4 3" />
+    {/if}
+    <polyline points={linePoints} fill="none" stroke={lineColor} stroke-width="1.5" stroke-linejoin="round" />
+    {#each pctLabels as pl}
+      <text x={VW - PAD.r + 4} y={pl.y} fill="#6E7079" font-size="8">{pl.label}</text>
+    {/each}
+    {#each bars as b, i (b.key)}
+      {@const cx = (parseFloat(b.x) + parseFloat(b.w) / 2).toFixed(1)}
+      <text x={cx} y={height - 4} text-anchor="middle" fill="#6E7079" font-size="9">
+        {b.label.length > 8 ? `${b.label.slice(0, 7)}…` : b.label}
+      </text>
+    {/each}
+  </svg>
+</div>

package/src/lib/components/PasswordInput.svelte

@@ -0,0 +1,62 @@
+<script context="module" lang="ts">
+  let counter = 0;
+</script>
+
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+
+  export let label: string | undefined = undefined;
+  export let value: string = '';
+  export let placeholder: string | undefined = undefined;
+  export let disabled: boolean = false;
+  export let autocomplete: 'current-password' | 'new-password' | 'off' = 'current-password';
+  let className = '';
+  export { className as class };
+
+  const dispatch = createEventDispatcher<{ change: string }>();
+  const uid = `dash-ui-pwd-${++counter}`;
+
+  let shown = false;
+
+  function handleInput(e: Event) {
+    value = (e.target as HTMLInputElement).value;
+    dispatch('change', value);
+  }
+</script>
+
+<div class="pwd-input-wrapper {className}">
+  {#if label}
+    <label for={uid} class="pwd-input__label">{label}</label>
+  {/if}
+  <div class="pwd-input{disabled ? ' pwd-input--disabled' : ''}">
+    <input
+      id={uid}
+      type={shown ? 'text' : 'password'}
+      class="pwd-input__field"
+      {value}
+      {placeholder}
+      {disabled}
+      {autocomplete}
+      on:input={handleInput}
+    />
+    <button
+      type="button"
+      class="pwd-input__toggle"
+      aria-pressed={shown}
+      aria-label={shown ? 'Hide password' : 'Show password'}
+      {disabled}
+      on:click={() => (shown = !shown)}
+    >
+      {#if shown}
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
+          <path d="M2 2l12 12M6.5 6.6A2 2 0 0 0 9.4 9.5M4.2 4.3C2.7 5.3 1.5 7 1.5 8s2.2 4.5 6.5 4.5c1.3 0 2.4-.3 3.3-.8M7 3.6C7.3 3.5 7.7 3.5 8 3.5c4.3 0 6.5 3.5 6.5 4.5 0 .6-.6 1.7-1.7 2.7" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      {:else}
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
+          <path d="M1 8s2.5-5 7-5 7 5 7 5-2.5 5-7 5-7-5-7-5z" stroke="currentColor" stroke-width="1.25" stroke-linejoin="round"/>
+          <circle cx="8" cy="8" r="2" stroke="currentColor" stroke-width="1.25"/>
+        </svg>
+      {/if}
+    </button>
+  </div>
+</div>