@eifi1/ui-kit 0.33.1 → 0.35.0

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/field-base.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport type { ComponentPropsWithRef, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport {\n  FieldCaption,\n  FLOATING_LABEL_STATIC,\n  LABEL_ABOVE_AT_LARGE,\n  LABEL_ABOVE_BOX,\n  STATIC_LABEL_TYPE,\n  type FieldHintParts,\n} from \"./field-parts\";\nimport { DEFAULT_CHARACTER_COUNT_LABELS, DEFAULT_PASSWORD_REVEAL_LABELS } from \"./ui-labels\";\n\n/**\n * The field base: what Input, Select and Textarea — and every kit field built on the same\n * look — share (0.34, MOD-2, refactor audit 2026-10). The `FIELD_*` classes, the floating\n * label and its `FloatingField` box, `Label`, the chevron, and the words of the password\n * reveal and the character counter. The message under a wrong field is field-parts'\n * `useFieldError`, every field's.\n *\n * Public through ./ui by name. `FieldGroup`, the counter and the placeholder helpers are\n * the three fields' shared parts (`@internal`).\n */\n\n/**\n * The 16 px floor on touch (docs/text-size-harmonization.md §10.1). iOS zooms the page\n * when a field under 16 px takes focus, and keksdose's `maximum-scale=1` — which stopped\n * it — goes so pinch zoom works again (WCAG 1.4.4). A zoomed page drops the keyboard\n * inset to 0 (§10.2), so the zoom would put a pinned editor footer behind the keyboard\n * (keksdose #154). So on a coarse pointer a field is at least 16 px, at every text size:\n * `max()` leaves Large and Extra large alone, where `text-sm` is already 17.5 / 21 px.\n *\n * In px on purpose: the threshold is the browser's, in CSS px, whatever the root size.\n * Font size only — the line height keeps `text-sm`'s ratio. Part of {@link FIELD_BASE};\n * add it to any other text-entry control whose type is below 16 px.\n */\nexport const FIELD_TOUCH_TEXT = \"pointer-coarse:text-[length:max(0.875rem,16px)]\";\n\nexport const FIELD_BASE =\n  \"block w-full rounded-md border border-subtle bg-surface px-3 py-2 text-sm text-primary shadow-sm placeholder:text-placeholder focus:border-brand \" +\n  // The focus line, whole at fractional display scaling (K5 follow-up, keksdose run 78):\n  // at 125 % a 1px border covers 1.25 device pixels, and the sides that fall across a\n  // pixel boundary read half-strength. A 1px INSET ring in the focus colour beside it\n  // doubles the line inward — FIELD_INVALID's border-plus-ring (live #295), and the\n  // DatePicker stepper's fix (0.34) — so every side keeps one fully covered device\n  // pixel. Inset: nothing outside the field moves or is covered.\n  \"focus:ring-1 focus:ring-inset focus:ring-brand \" +\n  // §10.1: at least 16 px on a touch screen, or iOS zooms the page on focus.\n  FIELD_TOUCH_TEXT +\n  \" \" +\n  // A field the user cannot change has to LOOK settled. Without this, `disabled`\n  // dimmed the floating label and nothing else — FIELD_BASE's own\n  // `text-primary` overrides the browser's grey — so a read-only value\n  // sat there at full body-text strength, indistinguishable from one you could retype\n  // (Keksdose dev#455/#474).\n  \"disabled:cursor-default disabled:bg-surface-2 disabled:text-muted \" +\n  // Same for a field that takes focus but refuses keys: `readOnly` is not\n  // `disabled`, and a value that cannot be edited should not claim it can be. Opt\n  // OUT with {@link FIELD_WRITABLE_LOOK} in the one case where `readOnly` does not\n  // mean that — see the two-factor code field, which uses it to block an autofill\n  // and drops it the moment you focus the field.\n  //\n  // ⚠️ The ATTRIBUTE, never the `:read-only` pseudo-class (Keksdose dev#477).\n  // `:read-only` does not mean \"was marked readonly\" — per Selectors 4 it matches\n  // everything that is not `:read-write`, and only editable inputs/textareas and\n  // contenteditable elements are `:read-write`. So `read-only:` matched every\n  // `<select>` in the app and every field-styled `<button>` built on this base —\n  // the native selects, the date trigger, the entity/currency/multi pickers — and\n  // painted them all in the \"you may not edit this\" grey. On one transaction form\n  // that made three different-looking families out of one field style: plain\n  // inputs, grey selects, grey trigger buttons.\n  \"[&[readonly]]:bg-surface-2 [&[readonly]]:text-muted\";\n\n/** Cancels FIELD_BASE's read-only treatment for a field that is `readOnly` for a\n *  reason other than \"you may not edit this\". Attribute-scoped for the same reason\n *  FIELD_BASE is — the two have to cancel on the identical selector or twMerge\n *  cannot make the later one win. */\nexport const FIELD_WRITABLE_LOOK =\n  \"[&[readonly]]:bg-surface [&[readonly]]:text-primary\";\n\n// Extra top padding leaves room for a label that floats INSIDE the field (the\n// \"filled\" pattern) — the label sits in the top strip, the value below it. Used by\n// every labelled field (native + custom-dropdown triggers). twMerge lets pt/pb win\n// over FIELD_BASE's py-2. At Large the label stands above the field (0.33, §10.17,\n// LABEL_ABOVE_AT_LARGE), so the strip goes and the field is FIELD_BASE's `py-2` again.\nexport const FIELD_FLOATING_PAD = \"pt-4 pb-1 large:py-2\";\n\n// Error/required highlight for a field that is missing a value — a `--danger`\n// border and matching focus ring so the control itself shows what's wrong, not just\n// a note beside it (feedback #235). Layered after FIELD_BASE so twMerge wins.\n//\n// The `ring-1` is not decoration; it is what makes the highlight SURVIVE display\n// scaling (Keksdose live #295 — *\"Account select boundary. It is not highlighted on\n// the sides.\"*). At 125%, the browser's usual setting on a 2560px screen, a 1px CSS\n// border is 1.25 device pixels: the horizontal edges land on whole rows and paint\n// solid, while one of the two VERTICAL edges lands across a pixel boundary and is\n// spread over two columns at partial coverage. Measured on the receipt's required\n// account field, dark theme, back when this was a hard-coded rose (full =\n// rgb(208,30,78)): left/top/bottom all 208, right 160 then 115 — the side that is\n// supposed to shout, at 55–77% of the others. A border plus a ring is 2 CSS px, so\n// whatever the fraction there is always one fully covered device pixel on every side\n// (re-measured: worst side 241). It is the GEOMETRY that carries that, not the hue,\n// so the fix survives a consumer re-pointing `--danger-border`.\n//\n// A ring rather than `border-2`: a box-shadow adds no layout, so an invalid field\n// stays exactly the size of a valid one and nothing beside it moves when the value\n// arrives.\nexport const FIELD_INVALID =\n  \"border-danger-strong ring-1 ring-danger-strong focus:border-[var(--danger)] focus:ring-[var(--danger)]\";\n\nexport const FLOATING_INPUT_CLASS = cn(FIELD_BASE, FIELD_FLOATING_PAD, \"peer placeholder:text-transparent\");\n\n/**\n * The PHONE display treatment (Keksdose feedback #176, carried across the entry\n * forms by #179): the field chrome removed so the ONE input a form is actually\n * about reads as the thing itself, not as another boxed row in a stack.\n *\n * Every control that takes `variant=\"display\"` — {@link Input}, `NumberInput`,\n * `AmountInput` — means exactly the same thing by it: the treatment applies in the\n * phone layout (`usePhoneLayout()`, `max-md:` at the text size in force) and the field\n * is untouched above it, so a caller never has\n * to ask the viewport, and a form can't end up half-treated across breakpoints.\n *\n * What stays, deliberately:\n *  - A hairline baseline. With the box gone something still has to say \"you can\n *    type here\"; it takes the brand colour on focus, where a bordered field would\n *    light its whole outline. Each edge is set exactly once (`border-x-0\n *    border-t-0 border-b`) so the rule can't hinge on utility order. On focus the\n *    line is doubled inward by an inset shadow on that edge alone — FIELD_BASE's\n *    inset ring, for the same reason (K5 follow-up: a 1px line reads half-strength at\n *    125 %) — where a ring would draw a box round the figure.\n *  - The muted placeholder colour, because a display field is usually empty at\n *    the moment it matters most and has nothing else to show.\n *  - The label, moved to `sr-only` rather than dropped: display type is legible\n *    to the eye, not to a screen reader.\n *\n * Size and weight are NOT here — an amount wants display type, a subject line\n * wants a heading — so each control adds its own on top.\n */\nexport const FIELD_DISPLAY =\n  \"block w-full border-x-0 border-t-0 border-b border-subtle bg-transparent px-0 pt-0 pb-1 text-primary shadow-none placeholder:text-placeholder focus:border-brand focus:shadow-[inset_0_-1px_0_var(--brand)] focus:outline-none focus:ring-0 disabled:opacity-60\";\n\n// A field-styled button trigger for the custom dropdown controls (MultiSelect,\n// CurrencySelect) — the field look (border/bg) as a flex row for the value + chevron,\n// so they don't hand-copy the field classes. Add FIELD_FLOATING_PAD only when the\n// trigger carries a label (unlabelled triggers stay normal height to match buttons /\n// adjacent controls). Pair the labelled case with a static FieldLabel.\n// `relative` so the trigger can host an absolutely-centred FieldChevron / clear\n// button the way the native Select does.\n//\n// `[&>:first-child]:min-h-[1lh]` holds one line box open whatever the value is. A\n// trigger with nothing chosen and no placeholder renders an EMPTY value span, an\n// empty span has no line box, and the trigger collapsed to its padding — 18px\n// tall in a stack of 38px fields (an RhfCombobox without a placeholder; DatePicker\n// and MonthPicker had met the same thing as Keksdose live #294 and patched their\n// own span with a U+00A0). Here, on the shared class, it covers every trigger\n// built on it, including a `renderTrigger` one. `1lh` rather than a fixed height\n// so it tracks whatever type the trigger is set in; the first child is the value\n// in every trigger here (the chevron and the clear button are absolute).\nexport const FIELD_TRIGGER = cn(\n  FIELD_BASE,\n  \"relative flex items-center justify-between gap-2 text-start hover:bg-hover\",\n  \"[&>:first-child]:min-h-[1lh]\",\n);\n\n/** An alias rather than an interface: the chevron adds nothing of its own to an\n *  `<svg>`'s props, and an interface declaring no members is the same type wearing a\n *  name that suggests otherwise. */\nexport type FieldChevronProps = Omit<ComponentPropsWithRef<\"svg\">, \"children\">;\n\n/** The dropdown chevron, shared by the native {@link Select} and every custom\n * {@link FIELD_TRIGGER} control.\n *\n * Absolutely positioned and centred on the FIELD box. As an ordinary flex child\n * it centres on the *content* box instead, and `FIELD_FLOATING_PAD` (pt-4 pb-1)\n * pushes that box's midline down — so a labelled currency/multi-select chevron\n * sat visibly lower than the native select's right beside it (feedback #400).\n * Pair it with `pe-9` on the trigger so the value can't run underneath. At the\n * inline END, not the right: a right-to-left form reads the value from the right,\n * and a chevron parked on top of its first word hid exactly the part that says\n * what was picked. */\nexport function FieldChevron({ className, ...rest }: FieldChevronProps) {\n  return (\n    <ChevronDown\n      {...rest}\n      // After the spread: the chevron is decoration beside a control that already has\n      // a name, and an `aria-hidden` a caller could switch off by accident is a second\n      // announcement of the same field.\n      aria-hidden\n      className={cn(\n        \"pointer-events-none absolute end-2.5 top-1/2 size-4 -translate-y-1/2 text-placeholder\",\n        className,\n      )}\n    />\n  );\n}\n\n// Animated label that starts centred (as a placeholder) in an empty field and\n// floats up INSIDE the top strip on focus or once the field has a value. Sits on\n// the field's own surface, so no background chip and nothing to mismatch the card.\n//\n// At Large it is a static label ABOVE the field instead (0.33, §10.17): in flow, so it\n// wraps; always in its floated look, since there is no strip to float into and no\n// placeholder to stand in for; no transition, since it never moves.\nconst LABEL_FLOATED_AT_LARGE =\n  \"large:text-caption large:leading-tight large:text-secondary large:transition-none\";\n\nexport const FLOATING_LABEL_CLASS = cn(\n  \"pointer-events-none absolute start-3 top-2.5 text-sm text-placeholder transition-all\",\n  \"max-w-[calc(100%-1.5rem)] truncate-until-large\",\n  \"peer-focus:top-1 peer-focus:text-caption peer-focus:leading-tight peer-focus:text-secondary\",\n  \"peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:text-caption peer-[:not(:placeholder-shown)]:leading-tight peer-[:not(:placeholder-shown)]:text-secondary\",\n  \"peer-disabled:opacity-50\",\n  LABEL_ABOVE_AT_LARGE,\n  \"large:block\",\n  LABEL_FLOATED_AT_LARGE,\n);\n\n// The animated label again, as a ROW that the label and its \"?\" share — same\n// placement, same float, same type, but with the type on the row so the label\n// INHERITS it. It has to be that way round: `peer-focus:` compiles to a sibling\n// selector, so the classes have to sit on the element that is actually a sibling\n// of the input, and a label nested inside a wrapper is not one.\n//\n// Wider end clearance than the label alone takes (`3rem` rather than `1.5rem`),\n// because the controls that carry an animated label are the ones with something\n// at the end edge of the field — NumberInput's calculator is the case this was\n// written for. The label truncates a little sooner; the alternative was the \"?\"\n// sitting on top of a button (steering-design feedback #48). At Large the row stands\n// above the field, as the label alone does, and nothing at the end edge is under it.\nconst FLOATING_ROW_CLASS = cn(\n  \"pointer-events-none absolute start-3 top-2.5 flex items-center gap-1 transition-all\",\n  \"max-w-[calc(100%-3rem)] text-sm text-placeholder\",\n  \"peer-focus:top-1 peer-focus:text-caption peer-focus:leading-tight peer-focus:text-secondary\",\n  \"peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:text-caption peer-[:not(:placeholder-shown)]:leading-tight peer-[:not(:placeholder-shown)]:text-secondary\",\n  \"peer-disabled:opacity-50\",\n  LABEL_ABOVE_AT_LARGE,\n  LABEL_FLOATED_AT_LARGE,\n);\n\n/** The static label's row with its \"?\" at the field's end, in the top strip — and at\n *  Large above the field (LABEL_ABOVE_AT_LARGE). */\nconst STATIC_ROW_CLASS = cn(\"pointer-events-none absolute inset-x-3 top-1 flex items-center gap-1\", LABEL_ABOVE_AT_LARGE);\n\n/**\n * The one place that assembles a labelled field: a `relative` wrapper around the\n * control (`children`) plus a floating label inside the top strip. Pass `staticLabel`\n * for controls that always have a value (selects); omit it for free-text fields whose\n * label animates from centred→up. Used by Input/Select/Textarea/NumberInput; the\n * dropdown controls that need a ref + menu keep their own wrapper but the same label\n * (via {@link FieldLabel}) and trigger ({@link FIELD_TRIGGER}) styles.\n */\nexport interface FloatingFieldProps extends ComponentPropsWithRef<\"div\"> {\n  htmlFor?: string;\n  label?: ReactNode;\n  staticLabel?: boolean;\n  /** Keep the label in the accessibility tree but out of the layout — what\n   *  {@link FIELD_DISPLAY} needs, since a floating label inside a field with no\n   *  field left would have nothing to float in. */\n  srOnlyLabel?: boolean;\n  /** Something interactive that belongs to the LABEL rather than to the value —\n   *  in practice a {@link FieldHint} \"?\" (dev#468). It is rendered in a flex row\n   *  with the label, so it is centred on the label's line by the layout instead\n   *  of by a hand-tuned `top-…`, and it can never drift when the type changes.\n   *\n   *  It rides an ANIMATED label too, and the two cases place it differently on\n   *  purpose. A static label has a field-wide strip to itself, so the hint sits\n   *  at the far end of it and a long label truncates into the gap. An animated\n   *  one belongs to a control with something at the end edge of the field — a\n   *  calculator, a stepper — so the hint follows the label instead, and it is\n   *  the label that gives way (steering-design feedback #48). */\n  hint?: ReactNode;\n  children: ReactNode;\n}\n\nexport function FloatingField({\n  className,\n  htmlFor,\n  label,\n  staticLabel,\n  srOnlyLabel,\n  hint,\n  children,\n  ...rest\n}: FloatingFieldProps) {\n  const withHint = hint !== undefined && !srOnlyLabel;\n  const atEnd = withHint && staticLabel;\n  // A label drawn over the field: at Large it stands above it instead (0.33, §10.17),\n  // in the first row of this box (LABEL_ABOVE_BOX), though it FOLLOWS the control in\n  // the DOM — `peer-*` reads the input before it.\n  const above = label !== undefined && !srOnlyLabel;\n  const labelEl = label !== undefined && (\n    <label\n      htmlFor={htmlFor}\n      // In the first row at Large, out of LABEL_ABOVE_BOX's rule for the field's parts.\n      data-field-label={above && !withHint ? \"\" : undefined}\n      className={\n        srOnlyLabel\n          ? \"sr-only\"\n          : atEnd\n            ? cn(\"pointer-events-none min-w-0 truncate-until-large\", STATIC_LABEL_TYPE)\n            : withHint\n              ? \"pointer-events-none min-w-0 truncate-until-large\"\n              : staticLabel\n                ? FLOATING_LABEL_STATIC\n                : FLOATING_LABEL_CLASS\n      }\n    >\n      {label}\n    </label>\n  );\n  return (\n    // `relative` is the whole contract of this wrapper — the floating label and every\n    // control that hangs off it (a reveal toggle, a chevron) are positioned against\n    // this box — so it is merged through `cn` after the spread rather than left where\n    // a caller's stray `className` or `style` could unset it. At Large, with a label\n    // above, a grid: the label's row over the field's, the field's parts in the latter.\n    <div {...rest} className={cn(\"relative\", above && LABEL_ABOVE_BOX, className)}>\n      {children}\n      {withHint ? (\n        // Static: `inset-x-3` rather than `start-3`, so a long label truncates at\n        // the field's own end padding instead of running under the chevron.\n        // Animated: the row floats with the label and is only as wide as it needs\n        // to be. Either way the hint keeps its width (`shrink-0`) and the label\n        // is the one that gives way.\n        <div data-field-label=\"\" className={atEnd ? STATIC_ROW_CLASS : FLOATING_ROW_CLASS}>\n          {labelEl}\n          <span className=\"pointer-events-auto flex shrink-0 items-center\">{hint}</span>\n        </div>\n      ) : (\n        labelEl\n      )}\n    </div>\n  );\n}\n\nexport interface LabelProps extends ComponentPropsWithRef<\"label\"> {\n  /** Draw the required mark after the text. The mark is `aria-hidden`: what a\n   *  screen reader hears is the control's own `required` / `aria-required`, which\n   *  the caller still sets — a \"star\" read out as the last word of every name is\n   *  noise, and a control that is not marked required is not required however its\n   *  label looks. */\n  required?: boolean;\n  /** `sm` for a toolbar or a dense filter row (12px), `md` otherwise (14px). */\n  size?: \"sm\" | \"md\";\n  /** Dim the label with its control. A label ABOVE its field is not the field's\n   *  `peer`, so `peer-disabled:` cannot reach it the way it reaches a floating one. */\n  disabled?: boolean;\n}\n\n/**\n * The label ABOVE a field, for the places a floating label does not fit: a control\n * the kit did not render (a third-party picker, a range slider, a group of radios),\n * a filter bar whose fields are unlabelled {@link Select}s, a form that sets labels\n * above its fields throughout.\n *\n * A new component rather than a mode of {@link FieldLabel}, because the two share\n * nothing but the word. `FieldLabel` is an absolutely positioned `<span>` inside a\n * trigger's `relative` box and has to stay exactly that for every dropdown that\n * already lines up with it; this is a real `<label>` in normal flow, with `htmlFor`,\n * that a click focuses the control through. Spacing below it belongs to the caller's\n * layout (`space-y-1.5` on the pair, typically), as it would for any block.\n */\nexport function Label({ required, size = \"md\", disabled, className, children, ...rest }: LabelProps) {\n  return (\n    <label\n      {...rest}\n      className={cn(\n        \"inline-flex items-center gap-0.5 font-medium leading-none text-primary\",\n        size === \"sm\" ? \"text-xs\" : \"text-sm\",\n        disabled && \"cursor-default opacity-50\",\n        className,\n      )}\n    >\n      {children}\n      {required && (\n        <span aria-hidden className=\"text-danger\">\n          *\n        </span>\n      )}\n    </label>\n  );\n}\n\n// The message under a field that is wrong, and the wiring that attaches it — `useFieldError`\n// — lives in field-parts since 0.34, every field's (DUP-8, refactor audit 2026-10).\n\n/**\n * @internal A field and its message as one box.\n *\n * The message cannot go INSIDE the field's own `relative` box. The password reveal\n * toggle is `inset-y-0` and the select chevron is `top-1/2`, so both centre on\n * whatever that box contains — put two lines of message in it and the chevron drifts\n * down out of the field, between the value and the text. So the field keeps its box\n * and this wraps the pair.\n *\n * WHEN IT WRAPS. A field that never takes `error` renders nothing of its own here,\n * which is what keeps the prop additive: it is exactly the DOM it was before the prop\n * existed, down to the bare `<input>` an unlabelled {@link Input} drops straight into a\n * caller's flex row. A field that DOES take `error` — the key is passed, whatever its\n * value — is wrapped for as long as it is mounted, message or not (`reserve`).\n *\n * It used to wrap only while a message showed, and that cost the control its\n * identity: a fragment and a `<div>` are different elements at the same spot in the\n * tree, so React threw the `<input>` away and mounted a new one every time the message\n * came or went. Focus fell to `<body>`, the caret went with it, and an uncontrolled\n * field lost what had been typed — Kurvenschmiede's confirm-password dialog clears its\n * \"Wrong password\" on change, so the first keystroke of the retry dropped the user out\n * of the field. Keeping the box stops that; the field is never reparented.\n *\n * The other ways to keep it stable were worse. A box on EVERY field changes what every\n * flex row and grid in three apps lays out (`flex-1`, `w-56`, `col-span-2` on the\n * field would land on a child of the item instead of the item). A `display: contents`\n * box would keep the flex/grid item, but a contents box takes no margin, so a parent's\n * `space-y-*` stops spacing the field — the shape of Kurvenschmiede's reset-password\n * form and gear wizard, both `space-y-*` stacks of fields with `error` — and it moves\n * `first:`/`last:`/`> *` matches. A field passing `error` already took this plain box\n * whenever its message showed, so what changes is only that it keeps it while none\n * does; every such call site in the three apps sits in a block or a `space-y`/grid\n * stack where a full-width block box is the field's own size. The case it does change\n * is a field passing `error` whose `className` sizes it as a flex item (`flex-1` in a\n * row): that caller already lost the sizing while a message showed, and now sees the\n * same box without one. Pass `error` only where a message can actually appear.\n *\n * `className` is NOT moved out here, for the same reason — it goes on the field, as it\n * always has, so the box cannot silently change what that prop styles.\n */\nexport function FieldGroup({\n  errorEl,\n  reserve = false,\n  children,\n}: {\n  errorEl: ReactNode;\n  /** The caller passed `error`: keep the box even while there is no message. */\n  reserve?: boolean;\n  children: ReactNode;\n}) {\n  if (errorEl === null && !reserve) return <>{children}</>;\n  return (\n    <div>\n      {children}\n      {errorEl}\n    </div>\n  );\n}\n\n/** The two names the password reveal toggle can wear. See {@link Input}. */\nexport interface PasswordRevealLabels {\n  /** While the value is hidden — activating the toggle will show it. */\n  show: string;\n  /** While the value is shown. */\n  hide: string;\n}\n\n// Defined in ./ui-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_PASSWORD_REVEAL_LABELS };\n\n/**\n * What the character counter of {@link Input} and {@link Textarea} (`showCount`) says.\n * The visible \"12/80\" is digits and a slash and is not translated; these are the words\n * a screen reader gets instead of it.\n */\nexport interface CharacterCountLabels {\n  /** The counter as part of the field's description, read when focus reaches the\n   *  field: \"12 of 80 characters\". */\n  count: (used: number, max: number) => string;\n  /** Said once, politely, on entering the last stretch before the limit: \"8\n   *  characters left\". */\n  remaining: (left: number) => string;\n  /** Said once, politely, on reaching the limit. */\n  limitReached: string;\n}\n\n// Defined in ./ui-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_CHARACTER_COUNT_LABELS };\n\n/** The length the browser's own `maxLength` counts — UTF-16 code units — so the counter\n *  and the limit can never disagree about whether a field is full. */\nfunction textLength(value: unknown): number {\n  return value === undefined || value === null ? 0 : String(value).length;\n}\n\n/** @internal The counter's length: the controlled `value`'s, else what the field has been typed\n *  to (from `defaultValue` on). `track` is called from the field's change handler. */\nexport function useTypedLength(value: unknown, defaultValue: unknown) {\n  const [typed, setTyped] = useState(() => textLength(defaultValue));\n  return { used: value !== undefined ? textLength(value) : typed, track: (text: string) => setTyped(text.length) };\n}\n\ntype CountZone = \"ok\" | \"near\" | \"limit\";\n\n/** The last stretch before the limit: a tenth of it, at least 1 and at most 20 — \"8\n *  left\" of 80, and 20 of 2,000 rather than 200, which is not \"near\" in any sense a\n *  person typing means. */\nfunction nearLimitAt(max: number): number {\n  return Math.min(20, Math.max(1, Math.ceil(max * 0.1)));\n}\n\nfunction countZone(used: number, max: number): CountZone {\n  if (used >= max) return \"limit\";\n  return max - used <= nearLimitAt(max) ? \"near\" : \"ok\";\n}\n\n/**\n * @internal The live \"12/80\" under a field with `showCount` (keksdose K11: the admin broadcast,\n * support replies, canned replies and the handoff note each counted by hand, and one\n * announced every keystroke).\n *\n * Three channels, each saying only what it should:\n *  - the digits, `aria-hidden` — \"12 slash 80\" is not a sentence;\n *  - a `hidden` \"12 of 80 characters\" on the field's `aria-describedby`, so the count is\n *    read with the field when focus reaches it, and never while typing;\n *  - a polite live region that speaks ONCE per stretch: on entering the last tenth\n *    (\"8 characters left\") and on reaching the limit. A region that changed on every\n *    keystroke would talk over the user's own typing echo for the whole message.\n *    Nothing is said on mount: a stored note already near its limit is not news.\n */\nexport function CharacterCount({\n  id,\n  used,\n  max,\n  labels,\n  caption,\n}: {\n  id: string;\n  used: number;\n  max: number;\n  labels: CharacterCountLabels;\n  caption: ReactNode;\n}) {\n  const zone = countZone(used, max);\n  // What the live region holds, re-set only when the stretch changes — the previous\n  // render's zone kept in state, the pattern React documents for \"adjusting state when\n  // a prop changes\", so the region's text (and so the announcement) changes at most\n  // once per crossing.\n  const [said, setSaid] = useState<{ zone: CountZone; text: string }>({ zone, text: \"\" });\n  if (said.zone !== zone) {\n    setSaid({\n      zone,\n      text: zone === \"near\" ? labels.remaining(max - used) : zone === \"limit\" ? labels.limitReached : \"\",\n    });\n  }\n  return (\n    // `relative` holds the sr-only region (see sr-only-containment.test).\n    <div className=\"relative mt-1 flex items-start gap-2\">\n      <div className=\"min-w-0 flex-1\">{caption}</div>\n      <span\n        aria-hidden\n        className={cn(\n          \"shrink-0 text-caption leading-tight tabular-nums\",\n          zone === \"limit\"\n            ? \"text-danger\"\n            : zone === \"near\"\n              ? \"text-warning\"\n              : \"text-muted\",\n        )}\n      >\n        {used}/{max}\n      </span>\n      <span id={id} hidden>\n        {labels.count(used, max)}\n      </span>\n      <span role=\"status\" className=\"sr-only\">\n        {said.text}\n      </span>\n    </div>\n  );\n}\n\n/** @internal What goes under a text field: the caption (beside the counter, when there is one),\n *  then the error. `null` when there is nothing, so a field with none keeps exactly the\n *  DOM it had (see {@link FieldGroup}). */\nexport function fieldBelow(hint: FieldHintParts, counter: ReactNode, errorEl: ReactNode): ReactNode {\n  if (counter === null && hint.captionText === undefined && errorEl === null) return null;\n  return (\n    <>\n      {counter ?? <FieldCaption parts={hint} />}\n      {errorEl}\n    </>\n  );\n}\n\n/**\n * @internal kastlan 8: a caller's placeholder on a LABELLED field, shown once the label has\n * floated out of its way — on focus — and transparent until then, while the label sits\n * where the placeholder would be. Without it the field forced `placeholder=\" \"` for the\n * float trick and dropped the caller's text without a word (kastlan's \"note\" field lost\n * its hint). `:placeholder-shown` still drives the float: it matches an empty field\n * whatever the placeholder's text is.\n */\nexport const FLOATING_PLACEHOLDER_ON_FOCUS = \"focus:placeholder:text-placeholder\";\n\n/** @internal A placeholder with something to show. `\"\"` and blanks are the float trick's own\n *  `\" \"`, never the caller's hint. */\nexport const hasPlaceholderText = (placeholder: string | undefined): placeholder is string =>\n  placeholder !== undefined && placeholder.trim() !== \"\";\n\n/** @internal The counter's words: the `characterCount` namespace — prop > `<UiKitProvider\n *  labels>` > English. One place, so the namespace is named once. */\nexport function useCharacterCountLabels(prop: Partial<CharacterCountLabels> | undefined): CharacterCountLabels {\n  return useKitLabels(\"characterCount\", DEFAULT_CHARACTER_COUNT_LABELS, prop);\n}\n"],"mappings":"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","names":[]}

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

