@eifi1/ui-kit 0.15.5 → 0.16.1

package/src/components/loading-state.tsx

@@ -5,12 +5,29 @@ import { Spinner } from "./ui";
 
 export type LoadingStateSize = "sm" | "md" | "lg";
 
+/** Whether {@link LoadingStateProps.label} shows, or is only read out. */
+export type LoadingStateLabelVisibility = "visible" | "sr-only";
+
 export interface LoadingStateProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "role"> {
   /** The visible words under the spinner, and what the status region announces.
-   *  Default: `common.loading` ("Loading…"). */
+   *  Default: `common.loading` ("Loading…"). `null` (or `""`) hides the words — the
+   *  same as `labelVisibility="sr-only"` with the default text, so the region still
+   *  announces "Loading…" rather than nothing. */
   label?: ReactNode;
+  /**
+   * `sr-only`: the spinner alone shows, the label is still the status region's words
+   * for a screen reader — a busy row or a bubble where "Loading…" in print is noise.
+   * Default `visible`.
+   */
+  labelVisibility?: LoadingStateLabelVisibility;
   /** `sm` for a panel or a table body, `md` (default) for a section, `lg` for a page. */
   size?: LoadingStateSize;
+  /**
+   * Less room above and below, the size's spinner and text unchanged — `md` at `py-8`
+   * instead of `py-12` (`sm` `py-2`, `lg` `py-12`): the step between a panel and a
+   * section, for a card body that `md` makes look empty rather than loading.
+   */
+  compact?: boolean;
   /** Spinner beside the text on one line, rather than above it. */
   inline?: boolean;
 }
@@ -18,6 +35,7 @@ export interface LoadingStateProps extends Omit<ComponentPropsWithoutRef<"div">,
 const SPINNER: Record<LoadingStateSize, string> = { sm: "h-4 w-4", md: "h-8 w-8", lg: "h-10 w-10" };
 const TEXT: Record<LoadingStateSize, string> = { sm: "text-xs", md: "text-sm", lg: "text-base" };
 const PAD: Record<LoadingStateSize, string> = { sm: "py-4", md: "py-12", lg: "py-20" };
+const PAD_COMPACT: Record<LoadingStateSize, string> = { sm: "py-2", md: "py-8", lg: "py-12" };
 
 /**
  * A spinner and the words "Loading…", centred where the content will be.
@@ -27,8 +45,21 @@ const PAD: Record<LoadingStateSize, string> = { sm: "py-4", md: "py-12", lg: "py
  * visible text inside it, so the spinner is decorative (`label={null}`) — otherwise
  * the reader hears "Loading… Loading…", one from each.
  */
