@eifi1/ui-kit 0.9.0 → 0.10.0

package/src/components/bulk-action-bar.tsx

@@ -0,0 +1,256 @@
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import type { ComponentPropsWithoutRef, CSSProperties, KeyboardEvent, ReactNode } from "react";
+import { X } from "lucide-react";
+
+import { cn } from "../lib/cn";
+import { horizontalStep } from "../lib/direction";
+import { useKitLabels } from "../i18n/kit-labels";
+import { useAnnounce } from "../hooks/use-announce";
+import { OVERLAY_EXIT_MS, prefersReducedMotion } from "../hooks/use-close-transition";
+import { Button, IconButton } from "./ui";
+
+export interface BulkActionBarLabels {
+  /** The count, shown in the bar, spoken by its live region and used as the toolbar's
+   *  name: "3 selected". */
+  selected: (count: number) => string;
+  /** The clear/cancel action's name — the X of the floating bar, the text button of the
+   *  others. */
+  clear: string;
+  /** Spoken when the selection empties and the bar goes. */
+  cleared: string;
+}
+
+export const DEFAULT_BULK_ACTION_BAR_LABELS: BulkActionBarLabels = {
+  selected: (count) => `${count} selected`,
+  clear: "Clear selection",
+  cleared: "Selection cleared",
+};
+
+/**
+ * `floating` — the phone's: fixed above `AppShell`'s bottom nav (`--app-nav-h`) and the
+ * home indicator, inset from both sides, a rounded card with a shadow. `sticky` — the
+ * desktop's: pinned to the top of its scroll container, over the rows it acts on.
+ * `inline` — in the flow, where the caller places it.
+ */
+export type BulkActionBarVariant = "floating" | "sticky" | "inline";
+
+export interface BulkActionBarProps extends Omit<ComponentPropsWithoutRef<"div">, "role" | "children"> {
+  /** How many items are selected. The bar shows only while this is above zero. */
+  count: number;
+  /** Clear the selection / leave selection mode. */
+  onClear: () => void;
+  /** The actions: buttons (`IconButton size="lg"` on a phone, `Button` from md up),
+   *  in the caller's order. They are the toolbar's arrow-key stops, after the clear. */
+  children?: ReactNode;
+  /** Default `floating`. See {@link BulkActionBarVariant}. */
+  variant?: BulkActionBarVariant;
+  /** Default: `bulkActionBar` from the {@link UiKitProvider}, else English. */
+  labels?: Partial<BulkActionBarLabels>;
+}
+
+/** Where the floating bar sits: clear of the phone nav and of the home indicator,
+ *  whichever reaches higher — `FloatingPanel`'s rule, plus the bar's own 0.5rem gap.
+ *  Set as inline style, so reposition it through `style` (which is merged over this,
+ *  e.g. `style={{ insetInline: "auto 2rem", width: "24rem" }}`), not `className`. */
+const FLOATING_STYLE: CSSProperties = {
+  bottom: "calc(max(var(--app-nav-h, 0px), env(safe-area-inset-bottom, 0px)) + 0.5rem)",
+  // Both insets on both sides: a logical side has no one physical inset to name, and
+  // the bar is symmetric, so RTL needs nothing more.
+  insetInline: "max(0.5rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))",
+};
+
+/** What the arrow keys walk: the toolbar's enabled controls. Matched by element, not by
+ *  `tabindex`, because the roving below sets every one but the current to `-1` — a
+ *  custom control joins with `data-toolbar-item`. */
+const ITEMS =
+  "button:not([disabled]),a[href],input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[data-toolbar-item]";
+
+/** Keys a text field needs for itself — the toolbar must not take its caret away. */
+function ownsArrows(el: Element): boolean {
+  if (el instanceof HTMLTextAreaElement || el instanceof HTMLSelectElement) return true;
+  if (el instanceof HTMLInputElement) return !["button", "checkbox", "radio", "submit", "reset"].includes(el.type);
+  return (el as HTMLElement).isContentEditable;
+}
+
+/**
+ * The bar that appears while rows are selected: the count, a way out, and what can be
+ * done to all of them at once.
+ *
+ * keksdose had written it three times — the transactions phone bar
+ * (mobile-bulk-bar.tsx), the invoice lines' phone and desktop bars
+ * (invoice-lines-bulk-bar.tsx) and the payees selection bar — and the copies had
+ * drifted where it matters: two parked themselves with a guessed `bottom-16` that the
+ * third had already found leaves a 24px gap (live #314: the nav is content-sized and
+ * `AppShell` publishes its height as `--app-nav-h`), none of them announced the count,
+ * and all three were `role="toolbar"` without the arrow keys that role promises.
+ *
+ * ## Keep it mounted
+ *
+ * Render it unconditionally and let `count` decide. At zero it renders only its live
+ * region — which must already be in the DOM for the first "3 selected" to be heard —
+ * and when the count drops to zero it plays its exit before it goes, which a
+ * `{count > 0 && <Bar/>}` gate would cut off.
+ *
+ * ## The toolbar
+ *
+ * One Tab stop: ←/→ (mirrored in RTL), Home and End move between the controls, and Tab
+ * leaves — the WAI-ARIA toolbar pattern, since that is what `role="toolbar"` tells a
+ * screen reader to expect. The stop remembers the control last used. Arrow keys inside
+ * a text field stay the field's.
+ *
+ * It is NOT a dialog: no focus trap, no scroll lock — the list behind stays live,
+ * because tapping more rows is how a selection grows.
+ */
+export function BulkActionBar({
+  count,
+  onClear,
+  children,
+  variant = "floating",
+  labels: labelsProp,
+  className,
+  style,
+  onKeyDown,
+  onFocus,
+  ...rest
+}: BulkActionBarProps) {
+  const labels = useKitLabels("bulkActionBar", DEFAULT_BULK_ACTION_BAR_LABELS, labelsProp);
+  const { announce, regionProps } = useAnnounce();
+  const barRef = useRef<HTMLDivElement>(null);
+  const shown = count > 0;
+
+  // The count the bar last SHOWED, so a bar lowering itself after "clear" still reads
+  // "3 selected" on its way out rather than "0 selected". Adjusted during render
+  // (`Collapse`'s pattern), as is the exit below.
+  const [shownCount, setShownCount] = useState(count);
+  const [leaving, setLeaving] = useState(false);
+  const [prevCount, setPrevCount] = useState(count);
+  if (count !== prevCount) {
+    setPrevCount(count);
+    if (shown) {
+      setShownCount(count);
+      setLeaving(false);
+    } else {
+      setLeaving(prevCount > 0 && !prefersReducedMotion());
+    }
+  }
+  useEffect(() => {
+    if (!leaving) return;
+    const timer = setTimeout(() => setLeaving(false), OVERLAY_EXIT_MS);
+    return () => clearTimeout(timer);
+  }, [leaving]);
+
+  // Spoken on every CHANGE, not on mount: a bar mounted with rows already selected
+  // was not the result of anything the user just did.
+  const spoken = useRef(count);
+  useEffect(() => {
+    if (spoken.current === count) return;
+    spoken.current = count;
+    announce(count > 0 ? labels.selected(count) : labels.cleared);
+  }, [count, labels, announce]);
+
+  // Roving tab stop. The controls are the caller's, so the stop is kept on the DOM
+  // rather than through props: after every render the remembered control (or the
+  // first) is the one with `tabindex=0`, every other one `-1`.
+  const active = useRef<HTMLElement | null>(null);
+  // Every render: the caller's controls come and go (a "remove added" that exists
+  // only while some are removable), and a stop on a control that left must move on.
+  useLayoutEffect(() => {
+    rove(barRef.current, active);
+  });
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+    onKeyDown?.(e);
+    if (e.defaultPrevented || ownsArrows(e.target as Element)) return;
+    const list = itemsOf(barRef.current);
+    const at = list.indexOf(document.activeElement as HTMLElement);
+    if (at === -1 || list.length === 0) return;
+    const step = horizontalStep(e.key, barRef.current);
+    let next = -1;
+    if (step !== 0) next = (at + step + list.length) % list.length;
+    else if (e.key === "Home") next = 0;
+    else if (e.key === "End") next = list.length - 1;
+    if (next === -1) return;
+    e.preventDefault();
+    active.current = list[next];
+    rove(barRef.current, active);
+    list[next].focus();
+  };
+
+  if (!shown && !leaving) {
+    return <span {...regionProps} />;
+  }
+
+  const floating = variant === "floating";
+  const clear = floating ? (
+    <IconButton size="lg" onClick={onClear} aria-label={labels.clear}>
+      <X />
+    </IconButton>
+  ) : (
+    <Button type="button" variant="secondary" size="sm" onClick={onClear}>
+      {labels.clear}
+    </Button>
+  );
+
+  return (
+    <>
+      <span {...regionProps} />
+      <div
+        {...rest}
+        ref={barRef}
+        role="toolbar"
+        aria-label={labels.selected(shownCount)}
+        aria-orientation="horizontal"
+        data-bulk-action-bar={variant}
+        // Leaving: out of the tab order and the accessibility tree at once, while the
+        // bar still animates. The selection it acted on is already gone.
+        inert={!shown || undefined}
+        onKeyDown={handleKeyDown}
+        onFocus={(e) => {
+          onFocus?.(e);
+          // Clicking a control is using it: the stop follows the pointer too.
+          const hit = itemsOf(barRef.current).find((el) => el === e.target);
+          if (hit) {
+            active.current = hit;
+            rove(barRef.current, active);
+          }
+        }}
+        style={floating ? { ...FLOATING_STYLE, ...style } : style}
+        className={cn(
+          "flex items-center",
+          floating
+            ? cn(
+                "fixed z-30 gap-1 rounded-2xl border border-[var(--border)] bg-[var(--bg-surface)] px-2 py-1 shadow-lg",
+                shown ? "animate-sheet" : "animate-sheet-out",
+              )
+            : cn(
+                "gap-2 px-3 py-2",
+                variant === "sticky" &&
+                  "sticky top-0 z-20 border-b border-[var(--border)] bg-[color-mix(in_srgb,var(--brand)_8%,var(--bg-surface))] backdrop-blur",
+                shown ? "animate-overlay" : "animate-overlay-out",
+              ),
+          className,
+        )}
+      >
+        {floating && clear}
+        <span className="min-w-0 flex-1 truncate text-sm font-medium text-[var(--text-primary)]">
+          {labels.selected(shownCount)}
+        </span>
+        {/* `contents`, so the caller's controls are flex items of the bar itself. */}
+        <div className="contents">{children}</div>
+        {!floating && clear}
+      </div>
+    </>
+  );
+}
+
+function itemsOf(bar: HTMLElement | null): HTMLElement[] {
+  return bar ? Array.from(bar.querySelectorAll<HTMLElement>(ITEMS)) : [];
+}
+
+/** Put the one Tab stop on the remembered control — or the first, when that one has
+ *  gone or was never set — and take it off every other. */
+function rove(bar: HTMLElement | null, active: { current: HTMLElement | null }): void {
+  const list = itemsOf(bar);
+  if (!active.current || !list.includes(active.current)) active.current = list[0] ?? null;
+  for (const el of list) el.tabIndex = el === active.current ? 0 : -1;
+}

