npm - @svgrid/grid - Versions diffs - 1.2.22 → 1.2.23 - Mend

@svgrid/grid 1.2.22 → 1.2.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (190) hide show

package/dist/GridFooter.svelte +34 -20
package/dist/GridFooter.svelte.d.ts +8 -0
package/dist/SvAutoComplete.svelte +100 -0
package/dist/SvAutoComplete.svelte.d.ts +16 -0
package/dist/SvButton.svelte +97 -0
package/dist/SvButton.svelte.d.ts +23 -0
package/dist/SvCalendar.svelte +669 -0
package/dist/SvCalendar.svelte.d.ts +70 -0
package/dist/SvCheckBox.svelte +81 -0
package/dist/SvCheckBox.svelte.d.ts +19 -0
package/dist/SvColorInput.svelte +187 -0
package/dist/SvColorInput.svelte.d.ts +15 -0
package/dist/SvComboBox.svelte +130 -0
package/dist/SvComboBox.svelte.d.ts +15 -0
package/dist/SvCountryInput.svelte +123 -0
package/dist/SvCountryInput.svelte.d.ts +14 -0
package/dist/SvDateTimePicker.svelte +322 -0
package/dist/SvDateTimePicker.svelte.d.ts +37 -0
package/dist/SvDropDownList.svelte +143 -0
package/dist/SvDropDownList.svelte.d.ts +15 -0
package/dist/SvForm.svelte +147 -0
package/dist/SvForm.svelte.d.ts +29 -0
package/dist/SvGauge.svelte +99 -0
package/dist/SvGauge.svelte.d.ts +31 -0
package/dist/SvGrid.controller.svelte.d.ts +16 -2
package/dist/SvGrid.controller.svelte.js +63 -8
package/dist/SvGrid.css +84 -31
package/dist/SvGrid.helpers.d.ts +4 -0
package/dist/SvGrid.helpers.js +40 -12
package/dist/SvGrid.svelte +84 -5
package/dist/SvGrid.types.d.ts +36 -0
package/dist/SvGridDropdown.svelte +16 -30
package/dist/SvGridDropdown.svelte.d.ts +4 -0
package/dist/SvListBox.svelte +122 -0
package/dist/SvListBox.svelte.d.ts +19 -0
package/dist/SvMaskedInput.svelte +0 -0
package/dist/SvMaskedInput.svelte.d.ts +15 -0
package/dist/SvNumberInput.svelte +0 -0
package/dist/SvNumberInput.svelte.d.ts +22 -0
package/dist/SvPasswordInput.svelte +110 -0
package/dist/SvPasswordInput.svelte.d.ts +22 -0
package/dist/SvPhoneInput.svelte +0 -0
package/dist/SvPhoneInput.svelte.d.ts +19 -0
package/dist/SvRadioGroup.svelte +108 -0
package/dist/SvRadioGroup.svelte.d.ts +23 -0
package/dist/SvRating.svelte +111 -0
package/dist/SvRating.svelte.d.ts +20 -0
package/dist/SvRepeatButton.svelte +89 -0
package/dist/SvRepeatButton.svelte.d.ts +21 -0
package/dist/SvSlider.svelte +182 -0
package/dist/SvSlider.svelte.d.ts +25 -0
package/dist/SvSwitchButton.svelte +94 -0
package/dist/SvSwitchButton.svelte.d.ts +19 -0
package/dist/SvTabs.svelte +122 -0
package/dist/SvTabs.svelte.d.ts +26 -0
package/dist/SvTagsInput.svelte +81 -0
package/dist/SvTagsInput.svelte.d.ts +19 -0
package/dist/SvTimePicker.svelte +359 -0
package/dist/SvTimePicker.svelte.d.ts +27 -0
package/dist/SvToggleButton.svelte +57 -0
package/dist/SvToggleButton.svelte.d.ts +16 -0
package/dist/SvTree.svelte +210 -0
package/dist/SvTree.svelte.d.ts +29 -0
package/dist/build-api.js +78 -1
package/dist/cdn/svgrid.js +10022 -5904
package/dist/cdn/svgrid.svelte-external.js +8531 -4429
package/dist/cell-render.d.ts +4 -0
package/dist/cell-render.js +35 -1
package/dist/clipboard.js +19 -1
package/dist/collaboration.d.ts +2 -0
package/dist/collaboration.js +4 -0
package/dist/core.d.ts +22 -1
package/dist/countries.d.ts +15 -0
package/dist/countries.js +61 -0
package/dist/datetime/date-core.d.ts +88 -0
package/dist/datetime/date-core.js +165 -0
package/dist/datetime/date-format.d.ts +39 -0
package/dist/datetime/date-format.js +371 -0
package/dist/datetime/date-restrict.d.ts +23 -0
package/dist/datetime/date-restrict.js +50 -0
package/dist/datetime/date-selection.d.ts +25 -0
package/dist/datetime/date-selection.js +94 -0
package/dist/datetime/mask.d.ts +21 -0
package/dist/datetime/mask.js +90 -0
package/dist/editing.d.ts +1 -1
package/dist/editing.js +7 -0
package/dist/editors/cell-editors.d.ts +2 -2
package/dist/editors/cell-editors.js +3 -1
package/dist/export-format.d.ts +178 -0
package/dist/export-format.js +419 -0
package/dist/hyperformula-adapter.d.ts +4 -0
package/dist/hyperformula-adapter.js +15 -6
package/dist/index.d.ts +36 -0
package/dist/index.js +41 -0
package/dist/list-option.d.ts +10 -0
package/dist/list-option.js +7 -0
package/dist/menus.js +18 -2
package/dist/popover.d.ts +48 -0
package/dist/popover.js +65 -0
package/dist/row-resize.d.ts +4 -4
package/dist/row-resize.js +8 -5
package/dist/selection.d.ts +6 -0
package/dist/selection.js +31 -5
package/dist/server-data-source.d.ts +43 -0
package/dist/server-data-source.js +100 -0
package/dist/sparkline.js +8 -4
package/dist/svgrid-wrapper.types.d.ts +26 -1
package/package.json +6 -1
package/src/GridFooter.svelte +34 -20
package/src/SvAutoComplete.svelte +100 -0
package/src/SvButton.svelte +97 -0
package/src/SvCalendar.svelte +669 -0
package/src/SvCalendar.test.ts +211 -0
package/src/SvCheckBox.svelte +81 -0
package/src/SvColorInput.svelte +187 -0
package/src/SvComboBox.svelte +130 -0
package/src/SvCountryInput.svelte +123 -0
package/src/SvDateTimePicker.svelte +322 -0
package/src/SvDateTimePicker.test.ts +136 -0
package/src/SvDropDownList.svelte +143 -0
package/src/SvForm.svelte +147 -0
package/src/SvGauge.svelte +99 -0
package/src/SvGrid.controller.svelte.ts +74 -8
package/src/SvGrid.css +84 -31
package/src/SvGrid.helpers.ts +41 -12
package/src/SvGrid.svelte +84 -5
package/src/SvGrid.types.ts +33 -0
package/src/SvGridDropdown.svelte +16 -30
package/src/SvListBox.svelte +122 -0
package/src/SvMaskedInput.svelte +0 -0
package/src/SvNumberInput.svelte +0 -0
package/src/SvPasswordInput.svelte +110 -0
package/src/SvPhoneInput.svelte +0 -0
package/src/SvRadioGroup.svelte +108 -0
package/src/SvRating.svelte +111 -0
package/src/SvRepeatButton.svelte +89 -0
package/src/SvSlider.svelte +182 -0
package/src/SvSwitchButton.svelte +94 -0
package/src/SvTabs.svelte +122 -0
package/src/SvTagsInput.svelte +81 -0
package/src/SvTimePicker.svelte +359 -0
package/src/SvTimePicker.test.ts +98 -0
package/src/SvToggleButton.svelte +57 -0
package/src/SvTree.svelte +210 -0
package/src/build-api.ts +115 -0
package/src/cell-render.test.ts +38 -0
package/src/cell-render.ts +43 -0
package/src/clipboard.test.ts +18 -0
package/src/clipboard.ts +24 -1
package/src/collaboration.test.ts +30 -0
package/src/collaboration.ts +6 -0
package/src/core.ts +27 -3
package/src/countries.ts +71 -0
package/src/datetime/date-core.test.ts +217 -0
package/src/datetime/date-core.ts +204 -0
package/src/datetime/date-format.test.ts +121 -0
package/src/datetime/date-format.ts +317 -0
package/src/datetime/date-restrict.ts +60 -0
package/src/datetime/date-selection.test.ts +129 -0
package/src/datetime/date-selection.ts +137 -0
package/src/datetime/mask.test.ts +36 -0
package/src/datetime/mask.ts +84 -0
package/src/editing.test.ts +22 -0
package/src/editing.ts +7 -1
package/src/editors/cell-editors.ts +7 -1
package/src/export-data-api.test.ts +126 -0
package/src/export-format.test.ts +107 -0
package/src/export-format.ts +598 -0
package/src/hyperformula-adapter.test.ts +35 -1
package/src/hyperformula-adapter.ts +18 -6
package/src/index.ts +71 -0
package/src/list-option.ts +15 -0
package/src/menus.ts +21 -2
package/src/popover.ts +79 -0
package/src/row-resize.test.ts +25 -0
package/src/row-resize.ts +8 -5
package/src/selection.test.ts +36 -4
package/src/selection.ts +30 -9
package/src/server-data-source.test.ts +201 -0
package/src/server-data-source.ts +148 -0
package/src/sparkline.test.ts +9 -0
package/src/sparkline.ts +9 -4
package/src/svgrid-wrapper.types.ts +28 -1
package/src/svgrid.behavior.test.ts +27 -0
package/src/svgrid.new-features.wrapper.test.ts +27 -1
package/src/ui-buttons.test.ts +105 -0
package/src/ui-composite.test.ts +89 -0
package/src/ui-inputs.test.ts +92 -0
package/src/ui-range.test.ts +61 -0
package/src/ui-selection.test.ts +106 -0

