npm - @svgrid/grid - Versions diffs - 1.2.23 → 1.2.24 - Mend

@svgrid/grid 1.2.23 → 1.2.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (141) hide show

package/dist/SvAutoComplete.svelte +23 -34
package/dist/SvCalendar.svelte +74 -334
package/dist/SvCalendar.svelte.d.ts +5 -23
package/dist/SvCheckBox.svelte +11 -10
package/dist/SvColorInput.svelte +31 -58
package/dist/SvComboBox.svelte +32 -54
package/dist/SvCountryInput.svelte +31 -29
package/dist/SvDateTimePicker.svelte +53 -110
package/dist/SvDateTimePicker.svelte.d.ts +4 -3
package/dist/SvDropDownList.svelte +31 -54
package/dist/SvGauge.svelte +21 -23
package/dist/SvGauge.svelte.d.ts +0 -5
package/dist/SvListBox.svelte +25 -58
package/dist/SvListBox.svelte.d.ts +3 -0
package/dist/SvMaskedInput.svelte +0 -0
package/dist/SvNumberInput.svelte +0 -0
package/dist/SvNumberInput.svelte.d.ts +2 -6
package/dist/SvPasswordInput.svelte +18 -28
package/dist/SvPasswordInput.svelte.d.ts +0 -4
package/dist/SvPhoneInput.svelte +0 -0
package/dist/SvRadioGroup.svelte +14 -37
package/dist/SvRadioGroup.svelte.d.ts +6 -9
package/dist/SvRating.svelte +22 -42
package/dist/SvRating.svelte.d.ts +3 -5
package/dist/SvSlider.svelte +30 -57
package/dist/SvSlider.svelte.d.ts +0 -5
package/dist/SvSwitchButton.svelte +10 -17
package/dist/SvSwitchButton.svelte.d.ts +0 -5
package/dist/SvTabs.svelte +26 -39
package/dist/SvTabs.svelte.d.ts +5 -5
package/dist/SvTagsInput.svelte +17 -28
package/dist/SvTagsInput.svelte.d.ts +0 -5
package/dist/SvTimePicker.svelte +52 -210
package/dist/SvTimePicker.svelte.d.ts +11 -8
package/dist/SvToggleButton.svelte +9 -9
package/dist/SvTree.svelte +30 -109
package/dist/SvTree.svelte.d.ts +9 -11
package/dist/cdn/svgrid.js +7488 -5839
package/dist/cdn/svgrid.svelte-external.js +4691 -3028
package/dist/createAutocomplete.svelte.d.ts +77 -0
package/dist/createAutocomplete.svelte.js +100 -0
package/dist/createCalendar.svelte.d.ts +192 -0
package/dist/createCalendar.svelte.js +402 -0
package/dist/createCheckbox.svelte.d.ts +45 -0
package/dist/createCheckbox.svelte.js +26 -0
package/dist/createColorInput.svelte.d.ts +67 -0
package/dist/createColorInput.svelte.js +100 -0
package/dist/createCombobox.svelte.d.ts +102 -0
package/dist/createCombobox.svelte.js +171 -0
package/dist/createCountryInput.svelte.d.ts +86 -0
package/dist/createCountryInput.svelte.js +126 -0
package/dist/createDateTimePicker.svelte.d.ts +83 -0
package/dist/createDateTimePicker.svelte.js +202 -0
package/dist/createDropdownList.svelte.d.ts +78 -0
package/dist/createDropdownList.svelte.js +117 -0
package/dist/createGauge.svelte.d.ts +56 -0
package/dist/createGauge.svelte.js +49 -0
package/dist/createListbox.svelte.d.ts +79 -0
package/dist/createListbox.svelte.js +117 -0
package/dist/createMaskedInput.svelte.d.ts +30 -0
package/dist/createMaskedInput.svelte.js +62 -0
package/dist/createNumberInput.svelte.d.ts +72 -0
package/dist/createNumberInput.svelte.js +167 -0
package/dist/createPasswordInput.svelte.d.ts +60 -0
package/dist/createPasswordInput.svelte.js +72 -0
package/dist/createPhoneInput.svelte.d.ts +46 -0
package/dist/createPhoneInput.svelte.js +105 -0
package/dist/createRadioGroup.svelte.d.ts +64 -0
package/dist/createRadioGroup.svelte.js +73 -0
package/dist/createRating.svelte.d.ts +70 -0
package/dist/createRating.svelte.js +85 -0
package/dist/createSlider.svelte.d.ts +71 -0
package/dist/createSlider.svelte.js +123 -0
package/dist/createSwitch.svelte.d.ts +43 -0
package/dist/createSwitch.svelte.js +41 -0
package/dist/createTabs.svelte.d.ts +78 -0
package/dist/createTabs.svelte.js +92 -0
package/dist/createTagsInput.svelte.d.ts +65 -0
package/dist/createTagsInput.svelte.js +93 -0
package/dist/createTimePicker.svelte.d.ts +106 -0
package/dist/createTimePicker.svelte.js +248 -0
package/dist/createToggle.svelte.d.ts +43 -0
package/dist/createToggle.svelte.js +39 -0
package/dist/createTree.svelte.d.ts +96 -0
package/dist/createTree.svelte.js +194 -0
package/dist/editor-contract.d.ts +48 -0
package/dist/editor-contract.js +26 -0
package/dist/index.d.ts +24 -0
package/dist/index.js +31 -0
package/package.json +1 -1
package/src/SvAutoComplete.svelte +23 -34
package/src/SvCalendar.svelte +74 -334
package/src/SvCheckBox.svelte +11 -10
package/src/SvColorInput.svelte +31 -58
package/src/SvComboBox.svelte +32 -54
package/src/SvCountryInput.svelte +31 -29
package/src/SvDateTimePicker.svelte +53 -110
package/src/SvDropDownList.svelte +31 -54
package/src/SvGauge.svelte +21 -23
package/src/SvListBox.svelte +25 -58
package/src/SvMaskedInput.svelte +0 -0
package/src/SvNumberInput.svelte +0 -0
package/src/SvPasswordInput.svelte +18 -28
package/src/SvPhoneInput.svelte +0 -0
package/src/SvRadioGroup.svelte +14 -37
package/src/SvRating.svelte +22 -42
package/src/SvSlider.svelte +30 -57
package/src/SvSwitchButton.svelte +10 -17
package/src/SvTabs.svelte +26 -39
package/src/SvTagsInput.svelte +17 -28
package/src/SvTimePicker.svelte +52 -210
package/src/SvToggleButton.svelte +9 -9
package/src/SvTree.svelte +30 -109
package/src/createAutocomplete.svelte.ts +104 -0
package/src/createCalendar.svelte.ts +488 -0
package/src/createCheckbox.svelte.ts +74 -0
package/src/createColorInput.svelte.ts +115 -0
package/src/createCombobox.svelte.ts +158 -0
package/src/createCountryInput.svelte.ts +126 -0
package/src/createDateTimePicker.svelte.ts +216 -0
package/src/createDropdownList.svelte.ts +125 -0
package/src/createGauge.svelte.ts +86 -0
package/src/createListbox.svelte.ts +186 -0
package/src/createMaskedInput.svelte.ts +81 -0
package/src/createNumberInput.svelte.ts +193 -0
package/src/createPasswordInput.svelte.ts +87 -0
package/src/createPhoneInput.svelte.ts +119 -0
package/src/createRadioGroup.svelte.ts +132 -0
package/src/createRating.svelte.ts +145 -0
package/src/createSlider.svelte.ts +160 -0
package/src/createSwitch.svelte.ts +78 -0
package/src/createTabs.svelte.ts +129 -0
package/src/createTagsInput.svelte.ts +98 -0
package/src/createTimePicker.svelte.ts +289 -0
package/src/createToggle.svelte.ts +69 -0
package/src/createTree.svelte.ts +216 -0
package/src/editor-contract.test.ts +32 -0
package/src/editor-contract.ts +60 -0
package/src/index.ts +39 -0
package/src/ui-inputs.test.ts +26 -0
package/src/ui-selection.test.ts +13 -0