package/src/components/chip.tsx

@@ -1,6 +1,6 @@
 import { forwardRef, useId, useRef, useState } from "react";
 import type { ComponentPropsWithoutRef, KeyboardEvent, MouseEvent, ReactElement, ReactNode, Ref } from "react";
-import { X } from "lucide-react";
+import { Check, X } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 import { cn } from "../lib/cn";
 import { horizontalStep } from "../lib/direction";
@@ -30,9 +30,22 @@ export type ChipTone =
   | "success"
   | "info"
   | "income"
-  | "expense";
-/** `lg` is the 44px touch target (`min-h-11`) a phone surface wants; `md` is ~28px. */
-export type ChipSize = "sm" | "md" | "lg";
+  | "expense"
+  | ChipHue;
+/**
+ * Categorical hues (0.10.0): colour that says "a different value" and nothing more —
+ * kastlan's status-badge.tsx paints ~15 enums in 9 Tailwind hues by hand. Four of those
+ * nine are semantic and already tones (green = `success`, yellow = `warning`, red =
+ * `danger`, gray = `neutral`); these five are the rest, each a `--hue-*` token triple
+ * in tokens.css with a light and a dark value. Use a semantic tone when the value HAS a
+ * meaning (overdue is `danger`), a hue when it only needs telling apart (sent vs
+ * accepted vs invoiced).
+ */
+export type ChipHue = "blue" | "indigo" | "purple" | "teal" | "orange";
+/** `lg` is the 44px touch target (`min-h-11`) a phone surface wants; `md` is ~28px.
+ *  `xs` (0.10.0) is 11px type at `px-1.5` — keksdose's goal markers and budget-cell
+ *  badges, which sit inside a figure's line and must not make it taller. */
+export type ChipSize = "xs" | "sm" | "md" | "lg";
 /**
  * How much of the tone the chip wears.
  *
@@ -43,8 +56,12 @@ export type ChipSize = "sm" | "md" | "lg";
  * - `solid`: the tone as a fill under contrasting text — the "count" pill (unread
  *   messages, open tasks). It centres its content and sets figures tabular, so a
  *   one-digit count is a round dot and "9" → "10" does not jiggle the row.
+ * - `dot` (0.10.0): no pill at all — a dot in the tone's colour before plain text, for
+ *   a status in a dense list or a table column where eight tinted pills in a column
+ *   would outshout the figures beside them (kastlan's unit picker already draws its
+ *   UnitStatus this way, from a separate `dotColor` map).
  */
