@eifi1/ui-kit 0.8.1 → 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)]");
@@ -148,6 +227,14 @@ export interface ChipLinkProps {
   /** The chip's forwarded ref. React 19 passes it to a function component as a prop. */
   ref?: Ref<HTMLAnchorElement>;
   "aria-current"?: "true";
+  /**
+   * The chip's `onClick`, when it was given one — spread it onto the link with the
+   * rest. Carried here so a caller need not close over it twice: keksdose's admin pill
+   * in the account menu closes the menu on the way to /admin (account-menu.tsx), and
+   * with `onClick` on the Chip its `renderLink` stays the one-liner
+   * `({ href, ...p }) => <Link to={href} {...p} />`.
+   */
+  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
   id?: string;
   title?: string;
   [key: `aria-${string}`]: string | boolean | number | undefined;
@@ -164,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",
@@ -230,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
@@ -265,14 +369,16 @@ interface ChipBaseProps {
 
 /**
  * A chip is a link OR a button, never both — so the types say so. Before 0.7.0 both were
- * accepted and `onClick` was silently dropped whenever `href` was set; a link that must
- * also run code wants a router `Link`-style `onClick` on the anchor, which is a different
- * component's job.
+ * accepted and `onClick` was silently dropped whenever `href` was set. A LINK may still
+ * run code on its way (close the menu it sits in): that is an `onClick` typed for the
+ * anchor, on the link shape, and the pill stays a link — no `aria-pressed`, no button.
+ * That shape wants a definite `href` string, so a bare `onClick` is always the
+ * button's, with a button's event.
  */
 export type ChipProps = ChipBaseProps &
   (
     | {
-        /** Renders the chip as a link. Mutually exclusive with `onClick`. */
+        /** Renders the chip as a link. */
         href?: string;
         onClick?: never;
         /**
@@ -291,6 +397,19 @@ export type ChipProps = ChipBaseProps &
          */
         renderLink?: (props: ChipLinkProps) => ReactElement;
       }
+    | {
+        /** The link shape again, with an `onClick`. `href` is a required string here,
+         *  which is what lets TypeScript tell this shape from the button's: a bare
+         *  `onClick` can only be the button's, and keeps its button event. */
+        href: string;
+        /** Runs on the link's click, before the navigation — keksdose's admin pill
+         *  closes the account menu with it. Reaches a `renderLink` link as
+         *  {@link ChipLinkProps.onClick}. Not called on a disabled chip, which renders
+         *  no link. */
+        onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+        /** See the link shape above. */
+        renderLink?: (props: ChipLinkProps) => ReactElement;
+      }
     | {
         href?: never;
         renderLink?: never;
@@ -318,6 +437,7 @@ export const Chip = forwardRef<HTMLElement, ChipProps>(function Chip(
     caps = false,
     icon: Icon,
     selected,
+    checkbox = false,
     href,
     renderLink,
     onClick,
@@ -339,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),
@@ -352,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>
     </>
@@ -419,10 +559,13 @@ export const Chip = forwardRef<HTMLElement, ChipProps>(function Chip(
 
   // ── The three shapes.
   if (href && !disabled) {
+    // On this shape `onClick` is the link shape's, typed for the anchor.
+    const onLinkClick = onClick as ChipLinkProps["onClick"];
     const linkProps: ChipLinkProps = {
       ...rest,
       ref: ref as Ref<HTMLAnchorElement>,
       href,
+      onClick: onLinkClick,
       "aria-current": selected ? "true" : undefined,
       className: remove ? inner : look,
       children: body,
@@ -436,6 +579,7 @@ export const Chip = forwardRef<HTMLElement, ChipProps>(function Chip(
         ref={ref as React.Ref<HTMLAnchorElement>}
         href={href}
         aria-current={selected ? "true" : undefined}
+        onClick={onLinkClick}
         className={remove ? inner : look}
         {...rest}
       >
@@ -445,17 +589,24 @@ export const Chip = forwardRef<HTMLElement, ChipProps>(function Chip(
     return remove ? pill(link) : link;
   }
 
-  if (onClick) {
+  // `!href`: a DISABLED link renders no link, and its link-shaped `onClick` must not
+  // turn it into a button instead — it falls through to the inert span, as before.
+  if (onClick && !href) {
+    const onButtonClick = onClick as (event: MouseEvent<HTMLButtonElement>) => void;
     const button = (
       <button
         ref={ref as React.Ref<HTMLButtonElement>}
         type="button"
-        onClick={onClick}
+        onClick={onButtonClick}
         disabled={disabled}
         // 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 />