@svgrid/grid 1.2.33 → 2.0.0

package/dist/SvTagsInput.svelte

@@ -7,21 +7,47 @@
    * One styled renderer over the headless `createTagsInput` core (draft +
    * add/remove + keyboard).
    */
+  import SvField from './SvField.svelte'
+  import { nextEditorId, resolveMessages, type SvEditorProps } from './editor-contract'
   import { createTagsInput } from './createTagsInput.svelte'
 
-  type Props = {
+  /** User-facing strings (localizable via `messages`). */
+  type TagsMessages = { add: string; remove: string }
+  const DEFAULT_MESSAGES: TagsMessages = { add: 'Add tag', remove: 'Remove' }
+
+  type Props = SvEditorProps & {
     value?: string[]
     onChange?: (tags: string[]) => void
     placeholder?: string
-    disabled?: boolean
     /** Reject duplicate tags. Default true. */
     unique?: boolean
     max?: number
-    name?: string
-    ariaLabel?: string
+    /** Override the built-in strings (draft + remove aria-labels). */
+    messages?: Partial<TagsMessages>
   }
 
-  let { value = [], onChange, placeholder = 'Add tag…', disabled = false, unique = true, max = Infinity, name, ariaLabel }: Props = $props()
+  let {
+    value = [],
+    onChange,
+    placeholder = 'Add tag…',
+    disabled = false,
+    unique = true,
+    max = Infinity,
+    name,
+    ariaLabel,
+    invalid = false,
+    required = false,
+    error,
+    label,
+    hint,
+    dir,
+    id,
+    messages,
+  }: Props = $props()
+
+  const autoId = nextEditorId('sv-tags')
+  const uid = $derived(id ?? autoId)
+  const M = $derived(resolveMessages(DEFAULT_MESSAGES, messages))
 
   const ti = createTagsInput({
     value: () => value,
@@ -30,25 +56,34 @@
     unique: () => unique,
     max: () => max,
     ariaLabel: () => ariaLabel,
+    addLabel: () => M.add,
+    removeLabel: () => M.remove,
+    id: () => uid,
+    invalid: () => invalid,
+    required: () => required,
+    error: () => error,
+    hint: () => hint,
   })
 </script>
 
-<div class="sv-tags" class:is-disabled={disabled} {...ti.rootProps()}>
-  {#each value as tag, i (tag + i)}
-    <span class="sv-tags__chip" {...ti.tagProps(i)}>
-      <span class="sv-tags__label">{tag}</span>
-      {#if !disabled}
-        <button class="sv-tags__x" {...ti.removeProps(i)}>&times;</button>
-      {/if}
-    </span>
-  {/each}
-  <input
-    class="sv-tags__input"
-    placeholder={value.length ? '' : placeholder}
-    {...ti.inputProps()}
-  />
-  {#if name}<input type="hidden" {name} value={value.join(',')} />{/if}
-</div>
+<SvField id={uid} {label} {hint} {error} {required} {dir}>
+  <div class="sv-tags" class:is-disabled={disabled} class:is-invalid={invalid} {...ti.rootProps()}>
+    {#each value as tag, i (tag + i)}
+      <span class="sv-tags__chip" {...ti.tagProps(i)}>
+        <span class="sv-tags__label">{tag}</span>
+        {#if !disabled}
+          <button class="sv-tags__x" {...ti.removeProps(i)}>&times;</button>
+        {/if}
+      </span>
+    {/each}
+    <input
+      class="sv-tags__input"
+      placeholder={value.length ? '' : placeholder}
+      {...ti.inputProps()}
+    />
+    {#if name}<input type="hidden" {name} value={value.join(',')} />{/if}
+  </div>
+</SvField>
 
 <style>
   .sv-tags {
@@ -58,9 +93,11 @@
     border: 1px solid var(--sg-input-border, var(--sg-border, #cbd5e1)); border-radius: var(--sg-radius, 8px);
   }
   .sv-tags:focus-within { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); }
+  .sv-tags.is-invalid { border-color: var(--sg-danger, #dc2626); }
+  .sv-tags.is-invalid:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-danger, #dc2626) 22%, transparent); }
   .sv-tags.is-disabled { opacity: 0.6; }
   .sv-tags__chip {
-    display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 4px 0 8px;
+    display: inline-flex; align-items: center; gap: 4px; height: 22px; padding-block: 0; padding-inline: 8px 4px;
     background: color-mix(in srgb, var(--_accent) 14%, transparent); color: var(--_accent);
     border-radius: 5px; font-size: 12px; font-weight: 600;
   }

package/dist/SvTagsInput.svelte.d.ts

@@ -1,13 +1,18 @@
-type Props = {
+import { type SvEditorProps } from './editor-contract';
+/** User-facing strings (localizable via `messages`). */
+type TagsMessages = {
+    add: string;
+    remove: string;
+};
+type Props = SvEditorProps & {
     value?: string[];
     onChange?: (tags: string[]) => void;
     placeholder?: string;
-    disabled?: boolean;
     /** Reject duplicate tags. Default true. */
     unique?: boolean;
     max?: number;
-    name?: string;
-    ariaLabel?: string;
+    /** Override the built-in strings (draft + remove aria-labels). */
+    messages?: Partial<TagsMessages>;
 };
 declare const SvTagsInput: import("svelte").Component<Props, {}, "">;
 type SvTagsInput = ReturnType<typeof SvTagsInput>;

package/dist/SvTextArea.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+  /**
+   * SvTextArea - a multi-line text editor on the shared editor contract, with an
+   * optional auto-grow (the box height follows the content) and a character
+   * counter. Parity: Smart multiline input. As a grid cell editor: Escape
+   * cancels; Ctrl/Cmd+Enter commits (a bare Enter inserts a newline).
+   */
+  import SvField from './SvField.svelte'
+  import { editorAria, nextEditorId, type SvEditorProps } from './editor-contract'
+
+  type Props = SvEditorProps & {
+    value?: string
+    onChange?: (value: string) => void
+    onCommit?: (value: string) => void
+    onCancel?: () => void
+    placeholder?: string
+    rows?: number
+    maxlength?: number
+    /** Grow the box to fit content instead of scrolling. */
+    autoGrow?: boolean
+    /** Show a "n / max" character counter (needs `maxlength`). */
+    showCount?: boolean
+    autofocus?: boolean
+  }
+
+  let {
+    value = $bindable(''),
+    onChange,
+    onCommit,
+    onCancel,
+    placeholder,
+    disabled = false,
+    readonly = false,
+    rows = 3,
+    maxlength,
+    autoGrow = false,
+    showCount = false,
+    name,
+    size = 'md',
+    ariaLabel,
+    invalid = false,
+    required = false,
+    error,
+    label,
+    hint,
+    dir,
+    id,
+    autofocus = false,
+  }: Props = $props()
+
+  const autoId = nextEditorId('sv-textarea')
+  const uid = $derived(id ?? autoId)
+
+  function grow(node: HTMLTextAreaElement) {
+    if (!autoGrow) return
+    const resize = () => { node.style.height = 'auto'; node.style.height = `${node.scrollHeight}px` }
+    resize()
+    node.addEventListener('input', resize)
+    return { destroy: () => node.removeEventListener('input', resize) }
+  }
+  function mountFocus(node: HTMLTextAreaElement) {
+    if (autofocus) { node.focus(); node.select() }
+  }
+  function onInput(e: Event) {
+    const v = (e.currentTarget as HTMLTextAreaElement).value
+    value = v // enables bind:value
+    onChange?.(v)
+  }
+  function onKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') onCancel?.()
+    else if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) { e.preventDefault(); onCommit?.(value) }
+  }
+</script>
+
+<SvField id={uid} {label} {hint} {error} {required} {dir}>
+  <div class="sv-ta sv-ta--{size}" class:is-disabled={disabled}>
+    <textarea
+      use:grow
+      use:mountFocus
+      class="sv-ta__input"
+      class:is-invalid={invalid}
+      {value}
+      {placeholder}
+      {disabled}
+      {readonly}
+      {rows}
+      {maxlength}
+      oninput={onInput}
+      onkeydown={onKeydown}
+      {...editorAria({ id: uid, invalid, required, error, hint, ariaLabel })}
+    ></textarea>
+    {#if showCount && maxlength}
+      <span class="sv-ta__count" aria-hidden="true">{value.length} / {maxlength}</span>
+    {/if}
+    {#if name}<input type="hidden" {name} value={value} />{/if}
+  </div>
+</SvField>
+
+<style>
+  .sv-ta { --_accent: var(--sg-accent, #2563eb); display: inline-flex; flex-direction: column; gap: 3px; width: 260px; }
+  .sv-ta.is-disabled { opacity: 0.6; }
+  .sv-ta__input {
+    width: 100%; box-sizing: border-box; resize: vertical; font: inherit; padding: 8px 10px;
+    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-ta--sm .sv-ta__input { font-size: 12px; }
+  .sv-ta--md .sv-ta__input { font-size: 13px; }
+  .sv-ta--lg .sv-ta__input { font-size: 15px; }
+  .sv-ta__input:focus { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); }
+  .sv-ta__input.is-invalid { border-color: var(--sg-danger, #dc2626); }
+  .sv-ta__count { align-self: flex-end; font-size: 11px; color: var(--sg-muted, #64748b); }
+</style>

package/dist/SvTextArea.svelte.d.ts

@@ -0,0 +1,18 @@
+import { type SvEditorProps } from './editor-contract';
+type Props = SvEditorProps & {
+    value?: string;
+    onChange?: (value: string) => void;
+    onCommit?: (value: string) => void;
+    onCancel?: () => void;
+    placeholder?: string;
+    rows?: number;
+    maxlength?: number;
+    /** Grow the box to fit content instead of scrolling. */
+    autoGrow?: boolean;
+    /** Show a "n / max" character counter (needs `maxlength`). */
+    showCount?: boolean;
+    autofocus?: boolean;
+};
+declare const SvTextArea: import("svelte").Component<Props, {}, "value">;
+type SvTextArea = ReturnType<typeof SvTextArea>;
+export default SvTextArea;

package/dist/SvTextInput.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+  /**
+   * SvTextInput - the base single-line text editor on the shared editor contract
+   * (label / hint / error / RTL / a11y via SvField). Handles `text`, `email`,
+   * `url`, `tel` and `search`. As a grid cell editor it honours the interaction
+   * contract: Enter commits, Escape cancels. Parity: Smart `smart-input`.
+   */
+  import SvField from './SvField.svelte'
+  import { editorAria, nextEditorId, type SvEditorProps } from './editor-contract'
+
+  type Props = SvEditorProps & {
+    value?: string
+    onChange?: (value: string) => void
+    /** Commit + stop editing (Enter, or supplied by the grid in a cell). */
+    onCommit?: (value: string) => void
+    /** Cancel editing (Escape). */
+    onCancel?: () => void
+    placeholder?: string
+    type?: 'text' | 'email' | 'url' | 'tel' | 'search'
+    maxlength?: number
+    /** Show an inline clear (x) button when non-empty. */
+    clearable?: boolean
+    autocomplete?: AutoFill
+    /** Autofocus + select on mount (used when mounted as a cell editor). */
+    autofocus?: boolean
+  }
+
+  let {
+    value = $bindable(''),
+    onChange,
+    onCommit,
+    onCancel,
+    placeholder,
+    disabled = false,
+    readonly = false,
+    type = 'text',
+    maxlength,
+    clearable = false,
+    name,
+    size = 'md',
+    ariaLabel,
+    invalid = false,
+    required = false,
+    error,
+    label,
+    hint,
+    dir,
+    id,
+    autocomplete,
+    autofocus = false,
+  }: Props = $props()
+
+  const autoId = nextEditorId('sv-text')
+  const uid = $derived(id ?? autoId)
+
+  // Write `value` (so `bind:value` works) AND fire `onChange` (callback users).
+  function set(v: string) {
+    value = v
+    onChange?.(v)
+  }
+  function onInput(e: Event) {
+    set((e.currentTarget as HTMLInputElement).value)
+  }
+  function onKeydown(e: KeyboardEvent) {
+    if (e.key === 'Enter') onCommit?.(value)
+    else if (e.key === 'Escape') onCancel?.()
+  }
+  function mountFocus(node: HTMLInputElement) {
+    if (autofocus) { node.focus(); node.select() }
+  }
+</script>
+
+<SvField id={uid} {label} {hint} {error} {required} {dir}>
+  <div class="sv-text sv-text--{size}" class:is-disabled={disabled}>
+    <div class="sv-text__field" class:is-invalid={invalid}>
+      <input
+        use:mountFocus
+        class="sv-text__input"
+        {type}
+        {value}
+        {placeholder}
+        {disabled}
+        {readonly}
+        {maxlength}
+        {autocomplete}
+        oninput={onInput}
+        onkeydown={onKeydown}
+        {...editorAria({ id: uid, invalid, required, error, hint, ariaLabel })}
+      />
+      {#if clearable && value && !disabled && !readonly}
+        <button class="sv-text__clear" type="button" tabindex="-1" aria-label="Clear" onclick={() => set('')}>&times;</button>
+      {/if}
+    </div>
+    {#if name}<input type="hidden" {name} value={value} />{/if}
+  </div>
+</SvField>
+
+<style>
+  .sv-text { --_accent: var(--sg-accent, #2563eb); display: inline-flex; flex-direction: column; width: 220px; }
+  .sv-text.is-disabled { opacity: 0.6; }
+  .sv-text__field {
+    display: flex; align-items: center;
+    background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a);
+    border: 1px solid var(--sg-input-border, var(--sg-border, #cbd5e1)); border-radius: var(--sg-radius, 8px);
+  }
+  .sv-text__field:focus-within { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); }
+  .sv-text__field.is-invalid { border-color: var(--sg-danger, #dc2626); }
+  .sv-text__field.is-invalid:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-danger, #dc2626) 22%, transparent); }
+  .sv-text__input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: inherit; font: inherit; padding: 0 10px; }
+  .sv-text--sm .sv-text__field { height: 28px; font-size: 12px; }
+  .sv-text--md .sv-text__field { height: 34px; font-size: 13px; }
+  .sv-text--lg .sv-text__field { height: 40px; font-size: 15px; }
+  .sv-text__clear { display: grid; place-items: center; width: 28px; align-self: stretch; background: none; border: 0; color: var(--sg-muted, #64748b); cursor: pointer; font-size: 17px; line-height: 1; }
+  .sv-text__clear:hover { color: var(--sg-fg, #0f172a); }
+</style>

package/dist/SvTextInput.svelte.d.ts

@@ -0,0 +1,20 @@
+import { type SvEditorProps } from './editor-contract';
+type Props = SvEditorProps & {
+    value?: string;
+    onChange?: (value: string) => void;
+    /** Commit + stop editing (Enter, or supplied by the grid in a cell). */
+    onCommit?: (value: string) => void;
+    /** Cancel editing (Escape). */
+    onCancel?: () => void;
+    placeholder?: string;
+    type?: 'text' | 'email' | 'url' | 'tel' | 'search';
+    maxlength?: number;
+    /** Show an inline clear (x) button when non-empty. */
+    clearable?: boolean;
+    autocomplete?: AutoFill;
+    /** Autofocus + select on mount (used when mounted as a cell editor). */
+    autofocus?: boolean;
+};
+declare const SvTextInput: import("svelte").Component<Props, {}, "value">;
+type SvTextInput = ReturnType<typeof SvTextInput>;
+export default SvTextInput;

package/dist/SvTimePicker.svelte

@@ -11,8 +11,13 @@
    * and ARIA; this component keeps the DOM-bound pointer capture + hit-testing.
    * All visuals come from `--sg-*` tokens so every theme applies for free.
    */
+  import { resolveMessages, type EditorDir } from './editor-contract'
   import { createTimePicker, type TimeValue, type TimeFormat, type TimeSelection } from './createTimePicker.svelte'
 
+  /** User-facing strings (localizable via `messages`). */
+  type TimeMessages = { label: string; am: string; pm: string; now: string }
+  const DEFAULT_MESSAGES: TimeMessages = { label: 'Time picker', am: 'AM', pm: 'PM', now: 'Now' }
+
   type Props = {
     /** Date, "HH:MM[:SS]" string, or epoch ms. */
     value?: TimeValue
@@ -29,6 +34,10 @@
     name?: string
     /** Which dial opens first. */
     selection?: TimeSelection
+    /** Text direction (rtl mirrors layout; auto/undefined inherits). */
+    dir?: EditorDir
+    /** Override the built-in strings (group label + AM/PM/Now). */
+    messages?: Partial<TimeMessages>
   }
 
   let {
@@ -42,8 +51,13 @@
     readonly = false,
     name,
     selection = 'hour',
+    dir,
+    messages,
   }: Props = $props()
 
+  const M = $derived(resolveMessages(DEFAULT_MESSAGES, messages))
+  const resolvedDir = $derived(dir === 'ltr' || dir === 'rtl' ? dir : undefined)
+
   // The headless core owns all state, geometry, keyboard + ARIA. Reactive inputs
   // are getters; callbacks are closures.
   const tp = createTimePicker({
@@ -93,7 +107,7 @@
   }
 </script>
 
-<div class="sv-tp" class:sv-tp--disabled={disabled} role="group" aria-label="Time picker">
+<div class="sv-tp" class:sv-tp--disabled={disabled} role="group" aria-label={M.label} dir={resolvedDir}>
   <div class="sv-tp__head">
     <button class="sv-tp__seg" class:is-active={tp.selection === 'hour'} {...tp.segProps('hour')}>
       {String(tp.displayHour).padStart(2, '0')}
@@ -104,8 +118,8 @@
     </button>
     {#if tp.is12}
       <div class="sv-tp__ampm">
-        <button class:is-active={!tp.isPm} {...tp.ampmProps(false)}>AM</button>
-        <button class:is-active={tp.isPm} {...tp.ampmProps(true)}>PM</button>
+        <button class:is-active={!tp.isPm} {...tp.ampmProps(false)}>{M.am}</button>
+        <button class:is-active={tp.isPm} {...tp.ampmProps(true)}>{M.pm}</button>
       </div>
     {/if}
   </div>
@@ -139,7 +153,7 @@
 
   {#if footer}
     <div class="sv-tp__footer">
-      <button class="sv-tp__now" {...tp.nowProps()}>Now</button>
+      <button class="sv-tp__now" {...tp.nowProps()}>{M.now}</button>
     </div>
   {/if}
 
@@ -171,7 +185,7 @@
   }
   .sv-tp__seg.is-active { color: var(--_accent); background: color-mix(in srgb, var(--_accent) 12%, transparent); }
   .sv-tp__colon { font-size: 28px; font-weight: 700; color: var(--_muted); }
-  .sv-tp__ampm { display: flex; flex-direction: column; margin-left: 8px; gap: 2px; }
+  .sv-tp__ampm { display: flex; flex-direction: column; margin-inline-start: 8px; gap: 2px; }
   .sv-tp__ampm button {
     font-size: 11px; font-weight: 700; padding: 3px 8px;
     background: none; border: 1px solid var(--_border); border-radius: 6px; color: var(--_muted); cursor: pointer;

package/dist/SvTimePicker.svelte.d.ts

@@ -7,7 +7,15 @@ export type { TimeValue } from './createTimePicker.svelte';
    * and ARIA; this component keeps the DOM-bound pointer capture + hit-testing.
    * All visuals come from `--sg-*` tokens so every theme applies for free.
    */
+import { type EditorDir } from './editor-contract';
 import { type TimeValue, type TimeFormat, type TimeSelection } from './createTimePicker.svelte';
+/** User-facing strings (localizable via `messages`). */
+type TimeMessages = {
+    label: string;
+    am: string;
+    pm: string;
+    now: string;
+};
 type Props = {
     /** Date, "HH:MM[:SS]" string, or epoch ms. */
     value?: TimeValue;
@@ -24,6 +32,10 @@ type Props = {
     name?: string;
     /** Which dial opens first. */
     selection?: TimeSelection;
+    /** Text direction (rtl mirrors layout; auto/undefined inherits). */
+    dir?: EditorDir;
+    /** Override the built-in strings (group label + AM/PM/Now). */
+    messages?: Partial<TimeMessages>;
 };
 declare const SvTimePicker: import("svelte").Component<Props, {}, "">;
 type SvTimePicker = ReturnType<typeof SvTimePicker>;

package/dist/SvTimeline.svelte

@@ -0,0 +1,75 @@
+<script lang="ts" module>
+  export type { TimelineItem } from './ui-app.types'
+</script>
+
+<script lang="ts">
+  /**
+   * SvTimeline - a vertical activity / history feed: a connecting line with a
+   * marker (colour + optional glyph) per entry, and a title / time / description.
+   * Data-driven via `items`, with an optional `item` snippet for custom content.
+   * Theme-driven. Parity: Smart timeline.
+   *
+   * ```svelte
+   * <SvTimeline items={[
+   *   { title: 'Order placed', time: '09:12', color: '#16a34a' },
+   *   { title: 'Shipped', time: '14:40', description: 'Left the warehouse' },
+   * ]} />
+   * ```
+   */
+  import type { Snippet } from 'svelte'
+  import type { TimelineItem } from './ui-app.types'
+
+  type Props = {
+    items: ReadonlyArray<TimelineItem>
+    /** Render custom content per entry (receives the item). */
+    item?: Snippet<[TimelineItem]>
+  }
+
+  let { items, item }: Props = $props()
+</script>
+
+<ol class="sv-timeline">
+  {#each items as it, i (it.id ?? i)}
+    <li class="sv-timeline__item">
+      <div class="sv-timeline__rail">
+        <span class="sv-timeline__marker" style:--c={it.color}>
+          {#if it.icon}<span class="sv-timeline__glyph">{it.icon}</span>{/if}
+        </span>
+      </div>
+      <div class="sv-timeline__content">
+        {#if item}
+          {@render item(it)}
+        {:else}
+          <div class="sv-timeline__row">
+            <span class="sv-timeline__title">{it.title}</span>
+            {#if it.time}<span class="sv-timeline__time">{it.time}</span>{/if}
+          </div>
+          {#if it.description}<p class="sv-timeline__desc">{it.description}</p>{/if}
+        {/if}
+      </div>
+    </li>
+  {/each}
+</ol>
+
+<style>
+  .sv-timeline { list-style: none; margin: 0; padding: 0; color: var(--sg-fg, #0f172a); }
+  .sv-timeline__item { display: grid; grid-template-columns: 22px 1fr; gap: 10px; }
+  .sv-timeline__rail { display: flex; flex-direction: column; align-items: center; }
+  .sv-timeline__marker {
+    --c: var(--sg-accent, #2563eb);
+    flex: none; width: 14px; height: 14px; margin-top: 2px; border-radius: 50%;
+    display: grid; place-items: center; font-size: 8px; color: var(--sg-on-accent, #fff);
+    background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent);
+  }
+  .sv-timeline__glyph { line-height: 1; }
+  /* The connecting line: grows to fill the rail between markers. */
+  .sv-timeline__item:not(:last-child) .sv-timeline__rail::after {
+    content: ''; flex: 1; width: 2px; margin: 3px 0 -2px; background: var(--sg-border, #e2e8f0); border-radius: 1px;
+  }
+  .sv-timeline__content { padding-bottom: 16px; min-width: 0; }
+  .sv-timeline__item:last-child .sv-timeline__content { padding-bottom: 0; }
+  .sv-timeline__row { display: flex; align-items: baseline; gap: 10px; }
+  .sv-timeline__title { font-size: 13.5px; font-weight: 600; }
+  .sv-timeline__time { margin-inline-start: auto; flex: none; font-size: 11.5px; color: var(--sg-muted, #94a3b8); font-variant-numeric: tabular-nums; }
+  .sv-timeline__desc { margin: 2px 0 0; font-size: 12.5px; color: var(--sg-muted, #64748b); line-height: 1.5; }
+</style>

package/dist/SvTimeline.svelte.d.ts

@@ -0,0 +1,24 @@
+export type { TimelineItem } from './ui-app.types';
+/**
+   * SvTimeline - a vertical activity / history feed: a connecting line with a
+   * marker (colour + optional glyph) per entry, and a title / time / description.
+   * Data-driven via `items`, with an optional `item` snippet for custom content.
+   * Theme-driven. Parity: Smart timeline.
+   *
+   * ```svelte
+   * <SvTimeline items={[
+   *   { title: 'Order placed', time: '09:12', color: '#16a34a' },
+   *   { title: 'Shipped', time: '14:40', description: 'Left the warehouse' },
+   * ]} />
+   * ```
+   */
+import type { Snippet } from 'svelte';
+import type { TimelineItem } from './ui-app.types';
+type Props = {
+    items: ReadonlyArray<TimelineItem>;
+    /** Render custom content per entry (receives the item). */
+    item?: Snippet<[TimelineItem]>;
+};
+declare const SvTimeline: import("svelte").Component<Props, {}, "">;
+type SvTimeline = ReturnType<typeof SvTimeline>;
+export default SvTimeline;