@spaethtech/svelte-ui 0.15.1-dev.67.fbf3875 → 0.15.1-dev.71.e357f8b

package/.claude/skills/svelte-ui/SKILL.md

@@ -152,8 +152,9 @@ Mount `<Toaster />` once at the app root, then push from anywhere with `toast.su
 All from `@spaethtech/svelte-ui` (see the shipped `docs/components.md` + `docs/usage.md` for props +
 examples):
 
-- **Form:** `Button` `ButtonDropdown` `Input` `Select` `Combobox` `Slider` `List` `TextArea` `Checkbox`
-  `Toggle` `Radio` `Rating` · **`Combobox`** (free-text autocomplete — arbitrary value + suggestions,
+- **Form:** `Button` `ButtonGroup` `Input` `Select` `Combobox` `Slider` `List` `TextArea` `Checkbox`
+  `Toggle` `Radio` `Rating` (display `average`/`count`, OR `interactive` + `bind:value` star picker
+  with `allowHalf`, click/hover/arrow-keys) · **`Combobox`** (free-text autocomplete — arbitrary value + suggestions,
   client `options` or async `suggest`; vs `Select` which is a closed choice. Composes Input + Popup.) ·
   **`TokenInput`** (multi-value entry — Enter/comma adds a removable `Chip` token, Backspace-on-empty
   removes; `bind:values`, `max`, `allowDuplicates`; FieldChrome.) · **`FileUpload`** (drag-drop + click
@@ -162,21 +163,25 @@ examples):
   `showValue`/`format`; FieldChrome + `variant`/`size`; keyboard + `role="slider"`) · **`FieldGroup`**
   (fieldset wrapper for radio/checkbox/toggle sets) · **`ButtonGroup`**
   (joined row/`col` of `<Button>`s as one unit — an action toolbar or a **controlled** segmented
-  selector; `items` of `ButtonGroupItem` {`value`,`text`,`icon`,`variant`,`disabled`,`menu`,`onclick`}
-  or a presentational default slot; `select` `'none'|'single'|'multi'` with `bind:value`/`bind:values`;
-  selected = variant-swap to filled, unselected = `ghost`; the group owns the frame; an item `menu`
-  (`MenuItem[]`) makes a split-button. Not a form field — for legend/`name`/submit use `FieldGroup`;
-  for view switching use `TabStrip`.)
+  selector; `items` of `ButtonGroupItem` {`value`,`text`,`icon`,`variant`,`disabled`,`loading`,`href`/
+  `target`,`menu`,`menuOnly`,`onclick`} or a presentational default slot; `select`
+  `'none'|'single'|'multi'` with `bind:value`/`bind:values`; selected = variant-swap to filled,
+  unselected = `ghost`; the group owns the frame. An item `menu` (`MenuItem[]`) makes a **split
+  button** (action + caret); add `menuOnly` for a caret-only **menu-trigger** cell (e.g. an
+  `[action][▾]` pair = a plain item + a `menuOnly` item). This replaces the old `ButtonDropdown`. Not
+  a form field — for legend/`name`/submit use `FieldGroup`; for view switching use `TabStrip`.)
 - **Specialized inputs:** `PasswordInput` `EmailInput` `SearchInput` `NumberInput` (formatting +
   `percent`/`stepper`/`clamp`/`liveFormat`) `PhoneInput` (stores E.164; dep-free, inject
   `parse`/`format` for per-country)
-- **Date / time:** `DatePicker` `Calendar` `TimePicker` `TimeSpinner` `TimeRangeInput` `DateTimeInput`
-  · **`DateRangePicker`** (start–end range + presets rail; `bind:start`/`bind:end` ISO; composes
-  `Calendar mode="range"` + `Input` + `Popup`. `DatePicker range` is the bare, preset-less variant.)
+- **Date / time:** `DatePicker` `Calendar` `TimePicker` `TimeSpinner` `TimeRangeInput` `DateTimeInput`.
+  For a start–end range use **`DatePicker range`** (`bind:value` = `{ start, end }`) — it composes
+  `Calendar mode="range"`.
 - **Data:** `DataTable` `Query` — driven by the headless layer at **`@spaethtech/svelte-ui/data`**
   (query-language parser/AST, `createGrid`, `DataGrid<T>`, `DataSet`). · **`Pagination`** (standalone
-  pager: numbered buttons + ellipsis, prev/next/first/last, `bind:page`/`bind:perPage`, `total`,
-  `perPageOptions`, `showTotal`; built from `Button`+`Select` — the reusable DataTable footer pager).
+  pager styled like the DataTable footer: tinted band, per-page `Select`, range total, and a
+  `First·Prev·[page]/N·Next·Last` stepper whose indicator is an editable `NumberInput` quick-jump;
+  `bind:page`/`bind:perPage`, `total`, `perPageOptions`, `showEdges`/`showTotal`, `borderless`;
+  `variant` tints band+hover only; built from `Button`+`Select`+`NumberInput`).
 - **Overlays:** `Dialog` (pure modal shell — BYO content; `width`/`height` take any CSS value;
   `onShow(ctx)`/`onHide(ctx)` control focus — set `ctx.autoFocus` to a selector/element/`false`,
   `ctx.restoreFocus` likewise) · `ConfirmDialog` (title + message + Confirm/Cancel, built on Dialog)

package/dist/components/ButtonGroup/ButtonGroup.svelte

@@ -28,10 +28,20 @@
     /** Icon slot — a consumer-rendered component (e.g. `~icons/mdi/*`), like `Button`'s `icon`. */
     icon?: Snippet;
     disabled?: boolean;
