@svgrid/grid 1.2.34 → 2.0.1

package/src/SvBreadcrumb.svelte

@@ -0,0 +1,88 @@
+<script lang="ts" module>
+  export type { BreadcrumbItem } from './ui-app.types'
+</script>
+
+<script lang="ts">
+  /**
+   * SvBreadcrumb - a navigation trail. Each item is a link (`href`), a button
+   * (`onClick`), or plain text; the last item is the current page and is never
+   * interactive. Long trails collapse the middle to an expandable ellipsis.
+   * Parity: Smart breadcrumb.
+   *
+   * ```svelte
+   * <SvBreadcrumb items={[{label:'Home', href:'/'}, {label:'Orders', href:'/orders'}, {label:'#1024'}]} />
+   * ```
+   */
+  import type { BreadcrumbItem } from './ui-app.types'
+
+  type Props = {
+    items: ReadonlyArray<BreadcrumbItem>
+    /** Separator between crumbs. Default a chevron. */
+    separator?: string
+    /** Collapse the middle when there are more than this many crumbs. */
+    maxItems?: number
+    ariaLabel?: string
+  }
+
+  let { items, separator = '/', maxItems, ariaLabel = 'Breadcrumb' }: Props = $props()
+
+  let expanded = $state(false)
+
+  // When collapsed, show the first crumb, an ellipsis, and the last two.
+  const collapsed = $derived(!!maxItems && !expanded && items.length > maxItems)
+  type Display = { item: BreadcrumbItem; index: number } | 'ellipsis'
+  const display = $derived<Display[]>(
+    collapsed
+      ? [
+          { item: items[0]!, index: 0 },
+          'ellipsis',
+          ...items.slice(-2).map((item, i) => ({ item, index: items.length - 2 + i })),
+        ]
+      : items.map((item, index) => ({ item, index })),
+  )
+</script>
+
+<nav class="sv-bc" aria-label={ariaLabel}>
+  <ol class="sv-bc__list">
+    {#each display as entry, i (entry === 'ellipsis' ? `e${i}` : entry.index)}
+      {#if i > 0}<li class="sv-bc__sep" aria-hidden="true">{separator}</li>{/if}
+      {#if entry === 'ellipsis'}
+        <li>
+          <button type="button" class="sv-bc__ellipsis" aria-label="Show collapsed crumbs" onclick={() => (expanded = true)}>&hellip;</button>
+        </li>
+      {:else}
+        {@const isLast = entry.index === items.length - 1}
+        <li class="sv-bc__item" class:is-current={isLast}>
+          {#if isLast}
+            <span aria-current="page">{#if entry.item.icon}<span class="sv-bc__icon" aria-hidden="true">{entry.item.icon}</span>{/if}{entry.item.label}</span>
+          {:else if entry.item.href}
+            <a class="sv-bc__link" href={entry.item.href}>{#if entry.item.icon}<span class="sv-bc__icon" aria-hidden="true">{entry.item.icon}</span>{/if}{entry.item.label}</a>
+          {:else if entry.item.onClick}
+            <button type="button" class="sv-bc__link sv-bc__btn" onclick={entry.item.onClick}>{#if entry.item.icon}<span class="sv-bc__icon" aria-hidden="true">{entry.item.icon}</span>{/if}{entry.item.label}</button>
+          {:else}
+            <span>{#if entry.item.icon}<span class="sv-bc__icon" aria-hidden="true">{entry.item.icon}</span>{/if}{entry.item.label}</span>
+          {/if}
+        </li>
+      {/if}
+    {/each}
+  </ol>
+</nav>
+
+<style>
+  .sv-bc__list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; font-size: 13px; }
+  .sv-bc__sep { color: var(--sg-muted, #94a3b8); user-select: none; }
+  .sv-bc__item { color: var(--sg-muted, #64748b); }
+  .sv-bc__item.is-current { color: var(--sg-fg, #0f172a); font-weight: 600; }
+  .sv-bc__icon { margin-inline-end: 4px; }
+  .sv-bc__link {
+    color: var(--sg-muted, #64748b); text-decoration: none; border-radius: 4px;
+    display: inline-flex; align-items: center;
+  }
+  .sv-bc__link:hover { color: var(--sg-accent, #2563eb); text-decoration: underline; }
+  .sv-bc__btn { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
+  .sv-bc__ellipsis {
+    background: var(--sg-row-hover-bg, #f1f5f9); border: 0; border-radius: 5px; cursor: pointer;
+    color: var(--sg-muted, #64748b); padding: 0 7px; height: 20px; line-height: 1; font: inherit;
+  }
+  .sv-bc__ellipsis:hover { color: var(--sg-fg, #0f172a); }
+</style>

package/src/SvButtonGroup.svelte

@@ -0,0 +1,121 @@
+<script lang="ts" module>
+  export type { ButtonGroupItem, ButtonGroupMode, ButtonGroupValue } from './createButtonGroup.svelte'
+</script>
+
+<script lang="ts">
+  /**
+   * SvButtonGroup - a segmented button bar with single-select (radio semantics),
+   * multi-select (toggle set) or plain action buttons. Parity: Smart
+   * `smart-button-group`. Controlled via `value` + `onChange`; roving tabindex +
+   * arrow-key navigation come from the headless `createButtonGroup` core.
+   *
+   * Part of the editor kit: carries the shared contract (label, hint, error
+   * validation, size, `dir`/RTL) via `<SvField>`.
+   */
+  import SvField from './SvField.svelte'
+  import { nextEditorId, type SvEditorProps } from './editor-contract'
+  import { createButtonGroup, type ButtonGroupItem, type ButtonGroupMode, type ButtonGroupValue } from './createButtonGroup.svelte'
+
+  type Props = SvEditorProps & {
+    items: ReadonlyArray<ButtonGroupItem>
+    value?: ButtonGroupValue
+    onChange?: (value: string | number | Array<string | number>) => void
+    /** 'single' (radio), 'multiple' (toggle set), or 'none' (action buttons). */
+    mode?: ButtonGroupMode
+    orientation?: 'horizontal' | 'vertical'
+    /** 'solid' segmented fill (default) or 'outline' pills. */
+    variant?: 'solid' | 'outline'
+  }
+
+  let {
+    items,
+    value = null,
+    onChange,
+    mode = 'single',
+    orientation = 'horizontal',
+    variant = 'solid',
+    disabled = false,
+    size = 'md',
+    name,
+    ariaLabel,
+    invalid = false,
+    required = false,
+    error,
+    label,
+    hint,
+    dir,
+    id,
+  }: Props = $props()
+
+  const autoId = nextEditorId('sv-bg')
+  const uid = $derived(id ?? autoId)
+
+  const g = createButtonGroup({
+    items: () => items,
+    value: () => value,
+    onChange: (v) => onChange?.(v),
+    mode: () => mode,
+    orientation: () => orientation,
+    disabled: () => disabled,
+    dir: () => dir,
+    id: () => uid,
+    invalid: () => invalid,
+    required: () => required,
+    error: () => error,
+    hint: () => hint,
+    ariaLabel: () => ariaLabel ?? label,
+  })
+</script>
+
+<SvField id={uid} {label} {hint} {error} {required} {dir}>
+  <div
+    class="sv-bg sv-bg--{orientation} sv-bg--{variant} sv-bg--{size}"
+    class:is-disabled={disabled}
+    class:is-invalid={invalid}
+    {...g.rootProps()}
+  >
+    {#each items as item, i (item.value)}
+      <button
+        class="sv-bg__btn"
+        class:is-selected={g.isSelected(item.value)}
+        {...g.buttonProps(i)}
+      >{item.label ?? item.value}</button>
+    {/each}
+    {#if name}
+      {#each g.selectedValues as v (v)}<input type="hidden" {name} value={v} />{/each}
+    {/if}
+  </div>
+</SvField>
+
+<style>
+  .sv-bg {
+    --_accent: var(--sg-accent, #2563eb);
+    --_border: var(--sg-input-border, var(--sg-border, #cbd5e1));
+    --_radius: var(--sg-radius, 8px);
+    display: inline-flex; background: var(--sg-input-bg, #fff);
+    border: 1px solid var(--_border); border-radius: var(--_radius); overflow: hidden;
+  }
+  .sv-bg--vertical { flex-direction: column; }
+  .sv-bg.is-disabled { opacity: 0.6; }
+  .sv-bg.is-invalid { border-color: var(--sg-danger, #dc2626); }
+  .sv-bg:focus-within { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); }
+  .sv-bg.is-invalid:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-danger, #dc2626) 22%, transparent); }
+
+  .sv-bg__btn {
+    background: none; border: 0; font: inherit; font-weight: 600; color: var(--sg-fg, #0f172a);
+    cursor: pointer; white-space: nowrap; transition: background 0.12s, color 0.12s;
+  }
+  .sv-bg--sm .sv-bg__btn { padding: 5px 11px; font-size: 12px; }
+  .sv-bg--md .sv-bg__btn { padding: 7px 14px; font-size: 13px; }
+  .sv-bg--lg .sv-bg__btn { padding: 10px 18px; font-size: 15px; }
+  /* Segment dividers use a logical border so the bar mirrors under RTL. */
+  .sv-bg--horizontal .sv-bg__btn + .sv-bg__btn { border-inline-start: 1px solid var(--_border); }
+  .sv-bg--vertical .sv-bg__btn + .sv-bg__btn { border-top: 1px solid var(--_border); }
+  .sv-bg__btn:hover:not(:disabled):not(.is-selected) { background: var(--sg-row-hover-bg, #f1f5f9); }
+  .sv-bg__btn:focus-visible { outline: 2px solid var(--sg-focus-ring, var(--_accent)); outline-offset: -2px; }
+  .sv-bg__btn:disabled { opacity: 0.45; cursor: not-allowed; }
+
+  .sv-bg--solid .sv-bg__btn.is-selected { background: var(--_accent); color: var(--sg-on-accent, #fff); }
+  .sv-bg--solid .sv-bg__btn.is-selected + .sv-bg__btn, .sv-bg--solid .sv-bg__btn.is-selected { border-color: var(--_accent); }
+  .sv-bg--outline .sv-bg__btn.is-selected { color: var(--_accent); background: color-mix(in srgb, var(--_accent) 12%, transparent); }
+</style>

package/src/SvButtonGroup.test.ts

@@ -0,0 +1,72 @@
+/**
+ * Component tests for SvButtonGroup: single-select radio semantics, multi-select
+ * toggle set, roving tabindex, and the shared editor contract wiring.
+ */
+import { describe, expect, it } from 'vitest'
+import { mount, unmount, flushSync } from 'svelte'
+import SvButtonGroup from './SvButtonGroup.svelte'
+
+function mountBg(props: Record<string, unknown>) {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  const app = mount(SvButtonGroup, { target, props: props as any })
+  flushSync()
+  return { target, destroy: () => { unmount(app); target.remove() } }
+}
+
+const items = [
+  { value: 'day', label: 'Day' },
+  { value: 'week', label: 'Week' },
+  { value: 'month', label: 'Month' },
+]
+
+describe('SvButtonGroup', () => {
+  it('single mode uses radiogroup/radio semantics and checks the value', () => {
+    const { target, destroy } = mountBg({ items, value: 'week', mode: 'single' })
+    try {
+      const group = target.querySelector<HTMLElement>('.sv-bg')!
+      expect(group.getAttribute('role')).toBe('radiogroup')
+      const btns = [...target.querySelectorAll<HTMLButtonElement>('.sv-bg__btn')]
+      expect(btns.map((b) => b.getAttribute('role'))).toEqual(['radio', 'radio', 'radio'])
+      expect(btns[1].getAttribute('aria-checked')).toBe('true')
+      // Roving tabindex: only the checked/active button is tabbable.
+      expect(btns[1].tabIndex).toBe(0)
+      expect(btns[0].tabIndex).toBe(-1)
+    } finally { destroy() }
+  })
+
+  it('single mode emits a scalar on click', () => {
+    let got: unknown
+    const { target, destroy } = mountBg({ items, value: 'day', mode: 'single', onChange: (v: unknown) => (got = v) })
+    try {
+      const btns = target.querySelectorAll<HTMLButtonElement>('.sv-bg__btn')
+      btns[2].click()
+      flushSync()
+      expect(got).toBe('month')
+    } finally { destroy() }
+  })
+
+  it('multiple mode toggles a set and uses aria-pressed', () => {
+    let got: unknown
+    const { target, destroy } = mountBg({ items, value: ['day'], mode: 'multiple', onChange: (v: unknown) => (got = v) })
+    try {
+      const group = target.querySelector<HTMLElement>('.sv-bg')!
+      expect(group.getAttribute('role')).toBe('group')
+      const btns = target.querySelectorAll<HTMLButtonElement>('.sv-bg__btn')
+      expect(btns[0].getAttribute('aria-pressed')).toBe('true')
+      btns[1].click()
+      flushSync()
+      expect(got).toEqual(['day', 'week'])
+    } finally { destroy() }
+  })
+
+  it('wires label + aria-invalid via the editor contract', () => {
+    const { target, destroy } = mountBg({ items, value: null, mode: 'single', label: 'View', invalid: true, error: 'Pick one' })
+    try {
+      const group = target.querySelector<HTMLElement>('.sv-bg')!
+      expect(group.getAttribute('aria-invalid')).toBe('true')
+      expect(target.querySelector('.sv-field__label')!.textContent).toContain('View')
+      expect(target.querySelector('.sv-field__error')!.textContent).toBe('Pick one')
+    } finally { destroy() }
+  })
+})

package/src/SvCalendar.svelte

@@ -16,20 +16,29 @@
    * Parity target: Smart `smart-calendar` (selectionModes, min/max, restricted /
    * important dates, week numbers, firstDayOfWeek, drill navigation, keyboard).
    */
-  import { untrack } from 'svelte'
+  import { untrack, type Snippet } from 'svelte'
+  import { resolveMessages, type EditorDir } from './editor-contract'
   import {
     createCalendar,
     type CalendarValue,
     type CalendarPreset,
     type CalendarAnimation,
+    type CalendarDayState,
     type DisplayMode,
   } from './createCalendar.svelte'
   import type { SelectionMode } from './datetime/date-selection'
   import type { RestrictOptions } from './datetime/date-restrict'
   import type { DateLike } from './datetime/date-core'
+  import type { RecurrenceRule } from './recurrence'
 
   type NameFormat = 'narrow' | 'short' | 'long'
 
+  /** User-facing strings (localizable via `messages`). */
+  type CalendarMessages = { label: string; shortcuts: string; today: string; clear: string; prev: string; next: string }
+  const DEFAULT_MESSAGES: CalendarMessages = {
+    label: 'Calendar', shortcuts: 'Shortcuts', today: 'Today', clear: 'Clear', prev: 'Previous', next: 'Next',
+  }
+
   type Props = {
     /** Selected value(s). Single Date for one/zeroOrOne, array for multi modes. */
     value?: CalendarValue
@@ -72,6 +81,16 @@
     dateTooltip?: (date: Date) => string | null | undefined
     /** One-click shortcuts (e.g. Today, Last 7 days) shown in a side rail. */
     presets?: ReadonlyArray<CalendarPreset>
+    /** Text direction (rtl mirrors layout + flips the nav arrows; auto inherits). */
+    dir?: EditorDir
+    /** Override the built-in strings (group/shortcut labels, footer buttons). */
+    messages?: Partial<CalendarMessages>
+    /** Repeat pattern(s): matching days get an indicator + `recurring` day-state. */
+    recurrence?: RecurrenceRule | ReadonlyArray<RecurrenceRule> | null
+    /** Render rich content inside each day cell (events, dots, badges). Receives
+     *  the date + its day-state. Switches the month grid to a taller,
+     *  top-aligned layout so there's room for the content. */
+    day?: Snippet<[Date, CalendarDayState]>
   }
 
   let {
@@ -101,8 +120,18 @@
     wheelNavigation = false,
     dateTooltip,
     presets,
+    dir,
+    messages,
+    recurrence = null,
+    day,
   }: Props = $props()
 
+  const M = $derived(resolveMessages(DEFAULT_MESSAGES, messages))
+  const resolvedDir = $derived(dir === 'ltr' || dir === 'rtl' ? dir : undefined)
+  // With several month panels side by side, leading/trailing days of adjacent
+  // months overlap visually, so hide them by default when months > 1.
+  const hideOther = $derived(hideOtherMonthDays || months > 1)
+
   // The headless core owns all reactive state, selection, navigation, keyboard
   // and ARIA. Reactive inputs are passed as getters; callbacks as closures.
   const cal = createCalendar({
@@ -124,6 +153,7 @@
     dayNameFormat: () => dayNameFormat,
     monthNameFormat: () => monthNameFormat,
     dateTooltip: () => dateTooltip,
+    recurrence: () => recurrence,
   })
 
   // --- View-change animation (framework-native Web Animations API) -----------
@@ -181,12 +211,14 @@
   class:sv-cal--disabled={disabled}
   class:sv-cal--with-presets={presets && presets.length}
   class:sv-cal--band={selectionMode === 'range' || selectionMode === 'week'}
+  class:sv-cal--rich={!!day}
   role="group"
-  aria-label="Calendar"
+  aria-label={M.label}
   aria-disabled={disabled}
+  dir={resolvedDir}
 >
   {#if presets && presets.length}
-    <div class="sv-cal__presets" role="group" aria-label="Shortcuts">
+    <div class="sv-cal__presets" role="group" aria-label={M.shortcuts}>
       {#each presets as p, i (i)}
         <button class="sv-cal__preset" {...cal.presetProps(p)}>{p.label}</button>
       {/each}
@@ -223,7 +255,7 @@
               {#if weekNumbers}<span class="sv-cal__wk" aria-hidden="true">{week[0]?.week}</span>{/if}
               {#each week as cell (cell.date.getTime())}
                 {@const st = cal.dayState(cell.date, panel.month)}
-                {#if st.outside && hideOtherMonthDays}
+                {#if st.outside && hideOther}
                   <span class="sv-cal__day sv-cal__day--empty" role="gridcell" aria-hidden="true"></span>
                 {:else}
                   <button
@@ -234,8 +266,9 @@
                     class:is-important={st.important}
                     class:is-preview={st.preview}
                     class:is-focused={st.focused}
+                    class:is-recurring={st.recurring}
                     {...cal.dayProps(cell, panel.month)}
-                  >{cell.date.getDate()}</button>
+                  ><span class="sv-cal__daynum">{cell.date.getDate()}</span>{#if day}<span class="sv-cal__daybody">{@render day(cell.date, st)}</span>{/if}</button>
                 {/if}
               {/each}
             </div>
@@ -271,9 +304,9 @@
 
   {#if footer}
     <div class="sv-cal__footer">
-      <button type="button" class="sv-cal__foot-btn" onclick={cal.goToday} disabled={disabled}>Today</button>
+      <button type="button" class="sv-cal__foot-btn" onclick={cal.goToday} disabled={disabled}>{M.today}</button>
       {#if cal.canClear}
-        <button type="button" class="sv-cal__foot-btn" onclick={cal.clearSelection} disabled={disabled}>Clear</button>
+        <button type="button" class="sv-cal__foot-btn" onclick={cal.clearSelection} disabled={disabled}>{M.clear}</button>
       {/if}
     </div>
   {/if}
@@ -310,13 +343,15 @@
   /* Quick-shortcut rail (Today / Last 7 days / ...) shown when `presets` is set. */
   .sv-cal__presets {
     display: flex; flex-direction: column; gap: 2px;
-    padding-right: 10px; border-right: 1px solid var(--_border);
+    padding-inline-end: 10px; border-inline-end: 1px solid var(--_border);
     min-width: 118px; align-self: stretch;
   }
   .sv-cal__preset {
-    text-align: left; padding: 6px 10px; font: inherit; font-size: 12px; font-weight: 550;
+    text-align: start; padding: 6px 10px; font: inherit; font-size: 12px; font-weight: 550;
     background: none; border: 0; border-radius: var(--_radius); color: inherit; cursor: pointer; white-space: nowrap;
   }
+  /* Under RTL the prev/next chevron glyphs must point the other way. */
+  .sv-cal[dir='rtl'] .sv-cal__nav svg { transform: scaleX(-1); }
   .sv-cal__preset:hover:not(:disabled) { background: var(--_hover); color: var(--_accent); }
   .sv-cal__preset:disabled { opacity: 0.5; cursor: default; }
 
@@ -369,6 +404,34 @@
     content: ''; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
     width: 4px; height: 4px; border-radius: 50%; background: var(--sg-danger, #dc2626);
   }
+  /* Repeat-pattern indicator: a small ring in the top-inline-end corner
+     (distinct from the is-important bottom dot). */
+  .sv-cal__day.is-recurring::before {
+    content: ''; position: absolute; top: 4px; inset-inline-end: 4px;
+    width: 5px; height: 5px; border-radius: 50%; pointer-events: none;
+    border: 1.5px solid color-mix(in srgb, var(--_accent) 75%, transparent);
+  }
+  .sv-cal:not(.sv-cal--rich) .sv-cal__day.is-selected.is-recurring::before { border-color: var(--sg-on-accent, #fff); }
+
+  /* --- Rich month grid: enabled by a `day` snippet. Cells fill the column width
+     and become taller / top-aligned so the snippet content (events, badges) has
+     room - turning the picker into an event-calendar surface. --- */
+  .sv-cal--rich .sv-cal__weekdays, .sv-cal--rich .sv-cal__week { grid-template-columns: repeat(7, minmax(0, 1fr)); }
+  .sv-cal--rich .sv-cal__weekdays:has(.sv-cal__wk-head), .sv-cal--rich .sv-cal__week:has(.sv-cal__wk) { grid-template-columns: 26px repeat(7, minmax(0, 1fr)); }
+  .sv-cal--rich .sv-cal__weekday { justify-items: start; padding-inline-start: 6px; }
+  .sv-cal--rich .sv-cal__day {
+    width: auto; height: auto; min-height: 90px; display: flex; flex-direction: column;
+    align-items: stretch; gap: 3px; padding: 4px 5px 6px; text-align: start; border-radius: 8px;
+  }
+  .sv-cal--rich .sv-cal__day.is-today { box-shadow: none; }
+  .sv-cal--rich .sv-cal__day.is-selected { background: color-mix(in srgb, var(--_accent) 9%, transparent); color: inherit; }
+  .sv-cal--rich .sv-cal__daynum {
+    align-self: flex-start; flex: none; width: 24px; height: 24px; display: grid; place-items: center;
+    border-radius: 50%; font-size: 12.5px; font-weight: 600;
+  }
+  .sv-cal--rich .sv-cal__day.is-today .sv-cal__daynum { background: var(--_accent); color: var(--sg-on-accent, #fff); }
+  .sv-cal--rich .sv-cal__daybody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
+  .sv-cal--rich .sv-cal__day.is-important::after { display: none; }
   .sv-cal__day.is-preview { background: color-mix(in srgb, var(--_accent) 16%, transparent); border-radius: 0; }
   .sv-cal__day.is-selected {
     background: var(--_accent); color: var(--sg-on-accent, #fff); font-weight: 650;

package/src/SvCard.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  /**
+   * SvCard - a themed surface container with an optional header (title +
+   * subtitle or a custom `header` snippet), body, and footer. The building block
+   * for dashboards and Studio-generated app screens. Parity: Smart card.
+   *
+   * ```svelte
+   * <SvCard title="Revenue" subtitle="Last 30 days">
+   *   <Chart .../>
+   *   {#snippet footer()}<a href="/reports">View report</a>{/snippet}
+   * </SvCard>
+   * ```
+   */
+  import type { Snippet } from 'svelte'
+
+  type Props = {
+    title?: string
+    subtitle?: string
+    /** Lift + accent border on hover (for clickable cards). */
+    hoverable?: boolean
+    /** Remove body padding (e.g. a card wrapping a full-bleed grid/table). */
+    flush?: boolean
+    /** Custom header content; overrides title/subtitle when provided. */
+    header?: Snippet
+    children?: Snippet
+    footer?: Snippet
+  }
+
+  let { title, subtitle, hoverable = false, flush = false, header, children, footer }: Props = $props()
+  const hasHeader = $derived(!!header || !!title || !!subtitle)
+</script>
+
+<div class="sv-card" class:is-hoverable={hoverable}>
+  {#if hasHeader}
+    <div class="sv-card__header">
+      {#if header}
+        {@render header()}
+      {:else}
+        {#if title}<h3 class="sv-card__title">{title}</h3>{/if}
+        {#if subtitle}<p class="sv-card__subtitle">{subtitle}</p>{/if}
+      {/if}
+    </div>
+  {/if}
+  <div class="sv-card__body" class:is-flush={flush}>{@render children?.()}</div>
+  {#if footer}<div class="sv-card__footer">{@render footer()}</div>{/if}
+</div>
+
+<style>
+  .sv-card {
+    display: flex; flex-direction: column;
+    background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
+    border: 1px solid var(--sg-border, #e2e8f0); border-radius: var(--sg-radius-lg, 12px);
+    overflow: hidden;
+    transition: box-shadow 0.16s, border-color 0.16s, transform 0.16s;
+  }
+  .sv-card.is-hoverable:hover {
+    border-color: color-mix(in srgb, var(--sg-accent, #2563eb) 45%, var(--sg-border, #e2e8f0));
+    box-shadow: 0 10px 30px -12px rgba(15, 23, 42, 0.28);
+    transform: translateY(-1px);
+  }
+  @media (prefers-reduced-motion: reduce) { .sv-card.is-hoverable:hover { transform: none; } }
+  .sv-card__header { padding: 14px 16px; border-bottom: 1px solid var(--sg-border, #e2e8f0); }
+  .sv-card__title { margin: 0; font-size: 14.5px; font-weight: 650; }
+  .sv-card__subtitle { margin: 2px 0 0; font-size: 12.5px; color: var(--sg-muted, #64748b); }
+  .sv-card__body { padding: 16px; flex: 1; font-size: 13.5px; line-height: 1.55; }
+  .sv-card__body.is-flush { padding: 0; }
+  .sv-card__footer {
+    padding: 12px 16px; border-top: 1px solid var(--sg-border, #e2e8f0);
+    font-size: 13px; color: var(--sg-muted, #64748b);
+  }
+</style>

package/src/SvCarousel.svelte

@@ -0,0 +1,134 @@
+<script lang="ts">
+  /**
+   * SvCarousel - a slideshow: a sliding track with prev/next arrows, dot
+   * indicators, optional autoplay (pauses on hover/focus) and swipe. Slides are
+   * rendered by the `slide` snippet (index in, your content out). Parity: Smart
+   * carousel.
+   *
+   * ```svelte
+   * <SvCarousel count={imgs.length} autoplay={4000}>
+   *   {#snippet slide(i)}<img src={imgs[i]} alt="" />{/snippet}
+   * </SvCarousel>
+   * ```
+   */
+  import type { Snippet } from 'svelte'
+
+  type Props = {
+    count: number
+    slide?: Snippet<[number]>
+    /** Active slide index (bindable). */
+    current?: number
+    /** Autoplay interval in ms; 0 = off. */
+    autoplay?: number
+    loop?: boolean
+    arrows?: boolean
+    dots?: boolean
+    ariaLabel?: string
+  }
+
+  let {
+    count,
+    slide,
+    current = $bindable(0),
+    autoplay = 0,
+    loop = true,
+    arrows = true,
+    dots = true,
+    ariaLabel = 'Carousel',
+  }: Props = $props()
+
+  function go(i: number) {
+    if (count === 0) return
+    current = loop ? (i + count) % count : Math.max(0, Math.min(i, count - 1))
+  }
+  const next = () => go(current + 1)
+  const prev = () => go(current - 1)
+
+  // Autoplay, paused while hovered/focused.
+  let paused = $state(false)
+  $effect(() => {
+    if (!autoplay || paused || count < 2) return
+    const t = setInterval(next, autoplay)
+    return () => clearInterval(t)
+  })
+
+  // Swipe.
+  let dragging = $state(false)
+  let startX = 0
+  let dx = $state(0)
+  function down(e: PointerEvent) {
+    dragging = true
+    startX = e.clientX
+    ;(e.currentTarget as HTMLElement).setPointerCapture?.(e.pointerId)
+  }
+  function move(e: PointerEvent) { if (dragging) dx = e.clientX - startX }
+  function up() {
+    if (!dragging) return
+    dragging = false
+    if (Math.abs(dx) > 50) (dx < 0 ? next() : prev())
+    dx = 0
+  }
+</script>
+
+<div
+  class="sv-carousel"
+  role="group"
+  aria-roledescription="carousel"
+  aria-label={ariaLabel}
+  onpointerenter={() => (paused = true)}
+  onpointerleave={() => (paused = false)}
+  onfocusin={() => (paused = true)}
+  onfocusout={() => (paused = false)}
+>
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="sv-carousel__viewport" onpointerdown={down} onpointermove={move} onpointerup={up} onpointercancel={up}>
+    <div class="sv-carousel__track" class:is-dragging={dragging} style:transform={`translateX(calc(${-current * 100}% + ${dx}px))`}>
+      {#each Array(count) as _, i (i)}
+        <div class="sv-carousel__slide" role="group" aria-roledescription="slide" aria-label={`${i + 1} of ${count}`} aria-hidden={i !== current}>
+          {@render slide?.(i)}
+        </div>
+      {/each}
+    </div>
+  </div>
+
+  {#if arrows && count > 1}
+    <button type="button" class="sv-carousel__arrow is-prev" aria-label="Previous slide" onclick={prev} disabled={!loop && current === 0}>‹</button>
+    <button type="button" class="sv-carousel__arrow is-next" aria-label="Next slide" onclick={next} disabled={!loop && current === count - 1}>›</button>
+  {/if}
+
+  {#if dots && count > 1}
+    <div class="sv-carousel__dots">
+      {#each Array(count) as _, i (i)}
+        <button type="button" class="sv-carousel__dot" class:is-active={i === current} aria-label={`Go to slide ${i + 1}`} aria-current={i === current ? 'true' : undefined} onclick={() => go(i)}></button>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .sv-carousel { position: relative; border-radius: 12px; overflow: hidden; }
+  .sv-carousel__viewport { overflow: hidden; touch-action: pan-y; }
+  .sv-carousel__track { display: flex; transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1); }
+  .sv-carousel__track.is-dragging { transition: none; }
+  .sv-carousel__slide { flex: 0 0 100%; min-width: 0; }
+  .sv-carousel__slide :global(img) { display: block; width: 100%; height: 100%; object-fit: cover; }
+
+  .sv-carousel__arrow {
+    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
+    width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
+    background: color-mix(in srgb, var(--sg-bg, #fff) 82%, transparent); color: var(--sg-fg, #0f172a);
+    border: 1px solid var(--sg-border, #e2e8f0); cursor: pointer; font-size: 20px; line-height: 1;
+    box-shadow: 0 4px 12px -4px rgba(15, 23, 42, 0.3);
+  }
+  .sv-carousel__arrow.is-prev { inset-inline-start: 10px; }
+  .sv-carousel__arrow.is-next { inset-inline-end: 10px; }
+  .sv-carousel__arrow:hover:not(:disabled) { background: var(--sg-bg, #fff); }
+  .sv-carousel__arrow:disabled { opacity: 0.4; cursor: default; }
+
+  .sv-carousel__dots { position: absolute; inset-inline: 0; bottom: 10px; display: flex; justify-content: center; gap: 6px; z-index: 2; }
+  .sv-carousel__dot {
+    width: 8px; height: 8px; border-radius: 50%; border: 0; cursor: pointer; padding: 0;
+    background: color-mix(in srgb, var(--sg-fg, #0f172a) 30%, var(--sg-bg, #fff)); transition: background 0.15s, width 0.15s;
+  }
+  .sv-carousel__dot.is-active { width: 20px; border-radius: 4px; background: var(--sg-accent, #2563eb); }
+</style>