@eifi1/ui-kit 0.53.0 → 0.55.0

package/src/components/textarea.tsx

@@ -1,330 +0,0 @@
-import { useId, useLayoutEffect, useRef } from "react";
-import type { ChangeEvent, ReactNode, Ref, TextareaHTMLAttributes } from "react";
-import { cn } from "../lib/cn";
-import {
-  EndHintRow,
-  FieldCaption,
-  mergeDescribedBy,
-  useFieldError,
-  useFieldHint,
-  type FieldHelpProps,
-} from "./field-parts";
-import {
-  CharacterCount,
-  FIELD_BASE,
-  FIELD_INVALID,
-  FieldGroup,
-  FloatingField,
-  FLOATING_INPUT_CLASS,
-  FLOATING_PLACEHOLDER_ON_FOCUS,
-  fieldBelow,
-  hasPlaceholderText,
-  useCharacterCountLabels,
-  useTypedLength,
-  type CharacterCountLabels,
-} from "./field-base";
-
-/**
- * The lower edge of {@link TEXTAREA_LABEL_STRIP} (0.25, Kurvenschmiede).
- *
- * The 0.24 strip ends on a hard line, and a line of text scrolled most of the way under
- * it left its lower edge showing below that line: in a pasted table, a row of comma
- * tails between the strip and the first whole line (`0,5;1,9` cut above its baseline is
- * `, ,`). This layer, hung under the strip, closes that gap. What it draws depends on
- * how much of the line on its way out is still below the strip ({@link labelEdge}):
- *
- * - **Half a line or less** — its descenders, the feet of its letters: covered, solid,
- *   down to exactly where that line's box ends. The strip's bottom snaps to the line
- *   box, so the row of tails is gone and the next line, which starts there, is not
- *   touched.
- * - **More than half** — a line you can still read: a soft edge, the strip's surface
- *   fading into it over {@link LABEL_EDGE_SOFT_PX}, where 0.24 cut it hard. Never taller
- *   than the part of that line already gone, so it grows from nothing as a line starts
- *   to move and never reaches the next one.
- * - **Nothing to cover** — at rest, or a line boundary right on the strip's edge:
- *   nothing drawn. An unscrolled first line is never covered (at rest the strip covers
- *   the top padding and nothing else, as in 0.24), and neither is any whole line.
- *
- * Why not one of the two alone. A plain fade under the strip, as tall as the tails,
- * dims the top of the first WHOLE line whenever it sits right under the strip (its
- * capitals start about 4px into a 20px line), and only half-hides the tails, which sit
- * in its fading part. A plain snap to the line box would hide a whole line the moment
- * one starts to scroll. The half-line threshold keeps what is shown legible: a line is
- * either hidden or shown with most of its letters, never as a row of stray marks.
- *
- * Its height and solid part are `--label-strip-edge` / `--label-strip-edge-solid`,
- * written by {@link TextareaLabelStrip} from the textarea's `scrollTop` and line height
- * on every scroll; unset (no layout, no script yet) the height is 0 and nothing shows.
- * A pseudo-element of the strip, so it inherits everything the strip already gets
- * right: shown only while the label is floated, the same horizontal insets (stopped
- * short of a classic scrollbar, on either side — RTL included), painted under the
- * label. Its colour is INHERITED from the strip (`bg-inherit`): `--bg-surface`, and the
- * disabled / `[readonly]` `--bg-surface-2`, in both themes, with no second copy of
- * those selectors to keep in step. The soft part is a mask over that colour (alpha
- * only — the `#000` is the mask's opacity, not a colour on screen).
- */
-const TEXTAREA_LABEL_EDGE = cn(
-  "after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:h-[var(--label-strip-edge,0px)] after:content-['']",
-  "after:bg-inherit after:[mask-image:linear-gradient(#000_var(--label-strip-edge-solid,0px),transparent)]",
-);
-
-/** The soft edge over a line still more than half in view, in px: "a few pixels" —
- *  enough to take the cut off its letters, little enough to leave them legible. */
-const LABEL_EDGE_SOFT_PX = 3;
-
-/**
- * {@link TEXTAREA_LABEL_EDGE}'s height and solid part, in px, for a field scrolled
- * `scrollTop` with lines `lineHeight` tall.
- *
- * The strip covers the top padding exactly, so line boxes meet its lower edge whenever
- * `scrollTop` is a whole number of lines; `gone` is how far the line now on its way out
- * has passed under it, `left` how much of it is still below. A line height that is not
- * a length (`normal`) gives no line boxes to snap to: only the soft edge then.
- */
-function labelEdge(scrollTop: number, lineHeight: number): { height: number; solid: number } {
-  if (!(scrollTop > 0)) return { height: 0, solid: 0 };
-  if (!(lineHeight > 0)) return { height: Math.min(scrollTop, LABEL_EDGE_SOFT_PX), solid: 0 };
-  const gone = scrollTop % lineHeight;
-  const left = gone === 0 ? 0 : lineHeight - gone;
-  if (left > 0 && left <= lineHeight / 2) return { height: left, solid: left };
-  return { height: Math.min(gone, LABEL_EDGE_SOFT_PX), solid: 0 };
-}
-
-/**
- * The backdrop of a labelled {@link Textarea}'s label strip (Kurvenschmiede, 0.24).
- *
- * The report: paste a long table into ColumnMapper, the field scrolls, and the floated
- * "Paste a table" / "Tabelle einfügen" sits ON the first visible line of text — on
- * desktop and on a phone. Not a ColumnMapper bug: every labelled textarea that scrolls
- * did it. An `<input>` has one line that never moves, so the strip FIELD_FLOATING_PAD
- * leaves for the label is always empty there; a textarea's top padding is part of its
- * SCROLLING area, and once the content scrolls the lines travel up through the strip
- * and under the label.
- *
- * The fix makes that padding stay put: this layer is a later sibling of the textarea
- * (so `peer-*` reaches it, and as a positioned box it paints above the textarea's
- * text), the label paints above it in turn, and it covers exactly the top padding —
- * `top-px` / `inset-x-px` inside the 1px border, `h-4` = `pt-4`. At rest it covers
- * padding and nothing else, so no pixel of an unscrolled line is ever hidden; scrolled
- * text slides out of sight under it instead of through the label.
- *
- * Why a layer and not "start the scrolling area below the strip" (a wrapper that draws
- * the border and background, the textarea transparent inside it): the box would stop
- * being the textarea. Its focus outline, its brand border on focus, the invalid ring,
- * the disabled and read-only greys and every caller's `[&_textarea]:…` would all have
- * to be rebuilt on the wrapper with `focus-within:` / `has-[…]:`, and a caller's
- * `style={{ height }}` would size the scroller rather than the field. The layer leaves
- * all of that exactly where it was.
- *
- * What it has to match, it matches from the same tokens the field uses: the surface is
- * FIELD_BASE's `--bg-surface`, and `--bg-surface-2` for `disabled` and `[readonly]` —
- * on the same ATTRIBUTE selector FIELD_BASE uses, for the reason given there. Focus and
- * `invalid` change only the border and the ring, which are outside the layer, so they
- * need nothing. Both themes come with the variables. The inner corners are the field's
- * radius (`rounded-md`, 0.375rem) less the 1px border, so the rounded border is never
- * cut into — `calc(0.375rem - 1px)` rather than `var(--radius-md)`, which Tailwind emits
- * only where a utility uses it and the kit's token check refuses (token-vars-declared).
- * Since 0.32 in rem (§3.2): the field's own corner grows with the text, so a fixed 5px
- * left the strip's corner square of the border's at 125 %.
- *
- * Hidden (`display: none`) until the label floats: an empty, unfocused field has
- * nothing that could scroll, and it renders exactly as it did before 0.24. Pointer
- * events pass through, so a click on the strip still lands in the field.
- *
- * The one thing CSS cannot know is a classic scrollbar's width, and a strip across the
- * whole inner width would hide the scrollbar's top arrow — see {@link TextareaLabelStrip}.
- *
- * Its lower edge, where a line scrolled half under it used to leave its tails showing,
- * is {@link TEXTAREA_LABEL_EDGE} (0.25).
- */
-const TEXTAREA_LABEL_STRIP = cn(
-  "pointer-events-none absolute inset-x-px top-px hidden h-4 rounded-t-[calc(0.375rem-1px)] bg-surface",
-  // Never at Large (0.33, §10.17): the label stands above the field, so there is no
-  // strip to keep scrolled text out of, and a layer here would hide the first line.
-  "not-large:peer-focus:block not-large:peer-[:not(:placeholder-shown)]:block",
-  "peer-disabled:bg-surface-2 peer-[[readonly]]:bg-surface-2",
-  TEXTAREA_LABEL_EDGE,
-);
-
-/**
- * {@link TEXTAREA_LABEL_STRIP}, stopped short of a classic scrollbar.
- *
- * A Windows / Linux desktop draws a textarea's vertical scrollbar INSIDE the border, in
- * a gutter it takes from the content box (15px in Chromium); a strip across the full
- * inner width would sit on top of the scrollbar's up arrow. So the gutter is measured —
- * border box less client width less the borders — and the strip ends where it begins.
- * On whichever side it is: `clientLeft` includes a gutter on the LEFT, which is where
- * Chromium and Firefox put it in a right-to-left field. The side is applied as an
- * inline-start / inline-end inset, so when `dir` flips afterwards and the scrollbar
- * follows it to the other edge, the strip does too without a re-measure. That corner
- * also loses its rounding, since it no longer meets the border.
- *
- * Overlay scrollbars (macOS, phones) take no gutter: the measurement is zero and the
- * strip spans the field. A ResizeObserver on the textarea re-measures when the
- * scrollbar comes or goes (it takes the content box with it) and when the field is
- * resized by hand. Not laid out — hidden in a closed panel, or jsdom — the CSS insets
- * stand until it is.
- *
- * It also writes the strip's lower edge (0.25, {@link TEXTAREA_LABEL_EDGE}) from the
- * textarea's scroll position: a passive `scroll` listener, plus the same observer, since
- * a resize can move the scroll without the user scrolling.
- */
-function TextareaLabelStrip() {
-  const ref = useRef<HTMLSpanElement>(null);
-  useLayoutEffect(() => {
-    const strip = ref.current;
-    const field = strip?.previousElementSibling;
-    if (!strip || !(field instanceof HTMLTextAreaElement)) return;
-    const fit = () => {
-      if (field.offsetWidth === 0) return;
-      const style = getComputedStyle(field);
-      const borderLeft = parseFloat(style.borderLeftWidth) || 0;
-      const borderRight = parseFloat(style.borderRightWidth) || 0;
-      const gutter = field.offsetWidth - field.clientWidth - borderLeft - borderRight;
-      // offsetWidth and clientWidth are whole pixels, so a field with no scrollbar can
-      // read ±1 here; no scrollbar is that thin.
-      const bar = gutter > 1.5;
-      const onLeft = field.clientLeft - borderLeft > 1.5;
-      // Kept as a LOGICAL side: a `dir` flipped later (a language switch) moves the
-      // scrollbar across without resizing anything, so nothing would re-measure —
-      // but it stays at the inline end, and so does an inline-end inset.
-      const rtl = style.direction === "rtl";
-      const atEnd = onLeft === rtl;
-      const border = (end: boolean) => (end === rtl ? borderLeft : borderRight);
-      strip.style.insetInlineEnd = bar && atEnd ? `${border(true) + gutter}px` : "";
-      strip.style.insetInlineStart = bar && !atEnd ? `${border(false) + gutter}px` : "";
-      strip.style.borderStartEndRadius = bar && atEnd ? "0" : "";
-      strip.style.borderStartStartRadius = bar && !atEnd ? "0" : "";
-    };
-    // The edge under the strip follows the scroll — see TEXTAREA_LABEL_EDGE. The line
-    // height is read each time, since a caller's class can change the type. Nothing to
-    // draw is no property at all (the CSS default is a 0px edge), so a field at rest
-    // carries exactly the strip it did in 0.24.
-    const follow = () => {
-      const edge = labelEdge(field.scrollTop, parseFloat(getComputedStyle(field).lineHeight));
-      if (edge.height > 0) {
-        strip.style.setProperty("--label-strip-edge", `${edge.height}px`);
-        strip.style.setProperty("--label-strip-edge-solid", `${edge.solid}px`);
-      } else {
-        strip.style.removeProperty("--label-strip-edge");
-        strip.style.removeProperty("--label-strip-edge-solid");
-      }
-    };
-    fit();
-    follow();
-    field.addEventListener("scroll", follow, { passive: true });
-    if (typeof ResizeObserver === "undefined") return () => field.removeEventListener("scroll", follow);
-    // A resize can move the scroll too (a taller field clamps it).
-    const observer = new ResizeObserver(() => {
-      fit();
-      follow();
-    });
-    observer.observe(field);
-    return () => {
-      field.removeEventListener("scroll", follow);
-      observer.disconnect();
-    };
-  }, []);
-  return <span ref={ref} aria-hidden data-slot="label-strip" className={TEXTAREA_LABEL_STRIP} />;
-}
-
-export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement>, FieldHelpProps {
-  label?: ReactNode;
-  /** See {@link Input}'s `invalid`. */
-  invalid?: boolean;
-  /** See {@link Input}'s `error`. */
-  error?: ReactNode;
-  /** See {@link Input}'s `hint` (keksdose K4): text is a caption under the field, a
-   *  {@link FieldHint} rides the label line (or, unlabelled, the end edge). */
-  hint?: ReactNode;
-  /** See {@link Input}'s `showCount` (keksdose K11): a live "12/80" under the field,
-   *  with `maxLength`, announced only near and at the limit. */
-  showCount?: boolean;
-  /** The counter's words. See {@link CharacterCountLabels}. */
-  countLabels?: Partial<CharacterCountLabels>;
-  /** The `<textarea>`. A React 19 ref prop since 0.34 — see {@link InputProps.ref}. */
-  ref?: Ref<HTMLTextAreaElement>;
-}
-
-export function Textarea(props: TextareaProps) {
-  const { ref, className, label, id, placeholder, invalid, error, hint, help, showCount, countLabels, ...rest } = props;
-  // See Input's `reserve`.
-  const reserve = "error" in props || "hint" in props || "showCount" in props;
-  const generated = useId();
-  const fieldId = id ?? generated;
-  const countId = useId();
-  const hintParts = useFieldHint(hint, rest["aria-describedby"], { help, name: label ?? rest["aria-label"] });
-  const maxLength = rest.maxLength;
-  const counting = Boolean(showCount) && typeof maxLength === "number" && maxLength > 0;
-  const length = useTypedLength(rest.value, rest.defaultValue);
-  const countText = useCharacterCountLabels(countLabels);
-  const { isInvalid, describedBy, errorEl } = useFieldError(
-    error,
-    invalid,
-    mergeDescribedBy(hintParts.describedBy, counting && countId),
-    rest["aria-invalid"],
-  );
-  const counter = counting ? (
-    <CharacterCount
-      id={countId}
-      used={length.used}
-      max={maxLength}
-      labels={countText}
-      caption={<FieldCaption parts={hintParts} className="mt-0" />}
-    />
-  ) : null;
-  const below = fieldBelow(hintParts, counter, errorEl);
-  const onChange = counting
-    ? (e: ChangeEvent<HTMLTextAreaElement>) => {
-        length.track(e.target.value);
-        rest.onChange?.(e);
-      }
-    : rest.onChange;
-  if (label === undefined) {
-    const endHint = hintParts.labelHint;
-    return (
-      <FieldGroup errorEl={below} reserve={reserve}>
-        <EndHintRow hint={endHint} className={className}>
-          <textarea
-            ref={ref}
-            id={id}
-            placeholder={placeholder}
-            {...rest}
-            aria-invalid={isInvalid || rest["aria-invalid"] || undefined}
-            aria-describedby={describedBy}
-            onChange={onChange}
-            className={cn(FIELD_BASE, endHint === undefined && className, isInvalid && FIELD_INVALID)}
-          />
-        </EndHintRow>
-      </FieldGroup>
-    );
-  }
-  const ownPlaceholder = hasPlaceholderText(placeholder);
-  return (
-    <FieldGroup errorEl={below} reserve={reserve}>
-      <FloatingField className={className} htmlFor={fieldId} label={label} hint={hintParts.labelHint}>
-        <textarea
-          ref={ref}
-          id={fieldId}
-          // The float trick's single space, unless the caller has a placeholder of its
-          // own — then that, shown on focus once the label is out of its way (kastlan
-          // 8, see FLOATING_PLACEHOLDER_ON_FOCUS).
-          placeholder={ownPlaceholder ? placeholder : " "}
-          {...rest}
-          aria-invalid={isInvalid || rest["aria-invalid"] || undefined}
-          aria-describedby={describedBy}
-          onChange={onChange}
-          className={cn(
-            FLOATING_INPUT_CLASS,
-            ownPlaceholder && FLOATING_PLACEHOLDER_ON_FOCUS,
-            isInvalid && FIELD_INVALID,
-          )}
-        />
-        {/* Between the textarea and the label, on purpose: after the textarea so it
-            is its `peer` and paints over its text, before the label so the label
-            paints over it. See TEXTAREA_LABEL_STRIP. */}
-        <TextareaLabelStrip />
-      </FloatingField>
-    </FieldGroup>
-  );
-}

