@svgrid/grid 1.2.34 → 2.0.1

package/src/SvSwitchButton.svelte

@@ -4,15 +4,13 @@
    * `smart-switch-button`. Controlled via `checked` + `onChange`; keyboard
    * togglable; optional inline on/off labels.
    */
+  import SvField from './SvField.svelte'
+  import { nextEditorId, type SvEditorProps } from './editor-contract'
   import { createSwitch } from './createSwitch.svelte'
 
-  type Props = {
+  type Props = SvEditorProps & {
     checked?: boolean
     onChange?: (checked: boolean) => void
-    disabled?: boolean
-    size?: 'sm' | 'md' | 'lg'
-    name?: string
-    ariaLabel?: string
     /** Optional labels rendered inside the track. */
     onLabel?: string
     offLabel?: string
@@ -25,33 +23,50 @@
     size = 'md',
     name,
     ariaLabel,
+    invalid = false,
+    required = false,
+    error,
+    label,
+    hint,
+    dir,
+    id,
     onLabel,
     offLabel,
   }: Props = $props()
 
+  const autoId = nextEditorId('sv-switch')
+  const uid = $derived(id ?? autoId)
+
   // The styled switch is just a renderer over the headless core.
   const sw = createSwitch({
     checked: () => checked,
     onChange: (v) => onChange?.(v),
     disabled: () => disabled,
     ariaLabel: () => ariaLabel,
+    id: () => uid,
+    invalid: () => invalid,
+    required: () => required,
+    error: () => error,
+    hint: () => hint,
   })
 </script>
 
-<button
-  class="sv-switch sv-switch--{size}"
-  class:is-on={checked}
-  {...sw.switchProps()}
->
-  <span class="sv-switch__track">
-    {#if onLabel || offLabel}
-      <span class="sv-switch__txt sv-switch__txt--on">{onLabel ?? ''}</span>
-      <span class="sv-switch__txt sv-switch__txt--off">{offLabel ?? ''}</span>
-    {/if}
-    <span class="sv-switch__thumb"></span>
-  </span>
-  {#if name}<input type="hidden" {name} value={checked ? 'true' : 'false'} />{/if}
-</button>
+<SvField id={uid} {label} {hint} {error} {required} {dir}>
+  <button
+    class="sv-switch sv-switch--{size}"
+    class:is-on={checked}
+    {...sw.switchProps()}
+  >
+    <span class="sv-switch__track">
+      {#if onLabel || offLabel}
+        <span class="sv-switch__txt sv-switch__txt--on">{onLabel ?? ''}</span>
+        <span class="sv-switch__txt sv-switch__txt--off">{offLabel ?? ''}</span>
+      {/if}
+      <span class="sv-switch__thumb"></span>
+    </span>
+    {#if name}<input type="hidden" {name} value={checked ? 'true' : 'false'} />{/if}
+  </button>
+</SvField>
 
 <style>
   .sv-switch {
@@ -69,17 +84,17 @@
   }
   .sv-switch.is-on .sv-switch__track { background: var(--_accent); }
   .sv-switch__thumb {
-    position: absolute; left: 2px; top: 50%; transform: translateY(-50%);
+    position: absolute; inset-inline-start: 2px; top: 50%; transform: translateY(-50%);
     width: calc(var(--_h) - 4px); height: calc(var(--_h) - 4px); border-radius: 50%;
-    background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: left 0.16s;
+    background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: inset-inline-start 0.16s;
   }
-  .sv-switch.is-on .sv-switch__thumb { left: calc(var(--_w) - var(--_h) + 2px); }
+  .sv-switch.is-on .sv-switch__thumb { inset-inline-start: calc(var(--_w) - var(--_h) + 2px); }
   .sv-switch__txt {
     position: absolute; font-size: 9px; font-weight: 700; color: #fff; text-transform: uppercase;
     top: 50%; transform: translateY(-50%);
   }
-  .sv-switch__txt--on { left: 6px; opacity: 0; }
-  .sv-switch__txt--off { right: 5px; color: var(--sg-muted, #64748b); }
+  .sv-switch__txt--on { inset-inline-start: 6px; opacity: 0; }
+  .sv-switch__txt--off { inset-inline-end: 5px; color: var(--sg-muted, #64748b); }
   .sv-switch.is-on .sv-switch__txt--on { opacity: 1; }
   .sv-switch.is-on .sv-switch__txt--off { opacity: 0; }
   .sv-switch:focus-visible { outline: none; }

package/src/SvTabs.svelte

@@ -4,20 +4,27 @@
 
 <script lang="ts">
   /**
-   * SvTabs - a WAI-ARIA tabs widget with roving tabindex + arrow-key navigation.
+   * SvTabs - a WAI-ARIA tabs widget with roving tabindex + arrow-key navigation,
+   * four `tabPosition`s (top / bottom / left / right) and optional closable tabs.
    * Parity: Smart `smart-tabs`. Controlled via `value` + `onChange`; the active
-   * panel is rendered through the `panel` snippet (receives the active id).
+   * panel is rendered through the `panel` snippet.
    *
-   * The behavior (roving focus, activation, ARIA) lives in the headless
-   * `createTabs` core; this component is just one styled renderer over it.
+   * Behavior (roving focus, activation, close, ARIA) lives in the headless
+   * `createTabs` core; this component is one styled renderer over it.
    */
   import type { Snippet } from 'svelte'
+  import { type EditorDir } from './editor-contract'
   import { createTabs, type TabItem } from './createTabs.svelte'
 
   type Props = {
     tabs: ReadonlyArray<TabItem>
     value?: string
     onChange?: (id: string) => void
+    /** Fired when a closable tab's x (or Delete key) closes it. */
+    onClose?: (id: string) => void
+    /** Where the tab strip sits. Default 'top'. */
+    tabPosition?: 'top' | 'bottom' | 'left' | 'right'
+    /** @deprecated use `tabPosition`. horizontal -> top, vertical -> left. */
     orientation?: 'horizontal' | 'vertical'
     /** 'line' underline (default) or 'pill' segmented look. */
     variant?: 'line' | 'pill'
@@ -25,25 +32,78 @@
     activation?: 'automatic' | 'manual'
     panel?: Snippet<[string]>
     ariaLabel?: string
+    /** Text direction (rtl mirrors layout + flips horizontal arrow keys). */
+    dir?: EditorDir
+    /** Allow dragging tabs to reorder; emits the new id order via onReorder. */
+    reorderable?: boolean
+    onReorder?: (orderedIds: string[]) => void
   }
 
   let {
     tabs,
     value = $bindable(),
     onChange,
-    orientation = 'horizontal',
+    onClose,
+    tabPosition,
+    orientation,
     variant = 'line',
     activation = 'automatic',
     panel,
     ariaLabel,
+    dir,
+    reorderable = false,
+    onReorder,
   }: Props = $props()
 
+  const pos = $derived(tabPosition ?? (orientation === 'vertical' ? 'left' : 'top'))
+  const orient = $derived(pos === 'left' || pos === 'right' ? 'vertical' : 'horizontal')
+  const resolvedDir = $derived(dir === 'ltr' || dir === 'rtl' ? dir : undefined)
+
+  // --- Overflow scroll (horizontal): show prev/next buttons when the strip
+  // overflows its container, and scroll the list.
+  let scrollLeft = $state(0)
+  let clientW = $state(0)
+  let scrollW = $state(0)
+  const overflowing = $derived(orient === 'horizontal' && scrollW > clientW + 1)
+  const atStart = $derived(scrollLeft <= 1)
+  const atEnd = $derived(scrollLeft + clientW >= scrollW - 1)
+  function measure() {
+    if (!tablistEl) return
+    clientW = tablistEl.clientWidth
+    scrollW = tablistEl.scrollWidth
+    scrollLeft = tablistEl.scrollLeft
+  }
+  $effect(() => { tabs.length; queueMicrotask(measure) }) // re-measure when tabs change
+  $effect(() => {
+    const onResize = () => measure()
+    window.addEventListener('resize', onResize)
+    return () => window.removeEventListener('resize', onResize)
+  })
+  function scrollBy(dir: 1 | -1) {
+    tablistEl?.scrollBy({ left: dir * Math.max(120, clientW * 0.7), behavior: 'smooth' })
+  }
+
+  // --- Drag reorder -----------------------------------------------------------
+  let dragId = $state<string | null>(null)
+  let overId = $state<string | null>(null)
+  function reorder(fromId: string, toId: string) {
+    if (fromId === toId) return
+    const ids = tabs.map((t) => t.id)
+    const from = ids.indexOf(fromId)
+    const to = ids.indexOf(toId)
+    if (from < 0 || to < 0) return
+    ids.splice(to, 0, ids.splice(from, 1)[0]!)
+    onReorder?.(ids)
+  }
+
   const tabsCtl = createTabs({
     tabs: () => tabs,
     value: () => value,
     onChange: (id) => { value = id; onChange?.(id) },
-    orientation: () => orientation,
+    onClose: (id) => onClose?.(id),
+    orientation: () => orient,
     activation: () => activation,
+    dir: () => dir,
     ariaLabel: () => ariaLabel,
   })
   const active = $derived(tabsCtl.activeId)
@@ -60,16 +120,43 @@
   })
 </script>
 
-<div class="sv-tabs sv-tabs--{orientation} sv-tabs--{variant}">
-  <div bind:this={tablistEl} class="sv-tabs__list" {...tabsCtl.tablistProps()}>
-    {#each tabs as tab (tab.id)}
-      <button
-        type="button"
-        class="sv-tabs__tab"
-        class:is-active={tab.id === active}
-        {...tabsCtl.tabProps(tab.id)}
-      >{tab.label}</button>
-    {/each}
+<div class="sv-tabs sv-tabs--{pos} sv-tabs--{orient} sv-tabs--{variant}" dir={resolvedDir}>
+  <div class="sv-tabs__strip">
+    {#if overflowing}
+      <button type="button" class="sv-tabs__scroll" tabindex="-1" aria-hidden="true" disabled={atStart} onclick={() => scrollBy(-1)}>
+        <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6" /></svg>
+      </button>
+    {/if}
+    <div bind:this={tablistEl} class="sv-tabs__list" bind:clientWidth={clientW} onscroll={(e) => (scrollLeft = e.currentTarget.scrollLeft)} {...tabsCtl.tablistProps()}>
+      {#each tabs as tab (tab.id)}
+        <span
+          class="sv-tabs__tabwrap"
+          class:is-active={tab.id === active}
+          class:is-closable={tab.closable}
+          class:is-drag={dragId === tab.id}
+          class:is-over={overId === tab.id}
+          role="presentation"
+          draggable={reorderable && !tab.disabled}
+          ondragstart={reorderable ? (e) => { dragId = tab.id; if (e.dataTransfer) e.dataTransfer.effectAllowed = 'move' } : undefined}
+          ondragover={reorderable ? (e) => { e.preventDefault(); overId = tab.id } : undefined}
+          ondragleave={reorderable ? () => { if (overId === tab.id) overId = null } : undefined}
+          ondrop={reorderable ? (e) => { e.preventDefault(); if (dragId) reorder(dragId, tab.id); dragId = null; overId = null } : undefined}
+          ondragend={reorderable ? () => { dragId = null; overId = null } : undefined}
+        >
+          <button type="button" class="sv-tabs__tab" class:is-active={tab.id === active} {...tabsCtl.tabProps(tab.id)}>{tab.label}</button>
+          {#if tab.closable}
+            <button type="button" class="sv-tabs__close" tabindex="-1" aria-label={`Close ${tab.label}`} onclick={(e) => { e.stopPropagation(); tabsCtl.close(tab.id) }}>
+              <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18" /></svg>
+            </button>
+          {/if}
+        </span>
+      {/each}
+    </div>
+    {#if overflowing}
+      <button type="button" class="sv-tabs__scroll" tabindex="-1" aria-hidden="true" disabled={atEnd} onclick={() => scrollBy(1)}>
+        <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6" /></svg>
+      </button>
+    {/if}
   </div>
   {#if panel}
     <div class="sv-tabs__panel" {...tabsCtl.panelProps(active)}>
@@ -80,30 +167,62 @@
 
 <style>
   .sv-tabs { --_accent: var(--sg-accent, #2563eb); display: flex; gap: 0; }
-  .sv-tabs--horizontal { flex-direction: column; }
-  .sv-tabs--vertical { flex-direction: row; }
+  .sv-tabs--top { flex-direction: column; }
+  .sv-tabs--bottom { flex-direction: column-reverse; }
+  .sv-tabs--left { flex-direction: row; }
+  .sv-tabs--right { flex-direction: row-reverse; }
+
+  .sv-tabs__strip { display: flex; align-items: center; min-width: 0; }
+  .sv-tabs--vertical .sv-tabs__strip { align-items: stretch; }
   .sv-tabs__list { display: flex; gap: 2px; }
-  .sv-tabs--horizontal .sv-tabs__list { border-bottom: 1px solid var(--sg-border, #e2e8f0); }
-  .sv-tabs--vertical .sv-tabs__list { flex-direction: column; border-right: 1px solid var(--sg-border, #e2e8f0); }
+  .sv-tabs--horizontal .sv-tabs__list { overflow-x: auto; flex: 1 1 auto; min-width: 0; scrollbar-width: none; scroll-behavior: smooth; }
+  .sv-tabs--horizontal .sv-tabs__list::-webkit-scrollbar { display: none; }
+  .sv-tabs--horizontal .sv-tabs__tabwrap { flex: none; }
+  .sv-tabs--vertical .sv-tabs__list { flex-direction: column; }
+  .sv-tabs__scroll {
+    flex: none; display: grid; place-items: center; width: 26px; align-self: stretch;
+    background: none; border: 0; color: var(--sg-muted, #64748b); cursor: pointer;
+  }
+  .sv-tabs__scroll:hover:not(:disabled) { color: var(--_accent); }
+  .sv-tabs__scroll:disabled { opacity: 0.3; cursor: default; }
+  /* Drag-reorder feedback */
+  .sv-tabs__tabwrap.is-drag { opacity: 0.4; }
+  .sv-tabs__tabwrap.is-over::before {
+    content: ''; position: absolute; inset-inline-start: -1px; top: 5px; bottom: 5px; width: 2px;
+    background: var(--_accent); border-radius: 2px;
+  }
+  .sv-tabs__tabwrap[draggable='true'] .sv-tabs__tab { cursor: grab; }
+  .sv-tabs--top .sv-tabs__list { border-bottom: 1px solid var(--sg-border, #e2e8f0); }
+  .sv-tabs--bottom .sv-tabs__list { border-top: 1px solid var(--sg-border, #e2e8f0); }
+  .sv-tabs--left .sv-tabs__list { border-inline-end: 1px solid var(--sg-border, #e2e8f0); }
+  .sv-tabs--right .sv-tabs__list { border-inline-start: 1px solid var(--sg-border, #e2e8f0); }
   .sv-tabs--pill .sv-tabs__list { border: 0; background: var(--sg-header-bg, #f1f5f9); padding: 3px; border-radius: 9px; gap: 3px; }
 
+  .sv-tabs__tabwrap { position: relative; display: inline-flex; align-items: center; }
   .sv-tabs__tab {
     background: none; border: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--sg-muted, #64748b);
-    padding: 9px 14px; cursor: pointer; white-space: nowrap; position: relative;
+    padding: 9px 14px; cursor: pointer; white-space: nowrap;
   }
+  .sv-tabs__tabwrap.is-closable .sv-tabs__tab { padding-inline-end: 4px; }
   .sv-tabs__tab:hover:not(:disabled):not(.is-active) { color: var(--sg-fg, #0f172a); }
   .sv-tabs__tab:disabled { opacity: 0.45; cursor: not-allowed; }
   .sv-tabs__tab:focus-visible { outline: 2px solid var(--sg-focus-ring, var(--_accent)); outline-offset: -2px; border-radius: 6px; }
 
-  .sv-tabs--line .sv-tabs__tab.is-active { color: var(--_accent); }
-  .sv-tabs--line .sv-tabs__tab.is-active::after {
-    content: ''; position: absolute; left: 8px; right: 8px; height: 2px; background: var(--_accent);
+  .sv-tabs__close {
+    display: grid; place-items: center; width: 18px; height: 18px; margin-inline-end: 8px; flex: none;
+    background: none; border: 0; color: var(--sg-muted, #64748b); cursor: pointer; border-radius: 4px;
   }
-  .sv-tabs--horizontal.sv-tabs--line .sv-tabs__tab.is-active::after { bottom: -1px; }
-  .sv-tabs--vertical.sv-tabs--line .sv-tabs__tab.is-active::after { top: 8px; bottom: 8px; left: auto; right: -1px; width: 2px; height: auto; }
+  .sv-tabs__close:hover { background: var(--sg-row-hover-bg, #f1f5f9); color: var(--sg-danger, #dc2626); }
+
+  .sv-tabs--line .sv-tabs__tab.is-active { color: var(--_accent); }
+  .sv-tabs--line .sv-tabs__tabwrap.is-active::after { content: ''; position: absolute; background: var(--_accent); }
+  .sv-tabs--line.sv-tabs--top .sv-tabs__tabwrap.is-active::after { left: 8px; right: 8px; height: 2px; bottom: -1px; }
+  .sv-tabs--line.sv-tabs--bottom .sv-tabs__tabwrap.is-active::after { left: 8px; right: 8px; height: 2px; top: -1px; }
+  .sv-tabs--line.sv-tabs--left .sv-tabs__tabwrap.is-active::after { top: 8px; bottom: 8px; width: 2px; inset-inline-end: -1px; }
+  .sv-tabs--line.sv-tabs--right .sv-tabs__tabwrap.is-active::after { top: 8px; bottom: 8px; width: 2px; inset-inline-start: -1px; }
 
   .sv-tabs--pill .sv-tabs__tab { border-radius: 7px; padding: 7px 14px; }
-  .sv-tabs--pill .sv-tabs__tab.is-active { background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a); box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
+  .sv-tabs--pill .sv-tabs__tabwrap.is-active .sv-tabs__tab, .sv-tabs--pill .sv-tabs__tab.is-active { background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a); box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
 
-  .sv-tabs__panel { padding: 16px 2px; outline: none; }
+  .sv-tabs__panel { padding: 16px 2px; outline: none; flex: 1; min-width: 0; }
 </style>

package/src/SvTagsInput.svelte

@@ -7,21 +7,47 @@
    * One styled renderer over the headless `createTagsInput` core (draft +
    * add/remove + keyboard).
    */
+  import SvField from './SvField.svelte'
+  import { nextEditorId, resolveMessages, type SvEditorProps } from './editor-contract'
   import { createTagsInput } from './createTagsInput.svelte'
 
-  type Props = {
+  /** User-facing strings (localizable via `messages`). */
+  type TagsMessages = { add: string; remove: string }
+  const DEFAULT_MESSAGES: TagsMessages = { add: 'Add tag', remove: 'Remove' }
+
+  type Props = SvEditorProps & {
     value?: string[]
     onChange?: (tags: string[]) => void
     placeholder?: string
-    disabled?: boolean
     /** Reject duplicate tags. Default true. */
     unique?: boolean
     max?: number
-    name?: string
-    ariaLabel?: string
+    /** Override the built-in strings (draft + remove aria-labels). */
+    messages?: Partial<TagsMessages>
   }
 
-  let { value = [], onChange, placeholder = 'Add tag…', disabled = false, unique = true, max = Infinity, name, ariaLabel }: Props = $props()
+  let {
+    value = [],
+    onChange,
+    placeholder = 'Add tag…',
+    disabled = false,
+    unique = true,
+    max = Infinity,
+    name,
+    ariaLabel,
+    invalid = false,
+    required = false,
+    error,
+    label,
+    hint,
+    dir,
+    id,
+    messages,
+  }: Props = $props()
+
+  const autoId = nextEditorId('sv-tags')
+  const uid = $derived(id ?? autoId)
+  const M = $derived(resolveMessages(DEFAULT_MESSAGES, messages))
 
   const ti = createTagsInput({
     value: () => value,
@@ -30,25 +56,34 @@
     unique: () => unique,
     max: () => max,
     ariaLabel: () => ariaLabel,
+    addLabel: () => M.add,
+    removeLabel: () => M.remove,
+    id: () => uid,
+    invalid: () => invalid,
+    required: () => required,
+    error: () => error,
+    hint: () => hint,
   })
 </script>
 
-<div class="sv-tags" class:is-disabled={disabled} {...ti.rootProps()}>
-  {#each value as tag, i (tag + i)}
-    <span class="sv-tags__chip" {...ti.tagProps(i)}>
-      <span class="sv-tags__label">{tag}</span>
-      {#if !disabled}
-        <button class="sv-tags__x" {...ti.removeProps(i)}>&times;</button>
-      {/if}
-    </span>
-  {/each}
-  <input
-    class="sv-tags__input"
-    placeholder={value.length ? '' : placeholder}
-    {...ti.inputProps()}
-  />
-  {#if name}<input type="hidden" {name} value={value.join(',')} />{/if}
-</div>
+<SvField id={uid} {label} {hint} {error} {required} {dir}>
+  <div class="sv-tags" 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>
+        {#if !disabled}
+          <button class="sv-tags__x" {...ti.removeProps(i)}>&times;</button>
+        {/if}
+      </span>
+    {/each}
+    <input
+      class="sv-tags__input"
+      placeholder={value.length ? '' : placeholder}
+      {...ti.inputProps()}
+    />
+    {#if name}<input type="hidden" {name} value={value.join(',')} />{/if}
+  </div>
+</SvField>
 
 <style>
   .sv-tags {
@@ -58,9 +93,11 @@
     border: 1px solid var(--sg-input-border, var(--sg-border, #cbd5e1)); border-radius: var(--sg-radius, 8px);
   }
   .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: 0 4px 0 8px;
+    display: inline-flex; align-items: center; gap: 4px; height: 22px; 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;
   }

package/src/SvTextArea.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+  /**
+   * SvTextArea - a multi-line text editor on the shared editor contract, with an
+   * optional auto-grow (the box height follows the content) and a character
+   * counter. Parity: Smart multiline input. As a grid cell editor: Escape
+   * cancels; Ctrl/Cmd+Enter commits (a bare Enter inserts a newline).
+   */
+  import SvField from './SvField.svelte'
+  import { editorAria, nextEditorId, type SvEditorProps } from './editor-contract'
+
+  type Props = SvEditorProps & {
+    value?: string
+    onChange?: (value: string) => void
+    onCommit?: (value: string) => void
+    onCancel?: () => void
+    placeholder?: string
+    rows?: number
+    maxlength?: number
+    /** Grow the box to fit content instead of scrolling. */
+    autoGrow?: boolean
+    /** Show a "n / max" character counter (needs `maxlength`). */
+    showCount?: boolean
+    autofocus?: boolean
+  }
+
+  let {
+    value = $bindable(''),
+    onChange,
+    onCommit,
+    onCancel,
+    placeholder,
+    disabled = false,
+    readonly = false,
+    rows = 3,
+    maxlength,
+    autoGrow = false,
+    showCount = false,
+    name,
+    size = 'md',
+    ariaLabel,
+    invalid = false,
+    required = false,
+    error,
+    label,
+    hint,
+    dir,
+    id,
+    autofocus = false,
+  }: Props = $props()
+
+  const autoId = nextEditorId('sv-textarea')
+  const uid = $derived(id ?? autoId)
+
+  function grow(node: HTMLTextAreaElement) {
+    if (!autoGrow) return
+    const resize = () => { node.style.height = 'auto'; node.style.height = `${node.scrollHeight}px` }
+    resize()
+    node.addEventListener('input', resize)
+    return { destroy: () => node.removeEventListener('input', resize) }
+  }
+  function mountFocus(node: HTMLTextAreaElement) {
+    if (autofocus) { node.focus(); node.select() }
+  }
+  function onInput(e: Event) {
+    const v = (e.currentTarget as HTMLTextAreaElement).value
+    value = v // enables bind:value
+    onChange?.(v)
+  }
+  function onKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') onCancel?.()
+    else if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) { e.preventDefault(); onCommit?.(value) }
+  }
+</script>
+
+<SvField id={uid} {label} {hint} {error} {required} {dir}>
+  <div class="sv-ta sv-ta--{size}" class:is-disabled={disabled}>
+    <textarea
+      use:grow
+      use:mountFocus
+      class="sv-ta__input"
+      class:is-invalid={invalid}
+      {value}
+      {placeholder}
+      {disabled}
+      {readonly}
+      {rows}
+      {maxlength}
+      oninput={onInput}
+      onkeydown={onKeydown}
+      {...editorAria({ id: uid, invalid, required, error, hint, ariaLabel })}
+    ></textarea>
+    {#if showCount && maxlength}
+      <span class="sv-ta__count" aria-hidden="true">{value.length} / {maxlength}</span>
+    {/if}
+    {#if name}<input type="hidden" {name} value={value} />{/if}
+  </div>
+</SvField>
+
+<style>
+  .sv-ta { --_accent: var(--sg-accent, #2563eb); display: inline-flex; flex-direction: column; gap: 3px; width: 260px; }
+  .sv-ta.is-disabled { opacity: 0.6; }
+  .sv-ta__input {
+    width: 100%; box-sizing: border-box; resize: vertical; font: inherit; padding: 8px 10px;
+    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); outline: none;
+  }
+  .sv-ta--sm .sv-ta__input { font-size: 12px; }
+  .sv-ta--md .sv-ta__input { font-size: 13px; }
+  .sv-ta--lg .sv-ta__input { font-size: 15px; }
+  .sv-ta__input:focus { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); }
+  .sv-ta__input.is-invalid { border-color: var(--sg-danger, #dc2626); }
+  .sv-ta__count { align-self: flex-end; font-size: 11px; color: var(--sg-muted, #64748b); }
+</style>