@eifi1/ui-kit 0.16.1 → 0.18.0

package/src/components/line-items.tsx

@@ -53,8 +53,10 @@ export interface LineItemCellContext<T> {
  *  so the list draws no header for it. */
 export type LineItemsFieldLabels = "aria" | "floating";
 
-/** The colour of a {@link LineItemsSummary}'s value. */
-export type LineItemsSummaryTone = "neutral" | "success" | "danger" | "muted";
+/** The colour of a {@link LineItemsSummary}'s value — a verdict (`success` /
+ *  `danger`), quiet (`muted`), or the money pair (`income` / `expense`, the colours
+ *  `SignedAmount` draws a figure in) for a remainder that reads as the row it settles. */
+export type LineItemsSummaryTone = "neutral" | "success" | "danger" | "muted" | "income" | "expense";
 
 /**
  * A line under the lines that says where they stand — a split's remainder ("Left to
@@ -65,13 +67,28 @@ export interface LineItemsSummary {
   label: ReactNode;
   value?: ReactNode;
   /** The value's colour. Default `neutral`. The label stays neutral: the colour is a
-   *  second signal, never the only one — the value and label carry the meaning. */
+   *  second signal, never the only one — the value and label carry the meaning.
+   *  With no `value` the line is a state on its own ("Waiting for the total"), and
+   *  the tone colours the label instead — `muted` quiets the whole line. */
   tone?: LineItemsSummaryTone;
+  /** Beside the value: a chip or badge that names the state ("Balanced" next to a
+   *  journal entry's zero difference). */
+  status?: ReactNode;
   /** A small button at the end of the line. Disabled along with the list's
-   *  `disabled`. */
-  action?: { label: ReactNode; onClick: () => void; disabled?: boolean };
+   *  `disabled`. `variant`: `secondary` (default) is a boxed button; `link` a muted
+   *  text link, for an action that is an aside rather than the way to settle it. */
+  action?: { label: ReactNode; onClick: () => void; disabled?: boolean; variant?: "secondary" | "link" };
 }
 
