@svgrid/grid 2.1.22 → 2.2.0

package/src/createAutocomplete.svelte.ts

@@ -1,132 +1,132 @@
-/**
- * createAutocomplete - the HEADLESS core behind <SvAutoComplete>: a free-text
- * field with a live-filtered suggestion list (accepts ANY typed value; the
- * suggestions are shortcuts). Roving active index + keyboard, exposed as
- * **prop-getters** you spread onto YOUR OWN markup. No styles/DOM/portal - those
- * stay in the styled component.
- *
- * ```svelte
- * <script lang="ts">
- *   import { createAutocomplete } from '@svgrid/grid'
- *   let value = $state('')
- *   const ac = createAutocomplete({ value: () => value, suggestions: () => list, onChange: (v) => (value = v) })
- * </script>
- * <input {...ac.inputProps()} />
- * {#if ac.open}
- *   <ul {...ac.listboxProps()}>
- *     {#each ac.filtered as opt, i (opt.value)}<li {...ac.optionProps(i)}>{opt.label}</li>{/each}
- *   </ul>
- * {/if}
- * ```
- */
-import { filterOptions, type ListOption } from './list-option'
-import { editorAria, type EditorAriaState } from './editor-contract'
-
-/** Reactive inputs are passed as getters so the core tracks live prop changes. */
-export type AutocompleteConfig = {
-  value: () => string
-  onChange?: (value: string) => void
-  /** Suggestions - strings or {value,label} (label shown, value inserted). */
-  suggestions: () => ReadonlyArray<string | ListOption>
-  minChars?: () => number
-  disabled?: () => boolean
-  ariaLabel?: () => string | undefined
-  /** DOM focus hook provided by the renderer; the core never touches the DOM. */
-  focusInput?: () => void
-  // Editor contract (ARIA + validation) - folded into inputProps().
-  id?: () => string | undefined
-  invalid?: () => boolean
-  required?: () => boolean
-  error?: () => string | undefined
-  hint?: () => string | undefined
-}
-
-let uid = 0
-
-export function createAutocomplete(config: AutocompleteConfig) {
-  const id = `sv-ac-${uid++}`
-  const listId = `${id}-list`
-  const optionId = (index: number) => `${listId}-opt-${index}`
-  const minChars = () => config.minChars?.() ?? 1
-
-  const ariaState = (): EditorAriaState => ({
-    id: config.id?.(),
-    invalid: config.invalid?.(),
-    required: config.required?.(),
-    error: config.error?.(),
-    hint: config.hint?.(),
-    ariaLabel: config.ariaLabel?.(),
-  })
-
-  let open = $state(false)
-  let active = $state(0)
-
-  const asOptions = $derived<ListOption[]>(
-    config.suggestions().map((s) => (typeof s === 'string' ? { value: s, label: s } : s)),
-  )
-  const filtered = $derived(config.value().length >= minChars() ? filterOptions(asOptions, config.value()).slice(0, 10) : [])
-
-  function maybeOpen() { open = filtered.length > 0; if (open) active = 0 }
-  function pick(o: ListOption | undefined) { if (!o) return; config.onChange?.(String(o.value)); open = false; config.focusInput?.() }
-  function close() { open = false }
-  function onInput(e: Event) { config.onChange?.((e.currentTarget as HTMLInputElement).value); queueMicrotask(maybeOpen) }
-  function onKeydown(e: KeyboardEvent) {
-    if (!open) { if (e.key === 'ArrowDown') { queueMicrotask(maybeOpen) } return }
-    if (e.key === 'ArrowDown') { e.preventDefault(); active = Math.min(active + 1, filtered.length - 1) }
-    else if (e.key === 'ArrowUp') { e.preventDefault(); active = Math.max(active - 1, 0) }
-    else if (e.key === 'Enter') { e.preventDefault(); pick(filtered[active]) }
-    else if (e.key === 'Escape') { close() }
-  }
-
-  return {
-    /** Panel open state. */
-    get open() { return open },
-    /** Highlighted suggestion index into `filtered`. */
-    get activeIndex() { return active },
-    /** Suggestions after the live substring filter (capped at 10). */
-    get filtered() { return filtered },
-    /** Controlled text value. */
-    get value() { return config.value() },
-    /** id of the listbox element (matches inputProps `aria-controls`). */
-    listId,
-    isActive: (i: number) => i === active,
-    setActive: (i: number) => { active = i },
-    maybeOpen,
-    close,
-    pick,
-    onInput,
-    onKeydown,
-    /** Spread onto the text <input>. */
-    inputProps: () => ({
-      id: config.id?.(),
-      role: 'combobox' as const,
-      'aria-expanded': open,
-      'aria-controls': listId,
-      'aria-autocomplete': 'list' as const,
-      'aria-activedescendant': open && filtered[active] ? optionId(active) : undefined,
-      ...editorAria(ariaState()),
-      value: config.value(),
-      disabled: config.disabled?.() ?? false,
-      oninput: onInput,
-      onfocus: maybeOpen,
-      onkeydown: onKeydown,
-    }),
-    /** Spread onto the listbox container. */
-    listboxProps: () => ({
-      id: listId,
-      role: 'listbox' as const,
-    }),
-    /** Spread onto the suggestion at `index` (index into `filtered`). */
-    optionProps: (index: number) => ({
-      id: optionId(index),
-      role: 'option' as const,
-      tabindex: -1,
-      'aria-selected': index === active,
-      'data-idx': index,
-      onclick: () => pick(filtered[index]),
-      onpointermove: () => { active = index },
-    }),
-  }
-}
-
-export type Autocomplete = ReturnType<typeof createAutocomplete>
+/**
+ * createAutocomplete - the HEADLESS core behind <SvAutoComplete>: a free-text
+ * field with a live-filtered suggestion list (accepts ANY typed value; the
+ * suggestions are shortcuts). Roving active index + keyboard, exposed as
+ * **prop-getters** you spread onto YOUR OWN markup. No styles/DOM/portal - those
+ * stay in the styled component.
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import { createAutocomplete } from '@svgrid/grid'
+ *   let value = $state('')
+ *   const ac = createAutocomplete({ value: () => value, suggestions: () => list, onChange: (v) => (value = v) })
+ * </script>
+ * <input {...ac.inputProps()} />
+ * {#if ac.open}
+ *   <ul {...ac.listboxProps()}>
+ *     {#each ac.filtered as opt, i (opt.value)}<li {...ac.optionProps(i)}>{opt.label}</li>{/each}
+ *   </ul>
+ * {/if}
+ * ```
+ */
+import { filterOptions, type ListOption } from './list-option'
+import { editorAria, type EditorAriaState } from './editor-contract'
+
+/** Reactive inputs are passed as getters so the core tracks live prop changes. */
+export type AutocompleteConfig = {
+  value: () => string
+  onChange?: (value: string) => void
+  /** Suggestions - strings or {value,label} (label shown, value inserted). */
+  suggestions: () => ReadonlyArray<string | ListOption>
+  minChars?: () => number
+  disabled?: () => boolean
+  ariaLabel?: () => string | undefined
+  /** DOM focus hook provided by the renderer; the core never touches the DOM. */
+  focusInput?: () => void
+  // Editor contract (ARIA + validation) - folded into inputProps().
+  id?: () => string | undefined
+  invalid?: () => boolean
+  required?: () => boolean
+  error?: () => string | undefined
+  hint?: () => string | undefined
+}
+
+let uid = 0
+
+export function createAutocomplete(config: AutocompleteConfig) {
+  const id = `sv-ac-${uid++}`
+  const listId = `${id}-list`
+  const optionId = (index: number) => `${listId}-opt-${index}`
+  const minChars = () => config.minChars?.() ?? 1
+
+  const ariaState = (): EditorAriaState => ({
+    id: config.id?.(),
+    invalid: config.invalid?.(),
+    required: config.required?.(),
+    error: config.error?.(),
+    hint: config.hint?.(),
+    ariaLabel: config.ariaLabel?.(),
+  })
+
+  let open = $state(false)
+  let active = $state(0)
+
+  const asOptions = $derived<ListOption[]>(
+    config.suggestions().map((s) => (typeof s === 'string' ? { value: s, label: s } : s)),
+  )
+  const filtered = $derived(config.value().length >= minChars() ? filterOptions(asOptions, config.value()).slice(0, 10) : [])
+
+  function maybeOpen() { open = filtered.length > 0; if (open) active = 0 }
+  function pick(o: ListOption | undefined) { if (!o) return; config.onChange?.(String(o.value)); open = false; config.focusInput?.() }
+  function close() { open = false }
+  function onInput(e: Event) { config.onChange?.((e.currentTarget as HTMLInputElement).value); queueMicrotask(maybeOpen) }
+  function onKeydown(e: KeyboardEvent) {
+    if (!open) { if (e.key === 'ArrowDown') { queueMicrotask(maybeOpen) } return }
+    if (e.key === 'ArrowDown') { e.preventDefault(); active = Math.min(active + 1, filtered.length - 1) }
+    else if (e.key === 'ArrowUp') { e.preventDefault(); active = Math.max(active - 1, 0) }
+    else if (e.key === 'Enter') { e.preventDefault(); pick(filtered[active]) }
+    else if (e.key === 'Escape') { close() }
+  }
+
+  return {
+    /** Panel open state. */
+    get open() { return open },
+    /** Highlighted suggestion index into `filtered`. */
+    get activeIndex() { return active },
+    /** Suggestions after the live substring filter (capped at 10). */
+    get filtered() { return filtered },
+    /** Controlled text value. */
+    get value() { return config.value() },
+    /** id of the listbox element (matches inputProps `aria-controls`). */
+    listId,
+    isActive: (i: number) => i === active,
+    setActive: (i: number) => { active = i },
+    maybeOpen,
+    close,
+    pick,
+    onInput,
+    onKeydown,
+    /** Spread onto the text <input>. */
+    inputProps: () => ({
+      id: config.id?.(),
+      role: 'combobox' as const,
+      'aria-expanded': open,
+      'aria-controls': listId,
+      'aria-autocomplete': 'list' as const,
+      'aria-activedescendant': open && filtered[active] ? optionId(active) : undefined,
+      ...editorAria(ariaState()),
+      value: config.value(),
+      disabled: config.disabled?.() ?? false,
+      oninput: onInput,
+      onfocus: maybeOpen,
+      onkeydown: onKeydown,
+    }),
+    /** Spread onto the listbox container. */
+    listboxProps: () => ({
+      id: listId,
+      role: 'listbox' as const,
+    }),
+    /** Spread onto the suggestion at `index` (index into `filtered`). */
+    optionProps: (index: number) => ({
+      id: optionId(index),
+      role: 'option' as const,
+      tabindex: -1,
+      'aria-selected': index === active,
+      'data-idx': index,
+      onclick: () => pick(filtered[index]),
+      onpointermove: () => { active = index },
+    }),
+  }
+}
+
+export type Autocomplete = ReturnType<typeof createAutocomplete>