@@ -1,26 +1,34 @@
-import * as react from 'react';
-import { ReactNode, ComponentPropsWithoutRef } from 'react';
-import { TooltipSide } from './tooltip.js';
-import { CommitScope } from './write-lock.js';
-import '../hooks/use-anchored-rect.js';
-import '../lib/clipping.js';
-
+import type { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactNode } from "react";
+import { type TooltipSide } from "./tooltip.js";
+import { type CommitScope } from "./write-lock.js";
 /**
  * The pieces of a field's anatomy the kit's fields share — the static label, the hint
  * (caption or "?"), the caption and the error under a field, the label strip over a
- * bare group, the write lock on a control that saves itself. Private to the package —
- * not re-exported from the barrel, except `FieldLabel` and `FLOATING_LABEL_STATIC`,
- * which ui.tsx re-exports as it always has.
+ * bare group, the write lock on a control that saves itself, and the wiring under them
+ * (`aria-describedby`, refs). Private to the package — not re-exported from the barrel,
+ * except `FieldLabel` and `FLOATING_LABEL_STATIC`, which the barrel names (ui.tsx did until
+ * 0.34 split it).
  *
  * One file since 0.23: until then the pickers' half (`field-anatomy.tsx`: the date and
  * month pickers, whose trigger is a button in a wrapper of their own, and the groups
  * with no field box) sat beside this one with its own copies of `isTextHint` and the
  * caption class (keksdose K4: "uniform field anatomy … today it is a patchwork").
  *
- * Nothing here imports `ui.tsx`: `ui.tsx` imports this, and so do the combobox family,
+ * Nothing here imports a field module: field-base, input, select and textarea import this, and so do the combobox family,
  * the pickers and the native choice controls — the lint's no-cycle rule holds it.
  */
