@eifi1/ui-kit 0.20.1 → 0.22.0

package/dist/wizard.d.ts

@@ -6,8 +6,10 @@ export { WizardStep, WizardStepProps } from './wizard/wizard-step.js';
 export { WizardSummary } from './wizard/wizard-summary.js';
 export { StepperNav } from './wizard/stepper-nav.js';
 import 'react';
-import './kit-labels-D1J2_jyD.js';
-import './components/data-table-labels.js';
+import './kit-labels-R8mIAc9N.js';
+import './data-table-labels-B7OdnM0S.js';
+import './components/data-table-sort.js';
+import './components/swipeable-row.js';
 import './components/mini-calendar.js';
 import './components/calendar-heatmap.js';
 import './components/popover.js';
@@ -29,7 +31,6 @@ import './components/sparkline.js';
 import './components/stat-tile.js';
 import './components/signature-pad.js';
 import './components/password-strength.js';
-import './components/danger-confirm.js';
 import './components/swatch-picker.js';
 import './components/tile-radio.js';
 import './components/icon-picker.js';
@@ -37,11 +38,10 @@ import './components/dialog-frame.js';
 import './components/modal.js';
 import './hooks/use-search-param-state.js';
 import './components/measured-grid.js';
-import './feedback-attachment-WFiXJ8We.js';
+import './feedback-attachment-NhUm7Zga.js';
 import './feedback/feedback-thread.js';
 import './feedback/feedback-inbox.js';
 import './components/account-settings-labels.js';
-import './components/confirm-dialog.js';
 import './components/floating-panel.js';
 import './components/bulk-action-bar.js';
 import './components/list.js';
@@ -60,11 +60,13 @@ import './components/write-lock.js';
 import './components/legal.js';
 import './components/account-chips.js';
 import './lib/format.js';
-import './data-table-3mi2R3so.js';
-import './components/data-table-sort.js';
-import './components/swipeable-row.js';
 import './components/reauth-dialog.js';
 import './components/server-wake.js';
 import './lib/server-wake.js';
 import './components/translation-review-labels.js';
 import './lib/translation-review.js';
+import './components/country-select.js';
+import './components/inline-edit-field.js';
+import './lib/iban.js';
+import './lib/phone.js';
+import './components/sign-chip.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eifi1/ui-kit",
-  "version": "0.20.1",
+  "version": "0.22.0",
   "type": "module",
   "description": "App-agnostic shared design system: domain-free React components, theme and tokens.",
   "_sideEffects": "The barrel (src/index.ts) re-exports EVERY component, including components/chart, which statically imports recharts. Without this field a bundler must assume each of those modules has side effects, so it cannot drop the unused ones: importing a Button from '@eifi1/ui-kit' dragged all 433KB of recharts into the consumer's ENTRY chunk, and Keksdose was preloading it on every page load, login included. Nothing in src/ imports for side effects (no bare imports, no CSS imports from JS, no module-level global writes) — the token stylesheet is its own './tokens.css' export — so this is safe. CSS is still listed so any future stylesheet survives. Re-checked when `flag-icons` left `dependencies` and tsup started emitting a `\"use client\"` banner: neither touches this. The flag stylesheet was never imported from JS in the first place (that was the finding), and a directive prologue is a string literal every bundler lifts out before it decides whether a module is inert.",

package/src/components/account-chips.tsx

@@ -3,7 +3,8 @@ import type { LucideIcon } from "lucide-react";
 import { cn } from "../lib/cn";
 import { formatDate, formatRelativeTime, toDate, EMPTY_FORMATTED_VALUE } from "../lib/format";
 import type { DateInput, FormatDateStyle, FormatRelativeTimeOptions } from "../lib/format";
-import { useKitLabels, useKitLocale } from "../i18n/kit-labels";
+import { useKitDateFormatter, useKitLabels, useKitLocale } from "../i18n/kit-labels";
+import { toLocalIso } from "../lib/dates";
 import { Chip } from "./chip";
 import type { ChipShape, ChipSize, ChipTone, ChipVariant } from "./chip";
 import { Tooltip } from "./tooltip";
