@eifi1/ui-kit 0.48.2 → 0.50.0

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<IconButtonVariant, string> = {\n  primary: \"disabled:hover:bg-surface-2\",\n  secondary: \"disabled:hover:bg-transparent\",\n  ghost: \"disabled:hover:bg-transparent\",\n  danger: \"disabled:hover:bg-danger\",\n  brand: \"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.\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  resolveButtonVariant,\n} from \"./button-look\";\nimport type { ButtonVariant, CanonicalButtonVariant } 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<CanonicalButtonVariant | \"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  const look = variant === \"overlay\" || variant === \"shutter\" ? variant : resolveButtonVariant(variant, \"IconButton variant\");\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    look === \"overlay\"\n      ? ICON_BUTTON_OVERLAY\n      : look === \"shutter\"\n        ? ICON_BUTTON_SHUTTER\n        : buttonVariantClasses[look],\n    shape === \"round\" && \"rounded-full\",\n    ICON_BUTTON_DISABLED_REST[look],\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":[]}

package/dist/components/modal.js

@@ -137,6 +137,7 @@ function ModalPanel({
       "div",
       {
         "aria-hidden": exiting || void 0,
+        "data-kit-layer": "backdrop",
         className: cn(
           // Live #320. The panel below rises only where it is bottom-anchored: from md up
           // it is centred, and a centred box sliding up from off-screen reads as a

package/dist/components/modal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/modal.tsx"],"sourcesContent":["import { createContext, useEffect, useMemo, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type {\n  ComponentPropsWithoutRef,\n  KeyboardEvent,\n  MouseEvent as ReactMouseEvent,\n  PointerEvent as ReactPointerEvent,\n  ReactNode,\n  Ref,\n} from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { mergeRefs } from \"./field-parts\";\nimport { useFocusTrap } from \"../hooks/use-focus-trap\";\nimport { useBodyScrollLock } from \"../hooks/use-body-scroll-lock\";\nimport { useOverlayHistory } from \"../hooks/use-overlay-history\";\nimport { useDialogParam, type DialogParam } from \"../hooks/use-search-param-state\";\nimport { OVERLAY_EXIT_MS, skipsExitAnimation, useCloseTransition } from \"../hooks/use-close-transition\";\nimport { runOwnKeyDown, takeEscape, useDismissLayer } from \"../hooks/use-dismiss\";\n\n/**\n * Drag the panel by its top strip, in pointer space (dev#460).\n *\n * Deliberately not a library and not persisted: the offset is component state that\n * dies with the dialog. It starts only on a press that lands on the panel's own\n * chrome — never on a field, a button or a link, which is what keeps \"drag to select\n * text in the textarea\" working. Above `md` only: below it the panel is a\n * full-width bottom sheet with nothing beside it to uncover.\n *\n * The whole gesture stays on the PANEL — captured pointer, React handlers — rather than\n * on `window`. The first shape of this added `pointermove`/`pointerup` to `window` from\n * inside the `pointerdown` handler and took them off again from the `pointerup` handler,\n * so the teardown ran only if the gesture ended: React never sees a listener added from\n * an event handler, and an unmount mid-drag left a live `pointermove` on `window` for\n * the life of the page, pinning this hook's state with it. The one caller that enables\n * dragging is the feedback composer, which closes ITSELF on submit — a Ctrl+Enter sent\n * with the pointer still down is exactly that order of events, once per drag.\n */\nfunction useDragOffset(enabled: boolean) {\n  const [offset, setOffset] = useState<{ x: number; y: number } | null>(null);\n  const from = useRef<{ x: number; y: number; ox: number; oy: number } | null>(null);\n\n  const endDrag = () => {\n    from.current = null;\n  };\n\n  return {\n    /** Back to where the panel opens. A `Modal` with an `open` prop outlives its own\n     *  closes, so \"the position resets when the dialog closes\" needs saying. */\n    reset: () => setOffset(null),\n    style: offset ? { transform: `translate(${offset.x}px, ${offset.y}px)` } : undefined,\n    handlers: !enabled\n      ? undefined\n      : {\n          onPointerDown: (e: ReactPointerEvent<HTMLDivElement>) => {\n            if (e.button !== 0 || window.innerWidth < 768) return;\n            const target = e.target as HTMLElement;\n            // Only the panel itself and its non-interactive chrome start a drag; a\n            // press inside any control belongs to that control.\n            if (target.closest(\"input,textarea,select,button,a,[role='button']\")) return;\n            from.current = { x: e.clientX, y: e.clientY, ox: offset?.x ?? 0, oy: offset?.y ?? 0 };\n            try {\n              // Capture is what lets the handlers live on the panel: every later\n              // pointer event for this pointer retargets here, so the drag keeps\n              // working once the pointer outruns the panel's own box — which it always\n              // does, since the panel moves out from under it.\n              e.currentTarget.setPointerCapture(e.pointerId);\n            } catch {\n              // jsdom implements no pointer capture, and a browser throws\n              // NotFoundError for a pointerId that is already gone. Neither is worth\n              // refusing the drag: uncaptured, the panel still gets the moves that\n              // land on it.\n            }\n          },\n          onPointerMove: (e: ReactPointerEvent<HTMLDivElement>) => {\n            const start = from.current;\n            if (!start) return;\n            setOffset({ x: start.ox + e.clientX - start.x, y: start.oy + e.clientY - start.y });\n          },\n          onPointerUp: endDrag,\n          // A cancel (the browser taking the pointer for a scroll or a gesture) and a\n          // lost capture both mean no `pointerup` is coming. Without them the drag would\n          // stay \"live\" and the next move over the panel would jump it.\n          onPointerCancel: endDrag,\n          onLostPointerCapture: endDrag,\n        },\n  };\n}\n\n/**\n * The panel's own ANIMATED dismissal, for chrome rendered inside it. `DialogFrame`'s X\n * and its `actions(close)` read this, so a Cancel or an X lowers the panel exactly the\n * way Escape does — calling `onClose` from inside unmounts with no exit, which is the\n * documented limit of {@link useCloseTransition}. `null` outside a `Modal`.\n */\nexport const ModalCloseContext = createContext<(() => void) | null>(null);\n\n/**\n * Backdrop handlers that close only when a press starts AND ends on the\n * backdrop itself. A plain onClick fires on mouseup, so dragging a text\n * selection that starts inside the panel and releases over the backdrop would\n * dismiss the dialog (feedback #254) — and the reverse drag would too, since\n * click targets the common ancestor of the down/up elements.\n */\nexport function useBackdropClose(onClose: () => void) {\n  const pressStartedOnBackdrop = useRef(false);\n  return {\n    onMouseDown: (e: ReactMouseEvent<HTMLDivElement>) => {\n      pressStartedOnBackdrop.current = e.target === e.currentTarget;\n    },\n    onMouseUp: (e: ReactMouseEvent<HTMLDivElement>) => {\n      const started = pressStartedOnBackdrop.current;\n      pressStartedOnBackdrop.current = false;\n      if (started && e.target === e.currentTarget) onClose();\n    },\n  };\n}\n\n// Tab-cycle target set: the interactive descendants the focus trap rotates\n// through. Querying live (per keystroke) means dynamically rendered fields are\n// included automatically.\n/**\n * `extends ComponentPropsWithoutRef<\"div\">` so anything a `<div>` takes reaches the\n * PANEL — the element with `role=\"dialog\"`, which is the one a consumer means. That is\n * where a `data-tour` anchor, a test id, an `aria-describedby` or an `aria-label` has\n * to land; before this, a closed prop list dropped all four silently (audit §api-design).\n */\nexport interface ModalProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"role\"> {\n  /** Invoked on backdrop click and on Escape. */\n  onClose: () => void;\n  /**\n   * Who decides whether the dialog is up, when the caller wants to keep it MOUNTED.\n   *\n   * Left out, the dialog is open for as long as it is mounted — `{open && <Modal/>}`,\n   * which is every caller before this prop and stays exactly as it was. That idiom has\n   * one blind spot: a close the CALLER decides on (a save that succeeded, a\n   * `setOpen(false)` from outside) unmounts the panel on the spot, with no exit,\n   * because there is nothing left to animate. kastlan's `FormModal` was nothing but an\n   * `if (!open) return null` gate in front of this.\n   *\n   * Passed, the component stays mounted while closed and renders nothing, and a flip\n   * to `false` plays the same exit a dismissal does before the panel goes. The focus\n   * trap, the scroll lock and the Back-gesture history entry are held only while\n   * `open` is true — they are released the moment it turns false, so focus is back on\n   * the trigger while the panel is still lowering. A dismissal (Escape, the backdrop,\n   * Back, the frame's X) animates first and then calls `onClose`; the `false` that\n   * comes back from it is not animated a second time.\n   *\n   * The body is unmounted once the exit has finished, as it is today, so a form inside\n   * still starts fresh on the next open.\n   */\n  open?: boolean;\n  /** `\"alertdialog\"` for a dialog that interrupts to ask a question the user must\n   *  answer (a confirmation) — screen readers announce it with more urgency. Only the\n   *  two dialog roles are allowed: the panel stays modal either way. */\n  role?: \"dialog\" | \"alertdialog\";\n  children: ReactNode;\n  /**\n   * Panel max-width: `md` (28rem), `lg` (32rem), `xl` (48rem), `2xl` (the display less\n   * the backdrop's margin, capped at 110rem).\n   *\n   * `xl` exists because two callers had already written `className=\"max-w-3xl\"` to\n   * reach it — the payee backfill's preview table and the price-merge dialog, both\n   * of which hold a list and several fields rather than one question. A caller\n   * patching a missing size IS the signal that the size is missing, and a\n   * hand-written width in a `className` is a width nothing else can line up with.\n   *\n   * `2xl` is the same signal one size up (round 0.34 C3, KS U1): a dialog whose\n   * content is a TABLE to be read. Kurvenschmiede's five part dialogs hold a measured\n   * table pasted from a spreadsheet and had patched themselves to\n   * `w-[min(110rem,94vw)] max-w-none`; Keksdose's report drilldown passed `size=\"lg\"`\n   * and then `max-w-5xl`. The cap is the generous one of the two, because a table\n   * squeezed into a box in the middle of a wide screen is a table scrolled sideways\n   * (KS feedback #16); below the cap the panel is as wide as the backdrop lets it be.\n   * In rem, so it grows with the text size until the screen stops it.\n   *\n   * The panel is `w-full` under every one of them, so the cap only bites once the\n   * viewport is wider than it: on a phone all four are the same full-width bottom\n   * sheet. Nothing here may introduce a `min-w-*`, which is what would break that.\n   */\n  size?: \"md\" | \"lg\" | \"xl\" | \"2xl\";\n  /** Extra classes for the panel (e.g. `space-y-3` for form content spacing). */\n  className?: string;\n  /** id of the heading element, wired to `aria-labelledby`. */\n  labelledBy?: string;\n  /**\n   * Extra key handling on the panel (e.g. Ctrl/Cmd+Enter to submit). Runs first; a\n   * `preventDefault()` on Escape HERE keeps the dialog open — the owner's claim (see\n   * `use-dismiss.ts`). One a field inside makes does not, since 0.34: the rule\n   * `FullBleedDialog` already had, so a search box keeping Chromium from clearing itself\n   * no longer holds the dialog open (Wave 2, DUP-1).\n   */\n  onKeyDown?: (e: KeyboardEvent<HTMLDivElement>) => void;\n  /**\n   * Drop the backdrop's mobile margin so the panel can reach the screen edges\n   * (a full-screen sheet on phones). The panel still needs its own\n   * `h-[100dvh] max-w-full rounded-none` classes via `className` to fill it; the\n   * desktop `md:p-4` margin is kept. Defaults to false (padded on all sizes).\n   */\n  fullBleed?: boolean;\n  /**\n   * Let the user drag the panel out of the way by its top edge (Keksdose feedback\n   * dev#460: *\"Make the feedback dialog draggable so I can see behind it if it\n   * blocks something.\"*).\n   *\n   * Opt-in, because it only makes sense for a dialog whose content is ABOUT the page\n   * behind it — the feedback composer is the case, an ordinary form is not, and a\n   * draggable panel that has nothing to reveal is a control that can only get lost.\n   *\n   * Pointer-only by design: it is a \"move this out of the way\" gesture, not a layout\n   * choice worth persisting, and the position resets when the dialog closes. On a\n   * phone the panel is a bottom sheet the width of the screen, so dragging is\n   * suppressed there — there is nothing beside it to see.\n   */\n  draggable?: boolean;\n  /**\n   * Bind the open state to a URL search param (0.12.0): `\"edit\"` is open while\n   * `?edit` is in the query, `{ key: \"dialog\", value: \"create-lease\" }` while\n   * `?dialog=create-lease` is. The URL is then the only state — `open` is ignored —\n   * and the dialog opens from anywhere that sets the param: {@link useDialogParam}'s\n   * setter, a `<Link>`, a shared link, a reload.\n   *\n   * kastlan's `useDialogParam` did this beside the dialog, so its open state could be\n   * deep-linked and captured in a feedback report. Here it also owns the history:\n   * opening through `useDialogParam` pushes an entry, so the Back gesture closes the\n   * dialog by leaving it, and a close (Escape, the backdrop, the X) goes back over\n   * that entry rather than stacking a second one. The dialog's own Back handling\n   * ({@link useOverlayHistory}'s throwaway entry) stays off in this mode — the param's\n   * entry already is one, and two would take two Back presses to close one dialog.\n   *\n   * `onClose` still runs, after the param is cleared. Requires a react-router Router.\n   */\n  urlParam?: DialogParam;\n  /**\n   * The PANEL — the `role=\"dialog\"` element the rest of the props go on, not the\n   * backdrop around it (0.35, round 0.35 R4, the follow-up to API-2; as on\n   * `FullBleedDialog`). Merged with the panel's own ref, which the focus\n   * trap holds. Set while the panel is in the document: `null` while a dialog with\n   * `open={false}` is closed, and after a `urlParam` dialog's param is cleared.\n   */\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * The URL-bound dialog: the param is the open state, and closing clears it. A\n * component of its own so the router hook is only called by a `Modal` that asked for\n * it — a plain `Modal` must keep working with no Router above it.\n */\nfunction UrlParamModal({ urlParam, onClose, ...rest }: ModalProps & { urlParam: DialogParam }) {\n  const [open, setOpen] = useDialogParam(urlParam);\n  // Closed from here the moment the dismissal is decided. Going back is a traversal\n  // the browser lands a task later, and between the two the param still says \"open\":\n  // without this the panel, already lowered, would pop back up for that task.\n  const [leaving, setLeaving] = useState(false);\n  if (leaving && !open) setLeaving(false);\n  return (\n    <ModalPanel\n      {...rest}\n      open={open && !leaving}\n      ownHistoryEntry={false}\n      onClose={() => {\n        setLeaving(true);\n        setOpen(false);\n        onClose();\n      }}\n    />\n  );\n}\n\n/**\n * Centered (bottom-sheet on mobile) modal dialog: dimmed backdrop, single\n * rounded panel. Owns the overlay mechanics that the hand-rolled dialogs each\n * re-implemented or lacked — backdrop-click + Escape to close, the platform Back\n * gesture (Keksdose feedback #172), background scroll lock (feedback #204), focus\n * into the panel on open and back to the trigger on close, a Tab focus trap, and\n * `role=\"dialog\"`/`aria-modal`.\n */\nexport function Modal(props: ModalProps) {\n  return props.urlParam !== undefined ? (\n    <UrlParamModal {...props} urlParam={props.urlParam} />\n  ) : (\n    <ModalPanel {...props} />\n  );\n}\n\nfunction ModalPanel({\n  onClose,\n  open,\n  children,\n  size = \"md\",\n  className,\n  labelledBy,\n  onKeyDown,\n  fullBleed,\n  draggable,\n  style,\n  role = \"dialog\",\n  urlParam: _urlParam,\n  ownHistoryEntry = true,\n  ref,\n  ...rest\n}: ModalProps & {\n  /** False when the URL already holds an entry for this dialog — see `urlParam`. */\n  ownHistoryEntry?: boolean;\n}) {\n  const panelRef = useRef<HTMLDivElement>(null);\n  // The caller's `ref` beside the trap's (round 0.35 R4): memoised, so the panel is not\n  // detached and re-attached on every render.\n  const setPanel = useMemo(() => mergeRefs(panelRef, ref), [ref]);\n  const drag = useDragOffset(Boolean(draggable));\n  // Without `open`, mounted means open — the constant `true` every hook below used to\n  // be given. With it, `open` itself.\n  const active = open ?? true;\n\n  // Whether the last close came through `requestClose`, i.e. has ALREADY been\n  // animated. Set in the same batch as the caller's `onClose`, so the render that sees\n  // `open` turn false also sees this and does not lower the panel a second time.\n  const [dismissed, setDismissed] = useState(false);\n  // The exit of a close the caller decided on (only reachable with `open`). Adjusted\n  // during render when `open` flips — `Collapse`'s pattern — so the very render that\n  // closes it already paints the `-out` classes rather than a frame of nothing.\n  const [exiting, setExiting] = useState(false);\n  const [prevOpen, setPrevOpen] = useState(open);\n  if (open !== prevOpen) {\n    setPrevOpen(open);\n    setDismissed(false);\n    setExiting(open === false && prevOpen === true && !dismissed && !skipsExitAnimation());\n    if (open) drag.reset();\n  }\n  useEffect(() => {\n    if (!exiting) return;\n    const timer = setTimeout(() => setExiting(false), OVERLAY_EXIT_MS);\n    return () => clearTimeout(timer);\n  }, [exiting]);\n\n  // The panel lowers itself before the caller unmounts it (live #320 rework). Every\n  // dismissal below goes through `requestClose`; `onClose` still does the closing, one\n  // animation later. A caller that closes the dialog ITSELF — after a save, say —\n  // unmounts with no exit unless it passes `open`, which is what that prop is for.\n  const { closing, requestClose } = useCloseTransition(() => {\n    setDismissed(true);\n    onClose();\n  });\n  // A panel on its way out after `open` turned false is already closed: a press on\n  // its fading backdrop must not report a second close.\n  const backdropClose = useBackdropClose(active ? requestClose : () => {});\n  // Back means the same as Escape here. On a phone Escape doesn't exist, so without\n  // this the only way out of a dialog is finding its close button — and Back, the\n  // gesture everyone reaches for, navigated the page underneath instead (#172).\n  // Held only while open: a closed `open={false}` dialog must not own a history entry.\n  useOverlayHistory(active && ownHistoryEntry, requestClose);\n\n  // Through the shared hook and not by hand: this component's own save/restore copy\n  // was one half of the pair that left the page permanently unscrollable when a dialog\n  // containing an open sheet was closed — see the note in use-body-scroll-lock.ts.\n  useBodyScrollLock(active);\n\n  // Focus the panel itself (not the first field) so opening doesn't pop the mobile\n  // keyboard, while still moving focus into the dialog for keyboard and screen-reader\n  // users. Through the shared hook since this component is where it came from — the\n  // hook adds per-keystroke recomputation, a guard on restoring to a detached node,\n  // and nesting, none of which this copy had. Released when `open` turns false, which\n  // hands focus back to the trigger while the panel is still on its way out.\n  //\n  // \"The panel itself\" only when nothing inside asked for focus: a field the app\n  // autofocuses on purpose keeps it (0.33.1, keksdose live #402 — the same trap took\n  // an autofocused amount straight back in `FullBleedDialog`). Its keyboard is then the\n  // one the app chose to show; the trigger still gets focus back on close.\n  useFocusTrap(panelRef, { active, initialFocus: \"container\" });\n  const leaving = closing || exiting;\n\n  // One layer on the Escape stack while open (Wave 2, DUP-1): a list, a popover or a\n  // tooltip opened inside takes the key before the dialog does, wherever focus is —\n  // and the dialog gets it even when focus is not in the panel.\n  const layer = useDismissLayer(active, requestClose);\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    // The caller's handler sees Escape only while this dialog is the layer on top: a\n    // tooltip or a list open over it takes that press first (0.35, KS's gear wizard).\n    runOwnKeyDown(e, onKeyDown, layer);\n    // To whatever is on top — this dialog, unless something opened over it — and\n    // stopped here. Tab containment lives in useFocusTrap, which listens on the panel.\n    takeEscape(e);\n  };\n\n  // Portal to <body> so the `fixed inset-0 z-50` overlay escapes whatever stacking\n  // context its caller sits in. Rendered inline, a modal opened from e.g. the top\n  // bar (a z-30 context) could paint BELOW a sibling z-30 sticky element like the\n  // expanded transaction editor (feedback #320). The tour/command-palette overlays\n  // already portal for the same reason.\n  if (!active && !exiting) return null;\n  return createPortal(\n    <div\n      // Out of the accessibility tree for the length of a caller-driven exit: focus is\n      // already back on the page, and an `aria-modal` panel that is leaving would hide\n      // that page from a screen reader for 220ms. Not `inert` — that would let a tap\n      // fall through the fading backdrop to the row underneath.\n      aria-hidden={exiting || undefined}\n      className={cn(\n        // Live #320. The panel below rises only where it is bottom-anchored: from md up\n        // it is centred, and a centred box sliding up from off-screen reads as a\n        // different component arriving rather than as the same one settling.\n        leaving ? \"animate-overlay-out\" : \"animate-overlay\",\n        \"fixed inset-0 z-50 flex items-end justify-center bg-black/40 md:items-center\",\n        fullBleed ? \"p-0 md:p-4\" : \"p-4\",\n      )}\n      {...backdropClose}\n    >\n      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- always\n          role=\"dialog\" or \"alertdialog\" (the ternary hides that from the rule): `onKeyDown`\n          is Escape-to-close per the APG dialog pattern, and the drag handlers are\n          swipe-to-dismiss, whose keyboard path is that same Escape. */}\n      <div\n        // `...rest` FIRST, everything the dialog needs to be a dialog after it. A\n        // wrapper that spreads its own props through to this one cannot then take away\n        // the role, the modality or the `tabIndex={-1}` that `useFocusTrap` needs —\n        // losing any of the three is silent, and the symptom (a dialog a screen reader\n        // walks straight out of) shows up nowhere near the call site that caused it.\n        {...rest}\n        ref={setPanel}\n        // Normalised at runtime too: an untyped caller's `role=\"presentation\"` must not\n        // take the dialog role away (props-passthrough pins that).\n        role={role === \"alertdialog\" ? \"alertdialog\" : \"dialog\"}\n        aria-modal=\"true\"\n        aria-labelledby={labelledBy}\n        tabIndex={-1}\n        onKeyDown={handleKeyDown}\n        {...drag.handlers}\n        // MERGED, not replaced: `drag.style` is undefined until a drag starts, so\n        // assigning it outright would drop a caller's own `style` on every render but\n        // the ones where the panel is being dragged.\n        style={{ ...style, ...drag.style }}\n        className={cn(\n          leaving ? \"animate-sheet-out md:animate-none\" : \"animate-sheet md:animate-none\",\n          \"w-full rounded-lg border border-subtle bg-surface shadow-sm outline-none\",\n          { md: \"max-w-md\", lg: \"max-w-lg\", xl: \"max-w-3xl\", \"2xl\": \"max-w-[110rem]\" }[size],\n          // A panel taller than the screen has to scroll ITSELF. The backdrop is\n          // `fixed inset-0` and the body is scroll-locked while a dialog is open, so\n          // without this the overflow simply had nowhere to go: on a phone the panel\n          // is bottom-anchored, so it grew UPWARD past the top edge and the part that\n          // went past it could not be reached by any gesture (Keksdose live #254, on\n          // the price-merge dialog — but it was every dialog with more than a screen\n          // of content). `max-h-full` resolves against the backdrop's content box,\n          // which is the viewport minus its own padding, so the panel stops exactly\n          // where the screen does; `overscroll-contain` keeps the fling inside it.\n          //\n          // Three callers had already patched themselves with `max-h-[90vh]` +\n          // an inner scroller. Those still win — `cn` is tailwind-merge — and this is\n          // the default they should not have needed.\n          \"max-h-full overflow-y-auto overscroll-contain\",\n          \"p-4\",\n          // The grab affordance sits on the panel's own top strip: a drag handle of\n          // its own would be one more control in a dialog that is mostly one field.\n          draggable && \"md:[&>*:first-child]:cursor-grab\",\n          className,\n        )}\n      >\n        <ModalCloseContext.Provider value={requestClose}>{children}</ModalCloseContext.Provider>\n      </div>\n    </div>,\n    document.body,\n  );\n}\n"],"mappings":";AA+PI;AA/PJ,SAAS,eAAe,WAAW,SAAS,QAAQ,gBAAgB;AACpE,SAAS,oBAAoB;AAS7B,SAAS,UAAU;AACnB,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAClC,SAAS,sBAAwC;AACjD,SAAS,iBAAiB,oBAAoB,0BAA0B;AACxE,SAAS,eAAe,YAAY,uBAAuB;AAoB3D,SAAS,cAAc,SAAkB;AACvC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAA0C,IAAI;AAC1E,QAAM,OAAO,OAAgE,IAAI;AAEjF,QAAM,UAAU,MAAM;AACpB,SAAK,UAAU;AAAA,EACjB;AAEA,SAAO;AAAA;AAAA;AAAA,IAGL,OAAO,MAAM,UAAU,IAAI;AAAA,IAC3B,OAAO,SAAS,EAAE,WAAW,aAAa,OAAO,CAAC,OAAO,OAAO,CAAC,MAAM,IAAI;AAAA,IAC3E,UAAU,CAAC,UACP,SACA;AAAA,MACE,eAAe,CAAC,MAAyC;AACvD,YAAI,EAAE,WAAW,KAAK,OAAO,aAAa,IAAK;AAC/C,cAAM,SAAS,EAAE;AAGjB,YAAI,OAAO,QAAQ,gDAAgD,EAAG;AACtE,aAAK,UAAU,EAAE,GAAG,EAAE,SAAS,GAAG,EAAE,SAAS,IAAI,QAAQ,KAAK,GAAG,IAAI,QAAQ,KAAK,EAAE;AACpF,YAAI;AAKF,YAAE,cAAc,kBAAkB,EAAE,SAAS;AAAA,QAC/C,QAAQ;AAAA,QAKR;AAAA,MACF;AAAA,MACA,eAAe,CAAC,MAAyC;AACvD,cAAM,QAAQ,KAAK;AACnB,YAAI,CAAC,MAAO;AACZ,kBAAU,EAAE,GAAG,MAAM,KAAK,EAAE,UAAU,MAAM,GAAG,GAAG,MAAM,KAAK,EAAE,UAAU,MAAM,EAAE,CAAC;AAAA,MACpF;AAAA,MACA,aAAa;AAAA;AAAA;AAAA;AAAA,MAIb,iBAAiB;AAAA,MACjB,sBAAsB;AAAA,IACxB;AAAA,EACN;AACF;AAQO,MAAM,oBAAoB,cAAmC,IAAI;AASjE,SAAS,iBAAiB,SAAqB;AACpD,QAAM,yBAAyB,OAAO,KAAK;AAC3C,SAAO;AAAA,IACL,aAAa,CAAC,MAAuC;AACnD,6BAAuB,UAAU,EAAE,WAAW,EAAE;AAAA,IAClD;AAAA,IACA,WAAW,CAAC,MAAuC;AACjD,YAAM,UAAU,uBAAuB;AACvC,6BAAuB,UAAU;AACjC,UAAI,WAAW,EAAE,WAAW,EAAE,cAAe,SAAQ;AAAA,IACvD;AAAA,EACF;AACF;AAoIA,SAAS,cAAc,EAAE,UAAU,SAAS,GAAG,KAAK,GAA2C;AAC7F,QAAM,CAAC,MAAM,OAAO,IAAI,eAAe,QAAQ;AAI/C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,MAAI,WAAW,CAAC,KAAM,YAAW,KAAK;AACtC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAM,QAAQ,CAAC;AAAA,MACf,iBAAiB;AAAA,MACjB,SAAS,MAAM;AACb,mBAAW,IAAI;AACf,gBAAQ,KAAK;AACb,gBAAQ;AAAA,MACV;AAAA;AAAA,EACF;AAEJ;AAUO,SAAS,MAAM,OAAmB;AACvC,SAAO,MAAM,aAAa,SACxB,oBAAC,iBAAe,GAAG,OAAO,UAAU,MAAM,UAAU,IAEpD,oBAAC,cAAY,GAAG,OAAO;AAE3B;AAEA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB;AAAA,EACA,GAAG;AACL,GAGG;AACD,QAAM,WAAW,OAAuB,IAAI;AAG5C,QAAM,WAAW,QAAQ,MAAM,UAAU,UAAU,GAAG,GAAG,CAAC,GAAG,CAAC;AAC9D,QAAM,OAAO,cAAc,QAAQ,SAAS,CAAC;AAG7C,QAAM,SAAS,QAAQ;AAKvB,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAIhD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,IAAI;AAC7C,MAAI,SAAS,UAAU;AACrB,gBAAY,IAAI;AAChB,iBAAa,KAAK;AAClB,eAAW,SAAS,SAAS,aAAa,QAAQ,CAAC,aAAa,CAAC,mBAAmB,CAAC;AACrF,QAAI,KAAM,MAAK,MAAM;AAAA,EACvB;AACA,YAAU,MAAM;AACd,QAAI,CAAC,QAAS;AACd,UAAM,QAAQ,WAAW,MAAM,WAAW,KAAK,GAAG,eAAe;AACjE,WAAO,MAAM,aAAa,KAAK;AAAA,EACjC,GAAG,CAAC,OAAO,CAAC;AAMZ,QAAM,EAAE,SAAS,aAAa,IAAI,mBAAmB,MAAM;AACzD,iBAAa,IAAI;AACjB,YAAQ;AAAA,EACV,CAAC;AAGD,QAAM,gBAAgB,iBAAiB,SAAS,eAAe,MAAM;AAAA,EAAC,CAAC;AAKvE,oBAAkB,UAAU,iBAAiB,YAAY;AAKzD,oBAAkB,MAAM;AAaxB,eAAa,UAAU,EAAE,QAAQ,cAAc,YAAY,CAAC;AAC5D,QAAM,UAAU,WAAW;AAK3B,QAAM,QAAQ,gBAAgB,QAAQ,YAAY;AAClD,QAAM,gBAAgB,CAAC,MAAqC;AAG1D,kBAAc,GAAG,WAAW,KAAK;AAGjC,eAAW,CAAC;AAAA,EACd;AAOA,MAAI,CAAC,UAAU,CAAC,QAAS,QAAO;AAChC,SAAO;AAAA,IACL;AAAA,MAAC;AAAA;AAAA,QAKC,eAAa,WAAW;AAAA,QACxB,WAAW;AAAA;AAAA;AAAA;AAAA,UAIT,UAAU,wBAAwB;AAAA,UAClC;AAAA,UACA,YAAY,eAAe;AAAA,QAC7B;AAAA,QACC,GAAG;AAAA,QAMJ;AAAA,UAAC;AAAA;AAAA,YAME,GAAG;AAAA,YACJ,KAAK;AAAA,YAGL,MAAM,SAAS,gBAAgB,gBAAgB;AAAA,YAC/C,cAAW;AAAA,YACX,mBAAiB;AAAA,YACjB,UAAU;AAAA,YACV,WAAW;AAAA,YACV,GAAG,KAAK;AAAA,YAIT,OAAO,EAAE,GAAG,OAAO,GAAG,KAAK,MAAM;AAAA,YACjC,WAAW;AAAA,cACT,UAAU,sCAAsC;AAAA,cAChD;AAAA,cACA,EAAE,IAAI,YAAY,IAAI,YAAY,IAAI,aAAa,OAAO,iBAAiB,EAAE,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAcjF;AAAA,cACA;AAAA;AAAA;AAAA,cAGA,aAAa;AAAA,cACb;AAAA,YACF;AAAA,YAEA,8BAAC,kBAAkB,UAAlB,EAA2B,OAAO,cAAe,UAAS;AAAA;AAAA,QAC7D;AAAA;AAAA,IACF;AAAA,IACA,SAAS;AAAA,EACX;AACF;","names":[]}
+{"version":3,"sources":["../../src/components/modal.tsx"],"sourcesContent":["import { createContext, useEffect, useMemo, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type {\n  ComponentPropsWithoutRef,\n  KeyboardEvent,\n  MouseEvent as ReactMouseEvent,\n  PointerEvent as ReactPointerEvent,\n  ReactNode,\n  Ref,\n} from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { mergeRefs } from \"./field-parts\";\nimport { useFocusTrap } from \"../hooks/use-focus-trap\";\nimport { useBodyScrollLock } from \"../hooks/use-body-scroll-lock\";\nimport { useOverlayHistory } from \"../hooks/use-overlay-history\";\nimport { useDialogParam, type DialogParam } from \"../hooks/use-search-param-state\";\nimport { OVERLAY_EXIT_MS, skipsExitAnimation, useCloseTransition } from \"../hooks/use-close-transition\";\nimport { runOwnKeyDown, takeEscape, useDismissLayer } from \"../hooks/use-dismiss\";\n\n/**\n * Drag the panel by its top strip, in pointer space (dev#460).\n *\n * Deliberately not a library and not persisted: the offset is component state that\n * dies with the dialog. It starts only on a press that lands on the panel's own\n * chrome — never on a field, a button or a link, which is what keeps \"drag to select\n * text in the textarea\" working. Above `md` only: below it the panel is a\n * full-width bottom sheet with nothing beside it to uncover.\n *\n * The whole gesture stays on the PANEL — captured pointer, React handlers — rather than\n * on `window`. The first shape of this added `pointermove`/`pointerup` to `window` from\n * inside the `pointerdown` handler and took them off again from the `pointerup` handler,\n * so the teardown ran only if the gesture ended: React never sees a listener added from\n * an event handler, and an unmount mid-drag left a live `pointermove` on `window` for\n * the life of the page, pinning this hook's state with it. The one caller that enables\n * dragging is the feedback composer, which closes ITSELF on submit — a Ctrl+Enter sent\n * with the pointer still down is exactly that order of events, once per drag.\n */\nfunction useDragOffset(enabled: boolean) {\n  const [offset, setOffset] = useState<{ x: number; y: number } | null>(null);\n  const from = useRef<{ x: number; y: number; ox: number; oy: number } | null>(null);\n\n  const endDrag = () => {\n    from.current = null;\n  };\n\n  return {\n    /** Back to where the panel opens. A `Modal` with an `open` prop outlives its own\n     *  closes, so \"the position resets when the dialog closes\" needs saying. */\n    reset: () => setOffset(null),\n    style: offset ? { transform: `translate(${offset.x}px, ${offset.y}px)` } : undefined,\n    handlers: !enabled\n      ? undefined\n      : {\n          onPointerDown: (e: ReactPointerEvent<HTMLDivElement>) => {\n            if (e.button !== 0 || window.innerWidth < 768) return;\n            const target = e.target as HTMLElement;\n            // Only the panel itself and its non-interactive chrome start a drag; a\n            // press inside any control belongs to that control.\n            if (target.closest(\"input,textarea,select,button,a,[role='button']\")) return;\n            from.current = { x: e.clientX, y: e.clientY, ox: offset?.x ?? 0, oy: offset?.y ?? 0 };\n            try {\n              // Capture is what lets the handlers live on the panel: every later\n              // pointer event for this pointer retargets here, so the drag keeps\n              // working once the pointer outruns the panel's own box — which it always\n              // does, since the panel moves out from under it.\n              e.currentTarget.setPointerCapture(e.pointerId);\n            } catch {\n              // jsdom implements no pointer capture, and a browser throws\n              // NotFoundError for a pointerId that is already gone. Neither is worth\n              // refusing the drag: uncaptured, the panel still gets the moves that\n              // land on it.\n            }\n          },\n          onPointerMove: (e: ReactPointerEvent<HTMLDivElement>) => {\n            const start = from.current;\n            if (!start) return;\n            setOffset({ x: start.ox + e.clientX - start.x, y: start.oy + e.clientY - start.y });\n          },\n          onPointerUp: endDrag,\n          // A cancel (the browser taking the pointer for a scroll or a gesture) and a\n          // lost capture both mean no `pointerup` is coming. Without them the drag would\n          // stay \"live\" and the next move over the panel would jump it.\n          onPointerCancel: endDrag,\n          onLostPointerCapture: endDrag,\n        },\n  };\n}\n\n/**\n * The panel's own ANIMATED dismissal, for chrome rendered inside it. `DialogFrame`'s X\n * and its `actions(close)` read this, so a Cancel or an X lowers the panel exactly the\n * way Escape does — calling `onClose` from inside unmounts with no exit, which is the\n * documented limit of {@link useCloseTransition}. `null` outside a `Modal`.\n */\nexport const ModalCloseContext = createContext<(() => void) | null>(null);\n\n/**\n * Backdrop handlers that close only when a press starts AND ends on the\n * backdrop itself. A plain onClick fires on mouseup, so dragging a text\n * selection that starts inside the panel and releases over the backdrop would\n * dismiss the dialog (feedback #254) — and the reverse drag would too, since\n * click targets the common ancestor of the down/up elements.\n */\nexport function useBackdropClose(onClose: () => void) {\n  const pressStartedOnBackdrop = useRef(false);\n  return {\n    onMouseDown: (e: ReactMouseEvent<HTMLDivElement>) => {\n      pressStartedOnBackdrop.current = e.target === e.currentTarget;\n    },\n    onMouseUp: (e: ReactMouseEvent<HTMLDivElement>) => {\n      const started = pressStartedOnBackdrop.current;\n      pressStartedOnBackdrop.current = false;\n      if (started && e.target === e.currentTarget) onClose();\n    },\n  };\n}\n\n// Tab-cycle target set: the interactive descendants the focus trap rotates\n// through. Querying live (per keystroke) means dynamically rendered fields are\n// included automatically.\n/**\n * `extends ComponentPropsWithoutRef<\"div\">` so anything a `<div>` takes reaches the\n * PANEL — the element with `role=\"dialog\"`, which is the one a consumer means. That is\n * where a `data-tour` anchor, a test id, an `aria-describedby` or an `aria-label` has\n * to land; before this, a closed prop list dropped all four silently (audit §api-design).\n */\nexport interface ModalProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"role\"> {\n  /** Invoked on backdrop click and on Escape. */\n  onClose: () => void;\n  /**\n   * Who decides whether the dialog is up, when the caller wants to keep it MOUNTED.\n   *\n   * Left out, the dialog is open for as long as it is mounted — `{open && <Modal/>}`,\n   * which is every caller before this prop and stays exactly as it was. That idiom has\n   * one blind spot: a close the CALLER decides on (a save that succeeded, a\n   * `setOpen(false)` from outside) unmounts the panel on the spot, with no exit,\n   * because there is nothing left to animate. kastlan's `FormModal` was nothing but an\n   * `if (!open) return null` gate in front of this.\n   *\n   * Passed, the component stays mounted while closed and renders nothing, and a flip\n   * to `false` plays the same exit a dismissal does before the panel goes. The focus\n   * trap, the scroll lock and the Back-gesture history entry are held only while\n   * `open` is true — they are released the moment it turns false, so focus is back on\n   * the trigger while the panel is still lowering. A dismissal (Escape, the backdrop,\n   * Back, the frame's X) animates first and then calls `onClose`; the `false` that\n   * comes back from it is not animated a second time.\n   *\n   * The body is unmounted once the exit has finished, as it is today, so a form inside\n   * still starts fresh on the next open.\n   */\n  open?: boolean;\n  /** `\"alertdialog\"` for a dialog that interrupts to ask a question the user must\n   *  answer (a confirmation) — screen readers announce it with more urgency. Only the\n   *  two dialog roles are allowed: the panel stays modal either way. */\n  role?: \"dialog\" | \"alertdialog\";\n  children: ReactNode;\n  /**\n   * Panel max-width: `md` (28rem), `lg` (32rem), `xl` (48rem), `2xl` (the display less\n   * the backdrop's margin, capped at 110rem).\n   *\n   * `xl` exists because two callers had already written `className=\"max-w-3xl\"` to\n   * reach it — the payee backfill's preview table and the price-merge dialog, both\n   * of which hold a list and several fields rather than one question. A caller\n   * patching a missing size IS the signal that the size is missing, and a\n   * hand-written width in a `className` is a width nothing else can line up with.\n   *\n   * `2xl` is the same signal one size up (round 0.34 C3, KS U1): a dialog whose\n   * content is a TABLE to be read. Kurvenschmiede's five part dialogs hold a measured\n   * table pasted from a spreadsheet and had patched themselves to\n   * `w-[min(110rem,94vw)] max-w-none`; Keksdose's report drilldown passed `size=\"lg\"`\n   * and then `max-w-5xl`. The cap is the generous one of the two, because a table\n   * squeezed into a box in the middle of a wide screen is a table scrolled sideways\n   * (KS feedback #16); below the cap the panel is as wide as the backdrop lets it be.\n   * In rem, so it grows with the text size until the screen stops it.\n   *\n   * The panel is `w-full` under every one of them, so the cap only bites once the\n   * viewport is wider than it: on a phone all four are the same full-width bottom\n   * sheet. Nothing here may introduce a `min-w-*`, which is what would break that.\n   */\n  size?: \"md\" | \"lg\" | \"xl\" | \"2xl\";\n  /** Extra classes for the panel (e.g. `space-y-3` for form content spacing). */\n  className?: string;\n  /** id of the heading element, wired to `aria-labelledby`. */\n  labelledBy?: string;\n  /**\n   * Extra key handling on the panel (e.g. Ctrl/Cmd+Enter to submit). Runs first; a\n   * `preventDefault()` on Escape HERE keeps the dialog open — the owner's claim (see\n   * `use-dismiss.ts`). One a field inside makes does not, since 0.34: the rule\n   * `FullBleedDialog` already had, so a search box keeping Chromium from clearing itself\n   * no longer holds the dialog open (Wave 2, DUP-1).\n   */\n  onKeyDown?: (e: KeyboardEvent<HTMLDivElement>) => void;\n  /**\n   * Drop the backdrop's mobile margin so the panel can reach the screen edges\n   * (a full-screen sheet on phones). The panel still needs its own\n   * `h-[100dvh] max-w-full rounded-none` classes via `className` to fill it; the\n   * desktop `md:p-4` margin is kept. Defaults to false (padded on all sizes).\n   */\n  fullBleed?: boolean;\n  /**\n   * Let the user drag the panel out of the way by its top edge (Keksdose feedback\n   * dev#460: *\"Make the feedback dialog draggable so I can see behind it if it\n   * blocks something.\"*).\n   *\n   * Opt-in, because it only makes sense for a dialog whose content is ABOUT the page\n   * behind it — the feedback composer is the case, an ordinary form is not, and a\n   * draggable panel that has nothing to reveal is a control that can only get lost.\n   *\n   * Pointer-only by design: it is a \"move this out of the way\" gesture, not a layout\n   * choice worth persisting, and the position resets when the dialog closes. On a\n   * phone the panel is a bottom sheet the width of the screen, so dragging is\n   * suppressed there — there is nothing beside it to see.\n   */\n  draggable?: boolean;\n  /**\n   * Bind the open state to a URL search param (0.12.0): `\"edit\"` is open while\n   * `?edit` is in the query, `{ key: \"dialog\", value: \"create-lease\" }` while\n   * `?dialog=create-lease` is. The URL is then the only state — `open` is ignored —\n   * and the dialog opens from anywhere that sets the param: {@link useDialogParam}'s\n   * setter, a `<Link>`, a shared link, a reload.\n   *\n   * kastlan's `useDialogParam` did this beside the dialog, so its open state could be\n   * deep-linked and captured in a feedback report. Here it also owns the history:\n   * opening through `useDialogParam` pushes an entry, so the Back gesture closes the\n   * dialog by leaving it, and a close (Escape, the backdrop, the X) goes back over\n   * that entry rather than stacking a second one. The dialog's own Back handling\n   * ({@link useOverlayHistory}'s throwaway entry) stays off in this mode — the param's\n   * entry already is one, and two would take two Back presses to close one dialog.\n   *\n   * `onClose` still runs, after the param is cleared. Requires a react-router Router.\n   */\n  urlParam?: DialogParam;\n  /**\n   * The PANEL — the `role=\"dialog\"` element the rest of the props go on, not the\n   * backdrop around it (0.35, round 0.35 R4, the follow-up to API-2; as on\n   * `FullBleedDialog`). Merged with the panel's own ref, which the focus\n   * trap holds. Set while the panel is in the document: `null` while a dialog with\n   * `open={false}` is closed, and after a `urlParam` dialog's param is cleared.\n   */\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * The URL-bound dialog: the param is the open state, and closing clears it. A\n * component of its own so the router hook is only called by a `Modal` that asked for\n * it — a plain `Modal` must keep working with no Router above it.\n */\nfunction UrlParamModal({ urlParam, onClose, ...rest }: ModalProps & { urlParam: DialogParam }) {\n  const [open, setOpen] = useDialogParam(urlParam);\n  // Closed from here the moment the dismissal is decided. Going back is a traversal\n  // the browser lands a task later, and between the two the param still says \"open\":\n  // without this the panel, already lowered, would pop back up for that task.\n  const [leaving, setLeaving] = useState(false);\n  if (leaving && !open) setLeaving(false);\n  return (\n    <ModalPanel\n      {...rest}\n      open={open && !leaving}\n      ownHistoryEntry={false}\n      onClose={() => {\n        setLeaving(true);\n        setOpen(false);\n        onClose();\n      }}\n    />\n  );\n}\n\n/**\n * Centered (bottom-sheet on mobile) modal dialog: dimmed backdrop, single\n * rounded panel. Owns the overlay mechanics that the hand-rolled dialogs each\n * re-implemented or lacked — backdrop-click + Escape to close, the platform Back\n * gesture (Keksdose feedback #172), background scroll lock (feedback #204), focus\n * into the panel on open and back to the trigger on close, a Tab focus trap, and\n * `role=\"dialog\"`/`aria-modal`.\n */\nexport function Modal(props: ModalProps) {\n  return props.urlParam !== undefined ? (\n    <UrlParamModal {...props} urlParam={props.urlParam} />\n  ) : (\n    <ModalPanel {...props} />\n  );\n}\n\nfunction ModalPanel({\n  onClose,\n  open,\n  children,\n  size = \"md\",\n  className,\n  labelledBy,\n  onKeyDown,\n  fullBleed,\n  draggable,\n  style,\n  role = \"dialog\",\n  urlParam: _urlParam,\n  ownHistoryEntry = true,\n  ref,\n  ...rest\n}: ModalProps & {\n  /** False when the URL already holds an entry for this dialog — see `urlParam`. */\n  ownHistoryEntry?: boolean;\n}) {\n  const panelRef = useRef<HTMLDivElement>(null);\n  // The caller's `ref` beside the trap's (round 0.35 R4): memoised, so the panel is not\n  // detached and re-attached on every render.\n  const setPanel = useMemo(() => mergeRefs(panelRef, ref), [ref]);\n  const drag = useDragOffset(Boolean(draggable));\n  // Without `open`, mounted means open — the constant `true` every hook below used to\n  // be given. With it, `open` itself.\n  const active = open ?? true;\n\n  // Whether the last close came through `requestClose`, i.e. has ALREADY been\n  // animated. Set in the same batch as the caller's `onClose`, so the render that sees\n  // `open` turn false also sees this and does not lower the panel a second time.\n  const [dismissed, setDismissed] = useState(false);\n  // The exit of a close the caller decided on (only reachable with `open`). Adjusted\n  // during render when `open` flips — `Collapse`'s pattern — so the very render that\n  // closes it already paints the `-out` classes rather than a frame of nothing.\n  const [exiting, setExiting] = useState(false);\n  const [prevOpen, setPrevOpen] = useState(open);\n  if (open !== prevOpen) {\n    setPrevOpen(open);\n    setDismissed(false);\n    setExiting(open === false && prevOpen === true && !dismissed && !skipsExitAnimation());\n    if (open) drag.reset();\n  }\n  useEffect(() => {\n    if (!exiting) return;\n    const timer = setTimeout(() => setExiting(false), OVERLAY_EXIT_MS);\n    return () => clearTimeout(timer);\n  }, [exiting]);\n\n  // The panel lowers itself before the caller unmounts it (live #320 rework). Every\n  // dismissal below goes through `requestClose`; `onClose` still does the closing, one\n  // animation later. A caller that closes the dialog ITSELF — after a save, say —\n  // unmounts with no exit unless it passes `open`, which is what that prop is for.\n  const { closing, requestClose } = useCloseTransition(() => {\n    setDismissed(true);\n    onClose();\n  });\n  // A panel on its way out after `open` turned false is already closed: a press on\n  // its fading backdrop must not report a second close.\n  const backdropClose = useBackdropClose(active ? requestClose : () => {});\n  // Back means the same as Escape here. On a phone Escape doesn't exist, so without\n  // this the only way out of a dialog is finding its close button — and Back, the\n  // gesture everyone reaches for, navigated the page underneath instead (#172).\n  // Held only while open: a closed `open={false}` dialog must not own a history entry.\n  useOverlayHistory(active && ownHistoryEntry, requestClose);\n\n  // Through the shared hook and not by hand: this component's own save/restore copy\n  // was one half of the pair that left the page permanently unscrollable when a dialog\n  // containing an open sheet was closed — see the note in use-body-scroll-lock.ts.\n  useBodyScrollLock(active);\n\n  // Focus the panel itself (not the first field) so opening doesn't pop the mobile\n  // keyboard, while still moving focus into the dialog for keyboard and screen-reader\n  // users. Through the shared hook since this component is where it came from — the\n  // hook adds per-keystroke recomputation, a guard on restoring to a detached node,\n  // and nesting, none of which this copy had. Released when `open` turns false, which\n  // hands focus back to the trigger while the panel is still on its way out.\n  //\n  // \"The panel itself\" only when nothing inside asked for focus: a field the app\n  // autofocuses on purpose keeps it (0.33.1, keksdose live #402 — the same trap took\n  // an autofocused amount straight back in `FullBleedDialog`). Its keyboard is then the\n  // one the app chose to show; the trigger still gets focus back on close.\n  useFocusTrap(panelRef, { active, initialFocus: \"container\" });\n  const leaving = closing || exiting;\n\n  // One layer on the Escape stack while open (Wave 2, DUP-1): a list, a popover or a\n  // tooltip opened inside takes the key before the dialog does, wherever focus is —\n  // and the dialog gets it even when focus is not in the panel.\n  const layer = useDismissLayer(active, requestClose);\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    // The caller's handler sees Escape only while this dialog is the layer on top: a\n    // tooltip or a list open over it takes that press first (0.35, KS's gear wizard).\n    runOwnKeyDown(e, onKeyDown, layer);\n    // To whatever is on top — this dialog, unless something opened over it — and\n    // stopped here. Tab containment lives in useFocusTrap, which listens on the panel.\n    takeEscape(e);\n  };\n\n  // Portal to <body> so the `fixed inset-0 z-50` overlay escapes whatever stacking\n  // context its caller sits in. Rendered inline, a modal opened from e.g. the top\n  // bar (a z-30 context) could paint BELOW a sibling z-30 sticky element like the\n  // expanded transaction editor (feedback #320). The tour/command-palette overlays\n  // already portal for the same reason.\n  if (!active && !exiting) return null;\n  return createPortal(\n    <div\n      // Out of the accessibility tree for the length of a caller-driven exit: focus is\n      // already back on the page, and an `aria-modal` panel that is leaving would hide\n      // that page from a screen reader for 220ms. Not `inert` — that would let a tap\n      // fall through the fading backdrop to the row underneath.\n      aria-hidden={exiting || undefined}\n      // A kit layer, for the tour's layer order (0.50, docs/tours-harmonization.md §11.6):\n      // a backdrop, so the tour measures the panel inside it to tell a full-screen sheet.\n      data-kit-layer=\"backdrop\"\n      className={cn(\n        // Live #320. The panel below rises only where it is bottom-anchored: from md up\n        // it is centred, and a centred box sliding up from off-screen reads as a\n        // different component arriving rather than as the same one settling.\n        leaving ? \"animate-overlay-out\" : \"animate-overlay\",\n        \"fixed inset-0 z-50 flex items-end justify-center bg-black/40 md:items-center\",\n        fullBleed ? \"p-0 md:p-4\" : \"p-4\",\n      )}\n      {...backdropClose}\n    >\n      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- always\n          role=\"dialog\" or \"alertdialog\" (the ternary hides that from the rule): `onKeyDown`\n          is Escape-to-close per the APG dialog pattern, and the drag handlers are\n          swipe-to-dismiss, whose keyboard path is that same Escape. */}\n      <div\n        // `...rest` FIRST, everything the dialog needs to be a dialog after it. A\n        // wrapper that spreads its own props through to this one cannot then take away\n        // the role, the modality or the `tabIndex={-1}` that `useFocusTrap` needs —\n        // losing any of the three is silent, and the symptom (a dialog a screen reader\n        // walks straight out of) shows up nowhere near the call site that caused it.\n        {...rest}\n        ref={setPanel}\n        // Normalised at runtime too: an untyped caller's `role=\"presentation\"` must not\n        // take the dialog role away (props-passthrough pins that).\n        role={role === \"alertdialog\" ? \"alertdialog\" : \"dialog\"}\n        aria-modal=\"true\"\n        aria-labelledby={labelledBy}\n        tabIndex={-1}\n        onKeyDown={handleKeyDown}\n        {...drag.handlers}\n        // MERGED, not replaced: `drag.style` is undefined until a drag starts, so\n        // assigning it outright would drop a caller's own `style` on every render but\n        // the ones where the panel is being dragged.\n        style={{ ...style, ...drag.style }}\n        className={cn(\n          leaving ? \"animate-sheet-out md:animate-none\" : \"animate-sheet md:animate-none\",\n          \"w-full rounded-lg border border-subtle bg-surface shadow-sm outline-none\",\n          { md: \"max-w-md\", lg: \"max-w-lg\", xl: \"max-w-3xl\", \"2xl\": \"max-w-[110rem]\" }[size],\n          // A panel taller than the screen has to scroll ITSELF. The backdrop is\n          // `fixed inset-0` and the body is scroll-locked while a dialog is open, so\n          // without this the overflow simply had nowhere to go: on a phone the panel\n          // is bottom-anchored, so it grew UPWARD past the top edge and the part that\n          // went past it could not be reached by any gesture (Keksdose live #254, on\n          // the price-merge dialog — but it was every dialog with more than a screen\n          // of content). `max-h-full` resolves against the backdrop's content box,\n          // which is the viewport minus its own padding, so the panel stops exactly\n          // where the screen does; `overscroll-contain` keeps the fling inside it.\n          //\n          // Three callers had already patched themselves with `max-h-[90vh]` +\n          // an inner scroller. Those still win — `cn` is tailwind-merge — and this is\n          // the default they should not have needed.\n          \"max-h-full overflow-y-auto overscroll-contain\",\n          \"p-4\",\n          // The grab affordance sits on the panel's own top strip: a drag handle of\n          // its own would be one more control in a dialog that is mostly one field.\n          draggable && \"md:[&>*:first-child]:cursor-grab\",\n          className,\n        )}\n      >\n        <ModalCloseContext.Provider value={requestClose}>{children}</ModalCloseContext.Provider>\n      </div>\n    </div>,\n    document.body,\n  );\n}\n"],"mappings":";AA+PI;AA/PJ,SAAS,eAAe,WAAW,SAAS,QAAQ,gBAAgB;AACpE,SAAS,oBAAoB;AAS7B,SAAS,UAAU;AACnB,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAClC,SAAS,sBAAwC;AACjD,SAAS,iBAAiB,oBAAoB,0BAA0B;AACxE,SAAS,eAAe,YAAY,uBAAuB;AAoB3D,SAAS,cAAc,SAAkB;AACvC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAA0C,IAAI;AAC1E,QAAM,OAAO,OAAgE,IAAI;AAEjF,QAAM,UAAU,MAAM;AACpB,SAAK,UAAU;AAAA,EACjB;AAEA,SAAO;AAAA;AAAA;AAAA,IAGL,OAAO,MAAM,UAAU,IAAI;AAAA,IAC3B,OAAO,SAAS,EAAE,WAAW,aAAa,OAAO,CAAC,OAAO,OAAO,CAAC,MAAM,IAAI;AAAA,IAC3E,UAAU,CAAC,UACP,SACA;AAAA,MACE,eAAe,CAAC,MAAyC;AACvD,YAAI,EAAE,WAAW,KAAK,OAAO,aAAa,IAAK;AAC/C,cAAM,SAAS,EAAE;AAGjB,YAAI,OAAO,QAAQ,gDAAgD,EAAG;AACtE,aAAK,UAAU,EAAE,GAAG,EAAE,SAAS,GAAG,EAAE,SAAS,IAAI,QAAQ,KAAK,GAAG,IAAI,QAAQ,KAAK,EAAE;AACpF,YAAI;AAKF,YAAE,cAAc,kBAAkB,EAAE,SAAS;AAAA,QAC/C,QAAQ;AAAA,QAKR;AAAA,MACF;AAAA,MACA,eAAe,CAAC,MAAyC;AACvD,cAAM,QAAQ,KAAK;AACnB,YAAI,CAAC,MAAO;AACZ,kBAAU,EAAE,GAAG,MAAM,KAAK,EAAE,UAAU,MAAM,GAAG,GAAG,MAAM,KAAK,EAAE,UAAU,MAAM,EAAE,CAAC;AAAA,MACpF;AAAA,MACA,aAAa;AAAA;AAAA;AAAA;AAAA,MAIb,iBAAiB;AAAA,MACjB,sBAAsB;AAAA,IACxB;AAAA,EACN;AACF;AAQO,MAAM,oBAAoB,cAAmC,IAAI;AASjE,SAAS,iBAAiB,SAAqB;AACpD,QAAM,yBAAyB,OAAO,KAAK;AAC3C,SAAO;AAAA,IACL,aAAa,CAAC,MAAuC;AACnD,6BAAuB,UAAU,EAAE,WAAW,EAAE;AAAA,IAClD;AAAA,IACA,WAAW,CAAC,MAAuC;AACjD,YAAM,UAAU,uBAAuB;AACvC,6BAAuB,UAAU;AACjC,UAAI,WAAW,EAAE,WAAW,EAAE,cAAe,SAAQ;AAAA,IACvD;AAAA,EACF;AACF;AAoIA,SAAS,cAAc,EAAE,UAAU,SAAS,GAAG,KAAK,GAA2C;AAC7F,QAAM,CAAC,MAAM,OAAO,IAAI,eAAe,QAAQ;AAI/C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,MAAI,WAAW,CAAC,KAAM,YAAW,KAAK;AACtC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAM,QAAQ,CAAC;AAAA,MACf,iBAAiB;AAAA,MACjB,SAAS,MAAM;AACb,mBAAW,IAAI;AACf,gBAAQ,KAAK;AACb,gBAAQ;AAAA,MACV;AAAA;AAAA,EACF;AAEJ;AAUO,SAAS,MAAM,OAAmB;AACvC,SAAO,MAAM,aAAa,SACxB,oBAAC,iBAAe,GAAG,OAAO,UAAU,MAAM,UAAU,IAEpD,oBAAC,cAAY,GAAG,OAAO;AAE3B;AAEA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB;AAAA,EACA,GAAG;AACL,GAGG;AACD,QAAM,WAAW,OAAuB,IAAI;AAG5C,QAAM,WAAW,QAAQ,MAAM,UAAU,UAAU,GAAG,GAAG,CAAC,GAAG,CAAC;AAC9D,QAAM,OAAO,cAAc,QAAQ,SAAS,CAAC;AAG7C,QAAM,SAAS,QAAQ;AAKvB,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAIhD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,IAAI;AAC7C,MAAI,SAAS,UAAU;AACrB,gBAAY,IAAI;AAChB,iBAAa,KAAK;AAClB,eAAW,SAAS,SAAS,aAAa,QAAQ,CAAC,aAAa,CAAC,mBAAmB,CAAC;AACrF,QAAI,KAAM,MAAK,MAAM;AAAA,EACvB;AACA,YAAU,MAAM;AACd,QAAI,CAAC,QAAS;AACd,UAAM,QAAQ,WAAW,MAAM,WAAW,KAAK,GAAG,eAAe;AACjE,WAAO,MAAM,aAAa,KAAK;AAAA,EACjC,GAAG,CAAC,OAAO,CAAC;AAMZ,QAAM,EAAE,SAAS,aAAa,IAAI,mBAAmB,MAAM;AACzD,iBAAa,IAAI;AACjB,YAAQ;AAAA,EACV,CAAC;AAGD,QAAM,gBAAgB,iBAAiB,SAAS,eAAe,MAAM;AAAA,EAAC,CAAC;AAKvE,oBAAkB,UAAU,iBAAiB,YAAY;AAKzD,oBAAkB,MAAM;AAaxB,eAAa,UAAU,EAAE,QAAQ,cAAc,YAAY,CAAC;AAC5D,QAAM,UAAU,WAAW;AAK3B,QAAM,QAAQ,gBAAgB,QAAQ,YAAY;AAClD,QAAM,gBAAgB,CAAC,MAAqC;AAG1D,kBAAc,GAAG,WAAW,KAAK;AAGjC,eAAW,CAAC;AAAA,EACd;AAOA,MAAI,CAAC,UAAU,CAAC,QAAS,QAAO;AAChC,SAAO;AAAA,IACL;AAAA,MAAC;AAAA;AAAA,QAKC,eAAa,WAAW;AAAA,QAGxB,kBAAe;AAAA,QACf,WAAW;AAAA;AAAA;AAAA;AAAA,UAIT,UAAU,wBAAwB;AAAA,UAClC;AAAA,UACA,YAAY,eAAe;AAAA,QAC7B;AAAA,QACC,GAAG;AAAA,QAMJ;AAAA,UAAC;AAAA;AAAA,YAME,GAAG;AAAA,YACJ,KAAK;AAAA,YAGL,MAAM,SAAS,gBAAgB,gBAAgB;AAAA,YAC/C,cAAW;AAAA,YACX,mBAAiB;AAAA,YACjB,UAAU;AAAA,YACV,WAAW;AAAA,YACV,GAAG,KAAK;AAAA,YAIT,OAAO,EAAE,GAAG,OAAO,GAAG,KAAK,MAAM;AAAA,YACjC,WAAW;AAAA,cACT,UAAU,sCAAsC;AAAA,cAChD;AAAA,cACA,EAAE,IAAI,YAAY,IAAI,YAAY,IAAI,aAAa,OAAO,iBAAiB,EAAE,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAcjF;AAAA,cACA;AAAA;AAAA;AAAA,cAGA,aAAa;AAAA,cACb;AAAA,YACF;AAAA,YAEA,8BAAC,kBAAkB,UAAlB,EAA2B,OAAO,cAAe,UAAS;AAAA;AAAA,QAC7D;AAAA;AAAA,IACF;AAAA,IACA,SAAS;AAAA,EACX;AACF;","names":[]}

package/dist/components/nav-pills.d.ts

@@ -45,6 +45,13 @@ export interface NavPillsProps<T extends string> extends Omit<ComponentPropsWith
     landmark?: boolean;
     /** Classes for every pill. */
     itemClassName?: string;
+    /**
+     * 0.49: `wrap` (default) puts the pills on as many rows as they need. `scroll` keeps
+     * them on ONE row that scrolls sideways — faded at a cut edge, the current pill
+     * scrolled into view (the row only, never the page) — for a strip that must stay one
+     * line high, as {@link SectionNav} under a page title on a phone.
+     */
+    layout?: "wrap" | "scroll";
     /** The `<nav>` (or the `<div role="group">`) — hence `HTMLElement` (0.34, API-2,
      *  refactor audit 2026-10). */
     ref?: Ref<HTMLElement>;
@@ -63,4 +70,4 @@ export interface NavPillsProps<T extends string> extends Omit<ComponentPropsWith
  * list (a screen reader hears "list, 4 items"), and "current" is `aria-current` — the
  * attribute a link to where you already are carries.
  */
-export declare function NavPills<T extends string>({ items, current, onSelect, renderLink, currentType, size, landmark, itemClassName, className, ref, ...rest }: NavPillsProps<T>): import("react").JSX.Element;
+export declare function NavPills<T extends string>({ items, current, onSelect, renderLink, currentType, size, landmark, itemClassName, layout, className, ref, ...rest }: NavPillsProps<T>): import("react").JSX.Element;

package/dist/components/nav-pills.js

@@ -1,6 +1,8 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef } from "react";
 import { cn } from "../lib/cn.js";
+import { scrollIntoStrip, useStripFade } from "../lib/strip-fade.js";
 import { useKitLink } from "../i18n/kit-labels.js";
 import { FOCUS_RING } from "./focus-ring.js";
 import { pickLinkRenderer, RenderedKitLink } from "./text-link.js";
@@ -18,12 +20,21 @@ function NavPills({
   size = "md",
   landmark = true,
   itemClassName,
+  layout = "wrap",
   className,
   ref,
   ...rest
 }) {
   const kitLink = useKitLink();
   const Root = landmark ? "nav" : "div";
+  const scroll = layout === "scroll";
+  const listRef = useRef(null);
+  const fade = useStripFade(listRef);
+  useLayoutEffect(() => {
+    const list = listRef.current;
+    const currentPill = list?.querySelector("[aria-current]");
+    if (scroll && list && currentPill) scrollIntoStrip(list, currentPill);
+  }, [scroll, current]);
   return /* @__PURE__ */ jsx(
     Root,
     {
@@ -31,46 +42,58 @@ function NavPills({
       ref,
       role: landmark ? void 0 : "group",
       className: cn("min-w-0", className),
-      children: /* @__PURE__ */ jsx("ul", { className: "m-0 flex list-none flex-wrap gap-1 p-0", children: items.map((item) => {
-        const isCurrent = item.value === current;
-        const Icon = item.icon;
-        const pillClass = cn(
-          PILL,
-          size === "sm" && PILL_SM,
-          isCurrent ? PILL_CURRENT : PILL_IDLE,
-          item.disabled && item.href === void 0 && PILL_DISABLED,
-          itemClassName
-        );
-        const children = /* @__PURE__ */ jsxs(Fragment, { children: [
-          Icon && /* @__PURE__ */ jsx(Icon, { "aria-hidden": true }),
-          item.label
-        ] });
-        let pill;
-        if (item.href !== void 0) {
-          const props = {
-            href: item.href,
-            className: pillClass,
-            children,
-            "aria-current": isCurrent ? currentType ?? "page" : void 0,
-            onClick: () => onSelect?.(item.value)
-          };
-          const kit = pickLinkRenderer(void 0, kitLink, item.href);
-          pill = renderLink ? renderLink(props) : kit ? /* @__PURE__ */ jsx(RenderedKitLink, { render: kit, props }) : /* @__PURE__ */ jsx("a", { href: props.href, className: props.className, "aria-current": props["aria-current"], onClick: props.onClick, children: props.children });
-        } else {
-          pill = /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              disabled: item.disabled,
-              "aria-current": isCurrent ? currentType ?? "true" : void 0,
-              onClick: () => onSelect?.(item.value),
-              className: pillClass,
-              children
+      children: /* @__PURE__ */ jsx(
+        "ul",
+        {
+          ref: listRef,
+          className: cn(
+            "m-0 flex list-none gap-1 p-0",
+            scroll ? "flex-nowrap overflow-x-auto overscroll-x-contain [scrollbar-width:none]" : "flex-wrap"
+          ),
+          "data-overflow": scroll ? fade.overflow : void 0,
+          style: scroll && fade.mask ? { maskImage: fade.mask, WebkitMaskImage: fade.mask } : void 0,
+          children: items.map((item) => {
+            const isCurrent = item.value === current;
+            const Icon = item.icon;
+            const pillClass = cn(
+              PILL,
+              size === "sm" && PILL_SM,
+              isCurrent ? PILL_CURRENT : PILL_IDLE,
+              item.disabled && item.href === void 0 && PILL_DISABLED,
+              itemClassName
+            );
+            const children = /* @__PURE__ */ jsxs(Fragment, { children: [
+              Icon && /* @__PURE__ */ jsx(Icon, { "aria-hidden": true }),
+              item.label
+            ] });
+            let pill;
+            if (item.href !== void 0) {
+              const props = {
+                href: item.href,
+                className: pillClass,
+                children,
+                "aria-current": isCurrent ? currentType ?? "page" : void 0,
+                onClick: () => onSelect?.(item.value)
+              };
+              const kit = pickLinkRenderer(void 0, kitLink, item.href);
+              pill = renderLink ? renderLink(props) : kit ? /* @__PURE__ */ jsx(RenderedKitLink, { render: kit, props }) : /* @__PURE__ */ jsx("a", { href: props.href, className: props.className, "aria-current": props["aria-current"], onClick: props.onClick, children: props.children });
+            } else {
+              pill = /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  disabled: item.disabled,
+                  "aria-current": isCurrent ? currentType ?? "true" : void 0,
+                  onClick: () => onSelect?.(item.value),
+                  className: pillClass,
+                  children
+                }
+              );
             }
-          );
+            return /* @__PURE__ */ jsx("li", { className: cn("flex", scroll && "shrink-0"), children: pill }, item.value);
+          })
         }
-        return /* @__PURE__ */ jsx("li", { className: "flex", children: pill }, item.value);
-      }) })
+      )
     }
   );
 }