@eifi1/ui-kit 0.34.0 → 0.36.0

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

@@ -1,4 +1,4 @@
-import type { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactNode, Ref, RefCallback } from "react";
+import type { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactNode } from "react";
 import { type TooltipSide } from "./tooltip.js";
 import { type CommitScope } from "./write-lock.js";
 /**
@@ -27,15 +27,7 @@ import { type CommitScope } from "./write-lock.js";
  * copy of the presence rule, for the native choice controls alone.
  */
 export declare function mergeDescribedBy(...ids: Array<string | false | null | undefined>): string | undefined;
-/** Point a ref — a callback or an object — at `node`. `undefined` and `null` are no ref. */
-export declare function assignRef<T>(ref: Ref<T> | undefined, node: T | null): void;
-/**
- * One callback ref feeding several — the caller's forwarded `ref` and a field's own
- * (DUP-11: AmountInput, FormActions, ScrollArea and SearchField each wrote this by hand).
- * Wrap it in `useCallback` (or `useMemo`) over the same refs where a new callback every
- * render would detach and re-attach the node.
- */
-export declare function mergeRefs<T>(...refs: Array<Ref<T> | undefined>): RefCallback<T>;
+export { assignRef, mergeRefs } from "../lib/refs.js";
 export declare const STATIC_LABEL_TYPE = "text-caption leading-tight text-muted peer-disabled:opacity-50";
 /**
  * A field's label at Large and Extra large (0.33, docs/text-size-harmonization.md
@@ -118,8 +110,55 @@ export declare function FieldHint({ label, side, className, "aria-label": ariaLa
  * The kit's fields call it through {@link useFieldHint} / {@link useFieldMessages}; a
  * field that resolves its own `hint` (an app's, or one of the kit's own outside this
  * file) calls it first and then treats the result as it treated a text hint.
+ *
+ * `withHelp` (round 0.36): the field has a `help`, whose "?" is the field's only one
+ * ({@link fieldHelpMark}) — so a FieldHint is its words at EVERY size, not only at Large
+ * and on touch.
+ */
+export declare function useInlineHint(hint: ReactNode, withHelp?: boolean): ReactNode;
+/**
+ * The doc every field's `help` prop points at.
+ *
+ * A field may carry two kinds of words (§10.23): a FACT — a format, a limit, a
+ * consequence — which stays visible, and HELP — why the field exists, how to choose,
+ * what the options mean — which the field is usable without and which may sit behind a
+ * "?". Until 0.36 a field had one slot, `hint`, so a field with both had to drop one or
+ * print a paragraph (Kurvenschmiede's "How it was measured", round 0.36 H). Now:
+ *
+ * - `hint` is the fact, the caption under the field, on its `aria-describedby`;
+ * - `help` is the help, a {@link HelpPopover} "?" on the label line (an unlabelled
+ *   field's at its end edge, as a hint's), named "About <label>" (`common.aboutField`,
+ *   from the label's text, else the `aria-label`, else `common.help`). Pass a
+ *   `HelpPopover` as `help` to name it yourself ("What do the statuses mean?").
+ *
+ * The help's "?" is then the field's ONLY "?": a `FieldHint` passed as `hint` beside it
+ * draws none of its own and shows its words as the caption at every size, as it does at
+ * Large and on touch; any other `hint` is the caption too. Two "?" side by side would
+ * look the same and open different things.
  */
