entasis 0.11.0 → 0.13.0

package/dist/components/Tooltip/Tooltip.svelte

@@ -7,13 +7,7 @@
 	import type { TooltipProps } from './tooltip.props.js';
 	import { tooltip } from './tooltip.attachment.svelte.js';
 
-	let {
-		trigger,
-		open = $bindable(),
-		defaultOpen = false,
-		onOpenChange,
-		...options
-	}: TooltipProps = $props();
+	let { trigger, open = $bindable(), defaultOpen = false, ...options }: TooltipProps = $props();
 
 	const theme = useTheme();
 	const openState = createBindableValue(
@@ -47,7 +41,8 @@
 	const surfaceTaken = $derived(theme.tooltip !== null && theme.tooltip.ref !== element);
 
 	// Hover and focus move the surface without asking, so mirror what it shows back into the
-	// controlled state. Only real surface changes are reported, never the caller's own request.
+	// controlled state. `onOpenChange` already ran, before the surface changed hands, in the
+	// primitive that made the change; the caller's own `open` is never echoed back to it.
 	let shown = false;
 	$effect(() => {
 		const next = displayed;
@@ -56,7 +51,6 @@
 		untrack(() => {
 			if (openState.value === next) return;
 			openState.value = next;
-			onOpenChange?.(next);
 		});
 	});
 
@@ -66,9 +60,7 @@
 		const ref = element;
 		theme.tooltip = { ...options, ref };
 		return () => {
-			if (theme.tooltip?.ref !== ref) return;
-			theme.tooltip = null;
-			theme.lastTooltipClosed = Date.now();
+			if (theme.tooltip?.ref === ref) theme.tooltip = null;
 		};
 	});
 </script>

package/dist/components/Tooltip/TooltipHost.svelte

@@ -1,7 +1,18 @@
 <script lang="ts">
+	import { untrack } from 'svelte';
+	import { transitionSize } from '../../attachments/transitionSize.js';
+	import { requestOpenChange, type OpenChangeDetails } from '../../utils/openChange.js';
 	import Popover from '../Popover/Popover.svelte';
 	import Slot from '../Slot/Slot.svelte';
 	import { useTheme } from '../Theme/theme.state.svelte.js';
+	import {
+		applyStateAttributes,
+		openStateAttributes,
+		placementAttributes,
+		transitionStatusAttributes
+	} from '../../utils/stateAttributes.js';
+	import type { PopoverApi } from '../Popover/popover.api.js';
+	import { reportTooltipContentHover } from './tooltip.surface.js';
 	import { useTooltipTheme, useTooltipMotion } from './tooltip.theme.js';
 
 	const theme = useTheme();
@@ -9,26 +20,107 @@
 	const surfaceId = `${id}-tooltip`;
 	theme.tooltipId = surfaceId;
 	let currentTooltip = $state(theme.tooltip);
+	// Whether the surface moved from one trigger to another without closing in between: it keeps
+	// its place, resizes to the new content and tells neither tooltip to animate in or out.
+	let handoff = $state(false);
+	let shownFor: HTMLElement | null = null;
+	// Whether the open transition of the tooltip now shown has ended. A handoff in the middle of it
+	// leaves the new tooltip's `onAfterOpen` to that transition's end, so it fires once.
+	let opened = false;
 
 	$effect.pre(() => {
-		if (theme.tooltip) currentTooltip = theme.tooltip;
+		const next = theme.tooltip;
+		untrack(() => {
+			const previous = currentTooltip;
+			const moved = !!next && !!shownFor && shownFor !== next.ref;
+			// The same trigger refreshing its entry (the `open` state seeding it again) changes nothing.
+			if (moved) handoff = true;
+			else if (!next || !shownFor) handoff = false;
+			if (next && !shownFor) opened = false;
+			shownFor = next?.ref ?? null;
+			// The pointer on the content of a tooltip that is gone is no longer on it.
+			if (previous && previous.ref !== next?.ref) reportTooltipContentHover(previous.ref, false);
+			// A handed-over tooltip plays no transition of its own, so its lifecycle ends and begins now,
+			// unless the one it replaces had not finished opening: then neither of them ever completed,
+			// and the open transition still running delivers the new tooltip's `onAfterOpen`.
+			if (moved && previous && opened) {
+				previous.onAfterClose?.();
+				next.onAfterOpen?.();
+			}
+		});
+		if (next) currentTooltip = next;
 	});
 
