@eifi1/ui-kit 0.33.1 → 0.35.0

package/dist/components/copy-button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/copy-button.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from \"react\";\nimport { Check, Copy, X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { useAnnounce } from \"../hooks/use-announce\";\nimport { useCopyToClipboard } from \"../hooks/use-copy-to-clipboard\";\nimport type { CopyState } from \"../hooks/use-copy-to-clipboard\";\nimport { Button, IconButton } from \"./ui\";\nimport type { ButtonSize, ButtonTone, ButtonVariant, IconButtonSize, IconButtonTone } from \"./ui\";\nimport { Tooltip } from \"./tooltip\";\nimport type { TooltipSide } from \"./tooltip\";\n\n/** The words a copy button says. The visible three are short on purpose (they\n *  replace the button's own text in the `label` variant); the two announcements\n *  are the sentences a screen reader hears, since the button's focus never moves. */\nexport interface CopyButtonLabels {\n  copy: string;\n  copied: string;\n  failed: string;\n  copiedAnnouncement: string;\n  failedAnnouncement: string;\n}\n\nexport const DEFAULT_COPY_BUTTON_LABELS: CopyButtonLabels = {\n  copy: \"Copy\",\n  copied: \"Copied\",\n  failed: \"Couldn’t copy\",\n  copiedAnnouncement: \"Copied to clipboard\",\n  failedAnnouncement: \"Couldn’t copy to the clipboard\",\n};\n\nexport interface CopyButtonProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"children\" | \"onClick\"> {\n  /** What to copy. A function is read at click time — for a value that is expensive\n   *  to build (a CSV of the table) or that changes under the button. */\n  text: string | (() => string);\n  /** `icon` (default): a square icon button whose tooltip states the result.\n   *  `label`: a text button whose words change to the result. */\n  variant?: \"icon\" | \"label\";\n  /** The idle accessible name — and, in the `label` variant, the visible text:\n   *  \"Copy IBAN\" says WHAT is copied, which a row of three copy icons needs. Default\n   *  `copyButton.copy`. */\n  label?: string;\n  /** The button's own look. Default: `ghost` for the icon, `secondary` for the label. */\n  buttonVariant?: ButtonVariant;\n  /** The icon variant's IconButton size (default `sm`). The `label` variant takes a\n   *  Button size, `sm` or `md` — passed only when given, so an existing label button\n   *  keeps its look (keksdose budget-share-card and jobs-panel wanted the compact one). */\n  size?: IconButtonSize | ButtonSize;\n  /** The icon variant's IconButton tone (e.g. `muted`, so a row of copy icons is no\n   *  heavier than the row's other actions); in the `label` variant a Button tone,\n   *  which applies to `link` / `ghost`. The copied / failed colour still wins. */\n  tone?: IconButtonTone | ButtonTone;\n  /** Keep the click and Enter/Space from reaching a clickable row around the button,\n   *  as IconButton's own `stopPropagation` does (keksdose feedback-page, users-panel). */\n  stopPropagation?: boolean;\n  /** Icon variant only: where the result tooltip opens. */\n  tooltipSide?: TooltipSide;\n  /** Pass through to the tooltip. Left unset, the Tooltip decides on its own — it\n   *  portals inside a clipping container (a DataTable's `data-clips` scroller). */\n  tooltipPortal?: boolean;\n  /** ms until the button returns to idle. Default 2000. */\n  resetAfter?: number;\n  /** Called with the real outcome once the copy settles. */\n  onCopied?: (ok: boolean) => void;\n  labels?: Partial<CopyButtonLabels>;\n}\n\nconst ICONS: Record<CopyState, typeof Copy> = { idle: Copy, copied: Check, failed: X };\n\n/**\n * A button that copies a value and tells the truth about whether it did.\n *\n * keksdose asked for it after two of its own copy buttons said \"Copied\" on a build\n * where the copy had failed (no Clipboard API over plain http). This one takes its\n * state from {@link useCopyToClipboard}, which reads the result, and has a `failed`\n * state that looks and sounds different from success.\n *\n * The result is spoken through {@link useAnnounce}: activating the button moves no\n * focus, so without a live region a screen-reader user hears nothing at all. A\n * failure goes through an ASSERTIVE region and a success through a polite one — the\n * failure is the news that changes what they do next.\n *\n * The icon variant keeps the SAME accessible name in every state. A button renaming\n * itself under the focus is announced inconsistently across readers; the live region\n * is the channel that is actually heard.\n */\nexport function CopyButton({\n  text,\n  variant = \"icon\",\n  label,\n  buttonVariant,\n  size,\n  tone,\n  stopPropagation,\n  tooltipSide = \"top\",\n  tooltipPortal,\n  resetAfter = 2000,\n  onCopied,\n  labels,\n  className,\n  disabled,\n  ...rest\n}: CopyButtonProps) {\n  const words = useKitLabels(\"copyButton\", DEFAULT_COPY_BUTTON_LABELS, labels);\n  const { state, copy } = useCopyToClipboard({ resetAfter });\n  const polite = useAnnounce();\n  const assertive = useAnnounce({ politeness: \"assertive\" });\n\n  const idleText = label ?? words.copy;\n  const stateText = state === \"copied\" ? words.copied : state === \"failed\" ? words.failed : idleText;\n  const Icon = ICONS[state];\n  const iconTone =\n    state === \"copied\" ? \"text-[var(--success)]\" : state === \"failed\" ? \"text-[var(--danger)]\" : undefined;\n\n  const onClick = async () => {\n    const ok = await copy(typeof text === \"function\" ? text() : text);\n    if (ok) polite.announce(words.copiedAnnouncement);\n    else assertive.announce(words.failedAnnouncement);\n    onCopied?.(ok);\n  };\n\n  const regions = (\n    <>\n      <span {...polite.regionProps} />\n      <span {...assertive.regionProps} />\n    </>\n  );\n\n  if (variant === \"label\") {\n    return (\n      <>\n        <Button\n          type=\"button\"\n          {...rest}\n          disabled={disabled}\n          variant={buttonVariant ?? \"secondary\"}\n          size={size === \"sm\" || size === \"md\" ? size : undefined}\n          tone={tone === \"default\" || tone === \"muted\" || tone === \"danger\" ? tone : undefined}\n          data-state={state}\n          onClick={(e) => {\n            if (stopPropagation) e.stopPropagation();\n            void onClick();\n          }}\n          onKeyDown={(e) => {\n            if (stopPropagation && (e.key === \"Enter\" || e.key === \" \")) e.stopPropagation();\n            rest.onKeyDown?.(e);\n          }}\n          className={className}\n        >\n          <Icon aria-hidden className={cn(\"size-4 shrink-0\", iconTone)} />\n          {stateText}\n        </Button>\n        {regions}\n      </>\n    );\n  }\n\n  return (\n    <>\n      <Tooltip label={stateText} side={tooltipSide} portal={tooltipPortal}>\n        <IconButton\n          type=\"button\"\n          {...rest}\n          disabled={disabled}\n          aria-label={idleText}\n          variant={buttonVariant ?? \"ghost\"}\n          size={(size ?? \"sm\") as IconButtonSize}\n          tone={tone as IconButtonTone | undefined}\n          stopPropagation={stopPropagation}\n          data-state={state}\n          onClick={() => void onClick()}\n          className={cn(iconTone, className)}\n        >\n          <Icon aria-hidden />\n        </IconButton>\n      </Tooltip>\n      {regions}\n    </>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/copy-button.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, Ref } from \"react\";\nimport { Check, Copy, X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { useAnnounce } from \"../hooks/use-announce\";\nimport { useCopyToClipboard } from \"../hooks/use-copy-to-clipboard\";\nimport type { CopyState } from \"../hooks/use-copy-to-clipboard\";\nimport { Button } from \"./button\";\nimport { IconButton } from \"./icon-button\";\nimport type { ButtonSize, ButtonTone, ButtonVariant } from \"./button-look\";\nimport type { IconButtonSize, IconButtonTone } from \"./icon-button\";\nimport { Tooltip } from \"./tooltip\";\nimport type { TooltipSide } from \"./tooltip\";\nimport { DEFAULT_COPY_BUTTON_LABELS } from \"./copy-button-labels\";\n\n/** The words a copy button says. The visible three are short on purpose (they\n *  replace the button's own text in the `label` variant); the two announcements\n *  are the sentences a screen reader hears, since the button's focus never moves. */\nexport interface CopyButtonLabels {\n  copy: string;\n  copied: string;\n  failed: string;\n  copiedAnnouncement: string;\n  failedAnnouncement: string;\n}\n\n// Defined in ./copy-button-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_COPY_BUTTON_LABELS };\n\nexport interface CopyButtonProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"children\" | \"onClick\"> {\n  /** What to copy. A function is read at click time — for a value that is expensive\n   *  to build (a CSV of the table) or that changes under the button. */\n  text: string | (() => string);\n  /** `icon` (default): a square icon button whose tooltip states the result.\n   *  `label`: a text button whose words change to the result. */\n  variant?: \"icon\" | \"label\";\n  /** The idle accessible name — and, in the `label` variant, the visible text:\n   *  \"Copy IBAN\" says WHAT is copied, which a row of three copy icons needs. Default\n   *  `copyButton.copy`. */\n  label?: string;\n  /** The button's own look. Default: `ghost` for the icon, `secondary` for the label. */\n  buttonVariant?: ButtonVariant;\n  /** The icon variant's IconButton size (default `sm`). The `label` variant takes a\n   *  Button size, `sm` or `md` — passed only when given, so an existing label button\n   *  keeps its look (keksdose budget-share-card and jobs-panel wanted the compact one). */\n  size?: IconButtonSize | ButtonSize;\n  /** The icon variant's IconButton tone (e.g. `muted`, so a row of copy icons is no\n   *  heavier than the row's other actions); in the `label` variant a Button tone,\n   *  which applies to `link` / `ghost`. The copied / failed colour still wins. */\n  tone?: IconButtonTone | ButtonTone;\n  /** Keep the click and Enter/Space from reaching a clickable row around the button,\n   *  as IconButton's own `stopPropagation` does (keksdose feedback-page, users-panel). */\n  stopPropagation?: boolean;\n  /** Icon variant only: where the result tooltip opens. */\n  tooltipSide?: TooltipSide;\n  /** Pass through to the tooltip. Left unset, the Tooltip decides on its own — it\n   *  portals inside a clipping container (a DataTable's `data-clips` scroller). */\n  tooltipPortal?: boolean;\n  /** ms until the button returns to idle. Default 2000. */\n  resetAfter?: number;\n  /** Called with the real outcome once the copy settles. */\n  onCopied?: (ok: boolean) => void;\n  labels?: LabelOverride<CopyButtonLabels>;\n  /** The `<button>` in either variant — the {@link IconButton}'s or the {@link Button}'s,\n   *  never the tooltip's wrapper round it (0.35, round 0.35 R4, the follow-up to API-2).\n   *  It rides the rest of the props on to that kit button, whose own ref it is. */\n  ref?: Ref<HTMLButtonElement>;\n}\n\nconst ICONS: Record<CopyState, typeof Copy> = { idle: Copy, copied: Check, failed: X };\n\n/**\n * A button that copies a value and tells the truth about whether it did.\n *\n * keksdose asked for it after two of its own copy buttons said \"Copied\" on a build\n * where the copy had failed (no Clipboard API over plain http). This one takes its\n * state from {@link useCopyToClipboard}, which reads the result, and has a `failed`\n * state that looks and sounds different from success.\n *\n * The result is spoken through {@link useAnnounce}: activating the button moves no\n * focus, so without a live region a screen-reader user hears nothing at all. A\n * failure goes through an ASSERTIVE region and a success through a polite one — the\n * failure is the news that changes what they do next.\n *\n * The icon variant keeps the SAME accessible name in every state. A button renaming\n * itself under the focus is announced inconsistently across readers; the live region\n * is the channel that is actually heard.\n */\nexport function CopyButton({\n  text,\n  variant = \"icon\",\n  label,\n  buttonVariant,\n  size,\n  tone,\n  stopPropagation,\n  tooltipSide = \"top\",\n  tooltipPortal,\n  resetAfter = 2000,\n  onCopied,\n  labels,\n  className,\n  disabled,\n  ...rest\n}: CopyButtonProps) {\n  const words = useKitLabels(\"copyButton\", DEFAULT_COPY_BUTTON_LABELS, labels);\n  const { state, copy } = useCopyToClipboard({ resetAfter });\n  const polite = useAnnounce();\n  const assertive = useAnnounce({ politeness: \"assertive\" });\n\n  const idleText = label ?? words.copy;\n  const stateText = state === \"copied\" ? words.copied : state === \"failed\" ? words.failed : idleText;\n  const Icon = ICONS[state];\n  const iconTone =\n    state === \"copied\" ? \"text-success\" : state === \"failed\" ? \"text-danger\" : undefined;\n\n  const onClick = async () => {\n    const ok = await copy(typeof text === \"function\" ? text() : text);\n    if (ok) polite.announce(words.copiedAnnouncement);\n    else assertive.announce(words.failedAnnouncement);\n    onCopied?.(ok);\n  };\n\n  const regions = (\n    <>\n      <span {...polite.regionProps} />\n      <span {...assertive.regionProps} />\n    </>\n  );\n\n  if (variant === \"label\") {\n    return (\n      <>\n        <Button\n          type=\"button\"\n          {...rest}\n          disabled={disabled}\n          variant={buttonVariant ?? \"secondary\"}\n          size={size === \"sm\" || size === \"md\" ? size : undefined}\n          tone={tone === \"default\" || tone === \"muted\" || tone === \"danger\" ? tone : undefined}\n          data-state={state}\n          onClick={(e) => {\n            if (stopPropagation) e.stopPropagation();\n            void onClick();\n          }}\n          onKeyDown={(e) => {\n            if (stopPropagation && (e.key === \"Enter\" || e.key === \" \")) e.stopPropagation();\n            rest.onKeyDown?.(e);\n          }}\n          className={className}\n        >\n          <Icon aria-hidden className={cn(\"size-4 shrink-0\", iconTone)} />\n          {stateText}\n        </Button>\n        {regions}\n      </>\n    );\n  }\n\n  return (\n    <>\n      <Tooltip label={stateText} side={tooltipSide} portal={tooltipPortal}>\n        <IconButton\n          type=\"button\"\n          {...rest}\n          disabled={disabled}\n          aria-label={idleText}\n          variant={buttonVariant ?? \"ghost\"}\n          size={(size ?? \"sm\") as IconButtonSize}\n          tone={tone as IconButtonTone | undefined}\n          stopPropagation={stopPropagation}\n          data-state={state}\n          onClick={() => void onClick()}\n          className={cn(iconTone, className)}\n        >\n          <Icon aria-hidden />\n        </IconButton>\n      </Tooltip>\n      {regions}\n    </>\n  );\n}\n"],"mappings":";AA6HI,mBACE,KADF;AA5HJ,SAAS,OAAO,MAAM,SAAS;AAC/B,SAAS,UAAU;AACnB,SAAS,oBAAwC;AACjD,SAAS,mBAAmB;AAC5B,SAAS,0BAA0B;AAEnC,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAG3B,SAAS,eAAe;AAExB,SAAS,kCAAkC;AAyD3C,MAAM,QAAwC,EAAE,MAAM,MAAM,QAAQ,OAAO,QAAQ,EAAE;AAmB9E,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,QAAM,QAAQ,aAAa,cAAc,4BAA4B,MAAM;AAC3E,QAAM,EAAE,OAAO,KAAK,IAAI,mBAAmB,EAAE,WAAW,CAAC;AACzD,QAAM,SAAS,YAAY;AAC3B,QAAM,YAAY,YAAY,EAAE,YAAY,YAAY,CAAC;AAEzD,QAAM,WAAW,SAAS,MAAM;AAChC,QAAM,YAAY,UAAU,WAAW,MAAM,SAAS,UAAU,WAAW,MAAM,SAAS;AAC1F,QAAM,OAAO,MAAM,KAAK;AACxB,QAAM,WACJ,UAAU,WAAW,iBAAiB,UAAU,WAAW,gBAAgB;AAE7E,QAAM,UAAU,YAAY;AAC1B,UAAM,KAAK,MAAM,KAAK,OAAO,SAAS,aAAa,KAAK,IAAI,IAAI;AAChE,QAAI,GAAI,QAAO,SAAS,MAAM,kBAAkB;AAAA,QAC3C,WAAU,SAAS,MAAM,kBAAkB;AAChD,eAAW,EAAE;AAAA,EACf;AAEA,QAAM,UACJ,iCACE;AAAA,wBAAC,UAAM,GAAG,OAAO,aAAa;AAAA,IAC9B,oBAAC,UAAM,GAAG,UAAU,aAAa;AAAA,KACnC;AAGF,MAAI,YAAY,SAAS;AACvB,WACE,iCACE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACJ,GAAG;AAAA,UACJ;AAAA,UACA,SAAS,iBAAiB;AAAA,UAC1B,MAAM,SAAS,QAAQ,SAAS,OAAO,OAAO;AAAA,UAC9C,MAAM,SAAS,aAAa,SAAS,WAAW,SAAS,WAAW,OAAO;AAAA,UAC3E,cAAY;AAAA,UACZ,SAAS,CAAC,MAAM;AACd,gBAAI,gBAAiB,GAAE,gBAAgB;AACvC,iBAAK,QAAQ;AAAA,UACf;AAAA,UACA,WAAW,CAAC,MAAM;AAChB,gBAAI,oBAAoB,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAM,GAAE,gBAAgB;AAC/E,iBAAK,YAAY,CAAC;AAAA,UACpB;AAAA,UACA;AAAA,UAEA;AAAA,gCAAC,QAAK,eAAW,MAAC,WAAW,GAAG,mBAAmB,QAAQ,GAAG;AAAA,YAC7D;AAAA;AAAA;AAAA,MACH;AAAA,MACC;AAAA,OACH;AAAA,EAEJ;AAEA,SACE,iCACE;AAAA,wBAAC,WAAQ,OAAO,WAAW,MAAM,aAAa,QAAQ,eACpD;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACJ,GAAG;AAAA,QACJ;AAAA,QACA,cAAY;AAAA,QACZ,SAAS,iBAAiB;AAAA,QAC1B,MAAO,QAAQ;AAAA,QACf;AAAA,QACA;AAAA,QACA,cAAY;AAAA,QACZ,SAAS,MAAM,KAAK,QAAQ;AAAA,QAC5B,WAAW,GAAG,UAAU,SAAS;AAAA,QAEjC,8BAAC,QAAK,eAAW,MAAC;AAAA;AAAA,IACpB,GACF;AAAA,IACC;AAAA,KACH;AAEJ;","names":[]}

