@svgrid/grid 1.2.34 → 2.0.0

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>

package/src/SvCheckBox.svelte

@@ -4,17 +4,15 @@
    * label. Parity: Smart `smart-check-box`. Controlled via `checked` + `onChange`.
    */
   import type { Snippet } from 'svelte'
+  import SvField from './SvField.svelte'
+  import { nextEditorId, type SvEditorProps } from './editor-contract'
   import { createCheckbox } from './createCheckbox.svelte'
 
-  type Props = {
+  type Props = SvEditorProps & {
     checked?: boolean
     indeterminate?: boolean
     onChange?: (checked: boolean) => void
-    disabled?: boolean
-    size?: 'sm' | 'md' | 'lg'
-    name?: string
     value?: string
-    ariaLabel?: string
     children?: Snippet
   }
 
@@ -27,9 +25,18 @@
     name,
     value,
     ariaLabel,
+    invalid = false,
+    required = false,
+    error,
+    hint,
+    dir,
+    id,
     children,
   }: Props = $props()
 
+  const autoId = nextEditorId('sv-check')
+  const uid = $derived(id ?? autoId)
+
   // The styled checkbox is just a renderer over the headless core. The label
   // fallback depends on `children` (a render concern), so it is computed here.
   const cb = createCheckbox({
@@ -38,25 +45,32 @@
     onChange: (v) => onChange?.(v),
     disabled: () => disabled,
     ariaLabel: () => ariaLabel ?? (children ? undefined : 'checkbox'),
+    id: () => uid,
+    invalid: () => invalid,
+    required: () => required,
+    error: () => error,
+    hint: () => hint,
   })
 </script>
 
