@eifi1/ui-kit 0.31.0 → 0.32.0

package/dist/components/tile-radio.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/tile-radio.tsx"],"sourcesContent":["import { useId, useRef } from \"react\";\nimport type { KeyboardEvent, ReactNode } from \"react\";\nimport { Ban, Check } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { horizontalStep } from \"../lib/direction\";\nimport { Tooltip } from \"./tooltip\";\n\n/**\n * A row of square tiles that behaves as ONE radio group — the machinery\n * {@link SwatchPicker} and {@link IconPicker} are built on, public since 0.22.0 for the\n * one-of-n pickers those two do not cover (kastlan's input audit: a choice whose tiles\n * show something of the app's own — a mark, a pattern, a symbol set the kit does not\n * ship).\n *\n * Keksdose had three of these (the category colours, the category symbols, the\n * transaction flags) and all three were rows of `aria-pressed` buttons: a separate\n * tab stop per tile, and \"pressed\" on a choice that is really one-of-n. The APG radio\n * group is the shape a screen reader expects for that (\"Red, radio, 2 of 7, checked\")\n * and the one a keyboard expects too — a single tab stop, arrows to move.\n *\n * ## The container is yours\n *\n * It renders the TILES only — no wrapper — so it can sit in a layout the caller owns\n * (a wrapping row, a grid, a row beside a search box). That element must carry the\n * group's semantics, as SwatchPicker's does:\n *\n * ```tsx\n * <div role=\"radiogroup\" aria-labelledby={headingId} className=\"flex flex-wrap gap-1.5\">\n *   <TileRadioGroup\n *     items={[{ key: \"dots\", label: \"Dots\" }, { key: \"lines\", label: \"Lines\" }]}\n *     checked={pattern}\n *     onSelect={(key) => key && setPattern(key)}\n *     renderTile={(item) => <PatternGlyph pattern={item.key} className={TILE_SIZE.md.glyph} />}\n *   />\n * </div>\n * ```\n *\n * `role=\"radiogroup\"` and a name (`aria-label` or `aria-labelledby`) — without them a\n * screen reader hears radios that belong to nothing, and no \"2 of 7\". Set\n * `aria-disabled` on it as well when the whole group is `disabled`.\n *\n * ## What a tile is\n *\n * A square (28 / 32 / 44px, {@link TILE_SIZE}) holding `renderTile`'s content, NAMED by\n * the item's `label` (`aria-label`, so what is drawn inside is decoration) and showing\n * that label in a bubble on hover and focus — a row of unlabelled squares is the\n * complaint that put the bubble there. It is for choices that are SEEN: a colour, a\n * glyph, a pattern. A choice that has to be READ — a plan with a price and three lines\n * of features, an option with a sentence of explanation — is a {@link ChoiceCardGroup}\n * (`type=\"radio\"`): a card names its option by its title and describes it by its text,\n * where a tile would hide the text behind a bubble and repeat it.\n *\n * No strings of its own: every name is an item's `label`, the \"none\" tile's included.\n *\n * ## A tile that cannot be chosen\n *\n * `disabled` takes a tile out of the choice AND out of reach: the arrow keys skip it\n * and Tab never lands on it, so a dimmed square says nothing about why. Give it a\n * `disabledReason` instead and it stays reachable, `aria-disabled`, with the reason in\n * its bubble and its description — and choosing it does nothing (0.23, the kit's later\n * list after keksdose K3; {@link Button}'s `disabledReason`, one tile at a time).\n */\n\n/** A tile's size: 28 / 32 / 44px — see {@link TILE_SIZE}. */\nexport type TileSize = \"sm\" | \"md\" | \"lg\";\n\n/** 28 / 32 / 44px. `lg` is the touch target a phone surface wants (`min-h-11`). `glyph`\n *  and `swatch` are the content sizes the kit's own pickers draw inside each — use them\n *  in `renderTile` so a tile of the app's own matches theirs. */\nexport const TILE_SIZE: Record<TileSize, { tile: string; glyph: string; swatch: string }> = {\n  sm: { tile: \"size-7\", glyph: \"size-3.5\", swatch: \"size-4\" },\n  md: { tile: \"size-8\", glyph: \"size-4\", swatch: \"size-5\" },\n  lg: { tile: \"size-11\", glyph: \"size-5\", swatch: \"size-6\" },\n};\n\n/** One tile, whatever it shows. `key` is `null` for the \"none\" entry — a tile of its\n *  own that leads back to nothing, since clicking a checked tile does not uncheck it. */\nexport interface TileItem<T extends string> {\n  key: T | null;\n  label: string;\n  /** Said after the name, and shown in the bubble under it. Marks the tile with a\n   *  dot, so the note is visible without hovering every tile to find it. */\n  note?: string;\n  /** Out of the choice and out of reach: natively disabled, skipped by the arrow keys,\n   *  never the tab stop. */\n  disabled?: boolean;\n  /**\n   * Why this tile cannot be chosen right now — a colour another category already wears,\n   * a symbol only an owner may set. The tile LOOKS disabled but is `aria-disabled`, not\n   * `disabled`: Tab and the arrow keys still reach it, the reason shows in its bubble\n   * under its name (and its `note`) and describes it, and a click, Space / Enter or an\n   * arrow under automatic activation chooses nothing — the focus moves, the checked\n   * tile stays. Wins over `disabled`, as on {@link Button}; the whole group's\n   * `disabled` still wins over it.\n   */\n  disabledReason?: ReactNode;\n}\n\nexport interface TileRadioGroupProps<T extends string> {\n  /** The tiles, in reading order. Render them inside a `role=\"radiogroup\"` element\n   *  with a name — see the module note. */\n  items: TileItem<T>[];\n  /** The checked key, or `undefined` for \"nothing is checked\" (the mixed state, or\n   *  a value that is not among the options). */\n  checked: T | null | undefined;\n  onSelect: (key: T | null) => void;\n  /** \"automatic\" (default): an arrow key moves AND checks, the APG default. \"manual\":\n   *  arrows move focus only, Space or Enter checks — for a picker whose change is\n   *  expensive (a bulk edit that saves on every change). */\n  activation?: \"automatic\" | \"manual\";\n  /** Every tile disabled. Mark the container `aria-disabled` too. Default `false`. */\n  disabled?: boolean;\n  /** 28 / 32 / 44px tiles ({@link TILE_SIZE}). Default \"md\"; \"lg\" is the touch-target\n   *  size a phone surface wants. */\n  size?: TileSize;\n  /** What goes inside a tile — `aria-hidden` decoration, since the tile is named by\n   *  `label`. Not called for the `null` (\"none\") item, which shows the kit's \"no\"\n   *  glyph. The frame, the tick and the note's dot are drawn around it. */\n  renderTile: (item: TileItem<T>, selected: boolean) => ReactNode;\n  /** Extra classes for a tile, per item, merged after the kit's — so a `size-*` here\n   *  beats `size`'s (a tile that grows in a narrow card). */\n  tileClassName?: (item: TileItem<T>, selected: boolean) => string | undefined;\n}\n\n/**\n * The tile's frame. Selection is a thicker, darker frame AND a tick in the corner —\n * never a colour change alone,\n * because the thing inside a swatch tile IS a colour, and a red frame round a red dot\n * says nothing to a reader who cannot see red.\n *\n * `focus-visible` with an offset in the surface colour, as the checkbox does: the ring\n * must not be painted in the colour of the frame it touches.\n */\nconst TILE_BASE =\n  \"relative inline-flex shrink-0 items-center justify-center rounded-md border transition-colors \" +\n  \"focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-surface)] \" +\n  \"disabled:cursor-not-allowed disabled:opacity-50\";\nconst TILE_IDLE =\n  \"border-[var(--border)] bg-[var(--bg-surface)] hover:border-[var(--border-strong)] hover:bg-[var(--bg-hover)]\";\nconst TILE_SELECTED =\n  \"border-[var(--text-primary)] bg-[var(--bg-surface)] ring-1 ring-[var(--text-primary)]\";\n/** A locked tile: the disabled look without `disabled` — dimmed, a not-allowed cursor. */\nconst TILE_LOCKED = \"cursor-not-allowed opacity-50\";\n/** …and no hover offer on an idle one, which cannot be chosen. Not on the selected\n *  tile, whose frame IS its state. */\nconst TILE_LOCKED_IDLE = \"hover:border-[var(--border)] hover:bg-[var(--bg-surface)]\";\n\n/** `undefined`, `null`, `false` and `\"\"` are no reason — what `cond && \"…\"` gives. */\nfunction isLocked(item: TileItem<string>): boolean {\n  const r = item.disabledReason;\n  return r !== undefined && r !== null && r !== false && r !== \"\";\n}\n\n/** Out of reach: natively disabled. A reason keeps a `disabled` tile reachable. */\nfunction isOff(item: TileItem<string>): boolean {\n  return Boolean(item.disabled) && !isLocked(item);\n}\n\n/**\n * The tiles of one radio group, without the group element — render them inside a\n * `role=\"radiogroup\"` with a name (the module note above has the example). One tab stop\n * (the checked tile, else the first that can be chosen), arrows to move — left and\n * right follow the page's direction — Home and End to the ends, and by default the\n * arrows choose as they go.\n */\nexport function TileRadioGroup<T extends string>({\n  items,\n  checked,\n  onSelect,\n  activation = \"automatic\",\n  disabled = false,\n  size = \"md\",\n  renderTile,\n  tileClassName,\n}: TileRadioGroupProps<T>) {\n  const refs = useRef<Array<HTMLButtonElement | null>>([]);\n  const noteId = useId();\n  const reasonId = useId();\n  const s = TILE_SIZE[size];\n  const checkedIndex =\n    checked === undefined ? -1 : items.findIndex((it) => it.key === checked);\n  // The ONE tab stop: the checked tile, else the first that can be reached — the APG\n  // rule, so Tab into a group with nothing checked still lands somewhere. A locked\n  // tile is reachable: landing on it is how its reason is read.\n  const tabStop =\n    checkedIndex >= 0 && !isOff(items[checkedIndex])\n      ? checkedIndex\n      : items.findIndex((it) => !isOff(it));\n\n  const onKeyDown = (e: KeyboardEvent<HTMLButtonElement>, index: number) => {\n    // Left and right are VISUAL directions: in a right-to-left page the row runs the\n    // other way. Up and down follow reading order either way — the APG's radio group\n    // treats them as previous/next, and the tiles wrap, so there is no column to keep.\n    const horizontal = horizontalStep(e.key, e.currentTarget);\n    let step: number | \"first\" | \"last\";\n    switch (horizontal ? \"horizontal\" : e.key) {\n      case \"horizontal\":\n        step = horizontal;\n        break;\n      case \"ArrowDown\":\n        step = 1;\n        break;\n      case \"ArrowUp\":\n        step = -1;\n        break;\n      case \"Home\":\n        step = \"first\";\n        break;\n      case \"End\":\n        step = \"last\";\n        break;\n      default:\n        return;\n    }\n    e.preventDefault();\n    // Locked tiles are in the walk; natively disabled ones are not.\n    const enabled = items.map((it, i) => (isOff(it) ? -1 : i)).filter((i) => i >= 0);\n    if (!enabled.length) return;\n    const at = enabled.indexOf(index);\n    let target: number;\n    if (step === \"first\") target = enabled[0];\n    else if (step === \"last\") target = enabled[enabled.length - 1];\n    // Wrapping, as a native radio group does: the last tile's \"next\" is the first.\n    else target = enabled[(at + step + enabled.length) % enabled.length];\n    refs.current[target]?.focus();\n    // Onto a locked tile the focus moves and the choice does not: the checked tile\n    // stays checked, and the next arrow walks on from here.\n    if (activation === \"automatic\" && !isLocked(items[target])) onSelect(items[target].key);\n  };\n\n  return (\n    <>\n      {items.map((item, i) => {\n        const selected = i === checkedIndex;\n        const locked = isLocked(item);\n        const describedBy = [item.note && `${noteId}-${i}`, locked && `${reasonId}-${i}`].filter(Boolean).join(\" \");\n        const button = (\n          <button\n            ref={(el) => {\n              refs.current[i] = el;\n            }}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={selected}\n            aria-label={item.label}\n            // The note is a DESCRIPTION, read after the name and the state, not glued\n            // into the name — the punctuation between the two would be English's. So\n            // is a lock's reason, after the note.\n            aria-describedby={describedBy || undefined}\n            tabIndex={i === tabStop ? 0 : -1}\n            // A reason wins over the tile's own `disabled` (as on Button): reachable,\n            // and refusing. The whole group's `disabled` still wins over both.\n            disabled={disabled || isOff(item)}\n            aria-disabled={(locked && !disabled) || undefined}\n            // Clicking the checked tile again does nothing: a radio is not a toggle.\n            // \"None\" is the way back to nothing, and it is a tile of its own. A locked\n            // tile is never chosen.\n            onClick={() => !selected && !locked && onSelect(item.key)}\n            onKeyDown={(e) => onKeyDown(e, i)}\n            className={cn(\n              TILE_BASE,\n              s.tile,\n              selected ? TILE_SELECTED : TILE_IDLE,\n              locked && TILE_LOCKED,\n              locked && !selected && TILE_LOCKED_IDLE,\n              tileClassName?.(item, selected),\n            )}\n          >\n            {item.key === null ? (\n              <Ban aria-hidden className={cn(s.glyph, \"text-[var(--text-muted)]\")} />\n            ) : (\n              renderTile(item, selected)\n            )}\n            {item.note && (\n              <>\n                {/* A dot rather than a dimmed tile: dimming reads as \"disabled\", and a\n                    tile with a note is entirely available. */}\n                <span\n                  aria-hidden\n                  className=\"absolute end-0.5 top-0.5 size-1.5 rounded-full bg-[var(--text-muted)]\"\n                />\n                {/* `hidden` still serves as a description: aria-describedby reads\n                    hidden text, which is what keeps it out of the layout. */}\n                <span id={`${noteId}-${i}`} hidden>\n                  {item.note}\n                </span>\n              </>\n            )}\n            {/* The reason's description is a `hidden` copy, as on a locked Button: the\n                bubble exists only while hovered or focused once portalled, and a\n                description that comes and goes is read inconsistently. */}\n            {locked && (\n              <span id={`${reasonId}-${i}`} hidden>\n                {item.disabledReason}\n              </span>\n            )}\n            {selected && <SelectedTick />}\n          </button>\n        );\n        return (\n          // The bubble is the SIGHTED user's name for the tile — eight unlabelled\n          // squares are the complaint that put a bubble on Keksdose's (live #289).\n          // It wraps a span rather than the button, because a Tooltip hands its\n          // child an `aria-describedby`, and a tile named \"Red\" and described as\n          // \"Red\" is read out twice.\n          <Tooltip\n            key={item.key ?? \"\\u0000none\"}\n            label={\n              item.note || locked ? (\n                <>\n                  <span className=\"block\">{item.label}</span>\n                  {item.note && <span className=\"block font-normal text-[var(--text-muted)]\">{item.note}</span>}\n                  {/* The reason in the body colour: it is the news, the note is\n                      standing context. */}\n                  {locked && <span className=\"block font-normal\">{item.disabledReason}</span>}\n                </>\n              ) : (\n                item.label\n              )\n            }\n            portal\n          >\n            <span className=\"inline-flex\">{button}</span>\n          </Tooltip>\n        );\n      })}\n    </>\n  );\n}\n\n/** The tick on a selected tile — a small badge in the corner, in the text colour on\n *  the surface colour, so it reads the same over every swatch colour. */\nfunction SelectedTick() {\n  return (\n    <span\n      aria-hidden\n      className=\"absolute -bottom-1 -end-1 inline-flex size-3.5 items-center justify-center rounded-full bg-[var(--text-primary)] text-[var(--bg-surface)]\"\n    >\n      <Check strokeWidth={3} className=\"size-2.5\" />\n    </span>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/tile-radio.tsx"],"sourcesContent":["import { useId, useRef } from \"react\";\nimport type { KeyboardEvent, ReactNode } from \"react\";\nimport { Ban, Check } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { horizontalStep } from \"../lib/direction\";\nimport { Tooltip } from \"./tooltip\";\n\n/**\n * A row of square tiles that behaves as ONE radio group — the machinery\n * {@link SwatchPicker} and {@link IconPicker} are built on, public since 0.22.0 for the\n * one-of-n pickers those two do not cover (kastlan's input audit: a choice whose tiles\n * show something of the app's own — a mark, a pattern, a symbol set the kit does not\n * ship).\n *\n * Keksdose had three of these (the category colours, the category symbols, the\n * transaction flags) and all three were rows of `aria-pressed` buttons: a separate\n * tab stop per tile, and \"pressed\" on a choice that is really one-of-n. The APG radio\n * group is the shape a screen reader expects for that (\"Red, radio, 2 of 7, checked\")\n * and the one a keyboard expects too — a single tab stop, arrows to move.\n *\n * ## The container is yours\n *\n * It renders the TILES only — no wrapper — so it can sit in a layout the caller owns\n * (a wrapping row, a grid, a row beside a search box). That element must carry the\n * group's semantics, as SwatchPicker's does:\n *\n * ```tsx\n * <div role=\"radiogroup\" aria-labelledby={headingId} className=\"flex flex-wrap gap-1.5\">\n *   <TileRadioGroup\n *     items={[{ key: \"dots\", label: \"Dots\" }, { key: \"lines\", label: \"Lines\" }]}\n *     checked={pattern}\n *     onSelect={(key) => key && setPattern(key)}\n *     renderTile={(item) => <PatternGlyph pattern={item.key} className={TILE_SIZE.md.glyph} />}\n *   />\n * </div>\n * ```\n *\n * `role=\"radiogroup\"` and a name (`aria-label` or `aria-labelledby`) — without them a\n * screen reader hears radios that belong to nothing, and no \"2 of 7\". Set\n * `aria-disabled` on it as well when the whole group is `disabled`.\n *\n * ## What a tile is\n *\n * A square (28 / 32 / 44px, {@link TILE_SIZE}) holding `renderTile`'s content, NAMED by\n * the item's `label` (`aria-label`, so what is drawn inside is decoration) and showing\n * that label in a bubble on hover and focus — a row of unlabelled squares is the\n * complaint that put the bubble there. It is for choices that are SEEN: a colour, a\n * glyph, a pattern. A choice that has to be READ — a plan with a price and three lines\n * of features, an option with a sentence of explanation — is a {@link ChoiceCardGroup}\n * (`type=\"radio\"`): a card names its option by its title and describes it by its text,\n * where a tile would hide the text behind a bubble and repeat it.\n *\n * No strings of its own: every name is an item's `label`, the \"none\" tile's included.\n *\n * ## A tile that cannot be chosen\n *\n * `disabled` takes a tile out of the choice AND out of reach: the arrow keys skip it\n * and Tab never lands on it, so a dimmed square says nothing about why. Give it a\n * `disabledReason` instead and it stays reachable, `aria-disabled`, with the reason in\n * its bubble and its description — and choosing it does nothing (0.23, the kit's later\n * list after keksdose K3; {@link Button}'s `disabledReason`, one tile at a time).\n */\n\n/** A tile's size: 28 / 32 / 44px — see {@link TILE_SIZE}. */\nexport type TileSize = \"sm\" | \"md\" | \"lg\";\n\n/** 28 / 32 / 44px. `lg` is the touch target a phone surface wants (`min-h-11`). `glyph`\n *  and `swatch` are the content sizes the kit's own pickers draw inside each — use them\n *  in `renderTile` so a tile of the app's own matches theirs. */\nexport const TILE_SIZE: Record<TileSize, { tile: string; glyph: string; swatch: string }> = {\n  sm: { tile: \"size-7\", glyph: \"size-3.5\", swatch: \"size-4\" },\n  md: { tile: \"size-8\", glyph: \"size-4\", swatch: \"size-5\" },\n  lg: { tile: \"size-11\", glyph: \"size-5\", swatch: \"size-6\" },\n};\n\n/** One tile, whatever it shows. `key` is `null` for the \"none\" entry — a tile of its\n *  own that leads back to nothing, since clicking a checked tile does not uncheck it. */\nexport interface TileItem<T extends string> {\n  key: T | null;\n  label: string;\n  /** Said after the name, and shown in the bubble under it. Marks the tile with a\n   *  dot, so the note is visible without hovering every tile to find it. */\n  note?: string;\n  /** Out of the choice and out of reach: natively disabled, skipped by the arrow keys,\n   *  never the tab stop. */\n  disabled?: boolean;\n  /**\n   * Why this tile cannot be chosen right now — a colour another category already wears,\n   * a symbol only an owner may set. The tile LOOKS disabled but is `aria-disabled`, not\n   * `disabled`: Tab and the arrow keys still reach it, the reason shows in its bubble\n   * under its name (and its `note`) and describes it, and a click, Space / Enter or an\n   * arrow under automatic activation chooses nothing — the focus moves, the checked\n   * tile stays. Wins over `disabled`, as on {@link Button}; the whole group's\n   * `disabled` still wins over it.\n   */\n  disabledReason?: ReactNode;\n}\n\nexport interface TileRadioGroupProps<T extends string> {\n  /** The tiles, in reading order. Render them inside a `role=\"radiogroup\"` element\n   *  with a name — see the module note. */\n  items: TileItem<T>[];\n  /** The checked key, or `undefined` for \"nothing is checked\" (the mixed state, or\n   *  a value that is not among the options). */\n  checked: T | null | undefined;\n  onSelect: (key: T | null) => void;\n  /** \"automatic\" (default): an arrow key moves AND checks, the APG default. \"manual\":\n   *  arrows move focus only, Space or Enter checks — for a picker whose change is\n   *  expensive (a bulk edit that saves on every change). */\n  activation?: \"automatic\" | \"manual\";\n  /** Every tile disabled. Mark the container `aria-disabled` too. Default `false`. */\n  disabled?: boolean;\n  /** 28 / 32 / 44px tiles ({@link TILE_SIZE}). Default \"md\"; \"lg\" is the touch-target\n   *  size a phone surface wants. */\n  size?: TileSize;\n  /** What goes inside a tile — `aria-hidden` decoration, since the tile is named by\n   *  `label`. Not called for the `null` (\"none\") item, which shows the kit's \"no\"\n   *  glyph. The frame, the tick and the note's dot are drawn around it. */\n  renderTile: (item: TileItem<T>, selected: boolean) => ReactNode;\n  /** Extra classes for a tile, per item, merged after the kit's — so a `size-*` here\n   *  beats `size`'s (a tile that grows in a narrow card). */\n  tileClassName?: (item: TileItem<T>, selected: boolean) => string | undefined;\n}\n\n/**\n * The tile's frame. Selection is a thicker, darker frame AND a tick in the corner —\n * never a colour change alone,\n * because the thing inside a swatch tile IS a colour, and a red frame round a red dot\n * says nothing to a reader who cannot see red.\n *\n * `focus-visible` with an offset in the surface colour, as the checkbox does: the ring\n * must not be painted in the colour of the frame it touches.\n */\nconst TILE_BASE =\n  \"relative inline-flex shrink-0 items-center justify-center rounded-md border transition-colors \" +\n  \"focus:outline-none \" +\n  FOCUS_RING +\n  \" focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-surface)] \" +\n  \"disabled:cursor-not-allowed disabled:opacity-50\";\nconst TILE_IDLE =\n  \"border-[var(--border)] bg-[var(--bg-surface)] hover:border-[var(--border-strong)] hover:bg-[var(--bg-hover)]\";\nconst TILE_SELECTED =\n  \"border-[var(--text-primary)] bg-[var(--bg-surface)] ring-1 ring-[var(--text-primary)]\";\n/** A locked tile: the disabled look without `disabled` — dimmed, a not-allowed cursor. */\nconst TILE_LOCKED = \"cursor-not-allowed opacity-50\";\n/** …and no hover offer on an idle one, which cannot be chosen. Not on the selected\n *  tile, whose frame IS its state. */\nconst TILE_LOCKED_IDLE = \"hover:border-[var(--border)] hover:bg-[var(--bg-surface)]\";\n\n/** `undefined`, `null`, `false` and `\"\"` are no reason — what `cond && \"…\"` gives. */\nfunction isLocked(item: TileItem<string>): boolean {\n  const r = item.disabledReason;\n  return r !== undefined && r !== null && r !== false && r !== \"\";\n}\n\n/** Out of reach: natively disabled. A reason keeps a `disabled` tile reachable. */\nfunction isOff(item: TileItem<string>): boolean {\n  return Boolean(item.disabled) && !isLocked(item);\n}\n\n/**\n * The tiles of one radio group, without the group element — render them inside a\n * `role=\"radiogroup\"` with a name (the module note above has the example). One tab stop\n * (the checked tile, else the first that can be chosen), arrows to move — left and\n * right follow the page's direction — Home and End to the ends, and by default the\n * arrows choose as they go.\n */\nexport function TileRadioGroup<T extends string>({\n  items,\n  checked,\n  onSelect,\n  activation = \"automatic\",\n  disabled = false,\n  size = \"md\",\n  renderTile,\n  tileClassName,\n}: TileRadioGroupProps<T>) {\n  const refs = useRef<Array<HTMLButtonElement | null>>([]);\n  const noteId = useId();\n  const reasonId = useId();\n  const s = TILE_SIZE[size];\n  const checkedIndex =\n    checked === undefined ? -1 : items.findIndex((it) => it.key === checked);\n  // The ONE tab stop: the checked tile, else the first that can be reached — the APG\n  // rule, so Tab into a group with nothing checked still lands somewhere. A locked\n  // tile is reachable: landing on it is how its reason is read.\n  const tabStop =\n    checkedIndex >= 0 && !isOff(items[checkedIndex])\n      ? checkedIndex\n      : items.findIndex((it) => !isOff(it));\n\n  const onKeyDown = (e: KeyboardEvent<HTMLButtonElement>, index: number) => {\n    // Left and right are VISUAL directions: in a right-to-left page the row runs the\n    // other way. Up and down follow reading order either way — the APG's radio group\n    // treats them as previous/next, and the tiles wrap, so there is no column to keep.\n    const horizontal = horizontalStep(e.key, e.currentTarget);\n    let step: number | \"first\" | \"last\";\n    switch (horizontal ? \"horizontal\" : e.key) {\n      case \"horizontal\":\n        step = horizontal;\n        break;\n      case \"ArrowDown\":\n        step = 1;\n        break;\n      case \"ArrowUp\":\n        step = -1;\n        break;\n      case \"Home\":\n        step = \"first\";\n        break;\n      case \"End\":\n        step = \"last\";\n        break;\n      default:\n        return;\n    }\n    e.preventDefault();\n    // Locked tiles are in the walk; natively disabled ones are not.\n    const enabled = items.map((it, i) => (isOff(it) ? -1 : i)).filter((i) => i >= 0);\n    if (!enabled.length) return;\n    const at = enabled.indexOf(index);\n    let target: number;\n    if (step === \"first\") target = enabled[0];\n    else if (step === \"last\") target = enabled[enabled.length - 1];\n    // Wrapping, as a native radio group does: the last tile's \"next\" is the first.\n    else target = enabled[(at + step + enabled.length) % enabled.length];\n    refs.current[target]?.focus();\n    // Onto a locked tile the focus moves and the choice does not: the checked tile\n    // stays checked, and the next arrow walks on from here.\n    if (activation === \"automatic\" && !isLocked(items[target])) onSelect(items[target].key);\n  };\n\n  return (\n    <>\n      {items.map((item, i) => {\n        const selected = i === checkedIndex;\n        const locked = isLocked(item);\n        const describedBy = [item.note && `${noteId}-${i}`, locked && `${reasonId}-${i}`].filter(Boolean).join(\" \");\n        const button = (\n          <button\n            ref={(el) => {\n              refs.current[i] = el;\n            }}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={selected}\n            aria-label={item.label}\n            // The note is a DESCRIPTION, read after the name and the state, not glued\n            // into the name — the punctuation between the two would be English's. So\n            // is a lock's reason, after the note.\n            aria-describedby={describedBy || undefined}\n            tabIndex={i === tabStop ? 0 : -1}\n            // A reason wins over the tile's own `disabled` (as on Button): reachable,\n            // and refusing. The whole group's `disabled` still wins over both.\n            disabled={disabled || isOff(item)}\n            aria-disabled={(locked && !disabled) || undefined}\n            // Clicking the checked tile again does nothing: a radio is not a toggle.\n            // \"None\" is the way back to nothing, and it is a tile of its own. A locked\n            // tile is never chosen.\n            onClick={() => !selected && !locked && onSelect(item.key)}\n            onKeyDown={(e) => onKeyDown(e, i)}\n            className={cn(\n              TILE_BASE,\n              s.tile,\n              selected ? TILE_SELECTED : TILE_IDLE,\n              locked && TILE_LOCKED,\n              locked && !selected && TILE_LOCKED_IDLE,\n              tileClassName?.(item, selected),\n            )}\n          >\n            {item.key === null ? (\n              <Ban aria-hidden className={cn(s.glyph, \"text-[var(--text-muted)]\")} />\n            ) : (\n              renderTile(item, selected)\n            )}\n            {item.note && (\n              <>\n                {/* A dot rather than a dimmed tile: dimming reads as \"disabled\", and a\n                    tile with a note is entirely available. */}\n                <span\n                  aria-hidden\n                  className=\"absolute end-0.5 top-0.5 size-1.5 rounded-full bg-[var(--text-muted)]\"\n                />\n                {/* `hidden` still serves as a description: aria-describedby reads\n                    hidden text, which is what keeps it out of the layout. */}\n                <span id={`${noteId}-${i}`} hidden>\n                  {item.note}\n                </span>\n              </>\n            )}\n            {/* The reason's description is a `hidden` copy, as on a locked Button: the\n                bubble exists only while hovered or focused once portalled, and a\n                description that comes and goes is read inconsistently. */}\n            {locked && (\n              <span id={`${reasonId}-${i}`} hidden>\n                {item.disabledReason}\n              </span>\n            )}\n            {selected && <SelectedTick />}\n          </button>\n        );\n        return (\n          // The bubble is the SIGHTED user's name for the tile — eight unlabelled\n          // squares are the complaint that put a bubble on Keksdose's (live #289).\n          // It wraps a span rather than the button, because a Tooltip hands its\n          // child an `aria-describedby`, and a tile named \"Red\" and described as\n          // \"Red\" is read out twice.\n          <Tooltip\n            key={item.key ?? \"\\u0000none\"}\n            label={\n              item.note || locked ? (\n                <>\n                  <span className=\"block\">{item.label}</span>\n                  {item.note && <span className=\"block font-normal text-[var(--text-muted)]\">{item.note}</span>}\n                  {/* The reason in the body colour: it is the news, the note is\n                      standing context. */}\n                  {locked && <span className=\"block font-normal\">{item.disabledReason}</span>}\n                </>\n              ) : (\n                item.label\n              )\n            }\n            portal\n          >\n            <span className=\"inline-flex\">{button}</span>\n          </Tooltip>\n        );\n      })}\n    </>\n  );\n}\n\n/** The tick on a selected tile — a small badge in the corner, in the text colour on\n *  the surface colour, so it reads the same over every swatch colour. */\nfunction SelectedTick() {\n  return (\n    <span\n      aria-hidden\n      className=\"absolute -bottom-1 -end-1 inline-flex size-3.5 items-center justify-center rounded-full bg-[var(--text-primary)] text-[var(--bg-surface)]\"\n    >\n      <Check strokeWidth={3} className=\"size-2.5\" />\n    </span>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/time-input.d.ts

@@ -1,16 +1,18 @@
 import * as react from 'react';
-import { dD as InputProps } from '../delete-account-setting-DCFS5Vof.js';
+import { dO as InputProps } from '../delete-account-setting-BvdQdbv3.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
-import '../data-table-labels-DUELeXpa.js';
+import '../data-table-labels-kpAAVi6g.js';
 import './data-table-sort.js';
 import './swipeable-row.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
 import './popover.js';
+import '../hooks/use-breakpoint.js';
 import './chip.js';
 import 'lucide-react';
+import './field-parts.js';
 import './field-sync.js';
 import '../wizard/types.js';
 import '../tour/tour.js';
@@ -79,6 +81,9 @@ import '../admin/admin-parts.js';
 import '../admin/admin-action-log.js';
 import '../settings/settings-labels.js';
 import '../demo/demo-labels.js';
+import './appearance-labels.js';
+import '../theme/contrast.js';
+import '../theme/text-size.js';
 import './reauth-dialog.js';
 import './server-wake.js';
 import '../lib/server-wake.js';
@@ -92,7 +97,7 @@ import './sign-chip.js';
 import './column-mapper.js';
 import '../lib/column-mapping.js';
 import '../lib/table-text.js';
-import './field-parts.js';
+import './focus-ring.js';
 
 /**
  * A time of day, as a `"HH:mm"` string (`"HH:mm:ss"` once `step` asks for seconds).

package/dist/components/toast.d.ts

@@ -109,7 +109,9 @@ declare const toast: ((message: ReactNode, opts?: ToastOptions) => ToastId) & {
 };
 type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
 type ToastSwipeDirection = "top" | "right" | "bottom" | "left";
-/** sonner's offset: one value for every edge, or per edge. Numbers are px. */
+/** sonner's offset: one value for every edge, or per edge. Numbers are px, which do not
+ *  follow the text size — prefer a CSS length (rem, or a `calc()` on
+ *  {@link TOASTER_OFFSET_TOP} / {@link TOASTER_OFFSET_BOTTOM}). */
 type ToasterOffset = string | number | {
     top?: string | number;
     right?: string | number;
@@ -160,6 +162,20 @@ interface ToasterProps {
     className?: string;
     style?: CSSProperties;
 }
+/**
+ * The Toaster's default distance from the top edge (desktop), as a CSS length (0.32,
+ * docs/text-size-harmonization.md §10.11): below a 3rem top bar with 1rem to spare, and
+ * the safe area. In rem, so it moves with the text size along with the top bar — an
+ * app's `offset={{ top: 64 }}` (keksdose) did not. Pass it, or a `calc()` built on it,
+ * instead of a px number.
+ */
+declare const TOASTER_OFFSET_TOP = "calc(env(safe-area-inset-top, 0px) + 4rem)";
+/**
+ * The Toaster's default distance from the bottom edge (phone), as a CSS length: above
+ * AppShell's measured bottom nav (`--app-nav-h`) or the home indicator, whichever is
+ * taller, with 0.75rem to spare.
+ */
+declare const TOASTER_OFFSET_BOTTOM = "calc(max(var(--app-nav-h, 0px), env(safe-area-inset-bottom, 0px)) + 0.75rem)";
 /**
  * Where the toasts appear, with the kit's defaults — mount ONE, near the root and
  * inside `<UiKitProvider>` (it reads the `toast` labels) and inside the router if a
@@ -173,4 +189,4 @@ interface ToasterProps {
  */
 declare function Toaster({ position, navOffset, theme, labels: labelsProp, closeButton, richColors, swipeDirections, offset, mobileOffset, dismissOnMiddleClick, className, style, ...rest }: ToasterProps): react.JSX.Element | null;
 
-export { DEFAULT_TOAST_LABELS, TOAST_ACTION_DURATION, type ToastAction, type ToastId, type ToastLabels, type ToastOptions, type ToastPosition, type ToastPromiseOptions, type ToastRedoOptions, type ToastSwipeDirection, type ToastUndoOptions, Toaster, type ToasterOffset, type ToasterProps, toast };
+export { DEFAULT_TOAST_LABELS, TOASTER_OFFSET_BOTTOM, TOASTER_OFFSET_TOP, TOAST_ACTION_DURATION, type ToastAction, type ToastId, type ToastLabels, type ToastOptions, type ToastPosition, type ToastPromiseOptions, type ToastRedoOptions, type ToastSwipeDirection, type ToastUndoOptions, Toaster, type ToasterOffset, type ToasterProps, toast };

package/dist/components/toast.js

@@ -2,8 +2,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useState, useSyncExternalStore } from "react";
 import { useKitLabels } from "../i18n/kit-labels.js";
-import { useMediaQuery } from "../hooks/use-media-query.js";
-import { PHONE_QUERY } from "./ui.js";
+import { usePhoneLayout } from "../hooks/use-breakpoint.js";
 let sonner = null;
 let loading = null;
 const queue = [];
@@ -170,6 +169,8 @@ function subscribeDocumentTheme(onChange) {
   return () => mo.disconnect();
 }
 const px = (v) => typeof v === "number" ? `${v}px` : v;
+const TOASTER_OFFSET_TOP = "calc(env(safe-area-inset-top, 0px) + 4rem)";
+const TOASTER_OFFSET_BOTTOM = "calc(max(var(--app-nav-h, 0px), env(safe-area-inset-bottom, 0px)) + 0.75rem)";
 function Toaster({
   position,
   navOffset,
@@ -232,10 +233,10 @@ function Toaster({
     };
   }, [dismissOnMiddleClick, mod]);
   const documentTheme = useSyncExternalStore(subscribeDocumentTheme, readDocumentTheme, () => "light");
-  const phone = useMediaQuery(PHONE_QUERY, false);
+  const phone = usePhoneLayout();
   const resolved = position ?? (phone ? "bottom-center" : "top-center");
-  const bottom = `calc(max(${navOffset === void 0 ? "var(--app-nav-h, 0px)" : px(navOffset)}, env(safe-area-inset-bottom, 0px)) + 0.75rem)`;
-  const top = "calc(env(safe-area-inset-top, 0px) + 4rem)";
+  const bottom = navOffset === void 0 ? TOASTER_OFFSET_BOTTOM : `calc(max(${px(navOffset)}, env(safe-area-inset-bottom, 0px)) + 0.75rem)`;
+  const top = TOASTER_OFFSET_TOP;
   const computed = resolved.startsWith("bottom") ? { bottom } : { top };
   if (!mod) return null;
   const Sonner = mod.Toaster;
@@ -259,6 +260,8 @@ function Toaster({
 }
 export {
   DEFAULT_TOAST_LABELS,
+  TOASTER_OFFSET_BOTTOM,
+  TOASTER_OFFSET_TOP,
   TOAST_ACTION_DURATION,
   Toaster,
   toast

package/dist/components/toast.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/toast.tsx"],"sourcesContent":["import { useEffect, useState, useSyncExternalStore } from \"react\";\nimport type { CSSProperties, MouseEvent, ReactElement, ReactNode } from \"react\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\nimport { PHONE_QUERY } from \"./ui\";\n\n/**\n * The kit's toast layer: a `toast` API and a `<Toaster>`, over sonner.\n *\n * WHY A WRAPPER AND NOT \"USE SONNER\". Both apps mounted sonner by hand and carried the\n * same policy in it — bottom-centre on a phone so the toast covers neither the header\n * nor the bottom nav, a lift above that nav, swipe in every direction, a z-index above\n * every overlay, the theme fed in from the store — and one of them wrote that policy\n * twice. `toast` mirrors sonner's call shape, so migrating is an import swap:\n *\n *     import { toast } from \"@eifi1/ui-kit\";   // was: from \"sonner\"\n *\n * WHY SONNER IS LOADED LAZILY. It is an OPTIONAL peer, and this module is re-exported by\n * the barrel: a static import here would make every app that imports a Button install\n * it (see optional-peer-imports.test.tsx). So nothing here imports it statically. The\n * `<Toaster>` loads it when it mounts — long before anyone clicks anything — and a call\n * made before that is queued and replayed in order the moment it has loaded. Every call\n * returns its id synchronously anyway: the id is chosen here, not by sonner.\n */\n\ntype Sonner = typeof import(\"sonner\");\ntype SonnerData = NonNullable<Parameters<Sonner[\"toast\"]>[1]>;\n\n/* ── Loading sonner ──────────────────────────────────────────────────────── */\n\nlet sonner: Sonner | null = null;\nlet loading: Promise<Sonner | null> | null = null;\nconst queue: Array<(s: Sonner) => void> = [];\n\nfunction loadSonner(): Promise<Sonner | null> {\n  loading ??= import(\"sonner\").then(\n    (mod) => {\n      sonner = mod;\n      // Flushed in the SAME callback that sets `sonner`, so a call arriving between\n      // the two cannot overtake one that was queued before it.\n      for (const fn of queue.splice(0)) fn(mod);\n      return mod;\n    },\n    () => {\n      queue.length = 0;\n      console.warn(\n        \"@eifi1/ui-kit: `toast` needs the optional peer `sonner` — install it (npm i sonner) to show toasts.\",\n      );\n      return null;\n    },\n  );\n  return loading;\n}\n\nfunction withSonner(fn: (s: Sonner) => void): void {\n  if (sonner) {\n    fn(sonner);\n    return;\n  }\n  queue.push(fn);\n  void loadSonner();\n}\n\nlet counter = 0;\nconst nextId = () => `kit-toast-${++counter}`;\n\n/* ── Labels ──────────────────────────────────────────────────────────────── */\n\n/** The words the toast layer says. `close` and `notifications` are read by a screen\n *  reader (the close button's name, the toast region's name); `undo` and `redo` are\n *  the default action labels of {@link toast.undo} / {@link toast.redo}. */\nexport interface ToastLabels {\n  close: string;\n  notifications: string;\n  undo: string;\n  redo: string;\n}\n\nexport const DEFAULT_TOAST_LABELS: ToastLabels = {\n  close: \"Close notification\",\n  notifications: \"Notifications\",\n  undo: \"Undo\",\n  redo: \"Redo\",\n};\n\n/** What the mounted `<Toaster>` resolved from `<UiKitProvider>` — so `toast.undo()`,\n *  which is called from mutation callbacks and not from a component, still says\n *  \"Rückgängig\" in a German app. */\nlet activeLabels: ToastLabels = DEFAULT_TOAST_LABELS;\n\n/* ── The API ─────────────────────────────────────────────────────────────── */\n\nexport type ToastId = string | number;\n\n/** A button on the toast. Clicking it dismisses the toast, unless `onClick` calls\n *  `event.preventDefault()`. */\nexport interface ToastAction {\n  label: ReactNode;\n  onClick: (event: MouseEvent<HTMLButtonElement>) => void;\n}\n\nexport interface ToastOptions {\n  /** Re-using an id REPLACES the toast on screen with that id (in place — it does not\n   *  stack a second one), which is how a toast is updated. Default: a fresh id. */\n  id?: ToastId;\n  description?: ReactNode;\n  action?: ToastAction;\n  /** A second, quieter button (sonner's `cancel`). */\n  cancel?: ToastAction;\n  /** Milliseconds; `Infinity` keeps it until dismissed. Default 4s — or\n   *  {@link TOAST_ACTION_DURATION} when there is an `action`, so there is time to\n   *  read the message AND reach the button. */\n  duration?: number;\n  /** Called when the toast is closed by the user (close button, swipe, action). */\n  onDismiss?: (toast: { id: ToastId }) => void;\n  /** Called when the toast times out. */\n  onAutoClose?: (toast: { id: ToastId }) => void;\n  /** Wrap the message and the description in `data-private`, so an app's demo /\n   *  privacy mode blurs them like every other sensitive value. */\n  redact?: boolean;\n  /** Replaces the tone's icon. */\n  icon?: ReactNode;\n  /** `false`: no close button, no swipe. */\n  dismissible?: boolean;\n  /** Per toast, over the `<Toaster>`'s `closeButton`. */\n  closeButton?: boolean;\n  className?: string;\n  style?: CSSProperties;\n}\n\n/** The default duration of a toast that carries an action (8s rather than 4s). */\nexport const TOAST_ACTION_DURATION = 8000;\n\ntype Kind = \"default\" | \"success\" | \"error\" | \"warning\" | \"info\" | \"loading\";\n\nconst privately = (node: ReactNode) => <span data-private=\"\">{node}</span>;\n\n/**\n * The toast's id, written onto its `<li>` as a class — the one per-toast attribute\n * sonner passes through untouched besides `testId`, which is the app's (sonner keeps the\n * id in React state only). `<Toaster dismissOnMiddleClick>` reads it back to dismiss\n * the toast under the pointer, close button or not. The type is kept (`s`/`n`) because\n * sonner matches ids with `===`, and the value is URI-encoded so any string id is one\n * whitespace-free class token.\n */\nconst ID_CLASS = \"kit-toast-id-\";\nconst idClass = (id: ToastId) =>\n  `${ID_CLASS}${typeof id === \"number\" ? \"n\" : \"s\"}-${encodeURIComponent(String(id))}`;\n\n/** The id {@link idClass} stamped on a toast element, or null for a toast the kit did\n *  not make (an app still calling sonner directly). */\nfunction readToastId(el: Element): ToastId | null {\n  for (const token of el.classList) {\n    if (!token.startsWith(ID_CLASS)) continue;\n    const kind = token.charAt(ID_CLASS.length);\n    const raw = decodeURIComponent(token.slice(ID_CLASS.length + 2));\n    return kind === \"n\" ? Number(raw) : raw;\n  }\n  return null;\n}\n\nfunction toSonnerData(opts: ToastOptions | undefined, id: ToastId): SonnerData {\n  const { redact, description, duration, action, className, ...rest } = opts ?? {};\n  const data: SonnerData = { ...rest, id, className: className ? `${idClass(id)} ${className}` : idClass(id) };\n  if (description !== undefined) data.description = redact ? privately(description) : description;\n  if (action) data.action = action;\n  const resolved = duration ?? (action ? TOAST_ACTION_DURATION : undefined);\n  if (resolved !== undefined) data.duration = resolved;\n  return data;\n}\n\nfunction show(kind: Kind, message: ReactNode, opts?: ToastOptions): ToastId {\n  const id = opts?.id ?? nextId();\n  const title = opts?.redact ? privately(message) : message;\n  const data = toSonnerData(opts, id);\n  withSonner((s) => {\n    if (kind === \"default\") s.toast(title, data);\n    else s.toast[kind](title, data);\n  });\n  return id;\n}\n\nexport interface ToastPromiseOptions<T> extends ToastOptions {\n  loading: ReactNode;\n  /** The success message, or a function of the resolved value. Omitted: the loading\n   *  toast is dismissed. */\n  success?: ReactNode | ((value: T) => ReactNode);\n  /** The error message, or a function of the rejection. Omitted: dismissed. */\n  error?: ReactNode | ((error: unknown) => ReactNode);\n  finally?: () => void;\n}\n\nexport interface ToastUndoOptions extends Omit<ToastOptions, \"action\"> {\n  /** Called when the button is pressed. */\n  onUndo: () => void;\n  /** Default: `toast.undo` from `<UiKitProvider>` (\"Undo\"). */\n  label?: ReactNode;\n  /** Default `success` — the step the toast reports worked. */\n  tone?: Exclude<Kind, \"loading\">;\n}\n\nexport interface ToastRedoOptions extends Omit<ToastUndoOptions, \"onUndo\"> {\n  onRedo: () => void;\n}\n\nfunction undoable(\n  message: ReactNode,\n  { tone = \"success\", label, run, ...opts }: Omit<ToastUndoOptions, \"onUndo\"> & { run: () => void },\n  fallback: ReactNode,\n): ToastId {\n  return show(tone, message, {\n    ...opts,\n    action: { label: label ?? fallback, onClick: () => run() },\n  });\n}\n\n/**\n * Show a toast. The same shape as sonner's `toast`, so an app migrates by changing the\n * import: `toast(msg, opts)`, `toast.success` / `error` / `warning` / `info` /\n * `loading`, `toast.promise`, `toast.dismiss`, `toast.custom`. Each returns the toast's\n * id; pass it back as `id` to replace that toast in place.\n *\n * Needs a mounted {@link Toaster}. Messages may be any ReactNode.\n */\nexport const toast = Object.assign(\n  (message: ReactNode, opts?: ToastOptions): ToastId => show(\"default\", message, opts),\n  {\n    message: (message: ReactNode, opts?: ToastOptions) => show(\"default\", message, opts),\n    success: (message: ReactNode, opts?: ToastOptions) => show(\"success\", message, opts),\n    error: (message: ReactNode, opts?: ToastOptions) => show(\"error\", message, opts),\n    warning: (message: ReactNode, opts?: ToastOptions) => show(\"warning\", message, opts),\n    info: (message: ReactNode, opts?: ToastOptions) => show(\"info\", message, opts),\n    /** A spinner that does not time out — replace it (same `id`) or dismiss it. */\n    loading: (message: ReactNode, opts?: ToastOptions) => show(\"loading\", message, opts),\n\n    /**\n     * A loading toast that becomes the success or the error toast, in place, when\n     * `promise` settles. Returns the toast's id; the promise itself is the caller's.\n     */\n    promise<T>(promise: Promise<T> | (() => Promise<T>), options: ToastPromiseOptions<T>): ToastId {\n      const { loading: pending, success, error, finally: onFinally, ...opts } = options;\n      const id = show(\"loading\", pending, opts);\n      const same = { ...opts, id };\n      Promise.resolve()\n        .then(() => (typeof promise === \"function\" ? promise() : promise))\n        .then(\n          (value) => {\n            if (success === undefined) toast.dismiss(id);\n            else show(\"success\", typeof success === \"function\" ? success(value) : success, same);\n          },\n          (reason: unknown) => {\n            if (error === undefined) toast.dismiss(id);\n            else show(\"error\", typeof error === \"function\" ? error(reason) : error, same);\n          },\n        )\n        .finally(() => onFinally?.());\n      return id;\n    },\n\n    /** Close one toast, or every toast when `id` is omitted. */\n    dismiss(id?: ToastId): void {\n      withSonner((s) => s.toast.dismiss(id));\n    },\n\n    /** Render your own node in a toast slot — `render` receives the id to dismiss it. */\n    custom(render: (id: ToastId) => ReactElement, opts?: Omit<ToastOptions, \"redact\">): ToastId {\n      const id = opts?.id ?? nextId();\n      const data = toSonnerData(opts, id);\n      withSonner((s) => s.toast.custom(render, data));\n      return id;\n    },\n\n    /**\n     * \"Deleted — Undo\": a toast whose action takes the step back, labelled by the\n     * provider's `toast.undo`. The journal stays the app's; this is only its toast.\n     * Pair with {@link toast.redo} so the step back can itself be taken back.\n     */\n    undo(message: ReactNode, { onUndo, ...opts }: ToastUndoOptions): ToastId {\n      return undoable(message, { ...opts, run: onUndo }, activeLabels.undo);\n    },\n\n    /** {@link toast.undo}'s mirror: the action is labelled `toast.redo`. */\n    redo(message: ReactNode, { onRedo, ...opts }: ToastRedoOptions): ToastId {\n      return undoable(message, { ...opts, run: onRedo }, activeLabels.redo);\n    },\n  },\n);\n\n/* ── The Toaster ─────────────────────────────────────────────────────────── */\n\nexport type ToastPosition =\n  | \"top-left\"\n  | \"top-center\"\n  | \"top-right\"\n  | \"bottom-left\"\n  | \"bottom-center\"\n  | \"bottom-right\";\n\nexport type ToastSwipeDirection = \"top\" | \"right\" | \"bottom\" | \"left\";\n\n/** sonner's offset: one value for every edge, or per edge. Numbers are px. */\nexport type ToasterOffset =\n  | string\n  | number\n  | { top?: string | number; right?: string | number; bottom?: string | number; left?: string | number };\n\nexport interface ToasterProps {\n  /** Default: `bottom-center` on a phone (so the toast covers neither the header's\n   *  buttons nor the bottom nav's), `top-center` from `md` up. */\n  position?: ToastPosition;\n  /** The height to keep clear at the bottom — AppShell's bottom nav. Default: its\n   *  measured `--app-nav-h`, so nothing has to be passed under an AppShell. The safe\n   *  area is added either way. Numbers are px. */\n  navOffset?: string | number;\n  /** Default: follows the `.dark` class the kit's theme store (`useApplyTheme`) puts\n   *  on `<html>` — whichever store the app built, with nothing passed. */\n  theme?: \"light\" | \"dark\" | \"system\";\n  labels?: Partial<ToastLabels>;\n  /** Default 4s (8s for a toast with an action). */\n  duration?: number;\n  visibleToasts?: number;\n  expand?: boolean;\n  /** Default true. */\n  closeButton?: boolean;\n  /** Tone-coloured toasts (the AlertBanner tokens). Default true. */\n  richColors?: boolean;\n  /** Default: every direction. */\n  swipeDirections?: ToastSwipeDirection[];\n  /** Overrides the computed offset outright (above the nav on a phone, below a 48px\n   *  top bar on desktop). */\n  offset?: ToasterOffset;\n  /** Below 600px, where sonner switches to its full-width layout. Default: `offset`'s\n   *  phone value. */\n  mobileOffset?: ToasterOffset;\n  /** Keyboard shortcut that moves focus into the toasts. Default Alt+T. */\n  hotkey?: string[];\n  gap?: number;\n  dir?: \"ltr\" | \"rtl\" | \"auto\";\n  /**\n   * A middle click on a toast dismisses it (0.18.0) — the gesture that closes a tab,\n   * which is what keksdose's users reached for (dev #583). By id, so it works on a\n   * toast with `closeButton: false` too; it counts as the user closing it, so\n   * `onDismiss` runs. Not on a link or a button inside the toast — a middle click on a\n   * link still opens it in a new tab — and not on a `dismissible: false` toast.\n   * Default true.\n   */\n  dismissOnMiddleClick?: boolean;\n  className?: string;\n  style?: CSSProperties;\n}\n\n/** The kit's palette, mapped onto sonner's variables. Inline on the toaster element,\n *  so it wins over sonner's injected sheet with no specificity contest. The tone\n *  backgrounds go through `--toast-*` aliases computed at `:root` in tokens.css:\n *  sonner redefines `--success-bg` on this same element, and a variable cannot read\n *  its own name — `--success-bg: var(--success-bg)` here would be a cycle. */\nconst KIT_TOASTER_STYLE = {\n  zIndex: \"var(--z-toast, 2147483647)\",\n  fontFamily: \"inherit\",\n  \"--normal-bg\": \"var(--bg-surface)\",\n  \"--normal-bg-hover\": \"var(--bg-hover)\",\n  \"--normal-border\": \"var(--border)\",\n  \"--normal-border-hover\": \"var(--border-strong)\",\n  \"--normal-text\": \"var(--text-primary)\",\n  \"--gray2\": \"var(--bg-hover)\",\n  \"--gray5\": \"var(--border-strong)\",\n  \"--gray11\": \"var(--text-muted)\",\n  \"--success-bg\": \"var(--toast-success-bg)\",\n  \"--success-border\": \"var(--toast-success-border)\",\n  \"--success-text\": \"var(--success)\",\n  \"--info-bg\": \"var(--toast-info-bg)\",\n  \"--info-border\": \"var(--toast-info-border)\",\n  \"--info-text\": \"var(--info)\",\n  \"--warning-bg\": \"var(--toast-warning-bg)\",\n  \"--warning-border\": \"var(--toast-warning-border)\",\n  \"--warning-text\": \"var(--warning)\",\n  \"--error-bg\": \"var(--toast-danger-bg)\",\n  \"--error-border\": \"var(--toast-danger-border)\",\n  \"--error-text\": \"var(--danger)\",\n} as CSSProperties;\n\nconst ALL_DIRECTIONS: ToastSwipeDirection[] = [\"top\", \"right\", \"bottom\", \"left\"];\n\n/** Light or dark, as the `.dark` class on `<html>` says right now. */\nfunction readDocumentTheme(): \"light\" | \"dark\" {\n  return typeof document !== \"undefined\" && document.documentElement.classList.contains(\"dark\")\n    ? \"dark\"\n    : \"light\";\n}\n\nfunction subscribeDocumentTheme(onChange: () => void): () => void {\n  if (typeof MutationObserver === \"undefined\") return () => {};\n  const mo = new MutationObserver(onChange);\n  mo.observe(document.documentElement, { attributes: true, attributeFilter: [\"class\"] });\n  return () => mo.disconnect();\n}\n\nconst px = (v: string | number) => (typeof v === \"number\" ? `${v}px` : v);\n\n/**\n * Where the toasts appear, with the kit's defaults — mount ONE, near the root and\n * inside `<UiKitProvider>` (it reads the `toast` labels) and inside the router if a\n * toast's content navigates.\n *\n * Accessible as sonner makes it: the toasts sit in a polite live region, so a message\n * is announced with its description and its action's label; every toast and every\n * button in it is focusable, the timer pauses while focus or the pointer is inside,\n * and Alt+T ({@link ToasterProps.hotkey}) moves focus to the newest toast. A toast\n * with an action stays up 8s by default, so the button can be reached.\n */\nexport function Toaster({\n  position,\n  navOffset,\n  theme,\n  labels: labelsProp,\n  closeButton = true,\n  richColors = true,\n  swipeDirections = ALL_DIRECTIONS,\n  offset,\n  mobileOffset,\n  dismissOnMiddleClick = true,\n  className,\n  style,\n  ...rest\n}: ToasterProps) {\n  const [mod, setMod] = useState<Sonner | null>(sonner);\n  useEffect(() => {\n    if (mod) return;\n    let live = true;\n    void loadSonner().then((m) => {\n      if (live && m) setMod(m);\n    });\n    return () => {\n      live = false;\n    };\n  }, [mod]);\n\n  const labels = useKitLabels(\"toast\", DEFAULT_TOAST_LABELS, labelsProp);\n  useEffect(() => {\n    activeLabels = labels;\n    return () => {\n      if (activeLabels === labels) activeLabels = DEFAULT_TOAST_LABELS;\n    };\n  }, [labels]);\n\n  useEffect(() => {\n    if (!dismissOnMiddleClick || !mod) return;\n    // On the document rather than the toaster: sonner owns the `<ol>`, and a listener\n    // there would have to be re-attached whenever it remounts it.\n    const toastUnder = (e: globalThis.MouseEvent) => {\n      if (e.button !== 1 || !(e.target instanceof Element)) return null;\n      const li = e.target.closest<HTMLElement>(\"[data-sonner-toast]\");\n      if (!li || li.dataset.dismissible === \"false\") return null;\n      // A link keeps its middle click (open in a new tab); a button or a field inside\n      // the toast is the app's, not a background to click.\n      const control = e.target.closest(\"a[href], button, input, select, textarea, [role='button'], [role='link']\");\n      if (control && li.contains(control)) return null;\n      return li;\n    };\n    // `mousedown`: the middle button starts autoscroll (Windows) before any click.\n    const onDown = (e: globalThis.MouseEvent) => {\n      if (toastUnder(e)) e.preventDefault();\n    };\n    const onAux = (e: globalThis.MouseEvent) => {\n      const li = toastUnder(e);\n      if (!li) return;\n      // No paste of the primary selection on Linux, no other handler's idea of it.\n      e.preventDefault();\n      const id = readToastId(li);\n      if (id !== null) mod.toast.dismiss(id);\n      // A toast made by sonner directly carries no id: its close button, if any.\n      else li.querySelector<HTMLButtonElement>(\"[data-close-button]\")?.click();\n    };\n    document.addEventListener(\"mousedown\", onDown);\n    document.addEventListener(\"auxclick\", onAux);\n    return () => {\n      document.removeEventListener(\"mousedown\", onDown);\n      document.removeEventListener(\"auxclick\", onAux);\n    };\n  }, [dismissOnMiddleClick, mod]);\n\n  const documentTheme = useSyncExternalStore(subscribeDocumentTheme, readDocumentTheme, () => \"light\" as const);\n  const phone = useMediaQuery(PHONE_QUERY, false);\n  const resolved: ToastPosition = position ?? (phone ? \"bottom-center\" : \"top-center\");\n\n  // Above the bottom nav and the home indicator: whichever is taller, since the nav\n  // already pads itself by the safe area (the same sum BulkActionBar floats on).\n  const bottom = `calc(max(${navOffset === undefined ? \"var(--app-nav-h, 0px)\" : px(navOffset)}, env(safe-area-inset-bottom, 0px)) + 0.75rem)`;\n  // Below a 48px TopBar with the same 1rem clearance.\n  const top = \"calc(env(safe-area-inset-top, 0px) + 4rem)\";\n  const computed = resolved.startsWith(\"bottom\") ? { bottom } : { top };\n\n  if (!mod) return null;\n  const Sonner = mod.Toaster;\n  return (\n    <Sonner\n      {...rest}\n      position={resolved}\n      theme={theme ?? documentTheme}\n      closeButton={closeButton}\n      richColors={richColors}\n      swipeDirections={swipeDirections}\n      offset={offset ?? computed}\n      mobileOffset={mobileOffset ?? offset ?? computed}\n      containerAriaLabel={labels.notifications}\n      toastOptions={{ closeButtonAriaLabel: labels.close }}\n      className={className ? `kit-toaster ${className}` : \"kit-toaster\"}\n      style={{ ...KIT_TOASTER_STYLE, ...style }}\n    />\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/toast.tsx"],"sourcesContent":["import { useEffect, useState, useSyncExternalStore } from \"react\";\nimport type { CSSProperties, MouseEvent, ReactElement, ReactNode } from \"react\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { usePhoneLayout } from \"../hooks/use-breakpoint\";\n\n/**\n * The kit's toast layer: a `toast` API and a `<Toaster>`, over sonner.\n *\n * WHY A WRAPPER AND NOT \"USE SONNER\". Both apps mounted sonner by hand and carried the\n * same policy in it — bottom-centre on a phone so the toast covers neither the header\n * nor the bottom nav, a lift above that nav, swipe in every direction, a z-index above\n * every overlay, the theme fed in from the store — and one of them wrote that policy\n * twice. `toast` mirrors sonner's call shape, so migrating is an import swap:\n *\n *     import { toast } from \"@eifi1/ui-kit\";   // was: from \"sonner\"\n *\n * WHY SONNER IS LOADED LAZILY. It is an OPTIONAL peer, and this module is re-exported by\n * the barrel: a static import here would make every app that imports a Button install\n * it (see optional-peer-imports.test.tsx). So nothing here imports it statically. The\n * `<Toaster>` loads it when it mounts — long before anyone clicks anything — and a call\n * made before that is queued and replayed in order the moment it has loaded. Every call\n * returns its id synchronously anyway: the id is chosen here, not by sonner.\n */\n\ntype Sonner = typeof import(\"sonner\");\ntype SonnerData = NonNullable<Parameters<Sonner[\"toast\"]>[1]>;\n\n/* ── Loading sonner ──────────────────────────────────────────────────────── */\n\nlet sonner: Sonner | null = null;\nlet loading: Promise<Sonner | null> | null = null;\nconst queue: Array<(s: Sonner) => void> = [];\n\nfunction loadSonner(): Promise<Sonner | null> {\n  loading ??= import(\"sonner\").then(\n    (mod) => {\n      sonner = mod;\n      // Flushed in the SAME callback that sets `sonner`, so a call arriving between\n      // the two cannot overtake one that was queued before it.\n      for (const fn of queue.splice(0)) fn(mod);\n      return mod;\n    },\n    () => {\n      queue.length = 0;\n      console.warn(\n        \"@eifi1/ui-kit: `toast` needs the optional peer `sonner` — install it (npm i sonner) to show toasts.\",\n      );\n      return null;\n    },\n  );\n  return loading;\n}\n\nfunction withSonner(fn: (s: Sonner) => void): void {\n  if (sonner) {\n    fn(sonner);\n    return;\n  }\n  queue.push(fn);\n  void loadSonner();\n}\n\nlet counter = 0;\nconst nextId = () => `kit-toast-${++counter}`;\n\n/* ── Labels ──────────────────────────────────────────────────────────────── */\n\n/** The words the toast layer says. `close` and `notifications` are read by a screen\n *  reader (the close button's name, the toast region's name); `undo` and `redo` are\n *  the default action labels of {@link toast.undo} / {@link toast.redo}. */\nexport interface ToastLabels {\n  close: string;\n  notifications: string;\n  undo: string;\n  redo: string;\n}\n\nexport const DEFAULT_TOAST_LABELS: ToastLabels = {\n  close: \"Close notification\",\n  notifications: \"Notifications\",\n  undo: \"Undo\",\n  redo: \"Redo\",\n};\n\n/** What the mounted `<Toaster>` resolved from `<UiKitProvider>` — so `toast.undo()`,\n *  which is called from mutation callbacks and not from a component, still says\n *  \"Rückgängig\" in a German app. */\nlet activeLabels: ToastLabels = DEFAULT_TOAST_LABELS;\n\n/* ── The API ─────────────────────────────────────────────────────────────── */\n\nexport type ToastId = string | number;\n\n/** A button on the toast. Clicking it dismisses the toast, unless `onClick` calls\n *  `event.preventDefault()`. */\nexport interface ToastAction {\n  label: ReactNode;\n  onClick: (event: MouseEvent<HTMLButtonElement>) => void;\n}\n\nexport interface ToastOptions {\n  /** Re-using an id REPLACES the toast on screen with that id (in place — it does not\n   *  stack a second one), which is how a toast is updated. Default: a fresh id. */\n  id?: ToastId;\n  description?: ReactNode;\n  action?: ToastAction;\n  /** A second, quieter button (sonner's `cancel`). */\n  cancel?: ToastAction;\n  /** Milliseconds; `Infinity` keeps it until dismissed. Default 4s — or\n   *  {@link TOAST_ACTION_DURATION} when there is an `action`, so there is time to\n   *  read the message AND reach the button. */\n  duration?: number;\n  /** Called when the toast is closed by the user (close button, swipe, action). */\n  onDismiss?: (toast: { id: ToastId }) => void;\n  /** Called when the toast times out. */\n  onAutoClose?: (toast: { id: ToastId }) => void;\n  /** Wrap the message and the description in `data-private`, so an app's demo /\n   *  privacy mode blurs them like every other sensitive value. */\n  redact?: boolean;\n  /** Replaces the tone's icon. */\n  icon?: ReactNode;\n  /** `false`: no close button, no swipe. */\n  dismissible?: boolean;\n  /** Per toast, over the `<Toaster>`'s `closeButton`. */\n  closeButton?: boolean;\n  className?: string;\n  style?: CSSProperties;\n}\n\n/** The default duration of a toast that carries an action (8s rather than 4s). */\nexport const TOAST_ACTION_DURATION = 8000;\n\ntype Kind = \"default\" | \"success\" | \"error\" | \"warning\" | \"info\" | \"loading\";\n\nconst privately = (node: ReactNode) => <span data-private=\"\">{node}</span>;\n\n/**\n * The toast's id, written onto its `<li>` as a class — the one per-toast attribute\n * sonner passes through untouched besides `testId`, which is the app's (sonner keeps the\n * id in React state only). `<Toaster dismissOnMiddleClick>` reads it back to dismiss\n * the toast under the pointer, close button or not. The type is kept (`s`/`n`) because\n * sonner matches ids with `===`, and the value is URI-encoded so any string id is one\n * whitespace-free class token.\n */\nconst ID_CLASS = \"kit-toast-id-\";\nconst idClass = (id: ToastId) =>\n  `${ID_CLASS}${typeof id === \"number\" ? \"n\" : \"s\"}-${encodeURIComponent(String(id))}`;\n\n/** The id {@link idClass} stamped on a toast element, or null for a toast the kit did\n *  not make (an app still calling sonner directly). */\nfunction readToastId(el: Element): ToastId | null {\n  for (const token of el.classList) {\n    if (!token.startsWith(ID_CLASS)) continue;\n    const kind = token.charAt(ID_CLASS.length);\n    const raw = decodeURIComponent(token.slice(ID_CLASS.length + 2));\n    return kind === \"n\" ? Number(raw) : raw;\n  }\n  return null;\n}\n\nfunction toSonnerData(opts: ToastOptions | undefined, id: ToastId): SonnerData {\n  const { redact, description, duration, action, className, ...rest } = opts ?? {};\n  const data: SonnerData = { ...rest, id, className: className ? `${idClass(id)} ${className}` : idClass(id) };\n  if (description !== undefined) data.description = redact ? privately(description) : description;\n  if (action) data.action = action;\n  const resolved = duration ?? (action ? TOAST_ACTION_DURATION : undefined);\n  if (resolved !== undefined) data.duration = resolved;\n  return data;\n}\n\nfunction show(kind: Kind, message: ReactNode, opts?: ToastOptions): ToastId {\n  const id = opts?.id ?? nextId();\n  const title = opts?.redact ? privately(message) : message;\n  const data = toSonnerData(opts, id);\n  withSonner((s) => {\n    if (kind === \"default\") s.toast(title, data);\n    else s.toast[kind](title, data);\n  });\n  return id;\n}\n\nexport interface ToastPromiseOptions<T> extends ToastOptions {\n  loading: ReactNode;\n  /** The success message, or a function of the resolved value. Omitted: the loading\n   *  toast is dismissed. */\n  success?: ReactNode | ((value: T) => ReactNode);\n  /** The error message, or a function of the rejection. Omitted: dismissed. */\n  error?: ReactNode | ((error: unknown) => ReactNode);\n  finally?: () => void;\n}\n\nexport interface ToastUndoOptions extends Omit<ToastOptions, \"action\"> {\n  /** Called when the button is pressed. */\n  onUndo: () => void;\n  /** Default: `toast.undo` from `<UiKitProvider>` (\"Undo\"). */\n  label?: ReactNode;\n  /** Default `success` — the step the toast reports worked. */\n  tone?: Exclude<Kind, \"loading\">;\n}\n\nexport interface ToastRedoOptions extends Omit<ToastUndoOptions, \"onUndo\"> {\n  onRedo: () => void;\n}\n\nfunction undoable(\n  message: ReactNode,\n  { tone = \"success\", label, run, ...opts }: Omit<ToastUndoOptions, \"onUndo\"> & { run: () => void },\n  fallback: ReactNode,\n): ToastId {\n  return show(tone, message, {\n    ...opts,\n    action: { label: label ?? fallback, onClick: () => run() },\n  });\n}\n\n/**\n * Show a toast. The same shape as sonner's `toast`, so an app migrates by changing the\n * import: `toast(msg, opts)`, `toast.success` / `error` / `warning` / `info` /\n * `loading`, `toast.promise`, `toast.dismiss`, `toast.custom`. Each returns the toast's\n * id; pass it back as `id` to replace that toast in place.\n *\n * Needs a mounted {@link Toaster}. Messages may be any ReactNode.\n */\nexport const toast = Object.assign(\n  (message: ReactNode, opts?: ToastOptions): ToastId => show(\"default\", message, opts),\n  {\n    message: (message: ReactNode, opts?: ToastOptions) => show(\"default\", message, opts),\n    success: (message: ReactNode, opts?: ToastOptions) => show(\"success\", message, opts),\n    error: (message: ReactNode, opts?: ToastOptions) => show(\"error\", message, opts),\n    warning: (message: ReactNode, opts?: ToastOptions) => show(\"warning\", message, opts),\n    info: (message: ReactNode, opts?: ToastOptions) => show(\"info\", message, opts),\n    /** A spinner that does not time out — replace it (same `id`) or dismiss it. */\n    loading: (message: ReactNode, opts?: ToastOptions) => show(\"loading\", message, opts),\n\n    /**\n     * A loading toast that becomes the success or the error toast, in place, when\n     * `promise` settles. Returns the toast's id; the promise itself is the caller's.\n     */\n    promise<T>(promise: Promise<T> | (() => Promise<T>), options: ToastPromiseOptions<T>): ToastId {\n      const { loading: pending, success, error, finally: onFinally, ...opts } = options;\n      const id = show(\"loading\", pending, opts);\n      const same = { ...opts, id };\n      Promise.resolve()\n        .then(() => (typeof promise === \"function\" ? promise() : promise))\n        .then(\n          (value) => {\n            if (success === undefined) toast.dismiss(id);\n            else show(\"success\", typeof success === \"function\" ? success(value) : success, same);\n          },\n          (reason: unknown) => {\n            if (error === undefined) toast.dismiss(id);\n            else show(\"error\", typeof error === \"function\" ? error(reason) : error, same);\n          },\n        )\n        .finally(() => onFinally?.());\n      return id;\n    },\n\n    /** Close one toast, or every toast when `id` is omitted. */\n    dismiss(id?: ToastId): void {\n      withSonner((s) => s.toast.dismiss(id));\n    },\n\n    /** Render your own node in a toast slot — `render` receives the id to dismiss it. */\n    custom(render: (id: ToastId) => ReactElement, opts?: Omit<ToastOptions, \"redact\">): ToastId {\n      const id = opts?.id ?? nextId();\n      const data = toSonnerData(opts, id);\n      withSonner((s) => s.toast.custom(render, data));\n      return id;\n    },\n\n    /**\n     * \"Deleted — Undo\": a toast whose action takes the step back, labelled by the\n     * provider's `toast.undo`. The journal stays the app's; this is only its toast.\n     * Pair with {@link toast.redo} so the step back can itself be taken back.\n     */\n    undo(message: ReactNode, { onUndo, ...opts }: ToastUndoOptions): ToastId {\n      return undoable(message, { ...opts, run: onUndo }, activeLabels.undo);\n    },\n\n    /** {@link toast.undo}'s mirror: the action is labelled `toast.redo`. */\n    redo(message: ReactNode, { onRedo, ...opts }: ToastRedoOptions): ToastId {\n      return undoable(message, { ...opts, run: onRedo }, activeLabels.redo);\n    },\n  },\n);\n\n/* ── The Toaster ─────────────────────────────────────────────────────────── */\n\nexport type ToastPosition =\n  | \"top-left\"\n  | \"top-center\"\n  | \"top-right\"\n  | \"bottom-left\"\n  | \"bottom-center\"\n  | \"bottom-right\";\n\nexport type ToastSwipeDirection = \"top\" | \"right\" | \"bottom\" | \"left\";\n\n/** sonner's offset: one value for every edge, or per edge. Numbers are px, which do not\n *  follow the text size — prefer a CSS length (rem, or a `calc()` on\n *  {@link TOASTER_OFFSET_TOP} / {@link TOASTER_OFFSET_BOTTOM}). */\nexport type ToasterOffset =\n  | string\n  | number\n  | { top?: string | number; right?: string | number; bottom?: string | number; left?: string | number };\n\nexport interface ToasterProps {\n  /** Default: `bottom-center` on a phone (so the toast covers neither the header's\n   *  buttons nor the bottom nav's), `top-center` from `md` up. */\n  position?: ToastPosition;\n  /** The height to keep clear at the bottom — AppShell's bottom nav. Default: its\n   *  measured `--app-nav-h`, so nothing has to be passed under an AppShell. The safe\n   *  area is added either way. Numbers are px. */\n  navOffset?: string | number;\n  /** Default: follows the `.dark` class the kit's theme store (`useApplyTheme`) puts\n   *  on `<html>` — whichever store the app built, with nothing passed. */\n  theme?: \"light\" | \"dark\" | \"system\";\n  labels?: Partial<ToastLabels>;\n  /** Default 4s (8s for a toast with an action). */\n  duration?: number;\n  visibleToasts?: number;\n  expand?: boolean;\n  /** Default true. */\n  closeButton?: boolean;\n  /** Tone-coloured toasts (the AlertBanner tokens). Default true. */\n  richColors?: boolean;\n  /** Default: every direction. */\n  swipeDirections?: ToastSwipeDirection[];\n  /** Overrides the computed offset outright (above the nav on a phone, below a 48px\n   *  top bar on desktop). */\n  offset?: ToasterOffset;\n  /** Below 600px, where sonner switches to its full-width layout. Default: `offset`'s\n   *  phone value. */\n  mobileOffset?: ToasterOffset;\n  /** Keyboard shortcut that moves focus into the toasts. Default Alt+T. */\n  hotkey?: string[];\n  gap?: number;\n  dir?: \"ltr\" | \"rtl\" | \"auto\";\n  /**\n   * A middle click on a toast dismisses it (0.18.0) — the gesture that closes a tab,\n   * which is what keksdose's users reached for (dev #583). By id, so it works on a\n   * toast with `closeButton: false` too; it counts as the user closing it, so\n   * `onDismiss` runs. Not on a link or a button inside the toast — a middle click on a\n   * link still opens it in a new tab — and not on a `dismissible: false` toast.\n   * Default true.\n   */\n  dismissOnMiddleClick?: boolean;\n  className?: string;\n  style?: CSSProperties;\n}\n\n/** The kit's palette, mapped onto sonner's variables. Inline on the toaster element,\n *  so it wins over sonner's injected sheet with no specificity contest. The tone\n *  backgrounds go through `--toast-*` aliases computed at `:root` in tokens.css:\n *  sonner redefines `--success-bg` on this same element, and a variable cannot read\n *  its own name — `--success-bg: var(--success-bg)` here would be a cycle. */\nconst KIT_TOASTER_STYLE = {\n  zIndex: \"var(--z-toast, 2147483647)\",\n  fontFamily: \"inherit\",\n  \"--normal-bg\": \"var(--bg-surface)\",\n  \"--normal-bg-hover\": \"var(--bg-hover)\",\n  \"--normal-border\": \"var(--border)\",\n  \"--normal-border-hover\": \"var(--border-strong)\",\n  \"--normal-text\": \"var(--text-primary)\",\n  \"--gray2\": \"var(--bg-hover)\",\n  \"--gray5\": \"var(--border-strong)\",\n  \"--gray11\": \"var(--text-muted)\",\n  \"--success-bg\": \"var(--toast-success-bg)\",\n  \"--success-border\": \"var(--toast-success-border)\",\n  \"--success-text\": \"var(--success)\",\n  \"--info-bg\": \"var(--toast-info-bg)\",\n  \"--info-border\": \"var(--toast-info-border)\",\n  \"--info-text\": \"var(--info)\",\n  \"--warning-bg\": \"var(--toast-warning-bg)\",\n  \"--warning-border\": \"var(--toast-warning-border)\",\n  \"--warning-text\": \"var(--warning)\",\n  \"--error-bg\": \"var(--toast-danger-bg)\",\n  \"--error-border\": \"var(--toast-danger-border)\",\n  \"--error-text\": \"var(--danger)\",\n} as CSSProperties;\n\nconst ALL_DIRECTIONS: ToastSwipeDirection[] = [\"top\", \"right\", \"bottom\", \"left\"];\n\n/** Light or dark, as the `.dark` class on `<html>` says right now. */\nfunction readDocumentTheme(): \"light\" | \"dark\" {\n  return typeof document !== \"undefined\" && document.documentElement.classList.contains(\"dark\")\n    ? \"dark\"\n    : \"light\";\n}\n\nfunction subscribeDocumentTheme(onChange: () => void): () => void {\n  if (typeof MutationObserver === \"undefined\") return () => {};\n  const mo = new MutationObserver(onChange);\n  mo.observe(document.documentElement, { attributes: true, attributeFilter: [\"class\"] });\n  return () => mo.disconnect();\n}\n\nconst px = (v: string | number) => (typeof v === \"number\" ? `${v}px` : v);\n\n/**\n * The Toaster's default distance from the top edge (desktop), as a CSS length (0.32,\n * docs/text-size-harmonization.md §10.11): below a 3rem top bar with 1rem to spare, and\n * the safe area. In rem, so it moves with the text size along with the top bar — an\n * app's `offset={{ top: 64 }}` (keksdose) did not. Pass it, or a `calc()` built on it,\n * instead of a px number.\n */\nexport const TOASTER_OFFSET_TOP = \"calc(env(safe-area-inset-top, 0px) + 4rem)\";\n\n/**\n * The Toaster's default distance from the bottom edge (phone), as a CSS length: above\n * AppShell's measured bottom nav (`--app-nav-h`) or the home indicator, whichever is\n * taller, with 0.75rem to spare.\n */\nexport const TOASTER_OFFSET_BOTTOM = \"calc(max(var(--app-nav-h, 0px), env(safe-area-inset-bottom, 0px)) + 0.75rem)\";\n\n/**\n * Where the toasts appear, with the kit's defaults — mount ONE, near the root and\n * inside `<UiKitProvider>` (it reads the `toast` labels) and inside the router if a\n * toast's content navigates.\n *\n * Accessible as sonner makes it: the toasts sit in a polite live region, so a message\n * is announced with its description and its action's label; every toast and every\n * button in it is focusable, the timer pauses while focus or the pointer is inside,\n * and Alt+T ({@link ToasterProps.hotkey}) moves focus to the newest toast. A toast\n * with an action stays up 8s by default, so the button can be reached.\n */\nexport function Toaster({\n  position,\n  navOffset,\n  theme,\n  labels: labelsProp,\n  closeButton = true,\n  richColors = true,\n  swipeDirections = ALL_DIRECTIONS,\n  offset,\n  mobileOffset,\n  dismissOnMiddleClick = true,\n  className,\n  style,\n  ...rest\n}: ToasterProps) {\n  const [mod, setMod] = useState<Sonner | null>(sonner);\n  useEffect(() => {\n    if (mod) return;\n    let live = true;\n    void loadSonner().then((m) => {\n      if (live && m) setMod(m);\n    });\n    return () => {\n      live = false;\n    };\n  }, [mod]);\n\n  const labels = useKitLabels(\"toast\", DEFAULT_TOAST_LABELS, labelsProp);\n  useEffect(() => {\n    activeLabels = labels;\n    return () => {\n      if (activeLabels === labels) activeLabels = DEFAULT_TOAST_LABELS;\n    };\n  }, [labels]);\n\n  useEffect(() => {\n    if (!dismissOnMiddleClick || !mod) return;\n    // On the document rather than the toaster: sonner owns the `<ol>`, and a listener\n    // there would have to be re-attached whenever it remounts it.\n    const toastUnder = (e: globalThis.MouseEvent) => {\n      if (e.button !== 1 || !(e.target instanceof Element)) return null;\n      const li = e.target.closest<HTMLElement>(\"[data-sonner-toast]\");\n      if (!li || li.dataset.dismissible === \"false\") return null;\n      // A link keeps its middle click (open in a new tab); a button or a field inside\n      // the toast is the app's, not a background to click.\n      const control = e.target.closest(\"a[href], button, input, select, textarea, [role='button'], [role='link']\");\n      if (control && li.contains(control)) return null;\n      return li;\n    };\n    // `mousedown`: the middle button starts autoscroll (Windows) before any click.\n    const onDown = (e: globalThis.MouseEvent) => {\n      if (toastUnder(e)) e.preventDefault();\n    };\n    const onAux = (e: globalThis.MouseEvent) => {\n      const li = toastUnder(e);\n      if (!li) return;\n      // No paste of the primary selection on Linux, no other handler's idea of it.\n      e.preventDefault();\n      const id = readToastId(li);\n      if (id !== null) mod.toast.dismiss(id);\n      // A toast made by sonner directly carries no id: its close button, if any.\n      else li.querySelector<HTMLButtonElement>(\"[data-close-button]\")?.click();\n    };\n    document.addEventListener(\"mousedown\", onDown);\n    document.addEventListener(\"auxclick\", onAux);\n    return () => {\n      document.removeEventListener(\"mousedown\", onDown);\n      document.removeEventListener(\"auxclick\", onAux);\n    };\n  }, [dismissOnMiddleClick, mod]);\n\n  const documentTheme = useSyncExternalStore(subscribeDocumentTheme, readDocumentTheme, () => \"light\" as const);\n  const phone = usePhoneLayout();\n  const resolved: ToastPosition = position ?? (phone ? \"bottom-center\" : \"top-center\");\n\n  // Above the bottom nav and the home indicator: whichever is taller, since the nav\n  // already pads itself by the safe area (the same sum BulkActionBar floats on).\n  const bottom =\n    navOffset === undefined\n      ? TOASTER_OFFSET_BOTTOM\n      : `calc(max(${px(navOffset)}, env(safe-area-inset-bottom, 0px)) + 0.75rem)`;\n  // Below a 3rem TopBar with the same 1rem clearance.\n  const top = TOASTER_OFFSET_TOP;\n  const computed = resolved.startsWith(\"bottom\") ? { bottom } : { top };\n\n  if (!mod) return null;\n  const Sonner = mod.Toaster;\n  return (\n    <Sonner\n      {...rest}\n      position={resolved}\n      theme={theme ?? documentTheme}\n      closeButton={closeButton}\n      richColors={richColors}\n      swipeDirections={swipeDirections}\n      offset={offset ?? computed}\n      mobileOffset={mobileOffset ?? offset ?? computed}\n      containerAriaLabel={labels.notifications}\n      toastOptions={{ closeButtonAriaLabel: labels.close }}\n      className={className ? `kit-toaster ${className}` : \"kit-toaster\"}\n      style={{ ...KIT_TOASTER_STYLE, ...style }}\n    />\n  );\n}\n"],"mappings":";AAsIuC;AAtIvC,SAAS,WAAW,UAAU,4BAA4B;AAE1D,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AA0B/B,IAAI,SAAwB;AAC5B,IAAI,UAAyC;AAC7C,MAAM,QAAoC,CAAC;AAE3C,SAAS,aAAqC;AAC5C,cAAY,OAAO,QAAQ,EAAE;AAAA,IAC3B,CAAC,QAAQ;AACP,eAAS;AAGT,iBAAW,MAAM,MAAM,OAAO,CAAC,EAAG,IAAG,GAAG;AACxC,aAAO;AAAA,IACT;AAAA,IACA,MAAM;AACJ,YAAM,SAAS;AACf,cAAQ;AAAA,QACN;AAAA,MACF;AACA,aAAO;AAAA,IACT;AAAA,EACF;AACA,SAAO;AACT;AAEA,SAAS,WAAW,IAA+B;AACjD,MAAI,QAAQ;AACV,OAAG,MAAM;AACT;AAAA,EACF;AACA,QAAM,KAAK,EAAE;AACb,OAAK,WAAW;AAClB;AAEA,IAAI,UAAU;AACd,MAAM,SAAS,MAAM,aAAa,EAAE,OAAO;AAcpC,MAAM,uBAAoC;AAAA,EAC/C,OAAO;AAAA,EACP,eAAe;AAAA,EACf,MAAM;AAAA,EACN,MAAM;AACR;AAKA,IAAI,eAA4B;AA2CzB,MAAM,wBAAwB;AAIrC,MAAM,YAAY,CAAC,SAAoB,oBAAC,UAAK,gBAAa,IAAI,gBAAK;AAUnE,MAAM,WAAW;AACjB,MAAM,UAAU,CAAC,OACf,GAAG,QAAQ,GAAG,OAAO,OAAO,WAAW,MAAM,GAAG,IAAI,mBAAmB,OAAO,EAAE,CAAC,CAAC;AAIpF,SAAS,YAAY,IAA6B;AAChD,aAAW,SAAS,GAAG,WAAW;AAChC,QAAI,CAAC,MAAM,WAAW,QAAQ,EAAG;AACjC,UAAM,OAAO,MAAM,OAAO,SAAS,MAAM;AACzC,UAAM,MAAM,mBAAmB,MAAM,MAAM,SAAS,SAAS,CAAC,CAAC;AAC/D,WAAO,SAAS,MAAM,OAAO,GAAG,IAAI;AAAA,EACtC;AACA,SAAO;AACT;AAEA,SAAS,aAAa,MAAgC,IAAyB;AAC7E,QAAM,EAAE,QAAQ,aAAa,UAAU,QAAQ,WAAW,GAAG,KAAK,IAAI,QAAQ,CAAC;AAC/E,QAAM,OAAmB,EAAE,GAAG,MAAM,IAAI,WAAW,YAAY,GAAG,QAAQ,EAAE,CAAC,IAAI,SAAS,KAAK,QAAQ,EAAE,EAAE;AAC3G,MAAI,gBAAgB,OAAW,MAAK,cAAc,SAAS,UAAU,WAAW,IAAI;AACpF,MAAI,OAAQ,MAAK,SAAS;AAC1B,QAAM,WAAW,aAAa,SAAS,wBAAwB;AAC/D,MAAI,aAAa,OAAW,MAAK,WAAW;AAC5C,SAAO;AACT;AAEA,SAAS,KAAK,MAAY,SAAoB,MAA8B;AAC1E,QAAM,KAAK,MAAM,MAAM,OAAO;AAC9B,QAAM,QAAQ,MAAM,SAAS,UAAU,OAAO,IAAI;AAClD,QAAM,OAAO,aAAa,MAAM,EAAE;AAClC,aAAW,CAAC,MAAM;AAChB,QAAI,SAAS,UAAW,GAAE,MAAM,OAAO,IAAI;AAAA,QACtC,GAAE,MAAM,IAAI,EAAE,OAAO,IAAI;AAAA,EAChC,CAAC;AACD,SAAO;AACT;AAyBA,SAAS,SACP,SACA,EAAE,OAAO,WAAW,OAAO,KAAK,GAAG,KAAK,GACxC,UACS;AACT,SAAO,KAAK,MAAM,SAAS;AAAA,IACzB,GAAG;AAAA,IACH,QAAQ,EAAE,OAAO,SAAS,UAAU,SAAS,MAAM,IAAI,EAAE;AAAA,EAC3D,CAAC;AACH;AAUO,MAAM,QAAQ,OAAO;AAAA,EAC1B,CAAC,SAAoB,SAAiC,KAAK,WAAW,SAAS,IAAI;AAAA,EACnF;AAAA,IACE,SAAS,CAAC,SAAoB,SAAwB,KAAK,WAAW,SAAS,IAAI;AAAA,IACnF,SAAS,CAAC,SAAoB,SAAwB,KAAK,WAAW,SAAS,IAAI;AAAA,IACnF,OAAO,CAAC,SAAoB,SAAwB,KAAK,SAAS,SAAS,IAAI;AAAA,IAC/E,SAAS,CAAC,SAAoB,SAAwB,KAAK,WAAW,SAAS,IAAI;AAAA,IACnF,MAAM,CAAC,SAAoB,SAAwB,KAAK,QAAQ,SAAS,IAAI;AAAA;AAAA,IAE7E,SAAS,CAAC,SAAoB,SAAwB,KAAK,WAAW,SAAS,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,IAMnF,QAAW,SAA0C,SAA0C;AAC7F,YAAM,EAAE,SAAS,SAAS,SAAS,OAAO,SAAS,WAAW,GAAG,KAAK,IAAI;AAC1E,YAAM,KAAK,KAAK,WAAW,SAAS,IAAI;AACxC,YAAM,OAAO,EAAE,GAAG,MAAM,GAAG;AAC3B,cAAQ,QAAQ,EACb,KAAK,MAAO,OAAO,YAAY,aAAa,QAAQ,IAAI,OAAQ,EAChE;AAAA,QACC,CAAC,UAAU;AACT,cAAI,YAAY,OAAW,OAAM,QAAQ,EAAE;AAAA,cACtC,MAAK,WAAW,OAAO,YAAY,aAAa,QAAQ,KAAK,IAAI,SAAS,IAAI;AAAA,QACrF;AAAA,QACA,CAAC,WAAoB;AACnB,cAAI,UAAU,OAAW,OAAM,QAAQ,EAAE;AAAA,cACpC,MAAK,SAAS,OAAO,UAAU,aAAa,MAAM,MAAM,IAAI,OAAO,IAAI;AAAA,QAC9E;AAAA,MACF,EACC,QAAQ,MAAM,YAAY,CAAC;AAC9B,aAAO;AAAA,IACT;AAAA;AAAA,IAGA,QAAQ,IAAoB;AAC1B,iBAAW,CAAC,MAAM,EAAE,MAAM,QAAQ,EAAE,CAAC;AAAA,IACvC;AAAA;AAAA,IAGA,OAAO,QAAuC,MAA8C;AAC1F,YAAM,KAAK,MAAM,MAAM,OAAO;AAC9B,YAAM,OAAO,aAAa,MAAM,EAAE;AAClC,iBAAW,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ,IAAI,CAAC;AAC9C,aAAO;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,KAAK,SAAoB,EAAE,QAAQ,GAAG,KAAK,GAA8B;AACvE,aAAO,SAAS,SAAS,EAAE,GAAG,MAAM,KAAK,OAAO,GAAG,aAAa,IAAI;AAAA,IACtE;AAAA;AAAA,IAGA,KAAK,SAAoB,EAAE,QAAQ,GAAG,KAAK,GAA8B;AACvE,aAAO,SAAS,SAAS,EAAE,GAAG,MAAM,KAAK,OAAO,GAAG,aAAa,IAAI;AAAA,IACtE;AAAA,EACF;AACF;AAwEA,MAAM,oBAAoB;AAAA,EACxB,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,mBAAmB;AAAA,EACnB,yBAAyB;AAAA,EACzB,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,oBAAoB;AAAA,EACpB,kBAAkB;AAAA,EAClB,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,oBAAoB;AAAA,EACpB,kBAAkB;AAAA,EAClB,cAAc;AAAA,EACd,kBAAkB;AAAA,EAClB,gBAAgB;AAClB;AAEA,MAAM,iBAAwC,CAAC,OAAO,SAAS,UAAU,MAAM;AAG/E,SAAS,oBAAsC;AAC7C,SAAO,OAAO,aAAa,eAAe,SAAS,gBAAgB,UAAU,SAAS,MAAM,IACxF,SACA;AACN;AAEA,SAAS,uBAAuB,UAAkC;AAChE,MAAI,OAAO,qBAAqB,YAAa,QAAO,MAAM;AAAA,EAAC;AAC3D,QAAM,KAAK,IAAI,iBAAiB,QAAQ;AACxC,KAAG,QAAQ,SAAS,iBAAiB,EAAE,YAAY,MAAM,iBAAiB,CAAC,OAAO,EAAE,CAAC;AACrF,SAAO,MAAM,GAAG,WAAW;AAC7B;AAEA,MAAM,KAAK,CAAC,MAAwB,OAAO,MAAM,WAAW,GAAG,CAAC,OAAO;AAShE,MAAM,qBAAqB;AAO3B,MAAM,wBAAwB;AAa9B,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA,uBAAuB;AAAA,EACvB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiB;AACf,QAAM,CAAC,KAAK,MAAM,IAAI,SAAwB,MAAM;AACpD,YAAU,MAAM;AACd,QAAI,IAAK;AACT,QAAI,OAAO;AACX,SAAK,WAAW,EAAE,KAAK,CAAC,MAAM;AAC5B,UAAI,QAAQ,EAAG,QAAO,CAAC;AAAA,IACzB,CAAC;AACD,WAAO,MAAM;AACX,aAAO;AAAA,IACT;AAAA,EACF,GAAG,CAAC,GAAG,CAAC;AAER,QAAM,SAAS,aAAa,SAAS,sBAAsB,UAAU;AACrE,YAAU,MAAM;AACd,mBAAe;AACf,WAAO,MAAM;AACX,UAAI,iBAAiB,OAAQ,gBAAe;AAAA,IAC9C;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,YAAU,MAAM;AACd,QAAI,CAAC,wBAAwB,CAAC,IAAK;AAGnC,UAAM,aAAa,CAAC,MAA6B;AAC/C,UAAI,EAAE,WAAW,KAAK,EAAE,EAAE,kBAAkB,SAAU,QAAO;AAC7D,YAAM,KAAK,EAAE,OAAO,QAAqB,qBAAqB;AAC9D,UAAI,CAAC,MAAM,GAAG,QAAQ,gBAAgB,QAAS,QAAO;AAGtD,YAAM,UAAU,EAAE,OAAO,QAAQ,0EAA0E;AAC3G,UAAI,WAAW,GAAG,SAAS,OAAO,EAAG,QAAO;AAC5C,aAAO;AAAA,IACT;AAEA,UAAM,SAAS,CAAC,MAA6B;AAC3C,UAAI,WAAW,CAAC,EAAG,GAAE,eAAe;AAAA,IACtC;AACA,UAAM,QAAQ,CAAC,MAA6B;AAC1C,YAAM,KAAK,WAAW,CAAC;AACvB,UAAI,CAAC,GAAI;AAET,QAAE,eAAe;AACjB,YAAM,KAAK,YAAY,EAAE;AACzB,UAAI,OAAO,KAAM,KAAI,MAAM,QAAQ,EAAE;AAAA,UAEhC,IAAG,cAAiC,qBAAqB,GAAG,MAAM;AAAA,IACzE;AACA,aAAS,iBAAiB,aAAa,MAAM;AAC7C,aAAS,iBAAiB,YAAY,KAAK;AAC3C,WAAO,MAAM;AACX,eAAS,oBAAoB,aAAa,MAAM;AAChD,eAAS,oBAAoB,YAAY,KAAK;AAAA,IAChD;AAAA,EACF,GAAG,CAAC,sBAAsB,GAAG,CAAC;AAE9B,QAAM,gBAAgB,qBAAqB,wBAAwB,mBAAmB,MAAM,OAAgB;AAC5G,QAAM,QAAQ,eAAe;AAC7B,QAAM,WAA0B,aAAa,QAAQ,kBAAkB;AAIvE,QAAM,SACJ,cAAc,SACV,wBACA,YAAY,GAAG,SAAS,CAAC;AAE/B,QAAM,MAAM;AACZ,QAAM,WAAW,SAAS,WAAW,QAAQ,IAAI,EAAE,OAAO,IAAI,EAAE,IAAI;AAEpE,MAAI,CAAC,IAAK,QAAO;AACjB,QAAM,SAAS,IAAI;AACnB,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,UAAU;AAAA,MACV,OAAO,SAAS;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ,UAAU;AAAA,MAClB,cAAc,gBAAgB,UAAU;AAAA,MACxC,oBAAoB,OAAO;AAAA,MAC3B,cAAc,EAAE,sBAAsB,OAAO,MAAM;AAAA,MACnD,WAAW,YAAY,eAAe,SAAS,KAAK;AAAA,MACpD,OAAO,EAAE,GAAG,mBAAmB,GAAG,MAAM;AAAA;AAAA,EAC1C;AAEJ;","names":[]}

package/dist/components/toggle-group.d.ts

@@ -1,4 +1,8 @@
 import { ComponentPropsWithoutRef, ReactNode, ReactElement } from 'react';
+import { DisabledReasonDisplay } from './field-parts.js';
+import './tooltip.js';
+import '../hooks/use-anchored-rect.js';
+import '../lib/clipping.js';
 
 interface ToggleOption<T extends string> {
     value: T;
@@ -27,6 +31,11 @@ interface ToggleGroupBaseProps<T extends string> extends Omit<ComponentPropsWith
      * whole ("Bewegung", not "Beweg…"), at the price of a taller group on a narrow
      * screen (lenkbank L4: five signal types on a 390px control page). From the width
      * where they fit, both look the same.
+     *
+     * Since 0.32 a group in the field chrome (`label`, the default placement) with four or
+     * more options wraps at Large and Extra large under `"truncate"` too, inside its frame:
+     * the type is bigger there and the field would otherwise run past a phone's edge
+     * (docs/text-size-harmonization.md §4). The keyboard is the same either way.
      */
     overflow?: "truncate" | "wrap";
     /**
@@ -127,6 +136,12 @@ interface ToggleGroupBaseProps<T extends string> extends Omit<ComponentPropsWith
      * Wins over `disabled`, as on Button: passing both keeps the group reachable.
      */
     disabledReason?: ReactNode;
+    /**
+     * Where `disabledReason` shows (0.32, §4 "No fact only in a tooltip"): by default, at
+     * Large and on a touch screen, as a line under the group (where its caption goes), and
+     * in the tooltip over the segments otherwise. See {@link DisabledReasonDisplay}.
+     */
+    disabledReasonDisplay?: DisabledReasonDisplay;
     /**
      * This group COMMITS — choosing an option saves it. Under a locked
      * {@link WriteLockProvider} it takes the `disabledReason` path with the lock's
@@ -145,7 +160,7 @@ interface ToggleGroupBaseProps<T extends string> extends Omit<ComponentPropsWith
  * region, because a description is read when the group is entered and not again when
  * an arrow key changes the choice underneath it.
  *
- * In muted 11px text under the field (or the bare group), above an `error`.
+ * In muted caption-size text under the field (or the bare group), above an `error`.
  */
 type ToggleGroupCaption<V> = ReactNode | ((value: V) => ReactNode);
 /** The group as it has always been: one option is always the answer. */

package/dist/components/toggle-group.js

@@ -6,9 +6,19 @@ import { horizontalStep } from "../lib/direction.js";
 import { FIELD_INVALID, FloatingField, Label } from "./ui.js";
 import { Tooltip } from "./tooltip.js";
 import { useCommitReason } from "./write-lock.js";
-import { hasContent, LabelStrip } from "./field-parts.js";
+import {
+  DISABLED_REASON_LINE_CLASS,
+  FIELD_CAPTION_CLASS,
+  hasContent,
+  LabelStrip,
+  useDisabledReasonLine,
+  useInlineHint
+} from "./field-parts.js";
+import { FOCUS_RING_WIDTH } from "./focus-ring.js";
 const CHROME_PAD = { md: "pt-5 pb-0.5", sm: "pt-5 pb-1" };
-const CHROME_SEGMENT = { md: "py-0 leading-[18px]", sm: "py-0 leading-4" };
+const CHROME_SEGMENT = { md: "py-0 leading-[1.125rem]", sm: "py-0 leading-4" };
+const WRAP_AT_LARGE = "large:flex-wrap";
+const WRAP_AT_LARGE_FROM = 4;
 const STRIP_SEGMENT = { md: "py-0", sm: "py-0.5" };
 function ToggleGroup(props) {
   const {
@@ -26,6 +36,7 @@ function ToggleGroup(props) {
     hint,
     error,
     disabledReason: ownDisabledReason,
+    disabledReasonDisplay,
     commit,
     "aria-label": ariaLabelAttr,
     ...restWithMode
@@ -33,11 +44,17 @@ function ToggleGroup(props) {
   const labelId = useId();
   const errorId = useId();
   const reasonId = useId();
+  const hintCaptionId = useId();
   const disabledReason = useCommitReason(commit, ownDisabledReason);
   const locked = hasContent(disabledReason);
+  const reasonLine = useDisabledReasonLine(disabledReasonDisplay) && locked;
+  const inlineHint = useInlineHint(hint);
+  const hintAsCaption = inlineHint !== hint ? inlineHint : void 0;
+  const labelHint = hintAsCaption === void 0 ? hint : void 0;
   const dimmed = disabled || locked;
   const labelled = hasContent(label);
   const field = labelled && labelPlacement === "field";
+  const wrapAtLarge = field && overflow === "truncate" && options.length >= WRAP_AT_LARGE_FROM;
   const above = labelled && labelPlacement === "above";
   const strip = labelled && labelPlacement === "strip";
   const hasError = labelled && hasContent(error);
@@ -108,8 +125,11 @@ function ToggleGroup(props) {
           // overlaying the selected segment's boundary. Inset keeps the ring
           // inside the segment it belongs to; focus-visible keeps it for the
           // keyboard, which is the only input that needs it.
+          //
+          // The ring is the kit's focus frame (0.32, §5): `--focus-ring-width` wide.
           overflow === "wrap" ? "whitespace-nowrap" : "min-w-0 truncate",
-          "flex-1 basis-auto rounded px-3 py-1.5 text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--border-strong)]",
+          "flex-1 basis-auto rounded px-3 py-1.5 text-sm font-medium transition-colors focus:outline-none focus-visible:ring-inset focus-visible:ring-[var(--border-strong)]",
+          FOCUS_RING_WIDTH,
           size === "sm" && "px-2 py-1 text-xs",
           // In the field chrome: no vertical padding, and the line that makes the
           // field 42px under a strip that clears the label — see CHROME_PAD. `sm`
@@ -140,7 +160,7 @@ function ToggleGroup(props) {
       "aria-label": ariaLabelAttr ?? ariaLabel,
       "aria-labelledby": labelled && ariaLabelAttr === void 0 && ariaLabel === void 0 ? labelId : rest["aria-labelledby"],
       "aria-invalid": hasError || rest["aria-invalid"] || void 0,
-      "aria-describedby": [rest["aria-describedby"], hasCaption && captionId, hasError && errorId].filter(Boolean).join(" ") || void 0,
+      "aria-describedby": [rest["aria-describedby"], hintAsCaption !== void 0 && hintCaptionId, hasCaption && captionId, hasError && errorId].filter(Boolean).join(" ") || void 0,
       "aria-disabled": dimmed || void 0,
       className: cn(
         // `gap-0.5` — the same 2px as the container's own padding, so EVERY segment
@@ -157,6 +177,7 @@ function ToggleGroup(props) {
         // phone does see is the focus ring — see the segment's own note below.)
         "inline-flex w-full gap-0.5 rounded-md border border-[var(--border-strong)] bg-[var(--bg-surface)] p-0.5 shadow-sm",
         overflow === "wrap" && "flex-wrap",
+        wrapAtLarge && WRAP_AT_LARGE,
         // The whole group fades, the way every other disabled control in this
         // package does; `cursor-not-allowed` is on the buttons, which is what a
         // pointer is actually over.
@@ -168,7 +189,7 @@ function ToggleGroup(props) {
         field && "border-0 bg-transparent p-0 shadow-none opacity-100",
         !labelled && className
       ),
-      children: locked ? (
+      children: locked && !reasonLine ? (
         // The reason's bubble wraps the SEGMENTS, inside the group, not the group: a
         // wrapper outside it would become the flex or grid item in the caller's row in
         // the group's place, and a `w-full` / `md:w-auto` on the group would size the
@@ -188,11 +209,15 @@ function ToggleGroup(props) {
     {
       id: captionId,
       "aria-live": captionIsLive ? "polite" : void 0,
-      className: cn("text-[11px] leading-snug text-[var(--text-muted)]", hasCaption && "mt-1"),
+      className: cn("text-caption leading-snug text-[var(--text-muted)]", hasCaption && "mt-1"),
       children: hasCaption ? captionNode : null
     }
   ) : null;
-  const errorEl = hasError ? /* @__PURE__ */ jsx("p", { id: errorId, className: "mt-1 text-[11px] leading-tight text-[var(--danger)]", children: error }) : null;
+  const errorEl = hasError ? /* @__PURE__ */ jsx("p", { id: errorId, className: "mt-1 text-caption leading-tight text-[var(--danger)]", children: error }) : null;
+  const belowEl = hintAsCaption !== void 0 || reasonLine ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    hintAsCaption !== void 0 && /* @__PURE__ */ jsx("p", { id: hintCaptionId, className: FIELD_CAPTION_CLASS, children: hintAsCaption }),
+    reasonLine && /* @__PURE__ */ jsx("p", { id: reasonId, className: DISABLED_REASON_LINE_CLASS, children: disabledReason })
+  ] }) : null;
   if (above) {
     return /* @__PURE__ */ jsxs("div", { className: cn("relative grid min-w-0 gap-1.5", className), children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
@@ -206,26 +231,29 @@ function ToggleGroup(props) {
             children: label
           }
         ),
-        hint
+        labelHint
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
         group,
+        belowEl,
         captionEl,
         errorEl
       ] })
     ] });
   }
   if (strip) {
-    return /* @__PURE__ */ jsxs(LabelStrip, { labelId, label, hint, disabled: dimmed, pad: "field", className, children: [
+    return /* @__PURE__ */ jsxs(LabelStrip, { labelId, label, hint: labelHint, disabled: dimmed, pad: "field", className, children: [
       group,
+      belowEl,
       captionEl,
       errorEl
     ] });
   }
   if (!field) {
-    if (!captionEl) return group;
+    if (!captionEl && !belowEl) return group;
     return /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
       group,
+      belowEl,
       captionEl
     ] });
   }
@@ -239,7 +267,7 @@ function ToggleGroup(props) {
           className: "flex flex-1 flex-col",
           label: /* @__PURE__ */ jsx("span", { id: labelId, children: label }),
           staticLabel: true,
-          hint,
+          hint: labelHint,
           children: /* @__PURE__ */ jsx(
             "div",
             {
@@ -255,6 +283,7 @@ function ToggleGroup(props) {
           )
         }
       ),
+      belowEl,
       captionEl,
       errorEl
     ] })