-declare const STATIC_LABEL_TYPE = "text-caption leading-tight text-[var(--text-muted)] peer-disabled:opacity-50";
+/**
+ * Ids to describe a control by, merged in reading order: whatever the caller already
+ * pointed at (standing advice), then the caption or description, then the error (the
+ * news). Merge, never replace — see {@link useFieldError}. An empty list is `undefined`,
+ * never `""`: a dangling attribute describes the control as nothing at all.
+ *
+ * Here since 0.34 (DUP-11, refactor audit 2026-10); `choice-parts.ts` held it, beside a
+ * copy of the presence rule, for the native choice controls alone.
+ */
+export declare function mergeDescribedBy(...ids: Array<string | false | null | undefined>): string | undefined;
+export { assignRef, mergeRefs } from "../lib/refs.js";
+export declare const STATIC_LABEL_TYPE = "text-caption leading-tight text-muted peer-disabled:opacity-50";
 /**
  * A field's label at Large and Extra large (0.33, docs/text-size-harmonization.md
  * §10.17): a static label ABOVE the field — the phone card's "label above value" (§4) —
@@ -35,7 +43,7 @@ declare const STATIC_LABEL_TYPE = "text-caption leading-tight text-[var(--text-m
  * The placement only: a label element adds `large:block` (a `<span>` or `<label>` in
  * flow), a label ROW keeps its `flex`.
  */
-declare const LABEL_ABOVE_AT_LARGE = "large:static large:row-start-1 large:mb-1 large:max-w-none large:pointer-events-auto";
+export declare const LABEL_ABOVE_AT_LARGE = "large:static large:row-start-1 large:mb-1 large:max-w-none large:pointer-events-auto";
 /**
  * The box a field's label is positioned in — {@link FloatingField}'s `relative` wrapper,
  * a date or month picker's root — at Large, while it holds a label above
@@ -46,17 +54,17 @@ declare const LABEL_ABOVE_AT_LARGE = "large:static large:row-start-1 large:mb-1
  * `data-field-label` and stay in the first. Only on a box with a visible label: without
  * one the second row would be empty.
  */
-declare const LABEL_ABOVE_BOX = "large:grid large:grid-cols-[minmax(0,1fr)] large:[&>.absolute:not([data-field-label])]:row-start-2";
-declare const FLOATING_LABEL_STATIC: string;
+export declare const LABEL_ABOVE_BOX = "large:grid large:grid-cols-[minmax(0,1fr)] large:[&>.absolute:not([data-field-label])]:row-start-2";
+export declare const FLOATING_LABEL_STATIC: string;
 /**
  * The floating label for a custom-dropdown trigger (a `<span>`, since the trigger is a
  * button not a labelable input). Same placement as {@link FloatingField}'s static label,
  * so every labelled field lines up. Render inside a `relative` wrapper, before the trigger.
  */
