@eifi1/ui-kit 0.20.1 → 0.22.0

package/dist/components/entity-combobox.d.ts

@@ -50,6 +50,13 @@ interface EntityComboboxProps<V extends string | number, C extends ComboClearVal
     /** What is wrong with the value, as {@link Input}'s `error`: rendered under the
      *  field, on the trigger's `aria-describedby`, and implies `invalid`. */
     error?: ReactNode;
+    /**
+     * Standing advice — {@link Combobox}'s `hint`, so the pickers read like every other
+     * field (keksdose K4): plain TEXT is a caption under the field on the trigger's
+     * `aria-describedby`, before any error; a {@link FieldHint} "?" rides the label line,
+     * or with no label sits at the trigger's end edge, outside the box.
+     */
+    hint?: ReactNode;
     /** Narrow `options` client-side by the query. Default `true`; `false` shows them
      *  as given (a server-ranked list). */
     filter?: boolean;
@@ -68,6 +75,6 @@ interface EntityComboboxProps<V extends string | number, C extends ComboClearVal
  * the shared field/anchor/dismiss/search primitives (no cmdk/Radix). For picking
  * several entities use {@link MultiEntityCombobox}.
  */
-declare function EntityCombobox<V extends string | number, C extends ComboClearValue = null>({ value, onChange, clearValue, options, loadOptions, loading, label, placeholder, searchPlaceholder, emptyLabel, clearable, clearLabel, closeLabel, disabled, onCreate, createLabel, className, invalid, error, filter, minChars, debounceMs, loadErrorLabel, "aria-label": ariaLabel, id, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, ...rest }: EntityComboboxProps<V, C>): react.JSX.Element;
+declare function EntityCombobox<V extends string | number, C extends ComboClearValue = null>({ value, onChange, clearValue, options, loadOptions, loading, label, placeholder, searchPlaceholder, emptyLabel, clearable, clearLabel, closeLabel, disabled, onCreate, createLabel, className, invalid, error, hint, filter, minChars, debounceMs, loadErrorLabel, "aria-label": ariaLabel, id, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, ...rest }: EntityComboboxProps<V, C>): react.JSX.Element;
 
 export { ComboClearValue, ComboOption, EntityCombobox, type EntityComboboxProps };

package/dist/components/entity-combobox.js

