@eifi1/ui-kit 0.9.0 → 0.11.0

package/dist/components/toggle-group.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/toggle-group.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, KeyboardEvent, ReactElement } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { horizontalStep } from \"../lib/direction\";\n\nexport interface ToggleOption<T extends string> {\n  value: T;\n  label: string;\n  className?: string;\n}\n\n/**\n * `onChange` is the group's own — the chosen VALUE, not a DOM event — so the div's\n * `onChange` is omitted rather than shadowed: leaving both in scope would give the\n * prop two incompatible meanings depending on which overload TypeScript picked.\n *\n * `children` is omitted too: this renders its `options` and nothing else, so a `children` the type\n * accepted and the component ignored would be a prop that silently does nothing —\n * worse than one that does not compile.\n */\nexport interface ToggleGroupBaseProps<T extends string>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\" | \"children\"> {\n  options: ToggleOption<T>[];\n  className?: string;\n  /** Applied to every option button (e.g. to tune height/rounding to match\n   *  adjacent fields). Per-option `className` still wins over this. */\n  optionClassName?: string;\n  /**\n   * @deprecated Pass `aria-label` instead — the DOM spelling, which every other\n   * control in this kit now answers to. Kept working because three applications ship\n   * this one today; it names the group only when `aria-label` is absent.\n   */\n  ariaLabel?: string;\n  /**\n   * Show, refuse the change (Keksdose live #288: a payment dated in the future has no\n   * state to set).\n   *\n   * Whatever `value` says stays pressed and keeps its own fill rather than going grey\n   * with the rest — a reader who cannot see WHICH option is chosen has been told less\n   * than before it was disabled. A caller with nothing to show passes no value, and\n   * the group renders dimmed with nothing pressed, which is the shape Keksdose's\n   * status picker uses for a row whose status does not exist yet.\n   *\n   * On the whole GROUP, not per option: a segmented control where some segments are\n   * live and others are not is a menu with holes in it, and no caller here wants one.\n   */\n  disabled?: boolean;\n}\n\n/** The group as it has always been: one option is always the answer. */\nexport interface ToggleGroupRequiredProps<T extends string> extends ToggleGroupBaseProps<T> {\n  allowEmpty?: false;\n  value: T;\n  onChange: (value: T) => void;\n}\n\n/**\n * A group that can be emptied: clicking the active option clears it, and `onChange`\n * receives `null` (Keksdose's support-panel filters, where \"no filter\" is reached by\n * clicking the filter that is on).\n *\n * The options become TOGGLE BUTTONS (`aria-pressed`, in a `role=\"group\"`) rather than\n * radios. A radio cannot be unchecked by activating it — no screen reader user expects\n * a second press on \"Open, radio, checked\" to leave nothing checked, and nothing would\n * tell them it had. \"Open, toggle button, pressed\" says exactly what a press will do.\n */\nexport interface ToggleGroupClearableProps<T extends string> extends ToggleGroupBaseProps<T> {\n  allowEmpty: true;\n  value: T | null;\n  onChange: (value: T | null) => void;\n}\n\n/** `allowEmpty` picks the shape, so `onChange` is typed `(T) => void` unless the group\n *  can actually emit `null` — no existing caller has a `null` to handle. */\nexport type ToggleGroupProps<T extends string> =\n  | ToggleGroupRequiredProps<T>\n  | ToggleGroupClearableProps<T>;\n\n/**\n * Overloaded rather than typed by the union alone (keksdose, \"Gaps found adopting\n * 0.6.0\" #7). Inferring `T` through a union of prop shapes let TypeScript settle on\n * `string`, so `<ToggleGroup allowEmpty value={filter} onChange={setFilter} />` over a\n * `useState<Status | null>` did not compile unless the caller spelled\n * `<ToggleGroup<Status>>`. One signature per mode lets each infer `T` from its own\n * `value`/`onChange`/`options`; the third keeps a caller that forwards a\n * {@link ToggleGroupProps} union (a wrapper component) compiling.\n */\nexport function ToggleGroup<T extends string>(props: ToggleGroupClearableProps<T>): ReactElement;\nexport function ToggleGroup<T extends string>(props: ToggleGroupRequiredProps<T>): ReactElement;\nexport function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): ReactElement;\nexport function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): ReactElement {\n  const {\n    value,\n    options,\n    className,\n    optionClassName,\n    ariaLabel,\n    disabled = false,\n    \"aria-label\": ariaLabelAttr,\n    ...restWithMode\n  } = props;\n  // Taken off the rest so neither reaches the DOM; `props` keeps them paired, which is\n  // what lets the `onChange` below be called with `null` only in the mode that allows it.\n  const { allowEmpty: _allowEmpty, onChange: _onChange, ...rest } = restWithMode;\n  const choose = (next: T) => {\n    if (props.allowEmpty) props.onChange(next === value ? null : next);\n    else props.onChange(next);\n  };\n  const clearable = props.allowEmpty === true;\n  // A radio group is ONE tab stop (the checked radio, else the first) and arrows move\n  // the choice — the pattern `role=\"radiogroup\"` promises a screen-reader user. Before\n  // 0.7.0 each segment was its own tab stop with no arrow keys. The clearable mode is a\n  // row of toggle buttons, where separate tab stops are the pattern.\n  const tabStop = options.some((o) => o.value === value) ? value : options[0]?.value;\n  const onRadioKey = (e: KeyboardEvent<HTMLButtonElement>, index: number) => {\n    const last = options.length - 1;\n    let next: number | null = null;\n    const step = horizontalStep(e.key, e.currentTarget);\n    if (step !== 0) next = index + step;\n    else if (e.key === \"ArrowDown\") next = index + 1;\n    else if (e.key === \"ArrowUp\") next = index - 1;\n    else if (e.key === \"Home\") next = 0;\n    else if (e.key === \"End\") next = last;\n    if (next === null) return;\n    e.preventDefault();\n    next = next < 0 ? last : next > last ? 0 : next;\n    const buttons = e.currentTarget.parentElement?.querySelectorAll<HTMLButtonElement>(\":scope > button\");\n    buttons?.[next]?.focus();\n    choose(options[next].value);\n  };\n  return (\n    <div\n      // The audit's named example of a closed prop list (§\"Public API design\"): the\n      // tour locates a step by CSS SELECTOR, so a component that drops every attribute\n      // it was not expecting cannot be spotlighted at all — and Keksdose's rule editor\n      // carries a comment explaining that it wraps this group in a bare <div> for\n      // exactly that reason.\n      //\n      // `...rest` first, then the attributes the group cannot do without: a caller\n      // hanging an anchor or a test id on the group must not be able to overwrite the\n      // radiogroup role or the disabled state by accident. `className` is destructured\n      // out entirely and merged through `cn`, so it is never in here.\n      {...rest}\n      role={clearable ? \"group\" : \"radiogroup\"}\n      // The DOM spelling wins; `ariaLabel` is the fallback for the call sites that\n      // have not moved yet.\n      aria-label={ariaLabelAttr ?? ariaLabel}\n      // `aria-disabled` on the group as well as `disabled` on each button: a radio\n      // group is what the user is being refused, and a screen reader announcing\n      // three separately-disabled radios does not say that.\n      aria-disabled={disabled || undefined}\n      className={cn(\n        // `gap-0.5` — the same 2px as the container's own padding, so EVERY segment\n        // sits in a uniform 2px moat and no two fills ever touch. Flush segments were\n        // Keksdose live #268's rework: the pressed segment wears a saturated fill and\n        // an unpressed neighbour wears a pale hover fill, and with a shared edge the\n        // two rectangles read as one smeared shape — *\"the boundary of the selected\n        // option and hovering next to it overlays the boundary of the selected\n        // button\"*. A gap is what makes each segment its own chip; it cannot be\n        // undone by a caller's per-option colour, which a hover-only fix could.\n        //\n        // (The hover fill is the DESKTOP half of that report: Tailwind v4 wraps every\n        // `hover:` in `@media (hover: hover)`, so a phone never paints it. The half a\n        // phone does see is the focus ring — see the segment's own note below.)\n        \"inline-flex w-full gap-0.5 rounded-md border border-[var(--border-strong)] bg-[var(--bg-surface)] p-0.5 shadow-sm\",\n        // The whole group fades, the way every other disabled control in this\n        // package does; `cursor-not-allowed` is on the buttons, which is what a\n        // pointer is actually over.\n        disabled && \"opacity-60\",\n        className,\n      )}\n    >\n      {options.map((opt, index) => {\n        const active = opt.value === value;\n        return (\n          <button\n            key={opt.value}\n            type=\"button\"\n            role={clearable ? undefined : \"radio\"}\n            aria-checked={clearable ? undefined : active}\n            aria-pressed={clearable ? active : undefined}\n            disabled={disabled}\n            tabIndex={clearable ? undefined : opt.value === tabStop ? 0 : -1}\n            onKeyDown={clearable ? undefined : (e) => onRadioKey(e, index)}\n            onClick={() => choose(opt.value)}\n            className={cn(\n              // `truncate` (which carries whitespace-nowrap) rather than letting a\n              // label wrap: a segmented control sizes its whole row to the tallest\n              // option, so one two-word option — Keksdose feedback #147's \"Where I\n              // am\" — silently doubles the height of every segment beside it.\n              //\n              // `basis-auto` is what keeps that ellipsis a LAST resort rather than\n              // the normal state (Keksdose dev#475). With flex-1's `basis-0`, a\n              // shrink-to-fit group (`w-auto`) still resolves to the sum of the\n              // labels' widths — and then splits it EQUALLY, so the short option\n              // got 66px it did not need and \"Where I am\" got 66 of the 81 it did:\n              // truncated at 1778px of free screen. Basing each segment on its own\n              // content and sharing only the LEFTOVER space keeps a full-width\n              // group's segments near-equal and an auto-width group's exact.\n              //\n              // `focus-visible` + `ring-inset`, not `focus` + an outset ring. A ring\n              // is a box-shadow that spreads OUTWARD, so on a flush group it painted\n              // 2px of ring over both neighbours and over the container's own border\n              // — and on a phone it appeared on every TAP, because a tap focuses the\n              // button. That is the other half of what live #268's rework saw\n              // overlaying the selected segment's boundary. Inset keeps the ring\n              // inside the segment it belongs to; focus-visible keeps it for the\n              // keyboard, which is the only input that needs it.\n              \"min-w-0 flex-1 basis-auto truncate 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)]\",\n              active\n                ? \"bg-[var(--bg-inverse)] text-[var(--text-inverse)]\"\n                : \"text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]\",\n              // No hover fill on a group that cannot be changed — a segment that\n              // lights up under the pointer is an offer, and there is none here.\n              disabled && \"cursor-not-allowed hover:bg-transparent dark:hover:bg-transparent\",\n              optionClassName,\n              opt.className,\n            )}\n          >\n            {opt.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";AA8KU;AA7KV,SAAS,UAAU;AACnB,SAAS,sBAAsB;AAuFxB,SAAS,YAA8B,OAA0C;AACtF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,cAAc;AAAA,IACd,GAAG;AAAA,EACL,IAAI;AAGJ,QAAM,EAAE,YAAY,aAAa,UAAU,WAAW,GAAG,KAAK,IAAI;AAClE,QAAM,SAAS,CAAC,SAAY;AAC1B,QAAI,MAAM,WAAY,OAAM,SAAS,SAAS,QAAQ,OAAO,IAAI;AAAA,QAC5D,OAAM,SAAS,IAAI;AAAA,EAC1B;AACA,QAAM,YAAY,MAAM,eAAe;AAKvC,QAAM,UAAU,QAAQ,KAAK,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,QAAQ,QAAQ,CAAC,GAAG;AAC7E,QAAM,aAAa,CAAC,GAAqC,UAAkB;AACzE,UAAM,OAAO,QAAQ,SAAS;AAC9B,QAAI,OAAsB;AAC1B,UAAM,OAAO,eAAe,EAAE,KAAK,EAAE,aAAa;AAClD,QAAI,SAAS,EAAG,QAAO,QAAQ;AAAA,aACtB,EAAE,QAAQ,YAAa,QAAO,QAAQ;AAAA,aACtC,EAAE,QAAQ,UAAW,QAAO,QAAQ;AAAA,aACpC,EAAE,QAAQ,OAAQ,QAAO;AAAA,aACzB,EAAE,QAAQ,MAAO,QAAO;AACjC,QAAI,SAAS,KAAM;AACnB,MAAE,eAAe;AACjB,WAAO,OAAO,IAAI,OAAO,OAAO,OAAO,IAAI;AAC3C,UAAM,UAAU,EAAE,cAAc,eAAe,iBAAoC,iBAAiB;AACpG,cAAU,IAAI,GAAG,MAAM;AACvB,WAAO,QAAQ,IAAI,EAAE,KAAK;AAAA,EAC5B;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MAWE,GAAG;AAAA,MACJ,MAAM,YAAY,UAAU;AAAA,MAG5B,cAAY,iBAAiB;AAAA,MAI7B,iBAAe,YAAY;AAAA,MAC3B,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAaT;AAAA;AAAA;AAAA;AAAA,QAIA,YAAY;AAAA,QACZ;AAAA,MACF;AAAA,MAEC,kBAAQ,IAAI,CAAC,KAAK,UAAU;AAC3B,cAAM,SAAS,IAAI,UAAU;AAC7B,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,MAAK;AAAA,YACL,MAAM,YAAY,SAAY;AAAA,YAC9B,gBAAc,YAAY,SAAY;AAAA,YACtC,gBAAc,YAAY,SAAS;AAAA,YACnC;AAAA,YACA,UAAU,YAAY,SAAY,IAAI,UAAU,UAAU,IAAI;AAAA,YAC9D,WAAW,YAAY,SAAY,CAAC,MAAM,WAAW,GAAG,KAAK;AAAA,YAC7D,SAAS,MAAM,OAAO,IAAI,KAAK;AAAA,YAC/B,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAuBT;AAAA,cACA,SACI,sDACA;AAAA;AAAA;AAAA,cAGJ,YAAY;AAAA,cACZ;AAAA,cACA,IAAI;AAAA,YACN;AAAA,YAEC,cAAI;AAAA;AAAA,UA3CA,IAAI;AAAA,QA4CX;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/toggle-group.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactElement, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { horizontalStep } from \"../lib/direction\";\nimport { FIELD_INVALID, FloatingField } from \"./ui\";\n\nexport interface ToggleOption<T extends string> {\n  value: T;\n  label: string;\n  className?: string;\n}\n\n/**\n * `onChange` is the group's own — the chosen VALUE, not a DOM event — so the div's\n * `onChange` is omitted rather than shadowed: leaving both in scope would give the\n * prop two incompatible meanings depending on which overload TypeScript picked.\n *\n * `children` is omitted too: this renders its `options` and nothing else, so a `children` the type\n * accepted and the component ignored would be a prop that silently does nothing —\n * worse than one that does not compile.\n */\nexport interface ToggleGroupBaseProps<T extends string>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\" | \"children\"> {\n  options: ToggleOption<T>[];\n  className?: string;\n  /** Applied to every option button (e.g. to tune height/rounding to match\n   *  adjacent fields). Per-option `className` still wins over this. */\n  optionClassName?: string;\n  /**\n   * @deprecated Pass `aria-label` instead — the DOM spelling, which every other\n   * control in this kit now answers to. Kept working because three applications ship\n   * this one today; it names the group only when `aria-label` is absent.\n   */\n  ariaLabel?: string;\n  /**\n   * Show, refuse the change (Keksdose live #288: a payment dated in the future has no\n   * state to set).\n   *\n   * Whatever `value` says stays pressed and keeps its own fill rather than going grey\n   * with the rest — a reader who cannot see WHICH option is chosen has been told less\n   * than before it was disabled. A caller with nothing to show passes no value, and\n   * the group renders dimmed with nothing pressed, which is the shape Keksdose's\n   * status picker uses for a row whose status does not exist yet.\n   *\n   * On the whole GROUP, not per option: a segmented control where some segments are\n   * live and others are not is a menu with holes in it, and no caller here wants one.\n   */\n  disabled?: boolean;\n  /**\n   * `sm`: 12px options with `px-2 py-1` — the compact group keksdose's rule editor\n   * (rule-editor:204) writes as `optionClassName=\"px-2 py-1 text-xs\"` beside a small\n   * caption. `md` (default) is the size every other group has.\n   */\n  size?: \"sm\" | \"md\";\n  /**\n   * Stand in a form row as a FIELD: with a label the group wears the field's chrome —\n   * border, surface, the top strip with a small static label in it, a labelled\n   * {@link Select}'s height — so beside an Input or a Select it reads as one of them\n   * rather than as a control with a caption over it. lenkbank builds exactly this by\n   * hand as `ToggleField` (features/gear/common.tsx:97, feedback #69), and its notes\n   * are why the chrome STRETCHES to its row as well as matching the select's padding:\n   * a native select's height is the browser's, so a toggle a few pixels short of it\n   * is levelled up by the row rather than by arithmetic.\n   *\n   * The label names the group (`aria-labelledby`), so `aria-label` is not needed. With\n   * a label, `className` styles the field's wrapper — as on {@link Select} — and the\n   * group's own box is dropped: two nested borders read as a control in a control.\n   */\n  label?: ReactNode;\n  /** A {@link FieldHint} on the label line, as on a labelled {@link Select}. Only with\n   *  `label`. */\n  hint?: ReactNode;\n  /** The message under the field when it is wrong: paints the field's border with\n   *  `--danger`, marks the group `aria-invalid` and describes it with the message, as\n   *  {@link Select}'s `error` does. Only with `label`. */\n  error?: ReactNode;\n}\n\n/**\n * A line under the group saying what the CHOSEN option means — lenkbank's ToggleField\n * `hint` (features/gear/common.tsx:97): not help behind a \"?\" but a caption, and one\n * that changes as the choice does. Pass a function of the value for that; it is\n * attached with `aria-describedby`, and a function caption is also a polite live\n * region, because a description is read when the group is entered and not again when\n * an arrow key changes the choice underneath it.\n *\n * In muted 11px text under the field (or the bare group), above an `error`.\n */\ntype ToggleGroupCaption<V> = ReactNode | ((value: V) => ReactNode);\n\n/** The group as it has always been: one option is always the answer. */\nexport interface ToggleGroupRequiredProps<T extends string> extends ToggleGroupBaseProps<T> {\n  allowEmpty?: false;\n  value: T;\n  onChange: (value: T) => void;\n  /** See {@link ToggleGroupCaption}. */\n  caption?: ToggleGroupCaption<T>;\n}\n\n/**\n * A group that can be emptied: clicking the active option clears it, and `onChange`\n * receives `null` (Keksdose's support-panel filters, where \"no filter\" is reached by\n * clicking the filter that is on).\n *\n * The options become TOGGLE BUTTONS (`aria-pressed`, in a `role=\"group\"`) rather than\n * radios. A radio cannot be unchecked by activating it — no screen reader user expects\n * a second press on \"Open, radio, checked\" to leave nothing checked, and nothing would\n * tell them it had. \"Open, toggle button, pressed\" says exactly what a press will do.\n */\nexport interface ToggleGroupClearableProps<T extends string> extends ToggleGroupBaseProps<T> {\n  allowEmpty: true;\n  value: T | null;\n  onChange: (value: T | null) => void;\n  /** See {@link ToggleGroupCaption}. `null` while nothing is chosen. */\n  caption?: ToggleGroupCaption<T | null>;\n}\n\n/** `allowEmpty` picks the shape, so `onChange` is typed `(T) => void` unless the group\n *  can actually emit `null` — no existing caller has a `null` to handle. */\nexport type ToggleGroupProps<T extends string> =\n  | ToggleGroupRequiredProps<T>\n  | ToggleGroupClearableProps<T>;\n\n/**\n * Overloaded rather than typed by the union alone (keksdose, \"Gaps found adopting\n * 0.6.0\" #7). Inferring `T` through a union of prop shapes let TypeScript settle on\n * `string`, so `<ToggleGroup allowEmpty value={filter} onChange={setFilter} />` over a\n * `useState<Status | null>` did not compile unless the caller spelled\n * `<ToggleGroup<Status>>`. One signature per mode lets each infer `T` from its own\n * `value`/`onChange`/`options`; the third keeps a caller that forwards a\n * {@link ToggleGroupProps} union (a wrapper component) compiling.\n */\nexport function ToggleGroup<T extends string>(props: ToggleGroupClearableProps<T>): ReactElement;\nexport function ToggleGroup<T extends string>(props: ToggleGroupRequiredProps<T>): ReactElement;\nexport function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): ReactElement;\nexport function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): ReactElement {\n  const {\n    value,\n    options,\n    className,\n    optionClassName,\n    ariaLabel,\n    disabled = false,\n    size = \"md\",\n    label,\n    hint,\n    error,\n    \"aria-label\": ariaLabelAttr,\n    ...restWithMode\n  } = props;\n  const labelId = useId();\n  const errorId = useId();\n  const field = label !== undefined && label !== null && label !== false && label !== \"\";\n  const hasError = field && error !== undefined && error !== null && error !== false && error !== \"\";\n  // Taken off the rest so neither reaches the DOM; `props` keeps them paired, which is\n  // what lets the `onChange` below be called with `null` only in the mode that allows it.\n  const { allowEmpty: _allowEmpty, onChange: _onChange, caption, ...rest } = restWithMode;\n  const captionId = useId();\n  const captionIsLive = typeof caption === \"function\";\n  const captionNode = captionIsLive ? (caption as (v: T | null) => ReactNode)(value) : caption;\n  const hasCaption = captionNode !== undefined && captionNode !== null && captionNode !== false && captionNode !== \"\";\n  const choose = (next: T) => {\n    if (props.allowEmpty) props.onChange(next === value ? null : next);\n    else props.onChange(next);\n  };\n  const clearable = props.allowEmpty === true;\n  // A radio group is ONE tab stop (the checked radio, else the first) and arrows move\n  // the choice — the pattern `role=\"radiogroup\"` promises a screen-reader user. Before\n  // 0.7.0 each segment was its own tab stop with no arrow keys. The clearable mode is a\n  // row of toggle buttons, where separate tab stops are the pattern.\n  const tabStop = options.some((o) => o.value === value) ? value : options[0]?.value;\n  const onRadioKey = (e: KeyboardEvent<HTMLButtonElement>, index: number) => {\n    const last = options.length - 1;\n    let next: number | null = null;\n    const step = horizontalStep(e.key, e.currentTarget);\n    if (step !== 0) next = index + step;\n    else if (e.key === \"ArrowDown\") next = index + 1;\n    else if (e.key === \"ArrowUp\") next = index - 1;\n    else if (e.key === \"Home\") next = 0;\n    else if (e.key === \"End\") next = last;\n    if (next === null) return;\n    e.preventDefault();\n    next = next < 0 ? last : next > last ? 0 : next;\n    const buttons = e.currentTarget.parentElement?.querySelectorAll<HTMLButtonElement>(\":scope > button\");\n    buttons?.[next]?.focus();\n    choose(options[next].value);\n  };\n  const group = (\n    <div\n      // The audit's named example of a closed prop list (§\"Public API design\"): the\n      // tour locates a step by CSS SELECTOR, so a component that drops every attribute\n      // it was not expecting cannot be spotlighted at all — and Keksdose's rule editor\n      // carries a comment explaining that it wraps this group in a bare <div> for\n      // exactly that reason.\n      //\n      // `...rest` first, then the attributes the group cannot do without: a caller\n      // hanging an anchor or a test id on the group must not be able to overwrite the\n      // radiogroup role or the disabled state by accident. `className` is destructured\n      // out entirely and merged through `cn`, so it is never in here.\n      {...rest}\n      role={clearable ? \"group\" : \"radiogroup\"}\n      // The DOM spelling wins; `ariaLabel` is the fallback for the call sites that\n      // have not moved yet.\n      aria-label={ariaLabelAttr ?? ariaLabel}\n      aria-labelledby={field && ariaLabelAttr === undefined && ariaLabel === undefined ? labelId : rest[\"aria-labelledby\"]}\n      aria-invalid={hasError || rest[\"aria-invalid\"] || undefined}\n      aria-describedby={\n        [rest[\"aria-describedby\"], hasCaption && captionId, hasError && errorId].filter(Boolean).join(\" \") || undefined\n      }\n      // `aria-disabled` on the group as well as `disabled` on each button: a radio\n      // group is what the user is being refused, and a screen reader announcing\n      // three separately-disabled radios does not say that.\n      aria-disabled={disabled || undefined}\n      className={cn(\n        // `gap-0.5` — the same 2px as the container's own padding, so EVERY segment\n        // sits in a uniform 2px moat and no two fills ever touch. Flush segments were\n        // Keksdose live #268's rework: the pressed segment wears a saturated fill and\n        // an unpressed neighbour wears a pale hover fill, and with a shared edge the\n        // two rectangles read as one smeared shape — *\"the boundary of the selected\n        // option and hovering next to it overlays the boundary of the selected\n        // button\"*. A gap is what makes each segment its own chip; it cannot be\n        // undone by a caller's per-option colour, which a hover-only fix could.\n        //\n        // (The hover fill is the DESKTOP half of that report: Tailwind v4 wraps every\n        // `hover:` in `@media (hover: hover)`, so a phone never paints it. The half a\n        // phone does see is the focus ring — see the segment's own note below.)\n        \"inline-flex w-full gap-0.5 rounded-md border border-[var(--border-strong)] bg-[var(--bg-surface)] p-0.5 shadow-sm\",\n        // The whole group fades, the way every other disabled control in this\n        // package does; `cursor-not-allowed` is on the buttons, which is what a\n        // pointer is actually over.\n        disabled && \"opacity-60\",\n        // Inside the field's chrome the group is only a row of segments: no border, no\n        // surface, no padding of its own, and the field (not the group) is what dims.\n        field && \"border-0 bg-transparent p-0 shadow-none opacity-100\",\n        !field && className,\n      )}\n    >\n      {options.map((opt, index) => {\n        const active = opt.value === value;\n        return (\n          <button\n            key={opt.value}\n            type=\"button\"\n            role={clearable ? undefined : \"radio\"}\n            aria-checked={clearable ? undefined : active}\n            aria-pressed={clearable ? active : undefined}\n            disabled={disabled}\n            tabIndex={clearable ? undefined : opt.value === tabStop ? 0 : -1}\n            onKeyDown={clearable ? undefined : (e) => onRadioKey(e, index)}\n            onClick={() => choose(opt.value)}\n            className={cn(\n              // `truncate` (which carries whitespace-nowrap) rather than letting a\n              // label wrap: a segmented control sizes its whole row to the tallest\n              // option, so one two-word option — Keksdose feedback #147's \"Where I\n              // am\" — silently doubles the height of every segment beside it.\n              //\n              // `basis-auto` is what keeps that ellipsis a LAST resort rather than\n              // the normal state (Keksdose dev#475). With flex-1's `basis-0`, a\n              // shrink-to-fit group (`w-auto`) still resolves to the sum of the\n              // labels' widths — and then splits it EQUALLY, so the short option\n              // got 66px it did not need and \"Where I am\" got 66 of the 81 it did:\n              // truncated at 1778px of free screen. Basing each segment on its own\n              // content and sharing only the LEFTOVER space keeps a full-width\n              // group's segments near-equal and an auto-width group's exact.\n              //\n              // `focus-visible` + `ring-inset`, not `focus` + an outset ring. A ring\n              // is a box-shadow that spreads OUTWARD, so on a flush group it painted\n              // 2px of ring over both neighbours and over the container's own border\n              // — and on a phone it appeared on every TAP, because a tap focuses the\n              // button. That is the other half of what live #268's rework saw\n              // overlaying the selected segment's boundary. Inset keeps the ring\n              // inside the segment it belongs to; focus-visible keeps it for the\n              // keyboard, which is the only input that needs it.\n              \"min-w-0 flex-1 basis-auto truncate 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)]\",\n              size === \"sm\" && \"px-2 py-1 text-xs\",\n              // In a field: no vertical padding and a 20px line — a `text-sm` line, the\n              // same line a labelled Select holds under its label strip — so the field's\n              // own `pt-4 pb-1` decides the height, as it does for the select.\n              field && \"py-0 leading-5\",\n              active\n                ? \"bg-[var(--bg-inverse)] text-[var(--text-inverse)]\"\n                : \"text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]\",\n              // No hover fill on a group that cannot be changed — a segment that\n              // lights up under the pointer is an offer, and there is none here.\n              disabled && \"cursor-not-allowed hover:bg-transparent dark:hover:bg-transparent\",\n              optionClassName,\n              opt.className,\n            )}\n          >\n            {opt.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n  // Rendered whenever the caption is — `aria-live` must be on the element BEFORE its\n  // text changes, or the change is not announced — but empty (no height, no margin)\n  // when there is nothing to say, so a function caption that returns null for some\n  // options leaves no gap. Empty rather than `hidden`: some readers do not announce\n  // text that appears inside an element coming back from `display: none`.\n  const captionEl =\n    hasCaption || captionIsLive ? (\n      <p\n        id={captionId}\n        aria-live={captionIsLive ? \"polite\" : undefined}\n        className={cn(\"text-[11px] leading-snug text-[var(--text-muted)]\", hasCaption && \"mt-1\")}\n      >\n        {hasCaption ? captionNode : null}\n      </p>\n    ) : null;\n  if (!field) {\n    if (!captionEl) return group;\n    // The group keeps its `className`, as without a caption; the wrapper only stacks.\n    return (\n      <div className=\"min-w-0\">\n        {group}\n        {captionEl}\n      </div>\n    );\n  }\n  return (\n    // `h-full` + `flex-1`: the chrome fills a grid or stretched flex row, which is what\n    // levels it with a select beside it whatever the browser makes of the select.\n    <div className={cn(\"flex h-full flex-col\", className)}>\n      <FloatingField\n        className=\"flex flex-1 flex-col\"\n        label={<span id={labelId}>{label}</span>}\n        staticLabel\n        hint={hint}\n      >\n        <div\n          className={cn(\n            \"flex flex-1 flex-col justify-center rounded-md border border-[var(--border)] bg-[var(--bg-surface)] px-1 pt-4 pb-1 shadow-sm\",\n            disabled && \"bg-[var(--bg-surface-2)] opacity-60\",\n            hasError && FIELD_INVALID,\n          )}\n        >\n          {group}\n        </div>\n      </FloatingField>\n      {captionEl}\n      {hasError && (\n        <p id={errorId} className=\"mt-1 text-[11px] leading-tight text-[var(--danger)]\">\n          {error}\n        </p>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAgPU,cA0EJ,YA1EI;AAhPV,SAAS,aAAa;AAEtB,SAAS,UAAU;AACnB,SAAS,sBAAsB;AAC/B,SAAS,eAAe,qBAAqB;AAmItC,SAAS,YAA8B,OAA0C;AACtF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,UAAU,MAAM;AACtB,QAAM,UAAU,MAAM;AACtB,QAAM,QAAQ,UAAU,UAAa,UAAU,QAAQ,UAAU,SAAS,UAAU;AACpF,QAAM,WAAW,SAAS,UAAU,UAAa,UAAU,QAAQ,UAAU,SAAS,UAAU;AAGhG,QAAM,EAAE,YAAY,aAAa,UAAU,WAAW,SAAS,GAAG,KAAK,IAAI;AAC3E,QAAM,YAAY,MAAM;AACxB,QAAM,gBAAgB,OAAO,YAAY;AACzC,QAAM,cAAc,gBAAiB,QAAuC,KAAK,IAAI;AACrF,QAAM,aAAa,gBAAgB,UAAa,gBAAgB,QAAQ,gBAAgB,SAAS,gBAAgB;AACjH,QAAM,SAAS,CAAC,SAAY;AAC1B,QAAI,MAAM,WAAY,OAAM,SAAS,SAAS,QAAQ,OAAO,IAAI;AAAA,QAC5D,OAAM,SAAS,IAAI;AAAA,EAC1B;AACA,QAAM,YAAY,MAAM,eAAe;AAKvC,QAAM,UAAU,QAAQ,KAAK,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,QAAQ,QAAQ,CAAC,GAAG;AAC7E,QAAM,aAAa,CAAC,GAAqC,UAAkB;AACzE,UAAM,OAAO,QAAQ,SAAS;AAC9B,QAAI,OAAsB;AAC1B,UAAM,OAAO,eAAe,EAAE,KAAK,EAAE,aAAa;AAClD,QAAI,SAAS,EAAG,QAAO,QAAQ;AAAA,aACtB,EAAE,QAAQ,YAAa,QAAO,QAAQ;AAAA,aACtC,EAAE,QAAQ,UAAW,QAAO,QAAQ;AAAA,aACpC,EAAE,QAAQ,OAAQ,QAAO;AAAA,aACzB,EAAE,QAAQ,MAAO,QAAO;AACjC,QAAI,SAAS,KAAM;AACnB,MAAE,eAAe;AACjB,WAAO,OAAO,IAAI,OAAO,OAAO,OAAO,IAAI;AAC3C,UAAM,UAAU,EAAE,cAAc,eAAe,iBAAoC,iBAAiB;AACpG,cAAU,IAAI,GAAG,MAAM;AACvB,WAAO,QAAQ,IAAI,EAAE,KAAK;AAAA,EAC5B;AACA,QAAM,QACJ;AAAA,IAAC;AAAA;AAAA,MAWE,GAAG;AAAA,MACJ,MAAM,YAAY,UAAU;AAAA,MAG5B,cAAY,iBAAiB;AAAA,MAC7B,mBAAiB,SAAS,kBAAkB,UAAa,cAAc,SAAY,UAAU,KAAK,iBAAiB;AAAA,MACnH,gBAAc,YAAY,KAAK,cAAc,KAAK;AAAA,MAClD,oBACE,CAAC,KAAK,kBAAkB,GAAG,cAAc,WAAW,YAAY,OAAO,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,KAAK;AAAA,MAKxG,iBAAe,YAAY;AAAA,MAC3B,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAaT;AAAA;AAAA;AAAA;AAAA,QAIA,YAAY;AAAA;AAAA;AAAA,QAGZ,SAAS;AAAA,QACT,CAAC,SAAS;AAAA,MACZ;AAAA,MAEC,kBAAQ,IAAI,CAAC,KAAK,UAAU;AAC3B,cAAM,SAAS,IAAI,UAAU;AAC7B,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,MAAK;AAAA,YACL,MAAM,YAAY,SAAY;AAAA,YAC9B,gBAAc,YAAY,SAAY;AAAA,YACtC,gBAAc,YAAY,SAAS;AAAA,YACnC;AAAA,YACA,UAAU,YAAY,SAAY,IAAI,UAAU,UAAU,IAAI;AAAA,YAC9D,WAAW,YAAY,SAAY,CAAC,MAAM,WAAW,GAAG,KAAK;AAAA,YAC7D,SAAS,MAAM,OAAO,IAAI,KAAK;AAAA,YAC/B,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAuBT;AAAA,cACA,SAAS,QAAQ;AAAA;AAAA;AAAA;AAAA,cAIjB,SAAS;AAAA,cACT,SACI,sDACA;AAAA;AAAA;AAAA,cAGJ,YAAY;AAAA,cACZ;AAAA,cACA,IAAI;AAAA,YACN;AAAA,YAEC,cAAI;AAAA;AAAA,UAhDA,IAAI;AAAA,QAiDX;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAOF,QAAM,YACJ,cAAc,gBACZ;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,aAAW,gBAAgB,WAAW;AAAA,MACtC,WAAW,GAAG,qDAAqD,cAAc,MAAM;AAAA,MAEtF,uBAAa,cAAc;AAAA;AAAA,EAC9B,IACE;AACN,MAAI,CAAC,OAAO;AACV,QAAI,CAAC,UAAW,QAAO;AAEvB,WACE,qBAAC,SAAI,WAAU,WACZ;AAAA;AAAA,MACA;AAAA,OACH;AAAA,EAEJ;AACA;AAAA;AAAA;AAAA,IAGE,qBAAC,SAAI,WAAW,GAAG,wBAAwB,SAAS,GAClD;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO,oBAAC,UAAK,IAAI,SAAU,iBAAM;AAAA,UACjC,aAAW;AAAA,UACX;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,YAAY;AAAA,gBACZ,YAAY;AAAA,cACd;AAAA,cAEC;AAAA;AAAA,UACH;AAAA;AAAA,MACF;AAAA,MACC;AAAA,MACA,YACC,oBAAC,OAAE,IAAI,SAAS,WAAU,uDACvB,iBACH;AAAA,OAEJ;AAAA;AAEJ;","names":[]}

