@eifi1/ui-kit 0.53.0 → 0.55.0

package/src/components/full-bleed-dialog.tsx

@@ -1,294 +0,0 @@
-import { useId, useMemo, useRef } from "react";
-import { createPortal } from "react-dom";
-import type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode, Ref } from "react";
-import { X } from "lucide-react";
-
-import { cn } from "../lib/cn";
-import { mergeRefs } from "./field-parts";
-import { useBackdropClose } from "./modal";
-import { useBodyScrollLock } from "../hooks/use-body-scroll-lock";
-import { useOverlayHistory } from "../hooks/use-overlay-history";
-import { useCloseTransition } from "../hooks/use-close-transition";
-import { useFocusTrap } from "../hooks/use-focus-trap";
-import { runOwnKeyDown, takeEscape, useDismissLayer } from "../hooks/use-dismiss";
-
-/**
- * The padding around the dialog's scrolling body, as a CSS length (0.32,
- * docs/text-size-harmonization.md §10.11). Exported because a caller's sticky footer has
- * to reach across it: Chrome resolves a sticky offset against the scrollport's CONTENT
- * box, so a pinned row sits this far short of the panel's edge unless it cancels it
- * (keksdose's editor footer). In rem, so it grows with the text size — keksdose's px
- * copy (`SCROLLER_GUTTER_PX = 12`) was 3–6 px off at 125/150 %. Use it in `calc()`:
- * `bottom: calc(${inset}px - ${DIALOG_GUTTER})`.
- */
-export const DIALOG_GUTTER = "0.75rem";
-
-/**
- * Named and exported, because `ComponentProps<typeof FullBleedDialog>` was the only way
- * to say "the props of this" and five call sites across keksdose and kastlan had already
- * written one (audit §api-design).
- *
- * It extends the `<div>` attributes so a caller can reach the OUTER element — the one
- * carrying `role="dialog"`, and therefore the one an `aria-label`, an
- * `aria-describedby` or a `data-tour` anchor belongs on. {@link className} keeps going
- * to the panel inside it, which is what it has always meant here.
- */
-export interface FullBleedDialogProps extends Omit<ComponentPropsWithoutRef<"div">, "title"> {
-  open: boolean;
-  /** The X, the backdrop (where one shows) and — unless {@link backCloses} is off —
-   *  the platform Back gesture all call this. */
-  onClose: () => void;
-  /**
-   * The dialog's HEADING: rendered as a real `h2` (see {@link headingAs}) at the start
-   * of the header strip, and wired to the dialog's `aria-labelledby`, so the dialog is
-   * announced by name rather than as just "dialog".
-   *
-   * Before this the strip was a styled `div`, and a caller that wanted its full-screen
-   * phone editor NAMED had to leave this component for `DialogFrame fullBleed` —
-   * keksdose's budget-table phone editor says so in a comment at the call site. A
-   * caller's own `aria-label` / `aria-labelledby` still wins.
-   */
-  title?: ReactNode;
-  /** The heading level of {@link title}. `h2` by default, as `DialogFrame`'s. */
-  headingAs?: "h1" | "h2" | "h3" | "h4";
-  /**
-   * Free content for the header strip, beside the close button — after the
-   * {@link title} when there is one, or on its own (the row editor shows the row's
-   * own first cell here). It does not name the dialog; `title` does.
-   */
-  header?: ReactNode;
-  closeLabel: string;
-  children: ReactNode;
-  /**
-   * Push a history entry so Back dismisses this dialog instead of navigating
-   * (Keksdose feedback #172). On by default, because a full-screen form that ignores
-   * the phone's universal "go back" gesture does not merely fail to close — the
-   * navigation lands somewhere else with the form still notionally open.
-   *
-   * **Off for a caller whose open state is already in the URL.** The transactions
-   * create card is `?action=new`, so Back already pops it through the router; a
-   * sentinel on top of that would cost two presses to close one dialog. One owner of
-   * the Back press, always.
-   */
-  backCloses?: boolean;
-  /** Extra classes for the PANEL (not the backdrop). */
-  className?: string;
-  /**
-   * A row pinned under the scrolling body — an Apply, a Save. Keksdose's `RangeSheet`
-   * (reports/report-range-field.tsx) is a hand-rolled copy of this dialog for want of
-   * exactly this slot: a date range picked on a phone is committed by a sticky Apply,
-   * and a button at the end of the body scrolls away with the calendar.
-   *
-   * Outside the scroller, so it stays put without `position: sticky` (which would
-   * need the body to be the scroll container of its own child and paint over the
-   * last field); padded for the home indicator, since it is the panel's bottom edge.
-   */
-  footer?: ReactNode;
-  /** The `role="dialog"` element, where the rest of the props go (0.34, API-2, refactor
-   *  audit 2026-10) — merged with its own ref, which the focus trap holds. */
-  ref?: Ref<HTMLDivElement>;
-}
-
-/**
- * The phone's full-screen dialog: a panel that covers the viewport edge to edge.
- *
- * Not {@link Modal}, and that is a decision rather than an omission. Keksdose feedback
- * #32: the inset panel #204 shipped left a strip of page showing beside it on a phone,
- * and tapping that strip dismissed a form mid-edit. With no backdrop exposed there is
- * nothing to mis-tap, so the X is the way out — `backdropClose` stays wired for any
- * layout that does leave a backdrop visible, and costs nothing where none is.
- *
- * ## Why it is a component
- *
- * It was markup inside `data-table.tsx`, where it is the phone's row EDITOR. Keksdose
- * live #307's follow-up needed the same shell for the transactions CREATE card —
- * *"Is the creation window of the tx still different than the edit window? Since the tx
- * list still appears below when scrolling down?"* — and the two answers to that are
- * either one component or two copies that drift. Every previous convergence in that app
- * drifted the moment a second surface was written beside the first, which is what
- * `field-layer-parity` exists to catch one layer down.
- *
- * So the panel, the header strip, the scrolling body, the body-scroll lock and the Back
- * handling are all here, once.
- *
- * ## What the caller still owns
- *
- * The HEADER's content, because the two callers name themselves differently: the row
- * editor shows the row's own first column, the create card a plain title. A plain
- * title belongs in `title`, which is a real heading and the dialog's name; `header`
- * stays the free slot beside it. And `open`,
- * because who decides is the caller's business — see {@link backCloses}.
- */
-export function FullBleedDialog({
-  open,
-  onClose,
-  title,
-  headingAs: Heading = "h2",
-  header,
-  closeLabel,
-  children,
-  backCloses = true,
-  className,
-  footer,
-  onMouseDown,
-  onMouseUp,
-  onKeyDown,
-  ref,
-  ...rest
-}: FullBleedDialogProps) {
-  // Every way OUT goes through `requestClose`, so the panel lowers itself before the
-  // caller unmounts it (live #320 rework). `onClose` is still what finally runs — this
-  // only delays it by the length of the animation.
-  const { closing, requestClose } = useCloseTransition(onClose);
-  const backdropClose = useBackdropClose(requestClose);
-  // The page behind must not scroll or jump under the overlay (feedback #204).
-  useBodyScrollLock(open);
-  useOverlayHistory(open && backCloses, requestClose);
-
-  const dialogRef = useRef<HTMLDivElement>(null);
-  const setDialog = useMemo(() => mergeRefs(dialogRef, ref), [ref]);
-  const titleId = useId();
-  const hasTitle = title !== undefined && title !== null && title !== false;
-  const hasHeader = header !== undefined && header !== null && header !== false;
-  // The half of "modal" this dialog was only claiming. It has said
-  // `aria-modal="true"` since it was extracted from `data-table.tsx`, which tells
-  // assistive technology to hide everything outside it — while the user's focus stayed
-  // on the row they tapped, in the part that is now hidden. Tab then walked them
-  // through a table the screen reader would not describe, and on a phone this dialog
-  // covers the whole screen, so there was nothing on screen to say where they were.
-  //
-  // `initialFocus` is left at the default — the dialog itself, not the first field.
-  // This is the phone's row EDITOR and its first child is usually an input; focusing it
-  // would pull the software keyboard up over half the form before the user has said
-  // which field they came for. `Modal` made the same call for the same reason.
-  //
-  // That default only decides when nothing inside asked for focus. A field the app
-  // autofocuses on purpose keeps it (0.33.1): keksdose's create card autofocuses its
-  // amount, and the trap used to take focus straight back to the dialog — and on a
-  // phone the numpad sheet, which shows only while the field is focused, went with it
-  // (live #402). Closing still hands focus back to whatever opened the dialog.
-  useFocusTrap(dialogRef, { active: open });
-
-  // A layer on the Escape stack while open (Wave 2, DUP-1). This dialog is what a
-  // `PickerSheet`, a list or the numpad opens on top of, and the stack hands the key
-  // to whichever of them is topmost — one press dismissing the sheet AND the edit
-  // behind it was Keksdose live #309 (*"Mouse Back does not only close the select but
-  // also the whole edit or create dialog"*) on a different key.
-  const layer = useDismissLayer(open, requestClose);
-  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
-    // The caller's handler first (keksdose's transaction-search keeps its list keys on
-    // the dialog); a `preventDefault()` IN THAT HANDLER claims Escape. Only there: a
-    // descendant's does not count. A SearchField in the header prevents Escape to stop
-    // Chromium clearing a type=search input, and in 0.8.0 that silently stopped Escape
-    // from closing the dialog (keksdose). The one rule `Modal` now shares — as is this
-    // one: the handler sees Escape only while this dialog is the layer on top (0.35).
-    runOwnKeyDown(e, onKeyDown, layer);
-    takeEscape(e);
-  };
-
-  if (!open || typeof document === "undefined") return null;
-
-  return createPortal(
-    /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- the dialog
-       container, per the APG dialog pattern: `onKeyDown` is Escape-to-close for whatever
-       inside it holds focus, and the mouse handlers are the backdrop press (Escape and the
-       close button are its keyboard path). */
-    <div
-      // `animate-overlay` on the backdrop and `animate-sheet` on the panel (live #320):
-      // the backdrop fades, the panel rises from the bottom edge it is anchored to.
-      // Both are no-ops under prefers-reduced-motion — see tokens.css.
-      //
-      // …and the same two backwards while `closing`, which is the #320 rework. The
-      // backdrop keeps taking pointer events on the way out: a tap during those 220ms
-      // is a tap on a dialog that is leaving, and letting it through to the row
-      // underneath would open a second one.
-      //
-      // `...rest` first, the dialog's own contract after it. A caller adding a
-      // `data-tour` anchor must not be able to take away the role, the modality or the
-      // `tabIndex` below by passing one of them too — this is the element the focus
-      // trap holds, and each of those failures is invisible on screen.
-      {...rest}
-      // A kit layer, for the tour's layer order (0.50, docs/tours-harmonization.md §11.6):
-      // a backdrop, so the tour measures the panel inside it to tell a full-screen sheet.
-      data-kit-layer="backdrop"
-      className={cn(
-        "fixed inset-0 z-50 flex items-stretch justify-center bg-black/40 outline-none",
-        closing ? "animate-overlay-out" : "animate-overlay",
-      )}
-      role="dialog"
-      aria-modal="true"
-      // The heading names the dialog unless the caller named it some other way — an
-      // `aria-labelledby` of its own, or an `aria-label` (which a `labelledby` would
-      // silently outrank).
-      aria-labelledby={rest["aria-labelledby"] ?? (hasTitle && !rest["aria-label"] ? titleId : undefined)}
-      // `tabIndex={-1}` is what makes the line above more than a claim: without it the
-      // container cannot take focus and `useFocusTrap` silently does nothing.
-      tabIndex={-1}
-      ref={setDialog}
-      onKeyDown={handleKeyDown}
-      // COMPOSED with the backdrop's, not overridden by them. These two used to ride
-      // `...rest` and then lose to `{...backdropClose}` spread after it, silently —
-      // and the one caller about to pass one is keksdose's RangeSheet, whose
-      // `onMouseDown={(e) => e.stopPropagation()}` is its dev#477 fix: a press in a
-      // portalled sheet must not reach a document-level "outside click" listener,
-      // which would unmount the day cell before its `click`. The caller's runs first;
-      // the backdrop's still runs after it, since it is the same element.
-      onMouseDown={(e) => {
-        onMouseDown?.(e);
-        backdropClose.onMouseDown(e);
-      }}
-      onMouseUp={(e) => {
-        onMouseUp?.(e);
-        backdropClose.onMouseUp(e);
-      }}
-    >
-      <div
-        className={cn(
-          "flex h-full w-full flex-col overflow-hidden bg-surface shadow-xl",
-          closing ? "animate-sheet-out" : "animate-sheet",
-          className,
-        )}
-      >
-        <div className="flex items-center justify-between gap-2 border-b border-subtle px-3 py-3">
-          {hasTitle ? (
-            <div className="flex min-w-0 flex-1 items-center gap-2">
-              <Heading id={titleId} className="min-w-0 break-words text-base font-semibold leading-snug text-primary">
-                {title}
-              </Heading>
-              {hasHeader && <div className="min-w-0 flex-1 font-medium">{header}</div>}
-            </div>
-          ) : (
-            <div className="min-w-0 flex-1 font-medium">{header}</div>
-          )}
-          <button
-            type="button"
-            onClick={requestClose}
-            aria-label={closeLabel}
-            className="-me-1 shrink-0 rounded p-1.5 text-muted hover:bg-hover hover:text-secondary"
-          >
-            <X className="size-5" />
-          </button>
-        </div>
-        {/* DIALOG_GUTTER (0.75rem, the px-3 py-3 it was), not px-4: every pixel of
-            chrome here is width the form fields lose on a phone (feedback #32). The
-            body is the only thing that scrolls, so the header stays put and the page
-            underneath cannot move at all. */}
-        {/* `min-h-0` so it is the BODY that gives way to a footer, not the footer that
-            is pushed off the bottom edge. */}
-        <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain" style={{ padding: DIALOG_GUTTER }}>
-          {children}
-        </div>
-        {footer !== undefined && footer !== null && footer !== false && (
-          <div
-            data-full-bleed-footer=""
-            className="flex shrink-0 flex-wrap items-center justify-end gap-2 border-t border-subtle px-3 pt-3"
-            style={{ paddingBottom: "max(0.75rem, env(safe-area-inset-bottom))" }}
-          >
-            {footer}
-          </div>
-        )}
-      </div>
-    </div>,
-    document.body,
-  );
-}

