@svgrid/grid 1.2.22 → 1.2.24

package/src/SvPasswordInput.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+  /**
+   * SvPasswordInput - a password field with a reveal toggle and an optional
+   * strength meter. Parity: Smart `smart-password-input`. Emits the string value.
+   *
+   * The styled renderer over the headless `createPasswordInput` core: the reveal
+   * toggle + strength heuristic come from the core, spread here via prop-getters.
+   */
+  import { createPasswordInput } from './createPasswordInput.svelte'
+
+  type Props = {
+    value?: string
+    onChange?: (value: string) => void
+    placeholder?: string
+    disabled?: boolean
+    readonly?: boolean
+    /** Show the show/hide eye toggle. */
+    revealable?: boolean
+    /** Show a 4-level strength meter. */
+    showStrength?: boolean
+    name?: string
+    size?: 'sm' | 'md' | 'lg'
+    ariaLabel?: string
+    autocomplete?: string
+  }
+
+  let {
+    value = '',
+    onChange,
+    placeholder,
+    disabled = false,
+    readonly = false,
+    revealable = true,
+    showStrength = false,
+    name,
+    size = 'md',
+    ariaLabel,
+    autocomplete = 'current-password',
+  }: Props = $props()
+
+  const pw = createPasswordInput({
+    value: () => value,
+    onChange: (v) => onChange?.(v),
+    placeholder: () => placeholder,
+    disabled: () => disabled,
+    readonly: () => readonly,
+    ariaLabel: () => ariaLabel,
+    autocomplete: () => autocomplete,
+  })
+</script>
+
+<div class="sv-pw sv-pw--{size}" class:is-disabled={disabled}>
+  <div class="sv-pw__field">
+    <input class="sv-pw__input" {...pw.inputProps()} />
+    {#if revealable}
+      <button class="sv-pw__eye" {...pw.toggleProps()}>
+        {#if pw.revealed}
+          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" /><path d="M1 1l22 22" /></svg>
+        {:else}
+          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" /><circle cx="12" cy="12" r="3" /></svg>
+        {/if}
+      </button>
+    {/if}
+  </div>
+  {#if showStrength}
+    <div class="sv-pw__meter" aria-hidden="true">
+      {#each Array(4) as _, i (i)}
+        <span class="sv-pw__bar is-lvl{pw.strength}" class:on={i < pw.strength}></span>
+      {/each}
+    </div>
+    <span class="sv-pw__strength is-lvl{pw.strength}">{pw.strengthLabel}</span>
+  {/if}
+  {#if name}<input type="hidden" {name} value={value} />{/if}
+</div>
+
+<style>
+  .sv-pw { --_accent: var(--sg-accent, #2563eb); display: inline-flex; flex-direction: column; gap: 5px; width: 220px; }
+  .sv-pw.is-disabled { opacity: 0.6; }
+  .sv-pw__field {
+    display: flex; align-items: center;
+    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-pw__field:focus-within { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); }
+  .sv-pw__input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: inherit; font: inherit; padding: 0 10px; }
+  .sv-pw--sm .sv-pw__field { height: 28px; font-size: 12px; }
+  .sv-pw--md .sv-pw__field { height: 34px; font-size: 13px; }
+  .sv-pw--lg .sv-pw__field { height: 40px; font-size: 15px; }
+  .sv-pw__eye { display: grid; place-items: center; width: 32px; align-self: stretch; background: none; border: 0; color: var(--sg-muted, #64748b); cursor: pointer; }
+  .sv-pw__eye:hover { color: var(--_accent); }
+  .sv-pw__meter { display: flex; gap: 4px; }
+  .sv-pw__bar { flex: 1; height: 4px; border-radius: 2px; background: var(--sg-border, #e2e8f0); transition: background 0.15s; }
+  .sv-pw__bar.on.is-lvl1 { background: #dc2626; }
+  .sv-pw__bar.on.is-lvl2 { background: #f59e0b; }
+  .sv-pw__bar.on.is-lvl3 { background: #eab308; }
+  .sv-pw__bar.on.is-lvl4 { background: #16a34a; }
+  .sv-pw__strength { font-size: 11px; font-weight: 600; color: var(--sg-muted, #64748b); }
+  .sv-pw__strength.is-lvl1 { color: #dc2626; }
+  .sv-pw__strength.is-lvl4 { color: #16a34a; }
+</style>

package/src/SvPhoneInput.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+  /**
+   * SvPhoneInput - a country dial-code selector + national number field. Parity:
+   * Smart `smart-phone-input` (simplified). Emits an E.164-ish string
+   * (`+<dial><digits>`). The country list is `countries.ts` (extend for full set).
+   *
+   * The styled renderer over the headless `createPhoneInput` core; country/number
+   * state + parsing live in the core, spread here via prop-getters.
+   */
+  import { COUNTRIES, flagEmoji } from './countries'
+  import { createPhoneInput } from './createPhoneInput.svelte'
+
+  type Props = {
+    value?: string
+    onChange?: (value: string, parts: { country: string; dial: string; national: string }) => void
+    /** Default country ISO code. */
+    country?: string
+    disabled?: boolean
+    readonly?: boolean
+    placeholder?: string
+    name?: string
+    size?: 'sm' | 'md' | 'lg'
+    ariaLabel?: string
+  }
+
+  let {
+    value = '',
+    onChange,
+    country = 'US',
+    disabled = false,
+    readonly = false,
+    placeholder = 'Phone number',
+    name,
+    size = 'md',
+    ariaLabel,
+  }: Props = $props()
+
+  const ph = createPhoneInput({
+    value: () => value,
+    onChange: (v, parts) => onChange?.(v, parts),
+    country: () => country,
+    disabled: () => disabled,
+    readonly: () => readonly,
+    placeholder: () => placeholder,
+    ariaLabel: () => ariaLabel,
+  })
+</script>
+
+<div class="sv-phone sv-phone--{size}" class:is-disabled={disabled}>
+  <div class="sv-phone__country">
+    <span class="sv-phone__flag" aria-hidden="true">{ph.flag}</span>
+    <span class="sv-phone__dial">{ph.dial}</span>
+    <select class="sv-phone__select" {...ph.selectProps()}>
+      {#each COUNTRIES as c (c.code)}
+        <option value={c.code}>{flagEmoji(c.code)} {c.name} ({c.dial})</option>
+      {/each}
+    </select>
+    <svg class="sv-phone__chev" viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
+  </div>
+  <input class="sv-phone__number" {...ph.inputProps()} />
+  {#if name}<input type="hidden" {name} value={ph.value} />{/if}
+</div>
+
+<style>
+  .sv-phone {
+    --_accent: var(--sg-accent, #2563eb);
+    display: inline-flex; align-items: stretch; width: 250px;
+    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);
+    overflow: hidden;
+  }
+  .sv-phone:focus-within { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); }
+  .sv-phone.is-disabled { opacity: 0.6; }
+  .sv-phone__country {
+    position: relative; display: inline-flex; align-items: center; gap: 4px;
+    padding: 0 6px 0 10px; border-right: 1px solid var(--sg-border, #e2e8f0);
+    background: var(--sg-header-bg, #f8fafc); cursor: pointer;
+  }
+  .sv-phone__flag { font-size: 15px; }
+  .sv-phone__dial { font-size: 13px; font-weight: 600; }
+  .sv-phone__chev { color: var(--sg-muted, #64748b); }
+  .sv-phone__select { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 13px; }
+  .sv-phone__number { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: inherit; font: inherit; padding: 0 10px; }
+  .sv-phone--sm { height: 28px; font-size: 12px; }
+  .sv-phone--md { height: 34px; font-size: 13px; }
+  .sv-phone--lg { height: 40px; font-size: 15px; }
+</style>

package/src/SvRadioGroup.svelte

@@ -0,0 +1,85 @@
+<script lang="ts" module>
+  export type { RadioOption } from './createRadioGroup.svelte'
+</script>
+
+<script lang="ts">
+  /**
+   * SvRadioGroup - an accessible radio group (WAI-ARIA radiogroup pattern) with
+   * roving tabindex + arrow-key navigation. Parity: Smart `smart-radio-button`
+   * (as a managed group). Controlled via `value` + `onChange`.
+   */
+  import { createRadioGroup, type RadioOption } from './createRadioGroup.svelte'
+
+  type Props = {
+    options: ReadonlyArray<RadioOption>
+    value?: string | number | null
+    onChange?: (value: string | number) => void
+    name?: string
+    disabled?: boolean
+    orientation?: 'vertical' | 'horizontal'
+    size?: 'sm' | 'md' | 'lg'
+    ariaLabel?: string
+  }
+
+  let {
+    options,
+    value = null,
+    onChange,
+    name,
+    disabled = false,
+    orientation = 'vertical',
+    size = 'md',
+    ariaLabel,
+  }: Props = $props()
+
+  // The styled radio group is just a renderer over the headless core.
+  const rg = createRadioGroup({
+    options: () => options,
+    value: () => value,
+    onChange: (v) => onChange?.(v),
+    disabled: () => disabled,
+    ariaLabel: () => ariaLabel,
+  })
+</script>
+
+<div
+  class="sv-radiogroup sv-radiogroup--{orientation} sv-radiogroup--{size}"
+  {...rg.groupProps()}
+>
+  {#each options as opt (opt.value)}
+    <button
+      class="sv-radio"
+      class:is-checked={opt.value === value}
+      {...rg.radioProps(opt)}
+    >
+      <span class="sv-radio__dot"></span>
+      <span class="sv-radio__label">{opt.label}</span>
+    </button>
+  {/each}
+  {#if name}<input type="hidden" {name} value={value ?? ''} />{/if}
+</div>
+
+<style>
+  .sv-radiogroup { --_accent: var(--sg-accent, #2563eb); display: flex; gap: 10px; }
+  .sv-radiogroup--vertical { flex-direction: column; }
+  .sv-radiogroup--horizontal { flex-direction: row; flex-wrap: wrap; }
+  .sv-radio {
+    display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 2px;
+    font: inherit; color: var(--sg-fg, #0f172a); cursor: pointer; user-select: none;
+  }
+  .sv-radiogroup--sm .sv-radio { font-size: 12px; }
+  .sv-radiogroup--md .sv-radio { font-size: 13px; }
+  .sv-radiogroup--lg .sv-radio { font-size: 15px; }
+  .sv-radio[disabled] { opacity: 0.5; cursor: not-allowed; }
+  .sv-radio__dot {
+    width: 17px; height: 17px; flex: none; border-radius: 50%;
+    border: 1.5px solid var(--sg-border, #cbd5e1); background: var(--sg-input-bg, #fff);
+    display: grid; place-items: center; transition: border-color 0.12s;
+  }
+  .sv-radio.is-checked .sv-radio__dot { border-color: var(--_accent); }
+  .sv-radio.is-checked .sv-radio__dot::after {
+    content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--_accent);
+  }
+  .sv-radio:focus-visible { outline: none; }
+  .sv-radio:focus-visible .sv-radio__dot { outline: 2px solid var(--sg-focus-ring, var(--_accent)); outline-offset: 2px; }
+</style>

package/src/SvRating.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+  /**
+   * SvRating - a star rating control (WAI-ARIA slider). Parity: Smart
+   * `smart-rating`. Hover preview, keyboard, optional half steps, readOnly.
+   * Uses the grid's `--sg-rating-*` tokens so it matches the in-grid editor.
+   */
+  import { createRating } from './createRating.svelte'
+
+  type Props = {
+    value?: number
+    onChange?: (value: number) => void
+    max?: number
+    /** Allow half-star precision. */
+    allowHalf?: boolean
+    /** Read-only: shown but not editable (the kit-standard name). */
+    readonly?: boolean
+    /** @deprecated use `readonly` - kept for back-compat. */
+    readOnly?: boolean
+    disabled?: boolean
+    size?: 'sm' | 'md' | 'lg'
+    name?: string
+    ariaLabel?: string
+  }
+
+  let {
+    value = 0,
+    onChange,
+    max = 5,
+    allowHalf = false,
+    readonly = false,
+    readOnly = false,
+    disabled = false,
+    size = 'md',
+    name,
+    ariaLabel,
+  }: Props = $props()
+
+  const ro = $derived(readonly || readOnly)
+
+  // The styled rating is just a renderer over the headless core.
+  const r = createRating({
+    value: () => value,
+    onChange: (v) => onChange?.(v),
+    max: () => max,
+    allowHalf: () => allowHalf,
+    readonly: () => ro,
+    disabled: () => disabled,
+    ariaLabel: () => ariaLabel,
+  })
+</script>
+
+<div
+  class="sv-rating sv-rating--{size}"
+  class:is-readonly={ro}
+  class:is-disabled={disabled}
+  {...r.rootProps()}
+>
+  {#each Array(max) as _, i (i)}
+    <button
+      class="sv-rating__star is-{r.fillOf(i)}"
+      {...r.starProps(i)}
+    >
+      <svg viewBox="0 0 24 24" aria-hidden="true">
+        <defs>
+          <linearGradient id="half-{i}"><stop offset="50%" stop-color="var(--_on)" /><stop offset="50%" stop-color="var(--_off)" /></linearGradient>
+        </defs>
+        <path d="M12 2.5l2.9 6.1 6.6.9-4.8 4.6 1.2 6.6L12 18.6 6.1 21.7l1.2-6.6L2.5 9.5l6.6-.9z"
+          fill={r.fillOf(i) === 'full' ? 'var(--_on)' : r.fillOf(i) === 'half' ? `url(#half-${i})` : 'var(--_off)'} />
+      </svg>
+    </button>
+  {/each}
+  {#if name}<input type="hidden" {name} value={value} />{/if}
+</div>
+
+<style>
+  .sv-rating {
+    --_on: var(--sg-rating-on, #f59e0b);
+    --_off: var(--sg-rating-empty, #d1d5db);
+    --_sz: 22px;
+    display: inline-flex; gap: 2px; align-items: center;
+  }
+  .sv-rating--sm { --_sz: 16px; }
+  .sv-rating--lg { --_sz: 30px; }
+  .sv-rating.is-disabled { opacity: 0.5; }
+  .sv-rating__star {
+    width: var(--_sz); height: var(--_sz); padding: 0; border: 0; background: none; cursor: pointer; line-height: 0;
+  }
+  .sv-rating.is-readonly .sv-rating__star, .sv-rating.is-disabled .sv-rating__star { cursor: default; }
+  .sv-rating__star svg { width: 100%; height: 100%; }
+  .sv-rating:focus-visible { outline: 2px solid var(--sg-focus-ring, var(--sg-accent, #2563eb)); outline-offset: 2px; border-radius: 4px; }
+</style>

package/src/SvRepeatButton.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+  /**
+   * SvRepeatButton - fires `onclick` repeatedly while held down (after an
+   * initial delay, then at a steady interval). Parity: Smart `smart-repeat-button`.
+   * Used for spinners / steppers.
+   */
+  import type { Snippet } from 'svelte'
+
+  type Props = {
+    onclick?: () => void
+    /** Delay before repeats begin (ms). */
+    delay?: number
+    /** Interval between repeats (ms). */
+    interval?: number
+    disabled?: boolean
+    size?: 'sm' | 'md' | 'lg'
+    variant?: 'primary' | 'secondary' | 'outline' | 'ghost'
+    ariaLabel?: string
+    children?: Snippet
+  }
+
+  let {
+    onclick,
+    delay = 300,
+    interval = 60,
+    disabled = false,
+    size = 'md',
+    variant = 'secondary',
+    ariaLabel,
+    children,
+  }: Props = $props()
+
+  let delayTimer: ReturnType<typeof setTimeout> | null = null
+  let repeatTimer: ReturnType<typeof setInterval> | null = null
+
+  function stop() {
+    if (delayTimer) { clearTimeout(delayTimer); delayTimer = null }
+    if (repeatTimer) { clearInterval(repeatTimer); repeatTimer = null }
+  }
+
+  function start(e: PointerEvent) {
+    if (disabled || e.button !== 0) return
+    onclick?.() // fire once immediately
+    delayTimer = setTimeout(() => {
+      repeatTimer = setInterval(() => onclick?.(), Math.max(16, interval))
+    }, Math.max(0, delay))
+  }
+
+  function onKeydown(e: KeyboardEvent) {
+    if (disabled) return
+    if ((e.key === 'Enter' || e.key === ' ') && !e.repeat) { e.preventDefault(); onclick?.() }
+  }
+</script>
+
+<svelte:window onpointerup={stop} onpointercancel={stop} />
+
+<button
+  type="button"
+  class="sv-btn sv-btn--{variant} sv-btn--{size} sv-repeat"
+  {disabled}
+  aria-label={ariaLabel}
+  onpointerdown={start}
+  onpointerleave={stop}
+  onkeydown={onKeydown}
+>
+  {#if children}{@render children()}{/if}
+</button>
+
+<style>
+  /* Reuses the SvButton visual language (kept local so it works standalone). */
+  .sv-btn {
+    --_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; border: 1px solid transparent;
+    border-radius: var(--_radius); cursor: pointer; user-select: none; touch-action: none;
+  }
+  .sv-btn--sm { padding: 5px 9px; font-size: 12px; }
+  .sv-btn--md { padding: 8px 12px; font-size: 13px; }
+  .sv-btn--lg { padding: 11px 16px; font-size: 15px; }
+  .sv-btn[disabled] { opacity: 0.55; cursor: not-allowed; }
+  .sv-btn--primary { background: var(--_accent); color: var(--sg-on-accent, #fff); }
+  .sv-btn--secondary { background: var(--sg-header-bg, #f1f5f9); color: var(--sg-fg, #0f172a); border-color: var(--_border); }
+  .sv-btn--outline { background: transparent; color: var(--_accent); border-color: var(--_accent); }
+  .sv-btn--ghost { background: transparent; color: var(--sg-fg, #0f172a); }
+  .sv-btn:focus-visible { outline: 2px solid var(--sg-focus-ring, var(--_accent)); outline-offset: 2px; }
+  .sv-btn:active { transform: translateY(0.5px); }
+</style>

package/src/SvSlider.svelte

@@ -0,0 +1,155 @@
+<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 { createSlider } from './createSlider.svelte'
+
+  type Props = {
+    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[]
+    /** Show the value bubble above the thumb. */
+    showValue?: boolean
+    disabled?: boolean
+    orientation?: 'horizontal' | 'vertical'
+    name?: string
+    ariaLabel?: string
+    formatValue?: (v: number) => string
+  }
+
+  let {
+    value = 0,
+    onChange,
+    min = 0,
+    max = 100,
+    step = 1,
+    range = false,
+    ticks,
+    showValue = false,
+    disabled = false,
+    orientation = 'horizontal',
+    name,
+    ariaLabel,
+    formatValue,
+  }: Props = $props()
+
+  // 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) => onChange?.(v),
+    min: () => min,
+    max: () => max,
+    step: () => step,
+    range: () => range,
+    orientation: () => orientation,
+    disabled: () => disabled,
+    ariaLabel: () => ariaLabel,
+  })
+  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)
+  })
+
+  // The rect is measured here (a DOM concern) and passed INTO the core.
+  let trackEl: HTMLDivElement | null = null
+  function onTrackDown(e: PointerEvent) {
+    if (disabled) 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>
+
+<div
+  class="sv-slider sv-slider--{orientation}"
+  class:is-disabled={disabled}
+  aria-label={ariaLabel}
+>
+  <!-- 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)}>
+        {#if showValue}<span class="sv-slider__bubble">{fmt(lo)}</span>{/if}
+      </div>
+      <div class="sv-slider__thumb" style:--p={`${pct(hi)}%`} {...slider.thumbProps(1)}>
+        {#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)}>
+        {#if showValue}<span class="sv-slider__bubble">{fmt(hi)}</span>{/if}
+      </div>
+    {/if}
+  </div>
+  {#if name}<input type="hidden" {name} value={range ? `${lo},${hi}` : hi} />{/if}
+</div>
+
+<style>
+  .sv-slider { --_accent: var(--sg-accent, #2563eb); --_track: var(--sg-border, #e2e8f0); padding: 10px; }
+  .sv-slider--horizontal { width: 240px; }
+  .sv-slider--vertical { height: 200px; width: 40px; }
+  .sv-slider.is-disabled { opacity: 0.5; pointer-events: none; }
+  .sv-slider__track {
+    position: relative; background: var(--_track); border-radius: 999px; cursor: pointer; touch-action: none;
+  }
+  .sv-slider--horizontal .sv-slider__track { height: 6px; }
+  .sv-slider--vertical .sv-slider__track { width: 6px; height: 100%; margin: 0 auto; }
+  .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--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--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 { left: var(--p); top: 50%; transform: translate(-50%, -50%); }
+  .sv-slider--vertical .sv-slider__tick { bottom: var(--p); left: 50%; transform: translate(-50%, 50%); }
+</style>