entasis 0.10.2 → 0.12.0

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

@@ -0,0 +1,138 @@
+export const navigationMenuDescription = `
+# NavigationMenu Component
+
+NavigationMenu 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.
+
+## Basic Usage
+
+\`\`\`svelte
+<script lang="ts">
+	import { NavigationMenu, type NavigationMenuItem } from './index.ts';
+
+	const items: NavigationMenuItem[] = [
+		{
+			type: 'panel',
+			value: 'product',
+			label: 'Product',
+			content: [
+				{ label: 'Components', href: '/components', description: 'The essential interface pieces.' },
+				{ label: 'Blocks', href: '/blocks', description: 'Complete patterns in context.' }
+			]
+		},
+		{ type: 'link', label: 'Pricing', href: '/pricing', active: true },
+		{ type: 'link', label: 'Docs', href: '/docs' }
+	];
+</script>
+
+<NavigationMenu {items} label="Main" />
+\`\`\`
+
+## Controlled value
+
+\`\`\`svelte
+<script lang="ts">
+	import { NavigationMenu, type NavigationMenuItem } from './index.ts';
+
+	type Section = 'product' | 'company';
+	let open = $state<Section | null>(null);
+
+	const items: NavigationMenuItem<Section>[] = [
+		{ type: 'panel', value: 'product', label: 'Product', content: [{ label: 'Blocks', href: '/blocks' }] },
+		{ type: 'panel', value: 'company', label: 'Company', content: [{ label: 'About', href: '/about' }] }
+	];
+</script>
+
+<NavigationMenu {items} bind:value={open} onValueChange={({ value, details }) => console.log(value, details.reason)} />
+\`\`\`
+
+## Items
+
+- 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\`.
+- 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.
+- \`Value\` is generic: \`NavigationMenuItem<'product' | 'company'>\` types \`value\`, \`defaultValue\` and \`onValueChange\`.
+
+## Props
+
+- **items**: NavigationMenuItem[] (required) - Entries of the bar.
+- **label**: string - Accessible name of the nav landmark. Give it when the page has more than one nav.
+- **value** / **defaultValue**: Value | null - The open panel's \`value\`; \`null\` while all are closed. \`value\` is bindable.
+- **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\`.
+- **openOnHover**: boolean (default: true) - Resting the pointer on a trigger opens its panel. Touch never hovers.
+- **delay**: number (default: 50) - Milliseconds before a hovered trigger opens. Switching between triggers while a panel is open is immediate.
+- **closeDelay**: number (default: 100) - Milliseconds the pointer may stay outside the triggers and the panel before a hover-opened panel closes.
+- **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.
+- **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.
+- **size**: 'small' | 'normal' | 'large' (default: 'normal') - Size of triggers, links and panel text.
+- **density**: 'compact' | 'normal' | 'comfortable' (default: 'normal') - Spacing inside the panel area and between its rows.
+- **color**: Colors - Semantic role of the triggers and the selected look. Falls back to the Theme's default color.
+- **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.
+- **transition**: FSOProps - Popup enter and exit overrides (numeric \`x\`, \`y\`, \`scale\`, \`opacity\`, \`duration\`, \`easing\`).
+- **ref**: HTMLElement | null - Bindable reference to the nav element.
+- **class**: string - Class name of the nav.
+- **theme**: NavigationMenuThemeProps - Theme overrides: \`root\`, \`list\`, \`item\`, \`trigger\`, \`link\`, \`caret\`, \`viewport\`, \`popup\`, \`panel\`, \`contentList\`, \`contentLink\`, \`contentPrefix\`, \`contentText\`, \`contentTitle\`, \`contentDescription\`, \`nestedTrigger\` and \`motion\`.
+
+## Behavior
+
+- 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\`.
+- **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.
+- **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.
+- **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.
+- **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.
+- **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.
+- **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.
+- **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.
+- **Removed panels.** If the open panel is removed or disabled, the value resets to \`null\` (\`onValueChange\` with reason \`trigger-unmount\`).
+- **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.
+
+## Styling hooks
+
+Data attributes (presence attributes, \`""\` while the state holds):
+
+- \`data-open\` / \`data-closed\`: on the nav, the popup and each panel.
+- \`data-entering\` / \`data-exiting\`: on the popup while its animation plays.
+- \`data-popup-open\`: on a panel trigger while its panel is open.
+- \`data-disabled\`: on a disabled trigger, link or nested trigger.
+- \`data-selected\`: on the link of the current page.
+- \`data-side="bottom"\` and \`data-align="start"\`: on the viewport and popup.
+- \`data-activation-direction="left" | "right"\`: on a panel that replaced another, the physical direction its trigger lies in from the previously open one.
+
+CSS 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.
+
+## Structure
+
+\`\`\`
+<nav aria-label>
+	<ul>
+		<li><button aria-expanded aria-controls /></li>
+		<li><a href /></li>
+	</ul>
+	<div data-side="bottom">        <!-- viewport, in flow, positioned under the active trigger -->
+		<div>                        <!-- popup, animates its size -->
+			<div id>                 <!-- one panel per open trigger -->
+				<ul><li><a href /></li></ul>
+			</div>
+		</div>
+	</div>
+</nav>
+\`\`\`
+
+## Accessibility
+
+Disclosure 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.
+
+| Focus | Key | Result |
+| --- | --- | --- |
+| Trigger | Enter, Space | Toggles its panel; focus stays |
+| Closed trigger | ArrowDown | Opens its panel; focus stays |
+| Open trigger | ArrowDown, Tab | First control of the panel |
+| 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 |
+| Bar entry | Home / End | First / last enabled entry |
+| Bar entry | Escape | Closes the open panel; focus stays |
+| Panel | ArrowDown / ArrowUp | Next / previous control, wrapping |
+| 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 |
+| Panel | Home / End | First / last control |
+| Panel | Tab past the last control | Next entry after the trigger; the panel closes |
+| Panel | Shift+Tab on the first control | The trigger; the panel stays open |
+| Panel | Escape | Closes; focus returns to the trigger with a ring |
+| Anywhere | Focus leaves the menu | Closes | A current-page link renders \`aria-current="page"\`.
+`;

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

