@mystravil/hardpoint 0.0.0-stage → 0.2.0

package/dist/components/Toaster.svelte

@@ -0,0 +1,411 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	/** Attributes and `class` go to the toast box while one shows. */
+	export type ToasterProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+		/** The toast region's name, for landmark navigation (default "Notifications"). */
+		label?: string;
+		/** The close button's accessible name (default "Dismiss"). */
+		closeLabel?: string;
+	};
+</script>
+
+<script lang="ts">
+	import { Portal } from 'bits-ui';
+	import { onMount, untrack } from 'svelte';
+	import { prefersReducedMotion } from 'svelte/motion';
+	import type { TransitionConfig } from 'svelte/transition';
+	import { curve, duration } from '../motion/index.js';
+	import Button from './Button.svelte';
+	import { swipeDismiss, type SwipeDirection } from './internal/swipe-dismiss.js';
+	import { followVisualViewport } from './internal/visual-viewport.svelte.js';
+	import { toastSlot as slot, type ShownToast } from './toast.svelte.js';
+
+	let { label = 'Notifications', closeLabel = 'Dismiss', class: className, ...rest }: ToasterProps = $props();
+
+	/** How far the box rises as it enters and drops as it leaves (px). */
+	const RISE = 16;
+	/** How far below rest a replacement's short entrance starts (px). */
+	const REPLAY_RISE = 8;
+
+	// The first Toaster mounted renders the slot; another one renders
+	// nothing until the first unmounts.
+	const self = {};
+	onMount(() => slot.register(self));
+	const active = $derived(slot.renders(self));
+	const shown = $derived(active ? slot.current : null);
+
+	let box = $state<HTMLElement | null>(null);
+	// Where focus was before it entered the toast, to give it back.
+	let origin: HTMLElement | null = null;
+	// The way a swipe sent the box off, until it is gone or back at rest.
+	let swiped: SwipeDirection | null = null;
+	// Svelte's transition on the box, from its start event to its end.
+	let transit: 'in' | 'out' | null = null;
+	// The id shown before the last change, and the replacement's entrance.
+	let lastId: number | null = null;
+	let replay: Animation | null = null;
+
+	// Above the on-screen keyboard (internal/visual-viewport.svelte.ts): while
+	// it shortens the visual viewport, the toast stands on that edge instead.
+	const viewport = followVisualViewport(
+		() => shown !== null,
+		() => null
+	);
+
+	// A hidden page holds the timer, so a toast is never used up unseen.
+	$effect(() => {
+		if (!active) return;
+		const sync = () => (document.hidden ? slot.hold('hidden') : slot.release('hidden'));
+		untrack(sync);
+		document.addEventListener('visibilitychange', sync);
+		return () => {
+			document.removeEventListener('visibilitychange', sync);
+			untrack(() => {
+				slot.release('hidden');
+				slot.release('pointer');
+				slot.release('focus');
+			});
+		};
+	});
+
+	// Before the box changes: focus on a part that goes away (the whole box,
+	// or the action when the next toast has none) returns to where it came
+	// from. A box that goes away under a resting pointer or with focus gets
+	// no leave event, so its holds end here.
+	$effect.pre(() => {
+		const next = shown;
+		untrack(() => {
+			const focused = document.activeElement;
+			if (
+				box &&
+				focused &&
+				box.contains(focused) &&
+				(!next || (focused.matches('.hp-toaster-action') && !next.action))
+			) {
+				giveFocusBack();
+			}
+			if (!next && box) {
+				slot.release('pointer');
+				slot.release('focus');
+			}
+		});
+	});
+
+	// After the box changed: a toast that replaces the one on screen replays
+	// a short entrance. While Svelte's transition moves the box (entering,
+	// or leaving and reversed by this toast), the new text rides it.
+	$effect(() => {
+		const id = shown?.id ?? null;
+		untrack(() => {
+			const replaced = id !== null && lastId !== null && id !== lastId;
+			lastId = id;
+			if (replaced && box && !transit) replayEntrance(box);
+		});
+	});
+
+	/**
+	 * The replacement's entrance: from 8px down and transparent to rest over
+	 * --dur-pop on --settle, both read from the box. One that arrives during
+	 * it starts again from where the box is. Reduced motion: opacity only.
+	 */
+	function replayEntrance(node: HTMLElement) {
+		const ms = duration(node, '--dur-pop');
+		if (ms <= 0) return;
+		const moves = !prefersReducedMotion.current;
+		const now = getComputedStyle(node);
+		const running = replay?.playState === 'running';
+		const from: Keyframe = { opacity: running ? now.opacity : 0 };
+		if (moves) from.transform = running ? now.transform : `translateY(${REPLAY_RISE}px)`;
+		const settle = now.getPropertyValue('--settle').trim();
+		replay?.cancel();
+		replay = node.animate([from, moves ? { opacity: 1, transform: 'none' } : { opacity: 1 }], {
+			duration: ms,
+			easing: CSS.supports('transition-timing-function', settle) ? settle : 'ease-out'
+		});
+	}
+
+	/**
+	 * Showing and dismissing, at the sheet timing read from the box
+	 * (--dur-sheet in, --dur-sheet-exit out, on --settle): a 16px rise with
+	 * a fade, and a 16px drop with a fade. After a swipe the box leaves the
+	 * way the finger went, by its own size, from where the finger let go; a
+	 * toast sent during that exit brings it back the same way. Reduced
+	 * motion: a fade in place.
+	 */
+	function motion(node: Element) {
+		return ({ direction }: { direction?: 'in' | 'out' } = {}): TransitionConfig => {
+			const way = swiped;
+			const path = (u: number) =>
+				way === 'left' || way === 'right'
+					? `translateX(${(way === 'left' ? -u : u) * 100}%)`
+					: way === 'down'
+						? `translateY(${u * 100}%)`
+						: `translateY(${u * RISE}px)`;
+			return {
+				duration: duration(node, direction === 'out' ? '--dur-sheet-exit' : '--dur-sheet'),
+				easing: curve(node),
+				css: prefersReducedMotion.current
+					? (t) => `opacity: ${t}`
+					: (t, u) => `opacity: ${t}; transform: ${path(u)}`
+			};
+		};
+	}
+
+	function giveFocusBack() {
+		const focused = document.activeElement;
+		if (!box || !(focused instanceof HTMLElement) || !box.contains(focused)) return;
+		if (origin?.isConnected) origin.focus({ preventScroll: true });
+		else focused.blur();
+		origin = null;
+	}
+
+	// F8 moves focus to the action, or to the close button when there is none.
+	function jump(e: KeyboardEvent) {
+		if (e.key !== 'F8' || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey || !box) return;
+		e.preventDefault();
+		box.querySelector<HTMLElement>('.hp-toaster-action, .hp-toaster-close')?.focus();
+	}
+
+	// The close button, Escape, a swipe and the action: focus inside goes
+	// back to where it came from, and the box leaves.
+	function dismiss(toast: ShownToast) {
+		giveFocusBack();
+		slot.dismiss(toast.id);
+	}
+
+	function run(toast: ShownToast) {
+		dismiss(toast);
+		toast.action?.onclick();
+	}
+
+	function swipeAway(way: SwipeDirection) {
+		if (!shown) return;
+		swiped = way;
+		dismiss(shown);
+	}
+
+	function escape(e: KeyboardEvent) {
+		if (e.key !== 'Escape' || !shown) return;
+		// Escape here belongs to the toast, not to a dialog or menu under it.
+		e.stopPropagation();
+		dismiss(shown);
+	}
+
+	function focusIn(e: FocusEvent) {
+		// An open dialog's focus trap may already have pulled focus back.
+		if (!box?.contains(document.activeElement)) return;
+		const from = e.relatedTarget;
+		if (!(from instanceof Node) || !box.contains(from)) origin = from instanceof HTMLElement ? from : null;
+		slot.hold('focus');
+	}
+
+	function focusOut(e: FocusEvent) {
+		const to = e.relatedTarget;
+		if (to instanceof Node && box?.contains(to)) return;
+		slot.release('focus');
+	}
+
+	// A press keeps focus where it is, so a field keeps the on-screen
+	// keyboard up, and it is not a press outside an open dialog, popover or
+	// menu, which would close it. The action's and close button's clicks
+	// still run.
+	function press(e: PointerEvent) {
+		e.preventDefault();
+		e.stopPropagation();
+	}
+
+	// A pointer over the box holds the timer. On touch the finger is over it
+	// from touchdown to lift, so a drag holds it too.
+	const enter = () => slot.hold('pointer');
+	const leave = () => slot.release('pointer');
+
+	function introStart() {
+		transit = 'in';
+		// A toast sent during a swipe's exit brings the box back on the
+		// swipe's path; the finger's offset springs back with it.
+		if (swiped && box) {
+			box.style.transition = prefersReducedMotion.current ? '' : 'translate var(--dur-sheet) var(--settle)';
+			box.style.translate = '';
+		}
+	}
+	const outroStart = () => (transit = 'out');
+	function atRest() {
+		transit = null;
+		swiped = null;
+	}
+
+	// On the box itself, not delegated, so a stopped press or Escape never
+	// reaches Bits UI's listeners on the document.
+	function listen(node: HTMLElement) {
+		// A new box carries nothing over from one that left mid-transition.
+		atRest();
+		replay = null;
+		node.addEventListener('pointerdown', press);
+		node.addEventListener('pointerenter', enter);
+		node.addEventListener('pointerleave', leave);
+		node.addEventListener('focusin', focusIn);
+		node.addEventListener('focusout', focusOut);
+		node.addEventListener('keydown', escape);
+		node.addEventListener('introstart', introStart);
+		node.addEventListener('introend', atRest);
+		node.addEventListener('outrostart', outroStart);
+		node.addEventListener('outroend', atRest);
+		return () => {
+			node.removeEventListener('pointerdown', press);
+			node.removeEventListener('pointerenter', enter);
+			node.removeEventListener('pointerleave', leave);
+			node.removeEventListener('focusin', focusIn);
+			node.removeEventListener('focusout', focusOut);
+			node.removeEventListener('keydown', escape);
+			node.removeEventListener('introstart', introStart);
+			node.removeEventListener('introend', atRest);
+			node.removeEventListener('outrostart', outroStart);
+			node.removeEventListener('outroend', atRest);
+		};
+	}
+</script>
+
+<!--
+	The one toast, at the bottom centre over everything but tooltips. It
+	rises 16px with a fade over --dur-sheet and drops 16px with a fade over
+	--dur-sheet-exit (reduced motion fades only). A new toast replaces the
+	text in place: the box keeps its place, changes size at once and replays
+	a short entrance (8px over --dur-pop); a toast sent while the box leaves
+	takes it back instead.
+
+	It dismisses on its timer, the close button at its end, Escape (with
+	focus inside), running the action, and on touch a swipe left, right or
+	down (internal/swipe-dismiss.ts). After a swipe it leaves the way the
+	finger went.
+
+	Screen readers hear each message from a visually hidden role="status"
+	line that stays mounted. Each toast is a new node in it, so the same
+	message twice is announced twice. The box is not a live region and never
+	takes focus by itself: it is a region landmark named by `label`, last in
+	the page. F8 moves focus to the action, or to the close button when
+	there is none; Escape, the close button and the action dismiss it and
+	give focus back. The timer waits while a pointer or finger is on the
+	box, while focus is inside it and while the page is hidden.
+-->
+<svelte:window onkeydown={jump} />
+
+{#if active}
+	<Portal>
+		<p class="hp-visually-hidden hp-toaster-status" role="status">
+			{#if shown}{#key shown.id}<span>{shown.message}</span>{/key}{/if}
+		</p>
+		{#if shown}
+			{@const lifted = viewport.current}
+			<section
+				bind:this={box}
+				{...rest}
+				class={['hp-toaster', className]}
+				aria-label={label}
+				aria-keyshortcuts="F8"
+				data-action={shown.action ? '' : undefined}
+				data-lifted={lifted ? '' : undefined}
+				style:bottom={lifted ? `calc(100% - ${lifted.bottom}px + var(--gutter))` : undefined}
+				{@attach listen}
+				{@attach swipeDismiss(swipeAway, { direction: ['left', 'right', 'down'] })}
+				transition:motion
+			>
+				<p class="hp-toaster-message">{shown.message}</p>
+				{#if shown.action}
+					<Button variant="tertiary" class="hp-toaster-action" onclick={() => shown && run(shown)}>
+						{shown.action.label}
+					</Button>
+				{/if}
+				<Button
+					variant="tertiary"
+					icon
+					class="hp-toaster-close"
+					aria-label={closeLabel}
+					onclick={() => shown && dismiss(shown)}
+				>
+					<svg
+						viewBox="0 0 16 16"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="1.5"
+						stroke-linecap="square"
+						aria-hidden="true"
+					>
+						<path d="M3 3l10 10M13 3L3 13" />
+					</svg>
+				</Button>
+			</section>
+		{/if}
+	</Portal>
+{/if}
+
+<style>
+	/* The Tooltip's box at the bottom centre: black, the control boundary,
+	   square. As wide as its text up to --toast-width, 30rem unless set (an
+	   app sets it with a class on the Toaster and a rule in its stylesheet;
+	   the default is the var() fallback, so any rule wins whatever its
+	   specificity), inside the page gutters and the safe areas, so it never
+	   meets a screen edge. Bits UI sets
+	   pointer-events: none on <body> while a dialog or a list is open; the
+	   toast takes presses anyway. A drag along either axis is the swipe's,
+	   so it never scrolls the page under the toast; pinch zoom stays the
+	   browser's. */
+	.hp-toaster {
+		position: fixed;
+		right: calc(var(--gutter) + env(safe-area-inset-right));
+		bottom: calc(var(--gutter) + env(safe-area-inset-bottom));
+		left: calc(var(--gutter) + env(safe-area-inset-left));
+		z-index: var(--layer-toast);
+		display: flex;
+		align-items: center;
+		box-sizing: border-box;
+		width: fit-content;
+		max-width: var(--toast-width, 30rem);
+		margin: 0 auto;
+		border: 1px solid var(--border-control);
+		background: var(--canvas);
+		color: var(--text);
+		font-family: var(--sans);
+		font-size: var(--type-body);
+		line-height: 24px;
+		pointer-events: auto;
+		touch-action: pinch-zoom;
+	}
+
+	/* Over AppShell's bottom bar (compact widths, data-bar), which is
+	   --header-height high above the bottom safe area. While the on-screen
+	   keyboard is up, the inline bottom wins: the bar is under the keyboard. */
+	@media (max-width: 599px) {
+		:global(:where(html:has(.hp-app-shell[data-bar]))) .hp-toaster {
+			bottom: calc(var(--header-height) + var(--gutter) + env(safe-area-inset-bottom));
+		}
+	}
+
+	/* 16px where a coarse pointer reads it, the dense 14px on fine pointers. */
+	@media (pointer: fine) {
+		.hp-toaster {
+			font-size: var(--type-dense);
+			line-height: 20px;
+		}
+	}
+
+	/* One control high on one line, so a box with an action and one without
+	   match; longer text wraps, never truncates. */
+	.hp-toaster-message {
+		display: flex;
+		flex: 1 1 auto;
+		align-items: center;
+		min-width: 0;
+		min-height: var(--control-height);
+		padding: var(--space-2) var(--space-3);
+		overflow-wrap: anywhere;
+	}
+
+	/* At the end: the action, a text button with its own padding, then the
+	   close button, Dialog's × as a square tertiary icon button
+	   (--control-height: 36px fine, 44px coarse). */
+	.hp-toaster :global(.hp-toaster-action),
+	.hp-toaster :global(.hp-toaster-close) {
+		flex: none;
+	}
+</style>

package/dist/components/Toaster.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'svelte/elements';
+/** Attributes and `class` go to the toast box while one shows. */
+export type ToasterProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+    /** The toast region's name, for landmark navigation (default "Notifications"). */
+    label?: string;
+    /** The close button's accessible name (default "Dismiss"). */
+    closeLabel?: string;
+};
+declare const Toaster: import("svelte").Component<ToasterProps, {}, "">;
+type Toaster = ReturnType<typeof Toaster>;
+export default Toaster;

package/dist/components/Tooltip.svelte

@@ -0,0 +1,200 @@
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+	import { Tooltip as BitsTooltip } from 'bits-ui';
+
+	export type TooltipTriggerSnippetProps = {
+		/**
+		 * Spread onto the control the tooltip belongs to. Its own handlers may
+		 * come before or after. A control with its own description writes
+		 * `aria-describedby={[props['aria-describedby'], ownId].filter(Boolean).join(' ')}`
+		 * after the spread, so it keeps both.
+		 */
+		props: Record<string, unknown>;
+	};
+
+	/**
+	 * Attributes and handlers not listed here go to the tooltip element (Bits
+	 * UI `Tooltip.Content`), among them `side` (default `top`), `align`
+	 * (default `center`), `sideOffset` (default 8) and `onEscapeKeydown`.
+	 */
+	export type TooltipProps = Omit<BitsTooltip.ContentProps, 'child' | 'children' | 'forceMount' | 'ref'> & {
+		open?: boolean;
+		/**
+		 * The tooltip, as written. It never opens on touch, so it is never the
+		 * only path to its text: the control shows the same text, or carries it
+		 * in `aria-label`.
+		 */
+		text: string;
+		/** The control the tooltip belongs to: spread `props` onto it. */
+		trigger: Snippet<[TooltipTriggerSnippetProps]>;
+		/**
+		 * Milliseconds a pointer rests on the trigger before the tooltip opens
+		 * (default 700, Bits UI's, or the TooltipGroup's). Keyboard focus opens
+		 * it at once.
+		 */
+		delayDuration?: number;
+		/** The tooltip element. */
+		ref?: HTMLElement | null;
+	};
+
+	// Bits UI keeps one tooltip open at a time per provider, and each Tooltip
+	// outside a TooltipGroup has its own provider, so the rule spans them here:
+	// the close function of the open tooltip, if any.
+	let closeOpen: (() => void) | null = null;
+</script>
+
+<script lang="ts">
+	import { createAttachmentKey } from 'svelte/attachments';
+	import { pop } from '../motion/index.js';
+	import { inTooltipGroup } from './TooltipGroup.svelte';
+
+	let {
+		open = $bindable(false),
+		text,
+		trigger,
+		delayDuration,
+		ref = $bindable(null),
+		class: className,
+		...rest
+	}: TooltipProps = $props();
+
+	const listen = createAttachmentKey();
+	const capture = createAttachmentKey();
+
+	// Inside a TooltipGroup the group's provider is shared, so the next
+	// tooltip in the row skips the delay; outside one, the tooltip has its own.
+	const grouped = inTooltipGroup();
+
+	// Opening this tooltip closes any other one, for example one a resting
+	// pointer opened when keyboard focus opens this.
+	const close = () => {
+		open = false;
+	};
+	$effect(() => {
+		if (!open) return;
+		if (closeOpen !== close) closeOpen?.();
+		closeOpen = close;
+		return () => {
+			if (closeOpen === close) closeOpen = null;
+		};
+	});
+
+	// The control, kept to compare its name with the text.
+	let control = $state<Element | null>(null);
+	const captureControl = (node: Element) => {
+		control = node;
+	};
+
+	// The usual tooltip repeats the control's name: an icon button's
+	// aria-label, or the whole of a shortened name. Describing the control by
+	// the same text would make screen readers read it twice.
+	function repeatsName(node: Element | null): boolean {
+		if (!node) return false;
+		const name = node.getAttribute('aria-label') ?? node.textContent ?? '';
+		return name.trim() === text.trim();
+	}
+
+	// A tooltip's control has its own action, so the app passes its own
+	// onclick beside the spread. Bits UI's handlers move into an attachment,
+	// so the spread order cannot drop either set: the control's onclick still
+	// runs, and the tooltip still closes on a press and opens on hover and
+	// focus. Bits UI's `disabled: false` and `tabindex: 0` are left out, so
+	// they never undo a disabled control (a disabled link Button keeps
+	// tabindex -1); the control is focusable on its own.
+	function triggerProps(props: Record<string, unknown>): Record<string, unknown> {
+		const { disabled: _disabled, tabindex: _tabindex, 'aria-describedby': describedBy, ...attrs } = props;
+		const listeners: [string, EventListener][] = [];
+		for (const [key, value] of Object.entries(attrs)) {
+			if (key.startsWith('on') && typeof value === 'function') {
+				listeners.push([key.slice(2), value as EventListener]);
+				delete attrs[key];
+			}
+		}
+		if (describedBy && !repeatsName(control)) attrs['aria-describedby'] = describedBy;
+		return {
+			...attrs,
+			[capture]: captureControl,
+			[listen]: (node: Element) => {
+				for (const [type, fn] of listeners) node.addEventListener(type, fn);
+				return () => {
+					for (const [type, fn] of listeners) node.removeEventListener(type, fn);
+				};
+			}
+		};
+	}
+</script>
+
+<!--
+	Each tooltip outside a TooltipGroup has its own Bits UI provider, so an app
+	needs no shared wrapper. A resting mouse pointer opens it after the delay;
+	keyboard focus opens it at once, but only focus that shows the focus
+	contour, so focus returned to the trigger after a mouse press opens
+	nothing. Touch never opens it: a tap runs the control's own action.
+	Escape, moving the pointer away, blur and a press on the trigger close it.
+	While open, Bits UI points the trigger's aria-describedby at the tooltip,
+	unless the text repeats the control's name. The root carries the delay
+	and the focus rule, so they hold inside a group too.
+-->
+{#snippet tooltip()}
+	<BitsTooltip.Root bind:open {delayDuration} ignoreNonKeyboardFocus>
+		<BitsTooltip.Trigger>
+			{#snippet child({ props })}
+				{@render trigger({ props: triggerProps(props) })}
+			{/snippet}
+		</BitsTooltip.Trigger>
+
+		<BitsTooltip.Portal>
+			<BitsTooltip.Content forceMount bind:ref side="top" align="center" sideOffset={8} collisionPadding={8} {...rest}>
+				{#snippet child({ wrapperProps, props, open: shown })}
+					{#if shown}
+						<div {...wrapperProps}>
+							<div {...props} role="tooltip" class={['hp-tooltip', className]} transition:pop>{text}</div>
+						</div>
+					{/if}
+				{/snippet}
+			</BitsTooltip.Content>
+		</BitsTooltip.Portal>
+	</BitsTooltip.Root>
+{/snippet}
+
+{#if grouped}
+	{@render tooltip()}
+{:else}
+	<BitsTooltip.Provider>
+		{@render tooltip()}
+	</BitsTooltip.Provider>
+{/if}
+
+<style>
+	/* On the tooltip layer (tokens.css), over popovers, menus and dialogs.
+	   Bits UI copies the z-index to the positioned wrapper. A black box with
+	   the control boundary, like the popover, as wide as its text up to
+	   --tooltip-width, 280px unless set (an app sets it with a class on the
+	   Tooltip and a rule in its stylesheet; the default is the var()
+	   fallback, so any rule wins whatever its specificity) and never wider
+	   than the space beside the trigger. */
+	.hp-tooltip {
+		position: relative;
+		z-index: var(--layer-tooltip);
+		box-sizing: border-box;
+		width: max-content;
+		max-width: min(var(--tooltip-width, 280px), var(--bits-tooltip-content-available-width));
+		padding: var(--space-1) var(--space-2);
+		border: 1px solid var(--border-control);
+		background: var(--canvas);
+		color: var(--text);
+		font-family: var(--sans);
+		font-size: var(--type-body);
+		line-height: 24px;
+		overflow-wrap: break-word;
+	}
+
+	/* 16px where a coarse pointer reads it (keyboard focus on a tablet), the
+	   dense 14px on fine pointers. */
+	@media (pointer: fine) {
+		.hp-tooltip {
+			font-size: var(--type-dense);
+			line-height: 20px;
+		}
+	}
+</style>

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

@@ -0,0 +1,38 @@
+import type { Snippet } from 'svelte';
+import { Tooltip as BitsTooltip } from 'bits-ui';
+export type TooltipTriggerSnippetProps = {
+    /**
+     * Spread onto the control the tooltip belongs to. Its own handlers may
+     * come before or after. A control with its own description writes
+     * `aria-describedby={[props['aria-describedby'], ownId].filter(Boolean).join(' ')}`
+     * after the spread, so it keeps both.
+     */
+    props: Record<string, unknown>;
+};
+/**
+ * Attributes and handlers not listed here go to the tooltip element (Bits
+ * UI `Tooltip.Content`), among them `side` (default `top`), `align`
+ * (default `center`), `sideOffset` (default 8) and `onEscapeKeydown`.
+ */
+export type TooltipProps = Omit<BitsTooltip.ContentProps, 'child' | 'children' | 'forceMount' | 'ref'> & {
+    open?: boolean;
+    /**
+     * The tooltip, as written. It never opens on touch, so it is never the
+     * only path to its text: the control shows the same text, or carries it
+     * in `aria-label`.
+     */
+    text: string;
+    /** The control the tooltip belongs to: spread `props` onto it. */
+    trigger: Snippet<[TooltipTriggerSnippetProps]>;
+    /**
+     * Milliseconds a pointer rests on the trigger before the tooltip opens
+     * (default 700, Bits UI's, or the TooltipGroup's). Keyboard focus opens
+     * it at once.
+     */
+    delayDuration?: number;
+    /** The tooltip element. */
+    ref?: HTMLElement | null;
+};
+declare const Tooltip: import("svelte").Component<TooltipProps, {}, "ref" | "open">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;