@dxos/react-ui 0.11.0 → 0.12.0-next-2be9f24c465d98f4bd186aa03ece788902e6c17a

package/dist/lib/chunk-parse-stack.mjs

@@ -9,7 +9,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { createKeyborg } from "keyborg";
 import { log } from "@dxos/log";
 import { addResources, i18n } from "@dxos/i18n";
-import { enUS } from "date-fns/locale";
+import { enUS } from "date-fns/locale/en-US";
 import { getDeep } from "@dxos/util";
 import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import { composeEventHandlers } from "@radix-ui/primitive";
@@ -342,14 +342,15 @@ var initialSafeArea = {
 };
 var useSafeArea = () => {
 	const [padding, setPadding] = useState(initialSafeArea);
-	useViewportResize(useCallback(() => {
+	const handleResize = useCallback(() => {
 		setPadding({
 			top: parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--safe-area-top")),
 			right: parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--safe-area-right")),
 			bottom: parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--safe-area-bottom")),
 			left: parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--safe-area-left"))
 		});
-	}, []));
+	}, []);
+	useViewportResize(handleResize);
 	return padding;
 };
 //#endregion
@@ -385,6 +386,26 @@ var avatarTheme = {
 	groupDescription
 };
 //#endregion
+//#region src/components/Banner/Banner.theme.ts
+var content$7 = ({ valence }, etc) => {
+	return mx("rounded-sm", messageValence(valence), etc);
+};
+var header$3 = (_, etc) => {
+	return mx("items-center", etc);
+};
+var title$3 = (_, etc) => {
+	return mx("col-start-2 overflow-hidden truncate", etc);
+};
+var body$2 = (_, etc) => {
+	return mx("col-start-2 flex flex-col first:font-medium pb-1.5", etc);
+};
+var bannerTheme = {
+	content: content$7,
+	header: header$3,
+	title: title$3,
+	body: body$2
+};
+//#endregion
 //#region src/components/Breadcrumb/Breadcrumb.theme.ts
 var root$18 = (_props, ...etc) => mx("flex items-center grow overflow-hidden", ...etc);
 var list = (_props, ...etc) => mx("flex items-center min-w-0 grow overflow-x-auto scrollbar-none", ...etc);
@@ -498,11 +519,11 @@ var withColumn = {
 };
 //#endregion
 //#region src/components/Card/Card.theme.ts
-var subgrid = "col-span-3 grid grid-cols-subgrid gap-1 items-center";
-var root$14 = ({ border, fullWidth }, ...etc) => mx("dx-card dx-card-surface dx-card-min-width dx-card-max-width min-h-(--dx-rail-item) p-1 gap-1", "group/card relative shrink-0 overflow-hidden", border && "border-2 border-separator rounded-md dx-focus-ring-group-y-indicator", fullWidth && "max-w-none!", ...etc);
-var header$3 = (_, ...etc) => mx("dx-card__header", subgrid, withColumn.placeContent(), ...etc);
-var title$3 = (_, ...etc) => mx("dx-card__title grow truncate", ...etc);
-var body$2 = (_, ...etc) => mx("dx-card__body contents", ...etc);
+var subgrid = "col-span-3 grid grid-cols-subgrid gap-x-1 items-center";
+var root$14 = ({ border, fullWidth }, ...etc) => mx("dx-card dx-card-surface min-h-(--dx-rail-item) p-1 gap-x-1", fullWidth ? "w-full min-w-0" : "dx-card-min-width dx-card-max-width", "group/card relative shrink-0 overflow-hidden", border && "border-2 border-separator rounded-md dx-focus-ring-group-y-indicator", ...etc);
+var header$2 = (_, ...etc) => mx("dx-card__header", subgrid, withColumn.placeContent(), ...etc);
+var title$2 = (_, ...etc) => mx("dx-card__title grow truncate", ...etc);
+var body$1 = (_, ...etc) => mx("dx-card__body contents", ...etc);
 var block$3 = (_, ...etc) => mx("dx-card__block", ...etc);
 var text$1 = ({ variant = "default", truncate: _truncate }, ...etc) => mx("dx-card__text items-center overflow-hidden", variant === "default" && "py-1", variant === "description" && "py-1.5 text-description", ...etc);
 var textSpan = ({ variant = "default", truncate }, ...etc) => mx(variant === "description" && "text-sm text-description line-clamp-3", truncate && "truncate", ...etc);
