@eifi1/ui-kit 0.22.0 → 0.24.0

package/src/components/field-parts.tsx

@@ -1,18 +1,61 @@
 import { createContext, useId } from "react";
-import type { ReactNode } from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 import { cn } from "../lib/cn";
 import { Tooltip } from "./tooltip";
 import { useCommitReason } from "./write-lock";
 import { hasMessage, mergeDescribedBy } from "./choice-parts";
 
 /**
- * Small pieces the fields share for the 0.22.0 anatomy round (keksdose K3/K4, kastlan
- * 8). Private to the package — not re-exported from the barrel — like `choice-parts`.
+ * The pieces of a field's anatomy the kit's fields share — the static label, the hint
+ * (caption or "?"), the caption and the error under a field, the label strip over a
+ * bare group, the write lock on a control that saves itself. Private to the package —
+ * not re-exported from the barrel, except `FieldLabel` and `FLOATING_LABEL_STATIC`,
+ * which ui.tsx re-exports as it always has.
  *
- * Nothing here imports `ui.tsx`: `ui.tsx` imports this, and so do the combobox family
- * and the native choice controls, which is the point of keeping the rules in one place.
+ * One file since 0.23: until then the pickers' half (`field-anatomy.tsx`: the date and
+ * month pickers, whose trigger is a button in a wrapper of their own, and the groups
+ * with no field box) sat beside this one with its own copies of `isTextHint` and the
+ * caption class (keksdose K4: "uniform field anatomy … today it is a patchwork").
+ *
+ * Nothing here imports `ui.tsx`: `ui.tsx` imports this, and so do the combobox family,
+ * the pickers and the native choice controls — the lint's no-cycle rule holds it.
  */
 
+/* ── the static label ─────────────────────────────────────────────────────── */
+
+// The TYPE of the small static label, without any placement. Split out so the
+// label and anything sharing its line (see `hint` on {@link FloatingField}) are
+// laid out by one flex row instead of by two absolute offsets guessing at the
+// same baseline — which is what put dev#468's "?" three pixels above the word it
+// belongs to.
+export const STATIC_LABEL_TYPE =
+  "text-[11px] leading-tight text-[var(--text-muted)] peer-disabled:opacity-50";
+
+// A field that always has a value (select / dropdown trigger) keeps the label
+// permanently in the floated position — small, in the top strip, value below.
+export const FLOATING_LABEL_STATIC = cn(
+  "pointer-events-none absolute start-3 top-1",
+  STATIC_LABEL_TYPE,
+  "max-w-[calc(100%-1.5rem)] truncate",
+);
+
+/**
+ * The floating label for a custom-dropdown trigger (a `<span>`, since the trigger is a
+ * button not a labelable input). Same placement as {@link FloatingField}'s static label,
+ * so every labelled field lines up. Render inside a `relative` wrapper, before the trigger.
+ */
+export interface FieldLabelProps extends ComponentPropsWithoutRef<"span"> {
+  children: ReactNode;
+}
+
+export function FieldLabel({ children, className, ...rest }: FieldLabelProps) {
+  return (
+    <span {...rest} className={cn(FLOATING_LABEL_STATIC, "z-10", className)}>
+      {children}
+    </span>
+  );
+}
+
 /* ── hint ─────────────────────────────────────────────────────────────────── */
 
 /**
@@ -182,3 +225,179 @@ export function LockedReason({
  * ChoiceCardGroup's `InGroupContext`, for the plain checkbox.
  */
 export const RequiredStarOnLegend = createContext(false);