package/dist/components/tooltip.d.ts

@@ -1,6 +1,7 @@
 import * as react from 'react';
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import { AnchorRect } from '../hooks/use-anchored-rect.js';
+export { CLIPS_ATTRIBUTE } from '../lib/clipping.js';
 
 /** Where the bubble sits. `start` / `end` follow the reading direction — `end` is the
  *  right in LTR and the left in RTL — and are what a layout that mirrors should ask
@@ -22,6 +23,13 @@ interface TooltipProps extends ComponentPropsWithoutRef<"span"> {
     label: ReactNode;
     side?: TooltipSide;
     className?: string;
+    /**
+     * Where the bubble lives. Left out (the default since 0.10.0), the tooltip decides for
+     * itself: the bubble stays next to the trigger unless an ancestor clips or scrolls
+     * (`overflow` other than `visible`, or the {@link CLIPS_ATTRIBUTE} marker), in which
+     * case it is portalled — see "Inside a scroll container" below. `true` always portals, `false` never does; both are exactly
+     * what they were before the default existed.
+     */
     portal?: boolean;
     /** Tag the bubble `data-private`, for a label that repeats the user's own data. */
     redact?: boolean;
@@ -30,11 +38,10 @@ interface TooltipProps extends ComponentPropsWithoutRef<"span"> {
 /**
  * Hover/focus label for a control.
  *
- * Two implementations, and the choice matters more than it looks. The default is
- * CSS-only: the bubble is always mounted next to the trigger and fades in on
- * `:hover`, which costs no state and works in a plain render test. The `portal`
- * variant mounts the bubble in `document.body` only while hovered, positioned by
- * measurement.
+ * Two placements, and the choice matters more than it looks. In place, the bubble is
+ * always mounted next to the trigger and fades in on `:hover`, which costs no state and
+ * works in a plain render test. Portalled, the bubble is mounted in `document.body`
+ * only while it is up, positioned by measurement.
  *
  * ⚠️ **A bubble that repeats a value has to be redactable.** The consuming app blurs
  * `[data-private]` under a `demo-mode` class on `<html>` — and the portalled bubble is
@@ -66,18 +73,42 @@ interface TooltipProps extends ComponentPropsWithoutRef<"span"> {
  * point somewhere else — which is precisely what you cannot do when what you need to
  * read is underneath it. The listener is the document's rather than the wrapper's
  * because the pointer opens this with the keyboard focus somewhere else entirely, and
- * it is subscribed only while a bubble is actually up: the CSS variant is always
+ * it is subscribed only while a bubble is actually up: the in-place bubble is always
  * mounted, and a table of forty tooltips must not mean forty keydown listeners.
  *
- * ⚠️ **Inside a scroll container, use `portal`.** An always-mounted bubble is
- * absolutely positioned, but an absolutely positioned descendant still counts
- * towards its scroll-container ancestor's scrollable overflow — so an invisible
- * bubble on a control near the right edge makes the container scroll sideways
- * with nothing to reveal. That is what Keksdose feedback dev#488 reported on the
- * admin roster: 66px of horizontal scroll on a table that fit, 44px of it owed to
- * tooltips nobody could see. The portalled bubble is `position: fixed` and absent
- * until hovered, so it adds no width — and, being outside the container, it also
- * cannot be clipped by it.
+ * ⚠️ **Inside a scroll container, the bubble has to be portalled — and by default it
+ * now is.** An always-mounted bubble is absolutely positioned, but an absolutely
+ * positioned descendant still counts towards its scroll-container ancestor's
+ * scrollable overflow — so an invisible bubble on a control near the right edge makes
+ * the container scroll sideways with nothing to reveal. That is what Keksdose feedback
+ * dev#488 reported on the admin roster: 66px of horizontal scroll on a table that fit,
+ * 44px of it owed to tooltips nobody could see. And a visible one is clipped by the
+ * container's edge. The portalled bubble is `position: fixed` and absent until hovered,
+ * so it adds no width and cannot be clipped.
+ *
+ * Until 0.10.0 the cure was `portal` at the call site, and kastlan asked for it to stop
+ * being one: every tooltip in a table, a drawer or a scrolling card had to remember it,
+ * and the ones that forgot were only found by someone scrolling sideways. So with
+ * `portal` left out, the tooltip looks for a clipping ancestor itself — any element
+ * between it and `<body>` whose computed `overflow-x` / `overflow-y` is not `visible`,
+ * or that carries {@link CLIPS_ATTRIBUTE} (`data-clips`). The marker is what makes the
+ * answer the same under test: jsdom computes no Tailwind, so there every scroller
+ * reads `visible` and a table-cell tooltip used to stay in place — its always-mounted
+ * bubble then repeated the label in the cell's accessible name and `textContent`
+ * ("CheckingChecking"), and apps pinned `portal` to stop it. The kit's own scrollers
+ * are marked, so a tooltip in a DataTable or Table cell portals in jsdom exactly as it
+ * does in the browser.
+ * It looks at MOUNT, not only on open: dev#488's phantom scroll is caused by a bubble
+ * nobody opened, so a check that waited for the hover would find the damage already
+ * done. It looks again on every open, for a container that started scrolling after
+ * the tooltip mounted (a table that grew). Only the bubble changes place; the trigger
+ * and the caller's child stay mounted, so a switch never costs a focused button its
+ * focus. Outside any such container the in-place bubble is kept, which is still the
+ * cheaper one and the one a plain render test can find without a hover.
+ *
+ * Why not simply portal everything? Because the in-place bubble is the one existing
+ * app tests rely on (it is in the DOM without a hover), and because it follows its
+ * trigger through a scroll or an animation for free — the portalled one re-measures.
  */
 declare function Tooltip({ label, side, className, portal, redact, children, ...rest }: TooltipProps): react.JSX.Element;
 interface TooltipSize {

package/dist/components/tooltip.js

@@ -13,6 +13,8 @@ import { cn } from "../lib/cn.js";
 import { useEscapeKey } from "../hooks/use-dismiss.js";
 import { useAnchoredRect } from "../hooks/use-anchored-rect.js";
 import { dirOf } from "../lib/direction.js";
+import { hasClippingAncestor } from "../lib/clipping.js";
+import { CLIPS_ATTRIBUTE } from "../lib/clipping.js";
 function physicalSide(side, dir) {
   if (side === "start") return dir === "rtl" ? "right" : "left";
   if (side === "end") return dir === "rtl" ? "left" : "right";
@@ -33,13 +35,13 @@ function Tooltip({
   label,
   side = "top",
   className,
-  portal = false,
+  portal,
   redact = false,
   children,
   ...rest
 }) {
   if (isEmptyLabel(label)) return /* @__PURE__ */ jsx(Fragment, { children });
-  if (portal) {
+  if (portal === true) {
     return /* @__PURE__ */ jsx(
       PortalTooltip,
       {
@@ -52,39 +54,65 @@ function Tooltip({
       }
     );
   }
-  return /* @__PURE__ */ jsx(CssTooltip, { label, side, className, redact, ...rest, children });
+  return /* @__PURE__ */ jsx(
+    InPlaceTooltip,
+    {
+      label,
+      side,
+      className,
+      redact,
+      detect: portal === void 0,
+      ...rest,
+      children
+    }
+  );
 }
-function CssTooltip({
+function InPlaceTooltip({
   label,
   side,
   className,
   redact,
+  detect,
   children,
   ...rest
 }) {
   const id = useId();
+  const triggerRef = useRef(null);
+  const [clipped, setClipped] = useState(false);
   const [hovered, setHovered] = useState(false);
   const [focused, setFocused] = useState(false);
   const [dismissed, setDismissed] = useState(false);
-  useEscapeKey(() => setDismissed(true), (hovered || focused) && !dismissed);
+  const [dir, setDir] = useState("ltr");
+  const open = (hovered || focused) && !dismissed;
+  useEscapeKey(() => setDismissed(true), open);
+  useLayoutEffect(() => {
+    if (detect) setClipped(hasClippingAncestor(triggerRef.current));
+  }, [detect]);
+  const arm = (el) => {
+    setDismissed(false);
+    if (!detect) return;
+    setDir(dirOf(el));
+    setClipped(hasClippingAncestor(el));
+  };
   return /* @__PURE__ */ jsxs(
     "span",
     {
       ...rest,
-      className: cn("relative inline-flex group/tooltip", className),
-      onMouseEnter: () => {
+      ref: triggerRef,
+      className: cn("relative inline-flex", !clipped && "group/tooltip", className),
+      onMouseEnter: (e) => {
         setHovered(true);
-        setDismissed(false);
+        arm(e.currentTarget);
       },
       onMouseLeave: () => setHovered(false),
-      onFocus: () => {
+      onFocus: (e) => {
         setFocused(true);
-        setDismissed(false);
+        arm(e.currentTarget);
       },
       onBlur: () => setFocused(false),
       children: [
-        describedBy(children, dismissed ? void 0 : id),
-        /* @__PURE__ */ jsx(
+        describedBy(children, clipped ? open ? id : void 0 : dismissed ? void 0 : id),
+        clipped ? open && /* @__PURE__ */ jsx(PortalBubble, { triggerRef, id, label, side, dir, redact }) : /* @__PURE__ */ jsx(
           "span",
           {
             id,
@@ -176,7 +204,6 @@ function PortalTooltip({
   ...rest
 }) {
   const triggerRef = useRef(null);
-  const bubbleRef = useRef(null);
   const [visible, setVisible] = useState(false);
   const [dir, setDir] = useState("ltr");
   const show = (el) => {
@@ -185,10 +212,36 @@ function PortalTooltip({
   };
   const id = useId();
   useEscapeKey(() => setVisible(false), visible);
-  const rect = useAnchoredRect(triggerRef, visible);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        ...rest,
+        ref: triggerRef,
+        className: cn("relative inline-flex", className),
+        onMouseEnter: (e) => show(e.currentTarget),
+        onMouseLeave: () => setVisible(false),
+        onFocus: (e) => show(e.currentTarget),
+        onBlur: () => setVisible(false),
+        children: describedBy(children, visible ? id : void 0)
+      }
+    ),
+    visible && /* @__PURE__ */ jsx(PortalBubble, { triggerRef, id, label, side, dir, redact })
+  ] });
+}
+function PortalBubble({
+  triggerRef,
+  id,
+  label,
+  side,
+  dir,
+  redact
+}) {
+  const bubbleRef = useRef(null);
+  const rect = useAnchoredRect(triggerRef, true);
   const [room, setRoom] = useState(null);
   useLayoutEffect(() => {
-    const measured = visible ? bubbleRef.current?.getBoundingClientRect() : void 0;
+    const measured = bubbleRef.current?.getBoundingClientRect();
     setRoom((previous) => {
       if (!measured) return null;
       const next = {
@@ -197,48 +250,35 @@ function PortalTooltip({
       };
       return previous && sameRoom(previous, next) ? previous : next;
     });
-  }, [visible, rect, label]);
+  }, [rect, label]);
   const physical = physicalSide(side, dir);
   const point = rect ? tooltipAnchor(rect, physical) : null;
   const placed = rect && room ? placeTooltip(rect, physical, room.size, room.viewport) : null;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  if (!point || typeof document === "undefined") return null;
+  return createPortal(
     /* @__PURE__ */ jsx(
       "span",
       {
-        ...rest,
-        ref: triggerRef,
-        className: cn("relative inline-flex", className),
-        onMouseEnter: (e) => show(e.currentTarget),
-        onMouseLeave: () => setVisible(false),
-        onFocus: (e) => show(e.currentTarget),
-        onBlur: () => setVisible(false),
-        children: describedBy(children, visible ? id : void 0)
+        ref: bubbleRef,
+        id,
+        role: "tooltip",
+        dir,
+        "data-private": redact ? "" : void 0,
+        style: placed ? { position: "fixed", left: placed.left, top: placed.top } : {
+          position: "fixed",
+          left: point.left,
+          top: point.top,
+          transform: portalTransformBySide[physical]
+        },
+        className: cn(TOOLTIP_SURFACE, "pointer-events-none z-50"),
+        children: label
       }
     ),
-    visible && point && typeof document !== "undefined" && createPortal(
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          ref: bubbleRef,
-          id,
-          role: "tooltip",
-          dir,
-          "data-private": redact ? "" : void 0,
-          style: placed ? { position: "fixed", left: placed.left, top: placed.top } : {
-            position: "fixed",
-            left: point.left,
-            top: point.top,
-            transform: portalTransformBySide[physical]
-          },
-          className: cn(TOOLTIP_SURFACE, "pointer-events-none z-50"),
-          children: label
-        }
-      ),
-      document.body
-    )
-  ] });
+    document.body
+  );
 }
 export {
+  CLIPS_ATTRIBUTE,
   Tooltip,
   placeTooltip
 };

package/dist/components/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/tooltip.tsx"],"sourcesContent":["import {\n  cloneElement,\n  isValidElement,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type ComponentPropsWithoutRef,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/cn\";\nimport { useEscapeKey } from \"../hooks/use-dismiss\";\nimport { useAnchoredRect, type AnchorRect } from \"../hooks/use-anchored-rect\";\nimport { dirOf, type Direction } from \"../lib/direction\";\n\n/** Where the bubble sits. `start` / `end` follow the reading direction — `end` is the\n *  right in LTR and the left in RTL — and are what a layout that mirrors should ask\n *  for. `left` / `right` stay physical, for a bubble tied to something that does not\n *  mirror (a chart axis, a map). */\nexport type TooltipSide = \"top\" | \"bottom\" | \"left\" | \"right\" | \"start\" | \"end\";\n\n/** The placement the maths works in: a logical side resolved against the trigger. */\ntype PhysicalSide = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nfunction physicalSide(side: TooltipSide, dir: Direction): PhysicalSide {\n  if (side === \"start\") return dir === \"rtl\" ? \"right\" : \"left\";\n  if (side === \"end\") return dir === \"rtl\" ? \"left\" : \"right\";\n  return side;\n}\n\n/** The floating bubble itself. Uses the shared surface/border/text tokens so it\n *  reads as part of the app's chrome (like the top bar and cards) rather than the\n *  cold slate pill it used to be.\n *\n *  `w-max` keeps a short label on one line — the old `whitespace-nowrap` did that\n *  too, but it also let a sentence-length label grow without bound, and a bubble\n *  wider than the space beside its trigger gets clipped by whatever overflow\n *  container it sits in. So cap it and let long text wrap instead. The cap tracks\n *  the viewport as well, for narrow screens where 20rem is already most of it.\n *  `side` is a preference rather than an instruction for the PORTALLED variant,\n *  which measures the bubble and turns it round when it would not fit\n *  (Steering Design feedback #126). The CSS-only one never learns its own size,\n *  so there `side` is still the whole of the placement. */\nconst TOOLTIP_SURFACE =\n  \"w-max max-w-[min(20rem,calc(100vw-1rem))] rounded-md border border-[var(--border)] bg-[var(--bg-surface)] px-2 py-1 text-xs font-medium text-[var(--text-primary)] shadow-lg\";\n\nconst sidePositionClass: Record<TooltipSide, string> = {\n  top: \"bottom-full left-1/2 -translate-x-1/2 mb-1\",\n  bottom: \"top-full left-1/2 -translate-x-1/2 mt-1\",\n  left: \"right-full top-1/2 -translate-y-1/2 mr-1\",\n  right: \"left-full top-1/2 -translate-y-1/2 ml-1\",\n  // Logical insets, so CSS resolves the side from the inherited direction with no\n  // JavaScript: `end-full` pins the bubble's END edge to the trigger's start.\n  start: \"end-full top-1/2 -translate-y-1/2 me-1\",\n  end: \"start-full top-1/2 -translate-y-1/2 ms-1\",\n};\n\n/**\n * `extends ComponentPropsWithoutRef<\"span\">` because the wrapper this renders IS a span,\n * and a tooltip is the component a caller most often needs to reach past: it sits\n * between the layout and the control, so a `data-tour` anchor, a test id or an\n * `aria-label` aimed at the trigger used to be swallowed by it.\n *\n * ⚠️ On the empty-label branch there is no wrapper at all, and therefore nothing for\n * those attributes to land on — see the note in the body.\n */\nexport interface TooltipProps extends ComponentPropsWithoutRef<\"span\"> {\n  label: ReactNode;\n  side?: TooltipSide;\n  className?: string;\n  portal?: boolean;\n  /** Tag the bubble `data-private`, for a label that repeats the user's own data. */\n  redact?: boolean;\n  children: ReactNode;\n}\n\n/** What each variant below takes: the resolved `side`, and every span attribute the\n *  caller handed {@link Tooltip}, forwarded to that variant's own wrapper. */\ntype TooltipVariantProps = Omit<TooltipProps, \"side\" | \"portal\"> & { side: TooltipSide };\n\n/**\n * Hover/focus label for a control.\n *\n * Two implementations, and the choice matters more than it looks. The default is\n * CSS-only: the bubble is always mounted next to the trigger and fades in on\n * `:hover`, which costs no state and works in a plain render test. The `portal`\n * variant mounts the bubble in `document.body` only while hovered, positioned by\n * measurement.\n *\n * ⚠️ **A bubble that repeats a value has to be redactable.** The consuming app blurs\n * `[data-private]` under a `demo-mode` class on `<html>` — and the portalled bubble is\n * mounted on `document.body`, which is INSIDE that class, so the rule reaches it as\n * long as the bubble is tagged. It is not tagged by default, because most labels are\n * UI strings; pass `redact` on the ones that repeat the user's own data (a truncated\n * payee, an account name, a memo). Getting this wrong is silent: the trigger blurs,\n * the bubble spells the value out on hover.\n *\n * ⚠️ **An empty label renders nothing at all.** `title={payee ?? \"\"}` is an ordinary\n * shape at a call site that reveals truncated text, and the native attribute answers\n * it by showing no tooltip. A component that faithfully rendered an empty bubble\n * would be a worse `title`, so the emptiness check is here rather than at every call\n * site that could forget it.\n *\n * ⚠️ **The bubble describes its trigger, which means cloning it.** `role=\"tooltip\"` is\n * a name for a box, not a relationship — so for as long as nothing referenced the\n * bubble, the label reached the pointer and nobody else. That is worst on the call\n * sites that need it most: the kit's icon-only buttons, where the tooltip IS the\n * label. `aria-describedby` has to sit on the focusable element, which is the\n * caller's child and not this component's wrapper, so the child is CLONED to carry\n * it. A description the caller already set is appended to, never replaced — a field's\n * error text and its hint bubble both describe it. Children that cannot take props (a\n * fragment, a bare string, several elements) are left exactly as they were.\n *\n * ⚠️ **Escape dismisses it (WCAG 1.4.13).** Anything that appears on hover or focus has\n * to be dismissible without moving the pointer, and a bubble is opaque: it lands over\n * the row, field or figure you were reading, and the only way out of it used to be to\n * point somewhere else — which is precisely what you cannot do when what you need to\n * read is underneath it. The listener is the document's rather than the wrapper's\n * because the pointer opens this with the keyboard focus somewhere else entirely, and\n * it is subscribed only while a bubble is actually up: the CSS variant is always\n * mounted, and a table of forty tooltips must not mean forty keydown listeners.\n *\n * ⚠️ **Inside a scroll container, use `portal`.** An always-mounted bubble is\n * absolutely positioned, but an absolutely positioned descendant still counts\n * towards its scroll-container ancestor's scrollable overflow — so an invisible\n * bubble on a control near the right edge makes the container scroll sideways\n * with nothing to reveal. That is what Keksdose feedback dev#488 reported on the\n * admin roster: 66px of horizontal scroll on a table that fit, 44px of it owed to\n * tooltips nobody could see. The portalled bubble is `position: fixed` and absent\n * until hovered, so it adds no width — and, being outside the container, it also\n * cannot be clipped by it.\n */\nexport function Tooltip({\n  label,\n  side = \"top\",\n  className,\n  portal = false,\n  redact = false,\n  children,\n  ...rest\n}: TooltipProps) {\n  // No label, no bubble — and no wrapper either, so a conditional tooltip costs the\n  // layout nothing on the branch where it does not apply. `...rest` goes with the\n  // wrapper on this branch, which is the documented limit of the pass-through: there is\n  // no element left to put an attribute on.\n  if (isEmptyLabel(label)) return <>{children}</>;\n  if (portal) {\n    return (\n      <PortalTooltip\n        label={label}\n        side={side}\n        className={className}\n        redact={redact}\n        {...rest}\n      >\n        {children}\n      </PortalTooltip>\n    );\n  }\n  // Both variants are separate components so that `Tooltip` itself can keep calling NO\n  // hooks: the empty-label branch above returns before either of them, and a hook after\n  // a conditional return is a hooks-order bug rather than a style violation.\n  return (\n    <CssTooltip label={label} side={side} className={className} redact={redact} {...rest}>\n      {children}\n    </CssTooltip>\n  );\n}\n\n/** The always-mounted variant: the bubble sits next to the trigger and CSS fades it in.\n *\n *  It holds the little state it does for the two things CSS cannot express — which\n *  element to point `aria-describedby` at, and Escape — and not for the fade, which is\n *  still `group-hover`/`group-focus-within` and still costs a render nothing. */\nfunction CssTooltip({\n  label,\n  side,\n  className,\n  redact,\n  children,\n  ...rest\n}: TooltipVariantProps) {\n  const id = useId();\n  const [hovered, setHovered] = useState(false);\n  const [focused, setFocused] = useState(false);\n  const [dismissed, setDismissed] = useState(false);\n  useEscapeKey(() => setDismissed(true), (hovered || focused) && !dismissed);\n  return (\n    <span\n      // `...rest` first: the four handlers below are what decides whether a bubble is\n      // up, and a caller passing an `onFocus` of its own must not replace them.\n      {...rest}\n      className={cn(\"relative inline-flex group/tooltip\", className)}\n      // These four track WHETHER A BUBBLE IS UP. They activate nothing — the only thing\n      // here that can be activated is the caller's child, which keeps every handler it\n      // arrived with — so this wrapper needs no role and no key handling of its own.\n      // `jsx-a11y/no-static-element-interactions` warns about it all the same, as it\n      // already does about the portal variant's identical trigger below; both are left\n      // visible rather than silenced, because a rule this package ratchets should be\n      // argued with in the backlog and not in a disable comment.\n      //\n      // Re-armed by the next hover or focus rather than by an effect watching those\n      // flags: coming back to a trigger is a fresh request for its label, and an effect\n      // would also re-show the bubble under a pointer that never left.\n      onMouseEnter={() => {\n        setHovered(true);\n        setDismissed(false);\n      }}\n      onMouseLeave={() => setHovered(false)}\n      onFocus={() => {\n        setFocused(true);\n        setDismissed(false);\n      }}\n      onBlur={() => setFocused(false)}\n    >\n      {describedBy(children, dismissed ? undefined : id)}\n      <span\n        id={id}\n        role=\"tooltip\"\n        // The `hidden` ATTRIBUTE, not an opacity class: dismissing has to take the\n        // bubble out of the accessibility tree as well as off the screen, or a screen\n        // reader still reads out the description of a bubble the user just closed.\n        hidden={dismissed || undefined}\n        data-private={redact ? \"\" : undefined}\n        className={cn(\n          TOOLTIP_SURFACE,\n          \"pointer-events-none absolute z-50 opacity-0 group-hover/tooltip:opacity-100 group-focus-within/tooltip:opacity-100\",\n          sidePositionClass[side],\n        )}\n      >\n        {label}\n      </span>\n    </span>\n  );\n}\n\n/** Hand `children` the bubble's id as an `aria-describedby`, if it is an element that\n *  can hold one. `id` is undefined while there is no bubble to point at — a dangling\n *  reference describes the trigger as nothing at all, which is worse than silence. */\nfunction describedBy(children: ReactNode, id: string | undefined): ReactNode {\n  if (id === undefined || !isValidElement(children)) return children;\n  const child = children as ReactElement<{ \"aria-describedby\"?: string }>;\n  // Fragments, Suspense and friends are symbol-typed and take no DOM props; cloning one\n  // with an aria attribute warns in development and drops it in production.\n  if (typeof child.type === \"symbol\") return children;\n  const own = child.props[\"aria-describedby\"];\n  return cloneElement(child, { \"aria-describedby\": own ? `${own} ${id}` : id });\n}\n\n/** \"Would this bubble be blank.\" Only the values a call site actually produces when\n *  it has nothing to say — `\"\"`, `null`, `undefined`, `false` from a `&&` guard. A\n *  numeric `0` is a real label and stays one. */\nfunction isEmptyLabel(label: ReactNode): boolean {\n  return (\n    label == null ||\n    label === false ||\n    (typeof label === \"string\" && label.trim() === \"\")\n  );\n}\n\nconst TOOLTIP_GAP = 4;\n\n/** How close to the viewport edge a bubble may sit. Not zero: a label flush\n *  against the glass reads as clipped even when every character is on screen. */\nconst TOOLTIP_MARGIN = 4;\n\nconst portalTransformBySide: Record<PhysicalSide, string> = {\n  right: \"translate(0, -50%)\",\n  left: \"translate(-100%, -50%)\",\n  top: \"translate(-50%, -100%)\",\n  bottom: \"translate(-50%, 0)\",\n};\n\n/** Anchor point (viewport px) for the tooltip on the given side of `r`. Paired\n *  with {@link portalTransformBySide}, which shifts the box onto that point. */\nfunction tooltipAnchor(\n  r: AnchorRect,\n  side: PhysicalSide,\n): { left: number; top: number } {\n  switch (side) {\n    case \"right\":\n      return { left: r.right + TOOLTIP_GAP, top: r.top + r.height / 2 };\n    case \"left\":\n      return { left: r.left - TOOLTIP_GAP, top: r.top + r.height / 2 };\n    case \"top\":\n      return { left: r.left + r.width / 2, top: r.top - TOOLTIP_GAP };\n    case \"bottom\":\n      return { left: r.left + r.width / 2, top: r.bottom + TOOLTIP_GAP };\n  }\n}\n\nexport interface TooltipSize {\n  width: number;\n  height: number;\n}\n\nexport interface TooltipViewport {\n  width: number;\n  height: number;\n}\n\nexport interface TooltipPlacement {\n  left: number;\n  top: number;\n  /** Which side it ended up on, which need not be the one that was asked for. */\n  side: PhysicalSide;\n}\n\nconst opposite: Record<PhysicalSide, PhysicalSide> = {\n  left: \"right\",\n  right: \"left\",\n  top: \"bottom\",\n  bottom: \"top\",\n};\n\n/** Whether the bubble clears the viewport edge on `side` of the trigger. */\nfunction roomOn(\n  r: AnchorRect,\n  side: PhysicalSide,\n  size: TooltipSize,\n  viewport: TooltipViewport,\n): boolean {\n  switch (side) {\n    case \"left\":\n      return r.left - TOOLTIP_GAP - size.width >= TOOLTIP_MARGIN;\n    case \"right\":\n      return r.right + TOOLTIP_GAP + size.width <= viewport.width - TOOLTIP_MARGIN;\n    case \"top\":\n      return r.top - TOOLTIP_GAP - size.height >= TOOLTIP_MARGIN;\n    case \"bottom\":\n      return r.bottom + TOOLTIP_GAP + size.height <= viewport.height - TOOLTIP_MARGIN;\n  }\n}\n\nfunction sameRoom(\n  a: { size: TooltipSize; viewport: TooltipViewport },\n  b: { size: TooltipSize; viewport: TooltipViewport },\n): boolean {\n  return (\n    a.size.width === b.size.width &&\n    a.size.height === b.size.height &&\n    a.viewport.width === b.viewport.width &&\n    a.viewport.height === b.viewport.height\n  );\n}\n\nfunction clamp(value: number, low: number, high: number): number {\n  // `high` first, so a bubble taller or wider than the viewport is pinned to the\n  // top-left corner rather than to the bottom-right one — the start of a label\n  // is the half worth keeping.\n  return Math.max(low, Math.min(value, high));\n}\n\n/**\n * Where the bubble actually goes, given how big it turned out to be.\n *\n * Two rules, and they are separate because they fix separate failures.\n *\n * **Turn round when the preferred side has no room.** `side` says which side of\n * the trigger the label reads best on, and on a form near the left edge of the\n * window that side is off the screen — the capped bubble can only wrap, not\n * move, so what the reader gets is a sentence with its first half outside the\n * glass. Flipped only when the *other* side is genuinely better: a trigger in a\n * viewport too narrow for the bubble either way keeps the side it asked for, and\n * the clamp below does what it can.\n *\n * **Then clamp both axes.** The cross axis is the one that needs it — a `top`\n * bubble is centred on the trigger, so a trigger near the left edge pushes half\n * the label off even though the side it is on is right — and clamping the main\n * axis too costs nothing and covers the flip having nowhere to land.\n *\n * Pure, and measured in viewport pixels throughout, so it can be tested without\n * a layout: the caller supplies the trigger's rect, the bubble's own size and\n * the window.\n */\nexport function placeTooltip(\n  r: AnchorRect,\n  side: PhysicalSide,\n  size: TooltipSize,\n  viewport: TooltipViewport,\n): TooltipPlacement {\n  const chosen =\n    roomOn(r, side, size, viewport) || !roomOn(r, opposite[side], size, viewport)\n      ? side\n      : opposite[side];\n  const point = tooltipAnchor(r, chosen);\n  const box =\n    chosen === \"left\"\n      ? { left: point.left - size.width, top: point.top - size.height / 2 }\n      : chosen === \"right\"\n        ? { left: point.left, top: point.top - size.height / 2 }\n        : chosen === \"top\"\n          ? { left: point.left - size.width / 2, top: point.top - size.height }\n          : { left: point.left - size.width / 2, top: point.top };\n  return {\n    left: clamp(box.left, TOOLTIP_MARGIN, viewport.width - size.width - TOOLTIP_MARGIN),\n    top: clamp(box.top, TOOLTIP_MARGIN, viewport.height - size.height - TOOLTIP_MARGIN),\n    side: chosen,\n  };\n}\n\nfunction PortalTooltip({\n  label,\n  side,\n  className,\n  redact,\n  children,\n  ...rest\n}: TooltipVariantProps) {\n  const triggerRef = useRef<HTMLSpanElement | null>(null);\n  const bubbleRef = useRef<HTMLSpanElement | null>(null);\n  const [visible, setVisible] = useState(false);\n  // The trigger's reading direction, read when the bubble is asked for (an event, not a\n  // render): it resolves `start` / `end`, and the portalled bubble — which has left the\n  // subtree it would have inherited `dir` from — carries it too.\n  const [dir, setDir] = useState<Direction>(\"ltr\");\n  const show = (el: Element) => {\n    setDir(dirOf(el));\n    setVisible(true);\n  };\n  const id = useId();\n  // Escape closes it outright, since this variant's bubble only exists while it is\n  // shown. The next mouseenter/focus brings it back, which is the behaviour WCAG\n  // 1.4.13 asks for: dismissible now, still available when you ask again.\n  useEscapeKey(() => setVisible(false), visible);\n  // The measure + scroll/resize-tracking lifecycle is owned by useAnchoredRect;\n  // here we only map the rect to a side-specific anchor point.\n  const rect = useAnchoredRect(triggerRef, visible);\n  // The bubble's own size and the window it has to fit in — neither of which is\n  // knowable in render: the width is whatever the label wrapped to inside the\n  // cap, and reading `window` while rendering is not a pure thing to do. Both\n  // are taken in a LAYOUT effect, so the correction lands before the browser\n  // paints and there is no frame in which the label sits off the screen.\n  const [room, setRoom] = useState<{ size: TooltipSize; viewport: TooltipViewport } | null>(null);\n  useLayoutEffect(() => {\n    const measured = visible ? bubbleRef.current?.getBoundingClientRect() : undefined;\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- a measurement is the one thing a layout effect is for\n    setRoom((previous) => {\n      if (!measured) return null;\n      const next = {\n        size: { width: measured.width, height: measured.height },\n        viewport: { width: window.innerWidth, height: window.innerHeight },\n      };\n      // Only publish what actually CHANGED: every re-measure allocates a fresh\n      // object, and a new object on every scroll event would re-render the\n      // bubble forever.\n      return previous && sameRoom(previous, next) ? previous : next;\n    });\n  }, [visible, rect, label]);\n\n  const physical = physicalSide(side, dir);\n  const point = rect ? tooltipAnchor(rect, physical) : null;\n  // Unmeasured on the very first pass, where the anchor point plus the side's\n  // own transform is exactly what this always did. One layout effect later the\n  // size is known and the placement is decided properly.\n  const placed = rect && room ? placeTooltip(rect, physical, room.size, room.viewport) : null;\n\n  return (\n    <>\n      <span\n        // As in `CssTooltip`: the caller's attributes first, the four handlers that run\n        // this component after them. The BUBBLE is deliberately not given them — it is\n        // portalled to `<body>`, and an id or a tour anchor duplicated onto a node that\n        // only exists while hovered would match twice or match nothing.\n        {...rest}\n        ref={triggerRef}\n        className={cn(\"relative inline-flex\", className)}\n        onMouseEnter={(e) => show(e.currentTarget)}\n        onMouseLeave={() => setVisible(false)}\n        onFocus={(e) => show(e.currentTarget)}\n        onBlur={() => setVisible(false)}\n      >\n        {describedBy(children, visible ? id : undefined)}\n      </span>\n      {visible &&\n        point &&\n        typeof document !== \"undefined\" &&\n        createPortal(\n          <span\n            ref={bubbleRef}\n            id={id}\n            role=\"tooltip\"\n            dir={dir}\n            data-private={redact ? \"\" : undefined}\n            style={\n              placed\n                ? { position: \"fixed\", left: placed.left, top: placed.top }\n                : {\n                    position: \"fixed\",\n                    left: point.left,\n                    top: point.top,\n                    transform: portalTransformBySide[physical],\n                  }\n            }\n            className={cn(TOOLTIP_SURFACE, \"pointer-events-none z-50\")}\n          >\n            {label}\n          </span>,\n          document.body,\n        )}\n    </>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/tooltip.tsx"],"sourcesContent":["import {\n  cloneElement,\n  isValidElement,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type ComponentPropsWithoutRef,\n  type ReactElement,\n  type ReactNode,\n  type RefObject,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/cn\";\nimport { useEscapeKey } from \"../hooks/use-dismiss\";\nimport { useAnchoredRect, type AnchorRect } from \"../hooks/use-anchored-rect\";\nimport { dirOf, type Direction } from \"../lib/direction\";\nimport { hasClippingAncestor } from \"../lib/clipping\";\n\n/** The attribute that marks an element as a clipping container for {@link Tooltip}'s\n *  auto-portal, whatever its computed `overflow` — `<div data-clips>` or\n *  `<div {...{ [CLIPS_ATTRIBUTE]: \"\" }}>`. Put it on an app's own scroller so a test\n *  environment without stylesheets (jsdom) portals the same tooltips the browser\n *  does. DataTable's body and Table's wrapper already carry it. */\nexport { CLIPS_ATTRIBUTE } from \"../lib/clipping\";\n\n/** Where the bubble sits. `start` / `end` follow the reading direction — `end` is the\n *  right in LTR and the left in RTL — and are what a layout that mirrors should ask\n *  for. `left` / `right` stay physical, for a bubble tied to something that does not\n *  mirror (a chart axis, a map). */\nexport type TooltipSide = \"top\" | \"bottom\" | \"left\" | \"right\" | \"start\" | \"end\";\n\n/** The placement the maths works in: a logical side resolved against the trigger. */\ntype PhysicalSide = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nfunction physicalSide(side: TooltipSide, dir: Direction): PhysicalSide {\n  if (side === \"start\") return dir === \"rtl\" ? \"right\" : \"left\";\n  if (side === \"end\") return dir === \"rtl\" ? \"left\" : \"right\";\n  return side;\n}\n\n/** The floating bubble itself. Uses the shared surface/border/text tokens so it\n *  reads as part of the app's chrome (like the top bar and cards) rather than the\n *  cold slate pill it used to be.\n *\n *  `w-max` keeps a short label on one line — the old `whitespace-nowrap` did that\n *  too, but it also let a sentence-length label grow without bound, and a bubble\n *  wider than the space beside its trigger gets clipped by whatever overflow\n *  container it sits in. So cap it and let long text wrap instead. The cap tracks\n *  the viewport as well, for narrow screens where 20rem is already most of it.\n *  `side` is a preference rather than an instruction for the PORTALLED variant,\n *  which measures the bubble and turns it round when it would not fit\n *  (Steering Design feedback #126). The CSS-only one never learns its own size,\n *  so there `side` is still the whole of the placement. */\nconst TOOLTIP_SURFACE =\n  \"w-max max-w-[min(20rem,calc(100vw-1rem))] rounded-md border border-[var(--border)] bg-[var(--bg-surface)] px-2 py-1 text-xs font-medium text-[var(--text-primary)] shadow-lg\";\n\nconst sidePositionClass: Record<TooltipSide, string> = {\n  top: \"bottom-full left-1/2 -translate-x-1/2 mb-1\",\n  bottom: \"top-full left-1/2 -translate-x-1/2 mt-1\",\n  left: \"right-full top-1/2 -translate-y-1/2 mr-1\",\n  right: \"left-full top-1/2 -translate-y-1/2 ml-1\",\n  // Logical insets, so CSS resolves the side from the inherited direction with no\n  // JavaScript: `end-full` pins the bubble's END edge to the trigger's start.\n  start: \"end-full top-1/2 -translate-y-1/2 me-1\",\n  end: \"start-full top-1/2 -translate-y-1/2 ms-1\",\n};\n\n/**\n * `extends ComponentPropsWithoutRef<\"span\">` because the wrapper this renders IS a span,\n * and a tooltip is the component a caller most often needs to reach past: it sits\n * between the layout and the control, so a `data-tour` anchor, a test id or an\n * `aria-label` aimed at the trigger used to be swallowed by it.\n *\n * ⚠️ On the empty-label branch there is no wrapper at all, and therefore nothing for\n * those attributes to land on — see the note in the body.\n */\nexport interface TooltipProps extends ComponentPropsWithoutRef<\"span\"> {\n  label: ReactNode;\n  side?: TooltipSide;\n  className?: string;\n  /**\n   * Where the bubble lives. Left out (the default since 0.10.0), the tooltip decides for\n   * itself: the bubble stays next to the trigger unless an ancestor clips or scrolls\n   * (`overflow` other than `visible`, or the {@link CLIPS_ATTRIBUTE} marker), in which\n   * case it is portalled — see \"Inside a scroll container\" below. `true` always portals, `false` never does; both are exactly\n   * what they were before the default existed.\n   */\n  portal?: boolean;\n  /** Tag the bubble `data-private`, for a label that repeats the user's own data. */\n  redact?: boolean;\n  children: ReactNode;\n}\n\n/** What each variant below takes: the resolved `side`, and every span attribute the\n *  caller handed {@link Tooltip}, forwarded to that variant's own wrapper. */\ntype TooltipVariantProps = Omit<TooltipProps, \"side\" | \"portal\"> & { side: TooltipSide };\n\n/**\n * Hover/focus label for a control.\n *\n * Two placements, and the choice matters more than it looks. In place, the bubble is\n * always mounted next to the trigger and fades in on `:hover`, which costs no state and\n * works in a plain render test. Portalled, the bubble is mounted in `document.body`\n * only while it is up, positioned by measurement.\n *\n * ⚠️ **A bubble that repeats a value has to be redactable.** The consuming app blurs\n * `[data-private]` under a `demo-mode` class on `<html>` — and the portalled bubble is\n * mounted on `document.body`, which is INSIDE that class, so the rule reaches it as\n * long as the bubble is tagged. It is not tagged by default, because most labels are\n * UI strings; pass `redact` on the ones that repeat the user's own data (a truncated\n * payee, an account name, a memo). Getting this wrong is silent: the trigger blurs,\n * the bubble spells the value out on hover.\n *\n * ⚠️ **An empty label renders nothing at all.** `title={payee ?? \"\"}` is an ordinary\n * shape at a call site that reveals truncated text, and the native attribute answers\n * it by showing no tooltip. A component that faithfully rendered an empty bubble\n * would be a worse `title`, so the emptiness check is here rather than at every call\n * site that could forget it.\n *\n * ⚠️ **The bubble describes its trigger, which means cloning it.** `role=\"tooltip\"` is\n * a name for a box, not a relationship — so for as long as nothing referenced the\n * bubble, the label reached the pointer and nobody else. That is worst on the call\n * sites that need it most: the kit's icon-only buttons, where the tooltip IS the\n * label. `aria-describedby` has to sit on the focusable element, which is the\n * caller's child and not this component's wrapper, so the child is CLONED to carry\n * it. A description the caller already set is appended to, never replaced — a field's\n * error text and its hint bubble both describe it. Children that cannot take props (a\n * fragment, a bare string, several elements) are left exactly as they were.\n *\n * ⚠️ **Escape dismisses it (WCAG 1.4.13).** Anything that appears on hover or focus has\n * to be dismissible without moving the pointer, and a bubble is opaque: it lands over\n * the row, field or figure you were reading, and the only way out of it used to be to\n * point somewhere else — which is precisely what you cannot do when what you need to\n * read is underneath it. The listener is the document's rather than the wrapper's\n * because the pointer opens this with the keyboard focus somewhere else entirely, and\n * it is subscribed only while a bubble is actually up: the in-place bubble is always\n * mounted, and a table of forty tooltips must not mean forty keydown listeners.\n *\n * ⚠️ **Inside a scroll container, the bubble has to be portalled — and by default it\n * now is.** An always-mounted bubble is absolutely positioned, but an absolutely\n * positioned descendant still counts towards its scroll-container ancestor's\n * scrollable overflow — so an invisible bubble on a control near the right edge makes\n * the container scroll sideways with nothing to reveal. That is what Keksdose feedback\n * dev#488 reported on the admin roster: 66px of horizontal scroll on a table that fit,\n * 44px of it owed to tooltips nobody could see. And a visible one is clipped by the\n * container's edge. The portalled bubble is `position: fixed` and absent until hovered,\n * so it adds no width and cannot be clipped.\n *\n * Until 0.10.0 the cure was `portal` at the call site, and kastlan asked for it to stop\n * being one: every tooltip in a table, a drawer or a scrolling card had to remember it,\n * and the ones that forgot were only found by someone scrolling sideways. So with\n * `portal` left out, the tooltip looks for a clipping ancestor itself — any element\n * between it and `<body>` whose computed `overflow-x` / `overflow-y` is not `visible`,\n * or that carries {@link CLIPS_ATTRIBUTE} (`data-clips`). The marker is what makes the\n * answer the same under test: jsdom computes no Tailwind, so there every scroller\n * reads `visible` and a table-cell tooltip used to stay in place — its always-mounted\n * bubble then repeated the label in the cell's accessible name and `textContent`\n * (\"CheckingChecking\"), and apps pinned `portal` to stop it. The kit's own scrollers\n * are marked, so a tooltip in a DataTable or Table cell portals in jsdom exactly as it\n * does in the browser.\n * It looks at MOUNT, not only on open: dev#488's phantom scroll is caused by a bubble\n * nobody opened, so a check that waited for the hover would find the damage already\n * done. It looks again on every open, for a container that started scrolling after\n * the tooltip mounted (a table that grew). Only the bubble changes place; the trigger\n * and the caller's child stay mounted, so a switch never costs a focused button its\n * focus. Outside any such container the in-place bubble is kept, which is still the\n * cheaper one and the one a plain render test can find without a hover.\n *\n * Why not simply portal everything? Because the in-place bubble is the one existing\n * app tests rely on (it is in the DOM without a hover), and because it follows its\n * trigger through a scroll or an animation for free — the portalled one re-measures.\n */\nexport function Tooltip({\n  label,\n  side = \"top\",\n  className,\n  portal,\n  redact = false,\n  children,\n  ...rest\n}: TooltipProps) {\n  // No label, no bubble — and no wrapper either, so a conditional tooltip costs the\n  // layout nothing on the branch where it does not apply. `...rest` goes with the\n  // wrapper on this branch, which is the documented limit of the pass-through: there is\n  // no element left to put an attribute on.\n  if (isEmptyLabel(label)) return <>{children}</>;\n  if (portal === true) {\n    return (\n      <PortalTooltip\n        label={label}\n        side={side}\n        className={className}\n        redact={redact}\n        {...rest}\n      >\n        {children}\n      </PortalTooltip>\n    );\n  }\n  // Both variants are separate components so that `Tooltip` itself can keep calling NO\n  // hooks: the empty-label branch above returns before either of them, and a hook after\n  // a conditional return is a hooks-order bug rather than a style violation.\n  return (\n    <InPlaceTooltip\n      label={label}\n      side={side}\n      className={className}\n      redact={redact}\n      detect={portal === undefined}\n      {...rest}\n    >\n      {children}\n    </InPlaceTooltip>\n  );\n}\n\n\n/** The variant that lives next to its trigger, and — when `detect` is on, which is the\n *  default — moves its bubble to `<body>` when that turns out to be inside a clipping\n *  container (see \"Inside a scroll container\" on {@link Tooltip}).\n *\n *  In place it holds the little state it does for the two things CSS cannot express —\n *  which element to point `aria-describedby` at, and Escape — and not for the fade,\n *  which is still `group-hover`/`group-focus-within` and still costs a render nothing.\n *\n *  ONE component for both placements rather than a switch between the two variants: a\n *  switch would be a different component at the same place in the tree, and React\n *  would remount the caller's child with it — a button that loses focus the moment\n *  its own tooltip decided where to go. Here the wrapper and the child stay put and\n *  only the bubble's slot changes. */\nfunction InPlaceTooltip({\n  label,\n  side,\n  className,\n  redact,\n  detect,\n  children,\n  ...rest\n}: TooltipVariantProps & { detect: boolean }) {\n  const id = useId();\n  const triggerRef = useRef<HTMLSpanElement | null>(null);\n  const [clipped, setClipped] = useState(false);\n  const [hovered, setHovered] = useState(false);\n  const [focused, setFocused] = useState(false);\n  const [dismissed, setDismissed] = useState(false);\n  const [dir, setDir] = useState<Direction>(\"ltr\");\n  const open = (hovered || focused) && !dismissed;\n  useEscapeKey(() => setDismissed(true), open);\n  // At mount, before the first paint: the in-place bubble inside a scroller is the\n  // phantom-scroll bug whether or not anyone opens it.\n  useLayoutEffect(() => {\n    if (detect) setClipped(hasClippingAncestor(triggerRef.current));\n  }, [detect]);\n  // Re-armed by the next hover or focus rather than by an effect watching those flags:\n  // coming back to a trigger is a fresh request for its label, and an effect would also\n  // re-show the bubble under a pointer that never left. The clipping check is repeated\n  // here for a container that began to scroll after mount.\n  const arm = (el: Element) => {\n    setDismissed(false);\n    if (!detect) return;\n    setDir(dirOf(el));\n    setClipped(hasClippingAncestor(el));\n  };\n  return (\n    <span\n      // `...rest` first: the four handlers below are what decides whether a bubble is\n      // up, and a caller passing an `onFocus` of its own must not replace them.\n      {...rest}\n      ref={triggerRef}\n      className={cn(\"relative inline-flex\", !clipped && \"group/tooltip\", className)}\n      // These four track WHETHER A BUBBLE IS UP. They activate nothing — the only thing\n      // here that can be activated is the caller's child, which keeps every handler it\n      // arrived with — so this wrapper needs no role and no key handling of its own.\n      // `jsx-a11y/no-static-element-interactions` warns about it all the same, as it\n      // already does about the portal variant's identical trigger below; both are left\n      // visible rather than silenced, because a rule this package ratchets should be\n      // argued with in the backlog and not in a disable comment.\n      onMouseEnter={(e) => {\n        setHovered(true);\n        arm(e.currentTarget);\n      }}\n      onMouseLeave={() => setHovered(false)}\n      onFocus={(e) => {\n        setFocused(true);\n        arm(e.currentTarget);\n      }}\n      onBlur={() => setFocused(false)}\n    >\n      {/* In place the bubble is always there to point at; portalled, only while up. */}\n      {describedBy(children, clipped ? (open ? id : undefined) : dismissed ? undefined : id)}\n      {clipped ? (\n        open && (\n          <PortalBubble triggerRef={triggerRef} id={id} label={label} side={side} dir={dir} redact={redact} />\n        )\n      ) : (\n        <span\n          id={id}\n          role=\"tooltip\"\n          // The `hidden` ATTRIBUTE, not an opacity class: dismissing has to take the\n          // bubble out of the accessibility tree as well as off the screen, or a screen\n          // reader still reads out the description of a bubble the user just closed.\n          hidden={dismissed || undefined}\n          data-private={redact ? \"\" : undefined}\n          className={cn(\n            TOOLTIP_SURFACE,\n            \"pointer-events-none absolute z-50 opacity-0 group-hover/tooltip:opacity-100 group-focus-within/tooltip:opacity-100\",\n            sidePositionClass[side],\n          )}\n        >\n          {label}\n        </span>\n      )}\n    </span>\n  );\n}\n\n/** Hand `children` the bubble's id as an `aria-describedby`, if it is an element that\n *  can hold one. `id` is undefined while there is no bubble to point at — a dangling\n *  reference describes the trigger as nothing at all, which is worse than silence. */\nfunction describedBy(children: ReactNode, id: string | undefined): ReactNode {\n  if (id === undefined || !isValidElement(children)) return children;\n  const child = children as ReactElement<{ \"aria-describedby\"?: string }>;\n  // Fragments, Suspense and friends are symbol-typed and take no DOM props; cloning one\n  // with an aria attribute warns in development and drops it in production.\n  if (typeof child.type === \"symbol\") return children;\n  const own = child.props[\"aria-describedby\"];\n  return cloneElement(child, { \"aria-describedby\": own ? `${own} ${id}` : id });\n}\n\n/** \"Would this bubble be blank.\" Only the values a call site actually produces when\n *  it has nothing to say — `\"\"`, `null`, `undefined`, `false` from a `&&` guard. A\n *  numeric `0` is a real label and stays one. */\nfunction isEmptyLabel(label: ReactNode): boolean {\n  return (\n    label == null ||\n    label === false ||\n    (typeof label === \"string\" && label.trim() === \"\")\n  );\n}\n\nconst TOOLTIP_GAP = 4;\n\n/** How close to the viewport edge a bubble may sit. Not zero: a label flush\n *  against the glass reads as clipped even when every character is on screen. */\nconst TOOLTIP_MARGIN = 4;\n\nconst portalTransformBySide: Record<PhysicalSide, string> = {\n  right: \"translate(0, -50%)\",\n  left: \"translate(-100%, -50%)\",\n  top: \"translate(-50%, -100%)\",\n  bottom: \"translate(-50%, 0)\",\n};\n\n/** Anchor point (viewport px) for the tooltip on the given side of `r`. Paired\n *  with {@link portalTransformBySide}, which shifts the box onto that point. */\nfunction tooltipAnchor(\n  r: AnchorRect,\n  side: PhysicalSide,\n): { left: number; top: number } {\n  switch (side) {\n    case \"right\":\n      return { left: r.right + TOOLTIP_GAP, top: r.top + r.height / 2 };\n    case \"left\":\n      return { left: r.left - TOOLTIP_GAP, top: r.top + r.height / 2 };\n    case \"top\":\n      return { left: r.left + r.width / 2, top: r.top - TOOLTIP_GAP };\n    case \"bottom\":\n      return { left: r.left + r.width / 2, top: r.bottom + TOOLTIP_GAP };\n  }\n}\n\nexport interface TooltipSize {\n  width: number;\n  height: number;\n}\n\nexport interface TooltipViewport {\n  width: number;\n  height: number;\n}\n\nexport interface TooltipPlacement {\n  left: number;\n  top: number;\n  /** Which side it ended up on, which need not be the one that was asked for. */\n  side: PhysicalSide;\n}\n\nconst opposite: Record<PhysicalSide, PhysicalSide> = {\n  left: \"right\",\n  right: \"left\",\n  top: \"bottom\",\n  bottom: \"top\",\n};\n\n/** Whether the bubble clears the viewport edge on `side` of the trigger. */\nfunction roomOn(\n  r: AnchorRect,\n  side: PhysicalSide,\n  size: TooltipSize,\n  viewport: TooltipViewport,\n): boolean {\n  switch (side) {\n    case \"left\":\n      return r.left - TOOLTIP_GAP - size.width >= TOOLTIP_MARGIN;\n    case \"right\":\n      return r.right + TOOLTIP_GAP + size.width <= viewport.width - TOOLTIP_MARGIN;\n    case \"top\":\n      return r.top - TOOLTIP_GAP - size.height >= TOOLTIP_MARGIN;\n    case \"bottom\":\n      return r.bottom + TOOLTIP_GAP + size.height <= viewport.height - TOOLTIP_MARGIN;\n  }\n}\n\nfunction sameRoom(\n  a: { size: TooltipSize; viewport: TooltipViewport },\n  b: { size: TooltipSize; viewport: TooltipViewport },\n): boolean {\n  return (\n    a.size.width === b.size.width &&\n    a.size.height === b.size.height &&\n    a.viewport.width === b.viewport.width &&\n    a.viewport.height === b.viewport.height\n  );\n}\n\nfunction clamp(value: number, low: number, high: number): number {\n  // `high` first, so a bubble taller or wider than the viewport is pinned to the\n  // top-left corner rather than to the bottom-right one — the start of a label\n  // is the half worth keeping.\n  return Math.max(low, Math.min(value, high));\n}\n\n/**\n * Where the bubble actually goes, given how big it turned out to be.\n *\n * Two rules, and they are separate because they fix separate failures.\n *\n * **Turn round when the preferred side has no room.** `side` says which side of\n * the trigger the label reads best on, and on a form near the left edge of the\n * window that side is off the screen — the capped bubble can only wrap, not\n * move, so what the reader gets is a sentence with its first half outside the\n * glass. Flipped only when the *other* side is genuinely better: a trigger in a\n * viewport too narrow for the bubble either way keeps the side it asked for, and\n * the clamp below does what it can.\n *\n * **Then clamp both axes.** The cross axis is the one that needs it — a `top`\n * bubble is centred on the trigger, so a trigger near the left edge pushes half\n * the label off even though the side it is on is right — and clamping the main\n * axis too costs nothing and covers the flip having nowhere to land.\n *\n * Pure, and measured in viewport pixels throughout, so it can be tested without\n * a layout: the caller supplies the trigger's rect, the bubble's own size and\n * the window.\n */\nexport function placeTooltip(\n  r: AnchorRect,\n  side: PhysicalSide,\n  size: TooltipSize,\n  viewport: TooltipViewport,\n): TooltipPlacement {\n  const chosen =\n    roomOn(r, side, size, viewport) || !roomOn(r, opposite[side], size, viewport)\n      ? side\n      : opposite[side];\n  const point = tooltipAnchor(r, chosen);\n  const box =\n    chosen === \"left\"\n      ? { left: point.left - size.width, top: point.top - size.height / 2 }\n      : chosen === \"right\"\n        ? { left: point.left, top: point.top - size.height / 2 }\n        : chosen === \"top\"\n          ? { left: point.left - size.width / 2, top: point.top - size.height }\n          : { left: point.left - size.width / 2, top: point.top };\n  return {\n    left: clamp(box.left, TOOLTIP_MARGIN, viewport.width - size.width - TOOLTIP_MARGIN),\n    top: clamp(box.top, TOOLTIP_MARGIN, viewport.height - size.height - TOOLTIP_MARGIN),\n    side: chosen,\n  };\n}\n\nfunction PortalTooltip({\n  label,\n  side,\n  className,\n  redact,\n  children,\n  ...rest\n}: TooltipVariantProps) {\n  const triggerRef = useRef<HTMLSpanElement | null>(null);\n  const [visible, setVisible] = useState(false);\n  // The trigger's reading direction, read when the bubble is asked for (an event, not a\n  // render): it resolves `start` / `end`, and the portalled bubble — which has left the\n  // subtree it would have inherited `dir` from — carries it too.\n  const [dir, setDir] = useState<Direction>(\"ltr\");\n  const show = (el: Element) => {\n    setDir(dirOf(el));\n    setVisible(true);\n  };\n  const id = useId();\n  // Escape closes it outright, since this variant's bubble only exists while it is\n  // shown. The next mouseenter/focus brings it back, which is the behaviour WCAG\n  // 1.4.13 asks for: dismissible now, still available when you ask again.\n  useEscapeKey(() => setVisible(false), visible);\n\n  return (\n    <>\n      <span\n        // As in `InPlaceTooltip`: the caller's attributes first, the four handlers that\n        // run this component after them. The BUBBLE is deliberately not given them — it\n        // is portalled to `<body>`, and an id or a tour anchor duplicated onto a node\n        // that only exists while hovered would match twice or match nothing.\n        {...rest}\n        ref={triggerRef}\n        className={cn(\"relative inline-flex\", className)}\n        onMouseEnter={(e) => show(e.currentTarget)}\n        onMouseLeave={() => setVisible(false)}\n        onFocus={(e) => show(e.currentTarget)}\n        onBlur={() => setVisible(false)}\n      >\n        {describedBy(children, visible ? id : undefined)}\n      </span>\n      {visible && (\n        <PortalBubble triggerRef={triggerRef} id={id} label={label} side={side} dir={dir} redact={redact} />\n      )}\n    </>\n  );\n}\n\n/** The measured, `position: fixed` bubble on `<body>`, mounted only while it is up.\n *  Shared by {@link PortalTooltip} and the in-place variant's clipped mode, so the two\n *  cannot place a bubble differently. */\nfunction PortalBubble({\n  triggerRef,\n  id,\n  label,\n  side,\n  dir,\n  redact,\n}: {\n  triggerRef: RefObject<HTMLSpanElement | null>;\n  id: string;\n  label: ReactNode;\n  side: TooltipSide;\n  dir: Direction;\n  redact: boolean | undefined;\n}) {\n  const bubbleRef = useRef<HTMLSpanElement | null>(null);\n  // The measure + scroll/resize-tracking lifecycle is owned by useAnchoredRect;\n  // here we only map the rect to a side-specific anchor point.\n  const rect = useAnchoredRect(triggerRef, true);\n  // The bubble's own size and the window it has to fit in — neither of which is\n  // knowable in render: the width is whatever the label wrapped to inside the\n  // cap, and reading `window` while rendering is not a pure thing to do. Both\n  // are taken in a LAYOUT effect, so the correction lands before the browser\n  // paints and there is no frame in which the label sits off the screen.\n  const [room, setRoom] = useState<{ size: TooltipSize; viewport: TooltipViewport } | null>(null);\n  useLayoutEffect(() => {\n    const measured = bubbleRef.current?.getBoundingClientRect();\n    setRoom((previous) => {\n      if (!measured) return null;\n      const next = {\n        size: { width: measured.width, height: measured.height },\n        viewport: { width: window.innerWidth, height: window.innerHeight },\n      };\n      // Only publish what actually CHANGED: every re-measure allocates a fresh\n      // object, and a new object on every scroll event would re-render the\n      // bubble forever.\n      return previous && sameRoom(previous, next) ? previous : next;\n    });\n  }, [rect, label]);\n\n  const physical = physicalSide(side, dir);\n  const point = rect ? tooltipAnchor(rect, physical) : null;\n  // Unmeasured on the very first pass, where the anchor point plus the side's\n  // own transform is exactly what this always did. One layout effect later the\n  // size is known and the placement is decided properly.\n  const placed = rect && room ? placeTooltip(rect, physical, room.size, room.viewport) : null;\n\n  if (!point || typeof document === \"undefined\") return null;\n  return createPortal(\n    <span\n      ref={bubbleRef}\n      id={id}\n      role=\"tooltip\"\n      dir={dir}\n      data-private={redact ? \"\" : undefined}\n      style={\n        placed\n          ? { position: \"fixed\", left: placed.left, top: placed.top }\n          : {\n              position: \"fixed\",\n              left: point.left,\n              top: point.top,\n              transform: portalTransformBySide[physical],\n            }\n      }\n      className={cn(TOOLTIP_SURFACE, \"pointer-events-none z-50\")}\n    >\n      {label}\n    </span>,\n    document.body,\n  );\n}\n"],"mappings":"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","names":[]}