-export function LoadingState({ label, size = "md", inline = false, className, ...rest }: LoadingStateProps) {
+export function LoadingState({
+  label,
+  labelVisibility = "visible",
+  size = "md",
+  compact = false,
+  inline = false,
+  className,
+  ...rest
+}: LoadingStateProps) {
   const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
+  // `null` / `""` used to fall through `??` to a printed "Loading…" (null) or leave a
+  // silent region (""): both now mean "no words on screen", and the region keeps the
+  // default words to announce — a status region with nothing in it says nothing.
+  const hidden = label === null || label === "" || labelVisibility === "sr-only";
+  const words = label === null || label === undefined || label === "" ? common.loading : label;
   return (
     <div
       {...rest}
@@ -36,12 +67,12 @@ export function LoadingState({ label, size = "md", inline = false, className, ..
       className={cn(
         "flex items-center justify-center text-center text-[var(--text-muted)]",
         inline ? "gap-2" : "flex-col gap-2",
-        PAD[size],
+        (compact ? PAD_COMPACT : PAD)[size],
         className,
       )}
     >
       <Spinner label={null} className={SPINNER[size]} />
-      <span className={TEXT[size]}>{label ?? common.loading}</span>
+      <span className={hidden ? "sr-only" : TEXT[size]}>{words}</span>
     </div>
   );
 }

package/src/components/number-input.tsx

@@ -195,6 +195,14 @@ export function NumberInput({
   const endRef = useRef<HTMLDivElement>(null);
   const [endWidth, setEndWidth] = useState<number | null>(null);
   const hasEnd = showCalc || suffix !== undefined;
+  // Before the first measurement (and wherever there is no layout), a TEXT unit
+  // reserves an estimate from its length — one `ch` a character, in the input's own
+  // (larger) font, so it errs wide — plus the span's `pe-2` and the 4px gap, and the
+  // calculator's 36px. The class fallback's flat pe-8 gave a "%" 32px for a frame and
+  // "km/h" too little.
+  const suffixChars = typeof suffix === "string" || typeof suffix === "number" ? String(suffix).length : null;
+  const estimatedEnd =
+    suffixChars !== null ? `calc(${suffixChars}ch + 0.75rem${showCalc ? " + 2.25rem" : ""})` : undefined;
   useLayoutEffect(() => {
     const el = endRef.current;
     if (!hasEnd || !el || typeof ResizeObserver === "undefined") return;
@@ -291,7 +299,13 @@ export function NumberInput({
         // field reserves exactly their width (+4px). A fixed pe-8 for any unit left a
         // "%" in a ~78px table cell 32px of padding and the digits ~32px of room
         // (keksdose live #367); a long unit ("km/h") got too little.
-        style={hasEnd && endWidth != null ? { paddingInlineEnd: endWidth + 4 } : undefined}
+        style={
+          hasEnd && endWidth != null
+            ? { paddingInlineEnd: endWidth + 4 }
+            : estimatedEnd !== undefined
+              ? { paddingInlineEnd: estimatedEnd }
+              : undefined
+        }
       />
       {(showCalc || suffix !== undefined) && (
         // One flex track for both, so the unit and the calculator sit side by side
@@ -310,7 +324,9 @@ export function NumberInput({
           {suffix !== undefined && (
             <span
               aria-hidden
-              className="pointer-events-none pe-3 text-xs font-medium text-[var(--text-muted)]"
+              // pe-2, not the input's px-3: the unit is chrome at the box's edge, and
+              // with pe-3 plus the 4px gap it took ~26px of a narrow table cell.
+              className="pointer-events-none pe-2 text-xs font-medium text-[var(--text-muted)]"
             >
               {suffix}
             </span>

package/src/components/passkeys-setting.tsx

@@ -8,9 +8,18 @@ import { Skeleton } from "./skeleton";
 import { useAccountSettingsLabels } from "./account-settings-labels";
 import type { PasskeysSettingLabels } from "./account-settings-labels";
 
-/** One registered passkey, as the app's API lists it. */
-export interface PasskeyItem {
-  id: string | number;
+/** What a passkey's `id` may be: the app's own key type, string or numeric. */
+export type PasskeyId = string | number;
+
+/**
+ * One registered passkey, as the app's API lists it.
+ *
+ * Generic in its `id` (0.16.0): `PasskeysSetting` infers `Id` from `passkeys`, so an
+ * app whose ids are numbers gets numbers back in `onRename` / `onDelete` — keksdose
+ * cast `id as number` in both. Left unparameterised it is the old `string | number`.
+ */
+export interface PasskeyItem<Id extends PasskeyId = PasskeyId> {
+  id: Id;
   name: string;
   /** A `Date`, an ISO string or epoch ms. */
   createdAt?: Date | string | number | null;
@@ -18,9 +27,12 @@ export interface PasskeyItem {
   lastUsedAt?: Date | string | number | null;
 }
 
-export interface PasskeysSettingProps {
+/** `data-*` attributes, passed through to the element they are given for. */
+export type PasskeyDataAttributes = { [key: `data-${string}`]: string | number | boolean | undefined };
+
+export interface PasskeysSettingProps<Id extends PasskeyId = PasskeyId> extends PasskeyDataAttributes {
   /** `undefined` while the first load is in flight (or pass `loading`). */
-  passkeys: readonly PasskeyItem[] | undefined;
+  passkeys: readonly PasskeyItem<Id>[] | undefined;
   loading?: boolean;
   /**
    * Run the WebAuthn ceremony and register the passkey — app-side, since the options
@@ -33,11 +45,11 @@ export interface PasskeysSettingProps {
   /** The ceremony is running. The add button says so and does not start a second one. */
   adding?: boolean;
   /** Offer "Rename" on each row. Return a promise to leave edit mode only on success. */
-  onRename?: (id: PasskeyItem["id"], name: string) => void | Promise<unknown>;
+  onRename?: (id: Id, name: string) => void | Promise<unknown>;
   /** Offer "Delete" on each row — always behind an inline confirmation. */
-  onDelete?: (id: PasskeyItem["id"]) => void | Promise<unknown>;
+  onDelete?: (id: Id) => void | Promise<unknown>;
   /** A row whose rename or delete is in flight; its buttons are disabled. */
-  busyId?: PasskeyItem["id"] | null;
+  busyId?: Id | null;
   /** Show the name field above the add button. Default true. */
   nameField?: boolean;
   /**
@@ -53,6 +65,12 @@ export interface PasskeysSettingProps {
   /** Prop > `<UiKitProvider labels={{ accountSettings: { passkeys } }}>` > English. */
   labels?: Partial<PasskeysSettingLabels>;
   className?: string;
+  /** On the card (0.16.0), for an in-page link (`#passkeys`) or a test hook. `data-*`
+   *  attributes go there too. */
+  id?: string;
+  /** Extra attributes for one row's `<li>` (0.16.0) — an `id` to scroll a just-added
+   *  key into view, `data-*` for a test. Every row also carries `data-passkey-id`. */
+  rowProps?: (item: PasskeyItem<Id>) => ({ id?: string } & PasskeyDataAttributes) | undefined;
 }
 
 /**
@@ -70,7 +88,7 @@ export interface PasskeysSettingProps {
  * the passkey it names. Focus moves to Cancel, as in every destructive confirm in the
  * kit, so the Enter that pressed Delete cannot also answer it.
  */
-export function PasskeysSetting({
+export function PasskeysSetting<Id extends PasskeyId = PasskeyId>({
   passkeys,
   loading,
   onAdd,
@@ -84,7 +102,9 @@ export function PasskeysSetting({
   locale: localeProp,
   labels: labelsProp,
   className,
-}: PasskeysSettingProps) {
+  rowProps,
+  ...rest
+}: PasskeysSettingProps<Id>) {
   const labels = useAccountSettingsLabels("passkeys", labelsProp);
   const locale = useKitLocale(localeProp);
   const [name, setName] = useState("");
@@ -126,6 +146,7 @@ export function PasskeysSetting({
                 item={item}
                 created={date(item.createdAt)}
                 lastUsed={date(item.lastUsedAt)}
+                attributes={rowProps?.(item)}
                 busy={busyId !== undefined && busyId !== null && busyId === item.id}
                 onRename={onRename}
                 onDelete={onDelete}
@@ -160,7 +181,8 @@ export function PasskeysSetting({
   })();
 
   return (
-    <Card className={cn("p-4 space-y-3", className)}>
+    // `rest` is only `id` and `data-*`: everything else the props name is destructured.
+    <Card {...rest} className={cn("p-4 space-y-3", className)}>
       <div>
         <div className="text-sm font-medium">{labels.title}</div>
         <div className="text-xs text-[var(--text-muted)]">
@@ -174,21 +196,23 @@ export function PasskeysSetting({
 
 type RowMode = "view" | "rename" | "delete";
 
-function PasskeyRow({
+function PasskeyRow<Id extends PasskeyId>({
   item,
   created,
   lastUsed,
+  attributes,
   busy,
   onRename,
   onDelete,
   labels,
 }: {
-  item: PasskeyItem;
+  item: PasskeyItem<Id>;
   created: string | null;
   lastUsed: string | null;
+  attributes?: { id?: string } & PasskeyDataAttributes;
   busy: boolean;
-  onRename?: PasskeysSettingProps["onRename"];
-  onDelete?: PasskeysSettingProps["onDelete"];
+  onRename?: PasskeysSettingProps<Id>["onRename"];
+  onDelete?: PasskeysSettingProps<Id>["onDelete"];
   labels: PasskeysSettingLabels;
 }) {
   const [mode, setMode] = useState<RowMode>("view");
@@ -241,13 +265,16 @@ function PasskeyRow({
       .catch(() => {});
   };
 
+  // On every mode's <li>, so an id the app scrolls to survives a rename or a confirm.
+  const li = { ...attributes, "data-passkey-id": String(item.id) };
+
   const meta = [created && labels.created(created), lastUsed ? labels.lastUsed(lastUsed) : labels.neverUsed]
     .filter(Boolean)
     .join(" · ");
 
   if (mode === "rename") {
     return (
-      <li className="flex flex-wrap items-center gap-2 py-2">
+      <li {...li} className="flex flex-wrap items-center gap-2 py-2">
         <Input
           ref={renameRef}
           aria-label={labels.renameField(item.name)}
@@ -278,7 +305,7 @@ function PasskeyRow({
 
   if (mode === "delete") {
     return (
-      <li className="space-y-2 py-2">
+      <li {...li} className="space-y-2 py-2">
         <p role="alert" className="text-sm">
           {labels.deleteConfirm(item.name)}
         </p>
@@ -295,7 +322,7 @@ function PasskeyRow({
   }
 
   return (
-    <li className="flex items-center gap-3 py-2">
+    <li {...li} className="flex items-center gap-3 py-2">
       <KeyRound className="size-4 shrink-0 text-[var(--text-muted)]" aria-hidden />
       <div className="min-w-0 flex-1">
         <div className="truncate text-sm font-medium">{item.name}</div>

package/src/components/progress-bar.tsx

@@ -105,6 +105,12 @@ export interface ProgressBarSegment {
 }
 
 export interface ProgressBarProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "role"> {
+  /**
+   * `"span"` builds the bar from spans, for a place only phrasing content may go: inside
+   * a button or a link (ListItem's `content`). The `legend` stays a list, so leave it off
+   * there. Default `"div"`.
+   */
+  as?: "div" | "span";
   /** Where it stands. Leave it undefined for an INDETERMINATE bar — work is under way
    *  and nobody knows how much is left (an import that reports no count). */
   value?: number;
@@ -155,8 +161,11 @@ export interface ProgressBarProps extends Omit<ComponentPropsWithoutRef<"div">,
   legend?: boolean;
   /**
    * What a legend row shows at its end, in place of the part's formatted value — which
-   * it is handed, with the segment and its index. keksdose's cut card shows the share
-   * AND a private outflow amount per bucket (cut-card:150), which one figure could not:
+   * it is handed, with the segment and its index. That value is the part's OWN, signed
+   * and unclamped (`formatValue`, or a percentage of the scale): a part of −40 on a
+   * 0–100 scale says "-40%" though the bar draws nothing for it. keksdose's cut card
+   * shows the share AND a private outflow amount per bucket (cut-card:150), which one
+   * figure could not:
    * `legendValue={(seg, share) => <>{share} <Amount … /></>}`.
    */
   legendValue?: (segment: ProgressBarSegment, formatted: string, index: number) => ReactNode;
@@ -209,11 +218,17 @@ export function ProgressBar({
   overage,
   labels,
   className,
+  as = "div",
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
   "aria-describedby": ariaDescribedBy,
   ...rest
 }: ProgressBarProps) {
+  // `as="span"`: the same bar from phrasing elements only, so it is valid inside a
+  // <button> or <a> — ListItem's `content` puts a budget bar inside the row's target
+  // (keksdose P2). Every span is made a block except those already laid out as flex.
+  const Tag = as;
+  const inlineClass = as === "span" ? "block [&_span:not(.flex):not(.inline-flex)]:block" : undefined;
   const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
   const text = useKitLabels("progressBar", DEFAULT_PROGRESS_BAR_LABELS, labels);
   const kitLocale = useKitLocale(locale);
@@ -236,8 +251,8 @@ export function ProgressBar({
           ? formatValue(value, Infinity, min)
           : new Intl.NumberFormat(kitLocale).format(value);
     return (
-      <div {...rest} className={cn("min-w-0", className)} data-state="unlimited">
-        <div className="flex items-baseline gap-2 text-sm">
+      <Tag {...rest} className={cn("min-w-0", inlineClass, className)} data-state="unlimited">
+        <Tag className="flex items-baseline gap-2 text-sm">
           {label != null && (
             <span id={labelId} className="min-w-0 text-[var(--text-secondary)]">
               {label}
@@ -247,9 +262,9 @@ export function ProgressBar({
             {shown !== undefined && `${shown} · `}
             {text.unlimited}
           </span>
-        </div>
+        </Tag>
         {hintNode}
-      </div>
+      </Tag>
     );
   }
   const max = maxProp;
@@ -269,9 +284,21 @@ export function ProgressBar({
       : new Intl.NumberFormat(kitLocale, { style: "percent", maximumFractionDigits: 0 }).format(
           span <= 0 ? 0 : (Math.min(max, Math.max(min, v)) - min) / span,
         );
+  // A PART is stated as its own value, sign and all — not as the slice of track it
+  // draws. The bar cannot draw a negative part (a refund inside a month's spending) or
+  // one past `max`, but the legend and the reader can still say it: before 0.16 a
+  // −CHF 40 part read "0 %" in both, and keksdose had to pass `legendValue` just to get
+  // the minus back. For a part inside `min`–`max` this is the same text as before.
+  const formatPart = (v: number) => {
+    if (!Number.isFinite(v)) return format(min);
+    if (formatValue) return formatValue(v, max, min);
+    return new Intl.NumberFormat(kitLocale, { style: "percent", maximumFractionDigits: 0 }).format(
+      span <= 0 ? 0 : (v - min) / span,
+    );
+  };
   const partTexts = stacked
     ? barParts.map((seg) => {
-        const text = format(min + partValue(seg.value));
+        const text = formatPart(seg.value);
         return typeof seg.label === "string" || typeof seg.label === "number"
           ? common.fieldValue(String(seg.label), text)
           : text;
@@ -306,9 +333,9 @@ export function ProgressBar({
   const name = labelledBy ? undefined : (ariaLabel ?? (indeterminate ? common.loading : undefined));
 
   return (
-    <div className={cn("min-w-0", className)} data-state={indeterminate ? "indeterminate" : "determinate"}>
+    <Tag className={cn("min-w-0", inlineClass, className)} data-state={indeterminate ? "indeterminate" : "determinate"}>
       {(label != null || (showValue && valueText !== undefined)) && (
-        <div className="mb-1 flex items-baseline gap-2 text-sm">
+        <Tag className="mb-1 flex items-baseline gap-2 text-sm">
           {label != null && (
             <span id={labelId} className="min-w-0 text-[var(--text-secondary)]">
               {label}
@@ -321,9 +348,9 @@ export function ProgressBar({
               {valueText}
             </span>
           )}
-        </div>
+        </Tag>
       )}
-      <div
+      <Tag
         {...rest}
         role={meter ? "meter" : "progressbar"}
         aria-label={name}
@@ -341,10 +368,10 @@ export function ProgressBar({
         {stacked ? (
           // The parts in a flex row with a 2px gap, so two neighbouring steps of one
           // hue are parted by the track rather than by their difference in lightness.
-          <div className="flex h-full w-full gap-0.5">
+          <Tag className="flex h-full w-full gap-0.5">
             {segments.map((seg, i) =>
               seg.legendOnly ? null : (
-                <div
+                <Tag
                   key={seg.key ?? i}
                   data-part="segment"
                   className={cn(
@@ -358,9 +385,9 @@ export function ProgressBar({
                 />
               ),
             )}
-          </div>
+          </Tag>
         ) : indeterminate ? (
-          <div
+          <Tag
             data-part="fill"
             className={cn(
               // `left-0`, deliberately physical: the keyframes (tokens.css
@@ -375,7 +402,7 @@ export function ProgressBar({
             )}
           />
         ) : (
-          <div
+          <Tag
             data-part="fill"
             // Block flow starts at the inline start, so a plain width fills from the
             // right under `dir="rtl"` with nothing extra.
@@ -383,7 +410,7 @@ export function ProgressBar({
             style={{ width: `${fraction * 100}%` }}
           />
         )}
-      </div>
+      </Tag>
       {stacked && legend && segments.length > 0 && (
         <ul className="mt-2 space-y-1 text-sm" data-part="legend">
           {segments.map((seg, i) => (
@@ -400,9 +427,7 @@ export function ProgressBar({
                 <span className="min-w-0 flex-1 truncate text-[var(--text-secondary)]">{seg.label}</span>
               )}
               <span className="ms-auto shrink-0 text-xs tabular-nums text-[var(--text-muted)]">
-                {legendValue
-                  ? legendValue(seg, format(min + partValue(seg.value)), i)
-                  : format(min + partValue(seg.value))}
+                {legendValue ? legendValue(seg, formatPart(seg.value), i) : formatPart(seg.value)}
               </span>
             </li>
           ))}
@@ -410,6 +435,6 @@ export function ProgressBar({
       )}
       {overageNode}
       {hintNode}
-    </div>
+    </Tag>
   );
 }

package/src/components/signed-amount.tsx

@@ -78,6 +78,17 @@ export type GoodDirection = "up" | "down";
  */
 export type SignedAmountTone = "signed" | "income" | "expense" | "neutral" | "verdict";
 
+/**
+ * The colours a VERDICT is painted in (`goodDirection` set, or `tone="verdict"`):
+ *  - `status` (default) — `success` / `danger`: good news, bad news.
+ *  - `money` — `income` / `expense` (the `.text-money-pos` / `.text-money-neg` pair):
+ *    the app's ONE money palette (keksdose dev#434). A grocery price going UP is money
+ *    going out, so with `goodDirection="down"` it wears the expense colour every other
+ *    outflow in the app wears — not a red that says "error". keksdose coloured its
+ *    three price-change sites by hand for want of this.
+ */
+export type VerdictPalette = "status" | "money";
+
 /** What a signed figure says to a screen reader, whose readers disagree about a
  *  leading "+" (most skip it) and a "−" (some read "dash", some nothing). */
 export interface SignedAmountLabels {
@@ -117,18 +128,28 @@ function useMagnitudeFormatter({ currency, unit, compact, digits, format, locale
   };
 }
 
-function directionOf(value: number): "up" | "down" | "flat" {
-  return value > 0 ? "up" : value < 0 ? "down" : "flat";
+/** `flatWithin` widens "no change" from exactly zero to a band round it: a price that
+ *  moved by a fraction of a cent, a ratio that rounds to "0.0 %", is not a rise, and an
+ *  arrow and a colour for it claim one. Inclusive — `|value| ≤ flatWithin` is flat. */
+function directionOf(value: number, flatWithin = 0): "up" | "down" | "flat" {
+  if (Math.abs(value) <= Math.max(0, flatWithin)) return "flat";
+  return value > 0 ? "up" : "down";
+}
+
+function verdictClass(good: boolean, palette: VerdictPalette): string {
+  if (palette === "money") return good ? TEXT_TONE.income : TEXT_TONE.expense;
+  return good ? TEXT_TONE.success : TEXT_TONE.danger;
 }
 
 function signedToneClass(
   tone: SignedAmountTone,
   dir: "up" | "down" | "flat",
   goodDirection: GoodDirection | undefined,
+  palette: VerdictPalette,
 ): string {
   if (tone === "verdict" || (goodDirection && tone === "signed")) {
     if (dir === "flat" || !goodDirection) return TEXT_TONE.muted;
-    return dir === goodDirection ? TEXT_TONE.success : TEXT_TONE.danger;
+    return verdictClass(dir === goodDirection, palette);
   }
   if (tone === "signed") return dir === "flat" ? TEXT_TONE.muted : dir === "up" ? TEXT_TONE.income : TEXT_TONE.expense;
   if (tone === "neutral") return "";
@@ -143,8 +164,16 @@ export interface SignedAmountProps
   value: number;
   /** See {@link SignedAmountTone}. Default `signed`, or `verdict` with `goodDirection`. */
   tone?: SignedAmountTone;
-  /** Which way is good news — colours by verdict (`success` / `danger`). */
+  /** Which way is good news — colours by verdict (`success` / `danger`, or the money
+   *  pair with `palette="money"`). */
   goodDirection?: GoodDirection;
+  /** See {@link VerdictPalette}. Default `status`. Only a verdict reads it. */
+  palette?: VerdictPalette;
+  /** A magnitude up to which the figure counts as NO change: no sign, no arrow but the
+   *  flat dash, muted, spoken without "plus"/"minus" (inclusive; default 0). The digits
+   *  still print `|value|` — use a band below the display precision, where they round
+   *  to zero anyway (`flatWithin={0.005}` at two digits). */
+  flatWithin?: number;
   /** Print "+" before a positive figure (default `true`). A negative always shows its
    *  minus; zero shows neither. */
   showPlus?: boolean;
@@ -177,6 +206,8 @@ export function SignedAmount({
   locale,
   tone = "signed",
   goodDirection,
+  palette = "status",
+  flatWithin,
   showPlus = true,
   arrow = false,
   sensitive = false,
@@ -187,7 +218,7 @@ export function SignedAmount({
   const text = useKitLabels("signedAmount", DEFAULT_SIGNED_AMOUNT_LABELS, labels);
   const fmt = useMagnitudeFormatter({ currency, unit, compact, digits, format, locale });
   const finite = Number.isFinite(value);
-  const dir = finite ? directionOf(value) : "flat";
+  const dir = finite ? directionOf(value, flatWithin) : "flat";
   const amount = finite ? fmt(Math.abs(value)) : "—";
   // U+2212, the typographic minus: the same width as "+", so a column of signed figures
   // lines up under `tabular-nums`.
@@ -201,7 +232,7 @@ export function SignedAmount({
       data-direction={dir}
       className={cn(
         "relative inline-flex items-center gap-0.5 whitespace-nowrap tabular-nums",
-        signedToneClass(tone, dir, goodDirection),
+        signedToneClass(tone, dir, goodDirection, palette),
         className,
       )}
     >
@@ -221,6 +252,12 @@ export interface DeltaProps extends SignedFormatProps, Omit<ComponentPropsWithou
   /** Which way is good news. Unset, the change is stated and not judged (muted); set,
    *  it is coloured `success` / `danger` and its sentence says "(better)" / "(worse)". */
   goodDirection?: GoodDirection;
+  /** See {@link VerdictPalette}: `money` paints good news `income` and bad news
+   *  `expense` instead of `success` / `danger`. Default `status`. */
+  palette?: VerdictPalette;
+  /** See {@link SignedAmountProps.flatWithin}: up to this magnitude the change is
+   *  "unchanged" — flat dash, muted, no verdict. Default 0. */
+  flatWithin?: number;
   /** What it is measured against, after it: "vs last month". */
   label?: ReactNode;
   /** Hide the arrow (shown by default, as on a StatTile). At zero the arrow is a flat
@@ -249,6 +286,8 @@ export function Delta({
   format,
   locale,
   goodDirection,
+  palette = "status",
+  flatWithin,
   label,
   arrow = true,
   sensitive = false,
@@ -260,14 +299,14 @@ export function Delta({
   const fmt = useMagnitudeFormatter({ currency, unit, compact, digits, format, locale });
   if (!Number.isFinite(value)) return null;
   const amount = fmt(Math.abs(value));
-  const dir = directionOf(value);
+  const dir = directionOf(value, flatWithin);
   const Icon = ARROW[dir];
   let spoken = dir === "up" ? text.increase(amount) : dir === "down" ? text.decrease(amount) : text.unchanged;
   let tone = TEXT_TONE.muted;
   if (goodDirection && dir !== "flat") {
     const good = dir === goodDirection;
     spoken = good ? text.better(spoken) : text.worse(spoken);
-    tone = good ? TEXT_TONE.success : TEXT_TONE.danger;
+    tone = verdictClass(good, palette);
   }
   return (
     <span