@@ -519,9 +540,9 @@ var section = (_, ...etc) => mx("dx-card__section", subgrid, ...etc);
 var sectionTitle = (_, ...etc) => mx("dx-card__section-title col-start-2 col-span-full py-2 text-xs text-description font-medium uppercase", ...etc);
 var cardTheme = {
 	"root": root$14,
-	"header": header$3,
-	"title": title$3,
-	"body": body$2,
+	"header": header$2,
+	"title": title$2,
+	"body": body$1,
 	"block": block$3,
 	"row": row$1,
 	"section": section,
@@ -539,8 +560,14 @@ var cardTheme = {
 };
 //#endregion
 //#region src/components/Column/Column.theme.ts
-var root$13 = (_, ...etc) => {
-	return mx("dx-column-root grid", ...etc);
+/** Row gap between the grid's rows; `sm` matches the Card default (gap-1). */
+var columnGapClasses = {
+	sm: "gap-y-1",
+	md: "gap-y-2",
+	lg: "gap-y-3"
+};
+var root$13 = ({ gap }, ...etc) => {
+	return mx("dx-column-root grid", gap && columnGapClasses[gap], ...etc);
 };
 /**
 * Three-column subgrid row spanning all 3 columns of the parent Column.Root grid.
@@ -579,11 +606,11 @@ var columnTheme = {
 //#endregion
 //#region src/components/DatePicker/DatePicker.theme.ts
 var trigger = ({ hasValue }, ...etc) => mx("inline-flex w-fit items-center gap-2 px-2 rounded-sm border border-separator", "dx-input-surface text-base-fg", "hover:bg-hover-surface focus-visible:outline-2 focus-visible:outline-primary-500", !hasValue && "text-description", ...etc);
-var content$7 = (_p, ...etc) => mx("flex flex-col gap-2", ...etc);
+var content$6 = (_p, ...etc) => mx("flex flex-col gap-2", ...etc);
 var timeField = (_p, ...etc) => mx("flex items-center gap-2 px-2 py-1", "[&_input]:bg-input-surface [&_input]:border [&_input]:border-separator", "[&_input]:rounded-sm [&_input]:px-2 [&_input]:py-1", ...etc);
 var datePickerTheme = {
 	trigger,
-	content: content$7,
+	content: content$6,
 	timeField
 };
 //#endregion
@@ -595,21 +622,21 @@ var sizeMap = {
 	xl: "md:max-w-[60rem]!"
 };
 var overlay$1 = (_props, ...etc) => mx("dx-dialog__overlay", ...etc);
-var content$6 = ({ inOverlayLayout, size = "md" }, ...etc) => {
+var content$5 = ({ inOverlayLayout, size = "md" }, ...etc) => {
 	return mx("@container", "dx-dialog__content dx-focus-ring dx-modal-surface py-4", !inOverlayLayout && "fixed z-50 top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%]", sizeMap[size], ...etc);
 };
-var header$2 = (_props, ...etc) => mx("dx-dialog__header flex pb-4 items-center justify-between", withColumn.center(), ...etc);
-var body$1 = (_props, ...etc) => mx("dx-dialog__body dx-expander gap-y-2", withColumn.propagate(), ...etc);
+var header$1 = (_props, ...etc) => mx("dx-dialog__header flex pb-4 items-center justify-between", withColumn.center(), ...etc);
+var body = (_props, ...etc) => mx("dx-dialog__body dx-expander gap-y-2", withColumn.propagate(), ...etc);
 var actionBar = (_props, ...etc) => mx("dx-dialog__actionbar flex items-center pt-4 gap-2", withColumn.center(), ...etc);
-var title$2 = ({ srOnly }, ...etc) => mx("dx-dialog__title", srOnly && "sr-only", ...etc);
+var title$1 = ({ srOnly }, ...etc) => mx("dx-dialog__title", srOnly && "sr-only", ...etc);
 var description$2 = ({ srOnly }, ...etc) => mx("dx-dialog__description", "text-description", srOnly && "sr-only", ...etc);
 var dialogTheme = {
 	overlay: overlay$1,
-	content: content$6,
-	header: header$2,
-	body: body$1,
+	content: content$5,
+	header: header$1,
+	body,
 	actionbar: actionBar,
-	title: title$2,
+	title: title$1,
 	description: description$2
 };
 //#endregion
@@ -722,17 +749,17 @@ var mainIntrinsicSize = "dx-main-intrinsic-size";
 //#endregion
 //#region src/components/Main/Main.theme.ts
 var padding = "dx-main-content-padding";
-var content$5 = ({ bounce }, ...etc) => mx(padding, mainPaddingTransitions, bounce && "dx-main-bounce-layout", "dx-base-surface", "dx-focus-ring-main", ...etc);
+var content$4 = ({ bounce }, ...etc) => mx(padding, mainPaddingTransitions, bounce && "dx-main-bounce-layout", "dx-base-surface", "dx-focus-ring-main", ...etc);
 var sidebar = (_, ...etc) => mx("dx-main-sidebar", "dx-focus-ring-inset-over-all", ...etc);
 var overlay = (_, ...etc) => mx("dx-main-overlay", ...etc);
 var mainTheme = {
-	content: content$5,
+	content: content$4,
 	sidebar,
 	overlay
 };
 //#endregion
 //#region src/components/Menu/Menu.theme.ts
-var content$4 = ({ elevation }, ...etc) => mx("dx-popover-surface w-48 md:w-56 border border-separator rounded-sm", surfaceZIndex({
+var content$3 = ({ elevation }, ...etc) => mx("dx-popover-surface w-48 md:w-56 border border-separator rounded-sm", surfaceZIndex({
 	elevation,
 	level: "menu"
 }), surfaceShadow({ elevation: "positioned" }), ...etc);
@@ -742,7 +769,7 @@ var separator$1 = (_props, ...etc) => mx("my-1 mx-2 h-px bg-separator", ...etc);
 var groupLabel = (_props, ...etc) => mx("text-description", "select-none px-(--dx-control-pad) py-1", ...etc);
 var arrow$3 = (_props, ...etc) => mx("fill-separator", ...etc);
 var menuTheme = {
-	content: content$4,
+	content: content$3,
 	viewport: viewport$4,
 	item: item$1,
 	separator: separator$1,
@@ -750,52 +777,28 @@ var menuTheme = {
 	arrow: arrow$3
 };
 //#endregion
-//#region src/components/Message/Message.theme.ts
-var root$10 = ({ valence }, etc) => {
-	return mx("p-1 rounded-sm", messageValence(valence), etc);
-};
-var content$3 = (_, etc) => {
-	return mx("col-span-full grid grid-cols-subgrid p-trim-md", etc);
-};
-var header$1 = (_, etc) => {
-	return mx("items-center", etc);
-};
-var title$1 = (_, etc) => {
-	return mx("col-start-2 overflow-hidden truncate", etc);
-};
-var body = (_, etc) => {
-	return mx("col-start-2 flex flex-col first:font-medium pb-1.5", etc);
-};
-var messageTheme = {
-	root: root$10,
-	content: content$3,
-	header: header$1,
-	title: title$1,
-	body
-};
-//#endregion
 //#region src/components/Panel/Panel.theme.ts
 var sizes = {
 	lg: "h-(--dx-topbar-size)",
 	md: "h-(--dx-toolbar-size)"
 };
-var root$9 = (_, ...etc) => mx("dx-container grid grid-cols-[100%] overflow-hidden", "[&>*:not([data-slot])]:[grid-area:content]", ...etc);
+var root$10 = (_, ...etc) => mx("dx-container grid grid-cols-[100%] overflow-hidden", "[&>*:not([data-slot])]:[grid-area:content]", ...etc);
 var toolbar = ({ size = "md" }, ...etc) => mx("[grid-area:toolbar]", "shrink-0", "dx-toolbar-surface shadow-sm relative z-[1]", sizes[size], ...etc);
 var content$2 = (_, ...etc) => mx("[grid-area:content] min-h-0", ...etc);
 var statusbar = (_, ...etc) => mx("[grid-area:statusbar]", "shrink-0", "dx-toolbar-surface", ...etc);
 var panelTheme = {
-	root: root$9,
+	root: root$10,
 	toolbar,
 	content: content$2,
 	statusbar
 };
 //#endregion
 //#region src/components/Popover/Popover.theme.ts
-var content$1 = ({ elevation }, ...etc) => mx("dx-popover-surface overflow-hidden border-2 border-separator rounded-sm", surfaceShadow({ elevation: "positioned" }), surfaceZIndex({
+var content$1 = ({ elevation }, ...etc) => mx("dx-popover-surface border-2 border-separator rounded-sm", surfaceShadow({ elevation: "positioned" }), surfaceZIndex({
 	elevation,
 	level: "menu"
 }), "dx-focus-ring", ...etc);
-var viewport$3 = ({ constrainBlock, constrainInline }, ...etc) => mx("grid grid-rows-[1fr] min-h-0 min-w-popover-min-width", (constrainBlock || constrainInline) && "overflow-hidden", constrainBlock && "max-h-(--radix-popover-content-available-height)", constrainBlock && "max-h-[min(var(--radix-popover-content-available-height),calc(100dvh-var(--spacing-screen-border)*2))]", constrainInline && "max-w-(--radix-popover-content-available-width)", ...etc);
+var viewport$3 = ({ constrainBlock, constrainInline }, ...etc) => mx("grid grid-rows-[1fr] min-h-0 min-w-popover-min-width overflow-hidden", constrainBlock && "max-h-(--radix-popover-content-available-height)", constrainBlock && "max-h-[min(var(--radix-popover-content-available-height),calc(100dvh-var(--spacing-screen-border)*2))]", constrainInline && "max-w-(--radix-popover-content-available-width)", ...etc);
 var arrow$2 = (_props, ...etc) => mx("fill-separator", ...etc);
 var popoverTheme = {
 	content: content$1,
@@ -803,25 +806,34 @@ var popoverTheme = {
 	arrow: arrow$2
 };
 //#endregion
+//#region src/components/Progress/Progress.theme.ts
+var root$9 = (_props, ...etc) => mx("block h-1 relative rounded-full overflow-hidden bg-separator", ...etc);
+var bar = ({ indeterminate, error }, ...etc) => mx("absolute inset-y-0 block rounded-full", error ? "bg-error-surface" : "bg-primary-surface", indeterminate ? "animate-progress-indeterminate" : "start-0 transition-[width] duration-200 ease-linear", ...etc);
+var progressTheme = {
+	root: root$9,
+	bar
+};
+//#endregion
 //#region src/components/ScrollArea/ScrollArea.theme.ts
-var root$8 = ({ orientation }, ...etc) => mx("dx-container", orientation === "vertical" && "group/scroll-v flex flex-col", orientation === "horizontal" && "group/scroll-h flex", orientation === "all" && "group/scroll-all flex flex-col", "[.dx-column-root_&]:col-span-full", ...etc);
+var root$8 = ({ orientation, native }, ...etc) => mx("dx-container", !native && "relative", orientation === "vertical" && "group/scroll-v flex flex-col", orientation === "horizontal" && "group/scroll-h flex", orientation === "all" && "group/scroll-all flex flex-col", "[.dx-column-root_&]:col-span-full", ...etc);
 /**
 * NOTE: The browser reserves space for scrollbars.
 */
-var viewport$2 = ({ orientation, centered, padding, snap, autoHide }, ...etc) => {
-	return mx("flex-1 min-h-0 w-full", withColumn.consumed(), orientation === "vertical" && "overflow-y-scroll", orientation === "horizontal" && "flex overflow-x-scroll overscroll-x-contain", orientation === "all" && "overflow-scroll", "[&::-webkit-scrollbar-corner]:bg-transparent", "[&::-webkit-scrollbar-track]:bg-transparent", "[&::-webkit-scrollbar-thumb]:rounded-none", "[&::-webkit-scrollbar]:w-[var(--scroll-width)] [&::-webkit-scrollbar]:h-[var(--scroll-width)]", (orientation === "vertical" || orientation === "all") && (padding ? [centered ? "pl-[var(--gutter,calc(var(--scroll-width)+var(--scroll-padding)))]" : "pl-[var(--gutter,0)]", "pr-[calc(var(--gutter,calc(var(--scroll-width)+var(--scroll-padding)))-var(--scroll-width))]"] : centered && "pl-[var(--scroll-width)]"), (orientation === "horizontal" || orientation === "all") && (padding ? [centered && "pt-[calc(var(--scroll-width)+var(--scroll-padding))]", "pb-[var(--scroll-padding)]"] : centered && "pt-[var(--scroll-width)]"), snap && [
+var viewport$2 = ({ orientation, centered, padding, snap, autoHide, native, scrollbars = true }, ...etc) => {
+	return mx("flex-1 min-h-0 w-full", withColumn.consumed(), orientation === "vertical" && "overflow-y-scroll", orientation === "horizontal" && "flex overflow-x-scroll overscroll-x-contain", orientation === "all" && "overflow-scroll", !native || !scrollbars ? ["[scrollbar-width:none]", "[&::-webkit-scrollbar]:hidden"] : [
+		"[&::-webkit-scrollbar-corner]:bg-transparent",
+		"[&::-webkit-scrollbar-track]:bg-transparent",
+		"[&::-webkit-scrollbar-thumb]:rounded-none",
+		"[&::-webkit-scrollbar]:w-[var(--scroll-width)] [&::-webkit-scrollbar]:h-[var(--scroll-width)]"
+	], (orientation === "vertical" || orientation === "all") && (padding ? !native ? [centered ? "pl-[var(--gutter,var(--scroll-strip))]" : "pl-[var(--gutter,0)]", "pr-[var(--gutter,var(--scroll-strip))]"] : [centered ? "pl-[var(--gutter,calc(var(--scroll-width)+var(--scroll-padding)))]" : "pl-[var(--gutter,0)]", "pr-[calc(var(--gutter,calc(var(--scroll-width)+var(--scroll-padding)))-var(--scroll-width))]"] : native && centered && "pl-[var(--scroll-width)]"), (orientation === "horizontal" || orientation === "all") && (padding ? !native ? [centered && "pt-[var(--gutter,var(--scroll-strip))]", "pb-[var(--gutter,var(--scroll-strip))]"] : [centered && "pt-[calc(var(--scroll-width)+var(--scroll-padding))]", "pb-[var(--scroll-padding)]"] : native && centered && "pt-[var(--scroll-width)]"), snap && [
 		orientation === "vertical" && "snap-y snap-mandatory",
 		orientation === "horizontal" && "snap-x snap-mandatory",
 		orientation === "all" && "snap-both snap-mandatory"
-	], autoHide ? [
+	], native && (autoHide ? [
 		orientation === "vertical" && "group-hover/scroll-v:[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
 		orientation === "horizontal" && "group-hover/scroll-h:[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
 		orientation === "all" && "group-hover/scroll-all:[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb"
-	] : [
-		orientation === "vertical" && "[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
-		orientation === "horizontal" && "[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
-		orientation === "all" && "[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb"
-	], ...etc);
+	] : ["[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb"]), ...etc);
 };
 var scrollAreaTheme = {
 	root: root$8,
@@ -883,12 +895,29 @@ var splitterTheme = {
 	handle
 };
 //#endregion
-//#region src/components/Status/Status.theme.ts
-var root$3 = ({ variant = "default" }, ...etc) => mx("h-1 relative rounded-full overflow-hidden", variant === "main-bottom" ? "w-full block" : "inline-block bg-base-surface", ...etc);
-var bar = ({ variant = "default", indeterminate }, ...etc) => mx("absolute inset-y-0 block rounded-full", variant === "main-bottom" ? "bg-composer-300" : "bg-un-accent", indeterminate ? "animate-progress-indeterminate" : "start-0", ...etc);
-var statusTheme = {
+//#region src/components/Stepper/Stepper.theme.ts
+/** Circles ahead of the run read as an outline; everything the run has reached is filled. */
+var stepFill = {
+	pending: "bg-base-surface border-separator",
+	active: "bg-primary-surface border-transparent",
+	complete: "bg-primary-surface border-transparent",
+	error: "bg-error-surface border-transparent"
+};
+var root$3 = (_props, ...etc) => mx("flex items-center w-full min-w-0", ...etc);
+var step = ({ state = "pending", selected, interactive, spinning }, ...etc) => mx("absolute border rounded-full transition-all duration-200", spinning ? "inset-[3px]" : "inset-0", interactive && "cursor-pointer", selected ? "bg-neutral-500 border-transparent" : stepFill[state], ...etc);
+var notch = (_props, ...etc) => mx("dx-fullscreen animate-spin text-primary-surface", ...etc);
+/**
+* The line between two stages. A separator-derived track rather than a surface: the stepper is drawn
+* ON a surface, so a track painted in one is invisible against its host.
+*/
+var connector = (_props, ...etc) => mx("relative grow min-w-1 rounded-full bg-separator", ...etc);
+var fill = ({ state }, ...etc) => mx("absolute inset-y-0 start-0 rounded-full", state === "error" ? "bg-error-surface" : "bg-primary-surface", ...etc);
+var stepperTheme = {
 	root: root$3,
-	bar
+	step,
+	notch,
+	connector,
+	fill
 };
 //#endregion
 //#region src/components/Tag/Tag.theme.ts
@@ -898,11 +927,11 @@ var tagTheme = { root: root$2 };
 //#region src/components/Toast/Toast.theme.ts
 var viewport = (_props, ...etc) => mx("z-40 fixed bottom-[calc(env(safe-area-inset-bottom)+1rem)]", "inset-start-[calc(env(safe-area-inset-left)+1rem)] inset-end-[calc(env(safe-area-inset-right)+1rem)]", "w-auto md:end-[calc(env(safe-area-inset-right)+4rem)] md:left-auto md:w-full md:max-w-sm", "rounded-md flex flex-col gap-2", ...etc);
 var root$1 = (_props, ...etc) => mx("dx-popover-surface rounded-md p-1", surfaceShadow({ elevation: "toast" }), "radix-state-open:animate-toast-slide-in-bottom md:radix-state-open:animate-toast-slide-in-right", "radix-state-closed:animate-toast-hide", "radix-swipe-end:animate-toast-swipe-out", "translate-x-radix-toast-swipe-move-x", "radix-swipe-cancel:translate-x-0 radix-swipe-cancel:duration-200 radix-swipe-cancel:ease-[ease]", "dx-focus-ring", ...etc);
-var grid = (_props, ...etc) => mx("gap-y-1 pbe-1", ...etc);
+var grid = (_props, ...etc) => mx("gap-y-1 pb-1", ...etc);
 var header = (_props, ...etc) => mx("items-center", ...etc);
 var title = (_props, ...etc) => mx("col-start-2 truncate font-medium", ...etc);
 var description = (_props, ...etc) => mx("col-start-2 overflow-hidden text-description", ...etc);
-var actions = (_props, ...etc) => mx("flex gap-2 mbs-1", ...etc);
+var actions = (_props, ...etc) => mx("flex gap-2 mt-1", ...etc);
 var toastTheme = {
 	viewport,
 	root: root$1,
@@ -957,16 +986,17 @@ var defaultTheme = {
 	input: inputTheme,
 	link: linkTheme,
 	main: mainTheme,
-	message: messageTheme,
+	banner: bannerTheme,
 	menu: menuTheme,
 	popover: popoverTheme,
+	progress: progressTheme,
 	scrollArea: scrollAreaTheme,
 	select: selectTheme,
 	separator: separatorTheme,
 	skeleton: skeletonTheme,
 	slider: sliderTheme,
 	splitter: splitterTheme,
-	status: statusTheme,
+	stepper: stepperTheme,
 	tag: tagTheme,
 	toast: toastTheme,
 	toolbar: toolbarTheme,
@@ -1005,6 +1035,7 @@ var usePopperScope = createPopperScope();
 var TOOLTIP_OPEN = "tooltip.open";
 var TOOLTIP_NAME = "Tooltip";
 var [TooltipContextProvider, useTooltipContext] = createTooltipContext(TOOLTIP_NAME);
+var [TooltipVolatileContextProvider, useTooltipVolatileContext] = createTooltipContext(TOOLTIP_NAME);
 //#endregion
 //#region src/components/Tooltip/Tooltip.tsx
 var TooltipProvider = (props) => {
@@ -1030,20 +1061,21 @@ var TooltipProvider = (props) => {
 	const contentId = useId$2();
 	const openTimerRef = useRef(0);
 	const wasOpenDelayedRef = useRef(false);
+	const handleOpenChange = useCallback((open) => {
+		if (open) {
+			window.clearTimeout(skipDelayTimerRef.current);
+			isOpenDelayedRef.current = false;
+			document.dispatchEvent(new CustomEvent(TOOLTIP_OPEN));
+		} else {
+			window.clearTimeout(skipDelayTimerRef.current);
+			skipDelayTimerRef.current = window.setTimeout(() => isOpenDelayedRef.current = true, skipDelayDuration);
+		}
+		onOpenChange?.(open);
+	}, [skipDelayDuration, onOpenChange]);
 	const [open = false, setOpen] = useControllableState({
 		prop: openProp,
 		defaultProp: defaultOpen,
-		onChange: useCallback((open) => {
-			if (open) {
-				window.clearTimeout(skipDelayTimerRef.current);
-				isOpenDelayedRef.current = false;
-				document.dispatchEvent(new CustomEvent(TOOLTIP_OPEN));
-			} else {
-				window.clearTimeout(skipDelayTimerRef.current);
-				skipDelayTimerRef.current = window.setTimeout(() => isOpenDelayedRef.current = true, skipDelayDuration);
-			}
-			onOpenChange?.(open);
-		}, [skipDelayDuration, onOpenChange])
+		onChange: handleOpenChange
 	});
 	const stateAttribute = useMemo(() => {
 		return open ? wasOpenDelayedRef.current ? "delayed-open" : "instant-open" : "closed";
@@ -1075,6 +1107,28 @@ var TooltipProvider = (props) => {
 			}
 		};
 	}, []);
+	const isOpenRef = useRef(open);
+	isOpenRef.current = open;
+	useEffect(() => {
+		if (!trigger) return;
+		const describedBy = trigger.getAttribute("aria-describedby");
+		trigger.setAttribute("data-state", stateAttribute);
+		if (open) {
+			const ids = new Set(describedBy?.split(/\s+/).filter(Boolean));
+			ids.add(contentId);
+			trigger.setAttribute("aria-describedby", [...ids].join(" "));
+		}
+		return () => {
+			trigger.setAttribute("data-state", "closed");
+			if (describedBy === null) trigger.removeAttribute("aria-describedby");
+			else trigger.setAttribute("aria-describedby", describedBy);
+		};
+	}, [
+		trigger,
+		open,
+		stateAttribute,
+		contentId
+	]);
 	const { tx } = useThemeContext();
 	const elevation = useElevationContext();
 	return /* @__PURE__ */ jsx(PopperPrimitive.Root, {
@@ -1082,9 +1136,7 @@ var TooltipProvider = (props) => {
 		children: /* @__PURE__ */ jsxs(TooltipContextProvider, {
 			scope: __scopeTooltip,
 			contentId,
-			open,
-			stateAttribute,
-			trigger,
+			isOpenRef,
 			onTriggerChange: handleTriggerChange,
 			onTriggerEnter: useCallback(() => {
 				if (isOpenDelayedRef.current) handleDelayedOpen();
@@ -1108,15 +1160,17 @@ var TooltipProvider = (props) => {
 			onPointerInTransitChange: useCallback((inTransit) => {
 				isPointerInTransitRef.current = inTransit;
 			}, []),
-			children: [
-				/* @__PURE__ */ jsxs(TooltipContent, {
+			children: [/* @__PURE__ */ jsxs(TooltipVolatileContextProvider, {
+				scope: __scopeTooltip,
+				open,
+				stateAttribute,
+				trigger,
+				children: [/* @__PURE__ */ jsxs(TooltipContent, {
 					side,
 					className: tx("tooltip.content", { elevation }),
 					children: [content, /* @__PURE__ */ jsx(TooltipArrow, { className: tx("tooltip.arrow") })]
-				}),
-				/* @__PURE__ */ jsx(TooltipVirtualTrigger, { virtualRef: triggerRef }),
-				children
-			]
+				}), /* @__PURE__ */ jsx(TooltipVirtualTrigger, { virtualRef: triggerRef })]
+			}), children]
 		})
 	});
 };
@@ -1142,8 +1196,7 @@ var TooltipTrigger = forwardRef((props, forwardedRef) => {
 		return () => document.removeEventListener("pointerup", handlePointerUp);
 	}, [handlePointerUp]);
 	return /* @__PURE__ */ jsx(Primitive.button, {
-		"aria-describedby": context.open ? context.contentId : void 0,
-		"data-state": context.stateAttribute,
+		"data-state": "closed",
 		...triggerProps,
 		ref: composedRefs,
 		onPointerMove: composeEventHandlers(props.onPointerMove, (event) => {
@@ -1161,7 +1214,7 @@ var TooltipTrigger = forwardRef((props, forwardedRef) => {
 			hasPointerMoveOpenedRef.current = false;
 		}),
 		onPointerDown: composeEventHandlers(props.onPointerDown, () => {
-			if (context.open) context.onClose();
+			if (context.isOpenRef.current) context.onClose();
 			isPointerDownRef.current = true;
 			document.addEventListener("pointerup", handlePointerUp, { once: true });
 		}),
@@ -1175,12 +1228,12 @@ var PORTAL_NAME = "Tooltip.Portal";
 var [PortalProvider, usePortalContext] = createTooltipContext(PORTAL_NAME, { forceMount: void 0 });
 var TooltipPortal = (props) => {
 	const { __scopeTooltip, forceMount, children, container } = props;
-	const context = useTooltipContext(PORTAL_NAME, __scopeTooltip);
+	const volatileContext = useTooltipVolatileContext(PORTAL_NAME, __scopeTooltip);
 	return /* @__PURE__ */ jsx(PortalProvider, {
 		scope: __scopeTooltip,
 		forceMount,
 		children: /* @__PURE__ */ jsx(Presence, {
-			present: forceMount || context.open,
+			present: forceMount || volatileContext.open,
 			children: /* @__PURE__ */ jsx(Portal, {
 				asChild: true,
 				container,
@@ -1195,8 +1248,9 @@ var TooltipContent = forwardRef((props, forwardedRef) => {
 	const portalContext = usePortalContext(CONTENT_NAME, props.__scopeTooltip);
 	const { forceMount = portalContext.forceMount, side = "top", ...contentProps } = props;
 	const context = useTooltipContext(CONTENT_NAME, props.__scopeTooltip);
+	const volatileContext = useTooltipVolatileContext(CONTENT_NAME, props.__scopeTooltip);
 	return /* @__PURE__ */ jsx(Presence, {
-		present: forceMount || context.open,
+		present: forceMount || volatileContext.open,
 		children: context.disableHoverableContent ? /* @__PURE__ */ jsx(TooltipContentImpl, {
 			side,
 			...contentProps,
@@ -1210,10 +1264,11 @@ var TooltipContent = forwardRef((props, forwardedRef) => {
 });
 var TooltipContentHoverable = forwardRef((props, forwardedRef) => {
 	const context = useTooltipContext(CONTENT_NAME, props.__scopeTooltip);
+	const { trigger } = useTooltipVolatileContext(CONTENT_NAME, props.__scopeTooltip);
 	const ref = useRef(null);
 	const composedRefs = useComposedRefs(forwardedRef, ref);
 	const [pointerGraceArea, setPointerGraceArea] = useState(null);
-	const { trigger, onClose } = context;
+	const { onClose } = context;
 	const content = ref.current;
 	const { onPointerInTransitChange } = context;
 	const handleRemoveGraceArea = useCallback(() => {
@@ -1287,6 +1342,7 @@ var [VisuallyHiddenContentContextProvider, useVisuallyHiddenContentContext] = cr
 var TooltipContentImpl = forwardRef((props, forwardedRef) => {
 	const { __scopeTooltip, children, "aria-label": ariaLabel, onEscapeKeyDown, onPointerDownOutside, ...contentProps } = props;
 	const context = useTooltipContext(CONTENT_NAME, __scopeTooltip);
+	const { stateAttribute, trigger } = useTooltipVolatileContext(CONTENT_NAME, __scopeTooltip);
 	const popperScope = usePopperScope(__scopeTooltip);
 	const { onClose } = context;
 	useEffect(() => {
@@ -1294,14 +1350,14 @@ var TooltipContentImpl = forwardRef((props, forwardedRef) => {
 		return () => document.removeEventListener(TOOLTIP_OPEN, onClose);
 	}, [onClose]);
 	useEffect(() => {
-		if (context.trigger) {
+		if (trigger) {
 			const handleScroll = (event) => {
-				if (event.target?.contains(context.trigger)) onClose();
+				if (event.target?.contains(trigger)) onClose();
 			};
 			window.addEventListener("scroll", handleScroll, { capture: true });
 			return () => window.removeEventListener("scroll", handleScroll, { capture: true });
 		}
-	}, [context.trigger, onClose]);
+	}, [trigger, onClose]);
 	return /* @__PURE__ */ jsx(DismissableLayer, {
 		asChild: true,
 		disableOutsidePointerEvents: false,
@@ -1310,7 +1366,7 @@ var TooltipContentImpl = forwardRef((props, forwardedRef) => {
 		onFocusOutside: (event) => event.preventDefault(),
 		onDismiss: onClose,
 		children: /* @__PURE__ */ jsxs(PopperPrimitive.Content, {
-			"data-state": context.stateAttribute,
+			"data-state": stateAttribute,
 			...popperScope,
 			...contentProps,
 			ref: forwardedRef,
@@ -1389,15 +1445,13 @@ var getPaddedExitPoints = (exitPoint, exitSide, padding = 5) => {
 				y: exitPoint.y + padding
 			});
 			break;
-		case "right":
-			paddedExitPoints.push({
-				x: exitPoint.x - padding,
-				y: exitPoint.y - padding
-			}, {
-				x: exitPoint.x - padding,
-				y: exitPoint.y + padding
-			});
-			break;
+		case "right": paddedExitPoints.push({
+			x: exitPoint.x - padding,
+			y: exitPoint.y - padding
+		}, {
+			x: exitPoint.x - padding,
+			y: exitPoint.y + padding
+		});
 	}
 	return paddedExitPoints;
 };
@@ -1561,6 +1615,6 @@ var parseCaptureOwnerStack = (stack) => {
 	}
 };
 //#endregion
-export { ElevationContext as $, iconTheme as A, bindTheme as B, messageTheme as C, mainPaddingTransitions as D, mainIntrinsicSize as E, withColumn as F, ThemeProvider as G, useSafeArea as H, iconButtonTheme as I, hasIosKeyboard as J, TranslationsContext as K, buttonTheme as L, dialogTheme as M, columnTheme as N, linkTheme as O, cardTheme as P, useIconRegistry as Q, breadcrumbTheme as R, panelTheme as S, mainTheme as T, useElevationContext as U, initialSafeArea as V, ThemeContext as W, getIconRegistry as X, IconRegistryProvider as Y, phosphorIconSource as Z, skeletonTheme as _, useTooltipContext as a, scrollAreaTheme as b, defaultTx as c, toolbarTheme as d, ElevationProvider as et, toastTheme as f, sliderTheme as g, splitterTheme as h, createTooltipScope as i, focusTheme as j, inputTheme as k, tooltipTheme as l, statusTheme as m, ErrorStack as n, DensityContext as nt, useThemeContext as o, tagTheme as p, useTranslation$1 as q, Tooltip as r, defaultTheme as s, parseCaptureOwnerStack as t, DensityProvider as tt, tooltipContent as u, separatorTheme as v, menuTheme as w, popoverTheme as x, selectTheme as y, avatarTheme as z };
+export { phosphorIconSource as $, iconTheme as A, bannerTheme as B, panelTheme as C, mainPaddingTransitions as D, mainIntrinsicSize as E, cardTheme as F, useElevationContext as G, bindTheme as H, withColumn as I, TranslationsContext as J, ThemeContext as K, iconButtonTheme as L, dialogTheme as M, columnGapClasses as N, linkTheme as O, columnTheme as P, getIconRegistry as Q, buttonTheme as R, popoverTheme as S, mainTheme as T, initialSafeArea as U, avatarTheme as V, useSafeArea as W, hasIosKeyboard as X, useTranslation$1 as Y, IconRegistryProvider as Z, skeletonTheme as _, useTooltipContext as a, scrollAreaTheme as b, defaultTx as c, toolbarTheme as d, useIconRegistry as et, toastTheme as f, sliderTheme as g, splitterTheme as h, createTooltipScope as i, DensityContext as it, focusTheme as j, inputTheme as k, tooltipTheme as l, stepperTheme as m, ErrorStack as n, ElevationProvider as nt, useThemeContext as o, tagTheme as p, ThemeProvider as q, Tooltip as r, DensityProvider as rt, defaultTheme as s, parseCaptureOwnerStack as t, ElevationContext as tt, tooltipContent as u, separatorTheme as v, menuTheme as w, progressTheme as x, selectTheme as y, breadcrumbTheme as z };
 
 //# sourceMappingURL=chunk-parse-stack.mjs.map