+	function handleAfterOpen() {
+		opened = true;
+		currentTooltip?.onAfterOpen?.();
+	}
+
 	function handleAfterClose() {
 		currentTooltip?.onAfterClose?.();
 		if (!theme.tooltip) currentTooltip = null;
 	}
 
-	function handleOpenChange(open: boolean) {
+	function handleOpenChange(open: boolean, details: OpenChangeDetails) {
 		if (open) return;
+		const shown = theme.tooltip;
+		if (!shown) return;
+		// A press on the trigger is the trigger's to judge: `closeOnClick` closes the tooltip with
+		// the `trigger-press` reason, and `false` leaves it open.
+		const target = details.event?.composedPath?.()[0];
+		if (
+			details.reason === 'outside-press' &&
+			target instanceof Node &&
+			shown.ref.contains(target)
+		) {
+			details.cancel();
+			return;
+		}
+		if (!requestOpenChange(shown.onOpenChange, false, details)) return;
 		theme.tooltip = null;
-		theme.lastTooltipClosed = Date.now();
 	}
+
+	// However the shared surface closes (pointer, focus, Escape, unmount), the hover warm-up
+	// window starts: the next tooltip, hover card or hover popover opens at once. A tooltip held
+	// open (`open`, keyboard focus) does not warm the group while it shows.
+	$effect(() => {
+		if (!theme.tooltip) return;
+		return () => theme.hoverIntent.markClosed();
+	});
 	const color = $derived(currentTooltip?.color ?? 'neutral');
 	const size = $derived(currentTooltip?.size ?? 'normal');
 	const variant = $derived(currentTooltip?.variant ?? 'solid');
+	const hoverable = $derived(currentTooltip?.hoverable !== false);
+	// The surface grows or shrinks to the content of the trigger it moved to.
+	const resizeWithContent = transitionSize({ axis: 'both', isActive: () => handoff });
 
 	const classes = $derived(useTooltipTheme(currentTooltip?.theme));
+	// The surface is what a tooltip's `class` and theme style, so it carries the panel's hooks:
+	// open state, transition phase and the side it landed on (see `tooltipDataAttributes`).
+	const surfaceAttributes = (popover: PopoverApi) => ({
+		...openStateAttributes(popover.isOpen),
+		...transitionStatusAttributes(popover.status),
+		...placementAttributes(
+			popover.placement
+				? { side: popover.placement.side, align: popover.placement.align ?? undefined }
+				: undefined,
+			{ anchorHidden: popover.placement?.anchorHidden }
+		)
+	});
+	// Written from here as well as by the template: Svelte pauses the effects of a block while its
+	// out-transition plays, so only an effect outside the surface reaches it while it fades out.
+	// Raw state: the entry holds a DOM node and is compared by identity when the surface unmounts.
+	let surface = $state.raw<{ node: HTMLElement; popover: PopoverApi } | null>(null);
+	const trackSurface = (popover: PopoverApi) => (node: HTMLElement) => {
+		const entry = { node, popover };
+		surface = entry;
+		return () => {
+			if (surface === entry) surface = null;
+		};
+	};
+	$effect(() => {
+		if (surface) applyStateAttributes(surface.node, surfaceAttributes(surface.popover));
+	});
 	// Own motion preset (ladder: registry → setTooltipTheme → theme.motion → transition
 	// prop), handed to the Popover as an already-resolved `{ in, out }`.
 	const resolveMotion = useTooltipMotion();
@@ -40,28 +132,57 @@
 	);
 </script>
 
+<!-- Content that ignores the pointer lets it through to the page: the positioning wrapper and
+     the surface both need to, since the wrapper is the box that hugs the surface. -->
 <Popover
 	{id}
