@svgrid/grid 2.2.16 → 2.2.18

package/dist/SvMaskedInput.svelte.d.ts

@@ -4,7 +4,9 @@
    * the masked display value and the raw (unmasked) value.
    *
    * The styled renderer over the headless `createMaskedInput` core; the mask
-   * formatting + state live in the core, spread here via prop-getters.
+   * formatting + state live in the core, spread here via prop-getters. The box,
+   * size, invalid state, clear button and adornments are owned by SvField's
+   * `frame` chrome.
    */
 import type { Snippet } from 'svelte';
 import { type SvEditorProps } from './editor-contract';
@@ -16,9 +18,22 @@ type Props = SvEditorProps & {
     placeholder?: string;
     /** Show a clear (x) button when there is a value. */
     clearable?: boolean;
-    /** Leading / trailing icon adornments. */
+    /** Leading adornment (icon/button) inside the field. */
+    leading?: Snippet;
+    /** Trailing adornment (icon/button) inside the field. */
+    trailing?: Snippet;
+    /** Plain-text affix at the start. */
+    prefix?: string;
+    /** Plain-text affix at the end. */
+    suffix?: string;
+    /** @deprecated Use `leading`. */
     prefixIcon?: Snippet;
+    /** @deprecated Use `trailing`. */
     suffixIcon?: Snippet;
+    /** Stretch to the container width. */
+    block?: boolean;
+    /** Control width in px (ignored when `block`). Default 200. */
+    width?: number;
 };
 declare const SvMaskedInput: import("svelte").Component<Props, {}, "value">;
 type SvMaskedInput = ReturnType<typeof SvMaskedInput>;

package/dist/SvMenuList.svelte

@@ -15,6 +15,7 @@
   import { type EditorDir } from './editor-contract'
   import type { MenuItem } from './menu-item'
   import { createMenu } from './createMenu.svelte'
+  import { computePosition, autoUpdate, type Placement } from './positioning'
 
   let {
     items,
@@ -53,6 +54,32 @@
     dir: () => dir,
     focusItem: (i) => queueMicrotask(() => listEl?.querySelector<HTMLElement>(`[data-mi="${i}"]`)?.focus()),
   })
+
+  // Position an open submenu flyout with the shared engine: prefer opening to the
+  // side away from the reading direction, flip to the opposite side when there is
+  // no room, and clamp vertically to stay in view. Kept absolute (relative to the
+  // itemwrap) so a nested flyout is never clipped by a scroll container.
+  const startSide: Placement = dir === 'rtl' ? 'left-start' : 'right-start'
+  function flyout(node: HTMLElement) {
+    const wrap = node.parentElement // .sv-menu__itemwrap
+    const btn = wrap?.querySelector<HTMLElement>(':scope > .sv-menu__item') ?? null
+    const update = () => {
+      if (!btn || !wrap) return
+      const r = btn.getBoundingClientRect()
+      const w = wrap.getBoundingClientRect()
+      const f = { width: node.offsetWidth || 200, height: node.offsetHeight || 120 }
+      const p = computePosition(
+        { x: r.left, y: r.top, width: r.width, height: r.height },
+        f,
+        { placement: startSide, offset: 2, padding: 8 },
+      )
+      node.style.left = `${p.x - w.left}px`
+      node.style.top = `${p.y - w.top}px`
+    }
+    if (!btn) { update(); return {} }
+    const stop = autoUpdate(btn, node, update)
+    return { destroy() { stop() } }
+  }
 </script>
 
 <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
@@ -74,7 +101,7 @@
           {#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">
+          <div class="sv-menu__flyout" use:flyout>
             <Self
               items={item.children}
               {onclose}
@@ -109,9 +136,11 @@
   .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); }
+  /* top/left are the pre-JS fallback (open to the right); the `flyout` action
+     overrides them with engine-computed offsets (flip + vertical clamp). */
   .sv-menu__flyout {
-    position: absolute; top: -5px; inset-inline-start: 100%; z-index: 1;
+    position: absolute; top: -5px; left: 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;
+    border-radius: 10px; box-shadow: 0 16px 40px -12px rgba(15,23,42,0.32);
   }
 </style>

