@svgrid/grid 1.2.34 → 2.0.1

package/src/SvSlider.svelte

@@ -7,9 +7,11 @@
    * The behavior lives in the headless `createSlider` core; this component is
    * just one styled renderer over it (it only owns pointer/DOM measurement).
    */
+  import SvField from './SvField.svelte'
+  import { nextEditorId, type SvEditorProps } from './editor-contract'
   import { createSlider } from './createSlider.svelte'
 
-  type Props = {
+  type Props = SvEditorProps & {
     value?: number | [number, number]
     onChange?: (value: any) => void
     min?: number
@@ -18,12 +20,11 @@
     range?: boolean
     /** Show evenly spaced tick marks (count or explicit values). */
     ticks?: number | number[]
+    /** Numeric scale labels under the track: 'endpoints' (min/max), 'all' (per tick), or 'none'. */
+    labels?: 'none' | 'endpoints' | 'all'
     /** Show the value bubble above the thumb. */
     showValue?: boolean
-    disabled?: boolean
     orientation?: 'horizontal' | 'vertical'
-    name?: string
-    ariaLabel?: string
     formatValue?: (v: number) => string
   }
 
@@ -35,14 +36,26 @@
     step = 1,
     range = false,
     ticks,
+    labels = 'none',
     showValue = false,
     disabled = false,
     orientation = 'horizontal',
     name,
     ariaLabel,
+    invalid = false,
+    required = false,
+    error,
+    label,
+    hint,
+    dir,
+    id,
     formatValue,
   }: Props = $props()
 
+  const autoId = nextEditorId('sv-slider')
+  const uid = $derived(id ?? autoId)
+  const resolvedDir = $derived(dir === 'ltr' || dir === 'rtl' ? dir : undefined)
+
   // Behavior (value<->position math, stepping, keyboard, drag state, ARIA) lives
   // in the headless `createSlider` core; the component keeps the DOM measuring.
   const slider = createSlider({
@@ -54,7 +67,8 @@
     range: () => range,
     orientation: () => orientation,
     disabled: () => disabled,
-    ariaLabel: () => ariaLabel,
+    ariaLabel: () => ariaLabel ?? label,
+    rtl: () => resolvedDir === 'rtl',
   })
   const lo = $derived(slider.lo)
   const hi = $derived(slider.hi)
@@ -65,6 +79,10 @@
     if (Array.isArray(ticks)) return ticks
     return Array.from({ length: ticks }, (_, i) => min + ((max - min) / (ticks - 1)) * i)
   })
+  const labelValues = $derived.by<number[]>(() => {
+    if (labels === 'all') return tickValues.length ? tickValues : [min, max]
+    return [] // 'endpoints' renders min/max directly; 'none' renders nothing
+  })
 
   // The rect is measured here (a DOM concern) and passed INTO the core.
   let trackEl: HTMLDivElement | null = null
@@ -82,10 +100,11 @@
   const fmt = (v: number) => (formatValue ? formatValue(v) : String(v))
 </script>
 
+<SvField id={uid} {label} {hint} {error} {required} {dir}>
 <div
   class="sv-slider sv-slider--{orientation}"
   class:is-disabled={disabled}
-  aria-label={ariaLabel}
+  dir={resolvedDir}
 >
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
@@ -119,8 +138,18 @@
       </div>
     {/if}
   </div>