-	open={!!theme.tooltip}
+	bind:open={() => !!theme.tooltip, () => {}}
 	ref={currentTooltip?.ref}
 	lockScroll={false}
+	tabBridge={false}
+	closeOnFocusOut={false}
 	position={currentTooltip?.position}
 	transition={tooltipTransition}
 	closeOnMouseLeave={false}
 	offset={currentTooltip?.offset}
-	onAfterOpen={currentTooltip?.onAfterOpen}
+	onAfterOpen={handleAfterOpen}
 	onAfterClose={handleAfterClose}
 	onOpenChange={handleOpenChange}
 	class="!w-fit !max-w-fit !bg-transparent !p-0 !shadow-none !ring-0"
+	{@attach (wrapper: HTMLElement) => {
+		if (hoverable) return;
+		wrapper.style.pointerEvents = 'none';
+		return () => {
+			wrapper.style.pointerEvents = '';
+		};
+	}}
 >
-	<div
-		id={surfaceId}
-		role="tooltip"
-		data-color={color}
-		data-size={size}
-		data-variant={variant}
-		class={classes.root({ color, size, variant, className: currentTooltip?.class })}
-	>
-		<Slot render={currentTooltip?.content} />
-	</div>
+	{#snippet children(popover: PopoverApi)}
+		<div
+			id={surfaceId}
+			role="tooltip"
+			data-color={color}
+			data-size={size}
+			data-variant={variant}
+			data-instant={handoff ? '' : undefined}
+			{...surfaceAttributes(popover)}
+			{@attach trackSurface(popover)}
+			class={classes.root({ color, size, variant, className: currentTooltip?.class })}
+			style:pointer-events={hoverable ? undefined : 'none'}
+			onmouseenter={(event) => {
+				if (currentTooltip) reportTooltipContentHover(currentTooltip.ref, true, event);
+			}}
+			onmouseleave={(event) => {
+				if (currentTooltip) reportTooltipContentHover(currentTooltip.ref, false, event);
+			}}
+		>
+			<!-- The surface keeps its minimum width, so its content is what grows and shrinks. -->
+			<span
+				class="inline-flex items-center justify-center gap-[inherit]"
+				{@attach resizeWithContent}
+			>
+				<Slot render={currentTooltip?.content} />
+			</span>
+		</div>
+	{/snippet}
 </Popover>

package/dist/components/Tooltip/index.d.ts

@@ -3,3 +3,4 @@ export { default as TooltipHost } from './TooltipHost.svelte';
 export type { TooltipProps, TooltipOptions, TooltipTrigger } from './tooltip.props.js';
 export { tooltipTheme, setTooltipTheme, useTooltipTheme, type TooltipTheme, type TooltipThemeProps } from './tooltip.theme.js';
 export { tooltip } from './tooltip.attachment.svelte.js';
+export { tooltipDataAttributes, tooltipCssVariables, type TooltipDataAttribute, type TooltipCssVariable } from './tooltip.attributes.js';

package/dist/components/Tooltip/index.js

@@ -2,3 +2,4 @@ export { default as Tooltip } from './Tooltip.svelte';
 export { default as TooltipHost } from './TooltipHost.svelte';
 export { tooltipTheme, setTooltipTheme, useTooltipTheme } from './tooltip.theme.js';
 export { tooltip } from './tooltip.attachment.svelte.js';
+export { tooltipDataAttributes, tooltipCssVariables } from './tooltip.attributes.js';

package/dist/components/Tooltip/tooltip.attachment.svelte.d.ts

@@ -1,2 +1,7 @@
 import type { TooltipOptions } from './tooltip.props.js';
+/**
+ * Least time, in milliseconds, a tooltip with hoverable content stays open after the pointer
+ * leaves its trigger, so the pointer can cross the gap to the content.
+ */
+export declare const TOOLTIP_CONTENT_GRACE = 100;
 export declare const tooltip: (props: TooltipOptions) => (ref: HTMLElement) => () => void;

package/dist/components/Tooltip/tooltip.attachment.svelte.js

@@ -1,41 +1,161 @@
+import { untrack } from 'svelte';
+import { on } from 'svelte/events';
 import { useTheme } from '../Theme/theme.state.svelte.js';
+import { getDeepActiveElement } from '../../utils/focus.js';
 import { useHoverAction } from '../../utils/useHoverAction.svelte.js';
-import { on } from 'svelte/events';
+import { isRestoringFocus } from '../../utils/useFocusScope.svelte.js';
+import { inputModality } from '../../utils/inputModality.js';
+import { requestTooltipChange, watchTooltipContentHover } from './tooltip.surface.js';
 const FOCUSABLE = 'a[href], button, input, select, textarea, summary, [tabindex], [contenteditable]:not([contenteditable="false"])';
+/**
+ * Least time, in milliseconds, a tooltip with hoverable content stays open after the pointer
+ * leaves its trigger, so the pointer can cross the gap to the content.
+ */
+export const TOOLTIP_CONTENT_GRACE = 100;
+// Follow the input kind from load on: a tooltip mounted by a tap (a drawer's items) must already
+// know that a tap came before the focus it receives.
+if (typeof document !== 'undefined')
+    inputModality(document);
+/** Whether the focus that just arrived shows a focus ring (keyboard focus, not a click or a tap). */
+const showsFocusRing = (target) => {
+    if (!(target instanceof Element))
+        return true;
+    // After a tap, focus a script moves (a drawer opening on its first item) is no keyboard focus,
+    // though Safari, which never focused the tapped button, shows it a ring.
+    if (inputModality(target.ownerDocument) === 'touch')
+        return false;
+    try {
+        return target.matches(':focus-visible');
+    }
+    catch {
+        // An engine without `:focus-visible` gets the tooltip on any focus, as it always did.
+        return true;
+    }
+};
 export const tooltip = (props) => {
     const theme = useTheme();
     let refElement = null;
-    const hoverAction = useHoverAction({
-        isActive: () => true,
-        onMouseEnter: () => {
-            if (refElement) {
-                theme.tooltip = { ...props, ref: refElement };
+    // A press closes the tooltip and keeps it closed until the pointer leaves or focus moves on.
+    let pressed = false;
+    // Focus that comes back with the window is not the user moving focus onto the trigger.
+    let windowReturning = false;
+    let overContent = false;
+    let hideTimer = null;
+    const clearHideTimer = () => {
+        if (hideTimer !== null)
+            clearTimeout(hideTimer);
+        hideTimer = null;
+    };
+    // A tooltip opened by hover closes when the pointer leaves, but `mouseleave` is not guaranteed:
+    // a trigger re-rendered, moved or removed under the pointer (a navigation that updates the
+    // active item of a rail, say) may never send one. While such a tooltip shows, every pointer move
+    // that lands on neither the trigger nor the tooltip's content closes it after the usual grace.
+    let offStrayPointer = null;
+    let strayTimer = null;
+    const clearStrayTimer = () => {
+        if (strayTimer !== null)
+            clearTimeout(strayTimer);
+        strayTimer = null;
+    };
+    const stopWatchingPointer = () => {
+        offStrayPointer?.();
+        offStrayPointer = null;
+        clearStrayTimer();
+    };
+    const isOnTooltip = (ref, target) => {
+        if (!(target instanceof Node))
+            return false;
+        if (ref.isConnected && ref.contains(target))
+            return true;
+        const surface = theme.tooltipId ? ref.ownerDocument.getElementById(theme.tooltipId) : null;
+        return props.hoverable !== false && !!surface?.contains(target);
+    };
+    const watchPointer = (ref) => {
+        if (offStrayPointer)
+            return;
+        offStrayPointer = on(ref.ownerDocument, 'pointermove', (event) => {
+            if (event.pointerType === 'touch')
+                return;
+            if (theme.tooltip?.ref !== ref) {
+                stopWatchingPointer();
+                return;
             }
-        },
-        onMouseLeave: () => {
-            if (theme.tooltip?.ref !== refElement)
+            const target = event.composedPath?.()[0] ?? event.target;
+            if (isOnTooltip(ref, target)) {
+                clearStrayTimer();
                 return;
-            theme.tooltip = null;
-            theme.lastTooltipClosed = Date.now();
-        },
-        get delay() {
-            const lastTooltipClosed = theme.lastTooltipClosed;
-            const now = Date.now();
-            if (lastTooltipClosed && now - lastTooltipClosed < (props.delay ?? 400)) {
-                return 0;
             }
-            return props.delay ?? 400;
+            if (strayTimer !== null)
+                return;
+            const closeDelay = Math.max(0, props.closeDelay ?? 0);
+            const delay = props.hoverable === false ? closeDelay : Math.max(closeDelay, TOOLTIP_CONTENT_GRACE);
+            strayTimer = setTimeout(() => {
+                strayTimer = null;
+                // The hover the trigger still believes in is stale; drop it so a later enter starts fresh.
+                hoverAction.cancel();
+                hide({ reason: 'trigger-hover', event, interaction: 'mouse' });
+            }, delay);
+        }, { capture: true, passive: true });
+    };
+    const show = (init) => {
+        const ref = refElement;
+        clearHideTimer();
+        if (!ref || props.disabled || pressed)
+            return;
+        if (requestTooltipChange(theme, { ...props, ref }, init) && init.interaction === 'mouse') {
+            watchPointer(ref);
         }
-    });
-    const show = (ref) => {
-        theme.tooltip = { ...props, ref };
     };
-    const hide = (ref) => {
-        if (theme.tooltip?.ref !== ref)
+    const hide = (init) => {
+        clearHideTimer();
+        stopWatchingPointer();
+        // The content goes away with the tooltip, without telling the trigger the pointer left it.
+        overContent = false;
+        const ref = refElement;
+        if (!ref || theme.tooltip?.ref !== ref)
             return;
-        theme.tooltip = null;
-        theme.lastTooltipClosed = Date.now();
+        requestTooltipChange(theme, null, init);
     };
+    // The pointer left the trigger or its content. Content that can be hovered keeps the tooltip
+    // open for a moment so the pointer can reach it; a re-entry or the next tooltip cancels or
+    // replaces the close, and the warm-up window for the next hover starts right now.
+    const scheduleHide = (init) => {
+        clearHideTimer();
+        const ref = refElement;
+        if (!ref || theme.tooltip?.ref !== ref)
+            return;
+        theme.hoverIntent.markClosed();
+        const closeDelay = Math.max(0, props.closeDelay ?? 0);
+        const delay = props.hoverable === false ? closeDelay : Math.max(closeDelay, TOOLTIP_CONTENT_GRACE);
+        if (delay === 0) {
+            hide(init);
+            return;
+        }
+        hideTimer = setTimeout(() => {
+            hideTimer = null;
+            if (overContent || hoverAction.isHovered)
+                return;
+            hide(init);
+        }, delay);
+    };
+    const hoverAction = useHoverAction({
+        isActive: () => !props.disabled,
+        onMouseEnter: (event) => {
+            show({ reason: 'trigger-hover', event, interaction: 'mouse' });
+        },
+        onMouseLeave: (event) => {
+            pressed = false;
+            scheduleHide({ reason: 'trigger-hover', event, interaction: 'mouse' });
+        },
+        get delay() {
+            return props.delay ?? 400;
+        },
+        // Right after another tooltip, hover card or hover popover, the next tooltip shows at once.
+        // TooltipHost reports the shared surface's closes to the group.
+        group: () => theme.hoverIntent,
+        // A tooltip often explains why its trigger is disabled.
+        skipDisabled: false
+    });
     return (ref) => {
         refElement = ref;
         // Keyboard users reach the tooltip by focusing its trigger, so an element the browser
@@ -43,9 +163,81 @@ export const tooltip = (props) => {
         if (!ref.matches(FOCUSABLE))
             ref.tabIndex = 0;
         const off = hoverAction.reference?.(ref);
-        // Keyboard users get the tooltip on focus; screen readers get it via aria-describedby.
-        const offFocus = on(ref, 'focusin', () => show(ref));
-        const offBlur = on(ref, 'focusout', () => hide(ref));
+        const press = (event) => {
+            if (props.closeOnClick === false)
+                return;
+            pressed = true;
+            hoverAction.cancel();
+            hide({ reason: 'trigger-press', event });
+        };
+        const win = ref.ownerDocument.defaultView;
+        // Follow the input kind of the trigger's document too (an iframe, a popup window).
+        inputModality(ref.ownerDocument);
+        let windowFocusTimer = null;
+        const offs = [
+            // A new hover on the trigger ends the wait to close and the press that closed it.
+            on(ref, 'mouseenter', () => {
+                clearHideTimer();
+            }),
+            on(ref, 'pointerenter', (event) => {
+                if (event.pointerType !== 'touch')
+                    pressed = false;
+            }),
+            on(ref, 'pointerdown', (event) => {
+                // A touch never opens a tooltip, so there is nothing to close, and the press that
+                // follows is not a pointer leaving.
+                if (event.pointerType === 'touch' || event.button !== 0)
+                    return;
+                press(event);
+            }),
+            // Enter or Space on a focused trigger: a click with no pointer behind it.
+            // A click from code, or from Enter in a form field, reaches a trigger nobody focused.
+            on(ref, 'click', (event) => {
+                if (event.detail === 0 && getDeepActiveElement(ref.ownerDocument) === ref)
+                    press(event);
+            }),
+            // Keyboard users get the tooltip on focus when the focus ring shows; a click, a tap, focus
+            // the page gave back (a closing dialog) or the window returning do not open it. Screen
+            // readers get the text through aria-describedby.
+            on(ref, 'focusin', (event) => {
+                if (windowReturning || isRestoringFocus() || !showsFocusRing(event.target))
+                    return;
+                show({ reason: 'trigger-focus', event, interaction: 'keyboard' });
+            }),
+            on(ref, 'focusout', (event) => {
+                pressed = false;
+                hide({ reason: 'trigger-focus', event, interaction: 'keyboard' });
+            }),
+            watchTooltipContentHover(ref, (inside, event) => {
+                overContent = inside;
+                if (inside)
+                    clearHideTimer();
+                else if (!hoverAction.isHovered)
+                    scheduleHide({ reason: 'trigger-hover', event, interaction: 'mouse' });
+            })
+        ];
+        if (win) {
+            offs.push(on(win, 'blur', () => {
+                if (getDeepActiveElement(ref.ownerDocument) === ref)
+                    windowReturning = true;
+            }), on(win, 'focus', () => {
+                // The trigger's own `focusin` for the return arrives around this event.
+                if (windowFocusTimer !== null)
+                    clearTimeout(windowFocusTimer);
+                windowFocusTimer = setTimeout(() => {
+                    windowFocusTimer = null;
+                    windowReturning = false;
+                });
+            }));
+        }
+        $effect(() => {
+            if (!props.disabled)
+                return;
+            untrack(() => {
+                pressed = false;
+                hide({ reason: 'imperative-action' });
+            });
+        });
         $effect(() => {
             const active = theme.tooltip?.ref === ref && theme.tooltipId;
             if (!active)
@@ -61,13 +253,14 @@ export const tooltip = (props) => {
         });
         return () => {
             off?.();
-            offFocus();
-            offBlur();
+            offs.forEach((stop) => stop());
+            clearHideTimer();
+            stopWatchingPointer();
+            if (windowFocusTimer !== null)
+                clearTimeout(windowFocusTimer);
             hoverAction.destroy();
-            if (theme.tooltip?.ref === ref) {
+            if (theme.tooltip?.ref === ref)
                 theme.tooltip = null;
-                theme.lastTooltipClosed = Date.now();
-            }
             if (refElement === ref)
                 refElement = null;
         };

package/dist/components/Tooltip/tooltip.attributes.d.ts

@@ -0,0 +1,32 @@
+/**
+ * The styling hooks a tooltip exposes. Attributes are presence attributes (`''` while the state
+ * holds, omitted otherwise) unless the description says they carry a value. The surface is the
+ * `role="tooltip"` element a tooltip's `class` and theme style.
+ */
+export declare const tooltipDataAttributes: {
+    readonly 'data-open': "On the surface: present while the tooltip shows.";
+    readonly 'data-closed': "On the surface: present while its exit transition plays.";
+    readonly 'data-entering': "On the surface: present while the enter transition plays.";
+    readonly 'data-exiting': "On the surface: present while the exit transition plays.";
+    readonly 'data-side': "On the surface: the side of the trigger it sits on after flipping, `top`, `right`, `bottom` or `left`.";
+    readonly 'data-align': "On the surface: `start`, `center` or `end`, how it lines up with the trigger.";
+    readonly 'data-anchor-hidden': "On the surface: present while the trigger is scrolled out of view.";
+    readonly 'data-instant': "On the surface: present while it moved straight from one trigger to another, which plays no transition.";
+    readonly 'data-color': "On the surface: the resolved `color`.";
+    readonly 'data-size': "On the surface: the resolved `size`.";
+    readonly 'data-variant': "On the surface: the resolved `variant`.";
+    readonly 'data-popup-open': "On the trigger: present while its tooltip shows.";
+    readonly 'data-popup-side': "On the trigger: the surface's `data-side` while it is placed.";
+};
+/** The name of a tooltip data attribute. */
+export type TooltipDataAttribute = keyof typeof tooltipDataAttributes;
+/** Written by the placement on the positioned wrapper and inherited by the surface. */
+export declare const tooltipCssVariables: {
+    readonly '--available-width': "The width in px the surface can take before it reaches the viewport edges, minus 20px.";
+    readonly '--available-height': "The room in px between the trigger and the viewport edge on the surface's side, minus 20px.";
+    readonly '--anchor-width': "The trigger's width in px, snapped to the device pixel grid.";
+    readonly '--anchor-height': "The trigger's height in px, snapped to the device pixel grid.";
+    readonly '--transform-origin': "The surface corner facing the trigger, the point it scales from.";
+};
+/** The name of a tooltip CSS variable. */
+export type TooltipCssVariable = keyof typeof tooltipCssVariables;

package/dist/components/Tooltip/tooltip.attributes.js

@@ -0,0 +1,28 @@
+/**
+ * The styling hooks a tooltip exposes. Attributes are presence attributes (`''` while the state
+ * holds, omitted otherwise) unless the description says they carry a value. The surface is the
+ * `role="tooltip"` element a tooltip's `class` and theme style.
+ */
+export const tooltipDataAttributes = {
+    'data-open': 'On the surface: present while the tooltip shows.',
+    'data-closed': 'On the surface: present while its exit transition plays.',
+    'data-entering': 'On the surface: present while the enter transition plays.',
+    'data-exiting': 'On the surface: present while the exit transition plays.',
+    'data-side': 'On the surface: the side of the trigger it sits on after flipping, `top`, `right`, `bottom` or `left`.',
+    'data-align': 'On the surface: `start`, `center` or `end`, how it lines up with the trigger.',
+    'data-anchor-hidden': 'On the surface: present while the trigger is scrolled out of view.',
+    'data-instant': 'On the surface: present while it moved straight from one trigger to another, which plays no transition.',
+    'data-color': 'On the surface: the resolved `color`.',
+    'data-size': 'On the surface: the resolved `size`.',
+    'data-variant': 'On the surface: the resolved `variant`.',
+    'data-popup-open': 'On the trigger: present while its tooltip shows.',
+    'data-popup-side': "On the trigger: the surface's `data-side` while it is placed."
+};
+/** Written by the placement on the positioned wrapper and inherited by the surface. */
+export const tooltipCssVariables = {
+    '--available-width': 'The width in px the surface can take before it reaches the viewport edges, minus 20px.',
+    '--available-height': "The room in px between the trigger and the viewport edge on the surface's side, minus 20px.",
+    '--anchor-width': "The trigger's width in px, snapped to the device pixel grid.",
+    '--anchor-height': "The trigger's height in px, snapped to the device pixel grid.",
+    '--transform-origin': 'The surface corner facing the trigger, the point it scales from.'
+};