-export type ChipVariant = "soft" | "outline" | "solid";
+export type ChipVariant = "soft" | "outline" | "solid" | "dot";
 /** `pill` (default) is fully rounded; `square` has the small radius of a field or a
  *  button — for a chip that sits in a table cell or beside square controls. */
 export type ChipShape = "pill" | "square";
@@ -86,6 +103,28 @@ const TONE: Record<ChipTone, { idle: string; selected: string }> = {
     idle: "border-current/40 bg-[var(--bg-surface-2)] text-[var(--money-expense)]",
     selected: "border-current bg-[var(--bg-active)] text-[var(--money-expense)]",
   },
+  // The categorical hues: the `info` recipe with its own token triple, so a hue chip
+  // and a status chip in one row carry the same weight.
+  blue: {
+    idle: "border-[var(--hue-blue-border)] bg-[var(--hue-blue-bg)] text-[var(--hue-blue)]",
+    selected: "border-[var(--hue-blue)] bg-[var(--hue-blue-bg)] text-[var(--hue-blue)]",
+  },
+  indigo: {
+    idle: "border-[var(--hue-indigo-border)] bg-[var(--hue-indigo-bg)] text-[var(--hue-indigo)]",
+    selected: "border-[var(--hue-indigo)] bg-[var(--hue-indigo-bg)] text-[var(--hue-indigo)]",
+  },
+  purple: {
+    idle: "border-[var(--hue-purple-border)] bg-[var(--hue-purple-bg)] text-[var(--hue-purple)]",
+    selected: "border-[var(--hue-purple)] bg-[var(--hue-purple-bg)] text-[var(--hue-purple)]",
+  },
+  teal: {
+    idle: "border-[var(--hue-teal-border)] bg-[var(--hue-teal-bg)] text-[var(--hue-teal)]",
+    selected: "border-[var(--hue-teal)] bg-[var(--hue-teal-bg)] text-[var(--hue-teal)]",
+  },
+  orange: {
+    idle: "border-[var(--hue-orange-border)] bg-[var(--hue-orange-bg)] text-[var(--hue-orange)]",
+    selected: "border-[var(--hue-orange)] bg-[var(--hue-orange-bg)] text-[var(--hue-orange)]",
+  },
 };
 
 // `outline` idle looks: the tone's border and text, the surface left to whatever the