package/src/SvDateTimePicker.svelte CHANGED Viewed

@@ -1,20 +1,23 @@
 <script lang="ts" module>
-  export type DateTimeValue = Date | string | number | null
+  export type { DateTimeValue } from './createDateTimePicker.svelte'
 </script>
 <script lang="ts">
   /**
    * SvDateTimePicker - a text input (formatted via the date-format token engine)
    * plus a dropdown that composes SvCalendar + SvTimePicker behind DATE / TIME
-   * tabs. Parity target: Smart `smart-date-time-picker`. Works standalone and as
-   * the SvGrid `datetime` cell editor. The dropdown portals to <body> (via
-   * popover.ts) so it is never clipped by the grid's scroll container.
+   * tabs. Parity target: Smart `smart-date-time-picker`. It is a styled renderer
+   * over the headless `createDateTimePicker` core (value math, parse/format,
+   * clamp, dropdown open/tab state, sub-picker wiring); the component keeps the
+   * render-only concerns - the portalled popover positioning (via popover.ts), DOM
+   * refs, and outside-click / reposition listeners - so the dropdown is never
+   * clipped by the grid's scroll container.
    */
   import SvCalendar from './SvCalendar.svelte'
   import SvTimePicker from './SvTimePicker.svelte'
   import { anchoredRect, portalToBody, type AnchoredRect } from './popover'
