entasis 0.11.0 → 0.12.0

package/dist/components/Form/VoiceInput/voiceInput.mcp.d.ts

@@ -1 +1 @@
-export declare const voiceInputDescription = "\n# VoiceInput Component\n\nVoiceInput records microphone audio into a bindable Blob, renders live microphone feedback, and previews the finalized recording with a seekable waveform. It can stay full width, expand leftward during capture, or remain mic-only with level-responsive rings.\n\n## Import\n\n```svelte\n<script lang=\"ts\">\n\timport { VoiceInput } from 'entasis/voice-input';\n</script>\n```\n\n## Basic usage\n\n```svelte\n<script lang=\"ts\">\n\timport { VoiceInput } from 'entasis/voice-input';\n\n\tlet recording = $state<Blob | null>(null);\n\tlet duration = $state(0);\n</script>\n\n<VoiceInput\n\tlabel=\"Voice note\"\n\tbind:value={recording}\n\tbind:duration\n\tminDuration={1}\n\tmaxDuration={60}\n/>\n```\n\n## Props\n\n- **value**: `Blob | null` (bindable, default: `null`) - Finalized microphone recording. Starting a successful new recording or using Clear removes the previous value.\n- **defaultValue**: `Blob | null` (default: `null`) - Initial recording used only when `value` is omitted.\n- **duration**: `number` (bindable, default: `0`) - Current or finalized duration in seconds.\n- **minDuration**: `number` (default: `0`) - Minimum accepted finalized duration in seconds. Shorter recordings surface a Field validation error.\n- **maxDuration**: `number | undefined` - Maximum duration in seconds. Recording stops automatically at this limit.\n- **color**: `Colors` (default: `'primary'`) - Focus and active recording color.\n- **variant**: `'default' | 'expandable' | 'compact'` (default: `'default'`) - Keeps the waveform full width, expands it only while recording or previewing, or renders a mic-only level indicator.\n- **size**: `'small' | 'normal' | 'large'` (default: `'normal'`) - Control height, waveform height, timer size, and action size.\n- **disabled**: `boolean` (default: `false`) - Prevents microphone, playback, seeking, and clear interactions.\n- **required**: `boolean` (default: `false`) - Requires a recorded Blob during Field/Form validation.\n- **startLabel**: `string` (default: `'Start voice recording'`) - Start-button accessible label and tooltip.\n- **stopLabel**: `string` (default: `'Stop recording'`) - Stop-button accessible label and tooltip.\n- **playLabel**: `string` (default: `'Play recording'`) - Playback-button label and tooltip while paused.\n- **pauseLabel**: `string` (default: `'Pause recording'`) - Playback-button label and tooltip while playing.\n- **seekLabel**: `string` (default: `'Seek recording'`) - Accessible label for the finalized waveform seek control.\n- **clearLabel**: `string` (default: `'Clear recording'`) - Clear-button accessible label and tooltip.\n- **onValueChange**: `(value: Blob | null) => void` - Runs when the field value changes, including Clear.\n- **onStart**: `() => void` - Runs after microphone capture starts.\n- **onStop**: `({ blob, duration }: VoiceInputResult) => void` - Runs after MediaRecorder finalizes the recording.\n- **onError**: `(error: Error) => void` - Runs when permission, recording, or playback fails.\n- **theme**: `VoiceInputThemeProps & FieldThemeProps` - Overrides voice-input and inherited Field theme parts.\n\nVoiceInput also accepts the standard Field props and slots, including `label`, `description`, `helper`, errors, and attachments.\n\n## Form configuration\n\n```svelte\n<Form\n\tinputs={{\n\t\tmessage: {\n\t\t\ttype: 'voice',\n\t\t\tlabel: 'Voice message',\n\t\t\trequired: true,\n\t\t\tminDuration: 1,\n\t\t\tmaxDuration: 60\n\t\t}\n\t}}\n\tonSubmit={(value) => uploadVoiceMessage(value.message)}\n/>\n```\n\n## Behavior\n\n- The waveform is drawn on a responsive canvas and maps live microphone RMS through a logarithmic decibel scale so quiet speech remains visible.\n- New samples enter from the right and push older samples left.\n- `maxDuration` schedules a hard automatic stop and caps the published duration at the configured limit.\n- `minDuration` participates in normal Field validation after MediaRecorder publishes the final Blob.\n- The `expandable` variant has no hidden full-width footprint while collapsed, then anchors the action on the right and animates the waveform surface toward the left while recording, finalizing, or previewing saved audio.\n- The `compact` variant omits the waveform and timer, uses a solid active surface while recording, and scales two concentric rings with the same logarithmic microphone level.\n- Finalized recordings expose play/pause and clear actions. The saved waveform becomes a native range-based playback timeline with elapsed progress, pointer scrubbing, and keyboard seeking.\n- Clear pauses playback, revokes the Blob URL, resets duration and waveform state, and publishes `null` through the normal field value contract.\n- Playback creates its Blob URL lazily and revokes it when the value changes or the component unmounts.\n- Stopping waits for MediaRecorder's final `dataavailable` event before publishing the Blob.\n- Starting another recording replaces the previous value only once microphone setup succeeds.\n- Permission denial, missing microphones, and unsupported browser APIs are surfaced in the control and through `onError`.\n- Microphone tracks, cutoff timers, animation frames, audio graph nodes, observers, and the AudioContext are released on stop, failure, or unmount.\n\n## Accessibility\n\n- The visible field label targets the current microphone/stop button.\n- Microphone, stop, play, pause, and clear actions have accessible labels and tooltips.\n- Recording and playback state changes are announced through a polite live region without announcing the timer every second.\n- Operational errors use `role=\"alert\"`; duration requirements use the inherited Field error rendering.\n- The canvas is decorative and hidden from assistive technology. A transparent native range input exposes the finalized waveform as a labelled slider with elapsed and total time.\n- Compact rings are decorative pseudo-elements and add no accessibility-tree content.\n\n## Browser requirements\n\nMicrophone capture requires a secure context (HTTPS, with localhost allowed by browsers), user permission, MediaRecorder, and Web Audio API support.\n\n## Theme parts\n\n- `root` - Field root and variant width behavior.\n- `inputContainer` - Input-like recording surface.\n- `content` - Waveform, operational error, and timer region.\n- `action` - Microphone/stop action, including compact level rings.\n- `playbackAction` - Play/pause action shown for a finalized recording.\n- `clearAction` - Clear action shown for a finalized recording.\n- `waveformContainer` - Relative live/playback waveform surface and focus treatment.\n- `waveform` - Responsive visual canvas.\n- `waveformInput` - Native range hitbox layered over a finalized waveform.\n- `timer` - Stable tabular duration.\n- `error` - Operational error message.\n\n## State contract\n\n- **value**: current bindable editable value.\n- **defaultValue**: initial value used only when `value` is omitted.\n- **onValueChange**: called with the new value when the component changes it.\n\n";
+export declare const voiceInputDescription = "\n# VoiceInput Component\n\nVoiceInput records microphone audio into a bindable Blob, renders live microphone feedback, and previews the finalized recording with a seekable waveform. It can stay full width, expand leftward during capture, or remain mic-only with level-responsive rings.\n\n## Import\n\n```svelte\n<script lang=\"ts\">\n\timport { VoiceInput } from 'entasis/voice-input';\n</script>\n```\n\n## Basic usage\n\n```svelte\n<script lang=\"ts\">\n\timport { VoiceInput } from 'entasis/voice-input';\n\n\tlet recording = $state<Blob | null>(null);\n\tlet duration = $state(0);\n</script>\n\n<VoiceInput\n\tlabel=\"Voice note\"\n\tbind:value={recording}\n\tbind:duration\n\tminDuration={1}\n\tmaxDuration={60}\n/>\n```\n\n## Props\n\n- **value**: `Blob | null` (bindable, default: `null`) - Finalized microphone recording. Starting a successful new recording or using Clear removes the previous value.\n- **defaultValue**: `Blob | null` (default: `null`) - Initial recording used only when `value` is omitted.\n- **duration**: `number` (bindable, default: `0`) - Current or finalized duration in seconds.\n- **minDuration**: `number` (default: `0`) - Minimum accepted finalized duration in seconds. Shorter recordings surface a Field validation error.\n- **maxDuration**: `number | undefined` - Maximum duration in seconds. Recording stops automatically at this limit.\n- **color**: `Colors` (default: `'primary'`) - Focus and active recording color.\n- **variant**: `'default' | 'expandable' | 'compact'` (default: `'default'`) - Keeps the waveform full width, expands it only while recording or previewing, or renders a mic-only level indicator.\n- **size**: `'small' | 'normal' | 'large'` (default: `'normal'`) - Control height, waveform height, timer size, and action size.\n- **disabled**: `boolean` (default: `false`) - Prevents microphone, playback, seeking, and clear interactions.\n- **readOnly**: `boolean` (default: `false`) - Disables recording and clearing while the recorded value still validates and submits.\n- **required**: `boolean` (default: `false`) - Requires a recorded Blob during Field/Form validation.\n- **startLabel**: `string` (default: `'Start voice recording'`) - Start-button accessible label and tooltip.\n- **stopLabel**: `string` (default: `'Stop recording'`) - Stop-button accessible label and tooltip.\n- **playLabel**: `string` (default: `'Play recording'`) - Playback-button label and tooltip while paused.\n- **pauseLabel**: `string` (default: `'Pause recording'`) - Playback-button label and tooltip while playing.\n- **seekLabel**: `string` (default: `'Seek recording'`) - Accessible label for the finalized waveform seek control.\n- **clearLabel**: `string` (default: `'Clear recording'`) - Clear-button accessible label and tooltip.\n- **onValueChange**: `(value: Blob | null) => void` - Runs when the field value changes, including Clear.\n- **onStart**: `() => void` - Runs after microphone capture starts.\n- **onStop**: `({ blob, duration }: VoiceInputResult) => void` - Runs after MediaRecorder finalizes the recording.\n- **onError**: `(error: Error) => void` - Runs when permission, recording, or playback fails.\n- **theme**: `VoiceInputThemeProps & FieldThemeProps` - Overrides voice-input and inherited Field theme parts.\n\nVoiceInput also accepts the standard Field props and slots, including `label`, `description`, `helper`, errors, and attachments.\n\n## Form configuration\n\n```svelte\n<Form\n\tinputs={{\n\t\tmessage: {\n\t\t\ttype: 'voice',\n\t\t\tlabel: 'Voice message',\n\t\t\trequired: true,\n\t\t\tminDuration: 1,\n\t\t\tmaxDuration: 60\n\t\t}\n\t}}\n\tonSubmit={(value) => uploadVoiceMessage(value.message)}\n/>\n```\n\n## Behavior\n\n- The waveform is drawn on a responsive canvas and maps live microphone RMS through a logarithmic decibel scale so quiet speech remains visible.\n- New samples enter from the right and push older samples left.\n- `maxDuration` schedules a hard automatic stop and caps the published duration at the configured limit.\n- `minDuration` participates in normal Field validation after MediaRecorder publishes the final Blob.\n- The `expandable` variant has no hidden full-width footprint while collapsed, then anchors the action on the right and animates the waveform surface toward the left while recording, finalizing, or previewing saved audio.\n- The `compact` variant omits the waveform and timer, uses a solid active surface while recording, and scales two concentric rings with the same logarithmic microphone level.\n- Finalized recordings expose play/pause and clear actions. The saved waveform becomes a native range-based playback timeline with elapsed progress, pointer scrubbing, and keyboard seeking.\n- Clear pauses playback, revokes the Blob URL, resets duration and waveform state, and publishes `null` through the normal field value contract.\n- Playback creates its Blob URL lazily and revokes it when the value changes or the component unmounts.\n- Stopping waits for MediaRecorder's final `dataavailable` event before publishing the Blob.\n- Starting another recording replaces the previous value only once microphone setup succeeds.\n- Permission denial, missing microphones, and unsupported browser APIs are surfaced in the control and through `onError`.\n- Microphone tracks, cutoff timers, animation frames, audio graph nodes, observers, and the AudioContext are released on stop, failure, or unmount.\n\n## Accessibility\n\n- The visible field label targets the current microphone/stop button.\n- Microphone, stop, play, pause, and clear actions have accessible labels and tooltips.\n- Recording and playback state changes are announced through a polite live region without announcing the timer every second.\n- Operational errors use `role=\"alert\"`; duration requirements use the inherited Field error rendering.\n- The canvas is decorative and hidden from assistive technology. A transparent native range input exposes the finalized waveform as a labelled slider with elapsed and total time.\n- Compact rings are decorative pseudo-elements and add no accessibility-tree content.\n\n## Browser requirements\n\nMicrophone capture requires a secure context (HTTPS, with localhost allowed by browsers), user permission, MediaRecorder, and Web Audio API support.\n\n## Theme parts\n\n- `root` - Field root and variant width behavior.\n- `inputContainer` - Input-like recording surface.\n- `content` - Waveform, operational error, and timer region.\n- `action` - Microphone/stop action, including compact level rings.\n- `playbackAction` - Play/pause action shown for a finalized recording.\n- `clearAction` - Clear action shown for a finalized recording.\n- `waveformContainer` - Relative live/playback waveform surface and focus treatment.\n- `waveform` - Responsive visual canvas.\n- `waveformInput` - Native range hitbox layered over a finalized waveform.\n- `timer` - Stable tabular duration.\n- `error` - Operational error message.\n\n## State contract\n\n- **value**: current bindable editable value.\n- **defaultValue**: initial value used only when `value` is omitted.\n- **onValueChange**: called with the new value when the component changes it.\n\n";

