@eifi1/ui-kit 0.51.3 → 0.51.5

package/src/components/column-mapper.tsx

@@ -12,25 +12,14 @@ import {
   readTextFile,
   roleOfColumn,
 } from "../lib/column-mapping";
-import type {
-  ColumnMapperResult,
-  ColumnMapping,
-  ColumnRole,
-} from "../lib/column-mapping";
+import type { ColumnMapperResult, ColumnMapping, ColumnRole } from "../lib/column-mapping";
 import { parseTextTable } from "../lib/table-text";
 import type { TableSeparator, TextTable } from "../lib/table-text";
 import { AlertBanner } from "./alert-banner";
 import { Checkbox } from "./checkbox";
 import { Disclosure } from "./disclosure";
 import { FileButton, useFilePicker } from "./file-button";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeaderCell,
-  TableRow,
-} from "./table";
+import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from "./table";
 import type { FieldHelpProps } from "./field-parts";
 import { Select } from "./select";
 import { Textarea } from "./textarea";
@@ -142,11 +131,7 @@ const UNREAD_LISTED = 100;
  *  .tsv, … files" rather than a list of MIME types; the parse is the real check. */
 const DEFAULT_ACCEPT = ".csv,.tsv,.txt,.dat,.asc";
 
-function formatList(
-  items: string[],
-  type: "conjunction" | "disjunction",
-  locale: string | undefined,
-): string {
+function formatList(items: string[], type: "conjunction" | "disjunction", locale: string | undefined): string {
   try {
     return new Intl.ListFormat(locale, { type, style: "long" }).format(items);
   } catch {
@@ -179,10 +164,7 @@ export type ColumnRoleTableRowProps = Omit<
 > &
   DataAttributes;
 
-export interface ColumnRoleTableProps<
-  R extends string,
-  M extends ColumnMapping<R> = ColumnMapping<R>,
-> {
+export interface ColumnRoleTableProps<R extends string, M extends ColumnMapping<R> = ColumnMapping<R>> {
   /** The columns' names — the file's header line — or `null` for a table without one
    *  (each column is then "Column 1", "Column 2", …). */
   header: readonly string[] | null;
@@ -271,10 +253,7 @@ export interface ColumnRoleTableProps<
  * focused behind the fade is scrolled clear of it, cell and all, and the Table's
  * wrapper says which ends are cut in `data-overflow`.
  */
-export function ColumnRoleTable<
-  R extends string,
-  M extends ColumnMapping<R> = ColumnMapping<R>,
->({
+export function ColumnRoleTable<R extends string, M extends ColumnMapping<R> = ColumnMapping<R>>({
   header,
   rows,
   width: widthProp,
@@ -289,38 +268,22 @@ export function ColumnRoleTable<
   labels: labelsProp,
   className,
 }: ColumnRoleTableProps<R, M>) {
-  const labels: ColumnMapperLabels = useKitLabels(
-    "columnMapper",
-    DEFAULT_COLUMN_MAPPER_LABELS,
-    labelsProp,
-  );
+  const labels: ColumnMapperLabels = useKitLabels("columnMapper", DEFAULT_COLUMN_MAPPER_LABELS, labelsProp);
   const locale = useKitLocale();
   const shown = rows.slice(0, previewRows);
-  const width =
-    widthProp ??
-    shown.reduce(
-      (widest, row) => Math.max(widest, row.length),
-      header?.length ?? 0,
-    );
+  const width = widthProp ?? shown.reduce((widest, row) => Math.max(widest, row.length), header?.length ?? 0);
   const columns = Array.from({ length: width }, (_, index) => index);
   const total = totalRows ?? rows.length;
-  const nameOf = (column: number) =>
-    header?.[column] || labels.columnN(column + 1);
-  const labelOf = (value: R) =>
-    roles.find((role) => role.value === value)?.label ?? value;
+  const nameOf = (column: number) => header?.[column] || labels.columnN(column + 1);
+  const labelOf = (value: R) => roles.find((role) => role.value === value)?.label ?? value;
   const gaps = missingRoles(roles, mapping, width).map((gap) =>
-    gap.length === 1
-      ? labelOf(gap[0])
-      : labels.oneOf(formatList(gap.map(labelOf), "disjunction", locale)),
+    gap.length === 1 ? labelOf(gap[0]) : labels.oneOf(formatList(gap.map(labelOf), "disjunction", locale)),
   );
   // The required mark only where it tells one option from another.
   const markRequired = roles.some((role) => role.required !== true);
 
   return (
-    <div
-      className={cn("min-w-0 space-y-1.5", className)}
-      data-slot="column-role-table"
-    >
+    <div className={cn("min-w-0 space-y-1.5", className)} data-slot="column-role-table">
       <Table density="compact" framed edgeFade aria-label={labels.table}>
         <TableHead>
           <TableRow>
@@ -328,14 +291,8 @@ export function ColumnRoleTable<
               const role = roleOfColumn(roles, mapping, column);
               const name = nameOf(column);
               return (
-                <TableHeaderCell
-                  key={column}
-                  scope="col"
-                  className="min-w-36 py-2 align-top"
-                >
-                  <span className="block max-w-56 truncate pb-1 text-caption font-normal text-muted">
-                    {name}
-                  </span>
+                <TableHeaderCell key={column} scope="col" className="min-w-36 py-2 align-top">
+                  <span className="block max-w-56 truncate pb-1 text-caption font-normal text-muted">{name}</span>
                   <Select
                     size="sm"
                     className="w-full"
@@ -353,9 +310,7 @@ export function ColumnRoleTable<
                           roles,
                           mapping,
                           column,
-                          event.target.value === ""
-                            ? null
-                            : (event.target.value as R),
+                          event.target.value === "" ? null : (event.target.value as R),
                         ),
                       )
                     }
@@ -368,13 +323,9 @@ export function ColumnRoleTable<
                           key={option.value}
                           value={option.value}
                           // The short mark on screen, the word for a screen reader.
-                          aria-label={
-                            marked ? labels.requiredRole(option.label) : undefined
-                          }
+                          aria-label={marked ? labels.requiredRole(option.label) : undefined}
                         >
-                          {marked
-                            ? (labels.requiredRoleShort ?? markedShort)(option.label)
-                            : option.label}
+                          {marked ? (labels.requiredRoleShort ?? markedShort)(option.label) : option.label}
                         </option>
                       );
                     })}
@@ -390,31 +341,22 @@ export function ColumnRoleTable<
               {columns.map((column) => (
                 <TableCell
                   key={column}
-                  data-ignored={
-                    roleOfColumn(roles, mapping, column) === null || undefined
-                  }
+                  data-ignored={roleOfColumn(roles, mapping, column) === null || undefined}
                   className={cn(
                     "font-mono whitespace-nowrap",
                     // Dimmed, not hidden: its values are what tell you whether ignoring
                     // it was right.
-                    roleOfColumn(roles, mapping, column) === null &&
-                      "text-muted",
+                    roleOfColumn(roles, mapping, column) === null && "text-muted",
                   )}
                 >
-                  <span className="block max-w-56 truncate">
-                    {row[column] ?? ""}
-                  </span>
+                  <span className="block max-w-56 truncate">{row[column] ?? ""}</span>
                 </TableCell>
               ))}
             </TableRow>
           ))}
         </TableBody>
       </Table>
