@svgrid/grid 2.2.0 → 2.2.1

package/dist/SvMenuList.svelte

@@ -1,117 +1,117 @@
-<script lang="ts" module>
-  // MenuItem lives in a plain `.ts` module (breaks a Vite dev import cycle); it is
-  // re-exported here so existing `import { type MenuItem } from './SvMenuList.svelte'`
-  // sites keep working.
-  export type { MenuItem } from './menu-item'
-</script>
-
-<script lang="ts">
-  /**
-   * SvMenuList - the recursive menu surface behind SvMenu: a WAI-ARIA `menu` with
-   * roving focus, submenus (hover + ArrowRight), separators, icons and shortcuts.
-   * Rendered inside a portalled panel by SvMenu; it self-imports for submenus.
-   */
-  import Self from './SvMenuList.svelte'
-  import { type EditorDir } from './editor-contract'
-  import type { MenuItem } from './menu-item'
-  import { createMenu } from './createMenu.svelte'
-
-  let {
-    items,
-    onclose,
-    onselect,
-    submenu = false,
-    oncollapse,
-    dir,
-  }: {
-    items: ReadonlyArray<MenuItem>
-    /** Close the WHOLE menu (a leaf was chosen, Escape, or outside-click). */
-    onclose: () => void
-    /** Report the chosen leaf item. */
-    onselect: (item: MenuItem) => void
-    submenu?: boolean
-    /** Collapse just THIS submenu level (ArrowLeft, or ArrowRight under `rtl`)
-     *  and refocus the item that opened it. Only meaningful when `submenu` is
-     *  true; the root list has nowhere to collapse into. */
-    oncollapse?: () => void
-    /** Text direction; under `rtl` the ArrowRight/ArrowLeft submenu open/close
-     *  keys swap (see createTree.svelte.ts for the reference pattern). */
-    dir?: EditorDir
-  } = $props()
-
-  let listEl = $state<HTMLDivElement | null>(null)
-
-  // Roving focus, submenu open/collapse and the full keyboard contract live in
-  // the shared headless core; this component only renders + drives real DOM
-  // focus (the core stays DOM-free). See createMenu.svelte.ts.
-  const menu = createMenu({
-    items: () => items,
-    onSelect: (item) => onselect(item),
-    onClose: () => onclose(),
-    submenu: () => submenu,
-    onCollapse: () => oncollapse?.(),
-    dir: () => dir,
-    focusItem: (i) => queueMicrotask(() => listEl?.querySelector<HTMLElement>(`[data-mi="${i}"]`)?.focus()),
-  })
-</script>
-
-<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-<div bind:this={listEl} class="sv-menu__list" class:is-submenu={submenu} {...menu.listProps()}>
-  {#each items as item, i (i)}
-    {#if item.separator}
-      <div class="sv-menu__sep" role="separator"></div>
-    {:else}
-      <div class="sv-menu__itemwrap">
-        <button
-          type="button"
-          class="sv-menu__item"
-          class:is-active={menu.isActive(i)}
-          {...menu.itemProps(i)}
-        >
-          <span class="sv-menu__icon">{#if item.icon}{@render item.icon()}{/if}</span>
-          <span class="sv-menu__label">{item.label}</span>
-          {#if item.shortcut}<span class="sv-menu__shortcut">{item.shortcut}</span>{/if}
-          {#if item.children?.length}<svg class="sv-menu__chev" viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6" /></svg>{/if}
-        </button>
-        {#if item.children?.length && menu.isSubOpen(i)}
-          <div class="sv-menu__flyout">
-            <Self
-              items={item.children}
-              {onclose}
-              {onselect}
-              oncollapse={() => menu.focus(i)}
-              {dir}
-              submenu
-            />
-          </div>
-        {/if}
-      </div>
-    {/if}
-  {/each}
-</div>
-
-<style>
-  .sv-menu__list { display: flex; flex-direction: column; min-width: 180px; padding: 4px; }
-  .sv-menu__sep { height: 1px; background: var(--sg-border, #e2e8f0); margin: 4px 6px; }
-  .sv-menu__itemwrap { position: relative; }
-  .sv-menu__item {
-    display: flex; align-items: center; gap: 9px; width: 100%; box-sizing: border-box;
-    padding: 7px 10px; background: none; border: 0; border-radius: 6px; cursor: pointer;
-    font: inherit; font-size: 13px; color: var(--sg-fg, #0f172a); text-align: start;
-    transition: background 0.1s;
-  }
-  .sv-menu__item.is-active:not([disabled]), .sv-menu__item:hover:not([disabled]) { background: var(--sg-row-hover-bg, #f1f5f9); }
-  .sv-menu__item:focus-visible { outline: 2px solid var(--sg-focus-ring, var(--sg-accent, #2563eb)); outline-offset: -2px; }
-  .sv-menu__item[disabled] { opacity: 0.45; cursor: default; }
-  .sv-menu__icon { display: inline-flex; width: 16px; flex: none; color: var(--sg-muted, #64748b); }
-  .sv-menu__icon:empty { width: 0; }
-  .sv-menu__label { flex: 1; white-space: nowrap; }
-  .sv-menu__shortcut { color: var(--sg-muted, #94a3b8); font-size: 11.5px; margin-inline-start: 12px; }
-  .sv-menu__chev { color: var(--sg-muted, #94a3b8); flex: none; }
-  .sv-menu[dir='rtl'] .sv-menu__chev, .sv-menu__list.is-submenu .sv-menu__chev { transform: scaleX(-1); }
-  .sv-menu__flyout {
-    position: absolute; top: -5px; inset-inline-start: 100%; z-index: 1;
-    background: var(--sg-bg, #fff); border: 1px solid var(--sg-border, #e2e8f0);
-    border-radius: 10px; box-shadow: 0 16px 40px -12px rgba(15,23,42,0.32); margin-inline-start: 2px;
-  }
-</style>
+<script lang="ts" module>
+  // MenuItem lives in a plain `.ts` module (breaks a Vite dev import cycle); it is
+  // re-exported here so existing `import { type MenuItem } from './SvMenuList.svelte'`
+  // sites keep working.
+  export type { MenuItem } from './menu-item'
+</script>
+
+<script lang="ts">
+  /**
+   * SvMenuList - the recursive menu surface behind SvMenu: a WAI-ARIA `menu` with
+   * roving focus, submenus (hover + ArrowRight), separators, icons and shortcuts.
+   * Rendered inside a portalled panel by SvMenu; it self-imports for submenus.
+   */
+  import Self from './SvMenuList.svelte'
+  import { type EditorDir } from './editor-contract'
+  import type { MenuItem } from './menu-item'
+  import { createMenu } from './createMenu.svelte'
+
+  let {
+    items,
+    onclose,
+    onselect,
+    submenu = false,
+    oncollapse,
+    dir,
+  }: {
+    items: ReadonlyArray<MenuItem>
+    /** Close the WHOLE menu (a leaf was chosen, Escape, or outside-click). */
+    onclose: () => void
+    /** Report the chosen leaf item. */
+    onselect: (item: MenuItem) => void
+    submenu?: boolean
+    /** Collapse just THIS submenu level (ArrowLeft, or ArrowRight under `rtl`)
+     *  and refocus the item that opened it. Only meaningful when `submenu` is
+     *  true; the root list has nowhere to collapse into. */
+    oncollapse?: () => void
+    /** Text direction; under `rtl` the ArrowRight/ArrowLeft submenu open/close
+     *  keys swap (see createTree.svelte.ts for the reference pattern). */
+    dir?: EditorDir
+  } = $props()
+
+  let listEl = $state<HTMLDivElement | null>(null)
+
+  // Roving focus, submenu open/collapse and the full keyboard contract live in
+  // the shared headless core; this component only renders + drives real DOM
+  // focus (the core stays DOM-free). See createMenu.svelte.ts.
+  const menu = createMenu({
+    items: () => items,
+    onSelect: (item) => onselect(item),
+    onClose: () => onclose(),
+    submenu: () => submenu,
+    onCollapse: () => oncollapse?.(),
+    dir: () => dir,
+    focusItem: (i) => queueMicrotask(() => listEl?.querySelector<HTMLElement>(`[data-mi="${i}"]`)?.focus()),
+  })
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<div bind:this={listEl} class="sv-menu__list" class:is-submenu={submenu} {...menu.listProps()}>
+  {#each items as item, i (i)}
+    {#if item.separator}
+      <div class="sv-menu__sep" role="separator"></div>
+    {:else}
+      <div class="sv-menu__itemwrap">
+        <button
+          type="button"
+          class="sv-menu__item"
+          class:is-active={menu.isActive(i)}
+          {...menu.itemProps(i)}
+        >
+          <span class="sv-menu__icon">{#if item.icon}{@render item.icon()}{/if}</span>
+          <span class="sv-menu__label">{item.label}</span>
+          {#if item.shortcut}<span class="sv-menu__shortcut">{item.shortcut}</span>{/if}
+          {#if item.children?.length}<svg class="sv-menu__chev" viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6" /></svg>{/if}
+        </button>
+        {#if item.children?.length && menu.isSubOpen(i)}
+          <div class="sv-menu__flyout">
+            <Self
+              items={item.children}
+              {onclose}
+              {onselect}
+              oncollapse={() => menu.focus(i)}
+              {dir}
+              submenu
+            />
+          </div>
+        {/if}
+      </div>
+    {/if}
+  {/each}
+</div>
+
+<style>
+  .sv-menu__list { display: flex; flex-direction: column; min-width: 180px; padding: 4px; }
+  .sv-menu__sep { height: 1px; background: var(--sg-border, #e2e8f0); margin: 4px 6px; }
+  .sv-menu__itemwrap { position: relative; }
+  .sv-menu__item {
+    display: flex; align-items: center; gap: 9px; width: 100%; box-sizing: border-box;
+    padding: 7px 10px; background: none; border: 0; border-radius: 6px; cursor: pointer;
+    font: inherit; font-size: 13px; color: var(--sg-fg, #0f172a); text-align: start;
+    transition: background 0.1s;
+  }
+  .sv-menu__item.is-active:not([disabled]), .sv-menu__item:hover:not([disabled]) { background: var(--sg-row-hover-bg, #f1f5f9); }
+  .sv-menu__item:focus-visible { outline: 2px solid var(--sg-focus-ring, var(--sg-accent, #2563eb)); outline-offset: -2px; }
+  .sv-menu__item[disabled] { opacity: 0.45; cursor: default; }
+  .sv-menu__icon { display: inline-flex; width: 16px; flex: none; color: var(--sg-muted, #64748b); }
+  .sv-menu__icon:empty { width: 0; }
+  .sv-menu__label { flex: 1; white-space: nowrap; }
+  .sv-menu__shortcut { color: var(--sg-muted, #94a3b8); font-size: 11.5px; margin-inline-start: 12px; }
+  .sv-menu__chev { color: var(--sg-muted, #94a3b8); flex: none; }
+  .sv-menu[dir='rtl'] .sv-menu__chev, .sv-menu__list.is-submenu .sv-menu__chev { transform: scaleX(-1); }
+  .sv-menu__flyout {
+    position: absolute; top: -5px; inset-inline-start: 100%; z-index: 1;
+    background: var(--sg-bg, #fff); border: 1px solid var(--sg-border, #e2e8f0);
+    border-radius: 10px; box-shadow: 0 16px 40px -12px rgba(15,23,42,0.32); margin-inline-start: 2px;
+  }
+</style>

package/dist/SvNumberInput.svelte

@@ -1,131 +1,131 @@
-<script lang="ts">
-  /**
-   * SvNumberInput - a numeric input with min/max/step, spinner buttons, optional
-   * thousands grouping + precision, prefix/suffix. Parity: Smart `smart-number-input`.
-   * Emits number | null. The SvGrid number cell editor, standalone too.
-   *
-   * This is the styled renderer over the headless `createNumberInput` core - the
-   * same split as the grid (`createSvGrid` / `<SvGrid>`): parse/format/clamp,
-   * spinner + keyboard and ARIA all come from the core via prop-getters.
-   */
-  import SvRepeatButton from './SvRepeatButton.svelte'
-  import SvField from './SvField.svelte'
-  import { nextEditorId, type SvEditorProps } from './editor-contract'
-  import { createNumberInput } from './createNumberInput.svelte'
-
-  type Props = SvEditorProps & {
-    value?: number | null
-    onChange?: (value: number | null) => void
-    min?: number
-    max?: number
-    step?: number
-    precision?: number
-    /** Group thousands (1,234) on display. */
-    grouping?: boolean
-    prefix?: string
-    suffix?: string
-    placeholder?: string
-    spinButtons?: boolean
-    /** Show a clear (x) button when there is a value. */
-    clearable?: boolean
-  }
-
-  let {
-    value = $bindable<number | null>(null),
-    onChange,
-    min = -Infinity,
-    max = Infinity,
-    step = 1,
-    precision,
-    grouping = false,
-    prefix = '',
-    suffix = '',
-    placeholder,
-    disabled = false,
-    readonly = false,
-    spinButtons = true,
-    clearable = false,
-    name,
-    size = 'md',
-    ariaLabel,
-    invalid = false,
-    required = false,
-    error,
-    label,
-    hint,
-    dir,
-    id,
-  }: Props = $props()
-
-  const autoId = nextEditorId('sv-num')
-  const uid = $derived(id ?? autoId)
-
-  const num = createNumberInput({
-    value: () => value,
-    // Write `value` (so `bind:value` works) AND fire `onChange` (callback users).
-    onChange: (v) => { value = v; onChange?.(v) },
-    min: () => min,
-    max: () => max,
-    step: () => step,
-    precision: () => precision,
-    grouping: () => grouping,
-    prefix: () => prefix,
-    suffix: () => suffix,
-    placeholder: () => placeholder,
-    disabled: () => disabled,
-    readonly: () => readonly,
-    id: () => uid,
-    invalid: () => invalid,
-    required: () => required,
-    error: () => error,
-    hint: () => hint,
-    ariaLabel: () => ariaLabel,
-  })
-</script>
-
-<SvField id={uid} {label} {hint} {error} {required} {dir}>
-  <div class="sv-num sv-num--{size}" class:is-disabled={disabled} class:is-invalid={invalid}>
-    <input class="sv-num__input" {...num.inputProps()} />
-    {#if clearable && value != null && !disabled && !readonly}
-      <button type="button" class="sv-num__clear" aria-label="Clear" tabindex="-1" onclick={() => { value = null; onChange?.(null) }}>
-        <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18" /></svg>
-      </button>
-    {/if}
-    {#if spinButtons}
-      <div class="sv-num__spin">
-        <SvRepeatButton size="sm" variant="ghost" ariaLabel="Increment" onclick={num.increment}>
-          <svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M6 15l6-6 6 6" /></svg>
-        </SvRepeatButton>
-        <SvRepeatButton size="sm" variant="ghost" ariaLabel="Decrement" onclick={num.decrement}>
-          <svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6" /></svg>
-        </SvRepeatButton>
-      </div>
-    {/if}
-    {#if name}<input type="hidden" {name} value={value ?? ''} />{/if}
-  </div>
-</SvField>
-
-<style>
-  .sv-num {
-    --_accent: var(--sg-accent, #2563eb);
-    display: inline-flex; align-items: stretch; width: 150px;
-    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);
-    overflow: hidden;
-  }
-  .sv-num:focus-within { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); }
-  .sv-num.is-invalid { border-color: var(--sg-danger, #dc2626); }
-  .sv-num.is-invalid:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-danger, #dc2626) 22%, transparent); }
-  .sv-num.is-disabled { opacity: 0.6; }
-  .sv-num__input {
-    flex: 1; min-width: 0; border: 0; background: none; outline: none; color: inherit; font: inherit;
-    text-align: end; padding: 0 8px;
-  }
-  .sv-num--sm { height: 28px; font-size: 12px; }
-  .sv-num--md { height: 34px; font-size: 13px; }
-  .sv-num--lg { height: 40px; font-size: 15px; }
-  .sv-num__clear { display: grid; place-items: center; width: 22px; align-self: center; flex: none; background: none; border: 0; color: var(--sg-muted, #64748b); cursor: pointer; border-radius: 4px; }
-  .sv-num__clear:hover { color: var(--sg-danger, #dc2626); }
-  .sv-num__spin { display: flex; flex-direction: column; border-inline-start: 1px solid var(--sg-border, #e2e8f0); }
-  .sv-num__spin :global(.sv-repeat) { flex: 1; padding: 0 6px; border-radius: 0; }
-</style>
+<script lang="ts">
+  /**
+   * SvNumberInput - a numeric input with min/max/step, spinner buttons, optional
+   * thousands grouping + precision, prefix/suffix. Parity: Smart `smart-number-input`.
+   * Emits number | null. The SvGrid number cell editor, standalone too.
+   *
+   * This is the styled renderer over the headless `createNumberInput` core - the
+   * same split as the grid (`createSvGrid` / `<SvGrid>`): parse/format/clamp,
+   * spinner + keyboard and ARIA all come from the core via prop-getters.
+   */
+  import SvRepeatButton from './SvRepeatButton.svelte'
+  import SvField from './SvField.svelte'
+  import { nextEditorId, type SvEditorProps } from './editor-contract'
+  import { createNumberInput } from './createNumberInput.svelte'
+
+  type Props = SvEditorProps & {
+    value?: number | null
+    onChange?: (value: number | null) => void
+    min?: number
+    max?: number
+    step?: number
+    precision?: number
+    /** Group thousands (1,234) on display. */
+    grouping?: boolean
+    prefix?: string
+    suffix?: string
+    placeholder?: string
+    spinButtons?: boolean
+    /** Show a clear (x) button when there is a value. */
+    clearable?: boolean
+  }
+
+  let {
+    value = $bindable<number | null>(null),
+    onChange,
+    min = -Infinity,
+    max = Infinity,
+    step = 1,
+    precision,
+    grouping = false,
+    prefix = '',
+    suffix = '',
+    placeholder,
+    disabled = false,
+    readonly = false,
+    spinButtons = true,
+    clearable = false,
+    name,
+    size = 'md',
+    ariaLabel,
+    invalid = false,
+    required = false,
+    error,
+    label,
+    hint,
+    dir,
+    id,
+  }: Props = $props()
+
+  const autoId = nextEditorId('sv-num')
+  const uid = $derived(id ?? autoId)
+
+  const num = createNumberInput({
+    value: () => value,
+    // Write `value` (so `bind:value` works) AND fire `onChange` (callback users).
+    onChange: (v) => { value = v; onChange?.(v) },
+    min: () => min,
+    max: () => max,
+    step: () => step,
+    precision: () => precision,
+    grouping: () => grouping,
+    prefix: () => prefix,
+    suffix: () => suffix,
+    placeholder: () => placeholder,
+    disabled: () => disabled,
+    readonly: () => readonly,
+    id: () => uid,
+    invalid: () => invalid,
+    required: () => required,
+    error: () => error,
+    hint: () => hint,
+    ariaLabel: () => ariaLabel,
+  })
+</script>
+
+<SvField id={uid} {label} {hint} {error} {required} {dir}>
+  <div class="sv-num sv-num--{size}" class:is-disabled={disabled} class:is-invalid={invalid}>
+    <input class="sv-num__input" {...num.inputProps()} />
+    {#if clearable && value != null && !disabled && !readonly}
+      <button type="button" class="sv-num__clear" aria-label="Clear" tabindex="-1" onclick={() => { value = null; onChange?.(null) }}>
+        <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18" /></svg>
+      </button>
+    {/if}
+    {#if spinButtons}
+      <div class="sv-num__spin">
+        <SvRepeatButton size="sm" variant="ghost" ariaLabel="Increment" onclick={num.increment}>
+          <svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M6 15l6-6 6 6" /></svg>
+        </SvRepeatButton>
+        <SvRepeatButton size="sm" variant="ghost" ariaLabel="Decrement" onclick={num.decrement}>
+          <svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6" /></svg>
+        </SvRepeatButton>
+      </div>
+    {/if}
+    {#if name}<input type="hidden" {name} value={value ?? ''} />{/if}
+  </div>
+</SvField>
+
+<style>
+  .sv-num {
+    --_accent: var(--sg-accent, #2563eb);
+    display: inline-flex; align-items: stretch; width: 150px;
+    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);
+    overflow: hidden;
+  }
+  .sv-num:focus-within { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); }
+  .sv-num.is-invalid { border-color: var(--sg-danger, #dc2626); }
+  .sv-num.is-invalid:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-danger, #dc2626) 22%, transparent); }
+  .sv-num.is-disabled { opacity: 0.6; }
+  .sv-num__input {
+    flex: 1; min-width: 0; border: 0; background: none; outline: none; color: inherit; font: inherit;
+    text-align: end; padding: 0 8px;
+  }
+  .sv-num--sm { height: 28px; font-size: 12px; }
+  .sv-num--md { height: 34px; font-size: 13px; }
+  .sv-num--lg { height: 40px; font-size: 15px; }
+  .sv-num__clear { display: grid; place-items: center; width: 22px; align-self: center; flex: none; background: none; border: 0; color: var(--sg-muted, #64748b); cursor: pointer; border-radius: 4px; }
+  .sv-num__clear:hover { color: var(--sg-danger, #dc2626); }
+  .sv-num__spin { display: flex; flex-direction: column; border-inline-start: 1px solid var(--sg-border, #e2e8f0); }
+  .sv-num__spin :global(.sv-repeat) { flex: 1; padding: 0 6px; border-radius: 0; }
+</style>