-<label class="sv-check sv-check--{size}" class:is-disabled={disabled}>
-  <button
-    class="sv-check__box"
-    class:is-checked={checked && !indeterminate}
-    class:is-indeterminate={indeterminate}
-    {...cb.boxProps()}
-  >
-    {#if indeterminate}
-      <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M4 8h8" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" /></svg>
-    {:else if checked}
-      <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3.5 8.5l3 3 6-6.5" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" /></svg>
-    {/if}
-  </button>
-  {#if children}<span class="sv-check__label">{@render children()}</span>{/if}
-  {#if name}<input type="hidden" {name} value={checked ? (value ?? 'true') : ''} />{/if}
-</label>
+<SvField id={uid} {hint} {error} {required} {dir}>
+  <label class="sv-check sv-check--{size}" class:is-disabled={disabled} class:is-invalid={invalid}>
+    <button
+      class="sv-check__box"
+      class:is-checked={checked && !indeterminate}
+      class:is-indeterminate={indeterminate}
+      {...cb.boxProps()}
+    >
+      {#if indeterminate}
+        <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M4 8h8" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" /></svg>
+      {:else if checked}
+        <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3.5 8.5l3 3 6-6.5" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" /></svg>
+      {/if}
+    </button>
+    {#if children}<span class="sv-check__label">{@render children()}</span>{/if}
+    {#if name}<input type="hidden" {name} value={checked ? (value ?? 'true') : ''} />{/if}
+  </label>
+</SvField>
 
 <style>
   .sv-check {
@@ -78,5 +92,6 @@
   .sv-check__box.is-checked, .sv-check__box.is-indeterminate {
     background: var(--_accent); border-color: var(--_accent);
   }
+  .sv-check.is-invalid .sv-check__box { border-color: var(--sg-danger, #dc2626); }
   .sv-check__box:focus-visible { outline: 2px solid var(--sg-focus-ring, var(--_accent)); outline-offset: 2px; }
 </style>

package/src/SvChip.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+  /**
+   * SvChip - a compact pill for a selected/filter/entity value: an optional
+   * leading avatar/icon, a label, and an optional remove (x) button; optionally
+   * clickable. Larger + more interactive than SvBadge (a static status pill).
+   * Theme-driven. Parity: Smart chip / tag.
+   *
+   * ```svelte
+   * <SvChip removable onRemove={() => drop(tag)}>{tag}</SvChip>
+   * <SvChip variant="accent" onClick={select}>{#snippet leading()}<SvAvatar size="sm" name="Ada" />{/snippet}Ada</SvChip>
+   * ```
+   */
+  import type { Snippet } from 'svelte'
+
+  type Variant = 'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info'
+
+  type Props = {
+    variant?: Variant
+    size?: 'sm' | 'md'
+    /** Show a remove (x) button. */
+    removable?: boolean
+    onRemove?: () => void
+    /** Make the chip's label a button. */
+    onClick?: () => void
+    /** Filled solid vs soft tint (default soft). */
+    solid?: boolean
+    disabled?: boolean
+    children?: Snippet
+    /** Leading content (avatar / icon). */
+    leading?: Snippet
+  }
+
+  let {
+    variant = 'neutral',
+    size = 'md',
+    removable = false,
+    onRemove,
+    onClick,
+    solid = false,
+    disabled = false,
+    children,
+    leading,
+  }: Props = $props()
+</script>
+
+<span class="sv-chip sv-chip--{variant} sv-chip--{size}" class:is-solid={solid} class:is-disabled={disabled}>
+  {#if leading}<span class="sv-chip__lead">{@render leading()}</span>{/if}
+  {#if onClick}
+    <button type="button" class="sv-chip__label sv-chip__label--btn" {disabled} onclick={onClick}>{@render children?.()}</button>
+  {:else}
+    <span class="sv-chip__label">{@render children?.()}</span>
+  {/if}
+  {#if removable}
+    <button type="button" class="sv-chip__x" aria-label="Remove" {disabled} onclick={onRemove}>&times;</button>
+  {/if}
+</span>
+
+<style>
+  .sv-chip {
+    --_c: var(--sg-muted, #64748b);
+    display: inline-flex; align-items: center; gap: 5px; box-sizing: border-box;
+    border-radius: 999px; font-weight: 550; white-space: nowrap; max-width: 100%;
+    color: var(--_c);
+    background: color-mix(in srgb, var(--_c) 13%, transparent);
+    border: 1px solid color-mix(in srgb, var(--_c) 22%, transparent);
+  }
+  .sv-chip.is-solid { color: var(--sg-on-accent, #fff); background: var(--_c); border-color: var(--_c); }
+  .sv-chip.is-disabled { opacity: 0.55; pointer-events: none; }
+  .sv-chip--sm { font-size: 11.5px; padding: 1px 4px 1px 8px; height: 22px; }
+  .sv-chip--md { font-size: 12.5px; padding: 2px 5px 2px 10px; height: 26px; }
+  .sv-chip:not(:has(.sv-chip__x)).sv-chip--sm { padding-inline-end: 8px; }
+  .sv-chip:not(:has(.sv-chip__x)).sv-chip--md { padding-inline-end: 10px; }
+  .sv-chip__lead { display: inline-flex; margin-inline-start: -4px; }
+  .sv-chip__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+  .sv-chip__label--btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
+  .sv-chip__x {
+    flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
+    background: none; border: 0; color: currentColor; cursor: pointer; font-size: 14px; line-height: 1; opacity: 0.7;
+  }
+  .sv-chip__x:hover { opacity: 1; background: color-mix(in srgb, currentColor 20%, transparent); }
+
+  .sv-chip--neutral { --_c: var(--sg-muted, #64748b); }
+  .sv-chip--accent { --_c: var(--sg-accent, #2563eb); }
+  .sv-chip--success { --_c: var(--sg-success, #16a34a); }
+  .sv-chip--warning { --_c: var(--sg-warning, #d97706); }
+  .sv-chip--danger { --_c: var(--sg-danger, #dc2626); }
+  .sv-chip--info { --_c: var(--sg-info, #0891b2); }
+</style>

package/src/SvCircularProgress.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+  /**
+   * SvCircularProgress - a circular / ring progress indicator (WAI-ARIA
+   * `progressbar`). Determinate (value/max) or `indeterminate` (spinning), with
+   * color intents, sizing/thickness, and an optional center label or `children`
+   * snippet. Theme-driven; respects prefers-reduced-motion.
+   *
+   * ```svelte
+   * <SvCircularProgress value={72} showLabel />
+   * <SvCircularProgress indeterminate size={28} color="accent" />
+   * ```
+   */
+  import type { Snippet } from 'svelte'
+
+  type Props = {
+    value?: number
+    max?: number
+    indeterminate?: boolean
+    /** Diameter in px. */
+    size?: number
+    /** Ring stroke width in px. */
+    thickness?: number
+    color?: 'accent' | 'success' | 'warning' | 'danger'
+    /** Show a percentage label in the center. */
+    showLabel?: boolean
+    formatLabel?: (value: number, max: number) => string
+    ariaLabel?: string
+    /** Custom center content (overrides showLabel). */
+    children?: Snippet
+  }
+
+  let {
+    value = 0,
+    max = 100,
+    indeterminate = false,
+    size = 48,
+    thickness = 5,
+    color = 'accent',
+    showLabel = false,
+    formatLabel,
+    ariaLabel,
+    children,
+  }: Props = $props()
+
+  const r = $derived((size - thickness) / 2)
+  const circ = $derived(2 * Math.PI * r)
+  const pct = $derived(max > 0 ? Math.min(100, Math.max(0, (value / max) * 100)) : 0)
+  const offset = $derived(circ * (1 - pct / 100))
+  const label = $derived(formatLabel ? formatLabel(value, max) : `${Math.round(pct)}%`)
+</script>
+
+<div
+  class="sv-circ sv-circ--{color}"
+  class:is-indeterminate={indeterminate}
+  style:width={`${size}px`}
+  style:height={`${size}px`}
+  role="progressbar"
+  aria-label={ariaLabel}
+  aria-valuemin={indeterminate ? undefined : 0}
+  aria-valuemax={indeterminate ? undefined : max}
+  aria-valuenow={indeterminate ? undefined : value}
+  aria-valuetext={indeterminate ? undefined : label}
+>
+  <svg class="sv-circ__svg" viewBox={`0 0 ${size} ${size}`} width={size} height={size}>
+    <circle class="sv-circ__track" cx={size / 2} cy={size / 2} r={r} fill="none" stroke-width={thickness} />
+    <circle
+      class="sv-circ__arc"
+      cx={size / 2}
+      cy={size / 2}
+      r={r}
+      fill="none"
+      stroke-width={thickness}
+      stroke-linecap="round"
+      stroke-dasharray={circ}
+      stroke-dashoffset={indeterminate ? circ * 0.7 : offset}
+    />
+  </svg>
+  {#if children}
+    <div class="sv-circ__center">{@render children()}</div>
+  {:else if showLabel && !indeterminate}
+    <div class="sv-circ__center sv-circ__label" style:font-size={`${Math.max(9, size * 0.26)}px`}>{label}</div>
+  {/if}
+</div>
+
+<style>
+  .sv-circ {
+    --_accent: var(--sg-accent, #2563eb);
+    --_c: var(--_accent);
+    position: relative; display: inline-flex; flex: none;
+  }
+  .sv-circ--success { --_c: var(--sg-success, #16a34a); }
+  .sv-circ--warning { --_c: var(--sg-warning, #f59e0b); }
+  .sv-circ--danger { --_c: var(--sg-danger, #dc2626); }
+  .sv-circ__svg { display: block; transform: rotate(-90deg); }
+  .sv-circ__track { stroke: var(--sg-border, #e2e8f0); }
+  .sv-circ__arc { stroke: var(--_c); transition: stroke-dashoffset 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
+  .sv-circ.is-indeterminate .sv-circ__svg { animation: sv-circ-spin 0.9s linear infinite; }
+  .sv-circ.is-indeterminate .sv-circ__arc { transition: none; }
+  @keyframes sv-circ-spin { to { transform: rotate(270deg); } }
+  @media (prefers-reduced-motion: reduce) {
+    .sv-circ.is-indeterminate .sv-circ__svg { animation-duration: 2.4s; }
+    .sv-circ__arc { transition: none; }
+  }
+  .sv-circ__center {
+    position: absolute; inset: 0; display: grid; place-items: center;
+    color: var(--sg-fg, #0f172a);
+  }
+  .sv-circ__label { font-weight: 700; font-variant-numeric: tabular-nums; }
+</style>