@spaethtech/svelte-ui 0.15.1-dev.67.fbf3875 → 0.15.1-dev.69.15831f2

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

@@ -153,7 +153,8 @@ All from `@spaethtech/svelte-ui` (see the shipped `docs/components.md` + `docs/u
 examples):
 
 - **Form:** `Button` `ButtonDropdown` `Input` `Select` `Combobox` `Slider` `List` `TextArea` `Checkbox`
-  `Toggle` `Radio` `Rating` · **`Combobox`** (free-text autocomplete — arbitrary value + suggestions,
+  `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
@@ -170,13 +171,15 @@ examples):
 - **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/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/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;
 };

package/dist/components/Rating.svelte

@@ -1,47 +1,168 @@
+<!--
+/**
+ * Rating — star rating in two modes:
+ *   • Display (default): a read-only average. `average` is a 0–10 score (TMDB-style), shown as 5 stars
+ *     with halves, plus an optional `count`.
+ *   • Interactive (`interactive`): a form control — click / hover / arrow-key a `bind:value` (0..max
+ *     stars), optional half-steps. `role="slider"` (same a11y pattern as our Slider).
+ * See usage docs.
+ */
+-->
 <script lang="ts">
   import { variantToken, type Variant } from "../types/variants.js";
   import type { Size } from "../types/sizes.js";
 
   export type RatingProps = {
-    average: number;
-    count: number;
+    /** Display mode: a 0–10 average score (TMDB-style), rendered as 5 stars (average / 2). */
+    average?: number;
+    /** Display mode: number of ratings, shown in parentheses. */
+    count?: number;
+    /** Interactive mode: the selected rating in stars (0..max), bindable. */
+    value?: number;
+    /** Enable selection (click / hover / keyboard). Off = read-only display. */
+    interactive?: boolean;
+    /** Interactive but not editable (shows `value`, no input). */
+    readonly?: boolean;
+    disabled?: boolean;
+    /** Number of stars in interactive mode (default 5). */
+    max?: number;
+    /** Allow half-star selection/display (interactive). */
+    allowHalf?: boolean;
+    /** Show the numeric value beside the stars (default: true in display mode, false interactive). */
+    showValue?: boolean;
+    /** Fired on change (interactive). */
+    onchange?: (value: number) => void;
     /** Filled-star colour. Defaults to gold; a variant tints from its token (e.g. `warning`, `primary`). */
     variant?: Variant;
-    /** Star size (sm/md/lg). */
     size?: Size;
+    /** Accessible label for the interactive slider. */
+    label?: string;
   };
 
-  let { average, count, variant, size = "md" }: RatingProps = $props();
+  let {
+    average,
+    count,
+    value = $bindable(0),
+    interactive = false,
+    readonly = false,
+    disabled = false,
+    max = 5,
+    allowHalf = false,
+    showValue,
+    onchange,
+    variant,
+    size = "md",
+    label = "Rating",
+  }: RatingProps = $props();
 
   const starColor = $derived(variant ? `var(${variantToken[variant]})` : "#ffd700");
   const starSize: Record<Size, string> = { sm: "1rem", md: "1.2rem", lg: "1.5rem" };
 
-  // Validate and sanitize the average rating
-  const validAverage = isNaN(average) || average < 0 ? 0 : Math.min(average, 10);
+  const active = $derived(interactive && !readonly && !disabled);
+  const step = $derived(allowHalf ? 0.5 : 1);
 
-  // Convert TMDB 10-point scale to 5-star scale
-  const fiveStarRating = validAverage / 2;
+  // Display mode: sanitize the 0–10 average and convert to a 5-point scale.
+  const displayFive = $derived.by(() => {
+    const a = isNaN(average ?? NaN) || (average ?? 0) < 0 ? 0 : Math.min(average ?? 0, 10);
+    return a / 2;
+  });
 