package/src/components/tile-radio.tsx

@@ -1,332 +0,0 @@
-import { useId, useRef } from "react";
-import type { KeyboardEvent, ReactNode } from "react";
-import { Ban, Check } from "lucide-react";
-import { cn } from "../lib/cn";
-import { FOCUS_RING } from "./focus-ring";
-import { horizontalStep } from "../lib/direction";
-import { Tooltip } from "./tooltip";
-
-/**
- * A row of square tiles that behaves as ONE radio group — the machinery
- * {@link SwatchPicker} and {@link IconPicker} are built on, public since 0.22.0 for the
- * one-of-n pickers those two do not cover (kastlan's input audit: a choice whose tiles
- * show something of the app's own — a mark, a pattern, a symbol set the kit does not
- * ship).
- *
- * Keksdose had three of these (the category colours, the category symbols, the
- * transaction flags) and all three were rows of `aria-pressed` buttons: a separate
- * tab stop per tile, and "pressed" on a choice that is really one-of-n. The APG radio
- * group is the shape a screen reader expects for that ("Red, radio, 2 of 7, checked")
- * and the one a keyboard expects too — a single tab stop, arrows to move.
- *
- * ## The container is yours
- *
- * It renders the TILES only — no wrapper — so it can sit in a layout the caller owns
- * (a wrapping row, a grid, a row beside a search box). That element must carry the
- * group's semantics, as SwatchPicker's does:
- *
- * ```tsx
- * <div role="radiogroup" aria-labelledby={headingId} className="flex flex-wrap gap-1.5">
- *   <TileRadioGroup
- *     items={[{ key: "dots", label: "Dots" }, { key: "lines", label: "Lines" }]}
- *     checked={pattern}
- *     onSelect={(key) => key && setPattern(key)}
- *     renderTile={(item) => <PatternGlyph pattern={item.key} className={TILE_SIZE.md.glyph} />}
- *   />
- * </div>
- * ```
- *
- * `role="radiogroup"` and a name (`aria-label` or `aria-labelledby`) — without them a
- * screen reader hears radios that belong to nothing, and no "2 of 7". Set
- * `aria-disabled` on it as well when the whole group is `disabled`.
- *
- * ## What a tile is
- *
- * A square (28 / 32 / 44px, {@link TILE_SIZE}) holding `renderTile`'s content, NAMED by
- * the item's `label` (`aria-label`, so what is drawn inside is decoration) and showing
- * that label in a bubble on hover and focus — a row of unlabelled squares is the
- * complaint that put the bubble there. It is for choices that are SEEN: a colour, a
- * glyph, a pattern. A choice that has to be READ — a plan with a price and three lines
- * of features, an option with a sentence of explanation — is a {@link ChoiceCardGroup}
- * (`type="radio"`): a card names its option by its title and describes it by its text,
- * where a tile would hide the text behind a bubble and repeat it.
- *
- * No strings of its own: every name is an item's `label`, the "none" tile's included.
- *
- * ## A tile that cannot be chosen
- *
- * `disabled` takes a tile out of the choice AND out of reach: the arrow keys skip it
- * and Tab never lands on it, so a dimmed square says nothing about why. Give it a
- * `disabledReason` instead and it stays reachable, `aria-disabled`, with the reason in
- * its bubble and its description — and choosing it does nothing (0.23, the kit's later
- * list after keksdose K3; {@link Button}'s `disabledReason`, one tile at a time).
- */
-
-/** A tile's size: 28 / 32 / 44px — see {@link TILE_SIZE}. */
-export type TileSize = "sm" | "md" | "lg";
-
-/** 28 / 32 / 44px. `lg` is the touch target a phone surface wants (`min-h-11`). `glyph`
- *  and `swatch` are the content sizes the kit's own pickers draw inside each — use them
- *  in `renderTile` so a tile of the app's own matches theirs. */
-export const TILE_SIZE: Record<TileSize, { tile: string; glyph: string; swatch: string }> = {
-  sm: { tile: "size-7", glyph: "size-3.5", swatch: "size-4" },
-  md: { tile: "size-8", glyph: "size-4", swatch: "size-5" },
-  lg: { tile: "size-11", glyph: "size-5", swatch: "size-6" },
-};
-
-/** One tile, whatever it shows. `key` is `null` for the "none" entry — a tile of its
- *  own that leads back to nothing, since clicking a checked tile does not uncheck it. */
-export interface TileItem<T extends string> {
-  key: T | null;
-  label: string;
-  /** Said after the name, and shown in the bubble under it. Marks the tile with a
-   *  dot, so the note is visible without hovering every tile to find it. */
-  note?: string;
-  /** Out of the choice and out of reach: natively disabled, skipped by the arrow keys,
-   *  never the tab stop. */
-  disabled?: boolean;
-  /**
-   * Why this tile cannot be chosen right now — a colour another category already wears,
-   * a symbol only an owner may set. The tile LOOKS disabled but is `aria-disabled`, not
-   * `disabled`: Tab and the arrow keys still reach it, the reason shows in its bubble
-   * under its name (and its `note`) and describes it, and a click, Space / Enter or an
-   * arrow under automatic activation chooses nothing — the focus moves, the checked
-   * tile stays. Wins over `disabled`, as on {@link Button}; the whole group's
-   * `disabled` still wins over it.
-   */
-  disabledReason?: ReactNode;
-}
-
-export interface TileRadioGroupProps<T extends string> {
-  /** The tiles, in reading order. Render them inside a `role="radiogroup"` element
-   *  with a name — see the module note. */
-  items: TileItem<T>[];
-  /** The checked key, or `undefined` for "nothing is checked" (the mixed state, or
-   *  a value that is not among the options). */
-  checked: T | null | undefined;
-  onSelect: (key: T | null) => void;
-  /** "automatic" (default): an arrow key moves AND checks, the APG default. "manual":
-   *  arrows move focus only, Space or Enter checks — for a picker whose change is
-   *  expensive (a bulk edit that saves on every change). */
-  activation?: "automatic" | "manual";
-  /** Every tile disabled. Mark the container `aria-disabled` too. Default `false`. */
-  disabled?: boolean;
-  /** 28 / 32 / 44px tiles ({@link TILE_SIZE}). Default "md"; "lg" is the touch-target
-   *  size a phone surface wants. */
-  size?: TileSize;
-  /** What goes inside a tile — `aria-hidden` decoration, since the tile is named by
-   *  `label`. Not called for the `null` ("none") item, which shows the kit's "no"
-   *  glyph. The frame, the tick and the note's dot are drawn around it. */
-  renderTile: (item: TileItem<T>, selected: boolean) => ReactNode;
-  /** Extra classes for a tile, per item, merged after the kit's — so a `size-*` here
-   *  beats `size`'s (a tile that grows in a narrow card). */
-  tileClassName?: (item: TileItem<T>, selected: boolean) => string | undefined;
-}
-
-/**
- * The tile's frame. Selection is a thicker, darker frame AND a tick in the corner —
- * never a colour change alone,
- * because the thing inside a swatch tile IS a colour, and a red frame round a red dot
- * says nothing to a reader who cannot see red.
- *
- * `focus-visible` with an offset in the surface colour, as the checkbox does: the ring
- * must not be painted in the colour of the frame it touches.
- */
-const TILE_BASE =
-  "relative inline-flex shrink-0 items-center justify-center rounded-md border transition-colors " +
-  "focus:outline-none " +
-  FOCUS_RING +
-  " focus-visible:ring-offset-2 focus-visible:ring-offset-surface " +
-  "disabled:cursor-not-allowed disabled:opacity-50";
-const TILE_IDLE = "border-subtle bg-surface hover:border-strong hover:bg-hover";
-const TILE_SELECTED = "border-[var(--text-primary)] bg-surface ring-1 ring-[var(--text-primary)]";
-/** A locked tile: the disabled look without `disabled` — dimmed, a not-allowed cursor. */
-const TILE_LOCKED = "cursor-not-allowed opacity-50";
-/** …and no hover offer on an idle one, which cannot be chosen. Not on the selected
- *  tile, whose frame IS its state. */
-const TILE_LOCKED_IDLE = "hover:border-subtle hover:bg-surface";
-
-/** `undefined`, `null`, `false` and `""` are no reason — what `cond && "…"` gives. */
-function isLocked(item: TileItem<string>): boolean {
-  const r = item.disabledReason;
-  return r !== undefined && r !== null && r !== false && r !== "";
-}
-
-/** Out of reach: natively disabled. A reason keeps a `disabled` tile reachable. */
-function isOff(item: TileItem<string>): boolean {
-  return Boolean(item.disabled) && !isLocked(item);
-}
-
-/**
- * The tiles of one radio group, without the group element — render them inside a
- * `role="radiogroup"` with a name (the module note above has the example). One tab stop
- * (the checked tile, else the first that can be chosen), arrows to move — left and
- * right follow the page's direction — Home and End to the ends, and by default the
- * arrows choose as they go.
- */
-export function TileRadioGroup<T extends string>({
-  items,
-  checked,
-  onSelect,
-  activation = "automatic",
-  disabled = false,
-  size = "md",
-  renderTile,
-  tileClassName,
-}: TileRadioGroupProps<T>) {
-  const refs = useRef<Array<HTMLButtonElement | null>>([]);
-  const noteId = useId();
-  const reasonId = useId();
-  const s = TILE_SIZE[size];
-  const checkedIndex = checked === undefined ? -1 : items.findIndex((it) => it.key === checked);
-  // The ONE tab stop: the checked tile, else the first that can be reached — the APG
-  // rule, so Tab into a group with nothing checked still lands somewhere. A locked
-  // tile is reachable: landing on it is how its reason is read.
-  const tabStop = checkedIndex >= 0 && !isOff(items[checkedIndex]) ? checkedIndex : items.findIndex((it) => !isOff(it));
-
-  const onKeyDown = (e: KeyboardEvent<HTMLButtonElement>, index: number) => {
-    // Left and right are VISUAL directions: in a right-to-left page the row runs the
-    // other way. Up and down follow reading order either way — the APG's radio group
-    // treats them as previous/next, and the tiles wrap, so there is no column to keep.
-    const horizontal = horizontalStep(e.key, e.currentTarget);
-    let step: number | "first" | "last";
-    switch (horizontal ? "horizontal" : e.key) {
-      case "horizontal":
-        step = horizontal;
-        break;
-      case "ArrowDown":
-        step = 1;
-        break;
-      case "ArrowUp":
-        step = -1;
-        break;
-      case "Home":
-        step = "first";
-        break;
-      case "End":
-        step = "last";
-        break;
-      default:
-        return;
-    }
-    e.preventDefault();
-    // Locked tiles are in the walk; natively disabled ones are not.
-    const enabled = items.map((it, i) => (isOff(it) ? -1 : i)).filter((i) => i >= 0);
-    if (!enabled.length) return;
-    const at = enabled.indexOf(index);
-    let target: number;
-    if (step === "first") target = enabled[0];
-    else if (step === "last") target = enabled[enabled.length - 1];
-    // Wrapping, as a native radio group does: the last tile's "next" is the first.
-    else target = enabled[(at + step + enabled.length) % enabled.length];
-    refs.current[target]?.focus();
-    // Onto a locked tile the focus moves and the choice does not: the checked tile
-    // stays checked, and the next arrow walks on from here.
-    if (activation === "automatic" && !isLocked(items[target])) onSelect(items[target].key);
-  };
-
-  return (
-    <>
-      {items.map((item, i) => {
-        const selected = i === checkedIndex;
-        const locked = isLocked(item);
-        const describedBy = [item.note && `${noteId}-${i}`, locked && `${reasonId}-${i}`].filter(Boolean).join(" ");
-        const button = (
-          <button
-            ref={(el) => {
-              refs.current[i] = el;
-            }}
-            type="button"
-            role="radio"
-            aria-checked={selected}
-            aria-label={item.label}
-            // The note is a DESCRIPTION, read after the name and the state, not glued
-            // into the name — the punctuation between the two would be English's. So
-            // is a lock's reason, after the note.
-            aria-describedby={describedBy || undefined}
-            tabIndex={i === tabStop ? 0 : -1}
-            // A reason wins over the tile's own `disabled` (as on Button): reachable,
-            // and refusing. The whole group's `disabled` still wins over both.
-            disabled={disabled || isOff(item)}
-            aria-disabled={(locked && !disabled) || undefined}
-            // Clicking the checked tile again does nothing: a radio is not a toggle.
-            // "None" is the way back to nothing, and it is a tile of its own. A locked
-            // tile is never chosen.
-            onClick={() => !selected && !locked && onSelect(item.key)}
-            onKeyDown={(e) => onKeyDown(e, i)}
-            className={cn(
-              TILE_BASE,
-              s.tile,
-              selected ? TILE_SELECTED : TILE_IDLE,
-              locked && TILE_LOCKED,
-              locked && !selected && TILE_LOCKED_IDLE,
-              tileClassName?.(item, selected),
-            )}
-          >
-            {item.key === null ? <Ban aria-hidden className={cn(s.glyph, "text-muted")} /> : renderTile(item, selected)}
-            {item.note && (
-              <>
-                {/* A dot rather than a dimmed tile: dimming reads as "disabled", and a
-                    tile with a note is entirely available. */}
-                <span aria-hidden className="absolute end-0.5 top-0.5 size-1.5 rounded-full bg-[var(--text-muted)]" />
-                {/* `hidden` still serves as a description: aria-describedby reads
-                    hidden text, which is what keeps it out of the layout. */}
-                <span id={`${noteId}-${i}`} hidden>
-                  {item.note}
-                </span>
-              </>
-            )}
-            {/* The reason's description is a `hidden` copy, as on a locked Button: the
-                bubble exists only while hovered or focused once portalled, and a
-                description that comes and goes is read inconsistently. */}
-            {locked && (
-              <span id={`${reasonId}-${i}`} hidden>
-                {item.disabledReason}
-              </span>
-            )}
-            {selected && <SelectedTick />}
-          </button>
-        );
-        return (
-          // The bubble is the SIGHTED user's name for the tile — eight unlabelled
-          // squares are the complaint that put a bubble on Keksdose's (live #289).
-          // It wraps a span rather than the button, because a Tooltip hands its
-          // child an `aria-describedby`, and a tile named "Red" and described as
-          // "Red" is read out twice.
-          <Tooltip
-            key={item.key ?? "\u0000none"}
-            label={
-              item.note || locked ? (
-                <>
-                  <span className="block">{item.label}</span>
-                  {item.note && <span className="block font-normal text-muted">{item.note}</span>}
-                  {/* The reason in the body colour: it is the news, the note is
-                      standing context. */}
-                  {locked && <span className="block font-normal">{item.disabledReason}</span>}
-                </>
-              ) : (
-                item.label
-              )
-            }
-            portal
-          >
-            <span className="inline-flex">{button}</span>
-          </Tooltip>
-        );
-      })}
-    </>
-  );
-}
-
-/** The tick on a selected tile — a small badge in the corner, in the text colour on
- *  the surface colour, so it reads the same over every swatch colour. */
-function SelectedTick() {
-  return (
-    <span
-      aria-hidden
-      className="absolute -bottom-1 -end-1 inline-flex size-3.5 items-center justify-center rounded-full bg-[var(--text-primary)] text-[var(--bg-surface)]"
-    >
-      <Check strokeWidth={3} className="size-2.5" />
-    </span>
-  );
-}