@svgrid/grid 2.2.32 → 2.4.0

package/src/SvRadioGroup.svelte

@@ -1,107 +1,107 @@
-<script lang="ts" module>
-  export type { RadioOption } from './createRadioGroup.svelte'
-</script>
-
-<script lang="ts">
-  /**
-   * SvRadioGroup - an accessible radio group (WAI-ARIA radiogroup pattern) with
-   * 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 = SvEditorProps & {
-    options: ReadonlyArray<RadioOption>
-    value?: string | number | null
-    onChange?: (value: string | number) => void
-    orientation?: 'vertical' | 'horizontal'
-  }
-
-  let {
-    options,
-    value = null,
-    onChange,
-    name,
-    disabled = false,
-    readonly = false,
-    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) => { if (readonly) return; onChange?.(v) },
-    disabled: () => disabled,
-    // 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>
-
-<SvField id={uid} {label} {hint} {error} {required} {dir}>
-  <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
-        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; }
-  .sv-radiogroup--vertical { flex-direction: column; }
-  .sv-radiogroup--horizontal { flex-direction: row; flex-wrap: wrap; }
-  .sv-radio {
-    display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 2px;
-    font: inherit; color: var(--sg-fg, #0f172a); cursor: pointer; user-select: none;
-  }
-  .sv-radiogroup--sm .sv-radio { font-size: 12px; }
-  .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);
-    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);
-  }
-  .sv-radio:focus-visible { outline: none; }
-  .sv-radio:focus-visible .sv-radio__dot { outline: 2px solid var(--sg-focus-ring, var(--_accent)); outline-offset: 2px; }
-</style>
+<script lang="ts" module>
+  export type { RadioOption } from './createRadioGroup.svelte'
+</script>
+
+<script lang="ts">
+  /**
+   * SvRadioGroup - an accessible radio group (WAI-ARIA radiogroup pattern) with
+   * 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 = SvEditorProps & {
+    options: ReadonlyArray<RadioOption>
+    value?: string | number | null
+    onChange?: (value: string | number) => void
+    orientation?: 'vertical' | 'horizontal'
+  }
+
+  let {
+    options,
+    value = null,
+    onChange,
+    name,
+    disabled = false,
+    readonly = false,
+    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) => { if (readonly) return; onChange?.(v) },
+    disabled: () => disabled,
+    // 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>
+
+<SvField id={uid} {label} {hint} {error} {required} {dir}>
+  <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
+        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; }
+  .sv-radiogroup--vertical { flex-direction: column; }
+  .sv-radiogroup--horizontal { flex-direction: row; flex-wrap: wrap; }
+  .sv-radio {
+    display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 2px;
+    font: inherit; color: var(--sg-fg, #0f172a); cursor: pointer; user-select: none;
+  }
+  .sv-radiogroup--sm .sv-radio { font-size: 12px; }
+  .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);
+    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);
+  }
+  .sv-radio:focus-visible { outline: none; }
+  .sv-radio:focus-visible .sv-radio__dot { outline: 2px solid var(--sg-focus-ring, var(--_accent)); outline-offset: 2px; }
+</style>

package/src/SvRating.svelte

@@ -1,112 +1,112 @@
-<script lang="ts">
-  /**
-   * SvRating - a star rating control (WAI-ARIA slider). Parity: Smart
-   * `smart-rating`. Hover preview, keyboard, optional half steps, readOnly.
-   * Uses the grid's `--sg-rating-*` tokens so it matches the in-grid editor.
-   */
-  import SvField from './SvField.svelte'
-  import { nextEditorId, resolveMessages, type SvEditorProps } from './editor-contract'
-  import { createRating } from './createRating.svelte'
-
-  /** User-facing strings (localizable via `messages`). */
-  type RatingMessages = { label: string; star: string; stars: string }
-  const DEFAULT_MESSAGES: RatingMessages = { label: 'Rating', star: 'star', stars: 'stars' }
-
-  type Props = SvEditorProps & {
-    value?: number
-    onChange?: (value: number) => void
-    max?: number
-    /** Allow half-star precision. */
-    allowHalf?: boolean
-    /** @deprecated use `readonly` - kept for back-compat. */
-    readOnly?: boolean
-    /** Override the built-in strings (group + per-star aria-labels). */
-    messages?: Partial<RatingMessages>
-  }
-
-  let {
-    value = 0,
-    onChange,
-    max = 5,
-    allowHalf = false,
-    readonly = false,
-    readOnly = false,
-    disabled = false,
-    size = 'md',
-    name,
-    ariaLabel,
-    invalid = false,
-    required = false,
-    error,
-    label,
-    hint,
-    dir,
-    id,
-    messages,
-  }: Props = $props()
-
-  const ro = $derived(readonly || readOnly)
-  const autoId = nextEditorId('sv-rating')
-  const uid = $derived(id ?? autoId)
-  const M = $derived(resolveMessages(DEFAULT_MESSAGES, messages))
-
-  // The styled rating is just a renderer over the headless core.
-  const r = createRating({
-    value: () => value,
-    onChange: (v) => onChange?.(v),
-    max: () => max,
-    allowHalf: () => allowHalf,
-    readonly: () => ro,
-    disabled: () => disabled,
-    ariaLabel: () => ariaLabel ?? label ?? M.label,
-    starLabel: (n) => `${n} ${n === 1 ? M.star : M.stars}`,
-    id: () => uid,
-    invalid: () => invalid,
-    required: () => required,
-    error: () => error,
-    hint: () => hint,
-  })
-</script>
-
-<SvField id={uid} {label} {hint} {error} {required} {dir}>
-  <div
-    class="sv-rating sv-rating--{size}"
-    class:is-readonly={ro}
-    class:is-disabled={disabled}
-    {...r.rootProps()}
-  >
-    {#each Array(max) as _, i (i)}
-      <button
-        class="sv-rating__star is-{r.fillOf(i)}"
-        {...r.starProps(i)}
-      >
-        <svg viewBox="0 0 24 24" aria-hidden="true">
-          <defs>
-            <linearGradient id="half-{uid}-{i}"><stop offset="50%" stop-color="var(--_on)" /><stop offset="50%" stop-color="var(--_off)" /></linearGradient>
-          </defs>
-          <path d="M12 2.5l2.9 6.1 6.6.9-4.8 4.6 1.2 6.6L12 18.6 6.1 21.7l1.2-6.6L2.5 9.5l6.6-.9z"
-            fill={r.fillOf(i) === 'full' ? 'var(--_on)' : r.fillOf(i) === 'half' ? `url(#half-${uid}-${i})` : 'var(--_off)'} />
-        </svg>
-      </button>
-    {/each}
-    {#if name}<input type="hidden" {name} value={value} />{/if}
-  </div>
-</SvField>
-
-<style>
-  .sv-rating {
-    --_on: var(--sg-rating-on, #f59e0b);
-    --_off: var(--sg-rating-empty, #cbd5e1);
-    --_sz: 22px;
-    display: inline-flex; gap: 2px; align-items: center;
-  }
-  .sv-rating--sm { --_sz: 16px; }
-  .sv-rating--lg { --_sz: 30px; }
-  .sv-rating.is-disabled { opacity: 0.5; }
-  .sv-rating__star {
-    width: var(--_sz); height: var(--_sz); padding: 0; border: 0; background: none; cursor: pointer; line-height: 0;
-  }
-  .sv-rating.is-readonly .sv-rating__star, .sv-rating.is-disabled .sv-rating__star { cursor: default; }
-  .sv-rating__star svg { width: 100%; height: 100%; }
-  .sv-rating:focus-visible { outline: 2px solid var(--sg-focus-ring, var(--sg-accent, #2563eb)); outline-offset: 2px; border-radius: 4px; }
-</style>
+<script lang="ts">
+  /**
+   * SvRating - a star rating control (WAI-ARIA slider). Parity: Smart
+   * `smart-rating`. Hover preview, keyboard, optional half steps, readOnly.
+   * Uses the grid's `--sg-rating-*` tokens so it matches the in-grid editor.
+   */
+  import SvField from './SvField.svelte'
+  import { nextEditorId, resolveMessages, type SvEditorProps } from './editor-contract'
+  import { createRating } from './createRating.svelte'
+
+  /** User-facing strings (localizable via `messages`). */
+  type RatingMessages = { label: string; star: string; stars: string }
+  const DEFAULT_MESSAGES: RatingMessages = { label: 'Rating', star: 'star', stars: 'stars' }
+
+  type Props = SvEditorProps & {
+    value?: number
+    onChange?: (value: number) => void
+    max?: number
+    /** Allow half-star precision. */
+    allowHalf?: boolean
+    /** @deprecated use `readonly` - kept for back-compat. */
+    readOnly?: boolean
+    /** Override the built-in strings (group + per-star aria-labels). */
+    messages?: Partial<RatingMessages>
+  }
+
+  let {
+    value = 0,
+    onChange,
+    max = 5,
+    allowHalf = false,
+    readonly = false,
+    readOnly = false,
+    disabled = false,
+    size = 'md',
+    name,
+    ariaLabel,
+    invalid = false,
+    required = false,
+    error,
+    label,
+    hint,
+    dir,
+    id,
+    messages,
+  }: Props = $props()
+
+  const ro = $derived(readonly || readOnly)
+  const autoId = nextEditorId('sv-rating')
+  const uid = $derived(id ?? autoId)
+  const M = $derived(resolveMessages(DEFAULT_MESSAGES, messages))
+
+  // The styled rating is just a renderer over the headless core.
+  const r = createRating({
+    value: () => value,
+    onChange: (v) => onChange?.(v),
+    max: () => max,
+    allowHalf: () => allowHalf,
+    readonly: () => ro,
+    disabled: () => disabled,
+    ariaLabel: () => ariaLabel ?? label ?? M.label,
+    starLabel: (n) => `${n} ${n === 1 ? M.star : M.stars}`,
+    id: () => uid,
+    invalid: () => invalid,
+    required: () => required,
+    error: () => error,
+    hint: () => hint,
+  })
+</script>
+
+<SvField id={uid} {label} {hint} {error} {required} {dir}>
+  <div
+    class="sv-rating sv-rating--{size}"
+    class:is-readonly={ro}
+    class:is-disabled={disabled}
+    {...r.rootProps()}
+  >
+    {#each Array(max) as _, i (i)}
+      <button
+        class="sv-rating__star is-{r.fillOf(i)}"
+        {...r.starProps(i)}
+      >
+        <svg viewBox="0 0 24 24" aria-hidden="true">
+          <defs>
+            <linearGradient id="half-{uid}-{i}"><stop offset="50%" stop-color="var(--_on)" /><stop offset="50%" stop-color="var(--_off)" /></linearGradient>
+          </defs>
+          <path d="M12 2.5l2.9 6.1 6.6.9-4.8 4.6 1.2 6.6L12 18.6 6.1 21.7l1.2-6.6L2.5 9.5l6.6-.9z"
+            fill={r.fillOf(i) === 'full' ? 'var(--_on)' : r.fillOf(i) === 'half' ? `url(#half-${uid}-${i})` : 'var(--_off)'} />
+        </svg>
+      </button>
+    {/each}
+    {#if name}<input type="hidden" {name} value={value} />{/if}
+  </div>
+</SvField>
+
+<style>
+  .sv-rating {
+    --_on: var(--sg-rating-on, #f59e0b);
+    --_off: var(--sg-rating-empty, #cbd5e1);
+    --_sz: 22px;
+    display: inline-flex; gap: 2px; align-items: center;
+  }
+  .sv-rating--sm { --_sz: 16px; }
+  .sv-rating--lg { --_sz: 30px; }
+  .sv-rating.is-disabled { opacity: 0.5; }
+  .sv-rating__star {
+    width: var(--_sz); height: var(--_sz); padding: 0; border: 0; background: none; cursor: pointer; line-height: 0;
+  }
+  .sv-rating.is-readonly .sv-rating__star, .sv-rating.is-disabled .sv-rating__star { cursor: default; }
+  .sv-rating__star svg { width: 100%; height: 100%; }
+  .sv-rating:focus-visible { outline: 2px solid var(--sg-focus-ring, var(--sg-accent, #2563eb)); outline-offset: 2px; border-radius: 4px; }
+</style>

package/src/SvResult.svelte

@@ -1,73 +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, #d97706); }
-  .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>
+<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, #d97706); }
+  .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>