@eifi1/ui-kit 0.22.0 → 0.24.0

package/src/shell/topbar-action-menu.tsx

@@ -1,4 +1,4 @@
-import { useLayoutEffect, useRef } from "react";
+import { useId, useLayoutEffect, useRef } from "react";
 import type { KeyboardEvent as ReactKeyboardEvent, ReactNode } from "react";
 import { Link } from "react-router";
 import { cn } from "../lib/cn";
@@ -11,9 +11,9 @@ import { TOPBAR_TRIGGER_CLASS } from "./topbar-controls";
 
 /**
  * One row of a {@link TopBarActionMenu}. An `action` (default) runs `onSelect`, a
- * `link` navigates via react-router, and a `divider` draws a rule. Non-divider
- * rows close the menu automatically when chosen. `kind` may be omitted for
- * actions, keeping the common case terse.
+ * `link` navigates via react-router, a `divider` draws a rule, and a `heading` names
+ * the rows after it. Action and link rows close the menu automatically when chosen.
+ * `kind` may be omitted for actions, keeping the common case terse.
  *
  * The rows are {@link MenuItem}s, so they take its options: `tone: "danger"` for the
  * log-out row, `checked` (+ `checkable`) for a choice, `current` for the link to the
@@ -46,7 +46,67 @@ export type TopBarMenuEntry =
       current?: boolean;
       disabled?: boolean;
     }
-  | { kind: "divider"; key: string };
+  | { kind: "divider"; key: string }
+  | {
+      /**
+       * A group heading (0.23, keksdose's guided-tours menu): the rows after it, up to
+       * the next heading, the next `divider` or the end of `entries`, are ONE group
+       * named by `label`. keksdose files its tours by topic and separated the blocks
+       * with bare dividers — "the kit's menu has no heading row to name them with"
+       * (tour-menu.tsx) — so a sighted reader had to guess what each block was and a
+       * screen reader was told nothing at all.
+       *
+       * Not a row: it takes no focus, the arrow keys (and Home/End) pass over it, and it
+       * never closes the menu. It is announced the way the kit's other grouped lists
+       * announce theirs (`CommandPalette`): the group's rows sit in a `role="group"`
+       * whose `aria-labelledby` is this heading, so a reader says "On this page, group"
+       * when the focus enters the first row, and nothing between rows.
+       *
+       * A divider ENDS the group, so a closing row such as "All tours…" behind a rule
+       * belongs to no topic. A heading with no rows under it is not drawn — an empty
+       * group names nothing; build the list from data and it may well be empty.
+       *
+       * The menu-wide `heading` prop is the panel's title, drawn once above everything;
+       * with group headings it is usually redundant (two stacked caps lines read as one),
+       * and the trigger's `ariaLabel` already names the menu.
+       */
+      kind: "heading";
+      key: string;
+      /** The group's name, shown above its rows and announced as the group's name. Keep
+       *  it short: it is set in small caps and wraps on a narrow panel. */
+      label: ReactNode;
+    };
+
+type HeadingEntry = Extract<TopBarMenuEntry, { kind: "heading" }>;
+type DividerEntry = Extract<TopBarMenuEntry, { kind: "divider" }>;
+type RowEntry = Exclude<TopBarMenuEntry, HeadingEntry | DividerEntry>;
+
+/** What the panel draws from `entries`: loose rows and rules, and headed groups. */
+type Block = { kind: "loose"; entry: RowEntry | DividerEntry } | { kind: "group"; heading: HeadingEntry; rows: RowEntry[] };
+
+/**
+ * Cut `entries` into blocks: a heading opens a group that takes the rows after it until
+ * the next heading or divider; everything else stands alone, as it always has.
+ */
+function toBlocks(entries: readonly TopBarMenuEntry[]): Block[] {
+  const blocks: Block[] = [];
+  let group: Extract<Block, { kind: "group" }> | null = null;
+  for (const entry of entries) {
+    if (entry.kind === "heading") {
+      group = { kind: "group", heading: entry, rows: [] };
+      blocks.push(group);
+    } else if (entry.kind === "divider") {
+      group = null;
+      blocks.push({ kind: "loose", entry });
+    } else if (group) {
+      group.rows.push(entry);
+    } else {
+      blocks.push({ kind: "loose", entry });
+    }
+  }
+  // A heading with nothing under it names nothing: not drawn (see the `heading` kind).
+  return blocks.filter((block) => block.kind === "loose" || block.rows.length > 0);
+}
 
 /**
  * The non-interactive identity block at the top of an account menu — kastlan's name +
@@ -130,6 +190,11 @@ function keepTabInsidePanel(e: ReactKeyboardEvent<HTMLUListElement>) {
  * It is also the ACCOUNT menu kastlan and keksdose each hand-build on `HoverMenu`: a
  * custom `trigger` (the avatar), a `header` (name + role / email), the rows, and a
  * free-content `footer` (the legal links).
+ *
+ * A long menu is grouped by topic with `{ kind: "heading" }` entries (0.23) — see
+ * {@link TopBarMenuEntry}. There is no separate phone layout: the panel is the same
+ * hover panel at 390px, kept inside the viewport by `HoverMenu`, and a heading wraps
+ * rather than widening it.
  */
 export function TopBarActionMenu({
   icon,
@@ -206,6 +271,10 @@ export function TopBarActionMenu({
   align?: "start" | "end" | "left" | "right";
   panelClassName?: string;
 }) {
+  // Names the groups' headings for `aria-labelledby`. Positional rather than from the
+  // entry's `key`, which is the caller's text and may hold a space — and a space in
+  // `aria-labelledby` is a list separator.
+  const uid = useId();
   return (
     <HoverMenu
       ariaLabel={ariaLabel}
@@ -258,6 +327,40 @@ export function TopBarActionMenu({
         const headerExtra = typeof header?.extra === "function" ? header.extra(close) : header?.extra;
         const footerClass =
           "flex flex-wrap gap-x-3 gap-y-1 text-xs text-[var(--text-muted)] [&_a:hover]:text-[var(--text-primary)] [&_a]:rounded-sm [&_a:focus-visible]:outline-none [&_a:focus-visible]:ring-2 [&_a:focus-visible]:ring-[var(--brand)]";
+        /** One action or link row — loose, or inside a heading's group. */
+        const row = (entry: RowEntry) => (
+          <li key={entry.key}>
+            {entry.kind === "link" ? (
+              <MenuItem
+                href={entry.to}
+                renderLink={({ href, ...p }) => <Link to={href} {...p} />}
+                onClick={close}
+                leading={entry.icon}
+                trailing={entry.trailing}
+                tone={entry.tone}
+                current={entry.current}
+                disabled={entry.disabled}
+              >
+                {entry.label}
+              </MenuItem>
+            ) : (
+              <MenuItem
+                onClick={() => {
+                  entry.onSelect();
+                  close();
+                }}
+                leading={entry.icon}
+                trailing={entry.trailing}
+                tone={entry.tone}
+                checked={entry.checked}
+                checkable={entry.checkable}
+                disabled={entry.disabled}
+              >
+                {entry.label}
+              </MenuItem>
+            )}
+          </li>
+        );
         return (
           // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- a Tab bubbling up from a row or footer link, see keepTabInsidePanel
           <ul className={cn("py-1", panelClassName)} onKeyDown={keepTabInsidePanel}>
@@ -275,41 +378,34 @@ export function TopBarActionMenu({
                 {heading}
               </li>
             )}
-            {entries.map((entry) => {
-              if (entry.kind === "divider") {
-                return <li key={entry.key} className="my-1 border-t border-[var(--border)]" />;
+            {toBlocks(entries).map((block, i, blocks) => {
+              if (block.kind === "loose") {
+                const entry = block.entry;
+                if (entry.kind === "divider") {
+                  return <li key={entry.key} className="my-1 border-t border-[var(--border)]" />;
+                }
+                return row(entry);
               }
+              const headingId = `${uid}-group-${i}`;
+              const before = blocks[i - 1];
+              // Under a rule (or at the top of the rows) the rule's margin is the gap;
+              // straight under another group's last row the heading makes its own.
+              const tight = !before || (before.kind === "loose" && before.entry.kind === "divider");
               return (
-                <li key={entry.key}>
-                  {entry.kind === "link" ? (
-                    <MenuItem
-                      href={entry.to}
-                      renderLink={({ href, ...p }) => <Link to={href} {...p} />}
-                      onClick={close}
-                      leading={entry.icon}
-                      trailing={entry.trailing}
-                      tone={entry.tone}
-                      current={entry.current}
-                      disabled={entry.disabled}
-                    >
-                      {entry.label}
-                    </MenuItem>
-                  ) : (
-                    <MenuItem
-                      onClick={() => {
-                        entry.onSelect();
-                        close();
-                      }}
-                      leading={entry.icon}
-                      trailing={entry.trailing}
-                      tone={entry.tone}
-                      checked={entry.checked}
-                      checkable={entry.checkable}
-                      disabled={entry.disabled}
-                    >
-                      {entry.label}
-                    </MenuItem>
-                  )}
+                <li key={block.heading.key} role="none">
+                  <div
+                    id={headingId}
+                    role="presentation"
+                    className={cn(
+                      "px-3 pb-0.5 text-[11px] font-semibold uppercase tracking-wide text-[var(--text-muted)] [overflow-wrap:anywhere]",
+                      tight ? "pt-1" : "pt-2.5",
+                    )}
+                  >
+                    {block.heading.label}
+                  </div>
+                  <ul role="group" aria-labelledby={headingId}>
+                    {block.rows.map(row)}
+                  </ul>
                 </li>
               );
             })}

package/src/wizard/stepper-nav.tsx

@@ -31,7 +31,7 @@ import type { UseWizardReturn, WizardLabels } from "./types";
  * `isCommitStep`), so the policy options — `cancellable`, `onExit`, `commits`,
  * `onDone` — are all set on `useWizard`. What is set HERE is how the Finish button
  * looks and what wraps it, because that is presentation and usually depends on
- * state the app holds (a "replace everything" toggle, a write lock).
+ * state the app holds (a "replace everything" toggle, a write lock — `finishCommit`).
  */
 export function StepperNav<TData extends Record<string, unknown>>({
   wizard,
@@ -42,6 +42,8 @@ export function StepperNav<TData extends Record<string, unknown>>({
   labels,
   finishVariant = "brand",
   finishDisabled = false,
+  finishCommit,
+  finishDisabledReason,
   doneDisabled = false,
   renderFinish,
 }: {
@@ -57,6 +59,30 @@ export function StepperNav<TData extends Record<string, unknown>>({
   /** Disable Finish for a reason of the app's own, on top of the kit's gates
    *  (`canFinish`, submitting, validating). */
   finishDisabled?: boolean;
+  /**
+   * Finish COMMITS — {@link Button}'s `commit`, handed to the Finish button. Under a
+   * locked {@link WriteLockProvider} it is `aria-disabled` but focusable, with the lock's
+   * reason in the kit Tooltip, and a click (or Enter) does not run `wizard.finish`.
+   * Every other button of the bar stays live: the steps before the commit write nothing,
+   * so the whole wizard can still be walked through on a read-only page.
+   *
+   * keksdose G1: its YNAB import runs the mapping wizard on the read-only demo (dev#497)
+   * and locks only the confirm step's Finish — by cloning `commit` into the element
+   * `renderFinish` hands it, because StepperNav took no `commit` of its own. That clone
+   * still works; this is the same thing without one. Named `finishCommit` beside
+   * `finishVariant` / `finishDisabled` rather than a bare `commit`, which on a component
+   * with five buttons would not say which one saves — and would read like `useWizard`'s
+   * `commits`, which is a step's policy, not a lock.
+   */
+  finishCommit?: boolean;
+  /**
+   * Why Finish is not available — {@link Button}'s `disabledReason` on the Finish button:
+   * `aria-disabled` and focusable, the reason in the kit Tooltip and on the button's
+   * `aria-describedby`, `wizard.finish` not run. The explained form of `finishDisabled`
+   * (a native `disabled` takes the button out of the tab order, so its reason never
+   * reaches a keyboard). Under a lock with `finishCommit`, the lock's reason wins.
+   */
+  finishDisabledReason?: ReactNode;
   /**
    * Disable Done — the button of the last step after a commit — while the step still
    * has work of its own running. keksdose's YNAB import ends on a recurring step whose
@@ -82,6 +108,10 @@ export function StepperNav<TData extends Record<string, unknown>>({
    * re-derive (the problem this component exists to end); `onBeforeFinish` can veto
    * a click but cannot explain a disabled button. The element is a plain `<Button>`,
    * so a wrapper that clones it with `disabled` works as expected.
+   *
+   * For the write lock itself there is no need to wrap any more: `finishCommit` (and
+   * `finishDisabledReason`) put the kit Button's own Tooltip on Finish. An element
+   * cloned with `commit` here keeps working the same way.
    */
   renderFinish?: (button: ReactElement) => ReactNode;
 }) {
@@ -134,6 +164,10 @@ export function StepperNav<TData extends Record<string, unknown>>({
         variant={finishVariant}
         data-tour="wizard-finish"
         onClick={wizard.finish}
+        // The kit Button's lock: a reason (its own or, with `commit`, the provider's)
+        // wins over `disabled` and keeps the button reachable, saying why.
+        commit={finishCommit}
+        disabledReason={finishDisabledReason}
         disabled={wizard.isSubmitting || pending || !canFinish || finishDisabled}
         aria-busy={wizard.isSubmitting || pending || undefined}
       >

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

@@ -1,95 +0,0 @@
-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

@@ -1,84 +0,0 @@
-"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

@@ -1 +0,0 @@
-{"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":[]}