@eifi1/ui-kit 0.51.7 → 0.52.0

package/dist/components/copy-button.js

@@ -7,7 +7,6 @@ import { useAnnounce } from "../hooks/use-announce.js";
 import { useCopyToClipboard } from "../hooks/use-copy-to-clipboard.js";
 import { Button } from "./button.js";
 import { IconButton } from "./icon-button.js";
-import { Tooltip } from "./tooltip.js";
 import { DEFAULT_COPY_BUTTON_LABELS } from "./copy-button-labels.js";
 const ICONS = { idle: Copy, copied: Check, failed: X };
 function CopyButton({
@@ -76,13 +75,16 @@ function CopyButton({
     ] });
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Tooltip, { label: stateText, side: tooltipSide, portal: tooltipPortal, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(
       IconButton,
       {
         type: "button",
         ...rest,
         disabled,
+        label: idleText,
         "aria-label": idleText,
+        tooltipSide,
+        tooltipPortal,
         variant: buttonVariant ?? "ghost",
         size: size ?? "sm",
         tone,
@@ -92,7 +94,7 @@ function CopyButton({
         className: cn(iconTone, className),
         children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": true })
       }
-    ) }),
+    ),
     regions
   ] });
 }

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

@@ -1 +1 @@
-{"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 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 = 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":";AA2HI,mBACE,KADF;AA1HJ,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;AAwD3C,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,WAAW,UAAU,WAAW,iBAAiB,UAAU,WAAW,gBAAgB;AAE5F,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":[]}
+{"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 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 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 glyph and colour show the result — its\n   *  words in a bubble, and from Large up beside the glyph, as every labelled IconButton\n   *  shows them. `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, and the same words on\n * screen. A button renaming itself under the focus is announced inconsistently across\n * readers; the live region 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 = 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  // IconButton names itself (0.52, refactor audit 2026-10-30, DSP-21): `label` is the\n  // bubble — and the text beside the glyph at Large, as on every labelled IconButton —\n  // and `aria-label` keeps the name steady. A Tooltip of our own round it cloned\n  // `aria-describedby` onto the button, which then read \"Copy, button, Copy\".\n  //\n  // The idle words, in every state (0.52 code review, deep, charts, finding 8). As the\n  // state, \"Copied\" stood at Large beside the glyph of a button named \"Copy IBAN\": the pill\n  // changed width on every copy, and the words on screen were not in the name a voice\n  // user says to press it (WCAG 2.5.3, label in name). The glyph and its colour show the\n  // result, and the live regions say it.\n  return (\n    <>\n      <IconButton\n        type=\"button\"\n        {...rest}\n        disabled={disabled}\n        label={idleText}\n        aria-label={idleText}\n        tooltipSide={tooltipSide}\n        tooltipPortal={tooltipPortal}\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      {regions}\n    </>\n  );\n}\n"],"mappings":";AA2HI,mBACE,KADF;AA1HJ,SAAS,OAAO,MAAM,SAAS;AAC/B,SAAS,UAAU;AACnB,SAAS,oBAAwC;AACjD,SAAS,mBAAmB;AAC5B,SAAS,0BAA0B;AAEnC,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAI3B,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,WAAW,UAAU,WAAW,iBAAiB,UAAU,WAAW,gBAAgB;AAE5F,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;AAYA,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACJ,GAAG;AAAA,QACJ;AAAA,QACA,OAAO;AAAA,QACP,cAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA,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;AAAA,IACC;AAAA,KACH;AAEJ;","names":[]}

package/dist/components/country-select.js

@@ -4,7 +4,7 @@ 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 { rankMatch } from "../lib/text-match.js";
+import { searchRanked } from "../lib/text-match.js";
 import { FieldChevron, FIELD_FLOATING_PAD, FIELD_INVALID, FIELD_TRIGGER, FloatingField } from "./field-base.js";
 import {
   assignRef,
@@ -24,7 +24,7 @@ import {
 } from "../i18n/kit-labels.js";
 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);
