@svgrid/grid 1.2.34 → 2.0.1

package/README.md

@@ -17,7 +17,7 @@
 <p align="center">
   <a href="https://svgrid.com">Website</a> ·
   <a href="https://svgrid.com/docs">Docs</a> ·
-  <a href="https://svgrid.com/demos">150+ Demos</a> ·
+  <a href="https://svgrid.com/demos">280+ Demos</a> ·
   <a href="https://svgrid.com/pricing">Pricing</a> ·
   <a href="https://svgrid.com/roadmap">Roadmap</a>
 </p>
@@ -69,9 +69,10 @@ That is a real, accessible grid. Sorting, filtering, virtualization, cell select
 - **Filtering** - Excel-style filter menu, inline filter row, set / value-list filter, locale-aware matching, between operators.
 - **Editing** - 14 built-in `editorType`s (text, number, date, datetime, time, select, rich-select with typeahead, textarea, color, checkbox, list, chips, rating, password) plus a `cellEditor` snippet slot for anything custom.
 - **Selection** - cell-range click+drag and Shift+arrows, copy/paste as TSV, Excel-style fill handle, row selection.
-- **Hierarchy** - row grouping with aggregation, tree data, master/detail, full-width detail rows.
-- **Layout** - row + column pinning, sticky header + first column, header drag-to-reorder, autosize, column sizing API, zebra rows.
+- **Views** - native Kanban board mode (drag cards between lanes), row grouping with aggregation, tree data, master/detail, full-width detail rows.
+- **Layout** - row + column pinning, sticky header + first column, header drag-to-reorder, autosize, keyboard-accessible column sizing, zebra rows.
 - **Data operations** - find in grid (Ctrl+F), undo / redo, transaction API, optimistic updates, server-side row model with sort / filter / group pushdown.
+- **UI components** - a Svelte 5 component suite ships in the package (inputs, selection, date/time, overlays, layout, feedback) - standalone or as grid cell editors.
 - **Accessibility** - WAI-ARIA grid roles, full keyboard navigation, RTL, high-contrast theme.
 - **Engineered for production** - first-class TypeScript types, CSP / Trusted-Types safe rendering, SSR-friendly, themeable via `--sg-*` CSS tokens.
 - **Lean** - ~7.5 KB gzipped headless core, ~42 KB gzipped full render component; Svelte stays a peer dependency.
@@ -115,7 +116,7 @@ Compatibility aliases are provided for the framework-neutral names: `createGrid`
 
 ## AI-native
 
