@camunda/design-system 0.59.0 → 0.61.0

package/dist/src/components/ui/select.js

@@ -4,18 +4,59 @@ import * as React from "react";
 import { Select as SelectPrimitive } from "radix-ui";
 import { cn } from "../../lib/utils.js";
 import { composeCloseAutoFocus, useDialogFocusReturn, } from "../../lib/focus-visible-on-close.js";
+import { useIsTruncated } from "../../hooks/use-is-truncated.js";
 import { C4Provider } from "./c4-provider.js";
 import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "../../icons/lucide.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
+// No existing ref-merge utility in this package (single-consumer need so
+// far, same reasoning as `code-block.tsx`'s own copy): the forwarded `ref`
+// (an external consumer's, if passed via `...props` — SelectTrigger doesn't
+// destructure it today) and the internal ref this file needs to read the
+// rendered `[data-slot="select-value"]` node both have to land on the same
+// `SelectPrimitive.Trigger` DOM node.
+function mergeRefs(a, b) {
+    return (node) => {
+        if (typeof a === "function")
+            a(node);
+        else if (a)
+            a.current = node;
+        b.current = node;
+    };
+}
 function Select({ ...props }) {
     return _jsx(SelectPrimitive.Root, { "data-slot": "select", ...props });
 }
 function SelectGroup({ ...props }) {
     return _jsx(SelectPrimitive.Group, { "data-slot": "select-group", ...props });
 }