+    /** Show a spinner in place of the icon (forwarded to `Button`). */
+    loading?: boolean;
     /** Per-item colour override; otherwise the group `variant`. */
     variant?: Variant;
-    /** Split-button dropdown: a trailing caret opens a `Menu` with these items. */
+    /** Anchor mode — the item renders as a link (forwarded to `Button`). */
+    href?: string;
+    target?: string;
+    /** A `Menu` opened from this item. By default the item becomes a **split button** (its own action
+     *  + a trailing caret that opens the menu). With `menuOnly`, the whole item is the menu trigger
+     *  (no split, no caret) — the click opens the menu. Use a `menuOnly` item as the chevron half of a
+     *  hand-built [action][▾] pair. */
     menu?: MenuItem[];
+    /** Make `menu` open on the item's own click, with no split caret (menu-trigger mode). */
+    menuOnly?: boolean;
     /** Action-mode click. Fires in `select="none"`; in selection modes it runs after the select. */
     onclick?: (e: MouseEvent) => void;
   };
@@ -179,7 +189,22 @@
 <div role={groupRole} class={frameClass} onkeydown={onKeydown}>
   {#if items}
     {#each items as item, i (item.value ?? item.text ?? i)}
-      {#if item.menu}
+      {#if item.menu && item.menuOnly}
+        <!-- Menu-trigger cell: the whole button opens the Menu on click (no split, no extra caret).
+             A bare item (no icon/text) defaults to a chevron so an [action][▾] pair needs no boilerplate. -->
+        <Button
+          icon={item.icon ?? (item.text ? undefined : caretIcon)}
+          text={item.text}
+          variant={variantFor(item)}
+          {size}
+          disabled={disabled || item.disabled}
+          loading={item.loading}
+          aria-haspopup="menu"
+          aria-expanded={!!menuOpen[i]}
+          bind:element={caretRefs[i]}
+          onclick={() => (menuOpen[i] = !menuOpen[i])}
+        />
+      {:else if item.menu}
         <!-- Split button: main (action/select) + caret (opens the Menu). One cell in the group. -->
         <span class="inline-flex {isRow ? '[&>button+button]:border-l' : '[&>button+button]:border-t'} [&>button+button]:[border-color:var(--ui-border-color)]">
           <Button
@@ -188,6 +213,7 @@
             variant={variantFor(item)}
             {size}
             disabled={disabled || item.disabled}
+            loading={item.loading}
             bind:element={mainRefs[i]}
             tabindex={tabIdxFor(i, item)}
             {...selectAttrs(item)}
@@ -206,6 +232,22 @@
             {#snippet icon()}<IconChevronDown />{/snippet}
           </Button>
         </span>
+      {:else if item.href && !disabled && !item.disabled}
+        <!-- Anchor-mode item (renders as a link). A disabled link falls through to the plain button
+             branch below — an <a> has no native `disabled`. -->
+        <Button
+          icon={item.icon}
+          text={item.text}
+          variant={variantFor(item)}
+          {size}
+          loading={item.loading}
+          href={item.href}
+          target={item.target}
+          bind:element={mainRefs[i]}
+          tabindex={tabIdxFor(i, item)}
+          {...selectAttrs(item)}
+          onclick={(e) => activate(item, e)}
+        />
       {:else}
         <Button
           icon={item.icon}
@@ -213,6 +255,7 @@
           variant={variantFor(item)}
           {size}
           disabled={disabled || item.disabled}
+          loading={item.loading}
           bind:element={mainRefs[i]}
           tabindex={tabIdxFor(i, item)}
           {...selectAttrs(item)}
@@ -234,3 +277,5 @@
     {/if}
   {/each}
 {/if}
+
+{#snippet caretIcon()}<IconChevronDown />{/snippet}

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

@@ -10,10 +10,20 @@ export type ButtonGroupItem = {
     /** Icon slot — a consumer-rendered component (e.g. `~icons/mdi/*`), like `Button`'s `icon`. */
     icon?: Snippet;
     disabled?: boolean;
+    /** Show a spinner in place of the icon (forwarded to `Button`). */
+    loading?: boolean;
     /** Per-item colour override; otherwise the group `variant`. */
     variant?: Variant;
-    /** Split-button dropdown: a trailing caret opens a `Menu` with these items. */
+    /** Anchor mode — the item renders as a link (forwarded to `Button`). */
+    href?: string;
+    target?: string;
+    /** A `Menu` opened from this item. By default the item becomes a **split button** (its own action
+     *  + a trailing caret that opens the menu). With `menuOnly`, the whole item is the menu trigger
+     *  (no split, no caret) — the click opens the menu. Use a `menuOnly` item as the chevron half of a
+     *  hand-built [action][▾] pair. */
     menu?: MenuItem[];
+    /** Make `menu` open on the item's own click, with no split caret (menu-trigger mode). */
+    menuOnly?: boolean;
     /** Action-mode click. Fires in `select="none"`; in selection modes it runs after the select. */
     onclick?: (e: MouseEvent) => void;
 };

package/dist/components/Combobox/Combobox.svelte

@@ -10,9 +10,10 @@
   import Input from "../Input.svelte";
   import Popup from "../Popup.svelte";
   import IconChevronDown from "~icons/mdi/chevron-down";
+  import Spinner from "../Spinner/Spinner.svelte";
   import type { Variant } from "../../types/variants.js";
   import type { Size } from "../../types/sizes.js";
-  import type { Responsive } from "../../types/responsive.js";
+  import { responsiveClasses, type Responsive } from "../../types/responsive.js";
 
   let {
     value = $bindable(""),
@@ -65,6 +66,10 @@
   let fieldEl = $state<HTMLDivElement>();
   let inputEl = $state<HTMLInputElement>();
   let asyncResults = $state<string[]>([]);
+  let loading = $state(false);
+  // Monotonic request id — a later query invalidates the results of any earlier in-flight one, so a
+  // slow response can't clobber a newer, faster one (out-of-order race).
+  let reqSeq = 0;
 
   // Suggestions: async `suggest` (debounced) or client-side substring filter of `options`.
   const filtered = $derived.by(() => {
@@ -78,23 +83,37 @@
     return maxResults != null ? out.slice(0, maxResults) : out;
   });
 
-  // Debounced async fetch — re-runs as `value` changes; gated by `minChars`.
+  // Debounced async fetch — re-runs as `value` changes; gated by `minChars`. Sets `loading` for the
+  // whole debounce→resolve window so the field shows feedback (otherwise the delay reads as "broken").
   $effect(() => {
     if (!suggest) return;
     const q = value;
     if (q.trim().length < minChars) {
       asyncResults = [];
+      loading = false;
       return;
     }
+    const seq = ++reqSeq;
+    loading = true;
     const t = setTimeout(() => {
       suggest(q)
-        .then((r) => (asyncResults = r))
-        .catch(() => (asyncResults = []));
+        .then((r) => {
+          if (seq !== reqSeq) return; // a newer query superseded this one
+          asyncResults = r;
+          loading = false;
+        })
+        .catch(() => {
+          if (seq !== reqSeq) return;
+          asyncResults = [];
+          loading = false;
+        });
     }, debounceMs);
     return () => clearTimeout(t);
   });
 
-  const canOpen = $derived(open && !disabled && filtered.length > 0);
+  // Open the popup while loading too, so the "Loading…" row can show during the async fetch.
+  const canOpen = $derived(open && !disabled && (filtered.length > 0 || loading));
+  const optionText = $derived(responsiveClasses(size, { sm: "text-xs", md: "text-sm", lg: "text-base" }));
 
   function choose(v: string) {
     value = v;
@@ -166,14 +185,20 @@
   }}
 >
   {#snippet actions()}
-    <span
-      class="inline-flex items-center justify-center opacity-60 transition-transform duration-150 {canOpen
-        ? 'rotate-180'
-        : ''} [&_svg]:w-4 [&_svg]:h-4"
-      aria-hidden="true"
-    >
-      <IconChevronDown />
-    </span>
+    {#if loading}
+      <span class="inline-flex items-center justify-center opacity-70" aria-hidden="true">
+        <Spinner size="sm" />
+      </span>
+    {:else}
+      <span
+        class="inline-flex items-center justify-center opacity-60 transition-transform duration-150 {canOpen
+          ? 'rotate-180'
+          : ''} [&_svg]:w-4 [&_svg]:h-4"
+        aria-hidden="true"
+      >
+        <IconChevronDown />
+      </span>
+    {/if}
   {/snippet}
 </Input>
 
@@ -181,25 +206,31 @@
   <ul
     id={listId}
     role="listbox"
-    class="max-h-64 overflow-y-auto rounded-md border shadow-lg [background-color:var(--ui-color-background)] [color:var(--ui-color-text)] [border-color:var(--ui-border-color)] py-1"
+    class="max-h-64 overflow-y-auto rounded-md border shadow-lg [background-color:var(--ui-color-background)] [color:var(--ui-color-text)] [border-color:var(--ui-border-color)] py-1 {optionText}"
   >
-    {#each filtered as opt, i (opt + i)}
-      <!-- svelte-ignore a11y_click_events_have_key_events -->
-      <li
-        id={optId(i)}
-        role="option"
-        aria-selected={i === highlight}
-        class="cursor-pointer px-3 py-1.5 text-sm {i === highlight
-          ? '[background-color:var(--ui-color-hover)]'
-          : ''} hover:[background-color:var(--ui-color-hover)]"
-        onpointerdown={(e) => {
-          e.preventDefault(); // keep input focused so the click lands before blur closes the list
-          choose(opt);
-        }}
-        onpointerenter={() => (highlight = i)}
-      >
-        {opt}
+    {#if filtered.length === 0 && loading}
+      <li class="flex items-center gap-2 px-3 py-1.5 [color:color-mix(in_srgb,var(--ui-color-text)_60%,transparent)]" aria-hidden="true">
+        <Spinner size="sm" /> Loading…
       </li>
-    {/each}
+    {:else}
+      {#each filtered as opt, i (opt + i)}
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <li
+          id={optId(i)}
+          role="option"
+          aria-selected={i === highlight}
+          class="cursor-pointer px-3 py-1.5 {i === highlight
+            ? '[background-color:var(--ui-color-hover)]'
+            : ''} hover:[background-color:var(--ui-color-hover)]"
+          onpointerdown={(e) => {
+            e.preventDefault(); // keep input focused so the click lands before blur closes the list
+            choose(opt);
+          }}
+          onpointerenter={() => (highlight = i)}
+        >
+          {opt}
+        </li>
+      {/each}
+    {/if}
   </ul>
 </Popup>

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

@@ -1,7 +1,7 @@
 import type { Snippet } from "svelte";
 import type { Variant } from "../../types/variants.js";
 import type { Size } from "../../types/sizes.js";
-import type { Responsive } from "../../types/responsive.js";
+import { type Responsive } from "../../types/responsive.js";
 type $$ComponentProps = {
     value?: string;
     options?: string[];

package/dist/components/Menu.svelte

@@ -10,7 +10,7 @@
 <script lang="ts">
   import Popup from "./Popup.svelte";
   import type { Side, Align, Boundary } from "../positioning/anchored.js";
-  import type { MenuItem } from "../data/table/types.js";
+  import type { MenuItem, MenuAction, MenuSeparator } from "../data/table/types.js";
   import type { Size } from "../types/sizes.js";
   import { responsiveClasses, type Responsive } from "../types/responsive.js";
   import { variantToken, type Variant } from "../types/variants.js";
@@ -38,8 +38,12 @@
   } = $props();
 
   let active = $state(-1);
-  const hasIcons = $derived(items.some((i) => i.icon));
-  const enabledIdx = $derived(items.map((i, idx) => (i.disabled ? -1 : idx)).filter((i) => i >= 0));
+  const isSeparator = (i: MenuItem): i is MenuSeparator => "divider" in i;
+  const hasIcons = $derived(items.some((i) => !isSeparator(i) && i.icon));
+  // Separators (and disabled items) are never focusable / selectable.
+  const enabledIdx = $derived(
+    items.map((i, idx) => (isSeparator(i) || i.disabled ? -1 : idx)).filter((i) => i >= 0),
+  );
 
   // Size axis → item padding / text / icon box. Variant → --ui-accent (re-mixes the item's hover tint).
   const padMap: Record<Size, string> = { sm: "px-1.5 py-1", md: "px-2 py-1.5", lg: "px-2.5 py-2" };
@@ -50,7 +54,7 @@
   const iconClass = $derived(responsiveClasses(size, iconMap));
   const accentVar = $derived(variant ? `--ui-accent: var(${variantToken[variant]});` : "");
 
-  function choose(item: MenuItem) {
+  function choose(item: MenuAction) {
     if (item.disabled) return;
     item.onclick?.();
     if (item.href) window.location.href = item.href;
@@ -70,7 +74,8 @@
         enabledIdx[enabledIdx.length - 1];
     } else if (e.key === "Enter" && active >= 0) {
       e.preventDefault();
-      choose(items[active]);
+      const it = items[active];
+      if (!isSeparator(it)) choose(it);
     }
   }
 
@@ -88,30 +93,33 @@
     class="ui-accent min-w-48 rounded-md border p-1 shadow-lg outline-none [background-color:var(--ui-color-background)] [border-color:color-mix(in_srgb,var(--ui-color-secondary)_var(--ui-tint-border),transparent)]"
     style={accentVar}
   >
-    {#each items as item, i (item.label)}
-      {@const danger = item.danger}
-      <li role="none">
-        <button
-          type="button"
-          role="menuitem"
-          disabled={item.disabled}
-          onmouseenter={() => (active = item.disabled ? active : i)}
-          onclick={() => choose(item)}
-          class="flex w-full items-center gap-2 rounded {padClass} {textClass} text-left transition-colors
+    {#each items as item, i (i)}
+      {#if isSeparator(item)}
+        <li role="separator" class="my-1 h-px [background-color:color-mix(in_srgb,var(--ui-color-secondary)_var(--ui-tint-border),transparent)]"></li>
+      {:else}
+        <li role="none">
+          <button
+            type="button"
+            role="menuitem"
+            disabled={item.disabled}
+            onmouseenter={() => (active = item.disabled ? active : i)}
+            onclick={() => choose(item)}
+            class="flex w-full items-center gap-2 rounded {padClass} {textClass} text-left transition-colors
 						{item.disabled ? 'cursor-not-allowed opacity-40' : 'cursor-pointer'}
 						{i === active && !item.disabled ? '[background-color:var(--ui-color-surface)]' : ''}
-						{danger ? '[color:var(--ui-color-error)]' : '[color:var(--ui-color-text)]'}"
-        >
-          {#if hasIcons}
-            <span
-              class="inline-flex {iconClass} shrink-0 items-center justify-center [&_svg]:w-full [&_svg]:h-full"
-            >
-              {#if item.icon}{@const Icon = item.icon}<Icon />{/if}
-            </span>
-          {/if}
-          <span class="truncate">{item.label}</span>
-        </button>
-      </li>
+						{item.danger ? '[color:var(--ui-color-error)]' : '[color:var(--ui-color-text)]'}"
+          >
+            {#if hasIcons}
+              <span
+                class="inline-flex {iconClass} shrink-0 items-center justify-center [&_svg]:w-full [&_svg]:h-full"
+              >
+                {#if item.icon}{@const Icon = item.icon}<Icon />{/if}
+              </span>
+            {/if}
+            <span class="truncate">{item.label}</span>
+          </button>
+        </li>
+      {/if}
     {/each}
   </ul>
 </Popup>

package/dist/components/Pagination/Pagination.svelte

@@ -1,14 +1,18 @@
 <!--
 /**
- * Pagination — a standalone page navigator (numbered buttons + ellipsis, prev/next, optional
- * first/last, optional rows-per-page Select + total). The reusable extraction of DataTable's footer
- * pager; built only from `Button` (ghost, active = filled variant) and `Select`. See Pagination.spec.md.
+ * Pagination — a standalone page navigator laid out like DataTable's footer: a tinted, bordered band
+ * with an optional per-page `Select` on the left and a compact `First · Prev · [page]/N · Next · Last`
+ * stepper on the right. The page indicator is an editable `NumberInput` for quick-jump. `variant` tints
+ * the band surface + button hover (via the shared `.ui-accent` override) — it does NOT fill buttons.
+ * Built only from `Button`, `Select`, and `NumberInput`. See Pagination.spec.md.
  */
 -->
 <script lang="ts">
   import Button from "../Button.svelte";
   import Select from "../Select.svelte";
+  import NumberInput from "../NumberInput.svelte";
   import type { Variant } from "../../types/variants.js";
+  import { variantToken } from "../../types/variants.js";
   import type { Size } from "../../types/sizes.js";
   import { responsiveClasses, type Responsive } from "../../types/responsive.js";
   import IconFirst from "~icons/mdi/page-first";
@@ -21,25 +25,29 @@
     total,
     perPage = $bindable(10),
     perPageOptions,
-    siblingCount = 1,
-    boundaryCount = 1,
-    showEdges = false,
-    showTotal = false,
-    variant = "primary",
+    showEdges = true,
+    showTotal = true,
+    variant,
     size = "md",
+    borderless = false,
     disabled = false,
     class: cls = "",
   }: {
     page?: number;
     total: number;
     perPage?: number;
+    /** When set, renders the per-page `Select` on the left. */
     perPageOptions?: number[];
-    siblingCount?: number;
-    boundaryCount?: number;
+    /** Show the First/Last edge buttons (default true, matching DataTable's footer). */
     showEdges?: boolean;
+    /** Show the "start–end of total" range text (default true). */
     showTotal?: boolean;
+    /** Color axis — tints the band surface + button hover (like DataTable), NOT the buttons. Omit for
+     *  a neutral surface band; `ghost` makes the band transparent. */
     variant?: Variant;
     size?: Responsive<Size>;
+    /** Drop the band border/surface, leaving just the controls. */
+    borderless?: boolean;
     disabled?: boolean;
     class?: string;
   } = $props();
@@ -51,23 +59,10 @@
     if (clamped !== page) page = clamped;
   });
 
-  // Page-number list with ellipsis gaps: boundaryCount at each end + siblingCount around the current.
-  const items = $derived.by<(number | "ellipsis")[]>(() => {
-    const set = new Set<number>();
-    for (let i = 1; i <= boundaryCount; i++) {
-      set.add(i);
-      set.add(pageCount - i + 1);
-    }
-    for (let i = page - siblingCount; i <= page + siblingCount; i++) set.add(i);
-    const sorted = [...set].filter((n) => n >= 1 && n <= pageCount).sort((a, b) => a - b);
-    const out: (number | "ellipsis")[] = [];
-    let prev = 0;
-    for (const n of sorted) {
-      if (n - prev > 1) out.push("ellipsis");
-      out.push(n);
-      prev = n;
-    }
-    return out;
+  // The quick-jump field mirrors `page`; committed on change (Enter/blur), not on every keystroke.
+  let pageInput = $state(page);
+  $effect(() => {
+    pageInput = page;
   });
 
   const rangeText = $derived(
@@ -78,18 +73,38 @@
   const subtle = $derived(
     `${responsiveClasses(size, { sm: "text-xs", md: "text-sm", lg: "text-base" })} [color:color-mix(in_srgb,var(--ui-color-text)_60%,transparent)]`,
   );
+  const bandPad = $derived(responsiveClasses(size, { sm: "px-2 py-1.5", md: "px-3 py-2", lg: "px-3.5 py-2.5" }));
+
+  // Band surface + border: variant re-points --ui-accent so --ui-color-surface/hover re-mix from it
+  // (the shared .ui-accent mechanism DataTable's footer uses). `ghost` ⇒ transparent band.
+  const accentVar = $derived(variant ? `--ui-accent: var(${variantToken[variant]});` : "");
+  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 bandBorder = $derived(borderless ? "transparent" : sectionBorder);
 
   const go = (to: number) => {
     if (disabled) return;
     page = Math.min(Math.max(to, 1), pageCount);
+    pageInput = page;
   };
   const setPerPage = (n: number) => {
     perPage = n;
     page = 1;
   };
+  const commitJump = () => {
+    if (pageInput == null) {
+      pageInput = page;
+      return;
+    }
+    go(pageInput);
+  };
 </script>
 
-<nav aria-label="Pagination" class="flex flex-wrap items-center justify-between gap-3 {cls}">
+<nav
+  aria-label="Pagination"
+  class="ui-accent flex flex-wrap items-center justify-between gap-3 border rounded-[var(--ui-border-radius)] {bandPad} {cls}"
+  style="border-color: {bandBorder}; background-color: {bandBg}; {accentVar}"
+>
   {#if perPageOptions?.length}
     <div class="flex items-center gap-2">
       <Select
@@ -104,7 +119,7 @@
     </div>
   {/if}
 
-  <div class="flex items-center gap-3">
+  <div class="flex items-center gap-3 {perPageOptions?.length ? '' : 'ml-auto'}">
     {#if showTotal}<span class={subtle}>{rangeText}</span>{/if}
     <div class="inline-flex items-center gap-0.5">
       {#snippet navBtn(Icon: typeof IconFirst, to: number, off: boolean, aria: string)}
@@ -123,22 +138,22 @@
       {#if showEdges}{@render navBtn(IconFirst, 1, page <= 1, "First page")}{/if}
       {@render navBtn(IconPrev, page - 1, page <= 1, "Previous page")}
 
-      {#each items as it, i (i)}
-        {#if it === "ellipsis"}
-          <span aria-hidden="true" class="px-1.5 {subtle}">…</span>
-        {:else}
-          <Button
-            variant={it === page ? variant : "ghost"}
+      <div class="flex items-center gap-1.5 px-1 {subtle}">
+        <span class="inline-block {responsiveClasses(size, { sm: 'w-11', md: 'w-12', lg: 'w-14' })}">
+          <NumberInput
+            bind:value={pageInput}
+            min={1}
+            max={pageCount}
+            clamp
             {size}
             {disabled}
-            aria-label={`Page ${it}`}
-            aria-current={it === page ? "page" : undefined}
-            onclick={() => go(it)}
-          >
-            {it}
-          </Button>
-        {/if}
-      {/each}
+            inputClass="text-center px-1"
+            aria-label="Page number"
+            onchange={commitJump}
+          />
+        </span>
+        <span aria-hidden="true">/&nbsp;{pageCount}</span>
+      </div>
 
       {@render navBtn(IconNext, page + 1, page >= pageCount, "Next page")}
       {#if showEdges}{@render navBtn(IconLast, pageCount, page >= pageCount, "Last page")}{/if}

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

@@ -5,13 +5,18 @@ type $$ComponentProps = {
     page?: number;
     total: number;
     perPage?: number;
+    /** When set, renders the per-page `Select` on the left. */
     perPageOptions?: number[];
-    siblingCount?: number;
-    boundaryCount?: number;
+    /** Show the First/Last edge buttons (default true, matching DataTable's footer). */
     showEdges?: boolean;
+    /** Show the "start–end of total" range text (default true). */
     showTotal?: boolean;
+    /** Color axis — tints the band surface + button hover (like DataTable), NOT the buttons. Omit for
+     *  a neutral surface band; `ghost` makes the band transparent. */
     variant?: Variant;
     size?: Responsive<Size>;
+    /** Drop the band border/surface, leaving just the controls. */
+    borderless?: boolean;
     disabled?: boolean;
     class?: string;
 };