@eifi1/ui-kit 0.35.0 → 0.37.0

package/dist/components/field-parts.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/field-parts.tsx"],"sourcesContent":["import { createContext, isValidElement, useContext, useId } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactNode } from \"react\";\nimport { HelpCircle } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { hasContent } from \"../lib/presence\";\nimport { useInlineFacts } from \"../hooks/use-large-text\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { Tooltip, type TooltipSide } from \"./tooltip\";\nimport { useCommitReason, type CommitScope } from \"./write-lock\";\n\n/**\n * The pieces of a field's anatomy the kit's fields share — the static label, the hint\n * (caption or \"?\"), the caption and the error under a field, the label strip over a\n * bare group, the write lock on a control that saves itself, and the wiring under them\n * (`aria-describedby`, refs). Private to the package — not re-exported from the barrel,\n * except `FieldLabel` and `FLOATING_LABEL_STATIC`, which the barrel names (ui.tsx did until\n * 0.34 split it).\n *\n * One file since 0.23: until then the pickers' half (`field-anatomy.tsx`: the date and\n * month pickers, whose trigger is a button in a wrapper of their own, and the groups\n * with no field box) sat beside this one with its own copies of `isTextHint` and the\n * caption class (keksdose K4: \"uniform field anatomy … today it is a patchwork\").\n *\n * Nothing here imports a field module: field-base, input, select and textarea import this, and so do the combobox family,\n * the pickers and the native choice controls — the lint's no-cycle rule holds it.\n */\n\n/* ── the wiring: descriptions and refs ─────────────────────────────────────── */\n\n/**\n * Ids to describe a control by, merged in reading order: whatever the caller already\n * pointed at (standing advice), then the caption or description, then the error (the\n * news). Merge, never replace — see {@link useFieldError}. An empty list is `undefined`,\n * never `\"\"`: a dangling attribute describes the control as nothing at all.\n *\n * Here since 0.34 (DUP-11, refactor audit 2026-10); `choice-parts.ts` held it, beside a\n * copy of the presence rule, for the native choice controls alone.\n */\nexport function mergeDescribedBy(...ids: Array<string | false | null | undefined>): string | undefined {\n  const list = ids.filter(Boolean);\n  return list.length ? list.join(\" \") : undefined;\n}\n\n// The ref plumbing lives in ../lib/refs since round 0.35 (Tooltip needs it, and this module\n// renders a Tooltip); the fields keep importing it from here.\nexport { assignRef, mergeRefs } from \"../lib/refs\";\n\n/* ── the static label ─────────────────────────────────────────────────────── */\n\n// The TYPE of the small static label, without any placement. Split out so the\n// label and anything sharing its line (see `hint` on {@link FloatingField}) are\n// laid out by one flex row instead of by two absolute offsets guessing at the\n// same baseline — which is what put dev#468's \"?\" three pixels above the word it\n// belongs to.\nexport const STATIC_LABEL_TYPE =\n  \"text-caption leading-tight text-muted peer-disabled:opacity-50\";\n\n/**\n * A field's label at Large and Extra large (0.33, docs/text-size-harmonization.md\n * §10.17): a static label ABOVE the field — the phone card's \"label above value\" (§4) —\n * not a label squeezed into the field's top strip, where a long one ended in \"…\". It\n * stops being absolute, so it wraps like any text (`truncate-until-large` beside it); it\n * takes the pointer, since nothing of the field lies under it any more; and the field\n * no longer reserves the strip for it (`FIELD_FLOATING_PAD`). In the first row of a box\n * that is a grid at Large ({@link LABEL_ABOVE_BOX}), wherever it sits in the DOM — a\n * floating label FOLLOWS its input, for `peer-*`. `large:` classes, so it costs no\n * render and is right on the first paint; Normal keeps the floating label.\n *\n * The placement only: a label element adds `large:block` (a `<span>` or `<label>` in\n * flow), a label ROW keeps its `flex`.\n */\nexport const LABEL_ABOVE_AT_LARGE =\n  \"large:static large:row-start-1 large:mb-1 large:max-w-none large:pointer-events-auto\";\n\n/**\n * The box a field's label is positioned in — {@link FloatingField}'s `relative` wrapper,\n * a date or month picker's root — at Large, while it holds a label above\n * ({@link LABEL_ABOVE_AT_LARGE}): one column, the label's row over the field's. The\n * field's own absolute parts in the box (a chevron, a clear ×, a reveal toggle, a\n * calculator) are placed in the second row, so their `top-1/2` and `inset-y-*` still\n * measure the FIELD and not label and field together; the label's own elements carry\n * `data-field-label` and stay in the first. Only on a box with a visible label: without\n * one the second row would be empty.\n */\nexport const LABEL_ABOVE_BOX =\n  \"large:grid large:grid-cols-[minmax(0,1fr)] large:[&>.absolute:not([data-field-label])]:row-start-2\";\n\n// A field that always has a value (select / dropdown trigger) keeps the label\n// permanently in the floated position — small, in the top strip, value below. At Large,\n// a label above the field (LABEL_ABOVE_AT_LARGE).\nexport const FLOATING_LABEL_STATIC = cn(\n  \"pointer-events-none absolute start-3 top-1\",\n  STATIC_LABEL_TYPE,\n  \"max-w-[calc(100%-1.5rem)] truncate-until-large\",\n  LABEL_ABOVE_AT_LARGE,\n  \"large:block\",\n);\n\n/**\n * The floating label for a custom-dropdown trigger (a `<span>`, since the trigger is a\n * button not a labelable input). Same placement as {@link FloatingField}'s static label,\n * so every labelled field lines up. Render inside a `relative` wrapper, before the trigger.\n */\nexport interface FieldLabelProps extends ComponentPropsWithRef<\"span\"> {\n  children: ReactNode;\n}\n\nexport function FieldLabel({ children, className, ...rest }: FieldLabelProps) {\n  return (\n    // `data-field-label`: a label of the box it stands in, kept in the first row at Large\n    // (LABEL_ABOVE_BOX).\n    <span data-field-label=\"\" {...rest} className={cn(FLOATING_LABEL_STATIC, \"z-10\", className)}>\n      {children}\n    </span>\n  );\n}\n\n/* ── hint ─────────────────────────────────────────────────────────────────── */\n\n/**\n * The \"?\" that explains a field, on the field's own label line (dev#468).\n *\n * Pass it to a labelled `Select` / `Input` as `hint`. It exists as a\n * component rather than as a snippet each form repeats because the previous\n * version was exactly that snippet — an absolutely-positioned button whose\n * `top-1.5` was one guess at where an 11px label sits — and the reporter's\n * follow-up was *\"question mark is not centered. Is it part of the hoc?\n * positioning problems seem quite frequently.\"* It was not part of the HOC. Now\n * it is, and there is one place left where the answer can be wrong.\n *\n * A `<button>` rather than a bare icon: hover alone puts the explanation out of\n * reach of a keyboard and of every touch device, and the tooltip shows on focus\n * too. The text is also its accessible name, so a screen reader gets it without\n * the bubble ever opening.\n *\n * For a FACT — a format, a limit, a consequence — which at Large and on a touch screen\n * becomes the field's caption ({@link useInlineHint}). Paragraph-long HELP the field is\n * usable without belongs in a `HelpPopover` instead (0.34, §10.23), which opens on a tap\n * and stays a \"?\" at every size.\n */\nexport interface FieldHintProps extends Omit<ComponentPropsWithRef<\"button\">, \"children\"> {\n  /** The explanation. It is both the tooltip's text and, by default, the button's\n   *  accessible name, so a screen reader gets it without the bubble ever opening. */\n  label: string;\n  /** Default `\"start\"`: before the hint in the reading direction (the left in LTR, the\n   *  right in RTL). `left` / `right` stay physical. */\n  side?: TooltipSide;\n}\n\nexport function FieldHint({\n  label,\n  side = \"start\",\n  className,\n  \"aria-label\": ariaLabel,\n  ...rest\n}: FieldHintProps) {\n  return (\n    // `tap=\"toggle\"` (0.25): the \"?\" exists only to explain, so a tap on a phone shows\n    // the bubble and the next tap hides it — the touch rule (no bubble left behind by a\n    // tap) would otherwise make it show nothing at all.\n    <Tooltip label={label} side={side} portal tap=\"toggle\">\n      <button\n        {...rest}\n        // `type` after the spread, not before. These render inside forms — that is the\n        // only place a field has a label line — and a hint that defaulted to `submit`\n        // because a caller spread a props object at it would save the form on a click\n        // meant to explain a field.\n        type=\"button\"\n        // The explanation names the button unless the caller says otherwise; passing\n        // `aria-label` is how you shorten it for a screen reader without shortening\n        // what the bubble shows.\n        aria-label={ariaLabel ?? label}\n        // Nothing to activate: the tooltip opens on hover and on focus, and a\n        // click that did something as well would be a second, undiscoverable\n        // behaviour on the same target.\n        onClick={(e) => e.preventDefault()}\n        // The kit's focus frame (0.32, §5): the \"?\" is a tab stop, and had no ring at all.\n        className={cn(\n          \"flex rounded-full text-placeholder transition-colors hover:text-secondary\",\n          FOCUS_RING,\n          className,\n        )}\n      >\n        <HelpCircle className=\"size-3.5\" />\n      </button>\n    </Tooltip>\n  );\n}\n\n/**\n * A field's `hint` as the field should draw it here (0.32, docs/text-size-harmonization.md\n * §4 \"No fact only in a tooltip\"): at Large and Extra large, and on a touch screen, a\n * {@link FieldHint} becomes its own words — so the field shows them as its CAPTION under\n * the box, where they are read without hovering or tapping a 14 px \"?\". Anywhere else,\n * and for any other hint, the hint unchanged.\n *\n * A FieldHint only, on purpose (0.34, §10.23): a FieldHint is a FACT, and a fact stays\n * visible. Paragraph-long HELP — why, how, what the options mean; the field is usable\n * without it — goes in a `HelpPopover`, which this leaves on the label line at every\n * size: printed under the field it was the longest thing in the form (keksdose K3).\n *\n * The kit's fields call it through {@link useFieldHint} / {@link useFieldMessages}; a\n * field that resolves its own `hint` (an app's, or one of the kit's own outside this\n * file) calls it first and then treats the result as it treated a text hint.\n */\nexport function useInlineHint(hint: ReactNode): ReactNode {\n  const inline = useInlineFacts();\n  if (inline && isValidElement(hint) && hint.type === FieldHint) {\n    const words = (hint.props as FieldHintProps).label;\n    if (words) return words;\n  }\n  return hint;\n}\n\n\n/**\n * Whether a `hint` is a CAPTION (plain text: a non-empty string or a number) or\n * something for the label line (a {@link FieldHint} \"?\", or any other node).\n *\n * The rule {@link Select} and `NumberInput` already keep: the label line is 11px of\n * strip shared with the label, and a sentence placed there ran over the label and into\n * the value; a \"?\" under the field would be a button floating free of the label it\n * explains.\n */\nexport function isTextHint(hint: ReactNode): hint is string | number {\n  return (typeof hint === \"string\" && hint !== \"\") || typeof hint === \"number\";\n}\n\n/** The caption under a field — Select's and NumberInput's type, so every field's\n *  standing advice reads alike. */\nexport const FIELD_CAPTION_CLASS = \"mt-1 text-caption leading-tight text-muted\";\n\nexport interface FieldHintParts {\n  /** The caller's `aria-describedby` with the caption's id appended — standing\n   *  advice first; the error (the news) is appended after this by the field. */\n  describedBy: string | undefined;\n  /** The caption's id while there is one. */\n  captionId: string | undefined;\n  /** The caption itself, or `undefined` for a hint that is not text. */\n  captionText: string | number | undefined;\n  /** A non-text hint (a FieldHint) for the label line — or, on a field with no label\n   *  line, the end edge outside the box. `undefined` when there is none. */\n  labelHint: ReactNode | undefined;\n}\n\n/**\n * Split a field's `hint` into the caption under it (attached with `aria-describedby`)\n * or the \"?\" on its label line. See {@link isTextHint}.\n */\nexport function useFieldHint(hintProp: ReactNode, describedBy: string | undefined): FieldHintParts {\n  const hint = useInlineHint(hintProp);\n  const captionId = useId();\n  const text = isTextHint(hint);\n  return {\n    describedBy: text ? mergeDescribedBy(describedBy, captionId) : describedBy,\n    captionId: text ? captionId : undefined,\n    captionText: text ? hint : undefined,\n    labelHint: !text && hasContent(hint) ? hint : undefined,\n  };\n}\n\n/** The error line under a field — one type for every field's message (DUP-8, refactor\n *  audit 2026-10: ChipInput and FileDropzone printed theirs in `text-xs`). */\nexport const FIELD_ERROR_CLASS = \"mt-1 text-caption leading-tight text-danger\";\n\n/**\n * The message under a field that is wrong, and the wiring that attaches it.\n *\n * `invalid` paints the field (`FIELD_INVALID`) and sets `aria-invalid`, and there it\n * stopped: a field that announces \"invalid\" and nothing else has told a screen-reader\n * user only that they are stuck. The message was always on screen — a sibling `<p>`\n * beside the field — and never in the accessibility tree, because attaching it needs an\n * id on the message and an `aria-describedby` on the control, and no caller was going to\n * mint one by hand for every field on a form.\n *\n * Two rules the wiring has to keep:\n *\n *  - **Merge, never replace.** A field may already point at a hint (\"at least twelve\n *    characters\"). Overwriting that reference to say the field is wrong trades one half\n *    of the answer for the other — and it keeps the half the user has already read. The\n *    hint stays first: it is the standing advice, the error is the news.\n *  - **`invalid` keeps working alone**, for the forms whose message lives somewhere else\n *    entirely (a summary at the top of a dialog). There is nothing to point at then, and\n *    a dangling id describes the field as nothing at all.\n *\n * Deliberately NOT `role=\"alert\"`. `aria-describedby` is read when focus reaches the\n * control, which is where a field's own error is wanted; an alert would also interrupt\n * whatever is being read at the time, on every keystroke of a form that re-validates as\n * you type.\n *\n * Every field's since 0.34 (DUP-8, refactor audit 2026-10): it was ui.tsx's own, so the\n * combobox family restated it as `useComboboxFieldError` — without the fourth argument,\n * so Autocomplete announced a form library's `aria-invalid` and did not paint it — and\n * ten fields restated it inline.\n */\nexport function useFieldError(\n  error: ReactNode,\n  invalid: boolean | undefined,\n  describedBy: string | undefined,\n  /** The caller's own `aria-invalid`. A form library sets THIS (see `@eifi1/ui-kit/rhf`\n   *  `RhfField`), not our `invalid` prop — and a field that announces invalid should\n   *  look it too. */\n  ariaInvalid?: unknown,\n): { isInvalid: boolean; describedBy: string | undefined; errorEl: ReactNode } {\n  const errorId = useId();\n  const hasError = hasContent(error);\n  return {\n    /** A field carrying a message that says what is wrong with it IS wrong. */\n    isInvalid: Boolean(invalid) || hasError || ariaInvalid === true || ariaInvalid === \"true\",\n    describedBy: mergeDescribedBy(describedBy, hasError && errorId),\n    errorEl: hasError ? (\n      <p id={errorId} className={FIELD_ERROR_CLASS}>\n        {error}\n      </p>\n    ) : null,\n  };\n}\n\n/** The caption under a field, as {@link Select} draws its own. */\nexport function FieldCaption({ parts, className }: { parts: FieldHintParts; className?: string }) {\n  if (parts.captionText === undefined) return null;\n  return (\n    <p id={parts.captionId} className={cn(FIELD_CAPTION_CLASS, className)}>\n      {parts.captionText}\n    </p>\n  );\n}\n\n/**\n * Classes that take a static floating label (`FLOATING_LABEL_STATIC`: `FieldLabel`,\n * `ComboboxFieldLabel`) out of its own absolute slot and into a {@link StaticLabelRow}.\n * `static` wins over `absolute` through `cn`'s merge; `min-w-0` lets it truncate in\n * the row. At Large the ROW stands above the field, so the label inside it drops the\n * margin a label above takes alone (`large:mb-0`), and stays level with its \"?\".\n */\nexport const LABEL_IN_ROW = \"static min-w-0 large:mb-0\";\n\n/**\n * A static label and its \"?\" on one line, in the top strip of a field that lays out its\n * own label — the combobox family, which cannot use {@link FloatingField} because the\n * trigger, the anchored panel and the label hang off a box of their own.\n *\n * FloatingField's static row, with one difference: it stops at `end-9`, the column the\n * chevron (or the clear \"×\") takes, so a long label truncates before it rather than\n * putting the \"?\" on top of the chevron. The hint keeps its width; the label gives way.\n */\nexport function StaticLabelRow({ hint, children }: { hint: ReactNode; children: ReactNode }) {\n  return (\n    <div\n      data-field-label=\"\"\n      className={cn(\"pointer-events-none absolute start-3 end-9 top-1 z-10 flex items-center gap-1\", LABEL_ABOVE_AT_LARGE)}\n    >\n      {children}\n      <span className=\"pointer-events-auto flex shrink-0 items-center\">{hint}</span>\n    </div>\n  );\n}\n\n/**\n * A field with no label line and a FieldHint \"?\": the hint at the end edge, OUTSIDE the\n * box, as an unlabelled {@link Select} has placed it since 0.15.5. Without a hint the\n * field is returned exactly as it was, so the wrapper costs nothing where it does not\n * apply.\n */\nexport function EndHintRow({\n  hint,\n  className,\n  children,\n}: {\n  hint: ReactNode | undefined;\n  className?: string;\n  children: ReactNode;\n}) {\n  if (hint === undefined) return <>{children}</>;\n  return (\n    <div className={cn(\"flex items-center gap-1.5\", className)}>\n      <div className=\"min-w-0 flex-1\">{children}</div>\n      <span className=\"flex shrink-0 items-center\">{hint}</span>\n    </div>\n  );\n}\n\n/* ── the write lock on a control that saves itself (keksdose K3) ───────────── */\n\nexport interface LockReason {\n  /** The reason in force — the lock's (with `commit` under a locked\n   *  `WriteLockProvider`), else the control's own `disabledReason`. */\n  reason: ReactNode;\n  /** There is a reason: the control is locked the focusable way. */\n  locked: boolean;\n  /** The id of the reason's hidden copy, for the control's `aria-describedby`. */\n  reasonId: string;\n}\n\n/**\n * {@link Button}'s `commit` + `disabledReason`, for a control that IS its own commit — a\n * switch, a checkbox or a select that saves on change, a list row whose click writes.\n * The lock's reason wins over the control's own (`useCommitReason`).\n */\nexport function useLockReason(commit: CommitScope | undefined, disabledReason: ReactNode): LockReason {\n  const reason = useCommitReason(commit, disabledReason);\n  const reasonId = useId();\n  return { reason, locked: hasContent(reason), reasonId };\n}\n\n/**\n * A locked control and its reason — the kit's ONE frame for it, used by Button,\n * IconButton, Chip, Checkbox, Switch and every field that locks (DUP-3, refactor audit\n * 2026-10: Button's `ReasonFrame` and Chip's `ChipReasonFrame` were copies of it, and\n * only those two drew the line, so a field locked through `commit` kept its reason in a\n * tooltip on a phone while the Save beside it said it in words). Where it shows is\n * {@link DisabledReasonDisplay}'s: by default a LINE under the control at Large and on a\n * touch screen ({@link DisabledReasonLine}), the kit {@link Tooltip} otherwise.\n *\n * A component of its own so only a LOCKED control asks the text size and the pointer;\n * the hundreds of unlocked controls on a page subscribe to nothing.\n *\n * Tooltip form: the control in a FRAGMENT with a `hidden` copy of the reason for its\n * `aria-describedby`, so the Tooltip does not also clone its bubble's id into the\n * description — the same sentence twice would be read on every focus. Line form: the\n * line IS the description (it carries `reasonId`), and no bubble repeats what is on\n * screen.\n *\n * `className` is the wrapper's, which becomes the outermost element while locked — a\n * control moves its own layout classes here so a lock does not reflow the form.\n */\nexport function LockedReason({\n  lock,\n  display,\n  line: lineProp,\n  side,\n  portal,\n  className,\n  lineClassName,\n  children,\n}: {\n  /** The reason, and the id the control's `aria-describedby` names. */\n  lock: Pick<LockReason, \"reason\" | \"reasonId\">;\n  /** Where the reason shows — the control's `disabledReasonDisplay`. Default `\"auto\"`. */\n  display?: DisabledReasonDisplay;\n  /** The answer of a caller that asked {@link useDisabledReasonLine} for its own layout\n   *  already (Checkbox, Switch); wins over `display`. */\n  line?: boolean;\n  /** The bubble's side and portal — IconButton's `tooltipSide` / `tooltipPortal`. */\n  side?: TooltipSide;\n  portal?: boolean;\n  className?: string;\n  /** Classes for the line itself — a list row's padding, so the words line up with the\n   *  row's. */\n  lineClassName?: string;\n  children: ReactNode;\n}) {\n  const asked = useDisabledReasonLine(display);\n  if (lineProp ?? asked) {\n    return (\n      <DisabledReasonLine id={lock.reasonId} reason={lock.reason} className={className} lineClassName={lineClassName}>\n        {children}\n      </DisabledReasonLine>\n    );\n  }\n  return (\n    <Tooltip label={lock.reason} side={side} portal={portal} className={className}>\n      <>\n        {children}\n        <span id={lock.reasonId} hidden>\n          {lock.reason}\n        </span>\n      </>\n    </Tooltip>\n  );\n}\n\n/* ── no fact only in a tooltip (0.32, docs/text-size-harmonization.md §4, §10.8) ── */\n\n/**\n * Where a control's `disabledReason` is shown (§4 \"No fact only in a tooltip\"):\n *\n * - `\"auto\"` (default): as a LINE under the control at Large and Extra large and on a\n *   touch screen (`useInlineFacts`) — the reader asked for bigger type, or cannot hover\n *   — and in the kit {@link Tooltip} otherwise, where a pointer can hover it open and\n *   the form keeps its rhythm. Inside {@link CompactControls} (a top bar, a dense row's\n *   inline actions) it stays the tooltip at every size: there is no room for a line.\n * - `\"line\"`: always the line — a form whose locked submit should say why at once.\n * - `\"tooltip\"`: always the tooltip — a place the caller knows has no room, and where\n *   the reason is also said elsewhere on the screen (a banner over the form).\n *\n * Either way the reason is the control's `aria-describedby`, so a screen reader hears\n * it on focus; the line IS that description (one copy), the tooltip keeps its hidden\n * copy as before.\n */\nexport type DisabledReasonDisplay = \"auto\" | \"line\" | \"tooltip\";\n\n/**\n * Marks a region where the controls must stay compact at every text size (§4, §10.8):\n * an IconButton keeps its icon alone (its `label` stays the name and the tooltip) and a\n * `disabledReason` stays in the tooltip rather than a line. AppShell puts its top bar\n * in one (\"the top bar keeps its essential icons\"); `RowActions` its inline icons.\n *\n * For a toolbar that has no room, not for a whole page: the contract asks that the icon\n * alone be rare. A dense row's actions belong in `RowActions`, which collapses them\n * into a \"⋯\" menu at Large instead.\n */\nexport const CompactControlsContext = createContext(false);\n\nexport function CompactControls({ children, compact = true }: { children: ReactNode; compact?: boolean }) {\n  return <CompactControlsContext.Provider value={compact}>{children}</CompactControlsContext.Provider>;\n}\n\n/** Whether a control's `disabledReason` is drawn as a line here — see\n *  {@link DisabledReasonDisplay}. For the kit's own controls (Button, IconButton, Chip,\n *  ToggleGroup) and an app's control that has a reason to give. */\nexport function useDisabledReasonLine(display: DisabledReasonDisplay = \"auto\"): boolean {\n  const compact = useContext(CompactControlsContext);\n  const inline = useInlineFacts();\n  if (display === \"line\") return true;\n  if (display === \"tooltip\") return false;\n  return inline && !compact;\n}\n\n/** The reason line's type: a field caption's ({@link FIELD_CAPTION_CLASS}), so a locked\n *  control's \"why\" reads like a field's standing advice. Capped, so a long reason under\n *  a small control wraps rather than widening its row without end. */\nexport const DISABLED_REASON_LINE_CLASS =\n  \"mt-1 block max-w-[20rem] text-caption leading-tight text-muted\";\n\n/**\n * A control and its `disabledReason` as a line under it — the `\"line\"` form of\n * {@link DisabledReasonDisplay}. The wrapper is the flex item now (`className`: the\n * control's own layout, e.g. `self-stretch`); `items-start` keeps the control its own\n * width, and a column parent still stretches the wrapper (FormActions' phone stack).\n * The line carries `id`, which the control's `aria-describedby` names.\n */\nexport function DisabledReasonLine({\n  id,\n  reason,\n  className,\n  lineClassName,\n  children,\n}: {\n  id: string;\n  reason: ReactNode;\n  className?: string;\n  /** Classes for the line itself (0.34) — a list row's padding, so its words start\n   *  where the row's do. */\n  lineClassName?: string;\n  children: ReactNode;\n}) {\n  return (\n    <span data-slot=\"disabled-reason\" className={cn(\"inline-flex max-w-full flex-col items-start\", className)}>\n      {children}\n      <span id={id} className={cn(DISABLED_REASON_LINE_CLASS, lineClassName)}>\n        {reason}\n      </span>\n    </span>\n  );\n}\n\n/* ── groups ───────────────────────────────────────────────────────────────── */\n\n/**\n * Set by {@link CheckboxGroup}: its legend carries the one required star, so a box\n * inside it keeps the native `required` (a form still refuses an empty set) but draws no\n * star of its own — four stars on four languages would read as four separate demands.\n * ChoiceCardGroup's `InGroupContext`, for the plain checkbox.\n */\nexport const RequiredStarOnLegend = createContext(false);\n\n/* ── fields not built on FloatingField: pickers and bare groups ──────────── */\n\nexport interface FieldMessages {\n  /** `invalid`, a message, or an `aria-invalid` from outside (a form library). */\n  isInvalid: boolean;\n  /** The caller's description, then the caption, then a lock's reason, then the error —\n   *  the standing advice before the news, as {@link useFieldError} orders them. */\n  describedBy: string | undefined;\n  /** The caption and the error, for under the field; `null` when there is neither. */\n  below: ReactNode;\n  /** The hint for the LABEL line (a `FieldHint`), or `undefined` when the hint is a\n   *  caption or there is none. */\n  labelHint: ReactNode;\n}\n\n/**\n * `hint` / `error` / `invalid` resolved the way `Select` resolves them —\n * {@link useFieldHint} and {@link useFieldError} together, for a field that draws what\n * goes under it in one place (a picker, a group, a field built on another).\n */\nexport function useFieldMessages({\n  hint,\n  error,\n  invalid,\n  describedBy,\n  ariaInvalid,\n  reasonId,\n}: {\n  hint?: ReactNode;\n  error?: ReactNode;\n  invalid?: boolean;\n  describedBy?: string;\n  ariaInvalid?: unknown;\n  /** A lock's reason (`useLockReason`'s `reasonId`, while locked): described after the\n   *  caption and before the error, as on Select. */\n  reasonId?: string | false;\n}): FieldMessages {\n  const hintParts = useFieldHint(hint, describedBy);\n  const field = useFieldError(error, invalid, mergeDescribedBy(hintParts.describedBy, reasonId), ariaInvalid);\n  return {\n    isInvalid: field.isInvalid,\n    describedBy: field.describedBy,\n    below:\n      hintParts.captionText !== undefined || field.errorEl !== null ? (\n        <>\n          <FieldCaption parts={hintParts} />\n          {field.errorEl}\n        </>\n      ) : null,\n    labelHint: hintParts.labelHint,\n  };\n}\n\n/**\n * The field and what is under it, as one box — `FieldGroup` in field-base.tsx, for the same\n * reasons written there. Nothing of its own while there is nothing under the field and\n * the caller passed no `error` key (the DOM is exactly what it was before these props);\n * once `error` is passed the box is kept even with no message, so the trigger is never\n * reparented — and remounted, losing focus — as the message comes and goes.\n */\nexport function FieldBox({\n  below,\n  reserve,\n  children,\n}: {\n  below: ReactNode;\n  reserve: boolean;\n  children: ReactNode;\n}) {\n  if (below === null && !reserve) return <>{children}</>;\n  return (\n    <div>\n      {children}\n      {below}\n    </div>\n  );\n}\n\n/**\n * The static label in a trigger field's top strip — a {@link FieldLabel}, or, with a\n * `FieldHint`, the label and its \"?\" laid out on ONE flex row (dev#468: two absolute\n * offsets guessing at the same baseline put the \"?\" three pixels above its word).\n * `FloatingField`'s static-label row, except that it stops at `end-9`: the date and\n * month triggers keep that column (`pe-9`) for the calendar glyph or the clear ×, and a\n * long label truncates before it rather than putting the \"?\" on top of it.\n */\nexport function FieldLabelLine({ label, hint }: { label: ReactNode; hint?: ReactNode }) {\n  if (!hasContent(hint)) return <FieldLabel>{label}</FieldLabel>;\n  return (\n    // `z-10` as FieldLabel has it: the trigger after it is `relative` and would paint\n    // over the row (and take the \"?\"'s hover) otherwise. Above the field at Large.\n    <div\n      data-field-label=\"\"\n      className={cn(\"pointer-events-none absolute start-3 end-9 top-1 z-10 flex items-center gap-1\", LABEL_ABOVE_AT_LARGE)}\n    >\n      <FieldLabel className={cn(LABEL_IN_ROW, \"max-w-full\")}>{label}</FieldLabel>\n      <span className=\"pointer-events-auto flex shrink-0 items-center\">{hint}</span>\n    </div>\n  );\n}\n\n/**\n * How tall the strip over a bare group is: 20px at Normal, for every group the kit\n * draws one over — ToggleGroup's `labelPlacement=\"strip\"`, SwatchPicker, IconPicker\n * and {@link FieldStrip} (whose `pad` named two heights until 0.34).\n *\n * The label ROW, not the label, is what has to fit (keksdose dev#593, kk K4, measured in\n * headless Chromium): it sits `top-1` (4px) and is as tall as the taller of the label\n * (11px `text-caption` in a `leading-tight` line, 13.75px) and its \"?\" (a 14px icon,\n * `size-3.5`) — so it ends 18px down. The strip has to be at least that:\n *\n *     label row: 4 + max(13.75, 14) = 18   ≤   strip: 20   (2px clear of the content)\n *\n * Until 0.34 a 16px strip (`\"field\"`) stood over the segmented group so that 16 + its\n * 26px box made a labelled Input's 42px (keksdose's `ClearedStatusPicker`, live #288 /\n * #431). The label and its \"?\" then crossed the group's top border by 2px — *\"the\n * question mark even interferes with it\"* (at 125 %: label row 424–438, border at 436).\n * The 4px come out of the group's segments instead (`STRIP_SEGMENT` in\n * toggle-group.tsx): 20 + 22 = 42. A tile, a map, a row of buttons — content with no\n * inset — needed the 20px already (keksdose's `FlagPicker` and location field, `pt-5`).\n *\n * Every term is rem, so the sum holds at any browser font size. At Large and Extra large\n * there is no strip: the label row stands above the content, in flow\n * ({@link LABEL_ABOVE_AT_LARGE}), and the padding goes (`large:pt-0` in\n * {@link LabelStrip}), so nothing lies under the label to cross.\n */\nexport const LABEL_STRIP_PAD = \"pt-5\";\n\n/**\n * The 11px label (and its `FieldHint`) over a group that is NOT a field — keksdose K2:\n * a segmented control or a row of swatches standing in a form row beside labelled\n * inputs, whose label must sit on the same line as theirs (`top-1`, `inset-x-3`, the\n * type of a field's static label) without the group growing a field's border round\n * it. `id` goes on the label so the group can be `aria-labelledby` it.\n *\n * `relative` is load-bearing twice over: the row is positioned against it, and a\n * caller's `sr-only` label cannot escape it (sr-only-containment).\n *\n * Any other attribute (`rest`) lands on the wrapper — {@link FieldStrip} makes it the\n * `role=\"group\"` its label names. The kit's own groups pass none, so their wrapper is\n * the bare box it was in 0.22.\n */\nexport function LabelStrip({\n  labelId,\n  label,\n  hint,\n  disabled,\n  className,\n  children,\n  ...rest\n}: Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> & {\n  labelId: string;\n  label: ReactNode;\n  /** What rides the label line beside the label — a resolved `labelHint`\n   *  ({@link useFieldMessages}), never a raw `hint`: a FieldHint is the caption at Large\n   *  and on touch, and the caller draws that under its group. */\n  hint?: ReactNode;\n  /** Dim the label with its group, as `peer-disabled:` dims a field's own. */\n  disabled?: boolean;\n  children: ReactNode;\n}) {\n  return (\n    // At Large the row is a label above the group, in flow (0.33, §10.17), and the\n    // strip's padding goes: nothing lies under it any more.\n    <div {...rest} className={cn(\"relative min-w-0\", LABEL_STRIP_PAD, \"large:pt-0\", className)}>\n      <div\n        data-field-label=\"\"\n        className={cn(\"pointer-events-none absolute inset-x-3 top-1 flex items-center gap-1\", LABEL_ABOVE_AT_LARGE)}\n      >\n        {/* `static`: FieldLabel positions itself absolutely; here the ROW is\n            positioned, so the label and its \"?\" are centred on one line by the flex\n            layout (dev#468). */}\n        <FieldLabel id={labelId} className={cn(LABEL_IN_ROW, \"max-w-full\", disabled && \"opacity-50\")}>\n          {label}\n        </FieldLabel>\n        {hasContent(hint) && <span className=\"pointer-events-auto flex shrink-0 items-center\">{hint}</span>}\n      </div>\n      {children}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/field-parts.tsx"],"sourcesContent":["import { createContext, isValidElement, useContext, useId } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactNode } from \"react\";\nimport { HelpCircle } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { hasContent } from \"../lib/presence\";\nimport { plainText } from \"../lib/plain-text\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels } from \"../i18n/kit-labels\";\nimport { useInlineFacts } from \"../hooks/use-large-text\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { HelpPopover } from \"./help-popover\";\nimport { Tooltip, type TooltipSide } from \"./tooltip\";\nimport { useCommitReason, type CommitScope } from \"./write-lock\";\n\n/**\n * The pieces of a field's anatomy the kit's fields share — the static label, the hint\n * (caption or \"?\"), the caption and the error under a field, the label strip over a\n * bare group, the write lock on a control that saves itself, and the wiring under them\n * (`aria-describedby`, refs). Private to the package — not re-exported from the barrel,\n * except `FieldLabel` and `FLOATING_LABEL_STATIC`, which the barrel names (ui.tsx did until\n * 0.34 split it).\n *\n * One file since 0.23: until then the pickers' half (`field-anatomy.tsx`: the date and\n * month pickers, whose trigger is a button in a wrapper of their own, and the groups\n * with no field box) sat beside this one with its own copies of `isTextHint` and the\n * caption class (keksdose K4: \"uniform field anatomy … today it is a patchwork\").\n *\n * Nothing here imports a field module: field-base, input, select and textarea import this, and so do the combobox family,\n * the pickers and the native choice controls — the lint's no-cycle rule holds it.\n */\n\n/* ── the wiring: descriptions and refs ─────────────────────────────────────── */\n\n/**\n * Ids to describe a control by, merged in reading order: whatever the caller already\n * pointed at (standing advice), then the caption or description, then the error (the\n * news). Merge, never replace — see {@link useFieldError}. An empty list is `undefined`,\n * never `\"\"`: a dangling attribute describes the control as nothing at all.\n *\n * Here since 0.34 (DUP-11, refactor audit 2026-10); `choice-parts.ts` held it, beside a\n * copy of the presence rule, for the native choice controls alone.\n */\nexport function mergeDescribedBy(...ids: Array<string | false | null | undefined>): string | undefined {\n  const list = ids.filter(Boolean);\n  return list.length ? list.join(\" \") : undefined;\n}\n\n// The ref plumbing lives in ../lib/refs since round 0.35 (Tooltip needs it, and this module\n// renders a Tooltip); the fields keep importing it from here.\nexport { assignRef, mergeRefs } from \"../lib/refs\";\n\n/* ── the static label ─────────────────────────────────────────────────────── */\n\n// The TYPE of the small static label, without any placement. Split out so the\n// label and anything sharing its line (see `hint` on {@link FloatingField}) are\n// laid out by one flex row instead of by two absolute offsets guessing at the\n// same baseline — which is what put dev#468's \"?\" three pixels above the word it\n// belongs to.\nexport const STATIC_LABEL_TYPE =\n  \"text-caption leading-tight text-muted peer-disabled:opacity-50\";\n\n/**\n * A field's label at Large and Extra large (0.33, docs/text-size-harmonization.md\n * §10.17): a static label ABOVE the field — the phone card's \"label above value\" (§4) —\n * not a label squeezed into the field's top strip, where a long one ended in \"…\". It\n * stops being absolute, so it wraps like any text (`truncate-until-large` beside it); it\n * takes the pointer, since nothing of the field lies under it any more; and the field\n * no longer reserves the strip for it (`FIELD_FLOATING_PAD`). In the first row of a box\n * that is a grid at Large ({@link LABEL_ABOVE_BOX}), wherever it sits in the DOM — a\n * floating label FOLLOWS its input, for `peer-*`. `large:` classes, so it costs no\n * render and is right on the first paint; Normal keeps the floating label.\n *\n * The placement only: a label element adds `large:block` (a `<span>` or `<label>` in\n * flow), a label ROW keeps its `flex`.\n */\nexport const LABEL_ABOVE_AT_LARGE =\n  \"large:static large:row-start-1 large:mb-1 large:max-w-none large:pointer-events-auto\";\n\n/**\n * The box a field's label is positioned in — {@link FloatingField}'s `relative` wrapper,\n * a date or month picker's root — at Large, while it holds a label above\n * ({@link LABEL_ABOVE_AT_LARGE}): one column, the label's row over the field's. The\n * field's own absolute parts in the box (a chevron, a clear ×, a reveal toggle, a\n * calculator) are placed in the second row, so their `top-1/2` and `inset-y-*` still\n * measure the FIELD and not label and field together; the label's own elements carry\n * `data-field-label` and stay in the first. Only on a box with a visible label: without\n * one the second row would be empty.\n */\nexport const LABEL_ABOVE_BOX =\n  \"large:grid large:grid-cols-[minmax(0,1fr)] large:[&>.absolute:not([data-field-label])]:row-start-2\";\n\n// A field that always has a value (select / dropdown trigger) keeps the label\n// permanently in the floated position — small, in the top strip, value below. At Large,\n// a label above the field (LABEL_ABOVE_AT_LARGE).\nexport const FLOATING_LABEL_STATIC = cn(\n  \"pointer-events-none absolute start-3 top-1\",\n  STATIC_LABEL_TYPE,\n  \"max-w-[calc(100%-1.5rem)] truncate-until-large\",\n  LABEL_ABOVE_AT_LARGE,\n  \"large:block\",\n);\n\n/**\n * The floating label for a custom-dropdown trigger (a `<span>`, since the trigger is a\n * button not a labelable input). Same placement as {@link FloatingField}'s static label,\n * so every labelled field lines up. Render inside a `relative` wrapper, before the trigger.\n */\nexport interface FieldLabelProps extends ComponentPropsWithRef<\"span\"> {\n  children: ReactNode;\n}\n\nexport function FieldLabel({ children, className, ...rest }: FieldLabelProps) {\n  return (\n    // `data-field-label`: a label of the box it stands in, kept in the first row at Large\n    // (LABEL_ABOVE_BOX).\n    <span data-field-label=\"\" {...rest} className={cn(FLOATING_LABEL_STATIC, \"z-10\", className)}>\n      {children}\n    </span>\n  );\n}\n\n/* ── hint ─────────────────────────────────────────────────────────────────── */\n\n/**\n * The \"?\" that explains a field, on the field's own label line (dev#468).\n *\n * Pass it to a labelled `Select` / `Input` as `hint`. It exists as a\n * component rather than as a snippet each form repeats because the previous\n * version was exactly that snippet — an absolutely-positioned button whose\n * `top-1.5` was one guess at where an 11px label sits — and the reporter's\n * follow-up was *\"question mark is not centered. Is it part of the hoc?\n * positioning problems seem quite frequently.\"* It was not part of the HOC. Now\n * it is, and there is one place left where the answer can be wrong.\n *\n * A `<button>` rather than a bare icon: hover alone puts the explanation out of\n * reach of a keyboard and of every touch device, and the tooltip shows on focus\n * too. The text is also its accessible name, so a screen reader gets it without\n * the bubble ever opening.\n *\n * For a FACT — a format, a limit, a consequence — which at Large and on a touch screen\n * becomes the field's caption ({@link useInlineHint}). Paragraph-long HELP the field is\n * usable without belongs in a `HelpPopover` instead (0.34, §10.23), which opens on a tap\n * and stays a \"?\" at every size.\n */\nexport interface FieldHintProps extends Omit<ComponentPropsWithRef<\"button\">, \"children\"> {\n  /** The explanation. It is both the tooltip's text and, by default, the button's\n   *  accessible name, so a screen reader gets it without the bubble ever opening. */\n  label: string;\n  /** Default `\"start\"`: before the hint in the reading direction (the left in LTR, the\n   *  right in RTL). `left` / `right` stay physical. */\n  side?: TooltipSide;\n}\n\nexport function FieldHint({\n  label,\n  side = \"start\",\n  className,\n  \"aria-label\": ariaLabel,\n  ...rest\n}: FieldHintProps) {\n  return (\n    // `tap=\"toggle\"` (0.25): the \"?\" exists only to explain, so a tap on a phone shows\n    // the bubble and the next tap hides it — the touch rule (no bubble left behind by a\n    // tap) would otherwise make it show nothing at all.\n    <Tooltip label={label} side={side} portal tap=\"toggle\">\n      <button\n        {...rest}\n        // `type` after the spread, not before. These render inside forms — that is the\n        // only place a field has a label line — and a hint that defaulted to `submit`\n        // because a caller spread a props object at it would save the form on a click\n        // meant to explain a field.\n        type=\"button\"\n        // The explanation names the button unless the caller says otherwise; passing\n        // `aria-label` is how you shorten it for a screen reader without shortening\n        // what the bubble shows.\n        aria-label={ariaLabel ?? label}\n        // Nothing to activate: the tooltip opens on hover and on focus, and a\n        // click that did something as well would be a second, undiscoverable\n        // behaviour on the same target.\n        onClick={(e) => e.preventDefault()}\n        // The kit's focus frame (0.32, §5): the \"?\" is a tab stop, and had no ring at all.\n        className={cn(\n          \"flex rounded-full text-placeholder transition-colors hover:text-secondary\",\n          FOCUS_RING,\n          className,\n        )}\n      >\n        <HelpCircle className=\"size-3.5\" />\n      </button>\n    </Tooltip>\n  );\n}\n\n/**\n * A field's `hint` as the field should draw it here (0.32, docs/text-size-harmonization.md\n * §4 \"No fact only in a tooltip\"): at Large and Extra large, and on a touch screen, a\n * {@link FieldHint} becomes its own words — so the field shows them as its CAPTION under\n * the box, where they are read without hovering or tapping a 14 px \"?\". Anywhere else,\n * and for any other hint, the hint unchanged.\n *\n * A FieldHint only, on purpose (0.34, §10.23): a FieldHint is a FACT, and a fact stays\n * visible. Paragraph-long HELP — why, how, what the options mean; the field is usable\n * without it — goes in a `HelpPopover`, which this leaves on the label line at every\n * size: printed under the field it was the longest thing in the form (keksdose K3).\n *\n * The kit's fields call it through {@link useFieldHint} / {@link useFieldMessages}; a\n * field that resolves its own `hint` (an app's, or one of the kit's own outside this\n * file) calls it first and then treats the result as it treated a text hint.\n *\n * `withHelp` (round 0.36): the field has a `help`, whose \"?\" is the field's only one\n * ({@link fieldHelpMark}) — so a FieldHint is its words at EVERY size, not only at Large\n * and on touch.\n */\nexport function useInlineHint(hint: ReactNode, withHelp = false): ReactNode {\n  const inline = useInlineFacts();\n  if ((inline || withHelp) && isValidElement(hint) && hint.type === FieldHint) {\n    const words = (hint.props as FieldHintProps).label;\n    if (words) return words;\n  }\n  return hint;\n}\n\n/* ── help (round 0.36, docs/text-size-harmonization.md §4, §10.23) ─────────── */\n\n/**\n * The doc every field's `help` prop points at.\n *\n * A field may carry two kinds of words (§10.23): a FACT — a format, a limit, a\n * consequence — which stays visible, and HELP — why the field exists, how to choose,\n * what the options mean — which the field is usable without and which may sit behind a\n * \"?\". Until 0.36 a field had one slot, `hint`, so a field with both had to drop one or\n * print a paragraph (Kurvenschmiede's \"How it was measured\", round 0.36 H). Now:\n *\n * - `hint` is the fact, the caption under the field, on its `aria-describedby`;\n * - `help` is the help, a {@link HelpPopover} \"?\" on the label line (an unlabelled\n *   field's at its end edge, as a hint's), named \"About “<label>”\" (`common.aboutField`,\n *   from the label's text, else the `aria-label`, else `common.help`). Pass a\n *   `HelpPopover` as `help` to name it yourself (\"What do the statuses mean?\").\n *\n * The help's \"?\" is then the field's ONLY \"?\": a `FieldHint` passed as `hint` beside it\n * draws none of its own and shows its words as the caption at every size, as it does at\n * Large and on touch; any other `hint` is the caption too. Two \"?\" side by side would\n * look the same and open different things.\n */\nexport interface FieldHelpProps {\n  /**\n   * Help the field is usable without — why it exists, how to choose, what the options\n   * mean — behind the field's one \"?\" on its label line: a {@link HelpPopover} named\n   * \"About “<label>”\" that opens on a tap (round 0.36, docs/text-size-harmonization.md §4).\n   * Pass a `HelpPopover` to name it yourself. `hint` stays the visible fact: with `help`\n   * set it is the caption under the field at every size, a `FieldHint` included.\n   */\n  help?: ReactNode;\n}\n\n/**\n * The \"?\" for a field's `help` — the field's own name, \"About “<label>”\", in the reader's\n * language. A component so that a field without `help` asks the labels nothing.\n */\nfunction FieldHelp({ name, children }: { name: ReactNode; children: ReactNode }) {\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const text = plainText(name);\n  return <HelpPopover label={text === undefined ? common.help : common.aboutField(text)}>{children}</HelpPopover>;\n}\n\n/**\n * A field's `help` as the \"?\" for its label line, or `undefined` when there is none. A\n * {@link HelpPopover} is used as it is (it carries its own name); anything else is put\n * in one named \"About “<name>”\" — `name` is the field's label, else its `aria-label`.\n */\nexport function fieldHelpMark(help: ReactNode, name: ReactNode): ReactNode | undefined {\n  if (!hasContent(help)) return undefined;\n  if (isValidElement(help) && help.type === HelpPopover) return help;\n  return <FieldHelp name={name}>{help}</FieldHelp>;\n}\n\n/** What {@link useFieldHint} needs to draw a field's `help`. */\nexport interface FieldHelpSource {\n  /** The field's `help`. */\n  help?: ReactNode;\n  /** What names its \"?\": the field's label, else its `aria-label`. */\n  name?: ReactNode;\n}\n\n\n/**\n * Whether a `hint` is a CAPTION (plain text: a non-empty string or a number) or\n * something for the label line (a {@link FieldHint} \"?\", or any other node).\n *\n * The rule {@link Select} and `NumberInput` already keep: the label line is 11px of\n * strip shared with the label, and a sentence placed there ran over the label and into\n * the value; a \"?\" under the field would be a button floating free of the label it\n * explains.\n */\nexport function isTextHint(hint: ReactNode): hint is string | number {\n  return (typeof hint === \"string\" && hint !== \"\") || typeof hint === \"number\";\n}\n\n/** The caption under a field — Select's and NumberInput's type, so every field's\n *  standing advice reads alike. */\nexport const FIELD_CAPTION_CLASS = \"mt-1 text-caption leading-tight text-muted\";\n\nexport interface FieldHintParts {\n  /** The caller's `aria-describedby` with the caption's id appended — standing\n   *  advice first; the error (the news) is appended after this by the field. */\n  describedBy: string | undefined;\n  /** The caption's id while there is one. */\n  captionId: string | undefined;\n  /** The caption itself — a text hint, or any hint beside a `help` — or `undefined`. */\n  captionText: ReactNode | undefined;\n  /** What rides the label line — the `help`'s \"?\" ({@link fieldHelpMark}), else a\n   *  non-text hint (a FieldHint) — or, on a field with no label line, the end edge\n   *  outside the box. `undefined` when there is none. */\n  labelHint: ReactNode | undefined;\n}\n\n/**\n * Whether a resolved `hint` goes under the field as its caption: text always (see\n * {@link isTextHint}); with a `help` beside it, whatever it is — the label line's \"?\"\n * is the help's (round 0.36, §4).\n */\nexport function isHintCaption(hint: ReactNode, withHelp: boolean): boolean {\n  return isTextHint(hint) || (withHelp && hasContent(hint));\n}\n\n/**\n * Split a field's `hint` into the caption under it (attached with `aria-describedby`)\n * or the \"?\" on its label line. See {@link isTextHint}. With a `help` ({@link\n * FieldHelpProps}), the help's \"?\" takes the label line and the hint is the caption.\n */\nexport function useFieldHint(\n  hintProp: ReactNode,\n  describedBy: string | undefined,\n  { help, name }: FieldHelpSource = {},\n): FieldHintParts {\n  const helpMark = fieldHelpMark(help, name);\n  const withHelp = helpMark !== undefined;\n  const hint = useInlineHint(hintProp, withHelp);\n  const captionId = useId();\n  const caption = isHintCaption(hint, withHelp);\n  return {\n    describedBy: caption ? mergeDescribedBy(describedBy, captionId) : describedBy,\n    captionId: caption ? captionId : undefined,\n    captionText: caption ? hint : undefined,\n    labelHint: helpMark ?? (!caption && hasContent(hint) ? hint : undefined),\n  };\n}\n\n/** The error line under a field — one type for every field's message (DUP-8, refactor\n *  audit 2026-10: ChipInput and FileDropzone printed theirs in `text-xs`). */\nexport const FIELD_ERROR_CLASS = \"mt-1 text-caption leading-tight text-danger\";\n\n/**\n * The message under a field that is wrong, and the wiring that attaches it.\n *\n * `invalid` paints the field (`FIELD_INVALID`) and sets `aria-invalid`, and there it\n * stopped: a field that announces \"invalid\" and nothing else has told a screen-reader\n * user only that they are stuck. The message was always on screen — a sibling `<p>`\n * beside the field — and never in the accessibility tree, because attaching it needs an\n * id on the message and an `aria-describedby` on the control, and no caller was going to\n * mint one by hand for every field on a form.\n *\n * Two rules the wiring has to keep:\n *\n *  - **Merge, never replace.** A field may already point at a hint (\"at least twelve\n *    characters\"). Overwriting that reference to say the field is wrong trades one half\n *    of the answer for the other — and it keeps the half the user has already read. The\n *    hint stays first: it is the standing advice, the error is the news.\n *  - **`invalid` keeps working alone**, for the forms whose message lives somewhere else\n *    entirely (a summary at the top of a dialog). There is nothing to point at then, and\n *    a dangling id describes the field as nothing at all.\n *\n * Deliberately NOT `role=\"alert\"`. `aria-describedby` is read when focus reaches the\n * control, which is where a field's own error is wanted; an alert would also interrupt\n * whatever is being read at the time, on every keystroke of a form that re-validates as\n * you type.\n *\n * Every field's since 0.34 (DUP-8, refactor audit 2026-10): it was ui.tsx's own, so the\n * combobox family restated it as `useComboboxFieldError` — without the fourth argument,\n * so Autocomplete announced a form library's `aria-invalid` and did not paint it — and\n * ten fields restated it inline.\n */\nexport function useFieldError(\n  error: ReactNode,\n  invalid: boolean | undefined,\n  describedBy: string | undefined,\n  /** The caller's own `aria-invalid`. A form library sets THIS (see `@eifi1/ui-kit/rhf`\n   *  `RhfField`), not our `invalid` prop — and a field that announces invalid should\n   *  look it too. */\n  ariaInvalid?: unknown,\n): { isInvalid: boolean; describedBy: string | undefined; errorEl: ReactNode } {\n  const errorId = useId();\n  const hasError = hasContent(error);\n  return {\n    /** A field carrying a message that says what is wrong with it IS wrong. */\n    isInvalid: Boolean(invalid) || hasError || ariaInvalid === true || ariaInvalid === \"true\",\n    describedBy: mergeDescribedBy(describedBy, hasError && errorId),\n    errorEl: hasError ? (\n      <p id={errorId} className={FIELD_ERROR_CLASS}>\n        {error}\n      </p>\n    ) : null,\n  };\n}\n\n/** The caption under a field, as {@link Select} draws its own. */\nexport function FieldCaption({ parts, className }: { parts: FieldHintParts; className?: string }) {\n  if (parts.captionText === undefined) return null;\n  return (\n    <p id={parts.captionId} className={cn(FIELD_CAPTION_CLASS, className)}>\n      {parts.captionText}\n    </p>\n  );\n}\n\n/**\n * Classes that take a static floating label (`FLOATING_LABEL_STATIC`: `FieldLabel`,\n * `ComboboxFieldLabel`) out of its own absolute slot and into a {@link StaticLabelRow}.\n * `static` wins over `absolute` through `cn`'s merge; `min-w-0` lets it truncate in\n * the row. At Large the ROW stands above the field, so the label inside it drops the\n * margin a label above takes alone (`large:mb-0`), and stays level with its \"?\".\n */\nexport const LABEL_IN_ROW = \"static min-w-0 large:mb-0\";\n\n/**\n * A static label and its \"?\" on one line, in the top strip of a field that lays out its\n * own label — the combobox family, which cannot use {@link FloatingField} because the\n * trigger, the anchored panel and the label hang off a box of their own.\n *\n * FloatingField's static row, with one difference: it stops at `end-9`, the column the\n * chevron (or the clear \"×\") takes, so a long label truncates before it rather than\n * putting the \"?\" on top of the chevron. The hint keeps its width; the label gives way.\n */\nexport function StaticLabelRow({ hint, children }: { hint: ReactNode; children: ReactNode }) {\n  return (\n    <div\n      data-field-label=\"\"\n      className={cn(\"pointer-events-none absolute start-3 end-9 top-1 z-10 flex items-center gap-1\", LABEL_ABOVE_AT_LARGE)}\n    >\n      {children}\n      <span className=\"pointer-events-auto flex shrink-0 items-center\">{hint}</span>\n    </div>\n  );\n}\n\n/**\n * A field with no label line and a FieldHint \"?\": the hint at the end edge, OUTSIDE the\n * box, as an unlabelled {@link Select} has placed it since 0.15.5. Without a hint the\n * field is returned exactly as it was, so the wrapper costs nothing where it does not\n * apply.\n */\nexport function EndHintRow({\n  hint,\n  className,\n  children,\n}: {\n  hint: ReactNode | undefined;\n  className?: string;\n  children: ReactNode;\n}) {\n  if (hint === undefined) return <>{children}</>;\n  return (\n    <div className={cn(\"flex items-center gap-1.5\", className)}>\n      <div className=\"min-w-0 flex-1\">{children}</div>\n      <span className=\"flex shrink-0 items-center\">{hint}</span>\n    </div>\n  );\n}\n\n/* ── the write lock on a control that saves itself (keksdose K3) ───────────── */\n\nexport interface LockReason {\n  /** The reason in force — the lock's (with `commit` under a locked\n   *  `WriteLockProvider`), else the control's own `disabledReason`. */\n  reason: ReactNode;\n  /** There is a reason: the control is locked the focusable way. */\n  locked: boolean;\n  /** The id of the reason's hidden copy, for the control's `aria-describedby`. */\n  reasonId: string;\n}\n\n/**\n * {@link Button}'s `commit` + `disabledReason`, for a control that IS its own commit — a\n * switch, a checkbox or a select that saves on change, a list row whose click writes.\n * The lock's reason wins over the control's own (`useCommitReason`).\n */\nexport function useLockReason(commit: CommitScope | undefined, disabledReason: ReactNode): LockReason {\n  const reason = useCommitReason(commit, disabledReason);\n  const reasonId = useId();\n  return { reason, locked: hasContent(reason), reasonId };\n}\n\n/**\n * A locked control and its reason — the kit's ONE frame for it, used by Button,\n * IconButton, Chip, Checkbox, Switch and every field that locks (DUP-3, refactor audit\n * 2026-10: Button's `ReasonFrame` and Chip's `ChipReasonFrame` were copies of it, and\n * only those two drew the line, so a field locked through `commit` kept its reason in a\n * tooltip on a phone while the Save beside it said it in words). Where it shows is\n * {@link DisabledReasonDisplay}'s: by default a LINE under the control at Large and on a\n * touch screen ({@link DisabledReasonLine}), the kit {@link Tooltip} otherwise.\n *\n * A component of its own so only a LOCKED control asks the text size and the pointer;\n * the hundreds of unlocked controls on a page subscribe to nothing.\n *\n * Tooltip form: the control in a FRAGMENT with a `hidden` copy of the reason for its\n * `aria-describedby`, so the Tooltip does not also clone its bubble's id into the\n * description — the same sentence twice would be read on every focus. Line form: the\n * line IS the description (it carries `reasonId`), and no bubble repeats what is on\n * screen.\n *\n * `className` is the wrapper's, which becomes the outermost element while locked — a\n * control moves its own layout classes here so a lock does not reflow the form.\n */\nexport function LockedReason({\n  lock,\n  display,\n  line: lineProp,\n  side,\n  portal,\n  className,\n  lineClassName,\n  children,\n}: {\n  /** The reason, and the id the control's `aria-describedby` names. */\n  lock: Pick<LockReason, \"reason\" | \"reasonId\">;\n  /** Where the reason shows — the control's `disabledReasonDisplay`. Default `\"auto\"`. */\n  display?: DisabledReasonDisplay;\n  /** The answer of a caller that asked {@link useDisabledReasonLine} for its own layout\n   *  already (Checkbox, Switch); wins over `display`. */\n  line?: boolean;\n  /** The bubble's side and portal — IconButton's `tooltipSide` / `tooltipPortal`. */\n  side?: TooltipSide;\n  portal?: boolean;\n  className?: string;\n  /** Classes for the line itself — a list row's padding, so the words line up with the\n   *  row's. */\n  lineClassName?: string;\n  children: ReactNode;\n}) {\n  const asked = useDisabledReasonLine(display);\n  if (lineProp ?? asked) {\n    return (\n      <DisabledReasonLine id={lock.reasonId} reason={lock.reason} className={className} lineClassName={lineClassName}>\n        {children}\n      </DisabledReasonLine>\n    );\n  }\n  return (\n    <Tooltip label={lock.reason} side={side} portal={portal} className={className}>\n      <>\n        {children}\n        <span id={lock.reasonId} hidden>\n          {lock.reason}\n        </span>\n      </>\n    </Tooltip>\n  );\n}\n\n/* ── no fact only in a tooltip (0.32, docs/text-size-harmonization.md §4, §10.8) ── */\n\n/**\n * Where a control's `disabledReason` is shown (§4 \"No fact only in a tooltip\"):\n *\n * - `\"auto\"` (default): as a LINE under the control at Large and Extra large and on a\n *   touch screen (`useInlineFacts`) — the reader asked for bigger type, or cannot hover\n *   — and in the kit {@link Tooltip} otherwise, where a pointer can hover it open and\n *   the form keeps its rhythm. Inside {@link CompactControls} (a top bar, a dense row's\n *   inline actions) it stays the tooltip at every size: there is no room for a line.\n * - `\"line\"`: always the line — a form whose locked submit should say why at once.\n * - `\"tooltip\"`: always the tooltip — a place the caller knows has no room, and where\n *   the reason is also said elsewhere on the screen (a banner over the form).\n *\n * Either way the reason is the control's `aria-describedby`, so a screen reader hears\n * it on focus; the line IS that description (one copy), the tooltip keeps its hidden\n * copy as before.\n */\nexport type DisabledReasonDisplay = \"auto\" | \"line\" | \"tooltip\";\n\n/**\n * Marks a region where the controls must stay compact at every text size (§4, §10.8):\n * an IconButton keeps its icon alone (its `label` stays the name and the tooltip) and a\n * `disabledReason` stays in the tooltip rather than a line. AppShell puts its top bar\n * in one (\"the top bar keeps its essential icons\"); `RowActions` its inline icons.\n *\n * For a toolbar that has no room, not for a whole page: the contract asks that the icon\n * alone be rare. A dense row's actions belong in `RowActions`, which collapses them\n * into a \"⋯\" menu at Large instead.\n */\nexport const CompactControlsContext = createContext(false);\n\nexport function CompactControls({ children, compact = true }: { children: ReactNode; compact?: boolean }) {\n  return <CompactControlsContext.Provider value={compact}>{children}</CompactControlsContext.Provider>;\n}\n\n/** Whether a control's `disabledReason` is drawn as a line here — see\n *  {@link DisabledReasonDisplay}. For the kit's own controls (Button, IconButton, Chip,\n *  ToggleGroup) and an app's control that has a reason to give. */\nexport function useDisabledReasonLine(display: DisabledReasonDisplay = \"auto\"): boolean {\n  const compact = useContext(CompactControlsContext);\n  const inline = useInlineFacts();\n  if (display === \"line\") return true;\n  if (display === \"tooltip\") return false;\n  return inline && !compact;\n}\n\n/** The reason line's type: a field caption's ({@link FIELD_CAPTION_CLASS}), so a locked\n *  control's \"why\" reads like a field's standing advice. Capped, so a long reason under\n *  a small control wraps rather than widening its row without end. */\nexport const DISABLED_REASON_LINE_CLASS =\n  \"mt-1 block max-w-[20rem] text-caption leading-tight text-muted\";\n\n/**\n * A control and its `disabledReason` as a line under it — the `\"line\"` form of\n * {@link DisabledReasonDisplay}. The wrapper is the flex item now (`className`: the\n * control's own layout, e.g. `self-stretch`); `items-start` keeps the control its own\n * width, and a column parent still stretches the wrapper (FormActions' phone stack).\n * The line carries `id`, which the control's `aria-describedby` names.\n */\nexport function DisabledReasonLine({\n  id,\n  reason,\n  className,\n  lineClassName,\n  children,\n}: {\n  id: string;\n  reason: ReactNode;\n  className?: string;\n  /** Classes for the line itself (0.34) — a list row's padding, so its words start\n   *  where the row's do. */\n  lineClassName?: string;\n  children: ReactNode;\n}) {\n  return (\n    <span data-slot=\"disabled-reason\" className={cn(\"inline-flex max-w-full flex-col items-start\", className)}>\n      {children}\n      <span id={id} className={cn(DISABLED_REASON_LINE_CLASS, lineClassName)}>\n        {reason}\n      </span>\n    </span>\n  );\n}\n\n/* ── groups ───────────────────────────────────────────────────────────────── */\n\n/**\n * Set by {@link CheckboxGroup}: its legend carries the one required star, so a box\n * inside it keeps the native `required` (a form still refuses an empty set) but draws no\n * star of its own — four stars on four languages would read as four separate demands.\n * ChoiceCardGroup's `InGroupContext`, for the plain checkbox.\n */\nexport const RequiredStarOnLegend = createContext(false);\n\n/* ── fields not built on FloatingField: pickers and bare groups ──────────── */\n\nexport interface FieldMessages {\n  /** `invalid`, a message, or an `aria-invalid` from outside (a form library). */\n  isInvalid: boolean;\n  /** The caller's description, then the caption, then a lock's reason, then the error —\n   *  the standing advice before the news, as {@link useFieldError} orders them. */\n  describedBy: string | undefined;\n  /** The caption and the error, for under the field; `null` when there is neither. */\n  below: ReactNode;\n  /** What rides the LABEL line — the `help`'s \"?\", else a `FieldHint` — or `undefined`\n   *  when the hint is a caption and there is no help. */\n  labelHint: ReactNode;\n}\n\n/**\n * `hint` / `help` / `error` / `invalid` resolved the way `Select` resolves them —\n * {@link useFieldHint} and {@link useFieldError} together, for a field that draws what\n * goes under it in one place (a picker, a group, a field built on another).\n */\nexport function useFieldMessages({\n  hint,\n  help,\n  name,\n  error,\n  invalid,\n  describedBy,\n  ariaInvalid,\n  reasonId,\n}: FieldHelpSource & {\n  hint?: ReactNode;\n  error?: ReactNode;\n  invalid?: boolean;\n  describedBy?: string;\n  ariaInvalid?: unknown;\n  /** A lock's reason (`useLockReason`'s `reasonId`, while locked): described after the\n   *  caption and before the error, as on Select. */\n  reasonId?: string | false;\n}): FieldMessages {\n  const hintParts = useFieldHint(hint, describedBy, { help, name });\n  const field = useFieldError(error, invalid, mergeDescribedBy(hintParts.describedBy, reasonId), ariaInvalid);\n  return {\n    isInvalid: field.isInvalid,\n    describedBy: field.describedBy,\n    below:\n      hintParts.captionText !== undefined || field.errorEl !== null ? (\n        <>\n          <FieldCaption parts={hintParts} />\n          {field.errorEl}\n        </>\n      ) : null,\n    labelHint: hintParts.labelHint,\n  };\n}\n\n/**\n * The field and what is under it, as one box — `FieldGroup` in field-base.tsx, for the same\n * reasons written there. Nothing of its own while there is nothing under the field and\n * the caller passed no `error` key (the DOM is exactly what it was before these props);\n * once `error` is passed the box is kept even with no message, so the trigger is never\n * reparented — and remounted, losing focus — as the message comes and goes.\n */\nexport function FieldBox({\n  below,\n  reserve,\n  children,\n}: {\n  below: ReactNode;\n  reserve: boolean;\n  children: ReactNode;\n}) {\n  if (below === null && !reserve) return <>{children}</>;\n  return (\n    <div>\n      {children}\n      {below}\n    </div>\n  );\n}\n\n/**\n * The static label in a trigger field's top strip — a {@link FieldLabel}, or, with a\n * `FieldHint`, the label and its \"?\" laid out on ONE flex row (dev#468: two absolute\n * offsets guessing at the same baseline put the \"?\" three pixels above its word).\n * `FloatingField`'s static-label row, except that it stops at `end-9`: the date and\n * month triggers keep that column (`pe-9`) for the calendar glyph or the clear ×, and a\n * long label truncates before it rather than putting the \"?\" on top of it.\n */\nexport function FieldLabelLine({ label, hint }: { label: ReactNode; hint?: ReactNode }) {\n  if (!hasContent(hint)) return <FieldLabel>{label}</FieldLabel>;\n  return (\n    // `z-10` as FieldLabel has it: the trigger after it is `relative` and would paint\n    // over the row (and take the \"?\"'s hover) otherwise. Above the field at Large.\n    <div\n      data-field-label=\"\"\n      className={cn(\"pointer-events-none absolute start-3 end-9 top-1 z-10 flex items-center gap-1\", LABEL_ABOVE_AT_LARGE)}\n    >\n      <FieldLabel className={cn(LABEL_IN_ROW, \"max-w-full\")}>{label}</FieldLabel>\n      <span className=\"pointer-events-auto flex shrink-0 items-center\">{hint}</span>\n    </div>\n  );\n}\n\n/**\n * How tall the strip over a bare group is: 20px at Normal, for every group the kit\n * draws one over — ToggleGroup's `labelPlacement=\"strip\"`, SwatchPicker, IconPicker\n * and {@link FieldStrip} (whose `pad` named two heights until 0.34).\n *\n * The label ROW, not the label, is what has to fit (keksdose dev#593, kk K4, measured in\n * headless Chromium): it sits `top-1` (4px) and is as tall as the taller of the label\n * (11px `text-caption` in a `leading-tight` line, 13.75px) and its \"?\" (a 14px icon,\n * `size-3.5`) — so it ends 18px down. The strip has to be at least that:\n *\n *     label row: 4 + max(13.75, 14) = 18   ≤   strip: 20   (2px clear of the content)\n *\n * Until 0.34 a 16px strip (`\"field\"`) stood over the segmented group so that 16 + its\n * 26px box made a labelled Input's 42px (keksdose's `ClearedStatusPicker`, live #288 /\n * #431). The label and its \"?\" then crossed the group's top border by 2px — *\"the\n * question mark even interferes with it\"* (at 125 %: label row 424–438, border at 436).\n * The 4px come out of the group's segments instead (`STRIP_SEGMENT` in\n * toggle-group.tsx): 20 + 22 = 42. A tile, a map, a row of buttons — content with no\n * inset — needed the 20px already (keksdose's `FlagPicker` and location field, `pt-5`).\n *\n * Every term is rem, so the sum holds at any browser font size. At Large and Extra large\n * there is no strip: the label row stands above the content, in flow\n * ({@link LABEL_ABOVE_AT_LARGE}), and the padding goes (`large:pt-0` in\n * {@link LabelStrip}), so nothing lies under the label to cross.\n */\nexport const LABEL_STRIP_PAD = \"pt-5\";\n\n/**\n * The 11px label (and its `FieldHint`) over a group that is NOT a field — keksdose K2:\n * a segmented control or a row of swatches standing in a form row beside labelled\n * inputs, whose label must sit on the same line as theirs (`top-1`, `inset-x-3`, the\n * type of a field's static label) without the group growing a field's border round\n * it. `id` goes on the label so the group can be `aria-labelledby` it.\n *\n * `relative` is load-bearing twice over: the row is positioned against it, and a\n * caller's `sr-only` label cannot escape it (sr-only-containment).\n *\n * Any other attribute (`rest`) lands on the wrapper — {@link FieldStrip} makes it the\n * `role=\"group\"` its label names. The kit's own groups pass none, so their wrapper is\n * the bare box it was in 0.22.\n */\nexport function LabelStrip({\n  labelId,\n  label,\n  hint,\n  disabled,\n  className,\n  children,\n  ...rest\n}: Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> & {\n  labelId: string;\n  label: ReactNode;\n  /** What rides the label line beside the label — a resolved `labelHint`\n   *  ({@link useFieldMessages}), never a raw `hint`: a FieldHint is the caption at Large\n   *  and on touch, and the caller draws that under its group. */\n  hint?: ReactNode;\n  /** Dim the label with its group, as `peer-disabled:` dims a field's own. */\n  disabled?: boolean;\n  children: ReactNode;\n}) {\n  return (\n    // At Large the row is a label above the group, in flow (0.33, §10.17), and the\n    // strip's padding goes: nothing lies under it any more.\n    <div {...rest} className={cn(\"relative min-w-0\", LABEL_STRIP_PAD, \"large:pt-0\", className)}>\n      <div\n        data-field-label=\"\"\n        className={cn(\"pointer-events-none absolute inset-x-3 top-1 flex items-center gap-1\", LABEL_ABOVE_AT_LARGE)}\n      >\n        {/* `static`: FieldLabel positions itself absolutely; here the ROW is\n            positioned, so the label and its \"?\" are centred on one line by the flex\n            layout (dev#468). */}\n        <FieldLabel id={labelId} className={cn(LABEL_IN_ROW, \"max-w-full\", disabled && \"opacity-50\")}>\n          {label}\n        </FieldLabel>\n        {hasContent(hint) && <span className=\"pointer-events-auto flex shrink-0 items-center\">{hint}</span>}\n      </div>\n      {children}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/field-strip.d.ts

@@ -1,4 +1,5 @@
 import type { ComponentPropsWithRef, ReactNode } from "react";
+import { type FieldHelpProps } from "./field-parts.js";
 /** What a {@link FieldStrip} hands render-prop children. */
 export interface FieldStripIds {
     /** The label's id — for content that names ITSELF by the label (`aria-labelledby`)
@@ -14,7 +15,7 @@ export interface FieldStripIds {
  * it in 0.34, API-2): the ref is the root — the group, or the plain box under
  * `group={false}` — which a caller scrolls into view or measures.
  */
-export interface FieldStripProps extends Omit<ComponentPropsWithRef<"div">, "children"> {
+export interface FieldStripProps extends Omit<ComponentPropsWithRef<"div">, "children">, FieldHelpProps {
     /** The 11px static label, on the line a labelled field's label sits on. */
     label: ReactNode;
     /**
@@ -78,4 +79,4 @@ export interface FieldStripProps extends Omit<ComponentPropsWithRef<"div">, "chi
  * that labels its fields that way. This is for a row whose fields float their labels
  * inside them, where a label above would be the only one of its kind.
  */
-export declare function FieldStrip({ label, hint, error, disabled, group, className, children, ...rest }: FieldStripProps): import("react").JSX.Element;
+export declare function FieldStrip({ label, hint, help, error, disabled, group, className, children, ...rest }: FieldStripProps): import("react").JSX.Element;

package/dist/components/field-strip.js

@@ -5,6 +5,7 @@ import { LabelStrip, useFieldMessages } from "./field-parts.js";
 function FieldStrip({
   label,
   hint,
+  help,
   error,
   disabled = false,
   group = true,
@@ -13,7 +14,7 @@ function FieldStrip({
   ...rest
 }) {
   const labelId = useId();
-  const messages = useFieldMessages({ hint, error });
+  const messages = useFieldMessages({ hint, help, name: label, error });
   const content = typeof children === "function" ? children({ labelId, describedBy: messages.describedBy }) : children;
   const groupDescribedBy = [rest["aria-describedby"], messages.describedBy].filter(Boolean).join(" ") || void 0;
   return (

package/dist/components/field-strip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/field-strip.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { ComponentPropsWithRef, ReactNode } from \"react\";\nimport { LabelStrip, useFieldMessages } from \"./field-parts\";\n\n/** What a {@link FieldStrip} hands render-prop children. */\nexport interface FieldStripIds {\n  /** The label's id — for content that names ITSELF by the label (`aria-labelledby`)\n   *  under `group={false}`, or anything else that has to point at it. */\n  labelId: string;\n  /** The ids of the caption and the error while they are on screen, else `undefined`.\n   *  The group is described by them already; spread this on the content under\n   *  `group={false}`, where there is no group to describe. */\n  describedBy: string | undefined;\n}\n\n/**\n * A `div`'s props, `ref` included since 0.35 (round 0.35 R4, as Card and EmptyState took\n * it in 0.34, API-2): the ref is the root — the group, or the plain box under\n * `group={false}` — which a caller scrolls into view or measures.\n */\nexport interface FieldStripProps extends Omit<ComponentPropsWithRef<\"div\">, \"children\"> {\n  /** The 11px static label, on the line a labelled field's label sits on. */\n  label: ReactNode;\n  /**\n   * Field anatomy, as on {@link Input}: plain text is a caption under the content (and\n   * describes the group); a {@link FieldHint} \"?\" rides the label line.\n   */\n  hint?: ReactNode;\n  /** A message under the content, in `--danger`, describing the group. `null`,\n   *  `false` and `\"\"` are no error. The content's own controls are the caller's to\n   *  mark `aria-invalid`; a `group` cannot be. */\n  error?: ReactNode;\n  /**\n   * Dims the label with the content, as a disabled field's label dims. The content is\n   * the caller's: disable (or hide) its controls yourself — keksdose's location cell\n   * turns its map into a picture and drops its buttons, which no flag here could guess.\n   */\n  disabled?: boolean;\n  /**\n   * The wrapper is a `role=\"group\"` named by the label (default), so a screen reader\n   * entering the map or the first button hears \"Location, group\" — what the visible\n   * label tells a sighted reader the content is about.\n   *\n   * `false` for content that is a labelled group ITSELF (a `role=\"radiogroup\"` of the\n   * app's own, a TileRadioGroup's container, a fieldset): a group inside a group, both\n   * named \"Pattern\", is read twice. The wrapper is then a plain box, and the content\n   * takes the name from the render-prop's `labelId` (and the caption and error from\n   * its `describedBy`).\n   */\n  group?: boolean;\n  /** The content. A function receives {@link FieldStripIds}. */\n  children: ReactNode | ((ids: FieldStripIds) => ReactNode);\n}\n\n/**\n * The kit's label strip for content of your own — keksdose G8.\n *\n * 0.22 gave three groups a strip label (keksdose K2): ToggleGroup's\n * `labelPlacement=\"strip\"`, SwatchPicker's and IconPicker's `label`. Each draws the\n * 11px label (and its `FieldHint`) on the same line as the labelled fields beside it,\n * over content WITHOUT a field's border round it. keksdose's transaction row has one\n * cell left that is not one of those groups: the location — a map, a \"Locate me\" and a\n * \"Search\" button — still built by hand as a `relative` cell, a floated `FieldLabel`\n * and a `pt-5` box (transaction-location-field.tsx), and so is the reconciled-status\n * stand-in (cleared-status-toggle.tsx, `ClearedStatusLocked`). This is the strip on its\n * own, the same component the three groups draw theirs with:\n *\n * ```tsx\n * <FieldStrip label={t(\"transactions.location\")} className={className}>\n *   <div className=\"space-y-2\">\n *     <PinMap … />\n *     <div className=\"flex flex-wrap gap-2\"><Button …>Locate me</Button>…</div>\n *   </div>\n * </FieldStrip>\n * ```\n *\n * The label sits where a field's static label sits (`top-1`, `inset-x-3`, 11px in a\n * `leading-tight` line); the content starts 20px down, full width, clear of the label\n * and its \"?\". `className` styles the wrapper — the grid or flex item in the caller's\n * row — and merges after the strip's padding.\n *\n * Not a {@link Field}: that one sets a 14px label ABOVE its control, in flow, for a form\n * that labels its fields that way. This is for a row whose fields float their labels\n * inside them, where a label above would be the only one of its kind.\n */\nexport function FieldStrip({\n  label,\n  hint,\n  error,\n  disabled = false,\n  group = true,\n  className,\n  children,\n  ...rest\n}: FieldStripProps) {\n  const labelId = useId();\n  const messages = useFieldMessages({ hint, error });\n  const content = typeof children === \"function\" ? children({ labelId, describedBy: messages.describedBy }) : children;\n  // The caller's own description first, then the caption, then the error — the order\n  // every kit field reads them in.\n  const groupDescribedBy = [rest[\"aria-describedby\"], messages.describedBy].filter(Boolean).join(\" \") || undefined;\n  return (\n    // `rest` carries the caller's `ref` too (a plain prop in React 19): LabelStrip spreads\n    // its own rest onto the wrapper `<div>`, so the ref lands on the root.\n    <LabelStrip\n      {...rest}\n      {...(group\n        ? {\n            role: \"group\",\n            // An explicit name wins, as on the kit's labelled groups.\n            \"aria-labelledby\":\n              rest[\"aria-label\"] === undefined && rest[\"aria-labelledby\"] === undefined\n                ? labelId\n                : rest[\"aria-labelledby\"],\n            \"aria-describedby\": groupDescribedBy,\n          }\n        : null)}\n      labelId={labelId}\n      label={label}\n      hint={messages.labelHint}\n      disabled={disabled}\n      className={className}\n    >\n      {content}\n      {messages.below}\n    </LabelStrip>\n  );\n}\n"],"mappings":";AAwGI;AAxGJ,SAAS,aAAa;AAEtB,SAAS,YAAY,wBAAwB;AAmFtC,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,QAAM,UAAU,MAAM;AACtB,QAAM,WAAW,iBAAiB,EAAE,MAAM,MAAM,CAAC;AACjD,QAAM,UAAU,OAAO,aAAa,aAAa,SAAS,EAAE,SAAS,aAAa,SAAS,YAAY,CAAC,IAAI;AAG5G,QAAM,mBAAmB,CAAC,KAAK,kBAAkB,GAAG,SAAS,WAAW,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,KAAK;AACvG;AAAA;AAAA;AAAA,IAGE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACH,GAAI,QACD;AAAA,UACE,MAAM;AAAA;AAAA,UAEN,mBACE,KAAK,YAAY,MAAM,UAAa,KAAK,iBAAiB,MAAM,SAC5D,UACA,KAAK,iBAAiB;AAAA,UAC5B,oBAAoB;AAAA,QACtB,IACA;AAAA,QACJ;AAAA,QACA;AAAA,QACA,MAAM,SAAS;AAAA,QACf;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,UACA,SAAS;AAAA;AAAA;AAAA,IACZ;AAAA;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/field-strip.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { ComponentPropsWithRef, ReactNode } from \"react\";\nimport { LabelStrip, useFieldMessages, type FieldHelpProps } from \"./field-parts\";\n\n/** What a {@link FieldStrip} hands render-prop children. */\nexport interface FieldStripIds {\n  /** The label's id — for content that names ITSELF by the label (`aria-labelledby`)\n   *  under `group={false}`, or anything else that has to point at it. */\n  labelId: string;\n  /** The ids of the caption and the error while they are on screen, else `undefined`.\n   *  The group is described by them already; spread this on the content under\n   *  `group={false}`, where there is no group to describe. */\n  describedBy: string | undefined;\n}\n\n/**\n * A `div`'s props, `ref` included since 0.35 (round 0.35 R4, as Card and EmptyState took\n * it in 0.34, API-2): the ref is the root — the group, or the plain box under\n * `group={false}` — which a caller scrolls into view or measures.\n */\nexport interface FieldStripProps extends Omit<ComponentPropsWithRef<\"div\">, \"children\">, FieldHelpProps {\n  /** The 11px static label, on the line a labelled field's label sits on. */\n  label: ReactNode;\n  /**\n   * Field anatomy, as on {@link Input}: plain text is a caption under the content (and\n   * describes the group); a {@link FieldHint} \"?\" rides the label line.\n   */\n  hint?: ReactNode;\n  /** A message under the content, in `--danger`, describing the group. `null`,\n   *  `false` and `\"\"` are no error. The content's own controls are the caller's to\n   *  mark `aria-invalid`; a `group` cannot be. */\n  error?: ReactNode;\n  /**\n   * Dims the label with the content, as a disabled field's label dims. The content is\n   * the caller's: disable (or hide) its controls yourself — keksdose's location cell\n   * turns its map into a picture and drops its buttons, which no flag here could guess.\n   */\n  disabled?: boolean;\n  /**\n   * The wrapper is a `role=\"group\"` named by the label (default), so a screen reader\n   * entering the map or the first button hears \"Location, group\" — what the visible\n   * label tells a sighted reader the content is about.\n   *\n   * `false` for content that is a labelled group ITSELF (a `role=\"radiogroup\"` of the\n   * app's own, a TileRadioGroup's container, a fieldset): a group inside a group, both\n   * named \"Pattern\", is read twice. The wrapper is then a plain box, and the content\n   * takes the name from the render-prop's `labelId` (and the caption and error from\n   * its `describedBy`).\n   */\n  group?: boolean;\n  /** The content. A function receives {@link FieldStripIds}. */\n  children: ReactNode | ((ids: FieldStripIds) => ReactNode);\n}\n\n/**\n * The kit's label strip for content of your own — keksdose G8.\n *\n * 0.22 gave three groups a strip label (keksdose K2): ToggleGroup's\n * `labelPlacement=\"strip\"`, SwatchPicker's and IconPicker's `label`. Each draws the\n * 11px label (and its `FieldHint`) on the same line as the labelled fields beside it,\n * over content WITHOUT a field's border round it. keksdose's transaction row has one\n * cell left that is not one of those groups: the location — a map, a \"Locate me\" and a\n * \"Search\" button — still built by hand as a `relative` cell, a floated `FieldLabel`\n * and a `pt-5` box (transaction-location-field.tsx), and so is the reconciled-status\n * stand-in (cleared-status-toggle.tsx, `ClearedStatusLocked`). This is the strip on its\n * own, the same component the three groups draw theirs with:\n *\n * ```tsx\n * <FieldStrip label={t(\"transactions.location\")} className={className}>\n *   <div className=\"space-y-2\">\n *     <PinMap … />\n *     <div className=\"flex flex-wrap gap-2\"><Button …>Locate me</Button>…</div>\n *   </div>\n * </FieldStrip>\n * ```\n *\n * The label sits where a field's static label sits (`top-1`, `inset-x-3`, 11px in a\n * `leading-tight` line); the content starts 20px down, full width, clear of the label\n * and its \"?\". `className` styles the wrapper — the grid or flex item in the caller's\n * row — and merges after the strip's padding.\n *\n * Not a {@link Field}: that one sets a 14px label ABOVE its control, in flow, for a form\n * that labels its fields that way. This is for a row whose fields float their labels\n * inside them, where a label above would be the only one of its kind.\n */\nexport function FieldStrip({\n  label,\n  hint,\n  help,\n  error,\n  disabled = false,\n  group = true,\n  className,\n  children,\n  ...rest\n}: FieldStripProps) {\n  const labelId = useId();\n  const messages = useFieldMessages({ hint, help, name: label, error });\n  const content = typeof children === \"function\" ? children({ labelId, describedBy: messages.describedBy }) : children;\n  // The caller's own description first, then the caption, then the error — the order\n  // every kit field reads them in.\n  const groupDescribedBy = [rest[\"aria-describedby\"], messages.describedBy].filter(Boolean).join(\" \") || undefined;\n  return (\n    // `rest` carries the caller's `ref` too (a plain prop in React 19): LabelStrip spreads\n    // its own rest onto the wrapper `<div>`, so the ref lands on the root.\n    <LabelStrip\n      {...rest}\n      {...(group\n        ? {\n            role: \"group\",\n            // An explicit name wins, as on the kit's labelled groups.\n            \"aria-labelledby\":\n              rest[\"aria-label\"] === undefined && rest[\"aria-labelledby\"] === undefined\n                ? labelId\n                : rest[\"aria-labelledby\"],\n            \"aria-describedby\": groupDescribedBy,\n          }\n        : null)}\n      labelId={labelId}\n      label={label}\n      hint={messages.labelHint}\n      disabled={disabled}\n      className={className}\n    >\n      {content}\n      {messages.below}\n    </LabelStrip>\n  );\n}\n"],"mappings":";AAyGI;AAzGJ,SAAS,aAAa;AAEtB,SAAS,YAAY,wBAA6C;AAmF3D,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,QAAM,UAAU,MAAM;AACtB,QAAM,WAAW,iBAAiB,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,CAAC;AACpE,QAAM,UAAU,OAAO,aAAa,aAAa,SAAS,EAAE,SAAS,aAAa,SAAS,YAAY,CAAC,IAAI;AAG5G,QAAM,mBAAmB,CAAC,KAAK,kBAAkB,GAAG,SAAS,WAAW,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,KAAK;AACvG;AAAA;AAAA;AAAA,IAGE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACH,GAAI,QACD;AAAA,UACE,MAAM;AAAA;AAAA,UAEN,mBACE,KAAK,YAAY,MAAM,UAAa,KAAK,iBAAiB,MAAM,SAC5D,UACA,KAAK,iBAAiB;AAAA,UAC5B,oBAAoB;AAAA,QACtB,IACA;AAAA,QACJ;AAAA,QACA;AAAA,QACA,MAAM,SAAS;AAAA,QACf;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,UACA,SAAS;AAAA;AAAA;AAAA,IACZ;AAAA;AAEJ;","names":[]}

package/dist/components/field.d.ts

@@ -38,6 +38,7 @@
  * `useFieldError` in components/field-parts.tsx): it is read when focus reaches the control.
  */
 import { type ReactNode } from "react";
+import { type FieldHelpProps } from "./field-parts.js";
 /** What a `Field` hands its render-prop children, to spread on the control. */
 export interface FieldControlProps {
     /** The id the label's `htmlFor` points at. */
@@ -74,7 +75,7 @@ export interface FieldRenderMeta {
  * on the control at every width; only the ink changes.
  */
 export type FieldLabelVisibility = "visible" | "sr-only" | "below-sm" | "below-md" | "below-lg";
-export interface FieldProps {
+export interface FieldProps extends FieldHelpProps {
     /** The label above the control. Omit it for a group whose control is labelled
      *  some other way; the hint and error still render. */
     label?: ReactNode;
@@ -101,4 +102,4 @@ export interface FieldProps {
      *  {@link FieldRenderMeta} (the label's id, for a group). */
     children: ReactNode | ((control: FieldControlProps, meta: FieldRenderMeta) => ReactNode);
 }
-export declare function Field({ label, required, hint: hintProp, error, htmlFor, disabled, labelSize, labelVisibility, className, children, }: FieldProps): import("react").JSX.Element;
+export declare function Field({ label, required, hint: hintProp, help, error, htmlFor, disabled, labelSize, labelVisibility, className, children, }: FieldProps): import("react").JSX.Element;

package/dist/components/field.js

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import { cn } from "../lib/cn.js";
 import { hasContent } from "../lib/presence.js";
-import { useInlineHint } from "./field-parts.js";
+import { fieldHelpMark, useInlineHint } from "./field-parts.js";
 import { Label } from "./field-base.js";
 const LABEL_VISIBILITY = {
   visible: void 0,
@@ -16,6 +16,7 @@ function Field({
   label,
   required,
   hint: hintProp,
+  help,
   error,
   htmlFor,
   disabled,
@@ -29,7 +30,8 @@ function Field({
   const hintId = `${generated}-hint`;
   const errorId = `${generated}-error`;
   const labelId = `${generated}-label`;
-  const hint = useInlineHint(hintProp);
+  const helpMark = fieldHelpMark(help, label);
+  const hint = useInlineHint(hintProp, helpMark !== void 0);
   const hasHint = hasContent(hint);
   const hasError = hasContent(error);
   const describedBy = [hasHint && hintId, hasError && errorId].filter(Boolean).join(" ");
@@ -39,6 +41,19 @@ function Field({
     "aria-invalid": hasError || void 0,
     "aria-required": required || void 0
   };
+  const labelEl = label !== void 0 && /* @__PURE__ */ jsx(
+    Label,
+    {
+      id: labelId,
+      htmlFor: id,
+      required,
+      disabled,
+      size: labelSize,
+      "data-error": hasError || void 0,
+      className: cn("data-[error=true]:text-danger", LABEL_VISIBILITY[labelVisibility]),
+      children: label
+    }
+  );
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -54,19 +69,13 @@ function Field({
         className
       ),
       children: [
-        label !== void 0 && /* @__PURE__ */ jsx(
-          Label,
-          {
-            id: labelId,
-            htmlFor: id,
-            required,
-            disabled,
-            size: labelSize,
-            "data-error": hasError || void 0,
-            className: cn("data-[error=true]:text-danger", LABEL_VISIBILITY[labelVisibility]),
-            children: label
-          }
-        ),
+        helpMark === void 0 && labelEl,
+        helpMark !== void 0 && // The label and its "?" on one line; the "?" stays visible where the label is
+        // hidden (`labelVisibility`) — a hidden button would still take the focus.
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          labelEl,
+          /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", children: helpMark })
+        ] }),
         typeof children === "function" ? children(control, { labelId: label !== void 0 ? labelId : void 0 }) : children,
         hasHint && /* @__PURE__ */ jsx("p", { id: hintId, className: "text-caption leading-tight text-muted", children: hint }),
         hasError && /* @__PURE__ */ jsx("p", { id: errorId, className: "text-caption leading-tight text-danger", children: error })

package/dist/components/field.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/field.tsx"],"sourcesContent":["/**\n * A field group with its label ABOVE the control: label, control, hint, error.\n *\n * ```tsx\n * <Field label=\"IBAN\" required hint=\"22 characters\" error={errors.iban}>\n *   {(ids) => <Input {...ids} value={iban} onChange={…} />}\n * </Field>\n * ```\n *\n * The kit's `Input` and `Select` float their label inside the field, and the pickers\n * draw theirs the same way. That is the wrong shape for a control the kit did not\n * render, a radio group, a range slider, or a form that sets its labels above the\n * fields throughout — which is what kastlan's wizards are, and why it kept its own\n * `WizardField` after the kit dropped the one it had never rendered. This is that\n * group, with the wiring the old one left to the caller: the label names the control\n * through `htmlFor`, and the control is described by the hint and the error that are\n * actually on screen.\n *\n * ## Wiring\n *\n * Pass a function as `children` and it receives {@link FieldControlProps} — `id`,\n * `aria-describedby`, `aria-invalid` and `aria-required` — to spread on the control.\n * Plain children render as they are, for a control that wires itself (a checkbox that\n * carries its own label, a group with `aria-labelledby`); `htmlFor` then points the\n * label at the control's own id, and the hint and error are on screen but describe\n * nothing — the same as the `WizardField` this replaces.\n *\n * ## Decoupled\n *\n * Deliberately knows neither the wizard nor react-hook-form: `error` is a plain\n * value. Pass `wizard.fieldErrors.iban`, a step-local error, or\n * `fieldState.error?.message` from a react-hook-form `Controller` — the markup is the\n * same whichever of them gates the step, so a step can move between them without its\n * fields changing. (Inside a react-hook-form form, `RhfField` from `@eifi1/ui-kit/rhf`\n * does the same job with the ids taken from the form.)\n *\n * The error is NOT `role=\"alert\"`, for the reason the kit's `error` prop gives (see\n * `useFieldError` in components/field-parts.tsx): it is read when focus reaches the control.\n */\nimport { useId, type ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { hasContent } from \"../lib/presence\";\nimport { useInlineHint } from \"./field-parts\";\nimport { Label } from \"./field-base\";\n\n/** What a `Field` hands its render-prop children, to spread on the control. */\nexport interface FieldControlProps {\n  /** The id the label's `htmlFor` points at. */\n  id: string;\n  /** The ids of the hint and the error that are rendered, or `undefined` when\n   *  neither is. */\n  \"aria-describedby\": string | undefined;\n  /** `true` while the field has an error, `undefined` otherwise. */\n  \"aria-invalid\": true | undefined;\n  /** `true` when the field is `required`. The label's star is `aria-hidden`; this\n   *  is what a screen reader hears instead. */\n  \"aria-required\": true | undefined;\n}\n\n/**\n * The second argument of a `Field`'s render-prop children: what a GROUP needs that\n * a single control does not. `htmlFor` names an `<input>`, but a `<label>` pointing\n * at a `role=\"radiogroup\"` div names nothing — so a group (a {@link ToggleGroup})\n * takes `aria-labelledby={labelId}` instead. Kept out of {@link FieldControlProps}\n * so the spread every existing control takes is unchanged.\n */\nexport interface FieldRenderMeta {\n  /** The label element's id, or `undefined` when the field has no label. */\n  labelId: string | undefined;\n}\n\n/**\n * Where the label is visible. `\"visible\"` (default); `\"sr-only\"`: never drawn, still\n * the control's name; `\"below-sm\"` / `\"below-md\"` / `\"below-lg\"`: drawn only under\n * that breakpoint and screen-reader-only from it up.\n *\n * For table-like editors — kastlan's journal entry lines\n * (accounting/components/wizard/journal-entry-lines-step.tsx) — where a desktop\n * row sits under column headers that already say \"Account\" and \"Amount\", but the\n * phone layout stacks each line as a card and needs the labels back. The name stays\n * on the control at every width; only the ink changes.\n */\nexport type FieldLabelVisibility = \"visible\" | \"sr-only\" | \"below-sm\" | \"below-md\" | \"below-lg\";\n\n// Literal class strings so Tailwind's scanner sees each one.\nconst LABEL_VISIBILITY: Record<FieldLabelVisibility, string | undefined> = {\n  visible: undefined,\n  \"sr-only\": \"sr-only\",\n  \"below-sm\": \"sm:sr-only\",\n  \"below-md\": \"md:sr-only\",\n  \"below-lg\": \"lg:sr-only\",\n};\n\nexport interface FieldProps {\n  /** The label above the control. Omit it for a group whose control is labelled\n   *  some other way; the hint and error still render. */\n  label?: ReactNode;\n  /** Draws the kit's required mark after the label, and sets `aria-required` on the\n   *  render-prop control. */\n  required?: boolean;\n  /** Muted helper text below the control. */\n  hint?: ReactNode;\n  /** The error below the control. `null`, `false` and `\"\"` are no error — what a\n   *  `touched && errors.x` evaluates to on the happy path. */\n  error?: ReactNode;\n  /** The control's id. Defaults to a generated one; set it when the control carries\n   *  its own id (plain children). */\n  htmlFor?: string;\n  /** Dims the label with its control. */\n  disabled?: boolean;\n  /** The label's size: `sm` for a dense row, `md` otherwise. */\n  labelSize?: \"sm\" | \"md\";\n  /** See {@link FieldLabelVisibility}. */\n  labelVisibility?: FieldLabelVisibility;\n  /** Wrapper className. */\n  className?: string;\n  /** The control. A function receives {@link FieldControlProps} to spread on it, and\n   *  {@link FieldRenderMeta} (the label's id, for a group). */\n  children: ReactNode | ((control: FieldControlProps, meta: FieldRenderMeta) => ReactNode);\n}\n\nexport function Field({\n  label,\n  required,\n  hint: hintProp,\n  error,\n  htmlFor,\n  disabled,\n  labelSize,\n  labelVisibility = \"visible\",\n  className,\n  children,\n}: FieldProps) {\n  const generated = useId();\n  const id = htmlFor ?? `${generated}-control`;\n  const hintId = `${generated}-hint`;\n  const errorId = `${generated}-error`;\n  const labelId = `${generated}-label`;\n  // §4: a FieldHint under the control is its words at Large and on a touch screen, not\n  // a lone \"?\" (DUP-2, refactor audit 2026-10). A HelpPopover stays a \"?\".\n  const hint = useInlineHint(hintProp);\n  const hasHint = hasContent(hint);\n  const hasError = hasContent(error);\n  const describedBy = [hasHint && hintId, hasError && errorId].filter(Boolean).join(\" \");\n  const control: FieldControlProps = {\n    id,\n    \"aria-describedby\": describedBy || undefined,\n    \"aria-invalid\": hasError || undefined,\n    \"aria-required\": required || undefined,\n  };\n  return (\n    <div\n      data-slot=\"field\"\n      className={cn(\n        // `content-start`: in a grid row next to a taller item (one with a hint), a\n        // stretched Field would hand the extra height to its rows — the label grew,\n        // and the control sat lower than its neighbour's (showcase audit, #/forms).\n        \"grid content-start gap-1.5\",\n        // A hidden label is `position: absolute`; `relative` keeps its containing\n        // block here rather than the page's (see sr-only-containment.test).\n        labelVisibility !== \"visible\" && \"relative\",\n        className,\n      )}\n    >\n      {label !== undefined && (\n        <Label\n          id={labelId}\n          htmlFor={id}\n          required={required}\n          disabled={disabled}\n          size={labelSize}\n          data-error={hasError || undefined}\n          className={cn(\"data-[error=true]:text-danger\", LABEL_VISIBILITY[labelVisibility])}\n        >\n          {label}\n        </Label>\n      )}\n      {typeof children === \"function\"\n        ? children(control, { labelId: label !== undefined ? labelId : undefined })\n        : children}\n      {hasHint && (\n        <p id={hintId} className=\"text-caption leading-tight text-muted\">\n          {hint}\n        </p>\n      )}\n      {hasError && (\n        <p id={errorId} className=\"text-caption leading-tight text-danger\">\n          {error}\n        </p>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAuJI,SAcI,KAdJ;AAhHJ,SAAS,aAA6B;AACtC,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,aAAa;AA0CtB,MAAM,mBAAqE;AAAA,EACzE,SAAS;AAAA,EACT,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AACd;AA8BO,SAAS,MAAM;AAAA,EACpB;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB;AAAA,EACA;AACF,GAAe;AACb,QAAM,YAAY,MAAM;AACxB,QAAM,KAAK,WAAW,GAAG,SAAS;AAClC,QAAM,SAAS,GAAG,SAAS;AAC3B,QAAM,UAAU,GAAG,SAAS;AAC5B,QAAM,UAAU,GAAG,SAAS;AAG5B,QAAM,OAAO,cAAc,QAAQ;AACnC,QAAM,UAAU,WAAW,IAAI;AAC/B,QAAM,WAAW,WAAW,KAAK;AACjC,QAAM,cAAc,CAAC,WAAW,QAAQ,YAAY,OAAO,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACrF,QAAM,UAA6B;AAAA,IACjC;AAAA,IACA,oBAAoB,eAAe;AAAA,IACnC,gBAAgB,YAAY;AAAA,IAC5B,iBAAiB,YAAY;AAAA,EAC/B;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA;AAAA;AAAA;AAAA,QAIT;AAAA;AAAA;AAAA,QAGA,oBAAoB,aAAa;AAAA,QACjC;AAAA,MACF;AAAA,MAEC;AAAA,kBAAU,UACT;AAAA,UAAC;AAAA;AAAA,YACC,IAAI;AAAA,YACJ,SAAS;AAAA,YACT;AAAA,YACA;AAAA,YACA,MAAM;AAAA,YACN,cAAY,YAAY;AAAA,YACxB,WAAW,GAAG,iCAAiC,iBAAiB,eAAe,CAAC;AAAA,YAE/E;AAAA;AAAA,QACH;AAAA,QAED,OAAO,aAAa,aACjB,SAAS,SAAS,EAAE,SAAS,UAAU,SAAY,UAAU,OAAU,CAAC,IACxE;AAAA,QACH,WACC,oBAAC,OAAE,IAAI,QAAQ,WAAU,yCACtB,gBACH;AAAA,QAED,YACC,oBAAC,OAAE,IAAI,SAAS,WAAU,0CACvB,iBACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/field.tsx"],"sourcesContent":["/**\n * A field group with its label ABOVE the control: label, control, hint, error.\n *\n * ```tsx\n * <Field label=\"IBAN\" required hint=\"22 characters\" error={errors.iban}>\n *   {(ids) => <Input {...ids} value={iban} onChange={…} />}\n * </Field>\n * ```\n *\n * The kit's `Input` and `Select` float their label inside the field, and the pickers\n * draw theirs the same way. That is the wrong shape for a control the kit did not\n * render, a radio group, a range slider, or a form that sets its labels above the\n * fields throughout — which is what kastlan's wizards are, and why it kept its own\n * `WizardField` after the kit dropped the one it had never rendered. This is that\n * group, with the wiring the old one left to the caller: the label names the control\n * through `htmlFor`, and the control is described by the hint and the error that are\n * actually on screen.\n *\n * ## Wiring\n *\n * Pass a function as `children` and it receives {@link FieldControlProps} — `id`,\n * `aria-describedby`, `aria-invalid` and `aria-required` — to spread on the control.\n * Plain children render as they are, for a control that wires itself (a checkbox that\n * carries its own label, a group with `aria-labelledby`); `htmlFor` then points the\n * label at the control's own id, and the hint and error are on screen but describe\n * nothing — the same as the `WizardField` this replaces.\n *\n * ## Decoupled\n *\n * Deliberately knows neither the wizard nor react-hook-form: `error` is a plain\n * value. Pass `wizard.fieldErrors.iban`, a step-local error, or\n * `fieldState.error?.message` from a react-hook-form `Controller` — the markup is the\n * same whichever of them gates the step, so a step can move between them without its\n * fields changing. (Inside a react-hook-form form, `RhfField` from `@eifi1/ui-kit/rhf`\n * does the same job with the ids taken from the form.)\n *\n * The error is NOT `role=\"alert\"`, for the reason the kit's `error` prop gives (see\n * `useFieldError` in components/field-parts.tsx): it is read when focus reaches the control.\n */\nimport { useId, type ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { hasContent } from \"../lib/presence\";\nimport { fieldHelpMark, useInlineHint, type FieldHelpProps } from \"./field-parts\";\nimport { Label } from \"./field-base\";\n\n/** What a `Field` hands its render-prop children, to spread on the control. */\nexport interface FieldControlProps {\n  /** The id the label's `htmlFor` points at. */\n  id: string;\n  /** The ids of the hint and the error that are rendered, or `undefined` when\n   *  neither is. */\n  \"aria-describedby\": string | undefined;\n  /** `true` while the field has an error, `undefined` otherwise. */\n  \"aria-invalid\": true | undefined;\n  /** `true` when the field is `required`. The label's star is `aria-hidden`; this\n   *  is what a screen reader hears instead. */\n  \"aria-required\": true | undefined;\n}\n\n/**\n * The second argument of a `Field`'s render-prop children: what a GROUP needs that\n * a single control does not. `htmlFor` names an `<input>`, but a `<label>` pointing\n * at a `role=\"radiogroup\"` div names nothing — so a group (a {@link ToggleGroup})\n * takes `aria-labelledby={labelId}` instead. Kept out of {@link FieldControlProps}\n * so the spread every existing control takes is unchanged.\n */\nexport interface FieldRenderMeta {\n  /** The label element's id, or `undefined` when the field has no label. */\n  labelId: string | undefined;\n}\n\n/**\n * Where the label is visible. `\"visible\"` (default); `\"sr-only\"`: never drawn, still\n * the control's name; `\"below-sm\"` / `\"below-md\"` / `\"below-lg\"`: drawn only under\n * that breakpoint and screen-reader-only from it up.\n *\n * For table-like editors — kastlan's journal entry lines\n * (accounting/components/wizard/journal-entry-lines-step.tsx) — where a desktop\n * row sits under column headers that already say \"Account\" and \"Amount\", but the\n * phone layout stacks each line as a card and needs the labels back. The name stays\n * on the control at every width; only the ink changes.\n */\nexport type FieldLabelVisibility = \"visible\" | \"sr-only\" | \"below-sm\" | \"below-md\" | \"below-lg\";\n\n// Literal class strings so Tailwind's scanner sees each one.\nconst LABEL_VISIBILITY: Record<FieldLabelVisibility, string | undefined> = {\n  visible: undefined,\n  \"sr-only\": \"sr-only\",\n  \"below-sm\": \"sm:sr-only\",\n  \"below-md\": \"md:sr-only\",\n  \"below-lg\": \"lg:sr-only\",\n};\n\nexport interface FieldProps extends FieldHelpProps {\n  /** The label above the control. Omit it for a group whose control is labelled\n   *  some other way; the hint and error still render. */\n  label?: ReactNode;\n  /** Draws the kit's required mark after the label, and sets `aria-required` on the\n   *  render-prop control. */\n  required?: boolean;\n  /** Muted helper text below the control. */\n  hint?: ReactNode;\n  /** The error below the control. `null`, `false` and `\"\"` are no error — what a\n   *  `touched && errors.x` evaluates to on the happy path. */\n  error?: ReactNode;\n  /** The control's id. Defaults to a generated one; set it when the control carries\n   *  its own id (plain children). */\n  htmlFor?: string;\n  /** Dims the label with its control. */\n  disabled?: boolean;\n  /** The label's size: `sm` for a dense row, `md` otherwise. */\n  labelSize?: \"sm\" | \"md\";\n  /** See {@link FieldLabelVisibility}. */\n  labelVisibility?: FieldLabelVisibility;\n  /** Wrapper className. */\n  className?: string;\n  /** The control. A function receives {@link FieldControlProps} to spread on it, and\n   *  {@link FieldRenderMeta} (the label's id, for a group). */\n  children: ReactNode | ((control: FieldControlProps, meta: FieldRenderMeta) => ReactNode);\n}\n\nexport function Field({\n  label,\n  required,\n  hint: hintProp,\n  help,\n  error,\n  htmlFor,\n  disabled,\n  labelSize,\n  labelVisibility = \"visible\",\n  className,\n  children,\n}: FieldProps) {\n  const generated = useId();\n  const id = htmlFor ?? `${generated}-control`;\n  const hintId = `${generated}-hint`;\n  const errorId = `${generated}-error`;\n  const labelId = `${generated}-label`;\n  // §4: a FieldHint under the control is its words at Large and on a touch screen, not\n  // a lone \"?\" (DUP-2, refactor audit 2026-10). A HelpPopover stays a \"?\".\n  // With a `help` (0.36) its \"?\" follows the label, and a FieldHint is its words at\n  // every size: the help's is the field's only \"?\".\n  const helpMark = fieldHelpMark(help, label);\n  const hint = useInlineHint(hintProp, helpMark !== undefined);\n  const hasHint = hasContent(hint);\n  const hasError = hasContent(error);\n  const describedBy = [hasHint && hintId, hasError && errorId].filter(Boolean).join(\" \");\n  const control: FieldControlProps = {\n    id,\n    \"aria-describedby\": describedBy || undefined,\n    \"aria-invalid\": hasError || undefined,\n    \"aria-required\": required || undefined,\n  };\n  const labelEl = label !== undefined && (\n    <Label\n      id={labelId}\n      htmlFor={id}\n      required={required}\n      disabled={disabled}\n      size={labelSize}\n      data-error={hasError || undefined}\n      className={cn(\"data-[error=true]:text-danger\", LABEL_VISIBILITY[labelVisibility])}\n    >\n      {label}\n    </Label>\n  );\n  return (\n    <div\n      data-slot=\"field\"\n      className={cn(\n        // `content-start`: in a grid row next to a taller item (one with a hint), a\n        // stretched Field would hand the extra height to its rows — the label grew,\n        // and the control sat lower than its neighbour's (showcase audit, #/forms).\n        \"grid content-start gap-1.5\",\n        // A hidden label is `position: absolute`; `relative` keeps its containing\n        // block here rather than the page's (see sr-only-containment.test).\n        labelVisibility !== \"visible\" && \"relative\",\n        className,\n      )}\n    >\n      {helpMark === undefined && labelEl}\n      {helpMark !== undefined && (\n        // The label and its \"?\" on one line; the \"?\" stays visible where the label is\n        // hidden (`labelVisibility`) — a hidden button would still take the focus.\n        <div className=\"flex items-center gap-1\">\n          {labelEl}\n          <span className=\"flex shrink-0 items-center\">{helpMark}</span>\n        </div>\n      )}\n      {typeof children === \"function\"\n        ? children(control, { labelId: label !== undefined ? labelId : undefined })\n        : children}\n      {hasHint && (\n        <p id={hintId} className=\"text-caption leading-tight text-muted\">\n          {hint}\n        </p>\n      )}\n      {hasError && (\n        <p id={errorId} className=\"text-caption leading-tight text-danger\">\n          {error}\n        </p>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AA2JI,cA8BI,YA9BJ;AApHJ,SAAS,aAA6B;AACtC,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAC3B,SAAS,eAAe,qBAA0C;AAClE,SAAS,aAAa;AA0CtB,MAAM,mBAAqE;AAAA,EACzE,SAAS;AAAA,EACT,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AACd;AA8BO,SAAS,MAAM;AAAA,EACpB;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB;AAAA,EACA;AACF,GAAe;AACb,QAAM,YAAY,MAAM;AACxB,QAAM,KAAK,WAAW,GAAG,SAAS;AAClC,QAAM,SAAS,GAAG,SAAS;AAC3B,QAAM,UAAU,GAAG,SAAS;AAC5B,QAAM,UAAU,GAAG,SAAS;AAK5B,QAAM,WAAW,cAAc,MAAM,KAAK;AAC1C,QAAM,OAAO,cAAc,UAAU,aAAa,MAAS;AAC3D,QAAM,UAAU,WAAW,IAAI;AAC/B,QAAM,WAAW,WAAW,KAAK;AACjC,QAAM,cAAc,CAAC,WAAW,QAAQ,YAAY,OAAO,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACrF,QAAM,UAA6B;AAAA,IACjC;AAAA,IACA,oBAAoB,eAAe;AAAA,IACnC,gBAAgB,YAAY;AAAA,IAC5B,iBAAiB,YAAY;AAAA,EAC/B;AACA,QAAM,UAAU,UAAU,UACxB;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN,cAAY,YAAY;AAAA,MACxB,WAAW,GAAG,iCAAiC,iBAAiB,eAAe,CAAC;AAAA,MAE/E;AAAA;AAAA,EACH;AAEF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA;AAAA;AAAA;AAAA,QAIT;AAAA;AAAA;AAAA,QAGA,oBAAoB,aAAa;AAAA,QACjC;AAAA,MACF;AAAA,MAEC;AAAA,qBAAa,UAAa;AAAA,QAC1B,aAAa;AAAA;AAAA,QAGZ,qBAAC,SAAI,WAAU,2BACZ;AAAA;AAAA,UACD,oBAAC,UAAK,WAAU,8BAA8B,oBAAS;AAAA,WACzD;AAAA,QAED,OAAO,aAAa,aACjB,SAAS,SAAS,EAAE,SAAS,UAAU,SAAY,UAAU,OAAU,CAAC,IACxE;AAAA,QACH,WACC,oBAAC,OAAE,IAAI,QAAQ,WAAU,yCACtB,gBACH;AAAA,QAED,YACC,oBAAC,OAAE,IAAI,SAAS,WAAU,0CACvB,iBACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/components/help-popover.d.ts

@@ -32,12 +32,14 @@ export interface HelpPopoverProps {
  * new row on a phone). `useInlineHint` turns only a FieldHint into a caption, so this
  * one stays on the label line at every size.
  *
- * **On a field.** Pass it as `hint`, as a FieldHint is passed: every kit field that
- * puts a FieldHint on its label line puts this there too, as it does any `hint` that is
- * not text (Input, Select, Textarea, NumberInput, AmountInput, the comboboxes and
- * pickers, ToggleGroup, {@link FieldStrip}) — and an unlabelled one at its end edge,
- * outside the box. The `@eifi1/ui-kit/rhf` bindings draw every `hint` under the field,
- * this one included. It also stands on its own, beside a heading or a column title.
+ * **On a field: its `help`** (0.36, round 0.36 decision 1). Every kit field that takes a
+ * `hint` takes a `help` beside it, and the `@eifi1/ui-kit/rhf` bindings too: pass the
+ * help's words and the field draws this "?" on its label line (an unlabelled one at its
+ * end edge, outside the box), named "About “<label>”" — or pass a HelpPopover to name it
+ * yourself. `hint` stays the FACT, printed under the field; while `help` is set a
+ * FieldHint there draws no "?" of its own, so the field has one. Passed as `hint`, as in
+ * 0.34, it still rides the label line. It also stands on its own, beside a heading or a
+ * column title.
  *
  * **A popover, not a tooltip**: a tooltip bubble is for a line, and opens on hover a
  * finger never makes. This is the kit {@link Popover}: it opens and closes on a tap or a
@@ -50,7 +52,7 @@ export interface HelpPopoverProps {
  * accepted and cleared?", keksdose live #247); "!" is a warning.
  *
  * ```tsx
- * <Select label="Status" hint={
+ * <Select label="Status" hint="Cleared and reconciled rows are locked." help={
  *   <HelpPopover label="What do the statuses mean?">
  *     Pending: … Accepted: … Cleared: … Reconciled: …
  *   </HelpPopover>

package/dist/components/help-popover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/help-popover.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { HelpCircle } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport type { RemLength } from \"../hooks/use-breakpoint\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { Popover } from \"./popover\";\n\n/** {@link HelpPopover}'s props. */\nexport interface HelpPopoverProps {\n  /**\n   * Names the \"?\" and the panel — a short question (\"What do the statuses mean?\") or\n   * \"About <field>\" (\"About the settlement date\"), in the reader's language. Required:\n   * a \"?\" named \"?\" tells a screen reader nothing about what it opens. Not the help\n   * itself, which is `children`.\n   */\n  label: string;\n  /** The help: a paragraph, or a few. Rendered in the panel at body size. */\n  children: ReactNode;\n  /** The panel's width — {@link Popover}'s `width`. Default `\"20rem\"`, a paragraph's\n   *  measure; it follows the text size and never exceeds the viewport. */\n  width?: number | RemLength;\n  /** Classes for the \"?\" button. */\n  className?: string;\n}\n\n/** A paragraph's measure: 320 px at Normal, in rem so it grows with the text size. */\nconst HELP_WIDTH: RemLength = \"20rem\";\n\n/**\n * A \"?\" whose HELP opens on a tap, a click or Enter — for a paragraph too long to print\n * under a field (0.34, keksdose K3, live #400: *\"Remove the long text and move it behind\n * a clickable notice like a circle\"*).\n *\n * **Help, not a fact** (docs/text-size-harmonization.md §10.23). {@link FieldHint} is\n * the \"?\" for a FACT — a format, a limit, a consequence — and since 0.32 it turns into\n * its own words under the field at Large and on a touch screen (`useInlineHint`, §4 \"No\n * fact only in a tooltip\"), because a fact a reader cannot reach is a fact they do not\n * have. That rule stays. This part is for HELP: why the field exists, how to choose,\n * what the options mean — text the field is usable without. Printed inline it was the\n * longest thing in keksdose's transaction form (four statuses, ~500 characters, on every\n * new row on a phone). `useInlineHint` turns only a FieldHint into a caption, so this\n * one stays on the label line at every size.\n *\n * **On a field.** Pass it as `hint`, as a FieldHint is passed: every kit field that\n * puts a FieldHint on its label line puts this there too, as it does any `hint` that is\n * not text (Input, Select, Textarea, NumberInput, AmountInput, the comboboxes and\n * pickers, ToggleGroup, {@link FieldStrip}) — and an unlabelled one at its end edge,\n * outside the box. The `@eifi1/ui-kit/rhf` bindings draw every `hint` under the field,\n * this one included. It also stands on its own, beside a heading or a column title.\n *\n * **A popover, not a tooltip**: a tooltip bubble is for a line, and opens on hover a\n * finger never makes. This is the kit {@link Popover}: it opens and closes on a tap or a\n * click (and on Enter or Space, as any button does), closes on Escape and on a press\n * outside, and takes the focus into its panel and gives it back to the \"?\" on close. The\n * panel is a `dialog` named by `label` and described by the help, so a screen reader\n * reads both on opening. The \"?\" says `aria-expanded` and `aria-haspopup=\"dialog\"`.\n *\n * **\"?\" rather than \"!\"**: it answers a question (\"what is the difference between\n * accepted and cleared?\", keksdose live #247); \"!\" is a warning.\n *\n * ```tsx\n * <Select label=\"Status\" hint={\n *   <HelpPopover label=\"What do the statuses mean?\">\n *     Pending: … Accepted: … Cleared: … Reconciled: …\n *   </HelpPopover>\n * } … />\n * ```\n */\nexport function HelpPopover({ label, children, width = HELP_WIDTH, className }: HelpPopoverProps) {\n  const panelId = useId();\n  const bodyId = useId();\n  return (\n    <Popover\n      width={width}\n      panelId={panelId}\n      // The panel is named by the question and described by the answer, so focus moving\n      // into it reads both.\n      aria-label={label}\n      aria-describedby={bodyId}\n      trigger={({ open, toggle, ref }) => (\n        <button\n          ref={ref}\n          // Never `submit`: the \"?\" sits on a field's label line, inside a form.\n          type=\"button\"\n          aria-label={label}\n          aria-expanded={open}\n          aria-haspopup=\"dialog\"\n          aria-controls={open ? panelId : undefined}\n          onClick={(e) => {\n            // The \"?\" sits in a label strip: the press is the \"?\"'s, not the field's.\n            e.preventDefault();\n            toggle();\n          }}\n          // FieldHint's look, so the two marks read as one family on a label line; the\n          // open one holds its hover colour while its panel shows.\n          className={cn(\n            \"flex rounded-full text-placeholder transition-colors hover:text-secondary\",\n            open && \"text-secondary\",\n            FOCUS_RING,\n            className,\n          )}\n        >\n          <HelpCircle aria-hidden className=\"size-3.5\" />\n        </button>\n      )}\n    >\n      {() => (\n        <div id={bodyId} className=\"space-y-2 text-sm leading-snug text-primary\">\n          {children}\n        </div>\n      )}\n    </Popover>\n  );\n}\n"],"mappings":";AAuGU;AAvGV,SAAS,aAAa;AAEtB,SAAS,kBAAkB;AAC3B,SAAS,UAAU;AAEnB,SAAS,kBAAkB;AAC3B,SAAS,eAAe;AAqBxB,MAAM,aAAwB;AA0CvB,SAAS,YAAY,EAAE,OAAO,UAAU,QAAQ,YAAY,UAAU,GAAqB;AAChG,QAAM,UAAU,MAAM;AACtB,QAAM,SAAS,MAAM;AACrB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MAGA,cAAY;AAAA,MACZ,oBAAkB;AAAA,MAClB,SAAS,CAAC,EAAE,MAAM,QAAQ,IAAI,MAC5B;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UAEA,MAAK;AAAA,UACL,cAAY;AAAA,UACZ,iBAAe;AAAA,UACf,iBAAc;AAAA,UACd,iBAAe,OAAO,UAAU;AAAA,UAChC,SAAS,CAAC,MAAM;AAEd,cAAE,eAAe;AACjB,mBAAO;AAAA,UACT;AAAA,UAGA,WAAW;AAAA,YACT;AAAA,YACA,QAAQ;AAAA,YACR;AAAA,YACA;AAAA,UACF;AAAA,UAEA,8BAAC,cAAW,eAAW,MAAC,WAAU,YAAW;AAAA;AAAA,MAC/C;AAAA,MAGD,gBACC,oBAAC,SAAI,IAAI,QAAQ,WAAU,+CACxB,UACH;AAAA;AAAA,EAEJ;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/help-popover.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { HelpCircle } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport type { RemLength } from \"../hooks/use-breakpoint\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { Popover } from \"./popover\";\n\n/** {@link HelpPopover}'s props. */\nexport interface HelpPopoverProps {\n  /**\n   * Names the \"?\" and the panel — a short question (\"What do the statuses mean?\") or\n   * \"About <field>\" (\"About the settlement date\"), in the reader's language. Required:\n   * a \"?\" named \"?\" tells a screen reader nothing about what it opens. Not the help\n   * itself, which is `children`.\n   */\n  label: string;\n  /** The help: a paragraph, or a few. Rendered in the panel at body size. */\n  children: ReactNode;\n  /** The panel's width — {@link Popover}'s `width`. Default `\"20rem\"`, a paragraph's\n   *  measure; it follows the text size and never exceeds the viewport. */\n  width?: number | RemLength;\n  /** Classes for the \"?\" button. */\n  className?: string;\n}\n\n/** A paragraph's measure: 320 px at Normal, in rem so it grows with the text size. */\nconst HELP_WIDTH: RemLength = \"20rem\";\n\n/**\n * A \"?\" whose HELP opens on a tap, a click or Enter — for a paragraph too long to print\n * under a field (0.34, keksdose K3, live #400: *\"Remove the long text and move it behind\n * a clickable notice like a circle\"*).\n *\n * **Help, not a fact** (docs/text-size-harmonization.md §10.23). {@link FieldHint} is\n * the \"?\" for a FACT — a format, a limit, a consequence — and since 0.32 it turns into\n * its own words under the field at Large and on a touch screen (`useInlineHint`, §4 \"No\n * fact only in a tooltip\"), because a fact a reader cannot reach is a fact they do not\n * have. That rule stays. This part is for HELP: why the field exists, how to choose,\n * what the options mean — text the field is usable without. Printed inline it was the\n * longest thing in keksdose's transaction form (four statuses, ~500 characters, on every\n * new row on a phone). `useInlineHint` turns only a FieldHint into a caption, so this\n * one stays on the label line at every size.\n *\n * **On a field: its `help`** (0.36, round 0.36 decision 1). Every kit field that takes a\n * `hint` takes a `help` beside it, and the `@eifi1/ui-kit/rhf` bindings too: pass the\n * help's words and the field draws this \"?\" on its label line (an unlabelled one at its\n * end edge, outside the box), named \"About “<label>”\" — or pass a HelpPopover to name it\n * yourself. `hint` stays the FACT, printed under the field; while `help` is set a\n * FieldHint there draws no \"?\" of its own, so the field has one. Passed as `hint`, as in\n * 0.34, it still rides the label line. It also stands on its own, beside a heading or a\n * column title.\n *\n * **A popover, not a tooltip**: a tooltip bubble is for a line, and opens on hover a\n * finger never makes. This is the kit {@link Popover}: it opens and closes on a tap or a\n * click (and on Enter or Space, as any button does), closes on Escape and on a press\n * outside, and takes the focus into its panel and gives it back to the \"?\" on close. The\n * panel is a `dialog` named by `label` and described by the help, so a screen reader\n * reads both on opening. The \"?\" says `aria-expanded` and `aria-haspopup=\"dialog\"`.\n *\n * **\"?\" rather than \"!\"**: it answers a question (\"what is the difference between\n * accepted and cleared?\", keksdose live #247); \"!\" is a warning.\n *\n * ```tsx\n * <Select label=\"Status\" hint=\"Cleared and reconciled rows are locked.\" help={\n *   <HelpPopover label=\"What do the statuses mean?\">\n *     Pending: … Accepted: … Cleared: … Reconciled: …\n *   </HelpPopover>\n * } … />\n * ```\n */\nexport function HelpPopover({ label, children, width = HELP_WIDTH, className }: HelpPopoverProps) {\n  const panelId = useId();\n  const bodyId = useId();\n  return (\n    <Popover\n      width={width}\n      panelId={panelId}\n      // The panel is named by the question and described by the answer, so focus moving\n      // into it reads both.\n      aria-label={label}\n      aria-describedby={bodyId}\n      trigger={({ open, toggle, ref }) => (\n        <button\n          ref={ref}\n          // Never `submit`: the \"?\" sits on a field's label line, inside a form.\n          type=\"button\"\n          aria-label={label}\n          aria-expanded={open}\n          aria-haspopup=\"dialog\"\n          aria-controls={open ? panelId : undefined}\n          onClick={(e) => {\n            // The \"?\" sits in a label strip: the press is the \"?\"'s, not the field's.\n            e.preventDefault();\n            toggle();\n          }}\n          // FieldHint's look, so the two marks read as one family on a label line; the\n          // open one holds its hover colour while its panel shows.\n          className={cn(\n            \"flex rounded-full text-placeholder transition-colors hover:text-secondary\",\n            open && \"text-secondary\",\n            FOCUS_RING,\n            className,\n          )}\n        >\n          <HelpCircle aria-hidden className=\"size-3.5\" />\n        </button>\n      )}\n    >\n      {() => (\n        <div id={bodyId} className=\"space-y-2 text-sm leading-snug text-primary\">\n          {children}\n        </div>\n      )}\n    </Popover>\n  );\n}\n"],"mappings":";AAyGU;AAzGV,SAAS,aAAa;AAEtB,SAAS,kBAAkB;AAC3B,SAAS,UAAU;AAEnB,SAAS,kBAAkB;AAC3B,SAAS,eAAe;AAqBxB,MAAM,aAAwB;AA4CvB,SAAS,YAAY,EAAE,OAAO,UAAU,QAAQ,YAAY,UAAU,GAAqB;AAChG,QAAM,UAAU,MAAM;AACtB,QAAM,SAAS,MAAM;AACrB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MAGA,cAAY;AAAA,MACZ,oBAAkB;AAAA,MAClB,SAAS,CAAC,EAAE,MAAM,QAAQ,IAAI,MAC5B;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UAEA,MAAK;AAAA,UACL,cAAY;AAAA,UACZ,iBAAe;AAAA,UACf,iBAAc;AAAA,UACd,iBAAe,OAAO,UAAU;AAAA,UAChC,SAAS,CAAC,MAAM;AAEd,cAAE,eAAe;AACjB,mBAAO;AAAA,UACT;AAAA,UAGA,WAAW;AAAA,YACT;AAAA,YACA,QAAQ;AAAA,YACR;AAAA,YACA;AAAA,UACF;AAAA,UAEA,8BAAC,cAAW,eAAW,MAAC,WAAU,YAAW;AAAA;AAAA,MAC/C;AAAA,MAGD,gBACC,oBAAC,SAAI,IAAI,QAAQ,WAAU,+CACxB,UACH;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/components/icon-picker.d.ts

@@ -1,6 +1,7 @@
 import type { ComponentPropsWithRef, ComponentType, ReactNode } from "react";
 import { type LabelOverride } from "../i18n/kit-labels.js";
 import type { TileSize } from "./tile-radio.js";
+import { type FieldHelpProps } from "./field-parts.js";
 import { DEFAULT_ICON_PICKER_LABELS } from "./icon-picker-labels.js";
 export interface IconPickerLabels {
     /** The "no icon" tile's name, when `allowNone` is set. */
@@ -42,7 +43,7 @@ export interface IconOption<T extends string> {
      */
     disabledReason?: ReactNode;
 }
-export interface IconPickerProps<T extends string> extends Omit<ComponentPropsWithRef<"div">, "onChange" | "children" | "defaultValue"> {
+export interface IconPickerProps<T extends string> extends Omit<ComponentPropsWithRef<"div">, "onChange" | "children" | "defaultValue">, FieldHelpProps {
     options: IconOption<T>[];
     /** The chosen icon, or `null` for none. */
     value: T | null;
@@ -97,4 +98,4 @@ export interface IconPickerProps<T extends string> extends Omit<ComponentPropsWi
  * Keyboard is {@link SwatchPicker}'s: one tab stop, arrows to move (flipped in a
  * right-to-left page), Home and End.
  */
-export declare function IconPicker<T extends string>({ options, value, onChange, allowNone, mixed, activation, searchable, size, tileClassName, disabled, labels, label, hint, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...rest }: IconPickerProps<T>): import("react").JSX.Element;
+export declare function IconPicker<T extends string>({ options, value, onChange, allowNone, mixed, activation, searchable, size, tileClassName, disabled, labels, label, hint, help, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...rest }: IconPickerProps<T>): import("react").JSX.Element;

package/dist/components/icon-picker.js

@@ -23,6 +23,7 @@ function IconPicker({
   labels,
   label,
   hint,
+  help,
   className,
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
@@ -37,6 +38,8 @@ function IconPicker({
   const labelled = hasContent(label);
   const messages = useFieldMessages({
     hint: labelled ? hint : void 0,
+    help: labelled ? help : void 0,
+    name: label,
     describedBy: ariaDescribedBy,
     reasonId: mixed && mixedId
   });