package/dist/components/country-select-labels.d.ts

@@ -0,0 +1,2 @@
+import type { CountrySelectLabels } from "./country-select.js";
+export declare const DEFAULT_COUNTRY_SELECT_LABELS: CountrySelectLabels;

package/dist/components/country-select-labels.js

@@ -0,0 +1,10 @@
+"use client";
+const DEFAULT_COUNTRY_SELECT_LABELS = {
+  country: "Country",
+  search: "Search country",
+  others: "Other countries"
+};
+export {
+  DEFAULT_COUNTRY_SELECT_LABELS
+};
+//# sourceMappingURL=country-select-labels.js.map

package/dist/components/country-select-labels.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/country-select-labels.ts"],"sourcesContent":["// The English words of ./country-select, in a module with no component code: the English\n// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one\n// chunk like the other languages (0.34, KS U8). ./country-select re-exports them.\n\nimport type { CountrySelectLabels } from \"./country-select\";\n\nexport const DEFAULT_COUNTRY_SELECT_LABELS: CountrySelectLabels = {\n  country: \"Country\",\n  search: \"Search country\",\n  others: \"Other countries\",\n};\n"],"mappings":";AAMO,MAAM,gCAAqD;AAAA,EAChE,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AACV;","names":[]}

package/dist/components/country-select.d.ts