+
+/* ── fields not built on FloatingField: pickers and bare groups ──────────── */
+
+/** `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. */
+export function hasContent(node: ReactNode): boolean {
+  return node !== undefined && node !== null && node !== false && node !== "";
+}
+
+const FIELD_ERROR_CLASS = "mt-1 text-[11px] leading-tight text-[var(--danger)]";
+
+export interface FieldMessages {
+  /** `invalid`, a message, or an `aria-invalid` from outside (a form library). */
+  isInvalid: boolean;
+  /** The caller's description, then the caption, then the error — the standing
+   *  advice before the news, as `useFieldError` in ui.tsx orders them. */
+  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. */
+export function useFieldMessages({
+  hint,
+  error,
+  invalid,
+  describedBy,
+  ariaInvalid,
+}: {
+  hint?: ReactNode;
+  error?: ReactNode;
+  invalid?: boolean;
+  describedBy?: string;
+  ariaInvalid?: unknown;
+}): FieldMessages {
+  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(" ") || undefined,
+    below:
+      textHint || hasError ? (
+        <>
+          {textHint && (
+            <p id={hintId} className={FIELD_CAPTION_CLASS}>
+              {hint}
+            </p>
+          )}
+          {hasError && (
+            <p id={errorId} className={FIELD_ERROR_CLASS}>
+              {error}
+            </p>
+          )}
+        </>
+      ) : null,
+    labelHint: !textHint && hasContent(hint) ? hint : undefined,
+  };
+}
+
+/**
+ * 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.
+ */
+export function FieldBox({
+  below,
+  reserve,
+  children,
+}: {
+  below: ReactNode;
+  reserve: boolean;
+  children: ReactNode;
+}) {
+  if (below === null && !reserve) return <>{children}</>;
+  return (
+    <div>
+      {children}
+      {below}
+    </div>
+  );
+}
+
+/**
+ * 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.
+ */
+export function FieldLabelLine({ label, hint }: { label: ReactNode; hint?: ReactNode }) {
+  if (!hasContent(hint)) return <FieldLabel>{label}</FieldLabel>;
+  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.
+    <div className="pointer-events-none absolute start-3 end-9 top-1 z-10 flex items-center gap-1">
+      <FieldLabel className="static min-w-0 max-w-full">{label}</FieldLabel>
+      <span className="pointer-events-auto flex shrink-0 items-center">{hint}</span>
+    </div>
+  );
+}
+
+/**
+ * How tall the strip over a bare group is — the values {@link FieldStrip}'s `pad` takes,
+ * public since 0.23 (keksdose G8), so the names say what the CONTENT needs rather than
+ * which kit group first needed it (until 0.23 they were `toggle` and `tiles`).
+ *
+ *  - `"field"` — 16px. keksdose's `ClearedStatusPicker` (live #288 rework, #431,
+ *    measured): *"16px of label strip plus a 26px group is exactly a labelled Input"*,
+ *    so a status group in a row of 42px fields ends where they end. The label's line
+ *    box runs into the group's top hairline, but the ACTIVE fill — the thing feedback
+ *    #117 was about — starts at 19px, below the label's 17.75px. For content with a
+ *    border and an inset of its own; ToggleGroup's `labelPlacement="strip"`.
+ *  - `"clear"` — 20px, keksdose's `FlagPicker` and location field (`pt-5`). A tile has
+ *    no inset fill: its selection IS its frame, a 2px dark border-and-ring from the
+ *    tile's top edge, so the tile has to start below the whole label line — and so does
+ *    anything else with no inset: a map, a row of buttons, a line of text. SwatchPicker,
+ *    IconPicker, and FieldStrip's default.
+ */
+export const LABEL_STRIP_PAD = { field: "pt-4", clear: "pt-5" } as const;
+
+/**
+ * The 11px label (and its `FieldHint`) over a group that is NOT a field — keksdose K2:
+ * a segmented control or a row of swatches standing in a form row beside labelled
+ * inputs, whose label must sit on the same line as theirs (`top-1`, `inset-x-3`, the
+ * type of a field's static label) without the group growing a field's border round
+ * it. `id` goes on the label so the group can be `aria-labelledby` it.
+ *
+ * `relative` is load-bearing twice over: the row is positioned against it, and a
+ * caller's `sr-only` label cannot escape it (sr-only-containment).
+ *
+ * Any other attribute (`rest`) lands on the wrapper — {@link FieldStrip} makes it the
+ * `role="group"` its label names. The kit's own groups pass none, so their wrapper is
+ * the bare box it was in 0.22.
+ */
+export function LabelStrip({
+  labelId,
+  label,
+  hint,
+  disabled,
+  pad,
+  className,
+  children,
+  ...rest
+}: Omit<ComponentPropsWithoutRef<"div">, "children"> & {
+  labelId: string;
+  label: ReactNode;
+  hint?: ReactNode;
+  /** Dim the label with its group, as `peer-disabled:` dims a field's own. */
+  disabled?: boolean;
+  pad: keyof typeof LABEL_STRIP_PAD;
+  children: ReactNode;
+}) {
+  return (
+    <div {...rest} className={cn("relative min-w-0", LABEL_STRIP_PAD[pad], className)}>
+      <div className="pointer-events-none absolute inset-x-3 top-1 flex items-center gap-1">
+        {/* `static`: FieldLabel positions itself absolutely; here the ROW is
+            positioned, so the label and its "?" are centred on one line by the flex
+            layout (dev#468). */}
+        <FieldLabel id={labelId} className={cn("static min-w-0 max-w-full", disabled && "opacity-50")}>
+          {label}
+        </FieldLabel>
+        {hasContent(hint) && <span className="pointer-events-auto flex shrink-0 items-center">{hint}</span>}
+      </div>
+      {children}
+    </div>
+  );
+}