-      {total > shown.length && (
-        <p className="text-xs text-muted">
-          {labels.previewOf(shown.length, total)}
-        </p>
-      )}
+      {total > shown.length && <p className="text-xs text-muted">{labels.previewOf(shown.length, total)}</p>}
       {gaps.length > 0 && (
         <AlertBanner tone="warning" variant="inline" size="sm" block>
           {labels.missing(formatList(gaps, "conjunction", locale))}
@@ -477,8 +419,7 @@ interface MapperState<R extends string> {
   mapping: ColumnMapping<R>;
 }
 
-const hasFiles = (event: DragEvent) =>
-  Array.from(event.dataTransfer?.types ?? []).includes("Files");
+const hasFiles = (event: DragEvent) => Array.from(event.dataTransfer?.types ?? []).includes("Files");
 
 /**
  * Paste, drop or choose a table, see what it was read as, and say which column is
@@ -517,13 +458,8 @@ export function ColumnMapper<R extends string>({
   labels: labelsProp,
   className,
 }: ColumnMapperProps<R>) {
-  const labels: ColumnMapperLabels = useKitLabels(
-    "columnMapper",
-    DEFAULT_COLUMN_MAPPER_LABELS,
-    labelsProp,
-  );
-  const firstMapping = (table: TextTable) =>
-    guess ? guess(table) : guessMapping(roles, table.header, table.width);
+  const labels: ColumnMapperLabels = useKitLabels("columnMapper", DEFAULT_COLUMN_MAPPER_LABELS, labelsProp);
+  const firstMapping = (table: TextTable) => (guess ? guess(table) : guessMapping(roles, table.header, table.width));
   const [state, setState] = useState<MapperState<R>>(() => {
     const table = parseTextTable(defaultText);
     return {
@@ -544,19 +480,14 @@ export function ColumnMapper<R extends string>({
 
   const commit = (next: MapperState<R>) => {
     setState(next);
-    onChange(
-      next.table.width === 0
-        ? null
-        : readMappedTable(next.table, roles, next.mapping),
-    );
+    onChange(next.table.width === 0 ? null : readMappedTable(next.table, roles, next.mapping));
   };
 
   /** New text. `fresh` (a file): the reader's header answer and the mapping start over. */
   const take = (text: string, fresh: boolean) => {
     const header = fresh ? null : state.header;
     const table = parseTextTable(text, header === null ? {} : { header });
-    const keep =
-      !fresh && table.width === state.table.width && state.table.width > 0;
+    const keep = !fresh && table.width === state.table.width && state.table.width > 0;
     commit({
       text,
       header,
@@ -577,8 +508,7 @@ export function ColumnMapper<R extends string>({
       .finally(() => setReading(false));
   };
 
-  const refuse = (rejections: { message: string }[]) =>
-    setRefusal(rejections[0]?.message ?? null);
+  const refuse = (rejections: { message: string }[]) => setRefusal(rejections[0]?.message ?? null);
 
   // A file dropped on the paste box. The same screening as the button's.
   const drop = useFilePicker({
@@ -601,10 +531,7 @@ export function ColumnMapper<R extends string>({
   const unread = result.unread;
 
   return (
-    <div
-      className={cn("min-w-0 space-y-3", className)}
-      data-slot="column-mapper"
-    >
+    <div className={cn("min-w-0 space-y-3", className)} data-slot="column-mapper">
       <Textarea
         label={label ?? labels.paste}
         hint={hint ?? labels.pasteHint}
@@ -616,10 +543,7 @@ export function ColumnMapper<R extends string>({
         autoCorrect="off"
         value={state.text}
         disabled={disabled}
-        className={cn(
-          "font-mono text-xs",
-          dragOver && "rounded-md ring-2 ring-brand",
-        )}
+        className={cn("font-mono text-xs", dragOver && "rounded-md ring-2 ring-brand")}
         data-drag-over={dragOver || undefined}
         onChange={(event: ChangeEvent<HTMLTextAreaElement>) => {
           setRefusal(null);
@@ -684,10 +608,7 @@ export function ColumnMapper<R extends string>({
 
       {table.width > 0 && (
         <>
-          <p
-            className="text-xs text-secondary"
-            data-slot="column-mapper-summary"
-          >
+          <p className="text-xs text-secondary" data-slot="column-mapper-summary">
             {[
               labels.summary(table.width, result.rows.length),
               separator,
@@ -713,26 +634,16 @@ export function ColumnMapper<R extends string>({
             labels={labelsProp}
           />
           {unread.length > 0 && (
-            <Disclosure
-              variant="bare"
-              title={labels.unreadCount(unread.length)}
-              data-slot="column-mapper-unread"
-            >
+            <Disclosure variant="bare" title={labels.unreadCount(unread.length)} data-slot="column-mapper-unread">
               <ul className="space-y-1 text-xs">
                 {unread.slice(0, UNREAD_LISTED).map((line) => (
                   <li key={line.line} className="min-w-0">
-                    <span className="block text-secondary">
-                      {labels.unreadLine(line.line)}
-                    </span>
-                    <code className="block truncate font-mono text-muted">
-                      {line.text}
-                    </code>
+                    <span className="block text-secondary">{labels.unreadLine(line.line)}</span>
+                    <code className="block truncate font-mono text-muted">{line.text}</code>
                   </li>
                 ))}
                 {unread.length > UNREAD_LISTED && (
-                  <li className="text-muted">
-                    {labels.unreadMore(unread.length - UNREAD_LISTED)}
-                  </li>
+                  <li className="text-muted">{labels.unreadMore(unread.length - UNREAD_LISTED)}</li>
                 )}
               </ul>
             </Disclosure>

package/src/components/combobox-core.tsx

@@ -22,7 +22,7 @@ import { anchoredInline, useAnchoredPanel, viewportSize, type AnchoredPanel } fr
 import { pressInside, takeEscape, useDismissLayer, useOutsideClick } from "../hooks/use-dismiss";
 import { useOverlayHistory } from "../hooks/use-overlay-history";
 import { isImeEnter } from "../lib/ime";
-import { foldForSearch } from "../lib/text-match";
+import { matchesSearch, searchWords } from "../lib/text-match";
 import { DEFAULT_COMBOBOX_LABELS, useKitLabels, useKitLocale } from "../i18n/kit-labels";
 import { hasContent } from "../lib/presence";
 
@@ -73,8 +73,7 @@ export interface ComboOption<V extends string | number> {
 }
 
 /** A row the user may take — present and not {@link ComboOption.disabled}. */
-export const isOptionEnabled = (o: { disabled?: boolean } | undefined): boolean =>
-  o !== undefined && !o.disabled;
+export const isOptionEnabled = (o: { disabled?: boolean } | undefined): boolean => o !== undefined && !o.disabled;
 
 /**
  * The next takeable row from `from`, stepping `dir` — what the arrow keys use so a
@@ -82,11 +81,7 @@ export const isOptionEnabled = (o: { disabled?: boolean } | undefined): boolean
  * list (the family's arrows clamp rather than wrap) and answers `-1` when `from` is
  * not a row and there is nothing to step to.
  */
-export function stepEnabled(
-  rows: readonly { disabled?: boolean }[],
-  from: number,
-  dir: 1 | -1,
-): number {
+export function stepEnabled(rows: readonly { disabled?: boolean }[], from: number, dir: 1 | -1): number {
   for (let i = from + dir; i >= 0 && i < rows.length; i += dir) {
     if (!rows[i].disabled) return i;
   }
@@ -283,10 +278,10 @@ export function useOptionSource<V extends string | number>({
   const clientResults = useMemo(() => {
     if (isAsync) return [];
     const src = options ?? [];
-    const q = foldForSearch(query.trim(), locale);
-    if (!filter || !q) return src;
-    const hit = (s: string | undefined) => s !== undefined && foldForSearch(s, locale).includes(q);
-    return src.filter((o) => hit(o.label) || hit(o.sublabel));
+    // Every word of the query, in the label or the sublabel (0.51.4): "migros zürich".
+    const words = searchWords(query, locale);
+    if (!filter || words.length === 0) return src;
+    return src.filter((o) => matchesSearch(words, [o.label, o.sublabel], locale));
   }, [isAsync, options, query, filter, locale]);
 
   const pending = isAsync && active && !tooShort && settled.query !== query;
@@ -535,8 +530,7 @@ export interface ComboboxPanelWidth {
   maxRem?: number;
 }
 
-export interface ComboboxPanelProps<V extends string | number>
-  extends ComponentPropsWithoutRef<"div"> {
+export interface ComboboxPanelProps<V extends string | number> extends ComponentPropsWithoutRef<"div"> {
   core: ComboboxCore<V>;
   /** What the trigger's `aria-controls` names. Owned by the component that renders
    *  the trigger, not by the core: one id has to reach both, and only one of them
@@ -663,9 +657,7 @@ export function ComboboxPanel<V extends string | number>({
   const isPhone = usePhoneLayout();
   // Every row the keyboard can land on, the create row included — passed over, like a
   // disabled option, while a write lock holds it.
-  const rows: readonly { disabled?: boolean }[] = showCreate
-    ? [...results, { disabled: createLocked }]
-    : results;
+  const rows: readonly { disabled?: boolean }[] = showCreate ? [...results, { disabled: createLocked }] : results;
   const rowCount = rows.length;
   const optionId = (index: number) => `${listboxId}-option-${index}`;
   // The core opens on row 0 and knows nothing of `disabled`; the highlight is settled
@@ -788,10 +780,7 @@ export function ComboboxPanel<V extends string | number>({
         failed ? "text-danger" : "text-muted",
       )}
     >
-      {message ??
-        (results.length > 0 && (
-          <span className="sr-only">{labels.resultCount(results.length)}</span>
-        ))}
+      {message ?? (results.length > 0 && <span className="sr-only">{labels.resultCount(results.length)}</span>)}
     </div>
   );
 
@@ -825,11 +814,7 @@ export function ComboboxPanel<V extends string | number>({
                 : "flex w-full items-center gap-2 px-3 py-1.5 text-start text-sm",
             // The row the arrows are on shows it on a phone too: the sheet takes
             // the keyboard (BUG-5), and a tablet or a desktop at Large has one.
-            o.disabled
-              ? DISABLED_ROW_CLASS
-              : i === current
-                ? "bg-active"
-                : !isPhone && "hover:bg-hover",
+            o.disabled ? DISABLED_ROW_CLASS : i === current ? "bg-active" : !isPhone && "hover:bg-hover",
             // After SHEET_ROW_CLASS, so its hover is the one cancelled.
             o.disabled && isPhone && DISABLED_ROW_CLASS,
           )}
@@ -841,9 +826,7 @@ export function ComboboxPanel<V extends string | number>({
               aria-hidden
               className={cn(
                 "flex size-4 shrink-0 items-center justify-center rounded border",
-                selected
-                  ? "border-[var(--bg-inverse)] bg-inverse text-inverse"
-                  : "border-strong bg-surface",
+                selected ? "border-[var(--bg-inverse)] bg-inverse text-inverse" : "border-strong bg-surface",
               )}
             >
               {selected && <Check className="size-3" />}
@@ -858,9 +841,7 @@ export function ComboboxPanel<V extends string | number>({
               <span className={cn("block truncate-until-large text-primary", columns && selected && "font-medium")}>
                 {o.label}
               </span>
-              {o.sublabel && (
-                <span className="block truncate-until-large text-xs text-placeholder">{o.sublabel}</span>
-              )}
+              {o.sublabel && <span className="block truncate-until-large text-xs text-placeholder">{o.sublabel}</span>}
             </span>
           )}
           {!multi && selected && <Check className="size-4 shrink-0 text-brand" />}
@@ -889,15 +870,9 @@ export function ComboboxPanel<V extends string | number>({
           if (!createLocked) setActive(results.length);
         }}
         className={cn(
-          isPhone
-            ? SHEET_ROW_CLASS
-            : "flex w-full items-center gap-2 px-3 py-1.5 text-start text-sm",
+          isPhone ? SHEET_ROW_CLASS : "flex w-full items-center gap-2 px-3 py-1.5 text-start text-sm",
           "text-secondary",
-          createLocked
-            ? DISABLED_ROW_CLASS
-            : current === results.length
-              ? "bg-active"
-              : !isPhone && "hover:bg-hover",
+          createLocked ? DISABLED_ROW_CLASS : current === results.length ? "bg-active" : !isPhone && "hover:bg-hover",
           // After SHEET_ROW_CLASS, so its hover is the one cancelled.
           createLocked && isPhone && DISABLED_ROW_CLASS,
         )}
@@ -906,9 +881,7 @@ export function ComboboxPanel<V extends string | number>({
         <span className="min-w-0 flex-1">
           <span className="block truncate-until-large">{createContent}</span>
           {createLocked && (
-            <span className="block truncate-until-large text-xs text-placeholder">
-              {createDisabledReason}
-            </span>
+            <span className="block truncate-until-large text-xs text-placeholder">{createDisabledReason}</span>
           )}
         </span>
       </button>
@@ -1090,10 +1063,7 @@ export function ComboboxPanel<V extends string | number>({
         ...(fit ? { width: "max-content", minWidth: least, maxWidth: most } : { width: panelWidth }),
         maxHeight: placement.maxHeight,
       }}
-      className={cn(
-        "z-50 flex flex-col rounded-md border border-subtle bg-surface shadow-lg",
-        className,
-      )}
+      className={cn("z-50 flex flex-col rounded-md border border-subtle bg-surface shadow-lg", className)}
     >
       <DropdownSearchHeader
         query={query}

package/src/components/combobox.tsx

@@ -40,8 +40,7 @@ export type { InlineEntityComboboxProps } from "./inline-entity-combobox";
  * the DOM events of the wrapper. Everything else a wrapper needs reaches the root.
  */
 export interface ComboboxProps
-  extends Omit<ComponentPropsWithoutRef<"div">, "id" | "onChange" | "onBlur" | "onSubmit">,
-    FieldHelpProps {
+  extends Omit<ComponentPropsWithoutRef<"div">, "id" | "onChange" | "onBlur" | "onSubmit">, FieldHelpProps {
   value: string;
   onChange: (v: string) => void;
   /** Suggestion pool (e.g. existing payee names). */
@@ -592,10 +591,7 @@ export function Combobox(props: ComboboxProps) {
                       role="option"
                       aria-selected={o === value}
                       onClick={() => take(o)}
-                      className={cn(
-                        SHEET_ROW_CLASS,
-                        optionAdornment && "flex items-center justify-between gap-2",
-                      )}
+                      className={cn(SHEET_ROW_CLASS, optionAdornment && "flex items-center justify-between gap-2")}
                     >
                       {optionAdornment ? <span className="truncate-until-large">{o}</span> : o}
                       {optionAdornment?.(o)}

package/src/components/confirm-dialog.tsx

@@ -90,7 +90,6 @@ export interface ConfirmOptions {
 
 export type ConfirmFn = (options: ConfirmOptions) => Promise<boolean>;
 
-
 /**
  * `const confirm = useConfirm()` → `if (!(await confirm({ title }))) return`.
  *
@@ -279,8 +278,7 @@ function ConfirmDialogView({
   const typedLabel =
     target === undefined
       ? ""
-      : (request.typedLabel ??
-        (typeof labels.typed === "string" ? labels.typed : labels.typed(target)));
+      : (request.typedLabel ?? (typeof labels.typed === "string" ? labels.typed : labels.typed(target)));
 
   return (
     <DialogFrame

package/src/components/copy-button.tsx

@@ -27,8 +27,7 @@ export interface CopyButtonLabels {
 // 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"> {
+export interface CopyButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "onClick"> {
   /** What to copy. A function is read at click time — for a value that is expensive
    *  to build (a CSV of the table) or that changes under the button. */
   text: string | (() => string);
@@ -112,8 +111,7 @@ export function CopyButton({
   const idleText = label ?? words.copy;
   const stateText = state === "copied" ? words.copied : state === "failed" ? words.failed : idleText;
   const Icon = ICONS[state];
-  const iconTone =
-    state === "copied" ? "text-success" : state === "failed" ? "text-danger" : undefined;
+  const iconTone = 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.tsx

@@ -4,13 +4,7 @@ import { X } from "lucide-react";
 import { cn } from "../lib/cn";
 import { COUNTRY_CODES, countryName, normalizeCountryCode } from "../lib/countries";
 import { rankMatch } from "../lib/text-match";
-import {
-  FieldChevron,
-  FIELD_FLOATING_PAD,
-  FIELD_INVALID,
-  FIELD_TRIGGER,
-  FloatingField,
-} from "./field-base";
+import { FieldChevron, FIELD_FLOATING_PAD, FIELD_INVALID, FIELD_TRIGGER, FloatingField } from "./field-base";
 import {
   assignRef,
   EndHintRow,
@@ -67,8 +61,7 @@ export { DEFAULT_COUNTRY_SELECT_LABELS };
  * `null` of a clear cannot reach a handler that was never told about it.
  */
 export interface CountrySelectProps<Clearable extends boolean = false>
-  extends Omit<ComponentPropsWithoutRef<"div">, "onChange" | "defaultValue">,
-    FieldHelpProps {
+  extends Omit<ComponentPropsWithoutRef<"div">, "onChange" | "defaultValue">, FieldHelpProps {
   /** The chosen country as an ISO 3166-1 alpha-2 code ("CH"), in either case;
    *  `null`, `undefined` or `""` when none is. A code outside the list still shows
    *  its name — the list restricts what can be PICKED, not what can be shown. */
@@ -106,9 +99,10 @@ export interface CountrySelectProps<Clearable extends boolean = false>
    * way — the order given is not kept, because the reader looks a country up by its
    * name in their own language, and any other order is one they cannot predict.
    *
-   * keksdose's bank picker offers the fifteen countries its banks are in
-   * (DE AT CH FR IT ES NL BE PT PL SE DK FI GB IE). A code that is not in ISO's list
-   * is allowed here on purpose: `XK` (Kosovo) is the app's decision, not the kit's.
+   * keksdose's bank picker passes the countries its configured bank-connection provider
+   * serves, read at runtime: its connections are provider-neutral since 2026-10-29, so
+   * the list is no longer a fixed fifteen. A code that is not in ISO's list is allowed
+   * here on purpose: `XK` (Kosovo) is the app's decision, not the kit's.
    */
   countries?: readonly string[];
   /**
@@ -218,7 +212,7 @@ function collator(locale: string): Intl.Collator {
  * A country picker: the value is the ISO 3166-1 alpha-2 code ("CH"), the names are the
  * runtime's own (`Intl.DisplayNames`) in the provider's locale, sorted by that
  * locale's collation. Requested by kastlan (customer and handover addresses, with its
- * six neighbours on top) and keksdose (the bank picker's fifteen countries) — both
+ * six neighbours on top) and keksdose (its bank picker's countries) — both
  * apps carried a hand-written list of names in two languages.
  *
  * ## Built on the kit's searchable combobox
@@ -318,10 +312,7 @@ export function CountrySelect<Clearable extends boolean = false>({
   // `filter: false` — the panel is handed the rows `search` ranks below instead of
   // the core's substring filter; the core still owns open, query, the highlighted row,
   // anchoring and dismissal.
-  const allOptions = useMemo(
-    () => [...top, ...others].map((e) => toOption(e, flags)),
-    [top, others, flags],
-  );
+  const allOptions = useMemo(() => [...top, ...others].map((e) => toOption(e, flags)), [top, others, flags]);
   const core = useComboboxCore<string>({ options: allOptions, filter: false });
   const { open, setOpen, query, triggerRef, closeToTrigger } = core;
   // The core anchors the panel to the trigger and hands focus back to it; the caller's
@@ -467,10 +458,7 @@ export function CountrySelect<Clearable extends boolean = false>({
         {/* A long name ("Saint Vincent and the Grenadines") truncates rather than
             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-until-large", selectedName === undefined && "text-placeholder")}
-        >
+        <span id={valueId} className={cn("truncate-until-large", selectedName === undefined && "text-placeholder")}>
           {selectedName ?? emptyText}
         </span>
       </span>

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

@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 import type { ComponentPropsWithRef, ReactNode } from "react";
 import { cn } from "../lib/cn";
-import { foldForSearch } from "../lib/text-match";
+import { matchesSearch, searchWords } from "../lib/text-match";
 import { ComboboxPanel, type ComboboxCore, type ComboOption } from "./combobox-core";
 import { CURRENCIES, type CurrencyOption } from "../currencies";
 
@@ -26,7 +26,11 @@ export function CurrencyFlag({ country, className, ...rest }: CurrencyFlagProps)
       // 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)}
+      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,
+      )}
     />
   );
 }
@@ -45,11 +49,7 @@ export function getCurrency(code: string | null | undefined): CurrencyOption | u
  *  `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 {
+export function currencyName(c: CurrencyOption, names?: Record<string, string>, locale?: string): string {
   const own = names?.[c.code];
   if (own !== undefined) return own;
   if (locale) {
@@ -136,17 +136,15 @@ export function CurrencyOptionList({
   // 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} />,
-      }),
-    );
+    // Every word of the query, in the code, the name or the symbol (0.51.4).
+    const words = searchWords(query, locale);
+    const hits =
+      words.length > 0 ? named.filter(({ c, name }) => matchesSearch(words, [c.code, name, c.symbol], locale)) : 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;