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

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/data/table/types.d.ts

@@ -64,10 +64,10 @@ export interface QueryResult<T> {
 export type FetchFn<T> = (state: GridState) => QueryResult<FetchResult<T>>;
 export type ParsedQuery = QueryNode | null;
 /**
- * A row/bulk kebab menu entry. Convention: always render ALL items and `disabled` the invalid
- * ones. Icons are optional — when ANY item has an icon, icon-less items reserve the icon column.
+ * A menu action. Convention: always render ALL items and `disabled` the invalid ones. Icons are
+ * optional — when ANY item has an icon, icon-less items reserve the icon column so labels align.
  */
-export type MenuItem = {
+export type MenuAction = {
     label: string;
     icon?: Component<{
         class?: string;
@@ -77,3 +77,9 @@ export type MenuItem = {
     disabled?: boolean;
     danger?: boolean;
 };
+/** A non-interactive separator line between groups of actions. */
+export type MenuSeparator = {
+    divider: true;
+};
+/** A menu entry — either an action or a separator (`{ divider: true }`). */
+export type MenuItem = MenuAction | MenuSeparator;

package/dist/index.d.ts

@@ -7,7 +7,6 @@ export { EmptyState } from "./components/EmptyState/index.js";
 export { Avatar, AvatarGroup } from "./components/Avatar/index.js";
 export type { AvatarShape, AvatarStatus, AvatarItem } from "./components/Avatar/index.js";
 export { default as Button } from "./components/Button.svelte";
-export { default as ButtonDropdown } from "./components/ButtonDropdown.svelte";
 export { default as Card } from "./components/Card.svelte";
 export { default as CardHeader } from "./components/CardHeader.svelte";
 export { default as CardBody } from "./components/CardBody.svelte";
@@ -43,9 +42,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";
@@ -55,7 +52,7 @@ export { CommandPalette } from "./components/CommandPalette/index.js";
 export type { Command } from "./components/CommandPalette/index.js";
 export { Tree } from "./components/Tree/index.js";
 export type { TreeNode } from "./components/Tree/index.js";
-export type { MenuItem } from "./data/table/types.js";
+export type { MenuItem, MenuAction, MenuSeparator } from "./data/table/types.js";
 export { ButtonGroup } from "./components/ButtonGroup/index.js";
 export type { ButtonGroupItem, ButtonGroupSelect } from "./components/ButtonGroup/index.js";
 export { default as Checkbox } from "./components/Checkbox.svelte";

package/dist/index.js

@@ -7,7 +7,6 @@ export { Kbd } from "./components/Kbd/index.js";
 export { EmptyState } from "./components/EmptyState/index.js";
 export { Avatar, AvatarGroup } from "./components/Avatar/index.js";
 export { default as Button } from "./components/Button.svelte";
-export { default as ButtonDropdown } from "./components/ButtonDropdown.svelte";
 export { default as Card } from "./components/Card.svelte";
 export { default as CardHeader } from "./components/CardHeader.svelte";
 export { default as CardBody } from "./components/CardBody.svelte";
@@ -44,7 +43,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.
@@ -224,8 +210,14 @@ the selected one fills with the group `variant`. Not a form field (controlled vi
   `string[]`, multi), `orientation` (`'row' | 'col'`, default `'row'`), `disabled` (whole group),
   `class`, `children` (a **presentational** default slot — hand-authored `<Button>`s get the frame but
   you own their behaviour; mutually exclusive with `items`, which wins + DEV-warns).
-- **`ButtonGroupItem`**: `{ value?, text?, icon? (Snippet), disabled?, variant?, menu? (MenuItem[] —
-  renders a split-button caret opening a `Menu`), onclick? }`.
+- **`ButtonGroupItem`**: `{ value?, text?, icon? (Snippet), disabled?, loading?, variant?, href?,
+  target?, menu? (MenuItem[]), menuOnly?, onclick? }`. `loading`/`href`/`target` forward to `Button`
+  (a disabled `href` item falls back to a plain disabled button — `<a>` has no `disabled`).
+- **Split buttons & menu triggers**: an item with `menu` renders a **split button** (its action + a
+  trailing caret that opens the `Menu`). Add **`menuOnly`** and the whole item becomes a caret-only
+  **menu-trigger** (its click opens the menu; a bare one defaults to a chevron). Compose the two for a
+  standalone `[ action ][ ▾ ]` dropdown: a normal item + a `menuOnly` item — this **replaces the
+  removed `ButtonDropdown`**.
 - **Selection / a11y**: `'single'` → `role="radiogroup"` + `aria-checked`, arrow-key roving;
   `'multi'` → `aria-pressed`; `'none'` → `role="toolbar"`, `item.onclick` fires (no swap).
 
@@ -285,10 +277,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 +396,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
 
@@ -468,8 +471,10 @@ never clipped by overflow/stacking contexts. Placement via the shared `anchored`
 Keyboard-navigable action menu rendered inside a `Popup`.
 
 - **Location**: `src/lib/components/Menu.svelte`
-- **Props**: `anchor`, `open` (bindable), `items` (`MenuItem[]` from `@spaethtech/svelte-ui/data`), `side`,
-  `align`, `boundary`
+- **Props**: `anchor`, `open` (bindable), `items` (`MenuItem[]`), `side`, `align`, `boundary`, `size`,
+  `variant`
+- **`MenuItem`**: an **action** `{ label, icon?, onclick?, href?, disabled?, danger? }` **or** a
+  **separator** `{ divider: true }` (a non-interactive rule between groups; skipped by keyboard nav).
 - **Features**: renders all items always and disables the invalid ones; aligns labels when any
   item has an icon
 

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
@@ -468,6 +464,19 @@ A joined row/column of buttons — an action toolbar or a controlled segmented s
 <!-- Action toolbar with a split-button (Export has a `menu`) -->
 <ButtonGroup items={actions} variant="secondary" />
 
+<!-- Split-button dropdown [ action ][ ▾ ] — replaces the old ButtonDropdown.
+     A normal action item + a `menuOnly` caret item that opens a Menu (with a divider). -->
+<ButtonGroup
+  variant="primary"
+  items={[
+    { text: "Save", icon: saveIcon, loading: saving, onclick: doSave },
+    { menuOnly: true, menu: [
+      { label: "Save and close", onclick: saveAndClose },
+      { divider: true },
+      { label: "Discard", danger: true, onclick: discard },
+    ] },
+  ]} />
+
 <!-- Vertical -->
 <ButtonGroup items={alignItems} select="single" bind:value={align} orientation="col" />
 
@@ -740,7 +749,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 +760,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.71.e357f8b",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/spaethtech/svelte-ui.git"