package/src/components/field-strip.tsx

@@ -0,0 +1,149 @@
+import { useId } from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { LabelStrip, useFieldMessages } from "./field-parts";
+
+/**
+ * How far down the content starts, under the 11px label — see {@link FieldStripProps.pad}.
+ *
+ *  - `"clear"` (default) — 20px: the content starts below the label's whole line box.
+ *  - `"field"` — 16px: the strip plus a 26px bordered control is exactly a labelled
+ *    {@link Input}'s 42px.
+ */
+export type FieldStripPad = "clear" | "field";
+
+/** What a {@link FieldStrip} hands render-prop children. */
+export interface FieldStripIds {
+  /** The label's id — for content that names ITSELF by the label (`aria-labelledby`)
+   *  under `group={false}`, or anything else that has to point at it. */
+  labelId: string;
+  /** The ids of the caption and the error while they are on screen, else `undefined`.
+   *  The group is described by them already; spread this on the content under
+   *  `group={false}`, where there is no group to describe. */
+  describedBy: string | undefined;
+}
+
+export interface FieldStripProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+  /** The 11px static label, on the line a labelled field's label sits on. */
+  label: ReactNode;
+  /**
+   * Field anatomy, as on {@link Input}: plain text is a caption under the content (and
+   * describes the group); a {@link FieldHint} "?" rides the label line.
+   */
+  hint?: ReactNode;
+  /** A message under the content, in `--danger`, describing the group. `null`,
+   *  `false` and `""` are no error. The content's own controls are the caller's to
+   *  mark `aria-invalid`; a `group` cannot be. */
+  error?: ReactNode;
+  /**
+   * Dims the label with the content, as a disabled field's label dims. The content is
+   * the caller's: disable (or hide) its controls yourself — keksdose's location cell
+   * turns its map into a picture and drops its buttons, which no flag here could guess.
+   */
+  disabled?: boolean;
+  /**
+   * How tall the strip is — what the content needs, measured in keksdose (`pt-5` /
+   * `pt-4`, the 0.22 `LABEL_STRIP_PAD`):
+   *
+   *  - `"clear"` (default) — 20px. The content starts below the label's whole line box
+   *    (4px down, 13.75px tall). For content with no inset of its own: a map, a row of
+   *    buttons, a pill, a line of text, a row of tiles whose selection is their frame
+   *    (SwatchPicker, IconPicker).
+   *  - `"field"` — 16px. The strip plus a 26px bordered control (1 + 2 + 20 + 2 + 1) is
+   *    exactly a labelled Input's 42px, so the row's bottom edges line up. The label's
+   *    line box runs 1.75px into the control's top hairline, so only content with an
+   *    inset of its own keeps clear of it — the segmented group's 2px moat
+   *    (ToggleGroup's `labelPlacement="strip"`).
+   *
+   * A responsive strip is a `className`: it merges after the pad, so keksdose's status
+   * cell writes `className="pt-5 @3xl:pt-4"` (20px on a phone, 16px in the desktop row).
+   */
+  pad?: FieldStripPad;
+  /**
+   * The wrapper is a `role="group"` named by the label (default), so a screen reader
+   * entering the map or the first button hears "Location, group" — what the visible
+   * label tells a sighted reader the content is about.
+   *
+   * `false` for content that is a labelled group ITSELF (a `role="radiogroup"` of the
+   * app's own, a TileRadioGroup's container, a fieldset): a group inside a group, both
+   * named "Pattern", is read twice. The wrapper is then a plain box, and the content
+   * takes the name from the render-prop's `labelId` (and the caption and error from
+   * its `describedBy`).
+   */
+  group?: boolean;
+  /** The content. A function receives {@link FieldStripIds}. */
+  children: ReactNode | ((ids: FieldStripIds) => ReactNode);
+}
+
+/**
+ * The kit's label strip for content of your own — keksdose G8.
+ *
+ * 0.22 gave three groups a strip label (keksdose K2): ToggleGroup's
+ * `labelPlacement="strip"`, SwatchPicker's and IconPicker's `label`. Each draws the
+ * 11px label (and its `FieldHint`) on the same line as the labelled fields beside it,
+ * over content WITHOUT a field's border round it. keksdose's transaction row has one
+ * cell left that is not one of those groups: the location — a map, a "Locate me" and a
+ * "Search" button — still built by hand as a `relative` cell, a floated `FieldLabel`
+ * and a `pt-5` box (transaction-location-field.tsx), and so is the reconciled-status
+ * stand-in (cleared-status-toggle.tsx, `ClearedStatusLocked`). This is the strip on its
+ * own, the same component the three groups draw theirs with:
+ *
+ * ```tsx
+ * <FieldStrip label={t("transactions.location")} className={className}>
+ *   <div className="space-y-2">
+ *     <PinMap … />
+ *     <div className="flex flex-wrap gap-2"><Button …>Locate me</Button>…</div>
+ *   </div>
+ * </FieldStrip>
+ * ```
+ *
+ * The label sits where a field's static label sits (`top-1`, `inset-x-3`, 11px in a
+ * `leading-tight` line); the content starts `pad` down, full width. `className` styles
+ * the wrapper — the grid or flex item in the caller's row — and merges after the pad.
+ *
+ * Not a {@link Field}: that one sets a 14px label ABOVE its control, in flow, for a form
+ * that labels its fields that way. This is for a row whose fields float their labels
+ * inside them, where a label above would be the only one of its kind.
+ */
+export function FieldStrip({
+  label,
+  hint,
+  error,
+  disabled = false,
+  pad = "clear",
+  group = true,
+  className,
+  children,
+  ...rest
+}: FieldStripProps) {
+  const labelId = useId();
+  const messages = useFieldMessages({ hint, error });
+  const content = typeof children === "function" ? children({ labelId, describedBy: messages.describedBy }) : children;
+  // The caller's own description first, then the caption, then the error — the order
+  // every kit field reads them in.
+  const groupDescribedBy = [rest["aria-describedby"], messages.describedBy].filter(Boolean).join(" ") || undefined;
+  return (
+    <LabelStrip
+      {...rest}
+      {...(group
+        ? {
+            role: "group",
+            // An explicit name wins, as on the kit's labelled groups.
+            "aria-labelledby":
+              rest["aria-label"] === undefined && rest["aria-labelledby"] === undefined
+                ? labelId
+                : rest["aria-labelledby"],
+            "aria-describedby": groupDescribedBy,
+          }
+        : null)}
+      labelId={labelId}
+      label={label}
+      hint={messages.labelHint}
+      disabled={disabled}
+      pad={pad}
+      className={className}
+    >
+      {content}
+      {messages.below}
+    </LabelStrip>
+  );
+}