@@ -0,0 +1,129 @@
+import type { Snippet } from 'svelte';
+import type { Colors, Density, Sizes } from '../../types/theme.js';
+import type { WithAttachments } from '../../types/props.js';
+import type { ResponsiveProps } from '../Theme/theme.js';
+import type { FSOProps } from '../../transitions/transition.js';
+import type { OpenChangeDetails } from '../../utils/openChange.js';
+import type { Slot } from '../Slot/slot.js';
+import type { NavigationMenuThemeProps } from './navigationMenu.theme.js';
+/** A link: a top-level entry of the bar, or a row inside a panel. */
+export type NavigationMenuLink = {
+    /** Text or snippet shown for the link. */
+    label: Slot;
+    /** Where the link goes. */
+    href: string;
+    /** Secondary text under the label. Shown inside panels only. */
+    description?: Slot;
+    /** Content before the label, usually an icon. */
+    prefix?: Slot;
+    /**
+     * Paints only `prefix`. The string `label` is then spoken instead of painted, as the accessible
+     * name of an icon-only top-level link.
+     */
+    iconOnly?: boolean;
+    /** Marks the link of the current page: renders `aria-current="page"` and the selected look. */
+    active?: boolean;
+    /** The link cannot be followed: it drops its `href`, leaves the tab order and renders `aria-disabled`. */
+    disabled?: boolean;
+    /** Link `target`. */
+    target?: string;
+    /** Link `rel`. */
+    rel?: string;
+    /**
+     * Native click handler. It runs before the built-in close, and `event.preventDefault()` there
+     * skips it (and the navigation itself).
+     */
+    onclick?: (event: MouseEvent) => void;
+};
+/** What a snippet panel receives. */
+export type NavigationMenuPanelApi = {
+    /** Closes the open panel and every nested level, reported as `close-press`. */
+    close: () => void;
+};
+/** A disclosure button in the bar that shows a panel. */
+export type NavigationMenuPanel<Value extends string = string> = {
+    type: 'panel';
+    /** Identifies the panel in `value`, `defaultValue` and `onValueChange`. Unique among panels. */
+    value: Value;
+    /** Text or snippet shown on the trigger. */
+    label: Slot;
+    /** Content before the label, usually an icon. */
+    prefix?: Slot;
+    /**
+     * Paints only `prefix` (and the caret). The string `label` is then spoken instead of painted, as
+     * the accessible name of an icon-only trigger.
+     */
+    iconOnly?: boolean;
+    /** A disabled trigger never opens: it renders `disabled` and `data-disabled`. */
+    disabled?: boolean;
+    /** The panel's body: a list of links, or a snippet that renders anything. */
+    content?: NavigationMenuLink[] | Snippet<[NavigationMenuPanelApi]>;
+    /**
+     * A nested level rendered inline under `content`: links, and further panels that expand in
+     * place (an inline disclosure, not another floating layer). A link press anywhere in the tree
+     * closes every level.
+     */
+    items?: NavigationMenuItem<Value>[];
+};
+/** One entry of the bar or of a nested level. */
+export type NavigationMenuItem<Value extends string = string> = ({
+    type: 'link';
+} & NavigationMenuLink) | NavigationMenuPanel<Value>;
+/** Payload of `onValueChange`: the panel the menu is about to show and why. */
+export type NavigationMenuValueChangePayload<Value extends string = string> = {
+    /** The panel that will be open, `null` when every panel closes. */
+    value: Value | null;
+    /** Reason, originating event and `cancel()`. */
+    details: OpenChangeDetails;
+};
+export type NavigationMenuProps<Value extends string = string> = WithAttachments<{
+    /** The entries of the bar, in order. */
+    items: NavigationMenuItem<Value>[];
+    /** Accessible name of the `nav` landmark. Give it when the page has more than one. */
+    label?: string;
+    /** Bindable reference to the `nav` element. */
+    ref?: HTMLElement | null;
+    /** The open panel's `value`, `null` while all are closed. Bindable. */
+    value?: Value | null;
+    /** The open panel when `value` is omitted. */
+    defaultValue?: Value | null;
+    /**
+     * Called before the open panel changes: a trigger press, hovering, ArrowDown on a trigger,
+     * Escape, an outside press, focus leaving, a link press, or the open panel being
+     * removed. `details.reason` (in the `{ value, details }` payload) says why, `details.event` carries the DOM event, and
+     * `details.cancel()` keeps the current panel. Inside the callback `value` still holds the
+     * previous panel. A link press closes every level and calls this once with `null`. Not called
+     * for the initial state or for changes the parent assigns to `value`.
+     */
+    onValueChange?: (payload: NavigationMenuValueChangePayload<Value>) => void;
+    /** Opens a panel when the pointer rests on its trigger. Touch never hovers. @default true */
+    openOnHover?: boolean;
+    /** Milliseconds the pointer rests on a trigger before its panel opens; switching between triggers is immediate. @default 50 */
+    delay?: number;
+    /** Milliseconds the pointer may stay outside the triggers and the panel before a hover-opened panel closes. @default 100 */
+    closeDelay?: number;
+    /**
+     * 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 (it has no exit animation).
+     * @default false
+     */
+    keepMounted?: boolean;
+    /** Called once each time a panel finishes opening: after the animation, or at once when none plays. Not called for the initial state. */
+    onAfterOpen?: () => void;
+    /** Called once each time the panel area finishes closing. Not called for the initial state. */
+    onAfterClose?: () => void;
+    /** Size of the triggers, links and panel text. @default 'normal' */
+    size?: Sizes;
+    /** Spacing inside the panel area and between its rows. @default 'normal' */
+    density?: Density;
+    /** Semantic role of the triggers and of the selected look. Falls back to the Theme's default color. */
+    color?: Colors;
+    /** Text direction; mirrors the arrow keys and the panel alignment. Follows the i18n direction or the element's computed direction when omitted. */
+    dir?: 'ltr' | 'rtl';
+    /** Popup enter and exit overrides; supports responsive values and wins over the `motion` theme slot. Only numeric `x` and `y` apply. */
+    transition?: ResponsiveProps<FSOProps>;
+    /** Class name of the `nav` root. */
+    class?: string;
+    /** Theme overrides for the bar, the triggers and the panel parts. */
+    theme?: NavigationMenuThemeProps;
+}>;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,163 @@
+import type { Attachment } from 'svelte/attachments';
+import { SvelteSet } from 'svelte/reactivity';
+import type { TransitionConfig } from 'svelte/transition';
+import type { FSOProps } from '../../transitions/transition.js';
+import type { ResponsiveProps } from '../Theme/theme.js';
+import { type OpenChangeDetails, type OpenChangeInit } from '../../utils/openChange.js';
+import type { DeepPartial, MotionSpec } from '../../utils/motion/index.js';
+import { type Direction } from '../../utils/useDirection.svelte.js';
+import type { NavigationMenuItem, NavigationMenuPanel } from './navigationMenu.props.js';
+export type NavigationMenuStateOptions<Value extends string> = {
+    id: string;
+    items: () => NavigationMenuItem<Value>[];
+    /** The raw value: controlled, or the retained uncontrolled one. */
+    value: () => Value | null;
+    setValue: (value: Value | null) => void;
+    onValueChange: () => ((payload: {
+        value: Value | null;
+        details: OpenChangeDetails;
+    }) => void) | undefined;
+    openOnHover: () => boolean;
+    delay: () => number;
+    closeDelay: () => number;
+    keepMounted: () => boolean;
+    dir: () => Direction | undefined;
+    transition: () => ResponsiveProps<FSOProps> | undefined;
+    motion: () => DeepPartial<MotionSpec> | undefined;
+    onAfterOpen: () => (() => void) | undefined;
+    onAfterClose: () => (() => void) | undefined;
+};
+type ChangeInit = OpenChangeInit & {
+    reason: NonNullable<OpenChangeInit['reason']>;
+};
+export declare function useNavigationMenuState<Value extends string>(options: NavigationMenuStateOptions<Value>): {
+    readonly panels: NavigationMenuPanel<Value>[];
+    readonly isOpen: boolean;
+    readonly value: Value | null;
+    readonly displayValue: Value | null;
+    readonly displayItem: NavigationMenuPanel<Value> | null;
+    readonly rendered: boolean;
+    readonly visible: boolean;
+    readonly status: import("../../utils/stateAttributes.js").OpenTransitionStatus;
+    readonly activationDirection: "left" | "right" | null;
+    readonly direction: Direction;
+    readonly openOnHover: boolean;
+    readonly keepMounted: boolean;
+    readonly delay: number;
+    isSwitching: () => boolean;
+    panelOut: (element: HTMLElement) => TransitionConfig;
+    panelIndex: (value: Value | null) => number;
+    triggerId: (value: Value) => string;
+    panelId: (value: Value) => string;
+    /** Whether the panel for `value` has its element in the DOM now. */
+    hasPanel: (value: Value) => boolean;
+    isOpenFor: (value: Value) => boolean;
+    safeArea: {
+        reference: (ref: HTMLElement) => () => void;
+        anchorReference: (ref: HTMLElement) => () => void;
+        floatingReference: (ref: HTMLElement) => () => void;
+        updateAreas: () => void;
+        containsPoint: (x: number, y: number) => boolean;
+    };
+    nestedOpen: SvelteSet<string>;
+    close: (init?: Partial<ChangeInit>) => boolean;
+    pressLink: (event: MouseEvent) => void;
+    pressTrigger: (value: Value, event: MouseEvent) => void;
+    hoverTrigger: (value: Value, event: MouseEvent) => void;
+    handleFocusOut: (event: FocusEvent) => void;
+    layer: import("../../utils/layers.svelte.js").LayerHandle;
+    root: Attachment<HTMLElement>;
+    list: Attachment<HTMLElement>;
+    trigger: (value: Value) => Attachment<HTMLElement>;
+    viewport: Attachment<HTMLElement>;
+    popup: Attachment<HTMLElement>;
+    panel: (value: Value) => Attachment<HTMLElement>;
+};
+export type NavigationMenuState<Value extends string = string> = ReturnType<typeof useNavigationMenuState<Value>>;
+export declare function setNavigationMenuState(state: NavigationMenuState<string>): {
+    readonly panels: NavigationMenuPanel<string>[];
+    readonly isOpen: boolean;
+    readonly value: string | null;
+    readonly displayValue: string | null;
+    readonly displayItem: NavigationMenuPanel<string> | null;
+    readonly rendered: boolean;
+    readonly visible: boolean;
+    readonly status: import("../../utils/stateAttributes.js").OpenTransitionStatus;
+    readonly activationDirection: "left" | "right" | null;
+    readonly direction: Direction;
+    readonly openOnHover: boolean;
+    readonly keepMounted: boolean;
+    readonly delay: number;
+    isSwitching: () => boolean;
+    panelOut: (element: HTMLElement) => TransitionConfig;
+    panelIndex: (value: string | null) => number;
+    triggerId: (value: string) => string;
+    panelId: (value: string) => string;
+    /** Whether the panel for `value` has its element in the DOM now. */
+    hasPanel: (value: string) => boolean;
+    isOpenFor: (value: string) => boolean;
+    safeArea: {
+        reference: (ref: HTMLElement) => () => void;
+        anchorReference: (ref: HTMLElement) => () => void;
+        floatingReference: (ref: HTMLElement) => () => void;
+        updateAreas: () => void;
+        containsPoint: (x: number, y: number) => boolean;
+    };
+    nestedOpen: SvelteSet<string>;
+    close: (init?: Partial<ChangeInit>) => boolean;
+    pressLink: (event: MouseEvent) => void;
+    pressTrigger: (value: string, event: MouseEvent) => void;
+    hoverTrigger: (value: string, event: MouseEvent) => void;
+    handleFocusOut: (event: FocusEvent) => void;
+    layer: import("../../utils/layers.svelte.js").LayerHandle;
+    root: Attachment<HTMLElement>;
+    list: Attachment<HTMLElement>;
+    trigger: (value: string) => Attachment<HTMLElement>;
+    viewport: Attachment<HTMLElement>;
+    popup: Attachment<HTMLElement>;
+    panel: (value: string) => Attachment<HTMLElement>;
+};
+export declare function getNavigationMenuState(): {
+    readonly panels: NavigationMenuPanel<string>[];
+    readonly isOpen: boolean;
+    readonly value: string | null;
+    readonly displayValue: string | null;
+    readonly displayItem: NavigationMenuPanel<string> | null;
+    readonly rendered: boolean;
+    readonly visible: boolean;
+    readonly status: import("../../utils/stateAttributes.js").OpenTransitionStatus;
+    readonly activationDirection: "left" | "right" | null;
+    readonly direction: Direction;
+    readonly openOnHover: boolean;
+    readonly keepMounted: boolean;
+    readonly delay: number;
+    isSwitching: () => boolean;
+    panelOut: (element: HTMLElement) => TransitionConfig;
+    panelIndex: (value: string | null) => number;
+    triggerId: (value: string) => string;
+    panelId: (value: string) => string;
+    /** Whether the panel for `value` has its element in the DOM now. */
+    hasPanel: (value: string) => boolean;
+    isOpenFor: (value: string) => boolean;
+    safeArea: {
+        reference: (ref: HTMLElement) => () => void;
+        anchorReference: (ref: HTMLElement) => () => void;
+        floatingReference: (ref: HTMLElement) => () => void;
+        updateAreas: () => void;
+        containsPoint: (x: number, y: number) => boolean;
+    };
+    nestedOpen: SvelteSet<string>;
+    close: (init?: Partial<ChangeInit>) => boolean;
+    pressLink: (event: MouseEvent) => void;
+    pressTrigger: (value: string, event: MouseEvent) => void;
+    hoverTrigger: (value: string, event: MouseEvent) => void;
+    handleFocusOut: (event: FocusEvent) => void;
+    layer: import("../../utils/layers.svelte.js").LayerHandle;
+    root: Attachment<HTMLElement>;
+    list: Attachment<HTMLElement>;
+    trigger: (value: string) => Attachment<HTMLElement>;
+    viewport: Attachment<HTMLElement>;
+    popup: Attachment<HTMLElement>;
+    panel: (value: string) => Attachment<HTMLElement>;
+};
+export {};