@svgrid/grid 2.6.3 → 2.6.4

package/src/SvSlider.svelte

@@ -1,203 +1,203 @@
-<script lang="ts">
-  /**
-   * SvSlider - a single or range slider (WAI-ARIA slider) with steps, ticks,
-   * keyboard + pointer drag. Parity: Smart `smart-slider`. Single emits number;
-   * range emits [number, number].
-   *
-   * 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 = SvEditorProps & {
-    value?: number | [number, number]
-    onChange?: (value: any) => void
-    min?: number
-    max?: number
-    step?: number
-    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
-    orientation?: 'horizontal' | 'vertical'
-    formatValue?: (v: number) => string
-  }
-
-  let {
-    value = 0,
-    onChange,
-    min = 0,
-    max = 100,
-    step = 1,
-    range = false,
-    ticks,
-    labels = 'none',
-    showValue = false,
-    disabled = false,
-    readonly = false,
-    size = 'md',
-    orientation = 'horizontal',
-    name,
-    ariaLabel,
-    block = false,
-    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({
-    value: () => value,
-    onChange: (v) => { if (readonly) return; onChange?.(v) },
-    min: () => min,
-    max: () => max,
-    step: () => step,
-    range: () => range,
-    orientation: () => orientation,
-    disabled: () => disabled,
-    ariaLabel: () => ariaLabel ?? label,
-    rtl: () => resolvedDir === 'rtl',
-    id: () => uid,
-    invalid: () => invalid,
-    required: () => required,
-    error: () => error,
-    hint: () => hint,
-  })
-  const lo = $derived(slider.lo)
-  const hi = $derived(slider.hi)
-  const pct = (v: number) => slider.percentOf(v)
-
-  const tickValues = $derived.by<number[]>(() => {
-    if (!ticks) return []
-    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
-  function onTrackDown(e: PointerEvent) {
-    if (disabled || readonly) return
-    slider.pointerDown({ x: e.clientX, y: e.clientY }, trackEl!.getBoundingClientRect())
-    trackEl?.setPointerCapture(e.pointerId)
-  }
-  function onMove(e: PointerEvent) {
-    if (!slider.dragging) return
-    slider.setFromPointer({ x: e.clientX, y: e.clientY }, trackEl!.getBoundingClientRect())
-  }
-  function onUp(e: PointerEvent) { if (slider.dragging) { slider.endDrag(); trackEl?.releasePointerCapture(e.pointerId) } }
-
-  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} sv-slider--{size}" class:is-block={block}
-  class:is-disabled={disabled}
-  class:is-readonly={readonly}
-  dir={resolvedDir}
->
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <div
-    bind:this={trackEl}
-    class="sv-slider__track"
-    {...slider.trackProps()}
-    onpointerdown={onTrackDown}
-    onpointermove={onMove}
-    onpointerup={onUp}
-    onpointercancel={onUp}
-  >
-    <div
-      class="sv-slider__fill"
-      style:--a={`${range ? pct(lo) : 0}%`}
-      style:--b={`${range ? pct(hi) : pct(hi)}%`}
-    ></div>
-    {#each tickValues as t (t)}
-      <span class="sv-slider__tick" style:--p={`${pct(t)}%`}></span>
-    {/each}
-
-    {#if range}
-      <div class="sv-slider__thumb" style:--p={`${pct(lo)}%`} {...slider.thumbProps(0)} aria-readonly={readonly ? 'true' : undefined}>
-        {#if showValue}<span class="sv-slider__bubble">{fmt(lo)}</span>{/if}
-      </div>
-      <div class="sv-slider__thumb" style:--p={`${pct(hi)}%`} {...slider.thumbProps(1)} aria-readonly={readonly ? 'true' : undefined}>
-        {#if showValue}<span class="sv-slider__bubble">{fmt(hi)}</span>{/if}
-      </div>
-    {:else}
-      <div class="sv-slider__thumb" style:--p={`${pct(hi)}%`} {...slider.thumbProps(0)} aria-readonly={readonly ? 'true' : undefined}>
-        {#if showValue}<span class="sv-slider__bubble">{fmt(hi)}</span>{/if}
-      </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); --_th: 16px; --_trk: 6px; padding: 10px; }
-  .sv-slider--sm { --_th: 13px; --_trk: 4px; }
-  .sv-slider--lg { --_th: 20px; --_trk: 8px; }
-  .sv-slider--horizontal { width: 240px; }
-  .sv-slider--horizontal.sv-slider--sm { width: 180px; }
-  .sv-slider--horizontal.sv-slider--lg { width: 300px; }
-  .sv-slider--vertical { height: 200px; width: 40px; }
-  .sv-slider.is-disabled { opacity: 0.5; pointer-events: none; }
-  .sv-slider.is-readonly .sv-slider__track, .sv-slider.is-readonly .sv-slider__thumb { cursor: default; }
-  .sv-slider__track {
-    position: relative; background: var(--_track); border-radius: 999px; cursor: pointer; touch-action: none;
-  }
-  .sv-slider--horizontal .sv-slider__track { height: var(--_trk); }
-  .sv-slider--vertical .sv-slider__track { width: var(--_trk); 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 { 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: var(--_th); height: var(--_th); 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 { 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; }
-  .sv-slider__bubble {
-    position: absolute; bottom: 130%; left: 50%; transform: translateX(-50%);
-    background: var(--_accent); color: var(--sg-on-accent, #fff); font-size: 11px; font-weight: 600;
-    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 { 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%); }
-  /* Fill the container - see `block` in SvEditorProps. */
-  .sv-slider--horizontal.is-block { width: 100%; max-width: 100%; }
-</style>
+<script lang="ts">
+  /**
+   * SvSlider - a single or range slider (WAI-ARIA slider) with steps, ticks,
+   * keyboard + pointer drag. Parity: Smart `smart-slider`. Single emits number;
+   * range emits [number, number].
+   *
+   * 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 = SvEditorProps & {
+    value?: number | [number, number]
+    onChange?: (value: any) => void
+    min?: number
+    max?: number
+    step?: number
+    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
+    orientation?: 'horizontal' | 'vertical'
+    formatValue?: (v: number) => string
+  }
+
+  let {
+    value = 0,
+    onChange,
+    min = 0,
+    max = 100,
+    step = 1,
+    range = false,
+    ticks,
+    labels = 'none',
+    showValue = false,
+    disabled = false,
+    readonly = false,
+    size = 'md',
+    orientation = 'horizontal',
+    name,
+    ariaLabel,
+    block = false,
+    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({
+    value: () => value,
+    onChange: (v) => { if (readonly) return; onChange?.(v) },
+    min: () => min,
+    max: () => max,
+    step: () => step,
+    range: () => range,
+    orientation: () => orientation,
+    disabled: () => disabled,
+    ariaLabel: () => ariaLabel ?? label,
+    rtl: () => resolvedDir === 'rtl',
+    id: () => uid,
+    invalid: () => invalid,
+    required: () => required,
+    error: () => error,
+    hint: () => hint,
+  })
+  const lo = $derived(slider.lo)
+  const hi = $derived(slider.hi)
+  const pct = (v: number) => slider.percentOf(v)
+
+  const tickValues = $derived.by<number[]>(() => {
+    if (!ticks) return []
+    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
+  function onTrackDown(e: PointerEvent) {
+    if (disabled || readonly) return
+    slider.pointerDown({ x: e.clientX, y: e.clientY }, trackEl!.getBoundingClientRect())
+    trackEl?.setPointerCapture(e.pointerId)
+  }
+  function onMove(e: PointerEvent) {
+    if (!slider.dragging) return
+    slider.setFromPointer({ x: e.clientX, y: e.clientY }, trackEl!.getBoundingClientRect())
+  }
+  function onUp(e: PointerEvent) { if (slider.dragging) { slider.endDrag(); trackEl?.releasePointerCapture(e.pointerId) } }
+
+  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} sv-slider--{size}" class:is-block={block}
+  class:is-disabled={disabled}
+  class:is-readonly={readonly}
+  dir={resolvedDir}
+>
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    bind:this={trackEl}
+    class="sv-slider__track"
+    {...slider.trackProps()}
+    onpointerdown={onTrackDown}
+    onpointermove={onMove}
+    onpointerup={onUp}
+    onpointercancel={onUp}
+  >
+    <div
+      class="sv-slider__fill"
+      style:--a={`${range ? pct(lo) : 0}%`}
+      style:--b={`${range ? pct(hi) : pct(hi)}%`}
+    ></div>
+    {#each tickValues as t (t)}
+      <span class="sv-slider__tick" style:--p={`${pct(t)}%`}></span>
+    {/each}
+
+    {#if range}
+      <div class="sv-slider__thumb" style:--p={`${pct(lo)}%`} {...slider.thumbProps(0)} aria-readonly={readonly ? 'true' : undefined}>
+        {#if showValue}<span class="sv-slider__bubble">{fmt(lo)}</span>{/if}
+      </div>
+      <div class="sv-slider__thumb" style:--p={`${pct(hi)}%`} {...slider.thumbProps(1)} aria-readonly={readonly ? 'true' : undefined}>
+        {#if showValue}<span class="sv-slider__bubble">{fmt(hi)}</span>{/if}
+      </div>
+    {:else}
+      <div class="sv-slider__thumb" style:--p={`${pct(hi)}%`} {...slider.thumbProps(0)} aria-readonly={readonly ? 'true' : undefined}>
+        {#if showValue}<span class="sv-slider__bubble">{fmt(hi)}</span>{/if}
+      </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); --_th: 16px; --_trk: 6px; padding: 10px; }
+  .sv-slider--sm { --_th: 13px; --_trk: 4px; }
+  .sv-slider--lg { --_th: 20px; --_trk: 8px; }
+  .sv-slider--horizontal { width: 240px; }
+  .sv-slider--horizontal.sv-slider--sm { width: 180px; }
+  .sv-slider--horizontal.sv-slider--lg { width: 300px; }
+  .sv-slider--vertical { height: 200px; width: 40px; }
+  .sv-slider.is-disabled { opacity: 0.5; pointer-events: none; }
+  .sv-slider.is-readonly .sv-slider__track, .sv-slider.is-readonly .sv-slider__thumb { cursor: default; }
+  .sv-slider__track {
+    position: relative; background: var(--_track); border-radius: 999px; cursor: pointer; touch-action: none;
+  }
+  .sv-slider--horizontal .sv-slider__track { height: var(--_trk); }
+  .sv-slider--vertical .sv-slider__track { width: var(--_trk); 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 { 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: var(--_th); height: var(--_th); 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 { 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; }
+  .sv-slider__bubble {
+    position: absolute; bottom: 130%; left: 50%; transform: translateX(-50%);
+    background: var(--_accent); color: var(--sg-on-accent, #fff); font-size: 11px; font-weight: 600;
+    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 { 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%); }
+  /* Fill the container - see `block` in SvEditorProps. */
+  .sv-slider--horizontal.is-block { width: 100%; max-width: 100%; }
+</style>