package/src/components/form-actions.tsx

@@ -5,7 +5,7 @@ import { cn } from "../lib/cn";
 import { useKitLabels } from "../i18n/kit-labels";
 import { useMediaQuery } from "../hooks/use-media-query";
 import { isApplePlatform } from "../hooks/use-hotkey";
-import { Button, Spinner, type ButtonProps, type ButtonVariant } from "./ui";
+import { Button, Spinner, type ButtonProps, type ButtonSize, type ButtonVariant } from "./ui";
 import { useWriteLock } from "./write-lock";
 
 /** The words {@link FormActions} renders on its own behalf — the `form` namespace. */
@@ -186,6 +186,27 @@ export interface FormActionsProps extends Omit<ComponentPropsWithoutRef<"div">,
   /** The save button's variant. Default `brand`; `danger` for a save that destroys
    *  (kastlan's `destructive` flag on its own FormActions). */
   submitVariant?: ButtonVariant;
+  /**
+   * The Cancel button's variant. Default `secondary` (the outlined button, as before).
+   * `ghost` for a row where Cancel should step back further than an outline — keksdose
+   * G3: a quiet inline row (a confirm under a table row, a card's own small editor)
+   * whose Cancel was a ghost button before it moved onto FormActions, which drew every
+   * Cancel outlined.
+   */
+  cancelVariant?: ButtonVariant;
+  /**
+   * The size of every button the row draws itself — Save, Cancel and the
+   * `{ label, onClick }` form of {@link destructive}: Button's `size`. Default `md`.
+   * `sm` (12px text, `px-2 py-1`) for a dense row: a confirm inside a table's expansion
+   * row, a toolbar card. keksdose G3: two such rows had small hand-built buttons and lost
+   * them on adopting FormActions, which had no size. At `sm` the spinner and
+   * {@link submitIcon} shrink with the text.
+   *
+   * Your own elements (`children`, an element passed as `destructive`, `start`) are
+   * yours to size — pass them `size="sm"` too. A `size` in {@link submitProps} still
+   * wins for Save, as it always has.
+   */
+  size?: ButtonSize;
   /**
    * A destructive action at the START of the row, apart from Save and Cancel — the
    * "Delete" of an edit dialog. Pass `{ label, onClick }` for the kit's quiet danger
@@ -328,6 +349,8 @@ export function FormActions({
   submitDisabledReason,
   commit = false,
   submitVariant = "brand",
+  cancelVariant = "secondary",
+  size = "md",
   destructive,
   start: startSlot,
   align,
@@ -355,6 +378,22 @@ export function FormActions({
     },
     [callerSaveRef],
   );
+  // The save settled and the form is still here — it failed, and the user retries. The
+  // button was natively disabled while it ran, and a focused button that turns disabled
+  // drops the focus to <body> (DangerConfirm's 0.24 fix, keksdose). Only after a press
+  // of THIS button (`pressed`: a click or the shortcut), so a `pending` that comes and
+  // goes on its own never pulls the page's focus in.
+  const pressed = useRef(false);
+  const wasPending = useRef(pending);
+  useEffect(() => {
+    const settled = wasPending.current && !pending;
+    wasPending.current = pending;
+    if (!settled) return;
+    const ours = pressed.current;
+    pressed.current = false;
+    if (!ours) return;
+    if (document.activeElement === null || document.activeElement === document.body) saveRef.current?.focus();
+  }, [pending]);
   // Read by the shortcut's listener at the moment of the key press, so the listener
   // itself is attached once and never sees a stale `pending`.
   const canSave = !pending && !submitDisabled && !(commit && lock.locked);
@@ -386,6 +425,7 @@ export function FormActions({
       type="button"
       variant="ghost"
       tone="danger"
+      size={size}
       onClick={destructive.onClick}
       disabled={destructive.disabled}
       disabledReason={destructive.disabledReason}
@@ -397,6 +437,9 @@ export function FormActions({
     destructive
   );
   const saveLabel = submitLabel ?? labels.save;
+  // The glyphs follow the text: 16px beside `md`'s 14px text, 14px beside `sm`'s 12px.
+  const saveSize = submitProps?.size ?? size;
+  const glyphClass = saveSize === "sm" ? "size-3.5" : "size-4";
 
   return (
     <div
@@ -435,7 +478,7 @@ export function FormActions({
       <div className="flex flex-wrap items-center gap-2">
         {children}
         {onCancel && (
-          <Button type="button" variant="secondary" onClick={onCancel}>
+          <Button type="button" variant={cancelVariant} size={size} onClick={onCancel}>
             {cancelLabel ?? labels.cancel}
           </Button>
         )}
@@ -447,8 +490,12 @@ export function FormActions({
           }
           type={onSubmit ? "button" : "submit"}
           form={form}
-          onClick={onSubmit}
+          onClick={() => {
+            pressed.current = true;
+            onSubmit?.();
+          }}
           variant={submitVariant}
+          size={saveSize}
           disabled={pending || submitDisabled}
           disabledReason={pending ? undefined : submitDisabledReason}
           // Not while pending: the save already left, and the lock's look over the
@@ -457,9 +504,9 @@ export function FormActions({
           aria-busy={pending || undefined}
         >
           {pending ? (
-            <Spinner label={null} className="size-4" />
+            <Spinner label={null} className={glyphClass} />
           ) : (
-            SubmitIcon && <SubmitIcon aria-hidden className="size-4 shrink-0" />
+            SubmitIcon && <SubmitIcon aria-hidden className={cn(glyphClass, "shrink-0")} />
           )}
           {pending && pendingLabel !== undefined ? pendingLabel : saveLabel}
           {submitShortcut && submitShortcutHint && (

package/src/components/icon-picker.tsx

@@ -5,7 +5,7 @@ import { DEFAULT_COMMON_LABELS, useKitLabels, useKitLocale } from "../i18n/kit-l
 import { SearchField } from "./search-field";
 import { TILE_SIZE, TileRadioGroup } from "./tile-radio";
 import type { TileItem, TileSize } from "./tile-radio";
-import { hasContent, LabelStrip } from "./field-anatomy";
+import { hasContent, LabelStrip } from "./field-parts";
 
 export interface IconPickerLabels {
   /** The "no icon" tile's name, when `allowNone` is set. */