@@ -10,6 +10,7 @@ import {
   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,
@@ -30,6 +31,7 @@ function EntityCombobox({
   className,
   invalid,
   error,
+  hint,
   filter,
   minChars,
   debounceMs,
@@ -53,10 +55,11 @@ function EntityCombobox({
     minChars,
     debounceMs
   });
+  const hintParts = useFieldHint(hint, ariaDescribedBy);
   const field = useComboboxFieldError(
     error,
     invalid || ariaInvalid === true || ariaInvalid === "true",
-    ariaDescribedBy
+    hintParts.describedBy
   );
   const labels = useKitLabels("combobox", DEFAULT_COMBOBOX_LABELS, {
     search: searchPlaceholder,
@@ -84,8 +87,8 @@ function EntityCombobox({
     // has one. Spread FIRST so the trigger's ARIA and the
     // handlers that open the panel cannot be clobbered from outside.
     /* @__PURE__ */ jsxs("div", { ...rest, className: cn("relative", className), children: [
-      label !== void 0 && /* @__PURE__ */ jsx(FieldLabel, { children: label }),
-      /* @__PURE__ */ jsxs(
+      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,
@@ -157,7 +160,8 @@ function EntityCombobox({
             ) : /* @__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(
         ComboboxPanel,
         {
@@ -178,6 +182,7 @@ function EntityCombobox({
           createContent: labels.create(q)
         }
       ),
+      /* @__PURE__ */ jsx(FieldCaption, { parts: hintParts }),
       field.errorEl
     ] })
   );

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\";\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  /** 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  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 field = useComboboxFieldError(\n    error,\n    invalid || ariaInvalid === true || ariaInvalid === \"true\",\n    ariaDescribedBy,\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 && <FieldLabel>{label}</FieldLabel>}\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      <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      {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  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":[]}

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

@@ -6,8 +6,10 @@ import './series-chart-labels.js';
 import './toggle-legend.js';
 import './series-chart-ticks.js';
 import './series-chart-budget.js';
-import '../kit-labels-D1J2_jyD.js';
-import './data-table-labels.js';
+import '../kit-labels-R8mIAc9N.js';
+import '../data-table-labels-B7OdnM0S.js';
+import './data-table-sort.js';
+import './swipeable-row.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
 import './popover.js';
@@ -29,7 +31,6 @@ import './sparkline.js';
 import './stat-tile.js';
 import './signature-pad.js';
 import './password-strength.js';
-import './danger-confirm.js';
 import './swatch-picker.js';
 import './tile-radio.js';
 import './icon-picker.js';
@@ -37,11 +38,10 @@ import './dialog-frame.js';
 import './modal.js';
 import '../hooks/use-search-param-state.js';
 import './measured-grid.js';
-import '../feedback-attachment-WFiXJ8We.js';
+import '../feedback-attachment-NhUm7Zga.js';
 import '../feedback/feedback-thread.js';
 import '../feedback/feedback-inbox.js';
 import './account-settings-labels.js';
-import './confirm-dialog.js';
 import './floating-panel.js';
 import './bulk-action-bar.js';
 import './list.js';
@@ -60,14 +60,16 @@ import './write-lock.js';
 import './legal.js';
 import './account-chips.js';
 import '../lib/format.js';
-import '../data-table-3mi2R3so.js';
-import './data-table-sort.js';
-import './swipeable-row.js';
 import './reauth-dialog.js';
 import './server-wake.js';
 import '../lib/server-wake.js';
 import './translation-review-labels.js';
 import '../lib/translation-review.js';
+import './country-select.js';
+import './inline-edit-field.js';
+import '../lib/iban.js';
+import '../lib/phone.js';
+import './sign-chip.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-anatomy.d.ts

@@ -0,0 +1,95 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/** `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;
+/**
+ * A `hint` that is plain TEXT is a caption under the field; anything else (a
+ * `FieldHint` "?") rides the label line — the rule `Select` set in 0.15: the label
+ * line is 11px of strip shared with the label, and a sentence placed there was set on
+ * top of both the label and the value.
+ */
+declare function isTextHint(hint: 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.
+ *
+ *  - `"toggle"` — 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.
+ *  - `"tiles"` — 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.
+ */
+declare const LABEL_STRIP_PAD: {
+    readonly toggle: "pt-4";
+    readonly tiles: "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).
+ */
+declare function LabelStrip({ labelId, label, hint, disabled, pad, className, 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;
+    className?: string;
+    children: ReactNode;
+}): react.JSX.Element;
+
+export { FieldBox, FieldLabelLine, type FieldMessages, LABEL_STRIP_PAD, LabelStrip, hasContent, isTextHint, useFieldMessages };

package/dist/components/field-anatomy.js

@@ -0,0 +1,84 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { cn } from "../lib/cn.js";
+import { FieldLabel } from "./ui.js";
+function hasContent(node) {
+  return node !== void 0 && node !== null && node !== false && node !== "";
+}
+function isTextHint(hint) {
+  return typeof hint === "string" && hint !== "" || typeof hint === "number";
+}
+const FIELD_CAPTION_CLASS = "mt-1 text-[11px] leading-tight text-[var(--text-muted)]";
+const FIELD_ERROR_CLASS = "mt-1 text-[11px] leading-tight text-[var(--danger)]";
+function useFieldMessages({
+  hint,
+  error,
+  invalid,
+  describedBy,
+  ariaInvalid
+}) {
+  const hintId = useId();
+  const errorId = useId();
+  const textHint = isTextHint(hint);
+  const hasError = hasContent(error);
+  return {
+    isInvalid: Boolean(invalid) || hasError || ariaInvalid === true || ariaInvalid === "true",
+    describedBy: [describedBy, textHint && hintId, hasError && errorId].filter(Boolean).join(" ") || void 0,
+    below: textHint || hasError ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      textHint && /* @__PURE__ */ jsx("p", { id: hintId, className: FIELD_CAPTION_CLASS, children: hint }),
+      hasError && /* @__PURE__ */ jsx("p", { id: errorId, className: FIELD_ERROR_CLASS, children: error })
+    ] }) : null,
+    labelHint: !textHint && hasContent(hint) ? hint : void 0
+  };
+}
+function FieldBox({
+  below,
+  reserve,
+  children
+}) {
+  if (below === null && !reserve) return /* @__PURE__ */ jsx(Fragment, { children });
+  return /* @__PURE__ */ jsxs("div", { children: [
+    children,
+    below
+  ] });
+}
+function FieldLabelLine({ label, hint }) {
+  if (!hasContent(hint)) return /* @__PURE__ */ jsx(FieldLabel, { children: label });
+  return (
+    // `z-10` as FieldLabel has it: the trigger after it is `relative` and would paint
+    // over the row (and take the "?"'s hover) otherwise.
+    /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute start-3 end-9 top-1 z-10 flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx(FieldLabel, { className: "static min-w-0 max-w-full", children: label }),
+      /* @__PURE__ */ jsx("span", { className: "pointer-events-auto flex shrink-0 items-center", children: hint })
+    ] })
+  );
+}
+const LABEL_STRIP_PAD = { toggle: "pt-4", tiles: "pt-5" };
+function LabelStrip({
+  labelId,
+  label,
+  hint,
+  disabled,
+  pad,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative min-w-0", LABEL_STRIP_PAD[pad], className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute inset-x-3 top-1 flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx(FieldLabel, { id: labelId, className: cn("static min-w-0 max-w-full", disabled && "opacity-50"), children: label }),
+      hasContent(hint) && /* @__PURE__ */ jsx("span", { className: "pointer-events-auto flex shrink-0 items-center", children: hint })
+    ] }),
+    children
+  ] });
+}
+export {
+  FieldBox,
+  FieldLabelLine,
+  LABEL_STRIP_PAD,
+  LabelStrip,
+  hasContent,
+  isTextHint,
+  useFieldMessages
+};
+//# sourceMappingURL=field-anatomy.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/field-anatomy.tsx"],"sourcesContent":["// Internal — not re-exported from the barrel. The pieces of a field's anatomy (its\n// label line, the caption and the error under it, the label STRIP over a bare group)\n// for the controls that are not built on `FloatingField`: the date and month pickers,\n// whose trigger is a button in a wrapper of their own, and the groups (ToggleGroup,\n// SwatchPicker, IconPicker), which have no field box at all.\n//\n// `Input` and `Select` keep their own copies in ui.tsx; these follow them class for\n// class, so a DatePicker's caption and a Select's caption are the same 11px line in\n// the same place (keksdose K4: \"uniform field anatomy … today it is a patchwork\").\n\nimport { useId } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { FieldLabel } from \"./ui\";\n\n/** `undefined`, `null`, `false` and `\"\"` are what a caller's `cond && \"…\"` evaluates to\n *  when there is nothing to say; none of them is content. A numeric `0` is. */\nexport function hasContent(node: ReactNode): boolean {\n  return node !== undefined && node !== null && node !== false && node !== \"\";\n}\n\n/**\n * A `hint` that is plain TEXT is a caption under the field; anything else (a\n * `FieldHint` \"?\") rides the label line — the rule `Select` set in 0.15: the label\n * line is 11px of strip shared with the label, and a sentence placed there was set on\n * top of both the label and the value.\n */\nexport function isTextHint(hint: ReactNode): boolean {\n  return (typeof hint === \"string\" && hint !== \"\") || typeof hint === \"number\";\n}\n\nconst FIELD_CAPTION_CLASS = \"mt-1 text-[11px] leading-tight text-[var(--text-muted)]\";\nconst FIELD_ERROR_CLASS = \"mt-1 text-[11px] leading-tight text-[var(--danger)]\";\n\nexport interface FieldMessages {\n  /** `invalid`, a message, or an `aria-invalid` from outside (a form library). */\n  isInvalid: boolean;\n  /** The caller's description, then the caption, then the error — the standing\n   *  advice before the news, as `useFieldError` in ui.tsx orders them. */\n  describedBy: string | undefined;\n  /** The caption and the error, for under the field; `null` when there is neither. */\n  below: ReactNode;\n  /** The hint for the LABEL line (a `FieldHint`), or `undefined` when the hint is a\n   *  caption or there is none. */\n  labelHint: ReactNode;\n}\n\n/** `hint` / `error` / `invalid` resolved the way `Select` resolves them. */\nexport function useFieldMessages({\n  hint,\n  error,\n  invalid,\n  describedBy,\n  ariaInvalid,\n}: {\n  hint?: ReactNode;\n  error?: ReactNode;\n  invalid?: boolean;\n  describedBy?: string;\n  ariaInvalid?: unknown;\n}): FieldMessages {\n  const hintId = useId();\n  const errorId = useId();\n  const textHint = isTextHint(hint);\n  const hasError = hasContent(error);\n  return {\n    isInvalid: Boolean(invalid) || hasError || ariaInvalid === true || ariaInvalid === \"true\",\n    describedBy:\n      [describedBy, textHint && hintId, hasError && errorId].filter(Boolean).join(\" \") || undefined,\n    below:\n      textHint || hasError ? (\n        <>\n          {textHint && (\n            <p id={hintId} className={FIELD_CAPTION_CLASS}>\n              {hint}\n            </p>\n          )}\n          {hasError && (\n            <p id={errorId} className={FIELD_ERROR_CLASS}>\n              {error}\n            </p>\n          )}\n        </>\n      ) : null,\n    labelHint: !textHint && hasContent(hint) ? hint : undefined,\n  };\n}\n\n/**\n * The field and what is under it, as one box — `FieldGroup` in ui.tsx, for the same\n * reasons written there. Nothing of its own while there is nothing under the field and\n * the caller passed no `error` key (the DOM is exactly what it was before these props);\n * once `error` is passed the box is kept even with no message, so the trigger is never\n * reparented — and remounted, losing focus — as the message comes and goes.\n */\nexport function FieldBox({\n  below,\n  reserve,\n  children,\n}: {\n  below: ReactNode;\n  reserve: boolean;\n  children: ReactNode;\n}) {\n  if (below === null && !reserve) return <>{children}</>;\n  return (\n    <div>\n      {children}\n      {below}\n    </div>\n  );\n}\n\n/**\n * The static label in a trigger field's top strip — a {@link FieldLabel}, or, with a\n * `FieldHint`, the label and its \"?\" laid out on ONE flex row (dev#468: two absolute\n * offsets guessing at the same baseline put the \"?\" three pixels above its word).\n * `FloatingField`'s static-label row, except that it stops at `end-9`: the date and\n * month triggers keep that column (`pe-9`) for the calendar glyph or the clear ×, and a\n * long label truncates before it rather than putting the \"?\" on top of it.\n */\nexport function FieldLabelLine({ label, hint }: { label: ReactNode; hint?: ReactNode }) {\n  if (!hasContent(hint)) return <FieldLabel>{label}</FieldLabel>;\n  return (\n    // `z-10` as FieldLabel has it: the trigger after it is `relative` and would paint\n    // over the row (and take the \"?\"'s hover) otherwise.\n    <div className=\"pointer-events-none absolute start-3 end-9 top-1 z-10 flex items-center gap-1\">\n      <FieldLabel className=\"static min-w-0 max-w-full\">{label}</FieldLabel>\n      <span className=\"pointer-events-auto flex shrink-0 items-center\">{hint}</span>\n    </div>\n  );\n}\n\n/**\n * How tall the strip over a bare group is.\n *\n *  - `\"toggle\"` — 16px. keksdose's `ClearedStatusPicker` (live #288 rework, #431,\n *    measured): *\"16px of label strip plus a 26px group is exactly a labelled Input\"*,\n *    so a status group in a row of 42px fields ends where they end. The label's line\n *    box runs into the group's top hairline, but the ACTIVE fill — the thing feedback\n *    #117 was about — starts at 19px, below the label's 17.75px.\n *  - `\"tiles\"` — 20px, keksdose's `FlagPicker` and location field (`pt-5`). A tile has\n *    no inset fill: its selection IS its frame, a 2px dark border-and-ring from the\n *    tile's top edge, so the tile has to start below the whole label line.\n */\nexport const LABEL_STRIP_PAD = { toggle: \"pt-4\", tiles: \"pt-5\" } as const;\n\n/**\n * The 11px label (and its `FieldHint`) over a group that is NOT a field — keksdose K2:\n * a segmented control or a row of swatches standing in a form row beside labelled\n * inputs, whose label must sit on the same line as theirs (`top-1`, `inset-x-3`, the\n * type of a field's static label) without the group growing a field's border round\n * it. `id` goes on the label so the group can be `aria-labelledby` it.\n *\n * `relative` is load-bearing twice over: the row is positioned against it, and a\n * caller's `sr-only` label cannot escape it (sr-only-containment).\n */\nexport function LabelStrip({\n  labelId,\n  label,\n  hint,\n  disabled,\n  pad,\n  className,\n  children,\n}: {\n  labelId: string;\n  label: ReactNode;\n  hint?: ReactNode;\n  /** Dim the label with its group, as `peer-disabled:` dims a field's own. */\n  disabled?: boolean;\n  pad: keyof typeof LABEL_STRIP_PAD;\n  className?: string;\n  children: ReactNode;\n}) {\n  return (\n    <div className={cn(\"relative min-w-0\", LABEL_STRIP_PAD[pad], className)}>\n      <div className=\"pointer-events-none absolute inset-x-3 top-1 flex items-center gap-1\">\n        {/* `static`: FieldLabel positions itself absolutely; here the ROW is\n            positioned, so the label and its \"?\" are centred on one line by the flex\n            layout (dev#468). */}\n        <FieldLabel id={labelId} className={cn(\"static min-w-0 max-w-full\", disabled && \"opacity-50\")}>\n          {label}\n        </FieldLabel>\n        {hasContent(hint) && <span className=\"pointer-events-auto flex shrink-0 items-center\">{hint}</span>}\n      </div>\n      {children}\n    </div>\n  );\n}\n"],"mappings":";AAuEQ,mBAEI,KAFJ;AA7DR,SAAS,aAAa;AAEtB,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAIpB,SAAS,WAAW,MAA0B;AACnD,SAAO,SAAS,UAAa,SAAS,QAAQ,SAAS,SAAS,SAAS;AAC3E;AAQO,SAAS,WAAW,MAA0B;AACnD,SAAQ,OAAO,SAAS,YAAY,SAAS,MAAO,OAAO,SAAS;AACtE;AAEA,MAAM,sBAAsB;AAC5B,MAAM,oBAAoB;AAgBnB,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMkB;AAChB,QAAM,SAAS,MAAM;AACrB,QAAM,UAAU,MAAM;AACtB,QAAM,WAAW,WAAW,IAAI;AAChC,QAAM,WAAW,WAAW,KAAK;AACjC,SAAO;AAAA,IACL,WAAW,QAAQ,OAAO,KAAK,YAAY,gBAAgB,QAAQ,gBAAgB;AAAA,IACnF,aACE,CAAC,aAAa,YAAY,QAAQ,YAAY,OAAO,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,KAAK;AAAA,IACtF,OACE,YAAY,WACV,iCACG;AAAA,kBACC,oBAAC,OAAE,IAAI,QAAQ,WAAW,qBACvB,gBACH;AAAA,MAED,YACC,oBAAC,OAAE,IAAI,SAAS,WAAW,mBACxB,iBACH;AAAA,OAEJ,IACE;AAAA,IACN,WAAW,CAAC,YAAY,WAAW,IAAI,IAAI,OAAO;AAAA,EACpD;AACF;AASO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,MAAI,UAAU,QAAQ,CAAC,QAAS,QAAO,gCAAG,UAAS;AACnD,SACE,qBAAC,SACE;AAAA;AAAA,IACA;AAAA,KACH;AAEJ;AAUO,SAAS,eAAe,EAAE,OAAO,KAAK,GAA2C;AACtF,MAAI,CAAC,WAAW,IAAI,EAAG,QAAO,oBAAC,cAAY,iBAAM;AACjD;AAAA;AAAA;AAAA,IAGE,qBAAC,SAAI,WAAU,iFACb;AAAA,0BAAC,cAAW,WAAU,6BAA6B,iBAAM;AAAA,MACzD,oBAAC,UAAK,WAAU,kDAAkD,gBAAK;AAAA,OACzE;AAAA;AAEJ;AAcO,MAAM,kBAAkB,EAAE,QAAQ,QAAQ,OAAO,OAAO;AAYxD,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GASG;AACD,SACE,qBAAC,SAAI,WAAW,GAAG,oBAAoB,gBAAgB,GAAG,GAAG,SAAS,GACpE;AAAA,yBAAC,SAAI,WAAU,wEAIb;AAAA,0BAAC,cAAW,IAAI,SAAS,WAAW,GAAG,6BAA6B,YAAY,YAAY,GACzF,iBACH;AAAA,MACC,WAAW,IAAI,KAAK,oBAAC,UAAK,WAAU,kDAAkD,gBAAK;AAAA,OAC9F;AAAA,IACC;AAAA,KACH;AAEJ;","names":[]}

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

@@ -0,0 +1,114 @@
+import * as react from 'react';
+import { ReactNode } 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`.
+ *
+ * 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.
+ */
+/**
+ * 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).
+ *
+ * The rule {@link Select} and `NumberInput` already keep: the label line is 11px of
+ * strip shared with the label, and a sentence placed there ran over the label and into
+ * 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;
+/** 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-[11px] leading-tight text-[var(--text-muted)]";
+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;
+    /** The caption's id while there is one. */
+    captionId: string | undefined;
+    /** The caption itself, or `undefined` for a hint that is not text. */
+    captionText: string | number | undefined;
+    /** A non-text hint (a FieldHint) for the label line — or, on a field with no label
+     *  line, the end edge outside the box. `undefined` when there is none. */
+    labelHint: ReactNode | undefined;
+}
+/**
+ * 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(hint: ReactNode, describedBy: string | undefined): FieldHintParts;
+/** The caption under a field, as {@link Select} draws its own. */
+declare function FieldCaption({ parts, className }: {
+    parts: FieldHintParts;
+    className?: string;
+}): 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}.
+ * `static` wins over `absolute` through `cn`'s merge; `min-w-0` lets it truncate in
+ * the row.
+ */
+declare const LABEL_IN_ROW = "static min-w-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
+ * trigger, the anchored panel and the label hang off a box of their own.
+ *
+ * FloatingField's static row, with one difference: it stops at `end-9`, the column the
+ * 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 }: {
+    hint: ReactNode;
+    children: ReactNode;
+}): 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, }: {
+    hint: ReactNode | undefined;
+    className?: string;
+    children: ReactNode;
+}): react.JSX.Element;
+interface LockReason {
+    /** The reason in force — the lock's (with `commit` under a locked
+     *  `WriteLockProvider`), else the control's own `disabledReason`. */
+    reason: ReactNode;
+    /** There is a reason: the control is locked the focusable way. */
+    locked: boolean;
+    /** The id of the reason's hidden copy, for the control's `aria-describedby`. */
+    reasonId: string;
+}
+/**
+ * {@link Button}'s `commit` + `disabledReason`, for a control that IS its own commit — a
+ * 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: boolean | 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.
+ *
+ * `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, className, children, }: {
+    lock: LockReason;
+    className?: string;
+    children: ReactNode;
+}): 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>;
+
+export { EndHintRow, FIELD_CAPTION_CLASS, FieldCaption, type FieldHintParts, LABEL_IN_ROW, type LockReason, LockedReason, RequiredStarOnLegend, StaticLabelRow, isTextHint, useFieldHint, useLockReason };