@@ -201,7 +202,8 @@ export interface DateMarkProps {
    */
   display?: "date" | "relative";
   /** Default `medium`. Under `"relative"`, the style of the tooltip's date (default
-   *  `dateTime`) and of the date `relative.absoluteAfterDays` switches to. */
+   *  `dateTime`) and of the date `relative.absoluteAfterDays` switches to. Given, it wins
+   *  over the provider's `formatDate`. */
   dateStyle?: FormatDateStyle | Intl.DateTimeFormatOptions;
   /** `formatRelativeTime` options: `numeric`, `style`, `absoluteAfterDays`, `now`. */
   relative?: Omit<FormatRelativeTimeOptions, "locale" | "empty" | "absoluteStyle">;
@@ -216,6 +218,13 @@ export interface DateMarkProps {
 /**
  * A date in a table cell: a `<time>` with a machine-readable `dateTime`, nowrap and
  * tabular figures, in the provider's locale — or `empty` when there is none.
+ *
+ * `display="date"` without a `dateStyle` is written by `<UiKitProvider formatDate>` when
+ * the app set one (keksdose K12: its `DateCell` exists to put every column's date in the
+ * app's date-format preference, weekday and all — dev#546), called with the LOCAL
+ * calendar day of the value as `"YYYY-MM-DD"` and `weekday: true`. Without one, or for
+ * an empty answer, it is `Intl`'s `medium` date as before. The relative display is not
+ * a calendar day and keeps `formatRelativeTime`.
  */
 export function DateMark({
   value,
@@ -227,13 +236,18 @@ export function DateMark({
   className,
 }: DateMarkProps) {
   const locale = useKitLocale(localeProp);
+  const fromProvider = useKitDateFormatter();
   const date = toDate(value);
   const cls = cn("whitespace-nowrap tabular-nums", className);
   if (!date) return <span className={cn(cls, "text-[var(--text-muted)]")}>{empty}</span>;
   if (display === "date") {
+    const own =
+      dateStyle === undefined && fromProvider
+        ? fromProvider(toLocalIso(date), { unit: "day", source: "dateMark", locale, weekday: true })
+        : "";
     return (
       <time dateTime={date.toISOString()} className={cls}>
-        {formatDate(date, dateStyle ?? "medium", { locale })}
+        {own || formatDate(date, dateStyle ?? "medium", { locale })}
       </time>
     );
   }

package/src/components/account-settings.tsx

@@ -1,9 +1,16 @@
 import { useId, useState } from "react";
 import type { KeyboardEvent, ReactNode } from "react";
-import { Button, Card, FIELD_WRITABLE_LOOK, Input } from "./ui";
+import { Button, Card, Input } from "./ui";
 import { UserAvatar } from "./user-avatar";
 import { CopyButton } from "./copy-button";
 import { QrCode } from "./qr-code";
+import { OneTimeCodeInput } from "./one-time-code-input";
+import {
+  DEFAULT_PASSWORD_STRENGTH_LABELS,
+  passwordByteLength,
+  PasswordStrengthMeter,
+} from "./password-strength";
+import type { PasswordStrengthMeterProps } from "./password-strength";
 import { DEFAULT_COMMON_LABELS, useKitLabels } from "../i18n/kit-labels";
 import { useAccountSettingsLabels } from "./account-settings-labels";
 import type {
@@ -95,30 +102,73 @@ export function ProfileSetting({
   );
 }
 
+/**
+ * What {@link PasswordSetting}'s `strength` takes besides `true`: the meter's own options,
+ * minus the ones the card owns — `value` (the new password), `minLength` (the card's, so
+ * the checklist's length rule and the submit's check are one number) and `maxBytes`
+ * (the card's own prop, which the submit enforces as well).
+ */
+export type PasswordSettingStrength = Pick<PasswordStrengthMeterProps, "score" | "showRequirements" | "labels">;
+
 export function PasswordSetting({
   onSubmit,
   pending,
   minLength = 8,
+  strength,
+  maxBytes,
   labels: labelsProp,
 }: {
   /** Called with the validated (current, new) pair; return a promise to auto-clear on success. */
   onSubmit: (currentPassword: string, newPassword: string) => void | Promise<unknown>;
   pending?: boolean;
+  /** The shortest new password the card submits, in characters as a person counts them
+   *  (an emoji is one). Keep it in step with the server's own minimum. Default 8. */
   minLength?: number;
+  /**
+   * Show the {@link PasswordStrengthMeter} under the new-password field (0.22.0,
+   * kastlan's input audit): the bar, the level in words and the checklist, with the
+   * length rule drawn from `minLength`. `true` for the meter as it comes; an object for
+   * its `score` (zxcvbn's, say), `showRequirements` or `labels`.
+   *
+   * Off by default, so a card that never asked for it does not grow one. The meter is
+   * advisory, as everywhere in the kit: it blocks nothing — the card's own checks do
+   * (`minLength`, the confirmation, `maxBytes`).
+   */
+  strength?: boolean | PasswordSettingStrength;
+  /**
+   * A byte ceiling on the new password — bcrypt reads at most 72 BYTES and ignores the
+   * rest, which is kastlan's case: `maxBytes={72}`. A new password over it is refused
+   * on submit with the meter's own "too long" sentence (the `passwordStrength`
+   * namespace's `tooLong`), and the meter, when shown, warns while it is typed.
+   *
+   * Unset by default, and leave it unset for a secret with no ceiling: an invented one
+   * talks people out of the long passphrase they chose.
+   */
+  maxBytes?: number;
   /** Prop > `<UiKitProvider labels={{ accountSettings: { password } }}>` > English. */
   labels?: Partial<PasswordSettingLabels>;
 }) {
   const labels = useAccountSettingsLabels("password", labelsProp);
+  const strengthOptions = typeof strength === "object" ? strength : undefined;
+  // Only for `tooLong`: the sentence the meter shows is the one the refusal says.
+  const strengthLabels = useKitLabels("passwordStrength", DEFAULT_PASSWORD_STRENGTH_LABELS, strengthOptions?.labels);
   const [current, setCurrent] = useState("");
   const [next, setNext] = useState("");
   const [confirm, setConfirm] = useState("");
   const [error, setError] = useState<string | null>(null);
 
   const submit = async () => {
-    if (next.length < minLength) {
+    // Code points, not UTF-16 units — the count the meter's checklist and a server's
+    // `len()` use. `next.length` counted an emoji as two, so four of them passed a
+    // minimum of eight that the meter beside the field said they missed.
+    if ([...next].length < minLength) {
       setError(labels.tooShort);
       return;
     }
+    if (maxBytes !== undefined && passwordByteLength(next) > maxBytes) {
+      setError(strengthLabels.tooLong(maxBytes));
+      return;
+    }
     if (next !== confirm) {
       setError(labels.mismatch);
       return;
@@ -134,11 +184,31 @@ export function PasswordSetting({
     }
   };
 
+  const nextField = (
+    <Input type="password" autoComplete="new-password" label={labels.next} value={next} onChange={(e) => setNext(e.target.value)} />
+  );
+
   return (
     <Card className="p-4 space-y-3">
       <div className="text-sm font-medium">{labels.title}</div>
       <Input type="password" autoComplete="current-password" label={labels.current} value={current} onChange={(e) => setCurrent(e.target.value)} />
-      <Input type="password" autoComplete="new-password" label={labels.next} value={next} onChange={(e) => setNext(e.target.value)} />
+      {strength ? (
+        // One box for the field and its meter, so the card's `space-y-3` spaces the pair
+        // from its neighbours and the meter keeps its own small gap under the field.
+        <div>
+          {nextField}
+          <PasswordStrengthMeter
+            value={next}
+            minLength={minLength}
+            maxBytes={maxBytes}
+            score={strengthOptions?.score}
+            showRequirements={strengthOptions?.showRequirements}
+            labels={strengthOptions?.labels}
+          />
+        </div>
+      ) : (
+        nextField
+      )}
       <Input type="password" autoComplete="new-password" label={labels.confirm} value={confirm} onChange={(e) => setConfirm(e.target.value)} />
       {error && <p className="text-xs text-[var(--danger)]">{error}</p>}
       <Button onClick={() => void submit()} disabled={!current || !next || !confirm || pending}>
@@ -204,13 +274,17 @@ export function TwoFactorSetting({
   const labels = useAccountSettingsLabels("twoFactor", labelsProp);
   const [code, setCode] = useState("");
   const [password, setPassword] = useState("");
-  // Browsers autofill one-time-code fields with the saved username; keep the
-  // field readOnly until focus to block that. It therefore has to keep the LOOK of
-  // an editable field (FIELD_WRITABLE_LOOK): this is the one place where readOnly
-  // does not mean "you may not type here", and without the opt-out the field would
-  // sit there greyed until the moment it is focused.
-  const [otpReadonly, setOtpReadonly] = useState(true);
-  const onOtpFocus = () => setOtpReadonly(false);
+  // Both code fields are a OneTimeCodeInput (0.22.0) — the field this card wrote by hand
+  // twice — and keep what they did:
+  //  - `readOnlyUntilFocus`: browsers autofill a one-time-code field with the saved
+  //    username (the disable form has a current-password field right above it), and a
+  //    read-only field is never autofilled. The guard drops on focus, and the field
+  //    keeps the look of an editable one meanwhile (FIELD_WRITABLE_LOOK) — see the prop.
+  //  - `length={8}`: the `maxLength={8}` they had, so an authenticator issuing eight
+  //    digits still fits. What changed is that they now take digits only: "123 456"
+  //    pasted from an authenticator that groups its digits used to reach `onEnable`
+  //    with the space in it.
+  //  - one `code` state for both, as before.
   // Only for the "Status: Enabled" composition — the punctuation between a field's
   // name and its value is the language's (see `CommonLabels.fieldValue`).
   const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
@@ -272,16 +346,12 @@ export function TwoFactorSetting({
               </div>
             </div>
           )}
-          <Input
-            inputMode="numeric"
-            autoComplete="one-time-code"
-            readOnly={otpReadonly}
-            inputClassName={FIELD_WRITABLE_LOOK}
-            onFocus={onOtpFocus}
-            maxLength={8}
+          <OneTimeCodeInput
+            readOnlyUntilFocus
+            length={8}
             label={labels.codeLabel}
             value={code}
-            onChange={(e) => setCode(e.target.value)}
+            onChange={setCode}
             onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
               if (e.key === "Enter" && code && !busy) {
                 e.preventDefault();
@@ -299,16 +369,12 @@ export function TwoFactorSetting({
         <div className="space-y-3 border-t border-[var(--border)] pt-3">
           <div className="text-sm font-medium">{labels.disableSection}</div>
           <Input type="password" autoComplete="current-password" label={labels.password} value={password} onChange={(e) => setPassword(e.target.value)} />
-          <Input
-            inputMode="numeric"
-            autoComplete="one-time-code"
-            readOnly={otpReadonly}
-            inputClassName={FIELD_WRITABLE_LOOK}
-            onFocus={onOtpFocus}
-            maxLength={8}
+          <OneTimeCodeInput
+            readOnlyUntilFocus
+            length={8}
             label={labels.codeLabel}
             value={code}
-            onChange={(e) => setCode(e.target.value)}
+            onChange={setCode}
             onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
               if (e.key === "Enter" && password && code && !busy) {
                 e.preventDefault();

package/src/components/amount-input.tsx

@@ -25,6 +25,8 @@ import {
   sanitizeLive,
   splitLeadingSign,
 } from "../lib/calc";
+import { decimalMark, localizeMark, readTyped, showsTyped } from "../lib/decimal-marks";
+import { hasMessage, mergeDescribedBy } from "./choice-parts";
 
 interface AmountInputProps {
   value: string;
@@ -36,6 +38,23 @@ interface AmountInputProps {
   disabled?: boolean;
   /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */
   invalid?: boolean;
+  /**
+   * What is wrong with the amount, in the caller's own words — {@link Input}'s `error`
+   * (keksdose K4: "exceeds the outstanding balance" was a loose `<p>` beside the field
+   * that nothing pointed at). Rendered under the field, after a text `hint`; merged into
+   * `aria-describedby` after the caller's ids and the hint's; implies `invalid`, so the
+   * field paints as well as announces. `null`, `false` and `""` are no message.
+   * {@link MoneyField} takes it too.
+   */
+  error?: ReactNode;
+  /**
+   * Show the desktop calculator trigger (default `true`). `false` for an amount in an
+   * ephemeral close-on-blur editor — a budget's assigned cell, a VAT cell (keksdose K6)
+   * — where a click on the icon blurs the field and tears the editor down before the
+   * popover can open. Typing a calculation ("200+50", then Enter) still evaluates, and
+   * a phone keeps its numpad, exactly as {@link NumberInput}'s `calculator={false}`.
+   */
+  calculator?: boolean;
   className?: string;
   id?: string;
   ariaLabel?: string;
@@ -224,51 +243,12 @@ function settleAmount(text: string, digits: number | undefined, min?: number, ma
   return Number(out) === Number(t) ? text : out;
 }
 
-/**
- * The locale's decimal mark, as far as this field can type it: "," or "." (kastlan 40).
- * The same answer `NumberField` gives, for the same reason: a mark outside those two
- * (Arabic's "٫") is not one {@link sanitizeLive} lets through, so those locales keep
- * the dot rather than get a field that eats the key it shows.
- */
-function decimalMark(locale: string | undefined): "," | "." {
-  try {
-    const part = new Intl.NumberFormat(locale).formatToParts(1.5).find((p) => p.type === "decimal");
-    return part?.value === "," ? "," : ".";
-  } catch {
-    // An invalid tag throws a RangeError; a typo in a locale must not take the form down.
-    return ".";
-  }
-}
+// The locale's decimal mark and the grouping parse (kastlan 40, keksdose G1) live in
+// `lib/decimal-marks.ts`, shared with NumberInput since 0.22 (keksdose K5).
 
-/**
- * Which typed mark is the decimal one (keksdose G1). {@link sanitizeLive} folds every
- * "," into ".", so on its own it read the German "1.234,56" as 1.23456 — and the
- * settle then made that 1.23, final. This decides per operand, from the typist's own
- * text, before that fold:
- *
- * - both marks present: the one that is not the locale's is grouping, and goes;
- * - in a "," locale, only "." present: grouping when it cannot be a decimal as a
- *   German reader writes it — twice ("1.234.567"), or in thousands shape ("1.234",
- *   "12.500") — otherwise a decimal ("1.5", typed by a dot-decimal habit);
- * - in a "." locale, only "," present: grouping when it appears twice ("1,234,567");
- *   once it stays a decimal, because Swiss and German typists write "1,5" in a
- *   de-CH form (kastlan 40) and a unit price "1,789" is a decimal.
- *
- * Only a keystroke's text comes through here. A calculator result is dot-decimal
- * already, and "1.234" from `100/81.03…` is never a thousand.
- */
-function normalizeTypedMarks(raw: string, mark: "," | "."): string {
-  const other = mark === "," ? "." : ",";
-  return raw.replace(/[0-9.,]+/g, (operand) => {
-    const hasMark = operand.includes(mark);
-    const count = operand.split(other).length - 1;
-    if (count === 0) return operand;
-    const grouping = hasMark
-      ? true
-      : count > 1 || (mark === "," && /^\d{1,3}(\.\d{3})+$/.test(operand));
-    return grouping ? operand.split(other).join("") : operand;
-  });
-}
+// The error line under a field — the type of `ui.tsx`'s (module-private) one, so an
+// AmountInput's message is indistinguishable from an Input's.
+const FIELD_ERROR_CLASS = "mt-1 text-[11px] leading-tight text-[var(--danger)]";
 
 // The consuming app's ONE money palette (`--money-expense` / `--money-income`),
 // not a bespoke rose/emerald pairing: a figure being typed has to wear the same
@@ -311,20 +291,23 @@ function isResultOf(previous: string, text: string, settle: (text: string) => st
 }
 
 export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
-  ({ value, onChange, currency, onCurrencyChange, placeholder, label, disabled, invalid: invalidProp, className, id, ariaLabel, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, hint, autoFocus, tone = "neutral", negative = false, onNegativeChange, variant = "field", align = "start", labels, currencyNames, digits: digitsProp, min, max, onCommit }, ref) => {
+  ({ value, onChange, currency, onCurrencyChange, placeholder, label, disabled, invalid: invalidProp, error, calculator = true, className, id, ariaLabel, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, hint, autoFocus, tone = "neutral", negative = false, onNegativeChange, variant = "field", align = "start", labels, currencyNames, digits: digitsProp, min, max, onCommit }, ref) => {
     const generatedId = useId();
     const fieldId = id ?? generatedId;
     const hintId = useId();
+    const errorId = useId();
     // Text is a caption under the field; a FieldHint rides the label line. See `hint`.
     const textHint = (typeof hint === "string" && hint !== "") || typeof hint === "number";
-    const describedBy = textHint ? (ariaDescribedBy ? `${ariaDescribedBy} ${hintId}` : hintId) : ariaDescribedBy;
-    const invalid = Boolean(invalidProp) || ariaInvalid === true || ariaInvalid === "true";
+    const hasError = hasMessage(error);
+    // The standing advice first, the news second: the caller's ids, the caption, the error.
+    const describedBy = mergeDescribedBy(ariaDescribedBy, textHint && hintId, hasError && errorId);
+    const invalid = Boolean(invalidProp) || hasError || ariaInvalid === true || ariaInvalid === "true";
     const editable = !!onCurrencyChange;
     // On phones we suppress the OS keyboard (inputMode="none" below) and show our
     // own calculator numpad, so the desktop popover trigger is hidden. The
     // end padding keys off showCalc, so it tightens up automatically.
     const isMobile = useMediaQuery(PHONE_QUERY, false);
-    const showCalc = !disabled && !isMobile;
+    const showCalc = calculator && !disabled && !isMobile;
     const [focused, setFocused] = useState(false);
     // On mobile, focusing the field opens the numpad bottom sheet in place of the
     // native keyboard (feedback #334) — a full calculator keypad, not just the old
@@ -381,15 +364,17 @@ export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
     // decimals (keksdose live #356). Display only — `value` is the host's, untouched.
     const displayDigits = digitsProp ?? currencyMinorDigits(currency);
     const resting = focused ? shown : settleAmount(shown, displayDigits);
-    const derived = mark === "," ? resting.replace(/\./g, ",") : resting;
-    const draftAs = draft === null ? "" : sanitizeLive(normalizeTypedMarks(draft, mark));
+    const derived = localizeMark(resting, mark);
+    // The draft only while it says what the field holds AND holds nothing the live
+    // sanitising would drop — a letter, a second decimal point — which would otherwise
+    // stay on screen while the value said something else (see `showsTyped`).
     const display =
       draft === null
         ? derived
-        : draftAs === shown
+        : showsTyped(draft, mark, shown)
           ? draft
           : // The caller owns the sign: the typed "12" is shown as the "-12" it is.
-            signOwned && negative && `-${draftAs}` === shown
+            signOwned && negative && shown.startsWith("-") && showsTyped(draft, mark, shown.slice(1))
             ? `-${draft}`
             : derived;
     // Every route into the field — typing, the numpad sheet, the desktop
@@ -434,7 +419,7 @@ export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
     };
     const typed = (raw: string) => {
       setDraft(raw);
-      handleText(normalizeTypedMarks(raw, mark));
+      handleText(readTyped(raw, mark));
     };
     const { open, setOpen, wrapperRef, panelRef, query, setQuery, inputRef } = useDropdownSearch();
     // The chip the currency list hangs off (Keksdose dev#548). It is portalled now, so
@@ -565,9 +550,10 @@ export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
         >
           {showCalc && (
             <CalculatorButton
-              // The mark the field shows, as NumberInput hands its calculator; the
-              // evaluator reads either, and its result comes back dot-decimal.
-              value={display}
+              // The mark the field shows but not the typist's grouping: the evaluator
+              // reads either mark, and "1.234,5" is two of them. The result comes back
+              // dot-decimal.
+              value={derived}
               onChange={(result, expression) => {
                 setDraft(null);
                 const settled = settle(result);
@@ -660,6 +646,13 @@ export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
             {hint}
           </p>
         )}
+        {/* The news after the standing advice, as Select orders them. The root is
+            already a steady box, so the message coming and going remounts nothing. */}
+        {hasError && (
+          <p id={errorId} className={FIELD_ERROR_CLASS}>
+            {error}
+          </p>
+        )}
         {showNumpad && (
           <NumberPadSheet
             // Localised like the field it mirrors. Keys are typing, read by the