-  import { formatDate, parseDate } from './datetime/date-format'
-  import { toDate, clampDate, withTime, startOfDay, type DateLike } from './datetime/date-core'
+  import { createDateTimePicker, type DateTimeValue, type DropDownDisplayMode } from './createDateTimePicker.svelte'
+  import type { DateLike } from './datetime/date-core'
   type Props = {
     value?: DateTimeValue
@@ -39,7 +42,7 @@
     hourFormat?: '12-hour' | '24-hour'
     minuteInterval?: number
     /** Which tabs the dropdown shows. */
-    dropDownDisplayMode?: 'both' | 'calendar' | 'time'
+    dropDownDisplayMode?: DropDownDisplayMode
     /** Up/down spinner buttons that bump the value by `stepMinutes`. */
     spinButtons?: boolean
     stepMinutes?: number
@@ -74,66 +77,27 @@
     animate = false,
   }: Props = $props()
-  const isInteractive = $derived(!disabled && !readonly)
-  const minD = $derived(toDate(min ?? null))
-  const maxD = $derived(toDate(max ?? null))
-  let current = $state<Date | null>(null)
-  let text = $state('')
-  let lastKey = ''
-  $effect(() => {
-    const d = toDate(value as DateLike)
-    const key = d ? String(d.getTime()) : 'null'
-    if (key !== lastKey) {
-      lastKey = key
-      current = d
-      text = d ? formatDate(d, formatString, locale) : ''
-    }
+  // The headless core owns value math, parse/format, clamping, the dropdown
+  // open/tab state and the sub-picker wiring. Reactive inputs are getters;
+  // callbacks are closures.
+  const dtp = createDateTimePicker({
+    value: () => value,
+    onChange: (d) => onChange?.(d),
+    onCommit: (d) => onCommit?.(d),
+    onCancel: () => onCancel?.(),
+    formatString: () => formatString,
+    min: () => min,
+    max: () => max,
+    nullable: () => nullable,
+    locale: () => locale,
+    dropDownDisplayMode: () => dropDownDisplayMode,
+    spinButtons: () => spinButtons,
+    stepMinutes: () => stepMinutes,
+    disabled: () => disabled,
+    readonly: () => readonly,
   })
-  // --- Commit helpers ---
-  function commit(next: Date | null) {
-    const clamped = next ? clampDate(next, minD, maxD) : null
-    current = clamped
-    lastKey = clamped ? String(clamped.getTime()) : 'null'
-    text = clamped ? formatDate(clamped, formatString, locale) : ''
-    onChange?.(clamped)
-  }
-  function commitFromText() {
-    const raw = text.trim()
-    if (!raw) {
-      if (nullable) commit(null)
-      else text = current ? formatDate(current, formatString, locale) : ''
-      return
-    }
-    const parsed = parseDate(raw, formatString, locale, 2029, current ?? new Date())
-    if (parsed) commit(parsed)
-    else text = current ? formatDate(current, formatString, locale) : '' // revert on bad input
-  }
-  function bump(deltaMin: number) {
-    const base = current ?? new Date()
-    commit(new Date(base.getTime() + deltaMin * 60000))
-  }
-  // --- Sub-picker wiring ---
-  function onCalendarChange(dates: Date[]) {
-    const day = dates[0]
-    if (!day) return
-    commit(withTime(day, current ?? startOfDay(day)))
-    // Date-only picker: a single pick finalizes the value.
-    if (dropDownDisplayMode === 'calendar') { open = false; onCommit?.(current) }
-    else if (dropDownDisplayMode === 'both') tab = 'time'
-  }
-  function onTimeChange(t: Date) {
-    const base = current ?? new Date()
-    commit(withTime(base, t))
-  }
-  // --- Dropdown (portalled) ---
-  let open = $state(false)
-  let tab = $state<'date' | 'time'>('date')
+  // --- Portalled dropdown positioning (DOM-bound; stays in the component) -----
   let triggerEl = $state<HTMLDivElement | null>(null)
   let panelEl = $state<HTMLDivElement | null>(null)
   let panelRect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false })
