Feedback & display

Status, identity, loading and surface primitives for dashboards and detail panels. All are theme-token driven (light / dark + presets) and reduced-motion aware.

SvBadge

A small status pill or count label, tinted from --sg-* tokens with soft color-mix backgrounds.

<SvBadge variant="success" dot>Active</SvBadge>
<SvBadge variant="info" pill={false}>v1.2</SvBadge>

Props: variant (neutral | accent | success | warning | danger | info), size (sm | md), pill, dot, children.

SvAvatar

An image avatar with an initials + colour-hash fallback (used when there is no src or the image fails to load) and an optional presence dot.

<SvAvatar name="Ada Lovelace" src="/ada.jpg" status="online" />
<SvAvatar name="Grace Hopper" size="lg" />   <!-- initials fallback -->

Props: name, src, alt, size (sm | md | lg | number px), shape (circle | square), status (online | offline | busy | away), color. Helpers avatarInitials(name) and avatarColorHue(name) are exported and pure.

SvSkeleton

A shimmering loading placeholder; falls back to a static tint under prefers-reduced-motion.

<SvSkeleton variant="text" lines={3} />
<SvSkeleton variant="circle" width="40px" height="40px" />

Props: variant (text | rect | circle), width, height, radius, lines (text only; the last line is shorter), animated.

SvCard

A themed surface with an optional header (title + subtitle or a header snippet), body and footer. The building block for dashboards and Studio-generated screens.

<SvCard title="Revenue" subtitle="Last 30 days" hoverable>
  <Chart … />
  {#snippet footer()}<a href="/reports">View report</a>{/snippet}
</SvCard>

Props: title, subtitle, hoverable, flush (remove body padding), header / children / footer snippets.

SvAlert

An inline, persistent contextual message (unlike the transient toast).

<SvAlert variant="warning" title="Storage almost full" dismissible>You've used 92%.</SvAlert>

Props: variant (info | success | warning | danger | neutral), title, dismissible, onDismiss, hideIcon, soft, children, actions / icon snippets.

SvStat

A KPI card with a label, value and an auto-coloured up/down delta.

<SvStat label="Revenue" value="$48.2k" delta={12.4} hint="vs last month" />
<SvStat label="Churn" value="1.8%" delta={-0.6} invert /> <!-- down is good -->

Props: label, value, delta (number auto-signs + infers trend, or a string), trend, hint, invert (down = good), icon / chart snippets.

SvChip

A compact, optionally removable/clickable pill (with an optional leading avatar).

<SvChip removable onRemove={() => drop(tag)}>{tag}</SvChip>

Props: variant, size, removable, onRemove, onClick, solid, disabled, children, leading snippet.

SvTimeline

A vertical activity feed. Data-driven, with an optional per-item snippet.

<SvTimeline items={[{ title: 'Placed', time: '09:12' }, { title: 'Shipped', time: '14:40' }]} />

TimelineItem: { id?, title, description?, time?, color?, icon? }. Props: items, item snippet (custom content).

SvAvatarGroup

Overlapping stacked avatars with a "+N" overflow.

<SvAvatarGroup max={4} avatars={[{ name: 'Ada' }, { name: 'Alan' }, ...]} />

Props: avatars (SvAvatar props each), max, size.

SvSparkline

A tiny inline chart (line / area / bar / win-loss) from a number array - a thin renderer over the pure buildSparkline geometry.

<SvSparkline data={[3, 7, 4, 9, 6, 11, 8]} type="area" />

Props: data, type, width, height, color, negativeColor, lineWidth, min, max, lastPoint.

SvEmptyState

A centered placeholder for empty screens (icon + title + description + actions).

<SvEmptyState title="No invoices yet" description="Create your first one.">
  <SvButton>New invoice</SvButton>
</SvEmptyState>

Props: title, description, compact, icon snippet, children (actions).

Component guides

Each component has its own full tutorial with props, keyboard behaviour and recipes: