@eifi1/ui-kit 0.22.0 → 0.23.0

package/dist/components/entity-combobox.js

@@ -6,47 +6,64 @@ import { cn } from "../lib/cn.js";
 import { FieldChevron, FieldLabel, FIELD_TRIGGER, FIELD_FLOATING_PAD, FIELD_INVALID } from "./ui.js";
 import {
   ComboboxPanel,
+  endHintRowProps,
+  offersCreate,
   useComboboxCore,
   useComboboxFieldError
 } from "./combobox-core.js";
 import { DEFAULT_COMBOBOX_LABELS, DEFAULT_COMMON_LABELS, useKitLabels } from "../i18n/kit-labels.js";
-import { EndHintRow, FieldCaption, LABEL_IN_ROW, StaticLabelRow, useFieldHint } from "./field-parts.js";
-function EntityCombobox({
-  value,
-  onChange,
-  clearValue = null,
-  options,
-  loadOptions,
-  loading,
-  label,
-  placeholder,
-  searchPlaceholder,
-  emptyLabel,
-  clearable,
-  clearLabel,
-  closeLabel,
-  disabled,
-  onCreate,
-  createLabel,
-  className,
-  invalid,
-  error,
-  hint,
-  filter,
-  minChars,
-  debounceMs,
-  loadErrorLabel,
-  "aria-label": ariaLabel,
-  // The control's own wiring, taken off `rest` so it lands on the TRIGGER rather than
-  // the wrapper — see MultiEntityCombobox: `Field`'s render-prop spreads `{ id,
-  // aria-describedby, aria-invalid, aria-required }`, and on the role-less wrapper
-  // div the label's `htmlFor` named nothing and the hint described nothing.
-  id,
-  "aria-describedby": ariaDescribedBy,
-  "aria-invalid": ariaInvalid,
-  "aria-required": ariaRequired,
-  ...rest
-}) {
+import {
+  EndHintRow,
+  FieldCaption,
+  LABEL_IN_ROW,
+  LockedReason,
+  StaticLabelRow,
+  useFieldHint,
+  useLockReason
+} from "./field-parts.js";
+import { mergeDescribedBy } from "./choice-parts.js";
+import { useCommitReason } from "./write-lock.js";
+function EntityCombobox(props) {
+  const {
+    value,
+    onChange,
+    clearValue = null,
+    options,
+    loadOptions,
+    loading,
+    label,
+    placeholder,
+    searchPlaceholder,
+    emptyLabel,
+    clearable,
+    clearLabel,
+    closeLabel,
+    disabled,
+    disabledReason,
+    commit,
+    onCreate,
+    createLabel,
+    createEmptyLabel,
+    createCommit,
+    className,
+    invalid,
+    error,
+    hint,
+    filter,
+    minChars,
+    debounceMs,
+    loadErrorLabel,
+    "aria-label": ariaLabel,
+    // The control's own wiring, taken off `rest` so it lands on the TRIGGER rather than
+    // the wrapper — see MultiEntityCombobox: `Field`'s render-prop spreads `{ id,
+    // aria-describedby, aria-invalid, aria-required }`, and on the role-less wrapper
+    // div the label's `htmlFor` named nothing and the hint described nothing.
+    id,
+    "aria-describedby": ariaDescribedBy,
+    "aria-invalid": ariaInvalid,
+    "aria-required": ariaRequired,
+    ...rest
+  } = props;
   const core = useComboboxCore({
     options,
     loadOptions,
@@ -69,14 +86,25 @@ function EntityCombobox({
   });
   const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
   const { open, results, resolve, setOpen, rememberOption, query, triggerRef } = core;
+  const lock = useLockReason(commit, disabledReason);
+  const inert = lock.locked || Boolean(disabled);
+  if (lock.locked && open) setOpen(false);
+  const createReason = useCommitReason(createCommit, void 0);
   const listboxId = useId();
   const chosen = value == null || value === clearValue ? null : value;
   const selectedOption = chosen == null ? null : resolve(chosen);
   const q = query.trim();
-  const showCreate = Boolean(onCreate) && q.length > 0 && !results.some((o) => o.label.toLowerCase() === q.toLowerCase());
-  const showClear = Boolean(clearable && chosen != null && !disabled);
+  const showCreate = offersCreate(
+    onCreate,
+    q,
+    results.map((o) => o.label),
+    createEmptyLabel
+  );
+  const showClear = Boolean(clearable && chosen != null && !inert);
   const triggerText = selectedOption?.label ?? placeholder ?? "";
+  const withLock = (trigger) => lock.locked ? /* @__PURE__ */ jsx(LockedReason, { lock, className: "block", children: trigger }) : trigger;
   const choose = (o) => {
+    if (lock.locked) return;
     rememberOption(o);
     onChange(o.value);
     core.closeToTrigger();
@@ -88,78 +116,84 @@ function EntityCombobox({
     // handlers that open the panel cannot be clobbered from outside.
     /* @__PURE__ */ jsxs("div", { ...rest, className: cn("relative", className), children: [
       label !== void 0 && hintParts.labelHint === void 0 && /* @__PURE__ */ jsx(FieldLabel, { children: label }),
-      /* @__PURE__ */ jsx(EndHintRow, { hint: label === void 0 ? hintParts.labelHint : void 0, children: /* @__PURE__ */ jsxs(
-        "button",
-        {
-          ref: triggerRef,
-          id,
-          type: "button",
-          role: "combobox",
-          "aria-expanded": open,
-          "aria-controls": listboxId,
-          "aria-haspopup": "listbox",
-          "aria-label": ariaLabel ?? (typeof label === "string" ? common.fieldValue(label, triggerText) : void 0),
-          disabled,
-          "aria-invalid": field.isInvalid || void 0,
-          "aria-describedby": field.describedBy,
-          "aria-required": ariaRequired,
-          onClick: () => !disabled && setOpen((o) => !o),
-          onKeyDown: (e) => {
-            if (disabled) return;
-            if (e.key === "ArrowDown" || e.key === "ArrowUp") {
-              e.preventDefault();
-              setOpen(true);
-            }
-          },
-          className: cn(
-            FIELD_TRIGGER,
-            "pe-9",
-            label !== void 0 && FIELD_FLOATING_PAD,
-            disabled && "cursor-not-allowed opacity-50",
-            field.isInvalid && FIELD_INVALID
-          ),
-          children: [
-            /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
-              selectedOption?.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: selectedOption.icon }),
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: cn(
-                    "truncate",
-                    // A chosen value is the field's VALUE, so it is set in the same ink an
-                    // <input>'s value is — FIELD_BASE's own text colour, inherited rather
-                    // than restated (Keksdose dev#477). It used to be one notch lighter
-                    // than the typeahead fields beside it, which is visible when a picker
-                    // and a text field share a form row. Nothing selected keeps the
-                    // placeholder tone (`--text-placeholder`), which every field here
-                    // agrees on.
-                    !selectedOption && "text-[var(--text-placeholder)]"
-                  ),
-                  children: selectedOption?.label ?? placeholder ?? ""
-                }
-              )
-            ] }),
-            showClear ? (
-              /* eslint-disable-next-line jsx-a11y/click-events-have-key-events -- tabIndex -1 inside
-                  the trigger <button>, so it never holds focus and a key handler here could
-                  never fire; the keys go to the trigger. A pointer shortcut only. */
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  role: "button",
-                  tabIndex: -1,
-                  "aria-label": labels.clear,
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    onChange(clearValue);
-                  },
-                  className: "absolute end-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-[var(--text-placeholder)] hover:text-[var(--text-secondary)]",
-                  children: /* @__PURE__ */ jsx(X, { className: "size-4" })
-                }
-              )
-            ) : /* @__PURE__ */ jsx(FieldChevron, {})
-          ]
-        }
+      /* @__PURE__ */ jsx(EndHintRow, { ...endHintRowProps("hint" in props, label !== void 0, hintParts.labelHint), children: withLock(
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: triggerRef,
+            id,
+            type: "button",
+            role: "combobox",
+            "aria-expanded": open,
+            "aria-controls": listboxId,
+            "aria-haspopup": "listbox",
+            "aria-label": ariaLabel ?? (typeof label === "string" ? common.fieldValue(label, triggerText) : void 0),
+            disabled: lock.locked ? void 0 : disabled,
+            "aria-disabled": lock.locked || void 0,
+            "aria-invalid": field.isInvalid || void 0,
+            "aria-describedby": mergeDescribedBy(field.describedBy, lock.locked && lock.reasonId),
+            "aria-required": ariaRequired,
+            onClick: () => !inert && setOpen((o) => !o),
+            onKeyDown: (e) => {
+              if (inert) return;
+              if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+                e.preventDefault();
+                setOpen(true);
+              } else if (showClear && !open && (e.key === "Delete" || e.key === "Backspace")) {
+                e.preventDefault();
+                onChange(clearValue);
+              }
+            },
+            className: cn(
+              FIELD_TRIGGER,
+              "pe-9",
+              label !== void 0 && FIELD_FLOATING_PAD,
+              inert && "cursor-not-allowed opacity-50",
+              field.isInvalid && FIELD_INVALID
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
+                selectedOption?.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: selectedOption.icon }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "truncate",
+                      // A chosen value is the field's VALUE, so it is set in the same ink an
+                      // <input>'s value is — FIELD_BASE's own text colour, inherited rather
+                      // than restated (Keksdose dev#477). It used to be one notch lighter
+                      // than the typeahead fields beside it, which is visible when a picker
+                      // and a text field share a form row. Nothing selected keeps the
+                      // placeholder tone (`--text-placeholder`), which every field here
+                      // agrees on.
+                      !selectedOption && "text-[var(--text-placeholder)]"
+                    ),
+                    children: selectedOption?.label ?? placeholder ?? ""
+                  }
+                )
+              ] }),
+              showClear ? (
+                /* eslint-disable-next-line jsx-a11y/click-events-have-key-events -- tabIndex -1 inside
+                    the trigger <button>, so it never holds focus and a key handler here could
+                    never fire; the keys go to the trigger, where Delete and Backspace clear. */
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    role: "button",
+                    tabIndex: -1,
+                    "aria-label": labels.clear,
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      onChange(clearValue);
+                    },
+                    className: "absolute end-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-[var(--text-placeholder)] hover:text-[var(--text-secondary)]",
+                    children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+                  }
+                )
+              ) : /* @__PURE__ */ jsx(FieldChevron, {})
+            ]
+          }
+        )
       ) }),
       label !== void 0 && hintParts.labelHint !== void 0 && /* @__PURE__ */ jsx(StaticLabelRow, { hint: hintParts.labelHint, children: /* @__PURE__ */ jsx(FieldLabel, { className: LABEL_IN_ROW, children: label }) }),
       /* @__PURE__ */ jsx(
@@ -176,10 +210,12 @@ function EntityCombobox({
           onChoose: choose,
           showCreate,
           onCreate: () => {
+            if (lock.locked) return;
             onCreate?.(q);
             core.closeToTrigger();
           },
-          createContent: labels.create(q)
+          createContent: q ? labels.create(q) : createEmptyLabel,
+          createDisabledReason: createReason
         }
       ),
       /* @__PURE__ */ jsx(FieldCaption, { parts: hintParts }),

package/dist/components/entity-combobox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/entity-combobox.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { FieldChevron, FieldLabel, FIELD_TRIGGER, FIELD_FLOATING_PAD, FIELD_INVALID } from \"./ui\";\nimport {\n  ComboboxPanel,\n  useComboboxCore,\n  useComboboxFieldError,\n  type ComboClearValue,\n  type ComboOption,\n} from \"./combobox-core\";\nimport { DEFAULT_COMBOBOX_LABELS, DEFAULT_COMMON_LABELS, useKitLabels } from \"../i18n/kit-labels\";\nimport { EndHintRow, FieldCaption, LABEL_IN_ROW, StaticLabelRow, useFieldHint } from \"./field-parts\";\n\nexport type { ComboClearValue, ComboOption } from \"./combobox-core\";\n\n/** `onChange` is the kit's — \"a selection was made\", carrying values — rather\n *  than the div's form event, so the DOM's spelling of it is omitted. */\nexport interface EntityComboboxProps<V extends string | number, C extends ComboClearValue = null>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /** Selected id; `null`, `undefined` or `clearValue` when nothing is selected. */\n  value: V | C | null | undefined;\n  /** Selecting an option emits its value; the clear button emits `clearValue`. */\n  onChange: (value: V | C) => void;\n  /**\n   * What the clear button emits. Default `null`. Pass `\"\"` for a form whose schema\n   * wants an empty string for \"no choice\" (a zod `z.string()` field), rather than\n   * mapping `null` in every `onChange` — the type of `onChange` follows it, so the\n   * mapping cannot be forgotten on one field and not another. The picker also reads\n   * the value back as empty, so `value=\"\"` shows the placeholder and no \"×\".\n   * See {@link ComboClearValue} for why the choice is closed.\n   */\n  clearValue?: C;\n  /** Already-loaded options (client-side filtered). Also used to resolve the\n   *  trigger label for the current `value`. */\n  options?: ComboOption<V>[];\n  /** Async option source, debounced and called on open + as the query changes\n   *  (at `minChars` and up). Stale responses are ignored; a rejection empties the\n   *  list and says `loadErrorLabel` instead of leaving the last query's rows up. When set, `options` is used only for label\n   *  resolution, not as the result list. */\n  loadOptions?: (query: string) => Promise<ComboOption<V>[]>;\n  /** External loading flag (OR-ed with the internal async state). */\n  loading?: boolean;\n  label?: ReactNode;\n  placeholder?: string;\n  searchPlaceholder?: string;\n  emptyLabel?: string;\n  clearable?: boolean;\n  clearLabel?: string;\n  /** The phone sheet's close button. Its own prop rather than a reuse of\n   *  `clearLabel`: \"clear the selection\" and \"close this screen\" are different\n   *  actions, and on a full-screen sheet the close button is the only way out —\n   *  so it is the one control here that MUST be in the reader's language. */\n  closeLabel?: string;\n  disabled?: boolean;\n  /** When set, a \"create\" row appears for a non-empty query with no exact match. */\n  onCreate?: (query: string) => void;\n  createLabel?: (query: string) => string;\n  /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n  /** What is wrong with the value, as {@link Input}'s `error`: rendered under the\n   *  field, on the trigger's `aria-describedby`, and implies `invalid`. */\n  error?: ReactNode;\n  /**\n   * Standing advice — {@link Combobox}'s `hint`, so the pickers read like every other\n   * field (keksdose K4): plain TEXT is a caption under the field on the trigger's\n   * `aria-describedby`, before any error; a {@link FieldHint} \"?\" rides the label line,\n   * or with no label sits at the trigger's end edge, outside the box.\n   */\n  hint?: ReactNode;\n  /** Narrow `options` client-side by the query. Default `true`; `false` shows them\n   *  as given (a server-ranked list). */\n  filter?: boolean;\n  /** Offer nothing, and call no `loadOptions`, below this many characters. Default\n   *  `0`, i.e. the list loads as the panel opens. */\n  minChars?: number;\n  /** `loadOptions` debounce. Default 150 ms. */\n  debounceMs?: number;\n  /** Shown when `loadOptions` rejects. Default: `combobox.loadError`. */\n  loadErrorLabel?: string;\n}\n\n/**\n * An id-keyed, searchable entity picker: a field-styled trigger showing the\n * selected item's label, and a portalled dropdown of `{label, sublabel, icon}`\n * options — loaded up front via `options` or lazily via `loadOptions`. Built on\n * the shared field/anchor/dismiss/search primitives (no cmdk/Radix). For picking\n * several entities use {@link MultiEntityCombobox}.\n */\nexport function EntityCombobox<V extends string | number, C extends ComboClearValue = null>({\n  value,\n  onChange,\n  clearValue = null as C,\n  options,\n  loadOptions,\n  loading,\n  label,\n  placeholder,\n  searchPlaceholder,\n  emptyLabel,\n  clearable,\n  clearLabel,\n  closeLabel,\n  disabled,\n  onCreate,\n  createLabel,\n  className,\n  invalid,\n  error,\n  hint,\n  filter,\n  minChars,\n  debounceMs,\n  loadErrorLabel,\n  \"aria-label\": ariaLabel,\n  // The control's own wiring, taken off `rest` so it lands on the TRIGGER rather than\n  // the wrapper — see MultiEntityCombobox: `Field`'s render-prop spreads `{ id,\n  // aria-describedby, aria-invalid, aria-required }`, and on the role-less wrapper\n  // div the label's `htmlFor` named nothing and the hint described nothing.\n  id,\n  \"aria-describedby\": ariaDescribedBy,\n  \"aria-invalid\": ariaInvalid,\n  \"aria-required\": ariaRequired,\n  ...rest\n}: EntityComboboxProps<V, C>) {\n  const core = useComboboxCore<V>({\n    options,\n    loadOptions,\n    loading,\n    filter,\n    minChars,\n    debounceMs,\n  });\n  const hintParts = useFieldHint(hint, ariaDescribedBy);\n  const field = useComboboxFieldError(\n    error,\n    invalid || ariaInvalid === true || ariaInvalid === \"true\",\n    hintParts.describedBy,\n  );\n  // The props are the per-instance overrides, the provider the app-wide ones; a\n  // prop left `undefined` falls through to the provider rather than masking it.\n  const labels = useKitLabels(\"combobox\", DEFAULT_COMBOBOX_LABELS, {\n    search: searchPlaceholder,\n    noResults: emptyLabel,\n    clear: clearLabel,\n    create: createLabel,\n  });\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const { open, results, resolve, setOpen, rememberOption, query, triggerRef } = core;\n  // One id per instance, generated here rather than in the core: `aria-controls` on\n  // the trigger has to name the list while the list is still closed, so the id\n  // belongs to whoever renders both ends of it.\n  const listboxId = useId();\n\n  // The clear value is \"nothing selected\" too, whichever one the caller picked.\n  const chosen: V | null = value == null || value === clearValue ? null : (value as V);\n  const selectedOption = chosen == null ? null : resolve(chosen);\n  const q = query.trim();\n  const showCreate =\n    Boolean(onCreate) && q.length > 0 && !results.some((o) => o.label.toLowerCase() === q.toLowerCase());\n  const showClear = Boolean(clearable && chosen != null && !disabled);\n  /** What the closed control is showing — the second half of its accessible name. */\n  const triggerText = selectedOption?.label ?? placeholder ?? \"\";\n\n  const choose = (o: ComboOption<V>) => {\n    rememberOption(o);\n    onChange(o.value);\n    // Back to the trigger, not to <body>: the panel that held focus is about to\n    // unmount, and a keyboard user who just answered this field should be standing\n    // on it, ready to Tab to the next one.\n    core.closeToTrigger();\n  };\n\n  return (\n    // `rest` dresses the wrapper, which has no role; the accessible NAME — and the\n    // id, description, invalid and required state above — go on the trigger, which\n    // has one. Spread FIRST so the trigger's ARIA and the\n    // handlers that open the panel cannot be clobbered from outside.\n    <div {...rest} className={cn(\"relative\", className)}>\n      {label !== undefined && hintParts.labelHint === undefined && <FieldLabel>{label}</FieldLabel>}\n      <EndHintRow hint={label === undefined ? hintParts.labelHint : undefined}>\n        <button\n          ref={triggerRef}\n          id={id}\n          type=\"button\"\n          // A combobox, not a button. The distinction is not pedantry: this control\n          // carried `aria-invalid`, which `button` does not support, so a required\n          // field left empty painted a rose border and told a reader nothing at all —\n          // and ESLint flagged it as exactly that (`role-supports-aria-props`). The\n          // fix the audit asked for is the role that describes what this IS: a closed\n          // choice that expands into the list named below. `combobox` supports\n          // `aria-invalid`, so the border and the announcement finally agree.\n          role=\"combobox\"\n          aria-expanded={open}\n          aria-controls={listboxId}\n          aria-haspopup=\"listbox\"\n          // The label is a floating <span>, not a <label for>, so without this the\n          // trigger's accessible name is whatever value happens to be selected —\n          // \"Checking\" with nothing saying it is the account. The label AND the\n          // value, because `aria-label` replaces the content rather than adding to\n          // it, and a control that announces only its name has lost the answer.\n          // A caller's own name wins over the composition: two fields labelled\n          // \"Account\" on a transfer form are the from and the to, and only the\n          // caller knows which is which.\n          aria-label={\n            ariaLabel ??\n            (typeof label === \"string\" ? common.fieldValue(label, triggerText) : undefined)\n          }\n          disabled={disabled}\n          aria-invalid={field.isInvalid || undefined}\n          aria-describedby={field.describedBy}\n          aria-required={ariaRequired}\n          onClick={() => !disabled && setOpen((o) => !o)}\n          // Down/Up opens the list from the closed trigger, per the APG. Enter and\n          // Space already do it through the button's own click.\n          onKeyDown={(e) => {\n            if (disabled) return;\n            if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\") {\n              e.preventDefault();\n              setOpen(true);\n            }\n          }}\n          className={cn(\n            FIELD_TRIGGER,\n            \"pe-9\",\n            label !== undefined && FIELD_FLOATING_PAD,\n            disabled && \"cursor-not-allowed opacity-50\",\n            field.isInvalid && FIELD_INVALID,\n          )}\n        >\n          <span className=\"flex min-w-0 items-center gap-2\">\n            {selectedOption?.icon && <span className=\"shrink-0\">{selectedOption.icon}</span>}\n            <span\n              className={cn(\n                \"truncate\",\n                // A chosen value is the field's VALUE, so it is set in the same ink an\n                // <input>'s value is — FIELD_BASE's own text colour, inherited rather\n                // than restated (Keksdose dev#477). It used to be one notch lighter\n                // than the typeahead fields beside it, which is visible when a picker\n                // and a text field share a form row. Nothing selected keeps the\n                // placeholder tone (`--text-placeholder`), which every field here\n                // agrees on.\n                !selectedOption && \"text-[var(--text-placeholder)]\",\n              )}\n            >\n              {selectedOption?.label ?? placeholder ?? \"\"}\n            </span>\n          </span>\n          {showClear ? (\n            /* eslint-disable-next-line jsx-a11y/click-events-have-key-events -- tabIndex -1 inside\n                the trigger <button>, so it never holds focus and a key handler here could\n                never fire; the keys go to the trigger. A pointer shortcut only. */\n            <span\n              role=\"button\"\n              tabIndex={-1}\n              aria-label={labels.clear}\n              onClick={(e) => {\n                e.stopPropagation();\n                onChange(clearValue);\n              }}\n              className=\"absolute end-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-[var(--text-placeholder)] hover:text-[var(--text-secondary)]\"\n            >\n              <X className=\"size-4\" />\n            </span>\n          ) : (\n            <FieldChevron />\n          )}\n        </button>\n      </EndHintRow>\n      {/* With a \"?\" the label shares the top strip with it — after the trigger, so the\n          \"?\" follows the control in the tab order, as on Input and Select. */}\n      {label !== undefined && hintParts.labelHint !== undefined && (\n        <StaticLabelRow hint={hintParts.labelHint}>\n          <FieldLabel className={LABEL_IN_ROW}>{label}</FieldLabel>\n        </StaticLabelRow>\n      )}\n      <ComboboxPanel\n        core={core}\n        listboxId={listboxId}\n        // On a phone the panel becomes a full-screen sheet, which needs the field's\n        // own label to say what it is asking for (live #200).\n        sheetTitle={label ?? placeholder}\n        searchPlaceholder={labels.search}\n        emptyLabel={labels.noResults}\n        closeLabel={closeLabel}\n        loadErrorLabel={loadErrorLabel}\n        isSelected={(v) => v === value}\n        onChoose={choose}\n        showCreate={showCreate}\n        onCreate={() => {\n          onCreate?.(q);\n          core.closeToTrigger();\n        }}\n        createContent={labels.create(q)}\n      />\n      <FieldCaption parts={hintParts} />\n      {field.errorEl}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/entity-combobox.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { FieldChevron, FieldLabel, FIELD_TRIGGER, FIELD_FLOATING_PAD, FIELD_INVALID } from \"./ui\";\nimport {\n  ComboboxPanel,\n  endHintRowProps,\n  offersCreate,\n  useComboboxCore,\n  useComboboxFieldError,\n  type ComboClearValue,\n  type ComboOption,\n} from \"./combobox-core\";\nimport { DEFAULT_COMBOBOX_LABELS, DEFAULT_COMMON_LABELS, useKitLabels } from \"../i18n/kit-labels\";\nimport {\n  EndHintRow,\n  FieldCaption,\n  LABEL_IN_ROW,\n  LockedReason,\n  StaticLabelRow,\n  useFieldHint,\n  useLockReason,\n} from \"./field-parts\";\nimport { mergeDescribedBy } from \"./choice-parts\";\nimport { useCommitReason } from \"./write-lock\";\n\nexport type { ComboClearValue, ComboOption } from \"./combobox-core\";\n\n/** `onChange` is the kit's — \"a selection was made\", carrying values — rather\n *  than the div's form event, so the DOM's spelling of it is omitted. */\nexport interface EntityComboboxProps<V extends string | number, C extends ComboClearValue = null>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /** Selected id; `null`, `undefined` or `clearValue` when nothing is selected. */\n  value: V | C | null | undefined;\n  /** Selecting an option emits its value; the clear button emits `clearValue`. */\n  onChange: (value: V | C) => void;\n  /**\n   * What the clear button emits. Default `null`. Pass `\"\"` for a form whose schema\n   * wants an empty string for \"no choice\" (a zod `z.string()` field), rather than\n   * mapping `null` in every `onChange` — the type of `onChange` follows it, so the\n   * mapping cannot be forgotten on one field and not another. The picker also reads\n   * the value back as empty, so `value=\"\"` shows the placeholder and no \"×\".\n   * See {@link ComboClearValue} for why the choice is closed.\n   */\n  clearValue?: C;\n  /** Already-loaded options (client-side filtered). Also used to resolve the\n   *  trigger label for the current `value`. */\n  options?: ComboOption<V>[];\n  /** Async option source, debounced and called on open + as the query changes\n   *  (at `minChars` and up). Stale responses are ignored; a rejection empties the\n   *  list and says `loadErrorLabel` instead of leaving the last query's rows up. When set, `options` is used only for label\n   *  resolution, not as the result list. */\n  loadOptions?: (query: string) => Promise<ComboOption<V>[]>;\n  /** External loading flag (OR-ed with the internal async state). */\n  loading?: boolean;\n  label?: ReactNode;\n  placeholder?: string;\n  searchPlaceholder?: string;\n  emptyLabel?: string;\n  /** Offer a clear \"×\" in place of the chevron while something is chosen; it emits\n   *  `clearValue`. A pointer shortcut inside the trigger, out of the tab order — the\n   *  keyboard's way is Delete or Backspace on the CLOSED trigger (0.23, as\n   *  {@link CountrySelect}). Not offered while `disabled` or locked. */\n  clearable?: boolean;\n  clearLabel?: string;\n  /** The phone sheet's close button. Its own prop rather than a reuse of\n   *  `clearLabel`: \"clear the selection\" and \"close this screen\" are different\n   *  actions, and on a full-screen sheet the close button is the only way out —\n   *  so it is the one control here that MUST be in the reader's language. */\n  closeLabel?: string;\n  disabled?: boolean;\n  /**\n   * Why the choice cannot be changed — {@link Button}'s `disabledReason`, for a picker\n   * that SAVES on change (keksdose G2: the statement's account, where picking IS the\n   * write). The trigger stays focusable and `aria-disabled`, the list does not open,\n   * the clear \"×\" is gone and `onChange` never fires; the reason is in the kit\n   * {@link Tooltip} and on the trigger's `aria-describedby`. Wins over `disabled`.\n   * {@link CountrySelect}'s lock, which is built on the same core.\n   */\n  disabledReason?: ReactNode;\n  /**\n   * This picker COMMITS — choosing saves. Under a locked {@link WriteLockProvider} it is\n   * locked the `disabledReason` way with the lock's reason (which wins over its own).\n   * A picker inside a form with its own Save stays editable under the lock: leave this\n   * off there and put `commit` on the Save. No provider, or an unlocked one: no effect.\n   */\n  commit?: boolean;\n  /** When set, a \"create\" row appears for a non-empty query with no exact match. */\n  onCreate?: (query: string) => void;\n  createLabel?: (query: string) => string;\n  /**\n   * Offer the create row with NOTHING typed too, worded as this — keksdose G9's\n   * \"Create cash account\", which mints a record under a default name and so needs no\n   * query. `onCreate` then receives `\"\"`. Left out, the row needs a query, as before.\n   * See {@link InlineEntityCombobox}'s `createEmptyLabel`.\n   */\n  createEmptyLabel?: string;\n  /**\n   * The create row WRITES (it mints the record on the server) while picking does not.\n   * Under a locked {@link WriteLockProvider} the row stays in the list but cannot be\n   * taken, with the lock's reason as its second line — the picker itself stays live.\n   * keksdose dev#496: on the read-only demo choosing is draft state, minting is not.\n   */\n  createCommit?: boolean;\n  /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n  /** What is wrong with the value, as {@link Input}'s `error`: rendered under the\n   *  field, on the trigger's `aria-describedby`, and implies `invalid`. */\n  error?: ReactNode;\n  /**\n   * Standing advice — {@link Combobox}'s `hint`, so the pickers read like every other\n   * field (keksdose K4): plain TEXT is a caption under the field on the trigger's\n   * `aria-describedby`, before any error; a {@link FieldHint} \"?\" rides the label line,\n   * or with no label sits at the trigger's end edge, outside the box.\n   */\n  hint?: ReactNode;\n  /** Narrow `options` client-side by the query. Default `true`; `false` shows them\n   *  as given (a server-ranked list). */\n  filter?: boolean;\n  /** Offer nothing, and call no `loadOptions`, below this many characters. Default\n   *  `0`, i.e. the list loads as the panel opens. */\n  minChars?: number;\n  /** `loadOptions` debounce. Default 150 ms. */\n  debounceMs?: number;\n  /** Shown when `loadOptions` rejects. Default: `combobox.loadError`. */\n  loadErrorLabel?: string;\n}\n\n/**\n * An id-keyed, searchable entity picker: a field-styled trigger showing the\n * selected item's label, and a portalled dropdown of `{label, sublabel, icon}`\n * options — loaded up front via `options` or lazily via `loadOptions`. Built on\n * the shared field/anchor/dismiss/search primitives (no cmdk/Radix). For picking\n * several entities use {@link MultiEntityCombobox}.\n */\nexport function EntityCombobox<V extends string | number, C extends ComboClearValue = null>(\n  props: EntityComboboxProps<V, C>,\n) {\n  const {\n    value,\n    onChange,\n    clearValue = null as C,\n    options,\n    loadOptions,\n    loading,\n    label,\n    placeholder,\n    searchPlaceholder,\n    emptyLabel,\n    clearable,\n    clearLabel,\n    closeLabel,\n    disabled,\n    disabledReason,\n    commit,\n    onCreate,\n    createLabel,\n    createEmptyLabel,\n    createCommit,\n    className,\n    invalid,\n    error,\n    hint,\n    filter,\n    minChars,\n    debounceMs,\n    loadErrorLabel,\n    \"aria-label\": ariaLabel,\n    // The control's own wiring, taken off `rest` so it lands on the TRIGGER rather than\n    // the wrapper — see MultiEntityCombobox: `Field`'s render-prop spreads `{ id,\n    // aria-describedby, aria-invalid, aria-required }`, and on the role-less wrapper\n    // div the label's `htmlFor` named nothing and the hint described nothing.\n    id,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    \"aria-required\": ariaRequired,\n    ...rest\n  } = props;\n  const core = useComboboxCore<V>({\n    options,\n    loadOptions,\n    loading,\n    filter,\n    minChars,\n    debounceMs,\n  });\n  const hintParts = useFieldHint(hint, ariaDescribedBy);\n  const field = useComboboxFieldError(\n    error,\n    invalid || ariaInvalid === true || ariaInvalid === \"true\",\n    hintParts.describedBy,\n  );\n  // The props are the per-instance overrides, the provider the app-wide ones; a\n  // prop left `undefined` falls through to the provider rather than masking it.\n  const labels = useKitLabels(\"combobox\", DEFAULT_COMBOBOX_LABELS, {\n    search: searchPlaceholder,\n    noResults: emptyLabel,\n    clear: clearLabel,\n    create: createLabel,\n  });\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const { open, results, resolve, setOpen, rememberOption, query, triggerRef } = core;\n  // The lock: this picker's own reason, or the provider's under `commit`.\n  const lock = useLockReason(commit, disabledReason);\n  const inert = lock.locked || Boolean(disabled);\n  // A lock arriving while the list is up closes it — adjusted while\n  // rendering, as the core adjusts its own query, so no frame offers a pick that would\n  // be thrown away.\n  if (lock.locked && open) setOpen(false);\n  // The create row's own lock, for a picker whose choosing is draft and whose create\n  // is the write (`createCommit`).\n  const createReason = useCommitReason(createCommit, undefined);\n  // One id per instance, generated here rather than in the core: `aria-controls` on\n  // the trigger has to name the list while the list is still closed, so the id\n  // belongs to whoever renders both ends of it.\n  const listboxId = useId();\n\n  // The clear value is \"nothing selected\" too, whichever one the caller picked.\n  const chosen: V | null = value == null || value === clearValue ? null : (value as V);\n  const selectedOption = chosen == null ? null : resolve(chosen);\n  const q = query.trim();\n  const showCreate = offersCreate(\n    onCreate,\n    q,\n    results.map((o) => o.label),\n    createEmptyLabel,\n  );\n  const showClear = Boolean(clearable && chosen != null && !inert);\n  /** What the closed control is showing — the second half of its accessible name. */\n  const triggerText = selectedOption?.label ?? placeholder ?? \"\";\n  // While locked the trigger sits in the reason's Tooltip — in a fragment with a hidden\n  // copy of the reason, Button's anatomy — `block` so a full-width field stays full width.\n  const withLock = (trigger: ReactNode) =>\n    lock.locked ? (\n      <LockedReason lock={lock} className=\"block\">\n        {trigger}\n      </LockedReason>\n    ) : (\n      trigger\n    );\n\n  const choose = (o: ComboOption<V>) => {\n    if (lock.locked) return;\n    rememberOption(o);\n    onChange(o.value);\n    // Back to the trigger, not to <body>: the panel that held focus is about to\n    // unmount, and a keyboard user who just answered this field should be standing\n    // on it, ready to Tab to the next one.\n    core.closeToTrigger();\n  };\n\n  return (\n    // `rest` dresses the wrapper, which has no role; the accessible NAME — and the\n    // id, description, invalid and required state above — go on the trigger, which\n    // has one. Spread FIRST so the trigger's ARIA and the\n    // handlers that open the panel cannot be clobbered from outside.\n    <div {...rest} className={cn(\"relative\", className)}>\n      {label !== undefined && hintParts.labelHint === undefined && <FieldLabel>{label}</FieldLabel>}\n      <EndHintRow {...endHintRowProps(\"hint\" in props, label !== undefined, hintParts.labelHint)}>\n        {withLock(\n          <button\n            ref={triggerRef}\n            id={id}\n            type=\"button\"\n            // A combobox, not a button. The distinction is not pedantry: this control\n            // carried `aria-invalid`, which `button` does not support, so a required\n            // field left empty painted a rose border and told a reader nothing at all —\n            // and ESLint flagged it as exactly that (`role-supports-aria-props`). The\n            // fix the audit asked for is the role that describes what this IS: a closed\n            // choice that expands into the list named below. `combobox` supports\n            // `aria-invalid`, so the border and the announcement finally agree.\n            role=\"combobox\"\n            aria-expanded={open}\n            aria-controls={listboxId}\n            aria-haspopup=\"listbox\"\n            // The label is a floating <span>, not a <label for>, so without this the\n            // trigger's accessible name is whatever value happens to be selected —\n            // \"Checking\" with nothing saying it is the account. The label AND the\n            // value, because `aria-label` replaces the content rather than adding to\n            // it, and a control that announces only its name has lost the answer.\n            // A caller's own name wins over the composition: two fields labelled\n            // \"Account\" on a transfer form are the from and the to, and only the\n            // caller knows which is which.\n            aria-label={\n              ariaLabel ??\n              (typeof label === \"string\" ? common.fieldValue(label, triggerText) : undefined)\n            }\n            // The focusable kind of disabled while locked (Button's rule): a native\n            // `disabled` would take the field out of the tab order, and the reason with it.\n            disabled={lock.locked ? undefined : disabled}\n            aria-disabled={lock.locked || undefined}\n            aria-invalid={field.isInvalid || undefined}\n            aria-describedby={mergeDescribedBy(field.describedBy, lock.locked && lock.reasonId)}\n            aria-required={ariaRequired}\n            onClick={() => !inert && setOpen((o) => !o)}\n            // Down/Up opens the list from the closed trigger, per the APG. Enter and\n            // Space already do it through the button's own click.\n            onKeyDown={(e) => {\n              if (inert) return;\n              if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\") {\n                e.preventDefault();\n                setOpen(true);\n              } else if (showClear && !open && (e.key === \"Delete\" || e.key === \"Backspace\")) {\n                // The keyboard's clear: the \"×\" is a pointer shortcut out of the tab\n                // order, so without this a cleared-by-mouse field was set-only from the\n                // keyboard. The closed trigger only — CountrySelect's rule (0.23).\n                e.preventDefault();\n                onChange(clearValue);\n              }\n            }}\n            className={cn(\n              FIELD_TRIGGER,\n              \"pe-9\",\n              label !== undefined && FIELD_FLOATING_PAD,\n              inert && \"cursor-not-allowed opacity-50\",\n              field.isInvalid && FIELD_INVALID,\n            )}\n          >\n            <span className=\"flex min-w-0 items-center gap-2\">\n              {selectedOption?.icon && <span className=\"shrink-0\">{selectedOption.icon}</span>}\n              <span\n                className={cn(\n                  \"truncate\",\n                  // A chosen value is the field's VALUE, so it is set in the same ink an\n                  // <input>'s value is — FIELD_BASE's own text colour, inherited rather\n                  // than restated (Keksdose dev#477). It used to be one notch lighter\n                  // than the typeahead fields beside it, which is visible when a picker\n                  // and a text field share a form row. Nothing selected keeps the\n                  // placeholder tone (`--text-placeholder`), which every field here\n                  // agrees on.\n                  !selectedOption && \"text-[var(--text-placeholder)]\",\n                )}\n              >\n                {selectedOption?.label ?? placeholder ?? \"\"}\n              </span>\n            </span>\n            {showClear ? (\n              /* eslint-disable-next-line jsx-a11y/click-events-have-key-events -- tabIndex -1 inside\n                  the trigger <button>, so it never holds focus and a key handler here could\n                  never fire; the keys go to the trigger, where Delete and Backspace clear. */\n              <span\n                role=\"button\"\n                tabIndex={-1}\n                aria-label={labels.clear}\n                onClick={(e) => {\n                  e.stopPropagation();\n                  onChange(clearValue);\n                }}\n                className=\"absolute end-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-[var(--text-placeholder)] hover:text-[var(--text-secondary)]\"\n              >\n                <X className=\"size-4\" />\n              </span>\n            ) : (\n              <FieldChevron />\n            )}\n          </button>,\n        )}\n      </EndHintRow>\n      {/* With a \"?\" the label shares the top strip with it — after the trigger, so the\n          \"?\" follows the control in the tab order, as on Input and Select. */}\n      {label !== undefined && hintParts.labelHint !== undefined && (\n        <StaticLabelRow hint={hintParts.labelHint}>\n          <FieldLabel className={LABEL_IN_ROW}>{label}</FieldLabel>\n        </StaticLabelRow>\n      )}\n      <ComboboxPanel\n        core={core}\n        listboxId={listboxId}\n        // On a phone the panel becomes a full-screen sheet, which needs the field's\n        // own label to say what it is asking for (live #200).\n        sheetTitle={label ?? placeholder}\n        searchPlaceholder={labels.search}\n        emptyLabel={labels.noResults}\n        closeLabel={closeLabel}\n        loadErrorLabel={loadErrorLabel}\n        isSelected={(v) => v === value}\n        onChoose={choose}\n        showCreate={showCreate}\n        onCreate={() => {\n          if (lock.locked) return;\n          onCreate?.(q);\n          core.closeToTrigger();\n        }}\n        createContent={q ? labels.create(q) : createEmptyLabel}\n        createDisabledReason={createReason}\n      />\n      <FieldCaption parts={hintParts} />\n      {field.errorEl}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/facing-pair.d.ts

@@ -6,7 +6,13 @@ import './series-chart-labels.js';
 import './toggle-legend.js';
 import './series-chart-ticks.js';
 import './series-chart-budget.js';
-import '../kit-labels-R8mIAc9N.js';
+import '../feedback-BxeQVzwq.js';
+import '../feedback-attachment-fGAzZPf0.js';
+import '../feedback/feedback-inbox.js';
+import 'lucide-react';
+import './tooltip.js';
+import '../hooks/use-anchored-rect.js';
+import '../lib/clipping.js';
 import '../data-table-labels-B7OdnM0S.js';
 import './data-table-sort.js';
 import './swipeable-row.js';
@@ -14,11 +20,7 @@ import './mini-calendar.js';
 import './calendar-heatmap.js';
 import './popover.js';
 import './chip.js';
-import 'lucide-react';
 import './field-sync.js';
-import './tooltip.js';
-import '../hooks/use-anchored-rect.js';
-import '../lib/clipping.js';
 import '../wizard/types.js';
 import '../tour/tour.js';
 import '../search/command-palette.js';
@@ -38,9 +40,6 @@ import './dialog-frame.js';
 import './modal.js';
 import '../hooks/use-search-param-state.js';
 import './measured-grid.js';
-import '../feedback-attachment-NhUm7Zga.js';
-import '../feedback/feedback-thread.js';
-import '../feedback/feedback-inbox.js';
 import './account-settings-labels.js';
 import './floating-panel.js';
 import './bulk-action-bar.js';
@@ -70,6 +69,10 @@ import './inline-edit-field.js';
 import '../lib/iban.js';
 import '../lib/phone.js';
 import './sign-chip.js';
+import './column-mapper.js';
+import '../lib/column-mapping.js';
+import '../lib/table-text.js';
+import './field-parts.js';
 
 /** Which chart of a facing pair. Physical, like the axes: charts do not mirror in RTL. */
 type FacingSide = "left" | "right";

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

@@ -1,13 +1,32 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { ReactNode, ComponentPropsWithoutRef } from 'react';
 
 /**
- * Small pieces the fields share for the 0.22.0 anatomy round (keksdose K3/K4, kastlan
- * 8). Private to the package — not re-exported from the barrel — like `choice-parts`.
+ * 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.
  *
- * Nothing here imports `ui.tsx`: `ui.tsx` imports this, and so do the combobox family
- * and the native choice controls, which is the point of keeping the rules in one place.
+ * 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,
+ * the pickers and the native choice controls — the lint's no-cycle rule holds it.
+ */
+declare const STATIC_LABEL_TYPE = "text-[11px] leading-tight text-[var(--text-muted)] peer-disabled:opacity-50";
+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"> {
+    children: ReactNode;
+}
+declare function FieldLabel({ children, className, ...rest }: FieldLabelProps): react.JSX.Element;
 /**
  * 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).
@@ -110,5 +129,96 @@ declare function LockedReason({ lock, className, children, }: {
  * 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 {
+    /** `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. */
+    describedBy: string | undefined;
+    /** The caption and the error, for under the field; `null` when there is neither. */
+    below: ReactNode;
+    /** The hint for the LABEL line (a `FieldHint`), or `undefined` when the hint is a
+     *  caption or there is none. */
+    labelHint: ReactNode;
+}
+/** `hint` / `error` / `invalid` resolved the way `Select` resolves them. */
+declare function useFieldMessages({ hint, error, invalid, describedBy, ariaInvalid, }: {
+    hint?: ReactNode;
+    error?: ReactNode;
+    invalid?: boolean;
+    describedBy?: string;
+    ariaInvalid?: unknown;
+}): FieldMessages;
+/**
+ * The field and what is under it, as one box — `FieldGroup` in ui.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, }: {
+    below: ReactNode;
+    reserve: boolean;
+    children: ReactNode;
+}): 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
+ * offsets guessing at the same baseline put the "?" three pixels above its word).
+ * `FloatingField`'s static-label row, except that it stops at `end-9`: the date and
+ * 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 }: {
+    label: ReactNode;
+    hint?: ReactNode;
+}): 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`).
+ *
+ *  - `"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.
+ */
+declare const LABEL_STRIP_PAD: {
+    readonly field: "pt-4";
+    readonly clear: "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
+ * inputs, whose label must sit on the same line as theirs (`top-1`, `inset-x-3`, the
+ * type of a field's static label) without the group growing a field's border round
+ * it. `id` goes on the label so the group can be `aria-labelledby` it.
+ *
+ * `relative` is load-bearing twice over: the row is positioned against it, and a
+ * caller's `sr-only` label cannot escape it (sr-only-containment).
+ *
+ * Any other attribute (`rest`) lands on the wrapper — {@link FieldStrip} makes it the
+ * `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"> & {
+    labelId: string;
+    label: ReactNode;
+    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 { EndHintRow, FIELD_CAPTION_CLASS, FieldCaption, type FieldHintParts, LABEL_IN_ROW, type LockReason, LockedReason, RequiredStarOnLegend, StaticLabelRow, isTextHint, useFieldHint, useLockReason };
+export { EndHintRow, FIELD_CAPTION_CLASS, FLOATING_LABEL_STATIC, FieldBox, FieldCaption, type FieldHintParts, FieldLabel, FieldLabelLine, type FieldLabelProps, type FieldMessages, LABEL_IN_ROW, LABEL_STRIP_PAD, LabelStrip, type LockReason, LockedReason, RequiredStarOnLegend, STATIC_LABEL_TYPE, StaticLabelRow, hasContent, isTextHint, useFieldHint, useFieldMessages, useLockReason };