@eifi1/ui-kit 0.33.1 → 0.34.0

package/dist/components/field-parts.js

@@ -3,12 +3,25 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 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 { useInlineFacts } from "../hooks/use-large-text.js";
 import { FOCUS_RING } from "./focus-ring.js";
 import { Tooltip } from "./tooltip.js";
 import { useCommitReason } from "./write-lock.js";
-import { hasMessage, mergeDescribedBy } from "./choice-parts.js";
-const STATIC_LABEL_TYPE = "text-caption leading-tight text-[var(--text-muted)] peer-disabled:opacity-50";
+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);
+  };
+}
+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";
 const FLOATING_LABEL_STATIC = cn(
@@ -44,7 +57,7 @@ function FieldHint({
         "aria-label": ariaLabel ?? label,
         onClick: (e) => e.preventDefault(),
         className: cn(
-          "flex rounded-full text-[var(--text-placeholder)] transition-colors hover:text-[var(--text-secondary)]",
+          "flex rounded-full text-placeholder transition-colors hover:text-secondary",
           FOCUS_RING,
           className
         ),
@@ -64,7 +77,7 @@ function useInlineHint(hint) {
 function isTextHint(hint) {
   return typeof hint === "string" && hint !== "" || typeof hint === "number";
 }
-const FIELD_CAPTION_CLASS = "mt-1 text-caption leading-tight text-[var(--text-muted)]";
+const FIELD_CAPTION_CLASS = "mt-1 text-caption leading-tight text-muted";
 function useFieldHint(hintProp, describedBy) {
   const hint = useInlineHint(hintProp);
   const captionId = useId();
@@ -73,7 +86,18 @@ function useFieldHint(hintProp, describedBy) {
     describedBy: text ? mergeDescribedBy(describedBy, captionId) : describedBy,
     captionId: text ? captionId : void 0,
     captionText: text ? hint : void 0,
-    labelHint: !text && hasMessage(hint) ? hint : void 0
+    labelHint: !text && hasContent(hint) ? hint : void 0
+  };
+}
+const FIELD_ERROR_CLASS = "mt-1 text-caption leading-tight text-danger";
+function useFieldError(error, invalid, describedBy, ariaInvalid) {
+  const errorId = useId();
+  const hasError = hasContent(error);
+  return {
+    /** A field carrying a message that says what is wrong with it IS wrong. */
+    isInvalid: Boolean(invalid) || hasError || ariaInvalid === true || ariaInvalid === "true",
+    describedBy: mergeDescribedBy(describedBy, hasError && errorId),
+    errorEl: hasError ? /* @__PURE__ */ jsx("p", { id: errorId, className: FIELD_ERROR_CLASS, children: error }) : null
   };
 }
 function FieldCaption({ parts, className }) {
@@ -108,18 +132,23 @@ function EndHintRow({
 function useLockReason(commit, disabledReason) {
   const reason = useCommitReason(commit, disabledReason);
   const reasonId = useId();
-  return { reason, locked: hasMessage(reason), reasonId };
+  return { reason, locked: hasContent(reason), reasonId };
 }
 function LockedReason({
   lock,
-  line = false,
+  display,
+  line: lineProp,
+  side,
+  portal,
   className,
+  lineClassName,
   children
 }) {
-  if (line) {
-    return /* @__PURE__ */ jsx(DisabledReasonLine, { id: lock.reasonId, reason: lock.reason, className, children });
+  const asked = useDisabledReasonLine(display);
+  if (lineProp ?? asked) {
+    return /* @__PURE__ */ jsx(DisabledReasonLine, { id: lock.reasonId, reason: lock.reason, className, lineClassName, children });
   }
-  return /* @__PURE__ */ jsx(Tooltip, { label: lock.reason, className, children: /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsx(Tooltip, { label: lock.reason, side, portal, className, children: /* @__PURE__ */ jsxs(Fragment, { children: [
     children,
     /* @__PURE__ */ jsx("span", { id: lock.reasonId, hidden: true, children: lock.reason })
   ] }) });
@@ -135,43 +164,38 @@ function useDisabledReasonLine(display = "auto") {
   if (display === "tooltip") return false;
   return inline && !compact;
 }
-const DISABLED_REASON_LINE_CLASS = "mt-1 block max-w-[20rem] text-caption leading-tight text-[var(--text-muted)]";
+const DISABLED_REASON_LINE_CLASS = "mt-1 block max-w-[20rem] text-caption leading-tight text-muted";
 function DisabledReasonLine({
   id,
   reason,
   className,
+  lineClassName,
   children
 }) {
   return /* @__PURE__ */ jsxs("span", { "data-slot": "disabled-reason", className: cn("inline-flex max-w-full flex-col items-start", className), children: [
     children,
-    /* @__PURE__ */ jsx("span", { id, className: DISABLED_REASON_LINE_CLASS, children: reason })
+    /* @__PURE__ */ jsx("span", { id, className: cn(DISABLED_REASON_LINE_CLASS, lineClassName), children: reason })
   ] });
 }
 const RequiredStarOnLegend = createContext(false);
-function hasContent(node) {
-  return node !== void 0 && node !== null && node !== false && node !== "";
-}
-const FIELD_ERROR_CLASS = "mt-1 text-caption leading-tight text-[var(--danger)]";
 function useFieldMessages({
-  hint: hintProp,
+  hint,
   error,
   invalid,
   describedBy,
-  ariaInvalid
+  ariaInvalid,
+  reasonId
 }) {
-  const hint = useInlineHint(hintProp);
-  const hintId = useId();
-  const errorId = useId();
-  const textHint = isTextHint(hint);
-  const hasError = hasContent(error);
+  const hintParts = useFieldHint(hint, describedBy);
+  const field = useFieldError(error, invalid, mergeDescribedBy(hintParts.describedBy, reasonId), ariaInvalid);
   return {
-    isInvalid: Boolean(invalid) || hasError || ariaInvalid === true || ariaInvalid === "true",
-    describedBy: [describedBy, textHint && hintId, hasError && errorId].filter(Boolean).join(" ") || void 0,
-    below: textHint || hasError ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      textHint && /* @__PURE__ */ jsx("p", { id: hintId, className: FIELD_CAPTION_CLASS, children: hint }),
-      hasError && /* @__PURE__ */ jsx("p", { id: errorId, className: FIELD_ERROR_CLASS, children: error })
+    isInvalid: field.isInvalid,
+    describedBy: field.describedBy,
+    below: hintParts.captionText !== void 0 || field.errorEl !== null ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(FieldCaption, { parts: hintParts }),
+      field.errorEl
     ] }) : null,
-    labelHint: !textHint && hasContent(hint) ? hint : void 0
+    labelHint: hintParts.labelHint
   };
 }
 function FieldBox({
@@ -203,13 +227,12 @@ function FieldLabelLine({ label, hint }) {
     )
   );
 }
-const LABEL_STRIP_PAD = { field: "pt-4", clear: "pt-5" };
+const LABEL_STRIP_PAD = "pt-5";
 function LabelStrip({
   labelId,
   label,
   hint,
   disabled,
-  pad,
   className,
   children,
   ...rest
@@ -217,7 +240,7 @@ function LabelStrip({
   return (
     // At Large the row is a label above the group, in flow (0.33, §10.17), and the
     // strip's padding goes: nothing lies under it any more.
-    /* @__PURE__ */ jsxs("div", { ...rest, className: cn("relative min-w-0", LABEL_STRIP_PAD[pad], "large:pt-0", className), children: [
+    /* @__PURE__ */ jsxs("div", { ...rest, className: cn("relative min-w-0", LABEL_STRIP_PAD, "large:pt-0", className), children: [
       /* @__PURE__ */ jsxs(
         "div",
         {
@@ -240,6 +263,7 @@ export {
   DisabledReasonLine,
   EndHintRow,
   FIELD_CAPTION_CLASS,
+  FIELD_ERROR_CLASS,
   FLOATING_LABEL_STATIC,
   FieldBox,
   FieldCaption,
@@ -255,9 +279,12 @@ export {
   RequiredStarOnLegend,
   STATIC_LABEL_TYPE,
   StaticLabelRow,
-  hasContent,
+  assignRef,
   isTextHint,
+  mergeDescribedBy,
+  mergeRefs,
   useDisabledReasonLine,
+  useFieldError,
   useFieldHint,
   useFieldMessages,
   useInlineHint,

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, ReactNode } from \"react\";\nimport { HelpCircle } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\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\";\nimport { hasMessage, mergeDescribedBy } from \"./choice-parts\";\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. Private to the package —\n * not re-exported from the barrel, except `FieldLabel` and `FLOATING_LABEL_STATIC`,\n * which ui.tsx re-exports as it always has.\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 `ui.tsx`: `ui.tsx` imports 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 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-[var(--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 ComponentPropsWithoutRef<\"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 */\nexport interface FieldHintProps extends Omit<ComponentPropsWithoutRef<\"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-[var(--text-placeholder)] transition-colors hover:text-[var(--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 * 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-[var(--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 && hasMessage(hint) ? hint : undefined,\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: hasMessage(reason), reasonId };\n}\n\n/**\n * The kit {@link Tooltip} around a locked control, with a `hidden` copy of the reason for\n * the control's `aria-describedby` — Button's anatomy. The control goes in a FRAGMENT so\n * the Tooltip does not also clone its bubble's id into the description: the hidden copy\n * already describes it, and the same sentence twice would be read on every focus.\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  line = false,\n  className,\n  children,\n}: {\n  lock: LockReason;\n  /** Draw the reason as a line under the control instead (0.32, §4) — see\n   *  {@link DisabledReasonLine}; the caller decides with {@link useDisabledReasonLine}. */\n  line?: boolean;\n  className?: string;\n  children: ReactNode;\n}) {\n  if (line) {\n    return (\n      <DisabledReasonLine id={lock.reasonId} reason={lock.reason} className={className}>\n        {children}\n      </DisabledReasonLine>\n    );\n  }\n  return (\n    <Tooltip label={lock.reason} 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-[var(--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  children,\n}: {\n  id: string;\n  reason: ReactNode;\n  className?: 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={DISABLED_REASON_LINE_CLASS}>\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\n/** `undefined`, `null`, `false` and `\"\"` are what a caller's `cond && \"…\"` evaluates to\n *  when there is nothing to say; none of them is content. A numeric `0` is. */\nexport function hasContent(node: ReactNode): boolean {\n  return node !== undefined && node !== null && node !== false && node !== \"\";\n}\n\nconst FIELD_ERROR_CLASS = \"mt-1 text-caption leading-tight text-[var(--danger)]\";\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 the error — the standing\n   *  advice before the news, as `useFieldError` in ui.tsx 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/** `hint` / `error` / `invalid` resolved the way `Select` resolves them. */\nexport function useFieldMessages({\n  hint: hintProp,\n  error,\n  invalid,\n  describedBy,\n  ariaInvalid,\n}: {\n  hint?: ReactNode;\n  error?: ReactNode;\n  invalid?: boolean;\n  describedBy?: string;\n  ariaInvalid?: unknown;\n}): FieldMessages {\n  const hint = useInlineHint(hintProp);\n  const hintId = useId();\n  const errorId = useId();\n  const textHint = isTextHint(hint);\n  const hasError = hasContent(error);\n  return {\n    isInvalid: Boolean(invalid) || hasError || ariaInvalid === true || ariaInvalid === \"true\",\n    describedBy:\n      [describedBy, textHint && hintId, hasError && errorId].filter(Boolean).join(\" \") || undefined,\n    below:\n      textHint || hasError ? (\n        <>\n          {textHint && (\n            <p id={hintId} className={FIELD_CAPTION_CLASS}>\n              {hint}\n            </p>\n          )}\n          {hasError && (\n            <p id={errorId} className={FIELD_ERROR_CLASS}>\n              {error}\n            </p>\n          )}\n        </>\n      ) : null,\n    labelHint: !textHint && hasContent(hint) ? hint : undefined,\n  };\n}\n\n/**\n * The field and what is under it, as one box — `FieldGroup` in ui.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 — the values {@link FieldStrip}'s `pad` takes,\n * public since 0.23 (keksdose G8), so the names say what the CONTENT needs rather than\n * which kit group first needed it (until 0.23 they were `toggle` and `tiles`).\n *\n *  - `\"field\"` — 16px. keksdose's `ClearedStatusPicker` (live #288 rework, #431,\n *    measured): *\"16px of label strip plus a 26px group is exactly a labelled Input\"*,\n *    so a status group in a row of 42px fields ends where they end. The label's line\n *    box runs into the group's top hairline, but the ACTIVE fill — the thing feedback\n *    #117 was about — starts at 19px, below the label's 17.75px. For content with a\n *    border and an inset of its own; ToggleGroup's `labelPlacement=\"strip\"`.\n *  - `\"clear\"` — 20px, keksdose's `FlagPicker` and location field (`pt-5`). A tile has\n *    no inset fill: its selection IS its frame, a 2px dark border-and-ring from the\n *    tile's top edge, so the tile has to start below the whole label line — and so does\n *    anything else with no inset: a map, a row of buttons, a line of text. SwatchPicker,\n *    IconPicker, and FieldStrip's default.\n */\nexport const LABEL_STRIP_PAD = { field: \"pt-4\", clear: \"pt-5\" } as const;\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  pad,\n  className,\n  children,\n  ...rest\n}: Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> & {\n  labelId: string;\n  label: ReactNode;\n  hint?: ReactNode;\n  /** Dim the label with its group, as `peer-disabled:` dims a field's own. */\n  disabled?: boolean;\n  pad: keyof typeof LABEL_STRIP_PAD;\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[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, 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":[]}

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

@@ -1,16 +1,11 @@
-import * as react from 'react';
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
-
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 /**
  * How far down the content starts, under the 11px label — see {@link FieldStripProps.pad}.
- *
- *  - `"clear"` (default) — 20px: the content starts below the label's whole line box.
- *  - `"field"` — 16px: the strip plus a 26px bordered control is exactly a labelled
- *    {@link Input}'s 42px.
+ * Since 0.34 both are the one 20px strip.
  */
-type FieldStripPad = "clear" | "field";
+export type FieldStripPad = "clear" | "field";
 /** What a {@link FieldStrip} hands render-prop children. */
-interface FieldStripIds {
+export interface FieldStripIds {
     /** The label's id — for content that names ITSELF by the label (`aria-labelledby`)
      *  under `group={false}`, or anything else that has to point at it. */
     labelId: string;
@@ -19,7 +14,7 @@ interface FieldStripIds {
      *  `group={false}`, where there is no group to describe. */
     describedBy: string | undefined;
 }
-interface FieldStripProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+export interface FieldStripProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
     /** The 11px static label, on the line a labelled field's label sits on. */
     label: ReactNode;
     /**
@@ -38,21 +33,18 @@ interface FieldStripProps extends Omit<ComponentPropsWithoutRef<"div">, "childre
      */
     disabled?: boolean;
     /**
-     * How tall the strip is — what the content needs, measured in keksdose (`pt-5` /
-     * `pt-4`, the 0.22 `LABEL_STRIP_PAD`):
+     * @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.
      *
-     *  - `"clear"` (default) — 20px. The content starts below the label's whole line box
-     *    (4px down, 13.75px tall). For content with no inset of its own: a map, a row of
-     *    buttons, a pill, a line of text, a row of tiles whose selection is their frame
-     *    (SwatchPicker, IconPicker).
-     *  - `"field"` — 16px. The strip plus a 26px bordered control (1 + 2 + 20 + 2 + 1) is
-     *    exactly a labelled Input's 42px, so the row's bottom edges line up. The label's
-     *    line box runs 1.75px into the control's top hairline, so only content with an
-     *    inset of its own keeps clear of it — the segmented group's 2px moat
-     *    (ToggleGroup's `labelPlacement="strip"`).
+     * 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 responsive strip is a `className`: it merges after the pad, so keksdose's status
-     * cell writes `className="pt-5 @3xl:pt-4"` (20px on a phone, 16px in the desktop row).
+     * A `className` still merges after the strip's padding.
      */
     pad?: FieldStripPad;
     /**
@@ -93,13 +85,12 @@ interface FieldStripProps extends Omit<ComponentPropsWithoutRef<"div">, "childre
  * ```
  *
  * The label sits where a field's static label sits (`top-1`, `inset-x-3`, 11px in a
- * `leading-tight` line); the content starts `pad` down, full width. `className` styles
- * the wrapper — the grid or flex item in the caller's row — and merges after the pad.
+ * `leading-tight` line); the content starts 20px down, full width, clear of the label
+ * and its "?". `className` styles the wrapper — the grid or flex item in the caller's
+ * row — and merges after the strip's padding.
  *
  * Not a {@link Field}: that one sets a 14px label ABOVE its control, in flow, for a form
  * 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.
  */
-declare function FieldStrip({ label, hint, error, disabled, pad, group, className, children, ...rest }: FieldStripProps): react.JSX.Element;
-
-export { FieldStrip, type FieldStripIds, type FieldStripPad, type FieldStripProps };
+export declare function FieldStrip({ label, hint, error, disabled, pad: _pad, group, className, children, ...rest }: FieldStripProps): import("react").JSX.Element;

package/dist/components/field-strip.js

@@ -7,7 +7,8 @@ function FieldStrip({
   hint,
   error,
   disabled = false,
-  pad = "clear",
+  // Taken off so it never reaches the DOM; see `pad` (deprecated, one strip since 0.34).
+  pad: _pad,
   group = true,
   className,
   children,
@@ -31,7 +32,6 @@ function FieldStrip({
       label,
       hint: messages.labelHint,
       disabled,
-      pad,
       className,
       children: [
         content,

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 *\n *  - `\"clear\"` (default) — 20px: the content starts below the label's whole line box.\n *  - `\"field\"` — 16px: the strip plus a 26px bordered control is exactly a labelled\n *    {@link Input}'s 42px.\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   * How tall the strip is — what the content needs, measured in keksdose (`pt-5` /\n   * `pt-4`, the 0.22 `LABEL_STRIP_PAD`):\n   *\n   *  - `\"clear\"` (default) — 20px. The content starts below the label's whole line box\n   *    (4px down, 13.75px tall). For content with no inset of its own: a map, a row of\n   *    buttons, a pill, a line of text, a row of tiles whose selection is their frame\n   *    (SwatchPicker, IconPicker).\n   *  - `\"field\"` — 16px. The strip plus a 26px bordered control (1 + 2 + 20 + 2 + 1) is\n   *    exactly a labelled Input's 42px, so the row's bottom edges line up. The label's\n   *    line box runs 1.75px into the control's top hairline, so only content with an\n   *    inset of its own keeps clear of it — the segmented group's 2px moat\n   *    (ToggleGroup's `labelPlacement=\"strip\"`).\n   *\n   * A responsive strip is a `className`: it merges after the pad, so keksdose's status\n   * cell writes `className=\"pt-5 @3xl:pt-4\"` (20px on a phone, 16px in the desktop row).\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 `pad` down, full width. `className` styles\n * the wrapper — the grid or flex item in the caller's row — and merges after the pad.\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  pad = \"clear\",\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      pad={pad}\n      className={className}\n    >\n      {content}\n      {messages.below}\n    </LabelStrip>\n  );\n}\n"],"mappings":";AA4HI;AA5HJ,SAAS,aAAa;AAEtB,SAAS,YAAY,wBAAwB;AAwGtC,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,MAAM;AAAA,EACN,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,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 { 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":[]}

package/dist/components/field-sync-labels.d.ts

@@ -0,0 +1,2 @@
+import type { FieldSyncLabels } from "./field-sync.js";
+export declare const DEFAULT_FIELD_SYNC_LABELS: FieldSyncLabels;

package/dist/components/field-sync-labels.js

@@ -0,0 +1,12 @@
+"use client";
+const DEFAULT_FIELD_SYNC_LABELS = {
+  synced: "Saved",
+  edited: "Unsaved changes",
+  pending: "Saving\u2026",
+  error: "Could not save",
+  retry: "Retry"
+};
+export {
+  DEFAULT_FIELD_SYNC_LABELS
+};
+//# sourceMappingURL=field-sync-labels.js.map

package/dist/components/field-sync-labels.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/field-sync-labels.ts"],"sourcesContent":["// The English words of ./field-sync, in a module with no component code: the English\n// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one\n// chunk like the other languages (0.34, KS U8). ./field-sync re-exports them.\n\nimport type { FieldSyncLabels } from \"./field-sync\";\n\nexport const DEFAULT_FIELD_SYNC_LABELS: FieldSyncLabels = {\n  synced: \"Saved\",\n  edited: \"Unsaved changes\",\n  pending: \"Saving…\",\n  error: \"Could not save\",\n  retry: \"Retry\",\n};\n"],"mappings":";AAMO,MAAM,4BAA6C;AAAA,EACxD,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,OAAO;AAAA,EACP,OAAO;AACT;","names":[]}