-export declare function useInlineHint(hint: ReactNode): ReactNode;
+export interface FieldHelpProps {
+    /**
+     * Help the field is usable without — why it exists, how to choose, what the options
+     * mean — behind the field's one "?" on its label line: a {@link HelpPopover} named
+     * "About <label>" that opens on a tap (round 0.36, docs/text-size-harmonization.md §4).
+     * Pass a `HelpPopover` to name it yourself. `hint` stays the visible fact: with `help`
+     * set it is the caption under the field at every size, a `FieldHint` included.
+     */
+    help?: ReactNode;
+}
+/**
+ * A field's `help` as the "?" for its label line, or `undefined` when there is none. A
+ * {@link HelpPopover} is used as it is (it carries its own name); anything else is put
+ * in one named "About <name>" — `name` is the field's label, else its `aria-label`.
+ */
+export declare function fieldHelpMark(help: ReactNode, name: ReactNode): ReactNode | undefined;
+/** What {@link useFieldHint} needs to draw a field's `help`. */
+export interface FieldHelpSource {
+    /** The field's `help`. */
+    help?: ReactNode;
+    /** What names its "?": the field's label, else its `aria-label`. */
+    name?: ReactNode;
+}
 /**
  * Whether a `hint` is a CAPTION (plain text: a non-empty string or a number) or
  * something for the label line (a {@link FieldHint} "?", or any other node).
@@ -139,17 +178,25 @@ export interface FieldHintParts {
     describedBy: string | undefined;
     /** The caption's id while there is one. */
     captionId: string | undefined;
-    /** The caption itself, or `undefined` for a hint that is not text. */
-    captionText: string | number | undefined;
-    /** A non-text hint (a FieldHint) for the label line — or, on a field with no label
-     *  line, the end edge outside the box. `undefined` when there is none. */
+    /** The caption itself — a text hint, or any hint beside a `help` — or `undefined`. */
+    captionText: ReactNode | undefined;
+    /** What rides the label line — the `help`'s "?" ({@link fieldHelpMark}), else a
+     *  non-text hint (a FieldHint) — or, on a field with no label line, the end edge
+     *  outside the box. `undefined` when there is none. */
     labelHint: ReactNode | undefined;
 }
+/**
+ * Whether a resolved `hint` goes under the field as its caption: text always (see
+ * {@link isTextHint}); with a `help` beside it, whatever it is — the label line's "?"
+ * is the help's (round 0.36, §4).
+ */
+export declare function isHintCaption(hint: ReactNode, withHelp: boolean): boolean;
 /**
  * Split a field's `hint` into the caption under it (attached with `aria-describedby`)
- * or the "?" on its label line. See {@link isTextHint}.
+ * or the "?" on its label line. See {@link isTextHint}. With a `help` ({@link
+ * FieldHelpProps}), the help's "?" takes the label line and the hint is the caption.
  */
-export declare function useFieldHint(hintProp: ReactNode, describedBy: string | undefined): FieldHintParts;
+export declare function useFieldHint(hintProp: ReactNode, describedBy: string | undefined, { help, name }?: FieldHelpSource): FieldHintParts;
 /** The error line under a field — one type for every field's message (DUP-8, refactor
  *  audit 2026-10: ChipInput and FileDropzone printed theirs in `text-xs`). */
 export declare const FIELD_ERROR_CLASS = "mt-1 text-caption leading-tight text-danger";