package/src/createCarousel.svelte.ts

@@ -0,0 +1,104 @@
+/**
+ * createCarousel - the HEADLESS core behind <SvCarousel>: slide navigation
+ * (with optional looping), autoplay that pauses on hover/focus and via a
+ * persistent stop toggle (WCAG 2.2.2), and rtl-aware arrow wiring - as
+ * prop-getters you spread onto your own markup. The component keeps only the
+ * visual track + swipe. Runes-based, like `createListbox`.
+ */
+import { type EditorDir } from './editor-contract'
+
+export type CarouselConfig = {
+  count: () => number
+  /** Active slide index (the component owns the state; core calls onChange). */
+  current: () => number
+  onChange?: (index: number) => void
+  loop?: () => boolean
+  /** Autoplay interval in ms; 0 = off. */
+  autoplay?: () => number
+  dir?: () => EditorDir | undefined
+}
+
+export function createCarousel(config: CarouselConfig) {
+  const count = () => config.count()
+  const current = () => config.current()
+  const loop = () => config.loop?.() ?? true
+  const rtl = () => config.dir?.() === 'rtl'
+
+  let paused = $state(false) // hover/focus
+  let userPaused = $state(false) // explicit stop toggle
+
+  function go(i: number) {
+    const n = count()
+    if (n === 0) return
+    const target = loop() ? ((i % n) + n) % n : Math.max(0, Math.min(i, n - 1))
+    config.onChange?.(target)
+  }
+  const next = () => go(current() + 1)
+  const prev = () => go(current() - 1)
+  const canGoPrev = () => loop() || current() > 0
+  const canGoNext = () => loop() || current() < count() - 1
+
+  // Autoplay, paused while hovered/focused or explicitly stopped (WCAG 2.2.2).
+  $effect(() => {
+    const ms = config.autoplay?.() ?? 0
+    if (!ms || paused || userPaused || count() < 2) return
+    const t = setInterval(() => next(), ms)
+    return () => clearInterval(t)
+  })
+
+  return {
+    get paused() { return paused },
+    get userPaused() { return userPaused },
+    rtl,
+    isActive: (i: number) => i === current(),
+    go,
+    next,
+    prev,
+    canGoPrev,
+    canGoNext,
+    /** Spread onto the carousel container. Pauses autoplay on hover/focus. */
+    rootProps: (ariaLabel = 'Carousel') => ({
+      role: 'group' as const,
+      'aria-roledescription': 'carousel',
+      'aria-label': ariaLabel,
+      onpointerenter: () => { paused = true },
+      onpointerleave: () => { paused = false },
+      onfocusin: () => { paused = true },
+      onfocusout: () => { paused = false },
+    }),
+    /** Spread onto each slide element. */
+    slideProps: (i: number) => ({
+      role: 'group' as const,
+      'aria-roledescription': 'slide',
+      'aria-label': `${i + 1} of ${count()}`,
+      'aria-hidden': i !== current(),
+      inert: i !== current(),
+    }),
+    /** The visually-leading (inline-start) arrow: logical prev in ltr, next in rtl. */
+    prevArrowProps: () => ({
+      'aria-label': rtl() ? 'Next slide' : 'Previous slide',
+      onclick: rtl() ? next : prev,
+      disabled: rtl() ? !canGoNext() : !canGoPrev(),
+    }),
+    /** The visually-trailing (inline-end) arrow: logical next in ltr, prev in rtl. */
+    nextArrowProps: () => ({
+      'aria-label': rtl() ? 'Previous slide' : 'Next slide',
+      onclick: rtl() ? prev : next,
+      disabled: rtl() ? !canGoPrev() : !canGoNext(),
+    }),
+    /** Spread onto a dot indicator. */
+    dotProps: (i: number) => ({
+      'aria-label': `Go to slide ${i + 1}`,
+      'aria-current': (i === current() ? 'true' : undefined) as 'true' | undefined,
+      onclick: () => go(i),
+    }),
+    /** Spread onto the persistent play/pause toggle (render only when autoplay > 0). */
+    playPauseProps: () => ({
+      'aria-label': userPaused ? 'Play autoplay' : 'Pause autoplay',
+      'aria-pressed': userPaused,
+      onclick: () => { userPaused = !userPaused },
+    }),
+  }
+}
+
+export type Carousel = ReturnType<typeof createCarousel>