package/dist/components/field-parts.js

@@ -0,0 +1,72 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useId } from "react";
+import { cn } from "../lib/cn.js";
+import { Tooltip } from "./tooltip.js";
+import { useCommitReason } from "./write-lock.js";
+import { hasMessage, mergeDescribedBy } from "./choice-parts.js";
+function isTextHint(hint) {
+  return typeof hint === "string" && hint !== "" || typeof hint === "number";
+}
+const FIELD_CAPTION_CLASS = "mt-1 text-[11px] leading-tight text-[var(--text-muted)]";
+function useFieldHint(hint, describedBy) {
+  const captionId = useId();
+  const text = isTextHint(hint);
+  return {
+    describedBy: text ? mergeDescribedBy(describedBy, captionId) : describedBy,
+    captionId: text ? captionId : void 0,
+    captionText: text ? hint : void 0,
+    labelHint: !text && hasMessage(hint) ? hint : void 0
+  };
+}
+function FieldCaption({ parts, className }) {
+  if (parts.captionText === void 0) return null;
+  return /* @__PURE__ */ jsx("p", { id: parts.captionId, className: cn(FIELD_CAPTION_CLASS, className), children: parts.captionText });
+}
+const LABEL_IN_ROW = "static min-w-0";
+function StaticLabelRow({ hint, children }) {
+  return /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute start-3 end-9 top-1 z-10 flex items-center gap-1", children: [
+    children,
+    /* @__PURE__ */ jsx("span", { className: "pointer-events-auto flex shrink-0 items-center", children: hint })
+  ] });
+}
+function EndHintRow({
+  hint,
+  className,
+  children
+}) {
+  if (hint === void 0) return /* @__PURE__ */ jsx(Fragment, { children });
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-1.5", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children }),
+    /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", children: hint })
+  ] });
+}
+function useLockReason(commit, disabledReason) {
+  const reason = useCommitReason(commit, disabledReason);
+  const reasonId = useId();
+  return { reason, locked: hasMessage(reason), reasonId };
+}
+function LockedReason({
+  lock,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsx(Tooltip, { label: lock.reason, className, children: /* @__PURE__ */ jsxs(Fragment, { children: [
+    children,
+    /* @__PURE__ */ jsx("span", { id: lock.reasonId, hidden: true, children: lock.reason })
+  ] }) });
+}
+const RequiredStarOnLegend = createContext(false);
+export {
+  EndHintRow,
+  FIELD_CAPTION_CLASS,
+  FieldCaption,
+  LABEL_IN_ROW,
+  LockedReason,
+  RequiredStarOnLegend,
+  StaticLabelRow,
+  isTextHint,
+  useFieldHint,
+  useLockReason
+};
+//# sourceMappingURL=field-parts.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/field-parts.tsx"],"sourcesContent":["import { createContext, useId } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { Tooltip } from \"./tooltip\";\nimport { useCommitReason } from \"./write-lock\";\nimport { hasMessage, mergeDescribedBy } from \"./choice-parts\";\n\n/**\n * Small pieces the fields share for the 0.22.0 anatomy round (keksdose K3/K4, kastlan\n * 8). Private to the package — not re-exported from the barrel — like `choice-parts`.\n *\n * Nothing here imports `ui.tsx`: `ui.tsx` imports this, and so do the combobox family\n * and the native choice controls, which is the point of keeping the rules in one place.\n */\n\n/* ── hint ─────────────────────────────────────────────────────────────────── */\n\n/**\n * Whether a `hint` is a CAPTION (plain text: a non-empty string or a number) or\n * something for the label line (a {@link FieldHint} \"?\", or any other node).\n *\n * The rule {@link Select} and `NumberInput` already keep: the label line is 11px of\n * strip shared with the label, and a sentence placed there ran over the label and into\n * the value; a \"?\" under the field would be a button floating free of the label it\n * explains.\n */\nexport function isTextHint(hint: ReactNode): hint is string | number {\n  return (typeof hint === \"string\" && hint !== \"\") || typeof hint === \"number\";\n}\n\n/** The caption under a field — Select's and NumberInput's type, so every field's\n *  standing advice reads alike. */\nexport const FIELD_CAPTION_CLASS = \"mt-1 text-[11px] leading-tight text-[var(--text-muted)]\";\n\nexport interface FieldHintParts {\n  /** The caller's `aria-describedby` with the caption's id appended — standing\n   *  advice first; the error (the news) is appended after this by the field. */\n  describedBy: string | undefined;\n  /** The caption's id while there is one. */\n  captionId: string | undefined;\n  /** The caption itself, or `undefined` for a hint that is not text. */\n  captionText: string | number | undefined;\n  /** A non-text hint (a FieldHint) for the label line — or, on a field with no label\n   *  line, the end edge outside the box. `undefined` when there is none. */\n  labelHint: ReactNode | undefined;\n}\n\n/**\n * Split a field's `hint` into the caption under it (attached with `aria-describedby`)\n * or the \"?\" on its label line. See {@link isTextHint}.\n */\nexport function useFieldHint(hint: ReactNode, describedBy: string | undefined): FieldHintParts {\n  const captionId = useId();\n  const text = isTextHint(hint);\n  return {\n    describedBy: text ? mergeDescribedBy(describedBy, captionId) : describedBy,\n    captionId: text ? captionId : undefined,\n    captionText: text ? hint : undefined,\n    labelHint: !text && hasMessage(hint) ? hint : undefined,\n  };\n}\n\n/** The caption under a field, as {@link Select} draws its own. */\nexport function FieldCaption({ parts, className }: { parts: FieldHintParts; className?: string }) {\n  if (parts.captionText === undefined) return null;\n  return (\n    <p id={parts.captionId} className={cn(FIELD_CAPTION_CLASS, className)}>\n      {parts.captionText}\n    </p>\n  );\n}\n\n/**\n * Classes that take a static floating label (`FLOATING_LABEL_STATIC`: `FieldLabel`,\n * `ComboboxFieldLabel`) out of its own absolute slot and into a {@link StaticLabelRow}.\n * `static` wins over `absolute` through `cn`'s merge; `min-w-0` lets it truncate in\n * the row.\n */\nexport const LABEL_IN_ROW = \"static min-w-0\";\n\n/**\n * A static label and its \"?\" on one line, in the top strip of a field that lays out its\n * own label — the combobox family, which cannot use {@link FloatingField} because the\n * trigger, the anchored panel and the label hang off a box of their own.\n *\n * FloatingField's static row, with one difference: it stops at `end-9`, the column the\n * chevron (or the clear \"×\") takes, so a long label truncates before it rather than\n * putting the \"?\" on top of the chevron. The hint keeps its width; the label gives way.\n */\nexport function StaticLabelRow({ hint, children }: { hint: ReactNode; children: ReactNode }) {\n  return (\n    <div className=\"pointer-events-none absolute start-3 end-9 top-1 z-10 flex items-center gap-1\">\n      {children}\n      <span className=\"pointer-events-auto flex shrink-0 items-center\">{hint}</span>\n    </div>\n  );\n}\n\n/**\n * A field with no label line and a FieldHint \"?\": the hint at the end edge, OUTSIDE the\n * box, as an unlabelled {@link Select} has placed it since 0.15.5. Without a hint the\n * field is returned exactly as it was, so the wrapper costs nothing where it does not\n * apply.\n */\nexport function EndHintRow({\n  hint,\n  className,\n  children,\n}: {\n  hint: ReactNode | undefined;\n  className?: string;\n  children: ReactNode;\n}) {\n  if (hint === undefined) return <>{children}</>;\n  return (\n    <div className={cn(\"flex items-center gap-1.5\", className)}>\n      <div className=\"min-w-0 flex-1\">{children}</div>\n      <span className=\"flex shrink-0 items-center\">{hint}</span>\n    </div>\n  );\n}\n\n/* ── the write lock on a control that saves itself (keksdose K3) ───────────── */\n\nexport interface LockReason {\n  /** The reason in force — the lock's (with `commit` under a locked\n   *  `WriteLockProvider`), else the control's own `disabledReason`. */\n  reason: ReactNode;\n  /** There is a reason: the control is locked the focusable way. */\n  locked: boolean;\n  /** The id of the reason's hidden copy, for the control's `aria-describedby`. */\n  reasonId: string;\n}\n\n/**\n * {@link Button}'s `commit` + `disabledReason`, for a control that IS its own commit — a\n * switch, a checkbox or a select that saves on change, a list row whose click writes.\n * The lock's reason wins over the control's own (`useCommitReason`).\n */\nexport function useLockReason(commit: boolean | undefined, disabledReason: ReactNode): LockReason {\n  const reason = useCommitReason(commit, disabledReason);\n  const reasonId = useId();\n  return { reason, locked: hasMessage(reason), reasonId };\n}\n\n/**\n * The kit {@link Tooltip} around a locked control, with a `hidden` copy of the reason for\n * the control's `aria-describedby` — Button's anatomy. The control goes in a FRAGMENT so\n * the Tooltip does not also clone its bubble's id into the description: the hidden copy\n * already describes it, and the same sentence twice would be read on every focus.\n *\n * `className` is the wrapper's, which becomes the outermost element while locked — a\n * control moves its own layout classes here so a lock does not reflow the form.\n */\nexport function LockedReason({\n  lock,\n  className,\n  children,\n}: {\n  lock: LockReason;\n  className?: string;\n  children: ReactNode;\n}) {\n  return (\n    <Tooltip label={lock.reason} className={className}>\n      <>\n        {children}\n        <span id={lock.reasonId} hidden>\n          {lock.reason}\n        </span>\n      </>\n    </Tooltip>\n  );\n}\n\n/* ── groups ───────────────────────────────────────────────────────────────── */\n\n/**\n * Set by {@link CheckboxGroup}: its legend carries the one required star, so a box\n * inside it keeps the native `required` (a form still refuses an empty set) but draws no\n * star of its own — four stars on four languages would read as four separate demands.\n * ChoiceCardGroup's `InGroupContext`, for the plain checkbox.\n */\nexport const RequiredStarOnLegend = createContext(false);\n"],"mappings":";AAkEI,SA+C6B,UA/C7B,KAyBA,YAzBA;AAlEJ,SAAS,eAAe,aAAa;AAErC,SAAS,UAAU;AACnB,SAAS,eAAe;AACxB,SAAS,uBAAuB;AAChC,SAAS,YAAY,wBAAwB;AAqBtC,SAAS,WAAW,MAA0C;AACnE,SAAQ,OAAO,SAAS,YAAY,SAAS,MAAO,OAAO,SAAS;AACtE;AAIO,MAAM,sBAAsB;AAmB5B,SAAS,aAAa,MAAiB,aAAiD;AAC7F,QAAM,YAAY,MAAM;AACxB,QAAM,OAAO,WAAW,IAAI;AAC5B,SAAO;AAAA,IACL,aAAa,OAAO,iBAAiB,aAAa,SAAS,IAAI;AAAA,IAC/D,WAAW,OAAO,YAAY;AAAA,IAC9B,aAAa,OAAO,OAAO;AAAA,IAC3B,WAAW,CAAC,QAAQ,WAAW,IAAI,IAAI,OAAO;AAAA,EAChD;AACF;AAGO,SAAS,aAAa,EAAE,OAAO,UAAU,GAAkD;AAChG,MAAI,MAAM,gBAAgB,OAAW,QAAO;AAC5C,SACE,oBAAC,OAAE,IAAI,MAAM,WAAW,WAAW,GAAG,qBAAqB,SAAS,GACjE,gBAAM,aACT;AAEJ;AAQO,MAAM,eAAe;AAWrB,SAAS,eAAe,EAAE,MAAM,SAAS,GAA6C;AAC3F,SACE,qBAAC,SAAI,WAAU,iFACZ;AAAA;AAAA,IACD,oBAAC,UAAK,WAAU,kDAAkD,gBAAK;AAAA,KACzE;AAEJ;AAQO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,MAAI,SAAS,OAAW,QAAO,gCAAG,UAAS;AAC3C,SACE,qBAAC,SAAI,WAAW,GAAG,6BAA6B,SAAS,GACvD;AAAA,wBAAC,SAAI,WAAU,kBAAkB,UAAS;AAAA,IAC1C,oBAAC,UAAK,WAAU,8BAA8B,gBAAK;AAAA,KACrD;AAEJ;AAmBO,SAAS,cAAc,QAA6B,gBAAuC;AAChG,QAAM,SAAS,gBAAgB,QAAQ,cAAc;AACrD,QAAM,WAAW,MAAM;AACvB,SAAO,EAAE,QAAQ,QAAQ,WAAW,MAAM,GAAG,SAAS;AACxD;AAWO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,SACE,oBAAC,WAAQ,OAAO,KAAK,QAAQ,WAC3B,2CACG;AAAA;AAAA,IACD,oBAAC,UAAK,IAAI,KAAK,UAAU,QAAM,MAC5B,eAAK,QACR;AAAA,KACF,GACF;AAEJ;AAUO,MAAM,uBAAuB,cAAc,KAAK;","names":[]}