package/dist/components/Form/VoiceInput/voiceInput.mcp.js

@@ -41,6 +41,7 @@ VoiceInput records microphone audio into a bindable Blob, renders live microphon
 - **variant**: \`'default' | 'expandable' | 'compact'\` (default: \`'default'\`) - Keeps the waveform full width, expands it only while recording or previewing, or renders a mic-only level indicator.
 - **size**: \`'small' | 'normal' | 'large'\` (default: \`'normal'\`) - Control height, waveform height, timer size, and action size.
 - **disabled**: \`boolean\` (default: \`false\`) - Prevents microphone, playback, seeking, and clear interactions.
+- **readOnly**: \`boolean\` (default: \`false\`) - Disables recording and clearing while the recorded value still validates and submits.
 - **required**: \`boolean\` (default: \`false\`) - Requires a recorded Blob during Field/Form validation.
 - **startLabel**: \`string\` (default: \`'Start voice recording'\`) - Start-button accessible label and tooltip.
 - **stopLabel**: \`string\` (default: \`'Stop recording'\`) - Stop-button accessible label and tooltip.

package/dist/components/GanttChart/GanttDependencyControl.svelte

@@ -8,7 +8,7 @@
 	import Select from '../Form/Select/Select.svelte';
 	import HoverCard from '../HoverCard/HoverCard.svelte';
 	import Popover from '../Popover/Popover.svelte';
-	import type { PopoverState } from '../Popover/popover.state.svelte.js';
+	import type { PopoverApi } from '../Popover/popover.api.js';
 	import type { GanttDependencyTooltipPayload } from './ganttChart.props.js';
 	import type { GanttChartState } from './ganttChart.state.svelte.js';
 	import type {
@@ -79,7 +79,7 @@
 		{ value: 'week', label: 'Weeks' }
 	];
 
-	function handleKeydown(event: KeyboardEvent, popover: PopoverState): void {
+	function handleKeydown(event: KeyboardEvent, popover: PopoverApi): void {
 		if (event.key === 'Delete' || event.key === 'Backspace') {
 			event.preventDefault();
 			event.stopPropagation();
@@ -94,7 +94,7 @@
 		openEditor(popover);
 	}
 
-	function openEditor(popover: PopoverState): void {
+	function openEditor(popover: PopoverApi): void {
 		draftType = dependency.dependency.type;
 		draftLagValue = dependency.dependency.lag?.value ?? null;
 		draftLagUnit = dependency.dependency.lag?.unit ?? 'day';
@@ -118,7 +118,7 @@
 		}
 	}
 
-	function commitEditor(popover: PopoverState): void {
+	function commitEditor(popover: PopoverApi): void {
 		const currentLag = dependency.dependency.lag;
 		const isUnchanged =
 			dependency.dependency.type === draftType &&

package/dist/components/HoverCard/HoverCard.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { createBindableValue } from '../../utils/state.svelte.js';
-	import { onDestroy } from 'svelte';
+	import { onDestroy, untrack } from 'svelte';
+	import type { Attachment } from 'svelte/attachments';
 
 	import Button from '../Button/Button.svelte';
 	import Card from '../Card/Card.svelte';
@@ -9,6 +10,10 @@
 	import type { ButtonProps } from '../Button/index.js';
 	import type { HoverCardProps, HoverCardTrigger } from './hoverCard.props.js';
 	import { useHoverCardMotion, useHoverCardTheme } from './hoverCard.theme.js';
+	import { useTheme } from '../Theme/theme.state.svelte.js';
+	import { popoverInternals, type PopoverState } from '../Popover/popover.state.svelte.js';
+	import type { PopoverApi } from '../Popover/popover.api.js';
+	import { presence } from '../../utils/stateAttributes.js';
 
 	let {
 		id: customId,
@@ -32,6 +37,9 @@
 		size = 'normal',
 		density = 'normal',
 		disabled = false,
+		wrap = false,
+		anchorTo,
+		arrow = false,
 		class: className,
 		triggerClass,
 		popover,
@@ -64,6 +72,34 @@
 
 	let openTimer: ReturnType<typeof setTimeout> | null = null;
 	let closeTimer: ReturnType<typeof setTimeout> | null = null;
+	const themeState = useTheme();
+	let triggerElement = $state<HTMLElement | null>(null);
+	let cardElement = $state<HTMLElement | null>(null);
+	// The popover behind this card, for the cards opened from inside it (see `hasChildOpen`).
+	let cardPopover = $state.raw<PopoverState | null>(null);
+	const trackPopover =
+		(api: PopoverApi): Attachment =>
+		() => {
+			const popover = popoverInternals(api);
+			cardPopover = popover;
+			return () => {
+				if (cardPopover === popover) cardPopover = null;
+			};
+		};
+	// Whether the pointer is over the trigger or the card. Plain fields: read when a timer fires.
+	let pointerInside = false;
+	// From the close request until the close transition has ended: a pointer that comes back in
+	// that time reopens the card at once instead of waiting out `delay` again.
+	let closing = false;
+
+	// An open card keeps the hover warm-up going: moving on to a neighbouring card, tooltip or
+	// hover popover opens it at once. Triggers inside this card do not count as moving on.
+	$effect(() => {
+		if (!isOpen) return;
+		return untrack(() =>
+			themeState.hoverIntent.join({ contains: (node) => !!cardElement?.contains(node) })
+		);
+	});
 
 	const clearOpenTimer = () => {
 		if (openTimer) {
@@ -93,6 +129,7 @@
 
 	const setOpen = (nextOpen: boolean) => {
 		if (isOpen === nextOpen) return;
+		closing = !nextOpen;
 		openState.value = nextOpen;
 		onOpenChange?.(nextOpen);
 	};
@@ -108,15 +145,52 @@
 	const scheduleOpen = () => {
 		clearCloseTimer();
 		if (disabled || isOpen || openTimer) return;
+		if (closing || themeState.hoverIntent.isWarm(triggerElement)) {
+			openImmediately();
+			return;
+		}
 		openTimer = setTimeout(openImmediately, delay);
 	};
 
+	// Hover is a mouse or pen affair: a touch tap reaches the card through focus instead.
+	const handlePointerEnter = (event: PointerEvent) => {
+		if (event.pointerType === 'touch') return;
+		pointerInside = true;
+		scheduleOpen();
+	};
+	const handlePointerLeave = (event: PointerEvent) => {
+		if (event.pointerType === 'touch') return;
+		pointerInside = false;
+		scheduleClose();
+	};
+
+	// A card opened from inside this one (a link in its text) keeps this one open while the pointer
+	// is on it: the pointer left this card, but not the cards it leads to.
+	const hasOpenChild = () => !!cardPopover?.hasChildOpen;
+
 	const scheduleClose = () => {
 		clearOpenTimer();
 		if (!isOpen || closeTimer) return;
-		closeTimer = setTimeout(closeImmediately, closeDelay);
+		closeTimer = setTimeout(() => {
+			closeTimer = null;
+			if (!hasOpenChild()) closeImmediately();
+		}, closeDelay);
 	};
 
+	// When the last child card closes with the pointer outside every card, this one closes too.
+	let hadOpenChild = false;
+	$effect(() => {
+		const open = !!cardPopover?.hasChildOpen;
+		untrack(() => {
+			const closedLast = hadOpenChild && !open;
+			hadOpenChild = open;
+			if (!closedLast || !isOpen || pointerInside) return;
+			const focused = cardElement?.ownerDocument.activeElement;
+			if (focused && (cardElement?.contains(focused) || triggerElement?.contains(focused))) return;
+			scheduleClose();
+		});
+	});
+
 	const handleFocusIn = () => {
 		if (openOnFocus) scheduleOpen();
 	};
@@ -150,7 +224,10 @@
 	transition={hoverCardTransition}
 	{closeOnEscape}
 	{closeOnClickOutside}
+	closeOnFocusOut={false}
 	{directedTransition}
+	{arrow}
+	anchorTo={anchorTo ?? (wrap ? 'line' : 'box')}
 	openOnClick={false}
 	openOnHover={false}
 	closeOnMouseLeave={false}
@@ -160,21 +237,27 @@
 	theme={popover?.theme}
 	onOpenChange={setOpen}
 	onAfterOpen={() => onAfterOpen?.(payload)}
-	onAfterClose={() => onAfterClose?.(payload)}
+	onAfterClose={() => {
+		closing = false;
+		onAfterClose?.(payload);
+	}}
 >
 	{#snippet trigger(anchor)}
 		{#if typeof triggerContent === 'string'}
 			<button
 				{@attach anchor.reference}
+				{@attach trackPopover(anchor)}
 				type="button"
 				class={classes.trigger({ disabled, className: triggerClass })}
 				data-state={isOpen ? 'open' : 'closed'}
+				data-disabled={presence(disabled)}
 				aria-haspopup="dialog"
 				aria-expanded={isOpen}
 				aria-controls={id}
 				{disabled}
-				onpointerenter={scheduleOpen}
-				onpointerleave={scheduleClose}
+				bind:this={triggerElement}
+				onpointerenter={handlePointerEnter}
+				onpointerleave={handlePointerLeave}
 				onfocusin={handleFocusIn}
 				onfocusout={scheduleClose}
 				onclick={handleClick}
@@ -185,11 +268,14 @@
 		{:else}
 			<span
 				{@attach anchor.reference}
-				class={classes.trigger({ disabled, className: triggerClass })}
+				{@attach trackPopover(anchor)}
+				class={classes.trigger({ disabled, wrap, className: triggerClass })}
 				data-state={isOpen ? 'open' : 'closed'}
+				data-disabled={presence(disabled)}
 				role="presentation"
-				onpointerenter={scheduleOpen}
-				onpointerleave={scheduleClose}
+				bind:this={triggerElement}
+				onpointerenter={handlePointerEnter}
+				onpointerleave={handlePointerLeave}
 				onfocusin={handleFocusIn}
 				onfocusout={scheduleClose}
 				onclick={isButtonTrigger(triggerContent) ? undefined : handleClick}
@@ -224,8 +310,12 @@
 
 	<div
 		role="presentation"
-		onpointerenter={openImmediately}
-		onpointerleave={scheduleClose}
+		bind:this={cardElement}
+		onpointerenter={(event) => {
+			if (event.pointerType !== 'touch') pointerInside = true;
+			openImmediately();
+		}}
+		onpointerleave={handlePointerLeave}
 		onfocusin={handleFocusIn}
 		onfocusout={scheduleClose}
 	>

package/dist/components/HoverCard/hoverCard.attributes.d.ts

@@ -0,0 +1,33 @@
+/**
+ * The styling hooks a HoverCard exposes. Attributes are presence attributes (`''` while the state
+ * holds, omitted otherwise) unless the description says they carry a value. The card is a
+ * Popover panel.
+ */
+export declare const hoverCardDataAttributes: {
+    readonly 'data-open': "On the card: present while open.";
+    readonly 'data-closed': "On the card: present while its exit transition plays.";
+    readonly 'data-entering': "On the card: present while the enter transition plays.";
+    readonly 'data-exiting': "On the card: present while the exit transition plays.";
+    readonly 'data-side': "On the card: the side of the trigger it sits on after flipping, `top`, `right`, `bottom` or `left`; `inline-start` / `inline-end` when a logical `position` was requested.";
+    readonly 'data-align': "On the card: `start`, `center` or `end`, how it lines up with the trigger.";
+    readonly 'data-anchor-hidden': "On the card: present while the trigger is scrolled out of view.";
+    readonly 'data-state': "On the trigger: `open` or `closed` (kept for compatibility; prefer `data-popup-open`).";
+    readonly 'data-popup-open': "On the trigger: present while the card is open.";
+    readonly 'data-popup-side': "On the trigger: the card's `data-side` while it is placed.";
+    readonly 'data-disabled': "On the trigger: present while `disabled`.";
+};
+/** The name of a HoverCard data attribute. */
+export type HoverCardDataAttribute = keyof typeof hoverCardDataAttributes;
+/**
+ * The CSS variables a placement writes on the card's positioned wrapper, inherited by the card and
+ * its content: the Popover set (`popoverCssVariables`), where the panel is the card.
+ */
+export declare const hoverCardCssVariables: {
+    readonly '--available-width': "The width in px the panel 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 panel's side, minus 20px. Cap a scrolling list with `max-height: min(240px, var(--available-height))`.";
+    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 panel corner facing the trigger, mirrored in right-to-left documents; the point the panel scales from.";
+};
+/** The name of a HoverCard CSS variable. */
+export type HoverCardCssVariable = keyof typeof hoverCardCssVariables;

package/dist/components/HoverCard/hoverCard.attributes.js

@@ -0,0 +1,24 @@
+import { popoverCssVariables } from '../Popover/popover.attributes.js';
+/**
+ * The styling hooks a HoverCard exposes. Attributes are presence attributes (`''` while the state
+ * holds, omitted otherwise) unless the description says they carry a value. The card is a
+ * Popover panel.
+ */
+export const hoverCardDataAttributes = {
+    'data-open': 'On the card: present while open.',
+    'data-closed': 'On the card: present while its exit transition plays.',
+    'data-entering': 'On the card: present while the enter transition plays.',
+    'data-exiting': 'On the card: present while the exit transition plays.',
+    'data-side': 'On the card: the side of the trigger it sits on after flipping, `top`, `right`, `bottom` or `left`; `inline-start` / `inline-end` when a logical `position` was requested.',
+    'data-align': 'On the card: `start`, `center` or `end`, how it lines up with the trigger.',
+    'data-anchor-hidden': 'On the card: present while the trigger is scrolled out of view.',
+    'data-state': 'On the trigger: `open` or `closed` (kept for compatibility; prefer `data-popup-open`).',
+    'data-popup-open': 'On the trigger: present while the card is open.',
+    'data-popup-side': "On the trigger: the card's `data-side` while it is placed.",
+    'data-disabled': 'On the trigger: present while `disabled`.'
+};
+/**
+ * The CSS variables a placement writes on the card's positioned wrapper, inherited by the card and
+ * its content: the Popover set (`popoverCssVariables`), where the panel is the card.
+ */
+export const hoverCardCssVariables = popoverCssVariables;

package/dist/components/HoverCard/hoverCard.mcp.d.ts

@@ -1 +1 @@
-export declare const hoverCardDescription = "\n# HoverCard Component\n\nHoverCard previews supplemental content when a trigger is hovered or focused. It composes Popover for positioning and dismissal with Card for the visible content surface.\n\n## Basic Usage\n\n```svelte\n<script lang=\"ts\">\n\timport { HoverCard } from 'entasis/hover-card';\n</script>\n\n<HoverCard\n\ttrigger={{ content: 'Hover @entasis', variant: 'link' }}\n\ttitle=\"@entasis\"\n\tdescription=\"Composable Svelte UI components.\"\n>\n\t<p>Preview content shown on hover or focus.</p>\n</HoverCard>\n```\n\n## Props\n\n### Core Props\n- **id**: string - Stable id for the underlying popover root.\n- **open**: boolean - Bindable open state.\n- **defaultOpen**: boolean (default: false) - Initial state when open is not provided.\n- **trigger**: string | Snippet<[HoverCardPayload]> | ButtonProps - Trigger content. ButtonProps render a Entasis Button.\n- **children**: string | Snippet<[HoverCardPayload]> - Main card content.\n- **title**: string | Snippet<[HoverCardPayload]> - Card title slot.\n- **description**: string | Snippet<[HoverCardPayload]> - Card description slot.\n- **footer**: string | Snippet<[HoverCardPayload]> - Card footer slot.\n\n### Behavior Props\n- **position**: Placement (default: 'top') - Preferred placement relative to the trigger.\n- **offset**: number (default: 8) - Gap between trigger and card.\n- **delay**: number (default: 150) - Delay before opening on hover or focus.\n- **closeDelay**: number (default: 100) - Delay before closing after pointer/focus leaves.\n- **openOnFocus**: boolean (default: true) - Opens when focus enters the trigger or card.\n- **openOnClick**: boolean (default: false) - Toggles on trigger click, useful for touch fallbacks.\n- **disabled**: boolean (default: false) - Prevents opening and disables Button triggers.\n\n### Dismissal and Transition Props\n- **closeOnEscape**: boolean (default: true) - Escape closes the hover card.\n- **closeOnClickOutside**: boolean (default: true) - Outside clicks close the hover card.\n- **directedTransition**: boolean (default: true) - Transition direction follows placement.\n- **transition**: ResponsiveProps<FSOProps> - Popover transition override.\n\n### Styling Props\n- **size**: 'small' | 'normal' | 'large' (default: 'normal') - Controls Popover panel and Card sizing.\n- **density**: 'compact' | 'normal' | 'comfortable' (default: 'normal') - Controls inner Card padding and spacing.\n- **class**: string - Extra classes on the inner Card.\n- **triggerClass**: string - Extra classes on the trigger wrapper.\n- **popover**: Props forwarded to the transparent Popover panel as one object - `{ class, theme }`.\n- **card**: Props forwarded to the inner Card as one object - `{ color, variant, theme }` (defaults: color 'neutral', variant 'solid').\n- **showBorders**: boolean (default: false) - Card section borders.\n- **theme**: HoverCardThemeProps - Theme overrides for HoverCard wrapper parts.\n\n### Callbacks\n- **onOpenChange**: (open: boolean) => void - Called once for each library-requested state change.\n- **onAfterOpen**: (payload: HoverCardPayload) => void - Called after the open transition finishes.\n- **onAfterClose**: (payload: HoverCardPayload) => void - Called after the close transition finishes.\n\n## Examples\n\n### Delays\n```svelte\n<HoverCard delay={300} closeDelay={200} trigger=\"Hover\">\n\tContent\n</HoverCard>\n```\n\n### Custom Trigger\n```svelte\n<HoverCard position=\"right\">\n\t{#snippet trigger(hoverCard)}\n\t\t<button aria-expanded={hoverCard.isOpen}>Preview</button>\n\t{/snippet}\n\n\tPreview content\n</HoverCard>\n```\n\n## Accessibility\n\n- Opens on pointer hover and keyboard focus by default.\n- Escape and outside click dismissal are delegated to Popover.\n- Button triggers receive aria-haspopup, aria-expanded, and aria-controls.\n- HoverCard is best for supplemental previews; primary content should remain reachable without hover.\n\n## Motion\n\n- **motion** theme slot: one preset (no variants) \u2014 a small lift plus scale on `fast` / `enter`.\n- Resolved by HoverCard and handed to the underlying Popover, replacing the popover preset.\n- Ladder: `<Theme components={{ 'hover-card': { motion } }}>` \u2192 `setHoverCardTheme({ motion })`\n  \u2192 `theme.motion` \u2192 the `transition` prop. Reduced motion collapses it to 0.\n";
+export declare const hoverCardDescription = "\n# HoverCard Component\n\nHoverCard previews supplemental content when a trigger is hovered or focused. It composes Popover for positioning and dismissal with Card for the visible content surface.\n\n## Basic Usage\n\n```svelte\n<script lang=\"ts\">\n\timport { HoverCard } from 'entasis/hover-card';\n</script>\n\n<HoverCard\n\ttrigger={{ content: 'Hover @entasis', variant: 'link' }}\n\ttitle=\"@entasis\"\n\tdescription=\"Composable Svelte UI components.\"\n>\n\t<p>Preview content shown on hover or focus.</p>\n</HoverCard>\n```\n\n## Props\n\n### Core Props\n- **id**: string - Stable id for the underlying popover root.\n- **open**: boolean - Bindable open state.\n- **defaultOpen**: boolean (default: false) - Initial state when open is not provided.\n- **trigger**: string | Snippet<[HoverCardPayload]> | ButtonProps - Trigger content. ButtonProps render a Entasis Button.\n- **children**: string | Snippet<[HoverCardPayload]> - Main card content.\n- **title**: string | Snippet<[HoverCardPayload]> - Card title slot.\n- **description**: string | Snippet<[HoverCardPayload]> - Card description slot.\n- **footer**: string | Snippet<[HoverCardPayload]> - Card footer slot.\n\n### Behavior Props\n- **position**: Placement (default: 'top') - Preferred placement relative to the trigger.\n- **offset**: number (default: 8) - Gap between trigger and card.\n- **delay**: number (default: 150) - Delay before opening on hover or focus. Skipped right after another hover card, tooltip or hover-opened popover was open (within 400ms of it closing, or while one is still open), so moving between neighbouring cards does not wait at each one. Also skipped for this card itself from the moment it starts closing until its close transition has ended: pointing at the trigger again during the transition reopens it at once.\n- **closeDelay**: number (default: 100) - Delay before closing after pointer/focus leaves.\n- **openOnFocus**: boolean (default: true) - Opens when focus enters the trigger or card.\n- **openOnClick**: boolean (default: false) - Toggles on trigger click, useful for touch fallbacks.\n- **disabled**: boolean (default: false) - Prevents opening and disables Button triggers.\n- **wrap**: boolean (default: false) - Lets the trigger wrap across lines like text, for a link inside a paragraph: it renders `display: inline` with `box-decoration-break: clone` instead of inline-flex, and the card anchors to the line the pointer entered. Applies to a snippet or button trigger; a string trigger is a button, which is one box\n- **anchorTo**: 'box' | 'line' (default: 'line' with `wrap`, else 'box') - What the card anchors to when its trigger wraps: the whole bounding box, or the line the pointer entered, kept while the card is open. A keyboard open takes the first line above the trigger and the last one below it\n- **arrow**: boolean (default: false) - Draws an arrow from the card toward its trigger; style it with `popover.theme.arrow`\n\n### Dismissal and Transition Props\n- **closeOnEscape**: boolean (default: true) - Escape closes the hover card.\n- **closeOnClickOutside**: boolean (default: true) - Outside clicks close the hover card.\n- **directedTransition**: boolean (default: true) - Transition direction follows placement.\n- **transition**: ResponsiveProps<FSOProps> - Popover transition override.\n\n### Styling Props\n- **size**: 'small' | 'normal' | 'large' (default: 'normal') - Controls Popover panel and Card sizing.\n- **density**: 'compact' | 'normal' | 'comfortable' (default: 'normal') - Controls inner Card padding and spacing.\n- **class**: string - Extra classes on the inner Card.\n- **triggerClass**: string - Extra classes on the trigger wrapper.\n- **popover**: Props forwarded to the transparent Popover panel as one object - `{ class, theme }`.\n- **card**: Props forwarded to the inner Card as one object - `{ color, variant, theme }` (defaults: color 'neutral', variant 'solid').\n- **showBorders**: boolean (default: false) - Card section borders.\n- **theme**: HoverCardThemeProps - Theme overrides for HoverCard wrapper parts.\n\n### Callbacks\n- **onOpenChange**: (open: boolean) => void - Called once for each library-requested state change.\n- **onAfterOpen**: (payload: HoverCardPayload) => void - Called after the open transition finishes.\n- **onAfterClose**: (payload: HoverCardPayload) => void - Called after the close transition finishes.\n\n## Examples\n\n### Cards inside cards\n\nA card opened from inside another card (a link in its text) keeps the outer card open while the pointer is on either of them: leaving the outer card for the inner one does not start the outer card's close timer to completion. When the last inner card closes with the pointer outside every card (and focus outside them), the outer card closes too, after its `closeDelay`.\n\n```svelte\n<HoverCard trigger={{ content: 'Entasis', variant: 'link' }} title=\"Entasis\">\n\tBuilt on\n\t<HoverCard trigger={{ content: 'Svelte', variant: 'link' }} title=\"Svelte\" position=\"right\">\n\t\tCybernetically enhanced web apps.\n\t</HoverCard>\n</HoverCard>\n```\n\n### A link in a paragraph\n\n```svelte\n<p class=\"w-56\">\n\tRead the\n\t<HoverCard wrap arrow>\n\t\t{#snippet trigger()}\n\t\t\t<span class=\"underline\">full release notes for this version</span>\n\t\t{/snippet}\n\t\tAnchored to the line the pointer entered.\n\t</HoverCard>\n\tbefore upgrading.\n</p>\n```\n\n### Delays\n```svelte\n<HoverCard delay={300} closeDelay={200} trigger=\"Hover\">\n\tContent\n</HoverCard>\n```\n\n### Custom Trigger\n```svelte\n<HoverCard position=\"right\">\n\t{#snippet trigger(hoverCard)}\n\t\t<button aria-expanded={hoverCard.isOpen}>Preview</button>\n\t{/snippet}\n\n\tPreview content\n</HoverCard>\n```\n\n## Styling hooks\n\nThe card is a Popover panel and carries its state attributes; the trigger carries the popup state.\n\nAttributes are presence attributes (set while the state holds, omitted otherwise) unless they carry a value.\n\n**Data attributes**\n- `data-open`: On the card: present while open.\n- `data-closed`: On the card: present while its exit transition plays.\n- `data-entering`: On the card: present while the enter transition plays.\n- `data-exiting`: On the card: present while the exit transition plays.\n- `data-side`: On the card: the side of the trigger it sits on after flipping, `top`, `right`, `bottom` or `left`; `inline-start` / `inline-end` when a logical `position` was requested.\n- `data-align`: On the card: `start`, `center` or `end`, how it lines up with the trigger.\n- `data-anchor-hidden`: On the card: present while the trigger is scrolled out of view.\n- `data-state`: On the trigger: `open` or `closed` (kept for compatibility; prefer `data-popup-open`).\n- `data-popup-open`: On the trigger: present while the card is open.\n- `data-popup-side`: On the trigger: the card's `data-side` while it is placed.\n- `data-disabled`: On the trigger: present while `disabled`.\n\n**CSS variables** (set on the card's positioned wrapper and inherited by the card, which is the panel below)\n- `--available-width`: The width in px the panel can take before it reaches the viewport edges, minus 20px.\n- `--available-height`: The room in px between the trigger and the viewport edge on the panel's side, minus 20px. Cap a scrolling list with `max-height: min(240px, var(--available-height))`.\n- `--anchor-width`: The trigger's width in px, snapped to the device pixel grid.\n- `--anchor-height`: The trigger's height in px, snapped to the device pixel grid.\n- `--transform-origin`: The panel corner facing the trigger, mirrored in right-to-left documents; the point the panel scales from.\n\nThe typed maps `hoverCardDataAttributes` and `hoverCardCssVariables` (from `entasis/hover-card`) list each name with its meaning.\n\n## Accessibility\n\n- Opens on pointer hover and keyboard focus by default. Hover means a mouse or a pen: a touch tap's pointer events never open or close the card, focus does.\n- Escape and outside click dismissal are delegated to Popover.\n- Button triggers receive aria-haspopup, aria-expanded, and aria-controls.\n- HoverCard is best for supplemental previews; primary content should remain reachable without hover.\n\n## Motion\n\n- **motion** theme slot: one preset (no variants) \u2014 a small lift plus scale on `fast` / `enter`.\n- Resolved by HoverCard and handed to the underlying Popover, replacing the popover preset.\n- Ladder: `<Theme components={{ 'hover-card': { motion } }}>` \u2192 `setHoverCardTheme({ motion })`\n  \u2192 `theme.motion` \u2192 the `transition` prop. Reduced motion collapses it to 0.\n";

