@eifi1/ui-kit 0.33.1 → 0.35.0

package/src/components/confirm-dialog-labels.ts

@@ -0,0 +1,13 @@
+// The English words of ./confirm-dialog, in a module with no component code: the English
+// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one
+// chunk like the other languages (0.34, KS U8). ./confirm-dialog re-exports them.
+
+import type { ConfirmDialogLabels } from "./confirm-dialog";
+
+/** `satisfies` rather than a type annotation, so `.typed` stays known-callable for a
+ *  caller composing its own label from it. */
+export const DEFAULT_CONFIRM_DIALOG_LABELS = {
+  confirm: "Confirm",
+  cancel: "Cancel",
+  typed: (text: string) => `Type “${text}” to confirm`,
+} satisfies ConfirmDialogLabels;

package/src/components/confirm-dialog.tsx

@@ -5,8 +5,9 @@ import { useKitLabels } from "../i18n/kit-labels";
 import { TypedConfirmField, typedMatches } from "./danger-confirm";
 import type { TypedMatch } from "./danger-confirm";
 import { DialogFrame } from "./dialog-frame";
-import { Button } from "./ui";
+import { Button } from "./button";
 import { useWriteLock, writeLockFor, type CommitScope } from "./write-lock";
+import { DEFAULT_CONFIRM_DIALOG_LABELS } from "./confirm-dialog-labels";
 
 /**
  * The `confirmDialog` namespace of `<UiKitProvider labels>`: the two buttons' fallback
@@ -28,13 +29,8 @@ export interface ConfirmDialogLabels {
   typed: string | ((text: string) => string);
 }
 
-/** `satisfies` rather than a type annotation, so `.typed` stays known-callable for a
- *  caller composing its own label from it. */
-export const DEFAULT_CONFIRM_DIALOG_LABELS = {
-  confirm: "Confirm",
-  cancel: "Cancel",
-  typed: (text: string) => `Type “${text}” to confirm`,
-} satisfies ConfirmDialogLabels;
+// Defined in ./confirm-dialog-labels, which holds no component code (0.34, KS U8).
+export { DEFAULT_CONFIRM_DIALOG_LABELS };
 
 export type ConfirmTone = "danger" | "warning" | "neutral";
 

package/src/components/copy-button-labels.ts

@@ -0,0 +1,13 @@
+// The English words of ./copy-button, in a module with no component code: the English
+// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one
+// chunk like the other languages (0.34, KS U8). ./copy-button re-exports them.
+
+import type { CopyButtonLabels } from "./copy-button";
+
+export const DEFAULT_COPY_BUTTON_LABELS: CopyButtonLabels = {
+  copy: "Copy",
+  copied: "Copied",
+  failed: "Couldn’t copy",
+  copiedAnnouncement: "Copied to clipboard",
+  failedAnnouncement: "Couldn’t copy to the clipboard",
+};

package/src/components/copy-button.tsx

@@ -1,14 +1,17 @@
-import type { ButtonHTMLAttributes } from "react";
+import type { ButtonHTMLAttributes, Ref } from "react";
 import { Check, Copy, X } from "lucide-react";
 import { cn } from "../lib/cn";
-import { useKitLabels } from "../i18n/kit-labels";
+import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
 import { useAnnounce } from "../hooks/use-announce";
 import { useCopyToClipboard } from "../hooks/use-copy-to-clipboard";
 import type { CopyState } from "../hooks/use-copy-to-clipboard";
-import { Button, IconButton } from "./ui";
-import type { ButtonSize, ButtonTone, ButtonVariant, IconButtonSize, IconButtonTone } from "./ui";
+import { Button } from "./button";
+import { IconButton } from "./icon-button";
+import type { ButtonSize, ButtonTone, ButtonVariant } from "./button-look";
+import type { IconButtonSize, IconButtonTone } from "./icon-button";
 import { Tooltip } from "./tooltip";
 import type { TooltipSide } from "./tooltip";
