@svgrid/grid 1.2.21 → 1.2.23

package/src/SvSlider.svelte

@@ -0,0 +1,182 @@
+<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].
+   */
+  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()
+
+  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
+
+  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)
+  })
+
+  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)
+    }
+    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)
+  }
+
+  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"
+    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)}%`} role="slider" tabindex={disabled ? -1 : 0} aria-valuemin={min} aria-valuemax={hi} aria-valuenow={lo} aria-label="Minimum" onkeydown={(e) => onThumbKey(e, 'lo')}>
+        {#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')}>
+        {#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')}>
+        {#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>

package/src/SvSwitchButton.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+  /**
+   * SvSwitchButton - an on/off sliding switch (ARIA `switch`). Parity: Smart
+   * `smart-switch-button`. Controlled via `checked` + `onChange`; keyboard
+   * togglable; optional inline on/off labels.
+   */
+  type Props = {
+    checked?: boolean
+    onChange?: (checked: boolean) => void
+    disabled?: boolean
+    size?: 'sm' | 'md' | 'lg'
+    name?: string
+    ariaLabel?: string
+    /** Optional labels rendered inside the track. */
+    onLabel?: string
+    offLabel?: string
+  }
+
+  let {
+    checked = false,
+    onChange,
+    disabled = false,
+    size = 'md',
+    name,
+    ariaLabel,
+    onLabel,
+    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) }
+  }
+</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}
+>
+  <span class="sv-switch__track">
+    {#if onLabel || offLabel}
+      <span class="sv-switch__txt sv-switch__txt--on">{onLabel ?? ''}</span>
+      <span class="sv-switch__txt sv-switch__txt--off">{offLabel ?? ''}</span>
+    {/if}
+    <span class="sv-switch__thumb"></span>
+  </span>
+  {#if name}<input type="hidden" {name} value={checked ? 'true' : 'false'} />{/if}
+</button>
+
+<style>
+  .sv-switch {
+    --_accent: var(--sg-accent, #2563eb);
+    --_h: 22px; --_w: 40px;
+    display: inline-flex; align-items: center; background: none; border: 0; padding: 2px; cursor: pointer;
+  }
+  .sv-switch--sm { --_h: 18px; --_w: 32px; }
+  .sv-switch--lg { --_h: 28px; --_w: 52px; }
+  .sv-switch[disabled] { opacity: 0.5; cursor: not-allowed; }
+  .sv-switch__track {
+    position: relative; width: var(--_w); height: var(--_h); border-radius: 999px;
+    background: var(--sg-border, #cbd5e1); transition: background 0.16s;
+    display: inline-flex; align-items: center;
+  }
+  .sv-switch.is-on .sv-switch__track { background: var(--_accent); }
+  .sv-switch__thumb {
+    position: absolute; left: 2px; top: 50%; transform: translateY(-50%);
+    width: calc(var(--_h) - 4px); height: calc(var(--_h) - 4px); border-radius: 50%;
+    background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: left 0.16s;
+  }
+  .sv-switch.is-on .sv-switch__thumb { left: calc(var(--_w) - var(--_h) + 2px); }
+  .sv-switch__txt {
+    position: absolute; font-size: 9px; font-weight: 700; color: #fff; text-transform: uppercase;
+    top: 50%; transform: translateY(-50%);
+  }
+  .sv-switch__txt--on { left: 6px; opacity: 0; }
+  .sv-switch__txt--off { right: 5px; color: var(--sg-muted, #64748b); }
+  .sv-switch.is-on .sv-switch__txt--on { opacity: 1; }
+  .sv-switch.is-on .sv-switch__txt--off { opacity: 0; }
+  .sv-switch:focus-visible { outline: none; }
+  .sv-switch:focus-visible .sv-switch__track { outline: 2px solid var(--sg-focus-ring, var(--_accent)); outline-offset: 2px; }
+</style>

package/src/SvTabs.svelte

@@ -0,0 +1,122 @@
+<script lang="ts" module>
+  export type TabItem = { id: string; label: string; disabled?: boolean }
+</script>
+
+<script lang="ts">
+  /**
+   * 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).
+   */
+  import type { Snippet } from 'svelte'
+
+  type Props = {
+    tabs: ReadonlyArray<TabItem>
+    value?: string
+    onChange?: (id: string) => void
+    orientation?: 'horizontal' | 'vertical'
+    /** 'line' underline (default) or 'pill' segmented look. */
+    variant?: 'line' | 'pill'
+    /** Activate on focus (automatic) vs. on Enter/Space (manual). Default automatic. */
+    activation?: 'automatic' | 'manual'
+    panel?: Snippet<[string]>
+    ariaLabel?: string
+  }
+
+  let {
+    tabs,
+    value = $bindable(),
+    onChange,
+    orientation = 'horizontal',
+    variant = 'line',
+    activation = 'automatic',
+    panel,
+    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
+
+  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)
+    }
+  }
+</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}>
+    {#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}
+      >{tab.label}</button>
+    {/each}
+  </div>
+  {#if panel}
+    <div class="sv-tabs__panel" role="tabpanel" id={`panel-${active}`} tabindex="0">
+      {@render panel(active)}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .sv-tabs { --_accent: var(--sg-accent, #2563eb); display: flex; gap: 0; }
+  .sv-tabs--horizontal { flex-direction: column; }
+  .sv-tabs--vertical { flex-direction: row; }
+  .sv-tabs__list { display: flex; gap: 2px; }
+  .sv-tabs--horizontal .sv-tabs__list { border-bottom: 1px solid var(--sg-border, #e2e8f0); }
+  .sv-tabs--vertical .sv-tabs__list { flex-direction: column; border-right: 1px solid var(--sg-border, #e2e8f0); }
+  .sv-tabs--pill .sv-tabs__list { border: 0; background: var(--sg-header-bg, #f1f5f9); padding: 3px; border-radius: 9px; gap: 3px; }
+
+  .sv-tabs__tab {
+    background: none; border: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--sg-muted, #64748b);
+    padding: 9px 14px; cursor: pointer; white-space: nowrap; position: relative;
+  }
+  .sv-tabs__tab:hover:not(:disabled):not(.is-active) { color: var(--sg-fg, #0f172a); }
+  .sv-tabs__tab:disabled { opacity: 0.45; cursor: not-allowed; }
+  .sv-tabs__tab:focus-visible { outline: 2px solid var(--sg-focus-ring, var(--_accent)); outline-offset: -2px; border-radius: 6px; }
+
+  .sv-tabs--line .sv-tabs__tab.is-active { color: var(--_accent); }
+  .sv-tabs--line .sv-tabs__tab.is-active::after {
+    content: ''; position: absolute; left: 8px; right: 8px; height: 2px; background: var(--_accent);
+  }
+  .sv-tabs--horizontal.sv-tabs--line .sv-tabs__tab.is-active::after { bottom: -1px; }
+  .sv-tabs--vertical.sv-tabs--line .sv-tabs__tab.is-active::after { top: 8px; bottom: 8px; left: auto; right: -1px; width: 2px; height: auto; }
+
+  .sv-tabs--pill .sv-tabs__tab { border-radius: 7px; padding: 7px 14px; }
+  .sv-tabs--pill .sv-tabs__tab.is-active { background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a); box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
+
+  .sv-tabs__panel { padding: 16px 2px; outline: none; }
+</style>

package/src/SvTagsInput.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  /**
+   * 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[].
+   */
+  type Props = {
+    value?: string[]
+    onChange?: (tags: string[]) => void
+    placeholder?: string
+    disabled?: boolean
+    /** Reject duplicate tags. Default true. */
+    unique?: boolean
+    max?: number
+    name?: string
+    ariaLabel?: string
+  }
+
+  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) }
+  }
+</script>
+
+<div class="sv-tags" class:is-disabled={disabled} role="group" aria-label={ariaLabel}>
+  {#each value as tag, i (tag + i)}
+    <span class="sv-tags__chip">
+      <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>
+      {/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)}
+  />
+  {#if name}<input type="hidden" {name} value={value.join(',')} />{/if}
+</div>
+
+<style>
+  .sv-tags {
+    --_accent: var(--sg-accent, #2563eb);
+    display: flex; flex-wrap: wrap; gap: 5px; align-items: center; width: 280px; min-height: 34px; padding: 4px 6px;
+    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-tags:focus-within { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); }
+  .sv-tags.is-disabled { opacity: 0.6; }
+  .sv-tags__chip {
+    display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 4px 0 8px;
+    background: color-mix(in srgb, var(--_accent) 14%, transparent); color: var(--_accent);
+    border-radius: 5px; font-size: 12px; font-weight: 600;
+  }
+  .sv-tags__x { background: none; border: 0; color: inherit; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; opacity: 0.7; }
+  .sv-tags__x:hover { opacity: 1; }
+  .sv-tags__input { flex: 1; min-width: 80px; border: 0; background: none; outline: none; color: inherit; font: inherit; font-size: 13px; height: 24px; }
+</style>