-interface FieldLabelProps extends ComponentPropsWithoutRef<"span"> {
+export interface FieldLabelProps extends ComponentPropsWithRef<"span"> {
     children: ReactNode;
 }
-declare function FieldLabel({ children, className, ...rest }: FieldLabelProps): react.JSX.Element;
+export declare function FieldLabel({ children, className, ...rest }: FieldLabelProps): import("react").JSX.Element;
 /**
  * The "?" that explains a field, on the field's own label line (dev#468).
  *
@@ -72,8 +80,13 @@ declare function FieldLabel({ children, className, ...rest }: FieldLabelProps):
  * reach of a keyboard and of every touch device, and the tooltip shows on focus
  * too. The text is also its accessible name, so a screen reader gets it without
  * the bubble ever opening.
+ *
+ * For a FACT — a format, a limit, a consequence — which at Large and on a touch screen
+ * becomes the field's caption ({@link useInlineHint}). Paragraph-long HELP the field is
+ * usable without belongs in a `HelpPopover` instead (0.34, §10.23), which opens on a tap
+ * and stays a "?" at every size.
  */
-interface FieldHintProps extends Omit<ComponentPropsWithoutRef<"button">, "children"> {
+export interface FieldHintProps extends Omit<ComponentPropsWithRef<"button">, "children"> {
     /** The explanation. It is both the tooltip's text and, by default, the button's
      *  accessible name, so a screen reader gets it without the bubble ever opening. */
     label: string;
@@ -81,7 +94,7 @@ interface FieldHintProps extends Omit<ComponentPropsWithoutRef<"button">, "child
      *  right in RTL). `left` / `right` stay physical. */
     side?: TooltipSide;
 }
-declare function FieldHint({ label, side, className, "aria-label": ariaLabel, ...rest }: FieldHintProps): react.JSX.Element;
+export declare function FieldHint({ label, side, className, "aria-label": ariaLabel, ...rest }: FieldHintProps): import("react").JSX.Element;
 /**
  * A field's `hint` as the field should draw it here (0.32, docs/text-size-harmonization.md
  * §4 "No fact only in a tooltip"): at Large and Extra large, and on a touch screen, a
@@ -89,11 +102,16 @@ declare function FieldHint({ label, side, className, "aria-label": ariaLabel, ..
  * the box, where they are read without hovering or tapping a 14 px "?". Anywhere else,
  * and for any other hint, the hint unchanged.
  *
+ * A FieldHint only, on purpose (0.34, §10.23): a FieldHint is a FACT, and a fact stays
+ * visible. Paragraph-long HELP — why, how, what the options mean; the field is usable
+ * without it — goes in a `HelpPopover`, which this leaves on the label line at every
+ * size: printed under the field it was the longest thing in the form (keksdose K3).
+ *
  * The kit's fields call it through {@link useFieldHint} / {@link useFieldMessages}; a
  * field that resolves its own `hint` (an app's, or one of the kit's own outside this
  * file) calls it first and then treats the result as it treated a text hint.
  */
-declare function useInlineHint(hint: ReactNode): ReactNode;
+export declare function useInlineHint(hint: ReactNode): ReactNode;
 /**
  * Whether a `hint` is a CAPTION (plain text: a non-empty string or a number) or
  * something for the label line (a {@link FieldHint} "?", or any other node).
@@ -103,11 +121,11 @@ declare function useInlineHint(hint: ReactNode): ReactNode;
  * the value; a "?" under the field would be a button floating free of the label it
  * explains.
  */
-declare function isTextHint(hint: ReactNode): hint is string | number;
+export declare function isTextHint(hint: ReactNode): hint is string | number;
 /** The caption under a field — Select's and NumberInput's type, so every field's
  *  standing advice reads alike. */
-declare const FIELD_CAPTION_CLASS = "mt-1 text-caption leading-tight text-[var(--text-muted)]";
-interface FieldHintParts {
+export declare const FIELD_CAPTION_CLASS = "mt-1 text-caption leading-tight text-muted";
+export interface FieldHintParts {
     /** The caller's `aria-describedby` with the caption's id appended — standing
      *  advice first; the error (the news) is appended after this by the field. */
     describedBy: string | undefined;
@@ -123,12 +141,54 @@ interface FieldHintParts {
  * Split a field's `hint` into the caption under it (attached with `aria-describedby`)
  * or the "?" on its label line. See {@link isTextHint}.
  */
-declare function useFieldHint(hintProp: ReactNode, describedBy: string | undefined): FieldHintParts;
+export declare function useFieldHint(hintProp: ReactNode, describedBy: string | undefined): FieldHintParts;
+/** The error line under a field — one type for every field's message (DUP-8, refactor
+ *  audit 2026-10: ChipInput and FileDropzone printed theirs in `text-xs`). */
+export declare const FIELD_ERROR_CLASS = "mt-1 text-caption leading-tight text-danger";
+/**
+ * The message under a field that is wrong, and the wiring that attaches it.
+ *
+ * `invalid` paints the field (`FIELD_INVALID`) and sets `aria-invalid`, and there it
+ * stopped: a field that announces "invalid" and nothing else has told a screen-reader
+ * user only that they are stuck. The message was always on screen — a sibling `<p>`
+ * beside the field — and never in the accessibility tree, because attaching it needs an
+ * id on the message and an `aria-describedby` on the control, and no caller was going to
+ * mint one by hand for every field on a form.
+ *
+ * Two rules the wiring has to keep:
+ *
+ *  - **Merge, never replace.** A field may already point at a hint ("at least twelve
+ *    characters"). Overwriting that reference to say the field is wrong trades one half
+ *    of the answer for the other — and it keeps the half the user has already read. The
+ *    hint stays first: it is the standing advice, the error is the news.
+ *  - **`invalid` keeps working alone**, for the forms whose message lives somewhere else
+ *    entirely (a summary at the top of a dialog). There is nothing to point at then, and
+ *    a dangling id describes the field as nothing at all.
+ *
+ * Deliberately NOT `role="alert"`. `aria-describedby` is read when focus reaches the
+ * control, which is where a field's own error is wanted; an alert would also interrupt
+ * whatever is being read at the time, on every keystroke of a form that re-validates as
+ * you type.
+ *
+ * Every field's since 0.34 (DUP-8, refactor audit 2026-10): it was ui.tsx's own, so the
+ * combobox family restated it as `useComboboxFieldError` — without the fourth argument,
+ * so Autocomplete announced a form library's `aria-invalid` and did not paint it — and
+ * ten fields restated it inline.
+ */
+export declare function useFieldError(error: ReactNode, invalid: boolean | undefined, describedBy: string | undefined, 
+/** The caller's own `aria-invalid`. A form library sets THIS (see `@eifi1/ui-kit/rhf`
+ *  `RhfField`), not our `invalid` prop — and a field that announces invalid should
+ *  look it too. */
+ariaInvalid?: unknown): {
+    isInvalid: boolean;
+    describedBy: string | undefined;
+    errorEl: ReactNode;
+};
 /** The caption under a field, as {@link Select} draws its own. */
-declare function FieldCaption({ parts, className }: {
+export declare function FieldCaption({ parts, className }: {
     parts: FieldHintParts;
     className?: string;
-}): react.JSX.Element | null;
+}): import("react").JSX.Element | null;
 /**
  * Classes that take a static floating label (`FLOATING_LABEL_STATIC`: `FieldLabel`,
  * `ComboboxFieldLabel`) out of its own absolute slot and into a {@link StaticLabelRow}.
@@ -136,7 +196,7 @@ declare function FieldCaption({ parts, className }: {
  * the row. At Large the ROW stands above the field, so the label inside it drops the
  * margin a label above takes alone (`large:mb-0`), and stays level with its "?".
  */
-declare const LABEL_IN_ROW = "static min-w-0 large:mb-0";
+export declare const LABEL_IN_ROW = "static min-w-0 large:mb-0";
 /**
  * A static label and its "?" on one line, in the top strip of a field that lays out its
  * own label — the combobox family, which cannot use {@link FloatingField} because the
@@ -146,22 +206,22 @@ declare const LABEL_IN_ROW = "static min-w-0 large:mb-0";
  * chevron (or the clear "×") takes, so a long label truncates before it rather than
  * putting the "?" on top of the chevron. The hint keeps its width; the label gives way.
  */
-declare function StaticLabelRow({ hint, children }: {
+export declare function StaticLabelRow({ hint, children }: {
     hint: ReactNode;
     children: ReactNode;
-}): react.JSX.Element;
+}): import("react").JSX.Element;
 /**
  * A field with no label line and a FieldHint "?": the hint at the end edge, OUTSIDE the
  * box, as an unlabelled {@link Select} has placed it since 0.15.5. Without a hint the
  * field is returned exactly as it was, so the wrapper costs nothing where it does not
  * apply.
  */
-declare function EndHintRow({ hint, className, children, }: {
+export declare function EndHintRow({ hint, className, children, }: {
     hint: ReactNode | undefined;
     className?: string;
     children: ReactNode;
-}): react.JSX.Element;
-interface LockReason {
+}): import("react").JSX.Element;
+export interface LockReason {
     /** The reason in force — the lock's (with `commit` under a locked
      *  `WriteLockProvider`), else the control's own `disabledReason`. */
     reason: ReactNode;
@@ -175,24 +235,45 @@ interface LockReason {
  * switch, a checkbox or a select that saves on change, a list row whose click writes.
  * The lock's reason wins over the control's own (`useCommitReason`).
  */
-declare function useLockReason(commit: CommitScope | undefined, disabledReason: ReactNode): LockReason;
+export declare function useLockReason(commit: CommitScope | undefined, disabledReason: ReactNode): LockReason;
 /**
- * The kit {@link Tooltip} around a locked control, with a `hidden` copy of the reason for
- * the control's `aria-describedby` — Button's anatomy. The control goes in a FRAGMENT so
- * the Tooltip does not also clone its bubble's id into the description: the hidden copy
- * already describes it, and the same sentence twice would be read on every focus.
+ * A locked control and its reason — the kit's ONE frame for it, used by Button,
+ * IconButton, Chip, Checkbox, Switch and every field that locks (DUP-3, refactor audit
+ * 2026-10: Button's `ReasonFrame` and Chip's `ChipReasonFrame` were copies of it, and
+ * only those two drew the line, so a field locked through `commit` kept its reason in a
+ * tooltip on a phone while the Save beside it said it in words). Where it shows is
+ * {@link DisabledReasonDisplay}'s: by default a LINE under the control at Large and on a
+ * touch screen ({@link DisabledReasonLine}), the kit {@link Tooltip} otherwise.
+ *
+ * A component of its own so only a LOCKED control asks the text size and the pointer;
+ * the hundreds of unlocked controls on a page subscribe to nothing.
+ *
+ * Tooltip form: the control in a FRAGMENT with a `hidden` copy of the reason for its
+ * `aria-describedby`, so the Tooltip does not also clone its bubble's id into the
+ * description — the same sentence twice would be read on every focus. Line form: the
+ * line IS the description (it carries `reasonId`), and no bubble repeats what is on
+ * screen.
  *
  * `className` is the wrapper's, which becomes the outermost element while locked — a
  * control moves its own layout classes here so a lock does not reflow the form.
  */
-declare function LockedReason({ lock, line, className, children, }: {
-    lock: LockReason;
-    /** Draw the reason as a line under the control instead (0.32, §4) — see
-     *  {@link DisabledReasonLine}; the caller decides with {@link useDisabledReasonLine}. */
+export declare function LockedReason({ lock, display, line: lineProp, side, portal, className, lineClassName, children, }: {
+    /** The reason, and the id the control's `aria-describedby` names. */
+    lock: Pick<LockReason, "reason" | "reasonId">;
+    /** Where the reason shows — the control's `disabledReasonDisplay`. Default `"auto"`. */
+    display?: DisabledReasonDisplay;
+    /** The answer of a caller that asked {@link useDisabledReasonLine} for its own layout
+     *  already (Checkbox, Switch); wins over `display`. */
     line?: boolean;
+    /** The bubble's side and portal — IconButton's `tooltipSide` / `tooltipPortal`. */
+    side?: TooltipSide;
+    portal?: boolean;
     className?: string;
+    /** Classes for the line itself — a list row's padding, so the words line up with the
+     *  row's. */
+    lineClassName?: string;
     children: ReactNode;
-}): react.JSX.Element;
+}): import("react").JSX.Element;
 /**
  * Where a control's `disabledReason` is shown (§4 "No fact only in a tooltip"):
  *
@@ -209,7 +290,7 @@ declare function LockedReason({ lock, line, className, children, }: {
  * it on focus; the line IS that description (one copy), the tooltip keeps its hidden
  * copy as before.
  */
-type DisabledReasonDisplay = "auto" | "line" | "tooltip";
+export type DisabledReasonDisplay = "auto" | "line" | "tooltip";
 /**
  * Marks a region where the controls must stay compact at every text size (§4, §10.8):
  * an IconButton keeps its icon alone (its `label` stays the name and the tooltip) and a
@@ -220,19 +301,19 @@ type DisabledReasonDisplay = "auto" | "line" | "tooltip";
  * alone be rare. A dense row's actions belong in `RowActions`, which collapses them
  * into a "⋯" menu at Large instead.
  */
-declare const CompactControlsContext: react.Context<boolean>;
-declare function CompactControls({ children, compact }: {
+export declare const CompactControlsContext: import("react").Context<boolean>;
+export declare function CompactControls({ children, compact }: {
     children: ReactNode;
     compact?: boolean;
-}): react.JSX.Element;
+}): import("react").JSX.Element;
 /** Whether a control's `disabledReason` is drawn as a line here — see
  *  {@link DisabledReasonDisplay}. For the kit's own controls (Button, IconButton, Chip,
  *  ToggleGroup) and an app's control that has a reason to give. */
-declare function useDisabledReasonLine(display?: DisabledReasonDisplay): boolean;
+export declare function useDisabledReasonLine(display?: DisabledReasonDisplay): boolean;
 /** The reason line's type: a field caption's ({@link FIELD_CAPTION_CLASS}), so a locked
  *  control's "why" reads like a field's standing advice. Capped, so a long reason under
  *  a small control wraps rather than widening its row without end. */
-declare const DISABLED_REASON_LINE_CLASS = "mt-1 block max-w-[20rem] text-caption leading-tight text-[var(--text-muted)]";
+export declare const DISABLED_REASON_LINE_CLASS = "mt-1 block max-w-[20rem] text-caption leading-tight text-muted";
 /**
  * A control and its `disabledReason` as a line under it — the `"line"` form of
  * {@link DisabledReasonDisplay}. The wrapper is the flex item now (`className`: the
@@ -240,27 +321,27 @@ declare const DISABLED_REASON_LINE_CLASS = "mt-1 block max-w-[20rem] text-captio
  * width, and a column parent still stretches the wrapper (FormActions' phone stack).
  * The line carries `id`, which the control's `aria-describedby` names.
  */
-declare function DisabledReasonLine({ id, reason, className, children, }: {
+export declare function DisabledReasonLine({ id, reason, className, lineClassName, children, }: {
     id: string;
     reason: ReactNode;
     className?: string;
+    /** Classes for the line itself (0.34) — a list row's padding, so its words start
+     *  where the row's do. */
+    lineClassName?: string;
     children: ReactNode;
-}): react.JSX.Element;
+}): import("react").JSX.Element;
 /**
  * Set by {@link CheckboxGroup}: its legend carries the one required star, so a box
  * inside it keeps the native `required` (a form still refuses an empty set) but draws no
  * star of its own — four stars on four languages would read as four separate demands.
  * ChoiceCardGroup's `InGroupContext`, for the plain checkbox.
  */
-declare const RequiredStarOnLegend: react.Context<boolean>;
-/** `undefined`, `null`, `false` and `""` are what a caller's `cond && "…"` evaluates to
- *  when there is nothing to say; none of them is content. A numeric `0` is. */
-declare function hasContent(node: ReactNode): boolean;
-interface FieldMessages {
+export declare const RequiredStarOnLegend: import("react").Context<boolean>;
+export interface FieldMessages {
     /** `invalid`, a message, or an `aria-invalid` from outside (a form library). */
     isInvalid: boolean;
-    /** The caller's description, then the caption, then the error — the standing
-     *  advice before the news, as `useFieldError` in ui.tsx orders them. */
+    /** The caller's description, then the caption, then a lock's reason, then the error —
+     *  the standing advice before the news, as {@link useFieldError} orders them. */
     describedBy: string | undefined;
     /** The caption and the error, for under the field; `null` when there is neither. */
     below: ReactNode;
@@ -268,26 +349,33 @@ interface FieldMessages {
      *  caption or there is none. */
     labelHint: ReactNode;
 }
-/** `hint` / `error` / `invalid` resolved the way `Select` resolves them. */
-declare function useFieldMessages({ hint: hintProp, error, invalid, describedBy, ariaInvalid, }: {
+/**
+ * `hint` / `error` / `invalid` resolved the way `Select` resolves them —
+ * {@link useFieldHint} and {@link useFieldError} together, for a field that draws what
+ * goes under it in one place (a picker, a group, a field built on another).
+ */
+export declare function useFieldMessages({ hint, error, invalid, describedBy, ariaInvalid, reasonId, }: {
     hint?: ReactNode;
     error?: ReactNode;
     invalid?: boolean;
     describedBy?: string;
     ariaInvalid?: unknown;
+    /** A lock's reason (`useLockReason`'s `reasonId`, while locked): described after the
+     *  caption and before the error, as on Select. */
+    reasonId?: string | false;
 }): FieldMessages;
 /**
- * The field and what is under it, as one box — `FieldGroup` in ui.tsx, for the same
+ * The field and what is under it, as one box — `FieldGroup` in field-base.tsx, for the same
  * reasons written there. Nothing of its own while there is nothing under the field and
  * the caller passed no `error` key (the DOM is exactly what it was before these props);
  * once `error` is passed the box is kept even with no message, so the trigger is never
  * reparented — and remounted, losing focus — as the message comes and goes.
  */
-declare function FieldBox({ below, reserve, children, }: {
+export declare function FieldBox({ below, reserve, children, }: {
     below: ReactNode;
     reserve: boolean;
     children: ReactNode;
-}): react.JSX.Element;
+}): import("react").JSX.Element;
 /**
  * The static label in a trigger field's top strip — a {@link FieldLabel}, or, with a
  * `FieldHint`, the label and its "?" laid out on ONE flex row (dev#468: two absolute
@@ -296,31 +384,36 @@ declare function FieldBox({ below, reserve, children, }: {
  * month triggers keep that column (`pe-9`) for the calendar glyph or the clear ×, and a
  * long label truncates before it rather than putting the "?" on top of it.
  */
-declare function FieldLabelLine({ label, hint }: {
+export declare function FieldLabelLine({ label, hint }: {
     label: ReactNode;
     hint?: ReactNode;
-}): react.JSX.Element;
+}): import("react").JSX.Element;
 /**
- * How tall the strip over a bare group is — the values {@link FieldStrip}'s `pad` takes,
- * public since 0.23 (keksdose G8), so the names say what the CONTENT needs rather than
- * which kit group first needed it (until 0.23 they were `toggle` and `tiles`).
+ * How tall the strip over a bare group is: 20px at Normal, for every group the kit
+ * draws one over — ToggleGroup's `labelPlacement="strip"`, SwatchPicker, IconPicker
+ * and {@link FieldStrip} (whose `pad` named two heights until 0.34).
+ *
+ * The label ROW, not the label, is what has to fit (keksdose dev#593, kk K4, measured in
+ * headless Chromium): it sits `top-1` (4px) and is as tall as the taller of the label
+ * (11px `text-caption` in a `leading-tight` line, 13.75px) and its "?" (a 14px icon,
+ * `size-3.5`) — so it ends 18px down. The strip has to be at least that:
  *
- *  - `"field"` — 16px. keksdose's `ClearedStatusPicker` (live #288 rework, #431,
- *    measured): *"16px of label strip plus a 26px group is exactly a labelled Input"*,
- *    so a status group in a row of 42px fields ends where they end. The label's line
- *    box runs into the group's top hairline, but the ACTIVE fill — the thing feedback
- *    #117 was about — starts at 19px, below the label's 17.75px. For content with a
- *    border and an inset of its own; ToggleGroup's `labelPlacement="strip"`.
- *  - `"clear"` — 20px, keksdose's `FlagPicker` and location field (`pt-5`). A tile has
- *    no inset fill: its selection IS its frame, a 2px dark border-and-ring from the
- *    tile's top edge, so the tile has to start below the whole label line — and so does
- *    anything else with no inset: a map, a row of buttons, a line of text. SwatchPicker,
- *    IconPicker, and FieldStrip's default.
+ *     label row: 4 + max(13.75, 14) = 18   ≤   strip: 20   (2px clear of the content)
+ *
+ * Until 0.34 a 16px strip (`"field"`) stood over the segmented group so that 16 + its
+ * 26px box made a labelled Input's 42px (keksdose's `ClearedStatusPicker`, live #288 /
+ * #431). The label and its "?" then crossed the group's top border by 2px — *"the
+ * question mark even interferes with it"* (at 125 %: label row 424–438, border at 436).
+ * The 4px come out of the group's segments instead (`STRIP_SEGMENT` in
+ * toggle-group.tsx): 20 + 22 = 42. A tile, a map, a row of buttons — content with no
+ * inset — needed the 20px already (keksdose's `FlagPicker` and location field, `pt-5`).
+ *
+ * Every term is rem, so the sum holds at any browser font size. At Large and Extra large
+ * there is no strip: the label row stands above the content, in flow
+ * ({@link LABEL_ABOVE_AT_LARGE}), and the padding goes (`large:pt-0` in
+ * {@link LabelStrip}), so nothing lies under the label to cross.
  */
-declare const LABEL_STRIP_PAD: {
-    readonly field: "pt-4";
-    readonly clear: "pt-5";
-};
+export declare const LABEL_STRIP_PAD = "pt-5";
 /**
  * The 11px label (and its `FieldHint`) over a group that is NOT a field — keksdose K2:
  * a segmented control or a row of swatches standing in a form row beside labelled
@@ -335,14 +428,14 @@ declare const LABEL_STRIP_PAD: {
  * `role="group"` its label names. The kit's own groups pass none, so their wrapper is
  * the bare box it was in 0.22.
  */
-declare function LabelStrip({ labelId, label, hint, disabled, pad, className, children, ...rest }: Omit<ComponentPropsWithoutRef<"div">, "children"> & {
+export declare function LabelStrip({ labelId, label, hint, disabled, className, children, ...rest }: Omit<ComponentPropsWithoutRef<"div">, "children"> & {
     labelId: string;
     label: ReactNode;
+    /** What rides the label line beside the label — a resolved `labelHint`
+     *  ({@link useFieldMessages}), never a raw `hint`: a FieldHint is the caption at Large
+     *  and on touch, and the caller draws that under its group. */
     hint?: ReactNode;
     /** Dim the label with its group, as `peer-disabled:` dims a field's own. */
     disabled?: boolean;
-    pad: keyof typeof LABEL_STRIP_PAD;
     children: ReactNode;
-}): react.JSX.Element;
-
-export { CompactControls, CompactControlsContext, DISABLED_REASON_LINE_CLASS, type DisabledReasonDisplay, DisabledReasonLine, EndHintRow, FIELD_CAPTION_CLASS, FLOATING_LABEL_STATIC, FieldBox, FieldCaption, FieldHint, type FieldHintParts, type FieldHintProps, FieldLabel, FieldLabelLine, type FieldLabelProps, type FieldMessages, LABEL_ABOVE_AT_LARGE, LABEL_ABOVE_BOX, LABEL_IN_ROW, LABEL_STRIP_PAD, LabelStrip, type LockReason, LockedReason, RequiredStarOnLegend, STATIC_LABEL_TYPE, StaticLabelRow, hasContent, isTextHint, useDisabledReasonLine, useFieldHint, useFieldMessages, useInlineHint, useLockReason };
+}): import("react").JSX.Element;