package/dist/SvMenubar.svelte

@@ -0,0 +1,200 @@
+<script lang="ts" module>
+  export type MenubarMenu = {
+    /** Trigger label on the bar. */
+    label: string
+    /** The dropdown's items (submenus, separators, icons, shortcuts all work). */
+    items: import('./menu-item').MenuItem[]
+    disabled?: boolean
+  }
+</script>
+
+<script lang="ts">
+  /**
+   * SvMenubar - an application menu bar: a horizontal row of menu buttons
+   * (File / Edit / View ...) that each open a dropdown built on SvMenuList.
+   * Roving focus across the bar, ArrowLeft/Right move between menus, ArrowDown /
+   * Enter open the active one, hovering another trigger switches while a menu is
+   * open, and Escape closes and returns focus to the trigger. The dropdown is
+   * portalled and positioned by the shared engine.
+   *
+   * ```svelte
+   * <SvMenubar menus={[{ label: 'File', items: fileItems }, ...]}
+   *            onSelect={(i) => run(i)} />
+   * ```
+   */
+  import { portalToBody, popIn } from './popover'
+  import { computePosition, autoUpdate, type ComputePositionResult } from './positioning'
+  import { createDismissableLayer } from './a11y/dismissable'
+  import { type EditorDir } from './editor-contract'
+  import SvMenuList from './SvMenuList.svelte'
+  import type { MenuItem } from './menu-item'
+
+  type Props = {
+    menus: ReadonlyArray<MenubarMenu>
+    onSelect?: (item: MenuItem) => void
+    ariaLabel?: string
+    dir?: EditorDir
+  }
+
+  let { menus, onSelect, ariaLabel = 'Menu bar', dir }: Props = $props()
+
+  const resolvedDir = $derived(dir === 'ltr' || dir === 'rtl' ? dir : undefined)
+  const rtl = $derived(resolvedDir === 'rtl')
+
+  let triggerEls = $state<(HTMLButtonElement | null)[]>([])
+  let panelEl = $state<HTMLDivElement | null>(null)
+  let openIndex = $state(-1)
+  let activeIndex = $state(0)
+  let pos = $state<ComputePositionResult>({ x: 0, y: 0, placement: 'bottom-start', side: 'bottom', align: 'start', maxWidth: 0, maxHeight: 0 })
+
+  const enabled = (i: number) => !menus[i]?.disabled
+
+  function focusTrigger(i: number) { queueMicrotask(() => triggerEls[i]?.focus()) }
+  function focusFirstItem() {
+    queueMicrotask(() => panelEl?.querySelector<HTMLElement>('[role="menuitem"]:not([disabled])')?.focus())
+  }
+
+  function open(i: number) {
+    if (!enabled(i)) return
+    openIndex = i
+    activeIndex = i
+    focusFirstItem()
+  }
+  function close(refocus = true) {
+    const i = openIndex
+    openIndex = -1
+    if (refocus && i >= 0) focusTrigger(i)
+  }
+  function toggle(i: number) { if (openIndex === i) close(); else open(i) }
+  function onTriggerEnter(i: number) {
+    // While a menu is open, hovering another trigger switches to it (menubar UX).
+    if (openIndex >= 0 && openIndex !== i && enabled(i)) open(i)
+  }
+
+  function step(from: number, delta: number): number {
+    const n = menus.length
+    for (let k = 1; k <= n; k++) {
+      const i = (from + delta * k + n * k) % n
+      if (enabled(i)) return i
+    }
+    return from
+  }
+  function moveActive(delta: number) {
+    activeIndex = step(activeIndex, delta)
+    focusTrigger(activeIndex)
+    if (openIndex >= 0) open(activeIndex)
+  }
+
+  function onBarKeydown(e: KeyboardEvent) {
+    const fwd = rtl ? 'ArrowLeft' : 'ArrowRight'
+    const back = rtl ? 'ArrowRight' : 'ArrowLeft'
+    switch (e.key) {
+      case fwd: e.preventDefault(); moveActive(1); break
+      case back: e.preventDefault(); moveActive(-1); break
+      case 'Home': e.preventDefault(); activeIndex = step(-1, 1); focusTrigger(activeIndex); if (openIndex >= 0) open(activeIndex); break
+      case 'End': e.preventDefault(); activeIndex = step(menus.length, -1); focusTrigger(activeIndex); if (openIndex >= 0) open(activeIndex); break
+      case 'ArrowDown':
+      case 'Enter':
+      case ' ': e.preventDefault(); open(activeIndex); break
+      case 'Escape': if (openIndex >= 0) { e.preventDefault(); close() } break
+    }
+  }
+
+  function updatePos() {
+    const trigger = triggerEls[openIndex]
+    if (!trigger) return
+    const r = trigger.getBoundingClientRect()
+    const f = { width: panelEl?.offsetWidth || 180, height: panelEl?.offsetHeight || 200 }
+    pos = computePosition(
+      { x: r.left, y: r.top, width: r.width, height: r.height },
+      f,
+      { placement: rtl ? 'bottom-end' : 'bottom-start', offset: 4, padding: 8, minMainAxis: 96 },
+    )
+  }
+
+  // Position + dismiss the open dropdown, and let ArrowLeft/Right at the root menu
+  // level switch to the adjacent menubar menu (WAI-ARIA menubar behavior). An
+  // ArrowRight on a submenu parent still opens its submenu; ArrowLeft inside a
+  // submenu still collapses - those are left to SvMenuList.
+  $effect(() => {
+    const trigger = triggerEls[openIndex]
+    if (openIndex < 0 || !panelEl || !trigger) return
+    const stop = autoUpdate(trigger, panelEl, updatePos)
+    const layer = createDismissableLayer({
+      element: () => [trigger, panelEl],
+      onDismiss: () => close(false),
+      closeOnEscape: false, // Escape is owned by SvMenuList -> onclose -> close()
+    })
+    layer.activate()
+
+    const onKey = (e: KeyboardEvent) => {
+      const el = document.activeElement as HTMLElement | null
+      const list = el?.closest('.sv-menu__list')
+      const inSubmenu = !!list?.classList.contains('is-submenu')
+      const fwd = rtl ? 'ArrowLeft' : 'ArrowRight'
+      const back = rtl ? 'ArrowRight' : 'ArrowLeft'
+      if (e.key === fwd) {
+        if (el?.getAttribute('aria-haspopup') === 'menu') return // opens a submenu
+        e.preventDefault(); open(step(openIndex, 1))
+      } else if (e.key === back) {
+        if (inSubmenu) return // collapse the submenu instead
+        e.preventDefault(); open(step(openIndex, -1))
+      }
+    }
+    document.addEventListener('keydown', onKey, true)
+    return () => { stop(); layer.release(); document.removeEventListener('keydown', onKey, true) }
+  })
+</script>
+
+<div class="sv-menubar" role="menubar" aria-label={ariaLabel} dir={resolvedDir} onkeydown={onBarKeydown}>
+  {#each menus as m, i (i)}
+    <button
+      type="button"
+      bind:this={triggerEls[i]}
+      class="sv-menubar__item"
+      class:is-open={openIndex === i}
+      role="menuitem"
+      aria-haspopup="menu"
+      aria-expanded={openIndex === i}
+      tabindex={activeIndex === i ? 0 : -1}
+      disabled={m.disabled}
+      onclick={() => toggle(i)}
+      onpointerenter={() => onTriggerEnter(i)}
+    >{m.label}</button>
+  {/each}
+</div>
+
+{#if openIndex >= 0}
+  <div
+    bind:this={panelEl}
+    class="sv-menu"
+    use:portalToBody
+    use:popIn={{ up: pos.side === 'top' }}
+    style:position="fixed"
+    style:top={`${pos.y}px`}
+    style:left={`${pos.x}px`}
+    dir={resolvedDir}
+  >
+    <SvMenuList
+      items={menus[openIndex]?.items ?? []}
+      onclose={() => close()}
+      onselect={(item) => { onSelect?.(item); close() }}
+      dir={resolvedDir}
+    />
+  </div>
+{/if}
+
+<style>
+  .sv-menubar {
+    display: inline-flex; align-items: center; gap: 2px; padding: 3px;
+    background: var(--sg-bg, #fff); border: 1px solid var(--sg-border, #e2e8f0); border-radius: 9px;
+  }
+  .sv-menubar__item {
+    font: inherit; font-size: 13px; font-weight: 500; color: var(--sg-fg, #0f172a);
+    padding: 5px 11px; background: none; border: 0; border-radius: 6px; cursor: pointer;
+    transition: background 0.1s;
+  }
+  .sv-menubar__item:hover:not([disabled]), .sv-menubar__item.is-open { background: var(--sg-row-hover-bg, #f1f5f9); }
+  .sv-menubar__item:focus-visible { outline: 2px solid var(--sg-focus-ring, var(--sg-accent, #2563eb)); outline-offset: -2px; }
+  .sv-menubar__item[disabled] { opacity: 0.45; cursor: default; }
+</style>

package/dist/SvMenubar.svelte.d.ts

@@ -0,0 +1,18 @@
+export type MenubarMenu = {
+    /** Trigger label on the bar. */
+    label: string;
+    /** The dropdown's items (submenus, separators, icons, shortcuts all work). */
+    items: import('./menu-item').MenuItem[];
+    disabled?: boolean;
+};
+import { type EditorDir } from './editor-contract';
+import type { MenuItem } from './menu-item';
+type Props = {
+    menus: ReadonlyArray<MenubarMenu>;
+    onSelect?: (item: MenuItem) => void;
+    ariaLabel?: string;
+    dir?: EditorDir;
+};
+declare const SvMenubar: import("svelte").Component<Props, {}, "">;
+type SvMenubar = ReturnType<typeof SvMenubar>;
+export default SvMenubar;

package/dist/SvMultiSelect.svelte

@@ -20,7 +20,7 @@
 
   type Props = Pick<
     SvEditorProps,
-    'disabled' | 'label' | 'hint' | 'error' | 'required' | 'invalid' | 'size' | 'id' | 'name' | 'dir' | 'ariaLabel'
+    'disabled' | 'readonly' | 'label' | 'hint' | 'error' | 'required' | 'invalid' | 'size' | 'id' | 'name' | 'dir' | 'ariaLabel' | 'loading'
   > & {
     options: ReadonlyArray<MultiSelectOption>
     value?: ReadonlyArray<string | number>
@@ -53,6 +53,7 @@
     debounceMs = 250,
     loadingText = 'Loading…',
     disabled = false,
+    readonly = false,
     label,
     hint,
     error,
@@ -63,6 +64,7 @@
     name,
     dir,
     ariaLabel,
+    loading: loadingProp = false,
   }: Props = $props()
 
   const autoId = nextEditorId('sv-ms')
@@ -120,6 +122,7 @@
   const ms = createPopoverSelect({
     itemCount: () => filtered.length,
     disabled: (i) => !!filtered[i]?.disabled,
+    readonly: () => readonly,
     onSelect: (i) => { const o = filtered[i]; if (o) toggleOption(o) },
     onOpenChange: (o) => { if (o) { search = ''; if (loadOptions) doLoad('') } },
     getTrigger: () => triggerEl,
@@ -131,7 +134,7 @@
   })
 </script>
 
-<SvField id={uid} {label} {hint} {error} {required} {dir}>
+<SvField id={uid} {label} {hint} {error} {required} {dir} loading={loadingProp || loading}>
   <div class="sv-ms sv-ms--{size}" class:is-disabled={disabled}>
     <button
       bind:this={triggerEl}
@@ -147,7 +150,7 @@
         <span class="sv-ms__placeholder">{placeholder}</span>
       {:else}
         <span class="sv-ms__chips">
-          {#each selectedOptions.slice(0, maxTagCount) as opt (opt.value)}
+          {#each selectedOptions.slice(0, maxTagCount) as opt, i (i)}
             <span class="sv-ms__chip">{opt.label}</span>
           {/each}
           {#if selectedOptions.length > maxTagCount}
@@ -206,7 +209,7 @@
       aria-activedescendant={searchable ? undefined : ms.activeDescendant()}
       tabindex={searchable ? -1 : 0}
     >
-      {#each filtered as opt, i (opt.value)}
+      {#each filtered as opt, i (i)}
         <li
           class="sv-ms__opt"
           class:is-active={ms.isActive(i)}

package/dist/SvMultiSelect.svelte.d.ts

@@ -9,7 +9,7 @@ export type { MultiSelectOption } from './ui-app.types';
    */
 import type { MultiSelectOption } from './ui-app.types';
 import { type SvEditorProps } from './editor-contract';
-type Props = Pick<SvEditorProps, 'disabled' | 'label' | 'hint' | 'error' | 'required' | 'invalid' | 'size' | 'id' | 'name' | 'dir' | 'ariaLabel'> & {
+type Props = Pick<SvEditorProps, 'disabled' | 'readonly' | 'label' | 'hint' | 'error' | 'required' | 'invalid' | 'size' | 'id' | 'name' | 'dir' | 'ariaLabel' | 'loading'> & {
     options: ReadonlyArray<MultiSelectOption>;
     value?: ReadonlyArray<string | number>;
     onChange?: (value: Array<string | number>) => void;

package/dist/SvNumberInput.svelte

@@ -6,8 +6,12 @@
    *
    * 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.
+   * spinner + keyboard and ARIA all come from the core via prop-getters. The box,
+   * size, invalid state and focus ring are owned by SvField's `frame` chrome; the
+   * `prefix`/`suffix` are formatted INTO the value (they travel with the
+   * right-aligned number), and the spinner + clear live in the trailing slot.
    */
+  import type { Snippet } from 'svelte'
   import SvRepeatButton from './SvRepeatButton.svelte'
   import SvField from './SvField.svelte'
   import { nextEditorId, type SvEditorProps } from './editor-contract'
@@ -22,12 +26,24 @@
     precision?: number
     /** Group thousands (1,234) on display. */
     grouping?: boolean
+    /** Text formatted before the number (e.g. `$`); travels with the value. */
     prefix?: string
+    /** Text formatted after the number (e.g. `%`); travels with the value. */
     suffix?: string
     placeholder?: string
     spinButtons?: boolean
     /** Show a clear (x) button when there is a value. */
     clearable?: boolean
+    /** Select the whole value when the field is focused. */
+    selectOnFocus?: boolean
+    /** Step the value with the mouse wheel while the field is focused. */
+    wheelStep?: boolean
+    /** Leading adornment (icon) inside the field. */
+    leading?: Snippet
+    /** Stretch to the container width. */
+    block?: boolean
+    /** Control width in px (ignored when `block`). Default 150. */
+    width?: number
   }
 
   let {
@@ -45,6 +61,8 @@
     readonly = false,
     spinButtons = true,
     clearable = false,
+    selectOnFocus = false,
+    wheelStep = false,
     name,
     size = 'md',
     ariaLabel,
@@ -55,6 +73,10 @@
     hint,
     dir,
     id,
+    loading = false,
+    leading,
+    block = false,
+    width = 150,
   }: Props = $props()
 
   const autoId = nextEditorId('sv-num')
@@ -81,51 +103,66 @@
     hint: () => hint,
     ariaLabel: () => ariaLabel,
   })
+
+  // DOM-bound ergonomics the headless core stays out of: select-all on focus and
+  // wheel-to-step (only while focused, so scrolling the page never changes it).
+  function numExtras(node: HTMLInputElement) {
+    const onFocus = () => { if (selectOnFocus) requestAnimationFrame(() => node.select()) }
+    const onWheel = (e: WheelEvent) => {
+      if (!wheelStep || document.activeElement !== node || !num.isInteractive) return
+      e.preventDefault()
+      num.bump(e.deltaY < 0 ? 1 : -1)
+    }
+    node.addEventListener('focus', onFocus)
+    node.addEventListener('wheel', onWheel, { passive: false })
+    return { destroy() { node.removeEventListener('focus', onFocus); node.removeEventListener('wheel', onWheel) } }
+  }
 </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>
+{#snippet trailing()}
+  {#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}
+{/snippet}
+
+<SvField
+  frame
+  id={uid}
+  {label}
+  {hint}
+  {error}
+  {required}
+  {dir}
+  {size}
+  {invalid}
+  {disabled}
+  {readonly}
+  {loading}
+  {block}
+  {width}
+  {leading}
+  {trailing}
+>
+  <input class="sv-num__input" use:numExtras {...num.inputProps()} />
+  {#if name}<input type="hidden" {name} value={value ?? ''} />{/if}
 </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__input { text-align: end; }
+  .sv-num__clear { display: grid; place-items: center; width: 20px; 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; }
+  .sv-num__spin { display: flex; flex-direction: column; margin-inline-start: 2px; }
+  .sv-num__spin :global(.sv-repeat) { flex: 1; min-height: 0; padding: 0 5px; border-radius: 4px; line-height: 1; }
 </style>

package/dist/SvNumberInput.svelte.d.ts

@@ -1,3 +1,16 @@
+/**
+   * 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. The box,
+   * size, invalid state and focus ring are owned by SvField's `frame` chrome; the
+   * `prefix`/`suffix` are formatted INTO the value (they travel with the
+   * right-aligned number), and the spinner + clear live in the trailing slot.
+   */
+import type { Snippet } from 'svelte';
 import { type SvEditorProps } from './editor-contract';
 type Props = SvEditorProps & {
     value?: number | null;
@@ -8,12 +21,24 @@ type Props = SvEditorProps & {
     precision?: number;
     /** Group thousands (1,234) on display. */
     grouping?: boolean;
+    /** Text formatted before the number (e.g. `$`); travels with the value. */
     prefix?: string;
+    /** Text formatted after the number (e.g. `%`); travels with the value. */
     suffix?: string;
     placeholder?: string;
     spinButtons?: boolean;
     /** Show a clear (x) button when there is a value. */
     clearable?: boolean;
+    /** Select the whole value when the field is focused. */
+    selectOnFocus?: boolean;
+    /** Step the value with the mouse wheel while the field is focused. */
+    wheelStep?: boolean;
+    /** Leading adornment (icon) inside the field. */
+    leading?: Snippet;
+    /** Stretch to the container width. */
+    block?: boolean;
+    /** Control width in px (ignored when `block`). Default 150. */
+    width?: number;
 };
 declare const SvNumberInput: import("svelte").Component<Props, {}, "value">;
 type SvNumberInput = ReturnType<typeof SvNumberInput>;

package/dist/SvOtpInput.svelte

@@ -10,7 +10,7 @@
    * ```
    */
   import SvField from './SvField.svelte'
-  import { nextEditorId, type SvEditorProps } from './editor-contract'
+  import { editorAria, nextEditorId, type SvEditorProps } from './editor-contract'
   import { sanitizeOtp, otpCells, isOtpComplete } from './otp'
 
   type Props = Pick<
@@ -118,7 +118,7 @@
     class:is-disabled={disabled}
     class:is-invalid={invalid}
     role="group"
-    aria-label={label ?? 'One-time code'}
+    {...editorAria({ id: uid, invalid, required, error, hint, ariaLabel: label ?? 'One-time code' })}
   >
     {#each cells as cell, i (i)}
       <input