@svgrid/grid 2.2.16 → 2.2.17

package/src/SvPhoneInput.svelte

@@ -24,6 +24,10 @@
     placeholder?: string
     /** Override the built-in strings (e.g. the country selector aria-label). */
     messages?: Partial<PhoneMessages>
+    /** Stretch to the container width. */
+    block?: boolean
+    /** Control width in px (ignored when `block`). Default 250. */
+    width?: number
   }
 
   let {
@@ -43,7 +47,10 @@
     hint,
     dir,
     id,
+    loading = false,
     messages,
+    block = false,
+    width = 250,
   }: Props = $props()
 
   const autoId = nextEditorId('sv-phone')
@@ -68,53 +75,57 @@
   })
 </script>
 
-<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">
+{#snippet countryChip()}
+  <span class="sv-phone__country">
     <span class="sv-phone__flag" aria-hidden="true">{ph.flag}</span>
     <span class="sv-phone__dial">{ph.dial}</span>
+    <svg class="sv-phone__chev" viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
     <select class="sv-phone__select" {...ph.selectProps()}>
       {#each COUNTRIES as c (c.code)}
         <option value={c.code}>{flagEmoji(c.code)} {c.name} ({c.dial})</option>
       {/each}
     </select>
-    <svg class="sv-phone__chev" viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
-  </div>
+  </span>
+{/snippet}
+
+<SvField
+  frame
+  id={uid}
+  {label}
+  {hint}
+  {error}
+  {required}
+  {dir}
+  {size}
+  {invalid}
+  {disabled}
+  {readonly}
+  {loading}
+  {block}
+  {width}
+  leading={countryChip}
+>
   <input class="sv-phone__number" {...ph.inputProps()} />
   {#if name}<input type="hidden" {name} value={ph.value} />{/if}
-</div>
 </SvField>
 
 <style>
-  .sv-phone {
-    --_accent: var(--sg-accent, #2563eb);
-    display: inline-flex; align-items: stretch; width: 250px;
-    background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a);
-    border: 1px solid var(--sg-input-border, var(--sg-border, #cbd5e1)); border-radius: var(--sg-radius, 8px);
-    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; }
+  /* A compact country chip in the leading slot: flag + dial + chevron, with the
+     native <select> as an invisible overlay covering it. */
   .sv-phone__country {
     position: relative; display: inline-flex; align-items: center; gap: 4px;
-    padding-block: 0; padding-inline: 10px 6px; border-inline-end: 1px solid var(--sg-border, #e2e8f0);
-    background: var(--sg-header-bg, #f8fafc); cursor: pointer;
+    padding-inline-end: 8px; border-inline-end: 1px solid var(--sg-border, #e2e8f0); 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); }
   /* 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;
+     the OS using the control's own color/background - so theme them explicitly (a
+     2-class selector, so it beats SvField frame's generic `select` reset) or dark
+     themes get light text on the default white popup. */
+  .sv-phone__country .sv-phone__select {
+    position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 13px; padding: 0;
     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; }
-  .sv-phone--lg { height: 40px; font-size: 15px; }
+  .sv-phone__country .sv-phone__select option { color: var(--sg-fg, #0f172a); background: var(--sg-bg, #fff); }
 </style>

package/src/SvPopconfirm.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+  /**
+   * SvPopconfirm - a lightweight confirm step in a popover anchored to its
+   * trigger, for a low-stakes destructive action ("Delete this row?") where a
+   * full modal dialog would be too heavy. Click the anchor to reveal a short
+   * message plus Cancel / Confirm buttons; confirming runs `onConfirm` and closes.
+   * Built on SvPopover, so it is portalled, positioned by the shared engine, and
+   * dismisses on Escape / outside-click.
+   *
+   * ```svelte
+   * <SvPopconfirm title="Delete this row?" confirmVariant="danger"
+   *               onConfirm={() => remove(row)}>
+   *   {#snippet anchor()}<SvButton variant="danger" size="sm">Delete</SvButton>{/snippet}
+   * </SvPopconfirm>
+   * ```
+   */
+  import type { Snippet } from 'svelte'
+  import SvPopover from './SvPopover.svelte'
+  import SvButton from './SvButton.svelte'
+  import type { Placement } from './positioning'
+
+  type Props = {
+    /** Controlled open state (bindable). */
+    open?: boolean
+    onOpenChange?: (open: boolean) => void
+    /** Bold prompt, e.g. "Delete this row?". */
+    title?: string
+    /** Optional longer explanation under the title. */
+    description?: string
+    confirmLabel?: string
+    cancelLabel?: string
+    /** Variant for the confirm button (use `danger` for destructive actions). */
+    confirmVariant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger'
+    /** Runs when the user confirms; the popover then closes. */
+    onConfirm?: () => void
+    /** Runs when the user cancels (or dismisses); the popover then closes. */
+    onCancel?: () => void
+    /** Preferred placement; flips when there is no room. Default `top`. */
+    placement?: Placement
+    ariaLabel?: string
+    /** The trigger that opens the confirm. */
+    anchor?: Snippet
+  }
+
+  let {
+    open = $bindable(false),
+    onOpenChange,
+    title,
+    description,
+    confirmLabel = 'Confirm',
+    cancelLabel = 'Cancel',
+    confirmVariant = 'primary',
+    onConfirm,
+    onCancel,
+    placement = 'top',
+    ariaLabel,
+    anchor,
+  }: Props = $props()
+
+  function confirm() { onConfirm?.(); open = false }
+  function cancel() { onCancel?.(); open = false }
+</script>
+
+<SvPopover bind:open {onOpenChange} trigger="click" {placement} minWidth={230} ariaLabel={ariaLabel ?? title} {anchor}>
+  <div class="sv-popconfirm">
+    {#if title}<div class="sv-popconfirm__title">{title}</div>{/if}
+    {#if description}<div class="sv-popconfirm__desc">{description}</div>{/if}
+    <div class="sv-popconfirm__actions">
+      <SvButton size="sm" variant="ghost" onclick={cancel}>{cancelLabel}</SvButton>
+      <SvButton size="sm" variant={confirmVariant} onclick={confirm}>{confirmLabel}</SvButton>
+    </div>
+  </div>
+</SvPopover>
+
+<style>
+  .sv-popconfirm__title { font-weight: 650; font-size: 13px; color: var(--sg-fg, #0f172a); }
+  .sv-popconfirm__desc { margin-top: 4px; font-size: 12.5px; color: var(--sg-muted, #64748b); line-height: 1.45; }
+  .sv-popconfirm__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
+</style>

package/src/SvPopover.svelte

@@ -2,18 +2,22 @@
   /**
    * 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.
+   * manually via `open`. Positioned by the shared engine (`computePosition`): full
+   * placement matrix + flip + shift + an optional arrow, kept in sync with
+   * `autoUpdate`. Closes on outside-click / Escape via the dismissable layer
+   * stack, and animates in. The panel is hoverable (interactive) under the hover
+   * trigger. Parity: Smart popover.
    *
    * ```svelte
-   * <SvPopover>
+   * <SvPopover placement="bottom" arrow>
    *   {#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 { portalToBody, popIn } from './popover'
+  import { computePosition, autoUpdate, type Placement, type ComputePositionResult } from './positioning'
   import { createDismissableLayer } from './a11y/dismissable'
 
   type Props = {
@@ -22,7 +26,17 @@
     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. */
+    /** Preferred placement (flips when there is no room). Default `bottom-start`. */
+    placement?: Placement
+    /** Main-axis gap between trigger and panel. Default 8 (room for the arrow). */
+    offset?: number
+    /** Render a pointer arrow toward the trigger. Default true. */
+    arrow?: boolean
+    /** Hover trigger: delay (ms) before opening. Default 0. */
+    openDelay?: number
+    /** Hover trigger: delay (ms) before closing after leave. Default 120. */
+    closeDelay?: number
+    /** Estimated panel height, used before the panel has been measured. */
     estimatedHeight?: number
     /** Force a minimum panel width (else it hugs its content). */
     minWidth?: number
@@ -39,6 +53,11 @@
     open = $bindable(false),
     onOpenChange,
     trigger = 'click',
+    placement = 'bottom-start',
+    offset = 8,
+    arrow = true,
+    openDelay = 0,
+    closeDelay = 120,
     estimatedHeight = 220,
     minWidth,
     closeOnOutsideClick = true,
@@ -47,43 +66,60 @@
     children,
   }: Props = $props()
 
+  const ARROW = 10
+
   let anchorEl = $state<HTMLSpanElement | null>(null)
   let panelEl = $state<HTMLDivElement | null>(null)
-  let rect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false, maxHeight: 0, availHeight: 0 })
+  let pos = $state<ComputePositionResult>({
+    x: 0, y: 0, placement, side: 'bottom', align: 'start', maxWidth: 0, maxHeight: 0,
+  })
 
   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 })
+    const r = anchorEl.getBoundingClientRect()
+    const f = panelEl?.getBoundingClientRect()
+    const floating = {
+      width: f?.width || minWidth || r.width,
+      height: f?.height || estimatedHeight,
+    }
+    pos = computePosition(
+      { x: r.left, y: r.top, width: r.width, height: r.height },
+      floating,
+      { placement, offset, padding: 8, minMainAxis: 96, arrow: arrow ? { size: ARROW } : undefined },
+    )
   }
 
+  // Reposition whenever the trigger/panel resize or an ancestor scrolls, and wire
+  // Escape + outside-click dismissal via the shared layer stack (so a popover
+  // nested in a dialog closes top-first). Re-runs once `panelEl` mounts.
   $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.
+    if (!open || !anchorEl || !panelEl) return
+    const stop = autoUpdate(anchorEl, panelEl, updatePos)
     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()
-    }
+    return () => { stop(); 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) } }
+  let openTimer: ReturnType<typeof setTimeout> | undefined
+  let closeTimer: ReturnType<typeof setTimeout> | undefined
+  function onEnter() {
+    if (trigger !== 'hover') return
+    clearTimeout(closeTimer)
+    if (open) return
+    openTimer = setTimeout(() => setOpen(true), openDelay)
+  }
+  function onLeave() {
+    if (trigger !== 'hover') return
+    clearTimeout(openTimer)
+    closeTimer = setTimeout(() => setOpen(false), closeDelay)
+  }
 
   /** Fallback accessible name for the panel when `ariaLabel` isn't given: the
    * anchor's own aria-label, else its trimmed text content. */
@@ -112,11 +148,11 @@
     bind:this={panelEl}
     class="sv-pop__panel"
     use:portalToBody
-    use:popIn={{ up: rect.openUpward }}
+    use:popIn={{ up: pos.side === 'top' }}
     style:position="fixed"
-    style:top={`${rect.top}px`}
-    style:left={`${rect.left}px`}
-    style:min-width={minWidth ? `${rect.width}px` : undefined}
+    style:top={`${pos.y}px`}
+    style:left={`${pos.x}px`}
+    style:min-width={minWidth ? `${minWidth}px` : undefined}
     role="dialog"
     aria-label={ariaLabel ?? anchorFallbackLabel()}
     onpointerenter={onEnter}
@@ -124,16 +160,38 @@
     onfocusin={onEnter}
     onfocusout={onLeave}
   >
-    {@render children?.()}
+    {#if arrow}
+      <span
+        class="sv-pop__arrow sv-pop__arrow--{pos.side}"
+        style:left={pos.arrow?.x != null ? `${pos.arrow.x}px` : undefined}
+        style:top={pos.arrow?.y != null ? `${pos.arrow.y}px` : undefined}
+      ></span>
+    {/if}
+    <div class="sv-pop__content" style:max-height={pos.maxHeight ? `${pos.maxHeight}px` : undefined}>
+      {@render children?.()}
+    </div>
   </div>
 {/if}
 
 <style>
   .sv-pop__anchor { display: inline-flex; }
   :global(.sv-pop__panel) {
-    z-index: 2147483646; max-width: min(92vw, 360px); padding: 12px 14px;
+    z-index: 2147483646; max-width: min(92vw, 360px);
     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;
   }
+  :global(.sv-pop__content) { padding: 12px 14px; overflow: auto; }
+  /* Arrow: a rotated square straddling the panel edge, two borders showing so it
+     reads as a continuation of the panel outline. Not clipped (sibling of the
+     scrollable content, panel itself has no overflow). */
+  :global(.sv-pop__arrow) {
+    position: absolute; width: 10px; height: 10px;
+    background: var(--sg-bg, #fff); border: 1px solid var(--sg-border, #e2e8f0);
+    transform: rotate(45deg);
+  }
+  :global(.sv-pop__arrow--bottom) { top: -6px; border-right: 0; border-bottom: 0; }
+  :global(.sv-pop__arrow--top) { bottom: -6px; border-left: 0; border-top: 0; }
+  :global(.sv-pop__arrow--right) { left: -6px; border-top: 0; border-right: 0; }
+  :global(.sv-pop__arrow--left) { right: -6px; border-bottom: 0; border-left: 0; }
 </style>

package/src/SvRadioGroup.svelte

@@ -25,6 +25,7 @@
     onChange,
     name,
     disabled = false,
+    readonly = false,
     orientation = 'vertical',
     size = 'md',
     ariaLabel,
@@ -44,7 +45,7 @@
   const rg = createRadioGroup({
     options: () => options,
     value: () => value,
-    onChange: (v) => onChange?.(v),
+    onChange: (v) => { if (readonly) return; onChange?.(v) },
     disabled: () => disabled,
     // A visible field `label` also names the group for assistive tech.
     ariaLabel: () => ariaLabel ?? label,
@@ -60,7 +61,9 @@
   <div
     class="sv-radiogroup sv-radiogroup--{orientation} sv-radiogroup--{size}"
     class:is-invalid={invalid}
+    class:is-readonly={readonly}
     {...rg.groupProps()}
+    aria-readonly={readonly ? 'true' : undefined}
   >
     {#each options as opt (opt.value)}
       <button
@@ -88,6 +91,7 @@
   .sv-radiogroup--md .sv-radio { font-size: 13px; }
   .sv-radiogroup--lg .sv-radio { font-size: 15px; }
   .sv-radio[disabled] { opacity: 0.5; cursor: not-allowed; }
+  .sv-radiogroup.is-readonly .sv-radio { cursor: default; }
   .sv-radio__dot {
     width: 17px; height: 17px; flex: none; border-radius: 50%;
     border: 1.5px solid var(--sg-border, #cbd5e1); background: var(--sg-input-bg, #fff);

package/src/SvResult.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  /**
+   * SvResult - a centered result / status page for the outcome of an operation or
+   * a route state: success, error, warning, info, or not-found. An icon (built-in
+   * per status, or your own), a title, an optional description, and an actions
+   * slot. For empty data tables prefer SvEmptyState; use this for full-page
+   * outcomes ("Payment complete", "Something went wrong", "404").
+   *
+   * ```svelte
+   * <SvResult status="success" title="Payment complete" description="A receipt is on its way.">
+   *   {#snippet actions()}<SvButton>Back to dashboard</SvButton>{/snippet}
+   * </SvResult>
+   * ```
+   */
+  import type { Snippet } from 'svelte'
+
+  type Status = 'success' | 'error' | 'warning' | 'info' | 'notfound'
+
+  type Props = {
+    status?: Status
+    title: string
+    description?: string
+    /** Replace the built-in status icon. */
+    icon?: Snippet
+    /** Action buttons row under the text. */
+    actions?: Snippet
+    children?: Snippet
+  }
+
+  let { status = 'info', title, description, icon, actions, children }: Props = $props()
+</script>
+
+<div class="sv-result sv-result--{status}" role="status">
+  <div class="sv-result__icon" aria-hidden="true">
+    {#if icon}{@render icon()}
+    {:else if status === 'success'}
+      <svg viewBox="0 0 24 24" width="30" height="30" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5" /></svg>
+    {:else if status === 'error'}
+      <svg viewBox="0 0 24 24" width="30" height="30" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12" /></svg>
+    {:else if status === 'warning'}
+      <svg viewBox="0 0 24 24" width="30" height="30" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" /></svg>
+    {:else if status === 'notfound'}
+      <span class="sv-result__code">404</span>
+    {:else}
+      <svg viewBox="0 0 24 24" width="30" height="30" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9" /><path d="M12 8h.01M11 12h1v4h1" /></svg>
+    {/if}
+  </div>
+  <h2 class="sv-result__title">{title}</h2>
+  {#if description}<p class="sv-result__desc">{description}</p>{/if}
+  {#if children}<div class="sv-result__body">{@render children()}</div>{/if}
+  {#if actions}<div class="sv-result__actions">{@render actions()}</div>{/if}
+</div>
+
+<style>
+  .sv-result {
+    --_c: var(--sg-accent, #2563eb);
+    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
+    padding: 40px 24px; max-width: 460px; margin: 0 auto;
+  }
+  .sv-result--success { --_c: var(--sg-success, #16a34a); }
+  .sv-result--error { --_c: var(--sg-danger, #dc2626); }
+  .sv-result--warning { --_c: var(--sg-warning, #f59e0b); }
+  .sv-result--notfound { --_c: var(--sg-muted, #64748b); }
+  .sv-result__icon {
+    display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; margin-bottom: 4px;
+    color: var(--_c); background: color-mix(in srgb, var(--_c) 12%, transparent);
+  }
+  .sv-result__code { font-size: 22px; font-weight: 800; letter-spacing: 0.02em; }
+  .sv-result__title { margin: 0; font-size: 19px; font-weight: 700; color: var(--sg-fg, #0f172a); }
+  .sv-result__desc { margin: 0; font-size: 14px; line-height: 1.5; color: var(--sg-muted, #64748b); }
+  .sv-result__body { margin-top: 6px; }
+  .sv-result__actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; justify-content: center; }
+</style>

package/src/SvSegmented.svelte

@@ -0,0 +1,114 @@
+<script lang="ts" module>
+  export type { RadioOption as SegmentedOption } from './createRadioGroup.svelte'
+</script>
+
+<script lang="ts">
+  /**
+   * SvSegmented - a segmented control: a compact row of mutually-exclusive
+   * options in a shared track (the modern alternative to a small radio group or a
+   * tab strip for a setting). Single-select, keyboard-accessible (it reuses the
+   * radio-group core: arrow keys roam, Space/Enter select), and themed from the
+   * shared `--sg-*` tokens.
+   *
+   * ```svelte
+   * <SvSegmented options={[{value:'list',label:'List'},{value:'grid',label:'Grid'}]} bind:value />
+   * ```
+   */
+  import type { Snippet } from 'svelte'
+  import SvField from './SvField.svelte'
+  import { createRadioGroup, type RadioOption } from './createRadioGroup.svelte'
+  import { nextEditorId, type SvEditorProps } from './editor-contract'
+
+  type SegOption = RadioOption & { icon?: Snippet }
+
+  type Props = Pick<
+    SvEditorProps,
+    'disabled' | 'size' | 'dir' | 'id' | 'ariaLabel' | 'label' | 'hint' | 'error' | 'required' | 'invalid'
+  > & {
+    options: ReadonlyArray<SegOption>
+    value?: string | number | null
+    onChange?: (value: string | number) => void
+    /** Stretch the control (and split options evenly) to the container width. */
+    block?: boolean
+    name?: string
+  }
+
+  let {
+    options,
+    value = $bindable<string | number | null>(null),
+    onChange,
+    disabled = false,
+    size = 'md',
+    dir,
+    id,
+    ariaLabel,
+    label,
+    hint,
+    error,
+    required = false,
+    invalid = false,
+    block = false,
+    name,
+  }: Props = $props()
+
+  const autoId = nextEditorId('sv-seg')
+  const uid = $derived(id ?? autoId)
+
+  const rg = createRadioGroup({
+    options: () => options,
+    value: () => value,
+    onChange: (v) => { value = v; onChange?.(v) },
+    disabled: () => disabled,
+    ariaLabel: () => ariaLabel ?? label,
+    id: () => uid,
+    invalid: () => invalid,
+    required: () => required,
+    error: () => error,
+  })
+</script>
+
+<SvField id={uid} {label} {hint} {error} {required} {dir}>
+  <div class="sv-seg sv-seg--{size}" class:is-block={block} class:is-disabled={disabled} class:is-invalid={invalid} {...rg.groupProps()}>
+    {#each options as opt (opt.value)}
+      <button
+        class="sv-seg__opt"
+        class:is-selected={rg.isChecked(opt)}
+        {...rg.radioProps(opt)}
+      >
+        {#if opt.icon}<span class="sv-seg__icon">{@render opt.icon()}</span>{/if}
+        <span class="sv-seg__label">{opt.label}</span>
+      </button>
+    {/each}
+    {#if name}<input type="hidden" {name} value={value ?? ''} />{/if}
+  </div>
+</SvField>
+
+<style>
+  .sv-seg {
+    --_accent: var(--sg-accent, #2563eb);
+    display: inline-flex; gap: 2px; padding: 2px; box-sizing: border-box;
+    background: var(--sg-row-hover-bg, #f1f5f9); border-radius: calc(var(--sg-radius, 8px) + 2px);
+    border: 1px solid var(--sg-border, #e2e8f0);
+  }
+  .sv-seg.is-block { display: flex; width: 100%; }
+  .sv-seg.is-disabled { opacity: 0.6; }
+  .sv-seg__opt {
+    flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+    padding: 0 12px; border: 0; border-radius: var(--sg-radius, 8px); background: none; cursor: pointer;
+    font: inherit; font-weight: 550; color: var(--sg-muted, #64748b); white-space: nowrap;
+    transition: background 0.14s, color 0.14s, box-shadow 0.14s;
+  }
+  .sv-seg--sm .sv-seg__opt { height: 26px; font-size: 12px; }
+  .sv-seg--md .sv-seg__opt { height: 32px; font-size: 13px; }
+  .sv-seg--lg .sv-seg__opt { height: 38px; font-size: 14.5px; }
+  .sv-seg__opt:hover:not(.is-selected):not([disabled]) { color: var(--sg-fg, #0f172a); }
+  .sv-seg__opt.is-selected {
+    background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a);
+    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
+  }
+  .sv-seg__opt[disabled] { opacity: 0.5; cursor: default; }
+  .sv-seg__opt:focus-visible { outline: 2px solid var(--sg-focus-ring, var(--_accent)); outline-offset: -2px; }
+  .sv-seg.is-invalid { border-color: var(--sg-danger, #dc2626); }
+  .sv-seg__icon { display: inline-flex; }
+  @media (prefers-reduced-motion: reduce) { .sv-seg__opt { transition: none; } }
+</style>

package/src/SvSimpleGrid.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  /**
+   * SvSimpleGrid - a responsive grid primitive: lays children into `cols` equal
+   * columns that auto-fit down to a `minChildWidth` before wrapping, with a
+   * consistent `gap`. Use it for card galleries, stat tiles, and dashboards.
+   *
+   * ```svelte
+   * <SvSimpleGrid minChildWidth={220} gap={12}>{#each tiles as t}<Card {t} />{/each}</SvSimpleGrid>
+   * ```
+   */
+  import type { Snippet } from 'svelte'
+
+  type Props = {
+    /**
+     * Fixed column count. When omitted, columns auto-fit based on
+     * `minChildWidth` (responsive by default).
+     */
+    cols?: number
+    /** Minimum child width (px) before wrapping, for the auto-fit layout. Default 200. */
+    minChildWidth?: number
+    /** Gap between cells (px, or any CSS length). Default 12. */
+    gap?: number | string
+    children?: Snippet
+  }
+
+  let { cols, minChildWidth = 200, gap = 12, children }: Props = $props()
+  const g = $derived(typeof gap === 'number' ? `${gap}px` : gap)
+  const template = $derived(
+    cols != null
+      ? `repeat(${cols}, minmax(0, 1fr))`
+      : `repeat(auto-fit, minmax(min(${minChildWidth}px, 100%), 1fr))`,
+  )
+</script>
+
+<div class="sv-simplegrid" style:gap={g} style:grid-template-columns={template}>
+  {@render children?.()}
+</div>
+
+<style>
+  .sv-simplegrid { display: grid; min-width: 0; }
+</style>