@@ -142,17 +106,11 @@
     if (!triggerEl) return
     panelRect = anchoredRect(triggerEl.getBoundingClientRect(), { estimatedHeight: 360, minWidth: 300 })
   }
-  function openPanel() {
-    if (!isInteractive || open) return
-    tab = dropDownDisplayMode === 'time' ? 'time' : 'date'
-    open = true
-    updatePos()
-  }
-  function closePanel() { open = false }
-  function toggle() { (open ? closePanel : openPanel)() }
+  // Reposition on open + while open (scroll/resize), and dismiss on outside click.
   $effect(() => {
-    if (!open) return
+    if (!dtp.open) return
+    updatePos()
     const reposition = () => updatePos()
     window.addEventListener('scroll', reposition, true)
     window.addEventListener('resize', reposition)
@@ -160,7 +118,7 @@
       const t = e.target as Node | null
       if (!t) return
       if (triggerEl?.contains(t) || panelEl?.contains(t)) return
-      closePanel()
+      dtp.closePanel()
     }
     document.addEventListener('pointerdown', onDown, true)
     return () => {
@@ -170,59 +128,44 @@
     }
   })
-  function onInputKeydown(e: KeyboardEvent) {
-    if (e.key === 'Enter') { e.preventDefault(); commitFromText(); closePanel(); onCommit?.(current) }
-    else if (e.key === 'Escape') { closePanel(); onCancel?.() }
-    else if (e.key === 'ArrowDown' && (e.altKey || !text)) { e.preventDefault(); openPanel() }
-    else if (spinButtons && e.key === 'ArrowUp') { e.preventDefault(); bump(stepMinutes) }
-    else if (spinButtons && e.key === 'ArrowDown') { e.preventDefault(); bump(-stepMinutes) }
-  }
   function focusOpen(node: HTMLInputElement) {
     if (!autoOpen) return
     node.focus()
-    openPanel()
+    dtp.openPanel()
   }
   function onRootFocusOut(e: FocusEvent) {
     const next = e.relatedTarget as Node | null
     // Ignore focus moving within the field or into the portalled panel.
     if (next && (triggerEl?.contains(next) || panelEl?.contains(next))) return
-    onCommit?.(current)
+    onCommit?.(dtp.current)
   }
