@svgrid/grid 1.2.23 → 1.2.24

package/src/createPhoneInput.svelte.ts

@@ -0,0 +1,119 @@
+/**
+ * createPhoneInput - the HEADLESS core behind <SvPhoneInput>: a runes-based
+ * state machine that owns the country dial-code + national-number state, parsing
+ * an E.164-ish string (`+<dial><digits>`) and re-emitting it. Reuses the pure
+ * `./countries` reference and `./datetime/mask` engine. Exposed as **prop-getters**
+ * you spread onto YOUR OWN markup. No styles, no DOM.
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import { createPhoneInput } from '@svgrid/grid'
+ *   let value = $state('')
+ *   const ph = createPhoneInput({ value: () => value, onChange: (v) => (value = v) })
+ * </script>
+ * <select {...ph.selectProps()}>...</select>
+ * <input {...ph.inputProps()} />
+ * ```
+ *
+ * The styled <SvPhoneInput> is just one renderer over this core.
+ */
+import { COUNTRIES, COUNTRY_BY_CODE, flagEmoji } from './countries'
+import { applyMask } from './datetime/mask'
+
+/** Reactive inputs are passed as getters so the core tracks live prop changes. */
+export type PhoneInputConfig = {
+  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 | undefined
+  ariaLabel?: () => string | undefined
+}
+
+/** Best-effort parse: strip to the longest matching dial code. */
+function matchCountry(v: string) {
+  return [...COUNTRIES].sort((a, b) => b.dial.length - a.dial.length).find((c) => v.startsWith(c.dial))
+}
+
+export function createPhoneInput(config: PhoneInputConfig) {
+  const disabled = () => config.disabled?.() ?? false
+  const readonly = () => config.readonly?.() ?? false
+
+  let iso = $state('US')
+  let national = $state('')
+  let seeded = false
+  let lastVal = ''
+
+  // US/Canada get a friendly national mask; others are plain grouped digits.
+  const mask = $derived(COUNTRY_BY_CODE.get(iso)?.dial === '+1' ? '(###) ###-####' : '')
+  const dial = $derived(COUNTRY_BY_CODE.get(iso)?.dial ?? '+1')
+  const displayNational = $derived(mask ? applyMask(national, mask).formatted : national)
+
+  $effect(() => {
+    const v = config.value()
+    if (!seeded) {
+      seeded = true
+      iso = config.country?.() ?? 'US'
+      const match = matchCountry(v)
+      if (match) { iso = match.code; national = v.slice(match.dial.length) }
+      else if (v) national = v.replace(/^\+/, '')
+      lastVal = v
+      return
+    }
+    if (v !== lastVal) {
+      lastVal = v
+      const match = matchCountry(v)
+      if (match) { iso = match.code; national = v.slice(match.dial.length) }
+    }
+  })
+
+  function emit() {
+    config.onChange?.(`${dial}${national}`, { country: iso, dial, national })
+  }
+  function onNumberInput(e: Event) {
+    const raw = (e.currentTarget as HTMLInputElement).value.replace(/\D/g, '')
+    national = raw
+    lastVal = `${dial}${raw}`
+    emit()
+  }
+  function onCountryChange(e: Event) {
+    iso = (e.currentTarget as HTMLSelectElement).value
+    lastVal = `${dial}${national}`
+    emit()
+  }
+
+  return {
+    /** Selected country ISO code. */
+    get iso() { return iso },
+    /** Dial code for the selected country (e.g. `+1`). */
+    get dial() { return dial },
+    /** Flag emoji for the selected country. */
+    get flag() { return flagEmoji(iso) },
+    /** National number formatted for display. */
+    get displayNational() { return displayNational },
+    /** The full emitted value (`+<dial><digits>`). */
+    get value() { return `${dial}${national}` },
+    /** Spread onto the country `<select>` element. */
+    selectProps: () => ({
+      value: iso,
+      disabled: disabled(),
+      'aria-label': 'Country',
+      onchange: onCountryChange,
+    }),
+    /** Spread onto the national number input element. */
+    inputProps: () => ({
+      value: displayNational,
+      type: 'tel' as const,
+      inputmode: 'tel' as const,
+      placeholder: config.placeholder?.() ?? 'Phone number',
+      disabled: disabled(),
+      readonly: readonly(),
+      'aria-label': config.ariaLabel?.() ?? 'Phone number',
+      oninput: onNumberInput,
+    }),
+  }
+}
+
+export type PhoneInputCore = ReturnType<typeof createPhoneInput>

