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

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

@@ -153,8 +153,7 @@ 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` (display `average`/`count`, OR `interactive` + `bind:value` star picker
-  with `allowHalf`, click/hover/arrow-keys) · **`Combobox`** (free-text autocomplete — arbitrary value + suggestions,
+  `Toggle` `Radio` `Rating` · **`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
@@ -171,15 +170,13 @@ 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`.
-  For a start–end range use **`DatePicker range`** (`bind:value` = `{ start, end }`) — it composes
-  `Calendar mode="range"`.
+- **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.)
 - **Data:** `DataTable` `Query` — driven by the headless layer at **`@spaethtech/svelte-ui/data`**
   (query-language parser/AST, `createGrid`, `DataGrid<T>`, `DataSet`). · **`Pagination`** (standalone
-  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`).
+  pager: numbered buttons + ellipsis, prev/next/first/last, `bind:page`/`bind:perPage`, `total`,
+  `perPageOptions`, `showTotal`; built from `Button`+`Select` — the reusable DataTable footer pager).
 - **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,10 +10,9 @@
   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 { responsiveClasses, type Responsive } from "../../types/responsive.js";
+  import type { Responsive } from "../../types/responsive.js";
 
   let {
     value = $bindable(""),
@@ -66,10 +65,6 @@
   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(() => {
@@ -83,37 +78,23 @@
     return maxResults != null ? out.slice(0, maxResults) : out;
   });
 
-  // 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").
+  // Debounced async fetch — re-runs as `value` changes; gated by `minChars`.
   $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) => {
-          if (seq !== reqSeq) return; // a newer query superseded this one
-          asyncResults = r;
-          loading = false;
-        })
-        .catch(() => {
-          if (seq !== reqSeq) return;
-          asyncResults = [];
-          loading = false;
-        });
+        .then((r) => (asyncResults = r))
+        .catch(() => (asyncResults = []));
     }, debounceMs);
     return () => clearTimeout(t);
   });
 