-  const showDateTab = $derived(dropDownDisplayMode !== 'time')
-  const showTimeTab = $derived(dropDownDisplayMode !== 'calendar')
 </script>
 <div class="sv-dtp" class:sv-dtp--disabled={disabled} onfocusout={onRootFocusOut}>
   <div class="sv-dtp__field" bind:this={triggerEl}>
     {#if spinButtons}
       <div class="sv-dtp__spin">
-        <button type="button" tabindex="-1" aria-label="Increment" onclick={() => bump(stepMinutes)} disabled={!isInteractive}>▲</button>
-        <button type="button" tabindex="-1" aria-label="Decrement" onclick={() => bump(-stepMinutes)} disabled={!isInteractive}>▼</button>
+        <button {...dtp.spinProps(1)}>▲</button>
+        <button {...dtp.spinProps(-1)}>▼</button>
       </div>
     {/if}
     <input
       class="sv-dtp__input"
-      type="text"
-      bind:value={text}
+      bind:value={dtp.text}
       {placeholder}
-      {disabled}
-      {readonly}
-      onblur={commitFromText}
-      onkeydown={onInputKeydown}
+      {...dtp.inputProps()}
       use:focusOpen
     />
-    {#if nullable && current && isInteractive}
-      <button type="button" class="sv-dtp__clear" aria-label="Clear" onclick={() => commit(null)}>&times;</button>
+    {#if nullable && dtp.current && dtp.isInteractive}
+      <button class="sv-dtp__clear" {...dtp.clearProps()}>&times;</button>
     {/if}
-    <button type="button" class="sv-dtp__toggle" aria-label="Open picker" aria-haspopup="dialog" aria-expanded={open} onclick={toggle} disabled={!isInteractive} tabindex="-1">
+    <button class="sv-dtp__toggle" {...dtp.toggleProps()}>
       <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" /><path d="M16 2v4M8 2v4M3 10h18" /></svg>
     </button>
   </div>
-  {#if open}
+  {#if dtp.open}
     <div
       class="sv-dtp__panel"
       bind:this={panelEl}
@@ -233,16 +176,16 @@
       role="dialog"
       aria-label="Choose date and time"
     >
-      {#if showDateTab && showTimeTab}
+      {#if dtp.showDateTab && dtp.showTimeTab}
         <div class="sv-dtp__tabs" role="tablist">
-          <button type="button" role="tab" aria-selected={tab === 'date'} class:is-active={tab === 'date'} onclick={() => (tab = 'date')}>DATE</button>
-          <button type="button" role="tab" aria-selected={tab === 'time'} class:is-active={tab === 'time'} onclick={() => (tab = 'time')}>TIME</button>
+          <button class:is-active={dtp.tab === 'date'} {...dtp.tabProps('date')}>DATE</button>
+          <button class:is-active={dtp.tab === 'time'} {...dtp.tabProps('time')}>TIME</button>
         </div>
       {/if}
       <div class="sv-dtp__body">
-        {#if tab === 'date' && showDateTab}
+        {#if dtp.tab === 'date' && dtp.showDateTab}
           <SvCalendar
-            value={current}
+            value={dtp.current}
             selectionMode="one"
             min={min}
             max={max}
@@ -250,22 +193,22 @@
             {weekNumbers}
             {locale}
             {animate}
-            onChange={onCalendarChange}
+            onChange={dtp.onCalendarChange}
           />
-        {:else if showTimeTab}
+        {:else if dtp.showTimeTab}
           <SvTimePicker
-            value={current}
+            value={dtp.current}
             format={hourFormat}
             {minuteInterval}
             footer
-            onChange={onTimeChange}
+            onChange={dtp.onTimeChange}
           />
         {/if}
       </div>
     </div>
   {/if}
-  {#if name}<input type="hidden" {name} value={current ? current.toISOString() : ''} />{/if}
+  {#if name}<input type="hidden" {name} value={dtp.current ? dtp.current.toISOString() : ''} />{/if}
 </div>
 <style>

package/src/SvDropDownList.svelte CHANGED Viewed

@@ -3,9 +3,13 @@
    * SvDropDownList - a single-select dropdown (trigger button + portalled list,
    * no typing). Parity: Smart `smart-drop-down-list`. Controlled via `value` +
    * `onChange`. Popover escapes scroll clipping via popover.ts.
+   *
+   * One styled renderer over the headless `createDropdownList` core (state +
+   * keyboard + ARIA); only portal/measure/scroll render concerns live here.
    */
   import { anchoredRect, portalToBody, type AnchoredRect } from './popover'
   import type { ListOption } from './list-option'
+  import { createDropdownList } from './createDropdownList.svelte'
   type Props = {
     options: ReadonlyArray<ListOption>
@@ -21,93 +25,66 @@
   let { options, value = null, onChange, placeholder = 'Select…', disabled = false, name, size = 'md', ariaLabel, autoOpen = false }: Props = $props()
-  let open = $state(false)
-  let active = $state(-1)
   let triggerEl = $state<HTMLButtonElement | null>(null)
   let panelEl = $state<HTMLDivElement | null>(null)
   let rect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false })
-  const selected = $derived(options.find((o) => o.value === value) ?? null)
-  const enabledIdx = $derived(options.map((o, i) => (o.disabled ? -1 : i)).filter((i) => i >= 0))
+  const ddl = createDropdownList({
+    options: () => options,
+    value: () => value,
+    onChange: (v) => onChange?.(v),
+    disabled: () => disabled,
+    ariaLabel: () => ariaLabel,
+    focusTrigger: () => triggerEl?.focus(),
+  })
+  const selected = $derived(ddl.selected)
   function updatePos() {
     if (!triggerEl) return
     rect = anchoredRect(triggerEl.getBoundingClientRect(), { estimatedHeight: Math.min(options.length, 8) * 34 + 8 })
   }
-  function openPanel() {
-    if (disabled || open) return
-    open = true
-    active = Math.max(0, options.findIndex((o) => o.value === value))
-    updatePos()
-  }
-  function close() { open = false }
-  function toggle() { open ? close() : openPanel() }
-  function pick(i: number) {
-    const o = options[i]
-    if (!o || o.disabled) return
-    onChange?.(o.value); close(); triggerEl?.focus()
-  }
-  function move(d: number) {
-    const pos = enabledIdx.indexOf(active)
-    active = enabledIdx[(pos + d + enabledIdx.length) % enabledIdx.length] ?? active
-    queueMicrotask(() => panelEl?.querySelector<HTMLElement>(`[data-idx="${active}"]`)?.scrollIntoView({ block: 'nearest' }))
-  }
-  function onKeydown(e: KeyboardEvent) {
-    if (disabled) return
-    if (!open && (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); openPanel(); return }
-    if (!open) return
-    if (e.key === 'ArrowDown') { e.preventDefault(); move(1) }
-    else if (e.key === 'ArrowUp') { e.preventDefault(); move(-1) }
-    else if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); pick(active) }
-    else if (e.key === 'Escape') { e.preventDefault(); close(); triggerEl?.focus() }
-    else if (e.key === 'Home') { active = enabledIdx[0] ?? 0 }
-    else if (e.key === 'End') { active = enabledIdx.at(-1) ?? 0 }
-  }
   $effect(() => {
-    if (!open) return
+    if (!ddl.open) return
+    updatePos()
     const rp = () => updatePos()
     window.addEventListener('scroll', rp, true); window.addEventListener('resize', rp)
-    const od = (e: PointerEvent) => { const t = e.target as Node | null; if (t && (triggerEl?.contains(t) || panelEl?.contains(t))) return; close() }
+    const od = (e: PointerEvent) => { const t = e.target as Node | null; if (t && (triggerEl?.contains(t) || panelEl?.contains(t))) return; ddl.close() }
     document.addEventListener('pointerdown', od, true)
     return () => { window.removeEventListener('scroll', rp, true); window.removeEventListener('resize', rp); document.removeEventListener('pointerdown', od, true) }
   })
-  function focusOpen(node: HTMLButtonElement) { if (autoOpen) { node.focus(); openPanel() } }
+  // Keep the active option scrolled into view (render concern).
+  $effect(() => {
+    if (!ddl.open) return
+    const i = ddl.activeIndex
+    queueMicrotask(() => panelEl?.querySelector<HTMLElement>(`[data-idx="${i}"]`)?.scrollIntoView({ block: 'nearest' }))
+  })
+  function focusOpen(node: HTMLButtonElement) { if (autoOpen) { node.focus(); ddl.openPanel() } }
 </script>
 <button
   bind:this={triggerEl}
-  type="button"
   class="sv-ddl sv-ddl--{size}"
-  class:is-open={open}
+  class:is-open={ddl.open}
   class:is-disabled={disabled}
-  aria-haspopup="listbox"
-  aria-expanded={open}
-  aria-label={ariaLabel}
-  {disabled}
-  onclick={toggle}
-  onkeydown={onKeydown}
+  {...ddl.triggerProps()}
   use:focusOpen
 >
   <span class="sv-ddl__value" class:is-placeholder={!selected}>{selected?.label ?? placeholder}</span>
   <svg class="sv-ddl__chev" viewBox="0 0 24 24" width="15" height="15" 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>
 </button>
-{#if open}
-  <div bind:this={panelEl} class="sv-ddl__panel" use:portalToBody style:position="fixed" style:top={`${rect.top}px`} style:left={`${rect.left}px`} style:min-width={`${rect.width}px`} role="listbox" tabindex="-1">
+{#if ddl.open}
+  <div bind:this={panelEl} class="sv-ddl__panel" use:portalToBody style:position="fixed" style:top={`${rect.top}px`} style:left={`${rect.left}px`} style:min-width={`${rect.width}px`} {...ddl.listboxProps()}>
     {#each options as opt, i (opt.value)}
       <!-- svelte-ignore a11y_click_events_have_key_events a11y_interactive_supports_focus -->
       <div
         class="sv-ddl__opt"
-        class:is-active={i === active}
-        class:is-selected={opt.value === value}
+        class:is-active={ddl.isActive(i)}
+        class:is-selected={ddl.isSelected(opt)}
         class:is-disabled={opt.disabled}
-        role="option"
-        tabindex="-1"
-        aria-selected={opt.value === value}
-        data-idx={i}
-        onclick={() => pick(i)}
-        onpointermove={() => { if (!opt.disabled) active = i }}
+        {...ddl.optionProps(i)}
       >{opt.label}</div>
     {/each}
   </div>

package/src/SvGauge.svelte CHANGED Viewed

@@ -3,7 +3,12 @@
    * SvGauge - a radial arc gauge (SVG) that renders a value within [min, max]
    * with optional colored threshold bands, a needle, and a center label. Parity:
    * Smart `smart-gauge` (radial). Display control; theme-driven.
+   *
+   * The arc/needle geometry + `role="meter"` ARIA live in the headless
+   * `createGauge` core; this component is just one styled renderer over it.
    */
+  import { createGauge } from './createGauge.svelte'
   type Band = { from: number; to: number; color: string }
   type Props = {
@@ -40,32 +45,25 @@
     ariaLabel,
   }: Props = $props()
-  const clamped = $derived(Math.min(max, Math.max(min, value)))
-  const startAngle = $derived(90 + (360 - sweep) / 2) // symmetric around the bottom
-  const cx = $derived(size / 2)
-  const cy = $derived(size / 2)
-  const r = $derived(size / 2 - thickness / 2 - 2)
-  function frac(v: number) { return (v - min) / (max - min) }
-  function angleOf(v: number) { return startAngle + frac(v) * sweep }
-  function polar(angleDeg: number, radius: number) {
-    const a = (angleDeg * Math.PI) / 180
-    return { x: cx + radius * Math.cos(a), y: cy + radius * Math.sin(a) }
-  }
-  function arcPath(v0: number, v1: number, radius: number): string {
-    const a0 = angleOf(v0)
-    const a1 = angleOf(v1)
-    const p0 = polar(a0, radius)
-    const p1 = polar(a1, radius)
-    const large = a1 - a0 > 180 ? 1 : 0
-    return `M ${p0.x} ${p0.y} A ${radius} ${radius} 0 ${large} 1 ${p1.x} ${p1.y}`
-  }
-  const needleEnd = $derived(polar(angleOf(clamped), r - thickness / 2))
+  const gauge = createGauge({
+    value: () => value,
+    min: () => min,
+    max: () => max,
+    sweep: () => sweep,
+    size: () => size,
+    thickness: () => thickness,
+    ariaLabel: () => ariaLabel,
+  })
+  const clamped = $derived(gauge.clamped)
+  const cx = $derived(gauge.cx)
+  const cy = $derived(gauge.cy)
+  const r = $derived(gauge.r)
+  const arcPath = (v0: number, v1: number, radius: number) => gauge.arcPath(v0, v1, radius)
+  const needleEnd = $derived(gauge.needleEnd)
   const display = $derived(label ?? `${formatValue ? formatValue(clamped) : Math.round(clamped)}${unit}`)
 </script>
-<div class="sv-gauge" role="meter" aria-valuenow={clamped} aria-valuemin={min} aria-valuemax={max} aria-label={ariaLabel ?? 'Gauge'}>
+<div class="sv-gauge" {...gauge.rootProps()}>
   <svg viewBox={`0 0 ${size} ${size}`} width={size} height={size} class="sv-gauge__svg">
     <!-- track -->
     <path d={arcPath(min, max, r)} class="sv-gauge__track" fill="none" stroke-width={thickness} stroke-linecap="round" />

package/src/SvListBox.svelte CHANGED Viewed

@@ -5,6 +5,7 @@
    * via `value` (scalar or array) + `onChange`.
    */
   import type { ListOption } from './list-option'
+  import { createListbox } from './createListbox.svelte'
   type Props = {
     options: ReadonlyArray<ListOption>
@@ -15,89 +16,55 @@
     /** Visible height in rows before scrolling. */
     rows?: number
     ariaLabel?: string
+    /** Form field name; emits a hidden input per selected value so the listbox
+     *  posts in a native <form> (multiple selection -> repeated name). */
+    name?: string
   }
-  let { options, value = null, onChange, multiple = false, disabled = false, rows = 7, ariaLabel }: Props = $props()
+  let { options, value = null, onChange, multiple = false, disabled = false, rows = 7, ariaLabel, name }: Props = $props()
-  const selected = $derived<Array<string | number>>(
-    multiple ? (Array.isArray(value) ? value : value == null ? [] : [value]) : value == null ? [] : [value as string | number],
-  )
-  const enabledIdx = $derived(options.map((o, i) => (o.disabled ? -1 : i)).filter((i) => i >= 0))
-  let active = $state(0)
-  $effect(() => {
-    // Keep the active index on an enabled option.
-    if (!options[active] || options[active]!.disabled) active = enabledIdx[0] ?? 0
+  // The styled listbox is just a renderer over the headless core.
+  const lb = createListbox({
+    options: () => options,
+    value: () => value,
+    onChange: (v) => onChange?.(v),
+    multiple: () => multiple,
+    disabled: () => disabled,
+    ariaLabel: () => ariaLabel,
   })
-  function isSel(o: ListOption) { return selected.includes(o.value) }
-  function pick(i: number) {
-    const o = options[i]
-    if (!o || o.disabled || disabled) return
-    active = i
-    if (multiple) {
-      const set = new Set(selected)
-      set.has(o.value) ? set.delete(o.value) : set.add(o.value)
-      onChange?.([...set])
-    } else {
-      onChange?.(o.value)
-    }
-  }
-  function move(delta: number) {
-    const pos = enabledIdx.indexOf(active)
-    const next = enabledIdx[(pos + delta + enabledIdx.length) % enabledIdx.length]
-    if (next != null) { active = next; scrollActive() }
-  }
+  const isSel = (o: ListOption) => lb.isSelected(o.value)
   let listEl: HTMLUListElement | null = null
-  function scrollActive() {
-    queueMicrotask(() => listEl?.querySelector<HTMLElement>(`[data-idx="${active}"]`)?.scrollIntoView({ block: 'nearest' }))
-  }
-  function onKeydown(e: KeyboardEvent) {
-    if (disabled) return
-    switch (e.key) {
-      case 'ArrowDown': e.preventDefault(); move(1); break
-      case 'ArrowUp': e.preventDefault(); move(-1); break
-      case 'Home': e.preventDefault(); active = enabledIdx[0] ?? 0; scrollActive(); break
-      case 'End': e.preventDefault(); active = enabledIdx.at(-1) ?? 0; scrollActive(); break
-      case ' ':
-      case 'Enter': e.preventDefault(); pick(active); break
-    }
-  }
+  // Scroll-into-view is a render concern, so it lives here (not in the core).
+  $effect(() => {
+    const i = lb.activeIndex
+    queueMicrotask(() => listEl?.querySelector<HTMLElement>(`[data-idx="${i}"]`)?.scrollIntoView({ block: 'nearest' }))
+  })
 </script>
+<div style="display: contents">
 <ul
   bind:this={listEl}
   class="sv-listbox"
-  role="listbox"
-  aria-multiselectable={multiple}
-  aria-label={ariaLabel}
-  aria-disabled={disabled}
-  tabindex={disabled ? -1 : 0}
   style:--sv-rows={rows}
-  onkeydown={onKeydown}
+  {...lb.rootProps()}
 >
   {#each options as opt, i (opt.value)}
     <!-- svelte-ignore a11y_click_events_have_key_events a11y_interactive_supports_focus -->
     <li
       class="sv-listbox__opt"
       class:is-selected={isSel(opt)}
-      class:is-active={i === active}
+      class:is-active={lb.isActive(i)}
       class:is-disabled={opt.disabled}
-      role="option"
-      aria-selected={isSel(opt)}
-      aria-disabled={opt.disabled}
-      data-idx={i}
-      onclick={() => pick(i)}
-      onpointermove={() => { if (!opt.disabled) active = i }}
+      {...lb.optionProps(i)}
     >
       {#if multiple}<span class="sv-listbox__check" aria-hidden="true">{isSel(opt) ? '✓' : ''}</span>{/if}
       <span class="sv-listbox__label">{opt.label}</span>
     </li>
   {/each}
 </ul>
+{#if name}{#each lb.selectedValues as v (v)}<input type="hidden" {name} value={v} />{/each}{/if}
+</div>
 <style>
   .sv-listbox {

package/src/SvMaskedInput.svelte CHANGED Viewed

Binary file

package/src/SvNumberInput.svelte CHANGED Viewed

Binary file