package/src/components/grouped-picker.tsx

@@ -1,184 +0,0 @@
-import { useCallback, useId, useMemo } from "react";
-import type { ComponentPropsWithoutRef, ReactNode, Ref } from "react";
-import { ChevronDown } from "lucide-react";
-import { cn } from "../lib/cn";
-import { matchesSearch, searchWords } from "../lib/text-match";
-import { ComboboxPanel, useComboboxCore, type ComboOption } from "./combobox-core";
-import { assignRef } from "./field-parts";
-import { DEFAULT_COMBOBOX_LABELS, useKitLabels, useKitLocale } from "../i18n/kit-labels";
-
-export interface PickerGroup {
-  key: string;
-  label: string;
-  /** `icon` is an optional leading glyph, drawn before the label — the same slot
-   *  `ComboOption` has always had, so the two pickers can present one option set
-   *  the same way. Omitted, a row is exactly what it was: label only, with no
-   *  reserved space, so a list where nothing has an icon does not indent. */
-  items: { key: string; label: string; icon?: ReactNode }[];
-}
-
-/**
- * `onSelect` is omitted from the div's own attributes because this component's
- * means "an item was chosen", not the DOM's "text was selected inside me" — two
- * different signatures under one name, and the kit's meaning is the one three apps
- * are written against.
- */
-export interface GroupedPickerProps extends Omit<ComponentPropsWithoutRef<"div">, "onSelect"> {
-  groups: PickerGroup[];
-  /** Face of the closed picker button. A string also names the trigger when no
-   *  `aria-label` does. */
-  buttonLabel: ReactNode;
-  /** Keys of the current selection, if any. */
-  selected: { group: string; item: string } | null;
-  onSelect: (groupKey: string, itemKey: string) => void;
-  /** The filter box's prompt, and its accessible name. Default: `combobox.search` from
-   *  the {@link UiKitProvider}, else "Search". */
-  filterPlaceholder?: string;
-  /** The TRIGGER — the focusable `<button>` — as on every picker of the kit (MultiSelect,
-   *  CountrySelect, CurrencySelect), not the wrapper the rest of the props go on (0.34,
-   *  API-2, refactor audit 2026-10). */
-  ref?: Ref<HTMLButtonElement>;
-}
-
-/** An item's value in the list: the group's key and the item's, which together are
- *  unique where an item key alone is not (two groups may each have an "Other"). */
-const itemValue = (group: string, item: string) => `${group}\u0000${item}`;
-
-/** Panel picker for large grouped option sets: instead of one long flat
- * dropdown, the groups sit side by side as columns with their items listed
- * beneath (feedback #267/#276), narrowed by a filter box at the top (feedback
- * #267 rework). A query that matches a group's name keeps the whole group;
- * otherwise groups are reduced to their matching items.
- *
- * On the picker family's foundation since round 0.34 (Wave 2, DUP-4 + BUG-12):
- * `useComboboxCore` + `ComboboxPanel` in its `columns` layout. Its trigger promised a
- * dialog that was no dialog, and the choice showed by colour alone; it is a combobox over
- * a listbox now — one `role="group"` per column, named by its heading, the chosen item
- * `aria-selected` and checked — with the arrow keys, Enter, a named filter box, the live
- * result count, portal anchoring (dev#548) and, on a phone, the full-screen sheet
- * (live #200) in one column. */
-export function GroupedPicker({
-  groups,
-  buttonLabel,
-  selected,
-  onSelect,
-  "aria-label": ariaLabel,
-  filterPlaceholder,
-  className,
-  ref,
-  ...rest
-}: GroupedPickerProps) {
-  // `filter: false`: the filter below keeps a whole group when its name matches, so the
-  // panel is handed the rows, as CountrySelect's are. Escape is the core's layer on the
-  // kit's stack — this kept an Escape handler of its own on its panel (round 0.34 BUG-1),
-  // and the stack is the one answer to it now (DUP-1). Back closes the list, as it did on
-  // `useDropdown`.
-  const core = useComboboxCore<string>({ filter: false, backCloses: true });
-  const { open, setOpen, triggerRef, closeToTrigger, query } = core;
-  // The core anchors the panel to the trigger and hands focus back to it; the caller's
-  // `ref` wants the same element. One callback feeds both, as on MultiSelect.
-  const setTrigger = useCallback(
-    (el: HTMLButtonElement | null) => {
-      triggerRef.current = el;
-      assignRef(ref, el);
-    },
-    [ref, triggerRef],
-  );
-  const comboText = useKitLabels("combobox", DEFAULT_COMBOBOX_LABELS);
-
-  // Folded as every kit list folds (DUP-5): the locale's case (the Turkish "İ" that
-  // plain `toLowerCase` gets wrong), and now the accents too — "zurich" finds Zürich.
-  const locale = useKitLocale();
-  const results = useMemo(() => {
-    // Every word of the query (0.51.4): all in the group's name keeps the whole group;
-    // otherwise an item stays when each word is in its label or its group's name, so
-    // "migros 8004" finds Migros' 8004 shop.
-    const words = searchWords(query, locale);
-    const kept =
-      words.length > 0
-        ? groups
-            .map((g) =>
-              matchesSearch(words, [g.label], locale)
-                ? g
-                : { ...g, items: g.items.filter((i) => matchesSearch(words, [g.label, i.label], locale)) },
-            )
-            .filter((g) => g.items.length > 0)
-        : groups;
-    return kept.flatMap((g) =>
-      g.items.map((item): ComboOption<string> => ({
-        value: itemValue(g.key, item.key),
-        label: item.label,
-        icon: item.icon,
-        group: g.label,
-      })),
-    );
-  }, [groups, query, locale]);
-  // Back to keys for `onSelect`, by the value the row carries.
-  const keysOf = useMemo(() => {
-    const map = new Map<string, [string, string]>();
-    for (const g of groups) for (const item of g.items) map.set(itemValue(g.key, item.key), [g.key, item.key]);
-    return map;
-  }, [groups]);
-  const chosen = selected ? itemValue(selected.group, selected.item) : null;
-
-  const listboxId = `${useId()}-listbox`;
-  // The trigger's NAME: a combobox takes none from its content. The caller's
-  // `aria-label`, as on every picker of the kit, else the face when it is text.
-  const name = ariaLabel ?? (typeof buttonLabel === "string" ? buttonLabel : undefined);
-
-  return (
-    // `rest` goes on the wrapper, but the accessible NAME does not: this div is a
-    // positioning box with no role, so a label parked on it would be announced by
-    // nothing. It belongs to the control — the same split every picker in this wave
-    // makes, and the reason `aria-label` is destructured out rather than left in
-    // `rest`. Spread FIRST so the attributes below, each of them a fix with an
-    // incident behind it, cannot be clobbered from outside.
-    <div {...rest} className={cn("relative", className)}>
-      <button
-        ref={setTrigger}
-        type="button"
-        // A closed choice that expands into the list below — the role every trigger
-        // picker in the kit wears. It said `aria-haspopup="dialog"` over a panel that was
-        // no dialog (BUG-12).
-        role="combobox"
-        aria-haspopup="listbox"
-        aria-controls={listboxId}
-        aria-expanded={open}
-        aria-label={name}
-        onClick={() => setOpen((o) => !o)}
-        // Down/Up opens the list from the closed trigger, per the APG.
-        onKeyDown={(e) => {
-          if (e.key === "ArrowDown" || e.key === "ArrowUp") {
-            e.preventDefault();
-            setOpen(true);
-          }
-        }}
-        className="flex w-full items-center justify-between gap-2 rounded-md border border-strong bg-surface px-2.5 py-1.5 text-sm text-primary hover:bg-hover"
-      >
-        {/* The trigger's label and each item wrap from Large up (text size §10.17,
-            round 0.34 T1: the sweep read "Choose a cat…" at 360 px / Extra large). */}
-        <span className="truncate-until-large">{buttonLabel}</span>
-        <ChevronDown className="size-4 shrink-0 text-placeholder" />
-      </button>
-      <ComboboxPanel
-        core={{ ...core, results }}
-        listboxId={listboxId}
-        columns
-        // As wide as four columns want (56rem), within the glass, from the trigger's
-        // start — the panel it always was.
-        width={{ minRem: 56 }}
-        searchPlaceholder={filterPlaceholder ?? comboText.search}
-        sheetTitle={ariaLabel ?? buttonLabel}
-        isSelected={(v) => v === chosen}
-        onChoose={(o) => {
-          const keys = keysOf.get(o.value);
-          if (keys) onSelect(keys[0], keys[1]);
-          closeToTrigger();
-        }}
-        showCreate={false}
-        onCreate={() => {}}
-        createContent={null}
-      />
-    </div>
-  );
-}

