@svgrid/grid 2.2.16 → 2.2.18

package/dist/SvText.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  /**
+   * SvText - the workhorse text primitive: a paragraph or inline span with
+   * consistent size / weight / colour tokens, optional truncation and line
+   * clamping. Themes from the shared `--sg-*` tokens.
+   *
+   * <SvText size="sm" tone="muted">Last synced 2 minutes ago</SvText>
+   * <SvText clamp={2}>A long description that wraps then ellipsises...</SvText>
+   */
+  import type { Snippet } from 'svelte'
+
+  type Props = {
+    /** Font size step. */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+    /** Font weight. */
+    weight?: 'normal' | 'medium' | 'semibold' | 'bold'
+    /** Semantic colour. */
+    tone?: 'default' | 'muted' | 'accent' | 'success' | 'warning' | 'error'
+    /** Text alignment. */
+    align?: 'start' | 'center' | 'end'
+    /** Truncate to a single line with an ellipsis. */
+    truncate?: boolean
+    /** Clamp to N lines with an ellipsis (overrides truncate). */
+    clamp?: number
+    /** Render inline (`span`) instead of a block (`p`). */
+    inline?: boolean
+    /** Override the element/tag. */
+    as?: string
+    children?: Snippet
+  }
+
+  let {
+    size = 'md', weight = 'normal', tone = 'default', align,
+    truncate = false, clamp, inline = false, as, children,
+  }: Props = $props()
+
+  const sizeMap = { xs: '11px', sm: '13px', md: '14px', lg: '16px', xl: '20px' } as const
+  const weightMap = { normal: 400, medium: 500, semibold: 600, bold: 700 } as const
+  const toneMap = {
+    default: 'var(--sg-fg, #0f172a)',
+    muted: 'var(--sg-muted, #64748b)',
+    accent: 'var(--sg-accent, #2563eb)',
+    success: 'var(--sg-success, #16a34a)',
+    warning: 'var(--sg-warning, #d97706)',
+    error: 'var(--sg-danger, #dc2626)',
+  } as const
+  const alignMap = { start: 'left', center: 'center', end: 'right' } as const
+
+  const tag = $derived(as ?? (inline ? 'span' : 'p'))
+</script>
+
+<svelte:element
+  this={tag}
+  class="sv-text"
+  class:is-truncate={truncate && !clamp}
+  class:is-clamp={clamp != null}
+  style:font-size={sizeMap[size]}
+  style:font-weight={weightMap[weight]}
+  style:color={toneMap[tone]}
+  style:text-align={align ? alignMap[align] : undefined}
+  style:--sv-text-clamp={clamp}
+>
+  {@render children?.()}
+</svelte:element>
+
+<style>
+  .sv-text { margin: 0; font-family: var(--sg-font, inherit); line-height: 1.5; }
+  .sv-text.is-truncate { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+  .sv-text.is-clamp {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--sv-text-clamp, 2);
+    line-clamp: var(--sv-text-clamp, 2);
+    overflow: hidden;
+  }
+</style>

package/dist/SvText.svelte.d.ts

@@ -0,0 +1,31 @@
+/**
+   * SvText - the workhorse text primitive: a paragraph or inline span with
+   * consistent size / weight / colour tokens, optional truncation and line
+   * clamping. Themes from the shared `--sg-*` tokens.
+   *
+   * <SvText size="sm" tone="muted">Last synced 2 minutes ago</SvText>
+   * <SvText clamp={2}>A long description that wraps then ellipsises...</SvText>
+   */
+import type { Snippet } from 'svelte';
+type Props = {
+    /** Font size step. */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Font weight. */
+    weight?: 'normal' | 'medium' | 'semibold' | 'bold';
+    /** Semantic colour. */
+    tone?: 'default' | 'muted' | 'accent' | 'success' | 'warning' | 'error';
+    /** Text alignment. */
+    align?: 'start' | 'center' | 'end';
+    /** Truncate to a single line with an ellipsis. */
+    truncate?: boolean;
+    /** Clamp to N lines with an ellipsis (overrides truncate). */
+    clamp?: number;
+    /** Render inline (`span`) instead of a block (`p`). */
+    inline?: boolean;
+    /** Override the element/tag. */
+    as?: string;
+    children?: Snippet;
+};
+declare const SvText: import("svelte").Component<Props, {}, "">;
+type SvText = ReturnType<typeof SvText>;
+export default SvText;