+  {#if labels !== 'none' && orientation === 'horizontal'}
+    {#if labels === 'endpoints'}
+      <div class="sv-slider__scale sv-slider__scale--ends" aria-hidden="true"><span>{fmt(min)}</span><span>{fmt(max)}</span></div>
+    {:else}
+      <div class="sv-slider__scale" aria-hidden="true">
+        {#each labelValues as lv (lv)}<span class="sv-slider__scale-lbl" style:--p={`${pct(lv)}%`}>{fmt(lv)}</span>{/each}
+      </div>
+    {/if}
+  {/if}
   {#if name}<input type="hidden" {name} value={range ? `${lo},${hi}` : hi} />{/if}
 </div>
+</SvField>
 
 <style>
   .sv-slider { --_accent: var(--sg-accent, #2563eb); --_track: var(--sg-border, #e2e8f0); padding: 10px; }
@@ -132,15 +161,18 @@
   }
   .sv-slider--horizontal .sv-slider__track { height: 6px; }
   .sv-slider--vertical .sv-slider__track { width: 6px; height: 100%; margin: 0 auto; }
+  .sv-slider__scale { position: relative; height: 15px; margin-top: 8px; font-size: 11px; color: var(--sg-muted, #64748b); font-variant-numeric: tabular-nums; }
+  .sv-slider__scale--ends { display: flex; justify-content: space-between; }
+  .sv-slider__scale-lbl { position: absolute; inset-inline-start: var(--p); transform: translateX(-50%); white-space: nowrap; }
   .sv-slider__fill { position: absolute; background: var(--_accent); border-radius: 999px; }
-  .sv-slider--horizontal .sv-slider__fill { left: var(--a); right: calc(100% - var(--b)); top: 0; bottom: 0; }
+  .sv-slider--horizontal .sv-slider__fill { inset-inline-start: var(--a); inset-inline-end: calc(100% - var(--b)); top: 0; bottom: 0; }
   .sv-slider--vertical .sv-slider__fill { bottom: var(--a); top: calc(100% - var(--b)); left: 0; right: 0; }
   .sv-slider__thumb {
     position: absolute; width: 16px; height: 16px; border-radius: 50%;
     background: #fff; border: 2px solid var(--_accent); box-shadow: 0 1px 3px rgba(0,0,0,0.25);
     cursor: grab; touch-action: none;
   }
-  .sv-slider--horizontal .sv-slider__thumb { left: var(--p); top: 50%; transform: translate(-50%, -50%); }
+  .sv-slider--horizontal .sv-slider__thumb { inset-inline-start: var(--p); top: 50%; transform: translate(-50%, -50%); }
   .sv-slider--vertical .sv-slider__thumb { bottom: var(--p); left: 50%; transform: translate(-50%, 50%); }
   .sv-slider__thumb:focus-visible { outline: 2px solid var(--sg-focus-ring, var(--_accent)); outline-offset: 2px; }
   .sv-slider__thumb:active { cursor: grabbing; }
@@ -150,6 +182,6 @@
     padding: 2px 6px; border-radius: 5px; white-space: nowrap;
   }
   .sv-slider__tick { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: var(--sg-muted, #94a3b8); }
-  .sv-slider--horizontal .sv-slider__tick { left: var(--p); top: 50%; transform: translate(-50%, -50%); }
+  .sv-slider--horizontal .sv-slider__tick { inset-inline-start: var(--p); top: 50%; transform: translate(-50%, -50%); }
   .sv-slider--vertical .sv-slider__tick { bottom: var(--p); left: 50%; transform: translate(-50%, 50%); }
 </style>

package/src/SvSparkline.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+  /**
+   * SvSparkline - a tiny inline chart (line / area / bar / win-loss) from a number
+   * array. A thin SVG renderer over the pure `buildSparkline` geometry (shared
+   * with the grid's sparkline cell). Theme-driven (defaults to `--sg-accent`).
+   *
+   * ```svelte
+   * <SvSparkline data={[3, 7, 4, 9, 6, 11, 8]} type="area" />
+   * ```
+   */
+  import { buildSparkline, type SparklineType } from './sparkline'
+
+  type Props = {
+    data: ReadonlyArray<number>
+    type?: SparklineType
+    width?: number
+    height?: number
+    color?: string
+    negativeColor?: string
+    lineWidth?: number
+    /** Fix the value scale instead of deriving it from the data. */
+    min?: number
+    max?: number
+    /** End-cap dot on the last point (line / area). Default true. */
+    lastPoint?: boolean
+    ariaLabel?: string
+  }
+
+  let {
+    data,
+    type = 'line',
+    width = 88,
+    height = 22,
+    color,
+    negativeColor,
+    lineWidth,
+    min,
+    max,
+    lastPoint = true,
+    ariaLabel,
+  }: Props = $props()
+
+  const geo = $derived(
+    buildSparkline([...data], { type, width, height, color, negativeColor, lineWidth, min, max, lastPoint }),
+  )
+</script>
+
+{#if geo}
+  <svg
+    class="sv-spark"
+    width={geo.width}
+    height={geo.height}
+    viewBox={`0 0 ${geo.width} ${geo.height}`}
+    preserveAspectRatio="none"
+    role="img"
+    aria-label={ariaLabel ?? 'sparkline'}
+  >
+    {#if type === 'area' && geo.areaPath}
+      <path d={geo.areaPath} fill={geo.color} fill-opacity="0.15" stroke="none" />
+    {/if}
+    {#if (type === 'line' || type === 'area') && geo.linePath}
+      <path d={geo.linePath} fill="none" stroke={geo.color} stroke-width={geo.lineWidth} stroke-linejoin="round" stroke-linecap="round" />
+    {/if}
+    {#if type === 'bar' || type === 'winloss'}
+      {#each geo.bars as b, i (i)}
+        <rect x={b.x} y={b.y} width={b.w} height={b.h} rx="0.5" fill={b.negative ? geo.negativeColor : geo.color} />
+      {/each}
+    {/if}
+    {#if lastPoint && geo.lastPoint && (type === 'line' || type === 'area')}
+      <circle cx={geo.lastPoint.x} cy={geo.lastPoint.y} r={geo.lineWidth + 0.8} fill={geo.color} />
+    {/if}
+  </svg>
+{/if}
+
+<style>
+  .sv-spark { display: inline-block; vertical-align: middle; overflow: visible; }
+</style>

package/src/SvSplitter.svelte

@@ -0,0 +1,138 @@
+<script lang="ts" module>
+  export type { SplitterOrientation } from './createSplitter.svelte'
+</script>
+
+<script lang="ts">
+  /**
+   * SvSplitter - two resizable panes with a draggable separator (WAI-ARIA
+   * `separator`), pointer drag + keyboard resize. Parity: Smart `smart-splitter`.
+   * Controlled via `fraction` (0..1 of the first pane) + `onChange`; the two panes
+   * are the `start` and `end` snippets.
+   *
+   * Behavior (clamp, keyboard, ARIA, RTL) lives in the headless `createSplitter`
+   * core; this component owns only the container measurement for pointer drags.
+   */
+  import type { Snippet } from 'svelte'
+  import { type EditorDir } from './editor-contract'
+  import { createSplitter, type SplitterOrientation } from './createSplitter.svelte'
+
+  type Props = {
+    /** Size of the first pane as a fraction of the container (0..1). */
+    fraction?: number
+    onChange?: (fraction: number) => void
+    /** 'horizontal' = left/right panes (default); 'vertical' = top/bottom. */
+    orientation?: SplitterOrientation
+    min?: number
+    max?: number
+    /** Keyboard resize step as a fraction (default 0.02 = 2%). */
+    step?: number
+    disabled?: boolean
+    dir?: EditorDir
+    ariaLabel?: string
+    start?: Snippet
+    end?: Snippet
+  }
+
+  let {
+    fraction = $bindable(0.5),
+    onChange,
+    orientation = 'horizontal',
+    min = 0.1,
+    max = 0.9,
+    step = 0.02,
+    disabled = false,
+    dir,
+    ariaLabel,
+    start,
+    end,
+  }: Props = $props()
+
+  const resolvedDir = $derived(dir === 'ltr' || dir === 'rtl' ? dir : undefined)
+
+  const sp = createSplitter({
+    fraction: () => fraction,
+    onChange: (f) => { fraction = f; onChange?.(f) },
+    orientation: () => orientation,
+    min: () => min,
+    max: () => max,
+    step: () => step,
+    disabled: () => disabled,
+    dir: () => dir,
+    ariaLabel: () => ariaLabel,
+  })
+
+  // The container rect is measured here (a DOM concern) and passed INTO the core.
+  let rootEl: HTMLDivElement | null = null
+  let sepEl: HTMLDivElement | null = null
+
+  function onSepDown(e: PointerEvent) {
+    if (disabled) return
+    sp.pointerDown()
+    sepEl?.setPointerCapture(e.pointerId)
+  }
+  function onMove(e: PointerEvent) {
+    if (!sp.dragging || !rootEl) return
+    sp.setFromPointer({ x: e.clientX, y: e.clientY }, rootEl.getBoundingClientRect())
+  }
+  function onUp(e: PointerEvent) {
+    if (!sp.dragging) return
+    sp.endDrag()
+    sepEl?.releasePointerCapture(e.pointerId)
+  }
+</script>
+
+<div
+  bind:this={rootEl}
+  class="sv-split sv-split--{orientation}"
+  class:is-disabled={disabled}
+  class:is-dragging={sp.dragging}
+  dir={resolvedDir}
+>
+  <div class="sv-split__pane" style:flex-basis={`${sp.percent}%`}>
+    {#if start}{@render start()}{/if}
+  </div>
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    bind:this={sepEl}
+    class="sv-split__sep"
+    {...sp.separatorProps()}
+    onpointerdown={onSepDown}
+    onpointermove={onMove}
+    onpointerup={onUp}
+    onpointercancel={onUp}
+  ><span class="sv-split__grip" aria-hidden="true"></span></div>
+  <div class="sv-split__pane sv-split__pane--end">
+    {#if end}{@render end()}{/if}
+  </div>
+</div>
+
+<style>
+  .sv-split {
+    --_accent: var(--sg-accent, #2563eb);
+    --_border: var(--sg-border, #e2e8f0);
+    display: flex; width: 100%; height: 100%; min-height: 0; overflow: hidden;
+  }
+  .sv-split--vertical { flex-direction: column; }
+  .sv-split.is-disabled { opacity: 0.7; }
+  .sv-split__pane { flex-grow: 0; flex-shrink: 0; min-width: 0; min-height: 0; overflow: auto; }
+  .sv-split__pane--end { flex: 1 1 0; }
+  /* The gutter is a solid divider-toned bar (--sg-border is the one token that
+     reliably contrasts against panes in BOTH light and dark themes - it draws the
+     visible card outline too). It turns accent on hover / drag. */
+  .sv-split__sep {
+    flex: 0 0 auto; position: relative; background: var(--sg-border, #cbd5e1);
+    display: grid; place-items: center; touch-action: none; transition: background 0.12s;
+  }
+  /* Orientation rules MUST target the splitter's OWN separator only (direct
+     child). With a descendant combinator a nested splitter of the opposite
+     orientation inherits the wrong sizing - e.g. a vertical split inside a
+     horizontal one would get width:8px and collapse its horizontal bar. */
+  .sv-split--horizontal > .sv-split__sep { width: 8px; min-width: 8px; cursor: col-resize; }
+  .sv-split--vertical > .sv-split__sep { height: 8px; min-height: 8px; cursor: row-resize; }
+  .sv-split__sep:hover, .sv-split.is-dragging > .sv-split__sep { background: var(--_accent); }
+  .sv-split__sep:focus-visible { outline: 2px solid var(--sg-focus-ring, var(--_accent)); outline-offset: 1px; z-index: 1; }
+  /* Grip dots: the pane background color, so they read as notches cut into the bar. */
+  .sv-split__grip { background: var(--sg-bg, #fff); border-radius: 3px; opacity: 0.9; transition: background 0.12s; }
+  .sv-split--horizontal > .sv-split__sep > .sv-split__grip { width: 2px; height: 24px; }
+  .sv-split--vertical > .sv-split__sep > .sv-split__grip { width: 24px; height: 2px; }
+</style>

package/src/SvSplitter.test.ts

@@ -0,0 +1,55 @@
+/**
+ * Component tests for SvSplitter: the separator carries WAI-ARIA separator
+ * semantics, keyboard resize clamps to [min, max], and RTL flips the horizontal
+ * arrow direction.
+ */
+import { describe, expect, it } from 'vitest'
+import { mount, unmount, flushSync } from 'svelte'
+import SvSplitter from './SvSplitter.svelte'
+
+function mountSp(props: Record<string, unknown>) {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  const app = mount(SvSplitter, { target, props: props as any })
+  flushSync()
+  const sep = target.querySelector<HTMLElement>('.sv-split__sep')!
+  return { target, sep, destroy: () => { unmount(app); target.remove() } }
+}
+const key = (sep: HTMLElement, k: string) => sep.dispatchEvent(new KeyboardEvent('keydown', { key: k, bubbles: true }))
+
+describe('SvSplitter', () => {
+  it('exposes separator semantics with valuemin/max/now', () => {
+    const { sep, destroy } = mountSp({ fraction: 0.5, min: 0.2, max: 0.8 })
+    try {
+      expect(sep.getAttribute('role')).toBe('separator')
+      // Horizontal split -> a vertical separator line.
+      expect(sep.getAttribute('aria-orientation')).toBe('vertical')
+      expect(sep.getAttribute('aria-valuemin')).toBe('20')
+      expect(sep.getAttribute('aria-valuemax')).toBe('80')
+      expect(sep.getAttribute('aria-valuenow')).toBe('50')
+      expect(sep.tabIndex).toBe(0)
+    } finally { destroy() }
+  })
+
+  it('ArrowRight grows the first pane; Home/End jump to the bounds', () => {
+    let got: number | undefined
+    const { sep, destroy } = mountSp({ fraction: 0.5, step: 0.1, min: 0.2, max: 0.8, onChange: (f: number) => (got = f) })
+    try {
+      key(sep, 'ArrowRight'); flushSync()
+      expect(got).toBeCloseTo(0.6, 5)
+      key(sep, 'End'); flushSync()
+      expect(got).toBeCloseTo(0.8, 5)
+      key(sep, 'Home'); flushSync()
+      expect(got).toBeCloseTo(0.2, 5)
+    } finally { destroy() }
+  })
+
+  it('RTL flips the horizontal arrow direction', () => {
+    let got: number | undefined
+    const { sep, destroy } = mountSp({ fraction: 0.5, step: 0.1, dir: 'rtl', onChange: (f: number) => (got = f) })
+    try {
+      key(sep, 'ArrowRight'); flushSync()
+      expect(got).toBeCloseTo(0.4, 5) // Right shrinks the first (right-anchored) pane under RTL
+    } finally { destroy() }
+  })
+})

package/src/SvStat.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  /**
+   * SvStat - a KPI / metric card: a label, a big value, and an optional delta with
+   * an up/down trend (auto-coloured; green up / red down, or inverted for
+   * "lower is better" metrics), plus slots for an icon and an inline chart
+   * (e.g. a sparkline). Theme-driven. The dashboard building block.
+   *
+   * ```svelte
+   * <SvStat label="Revenue" value="$48.2k" delta={12.4} hint="vs last month" />
+   * ```
+   */
+  import type { Snippet } from 'svelte'
+
+  type Trend = 'up' | 'down' | 'flat'
+
+  type Props = {
+    label: string
+    value: string | number
+    /** A number (auto-signs + infers trend) or a preformatted string. */
+    delta?: string | number
+    /** Override the inferred trend. */
+    trend?: Trend
+    /** Text after the delta (e.g. "vs last month"). */
+    hint?: string
+    /** Treat a downward delta as good (green) - e.g. error rate, latency. */
+    invert?: boolean
+    icon?: Snippet
+    /** Inline chart / sparkline slot. */
+    chart?: Snippet
+  }
+
+  let { label, value, delta, trend, hint, invert = false, icon, chart }: Props = $props()
+
+  const resolvedTrend = $derived<Trend | undefined>(
+    trend ?? (typeof delta === 'number' ? (delta > 0 ? 'up' : delta < 0 ? 'down' : 'flat') : undefined),
+  )
+  const deltaText = $derived(
+    delta == null ? null : typeof delta === 'number' ? `${delta > 0 ? '+' : ''}${delta}%` : delta,
+  )
+  const arrow = $derived(resolvedTrend === 'up' ? '▲' : resolvedTrend === 'down' ? '▼' : '→')
+  // Which trend is "positive" (green): up, unless inverted.
+  const tone = $derived(
+    resolvedTrend === 'flat' || !resolvedTrend
+      ? 'flat'
+      : (resolvedTrend === 'up') !== invert
+        ? 'good'
+        : 'bad',
+  )
+</script>
+
+<div class="sv-stat">
+  <div class="sv-stat__head">
+    <span class="sv-stat__label">{label}</span>
+    {#if icon}<span class="sv-stat__icon" aria-hidden="true">{@render icon()}</span>{/if}
+  </div>
+  <div class="sv-stat__value">{value}</div>
+  {#if (deltaText != null) || hint || chart}
+    <div class="sv-stat__foot">
+      {#if deltaText != null && resolvedTrend}
+        <span class="sv-stat__delta is-{tone}"><span class="sv-stat__arrow" aria-hidden="true">{arrow}</span>{deltaText}</span>
+      {/if}
+      {#if hint}<span class="sv-stat__hint">{hint}</span>{/if}
+      {#if chart}<span class="sv-stat__chart">{@render chart()}</span>{/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .sv-stat {
+    display: flex; flex-direction: column; gap: 5px;
+    padding: 14px 16px; border: 1px solid var(--sg-border, #e2e8f0); border-radius: var(--sg-radius-lg, 12px);
+    background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a); min-width: 0;
+  }
+  .sv-stat__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+  .sv-stat__label { font-size: 12.5px; font-weight: 600; color: var(--sg-muted, #64748b); }
+  .sv-stat__icon { color: var(--sg-muted, #94a3b8); display: inline-flex; }
+  .sv-stat__value { font-size: 26px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
+  .sv-stat__foot { display: flex; align-items: center; gap: 8px; font-size: 12px; }
+  .sv-stat__delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 650; font-variant-numeric: tabular-nums; }
+  .sv-stat__arrow { font-size: 9px; }
+  .sv-stat__delta.is-good { color: var(--sg-success, #16a34a); }
+  .sv-stat__delta.is-bad { color: var(--sg-danger, #dc2626); }
+  .sv-stat__delta.is-flat { color: var(--sg-muted, #64748b); }
+  .sv-stat__hint { color: var(--sg-muted, #94a3b8); }
+  .sv-stat__chart { margin-inline-start: auto; }
+</style>

package/src/SvStepper.svelte

@@ -0,0 +1,91 @@
+<script lang="ts" module>
+  export type { StepItem } from './ui-app.types'
+</script>
+
+<script lang="ts">
+  /**
+   * SvStepper - a progress stepper for wizards/multi-step forms. Shows completed
+   * / active / upcoming steps horizontally or vertically. In `linear` mode only
+   * completed steps (and the active one) are clickable; otherwise any step is.
+   * Parity: Smart steps / wizard nav.
+   *
+   * ```svelte
+   * <SvStepper steps={steps} current={i} onChange={(n) => (i = n)} />
+   * ```
+   */
+  import type { StepItem } from './ui-app.types'
+
+  type Props = {
+    steps: ReadonlyArray<StepItem>
+    /** 0-based index of the active step. */
+    current: number
+    onChange?: (index: number) => void
+    /** Only allow navigating to already-reached steps. Default true. */
+    linear?: boolean
+    orientation?: 'horizontal' | 'vertical'
+  }
+
+  let { steps, current, onChange, linear = true, orientation = 'horizontal' }: Props = $props()
+
+  const statusOf = (i: number): 'complete' | 'active' | 'upcoming' =>
+    i < current ? 'complete' : i === current ? 'active' : 'upcoming'
+  const clickable = (i: number) => (linear ? i <= current : true)
+  const go = (i: number) => { if (clickable(i) && i !== current) onChange?.(i) }
+</script>
+
+<ol class="sv-step sv-step--{orientation}">
+  {#each steps as step, i (i)}
+    {@const status = statusOf(i)}
+    <li class="sv-step__item is-{status}" class:is-clickable={clickable(i)}>
+      <button
+        type="button"
+        class="sv-step__btn"
+        aria-current={status === 'active' ? 'step' : undefined}
+        disabled={!clickable(i)}
+        onclick={() => go(i)}
+      >
+        <span class="sv-step__marker" aria-hidden="true">
+          {#if status === 'complete'}✓{:else}{i + 1}{/if}
+        </span>
+        <span class="sv-step__text">
+          <span class="sv-step__label">{step.label}{#if step.optional}<span class="sv-step__optional"> (optional)</span>{/if}</span>
+          {#if step.description}<span class="sv-step__desc">{step.description}</span>{/if}
+        </span>
+      </button>
+      {#if i < steps.length - 1}<span class="sv-step__line" aria-hidden="true"></span>{/if}
+    </li>
+  {/each}
+</ol>
+
+<style>
+  .sv-step { --_accent: var(--sg-accent, #2563eb); list-style: none; margin: 0; padding: 0; display: flex; }
+  .sv-step--horizontal { flex-direction: row; align-items: flex-start; }
+  .sv-step--vertical { flex-direction: column; }
+  .sv-step__item { display: flex; position: relative; flex: 1; }
+  .sv-step--vertical .sv-step__item { flex-direction: column; }
+
+  .sv-step__btn {
+    display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 4px; margin: 0;
+    font: inherit; text-align: start; cursor: default; color: var(--sg-muted, #64748b);
+  }
+  .sv-step__item.is-clickable .sv-step__btn { cursor: pointer; }
+  .sv-step__marker {
+    flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
+    font-size: 13px; font-weight: 650;
+    background: var(--sg-row-hover-bg, #eef2f7); color: var(--sg-muted, #64748b);
+    border: 2px solid transparent; transition: background 0.15s, color 0.15s, border-color 0.15s;
+  }
+  .sv-step__item.is-active .sv-step__marker { background: var(--_accent); color: var(--sg-on-accent, #fff); }
+  .sv-step__item.is-complete .sv-step__marker { background: color-mix(in srgb, var(--_accent) 16%, transparent); color: var(--_accent); border-color: color-mix(in srgb, var(--_accent) 45%, transparent); }
+  .sv-step__item.is-active .sv-step__label, .sv-step__item.is-complete .sv-step__label { color: var(--sg-fg, #0f172a); }
+
+  .sv-step__text { display: flex; flex-direction: column; }
+  .sv-step__label { font-size: 13px; font-weight: 600; }
+  .sv-step__optional { font-weight: 400; color: var(--sg-muted, #94a3b8); font-size: 11.5px; }
+  .sv-step__desc { font-size: 11.5px; color: var(--sg-muted, #94a3b8); }
+
+  .sv-step__line { flex: 1; height: 2px; align-self: center; margin: 0 8px; background: var(--sg-border, #e2e8f0); }
+  .sv-step__item.is-complete .sv-step__line { background: color-mix(in srgb, var(--_accent) 45%, var(--sg-border, #e2e8f0)); }
+  .sv-step--vertical .sv-step__line { width: 2px; height: auto; min-height: 16px; margin: 4px 0 4px 17px; align-self: flex-start; }
+  .sv-step--vertical .sv-step__item { padding-bottom: 4px; }
+</style>