package/dist/components/HoverCard/hoverCard.mcp.js

@@ -34,11 +34,14 @@ HoverCard previews supplemental content when a trigger is hovered or focused. It
 ### Behavior Props
 - **position**: Placement (default: 'top') - Preferred placement relative to the trigger.
 - **offset**: number (default: 8) - Gap between trigger and card.
-- **delay**: number (default: 150) - Delay before opening on hover or focus.
+- **delay**: number (default: 150) - Delay before opening on hover or focus. Skipped right after another hover card, tooltip or hover-opened popover was open (within 400ms of it closing, or while one is still open), so moving between neighbouring cards does not wait at each one. Also skipped for this card itself from the moment it starts closing until its close transition has ended: pointing at the trigger again during the transition reopens it at once.
 - **closeDelay**: number (default: 100) - Delay before closing after pointer/focus leaves.
 - **openOnFocus**: boolean (default: true) - Opens when focus enters the trigger or card.
 - **openOnClick**: boolean (default: false) - Toggles on trigger click, useful for touch fallbacks.
 - **disabled**: boolean (default: false) - Prevents opening and disables Button triggers.
+- **wrap**: boolean (default: false) - Lets the trigger wrap across lines like text, for a link inside a paragraph: it renders \`display: inline\` with \`box-decoration-break: clone\` instead of inline-flex, and the card anchors to the line the pointer entered. Applies to a snippet or button trigger; a string trigger is a button, which is one box
+- **anchorTo**: 'box' | 'line' (default: 'line' with \`wrap\`, else 'box') - What the card anchors to when its trigger wraps: the whole bounding box, or the line the pointer entered, kept while the card is open. A keyboard open takes the first line above the trigger and the last one below it
+- **arrow**: boolean (default: false) - Draws an arrow from the card toward its trigger; style it with \`popover.theme.arrow\`
 
 ### Dismissal and Transition Props
 - **closeOnEscape**: boolean (default: true) - Escape closes the hover card.
@@ -63,6 +66,34 @@ HoverCard previews supplemental content when a trigger is hovered or focused. It
 
 ## Examples
 
+### Cards inside cards
+
+A card opened from inside another card (a link in its text) keeps the outer card open while the pointer is on either of them: leaving the outer card for the inner one does not start the outer card's close timer to completion. When the last inner card closes with the pointer outside every card (and focus outside them), the outer card closes too, after its \`closeDelay\`.
+
+\`\`\`svelte
+<HoverCard trigger={{ content: 'Entasis', variant: 'link' }} title="Entasis">
+	Built on
+	<HoverCard trigger={{ content: 'Svelte', variant: 'link' }} title="Svelte" position="right">
+		Cybernetically enhanced web apps.
+	</HoverCard>
+</HoverCard>
+\`\`\`
+
+### A link in a paragraph
+
+\`\`\`svelte
+<p class="w-56">
+	Read the
+	<HoverCard wrap arrow>
+		{#snippet trigger()}
+			<span class="underline">full release notes for this version</span>
+		{/snippet}
+		Anchored to the line the pointer entered.
+	</HoverCard>
+	before upgrading.
+</p>
+\`\`\`
+
 ### Delays
 \`\`\`svelte
 <HoverCard delay={300} closeDelay={200} trigger="Hover">
@@ -81,9 +112,37 @@ HoverCard previews supplemental content when a trigger is hovered or focused. It
 </HoverCard>
 \`\`\`
 
+## Styling hooks
+
+The card is a Popover panel and carries its state attributes; the trigger carries the popup state.
+
+Attributes are presence attributes (set while the state holds, omitted otherwise) unless they carry a value.
+
+**Data attributes**
+- \`data-open\`: On the card: present while open.
+- \`data-closed\`: On the card: present while its exit transition plays.
+- \`data-entering\`: On the card: present while the enter transition plays.
+- \`data-exiting\`: On the card: present while the exit transition plays.
+- \`data-side\`: On the card: the side of the trigger it sits on after flipping, \`top\`, \`right\`, \`bottom\` or \`left\`; \`inline-start\` / \`inline-end\` when a logical \`position\` was requested.
+- \`data-align\`: On the card: \`start\`, \`center\` or \`end\`, how it lines up with the trigger.
+- \`data-anchor-hidden\`: On the card: present while the trigger is scrolled out of view.
+- \`data-state\`: On the trigger: \`open\` or \`closed\` (kept for compatibility; prefer \`data-popup-open\`).
+- \`data-popup-open\`: On the trigger: present while the card is open.
+- \`data-popup-side\`: On the trigger: the card's \`data-side\` while it is placed.
+- \`data-disabled\`: On the trigger: present while \`disabled\`.
+
+**CSS variables** (set on the card's positioned wrapper and inherited by the card, which is the panel below)
+- \`--available-width\`: The width in px the panel 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 panel's side, minus 20px. Cap a scrolling list with \`max-height: min(240px, var(--available-height))\`.
+- \`--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 panel corner facing the trigger, mirrored in right-to-left documents; the point the panel scales from.
+
+The typed maps \`hoverCardDataAttributes\` and \`hoverCardCssVariables\` (from \`entasis/hover-card\`) list each name with its meaning.
+
 ## Accessibility
 
-- Opens on pointer hover and keyboard focus by default.
+- Opens on pointer hover and keyboard focus by default. Hover means a mouse or a pen: a touch tap's pointer events never open or close the card, focus does.
 - Escape and outside click dismissal are delegated to Popover.
 - Button triggers receive aria-haspopup, aria-expanded, and aria-controls.
 - HoverCard is best for supplemental previews; primary content should remain reachable without hover.

package/dist/components/HoverCard/hoverCard.props.d.ts

@@ -63,6 +63,25 @@ export type HoverCardProps = WithAttachments<{
     density?: Density;
     /** When true, prevents hover, focus, and click opening. */
     disabled?: boolean;
+    /**
+     * Lets the trigger wrap across lines like text, for a link inside a paragraph: it renders
+     * inline instead of inline-flex, and the card anchors to the line the pointer entered on
+     * (`anchorTo: 'line'`) instead of the box that spans both lines. Applies to a snippet or button
+     * trigger; a string trigger is a button, which is one box.
+     * @default false
+     */
+    wrap?: boolean;
+    /**
+     * What the card anchors to when its trigger wraps across lines: the whole box, or the line the
+     * pointer entered on, kept while the card is open. Defaults to `'line'` with `wrap`.
+     * @default 'box'
+     */
+    anchorTo?: PopoverProps['anchorTo'];
+    /**
+     * Draws an arrow from the card toward its trigger. Style it with `popover.theme.arrow`.
+     * @default false
+     */
+    arrow?: PopoverProps['arrow'];
     /** Additional CSS classes merged onto the Card surface. */
     class?: string;
     /** Additional CSS classes merged onto the trigger wrapper. */

package/dist/components/HoverCard/hoverCard.theme.d.ts

@@ -7,6 +7,10 @@ export declare const hoverCardTheme: {
             true: string;
             false: null;
         };
+        wrap: {
+            true: string;
+            false: string;
+        };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     popover: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     card: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
@@ -26,6 +30,10 @@ export declare const setHoverCardTheme: (theme: InferComponentTheme<{
             true: string;
             false: null;
         };
+        wrap: {
+            true: string;
+            false: string;
+        };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     popover: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     card: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
@@ -43,6 +51,10 @@ export declare const useHoverCardTheme: import("../../utils/cva/theme.js").UseCo
             true: string;
             false: null;
         };
+        wrap: {
+            true: string;
+            false: string;
+        };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     popover: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     card: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{

package/dist/components/HoverCard/hoverCard.theme.js

@@ -2,15 +2,22 @@ import { setComponentTheme, useComponentTheme } from '../../utils/cva/index.js';
 import { cva } from '../../utils/cva/index.js';
 import { motion, useComponentMotion } from '../../utils/motion/index.js';
 const defaultHoverCardTrigger = cva({
-    base: 'inline-flex w-fit max-w-full outline-none',
+    base: 'max-w-full outline-none',
     variants: {
         disabled: {
             true: 'pointer-events-none opacity-55',
             false: null
+        },
+        // A wrapping trigger flows like text, so a link in a paragraph breaks across lines and each
+        // line keeps its own box; its box-decoration (rings, rounding) repeats on every line.
+        wrap: {
+            true: 'box-decoration-clone inline',
+            false: 'inline-flex w-fit'
         }
     },
     defaultVariants: {
-        disabled: false
+        disabled: false,
+        wrap: false
     }
 });
 const defaultHoverCardPopover = cva({

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

@@ -1,3 +1,4 @@
 export { default as HoverCard } from './HoverCard.svelte';
 export type { HoverCardPayload, HoverCardProps, HoverCardTrigger } from './hoverCard.props.js';
 export { hoverCardTheme, setHoverCardTheme, useHoverCardTheme, type HoverCardTheme, type HoverCardThemeProps } from './hoverCard.theme.js';
+export { hoverCardDataAttributes, hoverCardCssVariables, type HoverCardDataAttribute, type HoverCardCssVariable } from './hoverCard.attributes.js';

package/dist/components/HoverCard/index.js

@@ -1,2 +1,3 @@
 export { default as HoverCard } from './HoverCard.svelte';
 export { hoverCardTheme, setHoverCardTheme, useHoverCardTheme } from './hoverCard.theme.js';
+export { hoverCardDataAttributes, hoverCardCssVariables } from './hoverCard.attributes.js';

package/dist/components/ImageGallery/imageGallery.state.svelte.d.ts

@@ -15,7 +15,7 @@ type ImageGalleryStateOptions = MakeRequired<Pick<ImageGalleryProps, 'imageSelec
     messages: Messages;
 };
 type ImageGalleryAttachmentConfig = Pick<ImageGalleryStateOptions, 'imageSelector' | 'disabled' | 'zoomMargin' | 'transitionDuration' | 'transitionEasing' | 'closeOnClickOutside' | 'closeOnEscape' | 'lockScroll' | 'buttonLabel' | 'closeLabel' | 'previousLabel' | 'nextLabel' | 'licenseKey' | 'hasCustomCaption'>;
-declare const ImageGalleryState_base: new (props: ImageGalleryStateOptions) => {} & Omit<Pick<ImageGalleryProps, "disabled" | "onOpenChange" | "closeOnEscape" | "lockScroll" | "closeOnClickOutside" | "onAfterOpen" | "onAfterClose" | "previousLabel" | "nextLabel" | "imageSelector" | "zoomMargin" | "buttonLabel" | "closeLabel" | "licenseKey" | "onIndexChange">, "disabled" | "closeOnEscape" | "lockScroll" | "closeOnClickOutside" | "previousLabel" | "nextLabel" | "imageSelector" | "zoomMargin" | "buttonLabel" | "closeLabel" | "licenseKey"> & Required<Pick<Pick<ImageGalleryProps, "disabled" | "onOpenChange" | "closeOnEscape" | "lockScroll" | "closeOnClickOutside" | "onAfterOpen" | "onAfterClose" | "previousLabel" | "nextLabel" | "imageSelector" | "zoomMargin" | "buttonLabel" | "closeLabel" | "licenseKey" | "onIndexChange">, "disabled" | "closeOnEscape" | "lockScroll" | "closeOnClickOutside" | "previousLabel" | "nextLabel" | "imageSelector" | "zoomMargin" | "buttonLabel" | "closeLabel" | "licenseKey">> & {
+declare const ImageGalleryState_base: new (props: ImageGalleryStateOptions) => {} & Omit<Pick<ImageGalleryProps, "disabled" | "onOpenChange" | "onAfterOpen" | "onAfterClose" | "closeOnEscape" | "lockScroll" | "closeOnClickOutside" | "nextLabel" | "previousLabel" | "imageSelector" | "zoomMargin" | "buttonLabel" | "closeLabel" | "licenseKey" | "onIndexChange">, "disabled" | "closeOnEscape" | "lockScroll" | "closeOnClickOutside" | "nextLabel" | "previousLabel" | "imageSelector" | "zoomMargin" | "buttonLabel" | "closeLabel" | "licenseKey"> & Required<Pick<Pick<ImageGalleryProps, "disabled" | "onOpenChange" | "onAfterOpen" | "onAfterClose" | "closeOnEscape" | "lockScroll" | "closeOnClickOutside" | "nextLabel" | "previousLabel" | "imageSelector" | "zoomMargin" | "buttonLabel" | "closeLabel" | "licenseKey" | "onIndexChange">, "disabled" | "closeOnEscape" | "lockScroll" | "closeOnClickOutside" | "nextLabel" | "previousLabel" | "imageSelector" | "zoomMargin" | "buttonLabel" | "closeLabel" | "licenseKey">> & {
     isOpen: boolean;
     /** Lightbox animation duration in ms, resolved from the `motion` theme slot. */
     transitionDuration: number;