@@ -41,7 +41,16 @@ export interface IconOption<T extends string> {
   /** A remark read after the name and shown under it in the bubble ("used by
    *  Leisure"). The tile wears a dot while it has one. */
   note?: string;
+  /** Out of the choice and out of reach — skipped by the arrow keys and Tab. With a
+   *  `disabledReason` the tile stays reachable instead and says why. */
   disabled?: boolean;
+  /**
+   * Why THIS symbol cannot be chosen right now — {@link SwatchOption.disabledReason}'s
+   * twin: the tile is `aria-disabled` but reachable by Tab and the arrow keys, the reason
+   * shows in its bubble under its name and describes it, and choosing it does nothing.
+   * Wins over `disabled`. Kept through a search like any other tile.
+   */
+  disabledReason?: ReactNode;
 }
 
 export interface IconPickerProps<T extends string>
@@ -147,7 +156,13 @@ export function IconPicker<T extends string>({
     // "None" stays through a search: it is the way back to no icon, and it matches
     // no word anybody would type for it.
     ...(allowNone ? [{ key: null, label: text.none }] : []),
-    ...visible.map((o) => ({ key: o.value, label: o.label, note: o.note, disabled: o.disabled })),
+    ...visible.map((o) => ({
+      key: o.value,
+      label: o.label,
+      note: o.note,
+      disabled: o.disabled,
+      disabledReason: o.disabledReason,
+    })),
   ];
 
   const picker = (
@@ -173,7 +188,11 @@ export function IconPicker<T extends string>({
         <TileRadioGroup
           items={items}
           checked={mixed ? undefined : value}
-          onSelect={onChange}
+          // A locked tile is refused by the tiles themselves; asked again here so a
+          // reason can never become a change, whatever the tiles do.
+          onSelect={(next) => {
+            if (!hasContent(next === null ? undefined : byValue.get(next)?.disabledReason)) onChange(next);
+          }}
           activation={activation}
           disabled={disabled}
           size={size}
@@ -209,7 +228,7 @@ export function IconPicker<T extends string>({
   );
   if (!labelled) return picker;
   return (
-    <LabelStrip labelId={labelId} label={label} hint={hint} disabled={disabled} pad="tiles" className={className}>
+    <LabelStrip labelId={labelId} label={label} hint={hint} disabled={disabled} pad="clear" className={className}>
       {picker}
     </LabelStrip>
   );

package/src/components/money-field.tsx

@@ -45,6 +45,9 @@ function parseSettled(text: string): number | null | undefined {
  * blurs the field and tears the editor down before the popover can open (typed
  * calculations still evaluate).
  *
+ * `inputClassName` (0.23, keksdose G7) styles the `<input>` itself — `text-end` for a
+ * money column — where `className` sizes the wrapper; see {@link AmountInput}'s.
+ *
  * This, not a `NumberField` with `digits={2}`, is the number-valued field for money:
  * it settles to the CURRENCY's minor unit (JPY 0, CHF 2) and `digits` takes a unit
  * price's finer scale (kastlan 5).

package/src/components/month-picker.tsx

@@ -9,7 +9,7 @@ import { Popover } from "./popover";
 import { splitTriggerAria } from "./trigger-aria";
 import type { TriggerAria } from "./trigger-aria";
 import { useKitDateFormatter, useKitLabels, useKitLocale } from "../i18n/kit-labels";
-import { FieldBox, FieldLabelLine, hasContent, useFieldMessages } from "./field-anatomy";
+import { FieldBox, FieldLabelLine, hasContent, useFieldMessages } from "./field-parts";
 
 /**
  * Every string the month picker can speak. The month and year names are NOT here —
@@ -348,6 +348,7 @@ function MonthFieldTrigger({
       aria-expanded={open}
       id={aria.id}
       aria-invalid={invalid || aria["aria-invalid"] === true || aria["aria-invalid"] === "true" || undefined}
+      aria-required={aria["aria-required"]}
       aria-labelledby={aria["aria-label"] && !aria["aria-labelledby"] ? undefined : labelledBy}
       aria-label={aria["aria-label"]}
       aria-describedby={aria["aria-describedby"]}