@svgrid/grid 1.2.34 → 2.0.1

package/dist/SvStat.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  /**
+   * SvStat - a KPI / metric card: a label, a big value, and an optional delta with
+   * an up/down trend (auto-coloured; green up / red down, or inverted for
+   * "lower is better" metrics), plus slots for an icon and an inline chart
+   * (e.g. a sparkline). Theme-driven. The dashboard building block.
+   *
+   * ```svelte
+   * <SvStat label="Revenue" value="$48.2k" delta={12.4} hint="vs last month" />
+   * ```
+   */
+  import type { Snippet } from 'svelte'
+
+  type Trend = 'up' | 'down' | 'flat'
+
+  type Props = {
+    label: string
+    value: string | number
+    /** A number (auto-signs + infers trend) or a preformatted string. */
+    delta?: string | number
+    /** Override the inferred trend. */
+    trend?: Trend
+    /** Text after the delta (e.g. "vs last month"). */
+    hint?: string
+    /** Treat a downward delta as good (green) - e.g. error rate, latency. */
+    invert?: boolean
+    icon?: Snippet
+    /** Inline chart / sparkline slot. */
+    chart?: Snippet
+  }
+
+  let { label, value, delta, trend, hint, invert = false, icon, chart }: Props = $props()
+
+  const resolvedTrend = $derived<Trend | undefined>(
+    trend ?? (typeof delta === 'number' ? (delta > 0 ? 'up' : delta < 0 ? 'down' : 'flat') : undefined),
+  )
+  const deltaText = $derived(
+    delta == null ? null : typeof delta === 'number' ? `${delta > 0 ? '+' : ''}${delta}%` : delta,
+  )
+  const arrow = $derived(resolvedTrend === 'up' ? '▲' : resolvedTrend === 'down' ? '▼' : '→')
+  // Which trend is "positive" (green): up, unless inverted.
+  const tone = $derived(
+    resolvedTrend === 'flat' || !resolvedTrend
+      ? 'flat'
+      : (resolvedTrend === 'up') !== invert
+        ? 'good'
+        : 'bad',
+  )
+</script>
+
+<div class="sv-stat">
+  <div class="sv-stat__head">
+    <span class="sv-stat__label">{label}</span>
+    {#if icon}<span class="sv-stat__icon" aria-hidden="true">{@render icon()}</span>{/if}
+  </div>
+  <div class="sv-stat__value">{value}</div>
+  {#if (deltaText != null) || hint || chart}
+    <div class="sv-stat__foot">
+      {#if deltaText != null && resolvedTrend}
+        <span class="sv-stat__delta is-{tone}"><span class="sv-stat__arrow" aria-hidden="true">{arrow}</span>{deltaText}</span>
+      {/if}
+      {#if hint}<span class="sv-stat__hint">{hint}</span>{/if}
+      {#if chart}<span class="sv-stat__chart">{@render chart()}</span>{/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .sv-stat {
+    display: flex; flex-direction: column; gap: 5px;
+    padding: 14px 16px; border: 1px solid var(--sg-border, #e2e8f0); border-radius: var(--sg-radius-lg, 12px);
+    background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a); min-width: 0;
+  }
+  .sv-stat__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+  .sv-stat__label { font-size: 12.5px; font-weight: 600; color: var(--sg-muted, #64748b); }
+  .sv-stat__icon { color: var(--sg-muted, #94a3b8); display: inline-flex; }
+  .sv-stat__value { font-size: 26px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
+  .sv-stat__foot { display: flex; align-items: center; gap: 8px; font-size: 12px; }
+  .sv-stat__delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 650; font-variant-numeric: tabular-nums; }
+  .sv-stat__arrow { font-size: 9px; }
+  .sv-stat__delta.is-good { color: var(--sg-success, #16a34a); }
+  .sv-stat__delta.is-bad { color: var(--sg-danger, #dc2626); }
+  .sv-stat__delta.is-flat { color: var(--sg-muted, #64748b); }
+  .sv-stat__hint { color: var(--sg-muted, #94a3b8); }
+  .sv-stat__chart { margin-inline-start: auto; }
+</style>

package/dist/SvStat.svelte.d.ts

@@ -0,0 +1,30 @@
+/**
+   * SvStat - a KPI / metric card: a label, a big value, and an optional delta with
+   * an up/down trend (auto-coloured; green up / red down, or inverted for
+   * "lower is better" metrics), plus slots for an icon and an inline chart
+   * (e.g. a sparkline). Theme-driven. The dashboard building block.
+   *
+   * ```svelte
+   * <SvStat label="Revenue" value="$48.2k" delta={12.4} hint="vs last month" />
+   * ```
+   */
+import type { Snippet } from 'svelte';
+type Trend = 'up' | 'down' | 'flat';
+type Props = {
+    label: string;
+    value: string | number;
+    /** A number (auto-signs + infers trend) or a preformatted string. */
+    delta?: string | number;
+    /** Override the inferred trend. */
+    trend?: Trend;
+    /** Text after the delta (e.g. "vs last month"). */
+    hint?: string;
+    /** Treat a downward delta as good (green) - e.g. error rate, latency. */
+    invert?: boolean;
+    icon?: Snippet;
+    /** Inline chart / sparkline slot. */
+    chart?: Snippet;
+};
+declare const SvStat: import("svelte").Component<Props, {}, "">;
+type SvStat = ReturnType<typeof SvStat>;
+export default SvStat;

package/dist/SvStepper.svelte

@@ -0,0 +1,91 @@
+<script lang="ts" module>
+  export type { StepItem } from './ui-app.types'
+</script>
+
+<script lang="ts">
+  /**
+   * SvStepper - a progress stepper for wizards/multi-step forms. Shows completed
+   * / active / upcoming steps horizontally or vertically. In `linear` mode only
+   * completed steps (and the active one) are clickable; otherwise any step is.
+   * Parity: Smart steps / wizard nav.
+   *
+   * ```svelte
+   * <SvStepper steps={steps} current={i} onChange={(n) => (i = n)} />
+   * ```
+   */
+  import type { StepItem } from './ui-app.types'
+
+  type Props = {
+    steps: ReadonlyArray<StepItem>
+    /** 0-based index of the active step. */
+    current: number
+    onChange?: (index: number) => void
+    /** Only allow navigating to already-reached steps. Default true. */
+    linear?: boolean
+    orientation?: 'horizontal' | 'vertical'
+  }
+
+  let { steps, current, onChange, linear = true, orientation = 'horizontal' }: Props = $props()
+
+  const statusOf = (i: number): 'complete' | 'active' | 'upcoming' =>
+    i < current ? 'complete' : i === current ? 'active' : 'upcoming'
+  const clickable = (i: number) => (linear ? i <= current : true)
+  const go = (i: number) => { if (clickable(i) && i !== current) onChange?.(i) }
+</script>
+
+<ol class="sv-step sv-step--{orientation}">
+  {#each steps as step, i (i)}
+    {@const status = statusOf(i)}
+    <li class="sv-step__item is-{status}" class:is-clickable={clickable(i)}>
+      <button
+        type="button"
+        class="sv-step__btn"
+        aria-current={status === 'active' ? 'step' : undefined}
+        disabled={!clickable(i)}
+        onclick={() => go(i)}
+      >
+        <span class="sv-step__marker" aria-hidden="true">
+          {#if status === 'complete'}✓{:else}{i + 1}{/if}
+        </span>
+        <span class="sv-step__text">
+          <span class="sv-step__label">{step.label}{#if step.optional}<span class="sv-step__optional"> (optional)</span>{/if}</span>
+          {#if step.description}<span class="sv-step__desc">{step.description}</span>{/if}
+        </span>
+      </button>
+      {#if i < steps.length - 1}<span class="sv-step__line" aria-hidden="true"></span>{/if}
+    </li>
+  {/each}
+</ol>
+
+<style>
+  .sv-step { --_accent: var(--sg-accent, #2563eb); list-style: none; margin: 0; padding: 0; display: flex; }
+  .sv-step--horizontal { flex-direction: row; align-items: flex-start; }
+  .sv-step--vertical { flex-direction: column; }
+  .sv-step__item { display: flex; position: relative; flex: 1; }
+  .sv-step--vertical .sv-step__item { flex-direction: column; }
+
+  .sv-step__btn {
+    display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 4px; margin: 0;
+    font: inherit; text-align: start; cursor: default; color: var(--sg-muted, #64748b);
+  }
+  .sv-step__item.is-clickable .sv-step__btn { cursor: pointer; }
+  .sv-step__marker {
+    flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
+    font-size: 13px; font-weight: 650;
+    background: var(--sg-row-hover-bg, #eef2f7); color: var(--sg-muted, #64748b);
+    border: 2px solid transparent; transition: background 0.15s, color 0.15s, border-color 0.15s;
+  }
+  .sv-step__item.is-active .sv-step__marker { background: var(--_accent); color: var(--sg-on-accent, #fff); }
+  .sv-step__item.is-complete .sv-step__marker { background: color-mix(in srgb, var(--_accent) 16%, transparent); color: var(--_accent); border-color: color-mix(in srgb, var(--_accent) 45%, transparent); }
+  .sv-step__item.is-active .sv-step__label, .sv-step__item.is-complete .sv-step__label { color: var(--sg-fg, #0f172a); }
+
+  .sv-step__text { display: flex; flex-direction: column; }
+  .sv-step__label { font-size: 13px; font-weight: 600; }
+  .sv-step__optional { font-weight: 400; color: var(--sg-muted, #94a3b8); font-size: 11.5px; }
+  .sv-step__desc { font-size: 11.5px; color: var(--sg-muted, #94a3b8); }
+
+  .sv-step__line { flex: 1; height: 2px; align-self: center; margin: 0 8px; background: var(--sg-border, #e2e8f0); }
+  .sv-step__item.is-complete .sv-step__line { background: color-mix(in srgb, var(--_accent) 45%, var(--sg-border, #e2e8f0)); }
+  .sv-step--vertical .sv-step__line { width: 2px; height: auto; min-height: 16px; margin: 4px 0 4px 17px; align-self: flex-start; }
+  .sv-step--vertical .sv-step__item { padding-bottom: 4px; }
+</style>

package/dist/SvStepper.svelte.d.ts

@@ -0,0 +1,24 @@
+export type { StepItem } from './ui-app.types';
+/**
+   * SvStepper - a progress stepper for wizards/multi-step forms. Shows completed
+   * / active / upcoming steps horizontally or vertically. In `linear` mode only
+   * completed steps (and the active one) are clickable; otherwise any step is.
+   * Parity: Smart steps / wizard nav.
+   *
+   * ```svelte
+   * <SvStepper steps={steps} current={i} onChange={(n) => (i = n)} />
+   * ```
+   */
+import type { StepItem } from './ui-app.types';
+type Props = {
+    steps: ReadonlyArray<StepItem>;
+    /** 0-based index of the active step. */
+    current: number;
+    onChange?: (index: number) => void;
+    /** Only allow navigating to already-reached steps. Default true. */
+    linear?: boolean;
+    orientation?: 'horizontal' | 'vertical';
+};
+declare const SvStepper: import("svelte").Component<Props, {}, "">;
+type SvStepper = ReturnType<typeof SvStepper>;
+export default SvStepper;

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

@@ -1,10 +1,7 @@
-type Props = {
+import { type SvEditorProps } from './editor-contract';
+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;

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

@@ -1,18 +1,25 @@
 export type { TabItem } from './createTabs.svelte';
 /**
-   * 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 { 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';
@@ -20,6 +27,11 @@ type Props = {
     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;
 };
 declare const SvTabs: import("svelte").Component<Props, {}, "value">;
 type SvTabs = ReturnType<typeof SvTabs>;