-function SelectValue({ ...props }) {
-    return _jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
+function SelectValue({ children, ...props }) {
+    // Radix's `Select.Value` destructures `className`/`style` out of props and
+    // never forwards them to the rendered node (see
+    // `@radix-ui/react-select`'s own `SelectValue` implementation) — so styling
+    // this node's own display/truncation can't be done via a `className` prop
+    // on it directly, no matter how it's computed here. `data-*` attributes
+    // aren't stripped, though: they land in Radix's own `...valueProps` spread
+    // and reach the DOM, so `SelectTrigger`'s className reaches this node via
+    // a `[data-slot=select-value]` DESCENDANT selector (not the `*:` direct-
+    // child variant the previous, broken attempt used — this node isn't
+    // always a direct child of the trigger; see the icon+value composition in
+    // `filter-bar.stories.tsx`, which nests `SelectValue` inside a consumer
+    // span). `data-has-children` distinguishes the two layouts that selector
+    // needs to produce: plain `truncate` when Radix auto-renders the selected
+    // item's text (no `children` passed here — the common case, and the only
+    // one any consumer in this repo actually uses), or `flex` when a consumer
+    // passes its own `children` instead of relying on that auto-text.
+    //
+    // Radix's own `hasChildren` (`children !== void 0`) gates whether it
+    // auto-renders the selected item's text at all: passing this component
+    // *any* non-undefined `children` — even conditionally, even `null` — would
+    // suppress that auto-text for every consumer that doesn't. So this only
+    // ever wraps `children` when the consumer actually supplied some; it never
+    // passes an empty wrapper through in the common case.
+    const hasChildren = children !== undefined;
+    return (_jsx(SelectPrimitive.Value, { "data-slot": "select-value", "data-has-children": hasChildren ? "" : undefined, ...props, children: hasChildren ? (_jsx("span", { "data-slot": "select-value-text", className: "min-w-0 truncate", children: children })) : undefined }));
 }
-function SelectTrigger({ className, size = "default", children, id, invalidText, helperText, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedBy, "aria-errormessage": ariaErrorMessage, ...props }) {
+function SelectTrigger({ className, size = "default", children, id, invalidText, helperText, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedBy, "aria-errormessage": ariaErrorMessage, ref, onPointerEnter, onFocus, ...props }) {
     const generatedId = React.useId();
     const resolvedId = id ?? generatedId;
     const isInvalid = ariaInvalid === true || ariaInvalid === "true";
@@ -26,13 +67,89 @@ function SelectTrigger({ className, size = "default", children, id, invalidText,
     const errorMessageId = ariaErrorMessage ?? errorId;
     const describedBy = [errorId, helperId, ariaDescribedBy].filter(Boolean).join(" ") || undefined;
     const hasMessage = showInvalidText || showHelperText;
-    const triggerEl = (_jsxs(SelectPrimitive.Trigger, { id: resolvedId, "data-slot": "select-trigger", "data-size": size, "aria-invalid": ariaInvalid, "aria-errormessage": errorMessageId, "aria-describedby": describedBy, className: cn("flex w-fit min-w-0 items-center justify-between gap-2 rounded-lg border border-input bg-input-background px-3 py-2 text-sm whitespace-nowrap transition-all duration-200 outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/20 dark:focus-visible:ring-ring/40 data-[focus-visible-restore]:border-ring data-[focus-visible-restore]:ring-3 data-[focus-visible-restore]:ring-ring/20 dark:data-[focus-visible-restore]:ring-ring/40 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger-foreground-subtle aria-invalid:ring-3 aria-invalid:ring-danger-foreground-subtle/20 data-placeholder:text-neutral-foreground-subtle data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:hover:bg-neutral-background-medium dark:aria-invalid:ring-danger-foreground-subtle/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDownIcon, { className: "pointer-events-none size-4 opacity-50" }) })] }));
+    // `SelectValue`'s content is opaque to `SelectTrigger` — it's rendered as
+    // `children`, an arbitrary consumer-authored subtree — so unlike the other
+    // 3 truncation-reveal sites there is no JSX ref to attach directly to the
+    // node the truncation utility clips (`data-slot="select-value"`, or its
+    // inner `data-slot="select-value-text"` span when `SelectValue` was given
+    // `children` — see the `[data-slot=select-value]` descendant selectors in
+    // this trigger's className below). `triggerRef` reads the rendered DOM
+    // instead: an ADDITIONAL internal ref alongside any consumer `ref` (merged
+    // via `mergeRefs`, not a replacement — `props` may still carry a consumer
+    // ref since it's not destructured above).
+    const triggerRef = React.useRef(null);
+    const mergedRef = React.useMemo(() => mergeRefs(ref, triggerRef), [ref, triggerRef]);
+    const { ref: valueRef, isTruncated, measure } = useIsTruncated();
+    const [tooltipText, setTooltipText] = React.useState("");
+    // Every commit, not just on a `children` change: which node currently
+    // carries `data-slot="select-value"`, and the room the trigger has, can
+    // both change with no reference-identity change on `children` to key on
+    // (e.g. picking a different option re-renders `SelectValue` under the same
+    // trigger). See "Truncated Text" in `docs/specs/shadcn/patterns.md`. No
+    // deps array is intentional (same reasoning `nav-breadcrumb.tsx` documents
+    // for its own equivalent effect) — the lint rule flags the direct
+    // `setTooltipText` call as a possible infinite-update chain, but `useState`
+    // bails out via `Object.is` when the computed text is unchanged, same as
+    // `measure()`'s own `setIsTruncated` call one layer down (which the rule
+    // can't see into, and so doesn't flag).
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    React.useLayoutEffect(() => {
+        // Prefer the inner `select-value-text` span — present only when
+        // `SelectValue` was given `children` — over the outer `select-value`
+        // node itself: that outer node is `flex` in that case (to lay out
+        // `children` alongside other content), and measuring `scrollWidth` /
+        // `clientWidth` on a flex container doesn't reflect text clipping the
+        // way it does on the actual `truncate`d node. See `select.tsx`'s
+        // `SelectValue` for why the split exists at all.
+        const valueEl = triggerRef.current?.querySelector('[data-slot="select-value-text"]') ??
+            triggerRef.current?.querySelector('[data-slot="select-value"]');
+        valueRef.current = valueEl ?? null;
+        measure();
+        setTooltipText(valueEl?.textContent ?? "");
+    });
+    const triggerEl = (_jsxs(SelectPrimitive.Trigger, { ref: mergedRef, id: resolvedId, "data-slot": "select-trigger", "data-size": size, "aria-invalid": ariaInvalid, "aria-errormessage": errorMessageId, "aria-describedby": describedBy, 
+        // Composed rather than clobbered: `props` may still carry a consumer
+        // handler (only `ref` is destructured above, not these two), and
+        // `{...props}` spreads AFTER this element's own attributes — the
+        // opposite order from `combobox.tsx`, so the risk here is a consumer
+        // handler silently winning over `measure()`, not the other way round.
+        onPointerEnter: (e) => {
+            onPointerEnter?.(e);
+            measure();
+        }, onFocus: (e) => {
+            onFocus?.(e);
+            measure();
+        }, className: cn("flex w-fit min-w-0 items-center justify-between gap-2 rounded-lg border border-input bg-input-background px-3 py-2 text-sm whitespace-nowrap transition-all duration-200 outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/20 dark:focus-visible:ring-ring/40 data-[focus-visible-restore]:border-ring data-[focus-visible-restore]:ring-3 data-[focus-visible-restore]:ring-ring/20 dark:data-[focus-visible-restore]:ring-ring/40 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger-foreground-subtle aria-invalid:ring-3 aria-invalid:ring-danger-foreground-subtle/20 data-placeholder:text-neutral-foreground-subtle data-[size=default]:h-9 data-[size=sm]:h-8 [&_[data-slot=select-value]]:min-w-0 [&_[data-slot=select-value]:not([data-has-children])]:truncate [&_[data-slot=select-value][data-has-children]]:flex [&_[data-slot=select-value][data-has-children]]:items-center [&_[data-slot=select-value][data-has-children]]:gap-1.5 dark:hover:bg-neutral-background-medium dark:aria-invalid:ring-danger-foreground-subtle/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDownIcon, { className: "pointer-events-none size-4 opacity-50" }) })] }));
+    // DEVIATES from the other 3 truncation-reveal sites (and from
+    // `nav-breadcrumb.tsx`'s reference pattern), and empirically so — not by
+    // assumption: `Tooltip`/`TooltipTrigger` are mounted UNCONDITIONALLY here
+    // (only `TooltipContent` is conditional on `isTruncated`), instead of
+    // conditionally mounting the whole `Tooltip` subtree. Conditionally
+    // mounting the whole subtree was tried first and measurably broken —
+    // toggling `isTruncated` changes the JSX shape at `SelectPrimitive.Trigger`'s
+    // own tree position (bare element vs. wrapped in `Tooltip`), which makes
+    // React unmount and remount it, and with it Radix Select's own internal
+    // `SelectValue` registration. The remounted value node measures 0×0 on the
+    // commit right after the remount (confirmed with a throwaway console probe:
+    // `onPointerEnter`'s `measure()` read the correct 260×110 and set
+    // `isTruncated` true; the very next commit's layout effect then read the
+    // SAME query on the freshly-remounted node as 0×0 and flipped it back to
+    // false), so the tooltip opened and immediately closed on every hover
+    // instead of staying open — a real correctness bug, not a style
+    // preference. `SelectPrimitive.Trigger` needs a permanently stable tree
+    // position for its internal state to survive a truncation toggle; the
+    // other 3 sites don't have that constraint; the accepted cost versus
+    // `nav-breadcrumb.tsx`'s document (an unconditional `Tooltip` still runs
+    // Radix's open-request handling and touches `TooltipProvider`'s
+    // delay-skip state on every hover of a SHORT value too) is real but minor
+    // next to a tooltip that cannot stay open.
+    const wrappedTriggerEl = (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: triggerEl }), isTruncated ? _jsx(TooltipContent, { children: tooltipText }) : null] }));
     if (!hasMessage) {
-        return triggerEl;
+        return wrappedTriggerEl;
     }
     // `w-fit` here would make a `width: 100%` trigger circular against its own
     // shrink-to-fit parent, silently dropping a `w-full` className override.
-    return (_jsxs("div", { className: "flex w-full flex-col gap-1.5", children: [triggerEl, showInvalidText ? (_jsx("span", { id: errorId, className: "text-xs text-danger-foreground-subtle", children: invalidText })) : null, showHelperText ? (_jsx("span", { id: helperId, className: "text-xs text-neutral-foreground-subtle", children: helperText })) : null] }));
+    return (_jsxs("div", { className: "flex w-full flex-col gap-1.5", children: [wrappedTriggerEl, showInvalidText ? (_jsx("span", { id: errorId, className: "text-xs text-danger-foreground-subtle", children: invalidText })) : null, showHelperText ? (_jsx("span", { id: helperId, className: "text-xs text-neutral-foreground-subtle", children: helperText })) : null] }));
 }
 function SelectContent({ className, children, position = "popper", onCloseAutoFocus, restoreFocusRef, ...props }) {
     const dialogFocusReturn = useDialogFocusReturn(restoreFocusRef);

package/dist/src/components/ui/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../../src/components/ui/select.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../../src/components/ui/select.tsx"],"names":[],"mappings":"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"}

package/dist/src/components/ui/tabs.d.ts

@@ -5,7 +5,8 @@ declare function Tabs({ className, orientation, ...props }: React.ComponentProps
 declare const tabsListVariants: (props?: ({
     variant?: "line" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare function TabsList({ className, variant, ...props }: React.ComponentProps<typeof TabsPrimitive.List> & VariantProps<typeof tabsListVariants>): React.JSX.Element;
+type TabsListProps = React.ComponentProps<typeof TabsPrimitive.List> & VariantProps<typeof tabsListVariants>;
+declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsListProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>): React.JSX.Element;
 declare function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>): React.JSX.Element;
 export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };

package/dist/src/components/ui/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,UAAU,CAAC;AAIjD,iBAAS,IAAI,CAAC,EACZ,SAAS,EACT,WAA0B,EAC1B,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,qBAYjD;AAED,QAAA,MAAM,gBAAgB;;8EAarB,CAAC;AAEF,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,GAChD,YAAY,CAAC,OAAO,gBAAgB,CAAC,qBAStC;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,qBAepD;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,qBAQpD;AAED,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,UAAU,CAAC;AAOjD,iBAAS,IAAI,CAAC,EACZ,SAAS,EACT,WAA0B,EAC1B,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,qBAYjD;AAID,QAAA,MAAM,gBAAgB;;8EAarB,CAAC;AAEF,KAAK,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,GAClE,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAkDxC,QAAA,MAAM,QAAQ,mGAAuD,CAAC;AAEtE,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,qBAepD;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,qBAQpD;AAED,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/src/components/ui/tabs.js

@@ -1,12 +1,17 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cva } from "class-variance-authority";
 import { Tabs as TabsPrimitive } from "radix-ui";
 import { cn } from "../../lib/utils.js";
+import { withRef } from "../../lib/with-ref.js";
+import { mergeRefs } from "../../lib/merge-refs.js";
+import { OverflowStripArrow, useOverflowStrip } from "./overflow-strip.js";
 function Tabs({ className, orientation = "horizontal", ...props }) {
     return (_jsx(TabsPrimitive.Root, { "data-slot": "tabs", "data-orientation": orientation, className: cn("group/tabs flex gap-2 data-horizontal:flex-col", className), ...props }));
 }
-const tabsListVariants = cva("group/tabs-list inline-flex w-fit items-center justify-center gap-1 rounded-xl p-1 text-neutral-foreground-subtle group-data-horizontal/tabs:h-9 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none", {
+// `justify-start`, not `center`: a centred flex row that overflows its scroll
+// container hangs past the start edge where no scroll position can reach it.
+const tabsListVariants = cva("group/tabs-list inline-flex w-fit items-center justify-start gap-1 rounded-xl p-1 text-neutral-foreground-subtle group-data-horizontal/tabs:h-9 group-data-horizontal/tabs:min-w-0 group-data-horizontal/tabs:max-w-full group-data-horizontal/tabs:overflow-x-auto group-data-horizontal/tabs:[scrollbar-width:none] group-data-horizontal/tabs:[&::-webkit-scrollbar]:hidden group-data-horizontal/tabs:motion-safe:scroll-smooth group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col group-data-vertical/tabs:overflow-visible data-[variant=line]:rounded-none", {
     variants: {
         variant: {
             default: "bg-neutral-background-medium",
@@ -17,9 +22,16 @@ const tabsListVariants = cva("group/tabs-list inline-flex w-fit items-center jus
         variant: "default",
     },
 });
-function TabsList({ className, variant = "default", ...props }) {
-    return (_jsx(TabsPrimitive.List, { "data-slot": "tabs-list", "data-variant": variant, className: cn(tabsListVariants({ variant }), className), ...props }));
+function TabsListImpl({ ref, className, variant = "default", ...props }) {
+    const { ref: scrollRef, hasMoreBefore, hasMoreAfter, scrollByStep, } = useOverflowStrip();
+    const listRef = React.useMemo(() => mergeRefs(ref, scrollRef), [ref, scrollRef]);
+    return (
+    // The arrows are siblings of the tablist inside this wrapper, never
+    // children of it — rendering them inside would count toward the tab
+    // total and break Radix's roving focus (Home/End, arrow-key wrap).
+    _jsxs("div", { "data-slot": "tabs-list-scroller", className: "flex min-w-0 max-w-full group-data-horizontal/tabs:items-center group-data-vertical/tabs:items-start", children: [hasMoreBefore && (_jsx(OverflowStripArrow, { direction: "before", onScroll: () => scrollByStep("before") })), _jsx(TabsPrimitive.List, { ref: listRef, "data-slot": "tabs-list", "data-variant": variant, className: cn(tabsListVariants({ variant }), className), ...props }), hasMoreAfter && (_jsx(OverflowStripArrow, { direction: "after", onScroll: () => scrollByStep("after") }))] }));
 }
+const TabsList = withRef(TabsListImpl);
 function TabsTrigger({ className, ...props }) {
     return (_jsx(TabsPrimitive.Trigger, { "data-slot": "tabs-trigger", className: cn("relative inline-flex h-[calc(100%-2px)] flex-1 cursor-pointer items-center justify-center gap-1.5 rounded-lg border border-transparent px-3 py-1 text-sm font-medium whitespace-nowrap text-neutral-foreground-strong transition-all duration-200 group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 dark:text-neutral-foreground-subtle group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "not-data-active:hover:bg-neutral-background-strong", "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent", "data-active:bg-neutral-background-subtle data-active:text-neutral-foreground-strong dark:data-active:border-input dark:data-active:text-neutral-foreground-strong", "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100", className), ...props }));
 }

package/dist/src/components/ui/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../../src/components/ui/tabs.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,UAAU,CAAC;AAEjD,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAE/B,SAAS,IAAI,CAAC,EACZ,SAAS,EACT,WAAW,GAAG,YAAY,EAC1B,GAAG,KAAK,EACwC;IAChD,OAAO,CACL,KAAC,aAAa,CAAC,IAAI,iBACP,MAAM,sBACE,WAAW,EAC7B,SAAS,EAAE,EAAE,CACX,gDAAgD,EAChD,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,MAAM,gBAAgB,GAAG,GAAG,CAC1B,oPAAoP,EACpP;IACE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,8BAA8B;YACvC,IAAI,EAAE,sBAAsB;SAC7B;KACF;IACD,eAAe,EAAE;QACf,OAAO,EAAE,SAAS;KACnB;CACF,CACF,CAAC;AAEF,SAAS,QAAQ,CAAC,EAChB,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,GAAG,KAAK,EAE6B;IACrC,OAAO,CACL,KAAC,aAAa,CAAC,IAAI,iBACP,WAAW,kBACP,OAAO,EACrB,SAAS,EAAE,EAAE,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,CAAC,KACnD,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,SAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EAC2C;IACnD,OAAO,CACL,KAAC,aAAa,CAAC,OAAO,iBACV,cAAc,EACxB,SAAS,EAAE,EAAE,CACX,ouBAAouB,EACpuB,oDAAoD,EACpD,+PAA+P,EAC/P,mKAAmK,EACnK,sYAAsY,EACtY,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,SAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EAC2C;IACnD,OAAO,CACL,KAAC,aAAa,CAAC,OAAO,iBACV,cAAc,EACxB,SAAS,EAAE,EAAE,CAAC,6BAA6B,EAAE,SAAS,CAAC,KACnD,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../../src/components/ui/tabs.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,UAAU,CAAC;AAEjD,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAExE,SAAS,IAAI,CAAC,EACZ,SAAS,EACT,WAAW,GAAG,YAAY,EAC1B,GAAG,KAAK,EACwC;IAChD,OAAO,CACL,KAAC,aAAa,CAAC,IAAI,iBACP,MAAM,sBACE,WAAW,EAC7B,SAAS,EAAE,EAAE,CACX,gDAAgD,EAChD,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,8EAA8E;AAC9E,6EAA6E;AAC7E,MAAM,gBAAgB,GAAG,GAAG,CAC1B,ijBAAijB,EACjjB;IACE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,8BAA8B;YACvC,IAAI,EAAE,sBAAsB;SAC7B;KACF;IACD,eAAe,EAAE;QACf,OAAO,EAAE,SAAS;KACnB;CACF,CACF,CAAC;AAKF,SAAS,YAAY,CAAC,EACpB,GAAG,EACH,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,GAAG,KAAK,EAC4C;IACpD,MAAM,EACJ,GAAG,EAAE,SAAS,EACd,aAAa,EACb,YAAY,EACZ,YAAY,GACb,GAAG,gBAAgB,EAAkB,CAAC;IACvC,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAC3B,GAAG,EAAE,CAAC,SAAS,CAAC,GAAG,EAAE,SAAS,CAAC,EAC/B,CAAC,GAAG,EAAE,SAAS,CAAC,CACjB,CAAC;IAEF,OAAO;IACL,oEAAoE;IACpE,oEAAoE;IACpE,mEAAmE;IACnE,4BACY,oBAAoB,EAC9B,SAAS,EAAC,sGAAsG,aAE/G,aAAa,IAAI,CAChB,KAAC,kBAAkB,IACjB,SAAS,EAAC,QAAQ,EAClB,QAAQ,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,GACtC,CACH,EACD,KAAC,aAAa,CAAC,IAAI,IACjB,GAAG,EAAE,OAAO,eACF,WAAW,kBACP,OAAO,EACrB,SAAS,EAAE,EAAE,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,CAAC,KACnD,KAAK,GACT,EACD,YAAY,IAAI,CACf,KAAC,kBAAkB,IACjB,SAAS,EAAC,OAAO,EACjB,QAAQ,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,GACrC,CACH,IACG,CACP,CAAC;AACJ,CAAC;AAED,MAAM,QAAQ,GAAG,OAAO,CAAgC,YAAY,CAAC,CAAC;AAEtE,SAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EAC2C;IACnD,OAAO,CACL,KAAC,aAAa,CAAC,OAAO,iBACV,cAAc,EACxB,SAAS,EAAE,EAAE,CACX,ouBAAouB,EACpuB,oDAAoD,EACpD,+PAA+P,EAC/P,mKAAmK,EACnK,sYAAsY,EACtY,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,SAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EAC2C;IACnD,OAAO,CACL,KAAC,aAAa,CAAC,OAAO,iBACV,cAAc,EACxB,SAAS,EAAE,EAAE,CAAC,6BAA6B,EAAE,SAAS,CAAC,KACnD,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/src/components/ui/toast.d.ts

@@ -43,9 +43,10 @@ type ToastFn = {
 declare function Toaster({ position, dismissLabel }: ToasterProps): React.JSX.Element;
 /**
  * The callable used everywhere else — never sonner's own `toast` re-exported directly.
- * `options.duration` resolution uses `??`, not `||`: sonner treats a literal
- * `duration: 0` as falsy and silently falls back to its own ~4s default (verified in
- * source) — `??` is required so an explicit `0` isn't confused with "not passed".
+ * `options.duration` resolution (inside `toExternalToast`) uses `??`, not `||`: sonner
+ * treats a literal `duration: 0` as falsy and silently falls back to its own ~4s default
+ * (verified in source) — `??` is required so an explicit `0` isn't confused with "not
+ * passed".
  */
 declare const toast: ToastFn;
 export { Toaster, toast };

package/dist/src/components/ui/toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAuB/B,KAAK,aAAa,GACd,UAAU,GACV,WAAW,GACX,YAAY,GACZ,aAAa,GACb,cAAc,GACd,eAAe,CAAC;AAEpB,KAAK,YAAY,GAAG;IAClB,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,KAAK,WAAW,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC;AAE1D,KAAK,YAAY,GAAG;IAClB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,KAAK,mBAAmB,CAAC,CAAC,IAAI;IAC5B,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,OAAO,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAC1D,KAAK,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;CAChE,CAAC;AAEF,KAAK,OAAO,GAAG;IACb,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,EAAE,OAAO,CAAC,EAAE,YAAY,GAAG,MAAM,GAAG,MAAM,CAAC;IACpE,OAAO,EAAE,CACP,OAAO,EAAE,KAAK,CAAC,SAAS,EACxB,OAAO,CAAC,EAAE,YAAY,KACnB,MAAM,GAAG,MAAM,CAAC;IACrB,IAAI,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,EAAE,OAAO,CAAC,EAAE,YAAY,KAAK,MAAM,GAAG,MAAM,CAAC;IAC5E,OAAO,EAAE,CACP,OAAO,EAAE,KAAK,CAAC,SAAS,EACxB,OAAO,CAAC,EAAE,YAAY,KACnB,MAAM,GAAG,MAAM,CAAC;IACrB,KAAK,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,EAAE,OAAO,CAAC,EAAE,YAAY,KAAK,MAAM,GAAG,MAAM,CAAC;IAC7E,OAAO,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,mBAAmB,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAC3E,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;CACzC,CAAC;AAyMF;;;;;;;GAOG;AACH,iBAAS,OAAO,CAAC,EAAE,QAAsB,EAAE,YAAY,EAAE,EAAE,YAAY,qBAiBtE;AA+BD;;;;;GAKG;AACH,QAAA,MAAM,KAAK,EAAE,OAuCZ,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;AAC1B,YAAY,EACV,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,WAAW,EACX,mBAAmB,GACpB,CAAC"}
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAyB/B,KAAK,aAAa,GACd,UAAU,GACV,WAAW,GACX,YAAY,GACZ,aAAa,GACb,cAAc,GACd,eAAe,CAAC;AAEpB,KAAK,YAAY,GAAG;IAClB,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,KAAK,WAAW,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC;AAE1D,KAAK,YAAY,GAAG;IAClB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,KAAK,mBAAmB,CAAC,CAAC,IAAI;IAC5B,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,OAAO,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAC1D,KAAK,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;CAChE,CAAC;AAEF,KAAK,OAAO,GAAG;IACb,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,EAAE,OAAO,CAAC,EAAE,YAAY,GAAG,MAAM,GAAG,MAAM,CAAC;IACpE,OAAO,EAAE,CACP,OAAO,EAAE,KAAK,CAAC,SAAS,EACxB,OAAO,CAAC,EAAE,YAAY,KACnB,MAAM,GAAG,MAAM,CAAC;IACrB,IAAI,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,EAAE,OAAO,CAAC,EAAE,YAAY,KAAK,MAAM,GAAG,MAAM,CAAC;IAC5E,OAAO,EAAE,CACP,OAAO,EAAE,KAAK,CAAC,SAAS,EACxB,OAAO,CAAC,EAAE,YAAY,KACnB,MAAM,GAAG,MAAM,CAAC;IACrB,KAAK,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,EAAE,OAAO,CAAC,EAAE,YAAY,KAAK,MAAM,GAAG,MAAM,CAAC;IAC7E,OAAO,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,mBAAmB,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAC3E,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;CACzC,CAAC;AAiUF;;;;;;;GAOG;AACH,iBAAS,OAAO,CAAC,EAAE,QAAsB,EAAE,YAAY,EAAE,EAAE,YAAY,qBAiBtE;AAyID;;;;;;GAMG;AACH,QAAA,MAAM,KAAK,EAAE,OA4GZ,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;AAC1B,YAAY,EACV,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,WAAW,EACX,mBAAmB,GACpB,CAAC"}

package/dist/src/components/ui/toast.js

@@ -1,10 +1,12 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Toaster as SonnerToaster, toast as sonnerToast, } from "sonner";
 import { CheckCircle2, CircleAlert, Info, Loader2, TriangleAlert, X, } from "../../icons/lucide.js";
 import { cn } from "../../lib/utils.js";
 import { useC4Dictionary } from "../../lib/i18n/context.js";
+import { useIsTruncated } from "../../hooks/use-is-truncated.js";
 import { buttonVariants } from "./button.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
 import { typographyVariants } from "./typography.js";
 // ── Styling contract — neutral floating surface, icon-only kind color ──────
 //
@@ -101,18 +103,22 @@ const TOAST_CLASSNAMES = {
     // sibling, not the `~` general-sibling used for the icon/close fix above) matches
     // the actual DOM exactly: title and description are always immediate siblings
     // inside `[data-content]`, so this only reserves the gap when one is actually there.
-    // `line-clamp-2` — long titles truncate with an ellipsis past 2 lines instead of
-    // growing the card indefinitely (fixes #520; short titles are unaffected, this only
-    // engages once content exceeds the clamp). Consumers should still keep titles short
-    // (toast.specs.ts's antiPatterns) — this is a rendering backstop, not a substitute
-    // for writing toast copy that fits a transient, glanceable notification.
-    title: cn(typographyVariants({ variant: "label-md-strong" }), "line-clamp-2 [&:has(+[data-description])]:mb-1"),
+    // `line-clamp-2` used to live here, on sonner's own `[data-title]` wrapper div —
+    // moved onto `ToastTitleText`'s inner span instead (see below), which is what
+    // `useIsTruncated` needs a ref on to detect the clamp (scrollHeight > clientHeight)
+    // and reveal the full value via Tooltip on hover/focus (fixes #659 for the
+    // multi-line case; this div-level class list only carries type + spacing now).
+    // Consumers should still keep titles short (toast.specs.ts's antiPatterns) — the
+    // clamp+reveal is a backstop for when they don't, not a substitute for writing
+    // toast copy that fits a transient, glanceable notification.
+    title: cn(typographyVariants({ variant: "label-md-strong" }), "[&:has(+[data-description])]:mb-1"),
     // `text-neutral-foreground-subtle` decouples description color from the (now neutral)
     // container/title color — matches sonner's own native description color, a muted
     // gray distinct from the title, not inherited from the card.
-    // `line-clamp-4` — same rationale as the title's, with more room since descriptions
-    // are expected to carry more detail.
-    description: cn(typographyVariants({ variant: "label-md" }), "text-neutral-foreground-subtle line-clamp-4"),
+    // `line-clamp-4` — same rationale as the title's `line-clamp-2` above (moved onto
+    // `ToastDescriptionText`'s inner span for the same reason) — with more room since
+    // descriptions are expected to carry more detail.
+    description: cn(typographyVariants({ variant: "label-md" }), "text-neutral-foreground-subtle"),
     // `ml-auto` keeps the button against the trailing edge whether it shares the first
     // line or has wrapped onto its own. It keeps `buttonVariants`' base `shrink-0` and
     // `whitespace-nowrap`: with wrapping available, the label stays on one line at its
@@ -159,6 +165,38 @@ const TOAST_ICONS = {
     // (Loader2 + animate-spin), colored with a semantic token instead.
     loading: (_jsx(Loader2, { className: "h-4 w-4 animate-spin text-neutral-foreground-subtle", "aria-hidden": "true" })),
 };
+function ToastTitleText({ children, onRevealOpen, onRevealClose, }) {
+    const { ref, isTruncated, measure } = useIsTruncated();
+    React.useLayoutEffect(() => {
+        measure();
+    });
+    const span = (_jsx("span", { ref: ref, tabIndex: 0, onPointerEnter: measure, onFocus: () => {
+            measure();
+            if (isTruncated)
+                onRevealOpen?.();
+        }, onBlur: () => {
+            if (isTruncated)
+                onRevealClose?.();
+        }, className: "line-clamp-2 rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", children: children }));
+    // Mounted only when clipped — see nav-breadcrumb.tsx for why an
+    // unconditionally-mounted Tooltip is never the right default.
+    return isTruncated ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: span }), _jsx(TooltipContent, { children: children })] })) : (span);
+}
+function ToastDescriptionText({ children, onRevealOpen, onRevealClose, }) {
+    const { ref, isTruncated, measure } = useIsTruncated();
+    React.useLayoutEffect(() => {
+        measure();
+    });
+    const span = (_jsx("span", { ref: ref, tabIndex: 0, onPointerEnter: measure, onFocus: () => {
+            measure();
+            if (isTruncated)
+                onRevealOpen?.();
+        }, onBlur: () => {
+            if (isTruncated)
+                onRevealClose?.();
+        }, className: "line-clamp-4 rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", children: children }));
+    return isTruncated ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: span }), _jsx(TooltipContent, { children: children })] })) : (span);
+}
 // ── Toaster ──────────────────────────────────────────────────────────────────
 /**
  * The one-time host, mounted once at the application's true root (inside
@@ -179,10 +217,52 @@ function Toaster({ position = "top-right", dismissLabel }) {
         } }));
 }
 // ── toast ────────────────────────────────────────────────────────────────────
-function toExternalToast(options, defaultDuration) {
+// ── Focus-driven dismiss pause ──────────────────────────────────────────────
+//
+// Sonner pauses each toast's own auto-dismiss timer while the pointer is over its
+// stack, or while the stack has been expanded via its Alt+T hotkey (`expanded`/
+// `interacting`, set only by `onMouseEnter`/`onMouseMove`/`onPointerDown`/`onPointerUp`
+// on its own <ol> — verified in sonner@2.0.8's index.mjs, ~line 1190-1204) — but never
+// on focus. The <ol>'s own `onFocus` handler (~line 1182) only tracks focus-restoration
+// bookkeeping, never sets `expanded`/`interacting`. So a keyboard user who Tabs onto a
+// clamped title/description, opens its Tooltip reveal via focus, and starts reading,
+// gets no pause at all: the toast can vanish mid-read for a default-duration (5000ms)
+// toast — a WCAG 1.4.13 (Content on Hover or Focus) violation for exactly the users the
+// reveal above was built to help.
+//
+// `makeToast` below pauses each toast's OWN dismissal (via sonner's update-by-id path —
+// re-calling the same creating method with a matching `id` merges into the existing
+// toast rather than creating a new one) while its title/description has focus, and
+// resumes it on blur. Resuming always restarts the FULL original duration rather than
+// tracking exact remaining time — the simplest defensible choice, and also what sonner
+// itself does to any duration change: its `remainingTime.current = duration` effect
+// resets unconditionally whenever `duration` changes, so a full restart is not a special
+// case bolted on top, it's what an update naturally produces.
+//
+// The `id`, and the exact sonner method that created a toast, are threaded through
+// deliberately: sonner's own update-by-id merge sets `title` unconditionally from the
+// `message` argument (so it must be re-passed identically on every update, not omitted)
+// and sets `type` unconditionally from whichever public method handled the call (the
+// bare call always resets it to `undefined`) — so pausing/resuming a `success` toast
+// through the bare method would silently strip its icon back to neutral. Re-dispatching
+// through the exact same method avoids that. Passing the SAME already-constructed title
+// element back on every update (not a freshly created one) also matters: React bails out
+// of re-rendering a child subtree when the element reference itself is unchanged (same
+// type, same props object), which avoids remounting `ToastTitleText` — and thus avoids
+// losing focus, or worse, unmounting the very element mid-focus-event and retriggering
+// another focus/blur pair — verified live via Storybook + Playwright, see the dev
+// report / toast.specs.ts.
+let toastIdCounter = 0;
+function nextToastId() {
+    return `c4-toast-${++toastIdCounter}`;
+}
+function toExternalToast(options, defaultDuration, reveal) {
     const action = options?.action;
     return {
-        description: options?.description,
+        // Wrapped only when present — sonner conditionally renders `[data-description]`
+        // at all based on truthiness, and `:has([data-description])` selectors elsewhere
+        // in TOAST_CLASSNAMES key off that same presence (see the Styling contract).
+        description: options?.description ? (_jsx(ToastDescriptionText, { onRevealOpen: reveal.onRevealOpen, onRevealClose: reveal.onRevealClose, children: options.description })) : undefined,
         duration: options?.duration ?? defaultDuration,
         action: action
             ? {
@@ -202,27 +282,133 @@ function toExternalToast(options, defaultDuration) {
             : undefined,
     };
 }
+/**
+ * Builds and dispatches one toast, wiring its title/description with the
+ * focus-driven pause/resume above. `kind` must be the exact sonner method used to
+ * create it (`sonnerToast` itself for the untyped/default kind, or one of
+ * `.success`/`.info`/`.warning`/`.error`) — see the "Focus-driven dismiss pause"
+ * note for why re-dispatching through any other method would corrupt the toast's
+ * type/icon.
+ */
+function makeToast(kind, message, options, defaultDuration) {
+    const id = nextToastId();
+    const duration = options?.duration ?? defaultDuration;
+    // `pause`/`resume` reference `titleNode` before its own declaration below —
+    // safe because both only ever run later, from a focus/blur event, by which
+    // point `titleNode`'s initializer has long since run.
+    const pause = () => {
+        if (duration === Infinity)
+            return; // no auto-dismiss timer exists to pause
+        // Same guard as `resume` below: a focus event landing in the same animation
+        // frame as a `toast.dismiss(id)` call must not resurrect the toast the
+        // consumer just closed — sonner's `create()` un-dismisses a matching id
+        // otherwise (index.mjs ~181-194).
+        if (!sonnerToast.getToasts().some((t) => t.id === id))
+            return;
+        kind(titleNode, { id, duration: Infinity });
+    };
+    const resume = () => {
+        if (duration === Infinity)
+            return;
+        // A toast the user already dismissed (or that auto-closed) must not be
+        // resurrected by a stray blur — sonner's `create()` un-dismisses a matching
+        // id otherwise (index.mjs ~181-194).
+        if (!sonnerToast.getToasts().some((t) => t.id === id))
+            return;
+        kind(titleNode, { id, duration });
+    };
+    const titleNode = (_jsx(ToastTitleText, { onRevealOpen: pause, onRevealClose: resume, children: message }));
+    return kind(titleNode, {
+        ...toExternalToast(options, defaultDuration, {
+            onRevealOpen: pause,
+            onRevealClose: resume,
+        }),
+        id,
+    });
+}
 /**
  * The callable used everywhere else — never sonner's own `toast` re-exported directly.
- * `options.duration` resolution uses `??`, not `||`: sonner treats a literal
- * `duration: 0` as falsy and silently falls back to its own ~4s default (verified in
- * source) — `??` is required so an explicit `0` isn't confused with "not passed".
+ * `options.duration` resolution (inside `toExternalToast`) uses `??`, not `||`: sonner
+ * treats a literal `duration: 0` as falsy and silently falls back to its own ~4s default
+ * (verified in source) — `??` is required so an explicit `0` isn't confused with "not
+ * passed".
  */
-const toast = Object.assign((message, options) => sonnerToast(message, toExternalToast(options, 5000)), {
-    success: (message, options) => sonnerToast.success(message, toExternalToast(options, 5000)),
-    info: (message, options) => sonnerToast.info(message, toExternalToast(options, 5000)),
-    warning: (message, options) => sonnerToast.warning(message, toExternalToast(options, 5000)),
+const toast = Object.assign((message, options) => makeToast(sonnerToast, message, options, 5000), {
+    success: (message, options) => makeToast(sonnerToast.success, message, options, 5000),
+    info: (message, options) => makeToast(sonnerToast.info, message, options, 5000),
+    warning: (message, options) => makeToast(sonnerToast.warning, message, options, 5000),
     error: (message, options) => 
     // Default Infinity — errors persist until manually dismissed (toast.specs.ts).
-    sonnerToast.error(message, toExternalToast(options, Infinity)),
+    makeToast(sonnerToast.error, message, options, Infinity),
     promise: (promise, options) => {
         // Discard sonner's own return value (string|number & { unwrap }) — the spec's
         // contract is `=> void`; the loading → success/error swap is automatic and there
         // is no toast id to combine with toast.dismiss(id).
+        //
+        // loading/success/error are wrapped in `ToastTitleText` too — they render into
+        // the same `[data-title]` slot (styled by the same `classNames.title`, clamped
+        // the same way) as every other kind, so they get the same truncation reveal.
+        // `success`/`error` accept a plain value or a function of the resolved
+        // data/caught error (PromiseToastOptions<T>'s own shape) — resolve that first,
+        // then wrap the result; sonner is what actually calls this function with the
+        // real data/error at resolve/reject time.
+        //
+        // Pause/resume: the loading phase is `type: "loading"`, which sonner's own timer
+        // effect excludes from auto-dismissal entirely (no timer ever starts for it —
+        // index.mjs ~644) — nothing to pause there. Only the resolved *success* toast can
+        // auto-dismiss, so it alone is wired below, with its own explicit 5000ms duration
+        // (sonner's own internal default for a `.promise()` resolution is 4000ms, and
+        // unlike `toExternalToast`'s call sites, `resume` here has no other way to learn
+        // what to restore). The resolved *error* toast persists until manually dismissed —
+        // `duration: Infinity` is set EXPLICITLY below, matching `toast.error`'s own
+        // default: sonner's update merge only touches keys present in the returned
+        // object, so omitting `duration` here does not inherit Infinity from anywhere,
+        // it falls back to sonner's own internal ~4000ms default instead (this was a
+        // real, Validator-caught bug — the error toast was silently auto-dismissing with
+        // no pause protection, the exact gap this whole feature exists to close). With
+        // `duration: Infinity` actually set, no timer ever starts, so no pause/resume is
+        // wired for it either.
+        const id = nextToastId();
+        const successDuration = 5000;
+        let successTitleNode;
+        const pauseSuccess = () => {
+            // Same guard as `resumeSuccess` below — see `makeToast`'s `pause` for why.
+            if (!sonnerToast.getToasts().some((t) => t.id === id))
+                return;
+            sonnerToast.success(successTitleNode, { id, duration: Infinity });
+        };
+        const resumeSuccess = () => {
+            if (!sonnerToast.getToasts().some((t) => t.id === id))
+                return;
+            sonnerToast.success(successTitleNode, {
+                id,
+                duration: successDuration,
+            });
+        };
         sonnerToast.promise(promise, {
-            loading: options.loading,
-            success: options.success,
-            error: options.error,
+            id,
+            loading: _jsx(ToastTitleText, { children: options.loading }),
+            success: (data) => {
+                const content = typeof options.success === "function"
+                    ? options.success(data)
+                    : options.success;
+                successTitleNode = (_jsx(ToastTitleText, { onRevealOpen: pauseSuccess, onRevealClose: resumeSuccess, children: content }));
+                return { message: successTitleNode, duration: successDuration };
+            },
+            error: (error) => {
+                const content = typeof options.error === "function"
+                    ? options.error(error)
+                    : options.error;
+                // `duration: Infinity` must be explicit here — sonner's own merge only
+                // touches keys present in this return value, and with none supplied it
+                // falls back to its own internal ~4000ms default, not our Infinity intent.
+                // (Found by the Validator: this toast was silently auto-dismissing behind
+                // an unpaused timer, contradicting this file's own comment above.)
+                return {
+                    message: _jsx(ToastTitleText, { children: content }),
+                    duration: Infinity,
+                };
+            },
         });
     },
     dismiss: (id) => {