@@ -100,6 +139,11 @@ const OUTLINE: Record<ChipTone, string> = {
   info: "border-[var(--info-border)] bg-transparent text-[var(--info)]",
   income: "border-current/60 bg-transparent text-[var(--money-income)]",
   expense: "border-current/60 bg-transparent text-[var(--money-expense)]",
+  blue: "border-[var(--hue-blue-border)] bg-transparent text-[var(--hue-blue)]",
+  indigo: "border-[var(--hue-indigo-border)] bg-transparent text-[var(--hue-indigo)]",
+  purple: "border-[var(--hue-purple-border)] bg-transparent text-[var(--hue-purple)]",
+  teal: "border-[var(--hue-teal-border)] bg-transparent text-[var(--hue-teal)]",
+  orange: "border-[var(--hue-orange-border)] bg-transparent text-[var(--hue-orange)]",
 };
 
 // `solid`: the fill under its contrast pair. Only brand and danger have a declared
@@ -116,12 +160,40 @@ const SOLID: Record<ChipTone, string> = {
   info: "border-transparent bg-[var(--info)] text-[var(--text-inverse)]",
   income: "border-transparent bg-[var(--money-income)] text-[var(--text-inverse)]",
   expense: "border-transparent bg-[var(--money-expense)] text-[var(--text-inverse)]",
+  blue: "border-transparent bg-[var(--hue-blue)] text-[var(--text-inverse)]",
+  indigo: "border-transparent bg-[var(--hue-indigo)] text-[var(--text-inverse)]",
+  purple: "border-transparent bg-[var(--hue-purple)] text-[var(--text-inverse)]",
+  teal: "border-transparent bg-[var(--hue-teal)] text-[var(--text-inverse)]",
+  orange: "border-transparent bg-[var(--hue-orange)] text-[var(--text-inverse)]",
+};
+
+/** `dot`: the fill of the dot itself — the tone's strongest colour, which is the one
+ *  chosen to read on the page surface in both themes. Neutral takes the muted ink: a
+ *  grey dot is "no particular state", not a darker black. */
+const DOT: Record<ChipTone, string> = {
+  neutral: "bg-[var(--text-muted)]",
+  brand: "bg-[var(--brand)]",
+  danger: "bg-[var(--danger)]",
+  warning: "bg-[var(--warning)]",
+  success: "bg-[var(--success)]",
+  info: "bg-[var(--info)]",
+  income: "bg-[var(--money-income)]",
+  expense: "bg-[var(--money-expense)]",
+  blue: "bg-[var(--hue-blue)]",
+  indigo: "bg-[var(--hue-indigo)]",
+  purple: "bg-[var(--hue-purple)]",
+  teal: "bg-[var(--hue-teal)]",
+  orange: "bg-[var(--hue-orange)]",
 };
 