package/src/components/help-popover.tsx

@@ -1,117 +0,0 @@
-import { useId } from "react";
-import type { ReactNode } from "react";
-import { HelpCircle } from "lucide-react";
-import { cn } from "../lib/cn";
-import type { RemLength } from "../hooks/use-breakpoint";
-import { FOCUS_RING } from "./focus-ring";
-import { Popover } from "./popover";
-
-/** {@link HelpPopover}'s props. */
-export interface HelpPopoverProps {
-  /**
-   * Names the "?" and the panel — a short question ("What do the statuses mean?") or
-   * "About <field>" ("About the settlement date"), in the reader's language. Required:
-   * a "?" named "?" tells a screen reader nothing about what it opens. Not the help
-   * itself, which is `children`.
-   */
-  label: string;
-  /** The help: a paragraph, or a few. Rendered in the panel at body size. */
-  children: ReactNode;
-  /** The panel's width — {@link Popover}'s `width`. Default `"20rem"`, a paragraph's
-   *  measure; it follows the text size and never exceeds the viewport. */
-  width?: number | RemLength;
-  /** Classes for the "?" button. */
-  className?: string;
-}
-
-/** A paragraph's measure: 320 px at Normal, in rem so it grows with the text size. */
-const HELP_WIDTH: RemLength = "20rem";
-
-/**
- * A "?" whose HELP opens on a tap, a click or Enter — for a paragraph too long to print
- * under a field (0.34, keksdose K3, live #400: *"Remove the long text and move it behind
- * a clickable notice like a circle"*).
- *
- * **Help, not a fact** (docs/text-size-harmonization.md §10.23). {@link FieldHint} is
- * the "?" for a FACT — a format, a limit, a consequence — and since 0.32 it turns into
- * its own words under the field at Large and on a touch screen (`useInlineHint`, §4 "No
- * fact only in a tooltip"), because a fact a reader cannot reach is a fact they do not
- * have. That rule stays. This part is for HELP: why the field exists, how to choose,
- * what the options mean — text the field is usable without. Printed inline it was the
- * longest thing in keksdose's transaction form (four statuses, ~500 characters, on every
- * new row on a phone). `useInlineHint` turns only a FieldHint into a caption, so this
- * one stays on the label line at every size.
- *
- * **On a field: its `help`** (0.36, round 0.36 decision 1). Every kit field that takes a
- * `hint` takes a `help` beside it, and the `@eifi1/ui-kit/rhf` bindings too: pass the
- * help's words and the field draws this "?" on its label line (an unlabelled one at its
- * end edge, outside the box), named "About “<label>”" — or pass a HelpPopover to name it
- * yourself. `hint` stays the FACT, printed under the field; while `help` is set a
- * FieldHint there draws no "?" of its own, so the field has one. Passed as `hint`, as in
- * 0.34, it still rides the label line. It also stands on its own, beside a heading or a
- * column title.
- *
- * **A popover, not a tooltip**: a tooltip bubble is for a line, and opens on hover a
- * finger never makes. This is the kit {@link Popover}: it opens and closes on a tap or a
- * click (and on Enter or Space, as any button does), closes on Escape and on a press
- * outside, and takes the focus into its panel and gives it back to the "?" on close. The
- * panel is a `dialog` named by `label` and described by the help, so a screen reader
- * reads both on opening. The "?" says `aria-expanded` and `aria-haspopup="dialog"`.
- *
- * **"?" rather than "!"**: it answers a question ("what is the difference between
- * accepted and cleared?", keksdose live #247); "!" is a warning.
- *
- * ```tsx
- * <Select label="Status" hint="Cleared and reconciled rows are locked." help={
- *   <HelpPopover label="What do the statuses mean?">
- *     Pending: … Accepted: … Cleared: … Reconciled: …
- *   </HelpPopover>
- * } … />
- * ```
- */
-export function HelpPopover({ label, children, width = HELP_WIDTH, className }: HelpPopoverProps) {
-  const panelId = useId();
-  const bodyId = useId();
-  return (
-    <Popover
-      width={width}
-      panelId={panelId}
-      // The panel is named by the question and described by the answer, so focus moving
-      // into it reads both.
-      aria-label={label}
-      aria-describedby={bodyId}
-      trigger={({ open, toggle, ref }) => (
-        <button
-          ref={ref}
-          // Never `submit`: the "?" sits on a field's label line, inside a form.
-          type="button"
-          aria-label={label}
-          aria-expanded={open}
-          aria-haspopup="dialog"
-          aria-controls={open ? panelId : undefined}
-          onClick={(e) => {
-            // The "?" sits in a label strip: the press is the "?"'s, not the field's.
-            e.preventDefault();
-            toggle();
-          }}
-          // FieldHint's look, so the two marks read as one family on a label line; the
-          // open one holds its hover colour while its panel shows.
-          className={cn(
-            "flex rounded-full text-placeholder transition-colors hover:text-secondary",
-            open && "text-secondary",
-            FOCUS_RING,
-            className,
-          )}
-        >
-          <HelpCircle aria-hidden className="size-3.5" />
-        </button>
-      )}
-    >
-      {() => (
-        <div id={bodyId} className="space-y-2 text-sm leading-snug text-primary">
-          {children}
-        </div>
-      )}
-    </Popover>
-  );
-}