-  // 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" }));
+  const canOpen = $derived(open && !disabled && filtered.length > 0);
 
   function choose(v: string) {
     value = v;
@@ -185,20 +166,14 @@
   }}
 >
   {#snippet actions()}
-    {#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}
+    <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>
   {/snippet}
 </Input>
 
@@ -206,31 +181,25 @@
   <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 {optionText}"
+    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"
   >
-    {#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…
+    {#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}
       </li>
-    {: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}
+    {/each}
   </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,18 +1,14 @@
 <!--
 /**
- * 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.
+ * 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.
  */
 -->
 <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";
@@ -25,29 +21,25 @@
     total,
     perPage = $bindable(10),
     perPageOptions,
-    showEdges = true,
-    showTotal = true,
-    variant,
+    siblingCount = 1,
+    boundaryCount = 1,
+    showEdges = false,
+    showTotal = false,
+    variant = "primary",
     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[];
-    /** Show the First/Last edge buttons (default true, matching DataTable's footer). */
+    siblingCount?: number;
+    boundaryCount?: number;
     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();
@@ -59,10 +51,23 @@
     if (clamped !== page) page = clamped;
   });
 
-  // The quick-jump field mirrors `page`; committed on change (Enter/blur), not on every keystroke.
-  let pageInput = $state(page);
-  $effect(() => {
-    pageInput = page;
+  // 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;
   });
 
   const rangeText = $derived(
@@ -73,38 +78,18 @@
   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="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}"
->
+<nav aria-label="Pagination" class="flex flex-wrap items-center justify-between gap-3 {cls}">
   {#if perPageOptions?.length}
     <div class="flex items-center gap-2">
       <Select
@@ -119,7 +104,7 @@
     </div>
   {/if}
 
-  <div class="flex items-center gap-3 {perPageOptions?.length ? '' : 'ml-auto'}">
+  <div class="flex items-center gap-3">
     {#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)}
@@ -138,22 +123,22 @@
       {#if showEdges}{@render navBtn(IconFirst, 1, page <= 1, "First page")}{/if}
       {@render navBtn(IconPrev, page - 1, page <= 1, "Previous page")}
 
-      <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
+      {#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"}
             {size}
             {disabled}
-            inputClass="text-center px-1"
-            aria-label="Page number"
-            onchange={commitJump}
-          />
-        </span>
-        <span aria-hidden="true">/&nbsp;{pageCount}</span>
-      </div>
+            aria-label={`Page ${it}`}
+            aria-current={it === page ? "page" : undefined}
+            onclick={() => go(it)}
+          >
+            {it}
+          </Button>
+        {/if}
+      {/each}
 
       {@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,18 +5,13 @@ type $$ComponentProps = {
     page?: number;
     total: number;
     perPage?: number;
-    /** When set, renders the per-page `Select` on the left. */
     perPageOptions?: number[];
-    /** Show the First/Last edge buttons (default true, matching DataTable's footer). */
+    siblingCount?: number;
+    boundaryCount?: number;
     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,168 +1,47 @@
-<!--
-/**
- * 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 = {
-    /** 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;
+    average: number;
+    count: number;
     /** 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,
-    value = $bindable(0),
-    interactive = false,
-    readonly = false,
-    disabled = false,
-    max = 5,
-    allowHalf = false,
-    showValue,
-    onchange,
-    variant,
-    size = "md",
-    label = "Rating",
-  }: RatingProps = $props();
+  let { average, count, variant, size = "md" }: RatingProps = $props();
 
   const starColor = $derived(variant ? `var(${variantToken[variant]})` : "#ffd700");
   const starSize: Record<Size, string> = { sm: "1rem", md: "1.2rem", lg: "1.5rem" };
 
-  const active = $derived(interactive && !readonly && !disabled);
-  const step = $derived(allowHalf ? 0.5 : 1);
+  // Validate and sanitize the average rating
+  const validAverage = isNaN(average) || average < 0 ? 0 : Math.min(average, 10);
 
-  // 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;
-  });
+  // Convert TMDB 10-point scale to 5-star scale
+  const fiveStarRating = validAverage / 2;
 
-  // 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);
-  }
+  // 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));
 </script>
 
-<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>
+<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>
     {/each}
   </div>
-  {#if wantValue}
-    <span class="rating-value">{readout.toFixed(1)}</span>
-  {/if}
-  {#if !interactive && count != null}
-    <span class="rating-count">({count})</span>
-  {/if}
+  <span class="rating-value">{fiveStarRating.toFixed(1)}</span>
+  <span class="rating-count">({count})</span>
 </div>
 
 <style>
@@ -171,46 +50,28 @@
     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.full {
+  .star.filled {
     color: var(--star-color, #ffd700);
   }
 
-  .star.empty {
-    color: var(--ui-color-secondary);
+  .star.half-filled {
+    color: var(--star-color, #ffd700);
+    opacity: 0.6;
   }
 
-  /* 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;
+  .star.empty {
+    color: var(--ui-color-secondary);
   }
 
   .rating-value {

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

@@ -1,31 +1,13 @@
 import { type Variant } from "../types/variants.js";
 import type { Size } from "../types/sizes.js";
 export type RatingProps = {
-    /** 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;
+    average: number;
+    count: number;
     /** 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, {}, "value">;
+declare const Rating: import("svelte").Component<RatingProps, {}, "">;
 type Rating = ReturnType<typeof Rating>;
 export default Rating;

package/dist/components/Slider/Slider.svelte

@@ -166,16 +166,14 @@
 
 <FieldChrome {label} {aside} {error} {description} {required} {controlId} {size} class={cls}>
   {#snippet control({ describedBy })}
-    <div class="flex items-center gap-3 select-none">
+    <div class="flex items-center gap-3">
       <!-- 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 cursor-not-allowed'
+          ? 'opacity-50 pointer-events-none'
           : 'cursor-pointer'} {responsiveClasses(size, trackH)}"
         style="background-color: color-mix(in srgb, var({token}) 16%, transparent);"
       >
@@ -200,7 +198,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,19 +62,14 @@
       : `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 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",
+    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",
   };
-  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" : "");
+  const chipSize = $derived<Size>(
+    (typeof size === "string" ? size : "md") === "lg" ? "md" : "sm",
+  );
 
   let draft = $state("");
 
@@ -120,7 +115,6 @@
           text={v}
           variant={variant === "ghost" ? "secondary" : variant}
           size={chipSize}
-          class={chipHeightClass}
           removable
           {disabled}
           onremove={() => removeAt(i)}

package/dist/index.d.ts

@@ -43,7 +43,9 @@ 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,6 +44,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";
 // Theme Components
 export { default as ThemeSelector } from "./components/ThemeSelector.svelte";

package/docs/components.md

@@ -122,6 +122,20 @@ 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.
@@ -271,15 +285,10 @@ independent. Propagates `size`/`variant`/`disabled` to children.
 
 ### Rating
 
-Star rating in two modes: a read-only display, or an interactive picker.
+Read-only star-rating display (5-star, from a 10-point average).
 
 - **Location**: `src/lib/components/Rating.svelte`
-- **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).
+- **Props**: `average` (number), `count` (number)
 
 ## Specialized Input Components
 
@@ -390,19 +399,13 @@ 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` (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)
+- **Axes**: `variant` (active page fill), `size`
 - **Props**: `page` (bindable), `total`, `perPage` (bindable), `perPageOptions` (→ rows-per-page
-  `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>`)
+  `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>`)
 
 ## Overlays
 

package/docs/usage.md

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

package/package.json

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