@eifi1/ui-kit 0.52.0 → 0.54.0

package/src/billing/cancel-subscription.tsx

@@ -8,19 +8,14 @@ import { DialogFrame } from "../components/dialog-frame";
 import { COMMIT_EXCEPT_BILLING } from "../components/write-lock";
 import { useBillingLabels } from "./billing-labels";
 import type { BillingLabels } from "./billing-labels";
-import { dialogClose } from "./dialog-close";
-import type { WithDialogClose } from "./dialog-close";
 
-/** {@link CancelSubscriptionConfirmProps} before one of its two close props is required. */
-interface CancelSubscriptionConfirmFields {
+export interface CancelSubscriptionConfirmProps {
   open: boolean;
   /** The admin dismissed it — Back, Escape, the backdrop. Confirm leaves it open: close it
    *  once `POST /billing/cancel` answers. 0.52: every other kit dialog's `onClose`
-   *  (CONTRIBUTING §4; refactor audit 2026-10-30, API-5). */
-  onClose?: () => void;
-  /** @deprecated 0.52 — `onClose`, as every other kit dialog; removed in 0.53. Called with
-   *  `false` when there is no `onClose`. */
-  onOpenChange?: (open: boolean) => void;
+   *  (CONTRIBUTING §4; refactor audit 2026-10-30, API-5); required since 0.53 removed
+   *  `onOpenChange` (deprecated in 0.52). */
+  onClose: () => void;
   /** The overview's `current_period_end`: the day the subscription ends, in a sentence —
    *  the `<UiKitProvider formatDate>` (the app's date preference) when it set one, else the
    *  kit's `formatDate`, `"medium"`, in the provider's locale and `timeZone` (0.52). */
@@ -36,11 +31,6 @@ interface CancelSubscriptionConfirmFields {
   labels?: LabelOverride<BillingLabels>;
 }
 
-/** What {@link CancelSubscriptionConfirm} takes: `onClose`, or alone the deprecated
- *  `onOpenChange`, is required (0.52 code review: with neither it compiled, and nothing
- *  could dismiss it). */
-export type CancelSubscriptionConfirmProps = WithDialogClose<CancelSubscriptionConfirmFields>;
-
 /**
  * The in-app cancel's confirm (docs/billing-harmonization.md §16.2 decision 2, §16.4,
  * ui-kit 0.42): "Cancel subscription" for an admin the provider's portal doesn't open for
@@ -68,7 +58,6 @@ export type CancelSubscriptionConfirmProps = WithDialogClose<CancelSubscriptionC
 export function CancelSubscriptionConfirm({
   open,
   onClose,
-  onOpenChange,
   periodEnd,
   onConfirm,
   pending = false,
@@ -84,7 +73,7 @@ export function CancelSubscriptionConfirm({
       open={open}
       title={labels.cancelConfirmTitle}
       description={labels.cancelConfirmBody(day(periodEnd))}
-      onClose={dialogClose({ onClose, onOpenChange })}
+      onClose={onClose}
       busy={pending}
       data-cancel-subscription-confirm=""
       actions={(close) => (

package/src/billing/plan-card.tsx

@@ -14,8 +14,6 @@ import { Button } from "../components/button";
 import { DialogFrame } from "../components/dialog-frame";
 import { useBillingLabels } from "./billing-labels";
 import type { BillingLabels } from "./billing-labels";
-import { dialogClose } from "./dialog-close";
-import type { WithDialogClose } from "./dialog-close";
 import { BILLING_INTERVALS, billingCurrencyFor, formatPlanPrice, planPrice } from "./plan-price";
 import type { BillingCurrency, BillingInterval, PlanPrices } from "./plan-price";
 
@@ -502,16 +500,13 @@ export function PlanPicker({
   );
 }
 
-/** {@link GrantWarningConfirmProps} before one of its two close props is required. */
-interface GrantWarningConfirmFields {
+export interface GrantWarningConfirmProps {
   /** Shown, controlled. */
   open: boolean;
   /** "Back", Escape, the backdrop — and after "Buy anyway". 0.52: every other kit
-   *  dialog's `onClose` (CONTRIBUTING §4; refactor audit 2026-10-30, API-5). */
-  onClose?: () => void;
-  /** @deprecated 0.52 — `onClose`, as every other kit dialog; removed in 0.53. Called with
-   *  `false` when there is no `onClose`. */
-  onOpenChange?: (open: boolean) => void;
+   *  dialog's `onClose` (CONTRIBUTING §4; refactor audit 2026-10-30, API-5); required
+   *  since 0.53 removed `onOpenChange` (deprecated in 0.52). */
+  onClose: () => void;
   /** "Buy anyway": the app opens its checkout. The dialog closes itself after it. */
   onConfirm: () => void;
   /** Prop > `<UiKitProvider labels={{ billing }}>` > English: `grantWarningTitle`,
@@ -519,11 +514,6 @@ interface GrantWarningConfirmFields {
   labels?: LabelOverride<BillingLabels>;
 }
 
-/** What {@link GrantWarningConfirm} takes: `onClose`, or alone the deprecated
- *  `onOpenChange`, is required (0.52 code review: with neither it compiled, and nothing
- *  could dismiss it). */
-export type GrantWarningConfirmProps = WithDialogClose<GrantWarningConfirmFields>;
-
 /**
  * 0.42 (§16.8 B): the permanent-grant warning before a checkout — `grantWarningTitle`,
  * `grantWarningBody`, "Back" and "Buy anyway" (`grantWarningAction`). {@link PlanPicker}
@@ -533,22 +523,15 @@ export type GrantWarningConfirmProps = WithDialogClose<GrantWarningConfirmFields
  * to a checkout — show this before that checkout, so a permanent-grant holder is still
  * warned. Carries `data-grant-warning`.
  */
-export function GrantWarningConfirm({
-  open,
-  onClose,
-  onOpenChange,
-  onConfirm,
-  labels: labelsProp,
-}: GrantWarningConfirmProps) {
+export function GrantWarningConfirm({ open, onClose, onConfirm, labels: labelsProp }: GrantWarningConfirmProps) {
   const labels = useBillingLabels(labelsProp);
   const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
-  const close = dialogClose({ onClose, onOpenChange });
   return (
     <DialogFrame
       open={open}
       title={labels.grantWarningTitle}
       description={labels.grantWarningBody}
-      onClose={close}
+      onClose={onClose}
       data-grant-warning=""
       actions={(lower) => (
         <>
@@ -567,7 +550,7 @@ export function GrantWarningConfirm({
               // and the lowering panel is not inert: a double click on "Buy anyway" opened
               // the checkout twice (0.52 code review, plan-card.tsx). The caller's `open`
               // turning false still plays the exit.
-              close();
+              onClose();
             }}
           >
             {labels.grantWarningAction}

package/src/billing/plan-switch.tsx

@@ -13,8 +13,6 @@ import { COMMIT_EXCEPT_BILLING } from "../components/write-lock";
 import { DEFAULT_PLAN_CHANGE_LABELS } from "./plan-change-labels";
 import { useBillingLabels } from "./billing-labels";
 import type { BillingLabels } from "./billing-labels";
-import { dialogClose } from "./dialog-close";
-import type { WithDialogClose } from "./dialog-close";
 import type { PlanSwitchPreview } from "./billing-overview";
 import { minorToMajor } from "./plan-price";
 import type { BillingInterval } from "./plan-price";
@@ -39,16 +37,13 @@ export interface PlanSwitchSide {
   interval: BillingInterval;
 }
 
-/** {@link PlanSwitchConfirmProps} before one of its two close props is required. */
-interface PlanSwitchConfirmFields {
+export interface PlanSwitchConfirmProps {
   open: boolean;
   /** The payer dismissed it — Cancel, Escape, the backdrop. Confirm leaves it open: close
    *  it once the switch answers. 0.52: every other kit dialog's `onClose` (CONTRIBUTING
-   *  §4; refactor audit 2026-10-30, API-5). */
-  onClose?: () => void;
-  /** @deprecated 0.52 — `onClose`, as every other kit dialog; removed in 0.53. Called with
-   *  `false` when there is no `onClose`. */
-  onOpenChange?: (open: boolean) => void;
+   *  §4; refactor audit 2026-10-30, API-5); required since 0.53 removed `onOpenChange`
+   *  (deprecated in 0.52). */
+  onClose: () => void;
   /** What the payer pays now: the overview's `paid`. */
   from: PlanSwitchSide;
   /** The pick. */
@@ -88,11 +83,6 @@ interface PlanSwitchConfirmFields {
   labels?: LabelOverride<BillingLabels>;
 }
 
-/** What {@link PlanSwitchConfirm} takes: `onClose`, or alone the deprecated
- *  `onOpenChange`, is required (0.52 code review: with neither it compiled, and nothing
- *  could dismiss it). */
-export type PlanSwitchConfirmProps = WithDialogClose<PlanSwitchConfirmFields>;
-
 /**
  * The confirm for a plan switch (§15.2.10): from → to, each with its billing period;
  * Paddle's preview — "Charged now" (an upgrade) or "Credited towards your next charges"
@@ -118,7 +108,6 @@ export type PlanSwitchConfirmProps = WithDialogClose<PlanSwitchConfirmFields>;
 export function PlanSwitchConfirm({
   open,
   onClose,
-  onOpenChange,
   from,
   to,
   preview,
@@ -165,7 +154,7 @@ export function PlanSwitchConfirm({
       open={open}
       title={labels.switchTitle}
       description={labels.switchFromTo(side(from), side(to))}
-      onClose={dialogClose({ onClose, onOpenChange })}
+      onClose={onClose}
       busy={pending}
       // A preview that loads is busy too, but holds nothing: Cancel stays a way out.
       aria-busy={preview === undefined || undefined}

package/src/chart.ts

@@ -10,14 +10,24 @@
 // because the main barrel re-exports everything here too, so `import { Button } from
 // "@eifi1/ui-kit"` reaches recharts as well (packaging-contract.test.ts asserts it).
 export * from "./components/chart";
-export * from "./theme/chart-palette";
-// 0.52: the slice's share of the 55 names no app reads (refactor audit 2026-10-30, API-4,
-// decision 4), tagged on their specifiers as the barrel's are — the modules keep them.
+// Named, not `*`, for chart-palette, series-chart and toggle-legend: 0.53 took the slice's
+// share of the 55 names no app reads off the surface (deprecated in 0.52, refactor audit
+// 2026-10-30, API-4) — `EDGE_MIN_CONTRAST`, `resolveTooltipPlacement`, `STROKE_PATTERNS`,
+// which their modules keep for the kit's own use.
 export {
-  /** @deprecated 0.52 — `chartEdge`, which measures a fill against it (API-4); removed in 0.53 */
-  EDGE_MIN_CONTRAST,
-  /** @deprecated 0.52 — `--chart-ink` (`CHART_ROLES.outline`), the same ink as a token (API-4); removed in 0.53 */
-  CHART_INK_HEX,
+  PALETTE_SIZE,
+  CVD_ORDER,
+  paletteFor,
+  CHART_COLORS,
+  CHART_ROLES,
+  CHART_MUTED_HEX,
+  chartEdge,
+  PALETTE_HEX,
+  HEATMAP_HEX,
+  lerpHex,
+  textOn,
+  type PaletteForOptions,
+  type HeatStops,
 } from "./theme/chart-palette";
 
 // The tile chart (treemap) the apps share — moved here from keksdose so every consumer
@@ -27,10 +37,42 @@ export * from "./components/treemap-labels";
 
 // lenkbank's zoomable series chart, its synced x-zoom, the toggle legend and the
 // mirrored-pair axis geometry — moved here so the apps derive them from the package.
-export * from "./components/series-chart";
 export {
-  /** @deprecated 0.52 — `SeriesChart`, which places its tooltip with it (API-4); removed in 0.53 */
-  resolveTooltipPlacement,
+  AXIS_TICK_WIDTH,
+  AXIS_TITLE_STRIP,
+  anchoredBand,
+  axisBandWidth,
+  mergeSeries,
+  oneAxis,
+  padBand,
+  paddedDomain,
+  seriesKey,
+  soleSeriesColor,
+  visibleSeries,
+  seriesLegendEntries,
+  StaticSeriesChart,
+  SeriesChart,
+  type TimeTickUnit,
+  type SeriesChartAxisBudget,
+  type SeriesSource,
+  type SeriesChartSeries,
+  type SeriesChartType,
+  type SeriesChartPoint,
+  type SeriesChartRow,
+  type SeriesChartXValue,
+  type SeriesChartTickValues,
+  type SeriesChartAxis,
+  type SeriesChartXTick,
+  type SeriesChartX,
+  type SeriesChartTooltipPlacement,
+  type SeriesChartTooltip,
+  type SeriesChartSpan,
+  type SeriesChartTone,
+  type SeriesChartReference,
+  type SeriesChartMarker,
+  type SeriesChartHit,
+  type SeriesChartProps,
+  type SeriesLegendAxes,
 } from "./components/series-chart";
 // 0.32.1 (keksdose's 0.32 report): the height every chart takes, for an app's wrappers.
 export type { ChartHeight } from "./components/chart-height";
@@ -41,10 +83,17 @@ export * from "./components/chart-zoom";
 // packaging contract reads this entry's own imports to know which modules may import
 // recharts, so chart-zoom-core has to be one of them (MOD-6).
 export { SharedXZoom } from "./components/chart-zoom-core";
-export * from "./components/toggle-legend";
 export {
-  /** @deprecated 0.52 — `strokeDash`, which picks a series' pattern from it (API-4); removed in 0.53 */
-  STROKE_PATTERNS,
+  strokeDash,
+  STEP_DASH,
+  toggleHidden,
+  ToggleLegend,
+  StaticLegend,
+  LegendColumn,
+  LegendGroup,
+  type LegendEntry,
+  type ToggleLegendProps,
+  type StaticLegendProps,
 } from "./components/toggle-legend";
 export * from "./components/facing-pair";
 export * from "./components/series-chart-labels";

package/src/components/amount-input.tsx

@@ -149,7 +149,8 @@ export interface AmountInputProps extends FieldHelpProps, DataAttributes {
   currencyNames?: Record<string, string>;
   /** Offer only these ISO codes in the chip's list, in this order — `CurrencySelect`'s
    *  `options`, since the chip renders CurrencySelect's list (round 0.34 Wave 2, DUP-4).
-   *  Default every currency the kit knows. */
+   *  Default every currency the kit knows but a `retired` one (the lev), which only the
+   *  field that holds it lists. */
   currencyOptions?: string[];
   /** Focus the field on mount — on mobile this also opens the numpad sheet, so a
    *  new-transaction form can jump straight to amount entry (feedback #70). */

package/src/components/calendar-heatmap.tsx

@@ -3,6 +3,7 @@ import type { ComponentPropsWithRef, CSSProperties, KeyboardEvent, ReactNode } f
 import { cn } from "../lib/cn";
 import { dirOf, horizontalStep } from "../lib/direction";
 import { addMonthsClamped, localeWeekStart, parseIsoDate, toLocalIso } from "../lib/dates";
+import { dateFormatter } from "../lib/intl-cache";
 import { useKitLabels, useKitLocale, useKitWeekStart, type LabelOverride } from "../i18n/kit-labels";
 import { lerpHex, textOn } from "../theme/chart-palette";
 import { parseHex } from "../theme/color";
@@ -154,6 +155,8 @@ const DAY_NAME_FORMAT: Intl.DateTimeFormatOptions = {
   month: "long",
   year: "numeric",
 };
+/** A month's name over its first column ("Sep"). */
+const MONTH_LABEL_FORMAT: Intl.DateTimeFormatOptions = { month: "short" };
 
 /** The empty day: a wash of the text colour, like `--bg-hover`, so it reads as a cell
  *  on both themes without claiming any value. */
@@ -345,7 +348,10 @@ export function CalendarHeatmap({
     };
   }, [layout, firstIso, lastIso]);
 
-  const formatDay = (d: Date) => d.toLocaleDateString(locale, DAY_NAME_FORMAT);
+  // Every day cell names its date, so through the kit's formatter cache, as the month
+  // labels are: `toLocaleDateString` built one per cell and render, 365 for a year's grid
+  // (keksdose audit follow-up, 2026-11-01).
+  const formatDay = (d: Date) => dateFormatter(locale, DAY_NAME_FORMAT).format(d);
 
   const weekdayLabels = useMemo(() => {
     const ref = new Date(2024, 0, 7 + weekStart); // 7 January 2024 was a Sunday
@@ -503,7 +509,7 @@ export function CalendarHeatmap({
       for (let r = 0; r < 7; r++) {
         const d = dayAt(w * 7 + r);
         if (d && (d.getDate() === 1 || (w === 0 && r === lead && d.getDate() <= 14))) {
-          return d.toLocaleDateString(locale, { month: "short" });
+          return dateFormatter(locale, MONTH_LABEL_FORMAT).format(d);
         }
       }
       return "";

package/src/components/currency-option-list.tsx

@@ -73,7 +73,8 @@ export interface CurrencyOptionListProps {
   /** A currency was picked. The host closes the list. */
   onChoose: (code: string) => void;
   /** Only these ISO codes, in this order; codes the kit has no definition for are
-   *  dropped. Default every one of {@link CURRENCIES}. */
+   *  dropped. Default every one of {@link CURRENCIES} that is not `retired` (the chosen
+   *  one too, if it is). A retired code named here stays: the list is the caller's. */
   codes?: readonly string[];
   /** Translated names by code — see {@link currencyName}. */
   currencyNames?: Record<string, string>;
@@ -112,19 +113,27 @@ export function CurrencyOptionList({
   searchPlaceholder,
   sheetTitle,
 }: CurrencyOptionListProps) {
+  const held = getCurrency(value);
+  const chosen = held?.code;
+  // A retired currency the field holds — the one the default list keeps for it. Its own
+  // key, so a change of an ordinary value does not rebuild the rows and their names.
+  const heldRetired = held?.retired ? held.code : undefined;
   // Keyed on the codes' CONTENTS: an inline `options={["EUR", "CHF"]}` is a new array
   // every render.
   const codesKey = codes?.join(",");
   const pool = useMemo(
     () =>
       codesKey === undefined
-        ? CURRENCIES
+        ? // No currency that was replaced (the lev, since Bulgaria's euro: keksdose audit
+          // follow-up, 2026-11-01) — unless the field holds it, which then opens on its
+          // own row, checked, rather than on a list where nothing is chosen.
+          CURRENCIES.filter((c) => !c.retired || c.code === heldRetired)
         : // The caller's order; codes the kit has no definition for are dropped.
           codesKey
             .split(",")
             .map((code) => getCurrency(code))
             .filter((c): c is CurrencyOption => c !== undefined),
-    [codesKey],
+    [codesKey, heldRetired],
   );
   const named = useMemo(
     () => pool.map((c) => ({ c, name: currencyName(c, currencyNames, locale) })),
@@ -147,7 +156,6 @@ export function CurrencyOptionList({
     }));
   }, [named, query, locale]);
 
-  const chosen = getCurrency(value)?.code;
   return (
     <ComboboxPanel
       // The core with the currency filter's rows in place of its own.

package/src/components/currency-select.tsx

@@ -41,7 +41,9 @@ export interface CurrencySelectProps extends Omit<ComponentPropsWithoutRef<"div"
   /**
    * Restrict the pickable currencies to these ISO codes (e.g. only the
    * currencies actually present in a budget). Order is preserved. Defaults to
-   * the full {@link CURRENCIES} list.
+   * the full {@link CURRENCIES} list but a `retired` currency (the lev, since
+   * Bulgaria's euro), which only a field that holds it lists. A retired code named
+   * here is offered: the list is the caller's.
    */
   options?: string[];
   /** Required and unanswered — {@link FIELD_INVALID}, the same rose border the

package/src/components/danger-confirm.tsx

@@ -6,6 +6,7 @@ import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
 import { Button } from "./button";
 import { Input } from "./input";
 import { Label } from "./field-base";
+import { FIELD_ERROR_CLASS } from "./field-parts";
 import { Spinner } from "./spinner";
 import type { ButtonVariant } from "./button-look";
 import type { InputProps } from "./input";
@@ -536,6 +537,27 @@ export interface DangerConfirmProps extends Omit<ComponentPropsWithRef<"div">, "
    * confirm, so a keyboard user can retry or Shift+Tab to the field to correct (0.24).
    */
   busy?: boolean;
+  /**
+   * Why the last confirm failed ("Wrong password"), in the tile beside the field it is
+   * about rather than in a toast away from it (keksdose audit follow-up, 2026-11-01:
+   * PasswordDangerCard toasted its `password_incorrect` for want of this). The app sets
+   * it from the failure and words it — a 400 is a wrong password, a 500 is not.
+   *
+   * Drawn as the field's own `error`, as {@link ReauthDialog} draws its own: under the
+   * password with `requirePassword`, else under the typed phrase — the field painted,
+   * `aria-invalid`, the message its `aria-describedby` — and in a tile with neither, as
+   * a line above the buttons. Announced as it appears (`role="alert"`): it arrives
+   * after the press, with focus on the confirm, where a field's description alone is
+   * not heard. Passed at all — even as `undefined` — the field keeps its box, as with
+   * Input's `error`, so the message going away does not rebuild the field mid-edit.
+   *
+   * Hidden while the next attempt runs, once the user edits the tick, the phrase or the
+   * password (it is about what was submitted), and when the tile arms or disarms, until
+   * the next confirm; shown again when a confirm fails with it still set. So a
+   * mutation's error can be handed over as it is:
+   * `error={mut.error ? message(mut.error) : undefined}`.
+   */
+  error?: ReactNode;
   /** The arm button is disabled. */
   disabled?: boolean;
   /**
@@ -628,30 +650,32 @@ function firstSlotField(slot: HTMLElement | null): HTMLElement | null {
  * destructive button itself), and disarming moves it back to the arm button, so the
  * keyboard user is never left on an element that just vanished.
  */
-export function DangerConfirm({
-  onConfirm,
-  requirePassword,
-  requireAcknowledge,
-  consequences,
-  phrase,
-  phraseMatch = "trim",
-  prompt,
-  tone = "danger",
-  confirmVariant,
-  confirmDisabledReason,
-  children,
-  armLabel,
-  confirmLabel,
-  busy: busyProp,
-  disabled,
-  lockedReason: ownLockedReason,
-  commit,
-  armed: armedProp,
-  onArmedChange,
-  labels: labelsProp,
-  className,
-  ...rest
-}: DangerConfirmProps) {
+export function DangerConfirm(props: DangerConfirmProps) {
+  const {
+    onConfirm,
+    requirePassword,
+    requireAcknowledge,
+    consequences,
+    phrase,
+    phraseMatch = "trim",
+    prompt,
+    tone = "danger",
+    confirmVariant,
+    confirmDisabledReason,
+    children,
+    armLabel,
+    confirmLabel,
+    busy: busyProp,
+    error,
+    disabled,
+    lockedReason: ownLockedReason,
+    commit,
+    armed: armedProp,
+    onArmedChange,
+    labels: labelsProp,
+    className,
+    ...rest
+  } = props;
   const labels = useKitLabels("dangerConfirm", DEFAULT_DANGER_CONFIRM_LABELS, labelsProp);
   const lockedReason = useCommitReason(commit, ownLockedReason);
   const [armedState, setArmedState] = useState(false);
@@ -659,6 +683,9 @@ export function DangerConfirm({
   const [password, setPassword] = useState("");
   const [typed, setTyped] = useState("");
   const [acknowledged, setAcknowledged] = useState(false);
+  // The `error` describes what was submitted: an edit, an arm or a disarm leaves it
+  // describing nothing on screen. Cleared by the next confirm — ReauthDialog's `edited`.
+  const [errorStale, setErrorStale] = useState(false);
   const { pending, run } = usePromisePending();
   const busy = Boolean(busyProp) || pending;
   // `readOnly` rather than `disabled` on the fields while busy: disabling the field
@@ -686,6 +713,8 @@ export function DangerConfirm({
   const [wasArmed, setWasArmed] = useState(armed);
   if (wasArmed !== armed) {
     setWasArmed(armed);
+    // An `error` still passed is about the attempt before: not shown until a confirm.
+    setErrorStale(true);
     if (!armed) {
       setPassword("");
       setTyped("");
@@ -785,11 +814,22 @@ export function DangerConfirm({
       ...(asksAcknowledge && { acknowledged: true as const }),
     };
     confirmed.current = true;
+    setErrorStale(false);
     // Disarms when it resolves; a rejection leaves it armed, fields kept: the caller
     // shows why, the user retries.
     run(onConfirm(values.password, values), () => setArmed(false));
   };
 
+  // The failure's message, under the field it is about: the password, else the phrase,
+  // else (a tile with neither) a line of its own. Not while the next attempt runs.
+  const shownError = errorStale || busy ? undefined : error;
+  const errorAlert = hasContent(shownError) ? <span role="alert">{shownError}</span> : undefined;
+  const errorOn = requirePassword ? "password" : phrase !== undefined ? "phrase" : "line";
+  // Passed at all, the carrying field keeps its box (Input's `error` rule): only then.
+  const fieldError = (field: "password" | "phrase") =>
+    "error" in props && errorOn === field ? { error: errorAlert } : {};
+  const edited = () => setErrorStale(true);
+
   // The first field takes focus on arm: the tick, then the phrase, then the password —
   // the order they are drawn in.
   const firstField = asksAcknowledge ? "acknowledge" : phrase !== undefined ? "phrase" : "password";
@@ -880,7 +920,9 @@ export function DangerConfirm({
             // Not `disabled` while busy, for the same reason the fields are readOnly:
             // the box may hold the focus. A change while busy is simply not taken.
             onCheckedChange={(next) => {
-              if (!busy) setAcknowledged(next);
+              if (busy) return;
+              setAcknowledged(next);
+              edited();
             }}
           />
         )}
@@ -890,11 +932,15 @@ export function DangerConfirm({
             target={phrase}
             match={phraseMatch}
             value={typed}
-            onValueChange={setTyped}
+            onValueChange={(next) => {
+              setTyped(next);
+              edited();
+            }}
             busy={busy}
             // Already resolved through this tile's own `labels` prop; handed on so a
             // per-instance phrase wording reaches the field.
             labels={{ phrase: labels.phrase, phrasePlaceholder: labels.phrasePlaceholder }}
+            {...fieldError("phrase")}
           />
         )}
         {requirePassword && (
@@ -903,9 +949,16 @@ export function DangerConfirm({
             label={labels.password}
             value={password}
             busy={busy}
-            onValueChange={setPassword}
+            onValueChange={(next) => {
+              setPassword(next);
+              edited();
+            }}
+            {...fieldError("password")}
           />
         )}
+        {errorOn === "line" && errorAlert !== undefined && (
+          <p className={cn(FIELD_ERROR_CLASS, "mt-0")}>{errorAlert}</p>
+        )}
         <div className="flex flex-wrap gap-2">
           <Button id={cancelId} type="button" variant="ghost" disabled={busy} onClick={() => setArmed(false)}>
             {labels.cancel}

package/src/components/data-table-filter-popover.tsx

@@ -40,7 +40,8 @@ interface FilterPopoverProps<T> {
  * The contents of a column's filter Popover. Renders the right control set for
  * the column's filter type — text search, select checklist, date range (presets
  * + {@link MiniCalendar} + from/to inputs), or numeric min/max with an abs
- * toggle — driving the shared {@link FilterValue} state.
+ * toggle (none for `numberFilter(getValue, { abs: false })`) — driving the shared
+ * {@link FilterValue} state.
  */
 export function FilterPopover<T>({
   column,
@@ -219,6 +220,11 @@ export function FilterPopover<T>({
   }
 
   // number
+  // `abs: false` on the filter: no "Absolute value" box, and a state that carries `abs`
+  // anyway (a view stored before the column lost the box) is handed on without it at the
+  // first bound typed — there is no box to untick it with (kastlan reuse audit
+  // 2026-11-02, proposal 7).
+  const absBox = filter.abs !== false;
   const v = state.type === "number" ? state : { type: "number" as const, min: "", max: "", abs: false };
   // The bounds were native `type="number"` inputs, the one numeric entry in the kit that
   // bypassed decimal-marks (BUG-10, refactor audit 2026-10): where the browser refuses a
@@ -237,7 +243,7 @@ export function FilterPopover<T>({
       type: "number",
       min: bound === "min" ? read : v.min,
       max: bound === "max" ? read : v.max,
-      abs: v.abs,
+      abs: absBox && v.abs,
     });
   };
   return (
@@ -266,15 +272,17 @@ export function FilterPopover<T>({
           />
         </label>
       </div>
-      <label className="flex items-center gap-2 text-sm text-secondary">
-        <input
-          type="checkbox"
-          checked={v.abs}
-          onChange={(e) => onChange({ type: "number", min: v.min, max: v.max, abs: e.target.checked })}
-          className="size-3.5"
-        />
-        {labels.numberAbs}
-      </label>
+      {absBox && (
+        <label className="flex items-center gap-2 text-sm text-secondary">
+          <input
+            type="checkbox"
+            checked={v.abs}
+            onChange={(e) => onChange({ type: "number", min: v.min, max: v.max, abs: e.target.checked })}
+            className="size-3.5"
+          />
+          {labels.numberAbs}
+        </label>
+      )}
       {clearRow}
     </div>
   );