entasis 0.11.0 → 0.12.0

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

@@ -0,0 +1,326 @@
+import { type InferComponentTheme } from '../../utils/cva/index.js';
+export declare const defaultNavigationMenuMotion: import("../../utils/motion/index.js").MotionResolver<import("../../utils/motion/index.js").MotionVariantShape>;
+export declare const navigationMenuTheme: {
+    motion: import("../../utils/motion/index.js").MotionResolver<import("../../utils/motion/index.js").MotionVariantShape>;
+    root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    list: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    item: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    trigger: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        open: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    link: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        active: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    caret: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        open: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    viewport: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        switching: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    popup: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        density: {
+            compact: string;
+            normal: string;
+            comfortable: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    panel: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        density: {
+            compact: string;
+            normal: string;
+            comfortable: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    contentList: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        density: {
+            compact: string;
+            normal: string;
+            comfortable: string;
+        };
+        nested: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    contentLink: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+        density: {
+            compact: string;
+            normal: string;
+            comfortable: string;
+        };
+        active: {
+            true: string;
+            false: string;
+        };
+        disabled: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    contentPrefix: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    contentText: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    contentTitle: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    contentDescription: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    nestedTrigger: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+        density: {
+            compact: string;
+            normal: string;
+            comfortable: string;
+        };
+        disabled: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+};
+export type NavigationMenuTheme = typeof navigationMenuTheme;
+export type NavigationMenuThemeProps = InferComponentTheme<NavigationMenuTheme>;
+export declare const setNavigationMenuTheme: (theme: InferComponentTheme<{
+    motion: import("../../utils/motion/index.js").MotionResolver<import("../../utils/motion/index.js").MotionVariantShape>;
+    root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    list: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    item: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    trigger: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        open: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    link: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        active: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    caret: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        open: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    viewport: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        switching: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    popup: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        density: {
+            compact: string;
+            normal: string;
+            comfortable: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    panel: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        density: {
+            compact: string;
+            normal: string;
+            comfortable: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    contentList: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        density: {
+            compact: string;
+            normal: string;
+            comfortable: string;
+        };
+        nested: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    contentLink: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+        density: {
+            compact: string;
+            normal: string;
+            comfortable: string;
+        };
+        active: {
+            true: string;
+            false: string;
+        };
+        disabled: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    contentPrefix: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    contentText: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    contentTitle: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    contentDescription: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    nestedTrigger: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+        density: {
+            compact: string;
+            normal: string;
+            comfortable: string;
+        };
+        disabled: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+}>) => void;
+export declare const useNavigationMenuTheme: import("../../utils/cva/theme.js").UseComponentTheme<{
+    motion: import("../../utils/motion/index.js").MotionResolver<import("../../utils/motion/index.js").MotionVariantShape>;
+    root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    list: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    item: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    trigger: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        open: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    link: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        active: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    caret: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        open: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    viewport: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        switching: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    popup: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        density: {
+            compact: string;
+            normal: string;
+            comfortable: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    panel: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        density: {
+            compact: string;
+            normal: string;
+            comfortable: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    contentList: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        density: {
+            compact: string;
+            normal: string;
+            comfortable: string;
+        };
+        nested: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    contentLink: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+        density: {
+            compact: string;
+            normal: string;
+            comfortable: string;
+        };
+        active: {
+            true: string;
+            false: string;
+        };
+        disabled: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    contentPrefix: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    contentText: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    contentTitle: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    contentDescription: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    nestedTrigger: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+        density: {
+            compact: string;
+            normal: string;
+            comfortable: string;
+        };
+        disabled: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+}>;
+export declare const useNavigationMenuMotion: () => import("../../utils/motion/index.js").ComponentMotion<import("../../utils/motion/index.js").MotionVariantShape>;

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

@@ -0,0 +1,239 @@
+import { setComponentTheme, useComponentTheme } from '../../utils/cva/index.js';
+import { cva } from '../../utils/cva/index.js';
+import { motion, useComponentMotion } from '../../utils/motion/index.js';
+import { selectedSoft } from '../Theme/theme.recipes.js';
+// The nav landmark is the positioning context of the panel area: the viewport is absolutely
+// placed against it, in the document flow, never portaled.
+const defaultNavigationMenu = cva({
+    base: 'relative w-fit max-w-full',
+    variants: {
+        size: {
+            small: '',
+            normal: '',
+            large: ''
+        }
+    },
+    defaultVariants: {
+        size: 'normal'
+    }
+});
+const defaultNavigationMenuList = cva({
+    base: 'm-0 flex list-none flex-wrap items-center p-0',
+    variants: {
+        size: {
+            small: 'gap-micro',
+            normal: 'gap-xs',
+            large: 'gap-sm'
+        }
+    },
+    defaultVariants: {
+        size: 'normal'
+    }
+});
+const defaultNavigationMenuItem = cva({
+    base: 'relative flex items-center'
+});
+// Extra classes for the Button a panel trigger renders. An open panel's trigger wears the shared
+// soft selected recipe, like the open trigger of a MenuBar.
+const defaultNavigationMenuTrigger = cva({
+    base: 'gap-xs',
+    variants: {
+        open: {
+            true: selectedSoft,
+            false: ''
+        }
+    },
+    defaultVariants: {
+        open: false
+    }
+});
+// A plain top-level link renders the same Button; `active` marks the current page.
+const defaultNavigationMenuLink = cva({
+    base: '',
+    variants: {
+        active: {
+            true: selectedSoft,
+            false: ''
+        }
+    },
+    defaultVariants: {
+        active: false
+    }
+});
+const defaultNavigationMenuCaret = cva({
+    base: 'inline-flex shrink-0 items-center transition-transform duration-fast ease-standard',
+    variants: {
+        open: {
+            true: 'rotate-180',
+            false: ''
+        }
+    },
+    defaultVariants: {
+        open: false
+    }
+});
+// The positioning wrapper under the trigger row. Its top padding is the visual gap to the
+// triggers, kept inside the wrapper so the pointer never crosses dead space on its way in. The
+// placement variables are written by the component: `translate` aligns the panel to the active
+// trigger's inline edge and keeps it inside the layout viewport.
+const defaultNavigationMenuViewport = cva({
+    base: 'absolute left-0 w-max max-w-[calc(100vw-1rem)] pt-xs',
+    variants: {
+        switching: {
+            true: 'transition-[translate] duration-normal ease-standard',
+            false: ''
+        }
+    },
+    defaultVariants: {
+        switching: false
+    }
+});
+// The visible, animated surface. It animates its own width and height as the active panel
+// changes, so it hugs whichever panel it shows. It is the positioning context of an outgoing panel,
+// which leaves absolutely positioned inside it and is clipped with it.
+const defaultNavigationMenuPopup = cva({
+    base: 'raised-3 bg-surface-floating text-neutral relative isolate max-w-full origin-top rounded-lg text-sm',
+    variants: {
+        density: {
+            compact: 'p-sm',
+            normal: 'p-md',
+            comfortable: 'p-lg'
+        }
+    },
+    defaultVariants: {
+        density: 'normal'
+    }
+});
+const defaultNavigationMenuPanel = cva({
+    base: 'flex flex-col',
+    variants: {
+        density: {
+            compact: 'gap-xs',
+            normal: 'gap-sm',
+            comfortable: 'gap-md'
+        }
+    },
+    defaultVariants: {
+        density: 'normal'
+    }
+});
+const defaultNavigationMenuContentList = cva({
+    base: 'm-0 grid list-none p-0',
+    variants: {
+        density: {
+            compact: 'gap-0',
+            normal: 'gap-micro',
+            comfortable: 'gap-xs'
+        },
+        nested: {
+            true: 'ps-md',
+            false: 'min-w-64'
+        }
+    },
+    defaultVariants: {
+        density: 'normal',
+        nested: false
+    }
+});
+// A link row inside a panel: flush against the popup's padding box, so it takes the concentric
+// radius like a menu option.
+const defaultNavigationMenuContentLink = cva({
+    base: 'state-layer rounded-md-concentric relative flex w-full cursor-pointer items-start text-start no-underline outline-none',
+    variants: {
+        size: {
+            small: 'text-xs',
+            normal: 'text-sm',
+            large: 'text-sm'
+        },
+        density: {
+            compact: 'px-sm py-xs gap-sm',
+            normal: 'px-md py-sm gap-md',
+            comfortable: 'px-lg py-md gap-md'
+        },
+        active: {
+            true: selectedSoft,
+            false: ''
+        },
+        disabled: {
+            true: 'pointer-events-none cursor-not-allowed opacity-50',
+            false: ''
+        }
+    },
+    defaultVariants: {
+        size: 'normal',
+        density: 'normal',
+        active: false,
+        disabled: false
+    }
+});
+const defaultNavigationMenuContentPrefix = cva({
+    base: 'inline-flex shrink-0 items-center [&>svg]:size-icon-md'
+});
+const defaultNavigationMenuContentText = cva({
+    base: 'flex min-w-0 flex-col gap-micro'
+});
+const defaultNavigationMenuContentTitle = cva({
+    base: 'font-medium leading-snug'
+});
+const defaultNavigationMenuContentDescription = cva({
+    base: 'text-neutral/70 text-xs leading-snug'
+});
+// The inline disclosure of a nested level: a row that looks like a link and expands its own
+// list underneath.
+const defaultNavigationMenuNestedTrigger = cva({
+    base: 'state-layer rounded-md-concentric relative flex w-full cursor-pointer items-center justify-between text-start outline-none',
+    variants: {
+        size: {
+            small: 'text-xs',
+            normal: 'text-sm',
+            large: 'text-sm'
+        },
+        density: {
+            compact: 'px-sm py-xs gap-sm',
+            normal: 'px-md py-sm gap-md',
+            comfortable: 'px-lg py-md gap-md'
+        },
+        disabled: {
+            true: 'pointer-events-none cursor-not-allowed opacity-50',
+            false: ''
+        }
+    },
+    defaultVariants: {
+        size: 'normal',
+        density: 'normal',
+        disabled: false
+    }
+});
+// The popup lifts in from its trigger and settles back out. `duration` and `easing` stay tokens,
+// so `<Theme motion>` and the reduced-motion preference reach it. A panel that replaces another
+// slides in from the side of the new trigger with the same duration and easing.
+export const defaultNavigationMenuMotion = motion({
+    base: {
+        in: { x: 0, y: -4, scale: 0.98, opacity: 0 },
+        out: { x: 0, y: -4, scale: 0.98, opacity: 0 },
+        duration: 'fast',
+        easing: 'enter'
+    }
+});
+export const navigationMenuTheme = {
+    motion: defaultNavigationMenuMotion,
+    root: defaultNavigationMenu,
+    list: defaultNavigationMenuList,
+    item: defaultNavigationMenuItem,
+    trigger: defaultNavigationMenuTrigger,
+    link: defaultNavigationMenuLink,
+    caret: defaultNavigationMenuCaret,
+    viewport: defaultNavigationMenuViewport,
+    popup: defaultNavigationMenuPopup,
+    panel: defaultNavigationMenuPanel,
+    contentList: defaultNavigationMenuContentList,
+    contentLink: defaultNavigationMenuContentLink,
+    contentPrefix: defaultNavigationMenuContentPrefix,
+    contentText: defaultNavigationMenuContentText,
+    contentTitle: defaultNavigationMenuContentTitle,
+    contentDescription: defaultNavigationMenuContentDescription,
+    nestedTrigger: defaultNavigationMenuNestedTrigger
+};
+export const setNavigationMenuTheme = setComponentTheme('navigation-menu');
+export const useNavigationMenuTheme = useComponentTheme('navigation-menu', navigationMenuTheme);
+export const useNavigationMenuMotion = () => useComponentMotion('navigation-menu', defaultNavigationMenuMotion);

package/dist/components/Overlay/Overlay.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { createBindableValue } from '../../utils/state.svelte.js';
-	import { tick, untrack } from 'svelte';
+	import { useOpenLifecycle } from '../../utils/openLifecycle.svelte.js';
+	import { openStateAttributes, transitionStatusAttributes } from '../../utils/stateAttributes.js';
 	import Button from '../Button/Button.svelte';
 	import Slot from '../Slot/Slot.svelte';
 	import type { OverlayProps } from './overlay.props.js';
@@ -38,31 +39,21 @@
 	const isOpen = $derived(openState.value);
 
 	const classes = $derived(useOverlayTheme(theme));
-	let observedOpen = untrack(() => isOpen);
-	let transitionSequence = 0;
-
-	$effect(() => {
-		const nextOpen = isOpen;
-		if (nextOpen === observedOpen) return;
-		observedOpen = nextOpen;
-		const sequence = ++transitionSequence;
-		void settleTransition(nextOpen, sequence);
+	// CSS transitions animate the overlay: each open and close reports once its animations
+	// settle, an overlay open at creation included.
+	const lifecycle = useOpenLifecycle({
+		isOpen: () => isOpen,
+		animated: () => ref,
+		onAfterOpen: () => onAfterOpen?.(),
+		onAfterClose: () => onAfterClose?.()
 	});
-
-	async function settleTransition(nextOpen: boolean, sequence: number) {
-		await tick();
-		const animations = ref?.getAnimations?.({ subtree: true }) ?? [];
-		await Promise.allSettled(animations.map((animation) => animation.finished));
-		if (sequence !== transitionSequence || isOpen !== nextOpen) return;
-		if (nextOpen) onAfterOpen?.();
-		else onAfterClose?.();
-	}
 </script>
 
 <div
 	bind:this={ref}
 	data-entasis-overlay
-	data-open={isOpen}
+	{...openStateAttributes(isOpen)}
+	{...transitionStatusAttributes(lifecycle.status)}
 	data-show-on={showOn}
 	data-position={position}
 	aria-hidden={!isOpen}
@@ -113,35 +104,33 @@
 	}
 
 	:global(:where(*:has(> [data-entasis-overlay]:first-child)):hover)
-		> [data-entasis-overlay][data-open='true'][data-show-on='hover'],
+		> [data-entasis-overlay][data-open][data-show-on='hover'],
 	:global(:where(*:has(> [data-entasis-overlay]:first-child)):focus-within)
-		> [data-entasis-overlay][data-open='true'][data-show-on='hover'],
+		> [data-entasis-overlay][data-open][data-show-on='hover'],
 	:global(:where(*:has(> [data-entasis-overlay]:first-child)):focus-within)
-		> [data-entasis-overlay][data-open='true'][data-show-on='focus'] {
+		> [data-entasis-overlay][data-open][data-show-on='focus'] {
 		opacity: 1;
 	}
 
 	:global(:where(*:has(> [data-entasis-overlay]:first-child)):hover)
-		> [data-entasis-overlay][data-open='true'][data-show-on='hover']
+		> [data-entasis-overlay][data-open][data-show-on='hover']
 		> [data-overlay-content],
 	:global(:where(*:has(> [data-entasis-overlay]:first-child)):focus-within)
-		> [data-entasis-overlay][data-open='true'][data-show-on='hover']
+		> [data-entasis-overlay][data-open][data-show-on='hover']
 		> [data-overlay-content],
 	:global(:where(*:has(> [data-entasis-overlay]:first-child)):focus-within)
-		> [data-entasis-overlay][data-open='true'][data-show-on='focus']
+		> [data-entasis-overlay][data-open][data-show-on='focus']
 		> [data-overlay-content] {
 		pointer-events: auto;
 		translate: 0;
 	}
 
 	@media (hover: none) {
-		:global([data-entasis-overlay][data-open='true'][data-show-on='hover']) {
+		:global([data-entasis-overlay][data-open][data-show-on='hover']) {
 			opacity: 1;
 		}
 
-		:global(
-			[data-entasis-overlay][data-open='true'][data-show-on='hover'] > [data-overlay-content]
-		) {
+		:global([data-entasis-overlay][data-open][data-show-on='hover'] > [data-overlay-content]) {
 			pointer-events: auto;
 			translate: 0;
 		}

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

@@ -1,3 +1,4 @@
 export { default as Overlay } from './Overlay.svelte';
 export type { OverlayAction, OverlayAlign, OverlayPosition, OverlayProps, OverlayShowOn } from './overlay.props.js';
 export { overlayTheme, setOverlayTheme, useOverlayTheme, type OverlayTheme, type OverlayThemeProps } from './overlay.theme.js';
+export { overlayDataAttributes, type OverlayDataAttribute } from './overlay.attributes.js';

package/dist/components/Overlay/index.js

@@ -1,2 +1,3 @@
 export { default as Overlay } from './Overlay.svelte';
 export { overlayTheme, setOverlayTheme, useOverlayTheme } from './overlay.theme.js';
+export { overlayDataAttributes } from './overlay.attributes.js';

package/dist/components/Overlay/overlay.attributes.d.ts

@@ -0,0 +1,16 @@
+/**
+ * The styling hooks an Overlay exposes. Attributes are presence attributes (`''` while the state
+ * holds, omitted otherwise) unless the description says they carry a value.
+ */
+export declare const overlayDataAttributes: {
+    readonly 'data-open': "On the root: present while open (shown, or ready to show on hover or focus).";
+    readonly 'data-closed': "On the root: present while closed, including during the exit transition.";
+    readonly 'data-entering': "On the root: present while the opening transition plays.";
+    readonly 'data-exiting': "On the root: present while the closing transition plays.";
+    readonly 'data-show-on': "On the root: `always`, `hover` or `focus`, the resolved `showOn`.";
+    readonly 'data-position': "On the root: the resolved `position`.";
+    readonly 'data-entasis-overlay': "On the root: always present; marks the overlay inside its container.";
+    readonly 'data-overlay-content': "On the content panel: always present.";
+};
+/** The name of an Overlay data attribute. */
+export type OverlayDataAttribute = keyof typeof overlayDataAttributes;