entasis 0.10.2 → 0.12.0

package/dist/components/NavigationMenu/NavigationMenu.svelte

@@ -0,0 +1,181 @@
+<script lang="ts" generics="Value extends string = string">
+	import type { Attachment } from 'svelte/attachments';
+	import Button from '../Button/Button.svelte';
+	import { useDefaultColor } from '../Theme/theme.state.svelte.js';
+	import { transitionSize } from '../../attachments/transitionSize.js';
+	import { createBindableValue } from '../../utils/state.svelte.js';
+	import { composeHandlers } from '../../utils/handlers.js';
+	import {
+		openStateAttributes,
+		transitionStatusAttributes,
+		presence
+	} from '../../utils/stateAttributes.js';
+	import NavigationMenuContent from './NavigationMenuContent.svelte';
+	import NavigationMenuTrigger from './NavigationMenuTrigger.svelte';
+	import type { NavigationMenuProps } from './navigationMenu.props.js';
+	import {
+		setNavigationMenuState,
+		useNavigationMenuState,
+		type NavigationMenuState
+	} from './navigationMenu.state.svelte.js';
+	import { useNavigationMenuTheme } from './navigationMenu.theme.js';
+
+	let {
+		items,
+		label,
+		ref = $bindable(null),
+		value = $bindable(),
+		defaultValue = null,
+		onValueChange,
+		openOnHover = true,
+		delay = 50,
+		closeDelay = 100,
+		keepMounted = false,
+		onAfterOpen,
+		onAfterClose,
+		size = 'normal',
+		density = 'normal',
+		color,
+		dir,
+		transition,
+		class: className = '',
+		theme,
+		...attachments
+	}: NavigationMenuProps<Value> = $props();
+
+	const id = $props.id();
+	const classes = $derived(useNavigationMenuTheme(theme));
+	const resolvedColor = $derived(useDefaultColor(color));
+
+	const valueState = createBindableValue<Value | null>(
+		() => value,
+		(next) => {
+			value = next;
+		},
+		() => defaultValue
+	);
+
+	const menu = useNavigationMenuState<Value>({
+		id,
+		items: () => items,
+		value: () => valueState.value,
+		setValue: (next) => {
+			valueState.value = next;
+		},
+		onValueChange: () => onValueChange,
+		openOnHover: () => openOnHover,
+		delay: () => delay,
+		closeDelay: () => closeDelay,
+		keepMounted: () => keepMounted,
+		dir: () => dir,
+		transition: () => transition,
+		motion: () => theme?.motion,
+		onAfterOpen: () => onAfterOpen,
+		onAfterClose: () => onAfterClose
+	});
+	// Svelte's `out:` directive takes an identifier.
+	const panelOut = menu.panelOut;
+	setNavigationMenuState(menu as unknown as NavigationMenuState<string>);
+
+	// The current page: `aria-current` is not a Button prop, so it is written on the element.
+	const ariaCurrent =
+		(current: boolean): Attachment<HTMLElement> =>
+		(node) => {
+			if (!current) return;
+			node.setAttribute('aria-current', 'page');
+			return () => node.removeAttribute('aria-current');
+		};
+
+	// Keys that matter for a stable list: panels by value, links by position.
+	const itemKey = (item: (typeof items)[number], index: number) =>
+		item.type === 'panel' ? `panel:${item.value}` : `link:${index}`;
+</script>
+
+<nav
+	bind:this={ref}
+	aria-label={label}
+	{dir}
+	data-color={resolvedColor}
+	data-size={size}
+	data-density={density}
+	{...openStateAttributes(menu.isOpen)}
+	class={classes.root({ size, className })}
+	onfocusout={menu.handleFocusOut}
+	{@attach menu.root}
+	{...attachments}
+>
+	<ul class={classes.list({ size })} {@attach menu.list}>
+		{#each items as item, index (itemKey(item, index))}
+			<li class={classes.item()}>
+				{#if item.type === 'panel'}
+					<NavigationMenuTrigger {item} {size} color={resolvedColor} {classes} />
+				{:else}
+					{@const link = item}
+					<Button
+						href={link.href}
+						target={link.target}
+						rel={link.rel}
+						variant="ghost"
+						{size}
+						color={resolvedColor}
+						disabled={link.disabled}
+						label={link.iconOnly && typeof link.label === 'string' ? link.label : undefined}
+						prefix={link.prefix}
+						children={link.iconOnly ? undefined : link.label}
+						data-slot="navigation-menu-link"
+						data-selected={presence(link.active)}
+						data-disabled={presence(link.disabled)}
+						class={classes.link({ active: !!link.active })}
+						onclick={composeHandlers(link.onclick, menu.pressLink)}
+						{@attach ariaCurrent(!!link.active)}
+					/>
+				{/if}
+			</li>
+		{/each}
+	</ul>
+
+	{#if menu.rendered}
+		<div
+			{@attach menu.viewport}
+			hidden={!menu.visible}
+			data-side="bottom"
+			data-align="start"
+			{...openStateAttributes(menu.isOpen)}
+			class={classes.viewport({ switching: menu.activationDirection !== null })}
+			style:top="var(--navigation-menu-anchor-bottom, 100%)"
+			style:z-index={menu.layer.zIndex}
+			style:translate={menu.direction === 'rtl'
+				? 'clamp(var(--navigation-menu-min-x), calc(var(--navigation-menu-anchor-end) - 100%), calc(var(--navigation-menu-max-x) - 100%))'
+				: 'clamp(var(--navigation-menu-min-x), var(--navigation-menu-anchor-start), calc(var(--navigation-menu-max-x) - 100%))'}
+		>
+			<div
+				{@attach menu.popup}
+				{@attach transitionSize({ axis: 'both', isActive: () => menu.isSwitching() })}
+				data-side="bottom"
+				data-align="start"
+				{...openStateAttributes(menu.isOpen)}
+				{...transitionStatusAttributes(menu.status)}
+				class={classes.popup({ density })}
+			>
+				{#each menu.panels as panel (panel.value)}
+					{#if keepMounted || panel.value === menu.displayValue}
+						{@const active = panel.value === menu.displayValue && menu.isOpen}
+						<div
+							id={menu.panelId(panel.value)}
+							hidden={!active}
+							data-activation-direction={active
+								? (menu.activationDirection ?? undefined)
+								: undefined}
+							{...openStateAttributes(active)}
+							class={classes.panel({ density })}
+							{@attach menu.panel(panel.value)}
+							out:panelOut
+						>
+							<NavigationMenuContent item={panel} {size} {density} {classes} />
+						</div>
+					{/if}
+				{/each}
+			</div>
+		</div>
+	{/if}
+</nav>

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

@@ -0,0 +1,25 @@
+import type { NavigationMenuProps } from './navigationMenu.props.js';
+declare function $$render<Value extends string = string>(): {
+    props: NavigationMenuProps<Value>;
+    exports: {};
+    bindings: "value" | "ref";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Value extends string = string> {
+    props(): ReturnType<typeof $$render<Value>>['props'];
+    events(): ReturnType<typeof $$render<Value>>['events'];
+    slots(): ReturnType<typeof $$render<Value>>['slots'];
+    bindings(): "value" | "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Value extends string = string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Value>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Value>['props']>, ReturnType<__sveltets_Render<Value>['events']>, ReturnType<__sveltets_Render<Value>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Value>['bindings']>;
+    } & ReturnType<__sveltets_Render<Value>['exports']>;
+    <Value extends string = string>(internal: unknown, props: ReturnType<__sveltets_Render<Value>['props']> & {}): ReturnType<__sveltets_Render<Value>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const NavigationMenu: $$IsomorphicComponent;
+type NavigationMenu<Value extends string = string> = InstanceType<typeof NavigationMenu<Value>>;
+export default NavigationMenu;

package/dist/components/NavigationMenu/NavigationMenuContent.svelte

@@ -0,0 +1,141 @@
+<script lang="ts">
+	import Slot from '../Slot/Slot.svelte';
+	import { caretDownIcon } from '../Icons/caretDown.js';
+	import type { Density, Sizes } from '../../types/theme.js';
+	import { composeHandlers } from '../../utils/handlers.js';
+	import { itemStateAttributes } from '../../utils/stateAttributes.js';
+	import { on } from 'svelte/events';
+	import type { Attachment } from 'svelte/attachments';
+	import { getNavigationMenuState } from './navigationMenu.state.svelte.js';
+	import type {
+		NavigationMenuItem,
+		NavigationMenuLink,
+		NavigationMenuPanel
+	} from './navigationMenu.props.js';
+	import type { useNavigationMenuTheme } from './navigationMenu.theme.js';
+
+	type Classes = ReturnType<typeof useNavigationMenuTheme>;
+
+	// Keyboard focus reads like a highlighted menu row: the shared state layer fills the row through
+	// `data-highlighted`, with no ring, as in Menu and PopupMenu. Pointer focus adds nothing (hover
+	// already fills the row).
+	const highlightOnKeyboardFocus: Attachment<HTMLElement> = (node) => {
+		const offFocus = on(node, 'focus', () => {
+			if (node.matches(':focus-visible')) node.dataset.highlighted = 'true';
+		});
+		const offBlur = on(node, 'blur', () => {
+			delete node.dataset.highlighted;
+		});
+		return () => {
+			offFocus();
+			offBlur();
+			delete node.dataset.highlighted;
+		};
+	};
+
+	let {
+		item,
+		size,
+		density,
+		classes
+	}: {
+		item: NavigationMenuPanel<string>;
+		size: Sizes;
+		density: Density;
+		classes: Classes;
+	} = $props();
+
+	const menu = getNavigationMenuState();
+	const rootId = $derived(menu.panelId(item.value));
+
+	function pressDisabled(event: MouseEvent) {
+		event.preventDefault();
+	}
+</script>
+
+{#snippet linkRow(link: NavigationMenuLink)}
+	<!-- eslint-disable svelte/no-navigation-without-resolve -- Package consumers supply URLs; library links cannot depend on SvelteKit routing. -->
+	<a
+		href={link.disabled ? undefined : link.href}
+		target={link.target}
+		rel={link.rel}
+		role={link.disabled ? 'link' : undefined}
+		aria-disabled={link.disabled ? 'true' : undefined}
+		aria-current={link.active ? 'page' : undefined}
+		tabindex={link.disabled ? -1 : undefined}
+		data-slot="navigation-menu-content-link"
+		{...itemStateAttributes({ selected: link.active, disabled: link.disabled })}
+		class={classes.contentLink({ size, density, active: !!link.active, disabled: !!link.disabled })}
+		{@attach highlightOnKeyboardFocus}
+		onclick={link.disabled ? pressDisabled : composeHandlers(link.onclick, menu.pressLink)}
+	>
+		{#if link.prefix}
+			<span class={classes.contentPrefix()}><Slot render={link.prefix} /></span>
+		{/if}
+		<span class={classes.contentText()}>
+			<span class={classes.contentTitle()}><Slot render={link.label} /></span>
+			{#if link.description}
+				<span class={classes.contentDescription()}><Slot render={link.description} /></span>
+			{/if}
+		</span>
+	</a>
+	<!-- eslint-enable svelte/no-navigation-without-resolve -->
+{/snippet}
+
+{#snippet body(entry: NavigationMenuPanel<string>, path: string, depth: number)}
+	{#if Array.isArray(entry.content)}
+		<ul class={classes.contentList({ density, nested: depth > 0 })}>
+			{#each entry.content as link, index (index)}
+				<li>{@render linkRow(link)}</li>
+			{/each}
+		</ul>
+	{:else if entry.content}
+		{@render entry.content({ close: () => menu.close() })}
+	{/if}
+	{#if entry.items?.length}
+		{@render level(entry.items, path, depth + 1)}
+	{/if}
+{/snippet}
+
+{#snippet level(entries: NavigationMenuItem<string>[], path: string, depth: number)}
+	<ul class={classes.contentList({ density, nested: depth > 0 })}>
+		{#each entries as entry, index (entry.type === 'panel' ? `panel:${entry.value}` : `link:${index}`)}
+			<li>
+				{#if entry.type === 'link'}
+					{@render linkRow(entry)}
+				{:else}
+					{@const nestedPath = `${path}-${index}`}
+					{@const nestedId = `${rootId}-${nestedPath}`}
+					{@const expanded = menu.nestedOpen.has(entry.value)}
+					<button
+						type="button"
+						id={`${nestedId}-trigger`}
+						disabled={entry.disabled}
+						aria-expanded={expanded}
+						aria-controls={expanded || menu.keepMounted ? nestedId : undefined}
+						data-slot="navigation-menu-nested-trigger"
+						{...itemStateAttributes({ disabled: entry.disabled })}
+						class={classes.nestedTrigger({ size, density, disabled: !!entry.disabled })}
+						{@attach highlightOnKeyboardFocus}
+						onclick={() => {
+							if (expanded) menu.nestedOpen.delete(entry.value);
+							else menu.nestedOpen.add(entry.value);
+						}}
+					>
+						<span class={classes.contentTitle()}><Slot render={entry.label} /></span>
+						<span aria-hidden="true" class={classes.caret({ open: expanded })}>
+							{@render caretDownIcon({ size: 16 })}
+						</span>
+					</button>
+					{#if expanded || menu.keepMounted}
+						<div id={nestedId} hidden={!expanded}>
+							{@render body(entry, nestedPath, depth + 1)}
+						</div>
+					{/if}
+				{/if}
+			</li>
+		{/each}
+	</ul>
+{/snippet}
+
+{@render body(item, 'n', 0)}

package/dist/components/NavigationMenu/NavigationMenuContent.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Density, Sizes } from '../../types/theme.js';
+import type { NavigationMenuPanel } from './navigationMenu.props.js';
+import type { useNavigationMenuTheme } from './navigationMenu.theme.js';
+type Classes = ReturnType<typeof useNavigationMenuTheme>;
+type $$ComponentProps = {
+    item: NavigationMenuPanel<string>;
+    size: Sizes;
+    density: Density;
+    classes: Classes;
+};
+declare const NavigationMenuContent: import("svelte").Component<$$ComponentProps, {}, "">;
+type NavigationMenuContent = ReturnType<typeof NavigationMenuContent>;
+export default NavigationMenuContent;

package/dist/components/NavigationMenu/NavigationMenuTrigger.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import Button from '../Button/Button.svelte';
+	import { caretDownIcon } from '../Icons/caretDown.js';
+	import type { Colors, Sizes } from '../../types/theme.js';
+	import { useHoverAction } from '../../utils/useHoverAction.svelte.js';
+	import { popupTriggerAttributes, presence } from '../../utils/stateAttributes.js';
+	import { getNavigationMenuState } from './navigationMenu.state.svelte.js';
+	import type { NavigationMenuPanel } from './navigationMenu.props.js';
+	import type { useNavigationMenuTheme } from './navigationMenu.theme.js';
+
+	type Classes = ReturnType<typeof useNavigationMenuTheme>;
+
+	let {
+		item,
+		size,
+		color,
+		classes
+	}: {
+		item: NavigationMenuPanel<string>;
+		size: Sizes;
+		color: Colors;
+		classes: Classes;
+	} = $props();
+
+	const menu = getNavigationMenuState();
+	const open = $derived(menu.isOpenFor(item.value));
+
+	// Resting the pointer on the trigger opens its panel; once a panel is open, moving on to
+	// another trigger switches at once. A touch tap and a disabled trigger never hover.
+	const hover = useHoverAction({
+		isActive: () => menu.openOnHover && !menu.isOpenFor(item.value),
+		onMouseEnter: (event) => menu.hoverTrigger(item.value, event),
+		delay: () => (menu.isOpen ? 0 : menu.delay)
+	});
+	// A hover that began before the open panel changed another way (a press, Escape, a key) must
+	// not undo that change when its delay runs out, such as reopening a panel a press just closed.
+	$effect(() => {
+		void menu.value;
+		untrack(() => hover.cancel());
+	});
+
+	function press(event: MouseEvent) {
+		hover.cancel();
+		menu.pressTrigger(item.value, event);
+	}
+</script>
+
+{#snippet caret()}
+	<span aria-hidden="true" class={classes.caret({ open })}
+		>{@render caretDownIcon({ size: 16 })}</span
+	>
+{/snippet}
+
+<Button
+	id={menu.triggerId(item.value)}
+	variant="ghost"
+	{size}
+	{color}
+	disabled={item.disabled}
+	label={item.iconOnly && typeof item.label === 'string' ? item.label : undefined}
+	prefix={item.prefix}
+	children={item.iconOnly ? undefined : item.label}
+	suffix={caret}
+	expanded={open}
+	controls={menu.hasPanel(item.value) ? menu.panelId(item.value) : undefined}
+	data-slot="navigation-menu-trigger"
+	{...popupTriggerAttributes(open)}
+	data-disabled={presence(item.disabled)}
+	class={classes.trigger({ open })}
+	onclick={press}
+	{@attach menu.trigger(item.value)}
+	{@attach hover.reference}
+	{@attach open ? menu.safeArea.anchorReference : undefined}
+/>

package/dist/components/NavigationMenu/NavigationMenuTrigger.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Colors, Sizes } from '../../types/theme.js';
+import type { NavigationMenuPanel } from './navigationMenu.props.js';
+import type { useNavigationMenuTheme } from './navigationMenu.theme.js';
+type Classes = ReturnType<typeof useNavigationMenuTheme>;
+type $$ComponentProps = {
+    item: NavigationMenuPanel<string>;
+    size: Sizes;
+    color: Colors;
+    classes: Classes;
+};
+declare const NavigationMenuTrigger: import("svelte").Component<$$ComponentProps, {}, "">;
+type NavigationMenuTrigger = ReturnType<typeof NavigationMenuTrigger>;
+export default NavigationMenuTrigger;

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

@@ -0,0 +1,4 @@
+export { default as NavigationMenu } from './NavigationMenu.svelte';
+export type { NavigationMenuItem, NavigationMenuLink, NavigationMenuPanel, NavigationMenuPanelApi, NavigationMenuProps, NavigationMenuValueChangePayload } from './navigationMenu.props.js';
+export { navigationMenuCssVariables, navigationMenuDataAttributes, type NavigationMenuCssVariable, type NavigationMenuDataAttribute } from './navigationMenu.attributes.js';
+export { navigationMenuTheme, setNavigationMenuTheme, useNavigationMenuTheme, type NavigationMenuTheme, type NavigationMenuThemeProps } from './navigationMenu.theme.js';

package/dist/components/NavigationMenu/index.js

@@ -0,0 +1,3 @@
+export { default as NavigationMenu } from './NavigationMenu.svelte';
+export { navigationMenuCssVariables, navigationMenuDataAttributes } from './navigationMenu.attributes.js';
+export { navigationMenuTheme, setNavigationMenuTheme, useNavigationMenuTheme } from './navigationMenu.theme.js';

package/dist/components/NavigationMenu/navigationMenu.attributes.d.ts

@@ -0,0 +1,24 @@
+/**
+ * The styling hooks a NavigationMenu exposes. Attributes are presence attributes (`''` while the
+ * state holds, omitted otherwise) unless the description says they carry a value.
+ */
+export declare const navigationMenuDataAttributes: {
+    readonly 'data-open': `On the root, the popup and the open panel: ${string}`;
+    readonly 'data-closed': `On the root, the popup and a closed panel: ${string}`;
+    readonly 'data-entering': `On the popup: ${string}`;
+    readonly 'data-exiting': `On the popup: ${string}`;
+    readonly 'data-popup-open': `On a panel trigger: ${string}`;
+    readonly 'data-disabled': "On a disabled panel trigger, link or nested trigger: present while disabled.";
+    readonly 'data-selected': "On a link of the current page (the one with `active`): present while it is.";
+    readonly 'data-side': "On the viewport and the popup: always `bottom`, the side of the triggers the popup sits on.";
+    readonly 'data-align': "On the viewport and the popup: always `start`, how the popup lines up with the active trigger.";
+    readonly 'data-activation-direction': "On a panel that replaced another: `left` or `right`, the physical direction its trigger lies in from the previously open one (a later trigger is on the right in left-to-right). Absent when the panel was opened from closed.";
+};
+/** The name of a NavigationMenu data attribute. */
+export type NavigationMenuDataAttribute = keyof typeof navigationMenuDataAttributes;
+export declare const navigationMenuCssVariables: {
+    readonly '--anchor-width': "On the viewport: the width in px of the open panel's trigger.";
+    readonly '--anchor-height': "On the viewport: the height in px of the open panel's trigger.";
+};
+/** The name of a NavigationMenu CSS variable. */
+export type NavigationMenuCssVariable = keyof typeof navigationMenuCssVariables;

package/dist/components/NavigationMenu/navigationMenu.attributes.js

@@ -0,0 +1,21 @@
+import { stateDataAttributes } from '../../utils/stateAttributes.js';
+/**
+ * The styling hooks a NavigationMenu exposes. Attributes are presence attributes (`''` while the
+ * state holds, omitted otherwise) unless the description says they carry a value.
+ */
+export const navigationMenuDataAttributes = {
+    'data-open': `On the root, the popup and the open panel: ${stateDataAttributes['data-open'].toLowerCase()}`,
+    'data-closed': `On the root, the popup and a closed panel: ${stateDataAttributes['data-closed'].toLowerCase()}`,
+    'data-entering': `On the popup: ${stateDataAttributes['data-entering'].toLowerCase()}`,
+    'data-exiting': `On the popup: ${stateDataAttributes['data-exiting'].toLowerCase()}`,
+    'data-popup-open': `On a panel trigger: ${stateDataAttributes['data-popup-open'].toLowerCase()}`,
+    'data-disabled': 'On a disabled panel trigger, link or nested trigger: present while disabled.',
+    'data-selected': 'On a link of the current page (the one with `active`): present while it is.',
+    'data-side': 'On the viewport and the popup: always `bottom`, the side of the triggers the popup sits on.',
+    'data-align': 'On the viewport and the popup: always `start`, how the popup lines up with the active trigger.',
+    'data-activation-direction': 'On a panel that replaced another: `left` or `right`, the physical direction its trigger lies in from the previously open one (a later trigger is on the right in left-to-right). Absent when the panel was opened from closed.'
+};
+export const navigationMenuCssVariables = {
+    '--anchor-width': "On the viewport: the width in px of the open panel's trigger.",
+    '--anchor-height': "On the viewport: the height in px of the open panel's trigger."
+};

package/dist/components/NavigationMenu/navigationMenu.mcp.d.ts

@@ -0,0 +1 @@
+export declare const navigationMenuDescription = "\n# NavigationMenu Component\n\nNavigationMenu is site navigation: a `<nav>` landmark with a row of links and disclosure buttons, and one panel area that shows the panel of whichever button is open. Use it for a header with mega-menu panels. MenuBar is the application-menu pattern (`role=\"menubar\"`) and the wrong choice for site navigation; Tabbar is a tablist.\n\n## Basic Usage\n\n```svelte\n<script lang=\"ts\">\n\timport { NavigationMenu, type NavigationMenuItem } from 'entasis/navigation-menu';\n\n\tconst items: NavigationMenuItem[] = [\n\t\t{\n\t\t\ttype: 'panel',\n\t\t\tvalue: 'product',\n\t\t\tlabel: 'Product',\n\t\t\tcontent: [\n\t\t\t\t{ label: 'Components', href: '/components', description: 'The essential interface pieces.' },\n\t\t\t\t{ label: 'Blocks', href: '/blocks', description: 'Complete patterns in context.' }\n\t\t\t]\n\t\t},\n\t\t{ type: 'link', label: 'Pricing', href: '/pricing', active: true },\n\t\t{ type: 'link', label: 'Docs', href: '/docs' }\n\t];\n</script>\n\n<NavigationMenu {items} label=\"Main\" />\n```\n\n## Controlled value\n\n```svelte\n<script lang=\"ts\">\n\timport { NavigationMenu, type NavigationMenuItem } from 'entasis/navigation-menu';\n\n\ttype Section = 'product' | 'company';\n\tlet open = $state<Section | null>(null);\n\n\tconst items: NavigationMenuItem<Section>[] = [\n\t\t{ type: 'panel', value: 'product', label: 'Product', content: [{ label: 'Blocks', href: '/blocks' }] },\n\t\t{ type: 'panel', value: 'company', label: 'Company', content: [{ label: 'About', href: '/about' }] }\n\t];\n</script>\n\n<NavigationMenu {items} bind:value={open} onValueChange={({ value, details }) => console.log(value, details.reason)} />\n```\n\n## Items\n\n- A **link** (`type: 'link'`) is a plain entry of the bar: `label`, `href`, optional `prefix`, `iconOnly` (paint only the prefix; the string label becomes the accessible name), `active` (renders `aria-current=\"page\"`), `disabled`, `target`, `rel` and `onclick`.\n- A **panel** (`type: 'panel'`) is a disclosure button: `value` (unique), `label`, optional `prefix`, `iconOnly` (paint only the prefix; the string label becomes the accessible name), `disabled`, and the body in `content`: a list of links (`label`, `href`, `description`, `prefix`, `active`, `disabled`, `target`, `rel`, `onclick`), or a snippet `{#snippet content({ close })}` that renders anything. `items` adds a nested level under `content`: links, and more panels that expand in place.\n- `Value` is generic: `NavigationMenuItem<'product' | 'company'>` types `value`, `defaultValue` and `onValueChange`.\n\n## Props\n\n- **items**: NavigationMenuItem[] (required) - Entries of the bar.\n- **label**: string - Accessible name of the nav landmark. Give it when the page has more than one nav.\n- **value** / **defaultValue**: Value | null - The open panel's `value`; `null` while all are closed. `value` is bindable.\n- **onValueChange**: (payload: { value: Value | null; details: OpenChangeDetails }) => void - Called before the open panel changes with the panel that will be open. `details.reason` is `trigger-press`, `trigger-hover`, `list-navigation`, `escape-key`, `outside-press`, `focus-out`, `item-press`, `close-press` or `trigger-unmount`; `details.event` carries the DOM event; `details.cancel()` keeps the current panel. A link press closes every level and calls it once with `null`. Not called for the initial state or for changes the parent assigns to `value`.\n- **openOnHover**: boolean (default: true) - Resting the pointer on a trigger opens its panel. Touch never hovers.\n- **delay**: number (default: 50) - Milliseconds before a hovered trigger opens. Switching between triggers while a panel is open is immediate.\n- **closeDelay**: number (default: 100) - Milliseconds the pointer may stay outside the triggers and the panel before a hover-opened panel closes.\n- **keepMounted**: boolean (default: false) - Keeps every panel in the DOM under `hidden`, so crawlers and the server-rendered HTML see their links. A kept-mounted popup hides at once when closed, without an exit animation.\n- **onAfterOpen** / **onAfterClose**: () => void - Called once each time the panel area finishes opening or closing (at once when no animation plays). Not called for the initial state.\n- **size**: 'small' | 'normal' | 'large' (default: 'normal') - Size of triggers, links and panel text.\n- **density**: 'compact' | 'normal' | 'comfortable' (default: 'normal') - Spacing inside the panel area and between its rows.\n- **color**: Colors - Semantic role of the triggers and the selected look. Falls back to the Theme's default color.\n- **dir**: 'ltr' | 'rtl' - Text direction. When omitted it follows the i18n direction, else the element's computed direction. It mirrors the arrow keys and the panel alignment.\n- **transition**: FSOProps - Popup enter and exit overrides (numeric `x`, `y`, `scale`, `opacity`, `duration`, `easing`).\n- **ref**: HTMLElement | null - Bindable reference to the nav element.\n- **class**: string - Class name of the nav.\n- **theme**: NavigationMenuThemeProps - Theme overrides: `root`, `list`, `item`, `trigger`, `link`, `caret`, `viewport`, `popup`, `panel`, `contentList`, `contentLink`, `contentPrefix`, `contentText`, `contentTitle`, `contentDescription`, `nestedTrigger` and `motion`.\n\n## Behavior\n\n- The markup is `<nav aria-label><ul>`: each panel trigger is a `<button>` with `aria-expanded` and `aria-controls` (no `aria-haspopup`: it is a disclosure, not a menu), each link an `<a>`. There is no `aria-orientation`.\n- **One inline panel area.** The panel area is rendered inside the nav, after the trigger list, never portaled. It animates its width and height as the open panel changes, and aligns to the open trigger's inline edge inside the layout viewport. On a switch the new panel fades and slides in from the side of the trigger it comes from, after the old one has faded and slid out the other way (the entry waits for the exit and lasts twice the in duration) (`data-activation-direction` names the direction); the `motion` / `transition` durations and reduced motion apply.\n- **Opening.** Click, Enter or Space toggle a trigger; ArrowDown opens it. Opening by keyboard keeps focus on the trigger. Tab from an open trigger enters the panel's links; Tab past the last link continues after the trigger and closes the panel (also when nothing follows the menu and focus leaves the page); Shift+Tab from the first link returns to the trigger. ArrowDown on an open trigger moves into the panel. A panel is entered by Tab only from its own trigger: Tab from a later entry of the bar skips it and leaves the menu. A pointer press focuses the trigger (Safari does not focus buttons on click), so Tab, ArrowDown and Escape carry on from it.\n- **Moving along the bar.** ArrowLeft and ArrowRight (mirrored in RTL), Home and End move focus between the bar's enabled triggers and links, without wrapping; Tab still visits each. With a panel open, the open panel follows: arrowing onto a trigger switches to its panel (focus stays on the trigger) and arrowing onto a link closes it. With no panel open they only move focus.\n- **Inside a panel.** ArrowDown and ArrowUp move to the next and previous link or button of the open panel, wrapping at either end; ArrowRight and ArrowLeft do the same (mirrored in RTL); Home and End jump to the first and last. Disabled links and links of a collapsed nested level are skipped. A text field or select keeps its own arrow keys, and a control that handles an arrow key itself (calls `preventDefault()`) keeps it. Snippet panels get the same keys over their tabbable controls.\n- **Hover.** Resting on a trigger opens its panel after `delay`; moving to another trigger switches at once. A panel opened by hover closes when the pointer leaves the trigger and the panel (with a diagonal-safe area) after `closeDelay`, unless focus is inside it. A pointer press on the trigger of a hover-opened panel keeps it open; pressing again closes it. Enter or Space on that trigger closes it. A hover that began before a press or Escape never reopens the panel afterwards.\n- **Closing.** Escape closes the open panel; from inside the panel it returns focus to the trigger with a visible ring, and from the bar focus stays where it is. A press outside, focus moving out, and a press on any link close it. A link press closes every level, once. A consumer `onclick` runs first and `event.preventDefault()` there skips the built-in close.\n- **Disabled.** A disabled panel trigger never opens and is skipped by the arrow keys; it renders `disabled` and `data-disabled`. A disabled link drops its `href` and leaves the tab order.\n- **Removed panels.** If the open panel is removed or disabled, the value resets to `null` (`onValueChange` with reason `trigger-unmount`).\n- **Nested levels.** `items` under a panel render inline; a nested panel is a disclosure button that expands in place with a click, Enter or Space. The panel's arrow keys reach nested triggers and the links of expanded levels.\n\n## Styling hooks\n\nData attributes (presence attributes, `\"\"` while the state holds):\n\n- `data-open` / `data-closed`: on the nav, the popup and each panel.\n- `data-entering` / `data-exiting`: on the popup while its animation plays.\n- `data-popup-open`: on a panel trigger while its panel is open.\n- `data-disabled`: on a disabled trigger, link or nested trigger.\n- `data-selected`: on the link of the current page.\n- `data-side=\"bottom\"` and `data-align=\"start\"`: on the viewport and popup.\n- `data-activation-direction=\"left\" | \"right\"`: on a panel that replaced another, the physical direction its trigger lies in from the previously open one.\n\nCSS variables on the viewport: `--anchor-width` and `--anchor-height`, the open trigger's size in px. The typed maps `navigationMenuDataAttributes` and `navigationMenuCssVariables` (from `entasis/navigation-menu`) list each name with its meaning.\n\n## Structure\n\n```\n<nav aria-label>\n\t<ul>\n\t\t<li><button aria-expanded aria-controls /></li>\n\t\t<li><a href /></li>\n\t</ul>\n\t<div data-side=\"bottom\">        <!-- viewport, in flow, positioned under the active trigger -->\n\t\t<div>                        <!-- popup, animates its size -->\n\t\t\t<div id>                 <!-- one panel per open trigger -->\n\t\t\t\t<ul><li><a href /></li></ul>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</nav>\n```\n\n## Accessibility\n\nDisclosure navigation (the WAI-ARIA APG disclosure navigation pattern): every trigger and link keeps its place in the natural Tab order, panels follow in the document, and arrow keys are a shortcut that supplements Tab, along the bar and inside the open panel. Escape returns focus to the trigger and keyboard closes show the focus ring.\n\n| Focus | Key | Result |\n| --- | --- | --- |\n| Trigger | Enter, Space | Toggles its panel; focus stays |\n| Closed trigger | ArrowDown | Opens its panel; focus stays |\n| Open trigger | ArrowDown, Tab | First control of the panel |\n| Bar entry | ArrowRight / ArrowLeft (mirrored in RTL) | Next / previous enabled entry, no wrap; with a panel open, a trigger switches to its panel (focus stays on it) and a link closes the panel |\n| Bar entry | Home / End | First / last enabled entry |\n| Bar entry | Escape | Closes the open panel; focus stays |\n| Panel | ArrowDown / ArrowUp | Next / previous control, wrapping |\n| Panel | ArrowRight / ArrowLeft (mirrored in RTL) | The neighbouring entry of the bar: a trigger opens its panel and focus goes to its first control; a link closes the panel and takes focus; no wrap at the ends |\n| Panel | Home / End | First / last control |\n| Panel | Tab past the last control | Next entry after the trigger; the panel closes |\n| Panel | Shift+Tab on the first control | The trigger; the panel stays open |\n| Panel | Escape | Closes; focus returns to the trigger with a ring |\n| Anywhere | Focus leaves the menu | Closes | A current-page link renders `aria-current=\"page\"`.\n";