entasis 0.11.0 → 0.12.0

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

@@ -5,6 +5,7 @@ import type { Colors, Sizes } from '../../types/theme.js';
 import type { FSOProps } from '../../transitions/transition.js';
 import type { Slot } from '../Slot/slot.js';
 import type { ButtonProps } from '../Button/index.js';
+import type { OpenChangeHandler } from '../../utils/openChange.js';
 import type { TooltipThemeProps } from './tooltip.theme.js';
 /** Everything the `tooltip()` attachment accepts; the component spreads the same options. */
 export type TooltipOptions = {
@@ -22,12 +23,44 @@ export type TooltipOptions = {
     variant?: 'solid' | 'outline' | 'soft';
     /** Hover delay in milliseconds; zero shows immediately. Defaults to 400. */
     delay?: number;
+    /**
+     * Milliseconds between the pointer leaving the trigger (or the content) and the tooltip
+     * closing. Defaults to 0. With `hoverable` content the pointer always gets at least 100 ms to
+     * cross the gap to it. Moving to another tooltip trigger within this time hands the surface
+     * over without closing it.
+     */
+    closeDelay?: number;
+    /**
+     * Keeps the tooltip open while the pointer is over its content, so a user can read it, select
+     * text or reach a link (WCAG 1.4.13). Defaults to true. `false` makes the content ignore the
+     * pointer, so it never covers what is behind it, and the tooltip closes as soon as the pointer
+     * leaves the trigger.
+     */
+    hoverable?: boolean;
+    /**
+     * Closes the tooltip when the trigger is pressed. It stays closed until the pointer leaves the
+     * trigger or focus moves away. Defaults to true; `false` leaves it open after a press.
+     */
+    closeOnClick?: boolean;
+    /**
+     * Turns the tooltip off: hover and focus do not open it and an open one closes. Read live.
+     * Also drops `aria-describedby` from the trigger.
+     */
+    disabled?: boolean;
     /** Gap from the attached element in pixels. */
     offset?: number;
     /** Opening and closing transition overrides. */
     transition?: FSOProps;
     /** Theme overrides for the tooltip surface. */
     theme?: TooltipThemeProps;
+    /**
+     * Called before the tooltip shows or hides, with the requested state and the change details:
+     * `reason` (`'trigger-hover'`, `'trigger-focus'`, `'trigger-press'`, `'outside-press'`,
+     * `'escape-key'`), the originating `event` and `trigger`, and `cancel()` to keep the tooltip as
+     * it was. When another tooltip takes the shared surface, the one it leaves is told with a
+     * change that cannot be cancelled.
+     */
+    onOpenChange?: OpenChangeHandler;
     /** Called after the opening transition completes. */
     onAfterOpen?: () => void;
     /** Called after the closing transition completes. */
@@ -50,6 +83,4 @@ export type TooltipProps = TooltipOptions & {
     open?: boolean;
     /** Initial open state when `open` is not provided. */
     defaultOpen?: boolean;
-    /** Called whenever the tooltip becomes visible or hidden, hover and focus included. */
-    onOpenChange?: (open: boolean) => void;
 };

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

@@ -0,0 +1,24 @@
+import { type OpenChangeDetails, type OpenChangeInit } from '../../utils/openChange.js';
+import type { TooltipOptions } from './tooltip.props.js';
+/** The tooltip the shared surface shows, and the element it is anchored to. */
+export type TooltipEntry = TooltipOptions & {
+    ref: HTMLElement;
+};
+/** The slice of the Theme state the surface lives in. */
+type TooltipSurfaceOwner = {
+    tooltip: TooltipEntry | null;
+};
+/** Pointer travel between a trigger and the content its tooltip shows. */
+type ContentHoverListener = (inside: boolean, event?: Event) => void;
+/** A trigger asks to hear when the pointer enters or leaves the content of its tooltip. */
+export declare const watchTooltipContentHover: (trigger: HTMLElement, listener: ContentHoverListener) => () => void;
+/** The surface reports the pointer moving onto or off the content shown for `trigger`. */
+export declare const reportTooltipContentHover: (trigger: HTMLElement, inside: boolean, event?: Event) => void | undefined;
+/**
+ * Puts `next` on the shared surface (`null` closes it). The callback of the tooltip that opens, or
+ * of the one that closes, runs first and may cancel; a tooltip that is pushed off by another one
+ * is told afterwards, with a change it cannot cancel. Returns whether the surface changed hands
+ * (`true` too when it already showed `next`).
+ */
+export declare function requestTooltipChange(owner: TooltipSurfaceOwner, next: TooltipEntry | null, input?: OpenChangeDetails | OpenChangeInit): boolean;
+export {};

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

@@ -0,0 +1,42 @@
+// What the `tooltip()` attachment and `TooltipHost` share about the one tooltip surface: the entry
+// a trigger puts on it, the single place where it changes hands (so `onOpenChange` hears about
+// every change before it happens), and how the pointer entering the content reaches its trigger.
+import { createOpenChangeDetails, requestOpenChange, resolveOpenChangeDetails } from '../../utils/openChange.js';
+const contentHovers = new WeakMap();
+/** A trigger asks to hear when the pointer enters or leaves the content of its tooltip. */
+export const watchTooltipContentHover = (trigger, listener) => {
+    contentHovers.set(trigger, listener);
+    return () => {
+        if (contentHovers.get(trigger) === listener)
+            contentHovers.delete(trigger);
+    };
+};
+/** The surface reports the pointer moving onto or off the content shown for `trigger`. */
+export const reportTooltipContentHover = (trigger, inside, event) => contentHovers.get(trigger)?.(inside, event);
+/**
+ * Puts `next` on the shared surface (`null` closes it). The callback of the tooltip that opens, or
+ * of the one that closes, runs first and may cancel; a tooltip that is pushed off by another one
+ * is told afterwards, with a change it cannot cancel. Returns whether the surface changed hands
+ * (`true` too when it already showed `next`).
+ */
+export function requestTooltipChange(owner, next, input) {
+    const current = owner.tooltip;
+    if (!next && !current)
+        return true;
+    if (next && current?.ref === next.ref)
+        return true;
+    const details = resolveOpenChangeDetails(input, { trigger: (next ?? current).ref });
+    if (!requestOpenChange((next ?? current).onOpenChange, !!next, details))
+        return false;
+    if (next && current) {
+        current.onOpenChange?.(false, createOpenChangeDetails({
+            reason: details.reason,
+            event: details.event,
+            trigger: current.ref,
+            interaction: details.interaction,
+            cancelable: false
+        }));
+    }
+    owner.tooltip = next;
+    return true;
+}

package/dist/components/Tree/TreeContextMenuSurface.svelte

@@ -3,6 +3,7 @@
 	import { on } from 'svelte/events';
 	import Menu from '../Menu/Menu.svelte';
 	import type { MenuItem } from '../Menu/menu.props.js';
+	import { providePopupMenuRoot } from '../PopupMenu/popupMenu.context.js';
 	import type { TreeContextMenuSnippetData } from './TreeSnippetRenderer.js';
 	import { cx } from '../../utils/cva/index.js';
 
@@ -21,6 +22,10 @@
 
 	const menuStyle = $derived(createMenuStyle(data));
 
+	// The surface is the root of the menu tree: a press in a submenu flyout, which is portaled out
+	// of the surface and never reaches `closeAfterAction`, closes the whole context menu too.
+	providePopupMenuRoot({ closeOnItemClick: () => true, close: () => data.close() });
+
 	function createMenuStyle(menuData: TreeContextMenuSnippetData): string {
 		const rect = menuData.context.anchorRect;
 		return `position:fixed;left:${rect.x}px;top:${rect.y + rect.height}px`;
@@ -31,12 +36,20 @@
 	}
 
 	function handleMenuClick(event: MouseEvent): void {
-		const interactiveElement = event
-			.composedPath()
-			.find((node) => node instanceof HTMLButtonElement || node instanceof HTMLAnchorElement);
+		const path = event.composedPath();
+		const interactiveElement = path.find(
+			(node) => node instanceof HTMLButtonElement || node instanceof HTMLAnchorElement
+		);
 
 		if (!(interactiveElement instanceof HTMLElement)) return;
 		if ((interactiveElement as NavigationElement).onNext != null) return;
+		// Checkable rows and rows with `closeOnClick: false` keep the menu open, as in a PopupMenu.
+		if (
+			path.some(
+				(node) => node instanceof HTMLElement && node.getAttribute('data-menu-keep-open') === 'true'
+			)
+		)
+			return;
 
 		data.close();
 	}

package/dist/components/Utils/BeforeHydratation.svelte

@@ -1,17 +1,28 @@
 <script lang="ts">
+	import { getContext } from 'svelte';
+	import { nonceAttribute } from '../../utils/cspNonce.js';
+	import type { ThemeState } from '../Theme/theme.state.svelte.js';
+
 	let {
 		once = false,
 		immediate = false,
 		scripts = [],
-		css = []
+		css = [],
+		nonce: nonceProp
 	}: {
 		once?: boolean;
 		/** Executes while the document is parsing instead of waiting for DOMContentLoaded. */
 		immediate?: boolean;
 		scripts?: string[];
 		css?: string[];
+		/** CSP nonce for the emitted `<script>` and `<style>`. Defaults to the Theme's `nonce`. */
+		nonce?: string;
 	} = $props();
 
+	// Optional: the Theme context is absent when this renders outside a `<Theme>`.
+	const theme = getContext<ThemeState | undefined>('entasisTheme');
+	const nonce = $derived(nonceAttribute(nonceProp ?? theme?.nonce));
+
 	const id = $props.id();
 	const source = $derived(scripts.join('\n'));
 	const removeScript = $derived(
@@ -21,7 +32,7 @@
 
 <!-- eslint-disable svelte/no-at-html-tags -- this component exists to inject caller-supplied <script>/<style> text into <head> before hydration; raw HTML is its entire contract -->
 <svelte:head>
-	{@html /*html*/ `<s${'cript'} id="${id}">
+	{@html /*html*/ `<s${'cript'} id="${id}"${nonce}>
 	${
 		immediate
 			? `${source}
@@ -38,7 +49,7 @@
 	}`
 	}
 	</s${'cript'}>`}
-	{@html `<s${'tyle'}>
+	{@html `<s${'tyle'}${nonce}>
             ${css.join('\n\n')}
         </s${'tyle'}>`}
 </svelte:head>

package/dist/components/Utils/BeforeHydratation.svelte.d.ts

@@ -4,6 +4,8 @@ type $$ComponentProps = {
     immediate?: boolean;
     scripts?: string[];
     css?: string[];
+    /** CSP nonce for the emitted `<script>` and `<style>`. Defaults to the Theme's `nonce`. */
+    nonce?: string;
 };
 declare const BeforeHydratation: import("svelte").Component<$$ComponentProps, {}, "">;
 type BeforeHydratation = ReturnType<typeof BeforeHydratation>;

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

@@ -15,6 +15,6 @@ declare const VideoPlayer: import("svelte").Component<Props, {
     toggleFullscreen: () => Promise<void>;
     togglePictureInPicture: () => Promise<void>;
     getSnapshot: () => VideoPlayerSnapshot;
-}, "ended" | "error" | "muted" | "duration" | "ref" | "fullscreen" | "loop" | "pictureInPicture" | "volume" | "paused" | "currentTime" | "buffered" | "rootRef" | "playbackRate" | "captionsEnabled" | "activeTextTrack">;
+}, "ended" | "error" | "muted" | "duration" | "ref" | "loop" | "fullscreen" | "pictureInPicture" | "volume" | "paused" | "currentTime" | "buffered" | "rootRef" | "playbackRate" | "captionsEnabled" | "activeTextTrack">;
 type VideoPlayer = ReturnType<typeof VideoPlayer>;
 export default VideoPlayer;

package/dist/components/VideoPlayer/VideoPlayerSettings.svelte

@@ -107,6 +107,7 @@
 {#if hasMenuItems}
 	<PopupMenu
 		bind:open
+		{size}
 		position="top-end"
 		offset={8}
 		lockScroll={false}
@@ -116,6 +117,7 @@
 		class={classes.popoverPanel({ className: 'min-w-52 p-1' })}
 		menu={{
 			items: menuItems,
+			size,
 			class: classes.menu(),
 			footer: includeVolume ? volumeFooter : undefined,
 			theme: {

package/dist/generated/componentAliases.d.ts

@@ -36,6 +36,7 @@ export const componentAliases: {
     'entasis/selection-menu': string;
     'entasis/ask': string;
     'entasis/field': string;
+    'entasis/autocomplete': string;
     'entasis/calendar': string;
     'entasis/checkbox': string;
     'entasis/checkboxes-input': string;
@@ -85,6 +86,7 @@ export const componentAliases: {
     'entasis/empty': string;
     'entasis/meter': string;
     'entasis/network-indicator': string;
+    'entasis/progress': string;
     'entasis/progress-circle': string;
     'entasis/skeleton': string;
     'entasis/spinner': string;
@@ -94,6 +96,7 @@ export const componentAliases: {
     'entasis/collapsible': string;
     'entasis/breadcrumbs': string;
     'entasis/command': string;
+    'entasis/navigation-menu': string;
     'entasis/pagination': string;
     'entasis/stepper': string;
     'entasis/tabbar': string;

package/dist/generated/componentAliases.js

@@ -37,6 +37,7 @@ export const componentAliases = {
 	'entasis/selection-menu': './src/lib/components/SelectionMenu/index.ts',
 	'entasis/ask': './src/lib/components/Form/Ask/index.ts',
 	'entasis/field': './src/lib/components/Form/Field/index.ts',
+	'entasis/autocomplete': './src/lib/components/Form/Autocomplete/index.ts',
 	'entasis/calendar': './src/lib/components/Form/Calendar/index.ts',
 	'entasis/checkbox': './src/lib/components/Form/Checkbox/index.ts',
 	'entasis/checkboxes-input': './src/lib/components/Form/CheckboxesInput/index.ts',
@@ -86,6 +87,7 @@ export const componentAliases = {
 	'entasis/empty': './src/lib/components/Empty/index.ts',
 	'entasis/meter': './src/lib/components/Meter/index.ts',
 	'entasis/network-indicator': './src/lib/components/NetworkIndicator/index.ts',
+	'entasis/progress': './src/lib/components/Progress/index.ts',
 	'entasis/progress-circle': './src/lib/components/ProgressCircle/index.ts',
 	'entasis/skeleton': './src/lib/components/Skeleton/index.ts',
 	'entasis/spinner': './src/lib/components/Spinner/index.ts',
@@ -95,6 +97,7 @@ export const componentAliases = {
 	'entasis/collapsible': './src/lib/components/Collapsible/index.ts',
 	'entasis/breadcrumbs': './src/lib/components/Breadcrumbs/index.ts',
 	'entasis/command': './src/lib/components/Command/index.ts',
+	'entasis/navigation-menu': './src/lib/components/NavigationMenu/index.ts',
 	'entasis/pagination': './src/lib/components/Pagination/index.ts',
 	'entasis/stepper': './src/lib/components/Stepper/index.ts',
 	'entasis/tabbar': './src/lib/components/Tabbar/index.ts',