+import { DEFAULT_COPY_BUTTON_LABELS } from "./copy-button-labels";
 
 /** The words a copy button says. The visible three are short on purpose (they
  *  replace the button's own text in the `label` variant); the two announcements
@@ -21,13 +24,8 @@ export interface CopyButtonLabels {
   failedAnnouncement: string;
 }
 
-export const DEFAULT_COPY_BUTTON_LABELS: CopyButtonLabels = {
-  copy: "Copy",
-  copied: "Copied",
-  failed: "Couldn’t copy",
-  copiedAnnouncement: "Copied to clipboard",
-  failedAnnouncement: "Couldn’t copy to the clipboard",
-};
+// Defined in ./copy-button-labels, which holds no component code (0.34, KS U8).
+export { DEFAULT_COPY_BUTTON_LABELS };
 
 export interface CopyButtonProps
   extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "onClick"> {
@@ -63,7 +61,11 @@ export interface CopyButtonProps
   resetAfter?: number;
   /** Called with the real outcome once the copy settles. */
   onCopied?: (ok: boolean) => void;
-  labels?: Partial<CopyButtonLabels>;
+  labels?: LabelOverride<CopyButtonLabels>;
+  /** The `<button>` in either variant — the {@link IconButton}'s or the {@link Button}'s,
+   *  never the tooltip's wrapper round it (0.35, round 0.35 R4, the follow-up to API-2).
+   *  It rides the rest of the props on to that kit button, whose own ref it is. */
+  ref?: Ref<HTMLButtonElement>;
 }
 
 const ICONS: Record<CopyState, typeof Copy> = { idle: Copy, copied: Check, failed: X };
