@spaethtech/svelte-ui 0.1.10 → 0.3.1-dev.3.e16df24

package/dist/components/Checkbox.svelte

@@ -0,0 +1,131 @@
+<!--
+/**
+ * Checkbox — a themed multi-state box (unchecked / checked / indeterminate). Use this, NOT a Toggle,
+ * for selection semantics: a row is / isn't selected, a rule does / doesn't apply, a filter is / isn't
+ * active. A real `<input type=checkbox>` drives it — laid INVISIBLY over the whole control, so clicking
+ * anywhere toggles it (naturally clickable + testable + accessible + form-friendly; `bind:checked`
+ * works, and `onchange` fires a real event). Honours the shared {@link Variant} (the "checked" colour)
+ * + {@link Size} axes.
+ *
+ * ALIGNMENT: same story as Toggle — the visible box is deliberately smaller than a text control, but
+ * the Checkbox occupies a wrapper sized to the standard control HEIGHT for its `size` (sm 24 / md 32 /
+ * lg 40px — same as Input), with the box centred inside. Drop it next to a `size`-matched Input/Select
+ * and everything lines up on the same baseline; the full-height wrapper is the click target while the
+ * box itself stays box-sized.
+ */
+-->
+<script lang="ts">
+  import type { HTMLInputAttributes } from "svelte/elements";
+  import type { Size } from "../types/sizes.js";
+  import { responsiveClasses, type Responsive } from "../types/responsive.js";
+  import { variantToken, type Variant } from "../types/variants.js";
+
+  let {
+    checked = $bindable(false),
+    indeterminate = false,
+    disabled = false,
+    size = "md",
+    variant = "primary",
+    class: cls = "",
+    ...rest
+  }: {
+    checked?: boolean;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    size?: Responsive<Size>;
+    /** The colour of the "checked" state (default primary). */
+    variant?: Variant;
+    class?: string;
+  } & Omit<HTMLInputAttributes, "size" | "type" | "class"> = $props();
+
+  // Per size: visible box dimension. Same scale as icons (14 / 16 / 20 px) so the box aligns with
+  // adjacent MDI icons at the matching size.
+  const dims: Record<Size, string> = {
+    sm: "size-3.5",
+    md: "size-4",
+    lg: "size-5",
+  };
+  const iconSize: Record<Size, string> = {
+    sm: "size-3",
+    md: "size-3.5",
+    lg: "size-4",
+  };
+  // Wrapper height matches Input's h-6/h-8/h-10 so the box centres on the same baseline as sibling
+  // controls at the same `size`.
+  const heightMap: Record<Size, string> = { sm: "h-6", md: "h-8", lg: "h-10" };
+  const heightClass = $derived(responsiveClasses(size, heightMap));
+  const boxSize = $derived(responsiveClasses(size, dims));
+  const iconSizeCls = $derived(responsiveClasses(size, iconSize));
+  const filled = $derived(checked || indeterminate);
+  const variantVar = $derived(`var(${variantToken[variant]})`);
+  const boxStyle = $derived(
+    filled
+      ? `background-color: ${variantVar}; border-color: ${variantVar};`
+      : `background-color: transparent; border-color: color-mix(in srgb, var(--ui-color-text) 40%, transparent);`,
+  );
+  // Mark colour = the INVERTED text colour (`--ui-color-background`) with a hint of the variant mixed
+  // in — ONE rule for every variant, both themes (matches the Toggle knob). Light: near-white on the
+  // fill; dark: flips dark, which reads on the dark theme's brighter accent fills. The 80% background
+  // keeps it contrasting even on a neutral (`--ui-color-text`) fill.
+  const markColor = $derived(
+    `color-mix(in srgb, var(--ui-color-background) 80%, var(${variantToken[variant]}))`,
+  );
+
+  let el = $state<HTMLInputElement>();
+  // `indeterminate` is a DOM property, not an attribute — sync it imperatively so the real
+  // checkbox reports the tri-state to a11y and form serialization.
+  $effect(() => {
+    if (el) el.indeterminate = indeterminate;
+  });
+</script>
+
+<label
+  class="relative inline-flex shrink-0 items-center justify-center {heightClass} {disabled
+    ? 'cursor-not-allowed opacity-50'
+    : 'cursor-pointer'} {cls}"
+>
+  <!-- Real checkbox — invisible, covering the whole control so a click anywhere toggles it and
+	     keyboard/focus/screen-reader behavior is native. -->
+  <input
+    bind:this={el}
+    type="checkbox"
+    bind:checked
+    {disabled}
+    class="peer absolute inset-0 z-10 m-0 cursor-pointer opacity-0 disabled:cursor-not-allowed"
+    {...rest}
+  />
+  <span
+    class="relative inline-flex items-center justify-center rounded-[3px] border transition-colors duration-150 peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:[outline-color:var(--ui-color-primary)] {boxSize}"
+    style={boxStyle}
+  >
+    {#if indeterminate}
+      <!-- Dash for indeterminate — mid-line, contrasting mark on the filled background. -->
+      <svg
+        viewBox="0 0 16 16"
+        class={iconSizeCls}
+        style="color: {markColor}"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2.5"
+        stroke-linecap="round"
+      >
+        <line x1="4" y1="8" x2="12" y2="8" />
+      </svg>
+    {:else if checked}
+      <!-- Checkmark — sits inside the filled box. Stroke uses currentColor; `markColor` picks white
+			     on accent fills, the background colour on neutral/ghost (which are text-coloured). -->
+      <svg
+        viewBox="0 0 16 16"
+        class={iconSizeCls}
+        style="color: {markColor}"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <polyline points="3.5,8.5 6.5,11.5 12.5,5" />
+      </svg>
+    {/if}
+  </span>
+</label>

package/dist/components/Checkbox.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { HTMLInputAttributes } from "svelte/elements";
+import type { Size } from "../types/sizes.js";
+import { type Responsive } from "../types/responsive.js";
+import { type Variant } from "../types/variants.js";
+type $$ComponentProps = {
+    checked?: boolean;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    size?: Responsive<Size>;
+    /** The colour of the "checked" state (default primary). */
+    variant?: Variant;
+    class?: string;
+} & Omit<HTMLInputAttributes, "size" | "type" | "class">;
+declare const Checkbox: import("svelte").Component<$$ComponentProps, {}, "checked">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;

package/dist/components/DataTable.svelte

@@ -0,0 +1,518 @@
+<!--
+/**
+ * DataTable — config-driven, responsive 12-col data table over a DataGrid (svelte-ui/data).
+ * Selectable rows, expandable rows, per-row + bulk action menus, sortable headers, paginated footer.
+ * Styled on the svelte-ui theme; menus use the Popup/Menu primitives (top layer, flip vs viewport).
+ *
+ * Compound component: every control is built from our own core components — icon controls and
+ * pagination use <Button variant="ghost" size="sm">, per-page uses <Select size="sm">. No raw
+ * <button>/<select> (see CLAUDE.md "compound components").
+ */
+-->
+<script lang="ts" generics="T">
+  import type { Snippet } from "svelte";
+  import IconDots from "~icons/mdi/dots-vertical";
+  import IconBulk from "~icons/mdi/format-list-checks";
+  import IconSortAsc from "~icons/mdi/sort-ascending";
+  import IconSortDesc from "~icons/mdi/sort-descending";
+  import IconSortNone from "~icons/mdi/sort";
+  import IconChevronRight from "~icons/mdi/chevron-right";
+  import IconChevronDown from "~icons/mdi/chevron-down";
+  import IconChevronUp from "~icons/mdi/chevron-up";
+  import IconExpandAll from "~icons/mdi/chevron-double-right";
+  import IconCollapseAll from "~icons/mdi/chevron-double-down";
+  import IconLoading from "~icons/mdi/loading";
+  import IconFirst from "~icons/mdi/page-first";
+  import IconPrev from "~icons/mdi/chevron-left";
+  import IconNext from "~icons/mdi/chevron-right";
+  import IconLast from "~icons/mdi/page-last";
+  import Button from "./Button.svelte";
+  import Select from "./Select.svelte";
+  import Checkbox from "./Checkbox.svelte";
+  import Menu from "./Menu.svelte";
+  import type { Column, GridPlacement, MenuItem, DataGrid } from "../data/table/index.js";
+  import type { Size } from "../types/sizes.js";
+  import { resolveScalar, type Responsive } from "../types/responsive.js";
+  import { variantToken, type Variant } from "../types/variants.js";
+
+  let {
+    grid,
+    selectable = false,
+    expandable = false,
+    reorderable = false,
+    expanded,
+    rowActions,
+    bulkActions,
+    onReorder,
+    size = "md",
+    truncate = true,
+    borderless = false,
+    variant,
+  }: {
+    grid: DataGrid<T>;
+    selectable?: boolean;
+    expandable?: boolean;
+    /** When true, each row gets up/down chevron buttons in the lead
+     *  column and fires `onReorder(row, 'up'|'down')` when clicked.
+     *  The consumer owns the actual swap (typically updating the
+     *  `sortOrder` field of two rows). Buttons auto-disable at the
+     *  ends of the visible page — with server pagination, this
+     *  reorders WITHIN the visible page only. */
+    reorderable?: boolean;
+    expanded?: Snippet<[T]>;
+    rowActions?: (row: T) => MenuItem[];
+    bulkActions?: (selected: ReadonlySet<string>) => MenuItem[];
+    onReorder?: (row: T, direction: "up" | "down") => void;
+    /** Overall density tier. Scales the whole table uniformly:
+     *  font-size (--ui-text-*), row/footer padding, inter-column
+     *  gap, lead/tail control squares (--ui-height-*), and
+     *  propagates to every inner Button / Checkbox / Select.
+     *  Header text inherits the outer font-size — no separate
+     *  axis. Default `'md'` matches the rest of svelte-ui. */
+    size?: Responsive<Size>;
+    /** Every header + body cell wrapper gets Tailwind's `truncate`
+     *  (white-space:nowrap, overflow:hidden, text-overflow:ellipsis).
+     *  Simple text cells render with ellipsis automatically. Compound
+     *  cells (inline-flex wrappers, badges, buttons) clip at the
+     *  right edge — to also get ellipsis on the inner text, the
+     *  snippet's text span needs its own `truncate` class.
+     *
+     *  Defaults to `true` — the "wrong" default is columns visually
+     *  bleeding into their neighbours when a value doesn't fit its
+     *  configured span. Pass `truncate={false}` if the consumer
+     *  wants wrap-on-overflow (rare — usually you'd fix the span
+     *  allocation instead). */
+    truncate?: boolean;
+    /** Drop the visible frame while keeping each section's 1px box: every section's border colour
+     *  becomes its own background, so it vanishes per-section on a matching surface. Defaults `false`. */
+    borderless?: boolean;
+    /** Tints the whole table's interactive/section surfaces (row hover,
+     *  header/footer bands) with a semantic colour instead of the neutral
+     *  default. Points --ui-accent at the variant's token and re-mixes the
+     *  --ui-color-hover/surface/active tints via the `.ui-accent` class.
+     *  `ghost` additionally drops ALL section fills (bands + body) for a bare,
+     *  see-through table. Omit for the default grey tint. */
+    variant?: Variant;
+  } = $props();
+
+  /** When a variant is set, override --ui-accent so the shared interactive
+   *  tints re-mix from that colour (the `.ui-accent` class on the root does
+   *  the actual re-mix). Neutral (text) default when unset. */
+  const accentVar = $derived(variant ? `--ui-accent: var(${variantToken[variant]});` : "");
+
+  /** Font size for the WHOLE table. Applied as `font-size` on the
+   *  outer container; every descendant inherits via standard CSS
+   *  cascade — headers, cells, footer text all follow. */
+  // DataTable's own density is set via inline-style CSS vars + cell padding that already bakes in its
+  // own `md:` responsive step — neither can be re-prefixed per size tier. So the TABLE'S density keys
+  // off the base tier of a responsive `size` (via resolveScalar); the responsive `size` is still passed
+  // through to child controls (Button/Select/Checkbox), which DO resize at every breakpoint.
+  const sSize = $derived(resolveScalar(size, "md"));
+  const textVar = $derived(
+    sSize === "lg" ? "var(--ui-text-lg)" : sSize === "md" ? "var(--ui-text)" : "var(--ui-text-sm)",
+  );
+  /** Control height for the icon-only Button squares in lead/tail
+   *  columns AND the row minimum height. Matches Button/Checkbox
+   *  defaults at each size (sm=24px, md=32px, lg=40px). */
+  const heightVar = $derived(
+    sSize === "lg"
+      ? "var(--ui-height-lg)"
+      : sSize === "md"
+        ? "var(--ui-height)"
+        : "var(--ui-height-sm)",
+  );
+  /** Cell padding scales with size. Mobile-first: base padding is
+   *  tight; the md: variant applies at ≥ 768px so tables feel
+   *  chunkier on desktop but stay dense on phones. */
+  const cellPad = $derived(
+    sSize === "lg"
+      ? "py-3 px-4 md:py-4 md:px-5"
+      : sSize === "md"
+        ? "py-2 px-3 md:py-3 md:px-4"
+        : "py-1 px-2 md:py-2 md:px-3",
+  );
+  /** Inter-column gap. Tracks the same size axis so lead/cell/tail
+   *  spacing stays proportional to cell padding. */
+  const cellGap = $derived(sSize === "lg" ? "gap-3" : sSize === "md" ? "gap-2" : "gap-1");
+
+  const columns = $derived(grid.columns);
+  const hasLead = $derived(selectable || expandable || reorderable);
+  const hasTail = $derived(!!rowActions || !!bulkActions);
+
+  // Server-controlled fetch (a reactive query); mirror into the grid for selection/expansion logic.
+  const result = $derived(grid.fetch(grid.request));
+  const rows = $derived(result.current?.rows ?? grid.rows);
+  const total = $derived(result.current?.total ?? grid.total);
+  const pageCount = $derived(Math.max(1, Math.ceil(total / grid.perPage)));
+  // "Settled" = a result came back AND we're not fetching — only then is empty genuinely "No results".
+  const settled = $derived(!!result.current && !result.loading);
+  $effect(() => {
+    grid.loading = result.loading;
+    if (result.current) {
+      grid.rows = result.current.rows;
+      grid.total = result.current.total;
+    }
+  });
+
+  const sortKeyOf = (c: Column<T>) => c.sortKey ?? c.id;
+
+  function placement(bp: string, p: GridPlacement): string {
+    const prefix = bp === "base" ? "" : `${bp}:`;
+    const out: string[] = [];
+    if (p.hidden) out.push(`${prefix}hidden`);
+    else if (bp !== "base") out.push(`${prefix}block`);
+    if (p.span) out.push(`${prefix}col-span-${p.span}`);
+    if (p.start) out.push(`${prefix}col-start-${p.start}`);
+    if (p.row) out.push(`${prefix}row-start-${p.row}`);
+    return out.join(" ");
+  }
+  function cellClasses(col: Column<T>): string {
+    const bps = col.breakpoints ?? { base: { span: 12 } };
+    return Object.entries(bps)
+      .map(([bp, p]) => placement(bp, p))
+      .join(" ");
+  }
+  const alignClass = (col: Column<T>) =>
+    col.align === "end"
+      ? "justify-end text-end"
+      : col.align === "center"
+        ? "justify-center text-center"
+        : "justify-start text-start";
+
+  function rowClick(e: MouseEvent, id: string) {
+    if (!expandable) return;
+    const el = e.target as HTMLElement;
+    if (el.closest('a, button, input, select, textarea, label, [role="button"]')) return;
+    grid.toggleExpand(id);
+  }
+
+  // One shared Menu instance, anchored to whichever kebab/bulk button opened it.
+  let menuAnchor = $state<HTMLElement>();
+  let menuItems = $state<MenuItem[]>([]);
+  let menuOpen = $state(false);
+  function openMenu(e: MouseEvent, items: MenuItem[]) {
+    menuAnchor = e.currentTarget as HTMLElement;
+    menuItems = items;
+    menuOpen = true;
+  }
+
+  const rangeText = $derived(
+    total === 0
+      ? "0 of 0"
+      : `${(grid.page - 1) * grid.perPage + 1}–${Math.min(grid.page * grid.perPage, total)} of ${total}`,
+  );
+
+  // Invisible icon-slot sizing for the empty-state spacer. Sized to
+  // heightVar via inline style at each use site (kept as a snippet
+  // of class + style below).
+  const spacerClass =
+    "inline-flex shrink-0 items-center justify-center [&_svg]:w-[1em] [&_svg]:h-[1em]";
+  const subtle = "[color:color-mix(in_srgb,var(--ui-color-text)_60%,transparent)]";
+  // Per-section borders: header, body, and footer each keep a FULL 1px border box, so the table height
+  // is fixed no matter the variant/borderless (nothing is ever added or removed — only colours change).
+  // Non-borderless → the standard tint calc (secondary @ --ui-tint-border); borderless → the section's
+  // own background, so it vanishes per-section on a matching surface (fixes the white-frame-on-a-coloured-
+  // surface bug). To avoid DOUBLING the horizontal separators, the body's top/bottom borders match its
+  // own background whenever the neighbouring header/footer is present (always, today) — so the header's
+  // bottom border and the footer's top border are the only horizontal lines; the body owns left/right.
+  // (If a header-less / footer-less mode is ever added, flip that edge to `bodyBorder` + round the corner.)
+  // `ghost` makes every section transparent (bands AND body) for a bare, see-through table.
+  const sectionBorder =
+    "color-mix(in srgb, var(--ui-color-secondary) var(--ui-tint-border), transparent)";
+  const bandBg = $derived(variant === "ghost" ? "transparent" : "var(--ui-color-surface)");
+  const bodyBg = $derived(variant === "ghost" ? "transparent" : "var(--ui-color-background)");
+  const bandBorder = $derived(borderless ? bandBg : sectionBorder); // header + footer, all 4 sides
+  const bodyBorder = $derived(borderless ? bodyBg : sectionBorder); // body left/right (top/bottom = bodyBg)
+</script>
+
+<div
+  role="table"
+  class="ui-accent relative [color:var(--ui-color-text)]"
+  style="font-size: {textVar}; {accentVar}"
+>
+  <!-- Header. Font size inherits from the outer container; weight,
+	     transform, and colour are library defaults (semibold, uppercase,
+	     text token). Background is --ui-color-surface — the shared section
+	     tint (a notch darker than the row-hover token), so header + footer
+	     read as bands framing the interactive rows. -->
+  <div
+    role="row"
+    class="flex items-center font-semibold uppercase border
+			{cellGap} {cellPad}
+			[border-top-left-radius:var(--ui-border-radius)] [border-top-right-radius:var(--ui-border-radius)]
+			[color:var(--ui-color-text)]"
+    style="border-color: {bandBorder}; background-color: {bandBg}"
+  >
+    {#if hasLead}
+      <div class="flex shrink-0 items-center gap-1">
+        {#if selectable}
+          <Checkbox
+            {size}
+            aria-label="Select all"
+            checked={grid.allSelected}
+            indeterminate={grid.someSelected}
+            onchange={() => grid.toggleAll()}
+          />
+        {/if}
+        {#if expandable}
+          <Button
+            variant="ghost"
+            {size}
+            aria-label={grid.allExpanded ? "Collapse all" : "Expand all"}
+            title={grid.allExpanded ? "Collapse all" : "Expand all"}
+            onclick={() => grid.toggleExpandAll()}
+          >
+            {#snippet icon()}{#if grid.allExpanded}<IconCollapseAll />{:else}<IconExpandAll
+                />{/if}{/snippet}
+          </Button>
+        {/if}
+        {#if reorderable}
+          <!-- Placeholder pair to match the body-row column so header + body align. -->
+          <span
+            class={spacerClass}
+            style="width: {heightVar}; height: {heightVar}"
+            aria-hidden="true"
+          ></span>
+          <span
+            class={spacerClass}
+            style="width: {heightVar}; height: {heightVar}"
+            aria-hidden="true"
+          ></span>
+        {/if}
+      </div>
+    {/if}
+
+    <div class="grid grow grid-cols-12 items-center {cellGap}">
+      {#each columns as col (col.id)}
+        <div
+          role="columnheader"
+          class="{cellClasses(col)} flex min-w-0 items-center {alignClass(col)} {truncate
+            ? 'truncate'
+            : ''}"
+        >
+          {#if col.sortable}
+            <Button
+              variant="ghost"
+              {size}
+              class="!px-0 [font-size:inherit]"
+              onclick={() => grid.toggleSort(sortKeyOf(col))}
+            >
+              <span>{col.header ?? col.id}</span>
+              {#if grid.sort?.col === sortKeyOf(col)}
+                {#if grid.sort.dir === "asc"}<IconSortAsc
+                    class="w-[1em] h-[1em]"
+                  />{:else}<IconSortDesc class="w-[1em] h-[1em]" />{/if}
+              {:else}
+                <IconSortNone class="w-[1em] h-[1em] opacity-40" />
+              {/if}
+            </Button>
+          {:else}
+            <span>{col.header ?? col.id}</span>
+          {/if}
+        </div>
+      {/each}
+    </div>
+
+    {#if hasTail}
+      <div class="flex shrink-0 items-center justify-end" style="width: {heightVar}">
+        {#if bulkActions && selectable}
+          <Button
+            variant="ghost"
+            {size}
+            aria-label="Bulk actions"
+            title="Bulk actions"
+            disabled={grid.selected.size === 0}
+            onclick={(e) => openMenu(e, bulkActions(grid.selected))}
+          >
+            {#snippet icon()}<IconBulk />{/snippet}
+          </Button>
+        {/if}
+      </div>
+    {/if}
+  </div>
+
+  <!-- Body — its own full 1px border box (fixed height). Top/bottom match the body bg so they don't
+	     double the header's bottom / footer's top border; left/right carry the real border colour. -->
+  <div
+    class="border"
+    style="border-color: {bodyBg}; border-left-color: {bodyBorder}; border-right-color: {bodyBorder}; background-color: {bodyBg}"
+  >
+    {#if rows.length === 0}
+      <div class="flex items-center {cellGap} {cellPad}" style="min-height: {heightVar}">
+        {#if hasLead}
+          <div class="invisible flex shrink-0 items-center gap-1" aria-hidden="true">
+            {#if selectable}<Checkbox {size} tabindex={-1} />{/if}
+            {#if expandable}<span
+                class={spacerClass}
+                style="width: {heightVar}; height: {heightVar}"><IconChevronRight /></span
+              >{/if}
+            {#if reorderable}
+              <span class={spacerClass} style="width: {heightVar}; height: {heightVar}"></span>
+              <span class={spacerClass} style="width: {heightVar}; height: {heightVar}"></span>
+            {/if}
+          </div>
+        {/if}
+        <div class="grow self-center text-center {subtle}">
+          {#if settled}
+            No results.
+          {:else}
+            <span class="inline-flex items-center gap-2"
+              ><IconLoading class="w-[1em] h-[1em] animate-spin" /> Loading…</span
+            >
+          {/if}
+        </div>
+        {#if hasTail}<div
+            class="invisible flex shrink-0 items-center"
+            style="width: {heightVar}"
+            aria-hidden="true"
+          ></div>{/if}
+      </div>
+    {:else}
+      {#each rows as row, rowIndex (grid.getRowId(row))}
+        {@const id = grid.getRowId(row)}
+        <!-- Row + its expand panel form one hover group, so they always share the SAME background
+			     (transparent by default; both take the hover tint together). -->
+        <div class="group">
+          <div
+            role="row"
+            class="flex items-center {cellGap} {cellPad} group-hover:[background-color:var(--ui-color-hover)]"
+            style="min-height: {heightVar}"
+          >
+            {#if hasLead}
+              <div class="flex shrink-0 items-center gap-1">
+                {#if selectable}
+                  <Checkbox
+                    {size}
+                    aria-label="Select row"
+                    checked={grid.isSelected(id)}
+                    onchange={() => grid.toggleRow(id)}
+                  />
+                {/if}
+                {#if expandable}
+                  <Button
+                    variant="ghost"
+                    {size}
+                    aria-label={grid.isExpanded(id) ? "Collapse" : "Expand"}
+                    title={grid.isExpanded(id) ? "Collapse" : "Expand"}
+                    onclick={() => grid.toggleExpand(id)}
+                  >
+                    {#snippet icon()}{#if grid.isExpanded(id)}<IconChevronDown
+                        />{:else}<IconChevronRight />{/if}{/snippet}
+                  </Button>
+                {/if}
+                {#if reorderable}
+                  <Button
+                    variant="ghost"
+                    {size}
+                    aria-label="Move up"
+                    title="Move up"
+                    disabled={rowIndex === 0}
+                    onclick={() => onReorder?.(row, "up")}
+                  >
+                    {#snippet icon()}<IconChevronUp />{/snippet}
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    {size}
+                    aria-label="Move down"
+                    title="Move down"
+                    disabled={rowIndex === rows.length - 1}
+                    onclick={() => onReorder?.(row, "down")}
+                  >
+                    {#snippet icon()}<IconChevronDown />{/snippet}
+                  </Button>
+                {/if}
+              </div>
+            {/if}
+
+            <!-- svelte-ignore a11y_click_events_have_key_events -->
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
+            <div
+              class="grid grow grid-cols-12 items-center {cellGap} {expandable
+                ? 'cursor-pointer'
+                : ''}"
+              onclick={(e) => rowClick(e, id)}
+            >
+              {#each columns as col (col.id)}
+                <div
+                  role="cell"
+                  class="{cellClasses(col)} flex min-w-0 items-center {alignClass(col)} {truncate
+                    ? 'truncate'
+                    : ''}"
+                >
+                  {@render col.cell(row)}
+                </div>
+              {/each}
+            </div>
+
+            {#if hasTail}
+              <div class="flex shrink-0 items-center justify-end" style="width: {heightVar}">
+                {#if rowActions}
+                  <Button
+                    variant="ghost"
+                    {size}
+                    aria-label="Row actions"
+                    title="Row actions"
+                    onclick={(e) => openMenu(e, rowActions(row))}
+                  >
+                    {#snippet icon()}<IconDots />{/snippet}
+                  </Button>
+                {/if}
+              </div>
+            {/if}
+          </div>
+
+          {#if expandable && expanded && grid.isExpanded(id)}
+            <div class="{cellPad} group-hover:[background-color:var(--ui-color-hover)]">
+              {@render expanded(row)}
+            </div>
+          {/if}
+        </div>
+      {/each}
+    {/if}
+  </div>
+
+  <!-- Footer — its own full 1px border box (matches the header); rounds the bottom corners. Its top
+	     border is the separator above it. Inherits font-size from the outer container. -->
+  <div
+    class="flex flex-wrap items-center justify-between border {cellGap} {cellPad}
+			[border-bottom-left-radius:var(--ui-border-radius)] [border-bottom-right-radius:var(--ui-border-radius)]"
+    style="border-color: {bandBorder}; background-color: {bandBg}"
+  >
+    <div class="flex items-center gap-2">
+      <Select
+        class="w-20"
+        {size}
+        value={String(grid.perPage)}
+        options={grid.perPageOptions.map((n) => ({ value: String(n), label: String(n) }))}
+        onSelection={(o) => grid.setPerPage(Number(o.value))}
+      />
+      <span class={subtle}>per page</span>
+    </div>
+
+    <div class="flex items-center gap-3">
+      <span class={subtle}>{rangeText}</span>
+      <div class="inline-flex items-center gap-0.5">
+        {#snippet pageBtn(Icon: typeof IconFirst, to: number, disabled: boolean, aria: string)}
+          <Button
+            variant="ghost"
+            {size}
+            {disabled}
+            aria-label={aria}
+            title={aria}
+            onclick={() => grid.setPage(to)}
+          >
+            {#snippet icon()}<Icon />{/snippet}
+          </Button>
+        {/snippet}
+        {@render pageBtn(IconFirst, 1, grid.page <= 1, "First")}
+        {@render pageBtn(IconPrev, grid.page - 1, grid.page <= 1, "Previous")}
+        <span class="px-2 {subtle}">{grid.page} / {pageCount}</span>
+        {@render pageBtn(IconNext, grid.page + 1, grid.page >= pageCount, "Next")}
+        {@render pageBtn(IconLast, pageCount, grid.page >= pageCount, "Last")}
+      </div>
+    </div>
+  </div>
+</div>
+
+<Menu bind:open={menuOpen} anchor={menuAnchor} items={menuItems} side="bottom" align="end" />