@eifi1/ui-kit 0.51.4 → 0.51.6

package/dist/components/grouped-picker.js

@@ -36,14 +36,12 @@ function GroupedPicker({
       (g) => matchesSearch(words, [g.label], locale) ? g : { ...g, items: g.items.filter((i) => matchesSearch(words, [g.label, i.label], locale)) }
     ).filter((g) => g.items.length > 0) : groups;
     return kept.flatMap(
-      (g) => g.items.map(
-        (item) => ({
-          value: itemValue(g.key, item.key),
-          label: item.label,
-          icon: item.icon,
-          group: g.label
-        })
-      )
+      (g) => g.items.map((item) => ({
+        value: itemValue(g.key, item.key),
+        label: item.label,
+        icon: item.icon,
+        group: g.label
+      }))
     );
   }, [groups, query, locale]);
   const keysOf = useMemo(() => {

package/dist/components/grouped-picker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/grouped-picker.tsx"],"sourcesContent":["import { useCallback, useId, useMemo } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode, Ref } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { matchesSearch, searchWords } from \"../lib/text-match\";\nimport { ComboboxPanel, useComboboxCore, type ComboOption } from \"./combobox-core\";\nimport { assignRef } from \"./field-parts\";\nimport { DEFAULT_COMBOBOX_LABELS, useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\n\nexport interface PickerGroup {\n  key: string;\n  label: string;\n  /** `icon` is an optional leading glyph, drawn before the label — the same slot\n   *  `ComboOption` has always had, so the two pickers can present one option set\n   *  the same way. Omitted, a row is exactly what it was: label only, with no\n   *  reserved space, so a list where nothing has an icon does not indent. */\n  items: { key: string; label: string; icon?: ReactNode }[];\n}\n\n/**\n * `onSelect` is omitted from the div's own attributes because this component's\n * means \"an item was chosen\", not the DOM's \"text was selected inside me\" — two\n * different signatures under one name, and the kit's meaning is the one three apps\n * are written against.\n */\nexport interface GroupedPickerProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onSelect\"> {\n  groups: PickerGroup[];\n  /** Face of the closed picker button. A string also names the trigger when no\n   *  `aria-label` does. */\n  buttonLabel: ReactNode;\n  /** Keys of the current selection, if any. */\n  selected: { group: string; item: string } | null;\n  onSelect: (groupKey: string, itemKey: string) => void;\n  /** The filter box's prompt, and its accessible name. Default: `combobox.search` from\n   *  the {@link UiKitProvider}, else \"Search\". */\n  filterPlaceholder?: string;\n  /** The TRIGGER — the focusable `<button>` — as on every picker of the kit (MultiSelect,\n   *  CountrySelect, CurrencySelect), not the wrapper the rest of the props go on (0.34,\n   *  API-2, refactor audit 2026-10). */\n  ref?: Ref<HTMLButtonElement>;\n}\n\n/** An item's value in the list: the group's key and the item's, which together are\n *  unique where an item key alone is not (two groups may each have an \"Other\"). */\nconst itemValue = (group: string, item: string) => `${group}\\u0000${item}`;\n\n/** Panel picker for large grouped option sets: instead of one long flat\n * dropdown, the groups sit side by side as columns with their items listed\n * beneath (feedback #267/#276), narrowed by a filter box at the top (feedback\n * #267 rework). A query that matches a group's name keeps the whole group;\n * otherwise groups are reduced to their matching items.\n *\n * On the picker family's foundation since round 0.34 (Wave 2, DUP-4 + BUG-12):\n * `useComboboxCore` + `ComboboxPanel` in its `columns` layout. Its trigger promised a\n * dialog that was no dialog, and the choice showed by colour alone; it is a combobox over\n * a listbox now — one `role=\"group\"` per column, named by its heading, the chosen item\n * `aria-selected` and checked — with the arrow keys, Enter, a named filter box, the live\n * result count, portal anchoring (dev#548) and, on a phone, the full-screen sheet\n * (live #200) in one column. */\nexport function GroupedPicker({\n  groups,\n  buttonLabel,\n  selected,\n  onSelect,\n  \"aria-label\": ariaLabel,\n  filterPlaceholder,\n  className,\n  ref,\n  ...rest\n}: GroupedPickerProps) {\n  // `filter: false`: the filter below keeps a whole group when its name matches, so the\n  // panel is handed the rows, as CountrySelect's are. Escape is the core's layer on the\n  // kit's stack — this kept an Escape handler of its own on its panel (round 0.34 BUG-1),\n  // and the stack is the one answer to it now (DUP-1). Back closes the list, as it did on\n  // `useDropdown`.\n  const core = useComboboxCore<string>({ filter: false, backCloses: true });\n  const { open, setOpen, triggerRef, closeToTrigger, query } = 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, as on MultiSelect.\n  const setTrigger = useCallback(\n    (el: HTMLButtonElement | null) => {\n      triggerRef.current = el;\n      assignRef(ref, el);\n    },\n    [ref, triggerRef],\n  );\n  const comboText = useKitLabels(\"combobox\", DEFAULT_COMBOBOX_LABELS);\n\n  // Folded as every kit list folds (DUP-5): the locale's case (the Turkish \"İ\" that\n  // plain `toLowerCase` gets wrong), and now the accents too — \"zurich\" finds Zürich.\n  const locale = useKitLocale();\n  const results = useMemo(() => {\n    // Every word of the query (0.51.4): all in the group's name keeps the whole group;\n    // otherwise an item stays when each word is in its label or its group's name, so\n    // \"migros 8004\" finds Migros' 8004 shop.\n    const words = searchWords(query, locale);\n    const kept =\n      words.length > 0\n        ? groups\n            .map((g) =>\n              matchesSearch(words, [g.label], locale)\n                ? g\n                : { ...g, items: g.items.filter((i) => matchesSearch(words, [g.label, i.label], locale)) },\n            )\n            .filter((g) => g.items.length > 0)\n        : groups;\n    return kept.flatMap((g) =>\n      g.items.map(\n        (item): ComboOption<string> => ({\n          value: itemValue(g.key, item.key),\n          label: item.label,\n          icon: item.icon,\n          group: g.label,\n        }),\n      ),\n    );\n  }, [groups, query, locale]);\n  // Back to keys for `onSelect`, by the value the row carries.\n  const keysOf = useMemo(() => {\n    const map = new Map<string, [string, string]>();\n    for (const g of groups) for (const item of g.items) map.set(itemValue(g.key, item.key), [g.key, item.key]);\n    return map;\n  }, [groups]);\n  const chosen = selected ? itemValue(selected.group, selected.item) : null;\n\n  const listboxId = `${useId()}-listbox`;\n  // The trigger's NAME: a combobox takes none from its content. The caller's\n  // `aria-label`, as on every picker of the kit, else the face when it is text.\n  const name = ariaLabel ?? (typeof buttonLabel === \"string\" ? buttonLabel : undefined);\n\n  return (\n    // `rest` goes on the wrapper, but the accessible NAME does not: this div is a\n    // positioning box with no role, so a label parked on it would be announced by\n    // nothing. It belongs to the control — the same split every picker in this wave\n    // makes, and the reason `aria-label` is destructured out rather than left in\n    // `rest`. Spread FIRST so the attributes below, each of them a fix with an\n    // incident behind it, cannot be clobbered from outside.\n    <div {...rest} className={cn(\"relative\", className)}>\n      <button\n        ref={setTrigger}\n        type=\"button\"\n        // A closed choice that expands into the list below — the role every trigger\n        // picker in the kit wears. It said `aria-haspopup=\"dialog\"` over a panel that was\n        // no dialog (BUG-12).\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        aria-controls={listboxId}\n        aria-expanded={open}\n        aria-label={name}\n        onClick={() => setOpen((o) => !o)}\n        // Down/Up opens the list from the closed trigger, per the APG.\n        onKeyDown={(e) => {\n          if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\") {\n            e.preventDefault();\n            setOpen(true);\n          }\n        }}\n        className=\"flex w-full items-center justify-between gap-2 rounded-md border border-strong bg-surface px-2.5 py-1.5 text-sm text-primary hover:bg-hover\"\n      >\n        {/* The trigger's label and each item wrap from Large up (text size §10.17,\n            round 0.34 T1: the sweep read \"Choose a cat…\" at 360 px / Extra large). */}\n        <span className=\"truncate-until-large\">{buttonLabel}</span>\n        <ChevronDown className=\"size-4 shrink-0 text-placeholder\" />\n      </button>\n      <ComboboxPanel\n        core={{ ...core, results }}\n        listboxId={listboxId}\n        columns\n        // As wide as four columns want (56rem), within the glass, from the trigger's\n        // start — the panel it always was.\n        width={{ minRem: 56 }}\n        searchPlaceholder={filterPlaceholder ?? comboText.search}\n        sheetTitle={ariaLabel ?? buttonLabel}\n        isSelected={(v) => v === chosen}\n        onChoose={(o) => {\n          const keys = keysOf.get(o.value);\n          if (keys) onSelect(keys[0], keys[1]);\n          closeToTrigger();\n        }}\n        showCreate={false}\n        onCreate={() => {}}\n        createContent={null}\n      />\n    </div>\n  );\n}\n"],"mappings":";AA0IM,SAuBE,KAvBF;AA1IN,SAAS,aAAa,OAAO,eAAe;AAE5C,SAAS,mBAAmB;AAC5B,SAAS,UAAU;AACnB,SAAS,eAAe,mBAAmB;AAC3C,SAAS,eAAe,uBAAyC;AACjE,SAAS,iBAAiB;AAC1B,SAAS,yBAAyB,cAAc,oBAAoB;AAqCpE,MAAM,YAAY,CAAC,OAAe,SAAiB,GAAG,KAAK,KAAS,IAAI;AAejE,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAuB;AAMrB,QAAM,OAAO,gBAAwB,EAAE,QAAQ,OAAO,YAAY,KAAK,CAAC;AACxE,QAAM,EAAE,MAAM,SAAS,YAAY,gBAAgB,MAAM,IAAI;AAG7D,QAAM,aAAa;AAAA,IACjB,CAAC,OAAiC;AAChC,iBAAW,UAAU;AACrB,gBAAU,KAAK,EAAE;AAAA,IACnB;AAAA,IACA,CAAC,KAAK,UAAU;AAAA,EAClB;AACA,QAAM,YAAY,aAAa,YAAY,uBAAuB;AAIlE,QAAM,SAAS,aAAa;AAC5B,QAAM,UAAU,QAAQ,MAAM;AAI5B,UAAM,QAAQ,YAAY,OAAO,MAAM;AACvC,UAAM,OACJ,MAAM,SAAS,IACX,OACG;AAAA,MAAI,CAAC,MACJ,cAAc,OAAO,CAAC,EAAE,KAAK,GAAG,MAAM,IAClC,IACA,EAAE,GAAG,GAAG,OAAO,EAAE,MAAM,OAAO,CAAC,MAAM,cAAc,OAAO,CAAC,EAAE,OAAO,EAAE,KAAK,GAAG,MAAM,CAAC,EAAE;AAAA,IAC7F,EACC,OAAO,CAAC,MAAM,EAAE,MAAM,SAAS,CAAC,IACnC;AACN,WAAO,KAAK;AAAA,MAAQ,CAAC,MACnB,EAAE,MAAM;AAAA,QACN,CAAC,UAA+B;AAAA,UAC9B,OAAO,UAAU,EAAE,KAAK,KAAK,GAAG;AAAA,UAChC,OAAO,KAAK;AAAA,UACZ,MAAM,KAAK;AAAA,UACX,OAAO,EAAE;AAAA,QACX;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,QAAQ,OAAO,MAAM,CAAC;AAE1B,QAAM,SAAS,QAAQ,MAAM;AAC3B,UAAM,MAAM,oBAAI,IAA8B;AAC9C,eAAW,KAAK,OAAQ,YAAW,QAAQ,EAAE,MAAO,KAAI,IAAI,UAAU,EAAE,KAAK,KAAK,GAAG,GAAG,CAAC,EAAE,KAAK,KAAK,GAAG,CAAC;AACzG,WAAO;AAAA,EACT,GAAG,CAAC,MAAM,CAAC;AACX,QAAM,SAAS,WAAW,UAAU,SAAS,OAAO,SAAS,IAAI,IAAI;AAErE,QAAM,YAAY,GAAG,MAAM,CAAC;AAG5B,QAAM,OAAO,cAAc,OAAO,gBAAgB,WAAW,cAAc;AAE3E;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOE,qBAAC,SAAK,GAAG,MAAM,WAAW,GAAG,YAAY,SAAS,GAChD;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,MAAK;AAAA,UAIL,MAAK;AAAA,UACL,iBAAc;AAAA,UACd,iBAAe;AAAA,UACf,iBAAe;AAAA,UACf,cAAY;AAAA,UACZ,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,UAEhC,WAAW,CAAC,MAAM;AAChB,gBAAI,EAAE,QAAQ,eAAe,EAAE,QAAQ,WAAW;AAChD,gBAAE,eAAe;AACjB,sBAAQ,IAAI;AAAA,YACd;AAAA,UACF;AAAA,UACA,WAAU;AAAA,UAIV;AAAA,gCAAC,UAAK,WAAU,wBAAwB,uBAAY;AAAA,YACpD,oBAAC,eAAY,WAAU,oCAAmC;AAAA;AAAA;AAAA,MAC5D;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,EAAE,GAAG,MAAM,QAAQ;AAAA,UACzB;AAAA,UACA,SAAO;AAAA,UAGP,OAAO,EAAE,QAAQ,GAAG;AAAA,UACpB,mBAAmB,qBAAqB,UAAU;AAAA,UAClD,YAAY,aAAa;AAAA,UACzB,YAAY,CAAC,MAAM,MAAM;AAAA,UACzB,UAAU,CAAC,MAAM;AACf,kBAAM,OAAO,OAAO,IAAI,EAAE,KAAK;AAC/B,gBAAI,KAAM,UAAS,KAAK,CAAC,GAAG,KAAK,CAAC,CAAC;AACnC,2BAAe;AAAA,UACjB;AAAA,UACA,YAAY;AAAA,UACZ,UAAU,MAAM;AAAA,UAAC;AAAA,UACjB,eAAe;AAAA;AAAA,MACjB;AAAA,OACF;AAAA;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/grouped-picker.tsx"],"sourcesContent":["import { useCallback, useId, useMemo } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode, Ref } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { matchesSearch, searchWords } from \"../lib/text-match\";\nimport { ComboboxPanel, useComboboxCore, type ComboOption } from \"./combobox-core\";\nimport { assignRef } from \"./field-parts\";\nimport { DEFAULT_COMBOBOX_LABELS, useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\n\nexport interface PickerGroup {\n  key: string;\n  label: string;\n  /** `icon` is an optional leading glyph, drawn before the label — the same slot\n   *  `ComboOption` has always had, so the two pickers can present one option set\n   *  the same way. Omitted, a row is exactly what it was: label only, with no\n   *  reserved space, so a list where nothing has an icon does not indent. */\n  items: { key: string; label: string; icon?: ReactNode }[];\n}\n\n/**\n * `onSelect` is omitted from the div's own attributes because this component's\n * means \"an item was chosen\", not the DOM's \"text was selected inside me\" — two\n * different signatures under one name, and the kit's meaning is the one three apps\n * are written against.\n */\nexport interface GroupedPickerProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onSelect\"> {\n  groups: PickerGroup[];\n  /** Face of the closed picker button. A string also names the trigger when no\n   *  `aria-label` does. */\n  buttonLabel: ReactNode;\n  /** Keys of the current selection, if any. */\n  selected: { group: string; item: string } | null;\n  onSelect: (groupKey: string, itemKey: string) => void;\n  /** The filter box's prompt, and its accessible name. Default: `combobox.search` from\n   *  the {@link UiKitProvider}, else \"Search\". */\n  filterPlaceholder?: string;\n  /** The TRIGGER — the focusable `<button>` — as on every picker of the kit (MultiSelect,\n   *  CountrySelect, CurrencySelect), not the wrapper the rest of the props go on (0.34,\n   *  API-2, refactor audit 2026-10). */\n  ref?: Ref<HTMLButtonElement>;\n}\n\n/** An item's value in the list: the group's key and the item's, which together are\n *  unique where an item key alone is not (two groups may each have an \"Other\"). */\nconst itemValue = (group: string, item: string) => `${group}\\u0000${item}`;\n\n/** Panel picker for large grouped option sets: instead of one long flat\n * dropdown, the groups sit side by side as columns with their items listed\n * beneath (feedback #267/#276), narrowed by a filter box at the top (feedback\n * #267 rework). A query that matches a group's name keeps the whole group;\n * otherwise groups are reduced to their matching items.\n *\n * On the picker family's foundation since round 0.34 (Wave 2, DUP-4 + BUG-12):\n * `useComboboxCore` + `ComboboxPanel` in its `columns` layout. Its trigger promised a\n * dialog that was no dialog, and the choice showed by colour alone; it is a combobox over\n * a listbox now — one `role=\"group\"` per column, named by its heading, the chosen item\n * `aria-selected` and checked — with the arrow keys, Enter, a named filter box, the live\n * result count, portal anchoring (dev#548) and, on a phone, the full-screen sheet\n * (live #200) in one column. */\nexport function GroupedPicker({\n  groups,\n  buttonLabel,\n  selected,\n  onSelect,\n  \"aria-label\": ariaLabel,\n  filterPlaceholder,\n  className,\n  ref,\n  ...rest\n}: GroupedPickerProps) {\n  // `filter: false`: the filter below keeps a whole group when its name matches, so the\n  // panel is handed the rows, as CountrySelect's are. Escape is the core's layer on the\n  // kit's stack — this kept an Escape handler of its own on its panel (round 0.34 BUG-1),\n  // and the stack is the one answer to it now (DUP-1). Back closes the list, as it did on\n  // `useDropdown`.\n  const core = useComboboxCore<string>({ filter: false, backCloses: true });\n  const { open, setOpen, triggerRef, closeToTrigger, query } = 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, as on MultiSelect.\n  const setTrigger = useCallback(\n    (el: HTMLButtonElement | null) => {\n      triggerRef.current = el;\n      assignRef(ref, el);\n    },\n    [ref, triggerRef],\n  );\n  const comboText = useKitLabels(\"combobox\", DEFAULT_COMBOBOX_LABELS);\n\n  // Folded as every kit list folds (DUP-5): the locale's case (the Turkish \"İ\" that\n  // plain `toLowerCase` gets wrong), and now the accents too — \"zurich\" finds Zürich.\n  const locale = useKitLocale();\n  const results = useMemo(() => {\n    // Every word of the query (0.51.4): all in the group's name keeps the whole group;\n    // otherwise an item stays when each word is in its label or its group's name, so\n    // \"migros 8004\" finds Migros' 8004 shop.\n    const words = searchWords(query, locale);\n    const kept =\n      words.length > 0\n        ? groups\n            .map((g) =>\n              matchesSearch(words, [g.label], locale)\n                ? g\n                : { ...g, items: g.items.filter((i) => matchesSearch(words, [g.label, i.label], locale)) },\n            )\n            .filter((g) => g.items.length > 0)\n        : groups;\n    return kept.flatMap((g) =>\n      g.items.map((item): ComboOption<string> => ({\n        value: itemValue(g.key, item.key),\n        label: item.label,\n        icon: item.icon,\n        group: g.label,\n      })),\n    );\n  }, [groups, query, locale]);\n  // Back to keys for `onSelect`, by the value the row carries.\n  const keysOf = useMemo(() => {\n    const map = new Map<string, [string, string]>();\n    for (const g of groups) for (const item of g.items) map.set(itemValue(g.key, item.key), [g.key, item.key]);\n    return map;\n  }, [groups]);\n  const chosen = selected ? itemValue(selected.group, selected.item) : null;\n\n  const listboxId = `${useId()}-listbox`;\n  // The trigger's NAME: a combobox takes none from its content. The caller's\n  // `aria-label`, as on every picker of the kit, else the face when it is text.\n  const name = ariaLabel ?? (typeof buttonLabel === \"string\" ? buttonLabel : undefined);\n\n  return (\n    // `rest` goes on the wrapper, but the accessible NAME does not: this div is a\n    // positioning box with no role, so a label parked on it would be announced by\n    // nothing. It belongs to the control — the same split every picker in this wave\n    // makes, and the reason `aria-label` is destructured out rather than left in\n    // `rest`. Spread FIRST so the attributes below, each of them a fix with an\n    // incident behind it, cannot be clobbered from outside.\n    <div {...rest} className={cn(\"relative\", className)}>\n      <button\n        ref={setTrigger}\n        type=\"button\"\n        // A closed choice that expands into the list below — the role every trigger\n        // picker in the kit wears. It said `aria-haspopup=\"dialog\"` over a panel that was\n        // no dialog (BUG-12).\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        aria-controls={listboxId}\n        aria-expanded={open}\n        aria-label={name}\n        onClick={() => setOpen((o) => !o)}\n        // Down/Up opens the list from the closed trigger, per the APG.\n        onKeyDown={(e) => {\n          if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\") {\n            e.preventDefault();\n            setOpen(true);\n          }\n        }}\n        className=\"flex w-full items-center justify-between gap-2 rounded-md border border-strong bg-surface px-2.5 py-1.5 text-sm text-primary hover:bg-hover\"\n      >\n        {/* The trigger's label and each item wrap from Large up (text size §10.17,\n            round 0.34 T1: the sweep read \"Choose a cat…\" at 360 px / Extra large). */}\n        <span className=\"truncate-until-large\">{buttonLabel}</span>\n        <ChevronDown className=\"size-4 shrink-0 text-placeholder\" />\n      </button>\n      <ComboboxPanel\n        core={{ ...core, results }}\n        listboxId={listboxId}\n        columns\n        // As wide as four columns want (56rem), within the glass, from the trigger's\n        // start — the panel it always was.\n        width={{ minRem: 56 }}\n        searchPlaceholder={filterPlaceholder ?? comboText.search}\n        sheetTitle={ariaLabel ?? buttonLabel}\n        isSelected={(v) => v === chosen}\n        onChoose={(o) => {\n          const keys = keysOf.get(o.value);\n          if (keys) onSelect(keys[0], keys[1]);\n          closeToTrigger();\n        }}\n        showCreate={false}\n        onCreate={() => {}}\n        createContent={null}\n      />\n    </div>\n  );\n}\n"],"mappings":";AAwIM,SAuBE,KAvBF;AAxIN,SAAS,aAAa,OAAO,eAAe;AAE5C,SAAS,mBAAmB;AAC5B,SAAS,UAAU;AACnB,SAAS,eAAe,mBAAmB;AAC3C,SAAS,eAAe,uBAAyC;AACjE,SAAS,iBAAiB;AAC1B,SAAS,yBAAyB,cAAc,oBAAoB;AAqCpE,MAAM,YAAY,CAAC,OAAe,SAAiB,GAAG,KAAK,KAAS,IAAI;AAejE,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAuB;AAMrB,QAAM,OAAO,gBAAwB,EAAE,QAAQ,OAAO,YAAY,KAAK,CAAC;AACxE,QAAM,EAAE,MAAM,SAAS,YAAY,gBAAgB,MAAM,IAAI;AAG7D,QAAM,aAAa;AAAA,IACjB,CAAC,OAAiC;AAChC,iBAAW,UAAU;AACrB,gBAAU,KAAK,EAAE;AAAA,IACnB;AAAA,IACA,CAAC,KAAK,UAAU;AAAA,EAClB;AACA,QAAM,YAAY,aAAa,YAAY,uBAAuB;AAIlE,QAAM,SAAS,aAAa;AAC5B,QAAM,UAAU,QAAQ,MAAM;AAI5B,UAAM,QAAQ,YAAY,OAAO,MAAM;AACvC,UAAM,OACJ,MAAM,SAAS,IACX,OACG;AAAA,MAAI,CAAC,MACJ,cAAc,OAAO,CAAC,EAAE,KAAK,GAAG,MAAM,IAClC,IACA,EAAE,GAAG,GAAG,OAAO,EAAE,MAAM,OAAO,CAAC,MAAM,cAAc,OAAO,CAAC,EAAE,OAAO,EAAE,KAAK,GAAG,MAAM,CAAC,EAAE;AAAA,IAC7F,EACC,OAAO,CAAC,MAAM,EAAE,MAAM,SAAS,CAAC,IACnC;AACN,WAAO,KAAK;AAAA,MAAQ,CAAC,MACnB,EAAE,MAAM,IAAI,CAAC,UAA+B;AAAA,QAC1C,OAAO,UAAU,EAAE,KAAK,KAAK,GAAG;AAAA,QAChC,OAAO,KAAK;AAAA,QACZ,MAAM,KAAK;AAAA,QACX,OAAO,EAAE;AAAA,MACX,EAAE;AAAA,IACJ;AAAA,EACF,GAAG,CAAC,QAAQ,OAAO,MAAM,CAAC;AAE1B,QAAM,SAAS,QAAQ,MAAM;AAC3B,UAAM,MAAM,oBAAI,IAA8B;AAC9C,eAAW,KAAK,OAAQ,YAAW,QAAQ,EAAE,MAAO,KAAI,IAAI,UAAU,EAAE,KAAK,KAAK,GAAG,GAAG,CAAC,EAAE,KAAK,KAAK,GAAG,CAAC;AACzG,WAAO;AAAA,EACT,GAAG,CAAC,MAAM,CAAC;AACX,QAAM,SAAS,WAAW,UAAU,SAAS,OAAO,SAAS,IAAI,IAAI;AAErE,QAAM,YAAY,GAAG,MAAM,CAAC;AAG5B,QAAM,OAAO,cAAc,OAAO,gBAAgB,WAAW,cAAc;AAE3E;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOE,qBAAC,SAAK,GAAG,MAAM,WAAW,GAAG,YAAY,SAAS,GAChD;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,MAAK;AAAA,UAIL,MAAK;AAAA,UACL,iBAAc;AAAA,UACd,iBAAe;AAAA,UACf,iBAAe;AAAA,UACf,cAAY;AAAA,UACZ,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,UAEhC,WAAW,CAAC,MAAM;AAChB,gBAAI,EAAE,QAAQ,eAAe,EAAE,QAAQ,WAAW;AAChD,gBAAE,eAAe;AACjB,sBAAQ,IAAI;AAAA,YACd;AAAA,UACF;AAAA,UACA,WAAU;AAAA,UAIV;AAAA,gCAAC,UAAK,WAAU,wBAAwB,uBAAY;AAAA,YACpD,oBAAC,eAAY,WAAU,oCAAmC;AAAA;AAAA;AAAA,MAC5D;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,EAAE,GAAG,MAAM,QAAQ;AAAA,UACzB;AAAA,UACA,SAAO;AAAA,UAGP,OAAO,EAAE,QAAQ,GAAG;AAAA,UACpB,mBAAmB,qBAAqB,UAAU;AAAA,UAClD,YAAY,aAAa;AAAA,UACzB,YAAY,CAAC,MAAM,MAAM;AAAA,UACzB,UAAU,CAAC,MAAM;AACf,kBAAM,OAAO,OAAO,IAAI,EAAE,KAAK;AAC/B,gBAAI,KAAM,UAAS,KAAK,CAAC,GAAG,KAAK,CAAC,CAAC;AACnC,2BAAe;AAAA,UACjB;AAAA,UACA,YAAY;AAAA,UACZ,UAAU,MAAM;AAAA,UAAC;AAAA,UACjB,eAAe;AAAA;AAAA,MACjB;AAAA,OACF;AAAA;AAEJ;","names":[]}

