@eifi1/ui-kit 0.21.0 → 0.23.0

package/dist/components/confirm-dialog.d.ts

@@ -1,161 +1,69 @@
-import * as react from 'react';
-import { ReactNode } from 'react';
-import { TypedMatch } from './danger-confirm.js';
-
-/**
- * The `confirmDialog` namespace of `<UiKitProvider labels>`: the two buttons' fallback
- * text. A call that knows what it is confirming says so per call (`confirmLabel:
- * "Delete budget"`), which is what the dialog is for — these are for the rest.
- */
-interface ConfirmDialogLabels {
-    confirm: string;
-    cancel: string;
-    /**
-     * 0.18: label of the field a `requireTyped` confirm shows. A FUNCTION of the text to
-     * type by default — where the address sits in the sentence moves with the language —
-     * or a finished STRING. A call's own `typedLabel` wins over it.
-     *
-     * Required, like every key of a namespace: the shipped catalogues
-     * (`@eifi1/ui-kit/i18n/<code>`) translate it, and an app's own full catalogue should
-     * hear about the new string from the compiler rather than show it in English.
-     */
-    typed: string | ((text: string) => string);
-}
-/** `satisfies` rather than a type annotation, so `.typed` stays known-callable for a
- *  caller composing its own label from it. */
-declare const DEFAULT_CONFIRM_DIALOG_LABELS: {
-    confirm: string;
-    cancel: string;
-    typed: (text: string) => string;
-};
-type ConfirmTone = "danger" | "warning" | "neutral";
-interface ConfirmOptions {
-    /** The question, and the dialog's accessible name. */
-    title: ReactNode;
-    /** The smaller line under it — the consequence. Wired to `aria-describedby`. */
-    body?: ReactNode;
-    /** Default: `confirmDialog.confirm` from the provider, else "Confirm". */
-    confirmLabel?: ReactNode;
-    /** Default: `confirmDialog.cancel` from the provider, else "Cancel". */
-    cancelLabel?: ReactNode;
-    /**
-     * `"danger"` for what cannot be undone (a delete): the confirm is the destructive
-     * button and focus starts on CANCEL. `"warning"` and `"neutral"` (default) start on
-     * the confirm. See {@link ConfirmProvider} for why the two differ.
-     */
-    tone?: ConfirmTone;
-    /**
-     * 0.18: make the user TYPE this before confirm is enabled — the target account's
-     * e-mail address, a budget's name. For the action whose risk is not "did you mean
-     * it" but "is this the right row": an admin who deactivates somebody has already
-     * proven who THEY are (they passed the admin gate); typing the address is what
-     * proves they read which account they are on. Both keksdose (`TYPE_EMAIL`) and
-     * Kurvenschmiede (`TypedConfirm`) built this beside `useConfirm` because it had no
-     * field.
-     *
-     * The dialog then shows one text field under the body and focuses it (whatever the
-     * tone: a reflexive Enter cannot confirm a field that does not match yet). Confirm
-     * stays disabled until the text matches; Enter in the field confirms once it does.
-     * The answer is still `true` / `false` — the text matched what you passed, so send
-     * that to the server if it asks for the address too, not the user's spelling.
-     */
-    requireTyped?: string;
-    /** Label of that field. Default: `confirmDialog.typed` — `Type “a@b.c” to confirm`. */
-    typedLabel?: string;
-    /**
-     * How the typed text is compared. Default `"caseless"`: surrounding spaces and case
-     * ignored, the rule both apps applied to an address. `"trim"` keeps case, `"exact"`
-     * keeps spaces too — for a phrase like "DELETE" whose contract is "exactly this".
-     */
-    typedMatch?: TypedMatch;
-}
-type ConfirmFn = (options: ConfirmOptions) => Promise<boolean>;
-/**
- * `const confirm = useConfirm()` → `if (!(await confirm({ title }))) return`.
- *
- * The returned function is STABLE for the life of the provider, so it can sit in an
- * effect's or a `useCallback`'s dependency list without re-running it.
- *
- * Throws outside a {@link ConfirmProvider}, rather than falling back to
- * `window.confirm`: a silent fallback is exactly the native dialog the three apps are
- * migrating away from, and it would look like the migration had worked.
- */
-declare function useConfirm(): ConfirmFn;
-interface ConfirmProviderProps {
-    children: ReactNode;
-}
-/**
- * The host for {@link useConfirm}: ONE confirm dialog for the whole app, rendered on
- * {@link DialogFrame}, answering a promise.
- *
- * Asked for by all three apps at once — keksdose has 20+ `window.confirm` calls,
- * kastlan 7, lenkbank 1. The native dialog cannot be translated past its OK/Cancel
- * (those are the BROWSER's language, not the app's), cannot say which button is the
- * destructive one, and on an installed PWA it prints the origin over the question.
- * A promise is what lets each of those call sites change by one `await`:
- *
- *     if (!window.confirm(t("budget.delete_confirm"))) return;
- *     // becomes
- *     if (!(await confirm({ title: t("budget.delete_confirm"), tone: "danger" }))) return;
- *
- * ## Its own provider, not part of `UiKitProvider`
- *
- * `UiKitProvider` renders nothing: it is strings and a locale, it is optional, and it
- * NESTS (an inner one re-labels one table). A dialog host inside it would mount a host
- * per nested provider, and a component under the inner one would open a second dialog
- * layer of its own. So the host is its own component, mounted once — inside the
- * `UiKitProvider` whose strings it should speak, which is also the order the labels
- * need.
- *
- * ## Focus
- *
- * On CANCEL for `tone: "danger"`, on CONFIRM otherwise. A confirm is often answered by
- * a reflexive Enter — the key that pressed the Delete button in the first place may
- * still be down — and for an action that cannot be undone that reflex must land on the
- * harmless answer; `DangerConfirm` makes the same call ("never to the destructive
- * button itself"). For everything else the confirm is the expected answer and Enter
- * accepting it is what `window.confirm` taught users, which the migrating call sites'
- * users already rely on. Focus returns to whatever opened it, through `Modal`'s trap.
- *
- * ## Escape, the backdrop, Back and Cancel all answer `false`
- *
- * Only the confirm button answers `true`. Anything that merely dismisses is a no.
- *
- * ## A second `confirm` while one is open QUEUES
- *
- * It is shown when the first is answered, and each call gets its own answer. The
- * alternative — answering the open one `false` to make room — would answer a question
- * the user never answered: a background prompt ("your session is about to expire")
- * would cancel the delete they were reading. `false` has to mean "the user said no".
- * A double-click cannot queue two of the same: the first click opens the modal
- * synchronously (a discrete event's update is flushed before the next one), so the
- * second lands on the open dialog rather than on the button — at worst on its
- * backdrop, which answers `false`, the safe way to be wrong.
- *
- * Unmounting the provider answers everything still pending `false`, so no caller's
- * `await` hangs forever.
- *
- * ## keksdose's synchronous call (transaction-swipe-plan.ts)
- *
- * `buildTxSwipeActions` is synchronous, but its `window.confirm` sits inside the
- * action THUNK (`confirmed(key, run)` returns `() => { if (confirm(…)) run() }`), and a
- * thunk may be async without its caller knowing. So the plan builder stays
- * synchronous; it takes the confirm as an argument and the thunk awaits it:
- *
- *     // mobile-transaction-list.tsx
- *     const confirm = useConfirm();
- *     buildTxSwipeActions({ tx, …, confirm });
- *
- *     // transaction-swipe-plan.ts
- *     const confirmed = (messageKey: string, run: () => void) => () => {
- *       void confirm({ title: t(messageKey), tone: "danger" }).then((ok) => ok && run());
- *     };
- *
- * Its test then passes `confirm: vi.fn(async () => false)` instead of stubbing the
- * global, and asserts after an `await` (the mutation now runs a microtask later). The
- * row snaps back when the swipe commits, before the answer — which is right: the
- * dialog, not the half-swiped row, is where the question now is.
- */
-declare function ConfirmProvider({ children }: ConfirmProviderProps): react.JSX.Element;
-
-export { type ConfirmDialogLabels, type ConfirmFn, type ConfirmOptions, ConfirmProvider, type ConfirmProviderProps, type ConfirmTone, DEFAULT_CONFIRM_DIALOG_LABELS, useConfirm };
+import 'react';
+export { I as ConfirmDialogLabels, J as ConfirmFn, K as ConfirmOptions, L as ConfirmProvider, M as ConfirmProviderProps, N as ConfirmTone, _ as DEFAULT_CONFIRM_DIALOG_LABELS, c7 as useConfirm } from '../feedback-BxeQVzwq.js';
+import '../feedback-attachment-fGAzZPf0.js';
+import '../feedback/feedback-inbox.js';
+import 'lucide-react';
+import './tooltip.js';
+import '../hooks/use-anchored-rect.js';
+import '../lib/clipping.js';
+import '../data-table-labels-B7OdnM0S.js';
+import './data-table-sort.js';
+import './swipeable-row.js';
+import './mini-calendar.js';
+import './calendar-heatmap.js';
+import './popover.js';
+import './chip.js';
+import './field-sync.js';
+import '../wizard/types.js';
+import '../tour/tour.js';
+import '../search/command-palette.js';
+import '../search/global-search.js';
+import '../search/search-index.js';
+import './month-picker.js';
+import './page-contents.js';
+import './series-chart-labels.js';
+import './pie-chart-labels.js';
+import './sparkline.js';
+import './stat-tile.js';
+import './signature-pad.js';
+import './password-strength.js';
+import './swatch-picker.js';
+import './tile-radio.js';
+import './icon-picker.js';
+import './dialog-frame.js';
+import './modal.js';
+import '../hooks/use-search-param-state.js';
+import './measured-grid.js';
+import './account-settings-labels.js';
+import './floating-panel.js';
+import './bulk-action-bar.js';
+import './list.js';
+import './signed-amount.js';
+import './breadcrumbs.js';
+import './toast.js';
+import './description-list.js';
+import './line-items.js';
+import './progress-bar.js';
+import './error-boundary.js';
+import './authed-image.js';
+import '../hooks/use-authed-src.js';
+import './image-grid.js';
+import './lightbox.js';
+import './write-lock.js';
+import './legal.js';
+import './account-chips.js';
+import '../lib/format.js';
+import './reauth-dialog.js';
+import './server-wake.js';
+import '../lib/server-wake.js';
+import './translation-review-labels.js';
+import '../lib/translation-review.js';
+import './country-select.js';
+import './inline-edit-field.js';
+import '../lib/iban.js';
+import '../lib/phone.js';
+import './sign-chip.js';
+import './column-mapper.js';
+import '../lib/column-mapping.js';
+import '../lib/table-text.js';
+import './field-parts.js';