-SvGrid publishes an [MCP server](https://www.npmjs.com/package/@svgrid/mcp) and `llms.txt` / `llms-full.txt`, so Claude, Cursor, and Zed answer with accurate, version-pinned APIs and all 150+ demo sources as context - not hallucinated methods.
+SvGrid publishes an [MCP server](https://www.npmjs.com/package/@svgrid/mcp) and `llms.txt` / `llms-full.txt`, so Claude, Cursor, and Zed answer with accurate, version-pinned APIs and all 280+ demo sources as context - not hallucinated methods.
 
 ## Enterprise
 
@@ -124,7 +125,7 @@ The MIT core is free for any use, including commercial. The optional [`@svgrid/e
 ## Documentation
 
 - [Getting started](https://svgrid.com/docs) - end-to-end walkthrough.
-- [150+ live demos](https://svgrid.com/demos) - copy-paste recipes for every feature.
+- [280+ live demos](https://svgrid.com/demos) - copy-paste recipes for every feature.
 - [Why headless?](https://svgrid.com/docs) - when to compose vs. drop in.
 - [Theming](https://svgrid.com/docs) - re-skin via `--sg-*` tokens and dark mode.
 

package/dist/SvAccordion.svelte

@@ -0,0 +1,109 @@
+<script lang="ts" module>
+  export type { AccordionItem, AccordionExpandMode } from './createAccordion.svelte'
+</script>
+
+<script lang="ts">
+  /**
+   * SvAccordion - a WAI-ARIA accordion (collapsible sections) with single- or
+   * multiple-expand and roving header focus (Up/Down/Home/End). Parity: Smart
+   * `smart-accordion`. Controlled via `expanded` + `onChange`; each panel's body
+   * is rendered through the `panel` snippet (receives the item).
+   *
+   * Behavior (expand state, keyboard, ARIA) lives in the headless `createAccordion`
+   * core; this component is one styled renderer over it.
+   */
+  import type { Snippet } from 'svelte'
+  import { type EditorDir } from './editor-contract'
+  import { createAccordion, type AccordionItem, type AccordionExpandMode } from './createAccordion.svelte'
+
+  type Props = {
+    items: ReadonlyArray<AccordionItem>
+    /** Expanded item ids (controlled). */
+    expanded?: string[]
+    onChange?: (expandedIds: string[]) => void
+    /** 'single' (at most one open) or 'multiple'. Default single. */
+    expandMode?: AccordionExpandMode
+    disabled?: boolean
+    dir?: EditorDir
+    /** Panel body for an item. */
+    panel?: Snippet<[AccordionItem]>
+  }
+
+  let {
+    items,
+    expanded = $bindable([]),
+    onChange,
+    expandMode = 'single',
+    disabled = false,
+    dir,
+    panel,
+  }: Props = $props()
+
+  const resolvedDir = $derived(dir === 'ltr' || dir === 'rtl' ? dir : undefined)
+
+  const acc = createAccordion({
+    items: () => items,
+    expanded: () => expanded,
+    onChange: (ids) => { expanded = ids; onChange?.(ids) },
+    expandMode: () => expandMode,
+    disabled: () => disabled,
+    dir: () => dir,
+  })
+
+  // DOM focus movement is a render concern: follow the core's roving focus header.
+  let rootEl: HTMLDivElement | null = null
+  let lastFocusTick = 0
+  $effect(() => {
+    if (acc.focusTick !== lastFocusTick) {
+      lastFocusTick = acc.focusTick
+      const i = acc.focusIndex
+      queueMicrotask(() => rootEl?.querySelector<HTMLElement>(`[data-idx="${i}"]`)?.focus())
+    }
+  })
+</script>
+
+<div bind:this={rootEl} class="sv-acc" class:is-disabled={disabled} dir={resolvedDir} {...acc.rootProps()}>
+  {#each items as item, i (item.id)}
+    {@const open = acc.isExpanded(item.id)}
+    <div class="sv-acc__item" class:is-open={open}>
+      <h3 class="sv-acc__heading">
+        <button class="sv-acc__header" {...acc.headerProps(i)}>
+          <svg class="sv-acc__chevron" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6" /></svg>
+          <span class="sv-acc__label">{item.label}</span>
+        </button>
+      </h3>
+      {#if open}
+        <div class="sv-acc__panel" {...acc.panelProps(i)}>
+          <div class="sv-acc__body">{#if panel}{@render panel(item)}{/if}</div>
+        </div>
+      {/if}
+    </div>
+  {/each}
+</div>
+
+<style>
+  .sv-acc {
+    --_accent: var(--sg-accent, #2563eb);
+    --_border: var(--sg-border, #e2e8f0);
+    --_radius: var(--sg-radius, 8px);
+    display: flex; flex-direction: column; width: 100%;
+    background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
+    border: 1px solid var(--_border); border-radius: var(--_radius); overflow: hidden;
+  }
+  .sv-acc.is-disabled { opacity: 0.6; }
+  .sv-acc__item + .sv-acc__item { border-top: 1px solid var(--_border); }
+  .sv-acc__heading { margin: 0; font: inherit; }
+  .sv-acc__header {
+    display: flex; align-items: center; gap: 8px; width: 100%;
+    padding: 12px 14px; background: none; border: 0; font: inherit; font-size: 14px; font-weight: 600;
+    color: inherit; cursor: pointer; text-align: start;
+  }
+  .sv-acc__header:hover:not(:disabled) { background: var(--sg-row-hover-bg, #f1f5f9); }
+  .sv-acc__header:disabled { opacity: 0.5; cursor: not-allowed; }
+  .sv-acc__header:focus-visible { outline: 2px solid var(--sg-focus-ring, var(--_accent)); outline-offset: -2px; }
+  .sv-acc__chevron { flex: none; color: var(--sg-muted, #64748b); transition: transform 0.16s; }
+  .sv-acc__item.is-open .sv-acc__chevron { transform: rotate(90deg); }
+  .sv-acc[dir='rtl'] .sv-acc__item:not(.is-open) .sv-acc__chevron { transform: scaleX(-1); }
+  .sv-acc__label { flex: 1; }
+  .sv-acc__body { padding: 4px 14px 16px; font-size: 13.5px; line-height: 1.6; color: var(--sg-fg, #0f172a); }
+</style>

package/dist/SvAccordion.svelte.d.ts

@@ -0,0 +1,28 @@
+export type { AccordionItem, AccordionExpandMode } from './createAccordion.svelte';
+/**
+   * SvAccordion - a WAI-ARIA accordion (collapsible sections) with single- or
+   * multiple-expand and roving header focus (Up/Down/Home/End). Parity: Smart
+   * `smart-accordion`. Controlled via `expanded` + `onChange`; each panel's body
+   * is rendered through the `panel` snippet (receives the item).
+   *
+   * Behavior (expand state, keyboard, ARIA) lives in the headless `createAccordion`
+   * core; this component is one styled renderer over it.
+   */
+import type { Snippet } from 'svelte';
+import { type EditorDir } from './editor-contract';
+import { type AccordionItem, type AccordionExpandMode } from './createAccordion.svelte';
+type Props = {
+    items: ReadonlyArray<AccordionItem>;
+    /** Expanded item ids (controlled). */
+    expanded?: string[];
+    onChange?: (expandedIds: string[]) => void;
+    /** 'single' (at most one open) or 'multiple'. Default single. */
+    expandMode?: AccordionExpandMode;
+    disabled?: boolean;
+    dir?: EditorDir;
+    /** Panel body for an item. */
+    panel?: Snippet<[AccordionItem]>;
+};
+declare const SvAccordion: import("svelte").Component<Props, {}, "expanded">;
+type SvAccordion = ReturnType<typeof SvAccordion>;
+export default SvAccordion;

package/dist/SvAlert.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+  /**
+   * SvAlert - an inline, persistent contextual message (info / success / warning
+   * / danger / neutral) with an icon, optional title, dismiss button and trailing
+   * actions. Unlike SvToast (transient, floating), an alert stays in the layout.
+   * Theme-driven via `--sg-*` semantic tokens. Parity: Smart alert / message.
+   */
+  import type { Snippet } from 'svelte'
+
+  type Variant = 'info' | 'success' | 'warning' | 'danger' | 'neutral'
+
+  type Props = {
+    variant?: Variant
+    title?: string
+    /** Show a close (x) button. */
+    dismissible?: boolean
+    onDismiss?: () => void
+    /** Hide the leading status icon. */
+    hideIcon?: boolean
+    /** Softer, borderless tint vs the default bordered card. */
+    soft?: boolean
+    children?: Snippet
+    /** Trailing action buttons / links. */
+    actions?: Snippet
+    /** Custom leading icon (overrides the default glyph). */
+    icon?: Snippet
+  }
+
+  let {
+    variant = 'info',
+    title,
+    dismissible = false,
+    onDismiss,
+    hideIcon = false,
+    soft = false,
+    children,
+    actions,
+    icon,
+  }: Props = $props()
+
+  let open = $state(true)
+  function dismiss() { open = false; onDismiss?.() }
+  const glyph = (v: Variant) =>
+    v === 'success' ? '✓' : v === 'warning' ? '⚠' : v === 'danger' ? '✕' : v === 'neutral' ? '•' : 'ℹ'
+</script>
+
+{#if open}
+  <div
+    class="sv-alert sv-alert--{variant}"
+    class:is-soft={soft}
+    role={variant === 'danger' || variant === 'warning' ? 'alert' : 'status'}
+  >
+    {#if !hideIcon}
+      <span class="sv-alert__icon" aria-hidden="true">{#if icon}{@render icon()}{:else}{glyph(variant)}{/if}</span>
+    {/if}
+    <div class="sv-alert__body">
+      {#if title}<div class="sv-alert__title">{title}</div>{/if}
+      {#if children}<div class="sv-alert__msg">{@render children()}</div>{/if}
+      {#if actions}<div class="sv-alert__actions">{@render actions()}</div>{/if}
+    </div>
+    {#if dismissible}
+      <button type="button" class="sv-alert__x" aria-label="Dismiss" onclick={dismiss}>&times;</button>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .sv-alert {
+    --_c: var(--sg-info, #0891b2);
+    display: flex; align-items: flex-start; gap: 10px; box-sizing: border-box;
+    padding: 11px 12px; border-radius: 10px; font-size: 13px; line-height: 1.5;
+    background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
+    border: 1px solid color-mix(in srgb, var(--_c) 30%, var(--sg-border, #e2e8f0));
+    border-inline-start: 3px solid var(--_c);
+  }
+  .sv-alert.is-soft { border: 0; background: color-mix(in srgb, var(--_c) 12%, transparent); }
+  .sv-alert--info { --_c: var(--sg-info, #0891b2); }
+  .sv-alert--success { --_c: var(--sg-success, #16a34a); }
+  .sv-alert--warning { --_c: var(--sg-warning, #d97706); }
+  .sv-alert--danger { --_c: var(--sg-danger, #dc2626); }
+  .sv-alert--neutral { --_c: var(--sg-muted, #64748b); }
+  .sv-alert__icon { flex: none; width: 18px; height: 18px; display: grid; place-items: center; color: var(--_c); font-weight: 700; }
+  .sv-alert__body { flex: 1; min-width: 0; }
+  .sv-alert__title { font-weight: 650; margin-bottom: 1px; }
+  .sv-alert__msg { color: var(--sg-fg, #0f172a); overflow-wrap: anywhere; }
+  .sv-alert__actions { display: flex; gap: 8px; margin-top: 8px; }
+  .sv-alert__x {
+    flex: none; width: 22px; height: 22px; display: grid; place-items: center; margin: -2px -2px 0 0;
+    background: none; border: 0; color: var(--sg-muted, #64748b); cursor: pointer; border-radius: 5px; font-size: 17px; line-height: 1;
+  }
+  .sv-alert__x:hover { background: var(--sg-row-hover-bg, #f1f5f9); color: var(--sg-fg, #0f172a); }
+</style>

package/dist/SvAlert.svelte.d.ts

@@ -0,0 +1,27 @@
+/**
+   * SvAlert - an inline, persistent contextual message (info / success / warning
+   * / danger / neutral) with an icon, optional title, dismiss button and trailing
+   * actions. Unlike SvToast (transient, floating), an alert stays in the layout.
+   * Theme-driven via `--sg-*` semantic tokens. Parity: Smart alert / message.
+   */
+import type { Snippet } from 'svelte';
+type Variant = 'info' | 'success' | 'warning' | 'danger' | 'neutral';
+type Props = {
+    variant?: Variant;
+    title?: string;
+    /** Show a close (x) button. */
+    dismissible?: boolean;
+    onDismiss?: () => void;
+    /** Hide the leading status icon. */
+    hideIcon?: boolean;
+    /** Softer, borderless tint vs the default bordered card. */
+    soft?: boolean;
+    children?: Snippet;
+    /** Trailing action buttons / links. */
+    actions?: Snippet;
+    /** Custom leading icon (overrides the default glyph). */
+    icon?: Snippet;
+};
+declare const SvAlert: import("svelte").Component<Props, {}, "">;
+type SvAlert = ReturnType<typeof SvAlert>;
+export default SvAlert;

package/dist/SvAutoComplete.svelte

@@ -7,24 +7,43 @@
    * One styled renderer over the headless `createAutocomplete` core; only
    * portal/measure render concerns live here.
    */
-  import { anchoredRect, portalToBody, type AnchoredRect } from './popover'
+  import { anchoredRect, portalToBody, popIn, type AnchoredRect } from './popover'
+  import { createDismissableLayer } from './a11y/dismissable'
   import { type ListOption } from './list-option'
+  import SvField from './SvField.svelte'
+  import { nextEditorId, type SvEditorProps } from './editor-contract'
   import { createAutocomplete } from './createAutocomplete.svelte'
 
-  type Props = {
+  type Props = SvEditorProps & {
     value?: string
     onChange?: (value: string) => void
     /** Suggestions - strings or {value,label} (label is shown, value inserted). */
     suggestions?: ReadonlyArray<string | ListOption>
     minChars?: number
     placeholder?: string
-    disabled?: boolean
-    name?: string
-    size?: 'sm' | 'md' | 'lg'
-    ariaLabel?: string
   }
 
-  let { value = '', onChange, suggestions = [], minChars = 1, placeholder, disabled = false, name, size = 'md', ariaLabel }: Props = $props()
+  let {
+    value = '',
+    onChange,
+    suggestions = [],
+    minChars = 1,
+    placeholder,
+    disabled = false,
+    name,
+    size = 'md',
+    ariaLabel,
+    invalid = false,
+    required = false,
+    error,
+    label,
+    hint,
+    dir,
+    id,
+  }: Props = $props()
+
+  const autoId = nextEditorId('sv-ac')
+  const uid = $derived(id ?? autoId)
 
   let fieldEl = $state<HTMLInputElement | null>(null)
   let panelEl = $state<HTMLDivElement | null>(null)
@@ -38,6 +57,11 @@
     disabled: () => disabled,
     ariaLabel: () => ariaLabel,
     focusInput: () => fieldEl?.focus(),
+    id: () => uid,
+    invalid: () => invalid,
+    required: () => required,
+    error: () => error,
+    hint: () => hint,
   })
 
   function updatePos() {
@@ -50,22 +74,25 @@
     updatePos()
     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 && (fieldEl?.contains(t) || panelEl?.contains(t))) return; ac.close() }
-    document.addEventListener('pointerdown', od, true)
-    return () => { window.removeEventListener('scroll', rp, true); window.removeEventListener('resize', rp); document.removeEventListener('pointerdown', od, true) }
+    const layer = createDismissableLayer({ element: () => [fieldEl, panelEl], onDismiss: () => ac.close(), closeOnEscape: false })
+    layer.activate()
+    return () => { window.removeEventListener('scroll', rp, true); window.removeEventListener('resize', rp); layer.release() }
   })
 </script>
 
-<input
-  bind:this={fieldEl}
-  class="sv-ac sv-ac--{size}"
-  type="text"
-  {placeholder}
-  {...ac.inputProps()}
-/>
+<SvField id={uid} {label} {hint} {error} {required} {dir}>
+  <input
+    bind:this={fieldEl}
+    class="sv-ac sv-ac--{size}"
+    class:is-invalid={invalid}
+    type="text"
+    {placeholder}
+    {...ac.inputProps()}
+  />
+</SvField>
 
 {#if ac.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`} {...ac.listboxProps()}>
+  <div bind:this={panelEl} class="sv-ddl__panel" use:portalToBody use:popIn={{ up: rect.openUpward }} style:position="fixed" style:top={`${rect.top}px`} style:left={`${rect.left}px`} style:min-width={`${rect.width}px`} {...ac.listboxProps()}>
     {#each ac.filtered 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={ac.isActive(i)} {...ac.optionProps(i)}>{opt.label}</div>
@@ -86,4 +113,6 @@
   .sv-ac--md { height: 34px; font-size: 13px; }
   .sv-ac--lg { height: 40px; font-size: 15px; }
   .sv-ac:focus { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); }
+  .sv-ac.is-invalid { border-color: var(--sg-danger, #dc2626); }
+  .sv-ac.is-invalid:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-danger, #dc2626) 22%, transparent); }
 </style>

package/dist/SvAutoComplete.svelte.d.ts

@@ -1,15 +1,12 @@
 import { type ListOption } from './list-option';
-type Props = {
+import { type SvEditorProps } from './editor-contract';
+type Props = SvEditorProps & {
     value?: string;
     onChange?: (value: string) => void;
     /** Suggestions - strings or {value,label} (label is shown, value inserted). */
     suggestions?: ReadonlyArray<string | ListOption>;
     minChars?: number;
     placeholder?: string;
-    disabled?: boolean;
-    name?: string;
-    size?: 'sm' | 'md' | 'lg';
-    ariaLabel?: string;
 };
 declare const SvAutoComplete: import("svelte").Component<Props, {}, "">;
 type SvAutoComplete = ReturnType<typeof SvAutoComplete>;

package/dist/SvAvatar.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  /**
+   * SvAvatar - a user/entity avatar: an image with an initials + colour-hash
+   * fallback (used when there is no `src` or the image fails to load), plus an
+   * optional presence status dot. Parity: Smart avatar.
+   *
+   * ```svelte
+   * <SvAvatar name="Ada Lovelace" src="/ada.jpg" status="online" />
+   * ```
+   */
+  import { avatarInitials, avatarColorHue } from './avatar'
+
+  type Props = {
+    name?: string
+    src?: string
+    alt?: string
+    /** Preset (sm 28 / md 36 / lg 48) or an explicit pixel size. */
+    size?: 'sm' | 'md' | 'lg' | number
+    shape?: 'circle' | 'square'
+    status?: 'online' | 'offline' | 'busy' | 'away'
+    /** Override the hash-derived fallback colour (any CSS colour). */
+    color?: string
+  }
+
+  let { name = '', src, alt, size = 'md', shape = 'circle', status, color }: Props = $props()
+
+  const px = $derived(typeof size === 'number' ? size : size === 'sm' ? 28 : size === 'lg' ? 48 : 36)
+  const initials = $derived(avatarInitials(name))
+  const bg = $derived(color ?? `hsl(${avatarColorHue(name || '?')} 62% 45%)`)
+  // Fall back to initials when the image errors.
+  let broken = $state(false)
+  const showImg = $derived(!!src && !broken)
+</script>
+
+<span
+  class="sv-avatar sv-avatar--{shape}"
+  style:width={`${px}px`}
+  style:height={`${px}px`}
+  style:font-size={`${Math.round(px * 0.4)}px`}
+  style:background={showImg ? undefined : bg}
+  role="img"
+  aria-label={alt ?? (name || 'avatar')}
+  title={name || undefined}
+>
+  {#if showImg}
+    <img class="sv-avatar__img" src={src} alt={alt ?? name} onerror={() => (broken = true)} />
+  {:else if initials}
+    <span class="sv-avatar__initials" aria-hidden="true">{initials}</span>
+  {:else}
+    <svg class="sv-avatar__ph" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-4.4 0-8 2.5-8 5.5V22h16v-2.5C20 16.5 16.4 14 12 14Z" /></svg>
+  {/if}
+  {#if status}<span class="sv-avatar__status is-{status}" aria-hidden="true"></span>{/if}
+</span>
+
+<style>
+  .sv-avatar {
+    position: relative; display: inline-grid; place-items: center; overflow: visible;
+    color: #fff; font-weight: 600; line-height: 1; user-select: none; flex: none;
+    vertical-align: middle;
+  }
+  .sv-avatar--circle { border-radius: 50%; }
+  .sv-avatar--square { border-radius: 22%; }
+  .sv-avatar__img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
+  .sv-avatar--circle .sv-avatar__img, .sv-avatar--circle { }
+  .sv-avatar__initials { letter-spacing: 0.02em; }
+  .sv-avatar__ph { width: 62%; height: 62%; opacity: 0.9; }
+  .sv-avatar__status {
+    position: absolute; right: -1px; bottom: -1px; width: 28%; height: 28%; min-width: 8px; min-height: 8px;
+    border-radius: 50%; border: 2px solid var(--sg-bg, #fff);
+  }
+  .sv-avatar__status.is-online { background: var(--sg-success, #16a34a); }
+  .sv-avatar__status.is-offline { background: var(--sg-muted, #94a3b8); }
+  .sv-avatar__status.is-busy { background: var(--sg-danger, #dc2626); }
+  .sv-avatar__status.is-away { background: var(--sg-warning, #f59e0b); }
+</style>

package/dist/SvAvatar.svelte.d.ts

@@ -0,0 +1,14 @@
+type Props = {
+    name?: string;
+    src?: string;
+    alt?: string;
+    /** Preset (sm 28 / md 36 / lg 48) or an explicit pixel size. */
+    size?: 'sm' | 'md' | 'lg' | number;
+    shape?: 'circle' | 'square';
+    status?: 'online' | 'offline' | 'busy' | 'away';
+    /** Override the hash-derived fallback colour (any CSS colour). */
+    color?: string;
+};
+declare const SvAvatar: import("svelte").Component<Props, {}, "">;
+type SvAvatar = ReturnType<typeof SvAvatar>;
+export default SvAvatar;

package/dist/SvAvatarGroup.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  /**
+   * SvAvatarGroup - overlapping stacked avatars with a "+N" overflow pill, for
+   * "assigned to" / "members" rows. Each entry is a set of SvAvatar props.
+   *
+   * ```svelte
+   * <SvAvatarGroup max={3} avatars={[{ name: 'Ada' }, { name: 'Alan' }, { name: 'Grace' }, { name: 'Ken' }]} />
+   * ```
+   */
+  import SvAvatar from './SvAvatar.svelte'
+
+  type AvatarProps = { name?: string; src?: string; alt?: string; color?: string }
+  type Size = 'sm' | 'md' | 'lg' | number
+
+  type Props = {
+    avatars: ReadonlyArray<AvatarProps>
+    /** Max avatars shown before collapsing to "+N". */
+    max?: number
+    size?: Size
+  }
+
+  let { avatars, max = 4, size = 'md' }: Props = $props()
+
+  const shown = $derived(avatars.slice(0, max))
+  const overflow = $derived(Math.max(0, avatars.length - max))
+  const px = $derived(typeof size === 'number' ? size : size === 'sm' ? 28 : size === 'lg' ? 48 : 36)
+  const overlap = $derived(Math.round(px * 0.28))
+</script>
+
+<div class="sv-avgroup" role="group" style:--ov={`${overlap}px`}>
+  {#each shown as a, i (i)}
+    <span class="sv-avgroup__it" style:z-index={shown.length - i}><SvAvatar {...a} {size} /></span>
+  {/each}
+  {#if overflow}
+    <span class="sv-avgroup__more" style:width={`${px}px`} style:height={`${px}px`} style:font-size={`${Math.round(px * 0.36)}px`}>+{overflow}</span>
+  {/if}
+</div>
+
+<style>
+  .sv-avgroup { display: inline-flex; align-items: center; }
+  .sv-avgroup__it { display: inline-flex; margin-inline-start: calc(-1 * var(--ov, 10px)); border-radius: 50%; box-shadow: 0 0 0 2px var(--sg-bg, #fff); }
+  .sv-avgroup__it:first-child { margin-inline-start: 0; }
+  .sv-avgroup__more {
+    display: grid; place-items: center; margin-inline-start: calc(-1 * var(--ov, 10px)); border-radius: 50%;
+    background: var(--sg-row-hover-bg, #e2e8f0); color: var(--sg-muted, #64748b); font-weight: 650;
+    box-shadow: 0 0 0 2px var(--sg-bg, #fff);
+  }
+</style>

package/dist/SvAvatarGroup.svelte.d.ts

@@ -0,0 +1,16 @@
+type AvatarProps = {
+    name?: string;
+    src?: string;
+    alt?: string;
+    color?: string;
+};
+type Size = 'sm' | 'md' | 'lg' | number;
+type Props = {
+    avatars: ReadonlyArray<AvatarProps>;
+    /** Max avatars shown before collapsing to "+N". */
+    max?: number;
+    size?: Size;
+};
+declare const SvAvatarGroup: import("svelte").Component<Props, {}, "">;
+type SvAvatarGroup = ReturnType<typeof SvAvatarGroup>;
+export default SvAvatarGroup;

package/dist/SvBadge.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  /**
+   * SvBadge - a small status pill / count label. Themed via `--sg-*` tokens with
+   * soft `color-mix` tints so it sits well on light and dark. Parity: Smart badge.
+   *
+   * ```svelte
+   * <SvBadge variant="success">Active</SvBadge>
+   * <SvBadge variant="danger" dot /> 3 failed
+   * ```
+   */
+  import type { Snippet } from 'svelte'
+
+  type Variant = 'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info'
+
+  type Props = {
+    variant?: Variant
+    size?: 'sm' | 'md'
+    /** Rounded-pill shape (default) vs a softer rounded rect. */
+    pill?: boolean
+    /** Show a leading status dot instead of / before content. */
+    dot?: boolean
+    children?: Snippet
+  }
+
+  let { variant = 'neutral', size = 'md', pill = true, dot = false, children }: Props = $props()
+</script>
+
+<span class="sv-badge sv-badge--{variant} sv-badge--{size}" class:is-pill={pill} class:has-dot={dot}>
+  {#if dot}<span class="sv-badge__dot" aria-hidden="true"></span>{/if}
+  {@render children?.()}
+</span>
+
+<style>
+  .sv-badge {
+    --_c: var(--sg-muted, #64748b);
+    display: inline-flex; align-items: center; gap: 5px; box-sizing: border-box;
+    font-weight: 600; line-height: 1; white-space: nowrap;
+    color: var(--_c);
+    background: color-mix(in srgb, var(--_c) 14%, transparent);
+    border: 1px solid color-mix(in srgb, var(--_c) 26%, transparent);
+    border-radius: 6px;
+  }
+  .sv-badge.is-pill { border-radius: 999px; }
+  .sv-badge--sm { font-size: 10.5px; padding: 2px 7px; }
+  .sv-badge--md { font-size: 12px; padding: 3px 9px; }
+  .sv-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--_c); }
+
+  .sv-badge--neutral { --_c: var(--sg-muted, #64748b); }
+  .sv-badge--accent { --_c: var(--sg-accent, #2563eb); }
+  .sv-badge--success { --_c: var(--sg-success, #16a34a); }
+  .sv-badge--warning { --_c: var(--sg-warning, #d97706); }
+  .sv-badge--danger { --_c: var(--sg-danger, #dc2626); }
+  .sv-badge--info { --_c: var(--sg-info, #0891b2); }
+</style>

package/dist/SvBadge.svelte.d.ts

@@ -0,0 +1,23 @@
+/**
+   * SvBadge - a small status pill / count label. Themed via `--sg-*` tokens with
+   * soft `color-mix` tints so it sits well on light and dark. Parity: Smart badge.
+   *
+   * ```svelte
+   * <SvBadge variant="success">Active</SvBadge>
+   * <SvBadge variant="danger" dot /> 3 failed
+   * ```
+   */
+import type { Snippet } from 'svelte';
+type Variant = 'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info';
+type Props = {
+    variant?: Variant;
+    size?: 'sm' | 'md';
+    /** Rounded-pill shape (default) vs a softer rounded rect. */
+    pill?: boolean;
+    /** Show a leading status dot instead of / before content. */
+    dot?: boolean;
+    children?: Snippet;
+};
+declare const SvBadge: import("svelte").Component<Props, {}, "">;
+type SvBadge = ReturnType<typeof SvBadge>;
+export default SvBadge;