@svgrid/grid 2.1.22 → 2.2.0

package/dist/SvRowGroupPanel.svelte

@@ -1,170 +1,170 @@
-<!--
-  A row-group panel (like the "drag columns to group" bar in enterprise grids).
-  Shows the current group-by columns as chips you can remove or drag to reorder,
-  plus a "+ Group by" menu to add one. It is also a drop target: a column drag
-  that carries `text/sv-column` (its column id) adds that column. Wire `onChange`
-  to a server group model's `setGroupBy`, or to client grouping.
-
-      <SvRowGroupPanel
-        columns={[{ id: 'region', label: 'Region' }, { id: 'country', label: 'Country' }]}
-        groupBy={view.groupBy}
-        onChange={(g) => ctl.setGroupBy(g)}
-      />
--->
-<script lang="ts">
-  type Col = { id: string; label: string }
-  type Props = {
-    /** Columns that can be grouped on. */
-    columns: Col[]
-    /** Current group-by column ids, outer to inner. */
-    groupBy: string[]
-    /** Called with the new group-by order. */
-    onChange: (groupBy: string[]) => void
-    /** Text shown when nothing is grouped. */
-    placeholder?: string
-  }
-  let { columns, groupBy, onChange, placeholder = 'Drag a column here to group by it' }: Props = $props()
-
-  const labelOf = (id: string) => columns.find((c) => c.id === id)?.label ?? id
-  const available = $derived(columns.filter((c) => !groupBy.includes(c.id)))
-
-  let dragIndex = $state<number | null>(null)
-
-  function remove(id: string) {
-    onChange(groupBy.filter((g) => g !== id))
-  }
-  function add(id: string) {
-    if (id && !groupBy.includes(id)) onChange([...groupBy, id])
-  }
-  function reorder(to: number) {
-    if (dragIndex === null || dragIndex === to) return
-    const next = [...groupBy]
-    const [moved] = next.splice(dragIndex, 1)
-    next.splice(to, 0, moved!)
-    dragIndex = null
-    onChange(next)
-  }
-  function onPanelDrop(e: DragEvent) {
-    const id = e.dataTransfer?.getData('text/sv-column')
-    if (id) add(id)
-  }
-  /** Keyboard equivalent of dragging a chip: moves the chip at `i` one slot earlier/later,
-   *  reusing `reorder()` (via `dragIndex`) so there is a single source of truth for the move. */
-  function moveByKeyboard(i: number, delta: number) {
-    const to = i + delta
-    if (to < 0 || to >= groupBy.length) return
-    dragIndex = i
-    reorder(to)
-  }
-  function onChipKeydown(e: KeyboardEvent, i: number) {
-    if (!e.altKey) return
-    if (e.key === 'ArrowLeft') {
-      e.preventDefault()
-      moveByKeyboard(i, -1)
-    } else if (e.key === 'ArrowRight') {
-      e.preventDefault()
-      moveByKeyboard(i, 1)
-    }
-  }
-</script>
-
-<div
-  class="sv-rowgroup-panel"
-  role="group"
-  aria-label="Row groups"
-  ondragover={(e) => e.preventDefault()}
-  ondrop={onPanelDrop}
->
-  <span class="sv-rgp-label" aria-hidden="true">Group by:</span>
-  {#if groupBy.length === 0}
-    <span class="sv-rgp-empty">{placeholder}</span>
-  {:else}
-    {#each groupBy as id, i (id)}
-      {#if i > 0}<span class="sv-rgp-sep" aria-hidden="true">›</span>{/if}
-      <!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
-      <span
-        class="sv-rgp-chip"
-        class:sv-rgp-chip-drag={dragIndex === i}
-        role="group"
-        tabindex="0"
-        aria-label={`Grouped by ${labelOf(id)}, position ${i + 1} of ${groupBy.length}. Press Alt+Arrow keys to reorder.`}
-        draggable="true"
-        ondragstart={() => (dragIndex = i)}
-        ondragend={() => (dragIndex = null)}
-        ondragover={(e) => e.preventDefault()}
-        ondrop={() => reorder(i)}
-        onkeydown={(e) => onChipKeydown(e, i)}
-      >
-        <span class="sv-rgp-grip" aria-hidden="true">⠿</span>
-        {labelOf(id)}
-        <button type="button" class="sv-rgp-x" onclick={() => remove(id)} aria-label={`Stop grouping by ${labelOf(id)}`}>×</button>
-      </span>
-    {/each}
-  {/if}
-  {#if available.length}
-    <select
-      class="sv-rgp-add"
-      aria-label="Add a group column"
-      onchange={(e) => { add(e.currentTarget.value); e.currentTarget.value = '' }}
-    >
-      <option value="">+ Group by</option>
-      {#each available as c (c.id)}<option value={c.id}>{c.label}</option>{/each}
-    </select>
-  {/if}
-</div>
-
-<style>
-  .sv-rowgroup-panel {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 6px;
-    padding: 8px 10px;
-    border: 1px dashed var(--sg-border, #cbd5e1);
-    border-radius: 10px;
-    background: var(--sg-header-bg, #f8fafc);
-    font-size: 13px;
-  }
-  .sv-rgp-label { color: var(--sg-muted, #64748b); font-weight: 600; }
-  .sv-rgp-empty { color: var(--sg-muted, #94a3b8); font-style: italic; }
-  .sv-rgp-sep { color: var(--sg-muted, #94a3b8); }
-  .sv-rgp-chip {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    padding: 3px 6px 3px 8px;
-    border-radius: 999px;
-    background: var(--sg-bg, #fff);
-    border: 1px solid var(--sg-border, #e2e8f0);
-    cursor: grab;
-    user-select: none;
-    font-weight: 600;
-  }
-  .sv-rgp-chip-drag { opacity: 0.5; }
-  .sv-rgp-grip { color: var(--sg-muted, #94a3b8); cursor: grab; }
-  .sv-rgp-x {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 16px;
-    height: 16px;
-    border: 0;
-    border-radius: 50%;
-    background: none;
-    color: var(--sg-muted, #64748b);
-    cursor: pointer;
-    font-size: 14px;
-    line-height: 1;
-  }
-  .sv-rgp-x:hover { background: var(--sg-header-bg, #f1f5f9); color: var(--sg-fg, #0f172a); }
-  .sv-rgp-add {
-    font: inherit;
-    font-size: 13px;
-    padding: 4px 8px;
-    border-radius: 8px;
-    border: 1px solid var(--sg-border, #e2e8f0);
-    background: var(--sg-bg, #fff);
-    color: var(--sg-accent, #2563eb);
-    cursor: pointer;
-  }
-</style>
+<!--
+  A row-group panel (like the "drag columns to group" bar in enterprise grids).
+  Shows the current group-by columns as chips you can remove or drag to reorder,
+  plus a "+ Group by" menu to add one. It is also a drop target: a column drag
+  that carries `text/sv-column` (its column id) adds that column. Wire `onChange`
+  to a server group model's `setGroupBy`, or to client grouping.
+
+      <SvRowGroupPanel
+        columns={[{ id: 'region', label: 'Region' }, { id: 'country', label: 'Country' }]}
+        groupBy={view.groupBy}
+        onChange={(g) => ctl.setGroupBy(g)}
+      />
+-->
+<script lang="ts">
+  type Col = { id: string; label: string }
+  type Props = {
+    /** Columns that can be grouped on. */
+    columns: Col[]
+    /** Current group-by column ids, outer to inner. */
+    groupBy: string[]
+    /** Called with the new group-by order. */
+    onChange: (groupBy: string[]) => void
+    /** Text shown when nothing is grouped. */
+    placeholder?: string
+  }
+  let { columns, groupBy, onChange, placeholder = 'Drag a column here to group by it' }: Props = $props()
+
+  const labelOf = (id: string) => columns.find((c) => c.id === id)?.label ?? id
+  const available = $derived(columns.filter((c) => !groupBy.includes(c.id)))
+
+  let dragIndex = $state<number | null>(null)
+
+  function remove(id: string) {
+    onChange(groupBy.filter((g) => g !== id))
+  }
+  function add(id: string) {
+    if (id && !groupBy.includes(id)) onChange([...groupBy, id])
+  }
+  function reorder(to: number) {
+    if (dragIndex === null || dragIndex === to) return
+    const next = [...groupBy]
+    const [moved] = next.splice(dragIndex, 1)
+    next.splice(to, 0, moved!)
+    dragIndex = null
+    onChange(next)
+  }
+  function onPanelDrop(e: DragEvent) {
+    const id = e.dataTransfer?.getData('text/sv-column')
+    if (id) add(id)
+  }
+  /** Keyboard equivalent of dragging a chip: moves the chip at `i` one slot earlier/later,
+   *  reusing `reorder()` (via `dragIndex`) so there is a single source of truth for the move. */
+  function moveByKeyboard(i: number, delta: number) {
+    const to = i + delta
+    if (to < 0 || to >= groupBy.length) return
+    dragIndex = i
+    reorder(to)
+  }
+  function onChipKeydown(e: KeyboardEvent, i: number) {
+    if (!e.altKey) return
+    if (e.key === 'ArrowLeft') {
+      e.preventDefault()
+      moveByKeyboard(i, -1)
+    } else if (e.key === 'ArrowRight') {
+      e.preventDefault()
+      moveByKeyboard(i, 1)
+    }
+  }
+</script>
+
+<div
+  class="sv-rowgroup-panel"
+  role="group"
+  aria-label="Row groups"
+  ondragover={(e) => e.preventDefault()}
+  ondrop={onPanelDrop}
+>
+  <span class="sv-rgp-label" aria-hidden="true">Group by:</span>
+  {#if groupBy.length === 0}
+    <span class="sv-rgp-empty">{placeholder}</span>
+  {:else}
+    {#each groupBy as id, i (id)}
+      {#if i > 0}<span class="sv-rgp-sep" aria-hidden="true">›</span>{/if}
+      <!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
+      <span
+        class="sv-rgp-chip"
+        class:sv-rgp-chip-drag={dragIndex === i}
+        role="group"
+        tabindex="0"
+        aria-label={`Grouped by ${labelOf(id)}, position ${i + 1} of ${groupBy.length}. Press Alt+Arrow keys to reorder.`}
+        draggable="true"
+        ondragstart={() => (dragIndex = i)}
+        ondragend={() => (dragIndex = null)}
+        ondragover={(e) => e.preventDefault()}
+        ondrop={() => reorder(i)}
+        onkeydown={(e) => onChipKeydown(e, i)}
+      >
+        <span class="sv-rgp-grip" aria-hidden="true">⠿</span>
+        {labelOf(id)}
+        <button type="button" class="sv-rgp-x" onclick={() => remove(id)} aria-label={`Stop grouping by ${labelOf(id)}`}>×</button>
+      </span>
+    {/each}
+  {/if}
+  {#if available.length}
+    <select
+      class="sv-rgp-add"
+      aria-label="Add a group column"
+      onchange={(e) => { add(e.currentTarget.value); e.currentTarget.value = '' }}
+    >
+      <option value="">+ Group by</option>
+      {#each available as c (c.id)}<option value={c.id}>{c.label}</option>{/each}
+    </select>
+  {/if}
+</div>
+
+<style>
+  .sv-rowgroup-panel {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 6px;
+    padding: 8px 10px;
+    border: 1px dashed var(--sg-border, #cbd5e1);
+    border-radius: 10px;
+    background: var(--sg-header-bg, #f8fafc);
+    font-size: 13px;
+  }
+  .sv-rgp-label { color: var(--sg-muted, #64748b); font-weight: 600; }
+  .sv-rgp-empty { color: var(--sg-muted, #94a3b8); font-style: italic; }
+  .sv-rgp-sep { color: var(--sg-muted, #94a3b8); }
+  .sv-rgp-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 3px 6px 3px 8px;
+    border-radius: 999px;
+    background: var(--sg-bg, #fff);
+    border: 1px solid var(--sg-border, #e2e8f0);
+    cursor: grab;
+    user-select: none;
+    font-weight: 600;
+  }
+  .sv-rgp-chip-drag { opacity: 0.5; }
+  .sv-rgp-grip { color: var(--sg-muted, #94a3b8); cursor: grab; }
+  .sv-rgp-x {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    border: 0;
+    border-radius: 50%;
+    background: none;
+    color: var(--sg-muted, #64748b);
+    cursor: pointer;
+    font-size: 14px;
+    line-height: 1;
+  }
+  .sv-rgp-x:hover { background: var(--sg-header-bg, #f1f5f9); color: var(--sg-fg, #0f172a); }
+  .sv-rgp-add {
+    font: inherit;
+    font-size: 13px;
+    padding: 4px 8px;
+    border-radius: 8px;
+    border: 1px solid var(--sg-border, #e2e8f0);
+    background: var(--sg-bg, #fff);
+    color: var(--sg-accent, #2563eb);
+    cursor: pointer;
+  }
+</style>

package/dist/SvScrollArea.svelte

@@ -1,61 +1,61 @@
-<script lang="ts">
-  /**
-   * SvScrollArea - a scroll container with the kit's themed custom scrollbars
-   * (Firefox `scrollbar-color` + Chromium `::-webkit-scrollbar`) consuming the
-   * `--sg-scrollbar-*` tokens, so any panel matches the grid/demos without
-   * hand-rolling scrollbar CSS. The fallbacks derive from `--sg-fg` so it also
-   * adapts to light/dark when no preset defines the tokens.
-   *
-   * ```svelte
-   * <SvScrollArea maxHeight="240px">…long content…</SvScrollArea>
-   * ```
-   */
-  import type { Snippet } from 'svelte'
-
-  type Props = {
-    maxHeight?: string
-    height?: string
-    /** Scroll horizontally instead of vertically. */
-    horizontal?: boolean
-    /** Accessible name for the scrollable region, announced by screen readers. */
-    ariaLabel?: string
-    children?: Snippet
-  }
-
-  let { maxHeight, height, horizontal = false, ariaLabel = 'Scrollable content', children }: Props = $props()
-</script>
-
-<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-<div
-  class="sv-scroll"
-  class:is-x={horizontal}
-  style:max-height={maxHeight}
-  style:height={height}
-  tabindex="0"
-  role="region"
-  aria-label={ariaLabel}
->
-  {@render children?.()}
-</div>
-
-<style>
-  .sv-scroll {
-    overflow: auto; overscroll-behavior: contain; min-height: 0;
-    scrollbar-width: thin;
-    scrollbar-color: var(--sg-scrollbar-thumb, color-mix(in srgb, var(--sg-fg, #0f172a) 26%, transparent)) var(--sg-scrollbar-bg, transparent);
-  }
-  .sv-scroll.is-x { overflow: auto hidden; }
-  .sv-scroll::-webkit-scrollbar { width: 12px; height: 12px; }
-  .sv-scroll::-webkit-scrollbar-track {
-    background: var(--sg-scrollbar-bg, transparent);
-    box-shadow: inset 1px 0 0 0 var(--sg-scrollbar-border, transparent);
-  }
-  .sv-scroll::-webkit-scrollbar-thumb {
-    background: var(--sg-scrollbar-thumb, color-mix(in srgb, var(--sg-fg, #0f172a) 26%, transparent));
-    border-radius: var(--sg-scrollbar-thumb-radius, 6px);
-    border: 3px solid transparent; background-clip: padding-box;
-  }
-  .sv-scroll::-webkit-scrollbar-thumb:hover { background: var(--sg-scrollbar-thumb-hover, color-mix(in srgb, var(--sg-fg, #0f172a) 38%, transparent)); }
-  .sv-scroll::-webkit-scrollbar-thumb:active { background: var(--sg-scrollbar-thumb-active, color-mix(in srgb, var(--sg-fg, #0f172a) 50%, transparent)); }
-  .sv-scroll::-webkit-scrollbar-corner { background: var(--sg-scrollbar-bg, transparent); }
-</style>
+<script lang="ts">
+  /**
+   * SvScrollArea - a scroll container with the kit's themed custom scrollbars
+   * (Firefox `scrollbar-color` + Chromium `::-webkit-scrollbar`) consuming the
+   * `--sg-scrollbar-*` tokens, so any panel matches the grid/demos without
+   * hand-rolling scrollbar CSS. The fallbacks derive from `--sg-fg` so it also
+   * adapts to light/dark when no preset defines the tokens.
+   *
+   * ```svelte
+   * <SvScrollArea maxHeight="240px">…long content…</SvScrollArea>
+   * ```
+   */
+  import type { Snippet } from 'svelte'
+
+  type Props = {
+    maxHeight?: string
+    height?: string
+    /** Scroll horizontally instead of vertically. */
+    horizontal?: boolean
+    /** Accessible name for the scrollable region, announced by screen readers. */
+    ariaLabel?: string
+    children?: Snippet
+  }
+
+  let { maxHeight, height, horizontal = false, ariaLabel = 'Scrollable content', children }: Props = $props()
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div
+  class="sv-scroll"
+  class:is-x={horizontal}
+  style:max-height={maxHeight}
+  style:height={height}
+  tabindex="0"
+  role="region"
+  aria-label={ariaLabel}
+>
+  {@render children?.()}
+</div>
+
+<style>
+  .sv-scroll {
+    overflow: auto; overscroll-behavior: contain; min-height: 0;
+    scrollbar-width: thin;
+    scrollbar-color: var(--sg-scrollbar-thumb, color-mix(in srgb, var(--sg-fg, #0f172a) 26%, transparent)) var(--sg-scrollbar-bg, transparent);
+  }
+  .sv-scroll.is-x { overflow: auto hidden; }
+  .sv-scroll::-webkit-scrollbar { width: 12px; height: 12px; }
+  .sv-scroll::-webkit-scrollbar-track {
+    background: var(--sg-scrollbar-bg, transparent);
+    box-shadow: inset 1px 0 0 0 var(--sg-scrollbar-border, transparent);
+  }
+  .sv-scroll::-webkit-scrollbar-thumb {
+    background: var(--sg-scrollbar-thumb, color-mix(in srgb, var(--sg-fg, #0f172a) 26%, transparent));
+    border-radius: var(--sg-scrollbar-thumb-radius, 6px);
+    border: 3px solid transparent; background-clip: padding-box;
+  }
+  .sv-scroll::-webkit-scrollbar-thumb:hover { background: var(--sg-scrollbar-thumb-hover, color-mix(in srgb, var(--sg-fg, #0f172a) 38%, transparent)); }
+  .sv-scroll::-webkit-scrollbar-thumb:active { background: var(--sg-scrollbar-thumb-active, color-mix(in srgb, var(--sg-fg, #0f172a) 50%, transparent)); }
+  .sv-scroll::-webkit-scrollbar-corner { background: var(--sg-scrollbar-bg, transparent); }
+</style>

package/dist/SvStepper.svelte

@@ -14,6 +14,7 @@
    * ```
    */
   import type { StepItem } from './ui-app.types'
+  import { createStepper } from './createStepper'
 
   type Props = {
     steps: ReadonlyArray<StepItem>
@@ -27,22 +28,18 @@
 
   let { steps, current, onChange, linear = true, orientation = 'horizontal' }: Props = $props()
 
-  const statusOf = (i: number): 'complete' | 'active' | 'upcoming' =>
-    i < current ? 'complete' : i === current ? 'active' : 'upcoming'
-  const clickable = (i: number) => (linear ? i <= current : true)
-  const go = (i: number) => { if (clickable(i) && i !== current) onChange?.(i) }
+  // Status, clickability and navigation live in the shared headless core.
+  const st = createStepper({ count: () => steps.length, current: () => current, onChange, linear: () => linear })
 </script>
 
 <ol class="sv-step sv-step--{orientation}">
   {#each steps as step, i (i)}
-    {@const status = statusOf(i)}
-    <li class="sv-step__item is-{status}" class:is-clickable={clickable(i)}>
+    {@const status = st.statusOf(i)}
+    <li class="sv-step__item is-{status}" class:is-clickable={st.clickable(i)}>
       <button
         type="button"
         class="sv-step__btn"
-        aria-current={status === 'active' ? 'step' : undefined}
-        disabled={!clickable(i)}
-        onclick={() => go(i)}
+        {...st.stepButtonProps(i)}
       >
         <span class="sv-step__marker" aria-hidden="true">
           {#if status === 'complete'}✓{:else}{i + 1}{/if}

package/dist/SvTagsInput.svelte

@@ -27,7 +27,7 @@
   }
 
   let {
-    value = [],
+    value = $bindable<string[]>([]),
     onChange,
     placeholder = 'Add tag…',
     disabled = false,
@@ -51,7 +51,8 @@
 
   const ti = createTagsInput({
     value: () => value,
-    onChange: (t) => onChange?.(t),
+    // Write `value` (so `bind:value` works) AND fire `onChange` (callback users).
+    onChange: (t) => { value = t; onChange?.(t) },
     disabled: () => disabled,
     unique: () => unique,
     max: () => max,

package/dist/SvTagsInput.svelte.d.ts

@@ -14,6 +14,6 @@ type Props = SvEditorProps & {
     /** Override the built-in strings (draft + remove aria-labels). */
     messages?: Partial<TagsMessages>;
 };
-declare const SvTagsInput: import("svelte").Component<Props, {}, "">;
+declare const SvTagsInput: import("svelte").Component<Props, {}, "value">;
 type SvTagsInput = ReturnType<typeof SvTagsInput>;
 export default SvTagsInput;