package/src/createRadioGroup.svelte.ts

@@ -0,0 +1,132 @@
+/**
+ * createRadioGroup - the HEADLESS core behind <SvRadioGroup>: an accessible
+ * single-select radio group (WAI-ARIA `radiogroup`) with roving tabindex + full
+ * arrow-key navigation, exposed as **prop-getters** you spread onto YOUR OWN
+ * markup. Keyboard/ARIA/roving-focus come from the core, the DOM is yours.
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import { createRadioGroup, type RadioOption } from '@svgrid/grid'
+ *   let value = $state<string | number | null>('a')
+ *   const rg = createRadioGroup({ options: () => options, value: () => value, onChange: (v) => (value = v) })
+ * </script>
+ * <div {...rg.groupProps()}>
+ *   {#each options as opt (opt.value)}
+ *     <button {...rg.radioProps(opt)}>{opt.label}</button>
+ *   {/each}
+ * </div>
+ * ```
+ *
+ * The styled <SvRadioGroup> is just one renderer over this core.
+ */
+export type RadioOption = { value: string | number; label: string; disabled?: boolean }
+
+/** Reactive inputs are passed as getters so the core tracks live prop changes. */
+export type RadioGroupConfig = {
+  options: () => ReadonlyArray<RadioOption>
+  value: () => string | number | null
+  onChange?: (value: string | number) => void
+  disabled?: () => boolean
+  ariaLabel?: () => string | undefined
+}
+
+export type RadioProps = {
+  type: 'button'
+  role: 'radio'
+  'aria-checked': boolean
+  'data-idx': number
+  'data-checked': '' | undefined
+  disabled: boolean
+  tabindex: number
+  onclick: () => void
+}
+
+export type RadioGroupProps = {
+  role: 'radiogroup'
+  'aria-label': string | undefined
+  'aria-disabled': boolean
+  onkeydown: (e: KeyboardEvent) => void
+}
+
+export type RadioGroup = {
+  /** Currently selected value. */
+  readonly value: string | number | null
+  readonly disabled: boolean
+  isChecked: (option: RadioOption) => boolean
+  /** Select by value (no-op when disabled / option disabled / unknown). */
+  select: (value: string | number) => void
+  onKeydown: (e: KeyboardEvent) => void
+  /** Spread onto the group container element. */
+  groupProps: () => RadioGroupProps
+  /** Spread onto each option element. */
+  radioProps: (option: RadioOption) => RadioProps
+}
+
+export function createRadioGroup(config: RadioGroupConfig): RadioGroup {
+  const opts = () => config.options()
+  const disabled = () => config.disabled?.() ?? false
+
+  const enabledIdx = $derived(opts().map((o, i) => (o.disabled ? -1 : i)).filter((i) => i >= 0))
+  const selectedIdx = $derived(opts().findIndex((o) => o.value === config.value()))
+  // Roving-tabindex target: the selected option, else the first enabled one.
+  const focusIdx = $derived(selectedIdx >= 0 ? selectedIdx : enabledIdx[0] ?? -1)
+
+  function pickIndex(i: number) {
+    const o = opts()[i]
+    if (!o || o.disabled || disabled()) return
+    config.onChange?.(o.value)
+  }
+
+  function select(value: string | number) {
+    pickIndex(opts().findIndex((o) => o.value === value))
+  }
+
+  // Arrow handling lives on the group container so it works for ANY markup:
+  // the originating radio is found by role + data-idx, so nothing is assumed
+  // about how you nest your elements.
+  function onKeydown(e: KeyboardEvent) {
+    if (disabled()) return
+    const container = e.currentTarget as HTMLElement
+    const origin = (e.target as HTMLElement | null)?.closest<HTMLElement>('[role="radio"]')
+    const i = origin ? Number(origin.getAttribute('data-idx')) : focusIdx
+    const pos = enabledIdx.indexOf(i)
+    if (pos < 0) return
+    if (e.key === ' ') { e.preventDefault(); pickIndex(i); 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 return
+    e.preventDefault()
+    const target = enabledIdx[nextPos]!
+    pickIndex(target)
+    container.querySelectorAll<HTMLElement>('[role="radio"]')[target]?.focus()
+  }
+
+  return {
+    get value() { return config.value() },
+    get disabled() { return disabled() },
+    isChecked: (option: RadioOption) => option.value === config.value(),
+    select,
+    onKeydown,
+    groupProps: () => ({
+      role: 'radiogroup',
+      'aria-label': config.ariaLabel?.(),
+      'aria-disabled': disabled(),
+      onkeydown: onKeydown,
+    }),
+    radioProps: (option: RadioOption) => {
+      const i = opts().findIndex((o) => o.value === option.value)
+      const checked = option.value === config.value()
+      return {
+        type: 'button',
+        role: 'radio',
+        'aria-checked': checked,
+        'data-idx': i,
+        'data-checked': checked ? '' : undefined,
+        disabled: disabled() || !!option.disabled,
+        tabindex: i === focusIdx ? 0 : -1,
+        onclick: () => pickIndex(i),
+      }
+    },
+  }
+}

package/src/createRating.svelte.ts

@@ -0,0 +1,145 @@
+/**
+ * createRating - the HEADLESS core behind <SvRating>: a controlled star-rating
+ * control (WAI-ARIA `slider`) with hover preview, optional half steps, keyboard
+ * (Arrows step, Home/End jump), and readonly/disabled - exposed as **prop-getters**
+ * you spread onto YOUR OWN markup.
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import { createRating } from '@svgrid/grid'
+ *   let value = $state(3)
+ *   const r = createRating({ value: () => value, onChange: (v) => (value = v) })
+ * </script>
+ * <div {...r.rootProps()}>
+ *   {#each Array(5) as _, i}<button {...r.starProps(i)}>{r.fillOf(i)}</button>{/each}
+ * </div>
+ * ```
+ *
+ * The styled <SvRating> is just one renderer over this core.
+ */
+export type RatingFill = 'full' | 'half' | 'empty'
+
+/** Reactive inputs are passed as getters so the core tracks live prop changes. */
+export type RatingConfig = {
+  value: () => number
+  onChange?: (value: number) => void
+  max?: () => number
+  allowHalf?: () => boolean
+  readonly?: () => boolean
+  disabled?: () => boolean
+  ariaLabel?: () => string | undefined
+}
+
+export type RatingRootProps = {
+  role: 'slider'
+  tabindex: number
+  'aria-label': string
+  'aria-valuenow': number
+  'aria-valuemin': number
+  'aria-valuemax': number
+  'aria-readonly': boolean
+  onkeydown: (e: KeyboardEvent) => void
+  onpointerleave: () => void
+}
+
+export type RatingStarProps = {
+  type: 'button'
+  tabindex: number
+  disabled: boolean
+  'aria-label': string
+  'data-fill': RatingFill
+  onpointermove: (e: PointerEvent) => void
+  onclick: (e: MouseEvent) => void
+}
+
+export type Rating = {
+  /** The committed value. */
+  readonly value: number
+  /** What the stars should paint right now: the hover preview, else `value`. */
+  readonly preview: number
+  readonly max: number
+  readonly interactive: boolean
+  /** Fill state of the star at `index` given the current preview. */
+  fillOf: (index: number) => RatingFill
+  /** Set the hover preview (pass null to clear). No-op when non-interactive. */
+  setHover: (value: number | null) => void
+  /** Commit a value. No-op when non-interactive. */
+  pick: (value: number) => void
+  onKeydown: (e: KeyboardEvent) => void
+  /** Spread onto the container element. */
+  rootProps: () => RatingRootProps
+  /** Spread onto the star element at `index`. */
+  starProps: (index: number) => RatingStarProps
+}
+
+export function createRating(config: RatingConfig): Rating {
+  const max = () => config.max?.() ?? 5
+  const allowHalf = () => config.allowHalf?.() ?? false
+  const ro = () => config.readonly?.() ?? false
+  const disabled = () => config.disabled?.() ?? false
+  const interactive = () => !ro() && !disabled()
+
+  let hover = $state<number | null>(null)
+  const preview = $derived(hover ?? config.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): RatingFill {
+    if (preview >= index + 1) return 'full'
+    if (preview >= index + 0.5) return 'half'
+    return 'empty'
+  }
+
+  function setHover(value: number | null) {
+    if (interactive()) hover = value
+  }
+  function pick(value: number) {
+    if (interactive()) config.onChange?.(value)
+  }
+
+  function onKeydown(e: KeyboardEvent) {
+    if (!interactive()) return
+    const step = allowHalf() ? 0.5 : 1
+    const v = config.value()
+    if (e.key === 'ArrowRight' || e.key === 'ArrowUp') { e.preventDefault(); config.onChange?.(Math.min(max(), v + step)) }
+    else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') { e.preventDefault(); config.onChange?.(Math.max(0, v - step)) }
+    else if (e.key === 'Home') { e.preventDefault(); config.onChange?.(0) }
+    else if (e.key === 'End') { e.preventDefault(); config.onChange?.(max()) }
+  }
+
+  return {
+    get value() { return config.value() },
+    get preview() { return preview },
+    get max() { return max() },
+    get interactive() { return interactive() },
+    fillOf,
+    setHover,
+    pick,
+    onKeydown,
+    rootProps: () => ({
+      role: 'slider',
+      tabindex: interactive() ? 0 : -1,
+      'aria-label': config.ariaLabel?.() ?? 'Rating',
+      'aria-valuenow': config.value(),
+      'aria-valuemin': 0,
+      'aria-valuemax': max(),
+      'aria-readonly': ro(),
+      onkeydown: onKeydown,
+      onpointerleave: () => { hover = null },
+    }),
+    starProps: (index: number) => ({
+      type: 'button',
+      tabindex: -1,
+      disabled: !interactive(),
+      'aria-label': `${index + 1} star${index ? 's' : ''}`,
+      'data-fill': fillOf(index),
+      onpointermove: (e: PointerEvent) => { if (interactive()) hover = valueAt(e, index) },
+      onclick: (e: MouseEvent) => { if (interactive()) config.onChange?.(valueAt(e, index)) },
+    }),
+  }
+}

package/src/createSlider.svelte.ts

@@ -0,0 +1,160 @@
+/**
+ * createSlider - the HEADLESS core behind <SvSlider>, in the same spirit as
+ * `createSvGrid` for the grid: a runes-based state machine (single + dual-thumb,
+ * stepping, keyboard, drag state) that owns the value<->position math and the
+ * ARIA wiring, exposed as **prop-getters** you spread onto YOUR OWN markup.
+ *
+ * The core never touches the DOM: the styled renderer measures the track
+ * (`getBoundingClientRect`) and passes the rect + pointer position IN via
+ * `pointerDown` / `setFromPointer`. The core turns that into a stepped value.
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import { createSlider } from '@svgrid/grid'
+ *   let value = $state(50)
+ *   const s = createSlider({ value: () => value, onChange: (v) => (value = v as number) })
+ * </script>
+ * <div bind:this={track} onpointerdown={(e) => s.pointerDown({ x: e.clientX, y: e.clientY }, track.getBoundingClientRect())}>
+ *   <div {...s.thumbProps(0)} style:left={s.percentOf(s.hi) + '%'}></div>
+ * </div>
+ * ```
+ */
+export type SliderValue = number | [number, number]
+export type SliderOrientation = 'horizontal' | 'vertical'
+export type SliderThumb = 'single' | 'lo' | 'hi'
+export type SliderPoint = { x: number; y: number }
+
+/** Reactive inputs are passed as getters so the core tracks live prop changes. */
+export type SliderConfig = {
+  value: () => SliderValue
+  onChange?: (value: SliderValue) => void
+  min?: () => number
+  max?: () => number
+  step?: () => number
+  range?: () => boolean
+  orientation?: () => SliderOrientation
+  disabled?: () => boolean
+  ariaLabel?: () => string | undefined
+}
+
+export function createSlider(config: SliderConfig) {
+  const min = () => config.min?.() ?? 0
+  const max = () => config.max?.() ?? 100
+  const stepSize = () => config.step?.() ?? 1
+  const range = () => config.range?.() ?? false
+  const isVert = () => (config.orientation?.() ?? 'horizontal') === 'vertical'
+  const disabled = () => config.disabled?.() ?? false
+
+  const lo = $derived(range() ? (config.value() as [number, number])[0] : min())
+  const hi = $derived(range() ? (config.value() as [number, number])[1] : (config.value() as number))
+
+  function clampStep(v: number): number {
+    const stepped = Math.round((v - min()) / stepSize()) * stepSize() + min()
+    return Math.min(max(), Math.max(min(), Number(stepped.toFixed(10))))
+  }
+  /** Value -> percentage along the track (0..100). */
+  const percentOf = (v: number) => ((v - min()) / (max() - min())) * 100
+
+  let dragging = $state<SliderThumb | null>(null)
+
+  /** Turn a pointer position (client coords) + measured track rect into a value. */
+  function valueFromPointer(pos: SliderPoint, rect: DOMRect): number {
+    const frac = isVert()
+      ? 1 - (pos.y - rect.top) / rect.height
+      : (pos.x - rect.left) / rect.width
+    return clampStep(min() + Math.min(1, Math.max(0, frac)) * (max() - min()))
+  }
+
+  const emitSingle = (v: number) => config.onChange?.(v)
+  const emitRange = (nlo: number, nhi: number) => config.onChange?.([Math.min(nlo, nhi), Math.max(nlo, nhi)])
+
+  function nudge(which: SliderThumb, next: number) {
+    if (which === 'single') emitSingle(next)
+    else if (which === 'lo') emitRange(next, hi)
+    else emitRange(lo, next)
+  }
+
+  /** Begin a drag: pick the nearest thumb (range) and emit the initial value. */
+  function pointerDown(pos: SliderPoint, rect: DOMRect) {
+    if (disabled()) return
+    const v = valueFromPointer(pos, rect)
+    if (range()) {
+      const which: SliderThumb = 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)
+    }
+  }
+  /** Continue a drag: emit the value for the currently-dragged thumb. */
+  function setFromPointer(pos: SliderPoint, rect: DOMRect) {
+    if (!dragging) return
+    nudge(dragging, valueFromPointer(pos, rect))
+  }
+  function endDrag() { dragging = null }
+
+  /** Step a thumb by `delta` steps (used for custom controls). */
+  function step(which: SliderThumb, delta: number) {
+    if (disabled()) return
+    const cur = which === 'lo' ? lo : hi
+    nudge(which, clampStep(cur + delta * stepSize()))
+  }
+
+  function onThumbKey(e: KeyboardEvent, which: SliderThumb) {
+    if (disabled()) return
+    const cur = which === 'lo' ? lo : hi
+    let next = cur
+    if (e.key === 'ArrowRight' || e.key === 'ArrowUp') next = clampStep(cur + stepSize())
+    else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') next = clampStep(cur - stepSize())
+    else if (e.key === 'Home') next = min()
+    else if (e.key === 'End') next = max()
+    else if (e.key === 'PageUp') next = clampStep(cur + stepSize() * 10)
+    else if (e.key === 'PageDown') next = clampStep(cur - stepSize() * 10)
+    else return
+    e.preventDefault()
+    nudge(which, next)
+  }
+
+  const thumbOf = (i: number): SliderThumb => (range() ? (i === 0 ? 'lo' : 'hi') : 'single')
+
+  return {
+    get value() { return config.value() },
+    get lo() { return lo },
+    get hi() { return hi },
+    /** Thumb currently being dragged, or null. */
+    get dragging() { return dragging },
+    percentOf,
+    clampStep,
+    valueFromPointer,
+    pointerDown,
+    setFromPointer,
+    endDrag,
+    step,
+    /** Spread onto the track container (static a11y/data hooks). */
+    trackProps: () => ({
+      'data-orientation': isVert() ? 'vertical' : 'horizontal',
+    }),
+    /** Spread onto the thumb at index `i` (0 = single/low, 1 = high). */
+    thumbProps: (i: number) => {
+      const which = thumbOf(i)
+      const cur = which === 'lo' ? lo : hi
+      const vmin = which === 'hi' ? lo : min()
+      const vmax = which === 'lo' ? hi : max()
+      const label = which === 'lo' ? 'Minimum' : which === 'hi' ? 'Maximum' : (config.ariaLabel?.() ?? 'Value')
+      return {
+        role: 'slider' as const,
+        tabindex: disabled() ? -1 : 0,
+        'aria-valuemin': vmin,
+        'aria-valuemax': vmax,
+        'aria-valuenow': cur,
+        'aria-label': label,
+        'aria-orientation': (isVert() ? 'vertical' : 'horizontal') as SliderOrientation,
+        'aria-disabled': disabled() || undefined,
+        onkeydown: (e: KeyboardEvent) => onThumbKey(e, which),
+      }
+    },
+  }
+}
+
+export type Slider = ReturnType<typeof createSlider>