-  // Calculate how many stars should be filled (ensure they're valid numbers)
-  const filledStars = Math.max(0, Math.min(5, Math.floor(fiveStarRating)));
-  const hasHalfStar = fiveStarRating % 1 >= 0.5;
-  const emptyStars = Math.max(0, 5 - filledStars - (hasHalfStar ? 1 : 0));
+  // Hover preview (interactive) overrides `value` while pointing.
+  let hover = $state<number | null>(null);
+
+  const starCount = $derived(interactive ? max : 5);
+  // The numeric value the stars are painted from.
+  const paint = $derived(interactive ? (hover ?? value) : displayFive);
+  const readout = $derived(interactive ? value : displayFive);
+  const wantValue = $derived(showValue ?? !interactive);
+
+  // Fill state for the i-th star (1-based).
+  function fillOf(i: number): "full" | "half" | "empty" {
+    if (paint >= i) return "full";
+    if (paint >= i - 0.5) return "half";
+    return "empty";
+  }
+  // Half-step from the pointer's position within a star (left half = i-0.5).
+  function valueAt(i: number, e: MouseEvent): number {
+    if (!allowHalf) return i;
+    const r = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    return e.clientX - r.left < r.width / 2 ? i - 0.5 : i;
+  }
+  function pick(i: number, e: MouseEvent) {
+    if (!active) return;
+    value = valueAt(i, e);
+    onchange?.(value);
+  }
+  function preview(i: number, e: MouseEvent) {
+    if (!active) return;
+    hover = valueAt(i, e);
+  }
+  function onkeydown(e: KeyboardEvent) {
+    if (!active) return;
+    let v = value;
+    switch (e.key) {
+      case "ArrowRight":
+      case "ArrowUp":
+        v = Math.min(max, value + step);
+        break;
+      case "ArrowLeft":
+      case "ArrowDown":
+        v = Math.max(0, value - step);
+        break;
+      case "Home":
+        v = 0;
+        break;
+      case "End":
+        v = max;
+        break;
+      default:
+        return;
+    }
+    e.preventDefault();
+    value = v;
+    onchange?.(v);
+  }
 </script>
 