package/dist/SvTextInput.svelte

@@ -4,9 +4,14 @@
    * (label / hint / error / RTL / a11y via SvField). Handles `text`, `email`,
    * `url`, `tel` and `search`. As a grid cell editor it honours the interaction
    * contract: Enter commits, Escape cancels. Parity: Smart `smart-input`.
+   *
+   * The control box, size, invalid state, clear button and leading/trailing
+   * adornments are all owned by SvField's `frame` mode, so they behave identically
+   * across the text-input family.
    */
+  import type { Snippet } from 'svelte'
   import SvField from './SvField.svelte'
-  import { editorAria, nextEditorId, type SvEditorProps } from './editor-contract'
+  import { editorAria, nextEditorId, type EditorAction, type SvEditorProps } from './editor-contract'
 
   type Props = SvEditorProps & {
     value?: string
@@ -23,6 +28,22 @@
     autocomplete?: AutoFill
     /** Autofocus + select on mount (used when mounted as a cell editor). */
     autofocus?: boolean
+    /** Select the whole value whenever the field is focused. */
+    selectOnFocus?: boolean
+    /** Leading adornment (icon/button) inside the field. */
+    leading?: Snippet
+    /** Trailing adornment (icon/button) inside the field. */
+    trailing?: Snippet
+    /** Plain-text affix at the start (e.g. a `$` or protocol). */
+    prefix?: string
+    /** Plain-text affix at the end (e.g. a unit). */
+    suffix?: string
+    /** `floating` animates the label up on focus/value. Default `static`. */
+    labelMode?: 'static' | 'floating'
+    /** Compact in-field action buttons (lookup/generate/copy...). */
+    actions?: EditorAction[]
+    /** Stretch to the container width. */
+    block?: boolean
   }
 
   let {
@@ -46,8 +67,17 @@
     hint,
     dir,
     id,
+    loading = false,
     autocomplete,
     autofocus = false,
+    selectOnFocus = false,
+    leading,
+    trailing,
+    prefix,
+    suffix,
+    labelMode = 'static',
+    actions,
+    block = false,
   }: Props = $props()
 
   const autoId = nextEditorId('sv-text')
@@ -68,48 +98,50 @@
   function mountFocus(node: HTMLInputElement) {
     if (autofocus) { node.focus(); node.select() }
   }
+  function onFocus(e: FocusEvent) {
+    if (selectOnFocus) (e.currentTarget as HTMLInputElement).select()
+  }
 </script>
 