@@ -185,7 +232,7 @@ export declare const FIELD_ERROR_CLASS = "mt-1 text-caption leading-tight text-d
  */
 export declare function useFieldError(error: ReactNode, invalid: boolean | undefined, describedBy: string | undefined, 
 /** The caller's own `aria-invalid`. A form library sets THIS (see `@eifi1/ui-kit/rhf`
- *  `FormControl`), not our `invalid` prop — and a field that announces invalid should
+ *  `RhfField`), not our `invalid` prop — and a field that announces invalid should
  *  look it too. */
 ariaInvalid?: unknown): {
     isInvalid: boolean;
@@ -353,16 +400,16 @@ export interface FieldMessages {
     describedBy: string | undefined;
     /** The caption and the error, for under the field; `null` when there is neither. */
     below: ReactNode;
-    /** The hint for the LABEL line (a `FieldHint`), or `undefined` when the hint is a
-     *  caption or there is none. */
+    /** What rides the LABEL line — the `help`'s "?", else a `FieldHint` — or `undefined`
+     *  when the hint is a caption and there is no help. */
     labelHint: ReactNode;
 }
 /**
- * `hint` / `error` / `invalid` resolved the way `Select` resolves them —
+ * `hint` / `help` / `error` / `invalid` resolved the way `Select` resolves them —
  * {@link useFieldHint} and {@link useFieldError} together, for a field that draws what
  * goes under it in one place (a picker, a group, a field built on another).
  */
-export declare function useFieldMessages({ hint, error, invalid, describedBy, ariaInvalid, reasonId, }: {
+export declare function useFieldMessages({ hint, help, name, error, invalid, describedBy, ariaInvalid, reasonId, }: FieldHelpSource & {
     hint?: ReactNode;
     error?: ReactNode;
     invalid?: boolean;

package/dist/components/field-parts.js

@@ -4,23 +4,18 @@ import { createContext, isValidElement, useContext, useId } from "react";
 import { HelpCircle } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { hasContent } from "../lib/presence.js";
+import { plainText } from "../lib/plain-text.js";
+import { DEFAULT_COMMON_LABELS, useKitLabels } from "../i18n/kit-labels.js";
 import { useInlineFacts } from "../hooks/use-large-text.js";
 import { FOCUS_RING } from "./focus-ring.js";
+import { HelpPopover } from "./help-popover.js";
 import { Tooltip } from "./tooltip.js";
 import { useCommitReason } from "./write-lock.js";
 function mergeDescribedBy(...ids) {
   const list = ids.filter(Boolean);
   return list.length ? list.join(" ") : void 0;
 }
-function assignRef(ref, node) {
-  if (typeof ref === "function") ref(node);
-  else if (ref) ref.current = node;
-}
-function mergeRefs(...refs) {
-  return (node) => {
-    for (const ref of refs) assignRef(ref, node);
-  };
-}
+import { assignRef, mergeRefs } from "../lib/refs.js";
 const STATIC_LABEL_TYPE = "text-caption leading-tight text-muted peer-disabled:opacity-50";
 const LABEL_ABOVE_AT_LARGE = "large:static large:row-start-1 large:mb-1 large:max-w-none large:pointer-events-auto";
 const LABEL_ABOVE_BOX = "large:grid large:grid-cols-[minmax(0,1fr)] large:[&>.absolute:not([data-field-label])]:row-start-2";
@@ -66,27 +61,42 @@ function FieldHint({
     ) })
   );
 }
-function useInlineHint(hint) {
+function useInlineHint(hint, withHelp = false) {
   const inline = useInlineFacts();
-  if (inline && isValidElement(hint) && hint.type === FieldHint) {
+  if ((inline || withHelp) && isValidElement(hint) && hint.type === FieldHint) {
     const words = hint.props.label;
     if (words) return words;
   }
   return hint;
 }
+function FieldHelp({ name, children }) {
+  const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
+  const text = plainText(name);
+  return /* @__PURE__ */ jsx(HelpPopover, { label: text === void 0 ? common.help : common.aboutField(text), children });
+}
+function fieldHelpMark(help, name) {
+  if (!hasContent(help)) return void 0;
+  if (isValidElement(help) && help.type === HelpPopover) return help;
+  return /* @__PURE__ */ jsx(FieldHelp, { name, children: help });
+}
 function isTextHint(hint) {
   return typeof hint === "string" && hint !== "" || typeof hint === "number";
 }
 const FIELD_CAPTION_CLASS = "mt-1 text-caption leading-tight text-muted";
-function useFieldHint(hintProp, describedBy) {
-  const hint = useInlineHint(hintProp);
+function isHintCaption(hint, withHelp) {
+  return isTextHint(hint) || withHelp && hasContent(hint);
+}
+function useFieldHint(hintProp, describedBy, { help, name } = {}) {
+  const helpMark = fieldHelpMark(help, name);
+  const withHelp = helpMark !== void 0;
+  const hint = useInlineHint(hintProp, withHelp);
   const captionId = useId();
-  const text = isTextHint(hint);
+  const caption = isHintCaption(hint, withHelp);
   return {
-    describedBy: text ? mergeDescribedBy(describedBy, captionId) : describedBy,
-    captionId: text ? captionId : void 0,
-    captionText: text ? hint : void 0,
-    labelHint: !text && hasContent(hint) ? hint : void 0
+    describedBy: caption ? mergeDescribedBy(describedBy, captionId) : describedBy,
+    captionId: caption ? captionId : void 0,
+    captionText: caption ? hint : void 0,
+    labelHint: helpMark ?? (!caption && hasContent(hint) ? hint : void 0)
   };
 }
 const FIELD_ERROR_CLASS = "mt-1 text-caption leading-tight text-danger";
@@ -180,13 +190,15 @@ function DisabledReasonLine({
 const RequiredStarOnLegend = createContext(false);
 function useFieldMessages({
   hint,
+  help,
+  name,
   error,
   invalid,
   describedBy,
   ariaInvalid,
   reasonId
 }) {
-  const hintParts = useFieldHint(hint, describedBy);
+  const hintParts = useFieldHint(hint, describedBy, { help, name });
   const field = useFieldError(error, invalid, mergeDescribedBy(hintParts.describedBy, reasonId), ariaInvalid);
   return {
     isInvalid: field.isInvalid,
@@ -280,6 +292,8 @@ export {
   STATIC_LABEL_TYPE,
   StaticLabelRow,
   assignRef,
+  fieldHelpMark,
+  isHintCaption,
   isTextHint,
   mergeDescribedBy,
   mergeRefs,

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, Ref, RefCallback } 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/** Point a ref — a callback or an object — at `node`. `undefined` and `null` are no ref. */\nexport function assignRef<T>(ref: Ref<T> | undefined, node: T | null): void {\n  if (typeof ref === \"function\") ref(node);\n  else if (ref) (ref as { current: T | null }).current = node;\n}\n\n/**\n * One callback ref feeding several — the caller's forwarded `ref` and a field's own\n * (DUP-11: AmountInput, FormActions, ScrollArea and SearchField each wrote this by hand).\n * Wrap it in `useCallback` (or `useMemo`) over the same refs where a new callback every\n * render would detach and re-attach the node.\n */\nexport function mergeRefs<T>(...refs: Array<Ref<T> | undefined>): RefCallback<T> {\n  return (node) => {\n    for (const ref of refs) assignRef(ref, node);\n  };\n}\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   *  `FormControl`), 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,9 +1,5 @@
-import type { ComponentPropsWithoutRef, ReactNode } from "react";
-/**
- * How far down the content starts, under the 11px label — see {@link FieldStripProps.pad}.
- * Since 0.34 both are the one 20px strip.
- */
-export type FieldStripPad = "clear" | "field";
+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 +10,12 @@ export interface FieldStripIds {
      *  `group={false}`, where there is no group to describe. */
     describedBy: string | undefined;
 }
-export interface FieldStripProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+/**
+ * A `div`'s props, `ref` included since 0.35 (round 0.35 R4, as Card and EmptyState took
+ * 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">, FieldHelpProps {
     /** The 11px static label, on the line a labelled field's label sits on. */
     label: ReactNode;
     /**
@@ -32,21 +33,6 @@ export interface FieldStripProps extends Omit<ComponentPropsWithoutRef<"div">, "
      * turns its map into a picture and drops its buttons, which no flag here could guess.
      */
     disabled?: boolean;
-    /**
-     * @deprecated 0.34 — drop it; removed in 0.35. Both values are the same 20px strip
-     * since 0.34, and the prop does nothing; it stays so a caller that passes it still
-     * compiles.
-     *
-     * It chose between `"clear"` (20px) and `"field"` (16px: the strip plus a 26px
-     * bordered control made a labelled Input's 42px). The label row — the label and its
-     * "?" — ends 18px down, so over a 16px strip it crossed the content's top border by
-     * 2px (keksdose dev#593; the arithmetic is on `LABEL_STRIP_PAD` in field-parts.tsx).
-     * For a row of 42px fields, make the content 22px tall: 20 + 22 = 42, the shape
-     * ToggleGroup's `labelPlacement="strip"` has since 0.34.
-     *
-     * A `className` still merges after the strip's padding.
-     */
-    pad?: FieldStripPad;
     /**
      * The wrapper is a `role="group"` named by the label (default), so a screen reader
      * entering the map or the first button hears "Location, group" — what the visible
@@ -93,4 +79,4 @@ export interface FieldStripProps extends Omit<ComponentPropsWithoutRef<"div">, "
  * 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, pad: _pad, 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,39 +5,42 @@ import { LabelStrip, useFieldMessages } from "./field-parts.js";
 function FieldStrip({
   label,
   hint,
+  help,
   error,
   disabled = false,
-  // Taken off so it never reaches the DOM; see `pad` (deprecated, one strip since 0.34).
-  pad: _pad,
   group = true,
   className,
   children,
   ...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 /* @__PURE__ */ jsxs(
-    LabelStrip,
-    {
-      ...rest,
-      ...group ? {
-        role: "group",
-        // An explicit name wins, as on the kit's labelled groups.
-        "aria-labelledby": rest["aria-label"] === void 0 && rest["aria-labelledby"] === void 0 ? labelId : rest["aria-labelledby"],
-        "aria-describedby": groupDescribedBy
-      } : null,
-      labelId,
-      label,
-      hint: messages.labelHint,
-      disabled,
-      className,
-      children: [
-        content,
-        messages.below
-      ]
-    }
+  return (
+    // `rest` carries the caller's `ref` too (a plain prop in React 19): LabelStrip spreads
+    // its own rest onto the wrapper `<div>`, so the ref lands on the root.
+    /* @__PURE__ */ jsxs(
+      LabelStrip,
+      {
+        ...rest,
+        ...group ? {
+          role: "group",
+          // An explicit name wins, as on the kit's labelled groups.
+          "aria-labelledby": rest["aria-label"] === void 0 && rest["aria-labelledby"] === void 0 ? labelId : rest["aria-labelledby"],
+          "aria-describedby": groupDescribedBy
+        } : null,
+        labelId,
+        label,
+        hint: messages.labelHint,
+        disabled,
+        className,
+        children: [
+          content,
+          messages.below
+        ]
+      }
+    )
   );
 }
 export {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/field-strip.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { LabelStrip, useFieldMessages } from \"./field-parts\";\n\n/**\n * How far down the content starts, under the 11px label — see {@link FieldStripProps.pad}.\n * Since 0.34 both are the one 20px strip.\n */\nexport type FieldStripPad = \"clear\" | \"field\";\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\nexport interface FieldStripProps extends Omit<ComponentPropsWithoutRef<\"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   * @deprecated 0.34 — drop it; removed in 0.35. Both values are the same 20px strip\n   * since 0.34, and the prop does nothing; it stays so a caller that passes it still\n   * compiles.\n   *\n   * It chose between `\"clear\"` (20px) and `\"field\"` (16px: the strip plus a 26px\n   * bordered control made a labelled Input's 42px). The label row — the label and its\n   * \"?\" — ends 18px down, so over a 16px strip it crossed the content's top border by\n   * 2px (keksdose dev#593; the arithmetic is on `LABEL_STRIP_PAD` in field-parts.tsx).\n   * For a row of 42px fields, make the content 22px tall: 20 + 22 = 42, the shape\n   * ToggleGroup's `labelPlacement=\"strip\"` has since 0.34.\n   *\n   * A `className` still merges after the strip's padding.\n   */\n  pad?: FieldStripPad;\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  // Taken off so it never reaches the DOM; see `pad` (deprecated, one strip since 0.34).\n  pad: _pad,\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    <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":";AAwHI;AAxHJ,SAAS,aAAa;AAEtB,SAAS,YAAY,wBAAwB;AAmGtC,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA;AAAA,EAEX,KAAK;AAAA,EACL,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,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAI,QACD;AAAA,QACE,MAAM;AAAA;AAAA,QAEN,mBACE,KAAK,YAAY,MAAM,UAAa,KAAK,iBAAiB,MAAM,SAC5D,UACA,KAAK,iBAAiB;AAAA,QAC5B,oBAAoB;AAAA,MACtB,IACA;AAAA,MACJ;AAAA,MACA;AAAA,MACA,MAAM,SAAS;AAAA,MACf;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,QACA,SAAS;AAAA;AAAA;AAAA,EACZ;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":[]}