@eifi1/ui-kit 0.34.0 → 0.36.0

package/src/rhf/fields.tsx

@@ -27,7 +27,7 @@
  *  - **The red border.** Every field gets `invalid` from the field state, so an errored
  *    field PAINTS as well as announces. kastlan's number, money, date and entity fields
  *    passed only `aria-invalid` through `FormControl`, or nothing, and `Input`, `Select`
- *    and `Textarea` paint only from the prop (see the note in ./form).
+ *    and `Textarea` paint only from the prop (see the note in ./form-core).
  *  - **Focus on error.** `field.ref` reaches the focusable element itself — the input,
  *    a picker's trigger, a toggle group whose `focus()` lands on its option (since 0.34
  *    every kit field takes a ref; the number field and the pickers were reached by an id
@@ -37,7 +37,7 @@
  *    through react-hook-form's context. Pass it for the field's value types
  *    (`control={form.control}` checks `name` against the form's values).
  *
- * The common props: `name`, `control`, `label` (a {@link FormLabel} above the field;
+ * The common props: `name`, `control`, `label` (the label above the field;
  * omitted, none — then give the field an `aria-label`), `hint` (standing advice under
  * the field, attached to it with `aria-describedby`), `required` (the label's mark,
  * and `aria-required` where the control takes it — validation is `rules`' or the
@@ -91,7 +91,7 @@ import {
   type InlineEntityComboboxProps,
 } from "../components/combobox";
 import type { ComboClearValue } from "../components/combobox-core";
-import { mergeRefs, useInlineHint } from "../components/field-parts";
+import { fieldHelpMark, mergeRefs, useInlineHint } from "../components/field-parts";
 import { useKitLocale } from "../i18n/kit-labels";
 import { cn } from "../lib/cn";
 import { decimalMark, readTyped } from "../lib/decimal-marks";
@@ -110,13 +110,19 @@ export interface RhfFieldBaseProps<
   control?: ControllerProps<TFieldValues, TName, TTransformed>["control"];
   /** react-hook-form's `rules` (`required`, `min`, `validate` …). */
   rules?: ControllerProps<TFieldValues, TName, TTransformed>["rules"];
-  /** A {@link FormLabel} above the field. Omitted: no label — name the control with
+  /** The label above the field. Omitted: no label — name the control with
    *  an `aria-label` instead. */
   label?: ReactNode;
   /** Standing advice under the field ("As printed on the card"), attached to the
    *  control with `aria-describedby`. A `FieldHint` is its words at Large and on a
-   *  touch screen (§4, DUP-2), not a lone "?"; a `HelpPopover` stays a "?". */
+   *  touch screen (§4, DUP-2), not a lone "?"; a `HelpPopover` stays a "?". Beside a
+   *  `help` it is that caption at every size. */
   hint?: ReactNode;
+  /** Help the field is usable without — why, how to choose — behind the field's one
+   *  "?" after the label: a `HelpPopover` named "About <label>" (round 0.36,
+   *  docs/text-size-harmonization.md §4); pass a `HelpPopover` to name it yourself.
+   *  `hint` stays the visible fact under the field. */
+  help?: ReactNode;
   /** Draws the label's required mark and sets `aria-required` where the control
    *  takes it. Whether the field IS required is `rules`' or the resolver's to say. */
   required?: boolean;
@@ -146,8 +152,8 @@ export interface RhfFieldRenderContext<
   invalid: boolean;
   /** The error's message, if any. */
   error: string | undefined;
-  /** The control's id, which the label points at. `FormControl` sets it on the
-   *  rendered element already; this is for a control that routes it elsewhere. */
+  /** The control's id, which the label points at. The rendered element has it already
+   *  (unless `asControl` is false); this is for a control that routes it elsewhere. */
   id: string;
   /** The label's id, for a control that is named with `aria-labelledby`. */
   labelId: string;
@@ -160,16 +166,16 @@ export interface RhfFieldProps<
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
   TTransformed = TFieldValues,
 > extends RhfFieldBaseProps<TFieldValues, TName, TTransformed> {
-  /** The control. Wrapped in {@link FormControl} (its `id`, `aria-describedby` and
-   *  `aria-invalid`) unless `asControl` is false. */
+  /** The control. Given the field's `id`, `aria-describedby` and `aria-invalid` unless
+   *  `asControl` is false. */
   render: (ctx: RhfFieldRenderContext<TFieldValues, TName>) => ReactElement;
   /** `false`: render the control as is, for one that wires its own ids from the
    *  context. Default `true`. */
   asControl?: boolean;
-  /** `false`: no {@link FormMessage}, for a control that renders its own error (its
+  /** `false`: no error message under the field, for a control that renders its own (its
    *  `error` prop). Default `true`. */
   message?: boolean;
-  /** `false`: no {@link FormLabel}, for a control that carries its label itself (a
+  /** `false`: no label above the field, for a control that carries its label itself (a
    *  checkbox). Default `true`. */
   showLabel?: boolean;
 }
@@ -229,6 +235,7 @@ export function RhfField<
   rules,
   label,
   hint,
+  help,
   required,
   disabled,
   excludeWhenDisabled,
@@ -240,8 +247,11 @@ export function RhfField<
 }: RhfFieldProps<TFieldValues, TName, TTransformed>) {
   // §4: a FieldHint is a fact, so at Large and on a touch screen it is its words under
   // the field, not a lone "?" there (DUP-2, refactor audit 2026-10). A HelpPopover stays
-  // a "?" at every size.
-  const shownHint = useInlineHint(hint);
+  // a "?" at every size. With a `help` (0.36) its "?" follows the label and is the
+  // field's only one, so a FieldHint is its words at every size.
+  const helpMark = fieldHelpMark(help, label);
+  const shownHint = useInlineHint(hint, helpMark !== undefined);
+  const labelEl = showLabel && hasContent(label) && <RhfLabel required={required}>{label}</RhfLabel>;
   return (
     <FormField
       control={control}
@@ -250,7 +260,14 @@ export function RhfField<
       disabled={excludeWhenDisabled ? disabled : undefined}
       render={({ field, fieldState }) => (
         <FormItem className={className}>
-          {showLabel && hasContent(label) && <RhfLabel required={required}>{label}</RhfLabel>}
+          {helpMark === undefined ? (
+            labelEl
+          ) : (
+            <div className="flex items-center gap-1">
+              {labelEl}
+              <span className="flex shrink-0 items-center">{helpMark}</span>
+            </div>
+          )}
           <ControlSlot
             field={disabled && !field.disabled ? { ...field, disabled: true } : field}
             fieldState={fieldState}
@@ -298,6 +315,7 @@ export function RhfTextField<
   rules,
   label,
   hint,
+  help,
   required,
   disabled,
   excludeWhenDisabled,
@@ -306,7 +324,7 @@ export function RhfTextField<
 }: RhfTextFieldProps<TFieldValues, TName, TTransformed>) {
   return (
     <RhfField
-      {...{ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className }}
+      {...{ name, control, rules, label, hint, help, required, disabled, excludeWhenDisabled, className }}
       render={({ field, invalid }) => (
         <Input
           aria-required={required || undefined}
@@ -349,6 +367,7 @@ export function RhfTextarea<
   rules,
   label,
   hint,
+  help,
   required,
   disabled,
   excludeWhenDisabled,
@@ -358,7 +377,7 @@ export function RhfTextarea<
 }: RhfTextareaProps<TFieldValues, TName, TTransformed>) {
   return (
     <RhfField
-      {...{ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className }}
+      {...{ name, control, rules, label, hint, help, required, disabled, excludeWhenDisabled, className }}
       render={({ field, invalid }) => (
         <Textarea
           aria-required={required || undefined}
@@ -435,6 +454,7 @@ export function RhfNumberField<
   rules,
   label,
   hint,
+  help,
   required,
   disabled,
   excludeWhenDisabled,
@@ -445,7 +465,7 @@ export function RhfNumberField<
 }: RhfNumberFieldProps<TFieldValues, TName, TTransformed>) {
   return (
     <RhfField
-      {...{ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className }}
+      {...{ name, control, rules, label, hint, help, required, disabled, excludeWhenDisabled, className }}
       render={({ field, invalid, id }) => (
         // FormControl clones this element with `id` / `aria-describedby` /
         // `aria-invalid`, which NumberControl hands on to the field.
@@ -647,6 +667,7 @@ export function RhfMoneyField<
   rules,
   label,
   hint,
+  help,
   required,
   disabled,
   excludeWhenDisabled,
@@ -655,7 +676,7 @@ export function RhfMoneyField<
 }: RhfMoneyFieldProps<TFieldValues, TName, TTransformed>) {
   return (
     <RhfField
-      {...{ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className }}
+      {...{ name, control, rules, label, hint, help, required, disabled, excludeWhenDisabled, className }}
       asControl={false}
       render={({ field, invalid, id, describedBy }) => (
         <MoneyControl
@@ -743,6 +764,7 @@ export function RhfDateField<
   rules,
   label,
   hint,
+  help,
   required,
   disabled,
   excludeWhenDisabled,
@@ -753,7 +775,7 @@ export function RhfDateField<
 }: RhfDateFieldProps<TFieldValues, TName, TTransformed>) {
   return (
     <RhfField
-      {...{ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className }}
+      {...{ name, control, rules, label, hint, help, required, disabled, excludeWhenDisabled, className }}
       render={({ field, invalid, id }) => (
         // FormControl clones this element with `aria-describedby` / `aria-invalid`,
         // which DateControl hands on to the picker's trigger.
@@ -853,6 +875,7 @@ export function RhfDateRangePicker<
   toRules,
   label,
   hint,
+  help,
   required,
   disabled,
   excludeWhenDisabled,
@@ -886,6 +909,7 @@ export function RhfDateRangePicker<
             toState={to.fieldState}
             label={label}
             hint={hint}
+            help={help}
             required={required}
             disabled={Boolean(disabled)}
             emptyValue={emptyValue}
@@ -905,6 +929,7 @@ function RangeBody({
   toState,
   label,
   hint,
+  help,
   required,
   disabled,
   emptyValue,
@@ -917,6 +942,7 @@ function RangeBody({
   toState: ControllerFieldState;
   label: ReactNode;
   hint: ReactNode;
+  help: ReactNode;
   required?: boolean;
   disabled: boolean;
   emptyValue: "" | null;
@@ -924,8 +950,10 @@ function RangeBody({
   pickerProps: OwnDateRangeProps;
 }) {
   const { id, formItemId, formMessageId, describedBy } = useFormField();
-  // RhfField's rule: a FieldHint is its words at Large and on touch (DUP-2).
-  const shownHint = useInlineHint(hint);
+  // RhfField's rule: a FieldHint is its words at Large and on touch (DUP-2) — and at
+  // every size beside a `help`, whose "?" follows the label (0.36).
+  const helpMark = fieldHelpMark(help, label);
+  const shownHint = useInlineHint(hint, helpMark !== undefined);
   // Both fields' refs go to the one trigger (API-3, refactor audit 2026-10), so
   // `shouldFocusError` lands there whichever of the two is first in error.
   const triggerRef = useMemo(() => mergeRefs(from.ref, to.ref), [from.ref, to.ref]);
@@ -936,14 +964,22 @@ function RangeBody({
   const messageIds = messages.map((_, i) => `${formMessageId}-${i}`);
   const fromValue: unknown = from.value;
   const toValue: unknown = to.value;
+  const labelEl = hasContent(label) && (
+    // FormLabel colours from the START's error alone (its context is that field); the
+    // pair's state says it here.
+    <FormLabel id={`${id}-label`} required={required} data-error={invalid || undefined}>
+      {label}
+    </FormLabel>
+  );
   return (
     <>
-      {hasContent(label) && (
-        // FormLabel colours from the START's error alone (its context is that field);
-        // the pair's state says it here.
-        <FormLabel id={`${id}-label`} required={required} data-error={invalid || undefined}>
-          {label}
-        </FormLabel>
+      {helpMark === undefined ? (
+        labelEl
+      ) : (
+        <div className="flex items-center gap-1">
+          {labelEl}
+          <span className="flex shrink-0 items-center">{helpMark}</span>
+        </div>
       )}
       <DateRangePicker
         {...pickerProps}
@@ -1034,6 +1070,7 @@ export function RhfTimeInput<
   rules,
   label,
   hint,
+  help,
   required,
   disabled,
   excludeWhenDisabled,
@@ -1043,7 +1080,7 @@ export function RhfTimeInput<
 }: RhfTimeInputProps<TFieldValues, TName, TTransformed>) {
   return (
     <RhfField
-      {...{ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className }}
+      {...{ name, control, rules, label, hint, help, required, disabled, excludeWhenDisabled, className }}
       render={({ field, invalid }) => {
         const value: unknown = field.value;
         return (
@@ -1105,6 +1142,7 @@ export function RhfIbanInput<
   rules,
   label,
   hint,
+  help,
   required,
   disabled,
   excludeWhenDisabled,
@@ -1113,7 +1151,7 @@ export function RhfIbanInput<
 }: RhfIbanInputProps<TFieldValues, TName, TTransformed>) {
   return (
     <RhfField
-      {...{ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className }}
+      {...{ name, control, rules, label, hint, help, required, disabled, excludeWhenDisabled, className }}
       render={({ field, invalid }) => {
         const value: unknown = field.value;
         return (
@@ -1156,6 +1194,7 @@ export function RhfPhoneInput<
   rules,
   label,
   hint,
+  help,
   required,
   disabled,
   excludeWhenDisabled,
@@ -1164,7 +1203,7 @@ export function RhfPhoneInput<
 }: RhfPhoneInputProps<TFieldValues, TName, TTransformed>) {
   return (
     <RhfField
-      {...{ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className }}
+      {...{ name, control, rules, label, hint, help, required, disabled, excludeWhenDisabled, className }}
       render={({ field, invalid }) => {
         const value: unknown = field.value;
         return (
@@ -1251,6 +1290,7 @@ export function RhfCountrySelect<
   rules,
   label,
   hint,
+  help,
   required,
   disabled,
   excludeWhenDisabled,
@@ -1267,7 +1307,7 @@ export function RhfCountrySelect<
   const ownLabels = typeof label === "string" ? { country: label, ...labels } : labels;
   return (
     <RhfField
-      {...{ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className }}
+      {...{ name, control, rules, label, hint, help, required, disabled, excludeWhenDisabled, className }}
       render={({ field, invalid, labelId }) => {
         const value: unknown = field.value;
         return (
@@ -1403,6 +1443,7 @@ export function RhfMonthPicker<
   rules,
   label,
   hint,
+  help,
   required,
   disabled,
   excludeWhenDisabled,
@@ -1414,7 +1455,7 @@ export function RhfMonthPicker<
 }: RhfMonthPickerProps<TFieldValues, TName, TTransformed>) {
   return (
     <RhfField
-      {...{ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className }}
+      {...{ name, control, rules, label, hint, help, required, disabled, excludeWhenDisabled, className }}
       render={({ field, invalid, id }) => (
         // FormControl clones this element with `aria-describedby` / `aria-invalid`,
         // which MonthControl hands on to the picker's trigger.
@@ -1473,6 +1514,7 @@ export function RhfSelect<
   rules,
   label,
   hint,
+  help,
   required,
   disabled,
   excludeWhenDisabled,
@@ -1486,7 +1528,7 @@ export function RhfSelect<
 }: RhfSelectProps<TFieldValues, TName, TTransformed>) {
   return (
     <RhfField
-      {...{ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className }}
+      {...{ name, control, rules, label, hint, help, required, disabled, excludeWhenDisabled, className }}
       render={({ field, invalid }) => (
         <Select
           aria-required={required || undefined}
@@ -1523,7 +1565,9 @@ export type RhfCheckboxProps<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
   TTransformed = TFieldValues,
-> = RhfFieldBaseProps<TFieldValues, TName, TTransformed> &
+> = // No `help` (0.36): a box has no label line — its label sits beside it, inside the
+  // `<label>` a "?" cannot join — and Checkbox takes none.
+  Omit<RhfFieldBaseProps<TFieldValues, TName, TTransformed>, "help"> &
   // Checkbox's own — its lock (`commit`, `disabledReason`) among them, which a `Pick`
   // list dropped until 0.34 (DUP-9) — less the box's state the form holds, and its
   // `description`, which is the twin's `hint`.
@@ -1622,7 +1666,7 @@ export type RhfToggleGroupProps<
  * asked for it with {@link RhfTimeInput} and {@link RhfDateRangePicker}: the controls
  * its forms still had to wire by hand through {@link RhfField}'s render.
  *
- * The label is the form's {@link FormLabel} above the bare group, as on every other
+ * The label is the field's own label above the bare group, as on every other
  * bound field — the `labelPlacement="above"` shape, not the group's own field chrome —
  * and it names the group (`aria-labelledby`); the hint and the message describe it,
  * and an error paints the group's border. Focus on error goes to the option a
@@ -1646,6 +1690,7 @@ export function RhfToggleGroup<
   rules,
   label,
   hint,
+  help,
   required,
   disabled,
   excludeWhenDisabled,
@@ -1655,7 +1700,7 @@ export function RhfToggleGroup<
   const labelled = hasContent(label);
   return (
     <RhfField
-      {...{ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className }}
+      {...{ name, control, rules, label, hint, help, required, disabled, excludeWhenDisabled, className }}
       asControl={false}
       render={({ field, invalid, id, labelId, describedBy }) => (
         <ToggleControl<T>
@@ -1846,6 +1891,7 @@ export function RhfCombobox<
   rules,
   label,
   hint,
+  help,
   required,
   disabled,
   excludeWhenDisabled,
@@ -1856,7 +1902,7 @@ export function RhfCombobox<
 }: RhfComboboxProps<TFieldValues, TName, V, TTransformed>) {
   return (
     <RhfField
-      {...{ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className }}
+      {...{ name, control, rules, label, hint, help, required, disabled, excludeWhenDisabled, className }}
       asControl={false}
       message={false}
       render={({ field, invalid, error, id, describedBy }) => (
@@ -1956,6 +2002,7 @@ export function RhfInlineEntityCombobox<
   rules,
   label,
   hint,
+  help,
   required,
   disabled,
   excludeWhenDisabled,
@@ -1966,7 +2013,7 @@ export function RhfInlineEntityCombobox<
 }: RhfInlineEntityComboboxProps<TFieldValues, TName, V, TTransformed>) {
   return (
     <RhfField
-      {...{ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className }}
+      {...{ name, control, rules, label, hint, help, required, disabled, excludeWhenDisabled, className }}
       render={({ field, invalid }) => {
         const value: unknown = field.value;
         return (
@@ -2021,6 +2068,7 @@ export function RhfTextCombobox<
   rules,
   label,
   hint,
+  help,
   required,
   disabled,
   excludeWhenDisabled,
@@ -2030,7 +2078,7 @@ export function RhfTextCombobox<
 }: RhfTextComboboxProps<TFieldValues, TName, TTransformed>) {
   return (
     <RhfField
-      {...{ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className }}
+      {...{ name, control, rules, label, hint, help, required, disabled, excludeWhenDisabled, className }}
       asControl={false}
       message={false}
       render={({ field, invalid, error, id, describedBy }) => (

package/src/rhf/form-core.tsx

@@ -1,10 +1,11 @@
 /**
- * The react-hook-form adapter: the five parts every form is built from, and the hook
- * they share. `@eifi1/ui-kit/rhf`.
+ * The react-hook-form adapter: the five parts every bound field is built from, and the
+ * hook they share. Behind `@eifi1/ui-kit/rhf`, which exports `Form` alone of them.
  *
  * The kit's own module since 0.34 (refactor audit 2026-10, API-6f): the bound `Rhf*`
- * fields build on these parts, and import them from here. ./form is the public face —
- * `Form`, and until 0.35 the parts under their deprecated names, which no app imports.
+ * fields and `RhfField` build on these parts, and import them from here. ./form is the
+ * public face — `Form`; the parts left the public surface in 0.35 (deprecated in 0.34),
+ * when no app imported them any more.
  *
  * ```tsx
  * <Form {...form}>

package/src/rhf/form.tsx

@@ -1,48 +1,12 @@
 /**
- * `Form`, and until 0.35 the shadcn scaffold under its old public names — the public face
- * of ./form-core, where the scaffold lives (its header has the whole story: what differs
- * from shadcn's file, why /rhf is its own entry, how a picker clears).
+ * `Form` — the public face of ./form-core, where the shadcn scaffold the bound fields are
+ * built from lives (its header has the whole story: what differs from shadcn's file, why
+ * /rhf is its own entry, how a picker clears).
  *
- * 0.34 (refactor audit 2026-10, API-6f): no app builds a form from the scaffold any more.
+ * The scaffold itself (`FormField`, `useFormField`, `FormItem`, `FormLabel`, `FormControl`,
+ * `FormDescription`, `FormMessage` and five props types) was public until 0.35 (refactor
+ * audit 2026-10, API-6f; deprecated in 0.34): no app builds a form from it any more.
  * kastlan, the one /rhf consumer, uses `Form`, the bound `Rhf*` fields and `RhfField` for
- * a control of its own, so the seven names and their props types leave the public
- * surface in 0.35. The bound fields import the parts from the core, so the removal is
- * the block below.
+ * a control of its own — the same parts, folded into one element.
  */
-import * as core from "./form-core";
-
 export { Form } from "./form-core";
-
-/* ── Deprecated 0.34, removed in 0.35 ───────────────────────────────────────
- * Each is the core's own value under its public name. The replacement for all of them:
- * a bound field (`RhfTextField`, `RhfSelect`, …), or `RhfField` around a control of
- * your own — the same parts, folded into one element. */
-
-/** @deprecated 0.34 — the bound `Rhf*` fields, or `RhfField` for a control of your own;
- *  removed in 0.35 (API-6f). */
-export const FormField = core.FormField;
-/** @deprecated 0.34 — `RhfField`, which reads the field's ids itself; removed in 0.35
- *  (API-6f). */
-export const useFormField = core.useFormField;
-/** @deprecated 0.34 — the bound `Rhf*` fields, or `RhfField`; removed in 0.35 (API-6f). */
-export const FormItem = core.FormItem;
-/** @deprecated 0.34 — the bound fields' and `RhfField`'s `label`; removed in 0.35 (API-6f). */
-export const FormLabel = core.FormLabel;
-/** @deprecated 0.34 — `RhfField`, which wires its control the same way; removed in 0.35
- *  (API-6f). */
-export const FormControl = core.FormControl;
-/** @deprecated 0.34 — the bound fields' and `RhfField`'s `hint`; removed in 0.35 (API-6f). */
-export const FormDescription = core.FormDescription;
-/** @deprecated 0.34 — the bound fields and `RhfField`, which show the error themselves;
- *  removed in 0.35 (API-6f). */
-export const FormMessage = core.FormMessage;
-/** @deprecated 0.34 — goes with `FormItem`; removed in 0.35 (API-6f). */
-export type FormItemProps = core.FormItemProps;
-/** @deprecated 0.34 — goes with `FormLabel`; removed in 0.35 (API-6f). */
-export type FormLabelProps = core.FormLabelProps;
-/** @deprecated 0.34 — goes with `FormControl`; removed in 0.35 (API-6f). */
-export type FormControlProps = core.FormControlProps;
-/** @deprecated 0.34 — goes with `FormDescription`; removed in 0.35 (API-6f). */
-export type FormDescriptionProps = core.FormDescriptionProps;
-/** @deprecated 0.34 — goes with `FormMessage`; removed in 0.35 (API-6f). */
-export type FormMessageProps = core.FormMessageProps;

package/src/rhf/line-items.tsx

@@ -27,7 +27,7 @@
  * `summary`, `fieldLabels`, `narrowColumns`, `removePlacement` and `removeAlign` pass
  * through to {@link LineItems}. With
  * `fieldLabels="floating"` a cell's `fieldLabel` is the column's name; the bound
- * fields' own `label` is a `FormLabel` ABOVE the control, so for the floating
+ * fields' own `label` is a label ABOVE the control, so for the floating
  * one render the kit field through `RhfField`:
  * `render={({ field, invalid }) => <Input label={fieldLabel} aria-label={label} {...field} invalid={invalid} />}`.
  */

package/src/rhf/use-rhf-wizard-step.ts

@@ -12,10 +12,10 @@
  *
  * Inside a `<StepperNav>` the hook registers the step's validator with the wizard, so
  * Next (and Finish on a form-bearing last step) runs it: on success the values go to
- * `onValid` and the wizard advances; on failure react-hook-form shows its own inline
- * `<FormMessage>`s, focuses the first field in error, and the wizard stays put — and,
- * since the result carries no per-field errors, says its "fill in the required
- * fields" line so the button did not seem to do nothing. It also RETURNS the
+ * `onValid` and the wizard advances; on failure the bound fields show their inline
+ * messages, react-hook-form focuses the first field in error, and the wizard stays
+ * put — and, since the result carries no per-field errors, says its "fill in the
+ * required fields" line so the button did not seem to do nothing. It also RETURNS the
  * validator, for a nav of your own outside `<StepperNav>` (where there is no wizard
  * context to register with, so nothing is registered).
  *

package/src/rhf.ts

@@ -1,6 +1,7 @@
 // `@eifi1/ui-kit/rhf` — the react-hook-form adapter: Form and the bound Rhf* fields (and
-// RhfField as the escape hatch). The shadcn scaffold (FormField, FormItem, FormLabel,
-// FormControl, FormDescription, FormMessage, useFormField) is deprecated in 0.34.
+// RhfField as the escape hatch). The shadcn scaffold they are built from (FormField,
+// FormItem, FormLabel, FormControl, FormDescription, FormMessage, useFormField) left the
+// surface in 0.35 (refactor audit 2026-10, API-6f; deprecated in 0.34).
 //
 // The only entry point in the package that requires `react-hook-form`, and an optional
 // peer for that reason: an app without a form library installs nothing for it. NOT

package/src/settings/device-reset-setting-labels.ts

@@ -0,0 +1,20 @@
+// The English words of ./device-reset-setting, in a module with no component code: the
+// English catalogue (src/i18n/defaults.ts) imports them without the component, so `en`
+// loads as one chunk like the other languages (0.34, KS U8). ./device-reset-setting
+// re-exports them.
+
+import type { DeviceResetLabels } from "./device-reset-setting";
+
+/** docs/settings-harmonization.md §11.3, word for word. */
+export const DEFAULT_DEVICE_RESET_LABELS: DeviceResetLabels = {
+  title: "Reset this device",
+  description:
+    "Puts this device's appearance, and the way its tables and panels were left, back to the defaults. Your account, your data and your sign-in are not touched.",
+  action: "Reset this device's settings",
+  confirmTitle: "Reset this device's settings?",
+  confirmBody:
+    "Theme, colours, text size, contrast and language go back to their defaults here, and tables and panels open as they first did. Where your account has a language, a text size or a contrast, this device follows it again. Your account and your other devices stay as they are.",
+  confirmAction: "Reset",
+  done: "This device's settings are back to their defaults.",
+  keywords: "reset defaults device restore appearance tables layout",
+};