+/** Where a row's remove button sits. `row` (default): stacked, a row of the card to
+ *  itself (paired, the whole width); wide, its own track. `inline`: stacked, beside
+ *  the row's last field ("category + amount" over "memo + delete"); wide, unchanged. */
+export type LineItemsRemovePlacement = "row" | "inline";
+
+/** How the remove button sits in the height of a wide row: at its top, centred, or at
+ *  its foot. */
+export type LineItemsRemoveAlign = "start" | "center" | "end";
+
 export interface LineItemsColumn<T> {
   /** Stable id: the React key, and the key into `totals`. */
   key: string;
@@ -143,6 +160,14 @@ export interface LineItemsProps<T> extends Omit<ComponentPropsWithoutRef<"div">,
    *  them up (a column's `narrowSpan={2}` takes a whole row), once the pane is wide
    *  enough for two fields (18rem); narrower still, one. Default `1`. */
   narrowColumns?: 1 | 2;
+  /** Stacked, where the remove button goes: a row of its own (`row`, default) or
+   *  beside the last field (`inline`). See {@link LineItemsRemovePlacement}. */
+  removePlacement?: LineItemsRemovePlacement;
+  /** On the wide grid, the remove button's place in the row's height. Default `start`
+   *  — or `center` when a column floats its label (`fieldLabels="floating"`): a
+   *  floating field is taller than the button, and centred is level with its control.
+   *  A field that shows a message under itself grows the row; pin `start` then. */
+  removeAlign?: LineItemsRemoveAlign;
   /** Disables add and remove (the fields are the caller's to disable). */
   disabled?: boolean;
   labels?: Partial<LineItemsLabels>;
@@ -154,6 +179,14 @@ const SUMMARY_TONE: Record<LineItemsSummaryTone, string> = {
   success: "text-[var(--success)]",
   danger: "text-[var(--danger)]",
   muted: "text-[var(--text-muted)]",
+  // SignedAmount's money palette (toneTextClass "income" / "expense").
+  income: "text-[var(--money-income)]",
+  expense: "text-[var(--money-expense)]",
+};
+const REMOVE_ALIGN: Record<LineItemsRemoveAlign, string> = {
+  start: "@lg:self-start",
+  center: "@lg:self-center",
+  end: "@lg:self-end",
 };
 const FOCUSABLE =
   "input:not([disabled]):not([type=hidden]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex='-1'])";
@@ -217,6 +250,8 @@ export function LineItems<T>({
   summary,
   fieldLabels = "aria",
   narrowColumns = 1,
+  removePlacement = "row",
+  removeAlign: removeAlignProp,
   disabled = false,
   labels: labelsProp,
   className,
@@ -292,6 +327,9 @@ export function LineItems<T>({
   // its own label, a row of headers would say each name twice.
   const showHeader = columns.some((c) => !floats(c));
   const pairs = narrowColumns === 2;
+  const removeAlign = removeAlignProp ?? (columns.some(floats) ? "center" : "start");
+  const inline = removePlacement === "inline" && Boolean(onRemove) && columns.length > 0;
+  const lastColumn = columns[columns.length - 1];
 
   const headerCell = (column: LineItemsColumn<T>) => (
     <span
@@ -305,7 +343,43 @@ export function LineItems<T>({
     </span>
   );
 
+  const removeCell = (index: number, row: number, isConfirming: boolean) => (
+    <div
+      data-line-items-remove-cell=""
+      className={cn(
+        "flex justify-end @lg:justify-center",
+        REMOVE_ALIGN[removeAlign],
+        // Paired, the remove button keeps a row of its own at the card's end rather
+        // than squeezing in beside the last field — unless asked to go `inline`.
+        inline ? "shrink-0" : pairs && "@2xs:col-span-2 @lg:col-span-1",
+      )}
+    >
+      <IconButton
+        type="button"
+        data-line-items-remove=""
+        variant={isConfirming ? "danger" : "ghost"}
+        tone={isConfirming ? undefined : "danger"}
+        label={isConfirming ? labels.confirmRemove(row) : labels.remove(row)}
+        disabled={!canRemove}
+        onClick={() => void removeAt(index)}
+        onBlur={() => {
+          if (isConfirming) setConfirming(null);
+        }}
+        onKeyDown={(e) => {
+          if (e.key === "Escape" && isConfirming) {
+            e.stopPropagation();
+            setConfirming(null);
+          }
+        }}
+      >
+        <Trash2 />
+      </IconButton>
+    </div>
+  );
+
   const showTotals = totals !== undefined;
+  const summaryTone = summary?.tone ?? "neutral";
+  const summaryHasValue = hasContent(summary?.value);
   const labelColumn = showTotals ? columns.find((c) => !hasContent(totals[c.key]))?.key : undefined;
 
   return (
@@ -355,13 +429,15 @@ export function LineItems<T>({
           >
             {columns.map((column) => {
               const floating = floats(column);
-              return (
+              const isLast = inline && column === lastColumn;
+              const span = pairs && column.narrowSpan === 2 && "@2xs:col-span-2 @lg:col-span-1";
+              const cell = (
                 <div
                   key={column.key}
                   className={cn(
                     "min-w-0 space-y-1 @lg:space-y-0",
                     // The wide grid places every cell in its own track again.
-                    pairs && column.narrowSpan === 2 && "@2xs:col-span-2 @lg:col-span-1",
+                    isLast ? "flex-1" : span,
                   )}
                 >
                   {!floating && (
@@ -377,33 +453,23 @@ export function LineItems<T>({
                   })}
                 </div>
               );
-            })}
-            {onRemove && (
-              // Paired, the remove button keeps a row of its own at the card's end
-              // rather than squeezing in beside the last field.
-              <div className={cn("flex justify-end @lg:justify-center", pairs && "@2xs:col-span-2 @lg:col-span-1")}>
-                <IconButton
-                  type="button"
-                  data-line-items-remove=""
-                  variant={isConfirming ? "danger" : "ghost"}
-                  tone={isConfirming ? undefined : "danger"}
-                  label={isConfirming ? labels.confirmRemove(row) : labels.remove(row)}
-                  disabled={!canRemove}
-                  onClick={() => void removeAt(index)}
-                  onBlur={() => {
-                    if (isConfirming) setConfirming(null);
-                  }}
-                  onKeyDown={(e) => {
-                    if (e.key === "Escape" && isConfirming) {
-                      e.stopPropagation();
-                      setConfirming(null);
-                    }
-                  }}
+              if (!isLast) return cell;
+              // Inline, the last field and the remove button share one cell of the
+              // card; on the wide grid the wrapper dissolves (`contents`) and each is a
+              // track of its own again. Level with the field's control: its foot under
+              // a header copy, its middle when it floats its own label.
+              return (
+                <div
+                  key={column.key}
+                  data-line-items-inline=""
+                  className={cn("flex min-w-0 gap-2 @lg:contents", floating ? "items-center" : "items-end", span)}
                 >
-                  <Trash2 />
-                </IconButton>
-              </div>
-            )}
+                  {cell}
+                  {removeCell(index, row, isConfirming)}
+                </div>
+              );
+            })}
+            {onRemove && !inline && removeCell(index, row, isConfirming)}
           </div>
         );
       })}
@@ -454,19 +520,29 @@ export function LineItems<T>({
           data-line-items-summary=""
           className="flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-[var(--text-primary)]"
         >
-          <span className="min-w-0">{summary.label}</span>
-          {hasContent(summary.value) && (
-            <span
-              data-tone={summary.tone ?? "neutral"}
-              className={cn("font-semibold tabular-nums", SUMMARY_TONE[summary.tone ?? "neutral"])}
-            >
+          {/* With no value the line is a state of its own, and the label takes the
+              tone — the only place left to carry it. */}
+          <span
+            data-tone={summaryHasValue ? undefined : summaryTone}
+            className={cn("min-w-0", !summaryHasValue && SUMMARY_TONE[summaryTone])}
+          >
+            {summary.label}
+          </span>
+          {summaryHasValue && (
+            <span data-tone={summaryTone} className={cn("font-semibold tabular-nums", SUMMARY_TONE[summaryTone])}>
               {summary.value}
             </span>
           )}
+          {hasContent(summary.status) && (
+            <span data-line-items-summary-status="" className="inline-flex">
+              {summary.status}
+            </span>
+          )}
           {summary.action && (
             <Button
               type="button"
-              variant="secondary"
+              variant={summary.action.variant === "link" ? "link" : "secondary"}
+              tone={summary.action.variant === "link" ? "muted" : undefined}
               size="sm"
               className="ms-auto"
               disabled={disabled || summary.action.disabled}

package/src/components/list.tsx

@@ -160,7 +160,12 @@ interface ListItemBaseProps {
    * never operated — no buttons, links or inputs (invalid HTML in a button, and folded
    * into its name). Its text joins the row's accessible name, so give a bar that only
    * repeats a figure already in the row `aria-hidden`. Rendered in a block `<span>`,
-   * full width of the text column. Strictly a button holds phrasing content only; the
+   * full width of the TEXT COLUMN only — the column the title and subtitle are in, not
+   * the whole row: it starts after the {@link icon} / {@link leading} and stops where
+   * {@link trailing} begins, so a meter under a row with a trailing figure is as wide as
+   * the title, not run on under the figure (keksdose's budget rows). For a bar across
+   * the full row, put it in {@link children} (outside the target) or leave `trailing`
+   * off and show the figure in `meta`. Strictly a button holds phrasing content only; the
    * kit's `ProgressBar` draws `<div>`s, which every browser lays out and reads fine
    * there but an HTML validator flags.
    */
@@ -280,6 +285,13 @@ interface ListItemBaseProps {
    * the list's child and keeps both. The `<li>` becomes a column and the row takes the
    * full width, so an inline wrapper (the tooltip's `inline-flex` span) still stretches
    * the row across the list.
+   *
+   * `row` is the row BOX (a `<div>`), not the target: a wrapper that forces a prop onto
+   * its child with `cloneElement` — a save guard that injects `disabled` while a form is
+   * dirty (keksdose's SaveGuard) — sets it on that div, where it does nothing, and the
+   * button inside stays live. Pass `disabled` (or `loading`) to the ListItem yourself,
+   * from the same state the guard reads, and let the wrapper only explain it:
+   * `<ListItem disabled={dirty} renderRow={(row) => <Tooltip label="Save first">{row}</Tooltip>} />`.
    */
   renderRow?: (row: ReactElement) => ReactNode;
   /** Reaches the main target — the element with the row's name and action. */

package/src/components/number-field.tsx

@@ -154,26 +154,27 @@ const FIELD_ERROR_CLASS = "mt-1 text-[11px] leading-tight text-[var(--danger)]";
  * digit grouping — "1.000" would read as a thousand in German and as one in English,
  * and a field that parses its own display back must not have that ambiguity.
  */
-export function NumberField({
-  value,
-  onCommit,
-  onValueChange,
-  digits,
-  min,
-  max,
-  nullable = false,
-  unit,
-  unitPlacement = "suffix",
-  locale: localeProp,
-  label,
-  invalid,
-  error,
-  id,
-  "aria-describedby": ariaDescribedBy,
-  "aria-invalid": ariaInvalid,
-  "aria-required": ariaRequired,
-  ...rest
-}: NumberFieldProps) {
+export function NumberField(props: NumberFieldProps) {
+  const {
+    value,
+    onCommit,
+    onValueChange,
+    digits,
+    min,
+    max,
+    nullable = false,
+    unit,
+    unitPlacement = "suffix",
+    locale: localeProp,
+    label,
+    invalid,
+    error,
+    id,
+    "aria-describedby": ariaDescribedBy,
+    "aria-invalid": ariaInvalid,
+    "aria-required": ariaRequired,
+    ...rest
+  } = props;
   const locale = useKitLocale(localeProp);
   const mark = decimalMark(locale);
   const localize = (text: string) => (mark === "," ? text.replace(/\./g, ",") : text);
@@ -292,15 +293,20 @@ export function NumberField({
       invalid={invalid || hasError || ariaInvalid === true || ariaInvalid === "true"}
     />
   );
-  // Same shape as Input's FieldGroup: no wrapper at all without a message, so adding
-  // `error` support changed nothing about the DOM a flex row lays out.
-  if (!hasError) return field;
+  // Input's FieldGroup, restated: no wrapper for a field that never takes `error`, so
+  // the prop changed nothing about the DOM a flex row lays out — and a STEADY one for a
+  // field that does, message or not. Wrapping only while a message showed swapped the
+  // element above the <input>, which remounted it: focus, caret and the half-typed
+  // draft's keystrokes were lost the moment the message came or went.
+  if (!hasError && !("error" in props)) return field;
   return (
     <div>
       {field}
-      <p id={errorId} className={FIELD_ERROR_CLASS}>
-        {error}
-      </p>
+      {hasError && (
+        <p id={errorId} className={FIELD_ERROR_CLASS}>
+          {error}
+        </p>
+      )}
     </div>
   );
 }

package/src/components/passkeys-setting.tsx

@@ -42,6 +42,32 @@ export interface PasskeysSettingProps<Id extends PasskeyId = PasskeyId> extends
    * the user cancelling the OS prompt) keeps what was typed.
    */
   onAdd: (name: string) => void | Promise<unknown>;
+  /**
+   * A step the app runs BEFORE `onAdd` (0.18.0) — re-asking for the current password,
+   * a policy notice, anything that may stop the add. Called with the same trimmed name;
+   * resolve `true` to go on to `onAdd`, `false` to stop quietly (nothing is said, the
+   * typed name stays). A rejection, or a throw, stops the same way: the app reports
+   * its own errors. While it runs the add button is disabled and busy, so a second
+   * click cannot start a second check.
+   *
+   * Kurvenschmiede asked for the password in its own dialog by handing `onAdd` a
+   * promise it kept open across that dialog (passkeys-card.tsx) — which still works.
+   * This is the documented place for it: open the dialog here, resolve with whether it
+   * was confirmed, and keep what it produced (the server's registration options) for
+   * `onAdd` in a ref. The ceremony then starts from the dialog's click rather than the
+   * card's, which is the user activation `navigator.credentials.create` wants.
+   *
+   * Left out, `onAdd` is called synchronously in the click, exactly as before.
+   */
+  beforeAdd?: (name: string) => boolean | Promise<boolean>;
+  /**
+   * What a passkey does to the password, which picks the line under the title (0.18.0).
+   * `"instead"` (default): it replaces it — `labels.description`, kastlan's promise.
+   * `"alongside"`: the password stays and the passkey is a second way in —
+   * `labels.descriptionAlongside`. Kurvenschmiede overrode `description` for exactly
+   * this; an app that sets `mode` needs no override.
+   */
+  mode?: "instead" | "alongside";
   /** 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. */
@@ -92,6 +118,8 @@ export function PasskeysSetting<Id extends PasskeyId = PasskeyId>({
   passkeys,
   loading,
   onAdd,
+  beforeAdd,
+  mode = "instead",
   adding = false,
   onRename,
   onDelete,
@@ -108,6 +136,10 @@ export function PasskeysSetting<Id extends PasskeyId = PasskeyId>({
   const labels = useAccountSettingsLabels("passkeys", labelsProp);
   const locale = useKitLocale(localeProp);
   const [name, setName] = useState("");
+  // `beforeAdd` is running. State for the button, and a ref for the guard: two clicks
+  // in one frame both read the state from before either set it.
+  const [checking, setChecking] = useState(false);
+  const checkingRef = useRef(false);
 
   const date = (value: PasskeyItem["createdAt"]): string | null => {
     if (value === null || value === undefined || value === "") return null;
@@ -117,13 +149,40 @@ export function PasskeysSetting<Id extends PasskeyId = PasskeyId>({
   };
 
   const add = () => {
-    if (adding) return;
+    if (adding || checkingRef.current) return;
     const typed = name;
-    Promise.resolve(onAdd(typed.trim()))
-      // Clear only what was sent: the field stays editable while the OS prompt is up.
-      .then(() => setName((current) => (current === typed ? "" : current)))
-      .catch(() => {});
+    const value = typed.trim();
+    const send = () =>
+      Promise.resolve(onAdd(value))
+        // Clear only what was sent: the field stays editable while the OS prompt is up.
+        .then(() => setName((current) => (current === typed ? "" : current)));
+    if (!beforeAdd) {
+      send().catch(() => {});
+      return;
+    }
+    const done = () => {
+      checkingRef.current = false;
+      setChecking(false);
+    };
+    checkingRef.current = true;
+    setChecking(true);
+    let gate: Promise<boolean>;
+    // Called in the click, not a microtask later, so a step that itself needs the
+    // user's activation (a popup, the clipboard) still has it; a throw is a "no".
+    try {
+      gate = Promise.resolve(beforeAdd(value));
+    } catch (error) {
+      gate = Promise.reject(error);
+    }
+    gate
+      .then((go) => {
+        done();
+        // Strictly `true`: an app whose step resolves `undefined` meant nothing.
+        if (go === true) return send();
+      })
+      .catch(done);
   };
+  const busy = adding || checking;
 
   const isLoading = loading || passkeys === undefined;
   const items = passkeys ?? [];
@@ -171,7 +230,7 @@ export function PasskeysSetting<Id extends PasskeyId = PasskeyId>({
               }}
             />
           )}
-          <Button onClick={add} disabled={adding} aria-busy={adding || undefined}>
+          <Button onClick={add} disabled={busy} aria-busy={busy || undefined}>
             <KeyRound className="size-4" aria-hidden />
             {adding ? labels.adding : labels.add}
           </Button>
@@ -186,7 +245,9 @@ export function PasskeysSetting<Id extends PasskeyId = PasskeyId>({
       <div>
         <div className="text-sm font-medium">{labels.title}</div>
         <div className="text-xs text-[var(--text-muted)]">
-          {labels.description}
+          {mode === "alongside"
+            ? labels.descriptionAlongside
+            : labels.description}
         </div>
       </div>
       {body}

package/src/components/progress-bar.tsx

@@ -2,6 +2,8 @@ import { useId } from "react";
 import type { ComponentPropsWithoutRef, ReactNode } from "react";
 import { cn } from "../lib/cn";
 import { DEFAULT_COMMON_LABELS, useKitLabels, useKitLocale } from "../i18n/kit-labels";
+import { toneTextClass } from "./signed-amount";
+import type { TextTone } from "./signed-amount";
 
 /** The words a progress bar adds of its own. */
 export interface ProgressBarLabels {
@@ -169,6 +171,18 @@ export interface ProgressBarProps extends Omit<ComponentPropsWithoutRef<"div">,
    * `legendValue={(seg, share) => <>{share} <Amount … /></>}`.
    */
   legendValue?: (segment: ProgressBarSegment, formatted: string, index: number) => ReactNode;
+  /**
+   * The colour of each legend row's figure, as a {@link TextTone} — `toneTextClass`'s
+   * palette, the money pair included. Default `"muted"`: the legend explains the bar and
+   * should not outshout the headline above it. One tone for every row, or a function
+   * per row. A tone and not the segment's own `tone`: keksdose's tax card fills its
+   * three parts with one bucket's certainty ramp (`className`), while the FIGURES carry
+   * the bucket's money direction — `legendTone="expense"` for the tax owed — which it
+   * could only say before through `legendValue` and an app-side `Amount`. A function
+   * returning `undefined` keeps that row muted. Applies to `legendValue`'s node too
+   * (it inherits the colour unless it sets its own).
+   */
+  legendTone?: TextTone | ((segment: ProgressBarSegment, index: number) => TextTone | undefined);
   /** A muted line under the bar — the plan's reset date, "3 of 5 seats in use". It
    *  describes the bar (`aria-describedby`). */
   hint?: ReactNode;
@@ -180,6 +194,16 @@ export interface ProgressBarProps extends Omit<ComponentPropsWithoutRef<"div">,
    * `tone="danger"` if it should read as over. Ignored for `segments` and `max={null}`.
    */
   overage?: boolean | ((over: number) => ReactNode);
+  /**
+   * Tag every figure the bar PRINTS `data-private`, so the host's demo-mode rule blurs
+   * it — the attribute `StatTile sensitive` and `Tooltip redact` carry: the `showValue`
+   * text, each `legend` row's value (yours from `legendValue` too), the unlimited
+   * figure and the `overage` line. The track, the swatches and the part names stay
+   * readable — a blurred bar is no picture at all. Before this an app with a demo-mode
+   * blur had to pass `legendValue` only to wrap the figure in a tagged span (keksdose).
+   * The `aria-valuetext` is not touched: a screen reader is not a screen-share.
+   */
+  sensitive?: boolean;
   labels?: Partial<ProgressBarLabels>;
 }
 
@@ -214,8 +238,10 @@ export function ProgressBar({
   segments,
   legend = false,
   legendValue,
+  legendTone = "muted",
   hint,
   overage,
+  sensitive = false,
   labels,
   className,
   as = "div",
@@ -233,6 +259,7 @@ export function ProgressBar({
   const text = useKitLabels("progressBar", DEFAULT_PROGRESS_BAR_LABELS, labels);
   const kitLocale = useKitLocale(locale);
   const labelId = useId();
+  const priv = sensitive ? "" : undefined;
   const hintId = useId();
   const hintNode =
     hint != null ? (
@@ -258,7 +285,7 @@ export function ProgressBar({
               {label}
             </span>
           )}
-          <span data-part="unlimited" className="ms-auto shrink-0 tabular-nums text-[var(--text-muted)]">
+          <span data-part="unlimited" data-private={priv} className="ms-auto shrink-0 tabular-nums text-[var(--text-muted)]">
             {shown !== undefined && `${shown} · `}
             {text.unlimited}
           </span>
@@ -320,7 +347,7 @@ export function ProgressBar({
     overage && !stacked && value !== undefined && Number.isFinite(value) && value > max ? value - max : 0;
   const overageNode =
     over > 0 ? (
-      <p id={`${hintId}-over`} data-part="overage" className="mt-1 text-xs text-[var(--danger)]">
+      <p id={`${hintId}-over`} data-part="overage" data-private={priv} className="mt-1 text-xs text-[var(--danger)]">
         {typeof overage === "function"
           ? overage(over)
           : text.overLimit(new Intl.NumberFormat(kitLocale).format(over))}
@@ -344,7 +371,7 @@ export function ProgressBar({
           {showValue && valueText !== undefined && (
             // Hidden: the same words are the bar's aria-valuetext, and reading them
             // twice in a row is noise.
-            <span aria-hidden className="ms-auto shrink-0 tabular-nums text-[var(--text-muted)]">
+            <span aria-hidden data-part="value" data-private={priv} className="ms-auto shrink-0 tabular-nums text-[var(--text-muted)]">
               {valueText}
             </span>
           )}
@@ -426,7 +453,16 @@ export function ProgressBar({
               {seg.label != null && (
                 <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)]">
+              <span
+                data-part="legend-value"
+                data-private={priv}
+                className={cn(
+                  "ms-auto shrink-0 text-xs tabular-nums",
+                  toneTextClass(
+                    (typeof legendTone === "function" ? legendTone(seg, i) : legendTone) ?? "muted",
+                  ),
+                )}
+              >
                 {legendValue ? legendValue(seg, formatPart(seg.value), i) : formatPart(seg.value)}
               </span>
             </li>