package/src/SvSwitchButton.svelte

@@ -1,108 +1,108 @@
-<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 SvField from './SvField.svelte'
-  import { nextEditorId, type SvEditorProps } from './editor-contract'
-  import { createSwitch } from './createSwitch.svelte'
-
-  type Props = SvEditorProps & {
-    checked?: boolean
-    onChange?: (checked: boolean) => void
-    /** Optional labels rendered inside the track. */
-    onLabel?: string
-    offLabel?: string
-  }
-
-  let {
-    checked = false,
-    onChange,
-    disabled = false,
-    readonly = false,
-    size = 'md',
-    name,
-    ariaLabel,
-    invalid = false,
-    required = false,
-    error,
-    label,
-    hint,
-    dir,
-    id,
-    onLabel,
-    offLabel,
-  }: Props = $props()
-
-  const autoId = nextEditorId('sv-switch')
-  const uid = $derived(id ?? autoId)
-
-  // The styled switch is just a renderer over the headless core.
-  const sw = createSwitch({
-    checked: () => checked,
-    onChange: (v) => { if (readonly) return; onChange?.(v) },
-    disabled: () => disabled,
-    ariaLabel: () => ariaLabel,
-    id: () => uid,
-    invalid: () => invalid,
-    required: () => required,
-    error: () => error,
-    hint: () => hint,
-  })
-</script>
-
-<SvField id={uid} {label} {hint} {error} {required} {dir}>
-  <!-- role="switch" arrives via switchProps(), which the a11y pass cannot see through -->
-  <!-- svelte-ignore a11y_role_supports_aria_props_implicit -->
-  <button
-    class="sv-switch sv-switch--{size}"
-    class:is-on={checked}
-    class:is-readonly={readonly}
-    {...sw.switchProps()}
-    aria-readonly={readonly ? 'true' : undefined}
-  >
-    <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>
-</SvField>
-
-<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.is-readonly { cursor: default; }
-  .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; inset-inline-start: 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: inset-inline-start 0.16s;
-  }
-  .sv-switch.is-on .sv-switch__thumb { inset-inline-start: 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 { inset-inline-start: 6px; opacity: 0; }
-  .sv-switch__txt--off { inset-inline-end: 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>
+<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 SvField from './SvField.svelte'
+  import { nextEditorId, type SvEditorProps } from './editor-contract'
+  import { createSwitch } from './createSwitch.svelte'
+
+  type Props = SvEditorProps & {
+    checked?: boolean
+    onChange?: (checked: boolean) => void
+    /** Optional labels rendered inside the track. */
+    onLabel?: string
+    offLabel?: string
+  }
+
+  let {
+    checked = false,
+    onChange,
+    disabled = false,
+    readonly = false,
+    size = 'md',
+    name,
+    ariaLabel,
+    invalid = false,
+    required = false,
+    error,
+    label,
+    hint,
+    dir,
+    id,
+    onLabel,
+    offLabel,
+  }: Props = $props()
+
+  const autoId = nextEditorId('sv-switch')
+  const uid = $derived(id ?? autoId)
+
+  // The styled switch is just a renderer over the headless core.
+  const sw = createSwitch({
+    checked: () => checked,
+    onChange: (v) => { if (readonly) return; onChange?.(v) },
+    disabled: () => disabled,
+    ariaLabel: () => ariaLabel,
+    id: () => uid,
+    invalid: () => invalid,
+    required: () => required,
+    error: () => error,
+    hint: () => hint,
+  })
+</script>
+
+<SvField id={uid} {label} {hint} {error} {required} {dir}>
+  <!-- role="switch" arrives via switchProps(), which the a11y pass cannot see through -->
+  <!-- svelte-ignore a11y_role_supports_aria_props_implicit -->
+  <button
+    class="sv-switch sv-switch--{size}"
+    class:is-on={checked}
+    class:is-readonly={readonly}
+    {...sw.switchProps()}
+    aria-readonly={readonly ? 'true' : undefined}
+  >
+    <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>
+</SvField>
+
+<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.is-readonly { cursor: default; }
+  .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; inset-inline-start: 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: inset-inline-start 0.16s;
+  }
+  .sv-switch.is-on .sv-switch__thumb { inset-inline-start: 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 { inset-inline-start: 6px; opacity: 0; }
+  .sv-switch__txt--off { inset-inline-end: 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>