@svgrid/grid 1.2.22 → 1.2.24

package/src/SvSwitchButton.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+  /**
+   * SvSwitchButton - an on/off sliding switch (ARIA `switch`). Parity: Smart
+   * `smart-switch-button`. Controlled via `checked` + `onChange`; keyboard
+   * togglable; optional inline on/off labels.
+   */
+  import { createSwitch } from './createSwitch.svelte'
+
+  type Props = {
+    checked?: boolean
+    onChange?: (checked: boolean) => void
+    disabled?: boolean
+    size?: 'sm' | 'md' | 'lg'
+    name?: string
+    ariaLabel?: string
+    /** Optional labels rendered inside the track. */
+    onLabel?: string
+    offLabel?: string
+  }
+
+  let {
+    checked = false,
+    onChange,
+    disabled = false,
+    size = 'md',
+    name,
+    ariaLabel,
+    onLabel,
+    offLabel,
+  }: Props = $props()
+
+  // The styled switch is just a renderer over the headless core.
+  const sw = createSwitch({
+    checked: () => checked,
+    onChange: (v) => onChange?.(v),
+    disabled: () => disabled,
+    ariaLabel: () => ariaLabel,
+  })
+</script>
+
+<button
+  class="sv-switch sv-switch--{size}"
+  class:is-on={checked}
+  {...sw.switchProps()}
+>
+  <span class="sv-switch__track">
+    {#if onLabel || offLabel}
+      <span class="sv-switch__txt sv-switch__txt--on">{onLabel ?? ''}</span>
+      <span class="sv-switch__txt sv-switch__txt--off">{offLabel ?? ''}</span>
+    {/if}
+    <span class="sv-switch__thumb"></span>
+  </span>
+  {#if name}<input type="hidden" {name} value={checked ? 'true' : 'false'} />{/if}
+</button>
+
+<style>
+  .sv-switch {
+    --_accent: var(--sg-accent, #2563eb);
+    --_h: 22px; --_w: 40px;
+    display: inline-flex; align-items: center; background: none; border: 0; padding: 2px; cursor: pointer;
+  }
+  .sv-switch--sm { --_h: 18px; --_w: 32px; }
+  .sv-switch--lg { --_h: 28px; --_w: 52px; }
+  .sv-switch[disabled] { opacity: 0.5; cursor: not-allowed; }
+  .sv-switch__track {
+    position: relative; width: var(--_w); height: var(--_h); border-radius: 999px;
+    background: var(--sg-border, #cbd5e1); transition: background 0.16s;
+    display: inline-flex; align-items: center;
+  }
+  .sv-switch.is-on .sv-switch__track { background: var(--_accent); }
+  .sv-switch__thumb {
+    position: absolute; left: 2px; top: 50%; transform: translateY(-50%);
+    width: calc(var(--_h) - 4px); height: calc(var(--_h) - 4px); border-radius: 50%;
+    background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: left 0.16s;
+  }
+  .sv-switch.is-on .sv-switch__thumb { left: calc(var(--_w) - var(--_h) + 2px); }
+  .sv-switch__txt {
+    position: absolute; font-size: 9px; font-weight: 700; color: #fff; text-transform: uppercase;
+    top: 50%; transform: translateY(-50%);
+  }
+  .sv-switch__txt--on { left: 6px; opacity: 0; }
+  .sv-switch__txt--off { right: 5px; color: var(--sg-muted, #64748b); }
+  .sv-switch.is-on .sv-switch__txt--on { opacity: 1; }
+  .sv-switch.is-on .sv-switch__txt--off { opacity: 0; }
+  .sv-switch:focus-visible { outline: none; }
+  .sv-switch:focus-visible .sv-switch__track { outline: 2px solid var(--sg-focus-ring, var(--_accent)); outline-offset: 2px; }
+</style>

package/src/SvTabs.svelte

@@ -0,0 +1,109 @@
+<script lang="ts" module>
+  export type { TabItem } from './createTabs.svelte'
+</script>
+
+<script lang="ts">
+  /**
+   * SvTabs - a WAI-ARIA tabs widget with roving tabindex + arrow-key navigation.
+   * Parity: Smart `smart-tabs`. Controlled via `value` + `onChange`; the active
+   * panel is rendered through the `panel` snippet (receives the active id).
+   *
+   * The behavior (roving focus, activation, ARIA) lives in the headless
+   * `createTabs` core; this component is just one styled renderer over it.
+   */
+  import type { Snippet } from 'svelte'
+  import { createTabs, type TabItem } from './createTabs.svelte'
+
+  type Props = {
+    tabs: ReadonlyArray<TabItem>
+    value?: string
+    onChange?: (id: string) => void
+    orientation?: 'horizontal' | 'vertical'
+    /** 'line' underline (default) or 'pill' segmented look. */
+    variant?: 'line' | 'pill'
+    /** Activate on focus (automatic) vs. on Enter/Space (manual). Default automatic. */
+    activation?: 'automatic' | 'manual'
+    panel?: Snippet<[string]>
+    ariaLabel?: string
+  }
+
+  let {
+    tabs,
+    value = $bindable(),
+    onChange,
+    orientation = 'horizontal',
+    variant = 'line',
+    activation = 'automatic',
+    panel,
+    ariaLabel,
+  }: Props = $props()
+
+  const tabsCtl = createTabs({
+    tabs: () => tabs,
+    value: () => value,
+    onChange: (id) => { value = id; onChange?.(id) },
+    orientation: () => orientation,
+    activation: () => activation,
+    ariaLabel: () => ariaLabel,
+  })
+  const active = $derived(tabsCtl.activeId)
+
+  // DOM focus movement is a render concern: follow the core's roving focus target.
+  let tablistEl: HTMLDivElement | null = null
+  let lastFocusTick = 0
+  $effect(() => {
+    if (tabsCtl.focusTick !== lastFocusTick) {
+      lastFocusTick = tabsCtl.focusTick
+      const fid = tabsCtl.focusId
+      queueMicrotask(() => tablistEl?.querySelector<HTMLElement>(`[data-tab="${fid}"]`)?.focus())
+    }
+  })
+</script>
+
+<div class="sv-tabs sv-tabs--{orientation} sv-tabs--{variant}">
+  <div bind:this={tablistEl} class="sv-tabs__list" {...tabsCtl.tablistProps()}>
+    {#each tabs as tab (tab.id)}
+      <button
+        type="button"
+        class="sv-tabs__tab"
+        class:is-active={tab.id === active}
+        {...tabsCtl.tabProps(tab.id)}
+      >{tab.label}</button>
+    {/each}
+  </div>
+  {#if panel}
+    <div class="sv-tabs__panel" {...tabsCtl.panelProps(active)}>
+      {@render panel(active)}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .sv-tabs { --_accent: var(--sg-accent, #2563eb); display: flex; gap: 0; }
+  .sv-tabs--horizontal { flex-direction: column; }
+  .sv-tabs--vertical { flex-direction: row; }
+  .sv-tabs__list { display: flex; gap: 2px; }
+  .sv-tabs--horizontal .sv-tabs__list { border-bottom: 1px solid var(--sg-border, #e2e8f0); }
+  .sv-tabs--vertical .sv-tabs__list { flex-direction: column; border-right: 1px solid var(--sg-border, #e2e8f0); }
+  .sv-tabs--pill .sv-tabs__list { border: 0; background: var(--sg-header-bg, #f1f5f9); padding: 3px; border-radius: 9px; gap: 3px; }
+
+  .sv-tabs__tab {
+    background: none; border: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--sg-muted, #64748b);
+    padding: 9px 14px; cursor: pointer; white-space: nowrap; position: relative;
+  }
+  .sv-tabs__tab:hover:not(:disabled):not(.is-active) { color: var(--sg-fg, #0f172a); }
+  .sv-tabs__tab:disabled { opacity: 0.45; cursor: not-allowed; }
+  .sv-tabs__tab:focus-visible { outline: 2px solid var(--sg-focus-ring, var(--_accent)); outline-offset: -2px; border-radius: 6px; }
+
+  .sv-tabs--line .sv-tabs__tab.is-active { color: var(--_accent); }
+  .sv-tabs--line .sv-tabs__tab.is-active::after {
+    content: ''; position: absolute; left: 8px; right: 8px; height: 2px; background: var(--_accent);
+  }
+  .sv-tabs--horizontal.sv-tabs--line .sv-tabs__tab.is-active::after { bottom: -1px; }
+  .sv-tabs--vertical.sv-tabs--line .sv-tabs__tab.is-active::after { top: 8px; bottom: 8px; left: auto; right: -1px; width: 2px; height: auto; }
+
+  .sv-tabs--pill .sv-tabs__tab { border-radius: 7px; padding: 7px 14px; }
+  .sv-tabs--pill .sv-tabs__tab.is-active { background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a); box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
+
+  .sv-tabs__panel { padding: 16px 2px; outline: none; }
+</style>

package/src/SvTagsInput.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+  /**
+   * SvTagsInput - editable token/chips input. Type + Enter/comma to add,
+   * Backspace to remove the last, click × to remove a chip. Parity: Smart
+   * `smart-tags` / `smart-input` token mode. Emits string[].
+   *
+   * One styled renderer over the headless `createTagsInput` core (draft +
+   * add/remove + keyboard).
+   */
+  import { createTagsInput } from './createTagsInput.svelte'
+
+  type Props = {
+    value?: string[]
+    onChange?: (tags: string[]) => void
+    placeholder?: string
+    disabled?: boolean
+    /** Reject duplicate tags. Default true. */
+    unique?: boolean
+    max?: number
+    name?: string
+    ariaLabel?: string
+  }
+
+  let { value = [], onChange, placeholder = 'Add tag…', disabled = false, unique = true, max = Infinity, name, ariaLabel }: Props = $props()
+
+  const ti = createTagsInput({
+    value: () => value,
+    onChange: (t) => onChange?.(t),
+    disabled: () => disabled,
+    unique: () => unique,
+    max: () => max,
+    ariaLabel: () => ariaLabel,
+  })
+</script>
+
+<div class="sv-tags" class:is-disabled={disabled} {...ti.rootProps()}>
+  {#each value as tag, i (tag + i)}
+    <span class="sv-tags__chip" {...ti.tagProps(i)}>
+      <span class="sv-tags__label">{tag}</span>
+      {#if !disabled}
+        <button class="sv-tags__x" {...ti.removeProps(i)}>&times;</button>
+      {/if}
+    </span>
+  {/each}
+  <input
+    class="sv-tags__input"
+    placeholder={value.length ? '' : placeholder}
+    {...ti.inputProps()}
+  />
+  {#if name}<input type="hidden" {name} value={value.join(',')} />{/if}
+</div>
+
+<style>
+  .sv-tags {
+    --_accent: var(--sg-accent, #2563eb);
+    display: flex; flex-wrap: wrap; gap: 5px; align-items: center; width: 280px; min-height: 34px; padding: 4px 6px;
+    background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a);
+    border: 1px solid var(--sg-input-border, var(--sg-border, #cbd5e1)); border-radius: var(--sg-radius, 8px);
+  }
+  .sv-tags:focus-within { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); }
+  .sv-tags.is-disabled { opacity: 0.6; }
+  .sv-tags__chip {
+    display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 4px 0 8px;
+    background: color-mix(in srgb, var(--_accent) 14%, transparent); color: var(--_accent);
+    border-radius: 5px; font-size: 12px; font-weight: 600;
+  }
+  .sv-tags__x { background: none; border: 0; color: inherit; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; opacity: 0.7; }
+  .sv-tags__x:hover { opacity: 1; }
+  .sv-tags__input { flex: 1; min-width: 80px; border: 0; background: none; outline: none; color: inherit; font: inherit; font-size: 13px; height: 24px; }
+</style>

package/src/SvTimePicker.svelte

@@ -0,0 +1,201 @@
+<script lang="ts" module>
+  export type { TimeValue } from './createTimePicker.svelte'
+</script>
+
+<script lang="ts">
+  /**
+   * SvTimePicker - an analog clock-dial time picker (parity: Smart
+   * `smart-time-picker`). 12/24-hour, minute snapping, hour->minute auto-switch,
+   * pointer-drag + keyboard. It is a styled renderer over the headless
+   * `createTimePicker` core: the core owns the value math, dial geometry, keyboard
+   * and ARIA; this component keeps the DOM-bound pointer capture + hit-testing.
+   * All visuals come from `--sg-*` tokens so every theme applies for free.
+   */
+  import { createTimePicker, type TimeValue, type TimeFormat, type TimeSelection } from './createTimePicker.svelte'
+
+  type Props = {
+    /** Date, "HH:MM[:SS]" string, or epoch ms. */
+    value?: TimeValue
+    /** Fires with a Date (today's date carrying the picked time). */
+    onChange?: (value: Date) => void
+    format?: TimeFormat
+    minuteInterval?: number
+    /** After picking an hour, jump the dial to minutes. Default true. */
+    autoSwitchToMinutes?: boolean
+    /** Show the Now footer button. */
+    footer?: boolean
+    disabled?: boolean
+    readonly?: boolean
+    name?: string
+    /** Which dial opens first. */
+    selection?: TimeSelection
+  }
+
+  let {
+    value = null,
+    onChange,
+    format = '24-hour',
+    minuteInterval = 1,
+    autoSwitchToMinutes = true,
+    footer = false,
+    disabled = false,
+    readonly = false,
+    name,
+    selection = 'hour',
+  }: Props = $props()
+
+  // The headless core owns all state, geometry, keyboard + ARIA. Reactive inputs
+  // are getters; callbacks are closures.
+  const tp = createTimePicker({
+    value: () => value,
+    onChange: (d) => onChange?.(d),
+    format: () => format,
+    minuteInterval: () => minuteInterval,
+    autoSwitchToMinutes: () => autoSwitchToMinutes,
+    disabled: () => disabled,
+    readonly: () => readonly,
+    selection: () => selection,
+  })
+
+  // --- Pointer drag on the dial (DOM-bound; stays in the component) -----------
+  // The core exposes SIZE/C + a pure `pointerSelect(angle, dist)`; here we only
+  // turn a pointer event into that angle via the live element rect.
+  let dialEl: SVGSVGElement | null = null
+  let dragging = false
+
+  function angleFromEvent(e: PointerEvent): { angle: number; dist: number } {
+    const rect = dialEl!.getBoundingClientRect()
+    const scale = tp.SIZE / rect.width
+    const x = (e.clientX - rect.left) * scale - tp.C
+    const y = (e.clientY - rect.top) * scale - tp.C
+    let deg = (Math.atan2(y, x) * 180) / Math.PI + 90
+    if (deg < 0) deg += 360
+    return { angle: deg, dist: Math.hypot(x, y) }
+  }
+
+  function onDialPointerDown(e: PointerEvent) {
+    if (!tp.isInteractive) return
+    dragging = true
+    dialEl?.setPointerCapture(e.pointerId)
+    const { angle, dist } = angleFromEvent(e)
+    tp.pointerSelect(angle, dist)
+  }
+  function onDialPointerMove(e: PointerEvent) {
+    if (!dragging) return
+    const { angle, dist } = angleFromEvent(e)
+    tp.pointerSelect(angle, dist)
+  }
+  function onDialPointerUp(e: PointerEvent) {
+    if (!dragging) return
+    dragging = false
+    dialEl?.releasePointerCapture(e.pointerId)
+    tp.endPointer()
+  }
+</script>
+
+<div class="sv-tp" class:sv-tp--disabled={disabled} role="group" aria-label="Time picker">
+  <div class="sv-tp__head">
+    <button class="sv-tp__seg" class:is-active={tp.selection === 'hour'} {...tp.segProps('hour')}>
+      {String(tp.displayHour).padStart(2, '0')}
+    </button>
+    <span class="sv-tp__colon">:</span>
+    <button class="sv-tp__seg" class:is-active={tp.selection === 'minute'} {...tp.segProps('minute')}>
+      {tp.mm}
+    </button>
+    {#if tp.is12}
+      <div class="sv-tp__ampm">
+        <button class:is-active={!tp.isPm} {...tp.ampmProps(false)}>AM</button>
+        <button class:is-active={tp.isPm} {...tp.ampmProps(true)}>PM</button>
+      </div>
+    {/if}
+  </div>
+
+  <svg
+    bind:this={dialEl}
+    class="sv-tp__dial"
+    viewBox={`0 0 ${tp.SIZE} ${tp.SIZE}`}
+    width="100%"
+    {...tp.dialProps()}
+    onpointerdown={onDialPointerDown}
+    onpointermove={onDialPointerMove}
+    onpointerup={onDialPointerUp}
+    onpointercancel={onDialPointerUp}
+  >
+    <circle class="sv-tp__face" cx={tp.C} cy={tp.C} r={tp.C - 4} />
+    <!-- hand -->
+    <line class="sv-tp__hand" x1={tp.C} y1={tp.C} x2={tp.handEnd.x} y2={tp.handEnd.y} />
+    <circle class="sv-tp__hub" cx={tp.C} cy={tp.C} r="3" />
+    <circle class="sv-tp__knob" cx={tp.handEnd.x} cy={tp.handEnd.y} r="15" />
+    {#if tp.selection === 'hour'}
+      {#each tp.hourTicks as t (t.ring + '-' + t.value)}
+        <text class="sv-tp__num" class:is-active={tp.isActiveHour(t)} class:is-inner={t.ring === 'inner'} x={t.x} y={t.y} dominant-baseline="central" text-anchor="middle">{t.label}</text>
+      {/each}
+    {:else}
+      {#each tp.minuteTicks as t (t.value)}
+        <text class="sv-tp__num" class:is-active={t.value === tp.minutes} x={t.x} y={t.y} dominant-baseline="central" text-anchor="middle">{t.label}</text>
+      {/each}
+    {/if}
+  </svg>
+
+  {#if footer}
+    <div class="sv-tp__footer">
+      <button class="sv-tp__now" {...tp.nowProps()}>Now</button>
+    </div>
+  {/if}
+
+  {#if name}<input type="hidden" {name} value={`${String(tp.hours).padStart(2, '0')}:${tp.mm}`} />{/if}
+</div>
+
+<style>
+  .sv-tp {
+    --_accent: var(--sg-accent, #2563eb);
+    --_bg: var(--sg-bg, #fff);
+    --_fg: var(--sg-fg, #0f172a);
+    --_muted: var(--sg-muted, #64748b);
+    --_border: var(--sg-border, #e2e8f0);
+    --_face: var(--sg-header-bg, #f1f5f9);
+    --_radius: var(--sg-radius, 8px);
+    display: inline-flex; flex-direction: column; gap: 10px; align-items: center;
+    width: 260px; padding: 12px;
+    background: var(--_bg); color: var(--_fg);
+    border: 1px solid var(--_border); border-radius: calc(var(--_radius) + 4px);
+    user-select: none;
+  }
+  .sv-tp--disabled { opacity: 0.55; pointer-events: none; }
+
+  .sv-tp__head { display: flex; align-items: center; gap: 2px; font-variant-numeric: tabular-nums; }
+  .sv-tp__seg {
+    font-size: 30px; font-weight: 700; line-height: 1;
+    background: none; border: 0; color: var(--_muted); cursor: pointer;
+    padding: 2px 6px; border-radius: var(--_radius);
+  }
+  .sv-tp__seg.is-active { color: var(--_accent); background: color-mix(in srgb, var(--_accent) 12%, transparent); }
+  .sv-tp__colon { font-size: 28px; font-weight: 700; color: var(--_muted); }
+  .sv-tp__ampm { display: flex; flex-direction: column; margin-left: 8px; gap: 2px; }
+  .sv-tp__ampm button {
+    font-size: 11px; font-weight: 700; padding: 3px 8px;
+    background: none; border: 1px solid var(--_border); border-radius: 6px; color: var(--_muted); cursor: pointer;
+  }
+  .sv-tp__ampm button.is-active { background: var(--_accent); color: var(--sg-on-accent, #fff); border-color: var(--_accent); }
+
+  .sv-tp__dial { touch-action: none; cursor: pointer; outline: none; display: block; width: 100%; height: auto; aspect-ratio: 1; }
+  .sv-tp__dial:focus-visible { outline: 2px solid var(--sg-focus-ring, var(--_accent)); outline-offset: 2px; border-radius: 50%; }
+  .sv-tp__face { fill: var(--_face); }
+  .sv-tp__hand { stroke: var(--_accent); stroke-width: 2; }
+  .sv-tp__hub { fill: var(--_accent); }
+  .sv-tp__knob { fill: var(--_accent); opacity: 0.9; }
+  .sv-tp__num {
+    font-size: 13px; fill: var(--_fg); pointer-events: none;
+    font-family: inherit;
+  }
+  .sv-tp__num.is-inner { font-size: 11px; fill: var(--_muted); }
+  .sv-tp__num.is-active { fill: var(--sg-on-accent, #fff); font-weight: 700; }
+
+  .sv-tp__footer { width: 100%; display: flex; justify-content: center; border-top: 1px solid var(--_border); padding-top: 8px; }
+  .sv-tp__now {
+    padding: 5px 14px; font: inherit; font-size: 12px; font-weight: 600;
+    background: none; border: 1px solid var(--_border); border-radius: var(--_radius);
+    color: var(--_accent); cursor: pointer;
+  }
+  .sv-tp__now:hover { background: color-mix(in srgb, var(--_accent) 10%, transparent); }
+</style>

package/src/SvTimePicker.test.ts

@@ -0,0 +1,98 @@
+/**
+ * Component tests for SvTimePicker. jsdom lacks real SVG layout, so pointer-drag
+ * geometry is exercised lightly; the header/segment/AM-PM/keyboard logic (where
+ * the value math lives) is covered directly.
+ */
+import { describe, expect, it } from 'vitest'
+import { mount, unmount, flushSync } from 'svelte'
+import SvTimePicker from './SvTimePicker.svelte'
+
+function mountTp(props: Record<string, unknown>) {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  const app = mount(SvTimePicker, { target, props: props as any })
+  flushSync()
+  return { target, destroy: () => { unmount(app); target.remove() } }
+}
+
+const segs = (t: HTMLElement) => t.querySelectorAll<HTMLButtonElement>('.sv-tp__seg')
+
+describe('SvTimePicker render', () => {
+  it('shows the seeded time (24h)', () => {
+    const { target, destroy } = mountTp({ value: '14:30' })
+    try {
+      expect(segs(target)[0]!.textContent!.trim()).toBe('14')
+      expect(segs(target)[1]!.textContent!.trim()).toBe('30')
+      expect(target.querySelector('.sv-tp__ampm')).toBeNull() // no AM/PM in 24h
+    } finally { destroy() }
+  })
+
+  it('shows 12-hour display with AM/PM', () => {
+    const { target, destroy } = mountTp({ value: '14:30', format: '12-hour' })
+    try {
+      expect(segs(target)[0]!.textContent!.trim()).toBe('02') // 14 -> 2 PM
+      const ampm = target.querySelectorAll<HTMLButtonElement>('.sv-tp__ampm button')
+      expect(ampm[1]!.classList.contains('is-active')).toBe(true) // PM active
+    } finally { destroy() }
+  })
+
+  it('renders 24 hour ticks (two rings) in 24h and 12 in 12h', () => {
+    const a = mountTp({ value: '10:00' })
+    try {
+      expect(a.target.querySelectorAll('.sv-tp__num').length).toBe(24)
+    } finally { a.destroy() }
+    const b = mountTp({ value: '10:00', format: '12-hour' })
+    try {
+      expect(b.target.querySelectorAll('.sv-tp__num').length).toBe(12)
+    } finally { b.destroy() }
+  })
+})
+
+describe('SvTimePicker interaction', () => {
+  it('AM/PM toggle shifts the hour by 12 and emits', () => {
+    let got: Date | null = null
+    const { target, destroy } = mountTp({ value: '02:15', format: '12-hour', onChange: (d: Date) => (got = d) })
+    try {
+      const pm = target.querySelectorAll<HTMLButtonElement>('.sv-tp__ampm button')[1]!
+      pm.click()
+      flushSync()
+      expect(got).not.toBeNull()
+      expect((got as unknown as Date).getHours()).toBe(14) // 2 AM -> 2 PM
+      expect((got as unknown as Date).getMinutes()).toBe(15)
+    } finally { destroy() }
+  })
+
+  it('keyboard bumps the selected field', () => {
+    let got: Date | null = null
+    const { target, destroy } = mountTp({ value: '10:00', selection: 'minute', minuteInterval: 15, onChange: (d: Date) => (got = d) })
+    try {
+      const dial = target.querySelector<SVGSVGElement>('.sv-tp__dial')!
+      dial.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }))
+      flushSync()
+      expect((got as unknown as Date).getMinutes()).toBe(15) // +interval
+    } finally { destroy() }
+  })
+
+  it('clicking the minute segment switches the active dial', () => {
+    const { target, destroy } = mountTp({ value: '10:00' })
+    try {
+      segs(target)[1]!.click()
+      flushSync()
+      expect(segs(target)[1]!.classList.contains('is-active')).toBe(true)
+      // minute dial shows 00,05,...,55 (12 labels)
+      expect(target.querySelectorAll('.sv-tp__num').length).toBe(12)
+    } finally { destroy() }
+  })
+
+  it('Now sets the current time', () => {
+    let got: Date | null = null
+    const { target, destroy } = mountTp({ value: '00:00', footer: true, onChange: (d: Date) => (got = d) })
+    try {
+      target.querySelector<HTMLButtonElement>('.sv-tp__now')!.click()
+      flushSync()
+      expect(got).not.toBeNull()
+      const now = new Date()
+      expect((got as unknown as Date).getHours()).toBe(now.getHours())
+    } finally { destroy() }
+  })
+})

package/src/SvToggleButton.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  /**
+   * SvToggleButton - a button with a pressed on/off state (aria-pressed).
+   * Parity: Smart `smart-toggle-button`. Controlled via `pressed` + `onChange`.
+   */
+  import type { Snippet } from 'svelte'
+  import { createToggle } from './createToggle.svelte'
+
+  type Props = {
+    pressed?: boolean
+    onChange?: (pressed: boolean) => void
+    disabled?: boolean
+    size?: 'sm' | 'md' | 'lg'
+    ariaLabel?: string
+    children?: Snippet
+  }
+
+  let { pressed = false, onChange, disabled = false, size = 'md', ariaLabel, children }: Props = $props()
+
+  // The styled toggle is just a renderer over the headless core.
+  const t = createToggle({
+    pressed: () => pressed,
+    onChange: (v) => onChange?.(v),
+    disabled: () => disabled,
+    ariaLabel: () => ariaLabel,
+  })
+</script>
+
+<button
+  class="sv-toggle sv-toggle--{size}"
+  class:is-pressed={pressed}
+  {...t.buttonProps()}
+>
+  {#if children}{@render children()}{/if}
+</button>
+
+<style>
+  .sv-toggle {
+    --_accent: var(--sg-accent, #2563eb);
+    --_border: var(--sg-border, #cbd5e1);
+    --_radius: var(--sg-radius, 8px);
+    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+    font: inherit; font-weight: 600; line-height: 1;
+    background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
+    border: 1px solid var(--_border); border-radius: var(--_radius); cursor: pointer; user-select: none;
+    transition: background 0.12s, border-color 0.12s, color 0.12s;
+  }
+  .sv-toggle--sm { padding: 5px 10px; font-size: 12px; }
+  .sv-toggle--md { padding: 8px 13px; font-size: 13px; }
+  .sv-toggle--lg { padding: 11px 17px; font-size: 15px; }
+  .sv-toggle:hover:not([disabled]):not(.is-pressed) { background: var(--sg-row-hover-bg, #f1f5f9); }
+  .sv-toggle.is-pressed {
+    background: var(--_accent); color: var(--sg-on-accent, #fff); border-color: var(--_accent);
+  }
+  .sv-toggle[disabled] { opacity: 0.55; cursor: not-allowed; }
+  .sv-toggle:focus-visible { outline: 2px solid var(--sg-focus-ring, var(--_accent)); outline-offset: 2px; }
+</style>