package/dist/components/hover-menu.js

@@ -190,10 +190,7 @@ function HoverMenu({
             "div",
             {
               ref: panelRef,
-              className: cn(
-                "absolute top-full z-40 pt-2",
-                ALIGN_CLASS[align]
-              ),
+              className: cn("absolute top-full z-40 pt-2", ALIGN_CLASS[align]),
               style: shiftX ? { transform: `translateX(${shiftX}px)` } : void 0,
               children: /* @__PURE__ */ jsx(
                 "div",

package/dist/components/hover-menu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/hover-menu.tsx"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent as ReactKeyboardEvent, ReactNode, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { mergeRefs } from \"./field-parts\";\nimport { runOwnKeyDown, takeEscape, useDismissLayer, useOutsideClick } from \"../hooks/use-dismiss\";\nimport { anchoredInline } from \"../hooks/use-anchored-panel\";\nimport { dirOf } from \"../lib/direction\";\n\n/**\n * Exported and `<div>`-shaped: the top bar composes several of these side by side, and\n * telling them apart — in a test, in a guided tour, in an accessibility tree — needs an\n * attribute the kit does not know about. A closed prop list dropped every one of them.\n *\n * `children` is omitted from the div attributes because here it is a render prop taking\n * the panel's `close`, not a `ReactNode`.\n */\nexport interface HoverMenuProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  /** The trigger. `toggle` for a button's click; `close` for a trigger that is a LINK —\n   *  following it should shut a panel hover opened (TopBarActionMenu `href`). */\n  trigger: (state: { open: boolean; toggle: () => void; close: () => void }) => ReactNode;\n  children: (close: () => void) => ReactNode;\n  /**\n   * Which edge of the trigger the panel lines up with, by the reading direction: `end`\n   * is the right edge in LTR and the left in RTL. Default `end` — the same right-aligned\n   * panel as before in LTR, mirrored in RTL. The physical `left` / `right` went in 0.35\n   * (round 0.35 R1, refactor audit 2026-10, API-6e): `right` is `end` in a left-to-right\n   * page, `left` is `start`.\n   */\n  align?: \"start\" | \"end\";\n  panelClassName?: string;\n  /** Extra classes for the WRAPPER (the panel has {@link panelClassName}). */\n  className?: string;\n  /** The WRAPPER, where the rest of the props go (0.34, API-2, refactor audit 2026-10) —\n   *  merged with its own ref, which the outside click and the hover are measured on. */\n  ref?: Ref<HTMLDivElement>;\n}\n\n// Hovering waits briefly before opening so sweeping the cursor across a row of\n// triggers doesn't flash menus; closing waits so the cursor can travel from\n// trigger to panel. Click/keyboard toggling is instant (no \"opening\" phase).\nconst OPEN_DELAY_MS = 120;\nconst CLOSE_DELAY_MS = 120;\n\ntype Phase = \"closed\" | \"opening\" | \"open\" | \"closing\";\n\nconst ALIGN_CLASS = { start: \"start-0\", end: \"end-0\" } as const;\n\n/** Explicit menu-item roles a caller may already have written. */\nconst ITEM_ROLES = '[role=\"menuitem\"],[role=\"menuitemcheckbox\"],[role=\"menuitemradio\"]';\n/** What the panel promotes to `menuitem` when the caller wrote plain controls. */\nconst PLAIN_ITEMS = \"button:not([role]),a[href]:not([role])\";\n/** The trigger: the first focusable in the wrapper that is not inside the panel. */\nconst FOCUSABLE = 'a[href],button:not([disabled]),input:not([disabled]),[tabindex]:not([tabindex=\"-1\"])';\n\n/**\n * Give the caller's markup menu semantics.\n *\n * `children` is arbitrary — every caller in the kit renders a `<ul>` of `<li>`s holding\n * `<button>`s and router `<Link>`s — so the panel was a `role=\"menu\"` whose children\n * were a list, list items and plain buttons: no `menuitem` anywhere, which is a menu\n * with nothing in it as far as a screen reader is concerned. Rather than make every\n * caller rewrite its rows, the panel upgrades them after render: controls become\n * `menuitem`s out of the Tab order (the arrow keys move between them), and the list\n * markup in between becomes `role=\"none\"` so the menu owns its items directly. An\n * element that already carries a role is the caller's decision and is left alone.\n */\nfunction applyMenuSemantics(menu: HTMLElement): HTMLElement[] {\n  for (const el of menu.querySelectorAll<HTMLElement>(PLAIN_ITEMS)) el.setAttribute(\"role\", \"menuitem\");\n  const items = Array.from(menu.querySelectorAll<HTMLElement>(ITEM_ROLES));\n  for (const item of items) {\n    item.setAttribute(\"tabindex\", \"-1\");\n    for (let el = item.parentElement; el && el !== menu; el = el.parentElement) {\n      if (!el.hasAttribute(\"role\")) el.setAttribute(\"role\", \"none\");\n    }\n  }\n  for (const el of menu.querySelectorAll<HTMLElement>(\"ul:not([role]),ol:not([role]),li:not([role])\")) {\n    el.setAttribute(\"role\", \"none\");\n  }\n  return items.filter((el) => !el.hasAttribute(\"disabled\") && el.getAttribute(\"aria-disabled\") !== \"true\");\n}\n\n// Only one hover menu may show its panel at a time across the app — opening\n// one closes whichever was open, so adjacent top-bar menus can't overlap\n// (feedback #251). Module-level is fine: there is one cursor per document.\nlet activeClose: (() => void) | null = null;\n\nexport function HoverMenu({\n  trigger,\n  children,\n  align = \"end\",\n  panelClassName,\n  className,\n  \"aria-label\": ariaLabel,\n  ref,\n  ...rest\n}: HoverMenuProps) {\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const setWrapper = useMemo(() => mergeRefs(wrapperRef, ref), [ref]);\n  const [phase, setPhase] = useState<Phase>(\"closed\");\n  const open = phase === \"open\" || phase === \"closing\";\n\n  // Whether the panel is open *because hover opened it*, vs. an explicit\n  // click/keyboard toggle. A real mouse click on the trigger is always\n  // preceded by a real mouseenter — the cursor has to land on the button\n  // before it can be clicked — so once hover has opened the panel, the click\n  // that inevitably follows is the same physical gesture, not a request to\n  // close what was just opened (feedback #19). Toggling closed on click stays\n  // for keyboard/touch activation, which reaches \"open\" without going through\n  // the hover path.\n  //\n  // State rather than a ref: `close` is handed to the caller's render prop, and a\n  // function that writes a ref must not be reachable from render.\n  const [openedByHover, setOpenedByHover] = useState(false);\n\n  const close = useCallback(() => {\n    setOpenedByHover(false);\n    setPhase(\"closed\");\n  }, []);\n\n  const toggle = useCallback(() => {\n    if (open) {\n      if (!openedByHover) setPhase(\"closed\");\n      return;\n    }\n    setOpenedByHover(false);\n    setPhase(\"open\");\n  }, [open, openedByHover]);\n\n  const handleMouseEnter = useCallback(\n    () => setPhase((p) => (p === \"closing\" ? \"open\" : p === \"closed\" ? \"opening\" : p)),\n    [],\n  );\n\n  const handleMouseLeave = useCallback(\n    () => setPhase((p) => (p === \"opening\" ? \"closed\" : p === \"open\" ? \"closing\" : p)),\n    [],\n  );\n\n  // Drive the delayed transitions; unmount/phase changes cancel the timer.\n  useEffect(() => {\n    if (phase === \"opening\") {\n      const id = setTimeout(() => {\n        setOpenedByHover(true);\n        setPhase(\"open\");\n      }, OPEN_DELAY_MS);\n      return () => clearTimeout(id);\n    }\n    if (phase === \"closing\") {\n      const id = setTimeout(() => setPhase(\"closed\"), CLOSE_DELAY_MS);\n      return () => clearTimeout(id);\n    }\n  }, [phase]);\n\n  // Claim the \"active menu\" slot while our panel is visible, closing the\n  // previous holder. Cleanup releases the slot only if we still hold it\n  // (a successor that displaced us has already overwritten it).\n  useEffect(() => {\n    if (!open) return;\n    if (activeClose !== close) activeClose?.();\n    activeClose = close;\n    return () => {\n      if (activeClose === close) activeClose = null;\n    };\n  }, [open, close]);\n\n  // A press in a panel opened from a row (a popover, its lists) is inside (dev#623).\n  const markInside = useOutsideClick(wrapperRef, close, open);\n\n  const menuRef = useRef<HTMLDivElement>(null);\n  /** Set by a keyboard press on the trigger, so the open that follows moves focus into\n   *  the menu. A hover or a mouse click opens it without taking focus off the page. */\n  const focusOnOpenRef = useRef<\"first\" | \"last\" | null>(null);\n\n  const triggerEl = () =>\n    Array.from(wrapperRef.current?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? []).find(\n      (el) => !menuRef.current?.contains(el),\n    ) ?? null;\n  const items = () => (menuRef.current ? applyMenuSemantics(menuRef.current) : []);\n\n  // Escape closes, from anywhere — it did nothing at all before — as a layer on the kit's\n  // Escape stack, so inside a dialog it closes the menu and not the dialog (Wave 2,\n  // DUP-1). Focus goes back to the trigger only when it was inside the menu: a panel\n  // opened by hover while the user is typing elsewhere must not yank the caret over\n  // here on the way out.\n  const layer = useDismissLayer(open, () => {\n    const hadFocus = wrapperRef.current?.contains(document.activeElement) ?? false;\n    close();\n    if (hadFocus) triggerEl()?.focus();\n  });\n\n  // Upgrade the markup every render while open (the caller's rows can change), then\n  // honour a pending keyboard open.\n  useLayoutEffect(() => {\n    if (!open) return;\n    const list = items();\n    const want = focusOnOpenRef.current;\n    focusOnOpenRef.current = null;\n    if (want) (want === \"last\" ? list[list.length - 1] : list[0])?.focus();\n  });\n\n  // Trigger state for assistive technology, on whatever element the caller rendered.\n  // Only where the caller has not said something of its own.\n  useLayoutEffect(() => {\n    const el = triggerEl();\n    if (!el) return;\n    if (!el.hasAttribute(\"aria-haspopup\")) el.setAttribute(\"aria-haspopup\", \"menu\");\n    if (el.getAttribute(\"aria-haspopup\") === \"menu\") el.setAttribute(\"aria-expanded\", String(open));\n  });\n\n  /** ↑/↓ roving focus with wrap, Home/End, Tab leaves (and closes); on the trigger,\n   *  Enter/Space/↓ open onto the first item and ↑ onto the last. */\n  const onKeyDown = (e: ReactKeyboardEvent<HTMLDivElement>) => {\n    const target = e.target as HTMLElement;\n    const inMenu = menuRef.current?.contains(target) ?? false;\n    if (!inMenu) {\n      if (target !== triggerEl()) return;\n      if (e.key === \"Enter\" || e.key === \" \") {\n        // The trigger's own click handler does the toggling; this only records that\n        // the press came from a keyboard. Not for a link trigger: Enter follows it, and\n        // a mark left here would pull focus into the panel the next time hover opens it.\n        if (!open && !target.matches(\"a[href]\")) focusOnOpenRef.current = \"first\";\n      } else if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\") {\n        e.preventDefault();\n        const edge = e.key === \"ArrowDown\" ? \"first\" : \"last\";\n        if (open) {\n          const list = items();\n          (edge === \"last\" ? list[list.length - 1] : list[0])?.focus();\n        } else {\n          focusOnOpenRef.current = edge;\n          setOpenedByHover(false);\n          setPhase(\"open\");\n        }\n      }\n      return;\n    }\n    if (e.key === \"Tab\") {\n      close();\n      return;\n    }\n    const list = items();\n    if (list.length === 0) return;\n    const at = list.indexOf(document.activeElement as HTMLElement);\n    let next: number | null = null;\n    if (e.key === \"ArrowDown\") next = at < 0 ? 0 : (at + 1) % list.length;\n    else if (e.key === \"ArrowUp\") next = at < 0 ? list.length - 1 : (at - 1 + list.length) % list.length;\n    else if (e.key === \"Home\") next = 0;\n    else if (e.key === \"End\") next = list.length - 1;\n    if (next === null) return;\n    e.preventDefault();\n    list[next].focus();\n  };\n\n  // Keep the panel inside the viewport (feedback #85): a wide panel anchored to a\n  // trigger near a screen edge would otherwise spill off it (on mobile the guided-\n  // tours menu ran off the left). Once open, measure and translate it horizontally\n  // just enough to sit within an 8px margin of the GLASS — `anchoredInline` against\n  // the panel's own natural box, as every anchored panel clamps (Wave 2, DUP-7; it\n  // measured against `innerWidth`, which on a phone is the grown layout viewport).\n  // Recomputed on each open; `shiftX` is subtracted first so the measurement is\n  // against the natural position.\n  const panelRef = useRef<HTMLDivElement>(null);\n  const [shiftX, setShiftX] = useState(0);\n  // Back to 0 on close, adjusted while rendering against the previous `open`.\n  const [wasOpen, setWasOpen] = useState(open);\n  if (open !== wasOpen) {\n    setWasOpen(open);\n    if (!open) setShiftX(0);\n  }\n  useLayoutEffect(() => {\n    if (!open) return;\n    const el = panelRef.current;\n    if (!el) return;\n    const rect = el.getBoundingClientRect();\n    if (rect.width === 0) return; // unmeasured (e.g. jsdom) — leave as-is\n    const natural = { left: rect.left - shiftX, right: rect.right - shiftX };\n    const { left } = anchoredInline(natural, rect.width, { dir: dirOf(el), align: \"left\" });\n    setShiftX(left - natural.left);\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- recompute only on open/close\n  }, [open]);\n\n  return (\n    /* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- never focused\n       itself: the mouse handlers are the hover-to-open convenience, and `onKeyDown`\n       catches keys bubbling from the caller's trigger button and the menuitems, which\n       are the keyboard path (Enter/Space/arrows open, arrows move, Escape closes). */\n    <div\n      // `...rest` first: the hover handlers below are the whole component, and a caller\n      // passing one of its own must not silently replace them.\n      {...rest}\n      ref={setWrapper}\n      className={cn(\"relative\", className)}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onPointerDownCapture={(e) => {\n        rest.onPointerDownCapture?.(e);\n        markInside(e);\n      }}\n      onKeyDown={(e) => {\n        // The caller's handler sees Escape only while this menu is the layer on top: a\n        // tooltip on one of its rows takes that press first (round 0.35 R2, the rule\n        // the dialogs got first). Every other key, and a closed menu's, as before.\n        runOwnKeyDown(e, rest.onKeyDown, layer);\n        // Focus on the trigger or in the menu: the key stops here, so a panel around\n        // the menu does not close with it.\n        if (open) takeEscape(e);\n        onKeyDown(e);\n      }}\n    >\n      {trigger({ open, toggle, close })}\n      {open && (\n        <div\n          ref={panelRef}\n          className={cn(\n            \"absolute top-full z-40 pt-2\",\n            ALIGN_CLASS[align],\n          )}\n          style={shiftX ? { transform: `translateX(${shiftX}px)` } : undefined}\n        >\n          <div\n            ref={menuRef}\n            role=\"menu\"\n            // On the element with the role. It used to sit on the role-less wrapper,\n            // where no screen reader reads a name.\n            aria-label={ariaLabel}\n            className={cn(\n              \"min-w-44 max-w-[calc(100vw-1rem)] rounded-md border border-subtle bg-surface shadow-lg\",\n              panelClassName,\n            )}\n          >\n            {children(close)}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":["list"]}
+{"version":3,"sources":["../../src/components/hover-menu.tsx"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent as ReactKeyboardEvent, ReactNode, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { mergeRefs } from \"./field-parts\";\nimport { runOwnKeyDown, takeEscape, useDismissLayer, useOutsideClick } from \"../hooks/use-dismiss\";\nimport { anchoredInline } from \"../hooks/use-anchored-panel\";\nimport { dirOf } from \"../lib/direction\";\n\n/**\n * Exported and `<div>`-shaped: the top bar composes several of these side by side, and\n * telling them apart — in a test, in a guided tour, in an accessibility tree — needs an\n * attribute the kit does not know about. A closed prop list dropped every one of them.\n *\n * `children` is omitted from the div attributes because here it is a render prop taking\n * the panel's `close`, not a `ReactNode`.\n */\nexport interface HoverMenuProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  /** The trigger. `toggle` for a button's click; `close` for a trigger that is a LINK —\n   *  following it should shut a panel hover opened (TopBarActionMenu `href`). */\n  trigger: (state: { open: boolean; toggle: () => void; close: () => void }) => ReactNode;\n  children: (close: () => void) => ReactNode;\n  /**\n   * Which edge of the trigger the panel lines up with, by the reading direction: `end`\n   * is the right edge in LTR and the left in RTL. Default `end` — the same right-aligned\n   * panel as before in LTR, mirrored in RTL. The physical `left` / `right` went in 0.35\n   * (round 0.35 R1, refactor audit 2026-10, API-6e): `right` is `end` in a left-to-right\n   * page, `left` is `start`.\n   */\n  align?: \"start\" | \"end\";\n  panelClassName?: string;\n  /** Extra classes for the WRAPPER (the panel has {@link panelClassName}). */\n  className?: string;\n  /** The WRAPPER, where the rest of the props go (0.34, API-2, refactor audit 2026-10) —\n   *  merged with its own ref, which the outside click and the hover are measured on. */\n  ref?: Ref<HTMLDivElement>;\n}\n\n// Hovering waits briefly before opening so sweeping the cursor across a row of\n// triggers doesn't flash menus; closing waits so the cursor can travel from\n// trigger to panel. Click/keyboard toggling is instant (no \"opening\" phase).\nconst OPEN_DELAY_MS = 120;\nconst CLOSE_DELAY_MS = 120;\n\ntype Phase = \"closed\" | \"opening\" | \"open\" | \"closing\";\n\nconst ALIGN_CLASS = { start: \"start-0\", end: \"end-0\" } as const;\n\n/** Explicit menu-item roles a caller may already have written. */\nconst ITEM_ROLES = '[role=\"menuitem\"],[role=\"menuitemcheckbox\"],[role=\"menuitemradio\"]';\n/** What the panel promotes to `menuitem` when the caller wrote plain controls. */\nconst PLAIN_ITEMS = \"button:not([role]),a[href]:not([role])\";\n/** The trigger: the first focusable in the wrapper that is not inside the panel. */\nconst FOCUSABLE = 'a[href],button:not([disabled]),input:not([disabled]),[tabindex]:not([tabindex=\"-1\"])';\n\n/**\n * Give the caller's markup menu semantics.\n *\n * `children` is arbitrary — every caller in the kit renders a `<ul>` of `<li>`s holding\n * `<button>`s and router `<Link>`s — so the panel was a `role=\"menu\"` whose children\n * were a list, list items and plain buttons: no `menuitem` anywhere, which is a menu\n * with nothing in it as far as a screen reader is concerned. Rather than make every\n * caller rewrite its rows, the panel upgrades them after render: controls become\n * `menuitem`s out of the Tab order (the arrow keys move between them), and the list\n * markup in between becomes `role=\"none\"` so the menu owns its items directly. An\n * element that already carries a role is the caller's decision and is left alone.\n */\nfunction applyMenuSemantics(menu: HTMLElement): HTMLElement[] {\n  for (const el of menu.querySelectorAll<HTMLElement>(PLAIN_ITEMS)) el.setAttribute(\"role\", \"menuitem\");\n  const items = Array.from(menu.querySelectorAll<HTMLElement>(ITEM_ROLES));\n  for (const item of items) {\n    item.setAttribute(\"tabindex\", \"-1\");\n    for (let el = item.parentElement; el && el !== menu; el = el.parentElement) {\n      if (!el.hasAttribute(\"role\")) el.setAttribute(\"role\", \"none\");\n    }\n  }\n  for (const el of menu.querySelectorAll<HTMLElement>(\"ul:not([role]),ol:not([role]),li:not([role])\")) {\n    el.setAttribute(\"role\", \"none\");\n  }\n  return items.filter((el) => !el.hasAttribute(\"disabled\") && el.getAttribute(\"aria-disabled\") !== \"true\");\n}\n\n// Only one hover menu may show its panel at a time across the app — opening\n// one closes whichever was open, so adjacent top-bar menus can't overlap\n// (feedback #251). Module-level is fine: there is one cursor per document.\nlet activeClose: (() => void) | null = null;\n\nexport function HoverMenu({\n  trigger,\n  children,\n  align = \"end\",\n  panelClassName,\n  className,\n  \"aria-label\": ariaLabel,\n  ref,\n  ...rest\n}: HoverMenuProps) {\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const setWrapper = useMemo(() => mergeRefs(wrapperRef, ref), [ref]);\n  const [phase, setPhase] = useState<Phase>(\"closed\");\n  const open = phase === \"open\" || phase === \"closing\";\n\n  // Whether the panel is open *because hover opened it*, vs. an explicit\n  // click/keyboard toggle. A real mouse click on the trigger is always\n  // preceded by a real mouseenter — the cursor has to land on the button\n  // before it can be clicked — so once hover has opened the panel, the click\n  // that inevitably follows is the same physical gesture, not a request to\n  // close what was just opened (feedback #19). Toggling closed on click stays\n  // for keyboard/touch activation, which reaches \"open\" without going through\n  // the hover path.\n  //\n  // State rather than a ref: `close` is handed to the caller's render prop, and a\n  // function that writes a ref must not be reachable from render.\n  const [openedByHover, setOpenedByHover] = useState(false);\n\n  const close = useCallback(() => {\n    setOpenedByHover(false);\n    setPhase(\"closed\");\n  }, []);\n\n  const toggle = useCallback(() => {\n    if (open) {\n      if (!openedByHover) setPhase(\"closed\");\n      return;\n    }\n    setOpenedByHover(false);\n    setPhase(\"open\");\n  }, [open, openedByHover]);\n\n  const handleMouseEnter = useCallback(\n    () => setPhase((p) => (p === \"closing\" ? \"open\" : p === \"closed\" ? \"opening\" : p)),\n    [],\n  );\n\n  const handleMouseLeave = useCallback(\n    () => setPhase((p) => (p === \"opening\" ? \"closed\" : p === \"open\" ? \"closing\" : p)),\n    [],\n  );\n\n  // Drive the delayed transitions; unmount/phase changes cancel the timer.\n  useEffect(() => {\n    if (phase === \"opening\") {\n      const id = setTimeout(() => {\n        setOpenedByHover(true);\n        setPhase(\"open\");\n      }, OPEN_DELAY_MS);\n      return () => clearTimeout(id);\n    }\n    if (phase === \"closing\") {\n      const id = setTimeout(() => setPhase(\"closed\"), CLOSE_DELAY_MS);\n      return () => clearTimeout(id);\n    }\n  }, [phase]);\n\n  // Claim the \"active menu\" slot while our panel is visible, closing the\n  // previous holder. Cleanup releases the slot only if we still hold it\n  // (a successor that displaced us has already overwritten it).\n  useEffect(() => {\n    if (!open) return;\n    if (activeClose !== close) activeClose?.();\n    activeClose = close;\n    return () => {\n      if (activeClose === close) activeClose = null;\n    };\n  }, [open, close]);\n\n  // A press in a panel opened from a row (a popover, its lists) is inside (dev#623).\n  const markInside = useOutsideClick(wrapperRef, close, open);\n\n  const menuRef = useRef<HTMLDivElement>(null);\n  /** Set by a keyboard press on the trigger, so the open that follows moves focus into\n   *  the menu. A hover or a mouse click opens it without taking focus off the page. */\n  const focusOnOpenRef = useRef<\"first\" | \"last\" | null>(null);\n\n  const triggerEl = () =>\n    Array.from(wrapperRef.current?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? []).find(\n      (el) => !menuRef.current?.contains(el),\n    ) ?? null;\n  const items = () => (menuRef.current ? applyMenuSemantics(menuRef.current) : []);\n\n  // Escape closes, from anywhere — it did nothing at all before — as a layer on the kit's\n  // Escape stack, so inside a dialog it closes the menu and not the dialog (Wave 2,\n  // DUP-1). Focus goes back to the trigger only when it was inside the menu: a panel\n  // opened by hover while the user is typing elsewhere must not yank the caret over\n  // here on the way out.\n  const layer = useDismissLayer(open, () => {\n    const hadFocus = wrapperRef.current?.contains(document.activeElement) ?? false;\n    close();\n    if (hadFocus) triggerEl()?.focus();\n  });\n\n  // Upgrade the markup every render while open (the caller's rows can change), then\n  // honour a pending keyboard open.\n  useLayoutEffect(() => {\n    if (!open) return;\n    const list = items();\n    const want = focusOnOpenRef.current;\n    focusOnOpenRef.current = null;\n    if (want) (want === \"last\" ? list[list.length - 1] : list[0])?.focus();\n  });\n\n  // Trigger state for assistive technology, on whatever element the caller rendered.\n  // Only where the caller has not said something of its own.\n  useLayoutEffect(() => {\n    const el = triggerEl();\n    if (!el) return;\n    if (!el.hasAttribute(\"aria-haspopup\")) el.setAttribute(\"aria-haspopup\", \"menu\");\n    if (el.getAttribute(\"aria-haspopup\") === \"menu\") el.setAttribute(\"aria-expanded\", String(open));\n  });\n\n  /** ↑/↓ roving focus with wrap, Home/End, Tab leaves (and closes); on the trigger,\n   *  Enter/Space/↓ open onto the first item and ↑ onto the last. */\n  const onKeyDown = (e: ReactKeyboardEvent<HTMLDivElement>) => {\n    const target = e.target as HTMLElement;\n    const inMenu = menuRef.current?.contains(target) ?? false;\n    if (!inMenu) {\n      if (target !== triggerEl()) return;\n      if (e.key === \"Enter\" || e.key === \" \") {\n        // The trigger's own click handler does the toggling; this only records that\n        // the press came from a keyboard. Not for a link trigger: Enter follows it, and\n        // a mark left here would pull focus into the panel the next time hover opens it.\n        if (!open && !target.matches(\"a[href]\")) focusOnOpenRef.current = \"first\";\n      } else if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\") {\n        e.preventDefault();\n        const edge = e.key === \"ArrowDown\" ? \"first\" : \"last\";\n        if (open) {\n          const list = items();\n          (edge === \"last\" ? list[list.length - 1] : list[0])?.focus();\n        } else {\n          focusOnOpenRef.current = edge;\n          setOpenedByHover(false);\n          setPhase(\"open\");\n        }\n      }\n      return;\n    }\n    if (e.key === \"Tab\") {\n      close();\n      return;\n    }\n    const list = items();\n    if (list.length === 0) return;\n    const at = list.indexOf(document.activeElement as HTMLElement);\n    let next: number | null = null;\n    if (e.key === \"ArrowDown\") next = at < 0 ? 0 : (at + 1) % list.length;\n    else if (e.key === \"ArrowUp\") next = at < 0 ? list.length - 1 : (at - 1 + list.length) % list.length;\n    else if (e.key === \"Home\") next = 0;\n    else if (e.key === \"End\") next = list.length - 1;\n    if (next === null) return;\n    e.preventDefault();\n    list[next].focus();\n  };\n\n  // Keep the panel inside the viewport (feedback #85): a wide panel anchored to a\n  // trigger near a screen edge would otherwise spill off it (on mobile the guided-\n  // tours menu ran off the left). Once open, measure and translate it horizontally\n  // just enough to sit within an 8px margin of the GLASS — `anchoredInline` against\n  // the panel's own natural box, as every anchored panel clamps (Wave 2, DUP-7; it\n  // measured against `innerWidth`, which on a phone is the grown layout viewport).\n  // Recomputed on each open; `shiftX` is subtracted first so the measurement is\n  // against the natural position.\n  const panelRef = useRef<HTMLDivElement>(null);\n  const [shiftX, setShiftX] = useState(0);\n  // Back to 0 on close, adjusted while rendering against the previous `open`.\n  const [wasOpen, setWasOpen] = useState(open);\n  if (open !== wasOpen) {\n    setWasOpen(open);\n    if (!open) setShiftX(0);\n  }\n  useLayoutEffect(() => {\n    if (!open) return;\n    const el = panelRef.current;\n    if (!el) return;\n    const rect = el.getBoundingClientRect();\n    if (rect.width === 0) return; // unmeasured (e.g. jsdom) — leave as-is\n    const natural = { left: rect.left - shiftX, right: rect.right - shiftX };\n    const { left } = anchoredInline(natural, rect.width, { dir: dirOf(el), align: \"left\" });\n    setShiftX(left - natural.left);\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- recompute only on open/close\n  }, [open]);\n\n  return (\n    /* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- never focused\n       itself: the mouse handlers are the hover-to-open convenience, and `onKeyDown`\n       catches keys bubbling from the caller's trigger button and the menuitems, which\n       are the keyboard path (Enter/Space/arrows open, arrows move, Escape closes). */\n    <div\n      // `...rest` first: the hover handlers below are the whole component, and a caller\n      // passing one of its own must not silently replace them.\n      {...rest}\n      ref={setWrapper}\n      className={cn(\"relative\", className)}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onPointerDownCapture={(e) => {\n        rest.onPointerDownCapture?.(e);\n        markInside(e);\n      }}\n      onKeyDown={(e) => {\n        // The caller's handler sees Escape only while this menu is the layer on top: a\n        // tooltip on one of its rows takes that press first (round 0.35 R2, the rule\n        // the dialogs got first). Every other key, and a closed menu's, as before.\n        runOwnKeyDown(e, rest.onKeyDown, layer);\n        // Focus on the trigger or in the menu: the key stops here, so a panel around\n        // the menu does not close with it.\n        if (open) takeEscape(e);\n        onKeyDown(e);\n      }}\n    >\n      {trigger({ open, toggle, close })}\n      {open && (\n        <div\n          ref={panelRef}\n          className={cn(\"absolute top-full z-40 pt-2\", ALIGN_CLASS[align])}\n          style={shiftX ? { transform: `translateX(${shiftX}px)` } : undefined}\n        >\n          <div\n            ref={menuRef}\n            role=\"menu\"\n            // On the element with the role. It used to sit on the role-less wrapper,\n            // where no screen reader reads a name.\n            aria-label={ariaLabel}\n            className={cn(\n              \"min-w-44 max-w-[calc(100vw-1rem)] rounded-md border border-subtle bg-surface shadow-lg\",\n              panelClassName,\n            )}\n          >\n            {children(close)}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":["list"]}

package/dist/components/iban-input-labels.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/iban-input-labels.ts"],"sourcesContent":["// The English words of ./iban-input, in a module with no component code: the English\n// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one\n// chunk like the other languages (0.34, KS U8). ./iban-input re-exports them.\n\nimport type { IbanInputLabels } from \"./iban-input\";\n\nexport const DEFAULT_IBAN_INPUT_LABELS: IbanInputLabels = {\n  format: \"An IBAN starts with a two-letter country code and two check digits.\",\n  country: (code) => `“${code}” is not the country code of an IBAN.`,\n  length: (actual, expected) =>\n    `An IBAN from this country has ${expected} characters — this one has ${actual}.`,\n  checksum: \"The check digits don’t match — a character is probably mistyped.\",\n  qrRequired: \"This is a regular IBAN. A QR-bill needs the account’s QR-IBAN.\",\n  qrNotAllowed: \"This is a QR-IBAN, which only receives QR-bill payments. Enter the account’s regular IBAN.\",\n};\n"],"mappings":";AAMO,MAAM,4BAA6C;AAAA,EACxD,QAAQ;AAAA,EACR,SAAS,CAAC,SAAS,SAAI,IAAI;AAAA,EAC3B,QAAQ,CAAC,QAAQ,aACf,iCAAiC,QAAQ,mCAA8B,MAAM;AAAA,EAC/E,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,cAAc;AAChB;","names":[]}
+{"version":3,"sources":["../../src/components/iban-input-labels.ts"],"sourcesContent":["// The English words of ./iban-input, in a module with no component code: the English\n// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one\n// chunk like the other languages (0.34, KS U8). ./iban-input re-exports them.\n\nimport type { IbanInputLabels } from \"./iban-input\";\n\nexport const DEFAULT_IBAN_INPUT_LABELS: IbanInputLabels = {\n  format: \"An IBAN starts with a two-letter country code and two check digits.\",\n  country: (code) => `“${code}” is not the country code of an IBAN.`,\n  length: (actual, expected) => `An IBAN from this country has ${expected} characters — this one has ${actual}.`,\n  checksum: \"The check digits don’t match — a character is probably mistyped.\",\n  qrRequired: \"This is a regular IBAN. A QR-bill needs the account’s QR-IBAN.\",\n  qrNotAllowed: \"This is a QR-IBAN, which only receives QR-bill payments. Enter the account’s regular IBAN.\",\n};\n"],"mappings":";AAMO,MAAM,4BAA6C;AAAA,EACxD,QAAQ;AAAA,EACR,SAAS,CAAC,SAAS,SAAI,IAAI;AAAA,EAC3B,QAAQ,CAAC,QAAQ,aAAa,iCAAiC,QAAQ,mCAA8B,MAAM;AAAA,EAC3G,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,cAAc;AAChB;","names":[]}

package/dist/components/icon-button.js

@@ -183,7 +183,10 @@ function iconButtonLook({
 }) {
   return cn(
     ICON_BUTTON_BASE,
-    withText ? cn("font-medium whitespace-nowrap", stretch ? ICON_BUTTON_TEXT_STRETCH_SIZES[size] : ICON_BUTTON_TEXT_SIZES[size]) : stretch ? ICON_BUTTON_STRETCH_SIZES[size] : ICON_BUTTON_SIZES[size],
+    withText ? cn(
+      "font-medium whitespace-nowrap",
+      stretch ? ICON_BUTTON_TEXT_STRETCH_SIZES[size] : ICON_BUTTON_TEXT_SIZES[size]
+    ) : stretch ? ICON_BUTTON_STRETCH_SIZES[size] : ICON_BUTTON_SIZES[size],
     // With text the pill is a 48 px target at any size; the square follows its size.
     withText ? TOUCH_TARGET_LARGE : ICON_BUTTON_TOUCH_LARGE[size],
     glyphSize !== void 0 && ICON_BUTTON_GLYPH_SIZES[glyphSize],

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/icon-button.tsx"],"sourcesContent":["import { useContext, useId } from \"react\";\nimport type {\n  AnchorHTMLAttributes,\n  ButtonHTMLAttributes,\n  CSSProperties,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  ReactNode,\n  Ref,\n} from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { FOCUS_RING_WIDTH } from \"./focus-ring\";\nimport { useLargeText } from \"../hooks/use-large-text\";\nimport { Tooltip, type TooltipSide } from \"./tooltip\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels, useKitLink } from \"../i18n/kit-labels\";\nimport type { KitLinkComponent, KitLinkProps } from \"../i18n/kit-labels\";\nimport { pickLinkRenderer, replacingClick, routerLinkNavigation } from \"./text-link\";\nimport { useCommitReason } from \"./write-lock\";\nimport type { CommitScope } from \"./write-lock\";\nimport { hasContent } from \"../lib/presence\";\nimport { CompactControlsContext, LockedReason, type DisabledReasonDisplay } from \"./field-parts\";\nimport { Spinner } from \"./spinner\";\nimport {\n  HOVER_INK,\n  ICON_BUTTON_PRESSED,\n  RenderedButtonLink,\n  HIT_AREA_LARGE,\n  TOUCH_TARGET_LARGE,\n  buttonVariantClasses,\n} from \"./button-look\";\nimport type { ButtonVariant } from \"./button-look\";\n\n// Canonical square icon-only button. <Button> carries TEXT geometry — px-3 py-2\n// gap-2 — so rendering a bare glyph through it gives a small icon in a wide,\n// text-shaped box. This fixes a square box instead and, crucially, forces the\n// child icon to a size set by the BOX (20px at md/sm) via `[&_svg]:size-*` so a\n// caller cannot under-size it. Use it wherever an action is a bare icon\n// (edit/delete/tools) so they all match the top-bar icon buttons and can never\n// drift apart again.\n//\n// Draws its colours from the same `buttonVariantClasses` map as <Button>, so the\n// two re-skin together with the palette.\nconst ICON_BUTTON_BASE = cn(\n  \"inline-flex items-center justify-center rounded-md transition-colors focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed\",\n  FOCUS_RING_WIDTH,\n);\n\nexport type IconButtonSize = \"2xl\" | \"xl\" | \"lg\" | \"md\" | \"sm\" | \"xs\" | \"2xs\";\n\n// Box and glyph together, so a 24px chip action cannot end up holding a 20px icon\n// that touches its edges. The two small steps are lenkbank's list-row (28px) and\n// chip (24px) actions, which it had hand-rolled beside the kit's 32/36px ones.\nconst ICON_BUTTON_SIZES: Record<IconButtonSize, string> = {\n  // 64px with a 28px glyph: a camera's shutter (keksdose invoices/camera-capture.tsx:248,\n  // `size-16` by hand) — the one control of a full-screen capture view, thumb-sized.\n  \"2xl\": \"size-16 [&_svg]:size-7\",\n  // 48px with a 24px glyph: the one primary action of a phone screen or sheet, a step\n  // past the 44px minimum rather than on it.\n  xl: \"size-12 [&_svg]:size-6\",\n  // The 44px touch target (WCAG 2.5.5's size) with the same 20px glyph — keksdose's\n  // bulk-action bars write `size-11` by hand over an `md` button to get it on phones.\n  lg: \"size-11 [&_svg]:size-5\",\n  md: \"size-9 [&_svg]:size-5\",\n  sm: \"size-8 [&_svg]:size-5\",\n  xs: \"size-7 rounded [&_svg]:size-4\",\n  \"2xs\": \"size-6 rounded [&_svg]:size-3.5\",\n};\n\n// `stretch`: the same WIDTH and glyph, and a height taken from the row instead of\n// stated — `size-*` sets a height that `self-stretch` cannot override, so the box is\n// written as a width plus a minimum height (the square it would otherwise be).\nconst ICON_BUTTON_STRETCH_SIZES: Record<IconButtonSize, string> = {\n  \"2xl\": \"w-16 min-h-16 self-stretch [&_svg]:size-7\",\n  xl: \"w-12 min-h-12 self-stretch [&_svg]:size-6\",\n  lg: \"w-11 min-h-11 self-stretch [&_svg]:size-5\",\n  md: \"w-9 min-h-9 self-stretch [&_svg]:size-5\",\n  sm: \"w-8 min-h-8 self-stretch [&_svg]:size-5\",\n  xs: \"w-7 min-h-7 self-stretch rounded [&_svg]:size-4\",\n  \"2xs\": \"w-6 min-h-6 self-stretch rounded [&_svg]:size-3.5\",\n};\n\n// The label as visible text beside the glyph (0.32, §4: at Large \"IconButton shows its\n// label\"): the same height and glyph as the square, a width taken from the words. A\n// map of its own rather than `w-auto` over `size-*`, which tailwind-merge cannot undo\n// in one direction.\nconst ICON_BUTTON_TEXT_SIZES: Record<IconButtonSize, string> = {\n  \"2xl\": \"h-16 gap-2 px-4 text-base [&_svg]:size-7\",\n  xl: \"h-12 gap-2 px-3.5 text-sm [&_svg]:size-6\",\n  lg: \"h-11 gap-2 px-3 text-sm [&_svg]:size-5\",\n  md: \"h-9 gap-1.5 px-2.5 text-sm [&_svg]:size-5\",\n  sm: \"h-8 gap-1.5 px-2 text-sm [&_svg]:size-5\",\n  xs: \"h-7 gap-1 rounded px-1.5 text-xs [&_svg]:size-4\",\n  \"2xs\": \"h-6 gap-1 rounded px-1.5 text-xs [&_svg]:size-3.5\",\n};\nconst ICON_BUTTON_TEXT_STRETCH_SIZES: Record<IconButtonSize, string> = {\n  \"2xl\": \"min-h-16 self-stretch gap-2 px-4 text-base [&_svg]:size-7\",\n  xl: \"min-h-12 self-stretch gap-2 px-3.5 text-sm [&_svg]:size-6\",\n  lg: \"min-h-11 self-stretch gap-2 px-3 text-sm [&_svg]:size-5\",\n  md: \"min-h-9 self-stretch gap-1.5 px-2.5 text-sm [&_svg]:size-5\",\n  sm: \"min-h-8 self-stretch gap-1.5 px-2 text-sm [&_svg]:size-5\",\n  xs: \"min-h-7 self-stretch gap-1 rounded px-1.5 text-xs [&_svg]:size-4\",\n  \"2xs\": \"min-h-6 self-stretch gap-1 rounded px-1.5 text-xs [&_svg]:size-3.5\",\n};\n\n// The 48 px touch target at Large (§4), per size. `lg` and up are past it already\n// (2.75rem is 55 px at Large). `md` … `xs` grow their box to it. `2xs` is the action ON\n// a chip or a tab, whose box cannot grow without growing the chip: it keeps its box and\n// gets a 48 px hit area instead — an invisible `::after` centred on it, which takes the\n// taps a finger lands round the glyph (`HIT_AREA_LARGE`).\nconst ICON_BUTTON_TOUCH_LARGE: Record<IconButtonSize, string> = {\n  \"2xl\": \"\",\n  xl: \"\",\n  lg: \"\",\n  md: TOUCH_TARGET_LARGE,\n  sm: TOUCH_TARGET_LARGE,\n  xs: TOUCH_TARGET_LARGE,\n  \"2xs\": HIT_AREA_LARGE,\n};\n\n// A tone re-colours the glyph without changing what the variant draws around it.\n// Each coloured tone comes in two resting looks, picked by `quiet` (see the prop):\n// QUIET is placeholder grey until the pointer or focus arrives, then the tone's\n// family; TONED wears the tone's colour at rest. The defaults are the looks each tone\n// had before `quiet` existed: `danger` is quiet — an action in every row of a list\n// must not shout from every row, so the red arrives only on the one row you are about\n// to act on — while `warning` and `info` are toned, because they mark the ONE thing\n// on the row to notice (keksdose's \"needs review\" flag, its reconcile action at\n// accounts-page:867), and quiet grey would hide the very thing they point out.\n// `muted` is quiet by definition and has no toned look; `default` has no tone.\n//\n// `success` is toned at rest too: the green is the news (keksdose's \"in sync\" chip).\n// `custom` paints from `--icon-button-tone`, which `toneColor` sets — for a glyph whose\n// colour FOLLOWS STATE across tones (keksdose's sync chip: rose, amber, sky, green as\n// the sync moves), where swapping `tone` would do but the colour is one variable.\nexport type IconButtonTone = \"default\" | \"muted\" | \"danger\" | \"warning\" | \"info\" | \"success\" | \"custom\";\n\ntype ColouredTone = \"danger\" | \"warning\" | \"info\" | \"success\" | \"custom\";\n\nconst ICON_BUTTON_TONES: Record<ColouredTone, { quiet: string; toned: string }> = {\n  danger: {\n    quiet:\n      \"text-placeholder hover:bg-danger-soft hover:text-danger focus-visible:ring-danger-strong\",\n    toned: \"text-danger hover:bg-danger-soft focus-visible:ring-danger-strong\",\n  },\n  warning: {\n    quiet:\n      \"text-placeholder hover:bg-warning-soft hover:text-warning focus-visible:ring-warning-strong\",\n    // The ring is warning's loud line (0.33, k27): `--warning-border`, amber-300, was a\n    // focus ring at 1.1:1 on the light surfaces.\n    toned: \"text-warning hover:bg-warning-soft focus-visible:ring-warning-strong\",\n  },\n  info: {\n    quiet:\n      \"text-placeholder hover:bg-info-soft hover:text-info focus-visible:ring-[var(--info-border)]\",\n    toned: \"text-info hover:bg-info-soft focus-visible:ring-[var(--info-border)]\",\n  },\n  success: {\n    quiet:\n      \"text-placeholder hover:bg-success-soft hover:text-success focus-visible:ring-[var(--success-border)]\",\n    toned: \"text-success hover:bg-success-soft focus-visible:ring-[var(--success-border)]\",\n  },\n  // The hover fill and the ring are MIXED from the one colour, since a custom tone\n  // brings no `-bg` / `-border` pair of its own. The fallback is the body colour, so a\n  // `custom` tone with no colour set is the default look rather than invisible.\n  custom: {\n    quiet:\n      \"text-placeholder hover:bg-[color-mix(in_srgb,var(--icon-button-tone,var(--text-primary))_12%,transparent)] hover:text-[var(--icon-button-tone,var(--text-primary))] focus-visible:ring-[color-mix(in_srgb,var(--icon-button-tone,var(--text-primary))_40%,transparent)]\",\n    toned:\n      \"text-[var(--icon-button-tone,var(--text-primary))] hover:bg-[color-mix(in_srgb,var(--icon-button-tone,var(--text-primary))_12%,transparent)] focus-visible:ring-[color-mix(in_srgb,var(--icon-button-tone,var(--text-primary))_40%,transparent)]\",\n  },\n};\n\n// The translucent ink on hover, as Button's secondary/ghost (B′, see HOVER_INK).\nconst ICON_BUTTON_MUTED = `text-placeholder ${HOVER_INK} hover:text-primary`;\n\n/** Which tones sit quiet at rest when `quiet` is left out. */\nconst QUIET_BY_DEFAULT: Record<ColouredTone, boolean> = {\n  danger: true,\n  warning: false,\n  info: false,\n  success: false,\n  custom: false,\n};\n\nfunction iconButtonToneClass(tone: IconButtonTone, quiet: boolean | undefined): string {\n  if (tone === \"default\") return \"\";\n  if (tone === \"muted\") return cn(ICON_BUTTON_MUTED, ICON_BUTTON_QUIET_DISABLED_REST);\n  const isQuiet = quiet ?? QUIET_BY_DEFAULT[tone];\n  const look = ICON_BUTTON_TONES[tone];\n  return isQuiet ? cn(look.quiet, ICON_BUTTON_QUIET_DISABLED_REST) : look.toned;\n}\n\n// A disabled button must not answer the pointer. The hover classes above are plain\n// `hover:` (so a caller's `className=\"hover:…\"` still replaces them through\n// tailwind-merge), which means they fire on a disabled button too — the old grey\n// icon lit up on hover while refusing the click. Rather than rewrite every hover as\n// `enabled:hover:` (which never matches the `<a>` that `buttonClasses` also styles,\n// and would out-rank a caller's plain `hover:` override), each variant pins its\n// RESTING look under `disabled:hover:`, which out-ranks any `hover:` by specificity\n// and only ever matches a disabled button.\nconst ICON_BUTTON_DISABLED_REST: Record<ButtonVariant | \"overlay\" | \"shutter\", string> = {\n  default: \"disabled:hover:bg-surface-2\",\n  secondary: \"disabled:hover:bg-transparent\",\n  ghost: \"disabled:hover:bg-transparent\",\n  danger: \"disabled:hover:bg-danger\",\n  accent: \"disabled:hover:bg-brand\",\n  link: \"disabled:hover:bg-transparent disabled:hover:no-underline\",\n  overlay: \"disabled:hover:bg-[color-mix(in_srgb,var(--bg-inverse)_60%,transparent)]\",\n  shutter: \"disabled:hover:bg-media-scrim\",\n};\n\n// The quiet looks change the glyph on hover, so they pin their resting glyph the\n// same way. A toned look keeps its glyph on hover and needs no pin.\nconst ICON_BUTTON_QUIET_DISABLED_REST = \"disabled:hover:text-placeholder\";\n\n// `variant=\"overlay\"`: a round, translucent disc for a control that sits ON a photo\n// (keksdose's receipt-scan preview: close, rotate, retake over the camera image).\n// The inverse pair, not the surface one: what has to hold is the contrast between the\n// disc and its glyph, whatever the picture underneath is, and `--bg-inverse` /\n// `--text-inverse` are the one token pair defined as each other's opposite in both\n// themes. The disc is the inverse at 60% (`color-mix`, so it stays a token a palette\n// can re-point); the blur keeps a busy background from breaking the glyph's edge.\nconst ICON_BUTTON_OVERLAY =\n  \"rounded-full bg-[color-mix(in_srgb,var(--bg-inverse)_60%,transparent)] text-inverse backdrop-blur-sm hover:bg-[color-mix(in_srgb,var(--bg-inverse)_75%,transparent)] focus-visible:ring-[var(--text-inverse)]\";\n\n// `variant=\"shutter\"`: the camera's release — keksdose's camera-capture.tsx:248 draws\n// it by hand as a 64px circle with a thick white ring round a translucent fill. It sits\n// on a live camera picture, which is dark whatever the theme, so it uses the MEDIA\n// tokens (tokens.css), white ink on a dark scrim in both themes — the inverse pair\n// `overlay` uses would give a dark ring on a dark viewfinder in dark mode. The focus ring stands off by 2px, or it would\n// merge into the ring that is part of the look.\nconst ICON_BUTTON_SHUTTER =\n  \"rounded-full border-4 border-media-ink bg-media-scrim text-media-ink backdrop-blur-sm hover:bg-media-scrim-hover focus-visible:ring-media-ink focus-visible:ring-offset-2 focus-visible:ring-offset-media-scrim-hover\";\n\nexport type IconButtonVariant = ButtonVariant | \"overlay\" | \"shutter\";\n\n/**\n * The glyph's size in px, over the one the box size implies — see\n * {@link IconButtonProps.glyphSize}.\n */\nexport type IconButtonGlyphSize = 12 | 14 | 16 | 20 | 24 | 28;\n\nconst ICON_BUTTON_GLYPH_SIZES: Record<IconButtonGlyphSize, string> = {\n  12: \"[&_svg]:size-3\",\n  14: \"[&_svg]:size-3.5\",\n  16: \"[&_svg]:size-4\",\n  20: \"[&_svg]:size-5\",\n  24: \"[&_svg]:size-6\",\n  28: \"[&_svg]:size-7\",\n};\n\n// `pending`'s spinner, the size of the glyph it replaces (the `[&_svg]` rules above\n// size only an svg, and the spinner is a bordered span).\nconst ICON_BUTTON_SPINNER: Record<IconButtonSize, string> = {\n  \"2xl\": \"size-7\",\n  xl: \"size-6\",\n  lg: \"size-5\",\n  md: \"size-5\",\n  sm: \"size-5\",\n  xs: \"size-4\",\n  \"2xs\": \"size-3.5\",\n};\nconst ICON_BUTTON_SPINNER_GLYPH: Record<IconButtonGlyphSize, string> = {\n  12: \"size-3\",\n  14: \"size-3.5\",\n  16: \"size-4\",\n  20: \"size-5\",\n  24: \"size-6\",\n  28: \"size-7\",\n};\n\nexport interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Any {@link ButtonVariant}; `overlay` — a round translucent disc for use over\n   *  an image (see `ICON_BUTTON_OVERLAY`); or `shutter` — a camera's release, a ringed\n   *  disc over the viewfinder (see `ICON_BUTTON_SHUTTER`; pair it with `size=\"2xl\"`). */\n  variant?: IconButtonVariant;\n  /** Box size: 2xl = 64px with a 28px icon (a camera shutter), xl = 48px with a 24px\n   *  icon, lg = 44px (a phone's touch target), md = 36px (matches the top bar),\n   *  sm = 32px — all three with a 20px icon;\n   *  xs = 28px with a 16px icon (an action in a list row), 2xs = 24px with a 14px\n   *  icon (an action on a chip or a tab). `glyphSize` overrides the icon. */\n  size?: IconButtonSize;\n  /**\n   * The icon's size in px, when the box's own is not the one wanted. keksdose's sync\n   * chip (app/sync-status-indicator.tsx:142) is a 24px round chip round a 20px cloud —\n   * `size=\"2xs\" glyphSize={20} shape=\"round\"` — where `2xs` alone draws 14px. A number\n   * over a new size step because the box and the glyph are two independent choices; a\n   * step per combination (`\"sm-lg\"`) would have to be named for every one.\n   */\n  glyphSize?: IconButtonGlyphSize;\n  /**\n   * A small mark on the button's corner — the sync chip's 12px check over its cloud\n   * (\"all good\", feedback #67). Rendered OUTSIDE the `<button>`, in a wrapper beside\n   * it, so the box's `[&_svg]:size-*` rule that sizes the glyph does not blow the badge\n   * up to the glyph's size; a bare `<Check />` comes out 12px, on a\n   * `--bg-surface` disc that keeps it legible over the glyph. Decorative\n   * (`aria-hidden`): the name (`label` / `aria-label`) must already carry the state.\n   * With a badge, `className` still lands on the button; the wrapper is the flex item.\n   */\n  badge?: ReactNode;\n  /**\n   * `keep`: a disabled button keeps its full colour (no 50% drop) and an ordinary\n   * cursor. For a STATUS that is also an action — the sync chip shows \"in sync\" in\n   * green and refreshes on click, and is disabled while offline or syncing, when the\n   * state it shows matters most; dimmed it read as broken (keksdose wrote\n   * `disabled:cursor-default` by hand and left out the dimming). Default `dim`.\n   */\n  disabledStyle?: \"dim\" | \"keep\";\n  /**\n   * Fill the height of the flex row it stands in, keeping its width — the delete at\n   * the end of keksdose's split line (transaction-fields:162), level with the labelled\n   * fields beside it rather than floating at half their height. {@link Button}'s\n   * `stretch`; no effect outside a flex row. With a `label`, the tooltip's wrapper is\n   * what stretches.\n   */\n  stretch?: boolean;\n  /** `round`: a circle instead of the rounded square — a compact status chip in a top\n   *  bar (keksdose's sync indicator). `overlay` is always round. */\n  shape?: \"square\" | \"round\";\n  /**\n   * The colour of `tone=\"custom\"`, as any CSS colour — a token (`var(--warning)`),\n   * ideally. Sets `--icon-button-tone` on the button, so passing a different one per\n   * state re-colours the glyph, its hover fill and its focus ring together. Passing it\n   * implies `tone=\"custom\"`. Or leave it out and set the variable yourself from a class\n   * (`className=\"[--icon-button-tone:var(--success)]\"`).\n   *\n   * Or a `{ light, dark }` pair, one colour per theme — keksdose: a raw colour that reads\n   * on the light surface (`#be123c`) is too dark on the dark one, and an inline style\n   * cannot say \"in dark mode\". See {@link IconButtonToneColor}.\n   */\n  toneColor?: IconButtonToneColor;\n  /** Glyph colour over the variant. `muted`: placeholder grey, full text colour on\n   *  hover. `danger`: the same grey at rest, `--danger` on hover and focus — for a\n   *  remove/delete that repeats down a list. `warning`: amber at rest — a flag that\n   *  wants attention. `info`: sky at rest — a notice-worthy but harmless action\n   *  (keksdose's reconcile). `success`: green at rest — a good state worth seeing.\n   *  `custom`: the colour of `toneColor` (see there). Default: the variant's own colours. See `quiet` for\n   *  turning a coloured tone's resting look the other way. */\n  tone?: IconButtonTone;\n  /**\n   * Whether a coloured tone (`danger`, `warning`, `info`) waits for the pointer:\n   * `true` is placeholder grey at rest and the tone's colour on hover and focus;\n   * `false` wears the tone's colour at rest. Left out, each tone keeps its own\n   * default — `danger` quiet, `warning` and `info` not. Ignored for `muted` (quiet by\n   * definition) and `default` (no tone).\n   *\n   * `quiet={false}` on `danger` is for a destructive action that stands ALONE, where\n   * hover-to-reveal hides it: keksdose's phone bulk bar (mobile-bulk-bar.tsx) has one\n   * \"delete all\" and a touch screen that never hovers, so it painted rose by hand.\n   * `quiet` on `warning`/`info` is the same switch the other way, for a flag repeated\n   * down a list. A boolean over the tone rather than a new tone (`danger-solid`) or an\n   * `emphasis` scale: there are exactly two resting looks, every coloured tone has\n   * both, and which one fits is a question about the SITE (alone or repeated, touch or\n   * pointer), not about the tone — so it is one switch the family shares.\n   */\n  quiet?: boolean;\n  /**\n   * Make it a toggle button. `true` sets `aria-pressed=\"true\"` and draws the \"on\" look\n   * (brand glyph on the quiet brand fill); `false` sets `aria-pressed=\"false\"` with the\n   * normal look, so a screen reader still hears a toggle that is off. Left out, it is\n   * an ordinary button with no `aria-pressed` — or whatever `aria-pressed` the caller\n   * passes. For keksdose's budget share toggle (budgets-page:291), which paints its own\n   * brand colour over a ghost button today. Keep the `aria-label` the same in both\n   * states (\"Share budget\"): the pressed state already says whether it is on.\n   */\n  pressed?: boolean;\n  /** Keep the click (and the Enter/Space that produces it) from reaching an\n   *  ancestor's handler — for an action inside a clickable table row or card.\n   *\n   *  **Not a licence to put this inside another `<button>`.** HTML forbids any\n   *  interactive content, and any element with a `tabindex`, inside a button — so\n   *  the `<span role=\"button\" tabIndex={0}>` workaround is invalid too — and ARIA\n   *  makes a button's children presentational, so a screen reader flattens the\n   *  inner one into the outer one's name and it cannot be reached at all. Make the\n   *  row's main action a button that fills the row and put this one BESIDE it, on\n   *  top:\n   *\n   *  ```tsx\n   *  <div className=\"relative\">\n   *    <button className=\"w-full pe-16 …\" onClick={open}>…row…</button>\n   *    <div className=\"absolute inset-y-0 end-2 flex items-center gap-0.5\">\n   *      <IconButton size=\"xs\" tone=\"danger\" aria-label=\"Delete\" onClick={remove}>\n   *        <Trash2 />\n   *      </IconButton>\n   *    </div>\n   *  </div>\n   *  ```\n   *\n   *  The pair look exactly like the nested version, click exactly like it, and\n   *  are two tab stops a screen reader can tell apart. */\n  stopPropagation?: boolean;\n  /**\n   * The button's name, said once: it becomes the `aria-label` AND the text of a kit\n   * {@link Tooltip} round the button.\n   *\n   * Every app writes the pair by hand. lenkbank's nine icon actions all carry\n   * `aria-label={t(x)} title={t(x)}` (shared/lib/table-columns.tsx:103,\n   * projects-page.tsx:83, setpoint/segment-list.tsx:198/207, profile-bar.tsx:128/142,\n   * shortcut-dialog.tsx:815/857/1007) — and `title` is the browser's own tooltip,\n   * which shows late, never on focus and never on touch, and looks like no other\n   * label in the kit. kastlan's RowAction (shared/components/data-table/row-action.tsx)\n   * and keksdose's icon wrappers each exist to put a Tooltip round an IconButton.\n   *\n   * A caller's own `aria-label` still wins, for the rare name that should be longer\n   * than the bubble. The bubble is visual only: it would otherwise describe the button\n   * with its own name, and a screen reader would read the same word twice. Tooltip's\n   * default placement applies — in place, or portalled inside a scroll container —\n   * unless `tooltipPortal` says otherwise.\n   */\n  label?: string;\n  /**\n   * Show `label` as visible text beside the icon at Large and Extra large (0.32,\n   * docs/text-size-harmonization.md §4, §10.8). A reader who asked for bigger type is\n   * the one an unlabelled glyph fails, and on touch the tooltip never opens. Then there\n   * is no tooltip: the words are on the button.\n   *\n   * Default `true` — except for `variant=\"overlay\"` and `\"shutter\"`, which sit ON a\n   * picture, and inside {@link CompactControls} (AppShell's top bar, `RowActions`'\n   * inline icons). `false`: the icon alone at every size, for an icon on content — a\n   * receipt overlay, a map's zoom, a viewfinder, a photo thumbnail. That must be rare;\n   * a dense row's actions belong in `RowActions`, which collapses them into a \"⋯\" menu\n   * at Large instead (§10.8). Normal never shows it. `tooltip={false}` (a universally\n   * read glyph, a dialog's ✕) keeps the icon alone too.\n   */\n  labelVisible?: boolean;\n  /** Show `label` as a tooltip. Default `true`; `false` keeps `label` as the\n   *  accessible name only — for a button whose glyph is universally read (a close ✕ in\n   *  a dialog header) or that already sits under a tooltip of its own. It also keeps the\n   *  label from showing as text at Large (see `labelVisible`). */\n  tooltip?: boolean;\n  /** Where the `label` tooltip opens. See {@link Tooltip}'s `side`. */\n  tooltipSide?: TooltipSide;\n  /** Passed to the `label` tooltip's `portal`. Left out, Tooltip decides (see there). */\n  tooltipPortal?: boolean;\n  /**\n   * Mount the `label` bubble only while it is up — {@link Tooltip}'s `lazy`. Default\n   * `true` since 0.16.0; `false` is the always-mounted in-place bubble of before.\n   *\n   * Why the label bubble can be lazy when Tooltip's default is not: this bubble\n   * describes nothing. It is wrapped round the button in a fragment precisely so that\n   * it is NOT the button's `aria-describedby` (it would repeat the button's own name),\n   * so there is no description for a lazy mount to take away — the name is the\n   * `aria-label` either way, read in browse mode and on focus alike. What the\n   * always-mounted bubble did do was sit in the DOM as a `role=\"tooltip\"` node full of\n   * text: every IconButton in a row added one to `getAllByRole(\"tooltip\")` and its label\n   * to the row's `textContent`, and two keksdose tests tripped over that (0.15.5 P6).\n   * The cost is the one {@link Tooltip}'s \"Lazy in place\" note names — a test that\n   * looked the bubble up without hovering now has to hover (or focus) first; pass\n   * `false` while it is migrated. A `disabledReason` bubble is unaffected: that one\n   * stays mounted as it was.\n   */\n  tooltipLazy?: boolean;\n  /**\n   * Busy — the action is in flight: the glyph is swapped for a spinner of the same\n   * size, the button is `aria-busy`, and clicks (and the Enter/Space and form\n   * submission they stand for) are swallowed, so a second press cannot start the\n   * action twice. {@link Button}'s `pending`, with the same contract: `aria-disabled`\n   * rather than `disabled`, so the button that was pressed keeps its focus. The name\n   * (`label` / `aria-label`) stays — `aria-busy` is what says it is working. A SWAP\n   * rather than Button's overlay: the box is square and fixed, so there is no width\n   * for the glyph to hold, and a spinner drawn over a glyph would be two marks in one\n   * 20px square.\n   */\n  pending?: boolean;\n  /**\n   * Why the action is not available — {@link Button}'s `disabledReason`, on the icon\n   * button: keksdose's accounts page cannot hide an account with a balance or delete\n   * one with bookings (accounts-page:879/913 — \"hide requires zero\", \"delete blocked\"),\n   * nor its budgets page delete the only budget (budgets-page:330), and each wrapped a\n   * natively disabled IconButton in a Tooltip that swaps its label for the reason — a\n   * bubble a keyboard never opens, since `disabled` leaves the tab order, and a reason\n   * a screen reader never hears.\n   *\n   * The same contract as Button's: `aria-disabled` instead of `disabled`, so it stays\n   * focusable and hoverable; clicks (and the Enter/Space they stand for) are swallowed\n   * — `stopPropagation` still applies, so a locked action in a clickable row does not\n   * open the row either; the reason shows in the kit {@link Tooltip} and is attached\n   * through `aria-describedby` as a `hidden` copy. The NAME stays `aria-label` /\n   * `label` — \"Delete\", described by \"The active budget cannot be deleted\" — and the\n   * bubble shows the reason in place of the label, since the glyph already says what\n   * the button is and the reason is the news. Shown even with `tooltip={false}`: a\n   * reason nobody can see is not one. Wins over `disabled`, as on Button.\n   *\n   * 0.32: at Large and on a touch screen the reason is a line under the button rather\n   * than a bubble — see `disabledReasonDisplay`.\n   */\n  disabledReason?: ReactNode;\n  /** Where `disabledReason` shows — {@link Button}'s `disabledReasonDisplay`. */\n  disabledReasonDisplay?: DisabledReasonDisplay;\n  /** This action COMMITS — {@link Button}'s `commit`: under a locked\n   *  {@link WriteLockProvider} it takes the `disabledReason` path with the lock's\n   *  reason. No effect without a lock. A {@link CommitScope} since 0.33. */\n  commit?: CommitScope;\n  /** The `<button>` element — a prop in React 19, as on {@link Button}. */\n  ref?: Ref<HTMLButtonElement>;\n  /** Only on the link form — see {@link IconButtonLinkProps}. */\n  href?: never;\n  renderLink?: never;\n  external?: never;\n  replace?: never;\n  reloadDocument?: never;\n}\n\n/**\n * `<IconButton href>`: an icon-only LINK — keksdose F2 and kastlan 45, whose icon\n * actions that navigate (a row's \"open\", a card's \"edit\" that goes to the edit page, a\n * top bar's settings cog) were `<IconButton onClick={() => navigate(…)}>`: a button that\n * changes the page, with no middle click, no \"open in new tab\" and no URL on hover.\n *\n * The same rule as {@link Button}'s `href` (see {@link ButtonLinkProps}): an in-app\n * `href` goes through `renderLink`, else the provider's `linkComponent`; an external one\n * or an in-page `#anchor` stays a plain `<a>`; `external` opens a new tab and says so to\n * a screen reader; `replace` and `reloadDocument` as on Button. The look, the `label` →\n * `aria-label` + Tooltip, the badge, `toneColor` and `stopPropagation` are the button's.\n *\n * `disabled` renders an inert `<a>` with no `href` — `role=\"link\"`, `aria-disabled`, out\n * of the tab order, dimmed — like Button's disabled link. `pressed`, `disabledReason` and\n * `disabledStyle` are a button's and are typed out: a link is not a toggle, and a link\n * that explains why it cannot be followed is a job for a disabled BUTTON.\n */\nexport interface IconButtonLinkProps\n  extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, \"type\" | \"href\">,\n    Pick<\n      IconButtonProps,\n      | \"variant\"\n      | \"size\"\n      | \"glyphSize\"\n      | \"badge\"\n      | \"stretch\"\n      | \"shape\"\n      | \"toneColor\"\n      | \"tone\"\n      | \"quiet\"\n      | \"stopPropagation\"\n      | \"label\"\n      | \"labelVisible\"\n      | \"tooltip\"\n      | \"tooltipSide\"\n      | \"tooltipPortal\"\n      | \"tooltipLazy\"\n    > {\n  href: string;\n  /** See {@link ButtonLinkProps.renderLink}. */\n  renderLink?: KitLinkComponent;\n  /** See {@link ButtonLinkProps.external}. */\n  external?: boolean;\n  /** See {@link ButtonLinkProps.replace}. */\n  replace?: boolean;\n  /** See {@link ButtonLinkProps.reloadDocument}. */\n  reloadDocument?: boolean;\n  /** See {@link ButtonLinkProps.disabled}. */\n  disabled?: boolean;\n  ref?: Ref<HTMLAnchorElement>;\n  type?: never;\n  form?: never;\n  pressed?: never;\n  disabledReason?: never;\n  disabledReasonDisplay?: never;\n  commit?: never;\n  disabledStyle?: never;\n  pending?: never;\n}\n\n/**\n * Whether an IconButton draws its `label` as text (see `labelVisible`): at Large and\n * above, with a label to draw, not switched off by the caller, the variant (`overlay`,\n * `shutter`), `tooltip={false}` or a {@link CompactControls} region.\n */\nfunction useIconButtonText(\n  label: string | undefined,\n  labelVisible: boolean | undefined,\n  variant: IconButtonVariant,\n  tooltip: boolean,\n): boolean {\n  const large = useLargeText();\n  const compact = useContext(CompactControlsContext);\n  if (!large || label === undefined || label === \"\" || !tooltip) return false;\n  const visible = labelVisible ?? (!compact && variant !== \"overlay\" && variant !== \"shutter\");\n  return visible;\n}\n\n/** The visible label (see `labelVisible`). */\nfunction IconButtonText({ label }: { label: string }) {\n  return <span data-slot=\"icon-button-label\">{label}</span>;\n}\n\n/**\n * `toneColor`: one CSS colour, or one per theme.\n *\n * The pair is two custom properties on the element — `--icon-button-tone-light` and\n * `--icon-button-tone-dark` — and a class that points `--icon-button-tone` at one or the\n * other by the kit's `dark` variant (`.dark` on an ancestor, tokens.css), so the colour\n * follows a theme switch in CSS alone, with no re-render and no JS reading the theme.\n * Both values are any CSS colour; a token that already flips (`var(--warning)`) needs no\n * pair.\n */\nexport type IconButtonToneColor = string | { light: string; dark: string };\n\nconst ICON_BUTTON_TONE_PAIR =\n  \"[--icon-button-tone:var(--icon-button-tone-light)] dark:[--icon-button-tone:var(--icon-button-tone-dark)]\";\n\n/** The inline custom properties `toneColor` sets over the caller's `style`. */\nfunction toneColorStyle(toneColor: IconButtonToneColor | undefined, style: CSSProperties | undefined) {\n  if (toneColor === undefined) return style;\n  const vars: Record<string, string> =\n    typeof toneColor === \"string\"\n      ? { \"--icon-button-tone\": toneColor }\n      : { \"--icon-button-tone-light\": toneColor.light, \"--icon-button-tone-dark\": toneColor.dark };\n  return { ...style, ...vars } as CSSProperties;\n}\n\n/** Everything but the element: the look both forms of IconButton share. */\nfunction iconButtonLook({\n  variant,\n  size,\n  stretch,\n  glyphSize,\n  shape,\n  tone,\n  quiet,\n  toneColor,\n  withText = false,\n}: {\n  variant: IconButtonVariant;\n  size: IconButtonSize;\n  stretch: boolean | undefined;\n  glyphSize: IconButtonGlyphSize | undefined;\n  shape: \"square\" | \"round\";\n  tone: IconButtonTone;\n  quiet: boolean | undefined;\n  toneColor: IconButtonToneColor | undefined;\n  /** The label is drawn beside the glyph (see `labelVisible`). */\n  withText?: boolean;\n}) {\n  return cn(\n    ICON_BUTTON_BASE,\n    withText\n      ? cn(\"font-medium whitespace-nowrap\", stretch ? ICON_BUTTON_TEXT_STRETCH_SIZES[size] : ICON_BUTTON_TEXT_SIZES[size])\n      : stretch\n        ? ICON_BUTTON_STRETCH_SIZES[size]\n        : ICON_BUTTON_SIZES[size],\n    // With text the pill is a 48 px target at any size; the square follows its size.\n    withText ? TOUCH_TARGET_LARGE : ICON_BUTTON_TOUCH_LARGE[size],\n    glyphSize !== undefined && ICON_BUTTON_GLYPH_SIZES[glyphSize],\n    // After the size, so the overlay's `rounded-full` beats the small sizes' `rounded`.\n    variant === \"overlay\"\n      ? ICON_BUTTON_OVERLAY\n      : variant === \"shutter\"\n        ? ICON_BUTTON_SHUTTER\n        : buttonVariantClasses[variant],\n    shape === \"round\" && \"rounded-full\",\n    ICON_BUTTON_DISABLED_REST[variant],\n    iconButtonToneClass(tone, quiet),\n    toneColor !== undefined && typeof toneColor !== \"string\" && ICON_BUTTON_TONE_PAIR,\n  );\n}\n\n/** The badge beside the control, not in it — see `badge`. The wrapper is only a\n *  positioning box: the control inside it keeps its own focus ring and hit area. */\nfunction withIconButtonBadge(control: ReactElement, badge: ReactNode, stretch: boolean | undefined) {\n  if (!hasContent(badge)) return control;\n  return (\n    <span className={cn(\"relative inline-flex shrink-0\", stretch && \"self-stretch\")}>\n      {control}\n      <span\n        aria-hidden\n        data-slot=\"icon-button-badge\"\n        className=\"pointer-events-none absolute -end-0.5 -bottom-0.5 inline-flex rounded-full bg-surface [&_svg]:size-3\"\n      >\n        {badge}\n      </span>\n    </span>\n  );\n}\n\n// Declared link-first, as Button is, so `<IconButton href>` picks the link props and\n// `ComponentProps<typeof IconButton>` (the LAST signature) is still the button's.\n/**\n * An icon-only button whose `label` is its name and its tooltip.\n *\n * Destructive actions (0.49 KIT-12): a delete, revoke or erase is NOT an icon repeated in\n * every row of a list — one stray tap away, and a bin per row draws the eye to the one\n * thing nobody should do by accident. Put it in the row's menu, `RowActions` (where a\n * `tone: \"danger\"` action goes by default and opens a `ConfirmDialog` first), or in the\n * selection bar (\"2 selected\" → Delete), and confirm it through `useConfirm`. A single\n * standalone delete — a card's own, a bulk bar's — may be an IconButton\n * `tone=\"danger\"`; it still asks first.\n */\nexport function IconButton(props: IconButtonLinkProps): ReactElement;\nexport function IconButton(props: IconButtonProps): ReactElement;\nexport function IconButton(props: IconButtonProps | IconButtonLinkProps): ReactElement {\n  if (props.href !== undefined) return <IconButtonLink {...(props as IconButtonLinkProps)} />;\n  return <IconButtonElement {...(props as IconButtonProps)} />;\n}\n\nfunction IconButtonLink({\n  href,\n  renderLink,\n  external,\n  replace,\n  reloadDocument,\n  disabled,\n  variant = \"ghost\",\n  size = \"md\",\n  tone: toneProp,\n  quiet,\n  stopPropagation,\n  stretch,\n  shape = \"square\",\n  toneColor,\n  label,\n  labelVisible,\n  tooltip = true,\n  tooltipSide,\n  tooltipPortal,\n  tooltipLazy = true,\n  glyphSize,\n  badge,\n  className,\n  style,\n  target,\n  rel,\n  onClick,\n  onKeyDown,\n  children: glyph,\n  ref,\n  ...rest\n}: IconButtonLinkProps) {\n  const withText = useIconButtonText(label, labelVisible, variant, tooltip);\n  const children = withText ? (\n    <>\n      {glyph}\n      <IconButtonText label={label!} />\n    </>\n  ) : (\n    glyph\n  );\n  const kitLink = useKitLink();\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const tone = toneProp ?? (toneColor !== undefined ? \"custom\" : \"default\");\n  // Button's rule, word for word: `reloadDocument` bypasses the router, an external\n  // href or an in-page `#anchor` never reaches it.\n  const Link = reloadDocument ? undefined : pickLinkRenderer<KitLinkProps>(renderLink, kitLink, href);\n  const newTab = !disabled && (external || target === \"_blank\");\n  const name = rest[\"aria-label\"] ?? label;\n  // \"(opens in a new tab)\" joins the NAME here, not the body: an icon link has no text\n  // for an sr-only span to follow, and `aria-label` would override one anyway.\n  const ariaLabel = name !== undefined && newTab ? `${name} (${common.opensInNewTab})` : name;\n  const handleClick = (e: MouseEvent<HTMLAnchorElement>) => {\n    if (stopPropagation) e.stopPropagation();\n    onClick?.(e);\n  };\n  const handleKeyDown = (e: KeyboardEvent<HTMLAnchorElement>) => {\n    // A link activates on Enter only; that key still bubbles to a clickable row.\n    if (stopPropagation && e.key === \"Enter\") e.stopPropagation();\n    onKeyDown?.(e);\n  };\n  const cls = cn(\n    iconButtonLook({ variant, size, stretch, glyphSize, shape, tone, quiet, toneColor, withText }),\n    // BASE's `disabled:` classes never match an `<a>` — Button's disabled link look.\n    disabled && \"pointer-events-none cursor-not-allowed opacity-50\",\n    className,\n  );\n  const look = { style: toneColorStyle(toneColor, style), className: cls };\n  let control: ReactElement;\n  if (disabled) {\n    control = (\n      <a {...rest} {...look} ref={ref} role=\"link\" aria-disabled=\"true\" aria-label={ariaLabel}>\n        {children}\n      </a>\n    );\n  } else if (external || !Link) {\n    control = (\n      <a\n        {...rest}\n        {...look}\n        ref={ref}\n        href={href}\n        aria-label={ariaLabel}\n        target={external ? \"_blank\" : target}\n        rel={external ? (rel ?? \"noopener noreferrer\") : rel}\n        onClick={external ? handleClick : replacingClick(handleClick, href, replace, target)}\n        onKeyDown={handleKeyDown}\n      >\n        {children}\n      </a>\n    );\n  } else {\n    control = (\n      <RenderedButtonLink\n        render={Link}\n        {...rest}\n        {...look}\n        {...routerLinkNavigation(replace)}\n        ref={ref}\n        href={href}\n        aria-label={ariaLabel}\n        target={target}\n        rel={rel}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n      >\n        {children}\n      </RenderedButtonLink>\n    );\n  }\n  control = withIconButtonBadge(control, badge, stretch);\n  // The words are on the link at Large: a bubble would only repeat them.\n  if (!tooltip || withText || label === undefined || label === \"\") return control;\n  return (\n    // A fragment, as on the button: the bubble says what `aria-label` already does.\n    <Tooltip\n      label={label}\n      side={tooltipSide}\n      portal={tooltipPortal}\n      lazy={tooltipLazy}\n      className={stretch ? \"self-stretch\" : undefined}\n    >\n      <>{control}</>\n    </Tooltip>\n  );\n}\n\nfunction IconButtonElement(\n  {\n    variant = \"ghost\",\n    size = \"md\",\n    tone: toneProp,\n    quiet,\n    pressed,\n    stopPropagation,\n    stretch,\n    shape = \"square\",\n    toneColor,\n    label,\n    labelVisible,\n    tooltip = true,\n    tooltipSide,\n    tooltipPortal,\n    tooltipLazy = true,\n    disabledReason: ownDisabledReason,\n    disabledReasonDisplay,\n    commit,\n    pending,\n    glyphSize,\n    badge,\n    disabledStyle = \"dim\",\n    className,\n    style,\n    onClick,\n    onKeyDown,\n    children,\n    href: _href,\n    renderLink: _renderLink,\n    external: _external,\n    replace: _replace,\n    reloadDocument: _reloadDocument,\n    ref,\n    ...rest\n  }: IconButtonProps,\n) {\n  const tone = toneProp ?? (toneColor !== undefined ? \"custom\" : \"default\");\n  const keep = disabledStyle === \"keep\";\n  const withText = useIconButtonText(label, labelVisible, variant, tooltip);\n  const reasonId = useId();\n  const disabledReason = useCommitReason(commit, ownDisabledReason);\n  const locked = hasContent(disabledReason);\n  // Pending is inert like a locked button — focusable, every activation swallowed —\n  // without the locked look: the spinner is the state.\n  const inert = locked || Boolean(pending);\n  const ownDescribedBy = rest[\"aria-describedby\"];\n  const button = (\n    <button\n      ref={ref}\n      {...rest}\n      disabled={inert ? undefined : rest.disabled}\n      aria-disabled={inert || rest[\"aria-disabled\"]}\n      aria-busy={pending || rest[\"aria-busy\"]}\n      aria-describedby={locked ? (ownDescribedBy ? `${ownDescribedBy} ${reasonId}` : reasonId) : ownDescribedBy}\n      aria-label={rest[\"aria-label\"] ?? label}\n      aria-pressed={pressed ?? rest[\"aria-pressed\"]}\n      style={toneColorStyle(toneColor, style)}\n      onClick={(e) => {\n        if (stopPropagation) e.stopPropagation();\n        // `preventDefault` too: a locked (or pending) submit must not submit its form.\n        if (inert) {\n          e.preventDefault();\n          return;\n        }\n        onClick?.(e);\n      }}\n      onKeyDown={(e) => {\n        // A button turns Enter/Space into a click of its own, but the KEY still\n        // bubbles — and a clickable row listening for Enter would act on it too.\n        if (stopPropagation && (e.key === \"Enter\" || e.key === \" \")) e.stopPropagation();\n        onKeyDown?.(e);\n      }}\n      className={cn(\n        iconButtonLook({ variant, size, stretch, glyphSize, shape, tone, quiet, toneColor, withText }),\n        pressed && ICON_BUTTON_PRESSED,\n        // The disabled look for the focusable kind of disabled, as on Button.\n        locked && (keep ? \"cursor-default\" : \"cursor-not-allowed opacity-50\"),\n        keep && \"disabled:cursor-default disabled:opacity-100\",\n        pending && \"cursor-progress\",\n        className,\n      )}\n    >\n      {pending ? (\n        // Decorative, as on Button: `aria-busy` says it. Sized to the glyph it stands\n        // in for, in the glyph's colour, so the swap does not change the button's look.\n        <Spinner\n          label={null}\n          className={cn(\n            \"border-current/30 border-t-current\",\n            glyphSize !== undefined ? ICON_BUTTON_SPINNER_GLYPH[glyphSize] : ICON_BUTTON_SPINNER[size],\n          )}\n        />\n      ) : (\n        children\n      )}\n      {withText && <IconButtonText label={label!} />}\n    </button>\n  );\n  const control = withIconButtonBadge(button, badge, stretch);\n  if (locked) {\n    return (\n      // Button's shape: the reason as a line under it, or the bubble with a hidden copy\n      // for the description (see LockedReason).\n      <LockedReason\n        lock={{ reason: disabledReason, reasonId }}\n        display={disabledReasonDisplay}\n        side={tooltipSide}\n        portal={tooltipPortal}\n        className={stretch ? \"self-stretch\" : undefined}\n      >\n        {control}\n      </LockedReason>\n    );\n  }\n  // The words are on the button at Large: a bubble would only repeat them.\n  if (!tooltip || withText || label === undefined || label === \"\") return control;\n  return (\n    // A fragment, so Tooltip leaves the button's description alone: the bubble says\n    // exactly what `aria-label` already does. Lazy by default — see `tooltipLazy`.\n    <Tooltip\n      label={label}\n      side={tooltipSide}\n      portal={tooltipPortal}\n      lazy={tooltipLazy}\n      className={stretch ? \"self-stretch\" : undefined}\n    >\n      <>{control}</>\n    </Tooltip>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/icon-button.tsx"],"sourcesContent":["import { useContext, useId } from \"react\";\nimport type {\n  AnchorHTMLAttributes,\n  ButtonHTMLAttributes,\n  CSSProperties,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  ReactNode,\n  Ref,\n} from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { FOCUS_RING_WIDTH } from \"./focus-ring\";\nimport { useLargeText } from \"../hooks/use-large-text\";\nimport { Tooltip, type TooltipSide } from \"./tooltip\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels, useKitLink } from \"../i18n/kit-labels\";\nimport type { KitLinkComponent, KitLinkProps } from \"../i18n/kit-labels\";\nimport { pickLinkRenderer, replacingClick, routerLinkNavigation } from \"./text-link\";\nimport { useCommitReason } from \"./write-lock\";\nimport type { CommitScope } from \"./write-lock\";\nimport { hasContent } from \"../lib/presence\";\nimport { CompactControlsContext, LockedReason, type DisabledReasonDisplay } from \"./field-parts\";\nimport { Spinner } from \"./spinner\";\nimport {\n  HOVER_INK,\n  ICON_BUTTON_PRESSED,\n  RenderedButtonLink,\n  HIT_AREA_LARGE,\n  TOUCH_TARGET_LARGE,\n  buttonVariantClasses,\n} from \"./button-look\";\nimport type { ButtonVariant } from \"./button-look\";\n\n// Canonical square icon-only button. <Button> carries TEXT geometry — px-3 py-2\n// gap-2 — so rendering a bare glyph through it gives a small icon in a wide,\n// text-shaped box. This fixes a square box instead and, crucially, forces the\n// child icon to a size set by the BOX (20px at md/sm) via `[&_svg]:size-*` so a\n// caller cannot under-size it. Use it wherever an action is a bare icon\n// (edit/delete/tools) so they all match the top-bar icon buttons and can never\n// drift apart again.\n//\n// Draws its colours from the same `buttonVariantClasses` map as <Button>, so the\n// two re-skin together with the palette.\nconst ICON_BUTTON_BASE = cn(\n  \"inline-flex items-center justify-center rounded-md transition-colors focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed\",\n  FOCUS_RING_WIDTH,\n);\n\nexport type IconButtonSize = \"2xl\" | \"xl\" | \"lg\" | \"md\" | \"sm\" | \"xs\" | \"2xs\";\n\n// Box and glyph together, so a 24px chip action cannot end up holding a 20px icon\n// that touches its edges. The two small steps are lenkbank's list-row (28px) and\n// chip (24px) actions, which it had hand-rolled beside the kit's 32/36px ones.\nconst ICON_BUTTON_SIZES: Record<IconButtonSize, string> = {\n  // 64px with a 28px glyph: a camera's shutter (keksdose invoices/camera-capture.tsx:248,\n  // `size-16` by hand) — the one control of a full-screen capture view, thumb-sized.\n  \"2xl\": \"size-16 [&_svg]:size-7\",\n  // 48px with a 24px glyph: the one primary action of a phone screen or sheet, a step\n  // past the 44px minimum rather than on it.\n  xl: \"size-12 [&_svg]:size-6\",\n  // The 44px touch target (WCAG 2.5.5's size) with the same 20px glyph — keksdose's\n  // bulk-action bars write `size-11` by hand over an `md` button to get it on phones.\n  lg: \"size-11 [&_svg]:size-5\",\n  md: \"size-9 [&_svg]:size-5\",\n  sm: \"size-8 [&_svg]:size-5\",\n  xs: \"size-7 rounded [&_svg]:size-4\",\n  \"2xs\": \"size-6 rounded [&_svg]:size-3.5\",\n};\n\n// `stretch`: the same WIDTH and glyph, and a height taken from the row instead of\n// stated — `size-*` sets a height that `self-stretch` cannot override, so the box is\n// written as a width plus a minimum height (the square it would otherwise be).\nconst ICON_BUTTON_STRETCH_SIZES: Record<IconButtonSize, string> = {\n  \"2xl\": \"w-16 min-h-16 self-stretch [&_svg]:size-7\",\n  xl: \"w-12 min-h-12 self-stretch [&_svg]:size-6\",\n  lg: \"w-11 min-h-11 self-stretch [&_svg]:size-5\",\n  md: \"w-9 min-h-9 self-stretch [&_svg]:size-5\",\n  sm: \"w-8 min-h-8 self-stretch [&_svg]:size-5\",\n  xs: \"w-7 min-h-7 self-stretch rounded [&_svg]:size-4\",\n  \"2xs\": \"w-6 min-h-6 self-stretch rounded [&_svg]:size-3.5\",\n};\n\n// The label as visible text beside the glyph (0.32, §4: at Large \"IconButton shows its\n// label\"): the same height and glyph as the square, a width taken from the words. A\n// map of its own rather than `w-auto` over `size-*`, which tailwind-merge cannot undo\n// in one direction.\nconst ICON_BUTTON_TEXT_SIZES: Record<IconButtonSize, string> = {\n  \"2xl\": \"h-16 gap-2 px-4 text-base [&_svg]:size-7\",\n  xl: \"h-12 gap-2 px-3.5 text-sm [&_svg]:size-6\",\n  lg: \"h-11 gap-2 px-3 text-sm [&_svg]:size-5\",\n  md: \"h-9 gap-1.5 px-2.5 text-sm [&_svg]:size-5\",\n  sm: \"h-8 gap-1.5 px-2 text-sm [&_svg]:size-5\",\n  xs: \"h-7 gap-1 rounded px-1.5 text-xs [&_svg]:size-4\",\n  \"2xs\": \"h-6 gap-1 rounded px-1.5 text-xs [&_svg]:size-3.5\",\n};\nconst ICON_BUTTON_TEXT_STRETCH_SIZES: Record<IconButtonSize, string> = {\n  \"2xl\": \"min-h-16 self-stretch gap-2 px-4 text-base [&_svg]:size-7\",\n  xl: \"min-h-12 self-stretch gap-2 px-3.5 text-sm [&_svg]:size-6\",\n  lg: \"min-h-11 self-stretch gap-2 px-3 text-sm [&_svg]:size-5\",\n  md: \"min-h-9 self-stretch gap-1.5 px-2.5 text-sm [&_svg]:size-5\",\n  sm: \"min-h-8 self-stretch gap-1.5 px-2 text-sm [&_svg]:size-5\",\n  xs: \"min-h-7 self-stretch gap-1 rounded px-1.5 text-xs [&_svg]:size-4\",\n  \"2xs\": \"min-h-6 self-stretch gap-1 rounded px-1.5 text-xs [&_svg]:size-3.5\",\n};\n\n// The 48 px touch target at Large (§4), per size. `lg` and up are past it already\n// (2.75rem is 55 px at Large). `md` … `xs` grow their box to it. `2xs` is the action ON\n// a chip or a tab, whose box cannot grow without growing the chip: it keeps its box and\n// gets a 48 px hit area instead — an invisible `::after` centred on it, which takes the\n// taps a finger lands round the glyph (`HIT_AREA_LARGE`).\nconst ICON_BUTTON_TOUCH_LARGE: Record<IconButtonSize, string> = {\n  \"2xl\": \"\",\n  xl: \"\",\n  lg: \"\",\n  md: TOUCH_TARGET_LARGE,\n  sm: TOUCH_TARGET_LARGE,\n  xs: TOUCH_TARGET_LARGE,\n  \"2xs\": HIT_AREA_LARGE,\n};\n\n// A tone re-colours the glyph without changing what the variant draws around it.\n// Each coloured tone comes in two resting looks, picked by `quiet` (see the prop):\n// QUIET is placeholder grey until the pointer or focus arrives, then the tone's\n// family; TONED wears the tone's colour at rest. The defaults are the looks each tone\n// had before `quiet` existed: `danger` is quiet — an action in every row of a list\n// must not shout from every row, so the red arrives only on the one row you are about\n// to act on — while `warning` and `info` are toned, because they mark the ONE thing\n// on the row to notice (keksdose's \"needs review\" flag, its reconcile action at\n// accounts-page:867), and quiet grey would hide the very thing they point out.\n// `muted` is quiet by definition and has no toned look; `default` has no tone.\n//\n// `success` is toned at rest too: the green is the news (keksdose's \"in sync\" chip).\n// `custom` paints from `--icon-button-tone`, which `toneColor` sets — for a glyph whose\n// colour FOLLOWS STATE across tones (keksdose's sync chip: rose, amber, sky, green as\n// the sync moves), where swapping `tone` would do but the colour is one variable.\nexport type IconButtonTone = \"default\" | \"muted\" | \"danger\" | \"warning\" | \"info\" | \"success\" | \"custom\";\n\ntype ColouredTone = \"danger\" | \"warning\" | \"info\" | \"success\" | \"custom\";\n\nconst ICON_BUTTON_TONES: Record<ColouredTone, { quiet: string; toned: string }> = {\n  danger: {\n    quiet: \"text-placeholder hover:bg-danger-soft hover:text-danger focus-visible:ring-danger-strong\",\n    toned: \"text-danger hover:bg-danger-soft focus-visible:ring-danger-strong\",\n  },\n  warning: {\n    quiet: \"text-placeholder hover:bg-warning-soft hover:text-warning focus-visible:ring-warning-strong\",\n    // The ring is warning's loud line (0.33, k27): `--warning-border`, amber-300, was a\n    // focus ring at 1.1:1 on the light surfaces.\n    toned: \"text-warning hover:bg-warning-soft focus-visible:ring-warning-strong\",\n  },\n  info: {\n    quiet: \"text-placeholder hover:bg-info-soft hover:text-info focus-visible:ring-[var(--info-border)]\",\n    toned: \"text-info hover:bg-info-soft focus-visible:ring-[var(--info-border)]\",\n  },\n  success: {\n    quiet: \"text-placeholder hover:bg-success-soft hover:text-success focus-visible:ring-[var(--success-border)]\",\n    toned: \"text-success hover:bg-success-soft focus-visible:ring-[var(--success-border)]\",\n  },\n  // The hover fill and the ring are MIXED from the one colour, since a custom tone\n  // brings no `-bg` / `-border` pair of its own. The fallback is the body colour, so a\n  // `custom` tone with no colour set is the default look rather than invisible.\n  custom: {\n    quiet:\n      \"text-placeholder hover:bg-[color-mix(in_srgb,var(--icon-button-tone,var(--text-primary))_12%,transparent)] hover:text-[var(--icon-button-tone,var(--text-primary))] focus-visible:ring-[color-mix(in_srgb,var(--icon-button-tone,var(--text-primary))_40%,transparent)]\",\n    toned:\n      \"text-[var(--icon-button-tone,var(--text-primary))] hover:bg-[color-mix(in_srgb,var(--icon-button-tone,var(--text-primary))_12%,transparent)] focus-visible:ring-[color-mix(in_srgb,var(--icon-button-tone,var(--text-primary))_40%,transparent)]\",\n  },\n};\n\n// The translucent ink on hover, as Button's secondary/ghost (B′, see HOVER_INK).\nconst ICON_BUTTON_MUTED = `text-placeholder ${HOVER_INK} hover:text-primary`;\n\n/** Which tones sit quiet at rest when `quiet` is left out. */\nconst QUIET_BY_DEFAULT: Record<ColouredTone, boolean> = {\n  danger: true,\n  warning: false,\n  info: false,\n  success: false,\n  custom: false,\n};\n\nfunction iconButtonToneClass(tone: IconButtonTone, quiet: boolean | undefined): string {\n  if (tone === \"default\") return \"\";\n  if (tone === \"muted\") return cn(ICON_BUTTON_MUTED, ICON_BUTTON_QUIET_DISABLED_REST);\n  const isQuiet = quiet ?? QUIET_BY_DEFAULT[tone];\n  const look = ICON_BUTTON_TONES[tone];\n  return isQuiet ? cn(look.quiet, ICON_BUTTON_QUIET_DISABLED_REST) : look.toned;\n}\n\n// A disabled button must not answer the pointer. The hover classes above are plain\n// `hover:` (so a caller's `className=\"hover:…\"` still replaces them through\n// tailwind-merge), which means they fire on a disabled button too — the old grey\n// icon lit up on hover while refusing the click. Rather than rewrite every hover as\n// `enabled:hover:` (which never matches the `<a>` that `buttonClasses` also styles,\n// and would out-rank a caller's plain `hover:` override), each variant pins its\n// RESTING look under `disabled:hover:`, which out-ranks any `hover:` by specificity\n// and only ever matches a disabled button.\nconst ICON_BUTTON_DISABLED_REST: Record<ButtonVariant | \"overlay\" | \"shutter\", string> = {\n  default: \"disabled:hover:bg-surface-2\",\n  secondary: \"disabled:hover:bg-transparent\",\n  ghost: \"disabled:hover:bg-transparent\",\n  danger: \"disabled:hover:bg-danger\",\n  accent: \"disabled:hover:bg-brand\",\n  link: \"disabled:hover:bg-transparent disabled:hover:no-underline\",\n  overlay: \"disabled:hover:bg-[color-mix(in_srgb,var(--bg-inverse)_60%,transparent)]\",\n  shutter: \"disabled:hover:bg-media-scrim\",\n};\n\n// The quiet looks change the glyph on hover, so they pin their resting glyph the\n// same way. A toned look keeps its glyph on hover and needs no pin.\nconst ICON_BUTTON_QUIET_DISABLED_REST = \"disabled:hover:text-placeholder\";\n\n// `variant=\"overlay\"`: a round, translucent disc for a control that sits ON a photo\n// (keksdose's receipt-scan preview: close, rotate, retake over the camera image).\n// The inverse pair, not the surface one: what has to hold is the contrast between the\n// disc and its glyph, whatever the picture underneath is, and `--bg-inverse` /\n// `--text-inverse` are the one token pair defined as each other's opposite in both\n// themes. The disc is the inverse at 60% (`color-mix`, so it stays a token a palette\n// can re-point); the blur keeps a busy background from breaking the glyph's edge.\nconst ICON_BUTTON_OVERLAY =\n  \"rounded-full bg-[color-mix(in_srgb,var(--bg-inverse)_60%,transparent)] text-inverse backdrop-blur-sm hover:bg-[color-mix(in_srgb,var(--bg-inverse)_75%,transparent)] focus-visible:ring-[var(--text-inverse)]\";\n\n// `variant=\"shutter\"`: the camera's release — keksdose's camera-capture.tsx:248 draws\n// it by hand as a 64px circle with a thick white ring round a translucent fill. It sits\n// on a live camera picture, which is dark whatever the theme, so it uses the MEDIA\n// tokens (tokens.css), white ink on a dark scrim in both themes — the inverse pair\n// `overlay` uses would give a dark ring on a dark viewfinder in dark mode. The focus ring stands off by 2px, or it would\n// merge into the ring that is part of the look.\nconst ICON_BUTTON_SHUTTER =\n  \"rounded-full border-4 border-media-ink bg-media-scrim text-media-ink backdrop-blur-sm hover:bg-media-scrim-hover focus-visible:ring-media-ink focus-visible:ring-offset-2 focus-visible:ring-offset-media-scrim-hover\";\n\nexport type IconButtonVariant = ButtonVariant | \"overlay\" | \"shutter\";\n\n/**\n * The glyph's size in px, over the one the box size implies — see\n * {@link IconButtonProps.glyphSize}.\n */\nexport type IconButtonGlyphSize = 12 | 14 | 16 | 20 | 24 | 28;\n\nconst ICON_BUTTON_GLYPH_SIZES: Record<IconButtonGlyphSize, string> = {\n  12: \"[&_svg]:size-3\",\n  14: \"[&_svg]:size-3.5\",\n  16: \"[&_svg]:size-4\",\n  20: \"[&_svg]:size-5\",\n  24: \"[&_svg]:size-6\",\n  28: \"[&_svg]:size-7\",\n};\n\n// `pending`'s spinner, the size of the glyph it replaces (the `[&_svg]` rules above\n// size only an svg, and the spinner is a bordered span).\nconst ICON_BUTTON_SPINNER: Record<IconButtonSize, string> = {\n  \"2xl\": \"size-7\",\n  xl: \"size-6\",\n  lg: \"size-5\",\n  md: \"size-5\",\n  sm: \"size-5\",\n  xs: \"size-4\",\n  \"2xs\": \"size-3.5\",\n};\nconst ICON_BUTTON_SPINNER_GLYPH: Record<IconButtonGlyphSize, string> = {\n  12: \"size-3\",\n  14: \"size-3.5\",\n  16: \"size-4\",\n  20: \"size-5\",\n  24: \"size-6\",\n  28: \"size-7\",\n};\n\nexport interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Any {@link ButtonVariant}; `overlay` — a round translucent disc for use over\n   *  an image (see `ICON_BUTTON_OVERLAY`); or `shutter` — a camera's release, a ringed\n   *  disc over the viewfinder (see `ICON_BUTTON_SHUTTER`; pair it with `size=\"2xl\"`). */\n  variant?: IconButtonVariant;\n  /** Box size: 2xl = 64px with a 28px icon (a camera shutter), xl = 48px with a 24px\n   *  icon, lg = 44px (a phone's touch target), md = 36px (matches the top bar),\n   *  sm = 32px — all three with a 20px icon;\n   *  xs = 28px with a 16px icon (an action in a list row), 2xs = 24px with a 14px\n   *  icon (an action on a chip or a tab). `glyphSize` overrides the icon. */\n  size?: IconButtonSize;\n  /**\n   * The icon's size in px, when the box's own is not the one wanted. keksdose's sync\n   * chip (app/sync-status-indicator.tsx:142) is a 24px round chip round a 20px cloud —\n   * `size=\"2xs\" glyphSize={20} shape=\"round\"` — where `2xs` alone draws 14px. A number\n   * over a new size step because the box and the glyph are two independent choices; a\n   * step per combination (`\"sm-lg\"`) would have to be named for every one.\n   */\n  glyphSize?: IconButtonGlyphSize;\n  /**\n   * A small mark on the button's corner — the sync chip's 12px check over its cloud\n   * (\"all good\", feedback #67). Rendered OUTSIDE the `<button>`, in a wrapper beside\n   * it, so the box's `[&_svg]:size-*` rule that sizes the glyph does not blow the badge\n   * up to the glyph's size; a bare `<Check />` comes out 12px, on a\n   * `--bg-surface` disc that keeps it legible over the glyph. Decorative\n   * (`aria-hidden`): the name (`label` / `aria-label`) must already carry the state.\n   * With a badge, `className` still lands on the button; the wrapper is the flex item.\n   */\n  badge?: ReactNode;\n  /**\n   * `keep`: a disabled button keeps its full colour (no 50% drop) and an ordinary\n   * cursor. For a STATUS that is also an action — the sync chip shows \"in sync\" in\n   * green and refreshes on click, and is disabled while offline or syncing, when the\n   * state it shows matters most; dimmed it read as broken (keksdose wrote\n   * `disabled:cursor-default` by hand and left out the dimming). Default `dim`.\n   */\n  disabledStyle?: \"dim\" | \"keep\";\n  /**\n   * Fill the height of the flex row it stands in, keeping its width — the delete at\n   * the end of keksdose's split line (transaction-fields:162), level with the labelled\n   * fields beside it rather than floating at half their height. {@link Button}'s\n   * `stretch`; no effect outside a flex row. With a `label`, the tooltip's wrapper is\n   * what stretches.\n   */\n  stretch?: boolean;\n  /** `round`: a circle instead of the rounded square — a compact status chip in a top\n   *  bar (keksdose's sync indicator). `overlay` is always round. */\n  shape?: \"square\" | \"round\";\n  /**\n   * The colour of `tone=\"custom\"`, as any CSS colour — a token (`var(--warning)`),\n   * ideally. Sets `--icon-button-tone` on the button, so passing a different one per\n   * state re-colours the glyph, its hover fill and its focus ring together. Passing it\n   * implies `tone=\"custom\"`. Or leave it out and set the variable yourself from a class\n   * (`className=\"[--icon-button-tone:var(--success)]\"`).\n   *\n   * Or a `{ light, dark }` pair, one colour per theme — keksdose: a raw colour that reads\n   * on the light surface (`#be123c`) is too dark on the dark one, and an inline style\n   * cannot say \"in dark mode\". See {@link IconButtonToneColor}.\n   */\n  toneColor?: IconButtonToneColor;\n  /** Glyph colour over the variant. `muted`: placeholder grey, full text colour on\n   *  hover. `danger`: the same grey at rest, `--danger` on hover and focus — for a\n   *  remove/delete that repeats down a list. `warning`: amber at rest — a flag that\n   *  wants attention. `info`: sky at rest — a notice-worthy but harmless action\n   *  (keksdose's reconcile). `success`: green at rest — a good state worth seeing.\n   *  `custom`: the colour of `toneColor` (see there). Default: the variant's own colours. See `quiet` for\n   *  turning a coloured tone's resting look the other way. */\n  tone?: IconButtonTone;\n  /**\n   * Whether a coloured tone (`danger`, `warning`, `info`) waits for the pointer:\n   * `true` is placeholder grey at rest and the tone's colour on hover and focus;\n   * `false` wears the tone's colour at rest. Left out, each tone keeps its own\n   * default — `danger` quiet, `warning` and `info` not. Ignored for `muted` (quiet by\n   * definition) and `default` (no tone).\n   *\n   * `quiet={false}` on `danger` is for a destructive action that stands ALONE, where\n   * hover-to-reveal hides it: keksdose's phone bulk bar (mobile-bulk-bar.tsx) has one\n   * \"delete all\" and a touch screen that never hovers, so it painted rose by hand.\n   * `quiet` on `warning`/`info` is the same switch the other way, for a flag repeated\n   * down a list. A boolean over the tone rather than a new tone (`danger-solid`) or an\n   * `emphasis` scale: there are exactly two resting looks, every coloured tone has\n   * both, and which one fits is a question about the SITE (alone or repeated, touch or\n   * pointer), not about the tone — so it is one switch the family shares.\n   */\n  quiet?: boolean;\n  /**\n   * Make it a toggle button. `true` sets `aria-pressed=\"true\"` and draws the \"on\" look\n   * (brand glyph on the quiet brand fill); `false` sets `aria-pressed=\"false\"` with the\n   * normal look, so a screen reader still hears a toggle that is off. Left out, it is\n   * an ordinary button with no `aria-pressed` — or whatever `aria-pressed` the caller\n   * passes. For keksdose's budget share toggle (budgets-page:291), which paints its own\n   * brand colour over a ghost button today. Keep the `aria-label` the same in both\n   * states (\"Share budget\"): the pressed state already says whether it is on.\n   */\n  pressed?: boolean;\n  /** Keep the click (and the Enter/Space that produces it) from reaching an\n   *  ancestor's handler — for an action inside a clickable table row or card.\n   *\n   *  **Not a licence to put this inside another `<button>`.** HTML forbids any\n   *  interactive content, and any element with a `tabindex`, inside a button — so\n   *  the `<span role=\"button\" tabIndex={0}>` workaround is invalid too — and ARIA\n   *  makes a button's children presentational, so a screen reader flattens the\n   *  inner one into the outer one's name and it cannot be reached at all. Make the\n   *  row's main action a button that fills the row and put this one BESIDE it, on\n   *  top:\n   *\n   *  ```tsx\n   *  <div className=\"relative\">\n   *    <button className=\"w-full pe-16 …\" onClick={open}>…row…</button>\n   *    <div className=\"absolute inset-y-0 end-2 flex items-center gap-0.5\">\n   *      <IconButton size=\"xs\" tone=\"danger\" aria-label=\"Delete\" onClick={remove}>\n   *        <Trash2 />\n   *      </IconButton>\n   *    </div>\n   *  </div>\n   *  ```\n   *\n   *  The pair look exactly like the nested version, click exactly like it, and\n   *  are two tab stops a screen reader can tell apart. */\n  stopPropagation?: boolean;\n  /**\n   * The button's name, said once: it becomes the `aria-label` AND the text of a kit\n   * {@link Tooltip} round the button.\n   *\n   * Every app writes the pair by hand. lenkbank's nine icon actions all carry\n   * `aria-label={t(x)} title={t(x)}` (shared/lib/table-columns.tsx:103,\n   * projects-page.tsx:83, setpoint/segment-list.tsx:198/207, profile-bar.tsx:128/142,\n   * shortcut-dialog.tsx:815/857/1007) — and `title` is the browser's own tooltip,\n   * which shows late, never on focus and never on touch, and looks like no other\n   * label in the kit. kastlan's RowAction (shared/components/data-table/row-action.tsx)\n   * and keksdose's icon wrappers each exist to put a Tooltip round an IconButton.\n   *\n   * A caller's own `aria-label` still wins, for the rare name that should be longer\n   * than the bubble. The bubble is visual only: it would otherwise describe the button\n   * with its own name, and a screen reader would read the same word twice. Tooltip's\n   * default placement applies — in place, or portalled inside a scroll container —\n   * unless `tooltipPortal` says otherwise.\n   */\n  label?: string;\n  /**\n   * Show `label` as visible text beside the icon at Large and Extra large (0.32,\n   * docs/text-size-harmonization.md §4, §10.8). A reader who asked for bigger type is\n   * the one an unlabelled glyph fails, and on touch the tooltip never opens. Then there\n   * is no tooltip: the words are on the button.\n   *\n   * Default `true` — except for `variant=\"overlay\"` and `\"shutter\"`, which sit ON a\n   * picture, and inside {@link CompactControls} (AppShell's top bar, `RowActions`'\n   * inline icons). `false`: the icon alone at every size, for an icon on content — a\n   * receipt overlay, a map's zoom, a viewfinder, a photo thumbnail. That must be rare;\n   * a dense row's actions belong in `RowActions`, which collapses them into a \"⋯\" menu\n   * at Large instead (§10.8). Normal never shows it. `tooltip={false}` (a universally\n   * read glyph, a dialog's ✕) keeps the icon alone too.\n   */\n  labelVisible?: boolean;\n  /** Show `label` as a tooltip. Default `true`; `false` keeps `label` as the\n   *  accessible name only — for a button whose glyph is universally read (a close ✕ in\n   *  a dialog header) or that already sits under a tooltip of its own. It also keeps the\n   *  label from showing as text at Large (see `labelVisible`). */\n  tooltip?: boolean;\n  /** Where the `label` tooltip opens. See {@link Tooltip}'s `side`. */\n  tooltipSide?: TooltipSide;\n  /** Passed to the `label` tooltip's `portal`. Left out, Tooltip decides (see there). */\n  tooltipPortal?: boolean;\n  /**\n   * Mount the `label` bubble only while it is up — {@link Tooltip}'s `lazy`. Default\n   * `true` since 0.16.0; `false` is the always-mounted in-place bubble of before.\n   *\n   * Why the label bubble can be lazy when Tooltip's default is not: this bubble\n   * describes nothing. It is wrapped round the button in a fragment precisely so that\n   * it is NOT the button's `aria-describedby` (it would repeat the button's own name),\n   * so there is no description for a lazy mount to take away — the name is the\n   * `aria-label` either way, read in browse mode and on focus alike. What the\n   * always-mounted bubble did do was sit in the DOM as a `role=\"tooltip\"` node full of\n   * text: every IconButton in a row added one to `getAllByRole(\"tooltip\")` and its label\n   * to the row's `textContent`, and two keksdose tests tripped over that (0.15.5 P6).\n   * The cost is the one {@link Tooltip}'s \"Lazy in place\" note names — a test that\n   * looked the bubble up without hovering now has to hover (or focus) first; pass\n   * `false` while it is migrated. A `disabledReason` bubble is unaffected: that one\n   * stays mounted as it was.\n   */\n  tooltipLazy?: boolean;\n  /**\n   * Busy — the action is in flight: the glyph is swapped for a spinner of the same\n   * size, the button is `aria-busy`, and clicks (and the Enter/Space and form\n   * submission they stand for) are swallowed, so a second press cannot start the\n   * action twice. {@link Button}'s `pending`, with the same contract: `aria-disabled`\n   * rather than `disabled`, so the button that was pressed keeps its focus. The name\n   * (`label` / `aria-label`) stays — `aria-busy` is what says it is working. A SWAP\n   * rather than Button's overlay: the box is square and fixed, so there is no width\n   * for the glyph to hold, and a spinner drawn over a glyph would be two marks in one\n   * 20px square.\n   */\n  pending?: boolean;\n  /**\n   * Why the action is not available — {@link Button}'s `disabledReason`, on the icon\n   * button: keksdose's accounts page cannot hide an account with a balance or delete\n   * one with bookings (accounts-page:879/913 — \"hide requires zero\", \"delete blocked\"),\n   * nor its budgets page delete the only budget (budgets-page:330), and each wrapped a\n   * natively disabled IconButton in a Tooltip that swaps its label for the reason — a\n   * bubble a keyboard never opens, since `disabled` leaves the tab order, and a reason\n   * a screen reader never hears.\n   *\n   * The same contract as Button's: `aria-disabled` instead of `disabled`, so it stays\n   * focusable and hoverable; clicks (and the Enter/Space they stand for) are swallowed\n   * — `stopPropagation` still applies, so a locked action in a clickable row does not\n   * open the row either; the reason shows in the kit {@link Tooltip} and is attached\n   * through `aria-describedby` as a `hidden` copy. The NAME stays `aria-label` /\n   * `label` — \"Delete\", described by \"The active budget cannot be deleted\" — and the\n   * bubble shows the reason in place of the label, since the glyph already says what\n   * the button is and the reason is the news. Shown even with `tooltip={false}`: a\n   * reason nobody can see is not one. Wins over `disabled`, as on Button.\n   *\n   * 0.32: at Large and on a touch screen the reason is a line under the button rather\n   * than a bubble — see `disabledReasonDisplay`.\n   */\n  disabledReason?: ReactNode;\n  /** Where `disabledReason` shows — {@link Button}'s `disabledReasonDisplay`. */\n  disabledReasonDisplay?: DisabledReasonDisplay;\n  /** This action COMMITS — {@link Button}'s `commit`: under a locked\n   *  {@link WriteLockProvider} it takes the `disabledReason` path with the lock's\n   *  reason. No effect without a lock. A {@link CommitScope} since 0.33. */\n  commit?: CommitScope;\n  /** The `<button>` element — a prop in React 19, as on {@link Button}. */\n  ref?: Ref<HTMLButtonElement>;\n  /** Only on the link form — see {@link IconButtonLinkProps}. */\n  href?: never;\n  renderLink?: never;\n  external?: never;\n  replace?: never;\n  reloadDocument?: never;\n}\n\n/**\n * `<IconButton href>`: an icon-only LINK — keksdose F2 and kastlan 45, whose icon\n * actions that navigate (a row's \"open\", a card's \"edit\" that goes to the edit page, a\n * top bar's settings cog) were `<IconButton onClick={() => navigate(…)}>`: a button that\n * changes the page, with no middle click, no \"open in new tab\" and no URL on hover.\n *\n * The same rule as {@link Button}'s `href` (see {@link ButtonLinkProps}): an in-app\n * `href` goes through `renderLink`, else the provider's `linkComponent`; an external one\n * or an in-page `#anchor` stays a plain `<a>`; `external` opens a new tab and says so to\n * a screen reader; `replace` and `reloadDocument` as on Button. The look, the `label` →\n * `aria-label` + Tooltip, the badge, `toneColor` and `stopPropagation` are the button's.\n *\n * `disabled` renders an inert `<a>` with no `href` — `role=\"link\"`, `aria-disabled`, out\n * of the tab order, dimmed — like Button's disabled link. `pressed`, `disabledReason` and\n * `disabledStyle` are a button's and are typed out: a link is not a toggle, and a link\n * that explains why it cannot be followed is a job for a disabled BUTTON.\n */\nexport interface IconButtonLinkProps\n  extends\n    Omit<AnchorHTMLAttributes<HTMLAnchorElement>, \"type\" | \"href\">,\n    Pick<\n      IconButtonProps,\n      | \"variant\"\n      | \"size\"\n      | \"glyphSize\"\n      | \"badge\"\n      | \"stretch\"\n      | \"shape\"\n      | \"toneColor\"\n      | \"tone\"\n      | \"quiet\"\n      | \"stopPropagation\"\n      | \"label\"\n      | \"labelVisible\"\n      | \"tooltip\"\n      | \"tooltipSide\"\n      | \"tooltipPortal\"\n      | \"tooltipLazy\"\n    > {\n  href: string;\n  /** See {@link ButtonLinkProps.renderLink}. */\n  renderLink?: KitLinkComponent;\n  /** See {@link ButtonLinkProps.external}. */\n  external?: boolean;\n  /** See {@link ButtonLinkProps.replace}. */\n  replace?: boolean;\n  /** See {@link ButtonLinkProps.reloadDocument}. */\n  reloadDocument?: boolean;\n  /** See {@link ButtonLinkProps.disabled}. */\n  disabled?: boolean;\n  ref?: Ref<HTMLAnchorElement>;\n  type?: never;\n  form?: never;\n  pressed?: never;\n  disabledReason?: never;\n  disabledReasonDisplay?: never;\n  commit?: never;\n  disabledStyle?: never;\n  pending?: never;\n}\n\n/**\n * Whether an IconButton draws its `label` as text (see `labelVisible`): at Large and\n * above, with a label to draw, not switched off by the caller, the variant (`overlay`,\n * `shutter`), `tooltip={false}` or a {@link CompactControls} region.\n */\nfunction useIconButtonText(\n  label: string | undefined,\n  labelVisible: boolean | undefined,\n  variant: IconButtonVariant,\n  tooltip: boolean,\n): boolean {\n  const large = useLargeText();\n  const compact = useContext(CompactControlsContext);\n  if (!large || label === undefined || label === \"\" || !tooltip) return false;\n  const visible = labelVisible ?? (!compact && variant !== \"overlay\" && variant !== \"shutter\");\n  return visible;\n}\n\n/** The visible label (see `labelVisible`). */\nfunction IconButtonText({ label }: { label: string }) {\n  return <span data-slot=\"icon-button-label\">{label}</span>;\n}\n\n/**\n * `toneColor`: one CSS colour, or one per theme.\n *\n * The pair is two custom properties on the element — `--icon-button-tone-light` and\n * `--icon-button-tone-dark` — and a class that points `--icon-button-tone` at one or the\n * other by the kit's `dark` variant (`.dark` on an ancestor, tokens.css), so the colour\n * follows a theme switch in CSS alone, with no re-render and no JS reading the theme.\n * Both values are any CSS colour; a token that already flips (`var(--warning)`) needs no\n * pair.\n */\nexport type IconButtonToneColor = string | { light: string; dark: string };\n\nconst ICON_BUTTON_TONE_PAIR =\n  \"[--icon-button-tone:var(--icon-button-tone-light)] dark:[--icon-button-tone:var(--icon-button-tone-dark)]\";\n\n/** The inline custom properties `toneColor` sets over the caller's `style`. */\nfunction toneColorStyle(toneColor: IconButtonToneColor | undefined, style: CSSProperties | undefined) {\n  if (toneColor === undefined) return style;\n  const vars: Record<string, string> =\n    typeof toneColor === \"string\"\n      ? { \"--icon-button-tone\": toneColor }\n      : { \"--icon-button-tone-light\": toneColor.light, \"--icon-button-tone-dark\": toneColor.dark };\n  return { ...style, ...vars } as CSSProperties;\n}\n\n/** Everything but the element: the look both forms of IconButton share. */\nfunction iconButtonLook({\n  variant,\n  size,\n  stretch,\n  glyphSize,\n  shape,\n  tone,\n  quiet,\n  toneColor,\n  withText = false,\n}: {\n  variant: IconButtonVariant;\n  size: IconButtonSize;\n  stretch: boolean | undefined;\n  glyphSize: IconButtonGlyphSize | undefined;\n  shape: \"square\" | \"round\";\n  tone: IconButtonTone;\n  quiet: boolean | undefined;\n  toneColor: IconButtonToneColor | undefined;\n  /** The label is drawn beside the glyph (see `labelVisible`). */\n  withText?: boolean;\n}) {\n  return cn(\n    ICON_BUTTON_BASE,\n    withText\n      ? cn(\n          \"font-medium whitespace-nowrap\",\n          stretch ? ICON_BUTTON_TEXT_STRETCH_SIZES[size] : ICON_BUTTON_TEXT_SIZES[size],\n        )\n      : stretch\n        ? ICON_BUTTON_STRETCH_SIZES[size]\n        : ICON_BUTTON_SIZES[size],\n    // With text the pill is a 48 px target at any size; the square follows its size.\n    withText ? TOUCH_TARGET_LARGE : ICON_BUTTON_TOUCH_LARGE[size],\n    glyphSize !== undefined && ICON_BUTTON_GLYPH_SIZES[glyphSize],\n    // After the size, so the overlay's `rounded-full` beats the small sizes' `rounded`.\n    variant === \"overlay\"\n      ? ICON_BUTTON_OVERLAY\n      : variant === \"shutter\"\n        ? ICON_BUTTON_SHUTTER\n        : buttonVariantClasses[variant],\n    shape === \"round\" && \"rounded-full\",\n    ICON_BUTTON_DISABLED_REST[variant],\n    iconButtonToneClass(tone, quiet),\n    toneColor !== undefined && typeof toneColor !== \"string\" && ICON_BUTTON_TONE_PAIR,\n  );\n}\n\n/** The badge beside the control, not in it — see `badge`. The wrapper is only a\n *  positioning box: the control inside it keeps its own focus ring and hit area. */\nfunction withIconButtonBadge(control: ReactElement, badge: ReactNode, stretch: boolean | undefined) {\n  if (!hasContent(badge)) return control;\n  return (\n    <span className={cn(\"relative inline-flex shrink-0\", stretch && \"self-stretch\")}>\n      {control}\n      <span\n        aria-hidden\n        data-slot=\"icon-button-badge\"\n        className=\"pointer-events-none absolute -end-0.5 -bottom-0.5 inline-flex rounded-full bg-surface [&_svg]:size-3\"\n      >\n        {badge}\n      </span>\n    </span>\n  );\n}\n\n// Declared link-first, as Button is, so `<IconButton href>` picks the link props and\n// `ComponentProps<typeof IconButton>` (the LAST signature) is still the button's.\n/**\n * An icon-only button whose `label` is its name and its tooltip.\n *\n * Destructive actions (0.49 KIT-12): a delete, revoke or erase is NOT an icon repeated in\n * every row of a list — one stray tap away, and a bin per row draws the eye to the one\n * thing nobody should do by accident. Put it in the row's menu, `RowActions` (where a\n * `tone: \"danger\"` action goes by default and opens a `ConfirmDialog` first), or in the\n * selection bar (\"2 selected\" → Delete), and confirm it through `useConfirm`. A single\n * standalone delete — a card's own, a bulk bar's — may be an IconButton\n * `tone=\"danger\"`; it still asks first.\n */\nexport function IconButton(props: IconButtonLinkProps): ReactElement;\nexport function IconButton(props: IconButtonProps): ReactElement;\nexport function IconButton(props: IconButtonProps | IconButtonLinkProps): ReactElement {\n  if (props.href !== undefined) return <IconButtonLink {...(props as IconButtonLinkProps)} />;\n  return <IconButtonElement {...(props as IconButtonProps)} />;\n}\n\nfunction IconButtonLink({\n  href,\n  renderLink,\n  external,\n  replace,\n  reloadDocument,\n  disabled,\n  variant = \"ghost\",\n  size = \"md\",\n  tone: toneProp,\n  quiet,\n  stopPropagation,\n  stretch,\n  shape = \"square\",\n  toneColor,\n  label,\n  labelVisible,\n  tooltip = true,\n  tooltipSide,\n  tooltipPortal,\n  tooltipLazy = true,\n  glyphSize,\n  badge,\n  className,\n  style,\n  target,\n  rel,\n  onClick,\n  onKeyDown,\n  children: glyph,\n  ref,\n  ...rest\n}: IconButtonLinkProps) {\n  const withText = useIconButtonText(label, labelVisible, variant, tooltip);\n  const children = withText ? (\n    <>\n      {glyph}\n      <IconButtonText label={label!} />\n    </>\n  ) : (\n    glyph\n  );\n  const kitLink = useKitLink();\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const tone = toneProp ?? (toneColor !== undefined ? \"custom\" : \"default\");\n  // Button's rule, word for word: `reloadDocument` bypasses the router, an external\n  // href or an in-page `#anchor` never reaches it.\n  const Link = reloadDocument ? undefined : pickLinkRenderer<KitLinkProps>(renderLink, kitLink, href);\n  const newTab = !disabled && (external || target === \"_blank\");\n  const name = rest[\"aria-label\"] ?? label;\n  // \"(opens in a new tab)\" joins the NAME here, not the body: an icon link has no text\n  // for an sr-only span to follow, and `aria-label` would override one anyway.\n  const ariaLabel = name !== undefined && newTab ? `${name} (${common.opensInNewTab})` : name;\n  const handleClick = (e: MouseEvent<HTMLAnchorElement>) => {\n    if (stopPropagation) e.stopPropagation();\n    onClick?.(e);\n  };\n  const handleKeyDown = (e: KeyboardEvent<HTMLAnchorElement>) => {\n    // A link activates on Enter only; that key still bubbles to a clickable row.\n    if (stopPropagation && e.key === \"Enter\") e.stopPropagation();\n    onKeyDown?.(e);\n  };\n  const cls = cn(\n    iconButtonLook({ variant, size, stretch, glyphSize, shape, tone, quiet, toneColor, withText }),\n    // BASE's `disabled:` classes never match an `<a>` — Button's disabled link look.\n    disabled && \"pointer-events-none cursor-not-allowed opacity-50\",\n    className,\n  );\n  const look = { style: toneColorStyle(toneColor, style), className: cls };\n  let control: ReactElement;\n  if (disabled) {\n    control = (\n      <a {...rest} {...look} ref={ref} role=\"link\" aria-disabled=\"true\" aria-label={ariaLabel}>\n        {children}\n      </a>\n    );\n  } else if (external || !Link) {\n    control = (\n      <a\n        {...rest}\n        {...look}\n        ref={ref}\n        href={href}\n        aria-label={ariaLabel}\n        target={external ? \"_blank\" : target}\n        rel={external ? (rel ?? \"noopener noreferrer\") : rel}\n        onClick={external ? handleClick : replacingClick(handleClick, href, replace, target)}\n        onKeyDown={handleKeyDown}\n      >\n        {children}\n      </a>\n    );\n  } else {\n    control = (\n      <RenderedButtonLink\n        render={Link}\n        {...rest}\n        {...look}\n        {...routerLinkNavigation(replace)}\n        ref={ref}\n        href={href}\n        aria-label={ariaLabel}\n        target={target}\n        rel={rel}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n      >\n        {children}\n      </RenderedButtonLink>\n    );\n  }\n  control = withIconButtonBadge(control, badge, stretch);\n  // The words are on the link at Large: a bubble would only repeat them.\n  if (!tooltip || withText || label === undefined || label === \"\") return control;\n  return (\n    // A fragment, as on the button: the bubble says what `aria-label` already does.\n    <Tooltip\n      label={label}\n      side={tooltipSide}\n      portal={tooltipPortal}\n      lazy={tooltipLazy}\n      className={stretch ? \"self-stretch\" : undefined}\n    >\n      <>{control}</>\n    </Tooltip>\n  );\n}\n\nfunction IconButtonElement({\n  variant = \"ghost\",\n  size = \"md\",\n  tone: toneProp,\n  quiet,\n  pressed,\n  stopPropagation,\n  stretch,\n  shape = \"square\",\n  toneColor,\n  label,\n  labelVisible,\n  tooltip = true,\n  tooltipSide,\n  tooltipPortal,\n  tooltipLazy = true,\n  disabledReason: ownDisabledReason,\n  disabledReasonDisplay,\n  commit,\n  pending,\n  glyphSize,\n  badge,\n  disabledStyle = \"dim\",\n  className,\n  style,\n  onClick,\n  onKeyDown,\n  children,\n  href: _href,\n  renderLink: _renderLink,\n  external: _external,\n  replace: _replace,\n  reloadDocument: _reloadDocument,\n  ref,\n  ...rest\n}: IconButtonProps) {\n  const tone = toneProp ?? (toneColor !== undefined ? \"custom\" : \"default\");\n  const keep = disabledStyle === \"keep\";\n  const withText = useIconButtonText(label, labelVisible, variant, tooltip);\n  const reasonId = useId();\n  const disabledReason = useCommitReason(commit, ownDisabledReason);\n  const locked = hasContent(disabledReason);\n  // Pending is inert like a locked button — focusable, every activation swallowed —\n  // without the locked look: the spinner is the state.\n  const inert = locked || Boolean(pending);\n  const ownDescribedBy = rest[\"aria-describedby\"];\n  const button = (\n    <button\n      ref={ref}\n      {...rest}\n      disabled={inert ? undefined : rest.disabled}\n      aria-disabled={inert || rest[\"aria-disabled\"]}\n      aria-busy={pending || rest[\"aria-busy\"]}\n      aria-describedby={locked ? (ownDescribedBy ? `${ownDescribedBy} ${reasonId}` : reasonId) : ownDescribedBy}\n      aria-label={rest[\"aria-label\"] ?? label}\n      aria-pressed={pressed ?? rest[\"aria-pressed\"]}\n      style={toneColorStyle(toneColor, style)}\n      onClick={(e) => {\n        if (stopPropagation) e.stopPropagation();\n        // `preventDefault` too: a locked (or pending) submit must not submit its form.\n        if (inert) {\n          e.preventDefault();\n          return;\n        }\n        onClick?.(e);\n      }}\n      onKeyDown={(e) => {\n        // A button turns Enter/Space into a click of its own, but the KEY still\n        // bubbles — and a clickable row listening for Enter would act on it too.\n        if (stopPropagation && (e.key === \"Enter\" || e.key === \" \")) e.stopPropagation();\n        onKeyDown?.(e);\n      }}\n      className={cn(\n        iconButtonLook({ variant, size, stretch, glyphSize, shape, tone, quiet, toneColor, withText }),\n        pressed && ICON_BUTTON_PRESSED,\n        // The disabled look for the focusable kind of disabled, as on Button.\n        locked && (keep ? \"cursor-default\" : \"cursor-not-allowed opacity-50\"),\n        keep && \"disabled:cursor-default disabled:opacity-100\",\n        pending && \"cursor-progress\",\n        className,\n      )}\n    >\n      {pending ? (\n        // Decorative, as on Button: `aria-busy` says it. Sized to the glyph it stands\n        // in for, in the glyph's colour, so the swap does not change the button's look.\n        <Spinner\n          label={null}\n          className={cn(\n            \"border-current/30 border-t-current\",\n            glyphSize !== undefined ? ICON_BUTTON_SPINNER_GLYPH[glyphSize] : ICON_BUTTON_SPINNER[size],\n          )}\n        />\n      ) : (\n        children\n      )}\n      {withText && <IconButtonText label={label!} />}\n    </button>\n  );\n  const control = withIconButtonBadge(button, badge, stretch);\n  if (locked) {\n    return (\n      // Button's shape: the reason as a line under it, or the bubble with a hidden copy\n      // for the description (see LockedReason).\n      <LockedReason\n        lock={{ reason: disabledReason, reasonId }}\n        display={disabledReasonDisplay}\n        side={tooltipSide}\n        portal={tooltipPortal}\n        className={stretch ? \"self-stretch\" : undefined}\n      >\n        {control}\n      </LockedReason>\n    );\n  }\n  // The words are on the button at Large: a bubble would only repeat them.\n  if (!tooltip || withText || label === undefined || label === \"\") return control;\n  return (\n    // A fragment, so Tooltip leaves the button's description alone: the bubble says\n    // exactly what `aria-label` already does. Lazy by default — see `tooltipLazy`.\n    <Tooltip\n      label={label}\n      side={tooltipSide}\n      portal={tooltipPortal}\n      lazy={tooltipLazy}\n      className={stretch ? \"self-stretch\" : undefined}\n    >\n      <>{control}</>\n    </Tooltip>\n  );\n}\n"],"mappings":";AAqkBS,SAsJL,UAtJK,KAkFL,YAlFK;AArkBT,SAAS,YAAY,aAAa;AAWlC,SAAS,UAAU;AACnB,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAC7B,SAAS,eAAiC;AAC1C,SAAS,uBAAuB,cAAc,kBAAkB;AAEhE,SAAS,kBAAkB,gBAAgB,4BAA4B;AACvE,SAAS,uBAAuB;AAEhC,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB,oBAAgD;AACjF,SAAS,eAAe;AACxB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAaP,MAAM,mBAAmB;AAAA,EACvB;AAAA,EACA;AACF;AAOA,MAAM,oBAAoD;AAAA;AAAA;AAAA,EAGxD,OAAO;AAAA;AAAA;AAAA,EAGP,IAAI;AAAA;AAAA;AAAA,EAGJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,OAAO;AACT;AAKA,MAAM,4BAA4D;AAAA,EAChE,OAAO;AAAA,EACP,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,OAAO;AACT;AAMA,MAAM,yBAAyD;AAAA,EAC7D,OAAO;AAAA,EACP,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,OAAO;AACT;AACA,MAAM,iCAAiE;AAAA,EACrE,OAAO;AAAA,EACP,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,OAAO;AACT;AAOA,MAAM,0BAA0D;AAAA,EAC9D,OAAO;AAAA,EACP,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,OAAO;AACT;AAqBA,MAAM,oBAA4E;AAAA,EAChF,QAAQ;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA,SAAS;AAAA,IACP,OAAO;AAAA;AAAA;AAAA,IAGP,OAAO;AAAA,EACT;AAAA,EACA,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA,SAAS;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAIA,QAAQ;AAAA,IACN,OACE;AAAA,IACF,OACE;AAAA,EACJ;AACF;AAGA,MAAM,oBAAoB,oBAAoB,SAAS;AAGvD,MAAM,mBAAkD;AAAA,EACtD,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AAAA,EACT,QAAQ;AACV;AAEA,SAAS,oBAAoB,MAAsB,OAAoC;AACrF,MAAI,SAAS,UAAW,QAAO;AAC/B,MAAI,SAAS,QAAS,QAAO,GAAG,mBAAmB,+BAA+B;AAClF,QAAM,UAAU,SAAS,iBAAiB,IAAI;AAC9C,QAAM,OAAO,kBAAkB,IAAI;AACnC,SAAO,UAAU,GAAG,KAAK,OAAO,+BAA+B,IAAI,KAAK;AAC1E;AAUA,MAAM,4BAAmF;AAAA,EACvF,SAAS;AAAA,EACT,WAAW;AAAA,EACX,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AACX;AAIA,MAAM,kCAAkC;AASxC,MAAM,sBACJ;AAQF,MAAM,sBACJ;AAUF,MAAM,0BAA+D;AAAA,EACnE,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAIA,MAAM,sBAAsD;AAAA,EAC1D,OAAO;AAAA,EACP,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,OAAO;AACT;AACA,MAAM,4BAAiE;AAAA,EACrE,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AA4SA,SAAS,kBACP,OACA,cACA,SACA,SACS;AACT,QAAM,QAAQ,aAAa;AAC3B,QAAM,UAAU,WAAW,sBAAsB;AACjD,MAAI,CAAC,SAAS,UAAU,UAAa,UAAU,MAAM,CAAC,QAAS,QAAO;AACtE,QAAM,UAAU,iBAAiB,CAAC,WAAW,YAAY,aAAa,YAAY;AAClF,SAAO;AACT;AAGA,SAAS,eAAe,EAAE,MAAM,GAAsB;AACpD,SAAO,oBAAC,UAAK,aAAU,qBAAqB,iBAAM;AACpD;AAcA,MAAM,wBACJ;AAGF,SAAS,eAAe,WAA4C,OAAkC;AACpG,MAAI,cAAc,OAAW,QAAO;AACpC,QAAM,OACJ,OAAO,cAAc,WACjB,EAAE,sBAAsB,UAAU,IAClC,EAAE,4BAA4B,UAAU,OAAO,2BAA2B,UAAU,KAAK;AAC/F,SAAO,EAAE,GAAG,OAAO,GAAG,KAAK;AAC7B;AAGA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AACb,GAWG;AACD,SAAO;AAAA,IACL;AAAA,IACA,WACI;AAAA,MACE;AAAA,MACA,UAAU,+BAA+B,IAAI,IAAI,uBAAuB,IAAI;AAAA,IAC9E,IACA,UACE,0BAA0B,IAAI,IAC9B,kBAAkB,IAAI;AAAA;AAAA,IAE5B,WAAW,qBAAqB,wBAAwB,IAAI;AAAA,IAC5D,cAAc,UAAa,wBAAwB,SAAS;AAAA;AAAA,IAE5D,YAAY,YACR,sBACA,YAAY,YACV,sBACA,qBAAqB,OAAO;AAAA,IAClC,UAAU,WAAW;AAAA,IACrB,0BAA0B,OAAO;AAAA,IACjC,oBAAoB,MAAM,KAAK;AAAA,IAC/B,cAAc,UAAa,OAAO,cAAc,YAAY;AAAA,EAC9D;AACF;AAIA,SAAS,oBAAoB,SAAuB,OAAkB,SAA8B;AAClG,MAAI,CAAC,WAAW,KAAK,EAAG,QAAO;AAC/B,SACE,qBAAC,UAAK,WAAW,GAAG,iCAAiC,WAAW,cAAc,GAC3E;AAAA;AAAA,IACD;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,QACX,aAAU;AAAA,QACV,WAAU;AAAA,QAET;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;AAiBO,SAAS,WAAW,OAA4D;AACrF,MAAI,MAAM,SAAS,OAAW,QAAO,oBAAC,kBAAgB,GAAI,OAA+B;AACzF,SAAO,oBAAC,qBAAmB,GAAI,OAA2B;AAC5D;AAEA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACL,GAAwB;AACtB,QAAM,WAAW,kBAAkB,OAAO,cAAc,SAAS,OAAO;AACxE,QAAM,WAAW,WACf,iCACG;AAAA;AAAA,IACD,oBAAC,kBAAe,OAAe;AAAA,KACjC,IAEA;AAEF,QAAM,UAAU,WAAW;AAC3B,QAAM,SAAS,aAAa,UAAU,qBAAqB;AAC3D,QAAM,OAAO,aAAa,cAAc,SAAY,WAAW;AAG/D,QAAM,OAAO,iBAAiB,SAAY,iBAA+B,YAAY,SAAS,IAAI;AAClG,QAAM,SAAS,CAAC,aAAa,YAAY,WAAW;AACpD,QAAM,OAAO,KAAK,YAAY,KAAK;AAGnC,QAAM,YAAY,SAAS,UAAa,SAAS,GAAG,IAAI,KAAK,OAAO,aAAa,MAAM;AACvF,QAAM,cAAc,CAAC,MAAqC;AACxD,QAAI,gBAAiB,GAAE,gBAAgB;AACvC,cAAU,CAAC;AAAA,EACb;AACA,QAAM,gBAAgB,CAAC,MAAwC;AAE7D,QAAI,mBAAmB,EAAE,QAAQ,QAAS,GAAE,gBAAgB;AAC5D,gBAAY,CAAC;AAAA,EACf;AACA,QAAM,MAAM;AAAA,IACV,eAAe,EAAE,SAAS,MAAM,SAAS,WAAW,OAAO,MAAM,OAAO,WAAW,SAAS,CAAC;AAAA;AAAA,IAE7F,YAAY;AAAA,IACZ;AAAA,EACF;AACA,QAAM,OAAO,EAAE,OAAO,eAAe,WAAW,KAAK,GAAG,WAAW,IAAI;AACvE,MAAI;AACJ,MAAI,UAAU;AACZ,cACE,oBAAC,OAAG,GAAG,MAAO,GAAG,MAAM,KAAU,MAAK,QAAO,iBAAc,QAAO,cAAY,WAC3E,UACH;AAAA,EAEJ,WAAW,YAAY,CAAC,MAAM;AAC5B,cACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACH,GAAG;AAAA,QACJ;AAAA,QACA;AAAA,QACA,cAAY;AAAA,QACZ,QAAQ,WAAW,WAAW;AAAA,QAC9B,KAAK,WAAY,OAAO,wBAAyB;AAAA,QACjD,SAAS,WAAW,cAAc,eAAe,aAAa,MAAM,SAAS,MAAM;AAAA,QACnF,WAAW;AAAA,QAEV;AAAA;AAAA,IACH;AAAA,EAEJ,OAAO;AACL,cACE;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ;AAAA,QACP,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG,qBAAqB,OAAO;AAAA,QAChC;AAAA,QACA;AAAA,QACA,cAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA,SAAS;AAAA,QACT,WAAW;AAAA,QAEV;AAAA;AAAA,IACH;AAAA,EAEJ;AACA,YAAU,oBAAoB,SAAS,OAAO,OAAO;AAErD,MAAI,CAAC,WAAW,YAAY,UAAU,UAAa,UAAU,GAAI,QAAO;AACxE;AAAA;AAAA,IAEE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,WAAW,UAAU,iBAAiB;AAAA,QAEtC,0CAAG,mBAAQ;AAAA;AAAA,IACb;AAAA;AAEJ;AAEA,SAAS,kBAAkB;AAAA,EACzB,UAAU;AAAA,EACV,OAAO;AAAA,EACP,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,QAAM,OAAO,aAAa,cAAc,SAAY,WAAW;AAC/D,QAAM,OAAO,kBAAkB;AAC/B,QAAM,WAAW,kBAAkB,OAAO,cAAc,SAAS,OAAO;AACxE,QAAM,WAAW,MAAM;AACvB,QAAM,iBAAiB,gBAAgB,QAAQ,iBAAiB;AAChE,QAAM,SAAS,WAAW,cAAc;AAGxC,QAAM,QAAQ,UAAU,QAAQ,OAAO;AACvC,QAAM,iBAAiB,KAAK,kBAAkB;AAC9C,QAAM,SACJ;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACC,GAAG;AAAA,MACJ,UAAU,QAAQ,SAAY,KAAK;AAAA,MACnC,iBAAe,SAAS,KAAK,eAAe;AAAA,MAC5C,aAAW,WAAW,KAAK,WAAW;AAAA,MACtC,oBAAkB,SAAU,iBAAiB,GAAG,cAAc,IAAI,QAAQ,KAAK,WAAY;AAAA,MAC3F,cAAY,KAAK,YAAY,KAAK;AAAA,MAClC,gBAAc,WAAW,KAAK,cAAc;AAAA,MAC5C,OAAO,eAAe,WAAW,KAAK;AAAA,MACtC,SAAS,CAAC,MAAM;AACd,YAAI,gBAAiB,GAAE,gBAAgB;AAEvC,YAAI,OAAO;AACT,YAAE,eAAe;AACjB;AAAA,QACF;AACA,kBAAU,CAAC;AAAA,MACb;AAAA,MACA,WAAW,CAAC,MAAM;AAGhB,YAAI,oBAAoB,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAM,GAAE,gBAAgB;AAC/E,oBAAY,CAAC;AAAA,MACf;AAAA,MACA,WAAW;AAAA,QACT,eAAe,EAAE,SAAS,MAAM,SAAS,WAAW,OAAO,MAAM,OAAO,WAAW,SAAS,CAAC;AAAA,QAC7F,WAAW;AAAA;AAAA,QAEX,WAAW,OAAO,mBAAmB;AAAA,QACrC,QAAQ;AAAA,QACR,WAAW;AAAA,QACX;AAAA,MACF;AAAA,MAEC;AAAA;AAAA;AAAA;AAAA,UAGC;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,cACP,WAAW;AAAA,gBACT;AAAA,gBACA,cAAc,SAAY,0BAA0B,SAAS,IAAI,oBAAoB,IAAI;AAAA,cAC3F;AAAA;AAAA,UACF;AAAA,YAEA;AAAA,QAED,YAAY,oBAAC,kBAAe,OAAe;AAAA;AAAA;AAAA,EAC9C;AAEF,QAAM,UAAU,oBAAoB,QAAQ,OAAO,OAAO;AAC1D,MAAI,QAAQ;AACV;AAAA;AAAA;AAAA,MAGE;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,EAAE,QAAQ,gBAAgB,SAAS;AAAA,UACzC,SAAS;AAAA,UACT,MAAM;AAAA,UACN,QAAQ;AAAA,UACR,WAAW,UAAU,iBAAiB;AAAA,UAErC;AAAA;AAAA,MACH;AAAA;AAAA,EAEJ;AAEA,MAAI,CAAC,WAAW,YAAY,UAAU,UAAa,UAAU,GAAI,QAAO;AACxE;AAAA;AAAA;AAAA,IAGE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,WAAW,UAAU,iBAAiB;AAAA,QAEtC,0CAAG,mBAAQ;AAAA;AAAA,IACb;AAAA;AAEJ;","names":[]}

package/dist/components/icon-picker.js

@@ -47,9 +47,7 @@ function IconPicker({
   const words = useMemo(() => searchWords(query, locale), [query, locale]);
   const needle = words.length > 0;
   const visible = useMemo(
-    () => needle ? options.filter(
-      (o) => matchesSearch(words, [o.label, ...o.keywords ?? []], locale)
-    ) : options,
+    () => needle ? options.filter((o) => matchesSearch(words, [o.label, ...o.keywords ?? []], locale)) : options,
     [options, needle, words, locale]
   );
   const byValue = useMemo(() => new Map(options.map((o) => [o.value, o])), [options]);
@@ -100,10 +98,7 @@ function IconPicker({
               const Icon = item.key === null ? void 0 : byValue.get(item.key)?.icon;
               return Icon ? /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, className: TILE_SIZE[size].glyph }) : null;
             },
-            tileClassName: (_item, selected) => cn(
-              selected ? "text-primary" : "text-secondary",
-              tileClassName
-            )
+            tileClassName: (_item, selected) => cn(selected ? "text-primary" : "text-secondary", tileClassName)
           }
         )
       }

package/dist/components/icon-picker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/icon-picker.tsx"],"sourcesContent":["import { useId, useMemo, useState } from \"react\";\nimport type { ComponentPropsWithRef, ComponentType, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels, useKitLocale, type LabelOverride } from \"../i18n/kit-labels\";\nimport { SearchField } from \"./search-field\";\nimport { TILE_SIZE, TileRadioGroup } from \"./tile-radio\";\nimport type { TileItem, TileSize } from \"./tile-radio\";\nimport { hasContent } from \"../lib/presence\";\nimport { matchesSearch, searchWords } from \"../lib/text-match\";\nimport { LabelStrip, useFieldMessages, type FieldHelpProps } from \"./field-parts\";\nimport { DEFAULT_ICON_PICKER_LABELS } from \"./icon-picker-labels\";\n\nexport interface IconPickerLabels {\n  /** The \"no icon\" tile's name, when `allowNone` is set. */\n  none: string;\n  /** Describes the group while `mixed` is set — a bulk edit over rows that disagree. */\n  mixed: string;\n  /** The search box's accessible name and placeholder, when `searchable` is set. */\n  search: string;\n  /** Shown in place of the tiles when the search matches nothing. */\n  noResults: string;\n  /** Announced as the search narrows the grid. Receives the number of matches. */\n  resultCount: (count: number) => string;\n}\n\n// Defined in ./icon-picker-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_ICON_PICKER_LABELS };\n\nexport interface IconOption<T extends string> {\n  value: T;\n  /** A Lucide icon, or any component that takes a `className`. Rendered `aria-hidden`\n   *  — the tile's name is `label`. */\n  icon: ComponentType<{ className?: string; \"aria-hidden\"?: boolean }>;\n  /** What the symbol IS, in the user's language (\"Game controller\") — not the icon\n   *  library's identifier (`Gamepad2`), which is nobody's word for anything. */\n  label: string;\n  /** More words the search matches (\"games\", \"play\"), besides `label`. */\n  keywords?: string[];\n  /** A remark read after the name and shown under it in the bubble (\"used by\n   *  Leisure\"). The tile wears a dot while it has one. */\n  note?: string;\n  /** Out of the choice and out of reach — skipped by the arrow keys and Tab. With a\n   *  `disabledReason` the tile stays reachable instead and says why. */\n  disabled?: boolean;\n  /**\n   * Why THIS symbol cannot be chosen right now — {@link SwatchOption.disabledReason}'s\n   * twin: the tile is `aria-disabled` but reachable by Tab and the arrow keys, the reason\n   * shows in its bubble under its name and describes it, and choosing it does nothing.\n   * Wins over `disabled`. Kept through a search like any other tile.\n   */\n  disabledReason?: ReactNode;\n}\n\nexport interface IconPickerProps<T extends string>\n  extends Omit<ComponentPropsWithRef<\"div\">, \"onChange\" | \"children\" | \"defaultValue\">,\n    FieldHelpProps {\n  options: IconOption<T>[];\n  /** The chosen icon, or `null` for none. */\n  value: T | null;\n  onChange: (value: T | null) => void;\n  /** Lead with a \"no icon\" tile whose value is `null`. */\n  allowNone?: boolean;\n  /** See {@link SwatchPickerProps.mixed}: nothing is checked, and the group is\n   *  described as mixed. */\n  mixed?: boolean;\n  /**\n   * \"automatic\" (default): an arrow key moves AND chooses, the APG radio group.\n   * \"manual\": arrows move focus only; Space or Enter chooses. For a picker whose every\n   * change is expensive — a bulk edit that saves as it goes.\n   */\n  activation?: \"automatic\" | \"manual\";\n  /** A search box above the grid, matching `label` and `keywords`. For a set large\n   *  enough that scanning it is slower than typing. */\n  searchable?: boolean;\n  /** 28 / 32 / 44px tiles. Default \"md\"; \"lg\" is the touch-target size. */\n  size?: TileSize;\n  /**\n   * Classes for every tile's frame, merged after the kit's own — so a caller's\n   * `size-*` beats `size`'s. For a tile that has to follow a container query or a\n   * breakpoint (keksdose grows its tiles to 40px in a narrow card:\n   * `tileClassName=\"@max-md:size-10\"`) without reaching into the kit's markup with an\n   * `[&_[role=radio]]` selector. The swatch dot / glyph inside keeps `size`'s\n   * dimensions; the tile grows round it.\n   */\n  tileClassName?: string;\n  disabled?: boolean;\n  labels?: LabelOverride<IconPickerLabels>;\n  /**\n   * An 11px static label in a strip over the picker, naming the grid — keksdose K2,\n   * {@link SwatchPickerProps.label}'s twin: a symbol picker standing in a form row\n   * beside labelled fields, with its label on their line. With `searchable` the strip\n   * is over the search box too, which keeps its own name. With a label, `className`\n   * styles the wrapper.\n   */\n  label?: ReactNode;\n  /** A {@link FieldHint} beside the label. Only with `label`. {@link Select}'s rule since\n   *  0.34 (DUP-2, refactor audit 2026-10): plain TEXT, and a FieldHint at Large and on a\n   *  touch screen (§4), is a caption under the grid, describing it. */\n  hint?: ReactNode;\n}\n\n/**\n * A grid of symbols that is one radio group, with an optional search.\n *\n * Name the group with `aria-label` or `aria-labelledby`. The name lands on the\n * radiogroup itself, not on the outer box: with `searchable` the outer box also holds\n * the search field, which has a name of its own.\n *\n * Keyboard is {@link SwatchPicker}'s: one tab stop, arrows to move (flipped in a\n * right-to-left page), Home and End.\n */\nexport function IconPicker<T extends string>({\n  options,\n  value,\n  onChange,\n  allowNone = false,\n  mixed = false,\n  activation = \"automatic\",\n  searchable = false,\n  size = \"md\",\n  tileClassName,\n  disabled = false,\n  labels,\n  label,\n  hint,\n  help,\n  className,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  \"aria-describedby\": ariaDescribedBy,\n  ...rest\n}: IconPickerProps<T>) {\n  const text = useKitLabels(\"iconPicker\", DEFAULT_ICON_PICKER_LABELS, labels);\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const locale = useKitLocale();\n  const mixedId = useId();\n  const labelId = useId();\n  const labelled = hasContent(label);\n  // The label line's \"?\", or the caption under the grid (DUP-2). Only with a label, the\n  // help's \"?\" too (0.36).\n  const messages = useFieldMessages({\n    hint: labelled ? hint : undefined,\n    help: labelled ? help : undefined,\n    name: label,\n    describedBy: ariaDescribedBy,\n    reasonId: mixed && mixedId,\n  });\n  const [query, setQuery] = useState(\"\");\n  // Case- and accent-insensitive, so \"cafe\" finds \"Café\" — every kit list's fold (DUP-5).\n  // Every word of the query, in the label or a keyword (0.51.4).\n  const words = useMemo(() => searchWords(query, locale), [query, locale]);\n  const needle = words.length > 0;\n\n  const visible = useMemo(\n    () =>\n      needle\n        ? options.filter((o) =>\n            matchesSearch(words, [o.label, ...(o.keywords ?? [])], locale),\n          )\n        : options,\n    [options, needle, words, locale],\n  );\n  const byValue = useMemo(() => new Map(options.map((o) => [o.value, o])), [options]);\n  const items: TileItem<T>[] = [\n    // \"None\" stays through a search: it is the way back to no icon, and it matches\n    // no word anybody would type for it.\n    ...(allowNone ? [{ key: null, label: text.none }] : []),\n    ...visible.map((o) => ({\n      key: o.value,\n      label: o.label,\n      note: o.note,\n      disabled: o.disabled,\n      disabledReason: o.disabledReason,\n    })),\n  ];\n\n  const picker = (\n    <div {...rest} className={cn(\"space-y-2\", !labelled && className)}>\n      {searchable && (\n        <SearchField\n          value={query}\n          onChange={setQuery}\n          aria-label={text.search}\n          clearLabel={common.clear}\n          disabled={disabled}\n        />\n      )}\n      <div\n        role=\"radiogroup\"\n        aria-label={ariaLabel}\n        // The strip's label names the GRID, unless the caller named it already.\n        aria-labelledby={labelled && ariaLabel === undefined && ariaLabelledBy === undefined ? labelId : ariaLabelledBy}\n        aria-describedby={messages.describedBy}\n        aria-disabled={disabled || undefined}\n        className=\"flex flex-wrap items-center gap-1.5\"\n      >\n        <TileRadioGroup\n          items={items}\n          checked={mixed ? undefined : value}\n          // A locked tile is refused by the tiles themselves; asked again here so a\n          // reason can never become a change, whatever the tiles do.\n          onSelect={(next) => {\n            if (!hasContent(next === null ? undefined : byValue.get(next)?.disabledReason)) onChange(next);\n          }}\n          activation={activation}\n          disabled={disabled}\n          size={size}\n          renderTile={(item) => {\n            const Icon = item.key === null ? undefined : byValue.get(item.key)?.icon;\n            return Icon ? <Icon aria-hidden className={TILE_SIZE[size].glyph} /> : null;\n          }}\n          tileClassName={(_item, selected) =>\n            cn(\n              selected ? \"text-primary\" : \"text-secondary\",\n              tileClassName,\n            )\n          }\n        />\n      </div>\n      {needle && visible.length === 0 && (\n        <p className=\"text-xs text-muted\">{text.noResults}</p>\n      )}\n      {mixed && (\n        <span id={mixedId} hidden>\n          {text.mixed}\n        </span>\n      )}\n      {searchable && (\n        // Typing moves no focus and the grid changes silently, so the count is said.\n        // `sr-only-fixed`: this sits inside a consumer's markup and must not extend\n        // the document height (see tokens.css).\n        <span role=\"status\" aria-live=\"polite\" aria-atomic className=\"sr-only-fixed\">\n          {needle ? text.resultCount(visible.length) : \"\"}\n        </span>\n      )}\n    </div>\n  );\n  if (!labelled) return picker;\n  return (\n    <LabelStrip labelId={labelId} label={label} hint={messages.labelHint} disabled={disabled} className={className}>\n      {picker}\n      {messages.below}\n    </LabelStrip>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/icon-picker.tsx"],"sourcesContent":["import { useId, useMemo, useState } from \"react\";\nimport type { ComponentPropsWithRef, ComponentType, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels, useKitLocale, type LabelOverride } from \"../i18n/kit-labels\";\nimport { SearchField } from \"./search-field\";\nimport { TILE_SIZE, TileRadioGroup } from \"./tile-radio\";\nimport type { TileItem, TileSize } from \"./tile-radio\";\nimport { hasContent } from \"../lib/presence\";\nimport { matchesSearch, searchWords } from \"../lib/text-match\";\nimport { LabelStrip, useFieldMessages, type FieldHelpProps } from \"./field-parts\";\nimport { DEFAULT_ICON_PICKER_LABELS } from \"./icon-picker-labels\";\n\nexport interface IconPickerLabels {\n  /** The \"no icon\" tile's name, when `allowNone` is set. */\n  none: string;\n  /** Describes the group while `mixed` is set — a bulk edit over rows that disagree. */\n  mixed: string;\n  /** The search box's accessible name and placeholder, when `searchable` is set. */\n  search: string;\n  /** Shown in place of the tiles when the search matches nothing. */\n  noResults: string;\n  /** Announced as the search narrows the grid. Receives the number of matches. */\n  resultCount: (count: number) => string;\n}\n\n// Defined in ./icon-picker-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_ICON_PICKER_LABELS };\n\nexport interface IconOption<T extends string> {\n  value: T;\n  /** A Lucide icon, or any component that takes a `className`. Rendered `aria-hidden`\n   *  — the tile's name is `label`. */\n  icon: ComponentType<{ className?: string; \"aria-hidden\"?: boolean }>;\n  /** What the symbol IS, in the user's language (\"Game controller\") — not the icon\n   *  library's identifier (`Gamepad2`), which is nobody's word for anything. */\n  label: string;\n  /** More words the search matches (\"games\", \"play\"), besides `label`. */\n  keywords?: string[];\n  /** A remark read after the name and shown under it in the bubble (\"used by\n   *  Leisure\"). The tile wears a dot while it has one. */\n  note?: string;\n  /** Out of the choice and out of reach — skipped by the arrow keys and Tab. With a\n   *  `disabledReason` the tile stays reachable instead and says why. */\n  disabled?: boolean;\n  /**\n   * Why THIS symbol cannot be chosen right now — {@link SwatchOption.disabledReason}'s\n   * twin: the tile is `aria-disabled` but reachable by Tab and the arrow keys, the reason\n   * shows in its bubble under its name and describes it, and choosing it does nothing.\n   * Wins over `disabled`. Kept through a search like any other tile.\n   */\n  disabledReason?: ReactNode;\n}\n\nexport interface IconPickerProps<T extends string>\n  extends Omit<ComponentPropsWithRef<\"div\">, \"onChange\" | \"children\" | \"defaultValue\">, FieldHelpProps {\n  options: IconOption<T>[];\n  /** The chosen icon, or `null` for none. */\n  value: T | null;\n  onChange: (value: T | null) => void;\n  /** Lead with a \"no icon\" tile whose value is `null`. */\n  allowNone?: boolean;\n  /** See {@link SwatchPickerProps.mixed}: nothing is checked, and the group is\n   *  described as mixed. */\n  mixed?: boolean;\n  /**\n   * \"automatic\" (default): an arrow key moves AND chooses, the APG radio group.\n   * \"manual\": arrows move focus only; Space or Enter chooses. For a picker whose every\n   * change is expensive — a bulk edit that saves as it goes.\n   */\n  activation?: \"automatic\" | \"manual\";\n  /** A search box above the grid, matching `label` and `keywords`. For a set large\n   *  enough that scanning it is slower than typing. */\n  searchable?: boolean;\n  /** 28 / 32 / 44px tiles. Default \"md\"; \"lg\" is the touch-target size. */\n  size?: TileSize;\n  /**\n   * Classes for every tile's frame, merged after the kit's own — so a caller's\n   * `size-*` beats `size`'s. For a tile that has to follow a container query or a\n   * breakpoint (keksdose grows its tiles to 40px in a narrow card:\n   * `tileClassName=\"@max-md:size-10\"`) without reaching into the kit's markup with an\n   * `[&_[role=radio]]` selector. The swatch dot / glyph inside keeps `size`'s\n   * dimensions; the tile grows round it.\n   */\n  tileClassName?: string;\n  disabled?: boolean;\n  labels?: LabelOverride<IconPickerLabels>;\n  /**\n   * An 11px static label in a strip over the picker, naming the grid — keksdose K2,\n   * {@link SwatchPickerProps.label}'s twin: a symbol picker standing in a form row\n   * beside labelled fields, with its label on their line. With `searchable` the strip\n   * is over the search box too, which keeps its own name. With a label, `className`\n   * styles the wrapper.\n   */\n  label?: ReactNode;\n  /** A {@link FieldHint} beside the label. Only with `label`. {@link Select}'s rule since\n   *  0.34 (DUP-2, refactor audit 2026-10): plain TEXT, and a FieldHint at Large and on a\n   *  touch screen (§4), is a caption under the grid, describing it. */\n  hint?: ReactNode;\n}\n\n/**\n * A grid of symbols that is one radio group, with an optional search.\n *\n * Name the group with `aria-label` or `aria-labelledby`. The name lands on the\n * radiogroup itself, not on the outer box: with `searchable` the outer box also holds\n * the search field, which has a name of its own.\n *\n * Keyboard is {@link SwatchPicker}'s: one tab stop, arrows to move (flipped in a\n * right-to-left page), Home and End.\n */\nexport function IconPicker<T extends string>({\n  options,\n  value,\n  onChange,\n  allowNone = false,\n  mixed = false,\n  activation = \"automatic\",\n  searchable = false,\n  size = \"md\",\n  tileClassName,\n  disabled = false,\n  labels,\n  label,\n  hint,\n  help,\n  className,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  \"aria-describedby\": ariaDescribedBy,\n  ...rest\n}: IconPickerProps<T>) {\n  const text = useKitLabels(\"iconPicker\", DEFAULT_ICON_PICKER_LABELS, labels);\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const locale = useKitLocale();\n  const mixedId = useId();\n  const labelId = useId();\n  const labelled = hasContent(label);\n  // The label line's \"?\", or the caption under the grid (DUP-2). Only with a label, the\n  // help's \"?\" too (0.36).\n  const messages = useFieldMessages({\n    hint: labelled ? hint : undefined,\n    help: labelled ? help : undefined,\n    name: label,\n    describedBy: ariaDescribedBy,\n    reasonId: mixed && mixedId,\n  });\n  const [query, setQuery] = useState(\"\");\n  // Case- and accent-insensitive, so \"cafe\" finds \"Café\" — every kit list's fold (DUP-5).\n  // Every word of the query, in the label or a keyword (0.51.4).\n  const words = useMemo(() => searchWords(query, locale), [query, locale]);\n  const needle = words.length > 0;\n\n  const visible = useMemo(\n    () => (needle ? options.filter((o) => matchesSearch(words, [o.label, ...(o.keywords ?? [])], locale)) : options),\n    [options, needle, words, locale],\n  );\n  const byValue = useMemo(() => new Map(options.map((o) => [o.value, o])), [options]);\n  const items: TileItem<T>[] = [\n    // \"None\" stays through a search: it is the way back to no icon, and it matches\n    // no word anybody would type for it.\n    ...(allowNone ? [{ key: null, label: text.none }] : []),\n    ...visible.map((o) => ({\n      key: o.value,\n      label: o.label,\n      note: o.note,\n      disabled: o.disabled,\n      disabledReason: o.disabledReason,\n    })),\n  ];\n\n  const picker = (\n    <div {...rest} className={cn(\"space-y-2\", !labelled && className)}>\n      {searchable && (\n        <SearchField\n          value={query}\n          onChange={setQuery}\n          aria-label={text.search}\n          clearLabel={common.clear}\n          disabled={disabled}\n        />\n      )}\n      <div\n        role=\"radiogroup\"\n        aria-label={ariaLabel}\n        // The strip's label names the GRID, unless the caller named it already.\n        aria-labelledby={labelled && ariaLabel === undefined && ariaLabelledBy === undefined ? labelId : ariaLabelledBy}\n        aria-describedby={messages.describedBy}\n        aria-disabled={disabled || undefined}\n        className=\"flex flex-wrap items-center gap-1.5\"\n      >\n        <TileRadioGroup\n          items={items}\n          checked={mixed ? undefined : value}\n          // A locked tile is refused by the tiles themselves; asked again here so a\n          // reason can never become a change, whatever the tiles do.\n          onSelect={(next) => {\n            if (!hasContent(next === null ? undefined : byValue.get(next)?.disabledReason)) onChange(next);\n          }}\n          activation={activation}\n          disabled={disabled}\n          size={size}\n          renderTile={(item) => {\n            const Icon = item.key === null ? undefined : byValue.get(item.key)?.icon;\n            return Icon ? <Icon aria-hidden className={TILE_SIZE[size].glyph} /> : null;\n          }}\n          tileClassName={(_item, selected) => cn(selected ? \"text-primary\" : \"text-secondary\", tileClassName)}\n        />\n      </div>\n      {needle && visible.length === 0 && <p className=\"text-xs text-muted\">{text.noResults}</p>}\n      {mixed && (\n        <span id={mixedId} hidden>\n          {text.mixed}\n        </span>\n      )}\n      {searchable && (\n        // Typing moves no focus and the grid changes silently, so the count is said.\n        // `sr-only-fixed`: this sits inside a consumer's markup and must not extend\n        // the document height (see tokens.css).\n        <span role=\"status\" aria-live=\"polite\" aria-atomic className=\"sr-only-fixed\">\n          {needle ? text.resultCount(visible.length) : \"\"}\n        </span>\n      )}\n    </div>\n  );\n  if (!labelled) return picker;\n  return (\n    <LabelStrip labelId={labelId} label={label} hint={messages.labelHint} disabled={disabled} className={className}>\n      {picker}\n      {messages.below}\n    </LabelStrip>\n  );\n}\n"],"mappings":";AA2KI,SAEI,KAFJ;AA3KJ,SAAS,OAAO,SAAS,gBAAgB;AAEzC,SAAS,UAAU;AACnB,SAAS,uBAAuB,cAAc,oBAAwC;AACtF,SAAS,mBAAmB;AAC5B,SAAS,WAAW,sBAAsB;AAE1C,SAAS,kBAAkB;AAC3B,SAAS,eAAe,mBAAmB;AAC3C,SAAS,YAAY,wBAA6C;AAClE,SAAS,kCAAkC;AAoGpC,SAAS,WAA6B;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,aAAa;AAAA,EACb,OAAO;AAAA,EACP;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,GAAG;AACL,GAAuB;AACrB,QAAM,OAAO,aAAa,cAAc,4BAA4B,MAAM;AAC1E,QAAM,SAAS,aAAa,UAAU,qBAAqB;AAC3D,QAAM,SAAS,aAAa;AAC5B,QAAM,UAAU,MAAM;AACtB,QAAM,UAAU,MAAM;AACtB,QAAM,WAAW,WAAW,KAAK;AAGjC,QAAM,WAAW,iBAAiB;AAAA,IAChC,MAAM,WAAW,OAAO;AAAA,IACxB,MAAM,WAAW,OAAO;AAAA,IACxB,MAAM;AAAA,IACN,aAAa;AAAA,IACb,UAAU,SAAS;AAAA,EACrB,CAAC;AACD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,EAAE;AAGrC,QAAM,QAAQ,QAAQ,MAAM,YAAY,OAAO,MAAM,GAAG,CAAC,OAAO,MAAM,CAAC;AACvE,QAAM,SAAS,MAAM,SAAS;AAE9B,QAAM,UAAU;AAAA,IACd,MAAO,SAAS,QAAQ,OAAO,CAAC,MAAM,cAAc,OAAO,CAAC,EAAE,OAAO,GAAI,EAAE,YAAY,CAAC,CAAE,GAAG,MAAM,CAAC,IAAI;AAAA,IACxG,CAAC,SAAS,QAAQ,OAAO,MAAM;AAAA,EACjC;AACA,QAAM,UAAU,QAAQ,MAAM,IAAI,IAAI,QAAQ,IAAI,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC;AAClF,QAAM,QAAuB;AAAA;AAAA;AAAA,IAG3B,GAAI,YAAY,CAAC,EAAE,KAAK,MAAM,OAAO,KAAK,KAAK,CAAC,IAAI,CAAC;AAAA,IACrD,GAAG,QAAQ,IAAI,CAAC,OAAO;AAAA,MACrB,KAAK,EAAE;AAAA,MACP,OAAO,EAAE;AAAA,MACT,MAAM,EAAE;AAAA,MACR,UAAU,EAAE;AAAA,MACZ,gBAAgB,EAAE;AAAA,IACpB,EAAE;AAAA,EACJ;AAEA,QAAM,SACJ,qBAAC,SAAK,GAAG,MAAM,WAAW,GAAG,aAAa,CAAC,YAAY,SAAS,GAC7D;AAAA,kBACC;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,UAAU;AAAA,QACV,cAAY,KAAK;AAAA,QACjB,YAAY,OAAO;AAAA,QACnB;AAAA;AAAA,IACF;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAY;AAAA,QAEZ,mBAAiB,YAAY,cAAc,UAAa,mBAAmB,SAAY,UAAU;AAAA,QACjG,oBAAkB,SAAS;AAAA,QAC3B,iBAAe,YAAY;AAAA,QAC3B,WAAU;AAAA,QAEV;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,SAAS,QAAQ,SAAY;AAAA,YAG7B,UAAU,CAAC,SAAS;AAClB,kBAAI,CAAC,WAAW,SAAS,OAAO,SAAY,QAAQ,IAAI,IAAI,GAAG,cAAc,EAAG,UAAS,IAAI;AAAA,YAC/F;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,YAAY,CAAC,SAAS;AACpB,oBAAM,OAAO,KAAK,QAAQ,OAAO,SAAY,QAAQ,IAAI,KAAK,GAAG,GAAG;AACpE,qBAAO,OAAO,oBAAC,QAAK,eAAW,MAAC,WAAW,UAAU,IAAI,EAAE,OAAO,IAAK;AAAA,YACzE;AAAA,YACA,eAAe,CAAC,OAAO,aAAa,GAAG,WAAW,iBAAiB,kBAAkB,aAAa;AAAA;AAAA,QACpG;AAAA;AAAA,IACF;AAAA,IACC,UAAU,QAAQ,WAAW,KAAK,oBAAC,OAAE,WAAU,sBAAsB,eAAK,WAAU;AAAA,IACpF,SACC,oBAAC,UAAK,IAAI,SAAS,QAAM,MACtB,eAAK,OACR;AAAA,IAED;AAAA;AAAA;AAAA,IAIC,oBAAC,UAAK,MAAK,UAAS,aAAU,UAAS,eAAW,MAAC,WAAU,iBAC1D,mBAAS,KAAK,YAAY,QAAQ,MAAM,IAAI,IAC/C;AAAA,KAEJ;AAEF,MAAI,CAAC,SAAU,QAAO;AACtB,SACE,qBAAC,cAAW,SAAkB,OAAc,MAAM,SAAS,WAAW,UAAoB,WACvF;AAAA;AAAA,IACA,SAAS;AAAA,KACZ;AAEJ;","names":[]}