@svgrid/grid 1.2.23 → 1.2.25

package/src/SvPasswordInput.svelte

@@ -2,7 +2,12 @@
   /**
    * 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
@@ -33,38 +38,23 @@
     autocomplete = 'current-password',
   }: Props = $props()
 
-  let revealed = $state(false)
-
-  // Simple strength heuristic: length + character-class variety (0-4).
-  const strength = $derived.by(() => {
-    const v = value
-    if (!v) return 0
-    let score = 0
-    if (v.length >= 8) score++
-    if (/[a-z]/.test(v) && /[A-Z]/.test(v)) score++
-    if (/\d/.test(v)) score++
-    if (/[^a-zA-Z0-9]/.test(v)) score++
-    return score
+  const pw = createPasswordInput({
+    value: () => value,
+    onChange: (v) => onChange?.(v),
+    placeholder: () => placeholder,
+    disabled: () => disabled,
+    readonly: () => readonly,
+    ariaLabel: () => ariaLabel,
+    autocomplete: () => autocomplete,
   })
-  const strengthLabel = ['', 'Weak', 'Fair', 'Good', 'Strong']
 </script>
 
 <div class="sv-pw sv-pw--{size}" class:is-disabled={disabled}>
   <div class="sv-pw__field">
-    <input
-      class="sv-pw__input"
-      type={revealed ? 'text' : 'password'}
-      value={value}
-      {placeholder}
-      {disabled}
-      {readonly}
-      autocomplete={autocomplete as AutoFill}
-      aria-label={ariaLabel}
-      oninput={(e) => onChange?.((e.currentTarget as HTMLInputElement).value)}
-    />
+    <input class="sv-pw__input" {...pw.inputProps()} />
     {#if revealable}
-      <button type="button" class="sv-pw__eye" aria-label={revealed ? 'Hide password' : 'Show password'} aria-pressed={revealed} onclick={() => (revealed = !revealed)} disabled={disabled} tabindex="-1">
-        {#if revealed}
+      <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>
@@ -75,10 +65,10 @@
   {#if showStrength}
     <div class="sv-pw__meter" aria-hidden="true">
       {#each Array(4) as _, i (i)}
-        <span class="sv-pw__bar is-lvl{strength}" class:on={i < strength}></span>
+        <span class="sv-pw__bar is-lvl{pw.strength}" class:on={i < pw.strength}></span>
       {/each}
     </div>
-    <span class="sv-pw__strength is-lvl{strength}">{strengthLabel[strength]}</span>
+    <span class="sv-pw__strength is-lvl{pw.strength}">{pw.strengthLabel}</span>
   {/if}
   {#if name}<input type="hidden" {name} value={value} />{/if}
 </div>

package/src/SvRadioGroup.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  export type RadioOption = { value: string | number; label: string; disabled?: boolean }
+  export type { RadioOption } from './createRadioGroup.svelte'
 </script>
 
 <script lang="ts">
@@ -8,6 +8,8 @@
    * 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
@@ -30,50 +32,25 @@
     ariaLabel,
   }: Props = $props()
 
-  const enabledIdx = $derived(options.map((o, i) => (o.disabled ? -1 : i)).filter((i) => i >= 0))
-  const selectedIdx = $derived(options.findIndex((o) => o.value === value))
-  // The roving-tabindex target: the selected option, else the first enabled.
-  const focusIdx = $derived(selectedIdx >= 0 ? selectedIdx : enabledIdx[0] ?? -1)
-
-  function pick(i: number) {
-    const o = options[i]
-    if (!o || o.disabled || disabled) return
-    onChange?.(o.value)
-  }
-
-  function onKeydown(e: KeyboardEvent, i: number) {
-    if (disabled) return
-    const pos = enabledIdx.indexOf(i)
-    if (pos < 0) return
-    let nextPos = pos
-    if (e.key === 'ArrowDown' || e.key === 'ArrowRight') nextPos = (pos + 1) % enabledIdx.length
-    else if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') nextPos = (pos - 1 + enabledIdx.length) % enabledIdx.length
-    else if (e.key === ' ') { e.preventDefault(); pick(i); return }
-    else return
-    e.preventDefault()
-    const target = enabledIdx[nextPos]!
-    pick(target)
-    ;(e.currentTarget as HTMLElement).parentElement?.querySelectorAll<HTMLElement>('.sv-radio')[target]?.focus()
-  }
+  // 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}"
-  role="radiogroup"
-  aria-label={ariaLabel}
-  aria-disabled={disabled}
+  {...rg.groupProps()}
 >
-  {#each options as opt, i (opt.value)}
+  {#each options as opt (opt.value)}
     <button
-      type="button"
-      role="radio"
       class="sv-radio"
       class:is-checked={opt.value === value}
-      aria-checked={opt.value === value}
-      disabled={disabled || opt.disabled}
-      tabindex={i === focusIdx ? 0 : -1}
-      onclick={() => pick(i)}
-      onkeydown={(e) => onKeydown(e, i)}
+      {...rg.radioProps(opt)}
     >
       <span class="sv-radio__dot"></span>
       <span class="sv-radio__label">{opt.label}</span>

package/src/SvRating.svelte

@@ -4,12 +4,17 @@
    * `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'
@@ -22,6 +27,7 @@
     onChange,
     max = 5,
     allowHalf = false,
+    readonly = false,
     readOnly = false,
     disabled = false,
     size = 'md',
@@ -29,63 +35,37 @@
     ariaLabel,
   }: Props = $props()
 
-  let hover = $state<number | null>(null)
-  const isInteractive = $derived(!readOnly && !disabled)
-  const shown = $derived(hover ?? value)
-
-  function valueAt(e: MouseEvent, index: number): number {
-    if (!allowHalf) return index + 1
-    const el = e.currentTarget as HTMLElement
-    const rect = el.getBoundingClientRect()
-    return e.clientX - rect.left < rect.width / 2 ? index + 0.5 : index + 1
-  }
-
-  function fillOf(index: number): 'full' | 'half' | 'empty' {
-    if (shown >= index + 1) return 'full'
-    if (shown >= index + 0.5) return 'half'
-    return 'empty'
-  }
+  const ro = $derived(readonly || readOnly)
 
-  function onKeydown(e: KeyboardEvent) {
-    if (!isInteractive) return
-    const step = allowHalf ? 0.5 : 1
-    if (e.key === 'ArrowRight' || e.key === 'ArrowUp') { e.preventDefault(); onChange?.(Math.min(max, value + step)) }
-    else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') { e.preventDefault(); onChange?.(Math.max(0, value - step)) }
-    else if (e.key === 'Home') { e.preventDefault(); onChange?.(0) }
-    else if (e.key === 'End') { e.preventDefault(); onChange?.(max) }
-  }
+  // 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={readOnly}
+  class:is-readonly={ro}
   class:is-disabled={disabled}
-  role="slider"
-  tabindex={isInteractive ? 0 : -1}
-  aria-label={ariaLabel ?? 'Rating'}
-  aria-valuenow={value}
-  aria-valuemin="0"
-  aria-valuemax={max}
-  aria-readonly={readOnly}
-  onkeydown={onKeydown}
-  onpointerleave={() => (hover = null)}
+  {...r.rootProps()}
 >
   {#each Array(max) as _, i (i)}
     <button
-      type="button"
-      class="sv-rating__star is-{fillOf(i)}"
-      tabindex="-1"
-      disabled={!isInteractive}
-      aria-label={`${i + 1} star${i ? 's' : ''}`}
-      onpointermove={(e) => { if (isInteractive) hover = valueAt(e, i) }}
-      onclick={(e) => { if (isInteractive) onChange?.(valueAt(e, i)) }}
+      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={fillOf(i) === 'full' ? 'var(--_on)' : fillOf(i) === 'half' ? `url(#half-${i})` : 'var(--_off)'} />
+          fill={r.fillOf(i) === 'full' ? 'var(--_on)' : r.fillOf(i) === 'half' ? `url(#half-${i})` : 'var(--_off)'} />
       </svg>
     </button>
   {/each}

package/src/SvSlider.svelte

@@ -3,7 +3,12 @@
    * 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
@@ -38,15 +43,22 @@
     formatValue,
   }: Props = $props()
 
-  const isVert = $derived(orientation === 'vertical')
-  const lo = $derived(range ? (value as [number, number])[0] : min)
-  const hi = $derived(range ? (value as [number, number])[1] : (value as number))
-
-  function clampStep(v: number): number {
-    const stepped = Math.round((v - min) / step) * step + min
-    return Math.min(max, Math.max(min, Number(stepped.toFixed(10))))
-  }
-  const pct = (v: number) => ((v - min) / (max - min)) * 100
+  // 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 []
@@ -54,58 +66,18 @@
     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
-  let dragging = $state<null | 'lo' | 'hi' | 'single'>(null)
-
-  function valueFromPointer(e: PointerEvent): number {
-    const rect = trackEl!.getBoundingClientRect()
-    const frac = isVert
-      ? 1 - (e.clientY - rect.top) / rect.height
-      : (e.clientX - rect.left) / rect.width
-    return clampStep(min + Math.min(1, Math.max(0, frac)) * (max - min))
-  }
-
-  function emitSingle(v: number) { onChange?.(v) }
-  function emitRange(nlo: number, nhi: number) { onChange?.([Math.min(nlo, nhi), Math.max(nlo, nhi)]) }
-
   function onTrackDown(e: PointerEvent) {
     if (disabled) return
-    const v = valueFromPointer(e)
-    if (range) {
-      const which = Math.abs(v - lo) <= Math.abs(v - hi) ? 'lo' : 'hi'
-      dragging = which
-      which === 'lo' ? emitRange(v, hi) : emitRange(lo, v)
-    } else {
-      dragging = 'single'
-      emitSingle(v)
-    }
+    slider.pointerDown({ x: e.clientX, y: e.clientY }, trackEl!.getBoundingClientRect())
     trackEl?.setPointerCapture(e.pointerId)
   }
   function onMove(e: PointerEvent) {
-    if (!dragging) return
-    const v = valueFromPointer(e)
-    if (dragging === 'single') emitSingle(v)
-    else if (dragging === 'lo') emitRange(v, hi)
-    else emitRange(lo, v)
-  }
-  function onUp(e: PointerEvent) { if (dragging) { dragging = null; trackEl?.releasePointerCapture(e.pointerId) } }
-
-  function onThumbKey(e: KeyboardEvent, which: 'lo' | 'hi' | 'single') {
-    if (disabled) return
-    const cur = which === 'lo' ? lo : hi
-    let next = cur
-    if (e.key === 'ArrowRight' || e.key === 'ArrowUp') next = clampStep(cur + step)
-    else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') next = clampStep(cur - step)
-    else if (e.key === 'Home') next = min
-    else if (e.key === 'End') next = max
-    else if (e.key === 'PageUp') next = clampStep(cur + step * 10)
-    else if (e.key === 'PageDown') next = clampStep(cur - step * 10)
-    else return
-    e.preventDefault()
-    if (which === 'single') emitSingle(next)
-    else if (which === 'lo') emitRange(next, hi)
-    else emitRange(lo, next)
+    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>
@@ -119,6 +91,7 @@
   <div
     bind:this={trackEl}
     class="sv-slider__track"
+    {...slider.trackProps()}
     onpointerdown={onTrackDown}
     onpointermove={onMove}
     onpointerup={onUp}
@@ -134,14 +107,14 @@
     {/each}
 
     {#if range}
-      <div class="sv-slider__thumb" style:--p={`${pct(lo)}%`} role="slider" tabindex={disabled ? -1 : 0} aria-valuemin={min} aria-valuemax={hi} aria-valuenow={lo} aria-label="Minimum" onkeydown={(e) => onThumbKey(e, 'lo')}>
+      <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)}%`} role="slider" tabindex={disabled ? -1 : 0} aria-valuemin={lo} aria-valuemax={max} aria-valuenow={hi} aria-label="Maximum" onkeydown={(e) => onThumbKey(e, 'hi')}>
+      <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)}%`} role="slider" tabindex={disabled ? -1 : 0} aria-valuemin={min} aria-valuemax={max} aria-valuenow={hi} aria-label={ariaLabel ?? 'Value'} onkeydown={(e) => onThumbKey(e, 'single')}>
+      <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}

package/src/SvSwitchButton.svelte

@@ -4,6 +4,8 @@
    * `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
@@ -27,28 +29,19 @@
     offLabel,
   }: Props = $props()
 
-  function toggle() {
-    if (disabled) return
-    onChange?.(!checked)
-  }
-  function onKeydown(e: KeyboardEvent) {
-    if (disabled) return
-    if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); toggle() }
-    else if (e.key === 'ArrowRight') { if (!checked) onChange?.(true) }
-    else if (e.key === 'ArrowLeft') { if (checked) onChange?.(false) }
-  }
+  // 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
-  type="button"
-  role="switch"
   class="sv-switch sv-switch--{size}"
   class:is-on={checked}
-  aria-checked={checked}
-  aria-label={ariaLabel}
-  {disabled}
-  onclick={toggle}
-  onkeydown={onKeydown}
+  {...sw.switchProps()}
 >
   <span class="sv-switch__track">
     {#if onLabel || offLabel}

package/src/SvTabs.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  export type TabItem = { id: string; label: string; disabled?: boolean }
+  export type { TabItem } from './createTabs.svelte'
 </script>
 
 <script lang="ts">
@@ -7,8 +7,12 @@
    * 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>
@@ -34,58 +38,41 @@
     ariaLabel,
   }: Props = $props()
 
-  const active = $derived(value ?? tabs.find((t) => !t.disabled)?.id ?? tabs[0]?.id ?? '')
-  const enabled = $derived(tabs.filter((t) => !t.disabled))
-  let tablistEl: HTMLDivElement | null = null
+  const tabsCtl = createTabs({
+    tabs: () => tabs,
+    value: () => value,
+    onChange: (id) => { value = id; onChange?.(id) },
+    orientation: () => orientation,
+    activation: () => activation,
+    ariaLabel: () => ariaLabel,
+  })
+  const active = $derived(tabsCtl.activeId)
 
-  function select(id: string) {
-    const t = tabs.find((x) => x.id === id)
-    if (!t || t.disabled) return
-    value = id
-    onChange?.(id)
-  }
-  function focusTab(id: string) {
-    queueMicrotask(() => tablistEl?.querySelector<HTMLElement>(`[data-tab="${id}"]`)?.focus())
-  }
-  function onKeydown(e: KeyboardEvent) {
-    const idx = enabled.findIndex((t) => t.id === active)
-    let next: string | null = null
-    const fwd = orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown'
-    const back = orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp'
-    if (e.key === fwd) next = enabled[(idx + 1) % enabled.length]?.id ?? null
-    else if (e.key === back) next = enabled[(idx - 1 + enabled.length) % enabled.length]?.id ?? null
-    else if (e.key === 'Home') next = enabled[0]?.id ?? null
-    else if (e.key === 'End') next = enabled.at(-1)?.id ?? null
-    else if ((e.key === 'Enter' || e.key === ' ') && activation === 'manual') { e.preventDefault(); select(active); return }
-    else return
-    if (next) {
-      e.preventDefault()
-      focusTab(next)
-      if (activation === 'automatic') select(next)
+  // 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" role="tablist" aria-orientation={orientation} aria-label={ariaLabel}>
+  <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}
-        role="tab"
-        data-tab={tab.id}
-        aria-selected={tab.id === active}
-        aria-controls={`panel-${tab.id}`}
-        tabindex={tab.id === active ? 0 : -1}
-        disabled={tab.disabled}
-        onclick={() => select(tab.id)}
-        onkeydown={onKeydown}
+        {...tabsCtl.tabProps(tab.id)}
       >{tab.label}</button>
     {/each}
   </div>
   {#if panel}
-    <div class="sv-tabs__panel" role="tabpanel" id={`panel-${active}`} tabindex="0">
+    <div class="sv-tabs__panel" {...tabsCtl.panelProps(active)}>
       {@render panel(active)}
     </div>
   {/if}

package/src/SvTagsInput.svelte

@@ -3,7 +3,12 @@
    * 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
@@ -18,45 +23,29 @@
 
   let { value = [], onChange, placeholder = 'Add tag…', disabled = false, unique = true, max = Infinity, name, ariaLabel }: Props = $props()
 
-  let draft = $state('')
-
-  function add(raw: string) {
-    const tag = raw.trim()
-    if (!tag || disabled) return
-    if (value.length >= max) return
-    if (unique && value.includes(tag)) { draft = ''; return }
-    onChange?.([...value, tag])
-    draft = ''
-  }
-  function removeAt(i: number) {
-    if (disabled) return
-    onChange?.(value.filter((_, idx) => idx !== i))
-  }
-  function onKeydown(e: KeyboardEvent) {
-    if (disabled) return
-    if (e.key === 'Enter' || e.key === ',') { e.preventDefault(); add(draft) }
-    else if (e.key === 'Backspace' && draft === '' && value.length) { removeAt(value.length - 1) }
-  }
+  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} role="group" aria-label={ariaLabel}>
+<div class="sv-tags" class:is-disabled={disabled} {...ti.rootProps()}>
   {#each value as tag, i (tag + i)}
-    <span class="sv-tags__chip">
+    <span class="sv-tags__chip" {...ti.tagProps(i)}>
       <span class="sv-tags__label">{tag}</span>
       {#if !disabled}
-        <button type="button" class="sv-tags__x" aria-label={`Remove ${tag}`} onclick={() => removeAt(i)}>&times;</button>
+        <button class="sv-tags__x" {...ti.removeProps(i)}>&times;</button>
       {/if}
     </span>
   {/each}
   <input
     class="sv-tags__input"
-    type="text"
-    bind:value={draft}
     placeholder={value.length ? '' : placeholder}
-    {disabled}
-    aria-label={ariaLabel ?? 'Add tag'}
-    onkeydown={onKeydown}
-    onblur={() => add(draft)}
+    {...ti.inputProps()}
   />
   {#if name}<input type="hidden" {name} value={value.join(',')} />{/if}
 </div>