@svgrid/grid 2.2.16 → 2.2.17

package/dist/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/dist/SvResult.svelte.d.ts

@@ -0,0 +1,28 @@
+/**
+   * 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;
+};
+declare const SvResult: import("svelte").Component<Props, {}, "">;
+type SvResult = ReturnType<typeof SvResult>;
+export default SvResult;

package/dist/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/dist/SvSegmented.svelte.d.ts

@@ -0,0 +1,29 @@
+export type { RadioOption as SegmentedOption } from './createRadioGroup.svelte';
+/**
+   * 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 { type RadioOption } from './createRadioGroup.svelte';
+import { 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;
+};
+declare const SvSegmented: import("svelte").Component<Props, {}, "value">;
+type SvSegmented = ReturnType<typeof SvSegmented>;
+export default SvSegmented;

package/dist/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>

package/dist/SvSimpleGrid.svelte.d.ts

@@ -0,0 +1,25 @@
+/**
+   * 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;
+};
+declare const SvSimpleGrid: import("svelte").Component<Props, {}, "">;
+type SvSimpleGrid = ReturnType<typeof SvSimpleGrid>;
+export default SvSimpleGrid;

package/dist/SvSlider.svelte

@@ -39,6 +39,8 @@
     labels = 'none',
     showValue = false,
     disabled = false,
+    readonly = false,
+    size = 'md',
     orientation = 'horizontal',
     name,
     ariaLabel,
@@ -60,7 +62,7 @@
   // in the headless `createSlider` core; the component keeps the DOM measuring.
   const slider = createSlider({
     value: () => value,
-    onChange: (v) => onChange?.(v),
+    onChange: (v) => { if (readonly) return; onChange?.(v) },
     min: () => min,
     max: () => max,
     step: () => step,
@@ -69,6 +71,11 @@
     disabled: () => disabled,
     ariaLabel: () => ariaLabel ?? label,
     rtl: () => resolvedDir === 'rtl',
+    id: () => uid,
+    invalid: () => invalid,
+    required: () => required,
+    error: () => error,
+    hint: () => hint,
   })
   const lo = $derived(slider.lo)
   const hi = $derived(slider.hi)
@@ -87,7 +94,7 @@
   // The rect is measured here (a DOM concern) and passed INTO the core.
   let trackEl: HTMLDivElement | null = null
   function onTrackDown(e: PointerEvent) {
-    if (disabled) return
+    if (disabled || readonly) return
     slider.pointerDown({ x: e.clientX, y: e.clientY }, trackEl!.getBoundingClientRect())
     trackEl?.setPointerCapture(e.pointerId)
   }
@@ -102,8 +109,9 @@
 
 <SvField id={uid} {label} {hint} {error} {required} {dir}>
 <div
-  class="sv-slider sv-slider--{orientation}"
+  class="sv-slider sv-slider--{orientation} sv-slider--{size}"
   class:is-disabled={disabled}
+  class:is-readonly={readonly}
   dir={resolvedDir}
 >
   <!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -126,14 +134,14 @@
     {/each}
 
     {#if range}
-      <div class="sv-slider__thumb" style:--p={`${pct(lo)}%`} {...slider.thumbProps(0)}>
+      <div class="sv-slider__thumb" style:--p={`${pct(lo)}%`} {...slider.thumbProps(0)} aria-readonly={readonly ? 'true' : undefined}>
         {#if showValue}<span class="sv-slider__bubble">{fmt(lo)}</span>{/if}
       </div>
-      <div class="sv-slider__thumb" style:--p={`${pct(hi)}%`} {...slider.thumbProps(1)}>
+      <div class="sv-slider__thumb" style:--p={`${pct(hi)}%`} {...slider.thumbProps(1)} aria-readonly={readonly ? 'true' : undefined}>
         {#if showValue}<span class="sv-slider__bubble">{fmt(hi)}</span>{/if}
       </div>
     {:else}
-      <div class="sv-slider__thumb" style:--p={`${pct(hi)}%`} {...slider.thumbProps(0)}>
+      <div class="sv-slider__thumb" style:--p={`${pct(hi)}%`} {...slider.thumbProps(0)} aria-readonly={readonly ? 'true' : undefined}>
         {#if showValue}<span class="sv-slider__bubble">{fmt(hi)}</span>{/if}
       </div>
     {/if}
@@ -152,15 +160,20 @@
 </SvField>
 
 <style>
-  .sv-slider { --_accent: var(--sg-accent, #2563eb); --_track: var(--sg-border, #e2e8f0); padding: 10px; }
+  .sv-slider { --_accent: var(--sg-accent, #2563eb); --_track: var(--sg-border, #e2e8f0); --_th: 16px; --_trk: 6px; padding: 10px; }
+  .sv-slider--sm { --_th: 13px; --_trk: 4px; }
+  .sv-slider--lg { --_th: 20px; --_trk: 8px; }
   .sv-slider--horizontal { width: 240px; }
+  .sv-slider--horizontal.sv-slider--sm { width: 180px; }
+  .sv-slider--horizontal.sv-slider--lg { width: 300px; }
   .sv-slider--vertical { height: 200px; width: 40px; }
   .sv-slider.is-disabled { opacity: 0.5; pointer-events: none; }
+  .sv-slider.is-readonly .sv-slider__track, .sv-slider.is-readonly .sv-slider__thumb { cursor: default; }
   .sv-slider__track {
     position: relative; background: var(--_track); border-radius: 999px; cursor: pointer; touch-action: none;
   }
-  .sv-slider--horizontal .sv-slider__track { height: 6px; }
-  .sv-slider--vertical .sv-slider__track { width: 6px; height: 100%; margin: 0 auto; }
+  .sv-slider--horizontal .sv-slider__track { height: var(--_trk); }
+  .sv-slider--vertical .sv-slider__track { width: var(--_trk); height: 100%; margin: 0 auto; }
   .sv-slider__scale { position: relative; height: 15px; margin-top: 8px; font-size: 11px; color: var(--sg-muted, #64748b); font-variant-numeric: tabular-nums; }
   .sv-slider__scale--ends { display: flex; justify-content: space-between; }
   .sv-slider__scale-lbl { position: absolute; inset-inline-start: var(--p); transform: translateX(-50%); white-space: nowrap; }
@@ -168,7 +181,7 @@
   .sv-slider--horizontal .sv-slider__fill { inset-inline-start: var(--a); inset-inline-end: calc(100% - var(--b)); top: 0; bottom: 0; }
   .sv-slider--vertical .sv-slider__fill { bottom: var(--a); top: calc(100% - var(--b)); left: 0; right: 0; }
   .sv-slider__thumb {
-    position: absolute; width: 16px; height: 16px; border-radius: 50%;
+    position: absolute; width: var(--_th); height: var(--_th); border-radius: 50%;
     background: #fff; border: 2px solid var(--_accent); box-shadow: 0 1px 3px rgba(0,0,0,0.25);
     cursor: grab; touch-action: none;
   }

package/dist/SvSpinner.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  /**
+   * SvSpinner - a dedicated indeterminate loading spinner (distinct from the
+   * determinate SvProgress bars). Sizeable, colorable, and it respects
+   * `prefers-reduced-motion`. Give it a `label` for screen readers.
+   *
+   * ```svelte
+   * <SvSpinner size="lg" label="Loading results" />
+   * ```
+   */
+  type Props = {
+    /** Diameter in px, or a named size. Default `md` (20px). */
+    size?: 'sm' | 'md' | 'lg' | number
+    /** Stroke color (defaults to the accent token). */
+    color?: string
+    /** Accessible label; when omitted the spinner is `aria-hidden`. */
+    label?: string
+  }
+
+  let { size = 'md', color, label }: Props = $props()
+  const px = $derived(typeof size === 'number' ? size : size === 'sm' ? 15 : size === 'lg' ? 28 : 20)
+</script>
+
+<span
+  class="sv-spinner"
+  role={label ? 'status' : undefined}
+  aria-label={label}
+  aria-hidden={label ? undefined : 'true'}
+  style:width={`${px}px`}
+  style:height={`${px}px`}
+  style:color={color}
+></span>
+
+<style>
+  .sv-spinner {
+    display: inline-block; box-sizing: border-box; flex: none; border-radius: 50%;
+    border: 2px solid color-mix(in srgb, currentcolor 25%, transparent);
+    border-top-color: currentcolor; color: var(--sg-accent, #2563eb);
+    animation: sv-spinner-rot 0.6s linear infinite;
+  }
+  @keyframes sv-spinner-rot { to { transform: rotate(360deg); } }
+  @media (prefers-reduced-motion: reduce) { .sv-spinner { animation-duration: 1.4s; } }
+</style>

package/dist/SvSpinner.svelte.d.ts

@@ -0,0 +1,20 @@
+/**
+ * SvSpinner - a dedicated indeterminate loading spinner (distinct from the
+ * determinate SvProgress bars). Sizeable, colorable, and it respects
+ * `prefers-reduced-motion`. Give it a `label` for screen readers.
+ *
+ * ```svelte
+ * <SvSpinner size="lg" label="Loading results" />
+ * ```
+ */
+type Props = {
+    /** Diameter in px, or a named size. Default `md` (20px). */
+    size?: 'sm' | 'md' | 'lg' | number;
+    /** Stroke color (defaults to the accent token). */
+    color?: string;
+    /** Accessible label; when omitted the spinner is `aria-hidden`. */
+    label?: string;
+};
+declare const SvSpinner: import("svelte").Component<Props, {}, "">;
+type SvSpinner = ReturnType<typeof SvSpinner>;
+export default SvSpinner;

package/dist/SvStack.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  /**
+   * SvStack - a vertical flex layout primitive: stacks children in a column with a
+   * consistent `gap` and optional cross-axis `align`. The building block for form
+   * rows, card bodies, and sidebars. (For a horizontal row use SvGroup.)
+   *
+   * ```svelte
+   * <SvStack gap={12}><A /><B /><C /></SvStack>
+   * ```
+   */
+  import type { Snippet } from 'svelte'
+
+  type Props = {
+    /** Gap between children (px, or any CSS length). Default 12. */
+    gap?: number | string
+    /** Cross-axis alignment. */
+    align?: 'start' | 'center' | 'end' | 'stretch'
+    /** Main-axis distribution. */
+    justify?: 'start' | 'center' | 'end' | 'between' | 'around'
+    /** Wrapping element tag. Default `div`. */
+    as?: string
+    children?: Snippet
+  }
+
+  let { gap = 12, align = 'stretch', justify = 'start', as = 'div', children }: Props = $props()
+  const g = $derived(typeof gap === 'number' ? `${gap}px` : gap)
+  const alignMap = { start: 'flex-start', center: 'center', end: 'flex-end', stretch: 'stretch' } as const
+  const justifyMap = { start: 'flex-start', center: 'center', end: 'flex-end', between: 'space-between', around: 'space-around' } as const
+</script>
+
+<svelte:element this={as} class="sv-stack" style:gap={g} style:align-items={alignMap[align]} style:justify-content={justifyMap[justify]}>
+  {@render children?.()}
+</svelte:element>
+
+<style>
+  .sv-stack { display: flex; flex-direction: column; min-width: 0; }
+</style>

package/dist/SvStack.svelte.d.ts

@@ -0,0 +1,24 @@
+/**
+   * SvStack - a vertical flex layout primitive: stacks children in a column with a
+   * consistent `gap` and optional cross-axis `align`. The building block for form
+   * rows, card bodies, and sidebars. (For a horizontal row use SvGroup.)
+   *
+   * ```svelte
+   * <SvStack gap={12}><A /><B /><C /></SvStack>
+   * ```
+   */
+import type { Snippet } from 'svelte';
+type Props = {
+    /** Gap between children (px, or any CSS length). Default 12. */
+    gap?: number | string;
+    /** Cross-axis alignment. */
+    align?: 'start' | 'center' | 'end' | 'stretch';
+    /** Main-axis distribution. */
+    justify?: 'start' | 'center' | 'end' | 'between' | 'around';
+    /** Wrapping element tag. Default `div`. */
+    as?: string;
+    children?: Snippet;
+};
+declare const SvStack: import("svelte").Component<Props, {}, "">;
+type SvStack = ReturnType<typeof SvStack>;
+export default SvStack;

package/dist/SvSwitchButton.svelte

@@ -20,6 +20,7 @@
     checked = false,
     onChange,
     disabled = false,
+    readonly = false,
     size = 'md',
     name,
     ariaLabel,
@@ -40,7 +41,7 @@
   // The styled switch is just a renderer over the headless core.
   const sw = createSwitch({
     checked: () => checked,
-    onChange: (v) => onChange?.(v),
+    onChange: (v) => { if (readonly) return; onChange?.(v) },
     disabled: () => disabled,
     ariaLabel: () => ariaLabel,
     id: () => uid,
@@ -53,9 +54,12 @@
 
 <SvField id={uid} {label} {hint} {error} {required} {dir}>
   <button
+    role="switch"
     class="sv-switch sv-switch--{size}"
     class:is-on={checked}
+    class:is-readonly={readonly}
     {...sw.switchProps()}
+    aria-readonly={readonly ? 'true' : undefined}
   >
     <span class="sv-switch__track">
       {#if onLabel || offLabel}
@@ -77,6 +81,7 @@
   .sv-switch--sm { --_h: 18px; --_w: 32px; }
   .sv-switch--lg { --_h: 28px; --_w: 52px; }
   .sv-switch[disabled] { opacity: 0.5; cursor: not-allowed; }
+  .sv-switch.is-readonly { cursor: default; }
   .sv-switch__track {
     position: relative; width: var(--_w); height: var(--_h); border-radius: 999px;
     background: var(--sg-border, #cbd5e1); transition: background 0.16s;

package/dist/SvTagsInput.svelte

@@ -33,6 +33,7 @@
     disabled = false,
     unique = true,
     max = Infinity,
+    size = 'md',
     name,
     ariaLabel,
     invalid = false,
@@ -68,7 +69,7 @@
 </script>
 
 <SvField id={uid} {label} {hint} {error} {required} {dir}>
-  <div class="sv-tags" class:is-disabled={disabled} class:is-invalid={invalid} {...ti.rootProps()}>
+  <div class="sv-tags sv-tags--{size}" class:is-disabled={disabled} class:is-invalid={invalid} {...ti.rootProps()}>
     {#each value as tag, i (tag + i)}
       <span class="sv-tags__chip" {...ti.tagProps(i)}>
         <span class="sv-tags__label">{tag}</span>
@@ -89,20 +90,23 @@
 <style>
   .sv-tags {
     --_accent: var(--sg-accent, #2563eb);
-    display: flex; flex-wrap: wrap; gap: 5px; align-items: center; width: 280px; min-height: 34px; padding: 4px 6px;
+    --_minh: 34px; --_chip-h: 22px; --_fs: 13px;
+    display: flex; flex-wrap: wrap; gap: 5px; align-items: center; width: 280px; min-height: var(--_minh); padding: 4px 6px;
     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);
   }
+  .sv-tags--sm { --_minh: 28px; --_chip-h: 19px; --_fs: 12px; }
+  .sv-tags--lg { --_minh: 40px; --_chip-h: 26px; --_fs: 15px; }
   .sv-tags:focus-within { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); }
   .sv-tags.is-invalid { border-color: var(--sg-danger, #dc2626); }
   .sv-tags.is-invalid:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-danger, #dc2626) 22%, transparent); }
   .sv-tags.is-disabled { opacity: 0.6; }
   .sv-tags__chip {
-    display: inline-flex; align-items: center; gap: 4px; height: 22px; padding-block: 0; padding-inline: 8px 4px;
+    display: inline-flex; align-items: center; gap: 4px; height: var(--_chip-h); padding-block: 0; padding-inline: 8px 4px;
     background: color-mix(in srgb, var(--_accent) 14%, transparent); color: var(--_accent);
-    border-radius: 5px; font-size: 12px; font-weight: 600;
+    border-radius: 5px; font-size: calc(var(--_fs) - 1px); font-weight: 600;
   }
   .sv-tags__x { background: none; border: 0; color: inherit; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; opacity: 0.7; }
   .sv-tags__x:hover { opacity: 1; }
-  .sv-tags__input { flex: 1; min-width: 80px; border: 0; background: none; outline: none; color: inherit; font: inherit; font-size: 13px; height: 24px; }
+  .sv-tags__input { flex: 1; min-width: 80px; border: 0; background: none; outline: none; color: inherit; font: inherit; font-size: var(--_fs); height: 24px; }
 </style>