package/dist/components/confirm-dialog.js

@@ -2,9 +2,9 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
 import { useKitLabels } from "../i18n/kit-labels.js";
-import { typedMatches } from "./danger-confirm.js";
+import { TypedConfirmField, typedMatches } from "./danger-confirm.js";
 import { DialogFrame } from "./dialog-frame.js";
-import { Button, Input } from "./ui.js";
+import { Button } from "./ui.js";
 const DEFAULT_CONFIRM_DIALOG_LABELS = {
   confirm: "Confirm",
   cancel: "Cancel",
@@ -102,16 +102,15 @@ function ConfirmDialogView({
             confirmRef.current?.click();
           },
           children: /* @__PURE__ */ jsx(
-            Input,
+            TypedConfirmField,
             {
               ref: typedRef,
+              target,
+              match: request.typedMatch ?? "caseless",
               label: typedLabel,
+              placeholder: "",
               value: typed,
-              autoComplete: "off",
-              autoCapitalize: "off",
-              autoCorrect: "off",
-              spellCheck: false,
-              onChange: (e) => setTyped(e.target.value)
+              onValueChange: setTyped
             }
           )
         }

package/dist/components/confirm-dialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/confirm-dialog.tsx"],"sourcesContent":["import { createContext, useCallback, useContext, useEffect, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\n\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { typedMatches } from \"./danger-confirm\";\nimport type { TypedMatch } from \"./danger-confirm\";\nimport { DialogFrame } from \"./dialog-frame\";\nimport { Button, Input } from \"./ui\";\n\n/**\n * The `confirmDialog` namespace of `<UiKitProvider labels>`: the two buttons' fallback\n * text. A call that knows what it is confirming says so per call (`confirmLabel:\n * \"Delete budget\"`), which is what the dialog is for — these are for the rest.\n */\nexport interface ConfirmDialogLabels {\n  confirm: string;\n  cancel: string;\n  /**\n   * 0.18: label of the field a `requireTyped` confirm shows. A FUNCTION of the text to\n   * type by default — where the address sits in the sentence moves with the language —\n   * or a finished STRING. A call's own `typedLabel` wins over it.\n   *\n   * Required, like every key of a namespace: the shipped catalogues\n   * (`@eifi1/ui-kit/i18n/<code>`) translate it, and an app's own full catalogue should\n   * hear about the new string from the compiler rather than show it in English.\n   */\n  typed: string | ((text: string) => string);\n}\n\n/** `satisfies` rather than a type annotation, so `.typed` stays known-callable for a\n *  caller composing its own label from it. */\nexport const DEFAULT_CONFIRM_DIALOG_LABELS = {\n  confirm: \"Confirm\",\n  cancel: \"Cancel\",\n  typed: (text: string) => `Type “${text}” to confirm`,\n} satisfies ConfirmDialogLabels;\n\nexport type ConfirmTone = \"danger\" | \"warning\" | \"neutral\";\n\nexport interface ConfirmOptions {\n  /** The question, and the dialog's accessible name. */\n  title: ReactNode;\n  /** The smaller line under it — the consequence. Wired to `aria-describedby`. */\n  body?: ReactNode;\n  /** Default: `confirmDialog.confirm` from the provider, else \"Confirm\". */\n  confirmLabel?: ReactNode;\n  /** Default: `confirmDialog.cancel` from the provider, else \"Cancel\". */\n  cancelLabel?: ReactNode;\n  /**\n   * `\"danger\"` for what cannot be undone (a delete): the confirm is the destructive\n   * button and focus starts on CANCEL. `\"warning\"` and `\"neutral\"` (default) start on\n   * the confirm. See {@link ConfirmProvider} for why the two differ.\n   */\n  tone?: ConfirmTone;\n  /**\n   * 0.18: make the user TYPE this before confirm is enabled — the target account's\n   * e-mail address, a budget's name. For the action whose risk is not \"did you mean\n   * it\" but \"is this the right row\": an admin who deactivates somebody has already\n   * proven who THEY are (they passed the admin gate); typing the address is what\n   * proves they read which account they are on. Both keksdose (`TYPE_EMAIL`) and\n   * Kurvenschmiede (`TypedConfirm`) built this beside `useConfirm` because it had no\n   * field.\n   *\n   * The dialog then shows one text field under the body and focuses it (whatever the\n   * tone: a reflexive Enter cannot confirm a field that does not match yet). Confirm\n   * stays disabled until the text matches; Enter in the field confirms once it does.\n   * The answer is still `true` / `false` — the text matched what you passed, so send\n   * that to the server if it asks for the address too, not the user's spelling.\n   */\n  requireTyped?: string;\n  /** Label of that field. Default: `confirmDialog.typed` — `Type “a@b.c” to confirm`. */\n  typedLabel?: string;\n  /**\n   * How the typed text is compared. Default `\"caseless\"`: surrounding spaces and case\n   * ignored, the rule both apps applied to an address. `\"trim\"` keeps case, `\"exact\"`\n   * keeps spaces too — for a phrase like \"DELETE\" whose contract is \"exactly this\".\n   */\n  typedMatch?: TypedMatch;\n}\n\nexport type ConfirmFn = (options: ConfirmOptions) => Promise<boolean>;\n\nconst ConfirmContext = createContext<ConfirmFn | null>(null);\n\n/**\n * `const confirm = useConfirm()` → `if (!(await confirm({ title }))) return`.\n *\n * The returned function is STABLE for the life of the provider, so it can sit in an\n * effect's or a `useCallback`'s dependency list without re-running it.\n *\n * Throws outside a {@link ConfirmProvider}, rather than falling back to\n * `window.confirm`: a silent fallback is exactly the native dialog the three apps are\n * migrating away from, and it would look like the migration had worked.\n */\nexport function useConfirm(): ConfirmFn {\n  const confirm = useContext(ConfirmContext);\n  if (!confirm) {\n    throw new Error(\"useConfirm() must be called below a <ConfirmProvider>.\");\n  }\n  return confirm;\n}\n\ninterface Request extends ConfirmOptions {\n  id: number;\n  resolve: (answer: boolean) => void;\n}\n\nexport interface ConfirmProviderProps {\n  children: ReactNode;\n}\n\n/**\n * The host for {@link useConfirm}: ONE confirm dialog for the whole app, rendered on\n * {@link DialogFrame}, answering a promise.\n *\n * Asked for by all three apps at once — keksdose has 20+ `window.confirm` calls,\n * kastlan 7, lenkbank 1. The native dialog cannot be translated past its OK/Cancel\n * (those are the BROWSER's language, not the app's), cannot say which button is the\n * destructive one, and on an installed PWA it prints the origin over the question.\n * A promise is what lets each of those call sites change by one `await`:\n *\n *     if (!window.confirm(t(\"budget.delete_confirm\"))) return;\n *     // becomes\n *     if (!(await confirm({ title: t(\"budget.delete_confirm\"), tone: \"danger\" }))) return;\n *\n * ## Its own provider, not part of `UiKitProvider`\n *\n * `UiKitProvider` renders nothing: it is strings and a locale, it is optional, and it\n * NESTS (an inner one re-labels one table). A dialog host inside it would mount a host\n * per nested provider, and a component under the inner one would open a second dialog\n * layer of its own. So the host is its own component, mounted once — inside the\n * `UiKitProvider` whose strings it should speak, which is also the order the labels\n * need.\n *\n * ## Focus\n *\n * On CANCEL for `tone: \"danger\"`, on CONFIRM otherwise. A confirm is often answered by\n * a reflexive Enter — the key that pressed the Delete button in the first place may\n * still be down — and for an action that cannot be undone that reflex must land on the\n * harmless answer; `DangerConfirm` makes the same call (\"never to the destructive\n * button itself\"). For everything else the confirm is the expected answer and Enter\n * accepting it is what `window.confirm` taught users, which the migrating call sites'\n * users already rely on. Focus returns to whatever opened it, through `Modal`'s trap.\n *\n * ## Escape, the backdrop, Back and Cancel all answer `false`\n *\n * Only the confirm button answers `true`. Anything that merely dismisses is a no.\n *\n * ## A second `confirm` while one is open QUEUES\n *\n * It is shown when the first is answered, and each call gets its own answer. The\n * alternative — answering the open one `false` to make room — would answer a question\n * the user never answered: a background prompt (\"your session is about to expire\")\n * would cancel the delete they were reading. `false` has to mean \"the user said no\".\n * A double-click cannot queue two of the same: the first click opens the modal\n * synchronously (a discrete event's update is flushed before the next one), so the\n * second lands on the open dialog rather than on the button — at worst on its\n * backdrop, which answers `false`, the safe way to be wrong.\n *\n * Unmounting the provider answers everything still pending `false`, so no caller's\n * `await` hangs forever.\n *\n * ## keksdose's synchronous call (transaction-swipe-plan.ts)\n *\n * `buildTxSwipeActions` is synchronous, but its `window.confirm` sits inside the\n * action THUNK (`confirmed(key, run)` returns `() => { if (confirm(…)) run() }`), and a\n * thunk may be async without its caller knowing. So the plan builder stays\n * synchronous; it takes the confirm as an argument and the thunk awaits it:\n *\n *     // mobile-transaction-list.tsx\n *     const confirm = useConfirm();\n *     buildTxSwipeActions({ tx, …, confirm });\n *\n *     // transaction-swipe-plan.ts\n *     const confirmed = (messageKey: string, run: () => void) => () => {\n *       void confirm({ title: t(messageKey), tone: \"danger\" }).then((ok) => ok && run());\n *     };\n *\n * Its test then passes `confirm: vi.fn(async () => false)` instead of stubbing the\n * global, and asserts after an `await` (the mutation now runs a microtask later). The\n * row snaps back when the swipe commits, before the answer — which is right: the\n * dialog, not the half-swiped row, is where the question now is.\n */\nexport function ConfirmProvider({ children }: ConfirmProviderProps) {\n  const [queue, setQueue] = useState<Request[]>([]);\n  const nextId = useRef(0);\n  // Every unanswered request, including the ones not yet in state — the unmount\n  // cleanup below must reach a request made in the same tick it unmounts.\n  const pending = useRef(new Set<Request>());\n\n  const confirm = useCallback<ConfirmFn>(\n    (options) =>\n      new Promise<boolean>((resolve) => {\n        const request: Request = { ...options, id: ++nextId.current, resolve };\n        pending.current.add(request);\n        setQueue((q) => [...q, request]);\n      }),\n    [],\n  );\n\n  useEffect(() => {\n    const open = pending.current;\n    return () => {\n      for (const r of open) r.resolve(false);\n      open.clear();\n    };\n  }, []);\n\n  const answer = useCallback((request: Request, value: boolean) => {\n    if (!pending.current.delete(request)) return;\n    request.resolve(value);\n    setQueue((q) => q.filter((r) => r !== request));\n  }, []);\n\n  const current = queue[0];\n  return (\n    <ConfirmContext.Provider value={confirm}>\n      {children}\n      {current && (\n        // Keyed per request, so a queued one gets a fresh Modal: the first one's trap\n        // hands focus back to the page, and the next one's captures that as its own\n        // restore target instead of a button that has just been unmounted.\n        <ConfirmDialogView key={current.id} request={current} onAnswer={answer} />\n      )}\n    </ConfirmContext.Provider>\n  );\n}\n\nfunction ConfirmDialogView({\n  request,\n  onAnswer,\n}: {\n  request: Request;\n  onAnswer: (request: Request, value: boolean) => void;\n}) {\n  const labels = useKitLabels(\"confirmDialog\", DEFAULT_CONFIRM_DIALOG_LABELS);\n  const tone = request.tone ?? \"neutral\";\n  const confirmRef = useRef<HTMLButtonElement>(null);\n  const cancelRef = useRef<HTMLButtonElement>(null);\n  // Set by the confirm button, read once the panel has finished lowering. Everything\n  // else that ends in `onClose` — Escape, the backdrop, Back, Cancel — leaves it false.\n  const accepted = useRef(false);\n  const typedRef = useRef<HTMLInputElement>(null);\n  const [typed, setTyped] = useState(\"\");\n  const target = request.requireTyped;\n  const matches = target === undefined || typedMatches(typed, target, request.typedMatch ?? \"caseless\");\n\n  // In THIS component's effect, which runs after `Modal`'s own (a parent's effects run\n  // after its children's). `Modal` engages its focus trap on the panel first — and\n  // records the page's focused element as the restore target — and only then does\n  // focus move to the button. Focusing it from inside the panel would run first and\n  // make the button the restore target. A typed confirm starts in its field: typing is\n  // the one thing the dialog is waiting for.\n  useEffect(() => {\n    (target !== undefined ? typedRef : tone === \"danger\" ? cancelRef : confirmRef).current?.focus();\n  }, [tone, target]);\n\n  const typedLabel =\n    target === undefined\n      ? \"\"\n      : (request.typedLabel ??\n        (typeof labels.typed === \"string\" ? labels.typed : labels.typed(target)));\n\n  return (\n    <DialogFrame\n      title={request.title}\n      description={request.body}\n      onClose={() => onAnswer(request, accepted.current)}\n      // A confirmation interrupts to ask a question that must be answered.\n      role=\"alertdialog\"\n      data-confirm-tone={tone}\n      actions={(close) => (\n        <>\n          <Button ref={cancelRef} type=\"button\" variant=\"ghost\" onClick={close}>\n            {request.cancelLabel ?? labels.cancel}\n          </Button>\n          <Button\n            ref={confirmRef}\n            type=\"button\"\n            variant={tone === \"danger\" ? \"danger\" : \"primary\"}\n            disabled={!matches}\n            onClick={() => {\n              accepted.current = true;\n              close();\n            }}\n          >\n            {request.confirmLabel ?? labels.confirm}\n          </Button>\n        </>\n      )}\n    >\n      {/* The field, when there is one, is the body; a plain confirm keeps having none. */}\n      {target !== undefined && (\n        <form\n          noValidate\n          onSubmit={(e) => {\n            e.preventDefault();\n            // Through the button, so Enter and a click are one path — and a disabled\n            // (not yet matching) confirm ignores the click.\n            confirmRef.current?.click();\n          }}\n        >\n          <Input\n            ref={typedRef}\n            label={typedLabel}\n            value={typed}\n            autoComplete=\"off\"\n            autoCapitalize=\"off\"\n            autoCorrect=\"off\"\n            spellCheck={false}\n            onChange={(e) => setTyped(e.target.value)}\n          />\n        </form>\n      )}\n    </DialogFrame>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/confirm-dialog.tsx"],"sourcesContent":["import { createContext, useCallback, useContext, useEffect, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\n\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { TypedConfirmField, typedMatches } from \"./danger-confirm\";\nimport type { TypedMatch } from \"./danger-confirm\";\nimport { DialogFrame } from \"./dialog-frame\";\nimport { Button } from \"./ui\";\n\n/**\n * The `confirmDialog` namespace of `<UiKitProvider labels>`: the two buttons' fallback\n * text. A call that knows what it is confirming says so per call (`confirmLabel:\n * \"Delete budget\"`), which is what the dialog is for — these are for the rest.\n */\nexport interface ConfirmDialogLabels {\n  confirm: string;\n  cancel: string;\n  /**\n   * 0.18: label of the field a `requireTyped` confirm shows. A FUNCTION of the text to\n   * type by default — where the address sits in the sentence moves with the language —\n   * or a finished STRING. A call's own `typedLabel` wins over it.\n   *\n   * Required, like every key of a namespace: the shipped catalogues\n   * (`@eifi1/ui-kit/i18n/<code>`) translate it, and an app's own full catalogue should\n   * hear about the new string from the compiler rather than show it in English.\n   */\n  typed: string | ((text: string) => string);\n}\n\n/** `satisfies` rather than a type annotation, so `.typed` stays known-callable for a\n *  caller composing its own label from it. */\nexport const DEFAULT_CONFIRM_DIALOG_LABELS = {\n  confirm: \"Confirm\",\n  cancel: \"Cancel\",\n  typed: (text: string) => `Type “${text}” to confirm`,\n} satisfies ConfirmDialogLabels;\n\nexport type ConfirmTone = \"danger\" | \"warning\" | \"neutral\";\n\nexport interface ConfirmOptions {\n  /** The question, and the dialog's accessible name. */\n  title: ReactNode;\n  /** The smaller line under it — the consequence. Wired to `aria-describedby`. */\n  body?: ReactNode;\n  /** Default: `confirmDialog.confirm` from the provider, else \"Confirm\". */\n  confirmLabel?: ReactNode;\n  /** Default: `confirmDialog.cancel` from the provider, else \"Cancel\". */\n  cancelLabel?: ReactNode;\n  /**\n   * `\"danger\"` for what cannot be undone (a delete): the confirm is the destructive\n   * button and focus starts on CANCEL. `\"warning\"` and `\"neutral\"` (default) start on\n   * the confirm. See {@link ConfirmProvider} for why the two differ.\n   */\n  tone?: ConfirmTone;\n  /**\n   * 0.18: make the user TYPE this before confirm is enabled — the target account's\n   * e-mail address, a budget's name. For the action whose risk is not \"did you mean\n   * it\" but \"is this the right row\": an admin who deactivates somebody has already\n   * proven who THEY are (they passed the admin gate); typing the address is what\n   * proves they read which account they are on. Both keksdose (`TYPE_EMAIL`) and\n   * Kurvenschmiede (`TypedConfirm`) built this beside `useConfirm` because it had no\n   * field.\n   *\n   * The dialog then shows one text field under the body and focuses it (whatever the\n   * tone: a reflexive Enter cannot confirm a field that does not match yet). Confirm\n   * stays disabled until the text matches; Enter in the field confirms once it does.\n   * The answer is still `true` / `false` — the text matched what you passed, so send\n   * that to the server if it asks for the address too, not the user's spelling.\n   */\n  requireTyped?: string;\n  /** Label of that field. Default: `confirmDialog.typed` — `Type “a@b.c” to confirm`. */\n  typedLabel?: string;\n  /**\n   * How the typed text is compared. Default `\"caseless\"`: surrounding spaces and case\n   * ignored, the rule both apps applied to an address. `\"trim\"` keeps case, `\"exact\"`\n   * keeps spaces too — for a phrase like \"DELETE\" whose contract is \"exactly this\".\n   */\n  typedMatch?: TypedMatch;\n}\n\nexport type ConfirmFn = (options: ConfirmOptions) => Promise<boolean>;\n\nconst ConfirmContext = createContext<ConfirmFn | null>(null);\n\n/**\n * `const confirm = useConfirm()` → `if (!(await confirm({ title }))) return`.\n *\n * The returned function is STABLE for the life of the provider, so it can sit in an\n * effect's or a `useCallback`'s dependency list without re-running it.\n *\n * Throws outside a {@link ConfirmProvider}, rather than falling back to\n * `window.confirm`: a silent fallback is exactly the native dialog the three apps are\n * migrating away from, and it would look like the migration had worked.\n */\nexport function useConfirm(): ConfirmFn {\n  const confirm = useContext(ConfirmContext);\n  if (!confirm) {\n    throw new Error(\"useConfirm() must be called below a <ConfirmProvider>.\");\n  }\n  return confirm;\n}\n\ninterface Request extends ConfirmOptions {\n  id: number;\n  resolve: (answer: boolean) => void;\n}\n\nexport interface ConfirmProviderProps {\n  children: ReactNode;\n}\n\n/**\n * The host for {@link useConfirm}: ONE confirm dialog for the whole app, rendered on\n * {@link DialogFrame}, answering a promise.\n *\n * Asked for by all three apps at once — keksdose has 20+ `window.confirm` calls,\n * kastlan 7, lenkbank 1. The native dialog cannot be translated past its OK/Cancel\n * (those are the BROWSER's language, not the app's), cannot say which button is the\n * destructive one, and on an installed PWA it prints the origin over the question.\n * A promise is what lets each of those call sites change by one `await`:\n *\n *     if (!window.confirm(t(\"budget.delete_confirm\"))) return;\n *     // becomes\n *     if (!(await confirm({ title: t(\"budget.delete_confirm\"), tone: \"danger\" }))) return;\n *\n * ## Its own provider, not part of `UiKitProvider`\n *\n * `UiKitProvider` renders nothing: it is strings and a locale, it is optional, and it\n * NESTS (an inner one re-labels one table). A dialog host inside it would mount a host\n * per nested provider, and a component under the inner one would open a second dialog\n * layer of its own. So the host is its own component, mounted once — inside the\n * `UiKitProvider` whose strings it should speak, which is also the order the labels\n * need.\n *\n * ## Focus\n *\n * On CANCEL for `tone: \"danger\"`, on CONFIRM otherwise. A confirm is often answered by\n * a reflexive Enter — the key that pressed the Delete button in the first place may\n * still be down — and for an action that cannot be undone that reflex must land on the\n * harmless answer; `DangerConfirm` makes the same call (\"never to the destructive\n * button itself\"). For everything else the confirm is the expected answer and Enter\n * accepting it is what `window.confirm` taught users, which the migrating call sites'\n * users already rely on. Focus returns to whatever opened it, through `Modal`'s trap.\n *\n * ## Escape, the backdrop, Back and Cancel all answer `false`\n *\n * Only the confirm button answers `true`. Anything that merely dismisses is a no.\n *\n * ## A second `confirm` while one is open QUEUES\n *\n * It is shown when the first is answered, and each call gets its own answer. The\n * alternative — answering the open one `false` to make room — would answer a question\n * the user never answered: a background prompt (\"your session is about to expire\")\n * would cancel the delete they were reading. `false` has to mean \"the user said no\".\n * A double-click cannot queue two of the same: the first click opens the modal\n * synchronously (a discrete event's update is flushed before the next one), so the\n * second lands on the open dialog rather than on the button — at worst on its\n * backdrop, which answers `false`, the safe way to be wrong.\n *\n * Unmounting the provider answers everything still pending `false`, so no caller's\n * `await` hangs forever.\n *\n * ## keksdose's synchronous call (transaction-swipe-plan.ts)\n *\n * `buildTxSwipeActions` is synchronous, but its `window.confirm` sits inside the\n * action THUNK (`confirmed(key, run)` returns `() => { if (confirm(…)) run() }`), and a\n * thunk may be async without its caller knowing. So the plan builder stays\n * synchronous; it takes the confirm as an argument and the thunk awaits it:\n *\n *     // mobile-transaction-list.tsx\n *     const confirm = useConfirm();\n *     buildTxSwipeActions({ tx, …, confirm });\n *\n *     // transaction-swipe-plan.ts\n *     const confirmed = (messageKey: string, run: () => void) => () => {\n *       void confirm({ title: t(messageKey), tone: \"danger\" }).then((ok) => ok && run());\n *     };\n *\n * Its test then passes `confirm: vi.fn(async () => false)` instead of stubbing the\n * global, and asserts after an `await` (the mutation now runs a microtask later). The\n * row snaps back when the swipe commits, before the answer — which is right: the\n * dialog, not the half-swiped row, is where the question now is.\n */\nexport function ConfirmProvider({ children }: ConfirmProviderProps) {\n  const [queue, setQueue] = useState<Request[]>([]);\n  const nextId = useRef(0);\n  // Every unanswered request, including the ones not yet in state — the unmount\n  // cleanup below must reach a request made in the same tick it unmounts.\n  const pending = useRef(new Set<Request>());\n\n  const confirm = useCallback<ConfirmFn>(\n    (options) =>\n      new Promise<boolean>((resolve) => {\n        const request: Request = { ...options, id: ++nextId.current, resolve };\n        pending.current.add(request);\n        setQueue((q) => [...q, request]);\n      }),\n    [],\n  );\n\n  useEffect(() => {\n    const open = pending.current;\n    return () => {\n      for (const r of open) r.resolve(false);\n      open.clear();\n    };\n  }, []);\n\n  const answer = useCallback((request: Request, value: boolean) => {\n    if (!pending.current.delete(request)) return;\n    request.resolve(value);\n    setQueue((q) => q.filter((r) => r !== request));\n  }, []);\n\n  const current = queue[0];\n  return (\n    <ConfirmContext.Provider value={confirm}>\n      {children}\n      {current && (\n        // Keyed per request, so a queued one gets a fresh Modal: the first one's trap\n        // hands focus back to the page, and the next one's captures that as its own\n        // restore target instead of a button that has just been unmounted.\n        <ConfirmDialogView key={current.id} request={current} onAnswer={answer} />\n      )}\n    </ConfirmContext.Provider>\n  );\n}\n\nfunction ConfirmDialogView({\n  request,\n  onAnswer,\n}: {\n  request: Request;\n  onAnswer: (request: Request, value: boolean) => void;\n}) {\n  const labels = useKitLabels(\"confirmDialog\", DEFAULT_CONFIRM_DIALOG_LABELS);\n  const tone = request.tone ?? \"neutral\";\n  const confirmRef = useRef<HTMLButtonElement>(null);\n  const cancelRef = useRef<HTMLButtonElement>(null);\n  // Set by the confirm button, read once the panel has finished lowering. Everything\n  // else that ends in `onClose` — Escape, the backdrop, Back, Cancel — leaves it false.\n  const accepted = useRef(false);\n  const typedRef = useRef<HTMLInputElement>(null);\n  const [typed, setTyped] = useState(\"\");\n  const target = request.requireTyped;\n  const matches = target === undefined || typedMatches(typed, target, request.typedMatch ?? \"caseless\");\n\n  // In THIS component's effect, which runs after `Modal`'s own (a parent's effects run\n  // after its children's). `Modal` engages its focus trap on the panel first — and\n  // records the page's focused element as the restore target — and only then does\n  // focus move to the button. Focusing it from inside the panel would run first and\n  // make the button the restore target. A typed confirm starts in its field: typing is\n  // the one thing the dialog is waiting for.\n  useEffect(() => {\n    (target !== undefined ? typedRef : tone === \"danger\" ? cancelRef : confirmRef).current?.focus();\n  }, [tone, target]);\n\n  const typedLabel =\n    target === undefined\n      ? \"\"\n      : (request.typedLabel ??\n        (typeof labels.typed === \"string\" ? labels.typed : labels.typed(target)));\n\n  return (\n    <DialogFrame\n      title={request.title}\n      description={request.body}\n      onClose={() => onAnswer(request, accepted.current)}\n      // A confirmation interrupts to ask a question that must be answered.\n      role=\"alertdialog\"\n      data-confirm-tone={tone}\n      actions={(close) => (\n        <>\n          <Button ref={cancelRef} type=\"button\" variant=\"ghost\" onClick={close}>\n            {request.cancelLabel ?? labels.cancel}\n          </Button>\n          <Button\n            ref={confirmRef}\n            type=\"button\"\n            variant={tone === \"danger\" ? \"danger\" : \"primary\"}\n            disabled={!matches}\n            onClick={() => {\n              accepted.current = true;\n              close();\n            }}\n          >\n            {request.confirmLabel ?? labels.confirm}\n          </Button>\n        </>\n      )}\n    >\n      {/* The field, when there is one, is the body; a plain confirm keeps having none. */}\n      {target !== undefined && (\n        <form\n          noValidate\n          onSubmit={(e) => {\n            e.preventDefault();\n            // Through the button, so Enter and a click are one path — and a disabled\n            // (not yet matching) confirm ignores the click.\n            confirmRef.current?.click();\n          }}\n        >\n          {/* The kit's one typed-confirmation field (0.23), DangerConfirm's too: the\n              keyboard told to leave the text alone, `data-matched` on the input. The\n              label is this namespace's (`confirmDialog.typed`), and `placeholder=\"\"`\n              keeps out the `dangerConfirm.phrasePlaceholder` a provider may set for\n              the tile — this field never had one. */}\n          <TypedConfirmField\n            ref={typedRef}\n            target={target}\n            match={request.typedMatch ?? \"caseless\"}\n            label={typedLabel}\n            placeholder=\"\"\n            value={typed}\n            onValueChange={setTyped}\n          />\n        </form>\n      )}\n    </DialogFrame>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/copy-button.d.ts

@@ -1,12 +1,16 @@
 import 'react';
-export { D as CopyButton, E as CopyButtonLabels, F as CopyButtonProps, L as DEFAULT_COPY_BUTTON_LABELS } from '../kit-labels-D1J2_jyD.js';
+export { O as CopyButton, P as CopyButtonLabels, Q as CopyButtonProps, $ as DEFAULT_COPY_BUTTON_LABELS } from '../feedback-BxeQVzwq.js';
 import './tooltip.js';
-import './data-table-labels.js';
+import '../feedback-attachment-fGAzZPf0.js';
+import '../feedback/feedback-inbox.js';
+import 'lucide-react';
+import '../data-table-labels-B7OdnM0S.js';
+import './data-table-sort.js';
+import './swipeable-row.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
 import './popover.js';
 import './chip.js';
-import 'lucide-react';
 import './field-sync.js';
 import '../wizard/types.js';
 import '../tour/tour.js';
@@ -21,7 +25,6 @@ import './sparkline.js';
 import './stat-tile.js';
 import './signature-pad.js';
 import './password-strength.js';
-import './danger-confirm.js';
 import './swatch-picker.js';
 import './tile-radio.js';
 import './icon-picker.js';
@@ -29,11 +32,7 @@ import './dialog-frame.js';
 import './modal.js';
 import '../hooks/use-search-param-state.js';
 import './measured-grid.js';
-import '../feedback-attachment-WFiXJ8We.js';
-import '../feedback/feedback-thread.js';
-import '../feedback/feedback-inbox.js';
 import './account-settings-labels.js';
-import './confirm-dialog.js';
 import './floating-panel.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
@@ -54,11 +53,17 @@ import './write-lock.js';
 import './legal.js';
 import './account-chips.js';
 import '../lib/format.js';
-import '../data-table-3mi2R3so.js';
-import './data-table-sort.js';
-import './swipeable-row.js';
 import './reauth-dialog.js';
 import './server-wake.js';
 import '../lib/server-wake.js';
 import './translation-review-labels.js';
 import '../lib/translation-review.js';
+import './country-select.js';
+import './inline-edit-field.js';
+import '../lib/iban.js';
+import '../lib/phone.js';
+import './sign-chip.js';
+import './column-mapper.js';
+import '../lib/column-mapping.js';
+import '../lib/table-text.js';
+import './field-parts.js';

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

@@ -0,0 +1,167 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, Ref, ReactNode } from 'react';
+
+/** 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 {
+    /** 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. */
+    country: string;
+    /** The search box in the open list. */
+    search: string;
+    /** The heading between the `preferred` countries and all the others. Shown only
+     *  when `preferred` puts something above it. */
+    others: string;
+}
+declare const DEFAULT_COUNTRY_SELECT_LABELS: CountrySelectLabels;
+/**
+ * `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
+ * the control a reader meets; everything else in `rest` dresses the wrapper.
+ *
+ * `Clearable` follows `clearable`, the way {@link EntityCombobox}'s `C` follows its
+ * `clearValue`: it is inferred from the prop, so `onChange` is `(code: string) => void`
+ * for the field as it always was (`onChange={setCountry}` over a `string` state still
+ * 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"> {
+    /** 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. */
+    value: string | null | undefined;
+    /** A country was picked: its alpha-2 code, always upper-case. With `clearable`,
+     *  also `null`: the "×" (or Delete on the trigger) emptied the field. */
+    onChange: (code: Clearable extends true ? string | null : string) => void;
+    /**
+     * Offer a clear "×" in place of the chevron while a country is chosen; it hands
+     * `onChange` `null` (the kit's later list: an optional country — a contact's
+     * nationality, a bank filter's "any country" — could be set but never unset again).
+     *
+     * The combobox family's clear, as {@link EntityCombobox} draws it: a pointer
+     * shortcut inside the trigger, out of the tab order so it is not a second stop
+     * between this field and the next, named by `clearLabel` (default: the
+     * `combobox.clear` label every picker in the family shares). The keyboard way is
+     * Delete or Backspace on the closed trigger. Not offered while `disabled` or locked
+     * (`commit` / `disabledReason`): a clear is a change like any other.
+     */
+    clearable?: Clearable;
+    /** The clear "×"'s accessible name. Wins over `combobox.clear` from the
+     *  {@link UiKitProvider}, as {@link EntityCombobox}'s `clearLabel` does. */
+    clearLabel?: string;
+    /**
+     * The TRIGGER — the focusable `<button>` a reader meets — as a React 19 ref prop,
+     * the way {@link MoneyField} takes its input's (kastlan: react-hook-form's
+     * focus-on-error calls `focus()` on whatever `field.ref` was handed, and without a
+     * ref the first field in error on an address form was never focused). See
+     * `RhfCountrySelect`, which passes it.
+     */
+    ref?: Ref<HTMLButtonElement>;
+    /**
+     * Offer only these codes (any case; duplicates and malformed entries dropped).
+     * Default: every ISO 3166-1 country, {@link COUNTRY_CODES}. Sorted by name either
+     * 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.
+     */
+    countries?: readonly string[];
+    /**
+     * A short group shown FIRST, in the order given, above the alphabetical rest —
+     * kastlan's CH, LI, DE, AT, FR, IT, the six countries most of its customers live
+     * in, out of a list of 249. Each code appears once: a preferred country is not
+     * repeated in the rest. The rest gets a heading (`labels.others`) so the boundary
+     * is visible. Search keeps the split: matching preferred countries stay on top.
+     * Codes not in `countries` are ignored — `countries` decides what can be picked.
+     */
+    preferred?: readonly string[];
+    /**
+     * Draw each country's flag as a flag-icons span (`fi fi-ch`), in the rows and on
+     * the trigger. Default `false`, because the kit ships no flag stylesheet — the same
+     * convention as `LanguageMenu`'s `country` and `CurrencySelect`: the host imports
+     * `flag-icons/css/flag-icons.min.css`, and without it a flag is an empty box.
+     */
+    flags?: boolean;
+    /** The floating label, as on every field. A string also names the trigger
+     *  ("Country: Switzerland"). */
+    label?: ReactNode;
+    /** As {@link Select}'s `hint`: plain TEXT is a caption under the field, attached
+     *  through `aria-describedby`; a {@link FieldHint} rides the label line (or the
+     *  field's end, when there is no label). */
+    hint?: ReactNode;
+    /** As {@link Input}'s `error`: rendered under the field, on the trigger's
+     *  `aria-describedby`, and implies `invalid`. */
+    error?: ReactNode;
+    /** Required and unanswered — {@link FIELD_INVALID}, as on every field. */
+    invalid?: boolean;
+    /** The empty trigger's text. Default: nothing when the field has a `label` or an
+     *  `aria-labelledby` (the label already says what goes here), else `labels.country`. */
+    placeholder?: string;
+    /** As on the other pickers: no focus, no list, the settled look. */
+    disabled?: boolean;
+    /**
+     * 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
+     * on the trigger's `aria-describedby`. Wins over `disabled`.
+     */
+    disabledReason?: ReactNode;
+    /**
+     * 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
+     * reason. A country field inside a form that has its own Save stays editable under
+     * the lock — leave this off there, and put `commit` on the Save.
+     */
+    commit?: boolean;
+    /** The language the names are in. Default: the `<UiKitProvider locale>`, else
+     *  English (see {@link countryName}). */
+    locale?: string;
+    /** Per-instance overrides of {@link CountrySelectLabels}, over the provider's
+     *  `countrySelect` namespace, over English. */
+    labels?: Partial<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
+     * that element AND the chosen country (two references, as {@link DatePicker}'s
+     * trigger is named, so "Country Switzerland" needs no punctuation to translate),
+     * instead of the composed "label: country". An `aria-label` still wins. Before
+     * 0.23 this landed on the wrapper `<div>`, which has no role to be named.
+     */
+    "aria-labelledby"?: string;
+}
+/**
+ * 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
+ * apps carried a hand-written list of names in two languages.
+ *
+ * ## Built on the kit's searchable combobox
+ *
+ * 249 countries is not a menu, it is a lookup, and the list has to work on a phone. So
+ * this is the entity pickers' machinery — `useComboboxCore` and `ComboboxPanel`, which
+ * {@link EntityCombobox} is also made of — not a native `<select>`: the anchored panel
+ * with a search box on a pointer device, the full-screen sheet with its own search box
+ * on a phone (live #200), the same keyboard (APG listbox), the same announcements, the
+ * same group headings. Only the trigger is this component's own, because the trigger
+ * 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"
+ * 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.
+ *
+ * Field anatomy as on every field: floating `label`, `hint`, `error`, `invalid`; the
+ * trigger is named "label: value" as the other trigger pickers are.
+ *
+ * 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 };