package/dist/SvDateTimePicker.svelte ADDED Viewed

@@ -0,0 +1,322 @@
+<script lang="ts" module>
+  export type DateTimeValue = Date | string | number | null
+</script>
+<script lang="ts">
+  /**
+   * SvDateTimePicker - a text input (formatted via the date-format token engine)
+   * plus a dropdown that composes SvCalendar + SvTimePicker behind DATE / TIME
+   * tabs. Parity target: Smart `smart-date-time-picker`. Works standalone and as
+   * the SvGrid `datetime` cell editor. The dropdown portals to <body> (via
+   * popover.ts) so it is never clipped by the grid's scroll container.
+   */
+  import SvCalendar from './SvCalendar.svelte'
+  import SvTimePicker from './SvTimePicker.svelte'
+  import { anchoredRect, portalToBody, type AnchoredRect } from './popover'
+  import { formatDate, parseDate } from './datetime/date-format'
+  import { toDate, clampDate, withTime, startOfDay, type DateLike } from './datetime/date-core'
+  type Props = {
+    value?: DateTimeValue
+    onChange?: (value: Date | null) => void
+    /** Fired when the value is finalized (Enter, blur, or a single-date pick).
+     *  Used by the grid to save the cell. */
+    onCommit?: (value: Date | null) => void
+    /** Fired on Escape / dismiss without committing (grid cancels the edit). */
+    onCancel?: () => void
+    /** Display / parse mask (token engine). */
+    formatString?: string
+    min?: DateLike | null
+    max?: DateLike | null
+    nullable?: boolean
+    placeholder?: string
+    disabled?: boolean
+    readonly?: boolean
+    name?: string
+    locale?: string
+    firstDayOfWeek?: number
+    weekNumbers?: boolean
+    hourFormat?: '12-hour' | '24-hour'
+    minuteInterval?: number
+    /** Which tabs the dropdown shows. */
+    dropDownDisplayMode?: 'both' | 'calendar' | 'time'
+    /** Up/down spinner buttons that bump the value by `stepMinutes`. */
+    spinButtons?: boolean
+    stepMinutes?: number
+    /** Open the dropdown as soon as the field is focused (grid in-cell editing). */
+    autoOpen?: boolean
+    /** Animate the calendar's month/drill navigation (honors reduced-motion). */
+    animate?: boolean | 'slide' | 'fade'
+  }
+  let {
+    value = null,
+    onChange,
+    onCommit,
+    onCancel,
+    formatString = 'yyyy-MM-dd HH:mm',
+    min = null,
+    max = null,
+    nullable = true,
+    placeholder = 'Select date & time',
+    disabled = false,
+    readonly = false,
+    name,
+    locale = typeof navigator !== 'undefined' ? navigator.language : 'en-US',
+    firstDayOfWeek = 0,
+    weekNumbers = false,
+    hourFormat = '24-hour',
+    minuteInterval = 1,
+    dropDownDisplayMode = 'both',
+    spinButtons = false,
+    stepMinutes = 1,
+    autoOpen = false,
+    animate = false,
+  }: Props = $props()
+  const isInteractive = $derived(!disabled && !readonly)
+  const minD = $derived(toDate(min ?? null))
+  const maxD = $derived(toDate(max ?? null))
+  let current = $state<Date | null>(null)
+  let text = $state('')
+  let lastKey = ''
+  $effect(() => {
+    const d = toDate(value as DateLike)
+    const key = d ? String(d.getTime()) : 'null'
+    if (key !== lastKey) {
+      lastKey = key
+      current = d
+      text = d ? formatDate(d, formatString, locale) : ''
+    }
+  })
+  // --- Commit helpers ---
+  function commit(next: Date | null) {
+    const clamped = next ? clampDate(next, minD, maxD) : null
+    current = clamped
+    lastKey = clamped ? String(clamped.getTime()) : 'null'
+    text = clamped ? formatDate(clamped, formatString, locale) : ''
+    onChange?.(clamped)
+  }
+  function commitFromText() {
+    const raw = text.trim()
+    if (!raw) {
+      if (nullable) commit(null)
+      else text = current ? formatDate(current, formatString, locale) : ''
+      return
+    }
+    const parsed = parseDate(raw, formatString, locale, 2029, current ?? new Date())
+    if (parsed) commit(parsed)
+    else text = current ? formatDate(current, formatString, locale) : '' // revert on bad input
+  }
+  function bump(deltaMin: number) {
+    const base = current ?? new Date()
+    commit(new Date(base.getTime() + deltaMin * 60000))
+  }
+  // --- Sub-picker wiring ---
+  function onCalendarChange(dates: Date[]) {
+    const day = dates[0]
+    if (!day) return
+    commit(withTime(day, current ?? startOfDay(day)))
+    // Date-only picker: a single pick finalizes the value.
+    if (dropDownDisplayMode === 'calendar') { open = false; onCommit?.(current) }
+    else if (dropDownDisplayMode === 'both') tab = 'time'
+  }
+  function onTimeChange(t: Date) {
+    const base = current ?? new Date()
+    commit(withTime(base, t))
+  }
+  // --- Dropdown (portalled) ---
+  let open = $state(false)
+  let tab = $state<'date' | 'time'>('date')
+  let triggerEl = $state<HTMLDivElement | null>(null)
+  let panelEl = $state<HTMLDivElement | null>(null)
+  let panelRect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false })
+  function updatePos() {
+    if (!triggerEl) return
+    panelRect = anchoredRect(triggerEl.getBoundingClientRect(), { estimatedHeight: 360, minWidth: 300 })
+  }
+  function openPanel() {
+    if (!isInteractive || open) return
+    tab = dropDownDisplayMode === 'time' ? 'time' : 'date'
+    open = true
+    updatePos()
+  }
+  function closePanel() { open = false }
+  function toggle() { (open ? closePanel : openPanel)() }
+  $effect(() => {
+    if (!open) return
+    const reposition = () => updatePos()
+    window.addEventListener('scroll', reposition, true)
+    window.addEventListener('resize', reposition)
+    const onDown = (e: PointerEvent) => {
+      const t = e.target as Node | null
+      if (!t) return
+      if (triggerEl?.contains(t) || panelEl?.contains(t)) return
+      closePanel()
+    }
+    document.addEventListener('pointerdown', onDown, true)
+    return () => {
+      window.removeEventListener('scroll', reposition, true)
+      window.removeEventListener('resize', reposition)
+      document.removeEventListener('pointerdown', onDown, true)
+    }
+  })
+  function onInputKeydown(e: KeyboardEvent) {
+    if (e.key === 'Enter') { e.preventDefault(); commitFromText(); closePanel(); onCommit?.(current) }
+    else if (e.key === 'Escape') { closePanel(); onCancel?.() }
+    else if (e.key === 'ArrowDown' && (e.altKey || !text)) { e.preventDefault(); openPanel() }
+    else if (spinButtons && e.key === 'ArrowUp') { e.preventDefault(); bump(stepMinutes) }
+    else if (spinButtons && e.key === 'ArrowDown') { e.preventDefault(); bump(-stepMinutes) }
+  }
+  function focusOpen(node: HTMLInputElement) {
+    if (!autoOpen) return
+    node.focus()
+    openPanel()
+  }
+  function onRootFocusOut(e: FocusEvent) {
+    const next = e.relatedTarget as Node | null
+    // Ignore focus moving within the field or into the portalled panel.
+    if (next && (triggerEl?.contains(next) || panelEl?.contains(next))) return
+    onCommit?.(current)
+  }
+  const showDateTab = $derived(dropDownDisplayMode !== 'time')
+  const showTimeTab = $derived(dropDownDisplayMode !== 'calendar')
+</script>
+<div class="sv-dtp" class:sv-dtp--disabled={disabled} onfocusout={onRootFocusOut}>
+  <div class="sv-dtp__field" bind:this={triggerEl}>
+    {#if spinButtons}
+      <div class="sv-dtp__spin">
+        <button type="button" tabindex="-1" aria-label="Increment" onclick={() => bump(stepMinutes)} disabled={!isInteractive}>▲</button>
+        <button type="button" tabindex="-1" aria-label="Decrement" onclick={() => bump(-stepMinutes)} disabled={!isInteractive}>▼</button>
+      </div>
+    {/if}
+    <input
+      class="sv-dtp__input"
+      type="text"
+      bind:value={text}
+      {placeholder}
+      {disabled}
+      {readonly}
+      onblur={commitFromText}
+      onkeydown={onInputKeydown}
+      use:focusOpen
+    />
+    {#if nullable && current && isInteractive}
+      <button type="button" class="sv-dtp__clear" aria-label="Clear" onclick={() => commit(null)}>&times;</button>
+    {/if}
+    <button type="button" class="sv-dtp__toggle" aria-label="Open picker" aria-haspopup="dialog" aria-expanded={open} onclick={toggle} disabled={!isInteractive} tabindex="-1">
+      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" /><path d="M16 2v4M8 2v4M3 10h18" /></svg>
+    </button>
+  </div>
+  {#if open}
+    <div
+      class="sv-dtp__panel"
+      bind:this={panelEl}
+      use:portalToBody
+      style:position="fixed"
+      style:top={`${panelRect.top}px`}
+      style:left={`${panelRect.left}px`}
+      role="dialog"
+      aria-label="Choose date and time"
+    >
+      {#if showDateTab && showTimeTab}
+        <div class="sv-dtp__tabs" role="tablist">
+          <button type="button" role="tab" aria-selected={tab === 'date'} class:is-active={tab === 'date'} onclick={() => (tab = 'date')}>DATE</button>
+          <button type="button" role="tab" aria-selected={tab === 'time'} class:is-active={tab === 'time'} onclick={() => (tab = 'time')}>TIME</button>
+        </div>
+      {/if}
+      <div class="sv-dtp__body">
+        {#if tab === 'date' && showDateTab}
+          <SvCalendar
+            value={current}
+            selectionMode="one"
+            min={min}
+            max={max}
+            {firstDayOfWeek}
+            {weekNumbers}
+            {locale}
+            {animate}
+            onChange={onCalendarChange}
+          />
+        {:else if showTimeTab}
+          <SvTimePicker
+            value={current}
+            format={hourFormat}
+            {minuteInterval}
+            footer
+            onChange={onTimeChange}
+          />
+        {/if}
+      </div>
+    </div>
+  {/if}
+  {#if name}<input type="hidden" {name} value={current ? current.toISOString() : ''} />{/if}
+</div>
+<style>
+  .sv-dtp {
+    --_accent: var(--sg-accent, #2563eb);
+    --_bg: var(--sg-input-bg, var(--sg-bg, #fff));
+    --_fg: var(--sg-fg, #0f172a);
+    --_muted: var(--sg-muted, #64748b);
+    --_border: var(--sg-input-border, var(--sg-border, #cbd5e1));
+    --_radius: var(--sg-radius, 8px);
+    display: inline-block; position: relative; width: 240px; color: var(--_fg);
+  }
+  .sv-dtp--disabled { opacity: 0.6; }
+  .sv-dtp__field {
+    display: flex; align-items: center; gap: 2px;
+    background: var(--_bg); border: 1px solid var(--_border); border-radius: var(--_radius);
+    padding: 0 4px 0 0; height: 34px;
+  }
+  .sv-dtp__field:focus-within { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); }
+  .sv-dtp__input {
+    flex: 1; min-width: 0; border: 0; background: none; outline: none; color: inherit;
+    font: inherit; font-size: 13px; padding: 0 8px; height: 100%;
+  }
+  .sv-dtp__spin { display: flex; flex-direction: column; border-right: 1px solid var(--_border); }
+  .sv-dtp__spin button {
+    flex: 1; width: 20px; border: 0; background: none; color: var(--_muted); cursor: pointer;
+    font-size: 7px; line-height: 1; padding: 0;
+  }
+  .sv-dtp__spin button:hover:not(:disabled) { color: var(--_accent); }
+  .sv-dtp__clear, .sv-dtp__toggle {
+    display: grid; place-items: center; width: 26px; height: 26px; flex: none;
+    background: none; border: 0; color: var(--_muted); cursor: pointer; border-radius: 6px;
+  }
+  .sv-dtp__clear { font-size: 17px; line-height: 1; }
+  .sv-dtp__clear:hover, .sv-dtp__toggle:hover { color: var(--_accent); background: color-mix(in srgb, var(--_accent) 10%, transparent); }
+  /* Portalled panel - lives under <body>, styled globally. */
+  :global(.sv-dtp__panel) {
+    z-index: 2147483647;
+    background: var(--sg-bg, #fff);
+    border: 1px solid var(--sg-border, #e2e8f0);
+    border-radius: 12px;
+    box-shadow: 0 16px 48px -12px rgba(15, 23, 42, 0.35);
+    overflow: hidden;
+  }
+  :global(.sv-dtp__tabs) { display: flex; border-bottom: 1px solid var(--sg-border, #e2e8f0); }
+  :global(.sv-dtp__tabs button) {
+    flex: 1; padding: 9px; font: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
+    background: none; border: 0; color: var(--sg-muted, #64748b); cursor: pointer;
+    border-bottom: 2px solid transparent;
+  }
+  :global(.sv-dtp__tabs button.is-active) { color: var(--sg-accent, #2563eb); border-bottom-color: var(--sg-accent, #2563eb); }
+  :global(.sv-dtp__body) { display: grid; place-items: center; padding: 8px; }
+</style>

package/dist/SvDateTimePicker.svelte.d.ts ADDED Viewed

@@ -0,0 +1,37 @@
+export type DateTimeValue = Date | string | number | null;
+import { type DateLike } from './datetime/date-core';
+type Props = {
+    value?: DateTimeValue;
+    onChange?: (value: Date | null) => void;
+    /** Fired when the value is finalized (Enter, blur, or a single-date pick).
+     *  Used by the grid to save the cell. */
+    onCommit?: (value: Date | null) => void;
+    /** Fired on Escape / dismiss without committing (grid cancels the edit). */
+    onCancel?: () => void;
+    /** Display / parse mask (token engine). */
+    formatString?: string;
+    min?: DateLike | null;
+    max?: DateLike | null;
+    nullable?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    name?: string;
+    locale?: string;
+    firstDayOfWeek?: number;
+    weekNumbers?: boolean;
+    hourFormat?: '12-hour' | '24-hour';
+    minuteInterval?: number;
+    /** Which tabs the dropdown shows. */
+    dropDownDisplayMode?: 'both' | 'calendar' | 'time';
+    /** Up/down spinner buttons that bump the value by `stepMinutes`. */
+    spinButtons?: boolean;
+    stepMinutes?: number;
+    /** Open the dropdown as soon as the field is focused (grid in-cell editing). */
+    autoOpen?: boolean;
+    /** Animate the calendar's month/drill navigation (honors reduced-motion). */
+    animate?: boolean | 'slide' | 'fade';
+};
+declare const SvDateTimePicker: import("svelte").Component<Props, {}, "">;
+type SvDateTimePicker = ReturnType<typeof SvDateTimePicker>;
+export default SvDateTimePicker;

package/dist/SvDropDownList.svelte ADDED Viewed

@@ -0,0 +1,143 @@
+<script lang="ts">
+  /**
+   * SvDropDownList - a single-select dropdown (trigger button + portalled list,
+   * no typing). Parity: Smart `smart-drop-down-list`. Controlled via `value` +
+   * `onChange`. Popover escapes scroll clipping via popover.ts.
+   */
+  import { anchoredRect, portalToBody, type AnchoredRect } from './popover'
+  import type { ListOption } from './list-option'
+  type Props = {
+    options: ReadonlyArray<ListOption>
+    value?: string | number | null
+    onChange?: (value: string | number) => void
+    placeholder?: string
+    disabled?: boolean
+    name?: string
+    size?: 'sm' | 'md' | 'lg'
+    ariaLabel?: string
+    autoOpen?: boolean
+  }
+  let { options, value = null, onChange, placeholder = 'Select…', disabled = false, name, size = 'md', ariaLabel, autoOpen = false }: Props = $props()
+  let open = $state(false)
+  let active = $state(-1)
+  let triggerEl = $state<HTMLButtonElement | null>(null)
+  let panelEl = $state<HTMLDivElement | null>(null)
+  let rect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false })
+  const selected = $derived(options.find((o) => o.value === value) ?? null)
+  const enabledIdx = $derived(options.map((o, i) => (o.disabled ? -1 : i)).filter((i) => i >= 0))
+  function updatePos() {
+    if (!triggerEl) return
+    rect = anchoredRect(triggerEl.getBoundingClientRect(), { estimatedHeight: Math.min(options.length, 8) * 34 + 8 })
+  }
+  function openPanel() {
+    if (disabled || open) return
+    open = true
+    active = Math.max(0, options.findIndex((o) => o.value === value))
+    updatePos()
+  }
+  function close() { open = false }
+  function toggle() { open ? close() : openPanel() }
+  function pick(i: number) {
+    const o = options[i]
+    if (!o || o.disabled) return
+    onChange?.(o.value); close(); triggerEl?.focus()
+  }
+  function move(d: number) {
+    const pos = enabledIdx.indexOf(active)
+    active = enabledIdx[(pos + d + enabledIdx.length) % enabledIdx.length] ?? active
+    queueMicrotask(() => panelEl?.querySelector<HTMLElement>(`[data-idx="${active}"]`)?.scrollIntoView({ block: 'nearest' }))
+  }
+  function onKeydown(e: KeyboardEvent) {
+    if (disabled) return
+    if (!open && (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); openPanel(); return }
+    if (!open) return
+    if (e.key === 'ArrowDown') { e.preventDefault(); move(1) }
+    else if (e.key === 'ArrowUp') { e.preventDefault(); move(-1) }
+    else if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); pick(active) }
+    else if (e.key === 'Escape') { e.preventDefault(); close(); triggerEl?.focus() }
+    else if (e.key === 'Home') { active = enabledIdx[0] ?? 0 }
+    else if (e.key === 'End') { active = enabledIdx.at(-1) ?? 0 }
+  }
+  $effect(() => {
+    if (!open) return
+    const rp = () => updatePos()
+    window.addEventListener('scroll', rp, true); window.addEventListener('resize', rp)
+    const od = (e: PointerEvent) => { const t = e.target as Node | null; if (t && (triggerEl?.contains(t) || panelEl?.contains(t))) return; close() }
+    document.addEventListener('pointerdown', od, true)
+    return () => { window.removeEventListener('scroll', rp, true); window.removeEventListener('resize', rp); document.removeEventListener('pointerdown', od, true) }
+  })
+  function focusOpen(node: HTMLButtonElement) { if (autoOpen) { node.focus(); openPanel() } }
+</script>
+<button
+  bind:this={triggerEl}
+  type="button"
+  class="sv-ddl sv-ddl--{size}"
+  class:is-open={open}
+  class:is-disabled={disabled}
+  aria-haspopup="listbox"
+  aria-expanded={open}
+  aria-label={ariaLabel}
+  {disabled}
+  onclick={toggle}
+  onkeydown={onKeydown}
+  use:focusOpen
+>
+  <span class="sv-ddl__value" class:is-placeholder={!selected}>{selected?.label ?? placeholder}</span>
+  <svg class="sv-ddl__chev" viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
+</button>
+{#if open}
+  <div bind:this={panelEl} class="sv-ddl__panel" use:portalToBody style:position="fixed" style:top={`${rect.top}px`} style:left={`${rect.left}px`} style:min-width={`${rect.width}px`} role="listbox" tabindex="-1">
+    {#each options as opt, i (opt.value)}
+      <!-- svelte-ignore a11y_click_events_have_key_events a11y_interactive_supports_focus -->
+      <div
+        class="sv-ddl__opt"
+        class:is-active={i === active}
+        class:is-selected={opt.value === value}
+        class:is-disabled={opt.disabled}
+        role="option"
+        tabindex="-1"
+        aria-selected={opt.value === value}
+        data-idx={i}
+        onclick={() => pick(i)}
+        onpointermove={() => { if (!opt.disabled) active = i }}
+      >{opt.label}</div>
+    {/each}
+  </div>
+{/if}
+{#if name}<input type="hidden" {name} value={value ?? ''} />{/if}
+<style>
+  .sv-ddl {
+    --_accent: var(--sg-accent, #2563eb);
+    display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; width: 200px;
+    background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a); font: inherit; text-align: left;
+    border: 1px solid var(--sg-input-border, var(--sg-border, #cbd5e1)); border-radius: var(--sg-radius, 8px);
+    padding: 0 10px; cursor: pointer;
+  }
+  .sv-ddl--sm { height: 28px; font-size: 12px; }
+  .sv-ddl--md { height: 34px; font-size: 13px; }
+  .sv-ddl--lg { height: 40px; font-size: 15px; }
+  .sv-ddl.is-open, .sv-ddl:focus-visible { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); outline: none; }
+  .sv-ddl.is-disabled { opacity: 0.6; cursor: not-allowed; }
+  .sv-ddl__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .sv-ddl__value.is-placeholder { color: var(--sg-muted, #94a3b8); }
+  .sv-ddl__chev { color: var(--sg-muted, #64748b); flex: none; }
+  :global(.sv-ddl__panel) {
+    z-index: 2147483647; max-height: 288px; overflow-y: auto; padding: 4px;
+    background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
+    border: 1px solid var(--sg-border, #e2e8f0); border-radius: 10px; box-shadow: 0 16px 48px -12px rgba(15,23,42,0.35);
+  }
+  :global(.sv-ddl__opt) { padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; }
+  :global(.sv-ddl__opt.is-active) { background: var(--sg-row-hover-bg, #f1f5f9); }
+  :global(.sv-ddl__opt.is-selected) { color: var(--sg-accent, #2563eb); font-weight: 600; }
+  :global(.sv-ddl__opt.is-disabled) { opacity: 0.4; cursor: not-allowed; }
+</style>

package/dist/SvDropDownList.svelte.d.ts ADDED Viewed

@@ -0,0 +1,15 @@
+import type { ListOption } from './list-option';
+type Props = {
+    options: ReadonlyArray<ListOption>;
+    value?: string | number | null;
+    onChange?: (value: string | number) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    name?: string;
+    size?: 'sm' | 'md' | 'lg';
+    ariaLabel?: string;
+    autoOpen?: boolean;
+};
+declare const SvDropDownList: import("svelte").Component<Props, {}, "">;
+type SvDropDownList = ReturnType<typeof SvDropDownList>;
+export default SvDropDownList;

package/dist/SvForm.svelte ADDED Viewed

@@ -0,0 +1,147 @@
+<script lang="ts" module>
+  export type FormFieldType =
+    | 'text' | 'email' | 'tel' | 'textarea' | 'number' | 'password'
+    | 'select' | 'checkbox' | 'switch' | 'date' | 'color' | 'rating'
+  export type FormField = {
+    name: string
+    label: string
+    type?: FormFieldType
+    required?: boolean
+    placeholder?: string
+    options?: Array<{ value: string | number; label: string }>
+    /** Return an error message, or null/undefined when valid. */
+    validate?: (value: any, values: Record<string, any>) => string | null | undefined
+    /** Span full width in the grid. */
+    full?: boolean
+  }
+</script>
+<script lang="ts">
+  /**
+   * SvForm - a schema-driven form that renders the SvGrid UI-kit controls with
+   * labels, required + custom validation, and a submit handler. Parity: Smart
+   * `smart-form`. Emits `onSubmit(values)` only when valid; `onChange` on edits.
+   */
+  import SvNumberInput from './SvNumberInput.svelte'
+  import SvPasswordInput from './SvPasswordInput.svelte'
+  import SvDropDownList from './SvDropDownList.svelte'
+  import SvCheckBox from './SvCheckBox.svelte'
+  import SvSwitchButton from './SvSwitchButton.svelte'
+  import SvDateTimePicker from './SvDateTimePicker.svelte'
+  import SvColorInput from './SvColorInput.svelte'
+  import SvRating from './SvRating.svelte'
+  import SvButton from './SvButton.svelte'
+  type Props = {
+    fields: ReadonlyArray<FormField>
+    initial?: Record<string, any>
+    onSubmit?: (values: Record<string, any>) => void
+    onChange?: (values: Record<string, any>) => void
+    submitLabel?: string
+    /** Columns in the responsive field grid. */
+    columns?: number
+    disabled?: boolean
+  }
+  let { fields, initial = {}, onSubmit, onChange, submitLabel = 'Submit', columns = 1, disabled = false }: Props = $props()
+  let values = $state<Record<string, any>>({})
+  let errors = $state<Record<string, string>>({})
+  let touched = $state<Record<string, boolean>>({})
+  let seededForm = false
+  $effect(() => { if (!seededForm) { seededForm = true; values = { ...initial } } })
+  function setValue(name: string, v: any) {
+    values = { ...values, [name]: v }
+    onChange?.(values)
+    if (touched[name]) validateField(name)
+  }
+  function validateField(name: string): boolean {
+    const field = fields.find((f) => f.name === name)
+    if (!field) return true
+    const v = values[name]
+    let err: string | null | undefined = null
+    if (field.required && (v == null || v === '' || (Array.isArray(v) && !v.length))) err = `${field.label} is required`
+    else if (field.validate) err = field.validate(v, values)
+    const next = { ...errors }
+    if (err) next[name] = err
+    else delete next[name]
+    errors = next
+    return !err
+  }
+  function submit(e: Event) {
+    e.preventDefault()
+    let ok = true
+    const t: Record<string, boolean> = {}
+    for (const f of fields) { t[f.name] = true; if (!validateField(f.name)) ok = false }
+    touched = t
+    if (ok) onSubmit?.({ ...values })
+  }
+  const dateVal = (v: any): Date | null => (v instanceof Date ? v : v ? new Date(v) : null)
+</script>
+<form class="sv-form" style:--cols={columns} onsubmit={submit} novalidate>
+  <div class="sv-form__grid">
+    {#each fields as field (field.name)}
+      {@const type = field.type ?? 'text'}
+      <div class="sv-form__field" class:is-full={field.full || columns === 1} class:has-error={errors[field.name]}>
+        {#if type !== 'checkbox' && type !== 'switch'}
+          <label class="sv-form__label" for={`f-${field.name}`}>
+            {field.label}{#if field.required}<span class="sv-form__req" aria-hidden="true"> *</span>{/if}
+          </label>
+        {/if}
+        {#if type === 'textarea'}
+          <textarea id={`f-${field.name}`} class="sv-form__control sv-form__textarea" rows="3" {disabled} placeholder={field.placeholder} value={values[field.name] ?? ''} oninput={(e) => setValue(field.name, e.currentTarget.value)} onblur={() => { touched[field.name] = true; validateField(field.name) }}></textarea>
+        {:else if type === 'number'}
+          <SvNumberInput value={values[field.name] ?? null} {disabled} onChange={(v) => setValue(field.name, v)} />
+        {:else if type === 'password'}
+          <SvPasswordInput value={values[field.name] ?? ''} {disabled} onChange={(v) => setValue(field.name, v)} />
+        {:else if type === 'select'}
+          <SvDropDownList options={field.options ?? []} value={values[field.name] ?? null} {disabled} placeholder={field.placeholder} onChange={(v) => setValue(field.name, v)} />
+        {:else if type === 'checkbox'}
+          <SvCheckBox checked={!!values[field.name]} {disabled} onChange={(v) => setValue(field.name, v)}>{field.label}</SvCheckBox>
+        {:else if type === 'switch'}
+          <div class="sv-form__inline"><SvSwitchButton checked={!!values[field.name]} {disabled} onChange={(v) => setValue(field.name, v)} ariaLabel={field.label} /><span>{field.label}</span></div>
+        {:else if type === 'date'}
+          <SvDateTimePicker value={dateVal(values[field.name])} dropDownDisplayMode="calendar" formatString="yyyy-MM-dd" {disabled} onChange={(v) => setValue(field.name, v)} />
+        {:else if type === 'color'}
+          <SvColorInput value={values[field.name] ?? '#3b82f6'} {disabled} onChange={(v) => setValue(field.name, v)} />
+        {:else if type === 'rating'}
+          <SvRating value={values[field.name] ?? 0} {disabled} onChange={(v) => setValue(field.name, v)} />
+        {:else}
+          <input id={`f-${field.name}`} class="sv-form__control" type={type} {disabled} placeholder={field.placeholder} value={values[field.name] ?? ''} oninput={(e) => setValue(field.name, e.currentTarget.value)} onblur={() => { touched[field.name] = true; validateField(field.name) }} />
+        {/if}
+        {#if errors[field.name]}<span class="sv-form__error" role="alert">{errors[field.name]}</span>{/if}
+      </div>
+    {/each}
+  </div>
+  <div class="sv-form__actions">
+    <SvButton type="submit" {disabled}>{submitLabel}</SvButton>
+  </div>
+</form>
+<style>
+  .sv-form { --_accent: var(--sg-accent, #2563eb); width: 100%; }
+  .sv-form__grid { display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); gap: 14px 18px; }
+  .sv-form__field { display: flex; flex-direction: column; gap: 5px; }
+  .sv-form__field.is-full { grid-column: 1 / -1; }
+  .sv-form__label { font-size: 12.5px; font-weight: 600; color: var(--sg-fg, #0f172a); }
+  .sv-form__req { color: var(--sg-danger, #dc2626); }
+  .sv-form__control {
+    width: 100%; box-sizing: border-box; height: 34px; padding: 0 10px; font: inherit; font-size: 13px;
+    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); outline: none;
+  }
+  .sv-form__textarea { height: auto; padding: 8px 10px; resize: vertical; }
+  .sv-form__control:focus { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); }
+  .sv-form__field.has-error .sv-form__control { border-color: var(--sg-danger, #dc2626); }
+  .sv-form__inline { display: flex; align-items: center; gap: 8px; font-size: 13px; }
+  .sv-form__error { font-size: 11.5px; color: var(--sg-danger, #dc2626); }
+  .sv-form__actions { margin-top: 16px; }
+</style>