@svgrid/grid 1.2.33 → 2.0.0

package/src/SvPagination.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+  /**
+   * SvPagination - a standalone pager (page numbers with ellipsis + prev/next
+   * and optional first/last). Pairs with the grid or any paged list. Controlled
+   * via `page` + `onChange`; the page-range math lives in the pure `paginate`
+   * helper. Parity: Smart pager.
+   *
+   * ```svelte
+   * <SvPagination page={p} pageCount={20} onChange={(n) => (p = n)} />
+   * ```
+   */
+  import { paginationRange } from './paginate'
+
+  type Props = {
+    /** 1-based current page. */
+    page: number
+    pageCount: number
+    onChange?: (page: number) => void
+    siblingCount?: number
+    boundaryCount?: number
+    showFirstLast?: boolean
+    showPrevNext?: boolean
+    size?: 'sm' | 'md' | 'lg'
+    disabled?: boolean
+    ariaLabel?: string
+  }
+
+  let {
+    page,
+    pageCount,
+    onChange,
+    siblingCount = 1,
+    boundaryCount = 1,
+    showFirstLast = false,
+    showPrevNext = true,
+    size = 'md',
+    disabled = false,
+    ariaLabel = 'Pagination',
+  }: Props = $props()
+
+  const items = $derived(paginationRange({ page, pageCount, siblingCount, boundaryCount }))
+  const go = (p: number) => {
+    if (disabled) return
+    const next = Math.min(Math.max(p, 1), pageCount)
+    if (next !== page) onChange?.(next)
+  }
+</script>
+
+<nav class="sv-pg sv-pg--{size}" aria-label={ariaLabel}>
+  <ul class="sv-pg__list">
+    {#if showFirstLast}
+      <li><button type="button" class="sv-pg__btn" aria-label="First page" onclick={() => go(1)} disabled={disabled || page <= 1}>&laquo;</button></li>
+    {/if}
+    {#if showPrevNext}
+      <li><button type="button" class="sv-pg__btn" aria-label="Previous page" onclick={() => go(page - 1)} disabled={disabled || page <= 1}>&lsaquo;</button></li>
+    {/if}
+    {#each items as it, i (typeof it === 'number' ? `p${it}` : `${it}-${i}`)}
+      {#if it === 'ellipsis-left' || it === 'ellipsis-right'}
+        <li><span class="sv-pg__ellipsis" aria-hidden="true">&hellip;</span></li>
+      {:else}
+        <li>
+          <button
+            type="button"
+            class="sv-pg__btn"
+            class:is-active={it === page}
+            aria-current={it === page ? 'page' : undefined}
+            aria-label={`Page ${it}`}
+            {disabled}
+            onclick={() => go(it)}
+          >{it}</button>
+        </li>
+      {/if}
+    {/each}
+    {#if showPrevNext}
+      <li><button type="button" class="sv-pg__btn" aria-label="Next page" onclick={() => go(page + 1)} disabled={disabled || page >= pageCount}>&rsaquo;</button></li>
+    {/if}
+    {#if showFirstLast}
+      <li><button type="button" class="sv-pg__btn" aria-label="Last page" onclick={() => go(pageCount)} disabled={disabled || page >= pageCount}>&raquo;</button></li>
+    {/if}
+  </ul>
+</nav>
+
+<style>
+  .sv-pg { --_accent: var(--sg-accent, #2563eb); }
+  .sv-pg__list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
+  .sv-pg__btn {
+    display: inline-grid; place-items: center; box-sizing: border-box;
+    min-width: 32px; height: 32px; padding: 0 7px;
+    background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a);
+    border: 1px solid var(--sg-border, #cbd5e1); border-radius: var(--sg-radius, 8px);
+    font: inherit; font-size: 13px; cursor: pointer; transition: background 0.12s, border-color 0.12s;
+  }
+  .sv-pg--sm .sv-pg__btn { min-width: 28px; height: 28px; font-size: 12px; }
+  .sv-pg--lg .sv-pg__btn { min-width: 38px; height: 38px; font-size: 14px; }
+  .sv-pg__btn:hover:not(:disabled):not(.is-active) { background: var(--sg-row-hover-bg, #f1f5f9); border-color: color-mix(in srgb, var(--_accent) 40%, var(--sg-border, #cbd5e1)); }
+  .sv-pg__btn:focus-visible { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 30%, transparent); }
+  .sv-pg__btn.is-active { background: var(--_accent); border-color: var(--_accent); color: var(--sg-on-accent, #fff); font-weight: 650; }
+  .sv-pg__btn:disabled { opacity: 0.45; cursor: not-allowed; }
+  .sv-pg__ellipsis { display: inline-grid; place-items: center; min-width: 32px; height: 32px; color: var(--sg-muted, #64748b); }
+</style>

package/src/SvPasswordInput.svelte

@@ -6,22 +6,28 @@
    * The styled renderer over the headless `createPasswordInput` core: the reveal
    * toggle + strength heuristic come from the core, spread here via prop-getters.
    */
+  import SvField from './SvField.svelte'
+  import { nextEditorId, resolveMessages, type SvEditorProps } from './editor-contract'
   import { createPasswordInput } from './createPasswordInput.svelte'
 
-  type Props = {
+  /** User-facing strings for the password input (localizable via `messages`). */
+  type PasswordMessages = { show: string; hide: string; weak: string; fair: string; good: string; strong: string }
+  const DEFAULT_MESSAGES: PasswordMessages = {
+    show: 'Show password', hide: 'Hide password',
+    weak: 'Weak', fair: 'Fair', good: 'Good', strong: 'Strong',
+  }
+
+  type Props = SvEditorProps & {
     value?: string
     onChange?: (value: string) => void
     placeholder?: string
-    disabled?: boolean
-    readonly?: boolean
     /** Show the show/hide eye toggle. */
     revealable?: boolean
     /** Show a 4-level strength meter. */
     showStrength?: boolean
-    name?: string
-    size?: 'sm' | 'md' | 'lg'
-    ariaLabel?: string
     autocomplete?: string
+    /** Override the built-in strings (reveal toggle + strength labels). */
+    messages?: Partial<PasswordMessages>
   }
 
   let {
@@ -35,9 +41,21 @@
     name,
     size = 'md',
     ariaLabel,
+    invalid = false,
+    required = false,
+    error,
+    label,
+    hint,
+    dir,
+    id,
     autocomplete = 'current-password',
+    messages,
   }: Props = $props()
 
+  const autoId = nextEditorId('sv-pass')
+  const uid = $derived(id ?? autoId)
+  const M = $derived(resolveMessages(DEFAULT_MESSAGES, messages))
+
   const pw = createPasswordInput({
     value: () => value,
     onChange: (v) => onChange?.(v),
@@ -46,11 +64,20 @@
     readonly: () => readonly,
     ariaLabel: () => ariaLabel,
     autocomplete: () => autocomplete,
+    showLabel: () => M.show,
+    hideLabel: () => M.hide,
+    strengthLabels: () => ['', M.weak, M.fair, M.good, M.strong],
+    id: () => uid,
+    invalid: () => invalid,
+    required: () => required,
+    error: () => error,
+    hint: () => hint,
   })
 </script>
 
+<SvField id={uid} {label} {hint} {error} {required} {dir}>
 <div class="sv-pw sv-pw--{size}" class:is-disabled={disabled}>
-  <div class="sv-pw__field">
+  <div class="sv-pw__field" class:is-invalid={invalid}>
     <input class="sv-pw__input" {...pw.inputProps()} />
     {#if revealable}
       <button class="sv-pw__eye" {...pw.toggleProps()}>
@@ -72,6 +99,7 @@
   {/if}
   {#if name}<input type="hidden" {name} value={value} />{/if}
 </div>
+</SvField>
 
 <style>
   .sv-pw { --_accent: var(--sg-accent, #2563eb); display: inline-flex; flex-direction: column; gap: 5px; width: 220px; }
@@ -82,6 +110,8 @@
     border: 1px solid var(--sg-input-border, var(--sg-border, #cbd5e1)); border-radius: var(--sg-radius, 8px);
   }
   .sv-pw__field:focus-within { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); }
+  .sv-pw__field.is-invalid { border-color: var(--sg-danger, #dc2626); }
+  .sv-pw__field.is-invalid:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-danger, #dc2626) 22%, transparent); }
   .sv-pw__input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: inherit; font: inherit; padding: 0 10px; }
   .sv-pw--sm .sv-pw__field { height: 28px; font-size: 12px; }
   .sv-pw--md .sv-pw__field { height: 34px; font-size: 13px; }
@@ -90,11 +120,11 @@
   .sv-pw__eye:hover { color: var(--_accent); }
   .sv-pw__meter { display: flex; gap: 4px; }
   .sv-pw__bar { flex: 1; height: 4px; border-radius: 2px; background: var(--sg-border, #e2e8f0); transition: background 0.15s; }
-  .sv-pw__bar.on.is-lvl1 { background: #dc2626; }
-  .sv-pw__bar.on.is-lvl2 { background: #f59e0b; }
+  .sv-pw__bar.on.is-lvl1 { background: var(--sg-danger, #dc2626); }
+  .sv-pw__bar.on.is-lvl2 { background: var(--sg-warning, #f59e0b); }
   .sv-pw__bar.on.is-lvl3 { background: #eab308; }
-  .sv-pw__bar.on.is-lvl4 { background: #16a34a; }
+  .sv-pw__bar.on.is-lvl4 { background: var(--sg-success, #16a34a); }
   .sv-pw__strength { font-size: 11px; font-weight: 600; color: var(--sg-muted, #64748b); }
-  .sv-pw__strength.is-lvl1 { color: #dc2626; }
-  .sv-pw__strength.is-lvl4 { color: #16a34a; }
+  .sv-pw__strength.is-lvl1 { color: var(--sg-danger, #dc2626); }
+  .sv-pw__strength.is-lvl4 { color: var(--sg-success, #16a34a); }
 </style>

package/src/SvPhoneInput.svelte

@@ -8,19 +8,22 @@
    * state + parsing live in the core, spread here via prop-getters.
    */
   import { COUNTRIES, flagEmoji } from './countries'
-  import { createPhoneInput } from './createPhoneInput.svelte'
+  import SvField from './SvField.svelte'
+  import { nextEditorId, resolveMessages, type SvEditorProps } from './editor-contract'
+  import { createPhoneInput, type PhoneParts } from './createPhoneInput.svelte'
 
-  type Props = {
+  /** User-facing strings for the phone input (localizable via `messages`). */
+  type PhoneMessages = { country: string }
+  const DEFAULT_MESSAGES: PhoneMessages = { country: 'Country' }
+
+  type Props = SvEditorProps & {
     value?: string
-    onChange?: (value: string, parts: { country: string; dial: string; national: string }) => void
+    onChange?: (value: string, parts: PhoneParts) => void
     /** Default country ISO code. */
     country?: string
-    disabled?: boolean
-    readonly?: boolean
     placeholder?: string
-    name?: string
-    size?: 'sm' | 'md' | 'lg'
-    ariaLabel?: string
+    /** Override the built-in strings (e.g. the country selector aria-label). */
+    messages?: Partial<PhoneMessages>
   }
 
   let {
@@ -33,8 +36,20 @@
     name,
     size = 'md',
     ariaLabel,
+    invalid = false,
+    required = false,
+    error,
+    label,
+    hint,
+    dir,
+    id,
+    messages,
   }: Props = $props()
 
+  const autoId = nextEditorId('sv-phone')
+  const uid = $derived(id ?? autoId)
+  const M = $derived(resolveMessages(DEFAULT_MESSAGES, messages))
+
   const ph = createPhoneInput({
     value: () => value,
     onChange: (v, parts) => onChange?.(v, parts),
@@ -42,11 +57,18 @@
     disabled: () => disabled,
     readonly: () => readonly,
     placeholder: () => placeholder,
+    countryLabel: () => M.country,
+    id: () => uid,
+    invalid: () => invalid,
+    required: () => required,
+    error: () => error,
+    hint: () => hint,
     ariaLabel: () => ariaLabel,
   })
 </script>
 
-<div class="sv-phone sv-phone--{size}" class:is-disabled={disabled}>
+<SvField id={uid} {label} {hint} {error} {required} {dir}>
+<div class="sv-phone sv-phone--{size}" class:is-disabled={disabled} class:is-invalid={invalid}>
   <div class="sv-phone__country">
     <span class="sv-phone__flag" aria-hidden="true">{ph.flag}</span>
     <span class="sv-phone__dial">{ph.dial}</span>
@@ -60,6 +82,7 @@
   <input class="sv-phone__number" {...ph.inputProps()} />
   {#if name}<input type="hidden" {name} value={ph.value} />{/if}
 </div>
+</SvField>
 
 <style>
   .sv-phone {
@@ -70,16 +93,25 @@
     overflow: hidden;
   }
   .sv-phone:focus-within { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); }
+  .sv-phone.is-invalid { border-color: var(--sg-danger, #dc2626); }
+  .sv-phone.is-invalid:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-danger, #dc2626) 22%, transparent); }
   .sv-phone.is-disabled { opacity: 0.6; }
   .sv-phone__country {
     position: relative; display: inline-flex; align-items: center; gap: 4px;
-    padding: 0 6px 0 10px; border-right: 1px solid var(--sg-border, #e2e8f0);
+    padding-block: 0; padding-inline: 10px 6px; border-inline-end: 1px solid var(--sg-border, #e2e8f0);
     background: var(--sg-header-bg, #f8fafc); cursor: pointer;
   }
   .sv-phone__flag { font-size: 15px; }
   .sv-phone__dial { font-size: 13px; font-weight: 600; }
   .sv-phone__chev { color: var(--sg-muted, #64748b); }
-  .sv-phone__select { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 13px; }
+  /* The native <select> is an invisible overlay, but its option popup is drawn by
+     the OS using the control's own color/background - so theme them explicitly or
+     dark themes get light text on the default white popup. */
+  .sv-phone__select {
+    position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 13px;
+    color: var(--sg-fg, #0f172a); background: var(--sg-bg, #fff);
+  }
+  .sv-phone__select option { color: var(--sg-fg, #0f172a); background: var(--sg-bg, #fff); }
   .sv-phone__number { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: inherit; font: inherit; padding: 0 10px; }
   .sv-phone--sm { height: 28px; font-size: 12px; }
   .sv-phone--md { height: 34px; font-size: 13px; }

package/src/SvPopover.svelte

@@ -0,0 +1,127 @@
+<script lang="ts">
+  /**
+   * SvPopover - a floating panel anchored to a trigger, portalled to <body> so it
+   * escapes any `overflow:hidden` ancestor. Open on click (default), hover, or
+   * manually via `open`. Flips above the trigger when there's no room below,
+   * closes on outside-click / Escape, and animates in. Parity: Smart popover.
+   *
+   * ```svelte
+   * <SvPopover>
+   *   {#snippet anchor()}<button>Open</button>{/snippet}
+   *   <p>Panel content</p>
+   * </SvPopover>
+   * ```
+   */
+  import type { Snippet } from 'svelte'
+  import { anchoredRect, portalToBody, popIn, type AnchoredRect } from './popover'
+  import { createDismissableLayer } from './a11y/dismissable'
+
+  type Props = {
+    /** Controlled open state (bindable). */
+    open?: boolean
+    onOpenChange?: (open: boolean) => void
+    /** How the anchor opens the panel. `manual` = only `open` drives it. */
+    trigger?: 'click' | 'hover' | 'manual'
+    /** Estimated panel height for flip decisions. */
+    estimatedHeight?: number
+    /** Force a minimum panel width (else it hugs its content). */
+    minWidth?: number
+    /** Close when clicking outside. Default true. */
+    closeOnOutsideClick?: boolean
+    ariaLabel?: string
+    /** The anchor element(s) that open the panel. */
+    anchor?: Snippet
+    /** Panel content. */
+    children?: Snippet
+  }
+
+  let {
+    open = $bindable(false),
+    onOpenChange,
+    trigger = 'click',
+    estimatedHeight = 220,
+    minWidth,
+    closeOnOutsideClick = true,
+    ariaLabel,
+    anchor,
+    children,
+  }: Props = $props()
+
+  let anchorEl = $state<HTMLSpanElement | null>(null)
+  let panelEl = $state<HTMLDivElement | null>(null)
+  let rect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false })
+
+  function setOpen(v: boolean) { if (v !== open) { open = v; onOpenChange?.(v) } }
+  function toggle() { setOpen(!open) }
+
+  function updatePos() {
+    if (!anchorEl) return
+    rect = anchoredRect(anchorEl.getBoundingClientRect(), { estimatedHeight, minWidth })
+  }
+
+  $effect(() => {
+    if (!open) return
+    updatePos()
+    const rp = () => updatePos()
+    window.addEventListener('scroll', rp, true)
+    window.addEventListener('resize', rp)
+    // Escape + outside-click dismissal via the shared layer stack (so a popover
+    // nested in a dialog closes top-first). The trigger is passed alongside the
+    // panel so clicking it toggles rather than dismiss-then-reopen.
+    const layer = createDismissableLayer({
+      element: () => [anchorEl, panelEl],
+      onDismiss: () => setOpen(false),
+      closeOnOutside: closeOnOutsideClick,
+    })
+    layer.activate()
+    return () => {
+      window.removeEventListener('scroll', rp, true)
+      window.removeEventListener('resize', rp)
+      layer.release()
+    }
+  })
+
+  let hoverTimer: ReturnType<typeof setTimeout> | undefined
+  function onEnter() { if (trigger === 'hover') { clearTimeout(hoverTimer); setOpen(true) } }
+  function onLeave() { if (trigger === 'hover') { hoverTimer = setTimeout(() => setOpen(false), 120) } }
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<span
+  bind:this={anchorEl}
+  class="sv-pop__anchor"
+  onclick={() => trigger === 'click' && toggle()}
+  onpointerenter={onEnter}
+  onpointerleave={onLeave}
+>
+  {@render anchor?.()}
+</span>
+
+{#if open}
+  <div
+    bind:this={panelEl}
+    class="sv-pop__panel"
+    use:portalToBody
+    use:popIn={{ up: rect.openUpward }}
+    style:position="fixed"
+    style:top={`${rect.top}px`}
+    style:left={`${rect.left}px`}
+    style:min-width={minWidth ? `${rect.width}px` : undefined}
+    role="dialog"
+    aria-label={ariaLabel}
+    onpointerenter={onEnter}
+    onpointerleave={onLeave}
+  >
+    {@render children?.()}
+  </div>
+{/if}
+
+<style>
+  .sv-pop__anchor { display: inline-flex; }
+  :global(.sv-pop__panel) {
+    z-index: 2147483646; max-width: min(92vw, 360px); padding: 12px 14px;
+    background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
+    border: 1px solid var(--sg-border, #e2e8f0); border-radius: 10px;
+    box-shadow: 0 16px 48px -12px rgba(15, 23, 42, 0.35); font-size: 13px; line-height: 1.55;
+  }
+</style>

package/src/SvProgress.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+  /**
+   * SvProgress - a linear progress bar (WAI-ARIA `progressbar`). Determinate
+   * (value/max) or `indeterminate` (animated), with color intents, sizes, an
+   * optional label and an optional secondary `buffer` track. Theme-driven via
+   * `--sg-*`; respects prefers-reduced-motion. Parity: Smart progress bar.
+   *
+   * ```svelte
+   * <SvProgress value={64} showLabel />
+   * <SvProgress indeterminate color="success" />
+   * ```
+   */
+  type Props = {
+    /** Current value (0..max). Ignored when `indeterminate`. */
+    value?: number
+    max?: number
+    /** Unknown-duration animated bar. */
+    indeterminate?: boolean
+    /** Buffered/secondary value (e.g. streamed-ahead), 0..max. */
+    buffer?: number
+    color?: 'accent' | 'success' | 'warning' | 'danger'
+    size?: 'sm' | 'md' | 'lg'
+    /** Show a percentage label at the end of the bar. */
+    showLabel?: boolean
+    /** Format the label (default: rounded percent). */
+    formatLabel?: (value: number, max: number) => string
+    /** Diagonal candy-stripe overlay on the fill. */
+    striped?: boolean
+    ariaLabel?: string
+  }
+
+  let {
+    value = 0,
+    max = 100,
+    indeterminate = false,
+    buffer,
+    color = 'accent',
+    size = 'md',
+    showLabel = false,
+    formatLabel,
+    striped = false,
+    ariaLabel,
+  }: Props = $props()
+
+  const pct = $derived(max > 0 ? Math.min(100, Math.max(0, (value / max) * 100)) : 0)
+  const bufPct = $derived(buffer != null && max > 0 ? Math.min(100, Math.max(0, (buffer / max) * 100)) : null)
+  const label = $derived(formatLabel ? formatLabel(value, max) : `${Math.round(pct)}%`)
+</script>
+
+<div class="sv-prog sv-prog--{size} sv-prog--{color}" class:has-label={showLabel && !indeterminate}>
+  <div
+    class="sv-prog__track"
+    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}
+  >
+    {#if bufPct != null && !indeterminate}<div class="sv-prog__buffer" style:width={`${bufPct}%`}></div>{/if}
+    <div
+      class="sv-prog__fill"
+      class:is-indeterminate={indeterminate}
+      class:is-striped={striped}
+      style:width={indeterminate ? undefined : `${pct}%`}
+    ></div>
+  </div>
+  {#if showLabel && !indeterminate}<span class="sv-prog__label">{label}</span>{/if}
+</div>
+
+<style>
+  .sv-prog {
+    --_accent: var(--sg-accent, #2563eb);
+    --_c: var(--_accent);
+    display: flex; align-items: center; gap: 10px; width: 100%;
+  }
+  .sv-prog--success { --_c: var(--sg-success, #16a34a); }
+  .sv-prog--warning { --_c: var(--sg-warning, #f59e0b); }
+  .sv-prog--danger { --_c: var(--sg-danger, #dc2626); }
+  .sv-prog__track {
+    position: relative; flex: 1; overflow: hidden;
+    background: var(--sg-border, #e2e8f0); border-radius: 999px;
+  }
+  .sv-prog--sm .sv-prog__track { height: 5px; }
+  .sv-prog--md .sv-prog__track { height: 8px; }
+  .sv-prog--lg .sv-prog__track { height: 12px; }
+  .sv-prog__buffer {
+    position: absolute; inset-block: 0; inset-inline-start: 0;
+    background: color-mix(in srgb, var(--_c) 28%, transparent); border-radius: 999px;
+  }
+  .sv-prog__fill {
+    position: absolute; inset-block: 0; inset-inline-start: 0; min-width: 0;
+    background: var(--_c); border-radius: 999px; transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+  .sv-prog__fill.is-striped {
+    background-image: linear-gradient(45deg, rgba(255,255,255,0.22) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0.22) 75%, transparent 75%);
+    background-size: 16px 16px; animation: sv-prog-stripe 0.8s linear infinite;
+  }
+  .sv-prog__fill.is-indeterminate {
+    width: 40%; border-radius: 999px;
+    animation: sv-prog-indet 1.3s cubic-bezier(0.65, 0.05, 0.36, 1) infinite;
+  }
+  @keyframes sv-prog-indet {
+    0% { inset-inline-start: -45%; } 100% { inset-inline-start: 100%; }
+  }
+  @keyframes sv-prog-stripe { to { background-position: 16px 0; } }
+  @media (prefers-reduced-motion: reduce) {
+    .sv-prog__fill.is-indeterminate { animation-duration: 2.4s; }
+    .sv-prog__fill.is-striped { animation: none; }
+    .sv-prog__fill { transition: none; }
+  }
+  .sv-prog__label {
+    flex: none; min-width: 38px; text-align: end; font-size: 12px; font-weight: 600;
+    font-variant-numeric: tabular-nums; color: var(--sg-muted, #64748b);
+  }
+</style>

package/src/SvRadioGroup.svelte

@@ -8,17 +8,15 @@
    * roving tabindex + arrow-key navigation. Parity: Smart `smart-radio-button`
    * (as a managed group). Controlled via `value` + `onChange`.
    */
+  import SvField from './SvField.svelte'
+  import { nextEditorId, type SvEditorProps } from './editor-contract'
   import { createRadioGroup, type RadioOption } from './createRadioGroup.svelte'
 
-  type Props = {
+  type Props = SvEditorProps & {
     options: ReadonlyArray<RadioOption>
     value?: string | number | null
     onChange?: (value: string | number) => void
-    name?: string
-    disabled?: boolean
     orientation?: 'vertical' | 'horizontal'
-    size?: 'sm' | 'md' | 'lg'
-    ariaLabel?: string
   }
 
   let {
@@ -30,34 +28,53 @@
     orientation = 'vertical',
     size = 'md',
     ariaLabel,
+    invalid = false,
+    required = false,
+    error,
+    label,
+    hint,
+    dir,
+    id,
   }: Props = $props()
 
+  const autoId = nextEditorId('sv-radio')
+  const uid = $derived(id ?? autoId)
+
   // The styled radio group is just a renderer over the headless core.
   const rg = createRadioGroup({
     options: () => options,
     value: () => value,
     onChange: (v) => onChange?.(v),
     disabled: () => disabled,
-    ariaLabel: () => ariaLabel,
+    // A visible field `label` also names the group for assistive tech.
+    ariaLabel: () => ariaLabel ?? label,
+    id: () => uid,
+    invalid: () => invalid,
+    required: () => required,
+    error: () => error,
+    hint: () => hint,
   })
 </script>
 
-<div
-  class="sv-radiogroup sv-radiogroup--{orientation} sv-radiogroup--{size}"
-  {...rg.groupProps()}
->
-  {#each options as opt (opt.value)}
-    <button
-      class="sv-radio"
-      class:is-checked={opt.value === value}
-      {...rg.radioProps(opt)}
-    >
-      <span class="sv-radio__dot"></span>
-      <span class="sv-radio__label">{opt.label}</span>
-    </button>
-  {/each}
-  {#if name}<input type="hidden" {name} value={value ?? ''} />{/if}
-</div>
+<SvField id={uid} {label} {hint} {error} {required} {dir}>
+  <div
+    class="sv-radiogroup sv-radiogroup--{orientation} sv-radiogroup--{size}"
+    class:is-invalid={invalid}
+    {...rg.groupProps()}
+  >
+    {#each options as opt (opt.value)}
+      <button
+        class="sv-radio"
+        class:is-checked={opt.value === value}
+        {...rg.radioProps(opt)}
+      >
+        <span class="sv-radio__dot"></span>
+        <span class="sv-radio__label">{opt.label}</span>
+      </button>
+    {/each}
+    {#if name}<input type="hidden" {name} value={value ?? ''} />{/if}
+  </div>
+</SvField>
 
 <style>
   .sv-radiogroup { --_accent: var(--sg-accent, #2563eb); display: flex; gap: 10px; }
@@ -76,6 +93,7 @@
     border: 1.5px solid var(--sg-border, #cbd5e1); background: var(--sg-input-bg, #fff);
     display: grid; place-items: center; transition: border-color 0.12s;
   }
+  .sv-radiogroup.is-invalid .sv-radio__dot { border-color: var(--sg-danger, #dc2626); }
   .sv-radio.is-checked .sv-radio__dot { border-color: var(--_accent); }
   .sv-radio.is-checked .sv-radio__dot::after {
     content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--_accent);