@@ -1,11 +1,12 @@
-import * as react from 'react';
-import { ComponentPropsWithoutRef, Ref, ReactNode } from 'react';
-import { CommitScope } from './write-lock.js';
-
+import type { ComponentPropsWithoutRef, ReactNode, Ref } from "react";
+import { type DisabledReasonDisplay } from "./field-parts.js";
+import type { CommitScope } from "./write-lock.js";
+import { type LabelOverride } from "../i18n/kit-labels.js";
+import { DEFAULT_COUNTRY_SELECT_LABELS } from "./country-select-labels.js";
 /** The words {@link CountrySelect} renders on its own behalf. The list's "no results",
  *  "loading" and result-count announcements are the shared `combobox` namespace's,
  *  as on every other searchable picker. */
-interface CountrySelectLabels {
+export interface CountrySelectLabels {
     /** What the field is, when the caller gives no `label`: the first half of the
      *  trigger's accessible name, the phone sheet's title, and the empty trigger's
      *  text. */
@@ -16,7 +17,7 @@ interface CountrySelectLabels {
      *  when `preferred` puts something above it. */
     others: string;
 }
-declare const DEFAULT_COUNTRY_SELECT_LABELS: CountrySelectLabels;
+export { DEFAULT_COUNTRY_SELECT_LABELS };
 /**
  * `onChange` is the kit's — "a country was picked", carrying its code — rather than
  * the div's form event. `id` and the `aria-*` wiring below go to the TRIGGER, which is
@@ -28,7 +29,7 @@ declare const DEFAULT_COUNTRY_SELECT_LABELS: CountrySelectLabels;
  * type-checks), and `(code: string | null) => void` once `clearable` is set — the
  * `null` of a clear cannot reach a handler that was never told about it.
  */
-interface CountrySelectProps<Clearable extends boolean = false> extends Omit<ComponentPropsWithoutRef<"div">, "onChange" | "defaultValue"> {
+export interface CountrySelectProps<Clearable extends boolean = false> extends Omit<ComponentPropsWithoutRef<"div">, "onChange" | "defaultValue"> {
     /** 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. */
@@ -107,10 +108,14 @@ interface CountrySelectProps<Clearable extends boolean = false> extends Omit<Com
     /**
      * 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
@@ -123,7 +128,7 @@ interface CountrySelectProps<Clearable extends boolean = false> extends Omit<Com
     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
@@ -152,10 +157,10 @@ interface CountrySelectProps<Clearable extends boolean = false> extends Omit<Com
  * 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.
@@ -163,6 +168,4 @@ interface CountrySelectProps<Clearable extends boolean = false> extends Omit<Com
  * Since 0.23 it takes a `ref` to the trigger (react-hook-form's focus-on-error, kastlan)
  * and `clearable`, which hands `onChange` `null`.
  */
-declare function CountrySelect<Clearable extends boolean = false>({ value, onChange, countries, preferred, flags, label, hint, error, invalid, placeholder, disabled, disabledReason: ownReason, commit, clearable, clearLabel, locale: localeProp, labels: labelsProp, className, id, ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, ...rest }: CountrySelectProps<Clearable>): react.JSX.Element;
-
-export { CountrySelect, type CountrySelectLabels, type CountrySelectProps, DEFAULT_COUNTRY_SELECT_LABELS };
+export declare function CountrySelect<Clearable extends boolean = false>({ value, onChange, countries, preferred, flags, label, hint, error, invalid, placeholder, disabled, disabledReason: ownReason, disabledReasonDisplay, commit, clearable, clearLabel, locale: localeProp, labels: labelsProp, className, id, ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, ...rest }: CountrySelectProps<Clearable>): import("react").JSX.Element;

package/dist/components/country-select.js

@@ -1,40 +1,36 @@
 "use client";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useId, useMemo } from "react";
 import { X } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { COUNTRY_CODES, countryName, normalizeCountryCode } from "../lib/countries.js";
-import { FieldChevron, FIELD_FLOATING_PAD, FIELD_INVALID, FIELD_TRIGGER, FloatingField } from "./ui.js";
-import { Tooltip } from "./tooltip.js";
-import { CurrencyFlag } from "./currency-select.js";
+import { rankMatch } from "../lib/text-match.js";
+import {
+  FieldChevron,
+  FIELD_FLOATING_PAD,
+  FIELD_INVALID,
+  FIELD_TRIGGER,
+  FloatingField
+} from "./field-base.js";
 import {
-  ComboboxPanel,
-  useComboboxCore,
-  useComboboxFieldError
-} from "./combobox-core.js";
-import { assignRef, hasMessage, mergeDescribedBy } from "./choice-parts.js";
-import { useCommitReason } from "./write-lock.js";
+  assignRef,
+  EndHintRow,
+  LockedReason,
+  mergeDescribedBy,
+  useFieldMessages,
+  useLockReason
+} from "./field-parts.js";
+import { CurrencyFlag } from "./currency-select.js";
+import { ComboboxPanel, useComboboxCore } from "./combobox-core.js";
 import {
   DEFAULT_COMBOBOX_LABELS,
   DEFAULT_COMMON_LABELS,
   useKitLabels,
   useKitLocale
 } from "../i18n/kit-labels.js";
-const DEFAULT_COUNTRY_SELECT_LABELS = {
-  country: "Country",
-  search: "Search country",
-  others: "Other countries"
-};
-function fold(s) {
-  return s.normalize("NFD").replace(/\p{M}/gu, "").toLowerCase();
-}
-function rank(e, q) {
-  if (e.code.toLowerCase() === q) return 0;
-  if (e.folded.startsWith(q)) return 1;
-  return e.folded.includes(q) ? 2 : -1;
-}
-function search(entries, q) {
-  return entries.map((e) => ({ e, r: rank(e, q) })).filter((x) => x.r >= 0).sort((a, b) => a.r - b.r).map((x) => x.e);
+import { DEFAULT_COUNTRY_SELECT_LABELS } from "./country-select-labels.js";
+function search(entries, q, locale) {
+  return entries.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);
 }
 function toOption(e, flags, group) {
   return {
@@ -64,6 +60,7 @@ function CountrySelect({
   placeholder,
   disabled,
   disabledReason: ownReason,
+  disabledReasonDisplay,
   commit,
   clearable,
   clearLabel,
@@ -95,10 +92,7 @@ function CountrySelect({
         pool.push(code2);
       }
     }
-    const entry = (code2) => {
-      const name2 = countryName(code2, locale);
-      return { code: code2, name: name2, folded: fold(name2) };
-    };
+    const entry = (code2) => ({ code: code2, name: countryName(code2, locale) });
     const firsts = [];
     const picked = /* @__PURE__ */ new Set();
     for (const raw of preferredKey ? preferredKey.split(",") : []) {
@@ -125,30 +119,28 @@ function CountrySelect({
     },
     [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;
     const heading = firsts.length > 0 ? text.others : void 0;
     return [...firsts.map((e) => toOption(e, flags)), ...below.map((e) => toOption(e, flags, heading))];
-  }, [top, others, q, text.others, flags]);
-  const reason = useCommitReason(commit, ownReason);
-  const locked = hasMessage(reason);
+  }, [top, others, q, text.others, flags, locale]);
+  const lock = useLockReason(commit, ownReason);
+  const locked = lock.locked;
   const inert = locked || Boolean(disabled);
   if (inert && open) setOpen(false);
   const generated = useId();
   const triggerId = id ?? generated;
   const listboxId = `${generated}-listbox`;
-  const hintId = useId();
-  const reasonId = useId();
-  const textHint = typeof hint === "string" && hint !== "" || typeof hint === "number";
-  const field = useComboboxFieldError(
+  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) : void 0;
   const emptyText = placeholder ?? (label === void 0 && !ariaLabelledBy ? text.country : "");
@@ -181,7 +173,7 @@ function CountrySelect({
       "aria-labelledby": labelledBy,
       "aria-invalid": field.isInvalid || void 0,
       "aria-required": ariaRequired,
-      "aria-describedby": mergeDescribedBy(field.describedBy, locked && reasonId),
+      "aria-describedby": field.describedBy,
       disabled: locked ? void 0 : disabled,
       "aria-disabled": locked || void 0,
       onClick: (e) => {
@@ -216,7 +208,7 @@ function CountrySelect({
             "span",
             {
               id: valueId,
-              className: cn("truncate", selectedName === void 0 && "text-[var(--text-placeholder)]"),
+              className: cn("truncate-until-large", selectedName === void 0 && "text-placeholder"),
               children: selectedName ?? emptyText
             }
           )
@@ -236,7 +228,7 @@ function CountrySelect({
                 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",
               children: /* @__PURE__ */ jsx(X, { "aria-hidden": true, className: "size-4" })
             }
           )
@@ -245,29 +237,22 @@ function CountrySelect({
     }
   );
   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.
-    /* @__PURE__ */ jsx(Tooltip, { label: reason, className: "flex w-full", children: /* @__PURE__ */ jsxs(Fragment, { children: [
-      trigger,
-      /* @__PURE__ */ jsx("span", { id: reasonId, hidden: true, children: reason })
-    ] }) })
+    // 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.
+    /* @__PURE__ */ jsx(LockedReason, { lock, display: disabledReasonDisplay, className: "flex w-full items-stretch", children: trigger })
   ) : trigger;
-  const labelHint = textHint ? void 0 : hasMessage(hint) ? hint : void 0;
-  const box = label !== void 0 ? /* @__PURE__ */ jsx(FloatingField, { htmlFor: triggerId, label, staticLabel: true, hint: labelHint, children: control }) : labelHint !== void 0 ? (
-    // No label line to ride: the "?" goes at the field's end, outside the box, as on
-    // an unlabelled Select.
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-      /* @__PURE__ */ jsx("div", { className: "relative min-w-0 flex-1", children: control }),
-      /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", children: labelHint })
-    ] })
-  ) : /* @__PURE__ */ jsx("div", { className: "relative", children: control });
+  const box = label !== void 0 ? /* @__PURE__ */ jsx(FloatingField, { htmlFor: triggerId, label, staticLabel: true, hint: field.labelHint, children: control }) : (
+    // No label line to ride: a "?" goes at the field's end, outside the box, as on an
+    // unlabelled Select.
+    /* @__PURE__ */ jsx(EndHintRow, { hint: field.labelHint, children: /* @__PURE__ */ jsx("div", { className: "relative", children: control }) })
+  );
   return (
     // `rest` dresses the wrapper — a `data-tour` anchor, a test id. The name, the
     // description and the invalid state are on the trigger above.
     /* @__PURE__ */ jsxs("div", { ...rest, className, children: [
       box,
-      textHint && /* @__PURE__ */ jsx("p", { id: hintId, className: "mt-1 text-caption leading-tight text-[var(--text-muted)]", children: hint }),
-      field.errorEl,
+      field.below,
       /* @__PURE__ */ jsx(
         ComboboxPanel,
         {

package/dist/components/country-select.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/country-select.tsx"],"sourcesContent":["import { useCallback, useId, useMemo } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode, Ref } from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { COUNTRY_CODES, countryName, normalizeCountryCode } from \"../lib/countries\";\nimport { FieldChevron, FIELD_FLOATING_PAD, FIELD_INVALID, FIELD_TRIGGER, FloatingField } from \"./ui\";\nimport { Tooltip } from \"./tooltip\";\nimport { CurrencyFlag } from \"./currency-select\";\nimport {\n  ComboboxPanel,\n  useComboboxCore,\n  useComboboxFieldError,\n  type ComboOption,\n} from \"./combobox-core\";\nimport { assignRef, hasMessage, mergeDescribedBy } from \"./choice-parts\";\nimport { useCommitReason, type CommitScope } from \"./write-lock\";\nimport {\n  DEFAULT_COMBOBOX_LABELS,\n  DEFAULT_COMMON_LABELS,\n  useKitLabels,\n  useKitLocale,\n} from \"../i18n/kit-labels\";\n\n// ── Labels ────────────────────────────────────────────────────────────────────\n\n/** The words {@link CountrySelect} renders on its own behalf. The list's \"no results\",\n *  \"loading\" and result-count announcements are the shared `combobox` namespace's,\n *  as on every other searchable picker. */\nexport interface CountrySelectLabels {\n  /** What the field is, when the caller gives no `label`: the first half of the\n   *  trigger's accessible name, the phone sheet's title, and the empty trigger's\n   *  text. */\n  country: string;\n  /** The search box in the open list. */\n  search: string;\n  /** The heading between the `preferred` countries and all the others. Shown only\n   *  when `preferred` puts something above it. */\n  others: string;\n}\n\nexport const DEFAULT_COUNTRY_SELECT_LABELS: CountrySelectLabels = {\n  country: \"Country\",\n  search: \"Search country\",\n  others: \"Other countries\",\n};\n\n// ── Props ─────────────────────────────────────────────────────────────────────\n\n/**\n * `onChange` is the kit's — \"a country was picked\", carrying its code — rather than\n * the div's form event. `id` and the `aria-*` wiring below go to the TRIGGER, which is\n * the control a reader meets; everything else in `rest` dresses the wrapper.\n *\n * `Clearable` follows `clearable`, the way {@link EntityCombobox}'s `C` follows its\n * `clearValue`: it is inferred from the prop, so `onChange` is `(code: string) => void`\n * for the field as it always was (`onChange={setCountry}` over a `string` state still\n * type-checks), and `(code: string | null) => void` once `clearable` is set — the\n * `null` of a clear cannot reach a handler that was never told about it.\n */\nexport interface CountrySelectProps<Clearable extends boolean = false>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\" | \"defaultValue\"> {\n  /** The chosen country as an ISO 3166-1 alpha-2 code (\"CH\"), in either case;\n   *  `null`, `undefined` or `\"\"` when none is. A code outside the list still shows\n   *  its name — the list restricts what can be PICKED, not what can be shown. */\n  value: string | null | undefined;\n  /** A country was picked: its alpha-2 code, always upper-case. With `clearable`,\n   *  also `null`: the \"×\" (or Delete on the trigger) emptied the field. */\n  onChange: (code: Clearable extends true ? string | null : string) => void;\n  /**\n   * Offer a clear \"×\" in place of the chevron while a country is chosen; it hands\n   * `onChange` `null` (the kit's later list: an optional country — a contact's\n   * nationality, a bank filter's \"any country\" — could be set but never unset again).\n   *\n   * The combobox family's clear, as {@link EntityCombobox} draws it: a pointer\n   * shortcut inside the trigger, out of the tab order so it is not a second stop\n   * between this field and the next, named by `clearLabel` (default: the\n   * `combobox.clear` label every picker in the family shares). The keyboard way is\n   * Delete or Backspace on the closed trigger. Not offered while `disabled` or locked\n   * (`commit` / `disabledReason`): a clear is a change like any other.\n   */\n  clearable?: Clearable;\n  /** The clear \"×\"'s accessible name. Wins over `combobox.clear` from the\n   *  {@link UiKitProvider}, as {@link EntityCombobox}'s `clearLabel` does. */\n  clearLabel?: string;\n  /**\n   * The TRIGGER — the focusable `<button>` a reader meets — as a React 19 ref prop,\n   * the way {@link MoneyField} takes its input's (kastlan: react-hook-form's\n   * focus-on-error calls `focus()` on whatever `field.ref` was handed, and without a\n   * ref the first field in error on an address form was never focused). See\n   * `RhfCountrySelect`, which passes it.\n   */\n  ref?: Ref<HTMLButtonElement>;\n  /**\n   * Offer only these codes (any case; duplicates and malformed entries dropped).\n   * Default: every ISO 3166-1 country, {@link COUNTRY_CODES}. Sorted by name either\n   * way — the order given is not kept, because the reader looks a country up by its\n   * name in their own language, and any other order is one they cannot predict.\n   *\n   * keksdose's bank picker offers the fifteen countries its banks are in\n   * (DE AT CH FR IT ES NL BE PT PL SE DK FI GB IE). A code that is not in ISO's list\n   * is allowed here on purpose: `XK` (Kosovo) is the app's decision, not the kit's.\n   */\n  countries?: readonly string[];\n  /**\n   * A short group shown FIRST, in the order given, above the alphabetical rest —\n   * kastlan's CH, LI, DE, AT, FR, IT, the six countries most of its customers live\n   * in, out of a list of 249. Each code appears once: a preferred country is not\n   * repeated in the rest. The rest gets a heading (`labels.others`) so the boundary\n   * is visible. Search keeps the split: matching preferred countries stay on top.\n   * Codes not in `countries` are ignored — `countries` decides what can be picked.\n   */\n  preferred?: readonly string[];\n  /**\n   * Draw each country's flag as a flag-icons span (`fi fi-ch`), in the rows and on\n   * the trigger. Default `false`, because the kit ships no flag stylesheet — the same\n   * convention as `LanguageMenu`'s `country` and `CurrencySelect`: the host imports\n   * `flag-icons/css/flag-icons.min.css`, and without it a flag is an empty box.\n   */\n  flags?: boolean;\n  /** The floating label, as on every field. A string also names the trigger\n   *  (\"Country: Switzerland\"). */\n  label?: ReactNode;\n  /** As {@link Select}'s `hint`: plain TEXT is a caption under the field, attached\n   *  through `aria-describedby`; a {@link FieldHint} rides the label line (or the\n   *  field's end, when there is no label). */\n  hint?: ReactNode;\n  /** As {@link Input}'s `error`: rendered under the field, on the trigger's\n   *  `aria-describedby`, and implies `invalid`. */\n  error?: ReactNode;\n  /** Required and unanswered — {@link FIELD_INVALID}, as on every field. */\n  invalid?: boolean;\n  /** The empty trigger's text. Default: nothing when the field has a `label` or an\n   *  `aria-labelledby` (the label already says what goes here), else `labels.country`. */\n  placeholder?: string;\n  /** As on the other pickers: no focus, no list, the settled look. */\n  disabled?: boolean;\n  /**\n   * Why the country cannot be changed — {@link Button}'s `disabledReason`, for a field\n   * that saves itself. The trigger stays focusable and `aria-disabled`, the list does\n   * not open and `onChange` never fires; the reason is in the kit {@link Tooltip} and\n   * on the trigger's `aria-describedby`. Wins over `disabled`.\n   */\n  disabledReason?: ReactNode;\n  /**\n   * This select SAVES on change (a settings row with no Save button). Under a locked\n   * {@link WriteLockProvider} it is locked the `disabledReason` way, with the lock's\n   * reason. A country field inside a form that has its own Save stays editable under\n   * the lock — leave this off there, and put `commit` on the Save.\n   */\n  commit?: CommitScope;\n  /** The language the names are in. Default: the `<UiKitProvider locale>`, else\n   *  English (see {@link countryName}). */\n  locale?: string;\n  /** Per-instance overrides of {@link CountrySelectLabels}, over the provider's\n   *  `countrySelect` namespace, over English. */\n  labels?: Partial<CountrySelectLabels>;\n  /**\n   * Name the trigger by an element of the caller's — a form's own label above the\n   * field, which is how `RhfCountrySelect` names it. The trigger is then named by\n   * that element AND the chosen country (two references, as {@link DatePicker}'s\n   * trigger is named, so \"Country Switzerland\" needs no punctuation to translate),\n   * instead of the composed \"label: country\". An `aria-label` still wins. Before\n   * 0.23 this landed on the wrapper `<div>`, which has no role to be named.\n   */\n  \"aria-labelledby\"?: string;\n}\n\n/** Fold a name for search: no case, no accents — \"osterreich\" finds Österreich, \"cote\"\n *  finds Côte d'Ivoire. A keyboard without the letter must still reach the country. */\nfunction fold(s: string): string {\n  return s.normalize(\"NFD\").replace(/\\p{M}/gu, \"\").toLowerCase();\n}\n\ninterface Entry {\n  code: string;\n  name: string;\n  folded: string;\n}\n\n/** How well `e` answers `q` (already folded): the code itself (a two-letter query\n *  \"ch\" means Switzerland before it means Chad), then the start of the name, then\n *  anywhere in it. `-1` for no match. */\nfunction rank(e: Entry, q: string): number {\n  if (e.code.toLowerCase() === q) return 0;\n  if (e.folded.startsWith(q)) return 1;\n  return e.folded.includes(q) ? 2 : -1;\n}\n\n/** Best rank first; a stable sort, so equal ranks keep the collated (or preferred)\n *  order they came in. */\nfunction search(entries: Entry[], q: string): Entry[] {\n  return entries\n    .map((e) => ({ e, r: rank(e, q) }))\n    .filter((x) => x.r >= 0)\n    .sort((a, b) => a.r - b.r)\n    .map((x) => x.e);\n}\n\nfunction toOption(e: Entry, flags: boolean, group?: string): ComboOption<string> {\n  return {\n    value: e.code,\n    label: e.name,\n    icon: flags ? <CurrencyFlag country={e.code.toLowerCase()} /> : undefined,\n    group,\n  };\n}\n\nfunction collator(locale: string): Intl.Collator {\n  try {\n    return new Intl.Collator(locale);\n  } catch {\n    return new Intl.Collator();\n  }\n}\n\n/**\n * A country picker: the value is the ISO 3166-1 alpha-2 code (\"CH\"), the names are the\n * runtime's own (`Intl.DisplayNames`) in the provider's locale, sorted by that\n * locale's collation. Requested by kastlan (customer and handover addresses, with its\n * six neighbours on top) and keksdose (the bank picker's fifteen countries) — both\n * apps carried a hand-written list of names in two languages.\n *\n * ## Built on the kit's searchable combobox\n *\n * 249 countries is not a menu, it is a lookup, and the list has to work on a phone. So\n * this is the entity pickers' machinery — `useComboboxCore` and `ComboboxPanel`, which\n * {@link EntityCombobox} is also made of — not a native `<select>`: the anchored panel\n * with a search box on a pointer device, the full-screen sheet with its own search box\n * on a phone (live #200), the same keyboard (APG listbox), the same announcements, the\n * same group headings. Only the trigger is this component's own, because the trigger\n * is where the write lock lives: `EntityCombobox`'s is a native `disabled` button,\n * and a locked field has to stay focusable to say why.\n *\n * The search is this component's own too: it folds accents and case (\"osterreich\"\n * finds Österreich), matches the code (\"ch\" ranks Switzerland first), and ranks\n * name-starts above name-contains. The panel is handed those rows in place of the\n * core's plain substring filter.\n *\n * Field anatomy as on every field: floating `label`, `hint`, `error`, `invalid`; the\n * trigger is named \"label: value\" as the other trigger pickers are.\n *\n * Since 0.23 it takes a `ref` to the trigger (react-hook-form's focus-on-error, kastlan)\n * and `clearable`, which hands `onChange` `null`.\n */\nexport function CountrySelect<Clearable extends boolean = false>({\n  value,\n  onChange,\n  countries,\n  preferred,\n  flags = false,\n  label,\n  hint,\n  error,\n  invalid,\n  placeholder,\n  disabled,\n  disabledReason: ownReason,\n  commit,\n  clearable,\n  clearLabel,\n  locale: localeProp,\n  labels: labelsProp,\n  className,\n  id,\n  ref,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  \"aria-describedby\": ariaDescribedBy,\n  \"aria-invalid\": ariaInvalid,\n  \"aria-required\": ariaRequired,\n  ...rest\n}: CountrySelectProps<Clearable>) {\n  const text = useKitLabels(\"countrySelect\", DEFAULT_COUNTRY_SELECT_LABELS, labelsProp);\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  // The clear's name is the family's (`combobox.clear`), as on EntityCombobox; a prop\n  // left `undefined` falls through to the provider rather than masking it.\n  const comboText = useKitLabels(\"combobox\", DEFAULT_COMBOBOX_LABELS, { clear: clearLabel });\n  // English without a locale — see `countryName`.\n  const locale = useKitLocale(localeProp) ?? \"en\";\n\n  // ── The list ──────────────────────────────────────────────────────────────\n  // Keyed on the arrays' CONTENTS: `countries={[\"DE\", \"AT\"]}` written inline is a new\n  // array every render, and resorting 249 names on every keystroke elsewhere in the\n  // form is work for nothing.\n  const countriesKey = countries?.join(\",\");\n  const preferredKey = preferred?.join(\",\");\n  const { top, rest: others } = useMemo(() => {\n    const seen = new Set<string>();\n    const pool: string[] = [];\n    for (const raw of countriesKey !== undefined ? countriesKey.split(\",\") : COUNTRY_CODES) {\n      const code = normalizeCountryCode(raw);\n      if (code && !seen.has(code)) {\n        seen.add(code);\n        pool.push(code);\n      }\n    }\n    const entry = (code: string): Entry => {\n      const name = countryName(code, locale);\n      return { code, name, folded: fold(name) };\n    };\n    const firsts: Entry[] = [];\n    const picked = new Set<string>();\n    for (const raw of preferredKey ? preferredKey.split(\",\") : []) {\n      const code = normalizeCountryCode(raw);\n      if (code && seen.has(code) && !picked.has(code)) {\n        picked.add(code);\n        firsts.push(entry(code));\n      }\n    }\n    const compare = collator(locale).compare;\n    const sorted = pool\n      .filter((c) => !picked.has(c))\n      .map(entry)\n      .sort((a, b) => compare(a.name, b.name));\n    return { top: firsts, rest: sorted };\n  }, [countriesKey, preferredKey, locale]);\n\n  // `filter: false` — the panel is handed the rows `search` ranks below instead of\n  // the core's substring filter; the core still owns open, query, the highlighted row,\n  // anchoring and dismissal.\n  const allOptions = useMemo(\n    () => [...top, ...others].map((e) => toOption(e, flags)),\n    [top, others, flags],\n  );\n  const core = useComboboxCore<string>({ options: allOptions, filter: false });\n  const { open, setOpen, query, triggerRef, closeToTrigger } = core;\n  // The core anchors the panel to the trigger and hands focus back to it; the caller's\n  // `ref` wants the same element. One callback feeds both.\n  const setTrigger = useCallback(\n    (el: HTMLButtonElement | null) => {\n      triggerRef.current = el;\n      assignRef(ref, el);\n    },\n    [ref, triggerRef],\n  );\n\n  const q = fold(query.trim());\n  const results = useMemo(() => {\n    const firsts = q ? search(top, q) : top;\n    const below = q ? search(others, q) : others;\n    // The heading only where it separates something: with no preferred country in\n    // view it would head the whole list and divide nothing.\n    const heading = firsts.length > 0 ? text.others : undefined;\n    return [...firsts.map((e) => toOption(e, flags)), ...below.map((e) => toOption(e, flags, heading))];\n  }, [top, others, q, text.others, flags]);\n\n  // ── The lock ──────────────────────────────────────────────────────────────\n  const reason = useCommitReason(commit, ownReason);\n  const locked = hasMessage(reason);\n  const inert = locked || Boolean(disabled);\n  // A lock (or `disabled`) arriving while the list is up closes it — adjusted while\n  // rendering, as the core adjusts its own query, so no frame shows a list that can\n  // no longer be used.\n  if (inert && open) setOpen(false);\n\n  // ── The field ─────────────────────────────────────────────────────────────\n  const generated = useId();\n  const triggerId = id ?? generated;\n  const listboxId = `${generated}-listbox`;\n  const hintId = useId();\n  const reasonId = useId();\n  // Text is a caption under the field; a FieldHint rides the label line. See `hint`.\n  const textHint = (typeof hint === \"string\" && hint !== \"\") || typeof hint === \"number\";\n  const field = useComboboxFieldError(\n    error,\n    invalid || ariaInvalid === true || ariaInvalid === \"true\",\n    // The caller's, then the standing advice, then (inside) the error — the order every\n    // field keeps — and the lock's reason last, while there is one.\n    mergeDescribedBy(ariaDescribedBy, textHint && hintId),\n  );\n\n  const code = normalizeCountryCode(value);\n  const selectedName = code ? countryName(code, locale) : undefined;\n  // A field named by a label of the caller's (`aria-labelledby`) is a labelled field too:\n  // the label already says what goes here.\n  const emptyText = placeholder ?? (label === undefined && !ariaLabelledBy ? text.country : \"\");\n  const fieldName = typeof label === \"string\" ? label : text.country;\n  const valueId = `${generated}-value`;\n  // Named by the caller's element (a form's label) — then the shown text is the second\n  // reference, as the composed name below has the value second; but only when it IS a\n  // value or the caller's placeholder, never the `country` fallback word.\n  const labelledBy =\n    ariaLabel === undefined && ariaLabelledBy\n      ? mergeDescribedBy(ariaLabelledBy, (selectedName !== undefined || Boolean(placeholder)) && valueId)\n      : undefined;\n  const name =\n    labelledBy !== undefined\n      ? undefined\n      : (ariaLabel ??\n        (selectedName !== undefined\n          ? common.fieldValue(fieldName, selectedName)\n          : placeholder\n            ? common.fieldValue(fieldName, placeholder)\n            : fieldName));\n\n  const showClear = Boolean(clearable && code && !inert);\n  // `onChange` widened to take the clear's `null` — its type says so once `clearable`\n  // is set, and the clear is only ever offered then.\n  const emit = onChange as (code: string | null) => void;\n  const clear = () => {\n    if (!showClear) return;\n    emit(null);\n  };\n\n  const choose = (o: ComboOption<string>) => {\n    if (inert) return;\n    emit(o.value);\n    // Back to the trigger: the panel holding focus is about to unmount, and a keyboard\n    // user who has answered this field should stand on it, ready to Tab on.\n    closeToTrigger();\n  };\n\n  const trigger = (\n    <button\n      ref={setTrigger}\n      id={triggerId}\n      type=\"button\"\n      // A closed choice that expands into the list below — the role every trigger\n      // picker in the kit wears (see EntityCombobox), and the one that supports\n      // `aria-invalid`.\n      role=\"combobox\"\n      aria-haspopup=\"listbox\"\n      aria-controls={listboxId}\n      aria-expanded={open}\n      aria-label={name}\n      aria-labelledby={labelledBy}\n      aria-invalid={field.isInvalid || undefined}\n      aria-required={ariaRequired}\n      aria-describedby={mergeDescribedBy(field.describedBy, locked && reasonId)}\n      // The focusable kind of disabled while locked (Button's rule): native `disabled`\n      // would take the field out of the tab order, and the reason with it.\n      disabled={locked ? undefined : disabled}\n      aria-disabled={locked || undefined}\n      onClick={(e) => {\n        if (inert) {\n          e.preventDefault();\n          return;\n        }\n        setOpen((o) => !o);\n      }}\n      // Down/Up opens the list from the closed trigger, per the APG; Enter and Space\n      // already do through the button's own click.\n      onKeyDown={(e) => {\n        if (inert) return;\n        if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\") {\n          e.preventDefault();\n          setOpen(true);\n        } else if (showClear && !open && (e.key === \"Delete\" || e.key === \"Backspace\")) {\n          // The keyboard's clear: the \"×\" is out of the tab order (see `clearable`).\n          e.preventDefault();\n          clear();\n        }\n      }}\n      className={cn(\n        FIELD_TRIGGER,\n        // `peer` dims the floating label with a natively disabled trigger, as Select's.\n        \"peer pe-9\",\n        label !== undefined && FIELD_FLOATING_PAD,\n        inert && \"cursor-not-allowed opacity-50\",\n        field.isInvalid && FIELD_INVALID,\n      )}\n    >\n      <span className=\"flex min-w-0 items-center gap-2\">\n        {flags && code && <CurrencyFlag country={code.toLowerCase()} />}\n        {/* A long name (\"Saint Vincent and the Grenadines\") truncates rather than\n            widening the field: the kit is checked at 390px. */}\n        <span\n          id={valueId}\n          className={cn(\"truncate\", selectedName === undefined && \"text-[var(--text-placeholder)]\")}\n        >\n          {selectedName ?? emptyText}\n        </span>\n      </span>\n      {showClear ? (\n        /* eslint-disable-next-line jsx-a11y/click-events-have-key-events -- tabIndex -1 inside\n            the trigger <button>, so it never holds focus and a key handler here could never\n            fire; the keys go to the trigger, where Delete and Backspace clear. A pointer\n            shortcut, as on EntityCombobox. */\n        <span\n          role=\"button\"\n          tabIndex={-1}\n          aria-label={comboText.clear}\n          onClick={(e) => {\n            e.stopPropagation();\n            clear();\n          }}\n          className=\"absolute end-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-[var(--text-placeholder)] hover:text-[var(--text-secondary)]\"\n        >\n          <X aria-hidden className=\"size-4\" />\n        </span>\n      ) : (\n        <FieldChevron />\n      )}\n    </button>\n  );\n\n  const control = locked ? (\n    // In a FRAGMENT, as Button does, so the Tooltip does not clone its bubble into the\n    // description as well — the hidden copy is what `aria-describedby` points at.\n    <Tooltip label={reason} className=\"flex w-full\">\n      <>\n        {trigger}\n        <span id={reasonId} hidden>\n          {reason}\n        </span>\n      </>\n    </Tooltip>\n  ) : (\n    trigger\n  );\n\n  const labelHint = textHint ? undefined : hasMessage(hint) ? hint : undefined;\n  const box =\n    label !== undefined ? (\n      <FloatingField htmlFor={triggerId} label={label} staticLabel hint={labelHint}>\n        {control}\n      </FloatingField>\n    ) : labelHint !== undefined ? (\n      // No label line to ride: the \"?\" goes at the field's end, outside the box, as on\n      // an unlabelled Select.\n      <div className=\"flex items-center gap-1.5\">\n        <div className=\"relative min-w-0 flex-1\">{control}</div>\n        <span className=\"flex shrink-0 items-center\">{labelHint}</span>\n      </div>\n    ) : (\n      <div className=\"relative\">{control}</div>\n    );\n\n  return (\n    // `rest` dresses the wrapper — a `data-tour` anchor, a test id. The name, the\n    // description and the invalid state are on the trigger above.\n    <div {...rest} className={className}>\n      {box}\n      {textHint && (\n        <p id={hintId} className=\"mt-1 text-caption leading-tight text-[var(--text-muted)]\">\n          {hint}\n        </p>\n      )}\n      {field.errorEl}\n      <ComboboxPanel\n        // The core with the rows ranked above in place of its own filter's.\n        core={{ ...core, results }}\n        listboxId={listboxId}\n        // On a phone the list is a full-screen sheet, which needs the field's own\n        // name to say what it is asking for (live #200).\n        sheetTitle={label ?? text.country}\n        searchPlaceholder={text.search}\n        isSelected={(v) => v === code}\n        onChoose={choose}\n        showCreate={false}\n        onCreate={() => {}}\n        createContent={null}\n      />\n    </div>\n  );\n}\n"],"mappings":"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","names":["code","name"]}
+{"version":3,"sources":["../../src/components/country-select.tsx"],"sourcesContent":["import { useCallback, useId, useMemo } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode, Ref } from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { COUNTRY_CODES, countryName, normalizeCountryCode } from \"../lib/countries\";\nimport { rankMatch } from \"../lib/text-match\";\nimport {\n  FieldChevron,\n  FIELD_FLOATING_PAD,\n  FIELD_INVALID,\n  FIELD_TRIGGER,\n  FloatingField,\n} from \"./field-base\";\nimport {\n  assignRef,\n  EndHintRow,\n  LockedReason,\n  mergeDescribedBy,\n  useFieldMessages,\n  useLockReason,\n  type DisabledReasonDisplay,\n} from \"./field-parts\";\nimport { CurrencyFlag } from \"./currency-select\";\nimport { ComboboxPanel, useComboboxCore, type ComboOption } from \"./combobox-core\";\nimport type { CommitScope } from \"./write-lock\";\nimport {\n  DEFAULT_COMBOBOX_LABELS,\n  DEFAULT_COMMON_LABELS,\n  useKitLabels,\n  useKitLocale,\n  type LabelOverride,\n} from \"../i18n/kit-labels\";\nimport { DEFAULT_COUNTRY_SELECT_LABELS } from \"./country-select-labels\";\n\n// ── Labels ────────────────────────────────────────────────────────────────────\n\n/** The words {@link CountrySelect} renders on its own behalf. The list's \"no results\",\n *  \"loading\" and result-count announcements are the shared `combobox` namespace's,\n *  as on every other searchable picker. */\nexport interface CountrySelectLabels {\n  /** What the field is, when the caller gives no `label`: the first half of the\n   *  trigger's accessible name, the phone sheet's title, and the empty trigger's\n   *  text. */\n  country: string;\n  /** The search box in the open list. */\n  search: string;\n  /** The heading between the `preferred` countries and all the others. Shown only\n   *  when `preferred` puts something above it. */\n  others: string;\n}\n\n// Defined in ./country-select-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_COUNTRY_SELECT_LABELS };\n\n// ── Props ─────────────────────────────────────────────────────────────────────\n\n/**\n * `onChange` is the kit's — \"a country was picked\", carrying its code — rather than\n * the div's form event. `id` and the `aria-*` wiring below go to the TRIGGER, which is\n * the control a reader meets; everything else in `rest` dresses the wrapper.\n *\n * `Clearable` follows `clearable`, the way {@link EntityCombobox}'s `C` follows its\n * `clearValue`: it is inferred from the prop, so `onChange` is `(code: string) => void`\n * for the field as it always was (`onChange={setCountry}` over a `string` state still\n * type-checks), and `(code: string | null) => void` once `clearable` is set — the\n * `null` of a clear cannot reach a handler that was never told about it.\n */\nexport interface CountrySelectProps<Clearable extends boolean = false>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\" | \"defaultValue\"> {\n  /** The chosen country as an ISO 3166-1 alpha-2 code (\"CH\"), in either case;\n   *  `null`, `undefined` or `\"\"` when none is. A code outside the list still shows\n   *  its name — the list restricts what can be PICKED, not what can be shown. */\n  value: string | null | undefined;\n  /** A country was picked: its alpha-2 code, always upper-case. With `clearable`,\n   *  also `null`: the \"×\" (or Delete on the trigger) emptied the field. */\n  onChange: (code: Clearable extends true ? string | null : string) => void;\n  /**\n   * Offer a clear \"×\" in place of the chevron while a country is chosen; it hands\n   * `onChange` `null` (the kit's later list: an optional country — a contact's\n   * nationality, a bank filter's \"any country\" — could be set but never unset again).\n   *\n   * The combobox family's clear, as {@link EntityCombobox} draws it: a pointer\n   * shortcut inside the trigger, out of the tab order so it is not a second stop\n   * between this field and the next, named by `clearLabel` (default: the\n   * `combobox.clear` label every picker in the family shares). The keyboard way is\n   * Delete or Backspace on the closed trigger. Not offered while `disabled` or locked\n   * (`commit` / `disabledReason`): a clear is a change like any other.\n   */\n  clearable?: Clearable;\n  /** The clear \"×\"'s accessible name. Wins over `combobox.clear` from the\n   *  {@link UiKitProvider}, as {@link EntityCombobox}'s `clearLabel` does. */\n  clearLabel?: string;\n  /**\n   * The TRIGGER — the focusable `<button>` a reader meets — as a React 19 ref prop,\n   * the way {@link MoneyField} takes its input's (kastlan: react-hook-form's\n   * focus-on-error calls `focus()` on whatever `field.ref` was handed, and without a\n   * ref the first field in error on an address form was never focused). See\n   * `RhfCountrySelect`, which passes it.\n   */\n  ref?: Ref<HTMLButtonElement>;\n  /**\n   * Offer only these codes (any case; duplicates and malformed entries dropped).\n   * Default: every ISO 3166-1 country, {@link COUNTRY_CODES}. Sorted by name either\n   * way — the order given is not kept, because the reader looks a country up by its\n   * name in their own language, and any other order is one they cannot predict.\n   *\n   * keksdose's bank picker offers the fifteen countries its banks are in\n   * (DE AT CH FR IT ES NL BE PT PL SE DK FI GB IE). A code that is not in ISO's list\n   * is allowed here on purpose: `XK` (Kosovo) is the app's decision, not the kit's.\n   */\n  countries?: readonly string[];\n  /**\n   * A short group shown FIRST, in the order given, above the alphabetical rest —\n   * kastlan's CH, LI, DE, AT, FR, IT, the six countries most of its customers live\n   * in, out of a list of 249. Each code appears once: a preferred country is not\n   * repeated in the rest. The rest gets a heading (`labels.others`) so the boundary\n   * is visible. Search keeps the split: matching preferred countries stay on top.\n   * Codes not in `countries` are ignored — `countries` decides what can be picked.\n   */\n  preferred?: readonly string[];\n  /**\n   * Draw each country's flag as a flag-icons span (`fi fi-ch`), in the rows and on\n   * the trigger. Default `false`, because the kit ships no flag stylesheet — the same\n   * convention as `LanguageMenu`'s `country` and `CurrencySelect`: the host imports\n   * `flag-icons/css/flag-icons.min.css`, and without it a flag is an empty box.\n   */\n  flags?: boolean;\n  /** The floating label, as on every field. A string also names the trigger\n   *  (\"Country: Switzerland\"). */\n  label?: ReactNode;\n  /** As {@link Select}'s `hint`: plain TEXT is a caption under the field, attached\n   *  through `aria-describedby`; a {@link FieldHint} rides the label line (or the\n   *  field's end, when there is no label). */\n  hint?: ReactNode;\n  /** As {@link Input}'s `error`: rendered under the field, on the trigger's\n   *  `aria-describedby`, and implies `invalid`. */\n  error?: ReactNode;\n  /** Required and unanswered — {@link FIELD_INVALID}, as on every field. */\n  invalid?: boolean;\n  /** The empty trigger's text. Default: nothing when the field has a `label` or an\n   *  `aria-labelledby` (the label already says what goes here), else `labels.country`. */\n  placeholder?: string;\n  /** As on the other pickers: no focus, no list, the settled look. */\n  disabled?: boolean;\n  /**\n   * Why the country cannot be changed — {@link Button}'s `disabledReason`, for a field\n   * that saves itself. The trigger stays focusable and `aria-disabled`, the list does\n   * not open and `onChange` never fires; the reason is a line under the field at Large\n   * and on a touch screen, else in the kit {@link Tooltip} (`disabledReasonDisplay`), and\n   * on the trigger's `aria-describedby`. Wins over `disabled`.\n   */\n  disabledReason?: ReactNode;\n  /** Where the reason shows — {@link Button}'s `disabledReasonDisplay`: a line under the\n   *  field at Large and on a touch screen by default, the tooltip otherwise (DUP-3). */\n  disabledReasonDisplay?: DisabledReasonDisplay;\n  /**\n   * This select SAVES on change (a settings row with no Save button). Under a locked\n   * {@link WriteLockProvider} it is locked the `disabledReason` way, with the lock's\n   * reason. A country field inside a form that has its own Save stays editable under\n   * the lock — leave this off there, and put `commit` on the Save.\n   */\n  commit?: CommitScope;\n  /** The language the names are in. Default: the `<UiKitProvider locale>`, else\n   *  English (see {@link countryName}). */\n  locale?: string;\n  /** Per-instance overrides of {@link CountrySelectLabels}, over the provider's\n   *  `countrySelect` namespace, over English. */\n  labels?: LabelOverride<CountrySelectLabels>;\n  /**\n   * Name the trigger by an element of the caller's — a form's own label above the\n   * field, which is how `RhfCountrySelect` names it. The trigger is then named by\n   * that element AND the chosen country (two references, as {@link DatePicker}'s\n   * trigger is named, so \"Country Switzerland\" needs no punctuation to translate),\n   * instead of the composed \"label: country\". An `aria-label` still wins. Before\n   * 0.23 this landed on the wrapper `<div>`, which has no role to be named.\n   */\n  \"aria-labelledby\"?: string;\n}\n\ninterface Entry {\n  code: string;\n  name: string;\n}\n\n/** Best rank first; a stable sort, so equal ranks keep the collated (or preferred)\n *  order they came in. The rank is the kit's one (`rankMatch`, DUP-5 — written here\n *  first): the code itself (a two-letter query \"ch\" means Switzerland before it means\n *  Chad), then the start of the name, then anywhere in it, with accents and case folded\n *  — \"osterreich\" finds Österreich, \"cote\" Côte d'Ivoire. */\nfunction search(entries: Entry[], q: string, locale: string): Entry[] {\n  return entries\n    .map((e) => ({ e, r: rankMatch(e.name, q, { code: e.code, locale }) }))\n    .filter((x) => x.r >= 0)\n    .sort((a, b) => a.r - b.r)\n    .map((x) => x.e);\n}\n\nfunction toOption(e: Entry, flags: boolean, group?: string): ComboOption<string> {\n  return {\n    value: e.code,\n    label: e.name,\n    icon: flags ? <CurrencyFlag country={e.code.toLowerCase()} /> : undefined,\n    group,\n  };\n}\n\nfunction collator(locale: string): Intl.Collator {\n  try {\n    return new Intl.Collator(locale);\n  } catch {\n    return new Intl.Collator();\n  }\n}\n\n/**\n * A country picker: the value is the ISO 3166-1 alpha-2 code (\"CH\"), the names are the\n * runtime's own (`Intl.DisplayNames`) in the provider's locale, sorted by that\n * locale's collation. Requested by kastlan (customer and handover addresses, with its\n * six neighbours on top) and keksdose (the bank picker's fifteen countries) — both\n * apps carried a hand-written list of names in two languages.\n *\n * ## Built on the kit's searchable combobox\n *\n * 249 countries is not a menu, it is a lookup, and the list has to work on a phone. So\n * this is the entity pickers' machinery — `useComboboxCore` and `ComboboxPanel`, which\n * {@link EntityCombobox} is also made of — not a native `<select>`: the anchored panel\n * with a search box on a pointer device, the full-screen sheet with its own search box\n * on a phone (live #200), the same keyboard (APG listbox), the same announcements, the\n * same group headings. Only the trigger is this component's own, because the trigger\n * is where the write lock lives: `EntityCombobox`'s is a native `disabled` button,\n * and a locked field has to stay focusable to say why.\n *\n * The ranking is this component's own too: it folds accents and case (\"osterreich\"\n * finds Österreich), matches the code (\"ch\" ranks Switzerland first), and ranks\n * name-starts above name-contains — the kit's `rankMatch`, which began here. The panel\n * is handed those rows in place of the core's filter, which does not rank.\n *\n * Field anatomy as on every field: floating `label`, `hint`, `error`, `invalid`; the\n * trigger is named \"label: value\" as the other trigger pickers are.\n *\n * Since 0.23 it takes a `ref` to the trigger (react-hook-form's focus-on-error, kastlan)\n * and `clearable`, which hands `onChange` `null`.\n */\nexport function CountrySelect<Clearable extends boolean = false>({\n  value,\n  onChange,\n  countries,\n  preferred,\n  flags = false,\n  label,\n  hint,\n  error,\n  invalid,\n  placeholder,\n  disabled,\n  disabledReason: ownReason,\n  disabledReasonDisplay,\n  commit,\n  clearable,\n  clearLabel,\n  locale: localeProp,\n  labels: labelsProp,\n  className,\n  id,\n  ref,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  \"aria-describedby\": ariaDescribedBy,\n  \"aria-invalid\": ariaInvalid,\n  \"aria-required\": ariaRequired,\n  ...rest\n}: CountrySelectProps<Clearable>) {\n  const text = useKitLabels(\"countrySelect\", DEFAULT_COUNTRY_SELECT_LABELS, labelsProp);\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  // The clear's name is the family's (`combobox.clear`), as on EntityCombobox; a prop\n  // left `undefined` falls through to the provider rather than masking it.\n  const comboText = useKitLabels(\"combobox\", DEFAULT_COMBOBOX_LABELS, { clear: clearLabel });\n  // English without a locale — see `countryName`.\n  const locale = useKitLocale(localeProp) ?? \"en\";\n\n  // ── The list ──────────────────────────────────────────────────────────────\n  // Keyed on the arrays' CONTENTS: `countries={[\"DE\", \"AT\"]}` written inline is a new\n  // array every render, and resorting 249 names on every keystroke elsewhere in the\n  // form is work for nothing.\n  const countriesKey = countries?.join(\",\");\n  const preferredKey = preferred?.join(\",\");\n  const { top, rest: others } = useMemo(() => {\n    const seen = new Set<string>();\n    const pool: string[] = [];\n    for (const raw of countriesKey !== undefined ? countriesKey.split(\",\") : COUNTRY_CODES) {\n      const code = normalizeCountryCode(raw);\n      if (code && !seen.has(code)) {\n        seen.add(code);\n        pool.push(code);\n      }\n    }\n    const entry = (code: string): Entry => ({ code, name: countryName(code, locale) });\n    const firsts: Entry[] = [];\n    const picked = new Set<string>();\n    for (const raw of preferredKey ? preferredKey.split(\",\") : []) {\n      const code = normalizeCountryCode(raw);\n      if (code && seen.has(code) && !picked.has(code)) {\n        picked.add(code);\n        firsts.push(entry(code));\n      }\n    }\n    const compare = collator(locale).compare;\n    const sorted = pool\n      .filter((c) => !picked.has(c))\n      .map(entry)\n      .sort((a, b) => compare(a.name, b.name));\n    return { top: firsts, rest: sorted };\n  }, [countriesKey, preferredKey, locale]);\n\n  // `filter: false` — the panel is handed the rows `search` ranks below instead of\n  // the core's substring filter; the core still owns open, query, the highlighted row,\n  // anchoring and dismissal.\n  const allOptions = useMemo(\n    () => [...top, ...others].map((e) => toOption(e, flags)),\n    [top, others, flags],\n  );\n  const core = useComboboxCore<string>({ options: allOptions, filter: false });\n  const { open, setOpen, query, triggerRef, closeToTrigger } = core;\n  // The core anchors the panel to the trigger and hands focus back to it; the caller's\n  // `ref` wants the same element. One callback feeds both.\n  const setTrigger = useCallback(\n    (el: HTMLButtonElement | null) => {\n      triggerRef.current = el;\n      assignRef(ref, el);\n    },\n    [ref, triggerRef],\n  );\n\n  const q = query.trim();\n  const results = useMemo(() => {\n    const firsts = q ? search(top, q, locale) : top;\n    const below = q ? search(others, q, locale) : others;\n    // The heading only where it separates something: with no preferred country in\n    // view it would head the whole list and divide nothing.\n    const heading = firsts.length > 0 ? text.others : undefined;\n    return [...firsts.map((e) => toOption(e, flags)), ...below.map((e) => toOption(e, flags, heading))];\n  }, [top, others, q, text.others, flags, locale]);\n\n  // ── The lock ──────────────────────────────────────────────────────────────\n  const lock = useLockReason(commit, ownReason);\n  const locked = lock.locked;\n  const inert = locked || Boolean(disabled);\n  // A lock (or `disabled`) arriving while the list is up closes it — adjusted while\n  // rendering, as the core adjusts its own query, so no frame shows a list that can\n  // no longer be used.\n  if (inert && open) setOpen(false);\n\n  // ── The field ─────────────────────────────────────────────────────────────\n  const generated = useId();\n  const triggerId = id ?? generated;\n  const listboxId = `${generated}-listbox`;\n  // Text is a caption under the field; a FieldHint rides the label line, and is that\n  // caption at Large and on touch (§4). The caller's ids, the caption, a lock's reason,\n  // the error — Select's order. Through useFieldMessages since 0.34 (DUP-2, DUP-8).\n  const field = useFieldMessages({\n    hint,\n    error,\n    invalid,\n    describedBy: ariaDescribedBy,\n    ariaInvalid,\n    reasonId: locked && lock.reasonId,\n  });\n\n  const code = normalizeCountryCode(value);\n  const selectedName = code ? countryName(code, locale) : undefined;\n  // A field named by a label of the caller's (`aria-labelledby`) is a labelled field too:\n  // the label already says what goes here.\n  const emptyText = placeholder ?? (label === undefined && !ariaLabelledBy ? text.country : \"\");\n  const fieldName = typeof label === \"string\" ? label : text.country;\n  const valueId = `${generated}-value`;\n  // Named by the caller's element (a form's label) — then the shown text is the second\n  // reference, as the composed name below has the value second; but only when it IS a\n  // value or the caller's placeholder, never the `country` fallback word.\n  const labelledBy =\n    ariaLabel === undefined && ariaLabelledBy\n      ? mergeDescribedBy(ariaLabelledBy, (selectedName !== undefined || Boolean(placeholder)) && valueId)\n      : undefined;\n  const name =\n    labelledBy !== undefined\n      ? undefined\n      : (ariaLabel ??\n        (selectedName !== undefined\n          ? common.fieldValue(fieldName, selectedName)\n          : placeholder\n            ? common.fieldValue(fieldName, placeholder)\n            : fieldName));\n\n  const showClear = Boolean(clearable && code && !inert);\n  // `onChange` widened to take the clear's `null` — its type says so once `clearable`\n  // is set, and the clear is only ever offered then.\n  const emit = onChange as (code: string | null) => void;\n  const clear = () => {\n    if (!showClear) return;\n    emit(null);\n  };\n\n  const choose = (o: ComboOption<string>) => {\n    if (inert) return;\n    emit(o.value);\n    // Back to the trigger: the panel holding focus is about to unmount, and a keyboard\n    // user who has answered this field should stand on it, ready to Tab on.\n    closeToTrigger();\n  };\n\n  const trigger = (\n    <button\n      ref={setTrigger}\n      id={triggerId}\n      type=\"button\"\n      // A closed choice that expands into the list below — the role every trigger\n      // picker in the kit wears (see EntityCombobox), and the one that supports\n      // `aria-invalid`.\n      role=\"combobox\"\n      aria-haspopup=\"listbox\"\n      aria-controls={listboxId}\n      aria-expanded={open}\n      aria-label={name}\n      aria-labelledby={labelledBy}\n      aria-invalid={field.isInvalid || undefined}\n      aria-required={ariaRequired}\n      aria-describedby={field.describedBy}\n      // The focusable kind of disabled while locked (Button's rule): native `disabled`\n      // would take the field out of the tab order, and the reason with it.\n      disabled={locked ? undefined : disabled}\n      aria-disabled={locked || undefined}\n      onClick={(e) => {\n        if (inert) {\n          e.preventDefault();\n          return;\n        }\n        setOpen((o) => !o);\n      }}\n      // Down/Up opens the list from the closed trigger, per the APG; Enter and Space\n      // already do through the button's own click.\n      onKeyDown={(e) => {\n        if (inert) return;\n        if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\") {\n          e.preventDefault();\n          setOpen(true);\n        } else if (showClear && !open && (e.key === \"Delete\" || e.key === \"Backspace\")) {\n          // The keyboard's clear: the \"×\" is out of the tab order (see `clearable`).\n          e.preventDefault();\n          clear();\n        }\n      }}\n      className={cn(\n        FIELD_TRIGGER,\n        // `peer` dims the floating label with a natively disabled trigger, as Select's.\n        \"peer pe-9\",\n        label !== undefined && FIELD_FLOATING_PAD,\n        inert && \"cursor-not-allowed opacity-50\",\n        field.isInvalid && FIELD_INVALID,\n      )}\n    >\n      <span className=\"flex min-w-0 items-center gap-2\">\n        {flags && code && <CurrencyFlag country={code.toLowerCase()} />}\n        {/* A long name (\"Saint Vincent and the Grenadines\") truncates rather than\n            widening the field: the kit is checked at 390px. From Large up it wraps and\n            the trigger grows instead (text size §10.17, round 0.34 T1). */}\n        <span\n          id={valueId}\n          className={cn(\"truncate-until-large\", selectedName === undefined && \"text-placeholder\")}\n        >\n          {selectedName ?? emptyText}\n        </span>\n      </span>\n      {showClear ? (\n        /* eslint-disable-next-line jsx-a11y/click-events-have-key-events -- tabIndex -1 inside\n            the trigger <button>, so it never holds focus and a key handler here could never\n            fire; the keys go to the trigger, where Delete and Backspace clear. A pointer\n            shortcut, as on EntityCombobox. */\n        <span\n          role=\"button\"\n          tabIndex={-1}\n          aria-label={comboText.clear}\n          onClick={(e) => {\n            e.stopPropagation();\n            clear();\n          }}\n          className=\"absolute end-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-placeholder hover:text-secondary\"\n        >\n          <X aria-hidden className=\"size-4\" />\n        </span>\n      ) : (\n        <FieldChevron />\n      )}\n    </button>\n  );\n\n  const control = locked ? (\n    // Button's frame: the line under the trigger, or the Tooltip with a hidden copy for\n    // `aria-describedby`. `items-stretch`: in the line's column the trigger keeps the\n    // field's full width.\n    <LockedReason lock={lock} display={disabledReasonDisplay} className=\"flex w-full items-stretch\">\n      {trigger}\n    </LockedReason>\n  ) : (\n    trigger\n  );\n\n  const box =\n    label !== undefined ? (\n      <FloatingField htmlFor={triggerId} label={label} staticLabel hint={field.labelHint}>\n        {control}\n      </FloatingField>\n    ) : (\n      // No label line to ride: a \"?\" goes at the field's end, outside the box, as on an\n      // unlabelled Select.\n      <EndHintRow hint={field.labelHint}>\n        <div className=\"relative\">{control}</div>\n      </EndHintRow>\n    );\n\n  return (\n    // `rest` dresses the wrapper — a `data-tour` anchor, a test id. The name, the\n    // description and the invalid state are on the trigger above.\n    <div {...rest} className={className}>\n      {box}\n      {field.below}\n      <ComboboxPanel\n        // The core with the rows ranked above in place of its own filter's.\n        core={{ ...core, results }}\n        listboxId={listboxId}\n        // On a phone the list is a full-screen sheet, which needs the field's own\n        // name to say what it is asking for (live #200).\n        sheetTitle={label ?? text.country}\n        searchPlaceholder={text.search}\n        isSelected={(v) => v === code}\n        onChoose={choose}\n        showCreate={false}\n        onCreate={() => {}}\n        createContent={null}\n      />\n    </div>\n  );\n}\n"],"mappings":"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","names":["code"]}

package/dist/components/currency-option-list.d.ts

@@ -0,0 +1,58 @@
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import { type ComboboxCore } from "./combobox-core.js";
+import { CURRENCIES, type CurrencyOption } from "../currencies.js";
+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 declare function CurrencyFlag({ country, className, ...rest }: CurrencyFlagProps): import("react").JSX.Element;
+export declare function getCurrency(code: string | null | undefined): CurrencyOption | 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 declare function currencyName(c: CurrencyOption, names?: Record<string, string>, locale?: string): string;
+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 declare function CurrencyOptionList({ core, listboxId, value, onChoose, codes, currencyNames, locale, searchPlaceholder, sheetTitle, }: CurrencyOptionListProps): import("react").JSX.Element;