-<SvField id={uid} {label} {hint} {error} {required} {dir}>
-  <div class="sv-text sv-text--{size}" class:is-disabled={disabled}>
-    <div class="sv-text__field" class:is-invalid={invalid}>
-      <input
-        use:mountFocus
-        class="sv-text__input"
-        {type}
-        {value}
-        {placeholder}
-        {disabled}
-        {readonly}
-        {maxlength}
-        {autocomplete}
-        oninput={onInput}
-        onkeydown={onKeydown}
-        {...editorAria({ id: uid, invalid, required, error, hint, ariaLabel })}
-      />
-      {#if clearable && value && !disabled && !readonly}
-        <button class="sv-text__clear" type="button" tabindex="-1" aria-label="Clear" onclick={() => set('')}>&times;</button>
-      {/if}
-    </div>
-    {#if name}<input type="hidden" {name} value={value} />{/if}
-  </div>
+<SvField
+  frame
+  id={uid}
+  {label}
+  {hint}
+  {error}
+  {required}
+  {dir}
+  {size}
+  {invalid}
+  {disabled}
+  {readonly}
+  {loading}
+  {block}
+  {leading}
+  {trailing}
+  {prefix}
+  {suffix}
+  {labelMode}
+  filled={!!value}
+  {actions}
+  clearable={clearable}
+  showClear={!!value}
+  onclear={() => set('')}
+>
+  <input
+    use:mountFocus
+    class="sv-text__input"
+    {type}
+    {value}
+    placeholder={labelMode === 'floating' ? undefined : placeholder}
+    {disabled}
+    {readonly}
+    {maxlength}
+    {autocomplete}
+    oninput={onInput}
+    onkeydown={onKeydown}
+    onfocus={onFocus}
+    {...editorAria({ id: uid, invalid, required, error, hint, ariaLabel })}
+  />
+  {#if name}<input type="hidden" {name} value={value} />{/if}
 </SvField>
-
-<style>
-  .sv-text { --_accent: var(--sg-accent, #2563eb); display: inline-flex; flex-direction: column; width: 220px; }
-  .sv-text.is-disabled { opacity: 0.6; }
-  .sv-text__field {
-    display: flex; align-items: center;
-    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-text__field:focus-within { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); }
-  .sv-text__field.is-invalid { border-color: var(--sg-danger, #dc2626); }
-  .sv-text__field.is-invalid:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-danger, #dc2626) 22%, transparent); }
-  .sv-text__input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: inherit; font: inherit; padding: 0 10px; }
-  .sv-text--sm .sv-text__field { height: 28px; font-size: 12px; }
-  .sv-text--md .sv-text__field { height: 34px; font-size: 13px; }
-  .sv-text--lg .sv-text__field { height: 40px; font-size: 15px; }
-  .sv-text__clear { display: grid; place-items: center; width: 28px; align-self: stretch; background: none; border: 0; color: var(--sg-muted, #64748b); cursor: pointer; font-size: 17px; line-height: 1; }
-  .sv-text__clear:hover { color: var(--sg-fg, #0f172a); }
-</style>

package/dist/SvTextInput.svelte.d.ts

@@ -1,4 +1,15 @@
-import { type SvEditorProps } from './editor-contract';
+/**
+   * SvTextInput - the base single-line text editor on the shared editor contract
+   * (label / hint / error / RTL / a11y via SvField). Handles `text`, `email`,
+   * `url`, `tel` and `search`. As a grid cell editor it honours the interaction
+   * contract: Enter commits, Escape cancels. Parity: Smart `smart-input`.
+   *
+   * The control box, size, invalid state, clear button and leading/trailing
+   * adornments are all owned by SvField's `frame` mode, so they behave identically
+   * across the text-input family.
+   */
+import type { Snippet } from 'svelte';
+import { type EditorAction, type SvEditorProps } from './editor-contract';
 type Props = SvEditorProps & {
     value?: string;
     onChange?: (value: string) => void;
@@ -14,6 +25,22 @@ type Props = SvEditorProps & {
     autocomplete?: AutoFill;
     /** Autofocus + select on mount (used when mounted as a cell editor). */
     autofocus?: boolean;
+    /** Select the whole value whenever the field is focused. */
+    selectOnFocus?: boolean;
+    /** Leading adornment (icon/button) inside the field. */
+    leading?: Snippet;
+    /** Trailing adornment (icon/button) inside the field. */
+    trailing?: Snippet;
+    /** Plain-text affix at the start (e.g. a `$` or protocol). */
+    prefix?: string;
+    /** Plain-text affix at the end (e.g. a unit). */
+    suffix?: string;
+    /** `floating` animates the label up on focus/value. Default `static`. */
+    labelMode?: 'static' | 'floating';
+    /** Compact in-field action buttons (lookup/generate/copy...). */
+    actions?: EditorAction[];
+    /** Stretch to the container width. */
+    block?: boolean;
 };
 declare const SvTextInput: import("svelte").Component<Props, {}, "value">;
 type SvTextInput = ReturnType<typeof SvTextInput>;

package/dist/SvTimePicker.svelte

@@ -11,7 +11,8 @@
    * and ARIA; this component keeps the DOM-bound pointer capture + hit-testing.
    * All visuals come from `--sg-*` tokens so every theme applies for free.
    */
-  import { resolveMessages, type EditorDir } from './editor-contract'
+  import SvField from './SvField.svelte'
+  import { nextEditorId, resolveMessages, type EditorDir, type EditorSize } from './editor-contract'
   import { createTimePicker, type TimeValue, type TimeFormat, type TimeSelection } from './createTimePicker.svelte'
 
   /** User-facing strings (localizable via `messages`). */
@@ -38,6 +39,16 @@
     dir?: EditorDir
     /** Override the built-in strings (group label + AM/PM/Now). */
     messages?: Partial<TimeMessages>
+    // Optional field chrome: when any of label/hint/error is set, the dial is
+    // wrapped in <SvField> so it gains a label/hint/error line; otherwise it
+    // renders bare (as embedded inside SvDateTimePicker's popover).
+    label?: string
+    hint?: string
+    error?: string
+    required?: boolean
+    invalid?: boolean
+    size?: EditorSize
+    id?: string
   }
 
   let {
@@ -53,8 +64,18 @@
     selection = 'hour',
     dir,
     messages,
+    label,
+    hint,
+    error,
+    required = false,
+    invalid = false,
+    id,
   }: Props = $props()
 
+  const autoId = nextEditorId('sv-tp')
+  const uid = $derived(id ?? autoId)
+  const hasChrome = $derived(!!(label || hint || error))
+
   const M = $derived(resolveMessages(DEFAULT_MESSAGES, messages))
   const resolvedDir = $derived(dir === 'ltr' || dir === 'rtl' ? dir : undefined)
 
@@ -107,7 +128,8 @@
   }
 </script>
 
-<div class="sv-tp" class:sv-tp--disabled={disabled} role="group" aria-label={M.label} dir={resolvedDir}>
+{#snippet dialBody()}
+<div class="sv-tp" class:sv-tp--disabled={disabled} class:sv-tp--invalid={invalid} id={uid} role="group" aria-label={label ?? M.label} dir={resolvedDir}>
   <div class="sv-tp__head">
     <button class="sv-tp__seg" class:is-active={tp.selection === 'hour'} {...tp.segProps('hour')}>
       {String(tp.displayHour).padStart(2, '0')}
@@ -159,6 +181,13 @@
 
   {#if name}<input type="hidden" {name} value={`${String(tp.hours).padStart(2, '0')}:${tp.mm}`} />{/if}
 </div>
+{/snippet}
+
+{#if hasChrome}
+  <SvField id={uid} {label} {hint} {error} {required} {dir}>{@render dialBody()}</SvField>
+{:else}
+  {@render dialBody()}
+{/if}
 
 <style>
   .sv-tp {
@@ -175,6 +204,7 @@
     border: 1px solid var(--_border); border-radius: calc(var(--_radius) + 4px);
     user-select: none;
   }
+  .sv-tp--invalid { border-color: var(--sg-danger, #dc2626); }
   .sv-tp--disabled { opacity: 0.55; pointer-events: none; }
 
   .sv-tp__head { display: flex; align-items: center; gap: 2px; font-variant-numeric: tabular-nums; }

package/dist/SvTimePicker.svelte.d.ts

@@ -1,13 +1,5 @@
 export type { TimeValue } from './createTimePicker.svelte';
-/**
-   * SvTimePicker - an analog clock-dial time picker (parity: Smart
-   * `smart-time-picker`). 12/24-hour, minute snapping, hour->minute auto-switch,
-   * pointer-drag + keyboard. It is a styled renderer over the headless
-   * `createTimePicker` core: the core owns the value math, dial geometry, keyboard
-   * and ARIA; this component keeps the DOM-bound pointer capture + hit-testing.
-   * All visuals come from `--sg-*` tokens so every theme applies for free.
-   */
-import { type EditorDir } from './editor-contract';
+import { type EditorDir, type EditorSize } from './editor-contract';
 import { type TimeValue, type TimeFormat, type TimeSelection } from './createTimePicker.svelte';
 /** User-facing strings (localizable via `messages`). */
 type TimeMessages = {
@@ -36,6 +28,13 @@ type Props = {
     dir?: EditorDir;
     /** Override the built-in strings (group label + AM/PM/Now). */
     messages?: Partial<TimeMessages>;
+    label?: string;
+    hint?: string;
+    error?: string;
+    required?: boolean;
+    invalid?: boolean;
+    size?: EditorSize;
+    id?: string;
 };
 declare const SvTimePicker: import("svelte").Component<Props, {}, "">;
 type SvTimePicker = ReturnType<typeof SvTimePicker>;

package/dist/SvTitle.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  /**
+   * SvTitle - a heading primitive. `order` sets the semantic level (h1-h6) and,
+   * by default, the visual size; pass `size` to decouple the two (e.g. an h2 that
+   * looks like an h4). Themes from the shared `--sg-*` tokens.
+   *
+   * <SvTitle order={1}>Dashboard</SvTitle>
+   * <SvTitle order={3} size={5}>Small but semantic h3</SvTitle>
+   */
+  import type { Snippet } from 'svelte'
+
+  type Level = 1 | 2 | 3 | 4 | 5 | 6
+
+  type Props = {
+    /** Semantic heading level (h1-h6). */
+    order?: Level
+    /** Visual size step, defaults to `order`. */
+    size?: Level
+    /** Text alignment. */
+    align?: 'start' | 'center' | 'end'
+    /** Truncate to a single line with an ellipsis. */
+    truncate?: boolean
+    children?: Snippet
+  }
+
+  let { order = 2, size, align, truncate = false, children }: Props = $props()
+
+  // px + weight per visual step - a compact, balanced type scale.
+  const sizeMap = { 1: '30px', 2: '24px', 3: '20px', 4: '17px', 5: '15px', 6: '13px' } as const
+  const weightMap = { 1: 700, 2: 700, 3: 600, 4: 600, 5: 600, 6: 600 } as const
+  const alignMap = { start: 'left', center: 'center', end: 'right' } as const
+
+  const step = $derived(size ?? order)
+  const tag = $derived(`h${order}`)
+</script>
+
+<svelte:element
+  this={tag}
+  class="sv-title"
+  class:is-truncate={truncate}
+  style:font-size={sizeMap[step]}
+  style:font-weight={weightMap[step]}
+  style:text-align={align ? alignMap[align] : undefined}
+>
+  {@render children?.()}
+</svelte:element>
+
+<style>
+  .sv-title {
+    margin: 0;
+    font-family: var(--sg-font, inherit);
+    color: var(--sg-fg, #0f172a);
+    line-height: 1.25;
+    letter-spacing: -0.01em;
+  }
+  .sv-title.is-truncate { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+</style>

package/dist/SvTitle.svelte.d.ts

@@ -0,0 +1,24 @@
+/**
+   * SvTitle - a heading primitive. `order` sets the semantic level (h1-h6) and,
+   * by default, the visual size; pass `size` to decouple the two (e.g. an h2 that
+   * looks like an h4). Themes from the shared `--sg-*` tokens.
+   *
+   * <SvTitle order={1}>Dashboard</SvTitle>
+   * <SvTitle order={3} size={5}>Small but semantic h3</SvTitle>
+   */
+import type { Snippet } from 'svelte';
+type Level = 1 | 2 | 3 | 4 | 5 | 6;
+type Props = {
+    /** Semantic heading level (h1-h6). */
+    order?: Level;
+    /** Visual size step, defaults to `order`. */
+    size?: Level;
+    /** Text alignment. */
+    align?: 'start' | 'center' | 'end';
+    /** Truncate to a single line with an ellipsis. */
+    truncate?: boolean;
+    children?: Snippet;
+};
+declare const SvTitle: import("svelte").Component<Props, {}, "">;
+type SvTitle = ReturnType<typeof SvTitle>;
+export default SvTitle;

package/dist/SvToaster.svelte

@@ -10,7 +10,7 @@
    * ```
    */
   import { portalToBody } from './popover'
-  import { toastStore, dismissToast, pauseToast, resumeToast, type Toast } from './toast-store.svelte'
+  import { toastStore, dismissToast, pauseToast, resumeToast, type Toast, type ToastAction } from './toast-store.svelte'
 
   type Position =
     | 'top-left' | 'top-center' | 'top-right'
@@ -32,6 +32,12 @@
   // Swipe-to-dismiss: drag a toast sideways past ~60px to dismiss it.
   let drag = $state<{ id: number; startX: number; dx: number } | null>(null)
   function onDown(e: PointerEvent, id: number) {
+    // Only the primary button starts a swipe.
+    if (e.button !== 0) return
+    // Don't hijack presses on the toast's own controls (dismiss X, action /
+    // cancel buttons). Capturing the pointer here would redirect the pointerup
+    // to the toast and swallow the button's click.
+    if (e.target instanceof Element && e.target.closest('button')) return
     drag = { id, startX: e.clientX, dx: 0 }
     ;(e.currentTarget as HTMLElement).setPointerCapture?.(e.pointerId)
     pauseToast(id)
@@ -47,6 +53,12 @@
     else resumeToast(id)
   }
   const dragDx = (id: number) => (drag?.id === id ? drag.dx : 0)
+
+  // Run a toast action, then dismiss the toast unless it opted to stay open.
+  function runAction(a: ToastAction, id: number) {
+    a.onClick?.(id)
+    if (!a.keepOpen) dismissToast(id)
+  }
 </script>
 
 <div class="sv-toaster sv-toaster--{position}" use:portalToBody role="region" aria-label="Notifications">
@@ -67,11 +79,25 @@
       onpointerup={() => onUp(t.id)}
       onpointercancel={() => onUp(t.id)}
     >
-      <span class="sv-toast__icon" aria-hidden="true">{icon(t.variant)}</span>
-      <div class="sv-toast__content">
-        {#if t.title}<div class="sv-toast__title">{t.title}</div>{/if}
-        <div class="sv-toast__msg">{t.message}</div>
-      </div>
+      {#if t.render}
+        <div class="sv-toast__content">{@render t.render(t)}</div>
+      {:else}
+        <span class="sv-toast__icon" aria-hidden="true">{icon(t.variant)}</span>
+        <div class="sv-toast__content">
+          {#if t.title}<div class="sv-toast__title">{t.title}</div>{/if}
+          <div class="sv-toast__msg">{t.message}</div>
+          {#if t.action || t.cancel}
+            <div class="sv-toast__actions">
+              {#if t.cancel}
+                <button type="button" class="sv-toast__action sv-toast__action--cancel" onclick={() => runAction(t.cancel!, t.id)}>{t.cancel.label}</button>
+              {/if}
+              {#if t.action}
+                <button type="button" class="sv-toast__action" onclick={() => runAction(t.action!, t.id)}>{t.action.label}</button>
+              {/if}
+            </div>
+          {/if}
+        </div>
+      {/if}
       {#if t.dismissible}
         <button type="button" class="sv-toast__x" aria-label="Dismiss" onclick={() => dismissToast(t.id)}>&times;</button>
       {/if}
@@ -116,6 +142,15 @@
   :global(.sv-toast__content) { flex: 1; min-width: 0; }
   :global(.sv-toast__title) { font-weight: 650; margin-bottom: 1px; }
   :global(.sv-toast__msg) { color: var(--sg-fg, #0f172a); overflow-wrap: anywhere; }
+  :global(.sv-toast__actions) { display: flex; gap: 8px; margin-top: 9px; }
+  :global(.sv-toast__action) {
+    font: inherit; font-size: 12.5px; font-weight: 600; padding: 4px 11px; border-radius: 6px;
+    border: 1px solid var(--_accent, var(--sg-accent, #2563eb)); background: none; color: var(--_accent, var(--sg-accent, #2563eb));
+    cursor: pointer;
+  }
+  :global(.sv-toast__action:hover) { background: color-mix(in srgb, var(--_accent, #2563eb) 12%, transparent); }
+  :global(.sv-toast__action--cancel) { border-color: var(--sg-border, #e2e8f0); color: var(--sg-muted, #64748b); }
+  :global(.sv-toast__action--cancel:hover) { background: var(--sg-row-hover-bg, #f1f5f9); color: var(--sg-fg, #0f172a); }
   :global(.sv-toast__x) {
     flex: none; width: 22px; height: 22px; display: grid; place-items: center; margin: -2px -2px 0 0;
     background: none; border: 0; color: var(--sg-muted, #64748b); cursor: pointer; border-radius: 5px; font-size: 17px; line-height: 1;

package/dist/SvToggleButton.svelte

@@ -18,6 +18,7 @@
     pressed = false,
     onChange,
     disabled = false,
+    readonly = false,
     size = 'md',
     ariaLabel,
     invalid = false,
@@ -36,7 +37,7 @@
   // The styled toggle is just a renderer over the headless core.
   const t = createToggle({
     pressed: () => pressed,
-    onChange: (v) => onChange?.(v),
+    onChange: (v) => { if (readonly) return; onChange?.(v) },
     disabled: () => disabled,
     ariaLabel: () => ariaLabel,
     id: () => uid,
@@ -52,6 +53,7 @@
     class="sv-toggle sv-toggle--{size}"
     class:is-pressed={pressed}
     class:is-invalid={invalid}
+    class:is-readonly={readonly}
     {...t.buttonProps()}
   >
     {#if children}{@render children()}{/if}
@@ -77,6 +79,7 @@
     background: var(--_accent); color: var(--sg-on-accent, #fff); border-color: var(--_accent);
   }
   .sv-toggle[disabled] { opacity: 0.55; cursor: not-allowed; }
+  .sv-toggle.is-readonly { cursor: default; }
   .sv-toggle.is-invalid { border-color: var(--sg-danger, #dc2626); }
   .sv-toggle:focus-visible { outline: 2px solid var(--sg-focus-ring, var(--_accent)); outline-offset: 2px; }
 </style>