-<div class="rating select-none" style="--star-color: {starColor}; --star-size: {starSize[size]}">
-  <div class="stars">
-    {#each Array(filledStars) as _, i}
-      <span class="star filled">★</span>
-    {/each}
-    {#if hasHalfStar}
-      <span class="star half-filled">☆</span>
-    {/if}
-    {#each Array(emptyStars) as _, i}
-      <span class="star empty">☆</span>
+<div
+  class="rating select-none"
+  class:disabled
+  style="--star-color: {starColor}; --star-size: {starSize[size]}"
+>
+  <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+  <div
+    class="stars"
+    role={active ? "slider" : undefined}
+    tabindex={active ? 0 : undefined}
+    aria-label={active ? label : undefined}
+    aria-valuemin={active ? 0 : undefined}
+    aria-valuemax={active ? max : undefined}
+    aria-valuenow={active ? value : undefined}
+    aria-valuetext={active ? `${value} of ${max} stars` : undefined}
+    aria-readonly={interactive && readonly ? true : undefined}
+    aria-disabled={disabled || undefined}
+    onkeydown={active ? onkeydown : undefined}
+    onpointerleave={active ? () => (hover = null) : undefined}
+  >
+    {#each Array(starCount) as _, idx (idx)}
+      {@const i = idx + 1}
+      {@const f = fillOf(i)}
+      <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+      <span
+        class="star {f} {active ? 'cursor-pointer' : ''}"
+        onpointermove={active ? (e) => preview(i, e) : undefined}
+        onclick={active ? (e) => pick(i, e) : undefined}
+      >
+        {f === "empty" ? "☆" : "★"}
+      </span>
     {/each}
   </div>
-  <span class="rating-value">{fiveStarRating.toFixed(1)}</span>
-  <span class="rating-count">({count})</span>
+  {#if wantValue}
+    <span class="rating-value">{readout.toFixed(1)}</span>
+  {/if}
+  {#if !interactive && count != null}
+    <span class="rating-count">({count})</span>
+  {/if}
 </div>
 
 <style>
@@ -50,30 +171,48 @@
     align-items: center;
     gap: 0.5rem;
   }
+  .rating.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
 
   .stars {
     display: flex;
     gap: 0.1rem;
   }
+  .stars[role="slider"] {
+    border-radius: 4px;
+  }
+  .stars[role="slider"]:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--ui-color-text) 70%, transparent);
+    outline-offset: 2px;
+  }
 
   .star {
     font-size: var(--star-size, 1.2rem);
     line-height: 1;
   }
 
-  .star.filled {
-    color: var(--star-color, #ffd700);
-  }
-
-  .star.half-filled {
+  .star.full {
     color: var(--star-color, #ffd700);
-    opacity: 0.6;
   }
 
   .star.empty {
     color: var(--ui-color-secondary);
   }
 
+  /* Half star: a full ★ glyph clipped to a left-gold / right-muted gradient. */
+  .star.half {
+    background: linear-gradient(
+      90deg,
+      var(--star-color, #ffd700) 50%,
+      var(--ui-color-secondary) 50%
+    );
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+  }
+
   .rating-value {
     font-weight: 600;
     color: var(--ui-color-text);

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

@@ -1,13 +1,31 @@
 import { type Variant } from "../types/variants.js";
 import type { Size } from "../types/sizes.js";
 export type RatingProps = {
-    average: number;
-    count: number;
+    /** Display mode: a 0–10 average score (TMDB-style), rendered as 5 stars (average / 2). */
+    average?: number;
+    /** Display mode: number of ratings, shown in parentheses. */
+    count?: number;
+    /** Interactive mode: the selected rating in stars (0..max), bindable. */
+    value?: number;
+    /** Enable selection (click / hover / keyboard). Off = read-only display. */
+    interactive?: boolean;
+    /** Interactive but not editable (shows `value`, no input). */
+    readonly?: boolean;
+    disabled?: boolean;
+    /** Number of stars in interactive mode (default 5). */
+    max?: number;
+    /** Allow half-star selection/display (interactive). */
+    allowHalf?: boolean;
+    /** Show the numeric value beside the stars (default: true in display mode, false interactive). */
+    showValue?: boolean;
+    /** Fired on change (interactive). */
+    onchange?: (value: number) => void;
     /** Filled-star colour. Defaults to gold; a variant tints from its token (e.g. `warning`, `primary`). */
     variant?: Variant;
-    /** Star size (sm/md/lg). */
     size?: Size;
+    /** Accessible label for the interactive slider. */
+    label?: string;
 };
-declare const Rating: import("svelte").Component<RatingProps, {}, "">;
+declare const Rating: import("svelte").Component<RatingProps, {}, "value">;
 type Rating = ReturnType<typeof Rating>;
 export default Rating;

package/dist/components/Slider/Slider.svelte

@@ -166,14 +166,16 @@
 
 <FieldChrome {label} {aside} {error} {description} {required} {controlId} {size} class={cls}>
   {#snippet control({ describedBy })}
-    <div class="flex items-center gap-3">
+    <div class="flex items-center gap-3 select-none">
       <!-- The track is the click-to-position surface; the thumbs below carry role="slider". -->
       <!-- svelte-ignore a11y_no_static_element_interactions -->
+      <!-- Disabled keeps pointer events (so the not-allowed cursor shows) but every handler no-ops on
+           `disabled`, so it can't be dragged/keyed. -->
       <div
         bind:this={trackEl}
         onpointerdown={onTrackPointerDown}
         class="relative flex-1 select-none rounded-full {disabled
-          ? 'opacity-50 pointer-events-none'
+          ? 'opacity-50 cursor-not-allowed'
           : 'cursor-pointer'} {responsiveClasses(size, trackH)}"
         style="background-color: color-mix(in srgb, var({token}) 16%, transparent);"
       >
@@ -198,7 +200,7 @@
             aria-describedby={describedBy}
             onkeydown={(e) => onThumbKeydown(e, i)}
             class="absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 shadow {disabled
-              ? ''
+              ? 'cursor-not-allowed'
               : 'cursor-grab active:cursor-grabbing'} focus-visible:[outline:2px_solid_color-mix(in_srgb,var(--ui-color-text)_70%,transparent)] focus-visible:[outline-offset:2px] {responsiveClasses(
               size,
               thumbSz,

package/dist/components/TokenInput/TokenInput.svelte

@@ -62,14 +62,19 @@
       : `color-mix(in srgb, var(${token}) var(--ui-tint-border-hover), transparent)`,
   );
 
+  // Vertical padding is kept small enough that a single token row (chip + 1px border box + padding)
+  // never exceeds the tier's `min-h`, so the field height is CONSTANT whether empty or holding tokens.
+  // Multi-row wrapping still grows the field; row spacing comes from the flex `gap`, not padding.
   const fieldSize: Record<Size, string> = {
-    sm: "min-h-6 px-1.5 py-0.5 gap-1 text-xs",
-    md: "min-h-8 px-2 py-1 gap-1.5 text-sm",
-    lg: "min-h-10 px-2.5 py-1.5 gap-2 text-base",
+    sm: "min-h-6 px-1.5 py-0 gap-1 text-xs",
+    md: "min-h-8 px-2 py-[2px] gap-1.5 text-sm",
+    lg: "min-h-10 px-2.5 py-[2px] gap-2 text-base",
   };
-  const chipSize = $derived<Size>(
-    (typeof size === "string" ? size : "md") === "lg" ? "md" : "sm",
-  );
+  const baseSize = $derived<Size>(typeof size === "string" ? size : "md");
+  const chipSize = $derived<Size>(baseSize === "lg" ? "md" : "sm");
+  // A default `sm` chip is 24px — exactly the sm FIELD height, so it can't fit inside the border box.
+  // Only in the sm field, cap the chip to 20px (still fits the min-h with room to center).
+  const chipHeightClass = $derived(baseSize === "sm" ? "!h-5" : "");
 
   let draft = $state("");
 
@@ -115,6 +120,7 @@
           text={v}
           variant={variant === "ghost" ? "secondary" : variant}
           size={chipSize}
+          class={chipHeightClass}
           removable
           {disabled}
           onremove={() => removeAt(i)}

package/dist/index.d.ts

@@ -43,9 +43,7 @@ export { default as DatePicker } from "./components/DatePicker.svelte";
 export { default as TimeSpinner } from "./components/TimeSpinner.svelte";
 export { default as TimePicker } from "./components/TimePicker.svelte";
 export { default as TimeRangeInput } from "./components/TimeRangeInput.svelte";
-export { DateRangePicker } from "./components/DateRangePicker/index.js";
 export { FileUpload } from "./components/FileUpload/index.js";
-export type { RangePreset } from "./components/DateRangePicker/index.js";
 export { default as ThemeSelector } from "./components/ThemeSelector.svelte";
 export { default as ThemeToggle } from "./components/ThemeToggle.svelte";
 export { default as Popup } from "./components/Popup.svelte";

package/dist/index.js

@@ -44,7 +44,6 @@ export { default as DatePicker } from "./components/DatePicker.svelte";
 export { default as TimeSpinner } from "./components/TimeSpinner.svelte";
 export { default as TimePicker } from "./components/TimePicker.svelte";
 export { default as TimeRangeInput } from "./components/TimeRangeInput.svelte";
-export { DateRangePicker } from "./components/DateRangePicker/index.js";
 export { FileUpload } from "./components/FileUpload/index.js";
 // Theme Components
 export { default as ThemeSelector } from "./components/ThemeSelector.svelte";

package/docs/components.md

@@ -122,20 +122,6 @@ Drag-and-drop + click file field with thumbnails, remove, and optional progress.
   `<input type=file>`; labelled remove ×s
 - **Composition**: `Button` + `Progress`; FieldChrome for label/error
 
-### DateRangePicker
-
-Start–end date range with a presets rail; composes `Calendar mode="range"` + `Input` + `Popup`.
-
-- **Location**: `src/lib/components/DateRangePicker/DateRangePicker.svelte`
-- **Axes**: `variant`, `size`
-- **Props**: `start`/`end` (bindable ISO), `min`/`max`, `presets` (`RangePreset[]`; default set, `[]`
-  hides the rail), `format`, `placeholder`, plus FieldChrome (`label`/`aside`/`error`/`description`/
-  `id`/`required`), `class`
-- **Behavior**: readonly `Input` trigger shows the formatted range; the popup pairs a presets column
-  (`Button` ghost) with the range calendar; a preset or the second calendar pick closes it
-- **Note**: `DatePicker range` covers a bare range (object value, no presets); this is the
-  presets-first, `bind:start`/`bind:end` variant
-
 ### Slider
 
 Draggable range input — a single value or a `[min, max]` pair.
@@ -285,10 +271,15 @@ independent. Propagates `size`/`variant`/`disabled` to children.
 
 ### Rating
 
-Read-only star-rating display (5-star, from a 10-point average).
+Star rating in two modes: a read-only display, or an interactive picker.
 
 - **Location**: `src/lib/components/Rating.svelte`
-- **Props**: `average` (number), `count` (number)
+- **Display mode** (default): `average` (0–10 score, shown as 5 stars = average/2), `count` (votes).
+- **Interactive mode**: `interactive` + `value` (bindable, 0..`max`). Click a star, hover to preview,
+  or focus and use ←/→ · ↑/↓ · Home/End. `allowHalf` enables half-star selection; `onchange`,
+  `readonly`, `disabled`. Rendered as a `role="slider"` (same a11y pattern as `Slider`).
+- **Shared**: `variant` (filled-star tint; default gold), `size`, `showValue` (numeric readout —
+  defaults on in display mode, off interactive), `label` (slider a11y label).
 
 ## Specialized Input Components
 
@@ -399,13 +390,19 @@ dialog (operators, casts, dynamic `now()` dates, and a worked examples table). T
 Standalone page navigator — the reusable extraction of `DataTable`'s footer pager.
 
 - **Location**: `src/lib/components/Pagination/Pagination.svelte`
-- **Axes**: `variant` (active page fill), `size`
+- **Axes**: `variant` (tints the band **surface + button hover**, like DataTable's footer — NOT a
+  filled button; omit for a neutral band, `ghost` for a transparent one), `size` (scales band, Select,
+  buttons, and the page field)
 - **Props**: `page` (bindable), `total`, `perPage` (bindable), `perPageOptions` (→ rows-per-page
-  `Select`), `siblingCount`/`boundaryCount`, `showEdges` (first/last), `showTotal`, `disabled`, `class`
-- **Behavior**: numbered buttons with ellipsis for long ranges (active = filled, rest `ghost`);
-  prev/next/first/last disable at the ends; choosing `perPage` resets to page 1; `page` clamps to range
-- **Accessibility**: `<nav aria-label="Pagination">`; active page `aria-current="page"`
-- **Composition**: `Button` + `Select` only (no raw `<button>`)
+  `Select` on the left), `showEdges` (first/last, default **true**), `showTotal` (range text, default
+  **true**), `borderless` (drop the band border/surface), `disabled`, `class`
+- **Layout**: a tinted, bordered band (matches `DataTable`'s footer) — per-page `Select` left; range
+  text + a compact `First · Prev · [page]/N · Next · Last` stepper right. The page indicator is an
+  **editable `NumberInput`** (min 1, max N, clamped) — type a page + Enter to jump; ↑/↓ step it.
+- **Behavior**: prev/next/first/last disable at the ends; choosing `perPage` resets to page 1; `page`
+  clamps to range; jump commits on change (Enter/blur)
+- **Accessibility**: `<nav aria-label="Pagination">`; the jump field is `aria-label="Page number"`
+- **Composition**: `Button` + `Select` + `NumberInput` only (no raw `<button>`/`<input>`)
 
 ## Overlays
 

package/docs/usage.md

@@ -311,21 +311,17 @@ A drag-and-drop + click file field (thumbnails, remove, optional progress).
   label="Attachments" onfiles={(f) => console.log(f)} />
 ```
 
-### DateRangePicker
+### Date range
 
-A start–end range with a presets rail (composes `Calendar mode="range"`).
+Use `DatePicker` with the `range` prop — its value is a `{ start, end }` object.
 
 ```svelte
 <script>
-  import { DateRangePicker } from "@spaethtech/svelte-ui";
-  let start = $state("");
-  let end = $state("");
+  import { DatePicker } from "@spaethtech/svelte-ui";
+  let range = $state({ start: null, end: null });
 </script>
 
-<DateRangePicker bind:start bind:end label="Reporting period" />
-
-<!-- custom presets, or presets={[]} for calendar-only -->
-<DateRangePicker bind:start bind:end presets={[{ label: "Q1", start: "2026-01-01", end: "2026-03-31" }]} />
+<DatePicker range bind:value={range} label="Reporting period" />
 ```
 
 ### Stepper
@@ -740,7 +736,9 @@ A thin separating rule — horizontal (optionally labelled) or vertical (toolbar
 
 ### Pagination
 
-A standalone page navigator (numbered buttons + ellipsis, prev/next, optional per-page + total).
+A standalone page navigator laid out like `DataTable`'s footer: a tinted band with an optional
+per-page `Select`, a range total, and a `First · Prev · [page]/N · Next · Last` stepper whose page
+indicator is an editable `NumberInput` (type a page + Enter to jump).
 
 ```svelte
 <script>
@@ -749,10 +747,13 @@ A standalone page navigator (numbered buttons + ellipsis, prev/next, optional pe
   let perPage = $state(10);
 </script>
 
-<Pagination bind:page bind:perPage total={247} perPageOptions={[10, 25, 50, 100]} showTotal />
+<Pagination bind:page bind:perPage total={247} perPageOptions={[10, 25, 50, 100]} />
+
+<!-- Compact: just the stepper (no per-page Select) -->
+<Pagination bind:page total={200} showTotal={false} />
 
-<!-- Compact: numbers only, with first/last controls -->
-<Pagination bind:page total={200} showEdges />
+<!-- variant tints the band surface + button hover (not the buttons); ghost = transparent band -->
+<Pagination bind:page total={200} variant="primary" />
 ```
 
 ### Breadcrumbs

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaethtech/svelte-ui",
-  "version": "0.15.1-dev.67.fbf3875",
+  "version": "0.15.1-dev.69.15831f2",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/spaethtech/svelte-ui.git"