+  return searchRanked(entries, q, (e) => [e.name], { code: (e) => e.code, locale }).sort((a, b) => a.rank - b.rank).map((x) => x.row);
 }
 function toOption(e, flags, group) {
   return {

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 { rankMatch } from \"../lib/text-match\";\nimport { FieldChevron, FIELD_FLOATING_PAD, FIELD_INVALID, FIELD_TRIGGER, FloatingField } from \"./field-base\";\nimport {\n  assignRef,\n  EndHintRow,\n  LockedReason,\n  mergeDescribedBy,\n  useFieldMessages,\n  useLockReason,\n  type DisabledReasonDisplay,\n  type FieldHelpProps,\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\">, FieldHelpProps {\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 passes the countries its configured bank-connection provider\n   * serves, read at runtime: its connections are provider-neutral since 2026-10-29, so\n   * the list is no longer a fixed fifteen. A code that is not in ISO's list is allowed\n   * 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 (its bank picker's 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  help,\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(() => [...top, ...others].map((e) => toOption(e, flags)), [top, others, flags]);\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    help,\n    name: label ?? ariaLabel,\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 id={valueId} className={cn(\"truncate-until-large\", selectedName === undefined && \"text-placeholder\")}>\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"]}
+{"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 { searchRanked } from \"../lib/text-match\";\nimport { FieldChevron, FIELD_FLOATING_PAD, FIELD_INVALID, FIELD_TRIGGER, FloatingField } from \"./field-base\";\nimport {\n  assignRef,\n  EndHintRow,\n  LockedReason,\n  mergeDescribedBy,\n  useFieldMessages,\n  useLockReason,\n  type DisabledReasonDisplay,\n  type FieldHelpProps,\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\">, FieldHelpProps {\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 passes the countries its configured bank-connection provider\n   * serves, read at runtime: its connections are provider-neutral since 2026-10-29, so\n   * the list is no longer a fixed fifteen. A code that is not in ISO's list is allowed\n   * 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/** Every word of the query in the name, or the whole code (0.51.4's rule: \"kinshasa\n *  congo\" finds Congo - Kinshasa; refactor audit 2026-10-30, DUP-4), best rank first; a\n *  stable sort, so equal ranks keep the collated (or preferred) order they came in. The\n *  rank is the kit's one, for the WHOLE query (`rankMatch`, DUP-5 — written here first):\n *  the code itself (a two-letter query \"ch\" means Switzerland before it means Chad), then\n *  the start of the name, then anywhere in it, then the words apart (`searchRanked`, each\n *  name and code folded once), with accents and case folded — \"osterreich\" finds\n *  Österreich, \"cote\" Côte d'Ivoire.\n *\n *  A word is the code or it is not: searched INSIDE the code, as one more text, \"w\"\n *  listed Aruba (AW) and Samoa (WS) and \"d\" Germany (DE), names with nothing of the\n *  query in them (0.52 code review, country-select.tsx). */\nfunction search(entries: Entry[], q: string, locale: string): Entry[] {\n  return searchRanked(entries, q, (e) => [e.name], { code: (e) => e.code, locale })\n    .sort((a, b) => a.rank - b.rank)\n    .map((x) => x.row);\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 (its bank picker's 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  help,\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(() => [...top, ...others].map((e) => toOption(e, flags)), [top, others, flags]);\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    help,\n    name: label ?? ariaLabel,\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 id={valueId} className={cn(\"truncate-until-large\", selectedName === undefined && \"text-placeholder\")}>\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/data-table-column-settings.d.ts

@@ -4,7 +4,7 @@ import type { DataTableColumn } from "./data-table.js";
 /** The "Columns" rail and its drawer (`columnSettings`). */
 export declare function ColumnSettingsPanel<T>({ columns, hiddenCols, setHiddenCols, autoHidden, keepColumn, showSettings, setShowSettings, columnsCountLabel, labels, autoSizeAll, }: {
     /** Every column, hidden ones included; the actions column is left out here. */
-    columns: DataTableColumn<T>[];
+    columns: readonly DataTableColumn<T>[];
     hiddenCols: Set<string>;
     setHiddenCols: Dispatch<SetStateAction<Set<string>>>;
     /** The columns the table's width leaves out (`fitPriority`, 0.48): unticked, and

package/dist/components/data-table-column-settings.js

@@ -1,8 +1,10 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useRef } from "react";
+import { useId, useLayoutEffect, useRef } from "react";
 import { X } from "lucide-react";
 import { cn } from "../lib/cn.js";
+import { claimEscape } from "../hooks/use-dismiss.js";
+import { firstTabStop } from "../lib/focus-left.js";
 import { Tooltip } from "./tooltip.js";
 import { isTableOwnColumn } from "./data-table-row-actions.js";
 import { columnLabel } from "./data-table-shared.js";
@@ -19,15 +21,33 @@ function ColumnSettingsPanel({
   autoSizeAll
 }) {
   const columnsRail = useRef(null);
+  const drawerRef = useRef(null);
+  const drawerId = useId();
+  const focusOnOpen = useRef(false);
+  useLayoutEffect(() => {
+    if (!showSettings || !focusOnOpen.current) return;
+    focusOnOpen.current = false;
+    const drawer = drawerRef.current;
+    if (!drawer) return;
+    (drawer.querySelector('input[type="checkbox"]') ?? firstTabStop(drawer, { includeSelf: false }))?.focus();
+  }, [showSettings]);
+  const close = () => {
+    setShowSettings(false);
+    columnsRail.current?.focus();
+  };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Tooltip, { label: columnsCountLabel, portal: true, children: /* @__PURE__ */ jsx(
       "button",
       {
         ref: columnsRail,
         type: "button",
-        onClick: () => setShowSettings(true),
+        onClick: () => {
+          focusOnOpen.current = true;
+          setShowSettings(true);
+        },
         "aria-label": columnsCountLabel,
-        "aria-hidden": showSettings,
+        "aria-expanded": showSettings,
+        "aria-controls": drawerId,
         tabIndex: showSettings ? -1 : 0,
         className: cn(
           "group flex shrink-0 items-start justify-center overflow-hidden pt-3 transition-[width] duration-200 ease-out",
@@ -48,7 +68,16 @@ function ColumnSettingsPanel({
     /* @__PURE__ */ jsx(
       "div",
       {
+        ref: drawerRef,
+        id: drawerId,
+        role: "group",
+        "aria-label": columnsCountLabel,
         inert: !showSettings || void 0,
+        onKeyDown: (e) => {
+          if (e.key !== "Escape" || !showSettings) return;
+          claimEscape(e);
+          close();
+        },
         className: cn(
           "shrink-0 overflow-hidden transition-[width] duration-200 ease-out",
           showSettings ? "w-56" : "w-0"
@@ -60,10 +89,7 @@ function ColumnSettingsPanel({
               "button",
               {
                 type: "button",
-                onClick: () => {
-                  setShowSettings(false);
-                  columnsRail.current?.focus();
-                },
+                onClick: close,
                 "aria-label": labels.close,
                 className: "rounded p-0.5 text-placeholder hover:bg-hover hover:text-secondary",
                 children: /* @__PURE__ */ jsx(X, { className: "size-4" })

package/dist/components/data-table-column-settings.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/data-table-column-settings.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport type { Dispatch, SetStateAction } from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { Tooltip } from \"./tooltip\";\nimport type { DataTableLabels } from \"./data-table-labels\";\nimport { isTableOwnColumn } from \"./data-table-row-actions\";\nimport { columnLabel } from \"./data-table-shared\";\nimport type { DataTableColumn } from \"./data-table\";\n\n// DataTable's column settings on a wide screen: the vertical \"Columns (n/m)\" rail and\n// the drawer it opens, with \"Auto-size\" and a show/hide box per column. Moved out of\n// data-table.tsx whole (refactor audit 2026-10, MOD-3 step 5).\n\n/** The \"Columns\" rail and its drawer (`columnSettings`). */\nexport function ColumnSettingsPanel<T>({\n  columns,\n  hiddenCols,\n  setHiddenCols,\n  autoHidden,\n  keepColumn,\n  showSettings,\n  setShowSettings,\n  columnsCountLabel,\n  labels,\n  autoSizeAll,\n}: {\n  /** Every column, hidden ones included; the actions column is left out here. */\n  columns: DataTableColumn<T>[];\n  hiddenCols: Set<string>;\n  setHiddenCols: Dispatch<SetStateAction<Set<string>>>;\n  /** The columns the table's width leaves out (`fitPriority`, 0.48): unticked, and\n   *  marked \"hidden for width\". */\n  autoHidden: Set<string>;\n  /** A tick keeps a column in whatever the width; an untick drops that (data-table-fit.ts). */\n  keepColumn: (key: string, on: boolean) => void;\n  showSettings: boolean;\n  setShowSettings: (open: boolean) => void;\n  /** \"Columns (n/m)\", the rail's text and name. */\n  columnsCountLabel: string;\n  labels: DataTableLabels;\n  autoSizeAll: () => void;\n}) {\n  // The \"Columns\" rail button — where the drawer's X hands focus back (BUG-7a).\n  const columnsRail = useRef<HTMLButtonElement | null>(null);\n  return (\n    <>\n      <Tooltip label={columnsCountLabel} portal>\n        <button\n          ref={columnsRail}\n          type=\"button\"\n          onClick={() => setShowSettings(true)}\n          aria-label={columnsCountLabel}\n          aria-hidden={showSettings}\n          tabIndex={showSettings ? -1 : 0}\n          className={cn(\n            \"group flex shrink-0 items-start justify-center overflow-hidden pt-3 transition-[width] duration-200 ease-out\",\n            \"border-s border-subtle\",\n            \"hover:bg-hover\",\n            showSettings ? \"w-0 border-s-0\" : \"w-8 cursor-pointer\",\n          )}\n        >\n          <span\n            className=\"whitespace-nowrap text-xs font-medium tracking-wide text-muted group-hover:text-secondary\"\n            style={{ writingMode: \"vertical-rl\", transform: \"rotate(180deg)\" }}\n          >\n            {columnsCountLabel}\n          </span>\n        </button>\n      </Tooltip>\n      <div\n        // Closed, the drawer is only `w-0`: without `inert` its X, Auto-size and one\n        // checkbox per column stayed tab stops and in the accessibility tree, and Tab\n        // after the last cell walked into controls nobody could see (BUG-7a).\n        inert={!showSettings || undefined}\n        className={cn(\n          \"shrink-0 overflow-hidden transition-[width] duration-200 ease-out\",\n          showSettings ? \"w-56\" : \"w-0\",\n        )}\n      >\n        <div className=\"flex w-56 flex-col border-s border-subtle p-2\">\n          <div className=\"mb-2 flex items-center justify-between gap-1\">\n            <div className=\"text-xs font-medium uppercase tracking-wide text-muted\">{columnsCountLabel}</div>\n            <Tooltip label={labels.close} portal>\n              <button\n                type=\"button\"\n                onClick={() => {\n                  setShowSettings(false);\n                  // Back to the rail that opened it: the X is about to go inert, and\n                  // focus would fall to <body> with it (BUG-7a).\n                  columnsRail.current?.focus();\n                }}\n                aria-label={labels.close}\n                className=\"rounded p-0.5 text-placeholder hover:bg-hover hover:text-secondary\"\n              >\n                <X className=\"size-4\" />\n              </button>\n            </Tooltip>\n          </div>\n          <button\n            type=\"button\"\n            onClick={autoSizeAll}\n            className=\"mb-2 rounded border border-subtle px-2 py-1 text-xs font-medium text-secondary hover:bg-hover\"\n          >\n            {labels.autoSize}\n          </button>\n          <div className=\"flex flex-col gap-0.5\">\n            {columns.map((col) => {\n              if (isTableOwnColumn(col.key)) return null;\n              // Ticked = drawn: a column left out for width is unticked, so the boxes\n              // and \"Columns (8/10)\" say the same (keksdose live #451).\n              const forWidth = !hiddenCols.has(col.key) && autoHidden.has(col.key);\n              const checked = !hiddenCols.has(col.key) && !forWidth;\n              const headerLabel = columnLabel(col);\n              return (\n                <label\n                  key={col.key}\n                  className=\"inline-flex cursor-pointer items-center gap-1.5 rounded px-1 py-0.5 text-xs hover:bg-hover\"\n                >\n                  <input\n                    type=\"checkbox\"\n                    className=\"size-3.5 shrink-0\"\n                    checked={checked}\n                    onChange={(e) => {\n                      keepColumn(col.key, e.target.checked);\n                      setHiddenCols((s) => {\n                        const next = new Set(s);\n                        if (e.target.checked) next.delete(col.key);\n                        else next.add(col.key);\n                        return next;\n                      });\n                    }}\n                  />\n                  {/* The panel is `w-56`: a long column name wraps from Large up rather\n                      than reading \"Accoun…\" beside its box (text size §10.17, round\n                      0.34 T1). */}\n                  {forWidth ? (\n                    // Under the name, as part of the box's name: \"Email, hidden for width\".\n                    <span className=\"flex min-w-0 flex-col\">\n                      <span className=\"truncate-until-large\">{headerLabel}</span>\n                      <span className=\"text-micro text-muted\" data-hidden-for-width=\"\">\n                        {labels.hiddenForWidth}\n                      </span>\n                    </span>\n                  ) : (\n                    <span className=\"min-w-0 truncate-until-large\">{headerLabel}</span>\n                  )}\n                </label>\n              );\n            })}\n          </div>\n        </div>\n      </div>\n    </>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/data-table-column-settings.tsx"],"sourcesContent":["import { useId, useLayoutEffect, useRef } from \"react\";\nimport type { Dispatch, SetStateAction } from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { claimEscape } from \"../hooks/use-dismiss\";\nimport { firstTabStop } from \"../lib/focus-left\";\nimport { Tooltip } from \"./tooltip\";\nimport type { DataTableLabels } from \"./data-table-labels\";\nimport { isTableOwnColumn } from \"./data-table-row-actions\";\nimport { columnLabel } from \"./data-table-shared\";\nimport type { DataTableColumn } from \"./data-table\";\n\n// DataTable's column settings on a wide screen: the vertical \"Columns (n/m)\" rail and\n// the drawer it opens, with \"Auto-size\" and a show/hide box per column. Moved out of\n// data-table.tsx whole (refactor audit 2026-10, MOD-3 step 5).\n\n/** The \"Columns\" rail and its drawer (`columnSettings`). */\nexport function ColumnSettingsPanel<T>({\n  columns,\n  hiddenCols,\n  setHiddenCols,\n  autoHidden,\n  keepColumn,\n  showSettings,\n  setShowSettings,\n  columnsCountLabel,\n  labels,\n  autoSizeAll,\n}: {\n  /** Every column, hidden ones included; the actions column is left out here. */\n  columns: readonly DataTableColumn<T>[];\n  hiddenCols: Set<string>;\n  setHiddenCols: Dispatch<SetStateAction<Set<string>>>;\n  /** The columns the table's width leaves out (`fitPriority`, 0.48): unticked, and\n   *  marked \"hidden for width\". */\n  autoHidden: Set<string>;\n  /** A tick keeps a column in whatever the width; an untick drops that (data-table-fit.ts). */\n  keepColumn: (key: string, on: boolean) => void;\n  showSettings: boolean;\n  setShowSettings: (open: boolean) => void;\n  /** \"Columns (n/m)\", the rail's text and name. */\n  columnsCountLabel: string;\n  labels: DataTableLabels;\n  autoSizeAll: () => void;\n}) {\n  // The \"Columns\" rail button — where the drawer's X hands focus back (BUG-7a).\n  const columnsRail = useRef<HTMLButtonElement | null>(null);\n  const drawerRef = useRef<HTMLDivElement | null>(null);\n  const drawerId = useId();\n  // The opening half (refactor audit 2026-10-30, DSP-13). Opened from the rail, the focus\n  // goes into the drawer: the rail it was on turns zero wide and leaves the tab order in\n  // the same render, and the focus sat in a control nobody could see. To the first column\n  // box — what the drawer is opened for — or, with none, its first control. Only when the\n  // rail opened it: a drawer that starts open (its state is the table's) takes nothing.\n  const focusOnOpen = useRef(false);\n  useLayoutEffect(() => {\n    if (!showSettings || !focusOnOpen.current) return;\n    focusOnOpen.current = false;\n    const drawer = drawerRef.current;\n    if (!drawer) return;\n    (\n      drawer.querySelector<HTMLElement>('input[type=\"checkbox\"]') ?? firstTabStop(drawer, { includeSelf: false })\n    )?.focus();\n  }, [showSettings]);\n  const close = () => {\n    setShowSettings(false);\n    // Back to the rail that opened it: the drawer is about to go inert, and focus would\n    // fall to <body> with it (BUG-7a).\n    columnsRail.current?.focus();\n  };\n  return (\n    <>\n      <Tooltip label={columnsCountLabel} portal>\n        <button\n          ref={columnsRail}\n          type=\"button\"\n          onClick={() => {\n            focusOnOpen.current = true;\n            setShowSettings(true);\n          }}\n          aria-label={columnsCountLabel}\n          // A disclosure: it says whether the drawer is open, and never hides itself from\n          // a screen reader — `aria-hidden` on it while it held the focus left the reader\n          // with nothing to say (DSP-13). Zero wide and out of the tab order while open.\n          aria-expanded={showSettings}\n          aria-controls={drawerId}\n          tabIndex={showSettings ? -1 : 0}\n          className={cn(\n            \"group flex shrink-0 items-start justify-center overflow-hidden pt-3 transition-[width] duration-200 ease-out\",\n            \"border-s border-subtle\",\n            \"hover:bg-hover\",\n            showSettings ? \"w-0 border-s-0\" : \"w-8 cursor-pointer\",\n          )}\n        >\n          <span\n            className=\"whitespace-nowrap text-xs font-medium tracking-wide text-muted group-hover:text-secondary\"\n            style={{ writingMode: \"vertical-rl\", transform: \"rotate(180deg)\" }}\n          >\n            {columnsCountLabel}\n          </span>\n        </button>\n      </Tooltip>\n      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- Escape\n          for whatever control in the drawer holds the focus; the group itself is no control. */}\n      <div\n        ref={drawerRef}\n        id={drawerId}\n        // Named by its own heading's words, so a reader entering it hears \"Columns (4/9),\n        // group\" before the first box (DSP-13).\n        role=\"group\"\n        aria-label={columnsCountLabel}\n        // Closed, the drawer is only `w-0`: without `inert` its X, Auto-size and one\n        // checkbox per column stayed tab stops and in the accessibility tree, and Tab\n        // after the last cell walked into controls nobody could see (BUG-7a).\n        inert={!showSettings || undefined}\n        // Escape closes it onto the rail, as its X does. Claimed, not handed to the Escape\n        // stack: inside a dialog the drawer is what the key closes, not the dialog.\n        onKeyDown={(e) => {\n          if (e.key !== \"Escape\" || !showSettings) return;\n          claimEscape(e);\n          close();\n        }}\n        className={cn(\n          \"shrink-0 overflow-hidden transition-[width] duration-200 ease-out\",\n          showSettings ? \"w-56\" : \"w-0\",\n        )}\n      >\n        <div className=\"flex w-56 flex-col border-s border-subtle p-2\">\n          <div className=\"mb-2 flex items-center justify-between gap-1\">\n            <div className=\"text-xs font-medium uppercase tracking-wide text-muted\">{columnsCountLabel}</div>\n            <Tooltip label={labels.close} portal>\n              <button\n                type=\"button\"\n                onClick={close}\n                aria-label={labels.close}\n                className=\"rounded p-0.5 text-placeholder hover:bg-hover hover:text-secondary\"\n              >\n                <X className=\"size-4\" />\n              </button>\n            </Tooltip>\n          </div>\n          <button\n            type=\"button\"\n            onClick={autoSizeAll}\n            className=\"mb-2 rounded border border-subtle px-2 py-1 text-xs font-medium text-secondary hover:bg-hover\"\n          >\n            {labels.autoSize}\n          </button>\n          <div className=\"flex flex-col gap-0.5\">\n            {columns.map((col) => {\n              if (isTableOwnColumn(col.key)) return null;\n              // Ticked = drawn: a column left out for width is unticked, so the boxes\n              // and \"Columns (8/10)\" say the same (keksdose live #451).\n              const forWidth = !hiddenCols.has(col.key) && autoHidden.has(col.key);\n              const checked = !hiddenCols.has(col.key) && !forWidth;\n              const headerLabel = columnLabel(col);\n              return (\n                <label\n                  key={col.key}\n                  className=\"inline-flex cursor-pointer items-center gap-1.5 rounded px-1 py-0.5 text-xs hover:bg-hover\"\n                >\n                  <input\n                    type=\"checkbox\"\n                    className=\"size-3.5 shrink-0\"\n                    checked={checked}\n                    onChange={(e) => {\n                      keepColumn(col.key, e.target.checked);\n                      setHiddenCols((s) => {\n                        const next = new Set(s);\n                        if (e.target.checked) next.delete(col.key);\n                        else next.add(col.key);\n                        return next;\n                      });\n                    }}\n                  />\n                  {/* The panel is `w-56`: a long column name wraps from Large up rather\n                      than reading \"Accoun…\" beside its box (text size §10.17, round\n                      0.34 T1). */}\n                  {forWidth ? (\n                    // Under the name, as part of the box's name: \"Email, hidden for width\".\n                    <span className=\"flex min-w-0 flex-col\">\n                      <span className=\"truncate-until-large\">{headerLabel}</span>\n                      <span className=\"text-micro text-muted\" data-hidden-for-width=\"\">\n                        {labels.hiddenForWidth}\n                      </span>\n                    </span>\n                  ) : (\n                    <span className=\"min-w-0 truncate-until-large\">{headerLabel}</span>\n                  )}\n                </label>\n              );\n            })}\n          </div>\n        </div>\n      </div>\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/data-table-filters.d.ts

@@ -45,8 +45,10 @@ export declare function isFilterActive(v: FilterValue | undefined): boolean;
  * `locale` is for the text filter's case folding. Plain `toLowerCase` folds by the
  * root rules, under which a Turkish user typing "ırmak" does not find "IRMAK";
  * `toLocaleLowerCase(locale)` does. Optional, and `undefined` is the runtime's default.
- * The text filter folds as every kit list does ({@link foldForSearch}, DUP-5): accents
- * off too, so "zurich" finds Zürich.
+ * The text filter folds as every kit list does (`foldForSearch`, DUP-5): accents off
+ * too, so "zurich" finds Zürich. And it matches as the pickers do since 0.51.4 (refactor
+ * audit 2026-10-30, DUP-4): every word of the query, anywhere in the value, in any order —
+ * "zurich migros" finds "Migros · 8004 Zürich". One word matches as before.
  */
 export declare function rowMatches<T>(col: DataTableColumn<T>, row: T, state: FilterValue, locale?: string): boolean;
 /** The empty filter state for a column's filter type. */

package/dist/components/data-table-filters.js

@@ -1,6 +1,6 @@
 "use client";
 import { toLocalIso } from "../lib/dates.js";
-import { foldForSearch } from "../lib/text-match.js";
+import { matchesSearch, searchWords } from "../lib/text-match.js";
 function resolveFilter(col) {
   if (col.filter) return col.filter;
   if (col.filterBy) return { type: "text", getValue: col.filterBy };
@@ -35,7 +35,7 @@ function rowMatches(col, row, state, locale) {
   switch (filter.type) {
     case "text": {
       if (state.type !== "text" || !state.q.trim()) return true;
-      return foldForSearch(filter.getValue(row), locale).includes(foldForSearch(state.q.trim(), locale));
+      return matchesSearch(searchWords(state.q, locale), [filter.getValue(row)], locale);
     }
     case "select": {
       if (state.type !== "select" || state.values.length === 0) return true;

package/dist/components/data-table-filters.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/data-table-filters.ts"],"sourcesContent":["import type { DataTableColumn } from \"./data-table\";\nimport { toLocalIso } from \"../lib/dates\";\nimport { foldForSearch } from \"../lib/text-match\";\n\n/** How a column is filtered. `text`/`select`/`date`/`number` each read a value\n *  off the row and compare it against the user's {@link FilterValue}. */\nexport type ColumnFilter<T> =\n  | { type: \"text\"; getValue: (row: T) => string }\n  | { type: \"select\"; getValue: (row: T) => string; options?: { value: string; label?: string }[] }\n  | { type: \"date\"; getValue: (row: T) => string | null | undefined }\n  | { type: \"number\"; getValue: (row: T) => number | null | undefined };\n\n/** The current state of a column's filter (what the user has entered). */\nexport type FilterValue =\n  | { type: \"text\"; q: string }\n  | { type: \"select\"; values: string[] }\n  | { type: \"date\"; from: string; to: string }\n  | { type: \"number\"; min: string; max: string; abs: boolean };\n\n/** A column's filter config, falling back to a plain text filter over `filterBy`. */\nexport function resolveFilter<T>(col: DataTableColumn<T>): ColumnFilter<T> | null {\n  if (col.filter) return col.filter;\n  if (col.filterBy) return { type: \"text\", getValue: col.filterBy };\n  return null;\n}\n\n/** Whether a filter value is actually narrowing anything (vs its empty default). */\nexport function isFilterActive(v: FilterValue | undefined): boolean {\n  if (!v) return false;\n  switch (v.type) {\n    case \"text\":\n      return v.q.trim().length > 0;\n    case \"select\":\n      return v.values.length > 0;\n    case \"date\":\n      return !!v.from || !!v.to;\n    case \"number\":\n      return numberBound(v.min) !== null || numberBound(v.max) !== null || v.abs;\n  }\n}\n\n/**\n * A number filter's bound as a number, or `null` for none: blank, or not a finite\n * number (BUG-10, refactor audit 2026-10). `Number(\"abc\")` is NaN, and every comparison\n * with NaN is false, so a broken bound — `f.amount=abc..` in a shared link — used to\n * match every row while the column showed its filter as active; `Number(\" \")` is 0, and\n * a blank bound kept every negative row out. The popover hands in the dot-decimal text\n * its locale's marks read (`readTyped`); anything else is no bound.\n */\nfunction numberBound(raw: string): number | null {\n  if (raw.trim() === \"\") return null;\n  const n = Number(raw);\n  return Number.isFinite(n) ? n : null;\n}\n\n/**\n * The calendar day a date filter compares, as \"YYYY-MM-DD\" — the LOCAL day, the one\n * the cell, the DatePicker and the presets show (round 0.34 BUG-2).\n *\n * A bare \"YYYY-MM-DD\" is a calendar day already and is kept as it is. Anything with a\n * time part is an instant: its first ten characters were the UTC day for a server\n * timestamp (\"…Z\", \"+00:00\"), so in Berlin a report filed at 00:30 showed as the 12th\n * and was filtered as the 11th. It is read as the instant it names and put on the\n * local calendar. A string `Date` cannot read keeps the old first-ten-characters\n * answer rather than matching nothing.\n */\nfunction localDay(raw: string): string {\n  if (/^\\d{4}-\\d{2}-\\d{2}$/.test(raw)) return raw;\n  const d = new Date(raw);\n  return Number.isNaN(d.getTime()) ? raw.slice(0, 10) : toLocalIso(d);\n}\n\n/**\n * Whether `row` passes column `col`'s filter given the user's `state`.\n *\n * `locale` is for the text filter's case folding. Plain `toLowerCase` folds by the\n * root rules, under which a Turkish user typing \"ırmak\" does not find \"IRMAK\";\n * `toLocaleLowerCase(locale)` does. Optional, and `undefined` is the runtime's default.\n * The text filter folds as every kit list does ({@link foldForSearch}, DUP-5): accents\n * off too, so \"zurich\" finds Zürich.\n */\nexport function rowMatches<T>(col: DataTableColumn<T>, row: T, state: FilterValue, locale?: string): boolean {\n  const filter = resolveFilter(col);\n  if (!filter) return true;\n  switch (filter.type) {\n    case \"text\": {\n      if (state.type !== \"text\" || !state.q.trim()) return true;\n      return foldForSearch(filter.getValue(row), locale).includes(foldForSearch(state.q.trim(), locale));\n    }\n    case \"select\": {\n      if (state.type !== \"select\" || state.values.length === 0) return true;\n      return state.values.includes(filter.getValue(row));\n    }\n    case \"date\": {\n      if (state.type !== \"date\") return true;\n      const raw = filter.getValue(row);\n      if (!raw) return !state.from && !state.to;\n      const v = localDay(raw);\n      if (state.from && v < state.from) return false;\n      if (state.to && v > state.to) return false;\n      return true;\n    }\n    case \"number\": {\n      if (state.type !== \"number\") return true;\n      const raw = filter.getValue(row);\n      const min = numberBound(state.min);\n      const max = numberBound(state.max);\n      if (raw == null || Number.isNaN(raw)) return min === null && max === null;\n      const x = state.abs ? Math.abs(raw) : raw;\n      if (min !== null && x < min) return false;\n      if (max !== null && x > max) return false;\n      return true;\n    }\n  }\n}\n\n/** The empty filter state for a column's filter type. */\nexport function defaultFilterState<T>(filter: ColumnFilter<T>): FilterValue {\n  switch (filter.type) {\n    case \"text\":\n      return { type: \"text\", q: \"\" };\n    case \"select\":\n      return { type: \"select\", values: [] };\n    case \"date\":\n      return { type: \"date\", from: \"\", to: \"\" };\n    case \"number\":\n      return { type: \"number\", min: \"\", max: \"\", abs: false };\n  }\n}\n\n/**\n * Escape the ONE character the select codec uses as its separator, plus the escape\n * marker itself so the transform is reversible.\n *\n * A minimal escape rather than `encodeURIComponent`, deliberately: these strings sit\n * inside a query-parameter value that `URLSearchParams` already encodes, so a full\n * percent-encode would double-encode every space into `%2520` and make shared links\n * unreadable for no gain. Only `,` can be misread here.\n *\n * Backwards compatible with every link written before this existed: a value with\n * neither `,` nor `%` passes through both directions untouched, and `%` on its own\n * never matched `%25` either.\n */\nfunction escapeSelectValue(v: string): string {\n  return v.replace(/%/g, \"%25\").replace(/,/g, \"%2C\");\n}\n\n/** Inverse of {@link escapeSelectValue}. The order matters and is the reverse of the\n *  escape: undoing `%2C` first cannot see the `2C` inside an escaped `%252C`. */\nfunction unescapeSelectValue(v: string): string {\n  return v.replace(/%2C/g, \",\").replace(/%25/g, \"%\");\n}\n\n/** URL-safe encoding of a filter value (`f.<column>` param), null when empty. */\nexport function encodeFilterValue(v: FilterValue): string | null {\n  switch (v.type) {\n    case \"text\":\n      return v.q.trim() ? v.q : null;\n    case \"select\":\n      // Escaped before joining: an option value may legitimately contain the\n      // separator (a free-text title, a payee or category name), and without this it\n      // came back as two values and the filter silently matched nothing.\n      return v.values.length ? v.values.map(escapeSelectValue).join(\",\") : null;\n    case \"date\":\n      return v.from || v.to ? `${v.from}..${v.to}` : null;\n    case \"number\": {\n      const hasRange = v.min !== \"\" || v.max !== \"\";\n      if (!hasRange && !v.abs) return null;\n      return `${v.min}..${v.max}${v.abs ? \"!\" : \"\"}`;\n    }\n  }\n}\n\n/** Inverse of {@link encodeFilterValue} given just the filter type — for\n *  callers that know a column's type without holding its full config. */\nexport function decodeFilterValueOfType(type: FilterValue[\"type\"], raw: string): FilterValue {\n  switch (type) {\n    case \"text\":\n      return { type: \"text\", q: raw };\n    case \"select\":\n      return {\n        type: \"select\",\n        values: raw\n          .split(\",\")\n          .filter((v) => v.length > 0)\n          .map(unescapeSelectValue),\n      };\n    case \"date\": {\n      const [from = \"\", to = \"\"] = raw.split(\"..\");\n      return { type: \"date\", from, to };\n    }\n    case \"number\": {\n      let body = raw;\n      const abs = body.endsWith(\"!\");\n      if (abs) body = body.slice(0, -1);\n      const [min = \"\", max = \"\"] = body.split(\"..\");\n      // A bound that is not a finite number is dropped here, so a broken link leaves the\n      // filter off rather than active and matching everything (BUG-10).\n      const kept = (s: string) => (numberBound(s) === null ? \"\" : s);\n      return { type: \"number\", min: kept(min), max: kept(max), abs };\n    }\n  }\n}\n\n/** Inverse of {@link encodeFilterValue}, typed by the column's filter config. */\nexport function decodeFilterValue<T>(filter: ColumnFilter<T>, raw: string): FilterValue {\n  return decodeFilterValueOfType(filter.type, raw);\n}\n\n// ---------- Filter builders ----------\n//\n// Terse builders for `DataTableColumn.filter`, lifted from kastlan's column-filters.ts,\n// which every converted list page imports. The one that earns its keep is `selectFilter`:\n// in `serverPagination` mode a select filter MUST declare its options (the table would\n// otherwise derive them from the rows of the page on screen), and the options an app has\n// to hand are usually a translated `{ value: label }` map.\n\n/** A free-text filter over `getValue`. */\nexport function textFilter<T>(getValue: (row: T) => string): ColumnFilter<T> {\n  return { type: \"text\", getValue };\n}\n\n/**\n * A multi-select filter. `options` is an options array, or a `{ value: label }` record\n * (a translated status map) — kept in its key order. Left out, the table derives the\n * options from the rows it holds.\n */\nexport function selectFilter<T>(\n  getValue: (row: T) => string,\n  options?: { value: string; label?: string }[] | Record<string, string>,\n): ColumnFilter<T> {\n  const opts = Array.isArray(options)\n    ? options\n    : options\n      ? Object.entries(options).map(([value, label]) => ({ value, label }))\n      : undefined;\n  return { type: \"select\", getValue, options: opts };\n}\n\n/** A from/to date filter over an ISO date (or date-time) string. */\nexport function dateFilter<T>(getValue: (row: T) => string | null | undefined): ColumnFilter<T> {\n  return { type: \"date\", getValue };\n}\n\n/** A min/max (and absolute-value) filter over a number. */\nexport function numberFilter<T>(getValue: (row: T) => number | null | undefined): ColumnFilter<T> {\n  return { type: \"number\", getValue };\n}\n\n/**\n * A link to a list page with one column filter already applied — in the table's own URL\n * scheme (`f.<column>=<encoded>`), which a table with `urlSync` (or\n * {@link useTableUrlState}) reads on mount. kastlan's `buildListUrl`, which had to\n * restate the `f.` prefix to do it.\n *\n * `value` is a string for a text filter, an array for a select filter, or any\n * {@link FilterValue}. A filter that narrows nothing returns `path` unchanged. A `path`\n * that already carries a query keeps it; a `#fragment` stays at the end.\n *\n *     filterHref(\"/units\", \"status\", [\"vacant\"]) // \"/units?f.status=vacant\"\n */\nexport function filterHref(\n  path: string,\n  column: string,\n  value: string | string[] | FilterValue,\n  /** The target table's `urlSync` prefix, if it has one (`{ prefix: \"inv.\" }` →\n   *  `inv.f.<column>`). */\n  options?: { prefix?: string },\n): string {\n  const state: FilterValue =\n    typeof value === \"string\"\n      ? { type: \"text\", q: value }\n      : Array.isArray(value)\n        ? { type: \"select\", values: value }\n        : value;\n  const encoded = encodeFilterValue(state);\n  if (encoded == null) return path;\n  const hashAt = path.indexOf(\"#\");\n  const base = hashAt >= 0 ? path.slice(0, hashAt) : path;\n  const hash = hashAt >= 0 ? path.slice(hashAt) : \"\";\n  const queryAt = base.indexOf(\"?\");\n  const params = new URLSearchParams(queryAt >= 0 ? base.slice(queryAt + 1) : \"\");\n  params.set(`${options?.prefix ?? \"\"}f.${column}`, encoded);\n  return `${queryAt >= 0 ? base.slice(0, queryAt) : base}?${params.toString()}${hash}`;\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/data-table-filters.ts"],"sourcesContent":["import type { DataTableColumn } from \"./data-table\";\nimport { toLocalIso } from \"../lib/dates\";\nimport { matchesSearch, searchWords } from \"../lib/text-match\";\n\n/** How a column is filtered. `text`/`select`/`date`/`number` each read a value\n *  off the row and compare it against the user's {@link FilterValue}. */\nexport type ColumnFilter<T> =\n  | { type: \"text\"; getValue: (row: T) => string }\n  | { type: \"select\"; getValue: (row: T) => string; options?: { value: string; label?: string }[] }\n  | { type: \"date\"; getValue: (row: T) => string | null | undefined }\n  | { type: \"number\"; getValue: (row: T) => number | null | undefined };\n\n/** The current state of a column's filter (what the user has entered). */\nexport type FilterValue =\n  | { type: \"text\"; q: string }\n  | { type: \"select\"; values: string[] }\n  | { type: \"date\"; from: string; to: string }\n  | { type: \"number\"; min: string; max: string; abs: boolean };\n\n/** A column's filter config, falling back to a plain text filter over `filterBy`. */\nexport function resolveFilter<T>(col: DataTableColumn<T>): ColumnFilter<T> | null {\n  if (col.filter) return col.filter;\n  if (col.filterBy) return { type: \"text\", getValue: col.filterBy };\n  return null;\n}\n\n/** Whether a filter value is actually narrowing anything (vs its empty default). */\nexport function isFilterActive(v: FilterValue | undefined): boolean {\n  if (!v) return false;\n  switch (v.type) {\n    case \"text\":\n      return v.q.trim().length > 0;\n    case \"select\":\n      return v.values.length > 0;\n    case \"date\":\n      return !!v.from || !!v.to;\n    case \"number\":\n      return numberBound(v.min) !== null || numberBound(v.max) !== null || v.abs;\n  }\n}\n\n/**\n * A number filter's bound as a number, or `null` for none: blank, or not a finite\n * number (BUG-10, refactor audit 2026-10). `Number(\"abc\")` is NaN, and every comparison\n * with NaN is false, so a broken bound — `f.amount=abc..` in a shared link — used to\n * match every row while the column showed its filter as active; `Number(\" \")` is 0, and\n * a blank bound kept every negative row out. The popover hands in the dot-decimal text\n * its locale's marks read (`readTyped`); anything else is no bound.\n */\nfunction numberBound(raw: string): number | null {\n  if (raw.trim() === \"\") return null;\n  const n = Number(raw);\n  return Number.isFinite(n) ? n : null;\n}\n\n/**\n * The calendar day a date filter compares, as \"YYYY-MM-DD\" — the LOCAL day, the one\n * the cell, the DatePicker and the presets show (round 0.34 BUG-2).\n *\n * A bare \"YYYY-MM-DD\" is a calendar day already and is kept as it is. Anything with a\n * time part is an instant: its first ten characters were the UTC day for a server\n * timestamp (\"…Z\", \"+00:00\"), so in Berlin a report filed at 00:30 showed as the 12th\n * and was filtered as the 11th. It is read as the instant it names and put on the\n * local calendar. A string `Date` cannot read keeps the old first-ten-characters\n * answer rather than matching nothing.\n */\nfunction localDay(raw: string): string {\n  if (/^\\d{4}-\\d{2}-\\d{2}$/.test(raw)) return raw;\n  const d = new Date(raw);\n  return Number.isNaN(d.getTime()) ? raw.slice(0, 10) : toLocalIso(d);\n}\n\n/**\n * Whether `row` passes column `col`'s filter given the user's `state`.\n *\n * `locale` is for the text filter's case folding. Plain `toLowerCase` folds by the\n * root rules, under which a Turkish user typing \"ırmak\" does not find \"IRMAK\";\n * `toLocaleLowerCase(locale)` does. Optional, and `undefined` is the runtime's default.\n * The text filter folds as every kit list does (`foldForSearch`, DUP-5): accents off\n * too, so \"zurich\" finds Zürich. And it matches as the pickers do since 0.51.4 (refactor\n * audit 2026-10-30, DUP-4): every word of the query, anywhere in the value, in any order —\n * \"zurich migros\" finds \"Migros · 8004 Zürich\". One word matches as before.\n */\nexport function rowMatches<T>(col: DataTableColumn<T>, row: T, state: FilterValue, locale?: string): boolean {\n  const filter = resolveFilter(col);\n  if (!filter) return true;\n  switch (filter.type) {\n    case \"text\": {\n      if (state.type !== \"text\" || !state.q.trim()) return true;\n      return matchesSearch(searchWords(state.q, locale), [filter.getValue(row)], locale);\n    }\n    case \"select\": {\n      if (state.type !== \"select\" || state.values.length === 0) return true;\n      return state.values.includes(filter.getValue(row));\n    }\n    case \"date\": {\n      if (state.type !== \"date\") return true;\n      const raw = filter.getValue(row);\n      if (!raw) return !state.from && !state.to;\n      const v = localDay(raw);\n      if (state.from && v < state.from) return false;\n      if (state.to && v > state.to) return false;\n      return true;\n    }\n    case \"number\": {\n      if (state.type !== \"number\") return true;\n      const raw = filter.getValue(row);\n      const min = numberBound(state.min);\n      const max = numberBound(state.max);\n      if (raw == null || Number.isNaN(raw)) return min === null && max === null;\n      const x = state.abs ? Math.abs(raw) : raw;\n      if (min !== null && x < min) return false;\n      if (max !== null && x > max) return false;\n      return true;\n    }\n  }\n}\n\n/** The empty filter state for a column's filter type. */\nexport function defaultFilterState<T>(filter: ColumnFilter<T>): FilterValue {\n  switch (filter.type) {\n    case \"text\":\n      return { type: \"text\", q: \"\" };\n    case \"select\":\n      return { type: \"select\", values: [] };\n    case \"date\":\n      return { type: \"date\", from: \"\", to: \"\" };\n    case \"number\":\n      return { type: \"number\", min: \"\", max: \"\", abs: false };\n  }\n}\n\n/**\n * Escape the ONE character the select codec uses as its separator, plus the escape\n * marker itself so the transform is reversible.\n *\n * A minimal escape rather than `encodeURIComponent`, deliberately: these strings sit\n * inside a query-parameter value that `URLSearchParams` already encodes, so a full\n * percent-encode would double-encode every space into `%2520` and make shared links\n * unreadable for no gain. Only `,` can be misread here.\n *\n * Backwards compatible with every link written before this existed: a value with\n * neither `,` nor `%` passes through both directions untouched, and `%` on its own\n * never matched `%25` either.\n */\nfunction escapeSelectValue(v: string): string {\n  return v.replace(/%/g, \"%25\").replace(/,/g, \"%2C\");\n}\n\n/** Inverse of {@link escapeSelectValue}. The order matters and is the reverse of the\n *  escape: undoing `%2C` first cannot see the `2C` inside an escaped `%252C`. */\nfunction unescapeSelectValue(v: string): string {\n  return v.replace(/%2C/g, \",\").replace(/%25/g, \"%\");\n}\n\n/** URL-safe encoding of a filter value (`f.<column>` param), null when empty. */\nexport function encodeFilterValue(v: FilterValue): string | null {\n  switch (v.type) {\n    case \"text\":\n      return v.q.trim() ? v.q : null;\n    case \"select\":\n      // Escaped before joining: an option value may legitimately contain the\n      // separator (a free-text title, a payee or category name), and without this it\n      // came back as two values and the filter silently matched nothing.\n      return v.values.length ? v.values.map(escapeSelectValue).join(\",\") : null;\n    case \"date\":\n      return v.from || v.to ? `${v.from}..${v.to}` : null;\n    case \"number\": {\n      const hasRange = v.min !== \"\" || v.max !== \"\";\n      if (!hasRange && !v.abs) return null;\n      return `${v.min}..${v.max}${v.abs ? \"!\" : \"\"}`;\n    }\n  }\n}\n\n/** Inverse of {@link encodeFilterValue} given just the filter type — for\n *  callers that know a column's type without holding its full config. */\nexport function decodeFilterValueOfType(type: FilterValue[\"type\"], raw: string): FilterValue {\n  switch (type) {\n    case \"text\":\n      return { type: \"text\", q: raw };\n    case \"select\":\n      return {\n        type: \"select\",\n        values: raw\n          .split(\",\")\n          .filter((v) => v.length > 0)\n          .map(unescapeSelectValue),\n      };\n    case \"date\": {\n      const [from = \"\", to = \"\"] = raw.split(\"..\");\n      return { type: \"date\", from, to };\n    }\n    case \"number\": {\n      let body = raw;\n      const abs = body.endsWith(\"!\");\n      if (abs) body = body.slice(0, -1);\n      const [min = \"\", max = \"\"] = body.split(\"..\");\n      // A bound that is not a finite number is dropped here, so a broken link leaves the\n      // filter off rather than active and matching everything (BUG-10).\n      const kept = (s: string) => (numberBound(s) === null ? \"\" : s);\n      return { type: \"number\", min: kept(min), max: kept(max), abs };\n    }\n  }\n}\n\n/** Inverse of {@link encodeFilterValue}, typed by the column's filter config. */\nexport function decodeFilterValue<T>(filter: ColumnFilter<T>, raw: string): FilterValue {\n  return decodeFilterValueOfType(filter.type, raw);\n}\n\n// ---------- Filter builders ----------\n//\n// Terse builders for `DataTableColumn.filter`, lifted from kastlan's column-filters.ts,\n// which every converted list page imports. The one that earns its keep is `selectFilter`:\n// in `serverPagination` mode a select filter MUST declare its options (the table would\n// otherwise derive them from the rows of the page on screen), and the options an app has\n// to hand are usually a translated `{ value: label }` map.\n\n/** A free-text filter over `getValue`. */\nexport function textFilter<T>(getValue: (row: T) => string): ColumnFilter<T> {\n  return { type: \"text\", getValue };\n}\n\n/**\n * A multi-select filter. `options` is an options array, or a `{ value: label }` record\n * (a translated status map) — kept in its key order. Left out, the table derives the\n * options from the rows it holds.\n */\nexport function selectFilter<T>(\n  getValue: (row: T) => string,\n  options?: { value: string; label?: string }[] | Record<string, string>,\n): ColumnFilter<T> {\n  const opts = Array.isArray(options)\n    ? options\n    : options\n      ? Object.entries(options).map(([value, label]) => ({ value, label }))\n      : undefined;\n  return { type: \"select\", getValue, options: opts };\n}\n\n/** A from/to date filter over an ISO date (or date-time) string. */\nexport function dateFilter<T>(getValue: (row: T) => string | null | undefined): ColumnFilter<T> {\n  return { type: \"date\", getValue };\n}\n\n/** A min/max (and absolute-value) filter over a number. */\nexport function numberFilter<T>(getValue: (row: T) => number | null | undefined): ColumnFilter<T> {\n  return { type: \"number\", getValue };\n}\n\n/**\n * A link to a list page with one column filter already applied — in the table's own URL\n * scheme (`f.<column>=<encoded>`), which a table with `urlSync` (or\n * {@link useTableUrlState}) reads on mount. kastlan's `buildListUrl`, which had to\n * restate the `f.` prefix to do it.\n *\n * `value` is a string for a text filter, an array for a select filter, or any\n * {@link FilterValue}. A filter that narrows nothing returns `path` unchanged. A `path`\n * that already carries a query keeps it; a `#fragment` stays at the end.\n *\n *     filterHref(\"/units\", \"status\", [\"vacant\"]) // \"/units?f.status=vacant\"\n */\nexport function filterHref(\n  path: string,\n  column: string,\n  value: string | string[] | FilterValue,\n  /** The target table's `urlSync` prefix, if it has one (`{ prefix: \"inv.\" }` →\n   *  `inv.f.<column>`). */\n  options?: { prefix?: string },\n): string {\n  const state: FilterValue =\n    typeof value === \"string\"\n      ? { type: \"text\", q: value }\n      : Array.isArray(value)\n        ? { type: \"select\", values: value }\n        : value;\n  const encoded = encodeFilterValue(state);\n  if (encoded == null) return path;\n  const hashAt = path.indexOf(\"#\");\n  const base = hashAt >= 0 ? path.slice(0, hashAt) : path;\n  const hash = hashAt >= 0 ? path.slice(hashAt) : \"\";\n  const queryAt = base.indexOf(\"?\");\n  const params = new URLSearchParams(queryAt >= 0 ? base.slice(queryAt + 1) : \"\");\n  params.set(`${options?.prefix ?? \"\"}f.${column}`, encoded);\n  return `${queryAt >= 0 ? base.slice(0, queryAt) : base}?${params.toString()}${hash}`;\n}\n"],"mappings":"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","names":[]}

package/dist/components/data-table-fit.d.ts

@@ -18,7 +18,7 @@ export declare const GROW_CELL_CLASS = "w-full max-w-0 truncate-until-large";
  *  `not-large:whitespace-normal` in its `className`. */
 export declare const GROW_PEER_CELL_CLASS = "not-large:whitespace-nowrap";
 /** The auto-hide order: lowest `fitPriority` first, the later column first on a tie. */
-export declare function fitHideOrder<T>(columns: DataTableColumn<T>[]): DataTableColumn<T>[];
+export declare function fitHideOrder<T>(columns: readonly DataTableColumn<T>[]): DataTableColumn<T>[];
 /**
  * Which columns the table leaves out for width, and the Columns panel's "keep it".
  *
@@ -28,7 +28,7 @@ export declare function fitHideOrder<T>(columns: DataTableColumn<T>[]): DataTabl
  * drops the keep. Keeps are not persisted: on the next visit the table fits again.
  */
 export declare function useColumnFit<T>({ columns, hiddenCols, headRefs, scroller, enabled, content, }: {
-    columns: DataTableColumn<T>[];
+    columns: readonly DataTableColumn<T>[];
     /** The user's hidden columns: never candidates (they are out already). */
     hiddenCols: Set<string>;
     headRefs: Map<string, HTMLTableCellElement>;
@@ -39,8 +39,10 @@ export declare function useColumnFit<T>({ columns, hiddenCols, headRefs, scrolle
     /**
      * What can change the columns' widths besides the scroller (0.48.2): the rows on
      * screen, the columns, the stored widths, the text size. Compared item by item after
-     * each render, and the table is measured only when one changed — a selection tick no
-     * longer forces a layout of the whole table. Without it, every render measures.
+     * each render (`Object.is`), and the table is measured only when one changed — a
+     * selection tick no longer forces a layout of the whole table. Without it, every render
+     * measures. So each item must keep its identity while it means the same: the page's
+     * rows memoised, the columns as their keys (DSP-19).
      */
     content?: readonly unknown[];
 }): {

package/dist/components/data-table-fit.js

@@ -102,9 +102,12 @@ function useColumnFit({
     if (table) ro.observe(table);
   }, []);
   const lastContent = useRef(null);
+  const orderSig = order.map((c) => c.key).join("\0");
+  const currentSig = current.join("\0");
   useLayoutEffect(() => {
     watchTable();
-    const now = content ? [...content, order, current, growKey, active] : null;
+    const headText = active ? scroller()?.querySelector("thead")?.textContent ?? "" : "";
+    const now = content ? [...content, orderSig, currentSig, growKey, growMin, active, headText] : null;
     const prev = lastContent.current;
     lastContent.current = now;
     if (now && prev && prev.length === now.length && prev.every((v, i) => Object.is(v, now[i]))) return;