+/** Per size: the dot's diameter. */
+const DOT_SIZE: Record<ChipSize, string> = { xs: "size-1.5", sm: "size-2", md: "size-2", lg: "size-2.5" };
+
 /** The status-badge type (`caps`): a size step down, heavier and tracked, because
  *  capitals at body size shout and capitals untracked run together. Per size, so it
  *  replaces the size's own `text-*` through tailwind-merge. */
 const CAPS: Record<ChipSize, string> = {
+  xs: "text-[10px] font-semibold uppercase tracking-wider",
   sm: "text-[10px] font-semibold uppercase tracking-wider",
   md: "text-[11px] font-semibold uppercase tracking-wider",
   lg: "text-xs font-semibold uppercase tracking-wider",
@@ -129,6 +201,13 @@ const CAPS: Record<ChipSize, string> = {
 
 function surfaceOf(tone: ChipTone, variant: ChipVariant, selected: boolean | undefined): string {
   const palette = TONE[tone];
+  if (variant === "dot") {
+    // No surface and no border colour: the dot carries the tone, the text stays ink.
+    // The border goes transparent rather than away, so a dot chip lines up with a pill.
+    return selected
+      ? "border-transparent bg-transparent font-medium text-[var(--text-primary)]"
+      : "border-transparent bg-transparent text-[var(--text-secondary)]";
+  }
   if (variant === "solid") {
     // A solid chip is already the strongest look there is, so "on" is a ring round it.
     return cn(SOLID[tone], selected && "ring-2 ring-[var(--border-strong)] ring-offset-1 ring-offset-[var(--bg-surface)]");
@@ -172,6 +251,13 @@ const SIZE: Record<
   ChipSize,
   { body: string; split: string; tail: string; icon: string; remove: string }
 > = {
+  xs: {
+    body: "gap-1 px-1.5 py-0 text-[11px] leading-4",
+    split: "gap-1 ps-1.5 pe-0.5 py-0 text-[11px] leading-4",
+    tail: "pe-1",
+    icon: "size-3",
+    remove: "size-2.5",
+  },
   sm: {
     body: "gap-1 px-2 py-0.5 text-xs",
     split: "gap-1 ps-2 pe-1 py-0.5 text-xs",
@@ -238,6 +324,16 @@ interface ChipBaseProps {
    * it — "+ Outflow" in green next to an inflow (keksdose #417).
    */
   selected?: boolean;
+  /**
+   * Checkbox mode (0.10.0), for a toggle chip (`onClick` + `selected`): a small box
+   * at the start that shows a tick when `selected`, and the button reports
+   * `role="checkbox"` + `aria-checked` instead of `aria-pressed`. For a set of
+   * include/exclude choices where "on" must read as TICKED, not merely tinted —
+   * keksdose's add-group-card (the "which categories come along" pills), which put a
+   * real `<Checkbox>` inside a `<label>` pill by hand. The box is drawn in both
+   * states so ticking one never shifts its label.
+   */
+  checkbox?: boolean;
   /** Renders a dismiss affordance. Works alongside `href`/`onClick` — see the note below. */
   onRemove?: () => void;
   /** Accessible name for the dismiss button. Default: `common.remove` from the
@@ -341,6 +437,7 @@ export const Chip = forwardRef<HTMLElement, ChipProps>(function Chip(
     caps = false,
     icon: Icon,
     selected,
+    checkbox = false,
     href,
     renderLink,
     onClick,
@@ -362,7 +459,9 @@ export const Chip = forwardRef<HTMLElement, ChipProps>(function Chip(
   const interactive = !!href || !!onClick;
   // One radius for every rounded piece — the pill, the body inside a split pill, the ×
   // — so a square chip has no round focus ring inside it.
-  const radius = shape === "square" ? (size === "sm" ? "rounded" : "rounded-md") : "rounded-full";
+  const radius =
+    shape === "square" ? (size === "sm" || size === "xs" ? "rounded" : "rounded-md") : "rounded-full";
+  const dot = variant === "dot";
   const type = cn(caps && CAPS[size], variant === "solid" && "justify-center tabular-nums");
   const surface = cn(
     surfaceOf(tone, variant, selected),
@@ -375,11 +474,29 @@ export const Chip = forwardRef<HTMLElement, ChipProps>(function Chip(
     radius,
     surface,
     interactive && !disabled && "cursor-pointer hover:brightness-[0.97] dark:hover:brightness-110",
+    // An inert dot chip is text in a column: no inset, so it aligns with the header.
+    dot && !interactive && "px-0",
     className,
   );
 
+  // The checkbox box, only on the toggle shape it has meaning on.
+  const isCheckbox = checkbox && !!onClick && !href;
   const body = (
     <>
+      {isCheckbox && (
+        <span
+          aria-hidden
+          data-chip-check=""
+          className={cn(
+            "flex shrink-0 items-center justify-center rounded-sm border",
+            s.icon,
+            selected ? "border-current bg-current/15" : "border-current/50",
+          )}
+        >
+          {selected && <Check className="size-full" strokeWidth={3} />}
+        </span>
+      )}
+      {dot && <span aria-hidden data-chip-dot="" className={cn("shrink-0 rounded-full", DOT_SIZE[size], DOT[tone])} />}
       {Icon && <Icon className={cn(s.icon, "shrink-0")} aria-hidden />}
       <span className="min-w-0 truncate">{children}</span>
     </>
@@ -485,7 +602,11 @@ export const Chip = forwardRef<HTMLElement, ChipProps>(function Chip(
         // Only when `selected` is PASSED: a chip with `onClick` and no `selected` is an
         // action button (it does something), not a toggle (it is on or off), and
         // announcing it "not pressed" would claim a state it does not have.
-        aria-pressed={selected}
+        // A checkbox chip says "checked", not "pressed" — the same state in the words
+        // of the control it looks like.
+        role={isCheckbox ? "checkbox" : undefined}
+        aria-pressed={isCheckbox ? undefined : selected}
+        aria-checked={isCheckbox ? !!selected : undefined}
         className={remove ? inner : look}
         {...rest}
       >

package/src/components/copy-button.tsx

@@ -6,7 +6,7 @@ import { useAnnounce } from "../hooks/use-announce";
 import { useCopyToClipboard } from "../hooks/use-copy-to-clipboard";
 import type { CopyState } from "../hooks/use-copy-to-clipboard";
 import { Button, IconButton } from "./ui";
-import type { ButtonVariant, IconButtonSize } from "./ui";
+import type { ButtonSize, ButtonTone, ButtonVariant, IconButtonSize, IconButtonTone } from "./ui";
 import { Tooltip } from "./tooltip";
 import type { TooltipSide } from "./tooltip";
 
@@ -43,8 +43,17 @@ export interface CopyButtonProps
   label?: string;
   /** The button's own look. Default: `ghost` for the icon, `secondary` for the label. */
   buttonVariant?: ButtonVariant;
-  /** Icon variant only. */
-  size?: IconButtonSize;
+  /** The icon variant's IconButton size (default `sm`). The `label` variant takes a
+   *  Button size, `sm` or `md` — passed only when given, so an existing label button
+   *  keeps its look (keksdose budget-share-card and jobs-panel wanted the compact one). */
+  size?: IconButtonSize | ButtonSize;
+  /** The icon variant's IconButton tone (e.g. `muted`, so a row of copy icons is no
+   *  heavier than the row's other actions); in the `label` variant a Button tone,
+   *  which applies to `link` / `ghost`. The copied / failed colour still wins. */
+  tone?: IconButtonTone | ButtonTone;
+  /** Keep the click and Enter/Space from reaching a clickable row around the button,
+   *  as IconButton's own `stopPropagation` does (keksdose feedback-page, users-panel). */
+  stopPropagation?: boolean;
   /** Icon variant only: where the result tooltip opens. */
   tooltipSide?: TooltipSide;
   /** Pass through to the tooltip — needed inside a scroll container (see Tooltip). */
@@ -80,7 +89,9 @@ export function CopyButton({
   variant = "icon",
   label,
   buttonVariant,
-  size = "sm",
+  size,
+  tone,
+  stopPropagation,
   tooltipSide = "top",
   tooltipPortal = false,
   resetAfter = 2000,
@@ -123,8 +134,17 @@ export function CopyButton({
           {...rest}
           disabled={disabled}
           variant={buttonVariant ?? "secondary"}
+          size={size === "sm" || size === "md" ? size : undefined}
+          tone={tone === "default" || tone === "muted" || tone === "danger" ? tone : undefined}
           data-state={state}
-          onClick={onClick}
+          onClick={(e) => {
+            if (stopPropagation) e.stopPropagation();
+            void onClick();
+          }}
+          onKeyDown={(e) => {
+            if (stopPropagation && (e.key === "Enter" || e.key === " ")) e.stopPropagation();
+            rest.onKeyDown?.(e);
+          }}
           className={className}
         >
           <Icon aria-hidden className={cn("size-4 shrink-0", iconTone)} />
@@ -144,9 +164,11 @@ export function CopyButton({
           disabled={disabled}
           aria-label={idleText}
           variant={buttonVariant ?? "ghost"}
-          size={size}
+          size={(size ?? "sm") as IconButtonSize}
+          tone={tone as IconButtonTone | undefined}
+          stopPropagation={stopPropagation}
           data-state={state}
-          onClick={onClick}
+          onClick={() => void onClick()}
           className={cn(iconTone, className)}
         >
           <Icon aria-hidden />

package/src/components/date-picker.tsx

@@ -770,6 +770,27 @@ export interface DateRangePickerProps extends DatePickerBaseProps {
    * would overwrite the sheet's history marker.
    */
   sheetBackCloses?: boolean;
+  /**
+   * With `commit="apply"`: a line above the calendar saying what Apply would commit —
+   * keksdose's report range writes "Custom · 1 Mar 2026 – …" there
+   * (report-range-field.tsx), the one place a preset armed and then nudged by a day is
+   * seen to have become "Custom", and a half-made range to still lack its end. Called
+   * with the DRAFT on every change, in the popover and the phone sheet alike; `preset`
+   * is the preset the column marks for it (none once a day was picked by hand), `to` is
+   * `""` until the second click. The line is a polite live region, so a screen reader
+   * hears the draft change as the calendar is used.
+   *
+   * Ignored in `"immediate"` mode, where there is no draft: every click is the value.
+   */
+  renderDraftSummary?: (draft: DateRangeDraftSummary) => ReactNode;
+}
+
+/** What {@link DateRangePickerProps.renderDraftSummary} is called with. */
+export interface DateRangeDraftSummary {
+  from: string;
+  to: string;
+  /** The preset the column marks for the draft, if any. */
+  preset: DateRangePickerPreset | undefined;
 }
 
 /** What {@link DateRangePickerProps.renderTrigger} is called with. */
@@ -889,6 +910,7 @@ function RangePanel({
   commitRange,
   calendarProps,
   labels,
+  renderDraftSummary,
 }: {
   from: string;
   to: string;
@@ -903,6 +925,7 @@ function RangePanel({
   commitRange: (from: string, to: string, presetId: string | undefined) => void;
   calendarProps: Pick<MiniCalendarProps, "locale" | "min" | "max" | "labels">;
   labels: DatePickerLabels;
+  renderDraftSummary?: DateRangePickerProps["renderDraftSummary"];
 }) {
   const drafting = commit === "apply";
   const [draft, setDraft] = useState<RangeDraft>({
@@ -917,7 +940,12 @@ function RangePanel({
     : -1;
   const complete = Boolean(draft.from && draft.to);
 
-  const calendar = (
+  const summary =
+    drafting && renderDraftSummary
+      ? renderDraftSummary({ from: draft.from, to: draft.to, preset: presets?.[marked] })
+      : null;
+
+  const picker = (
     <MiniCalendar
       {...calendarProps}
       focusOnOpen
@@ -934,6 +962,24 @@ function RangePanel({
       }}
     />
   );
+  // The summary heads the CALENDAR's column, not the panel: beside a preset column it
+  // reads as the calendar's caption, and in the sheet it sits between the presets and
+  // the month it describes. `null` renders no line — a caller may opt out per draft —
+  // but keeps the wrapper, so the calendar is not remounted (and its month and focus
+  // lost) when a line comes or goes.
+  const calendar =
+    drafting && renderDraftSummary ? (
+      <div className="flex flex-col gap-2">
+        {summary != null && (
+          <div aria-live="polite" data-draft-summary="" className="text-xs text-[var(--text-muted)]">
+            {summary}
+          </div>
+        )}
+        {picker}
+      </div>
+    ) : (
+      picker
+    );
 
   const body =
     presets && presets.length > 0 ? (
@@ -1006,6 +1052,7 @@ export function DateRangePicker({
   commit = "immediate",
   renderTrigger,
   sheetBackCloses,
+  renderDraftSummary,
   calendarLabels,
   label,
   clearable,
@@ -1082,6 +1129,7 @@ export function DateRangePicker({
           commitRange={commitRange}
           calendarProps={{ locale, min, max, labels: calendarLabels }}
           labels={text}
+          renderDraftSummary={renderDraftSummary}
         />
       )}
     </DateField>