@@ -111,7 +113,7 @@ export function CopyButton({
   const stateText = state === "copied" ? words.copied : state === "failed" ? words.failed : idleText;
   const Icon = ICONS[state];
   const iconTone =
-    state === "copied" ? "text-[var(--success)]" : state === "failed" ? "text-[var(--danger)]" : undefined;
+    state === "copied" ? "text-success" : state === "failed" ? "text-danger" : undefined;
 
   const onClick = async () => {
     const ok = await copy(typeof text === "function" ? text() : text);

package/src/components/country-select-labels.ts

@@ -0,0 +1,11 @@
+// The English words of ./country-select, in a module with no component code: the English
+// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one
+// chunk like the other languages (0.34, KS U8). ./country-select re-exports them.
+
+import type { CountrySelectLabels } from "./country-select";
+
+export const DEFAULT_COUNTRY_SELECT_LABELS: CountrySelectLabels = {
+  country: "Country",
+  search: "Search country",
+  others: "Other countries",
+};

package/src/components/country-select.tsx

@@ -3,23 +3,34 @@ import type { ComponentPropsWithoutRef, ReactNode, Ref } from "react";
 import { X } from "lucide-react";
 import { cn } from "../lib/cn";
 import { COUNTRY_CODES, countryName, normalizeCountryCode } from "../lib/countries";
-import { FieldChevron, FIELD_FLOATING_PAD, FIELD_INVALID, FIELD_TRIGGER, FloatingField } from "./ui";
-import { Tooltip } from "./tooltip";
-import { CurrencyFlag } from "./currency-select";
+import { rankMatch } from "../lib/text-match";
+import {
+  FieldChevron,
+  FIELD_FLOATING_PAD,
+  FIELD_INVALID,
+  FIELD_TRIGGER,
+  FloatingField,
+} from "./field-base";
 import {
-  ComboboxPanel,
-  useComboboxCore,
-  useComboboxFieldError,
-  type ComboOption,
-} from "./combobox-core";
-import { assignRef, hasMessage, mergeDescribedBy } from "./choice-parts";
-import { useCommitReason, type CommitScope } from "./write-lock";
+  assignRef,
+  EndHintRow,
+  LockedReason,
+  mergeDescribedBy,
+  useFieldMessages,
+  useLockReason,
+  type DisabledReasonDisplay,
+} from "./field-parts";
+import { CurrencyFlag } from "./currency-select";
+import { ComboboxPanel, useComboboxCore, type ComboOption } from "./combobox-core";
+import type { CommitScope } from "./write-lock";
 import {
   DEFAULT_COMBOBOX_LABELS,
   DEFAULT_COMMON_LABELS,
   useKitLabels,
   useKitLocale,
+  type LabelOverride,
 } from "../i18n/kit-labels";
+import { DEFAULT_COUNTRY_SELECT_LABELS } from "./country-select-labels";
 
 // ── Labels ────────────────────────────────────────────────────────────────────
 
@@ -38,11 +49,8 @@ export interface CountrySelectLabels {
   others: string;
 }
 
-export const DEFAULT_COUNTRY_SELECT_LABELS: CountrySelectLabels = {
-  country: "Country",
-  search: "Search country",
-  others: "Other countries",
-};
+// Defined in ./country-select-labels, which holds no component code (0.34, KS U8).
+export { DEFAULT_COUNTRY_SELECT_LABELS };
 
 // ── Props ─────────────────────────────────────────────────────────────────────
 
@@ -137,10 +145,14 @@ export interface CountrySelectProps<Clearable extends boolean = false>
   /**
    * Why the country cannot be changed — {@link Button}'s `disabledReason`, for a field
    * that saves itself. The trigger stays focusable and `aria-disabled`, the list does
-   * not open and `onChange` never fires; the reason is in the kit {@link Tooltip} and
+   * not open and `onChange` never fires; the reason is a line under the field at Large
+   * and on a touch screen, else in the kit {@link Tooltip} (`disabledReasonDisplay`), and
    * on the trigger's `aria-describedby`. Wins over `disabled`.
    */
   disabledReason?: ReactNode;
+  /** Where the reason shows — {@link Button}'s `disabledReasonDisplay`: a line under the
+   *  field at Large and on a touch screen by default, the tooltip otherwise (DUP-3). */
+  disabledReasonDisplay?: DisabledReasonDisplay;
   /**
    * This select SAVES on change (a settings row with no Save button). Under a locked
    * {@link WriteLockProvider} it is locked the `disabledReason` way, with the lock's
@@ -153,7 +165,7 @@ export interface CountrySelectProps<Clearable extends boolean = false>
   locale?: string;
   /** Per-instance overrides of {@link CountrySelectLabels}, over the provider's
    *  `countrySelect` namespace, over English. */
-  labels?: Partial<CountrySelectLabels>;
+  labels?: LabelOverride<CountrySelectLabels>;
   /**
    * Name the trigger by an element of the caller's — a form's own label above the
    * field, which is how `RhfCountrySelect` names it. The trigger is then named by
@@ -165,32 +177,19 @@ export interface CountrySelectProps<Clearable extends boolean = false>
   "aria-labelledby"?: string;
 }
 
-/** Fold a name for search: no case, no accents — "osterreich" finds Österreich, "cote"
- *  finds Côte d'Ivoire. A keyboard without the letter must still reach the country. */
-function fold(s: string): string {
-  return s.normalize("NFD").replace(/\p{M}/gu, "").toLowerCase();
-}
-
 interface Entry {
   code: string;
   name: string;
-  folded: string;
-}
-
-/** How well `e` answers `q` (already folded): the code itself (a two-letter query
- *  "ch" means Switzerland before it means Chad), then the start of the name, then
- *  anywhere in it. `-1` for no match. */
-function rank(e: Entry, q: string): number {
-  if (e.code.toLowerCase() === q) return 0;
-  if (e.folded.startsWith(q)) return 1;
-  return e.folded.includes(q) ? 2 : -1;
 }
 
 /** Best rank first; a stable sort, so equal ranks keep the collated (or preferred)
- *  order they came in. */
-function search(entries: Entry[], q: string): Entry[] {
+ *  order they came in. The rank is the kit's one (`rankMatch`, DUP-5 — written here
+ *  first): the code itself (a two-letter query "ch" means Switzerland before it means
+ *  Chad), then the start of the name, then anywhere in it, with accents and case folded
+ *  — "osterreich" finds Österreich, "cote" Côte d'Ivoire. */
+function search(entries: Entry[], q: string, locale: string): Entry[] {
   return entries
-    .map((e) => ({ e, r: rank(e, q) }))
+    .map((e) => ({ e, r: rankMatch(e.name, q, { code: e.code, locale }) }))
     .filter((x) => x.r >= 0)
     .sort((a, b) => a.r - b.r)
     .map((x) => x.e);
@@ -231,10 +230,10 @@ function collator(locale: string): Intl.Collator {
  * is where the write lock lives: `EntityCombobox`'s is a native `disabled` button,
  * and a locked field has to stay focusable to say why.
  *
- * The search is this component's own too: it folds accents and case ("osterreich"
+ * The ranking is this component's own too: it folds accents and case ("osterreich"
  * finds Österreich), matches the code ("ch" ranks Switzerland first), and ranks
- * name-starts above name-contains. The panel is handed those rows in place of the
- * core's plain substring filter.
+ * name-starts above name-contains — the kit's `rankMatch`, which began here. The panel
+ * is handed those rows in place of the core's filter, which does not rank.
  *
  * Field anatomy as on every field: floating `label`, `hint`, `error`, `invalid`; the
  * trigger is named "label: value" as the other trigger pickers are.
@@ -255,6 +254,7 @@ export function CountrySelect<Clearable extends boolean = false>({
   placeholder,
   disabled,
   disabledReason: ownReason,
+  disabledReasonDisplay,
   commit,
   clearable,
   clearLabel,
@@ -294,10 +294,7 @@ export function CountrySelect<Clearable extends boolean = false>({
         pool.push(code);
       }
     }
-    const entry = (code: string): Entry => {
-      const name = countryName(code, locale);
-      return { code, name, folded: fold(name) };
-    };
+    const entry = (code: string): Entry => ({ code, name: countryName(code, locale) });
     const firsts: Entry[] = [];
     const picked = new Set<string>();
     for (const raw of preferredKey ? preferredKey.split(",") : []) {
@@ -334,19 +331,19 @@ export function CountrySelect<Clearable extends boolean = false>({
     [ref, triggerRef],
   );
 
-  const q = fold(query.trim());
+  const q = query.trim();
   const results = useMemo(() => {
-    const firsts = q ? search(top, q) : top;
-    const below = q ? search(others, q) : others;
+    const firsts = q ? search(top, q, locale) : top;
+    const below = q ? search(others, q, locale) : others;
     // The heading only where it separates something: with no preferred country in
     // view it would head the whole list and divide nothing.
     const heading = firsts.length > 0 ? text.others : undefined;
     return [...firsts.map((e) => toOption(e, flags)), ...below.map((e) => toOption(e, flags, heading))];
-  }, [top, others, q, text.others, flags]);
+  }, [top, others, q, text.others, flags, locale]);
 
   // ── The lock ──────────────────────────────────────────────────────────────
-  const reason = useCommitReason(commit, ownReason);
-  const locked = hasMessage(reason);
+  const lock = useLockReason(commit, ownReason);
+  const locked = lock.locked;
   const inert = locked || Boolean(disabled);
   // A lock (or `disabled`) arriving while the list is up closes it — adjusted while
   // rendering, as the core adjusts its own query, so no frame shows a list that can
@@ -357,17 +354,17 @@ export function CountrySelect<Clearable extends boolean = false>({
   const generated = useId();
   const triggerId = id ?? generated;
   const listboxId = `${generated}-listbox`;
-  const hintId = useId();
-  const reasonId = useId();
-  // Text is a caption under the field; a FieldHint rides the label line. See `hint`.
-  const textHint = (typeof hint === "string" && hint !== "") || typeof hint === "number";
-  const field = useComboboxFieldError(
+  // Text is a caption under the field; a FieldHint rides the label line, and is that
+  // caption at Large and on touch (§4). The caller's ids, the caption, a lock's reason,
+  // the error — Select's order. Through useFieldMessages since 0.34 (DUP-2, DUP-8).
+  const field = useFieldMessages({
+    hint,
     error,
-    invalid || ariaInvalid === true || ariaInvalid === "true",
-    // The caller's, then the standing advice, then (inside) the error — the order every
-    // field keeps — and the lock's reason last, while there is one.
-    mergeDescribedBy(ariaDescribedBy, textHint && hintId),
-  );
+    invalid,
+    describedBy: ariaDescribedBy,
+    ariaInvalid,
+    reasonId: locked && lock.reasonId,
+  });
 
   const code = normalizeCountryCode(value);
   const selectedName = code ? countryName(code, locale) : undefined;
@@ -426,7 +423,7 @@ export function CountrySelect<Clearable extends boolean = false>({
       aria-labelledby={labelledBy}
       aria-invalid={field.isInvalid || undefined}
       aria-required={ariaRequired}
-      aria-describedby={mergeDescribedBy(field.describedBy, locked && reasonId)}
+      aria-describedby={field.describedBy}
       // The focusable kind of disabled while locked (Button's rule): native `disabled`
       // would take the field out of the tab order, and the reason with it.
       disabled={locked ? undefined : disabled}
@@ -463,10 +460,11 @@ export function CountrySelect<Clearable extends boolean = false>({
       <span className="flex min-w-0 items-center gap-2">
         {flags && code && <CurrencyFlag country={code.toLowerCase()} />}
         {/* A long name ("Saint Vincent and the Grenadines") truncates rather than
-            widening the field: the kit is checked at 390px. */}
+            widening the field: the kit is checked at 390px. From Large up it wraps and
+            the trigger grows instead (text size §10.17, round 0.34 T1). */}
         <span
           id={valueId}
-          className={cn("truncate", selectedName === undefined && "text-[var(--text-placeholder)]")}
+          className={cn("truncate-until-large", selectedName === undefined && "text-placeholder")}
         >
           {selectedName ?? emptyText}
         </span>
@@ -484,7 +482,7 @@ export function CountrySelect<Clearable extends boolean = false>({
             e.stopPropagation();
             clear();
           }}
-          className="absolute end-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-[var(--text-placeholder)] hover:text-[var(--text-secondary)]"
+          className="absolute end-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-placeholder hover:text-secondary"
         >
           <X aria-hidden className="size-4" />
         </span>
@@ -495,35 +493,27 @@ export function CountrySelect<Clearable extends boolean = false>({
   );
 
   const control = locked ? (
-    // In a FRAGMENT, as Button does, so the Tooltip does not clone its bubble into the
-    // description as well — the hidden copy is what `aria-describedby` points at.
-    <Tooltip label={reason} className="flex w-full">
-      <>
-        {trigger}
-        <span id={reasonId} hidden>
-          {reason}
-        </span>
-      </>
-    </Tooltip>
+    // Button's frame: the line under the trigger, or the Tooltip with a hidden copy for
+    // `aria-describedby`. `items-stretch`: in the line's column the trigger keeps the
+    // field's full width.
+    <LockedReason lock={lock} display={disabledReasonDisplay} className="flex w-full items-stretch">
+      {trigger}
+    </LockedReason>
   ) : (
     trigger
   );
 
-  const labelHint = textHint ? undefined : hasMessage(hint) ? hint : undefined;
   const box =
     label !== undefined ? (
-      <FloatingField htmlFor={triggerId} label={label} staticLabel hint={labelHint}>
+      <FloatingField htmlFor={triggerId} label={label} staticLabel hint={field.labelHint}>
         {control}
       </FloatingField>
-    ) : labelHint !== undefined ? (
-      // No label line to ride: the "?" goes at the field's end, outside the box, as on
-      // an unlabelled Select.
-      <div className="flex items-center gap-1.5">
-        <div className="relative min-w-0 flex-1">{control}</div>
-        <span className="flex shrink-0 items-center">{labelHint}</span>
-      </div>
     ) : (
-      <div className="relative">{control}</div>
+      // No label line to ride: a "?" goes at the field's end, outside the box, as on an
+      // unlabelled Select.
+      <EndHintRow hint={field.labelHint}>
+        <div className="relative">{control}</div>
+      </EndHintRow>
     );
 
   return (
@@ -531,12 +521,7 @@ export function CountrySelect<Clearable extends boolean = false>({
     // description and the invalid state are on the trigger above.
     <div {...rest} className={className}>
       {box}
-      {textHint && (
-        <p id={hintId} className="mt-1 text-caption leading-tight text-[var(--text-muted)]">
-          {hint}
-        </p>
-      )}
-      {field.errorEl}
+      {field.below}
       <ComboboxPanel
         // The core with the rows ranked above in place of its own filter's.
         core={{ ...core, results }}

package/src/components/currency-option-list.tsx

@@ -0,0 +1,182 @@
+import { useMemo } from "react";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import { cn } from "../lib/cn";
+import { foldForSearch } from "../lib/text-match";
+import { ComboboxPanel, type ComboboxCore, type ComboOption } from "./combobox-core";
+import { CURRENCIES, type CurrencyOption } from "../currencies";
+
+// The one list both currency pickers render (round 0.34 Wave 2, DUP-4). CurrencySelect
+// re-exports the data under its own name, as it always has; the list is package-private.
+// Its own module, so AmountInput can render the list without a cycle through
+// currency-select. The data itself is ../currencies since 0.35: an entry of its own that
+// imports nothing, which an app's build can read in Node (keksdose's flag subset).
+export { CURRENCIES };
+export type { CurrencyOption };
+
+export interface CurrencyFlagProps extends ComponentPropsWithRef<"span"> {
+  /** ISO 3166-1 alpha-2, lowercase — the class flag-icons keys its sprite by. */
+  country: string;
+}
+
+export function CurrencyFlag({ country, className, ...rest }: CurrencyFlagProps) {
+  return (
+    <span
+      {...rest}
+      // Stays `aria-hidden` whatever a caller passes: the flag is a picture of the
+      // code printed next to it, and a reader that met both would hear the currency
+      // twice.
+      aria-hidden
+      className={cn("fi inline-block w-5 h-[0.9375rem] rounded-sm shadow-[0_0_0_1px_rgba(0,0,0,0.08)] shrink-0", `fi-${country}`, className)}
+    />
+  );
+}
+
+const CURRENCY_BY_CODE = new Map(CURRENCIES.map((c) => [c.code, c]));
+
+export function getCurrency(code: string | null | undefined): CurrencyOption | undefined {
+  return code ? CURRENCY_BY_CODE.get(code.toUpperCase()) : undefined;
+}
+
+/** The name to SHOW for a currency: the caller's translation if they have one for
+ *  that code; else, when a `locale` is known, the name `Intl.DisplayNames` has for
+ *  it in that locale; else the English name {@link CURRENCIES} carries. Shared with
+ *  AmountInput, which renders the same list from the same data.
+ *
+ *  `Intl` only when a locale was actually GIVEN (by prop or `<UiKitProvider>`): an
+ *  app that never set one keeps the shipped English names it has always shown,
+ *  rather than whatever language the test runner or the browser happens to be in. */
+export function currencyName(
+  c: CurrencyOption,
+  names?: Record<string, string>,
+  locale?: string,
+): string {
+  const own = names?.[c.code];
+  if (own !== undefined) return own;
+  if (locale) {
+    try {
+      const shown = new Intl.DisplayNames([locale], { type: "currency" }).of(c.code);
+      if (shown && shown !== c.code) return shown;
+    } catch {
+      // A malformed tag, or a runtime without `DisplayNames`: the shipped name.
+    }
+  }
+  return c.name;
+}
+
+export interface CurrencyOptionListProps {
+  /** The host's `useComboboxCore`: its trigger, its open state, its query. */
+  core: ComboboxCore<string>;
+  /** What the host's trigger names in `aria-controls`. */
+  listboxId: string;
+  /** The chosen code, if any — selected and checked in the list. */
+  value: string | null | undefined;
+  /** A currency was picked. The host closes the list. */
+  onChoose: (code: string) => void;
+  /** Only these ISO codes, in this order; codes the kit has no definition for are
+   *  dropped. Default every one of {@link CURRENCIES}. */
+  codes?: readonly string[];
+  /** Translated names by code — see {@link currencyName}. */
+  currencyNames?: Record<string, string>;
+  locale?: string;
+  searchPlaceholder: string;
+  /** The phone sheet's title — the field's name. */
+  sheetTitle: ReactNode;
+}
+
+/**
+ * The currency list — its filter and its rows — that CurrencySelect and AmountInput's
+ * currency chip both render, on the picker family's `ComboboxPanel` (round 0.34 Wave 2,
+ * DUP-4 + BUG-12).
+ *
+ * The chip's list was a hand copy of CurrencySelect's, and it had drifted: the name kept a
+ * plain `truncate` where T1 made CurrencySelect's wrap from Large up, it took no `options`
+ * subset, it had no check mark and no listbox id, and it was a fixed 16rem where #308 had
+ * given CurrencySelect a panel that grows to the full names. And both were lists of plain
+ * buttons under a trigger that promised a listbox. On the shared panel they are a listbox
+ * of options, the chosen one selected, with the arrow keys, the live result count, the
+ * phone sheet (live #200) and portal anchoring (dev#548: an `overflow` ancestor clipped
+ * the absolute panel's first third away).
+ *
+ * The panel hangs from the trigger's END edge and grows toward the start, as wide as the
+ * names need up to 20rem and the glass (feedback #308: a field with content after it is
+ * not pushed past the page).
+ */
+export function CurrencyOptionList({
+  core,
+  listboxId,
+  value,
+  onChoose,
+  codes,
+  currencyNames,
+  locale,
+  searchPlaceholder,
+  sheetTitle,
+}: CurrencyOptionListProps) {
+  // Keyed on the codes' CONTENTS: an inline `options={["EUR", "CHF"]}` is a new array
+  // every render.
+  const codesKey = codes?.join(",");
+  const pool = useMemo(
+    () =>
+      codesKey === undefined
+        ? CURRENCIES
+        : // The caller's order; codes the kit has no definition for are dropped.
+          codesKey
+            .split(",")
+            .map((code) => getCurrency(code))
+            .filter((c): c is CurrencyOption => c !== undefined),
+    [codesKey],
+  );
+  const named = useMemo(
+    () => pool.map((c) => ({ c, name: currencyName(c, currencyNames, locale) })),
+    [pool, currencyNames, locale],
+  );
+  const byCode = useMemo(() => new Map(named.map((n) => [n.c.code, n])), [named]);
+
+  // The code, the name the row SHOWS (so a translated list is searchable in the language
+  // it is written in) and the symbol — folded as every kit list folds (DUP-5).
+  const query = core.query;
+  const results = useMemo(() => {
+    const q = foldForSearch(query.trim(), locale);
+    const hits = q
+      ? named.filter(({ c, name }) => [c.code, name, c.symbol].some((s) => foldForSearch(s, locale).includes(q)))
+      : named;
+    return hits.map(
+      ({ c, name }): ComboOption<string> => ({
+        value: c.code,
+        label: name,
+        icon: <CurrencyFlag country={c.country} />,
+      }),
+    );
+  }, [named, query, locale]);
+
+  const chosen = getCurrency(value)?.code;
+  return (
+    <ComboboxPanel
+      // The core with the currency filter's rows in place of its own.
+      core={{ ...core, results }}
+      listboxId={listboxId}
+      searchPlaceholder={searchPlaceholder}
+      sheetTitle={sheetTitle}
+      isSelected={(code) => code === chosen}
+      onChoose={(o) => onChoose(o.value)}
+      showCreate={false}
+      onCreate={() => {}}
+      createContent={null}
+      width={{ fit: true, maxRem: 20 }}
+      align="end"
+      renderOption={(o) => {
+        const row = byCode.get(o.value);
+        if (!row) return o.label;
+        return (
+          <>
+            <span className="w-8 shrink-0 font-mono text-muted">{row.c.symbol}</span>{" "}
+            <span className="shrink-0 font-medium text-primary">{row.c.code}</span>{" "}
+            {/* The name wraps from Large up (round 0.34 T1); the code beside it is what a
+                reader scans for, and it never shrinks. */}
+            <span className="min-w-0 truncate-until-large text-muted">{row.name}</span>
+          </>
+        );
+      }}
+    />
+  );
+}