@spaethtech/svelte-ui 0.15.1-dev.69.15831f2 → 0.15.1-dev.72.768dcbb

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

@@ -152,7 +152,7 @@ Mount `<Toaster />` once at the app root, then push from anywhere with `toast.su
 All from `@spaethtech/svelte-ui` (see the shipped `docs/components.md` + `docs/usage.md` for props +
 examples):
 
-- **Form:** `Button` `ButtonDropdown` `Input` `Select` `Combobox` `Slider` `List` `TextArea` `Checkbox`
+- **Form:** `Button` `ButtonGroup` `Input` `Select` `Combobox` `Slider` `List` `TextArea` `Checkbox`
   `Toggle` `Radio` `Rating` (display `average`/`count`, OR `interactive` + `bind:value` star picker
   with `allowHalf`, click/hover/arrow-keys) · **`Combobox`** (free-text autocomplete — arbitrary value + suggestions,
   client `options` or async `suggest`; vs `Select` which is a closed choice. Composes Input + Popup.) ·
@@ -163,11 +163,13 @@ examples):
   `showValue`/`format`; FieldChrome + `variant`/`size`; keyboard + `role="slider"`) · **`FieldGroup`**
   (fieldset wrapper for radio/checkbox/toggle sets) · **`ButtonGroup`**
   (joined row/`col` of `<Button>`s as one unit — an action toolbar or a **controlled** segmented
-  selector; `items` of `ButtonGroupItem` {`value`,`text`,`icon`,`variant`,`disabled`,`menu`,`onclick`}
-  or a presentational default slot; `select` `'none'|'single'|'multi'` with `bind:value`/`bind:values`;
-  selected = variant-swap to filled, unselected = `ghost`; the group owns the frame; an item `menu`
-  (`MenuItem[]`) makes a split-button. Not a form field — for legend/`name`/submit use `FieldGroup`;
-  for view switching use `TabStrip`.)
+  selector; `items` of `ButtonGroupItem` {`value`,`text`,`icon`,`variant`,`disabled`,`loading`,`href`/
+  `target`,`menu`,`menuOnly`,`onclick`} or a presentational default slot; `select`
+  `'none'|'single'|'multi'` with `bind:value`/`bind:values`; selected = variant-swap to filled,
+  unselected = `ghost`; the group owns the frame. An item `menu` (`MenuItem[]`) makes a **split
+  button** (action + caret); add `menuOnly` for a caret-only **menu-trigger** cell (e.g. an
+  `[action][▾]` pair = a plain item + a `menuOnly` item). This replaces the old `ButtonDropdown`. Not
+  a form field — for legend/`name`/submit use `FieldGroup`; for view switching use `TabStrip`.)
 - **Specialized inputs:** `PasswordInput` `EmailInput` `SearchInput` `NumberInput` (formatting +
   `percent`/`stepper`/`clamp`/`liveFormat`) `PhoneInput` (stores E.164; dep-free, inject
   `parse`/`format` for per-country)

package/dist/components/ButtonGroup/ButtonGroup.svelte

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

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

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

package/dist/components/Menu.svelte

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

package/dist/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";
@@ -53,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";

package/docs/components.md

@@ -210,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).
 
@@ -465,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

@@ -464,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" />
 

package/package.json

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

package/dist/components/ButtonDropdown.svelte

@@ -1,145 +0,0 @@
-<!--
-/**
- * ButtonDropdown — a split-button compound built from Button + Menu.
- *
- * Same prop surface as Button (variant, size, icon, text, children,
- * disabled, onclick, …); when `items` is empty/absent it renders
- * identically to a single Button. With items, it splits into a primary
- * half (the consumer's button) and a secondary chevron half that opens
- * a Menu anchored to the chevron.
- *
- * Compound rule: nothing in this file builds primitives — it composes
- * Button + Menu. The split visual is enforced by overriding the two
- * halves' rounded corners + adjacent border via the {class} prop both
- * Buttons already accept; the outer wrapper carries the shape so a
- * consumer-applied shadow (e.g. `class="shadow-md"`) lands on the
- * combined silhouette rather than splitting at the seam between the
- * two halves.
- */
--->
-<script lang="ts">
-  import ChevronDown from "~icons/mdi/chevron-down";
-  import Button from "./Button.svelte";
-  import Menu from "./Menu.svelte";
-  import type { Variant } from "../types/variants.js";
-  import type { Size } from "../types/sizes.js";
-  import type { Responsive } from "../types/responsive.js";
-  import type { Snippet } from "svelte";
-  import type { MenuItem } from "../data/table/types.js";
-
-  // Mirrors Button's button-flavour Props (the anchor-flavour `href` is
-  // intentionally not on offer here — a split-button's two halves can't
-  // both be a single navigation target). Adds `items`.
-  interface Props {
-    /** Icon slot for the primary half — same contract as Button.icon. */
-    icon?: Snippet;
-    text?: string;
-    variant?: Variant;
-    size?: Responsive<Size>;
-    children?: Snippet;
-    disabled?: boolean;
-    type?: "button" | "submit" | "reset";
-    title?: string;
-    /** Append-extra classes — applied to the OUTER wrapper so consumer
-     *  styling (margin, shadow, alignment) targets the combined shape
-     *  rather than just one half. */
-    class?: string;
-    onclick?: (event: MouseEvent) => void;
-    /** Menu items shown when the chevron is clicked. Empty / absent →
-     *  the component degrades gracefully to a plain Button. */
-    items?: MenuItem[];
-    /** Menu placement passed through to `<Menu>`. Defaults match the
-     *  ActionBar split-button convention: opens below, right-aligned. */
-    menuSide?: "top" | "bottom" | "left" | "right";
-    menuAlign?: "start" | "center" | "end";
-  }
-
-  let {
-    icon,
-    text,
-    variant = "secondary",
-    size = "md",
-    children,
-    disabled = false,
-    type = "button",
-    title,
-    class: additionalClass = "",
-    onclick,
-    items,
-    menuSide = "bottom",
-    menuAlign = "end",
-  }: Props = $props();
-
-  // No items → degrade to a plain Button with the exact same prop
-  // surface. Keeps `<ButtonDropdown {variant} {size} text="…" />`
-  // usable as a drop-in for sites that may or may not declare items
-  // dynamically.
-  const hasItems = $derived(!!items && items.length > 0);
-
-  // Chevron-half state. `chevronEl` is what Menu anchors against; the
-  // element gets bound through Button's existing `bind:element` prop so
-  // we never poke at the DOM ourselves.
-  let menuOpen = $state(false);
-  let chevronEl = $state<HTMLButtonElement | HTMLAnchorElement | undefined>(undefined);
-
-  // Class overrides applied via Button's {class} pass-through. The
-  // outer wrapper is `inline-flex` and the two halves abut; we strip
-  // the inner corners + the primary's right border so the seam reads
-  // as a single divider rather than two stacked borders.
-  const primaryHalfClass = "rounded-r-none border-r-0";
-  const secondaryHalfClass = "rounded-l-none px-2";
-</script>
-
-{#if hasItems}
-  <span class="inline-flex {additionalClass}">
-    <Button
-      {icon}
-      {text}
-      {children}
-      {variant}
-      {size}
-      {disabled}
-      {type}
-      {title}
-      {onclick}
-      class={primaryHalfClass}
-    />
-    <Button
-      {variant}
-      {size}
-      {disabled}
-      type="button"
-      title="More actions"
-      aria-haspopup="menu"
-      aria-expanded={menuOpen}
-      onclick={() => (menuOpen = !menuOpen)}
-      bind:element={chevronEl}
-      class={secondaryHalfClass}
-      icon={chevronIcon}
-    />
-  </span>
-  <Menu
-    anchor={chevronEl as HTMLElement | undefined}
-    bind:open={menuOpen}
-    items={items!}
-    side={menuSide}
-    align={menuAlign}
-  />
-{:else}
-  <Button
-    {icon}
-    {text}
-    {children}
-    {variant}
-    {size}
-    {disabled}
-    {type}
-    {title}
-    {onclick}
-    class={additionalClass}
-  />
-{/if}
-
-{#snippet chevronIcon()}
-  <ChevronDown />
-{/snippet}

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

@@ -1,31 +0,0 @@
-import type { Variant } from "../types/variants.js";
-import type { Size } from "../types/sizes.js";
-import type { Responsive } from "../types/responsive.js";
-import type { Snippet } from "svelte";
-import type { MenuItem } from "../data/table/types.js";
-interface Props {
-    /** Icon slot for the primary half — same contract as Button.icon. */
-    icon?: Snippet;
-    text?: string;
-    variant?: Variant;
-    size?: Responsive<Size>;
-    children?: Snippet;
-    disabled?: boolean;
-    type?: "button" | "submit" | "reset";
-    title?: string;
-    /** Append-extra classes — applied to the OUTER wrapper so consumer
-     *  styling (margin, shadow, alignment) targets the combined shape
-     *  rather than just one half. */
-    class?: string;
-    onclick?: (event: MouseEvent) => void;
-    /** Menu items shown when the chevron is clicked. Empty / absent →
-     *  the component degrades gracefully to a plain Button. */
-    items?: MenuItem[];
-    /** Menu placement passed through to `<Menu>`. Defaults match the
-     *  ActionBar split-button convention: opens below, right-aligned. */
-    menuSide?: "top" | "bottom" | "left" | "right";
-    menuAlign?: "start" | "center" | "end";
-}
-declare const ButtonDropdown: import("svelte").Component<Props, {}, "">;
-type ButtonDropdown = ReturnType<typeof ButtonDropdown>;
-export default ButtonDropdown;

package/dist/components/DateRangePicker/DateRangePicker.svelte

@@ -1,157 +0,0 @@
-<!--
-/**
- * DateRangePicker — a start–end range picker with a presets rail. Composes the existing `Calendar`
- * (mode="range") inside an `Input`-framed trigger + `Popup`, exposing ergonomic bind:start / bind:end
- * (ISO). See DateRangePicker.spec.md.
- */
--->
-<script lang="ts" module>
-  export type RangePreset = { label: string; start: string; end: string };
-</script>
-
-<script lang="ts">
-  import type { Snippet } from "svelte";
-  import Input from "../Input.svelte";
-  import Popup from "../Popup.svelte";
-  import Button from "../Button.svelte";
-  import Calendar from "../Calendar.svelte";
-  import IconCalendar from "~icons/mdi/calendar-outline";
-  import type { Variant } from "../../types/variants.js";
-  import type { Size } from "../../types/sizes.js";
-  import type { Responsive } from "../../types/responsive.js";
-
-  // Local ISO (avoids the UTC shift of toISOString near midnight).
-  const iso = (d: Date) =>
-    `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
-  function defaultPresets(): RangePreset[] {
-    const t = new Date();
-    t.setHours(0, 0, 0, 0);
-    const shift = (n: number) => {
-      const d = new Date(t);
-      d.setDate(d.getDate() + n);
-      return iso(d);
-    };
-    const today = iso(t);
-    const monthStart = iso(new Date(t.getFullYear(), t.getMonth(), 1));
-    return [
-      { label: "Today", start: today, end: today },
-      { label: "Yesterday", start: shift(-1), end: shift(-1) },
-      { label: "Last 7 days", start: shift(-6), end: today },
-      { label: "Last 30 days", start: shift(-29), end: today },
-      { label: "This month", start: monthStart, end: today },
-    ];
-  }
-
-  let {
-    start = $bindable(""),
-    end = $bindable(""),
-    min,
-    max,
-    presets,
-    variant = "secondary",
-    size = "md",
-    disabled = false,
-    placeholder = "Select dates",
-    format,
-    label = null,
-    aside,
-    error = null,
-    description = null,
-    id,
-    required = false,
-    class: cls = "",
-  }: {
-    start?: string;
-    end?: string;
-    min?: string;
-    max?: string;
-    presets?: RangePreset[];
-    variant?: Variant;
-    size?: Responsive<Size>;
-    disabled?: boolean;
-    placeholder?: string;
-    format?: (iso: string) => string;
-    label?: string | null;
-    aside?: Snippet;
-    error?: string | Snippet | null;
-    description?: string | Snippet | null;
-    id?: string;
-    required?: boolean;
-    class?: string;
-  } = $props();
-
-  const rail = $derived(presets ?? defaultPresets());
-  let open = $state(false);
-  let fieldEl = $state<HTMLDivElement>();
-
-  const fmt = (i: string): string => {
-    if (format) return format(i);
-    const [y, m, d] = i.split("-").map(Number);
-    return new Date(y, m - 1, d).toLocaleDateString(undefined, {
-      month: "short",
-      day: "numeric",
-      year: "numeric",
-    });
-  };
-  const display = $derived(
-    start && end
-      ? `${fmt(start)} – ${fmt(end)}`
-      : start
-        ? `${fmt(start)} – …`
-        : "",
-  );
-
-  function applyPreset(p: RangePreset) {
-    start = p.start;
-    end = p.end;
-    open = false;
-  }
-</script>
-
-<Input
-  value={display}
-  readonly
-  {variant}
-  {size}
-  {disabled}
-  {placeholder}
-  {label}
-  {aside}
-  {error}
-  {description}
-  {id}
-  {required}
-  class={cls}
-  icon={calIcon}
-  bind:fieldElement={fieldEl}
-  onclick={() => (disabled ? null : (open = !open))}
-/>
-
-{#snippet calIcon()}<IconCalendar />{/snippet}
-
-<Popup anchor={fieldEl} bind:open side="bottom" align="start" lightDismiss>
-  <div
-    class="flex overflow-hidden rounded-md border shadow-lg [background-color:var(--ui-color-background)] [border-color:var(--ui-border-color)]"
-  >
-    {#if rail.length}
-      <div class="flex flex-col gap-0.5 border-r p-2 [border-color:var(--ui-border-color)]">
-        {#each rail as p (p.label)}
-          <Button text={p.label} variant="ghost" size="sm" onclick={() => applyPreset(p)} />
-        {/each}
-      </div>
-    {/if}
-    <div class="p-2">
-      <Calendar
-        mode="range"
-        bind:start
-        bind:end
-        {min}
-        {max}
-        {variant}
-        onrange={(r) => {
-          if (r.start && r.end) open = false;
-        }}
-      />
-    </div>
-  </div>
-</Popup>

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

@@ -1,31 +0,0 @@
-export type RangePreset = {
-    label: string;
-    start: string;
-    end: string;
-};
-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";
-type $$ComponentProps = {
-    start?: string;
-    end?: string;
-    min?: string;
-    max?: string;
-    presets?: RangePreset[];
-    variant?: Variant;
-    size?: Responsive<Size>;
-    disabled?: boolean;
-    placeholder?: string;
-    format?: (iso: string) => string;
-    label?: string | null;
-    aside?: Snippet;
-    error?: string | Snippet | null;
-    description?: string | Snippet | null;
-    id?: string;
-    required?: boolean;
-    class?: string;
-};
-declare const DateRangePicker: import("svelte").Component<$$ComponentProps, {}, "start" | "end">;
-type DateRangePicker = ReturnType<typeof DateRangePicker>;
-export default DateRangePicker;

package/dist/components/DateRangePicker/index.d.ts

@@ -1,2 +0,0 @@
-export { default as DateRangePicker } from "./DateRangePicker.svelte";
-export type { RangePreset } from "./DateRangePicker.svelte";

package/dist/components/DateRangePicker/index.js

@@ -1 +0,0 @@
-export { default as DateRangePicker } from "./DateRangePicker.svelte";