package/src/createSwitch.svelte.ts

@@ -0,0 +1,78 @@
+/**
+ * createSwitch - the HEADLESS core behind <SvSwitchButton>: a controlled on/off
+ * switch (ARIA `switch`) with full keyboard (Space/Enter toggle, ArrowRight on,
+ * ArrowLeft off), exposed as **prop-getters** you spread onto YOUR OWN markup.
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import { createSwitch } from '@svgrid/grid'
+ *   let on = $state(false)
+ *   const sw = createSwitch({ checked: () => on, onChange: (v) => (on = v) })
+ * </script>
+ * <button {...sw.switchProps()}><span class="thumb"></span></button>
+ * ```
+ *
+ * The styled <SvSwitchButton> is just one renderer over this core.
+ */
+export type SwitchConfig = {
+  checked: () => boolean
+  onChange?: (checked: boolean) => void
+  disabled?: () => boolean
+  ariaLabel?: () => string | undefined
+}
+
+export type SwitchProps = {
+  type: 'button'
+  role: 'switch'
+  'aria-checked': boolean
+  'aria-label': string | undefined
+  disabled: boolean
+  'data-checked': '' | undefined
+  onclick: () => void
+  onkeydown: (e: KeyboardEvent) => void
+}
+
+export type Switch = {
+  /** Current on/off state. */
+  readonly checked: boolean
+  readonly disabled: boolean
+  /** Flip on/off (no-op when disabled). */
+  toggle: () => void
+  onKeydown: (e: KeyboardEvent) => void
+  /** Spread onto the switch element. */
+  switchProps: () => SwitchProps
+}
+
+export function createSwitch(config: SwitchConfig): Switch {
+  const checked = () => config.checked()
+  const disabled = () => config.disabled?.() ?? false
+
+  function toggle() {
+    if (disabled()) return
+    config.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()) config.onChange?.(true) }
+    else if (e.key === 'ArrowLeft') { if (checked()) config.onChange?.(false) }
+  }
+
+  return {
+    get checked() { return checked() },
+    get disabled() { return disabled() },
+    toggle,
+    onKeydown,
+    switchProps: () => ({
+      type: 'button',
+      role: 'switch',
+      'aria-checked': checked(),
+      'aria-label': config.ariaLabel?.(),
+      disabled: disabled(),
+      'data-checked': checked() ? '' : undefined,
+      onclick: toggle,
+      onkeydown: onKeydown,
+    }),
+  }
+}