@svgrid/grid 2.2.16 → 2.2.17

package/src/GridFooter.svelte

@@ -77,6 +77,7 @@
   const changePage = $derived(ctrl.changePage);
   const goToPage = $derived(ctrl.goToPage);
   const setPageSize = $derived(ctrl.setPageSize);
+  const messages = $derived(ctrl.messages);
 </script>
 
     {#if showStatus && statusBarEnabled && statusBarStats}
@@ -85,7 +86,7 @@
         {#each statusBarAggregates as agg (agg)}
           {#if agg === "count"}
             <span class="sv-grid-status-item"
-              ><span class="sv-grid-status-label">Count</span>{fmtStat(s.count)}</span
+              ><span class="sv-grid-status-label">{messages.statCount}</span>{fmtStat(s.count)}</span
             >
           {:else if agg === "numericCount"}
             <span class="sv-grid-status-item"
@@ -93,19 +94,19 @@
             >
           {:else if s.numericCount > 0 && agg === "sum"}
             <span class="sv-grid-status-item"
-              ><span class="sv-grid-status-label">Sum</span>{fmtStat(s.sum)}</span
+              ><span class="sv-grid-status-label">{messages.statSum}</span>{fmtStat(s.sum)}</span
             >
           {:else if s.numericCount > 0 && agg === "avg"}
             <span class="sv-grid-status-item"
-              ><span class="sv-grid-status-label">Avg</span>{fmtStat(s.avg)}</span
+              ><span class="sv-grid-status-label">{messages.statAvg}</span>{fmtStat(s.avg)}</span
             >
           {:else if s.numericCount > 0 && agg === "min"}
             <span class="sv-grid-status-item"
-              ><span class="sv-grid-status-label">Min</span>{fmtStat(s.min)}</span
+              ><span class="sv-grid-status-label">{messages.statMin}</span>{fmtStat(s.min)}</span
             >
           {:else if s.numericCount > 0 && agg === "max"}
             <span class="sv-grid-status-item"
-              ><span class="sv-grid-status-label">Max</span>{fmtStat(s.max)}</span
+              ><span class="sv-grid-status-label">{messages.statMax}</span>{fmtStat(s.max)}</span
             >
           {/if}
         {/each}
@@ -125,7 +126,7 @@
       {@const sizes = pageSizeOptions && pageSizeOptions.length ? pageSizeOptions : [10, 25, 50, 100]}
       <div class="sv-grid-pagination" class:sv-grid-pagination-top={top} role="navigation" aria-label="Pagination">
         <div class="sv-grid-pagination-pagesize">
-          <span>Page Size:</span>
+          <span>{messages.pageSize}</span>
           <div class="sv-grid-pagination-pagesize-dd">
             <SvGridDropdown
               options={sizes.map((n) => ({ value: n, label: String(n) }))}
@@ -146,17 +147,17 @@
             class="sv-grid-pagination-btn"
             disabled={onFirst}
             onclick={() => goToPage(0)}
-            aria-label="First page">⇤</button
+            aria-label={messages.firstPage}>⇤</button
           >
           <button
             type="button"
             class="sv-grid-pagination-btn"
             disabled={onFirst}
             onclick={() => changePage(-1)}
-            aria-label="Previous page">‹</button
+            aria-label={messages.prevPage}>‹</button
           >
           <span class="sv-grid-pagination-label">
-            Page <strong>{currentPage.toLocaleString()}</strong> of
+            {messages.page} <strong>{currentPage.toLocaleString()}</strong> {messages.of}
             <strong>{pageCount.toLocaleString()}</strong>
           </span>
           <button
@@ -164,14 +165,14 @@
             class="sv-grid-pagination-btn"
             disabled={onLast}
             onclick={() => changePage(1)}
-            aria-label="Next page">›</button
+            aria-label={messages.nextPage}>›</button
           >
           <button
             type="button"
             class="sv-grid-pagination-btn"
             disabled={onLast}
             onclick={() => goToPage(pageCount - 1)}
-            aria-label="Last page">⇥</button
+            aria-label={messages.lastPage}>⇥</button
           >
         </div>
       </div>

package/src/SvAnchor.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  /**
+   * SvAnchor - a themed link. Underline on hover by default; `external` adds
+   * `target="_blank"` + safe `rel` and an offscreen "opens in new tab" hint.
+   *
+   * <SvAnchor href="/docs">Read the docs</SvAnchor>
+   * <SvAnchor href="https://svelte.dev" external>Svelte</SvAnchor>
+   */
+  import type { Snippet } from 'svelte'
+
+  type Props = {
+    href?: string
+    /** Open in a new tab with safe `rel`. */
+    external?: boolean
+    /** Underline behaviour. */
+    underline?: 'hover' | 'always' | 'none'
+    /** Semantic colour. */
+    tone?: 'accent' | 'default' | 'muted'
+    /** Font size step. */
+    size?: 'sm' | 'md' | 'lg'
+    onclick?: (e: MouseEvent) => void
+    children?: Snippet
+  }
+
+  let { href, external = false, underline = 'hover', tone = 'accent', size = 'md', onclick, children }: Props = $props()
+
+  const sizeMap = { sm: '13px', md: '14px', lg: '16px' } as const
+  const toneMap = {
+    accent: 'var(--sg-accent, #2563eb)',
+    default: 'var(--sg-fg, #0f172a)',
+    muted: 'var(--sg-muted, #64748b)',
+  } as const
+</script>
+
+<a
+  {href}
+  {onclick}
+  class="sv-anchor sv-anchor--u-{underline}"
+  style:font-size={sizeMap[size]}
+  style:color={toneMap[tone]}
+  target={external ? '_blank' : undefined}
+  rel={external ? 'noopener noreferrer' : undefined}
+>
+  {@render children?.()}{#if external}<span class="sv-anchor__ext" aria-hidden="true">↗</span><span class="sv-anchor__sr">(opens in a new tab)</span>{/if}
+</a>
+
+<style>
+  .sv-anchor {
+    font-family: var(--sg-font, inherit);
+    text-decoration: none;
+    border-radius: 2px;
+    cursor: pointer;
+  }
+  .sv-anchor--u-always { text-decoration: underline; text-underline-offset: 2px; }
+  .sv-anchor--u-hover:hover { text-decoration: underline; text-underline-offset: 2px; }
+  .sv-anchor:focus-visible {
+    outline: 2px solid var(--sg-focus-ring, #2563eb);
+    outline-offset: 2px;
+  }
+  .sv-anchor__ext { margin-left: 2px; font-size: 0.85em; }
+  .sv-anchor__sr {
+    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
+  }
+</style>

package/src/SvAspectRatio.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  /**
+   * SvAspectRatio - hold a fixed width:height ratio for its content (media,
+   * embeds, maps, skeletons) so it never causes layout shift. The child fills
+   * the box.
+   *
+   * <SvAspectRatio ratio={16 / 9}><img src={src} alt="" /></SvAspectRatio>
+   */
+  import type { Snippet } from 'svelte'
+
+  type Props = {
+    /** Width / height ratio (e.g. `16 / 9`, `1`, `4 / 3`). */
+    ratio?: number
+    children?: Snippet
+  }
+
+  let { ratio = 16 / 9, children }: Props = $props()
+</script>
+
+<div class="sv-aspect" style:aspect-ratio={ratio}>
+  {@render children?.()}
+</div>
+
+<style>
+  .sv-aspect {
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+  }
+  /* Make the single child fill the ratio box by default. */
+  .sv-aspect > :global(*) {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+</style>

package/src/SvAutoComplete.svelte

@@ -8,6 +8,7 @@
    * portal/measure render concerns live here.
    */
   import { anchoredRect, portalToBody, popIn, type AnchoredRect } from './popover'
+  import { startPanelResize } from './panel-resize'
   import { createDismissableLayer } from './a11y/dismissable'
   import { type ListOption } from './list-option'
   import SvField from './SvField.svelte'
@@ -21,14 +22,18 @@
     suggestions?: ReadonlyArray<string | ListOption>
     minChars?: number
     placeholder?: string
+    /** Show a bottom drag grip so the user can resize the open suggestion panel's
+     *  height (hidden when the panel flips upward, where there is no room to grow). */
+    resizable?: boolean
   }
 
   let {
-    value = '',
+    value = $bindable(''),
     onChange,
     suggestions = [],
     minChars = 1,
     placeholder,
+    resizable = false,
     disabled = false,
     name,
     size = 'md',
@@ -40,6 +45,7 @@
     hint,
     dir,
     id,
+    loading = false,
   }: Props = $props()
 
   const autoId = nextEditorId('sv-ac')
@@ -48,10 +54,17 @@
   let fieldEl = $state<HTMLInputElement | null>(null)
   let panelEl = $state<HTMLDivElement | null>(null)
   let rect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false, maxHeight: 0, availHeight: 0 })
+  // User-chosen panel height (px) once they drag the resize grip; null = auto.
+  let userHeight = $state<number | null>(null)
+  const DEFAULT_CAP = 288
+  const panelMaxH = $derived(
+    resizable && userHeight != null ? Math.min(userHeight, rect.availHeight) : Math.min(rect.availHeight, DEFAULT_CAP),
+  )
+  const showGrip = $derived(resizable && !rect.openUpward)
 
   const ac = createAutocomplete({
     value: () => value,
-    onChange: (v) => onChange?.(v),
+    onChange: (v) => { value = v; onChange?.(v) },
     suggestions: () => suggestions,
     minChars: () => minChars,
     disabled: () => disabled,
@@ -67,8 +80,20 @@
   function updatePos() {
     if (!fieldEl) return
     // estimatedHeight only picks the flip direction; real max-height is availHeight
-    // below, so the panel takes its natural content height. See SvComboBox.
-    rect = anchoredRect(fieldEl.getBoundingClientRect(), { estimatedHeight: Math.min(ac.filtered.length, 8) * 34 + 12 })
+    // below, so the panel takes its natural content height. See SvComboBox. When
+    // the user has dragged the grip, anchor the flip decision to THAT height.
+    const est = resizable && userHeight != null ? userHeight : Math.min(ac.filtered.length, 8) * 34 + 12
+    rect = anchoredRect(fieldEl.getBoundingClientRect(), { estimatedHeight: est })
+  }
+
+  function startResize(e: PointerEvent) {
+    if (!panelEl) return
+    startPanelResize(e, {
+      startHeight: panelEl.clientHeight,
+      min: 96,
+      max: () => rect.availHeight,
+      onHeight: (h) => { userHeight = h; updatePos() },
+    })
   }
 
   $effect(() => {
@@ -82,7 +107,7 @@
   })
 </script>
 
-<SvField id={uid} {label} {hint} {error} {required} {dir}>
+<SvField id={uid} {label} {hint} {error} {required} {dir} {loading}>
   <input
     bind:this={fieldEl}
     class="sv-ac sv-ac--{size}"
@@ -94,11 +119,17 @@
 </SvField>
 
 {#if ac.open}
-  <div bind:this={panelEl} class="sv-ddl__panel" use:portalToBody use:popIn={{ up: rect.openUpward }} style:position="fixed" style:top={rect.openUpward ? undefined : `${rect.top}px`} style:bottom={rect.openUpward ? `${rect.bottom}px` : undefined} style:left={`${rect.left}px`} style:min-width={`${rect.width}px`} style:max-height={`${Math.min(rect.availHeight, 288)}px`} {...ac.listboxProps()}>
-    {#each ac.filtered as opt, i (opt.value)}
+  <div bind:this={panelEl} class="sv-ddl__panel" class:is-resizable={showGrip} use:portalToBody use:popIn={{ up: rect.openUpward }} style:position="fixed" style:top={rect.openUpward ? undefined : `${rect.top}px`} style:bottom={rect.openUpward ? `${rect.bottom}px` : undefined} style:left={`${rect.left}px`} style:min-width={`${rect.width}px`} style:max-height={`${panelMaxH}px`} style:height={resizable && userHeight != null && !rect.openUpward ? `${panelMaxH}px` : undefined} {...ac.listboxProps()}>
+    {#each ac.filtered as opt, i (i)}
       <!-- svelte-ignore a11y_click_events_have_key_events a11y_interactive_supports_focus -->
       <div class="sv-ddl__opt" class:is-active={ac.isActive(i)} {...ac.optionProps(i)}>{opt.label}</div>
     {/each}
+    {#if showGrip}
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
+      <div class="sv-ddl__grip" onpointerdown={startResize} title="Drag to resize" aria-hidden="true">
+        <span class="sv-ddl__grip-dots"></span>
+      </div>
+    {/if}
   </div>
 {/if}
 {#if name}<input type="hidden" {name} value={value} />{/if}
@@ -117,4 +148,18 @@
   .sv-ac:focus { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); }
   .sv-ac.is-invalid { border-color: var(--sg-danger, #dc2626); }
   .sv-ac.is-invalid:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-danger, #dc2626) 22%, transparent); }
+  /* Bottom resize grip (shared "····" handle - see SvDropDownList / panel-resize). */
+  :global(.sv-ddl__panel.is-resizable) { padding-bottom: 0; }
+  :global(.sv-ddl__grip) {
+    position: sticky; bottom: 0; z-index: 1; margin: 2px -4px -4px; height: 15px;
+    display: flex; align-items: center; justify-content: center; cursor: ns-resize;
+    background: var(--sg-bg, #fff); border-top: 1px solid var(--sg-border, #e2e8f0);
+    border-radius: 0 0 10px 10px; touch-action: none;
+  }
+  :global(.sv-ddl__grip-dots) {
+    width: 26px; height: 4px; color: var(--sg-muted, #94a3b8); opacity: 0.6;
+    background-image: radial-gradient(currentColor 1px, transparent 1.6px);
+    background-size: 6px 4px; background-position: center; background-repeat: repeat-x;
+  }
+  :global(.sv-ddl__grip:hover .sv-ddl__grip-dots) { opacity: 1; }
 </style>

package/src/SvBlockquote.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  /**
+   * SvBlockquote - a quotation block with an accent rule and an optional citation.
+   *
+   * <SvBlockquote cite="Ada Lovelace">The Analytical Engine weaves algebraic patterns.</SvBlockquote>
+   */
+  import type { Snippet } from 'svelte'
+
+  type Props = {
+    /** Attribution shown under the quote. */
+    cite?: string
+    /** Accent colour of the rule. */
+    tone?: 'accent' | 'muted' | 'success' | 'warning' | 'error'
+    children?: Snippet
+  }
+
+  let { cite, tone = 'accent', children }: Props = $props()
+
+  const toneMap = {
+    accent: 'var(--sg-accent, #2563eb)',
+    muted: 'var(--sg-muted, #64748b)',
+    success: 'var(--sg-success, #16a34a)',
+    warning: 'var(--sg-warning, #d97706)',
+    error: 'var(--sg-danger, #dc2626)',
+  } as const
+</script>
+
+<blockquote class="sv-blockquote" style:--sv-bq-rule={toneMap[tone]}>
+  <div class="sv-blockquote__body">{@render children?.()}</div>
+  {#if cite}<footer class="sv-blockquote__cite">- {cite}</footer>{/if}
+</blockquote>
+
+<style>
+  .sv-blockquote {
+    margin: 0;
+    padding: 4px 0 4px 16px;
+    border-left: 3px solid var(--sv-bq-rule, #2563eb);
+    font-family: var(--sg-font, inherit);
+    color: var(--sg-fg, #0f172a);
+  }
+  .sv-blockquote__body { font-size: 15px; line-height: 1.55; }
+  .sv-blockquote__cite { margin-top: 8px; font-size: 13px; color: var(--sg-muted, #64748b); }
+</style>

package/src/SvCalendar.svelte

@@ -17,7 +17,8 @@
    * important dates, week numbers, firstDayOfWeek, drill navigation, keyboard).
    */
   import { untrack, type Snippet } from 'svelte'
-  import { resolveMessages, type EditorDir } from './editor-contract'
+  import SvField from './SvField.svelte'
+  import { nextEditorId, resolveMessages, type EditorDir, type EditorSize } from './editor-contract'
   import {
     createCalendar,
     type CalendarValue,
@@ -91,6 +92,16 @@
      *  the date + its day-state. Switches the month grid to a taller,
      *  top-aligned layout so there's room for the content. */
     day?: Snippet<[Date, CalendarDayState]>
+    // Optional field chrome: when any of label/hint/error is set, the calendar 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 {
@@ -124,8 +135,17 @@
     messages,
     recurrence = null,
     day,
+    label,
+    hint,
+    error,
+    required = false,
+    invalid = false,
+    id,
   }: Props = $props()
 
+  const calAutoId = nextEditorId('sv-cal')
+  const uid = $derived(id ?? calAutoId)
+  const hasChrome = $derived(!!(label || hint || error))
   const M = $derived(resolveMessages(DEFAULT_MESSAGES, messages))
   const resolvedDir = $derived(dir === 'ltr' || dir === 'rtl' ? dir : undefined)
   // With several month panels side by side, leading/trailing days of adjacent
@@ -206,14 +226,17 @@
   }
 </script>
 
+{#snippet calBody()}
 <div
   class="sv-cal"
   class:sv-cal--disabled={disabled}
+  class:sv-cal--invalid={invalid}
   class:sv-cal--with-presets={presets && presets.length}
   class:sv-cal--band={selectionMode === 'range' || selectionMode === 'week'}
   class:sv-cal--rich={!!day}
+  id={uid}
   role="group"
-  aria-label={M.label}
+  aria-label={label ?? M.label}
   aria-disabled={disabled}
   dir={resolvedDir}
 >
@@ -314,6 +337,13 @@
 
   {#if name}<input type="hidden" {name} value={cal.selectedDates.map((d) => d.toISOString()).join(',')} />{/if}
 </div>
+{/snippet}
+
+{#if hasChrome}
+  <SvField id={uid} {label} {hint} {error} {required} {dir}>{@render calBody()}</SvField>
+{:else}
+  {@render calBody()}
+{/if}
 
 <style>
   .sv-cal {
@@ -336,6 +366,7 @@
     user-select: none;
   }
   .sv-cal--disabled { opacity: 0.55; pointer-events: none; }
+  .sv-cal--invalid { border-color: var(--sg-danger, #dc2626); }
   .sv-cal__main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
   /* Clip so animated content slides in from the edge (not past the border). Day
      focus outlines use outline-offset:-2px, so they stay inside and aren't clipped. */

package/src/SvCalendar.test.ts

@@ -34,6 +34,21 @@ describe('SvCalendar render', () => {
     }
   })
 
+  it('renders bare by default, but wraps in SvField chrome when label/error given', () => {
+    const bare = mountCal({ value: new Date(2026, 5, 15) })
+    try {
+      expect(bare.target.querySelector('.sv-field')).toBeNull() // bare
+      expect(bare.target.querySelector('.sv-cal')).not.toBeNull()
+    } finally { bare.destroy() }
+    const chrome = mountCal({ value: new Date(2026, 5, 15), label: 'Start date', error: 'Required', required: true })
+    try {
+      expect(chrome.target.querySelector('.sv-field')).not.toBeNull()
+      expect(chrome.target.querySelector('.sv-field__label')?.textContent).toContain('Start date')
+      expect(chrome.target.querySelector('.sv-field__error')?.textContent).toContain('Required')
+      expect(chrome.target.querySelector('.sv-cal.sv-cal--invalid')).toBeNull() // invalid not set
+    } finally { chrome.destroy() }
+  })
+
   it('marks the selected day', () => {
     const { target, destroy } = mountCal({ value: new Date(2026, 5, 15) })
     try {

package/src/SvCheckBox.svelte

@@ -21,6 +21,7 @@
     indeterminate = false,
     onChange,
     disabled = false,
+    readonly = false,
     size = 'md',
     name,
     value,
@@ -42,7 +43,7 @@
   const cb = createCheckbox({
     checked: () => checked,
     indeterminate: () => indeterminate,
-    onChange: (v) => onChange?.(v),
+    onChange: (v) => { if (readonly) return; onChange?.(v) },
     disabled: () => disabled,
     ariaLabel: () => ariaLabel ?? (children ? undefined : 'checkbox'),
     id: () => uid,
@@ -54,12 +55,14 @@
 </script>
 
 <SvField id={uid} {hint} {error} {required} {dir}>
-  <label class="sv-check sv-check--{size}" class:is-disabled={disabled} class:is-invalid={invalid}>
+  <label class="sv-check sv-check--{size}" class:is-disabled={disabled} class:is-readonly={readonly} class:is-invalid={invalid}>
     <button
+      role="checkbox"
       class="sv-check__box"
       class:is-checked={checked && !indeterminate}
       class:is-indeterminate={indeterminate}
       {...cb.boxProps()}
+      aria-readonly={readonly ? 'true' : undefined}
     >
       {#if indeterminate}
         <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M4 8h8" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" /></svg>
@@ -82,6 +85,7 @@
   .sv-check--sm { --_sz: 15px; font-size: 12px; }
   .sv-check--lg { --_sz: 22px; font-size: 15px; }
   .sv-check.is-disabled { opacity: 0.55; cursor: not-allowed; }
+  .sv-check.is-readonly { cursor: default; }
   .sv-check__box {
     width: var(--_sz); height: var(--_sz); flex: none; padding: 0; cursor: inherit;
     display: grid; place-items: center;

package/src/SvCode.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  /**
+   * SvCode - monospace code. Inline by default; set `block` for a padded,
+   * horizontally-scrolling code block. Pass `code` as a string or use the
+   * `children` snippet. No syntax highlighting (bring your own).
+   *
+   * <SvCode>npm i @svgrid/grid</SvCode>
+   * <SvCode block code={snippet} />
+   */
+  import type { Snippet } from 'svelte'
+
+  type Props = {
+    /** Render as a padded block instead of inline. */
+    block?: boolean
+    /** Code as a string (skip the snippet). */
+    code?: string
+    children?: Snippet
+  }
+
+  let { block = false, code, children }: Props = $props()
+</script>
+
+{#if block}
+  <pre class="sv-code sv-code--block"><code>{#if code != null}{code}{:else}{@render children?.()}{/if}</code></pre>
+{:else}
+  <code class="sv-code sv-code--inline">{#if code != null}{code}{:else}{@render children?.()}{/if}</code>
+{/if}
+
+<style>
+  .sv-code {
+    font-family: var(--sg-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+    font-size: 0.9em;
+    color: var(--sg-fg, #0f172a);
+  }
+  .sv-code--inline {
+    padding: 1px 5px;
+    background: var(--sg-muted-bg, color-mix(in srgb, var(--sg-fg, #0f172a) 7%, var(--sg-bg, #fff)));
+    border: 1px solid var(--sg-border, #e2e8f0);
+    border-radius: 4px;
+    white-space: nowrap;
+  }
+  .sv-code--block {
+    margin: 0;
+    padding: 12px 14px;
+    background: var(--sg-muted-bg, color-mix(in srgb, var(--sg-fg, #0f172a) 7%, var(--sg-bg, #fff)));
+    border: 1px solid var(--sg-border, #e2e8f0);
+    border-radius: 8px;
+    overflow-x: auto;
+    line-height: 1.55;
+  }
+  .sv-code--block code { font-size: 13px; white-space: pre; }
+</style>

package/src/SvCollapsible.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  /**
+   * SvCollapsible - a single show/hide region with an accessible trigger (the
+   * standalone form of one accordion item). The header toggles the panel with a
+   * rotating chevron; the panel animates its height open/closed and respects
+   * `prefers-reduced-motion`.
+   *
+   * ```svelte
+   * <SvCollapsible title="Advanced options" bind:open>
+   *   ...content...
+   * </SvCollapsible>
+   * ```
+   */
+  import type { Snippet } from 'svelte'
+  import { nextEditorId } from './editor-contract'
+
+  type Props = {
+    /** Header text (ignored when a `header` snippet is given). */
+    title?: string
+    /** Open state (bindable). */
+    open?: boolean
+    onOpenChange?: (open: boolean) => void
+    disabled?: boolean
+    /** Custom header content (replaces `title`). */
+    header?: Snippet
+    children?: Snippet
+  }
+
+  let { title, open = $bindable(false), onOpenChange, disabled = false, header, children }: Props = $props()
+
+  const uid = nextEditorId('sv-collapse')
+  function toggle() {
+    if (disabled) return
+    open = !open
+    onOpenChange?.(open)
+  }
+</script>
+
+<div class="sv-collapse" class:is-open={open} class:is-disabled={disabled}>
+  <button
+    class="sv-collapse__trigger"
+    type="button"
+    {disabled}
+    aria-expanded={open}
+    aria-controls={`${uid}-panel`}
+    id={`${uid}-trigger`}
+    onclick={toggle}
+  >
+    <span class="sv-collapse__label">{#if header}{@render header()}{:else}{title}{/if}</span>
+    <svg class="sv-collapse__chev" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
+  </button>
+  <div class="sv-collapse__region" id={`${uid}-panel`} role="region" aria-labelledby={`${uid}-trigger`} inert={!open}>
+    <div class="sv-collapse__content">{@render children?.()}</div>
+  </div>
+</div>
+
+<style>
+  .sv-collapse { border: 1px solid var(--sg-border, #e2e8f0); border-radius: 10px; background: var(--sg-bg, #fff); }
+  .sv-collapse__trigger {
+    display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; box-sizing: border-box;
+    padding: 11px 14px; background: none; border: 0; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 600;
+    color: var(--sg-fg, #0f172a); text-align: start;
+  }
+  .sv-collapse__trigger:hover:not(:disabled) { background: var(--sg-row-hover-bg, #f1f5f9); border-radius: 10px; }
+  .sv-collapse__trigger:disabled { opacity: 0.55; cursor: not-allowed; }
+  .sv-collapse__trigger:focus-visible { outline: 2px solid var(--sg-focus-ring, var(--sg-accent, #2563eb)); outline-offset: -2px; border-radius: 10px; }
+  .sv-collapse__label { min-width: 0; }
+  .sv-collapse__chev { flex: none; color: var(--sg-muted, #64748b); transition: transform 0.16s ease; }
+  .sv-collapse.is-open .sv-collapse__chev { transform: rotate(180deg); }
+  .sv-collapse__region { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.18s ease; }
+  .sv-collapse.is-open .sv-collapse__region { grid-template-rows: 1fr; }
+  .sv-collapse__content { overflow: hidden; padding: 0 14px; min-height: 0; }
+  .sv-collapse.is-open .sv-collapse__content { padding-bottom: 13px; }
+  @media (prefers-reduced-motion: reduce) { .sv-collapse__region, .sv-collapse__chev { transition: none; } }
+</style>