@svelte-atoms/core 1.0.0-alpha.30 → 1.0.0-alpha.31

package/dist/components/menu/menu.stories.svelte

@@ -1,33 +1,33 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { Menu as AMenu } from '.';
-	import { Button } from '../button';
-
-	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-	const { Story } = defineMeta({
-		title: 'Atoms/Menu',
-		// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-
-		parameters: {
-			// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-			layout: 'fullscreen'
-		},
-		args: {}
-	});
-</script>
-
-<script lang="ts">
-	let open = $state(false);
-</script>
-
-<Story name="Menu" args={{}}>
-	<AMenu.Root bind:open offset={4}>
-		<AMenu.Trigger base={Button}>Select a language</AMenu.Trigger>
-		<AMenu.List>
-			<AMenu.Item>Arabic</AMenu.Item>
-			<AMenu.Item>English</AMenu.Item>
-			<AMenu.Item>Spanish</AMenu.Item>
-			<AMenu.Item>Italian</AMenu.Item>
-		</AMenu.List>
-	</AMenu.Root>
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { Menu as AMenu } from '.';
+	import { Button } from '../button';
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'Atoms/Menu',
+		// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+
+		parameters: {
+			// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+			layout: 'fullscreen'
+		},
+		args: {}
+	});
+</script>
+
+<script lang="ts">
+	let open = $state(false);
+</script>
+
+<Story name="Menu" args={{}}>
+	<AMenu.Root bind:open offset={4}>
+		<AMenu.Trigger base={Button}>Select a language</AMenu.Trigger>
+		<AMenu.List>
+			<AMenu.Item>Arabic</AMenu.Item>
+			<AMenu.Item>English</AMenu.Item>
+			<AMenu.Item>Spanish</AMenu.Item>
+			<AMenu.Item>Italian</AMenu.Item>
+		</AMenu.List>
+	</AMenu.Root>
+</Story>

package/dist/components/popover/bond.svelte.d.ts

@@ -31,11 +31,15 @@ export type PopoverDomElements = {
     arrow: HTMLElement;
 };
 export declare class PopoverBond<Props extends PopoverStateProps = PopoverStateProps, State extends PopoverState<Props> = PopoverState<Props>, Elements extends PopoverDomElements = PopoverDomElements> extends Bond<Props, State, Elements> {
-    #private;
     static CONTEXT_KEY: string;
+    position: ComputePositionReturn | undefined;
     constructor(state: State);
-    get position(): ComputePositionReturn | undefined;
-    trigger(props?: Record<string, unknown>): {
+    trigger(props?: Record<string, unknown> & {
+        onclick?: (ev: PointerEvent) => void;
+        onkeydown?: (ev: KeyboardEvent) => void;
+    }): {
+        onclick: (ev: PointerEvent) => void;
+        onkeydown: (ev: KeyboardEvent) => void;
         id: string;
         role: string;
         disabled: boolean | undefined;
@@ -43,26 +47,35 @@ export declare class PopoverBond<Props extends PopoverStateProps = PopoverStateP
         'aria-expanded': boolean;
         'aria-disabled': boolean;
         'aria-controls': string;
+        'aria-haspopup': string;
         'data-kind': string;
-        onclick: (ev: PointerEvent) => void;
     };
-    content(props?: Record<string, unknown>): {
+    content(props?: Record<string, unknown> & {
+        onchange?: (node: HTMLElement, position: ComputePositionReturn) => void;
+    }): {
+        onchange?: (node: HTMLElement, position: ComputePositionReturn) => void;
         id: string;
         role: string;
         'aria-modal': boolean;
         'aria-labelledby': string;
-        'aria-controlledby': string;
+        'aria-hidden': boolean;
+        inert: string | undefined;
+        tabindex: number;
         'data-atom': string;
         'data-kind': string;
         'data-active': boolean;
+        onkeydown: ((ev: KeyboardEvent) => void) | undefined;
     };
     indicator(props?: Record<string, unknown>): {
         id: string;
-        'aria-controlledby': string;
+        'aria-hidden': boolean;
+        'aria-live': string;
         'data-kind': string;
     };
     arrow(props?: Record<string, unknown>): {
         id: string;
+        role: string;
+        'aria-hidden': boolean;
         'data-kind': string;
     };
     share(): this;

package/dist/components/popover/bond.svelte.js

@@ -1,7 +1,6 @@
 import { getContext, setContext, untrack } from 'svelte';
 import { createAttachmentKey } from 'svelte/attachments';
 import { autoUpdate, computePosition, arrow, flip, offset } from '@floating-ui/dom';
-import { debounce } from 'es-toolkit';
 import { getElementId, isBrowser } from '../../utils/dom.svelte.js';
 import { Bond, BondState } from '../../shared/bond.svelte.js';
 const POPOVER_ELEMENTS_KIND = {
@@ -12,13 +11,10 @@ const POPOVER_ELEMENTS_KIND = {
 };
 export class PopoverBond extends Bond {
     static CONTEXT_KEY = '@atomic-sv/bonds/popover';
-    #position = $state();
+    position = $state();
     constructor(state) {
         super(state);
     }
-    get position() {
-        return this.#position;
-    }
     trigger(props = {}) {
         const isButtonElement = isBrowser()
             ? this.elements.trigger instanceof HTMLButtonElement
@@ -30,12 +26,13 @@ export class PopoverBond extends Bond {
         const overlayId = getElementId(this.id, POPOVER_ELEMENTS_KIND.content);
         return {
             id,
-            role: isButtonElement ? '' : 'button', // Ensure trigger is announced as a button
+            role: isButtonElement ? '' : 'button',
             disabled: isButtonElement ? isDisabled : undefined,
-            tabindex: isDisabled ? -1 : 0, // Make focusable unless disabled
+            tabindex: isDisabled ? -1 : 0,
             'aria-expanded': isOpen,
             'aria-disabled': isDisabled,
             'aria-controls': overlayId,
+            'aria-haspopup': 'dialog',
             'data-kind': kind,
             onclick: (ev) => {
                 if (ev.button === 2) {
@@ -45,17 +42,34 @@ export class PopoverBond extends Bond {
                     return;
                 }
                 this.state.toggle();
+                props.onclick?.(ev);
+            },
+            onkeydown: (ev) => {
+                if (isDisabled)
+                    return;
+                // Toggle on Enter or Space
+                if (ev.key === 'Enter' || ev.key === ' ') {
+                    ev.preventDefault();
+                    this.state.toggle();
+                    props.onkeydown?.(ev);
+                }
+                // Close on Escape
+                else if (ev.key === 'Escape' && isOpen) {
+                    ev.preventDefault();
+                    this.state.close();
+                    props.onkeydown?.(ev);
+                }
             },
             ...props,
             [createAttachmentKey()]: (node) => {
                 this.elements.trigger = node;
-                const position = untrack(() => this.#position);
+                const position = untrack(() => this.position);
                 if (!position) {
                     const init = async () => {
                         popover(this)({
                             ...props,
-                            onchange: (node, position) => {
-                                this.#position = position;
+                            onchange: (_node, position) => {
+                                this.position = position;
                             }
                         });
                         const pointerLeaveHandler = () => {
@@ -79,40 +93,76 @@ export class PopoverBond extends Bond {
         const isOpen = this.state?.props?.open ?? false;
         const isDisabled = this.state?.props?.disabled ?? false;
         const isActive = isOpen && !isDisabled;
+        // Focus management
+        const focusTrap = (ev) => {
+            const node = ev.currentTarget;
+            if (ev.key === 'Escape') {
+                ev.preventDefault();
+                this.state.close();
+                this.elements.trigger?.focus();
+            }
+            // Tab trap - keep focus within popover
+            else if (ev.key === 'Tab') {
+                const focusableElements = node.querySelectorAll('a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])');
+                const firstElement = focusableElements[0];
+                const lastElement = focusableElements[focusableElements.length - 1];
+                if (ev.shiftKey && document.activeElement === firstElement) {
+                    ev.preventDefault();
+                    lastElement?.focus();
+                }
+                else if (!ev.shiftKey && document.activeElement === lastElement) {
+                    ev.preventDefault();
+                    firstElement?.focus();
+                }
+            }
+        };
         return {
             id,
-            role: 'dialog', // Announce as dialog
-            'aria-modal': true, // Modal dialog
-            'aria-labelledby': triggerId, // Link overlay to trigger
-            'aria-controlledby': triggerId, // Link overlay to trigger
+            role: 'dialog',
+            'aria-modal': false,
+            'aria-labelledby': triggerId,
+            'aria-hidden': !isActive,
+            inert: !isActive ? '' : undefined,
+            tabindex: -1,
             'data-atom': this.id,
-            'data-kind': 'overlay',
+            'data-kind': 'content',
             'data-active': isActive,
+            onkeydown: isOpen ? focusTrap : undefined,
             ...props,
             [createAttachmentKey()]: (node) => {
                 this.elements.content = node;
                 if (!this.elements.trigger) {
                     return;
                 }
-                if (!this.state.isOpen)
+                if (!this.state.isOpen) {
                     return;
-                return popover(this)({
+                }
+                // Move focus to popover when opened
+                setTimeout(() => {
+                    const firstFocusable = node.querySelector('a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])');
+                    (firstFocusable || node).focus();
+                }, 0);
+                const cleanup = popover(this)({
                     ...props,
                     onchange: (node, position) => {
-                        this.#position = position;
+                        this.position = position;
                         props.onchange?.(node, position);
                     }
                 }, autoUpdate);
+                return () => {
+                    cleanup?.();
+                };
             }
         };
     }
     indicator(props = {}) {
         const kind = POPOVER_ELEMENTS_KIND.indicator;
         const id = getElementId(this.id, kind);
-        const triggerId = getElementId(this.id, POPOVER_ELEMENTS_KIND.trigger);
+        const isOpen = this.state?.props?.open ?? false;
         return {
             id,
-            'aria-controlledby': triggerId,
+            'aria-hidden': true,
+            'aria-live': isOpen ? 'polite' : 'off',
             'data-kind': kind,
             ...props,
             [createAttachmentKey()]: (node) => {
@@ -125,6 +175,8 @@ export class PopoverBond extends Bond {
         const id = getElementId(this.id, kind);
         return {
             id: id,
+            role: 'presentation',
+            'aria-hidden': true,
             'data-kind': kind,
             ...props,
             [createAttachmentKey()]: (node) => {
@@ -167,8 +219,6 @@ function popover(bond) {
             return;
         }
         const { content, trigger, arrow: arrowElement } = bond.elements;
-        // Set minimum width to match trigger
-        content.style.minWidth = `${trigger.clientWidth}px`;
         // Build middleware stack
         const middleware = [
             offset(ofs),
@@ -183,17 +233,20 @@ function popover(bond) {
         }
         // Debounce position change callback
         const onchangeCallback = props.onchange;
-        const onchangeDebounced = debounce((node, position) => {
-            onchangeCallback?.(node, position);
-        }, 1000 / 60 // ~16ms for 60fps
-        );
         // Compute position and notify listeners
         const compute = async () => {
+            // Wait for next frame to ensure DOM has settled and styles are applied
+            // Double requestAnimationFrame - This ensures the browser has completed both layout calculation AND painting, giving us accurate final dimensions
+            await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
             const position = await computePosition(trigger, content, {
                 placement: placement ?? 'bottom',
                 middleware
             });
-            onchangeDebounced(content, position);
+            onchangeCallback?.(content, position);
+            // Set minimum width to match trigger
+            requestAnimationFrame(() => {
+                content.style.minWidth = `${trigger.clientWidth}px`;
+            });
         };
         // Use auto-update if provided, otherwise compute once
         if (updater) {

package/dist/components/popover/motion.d.ts

@@ -0,0 +1,6 @@
+export type AnimatePopoverContentParams = {
+    duration?: number;
+    delay?: number;
+    ease?: string;
+};
+export declare function animatePopoverContent(params?: AnimatePopoverContentParams): (node: HTMLElement) => void;

package/dist/components/popover/motion.js

@@ -0,0 +1,56 @@
+import { animate } from 'motion';
+import { PopoverBond } from '.';
+import { DURATION } from '../../shared';
+export function animatePopoverContent(params = {}) {
+    return (node) => {
+        const bond = PopoverBond.get();
+        const { duration = DURATION.quick / 1000, delay = 0, ease = 'easeInOut' } = params;
+        const isOpen = bond?.state.props.open ?? false;
+        const position = bond.position;
+        const placement = position?.placement;
+        const x = position?.x ?? 0;
+        const y = position?.y ?? 0;
+        const dy = placement?.startsWith('top') ? -1 : placement?.startsWith('bottom') ? 1 : 0;
+        const dx = placement?.startsWith('left') ? -1 : placement?.startsWith('right') ? 1 : 0;
+        const offset = bond.state.props.offset;
+        const xOffset = dx * offset;
+        const yOffset = dy * offset;
+        const openAsNumber = +isOpen;
+        const deltaArrow = position?.middlewareData?.arrow ? 1 : 0;
+        const arrowClientWidth = bond?.elements.arrow?.clientWidth ?? 0;
+        const arrowClientHeight = bond?.elements.arrow?.clientHeight ?? 0;
+        const getTransformOrigin = () => {
+            switch (placement) {
+                case 'top':
+                case 'top-start':
+                case 'top-end':
+                    return 'bottom';
+                case 'bottom':
+                case 'bottom-start':
+                case 'bottom-end':
+                    return 'top';
+                case 'left':
+                case 'left-start':
+                case 'left-end':
+                    return 'right';
+                case 'right':
+                case 'right-start':
+                case 'right-end':
+                    return 'left';
+                default:
+                    return 'center';
+            }
+        };
+        const transformOrigin = getTransformOrigin();
+        const from = isOpen ? 1 : 0.95;
+        animate(node, {
+            opacity: openAsNumber,
+            y: dy * (!isOpen ? -1 : 0) * (arrowClientHeight + yOffset),
+            x: dx * (!isOpen ? -1 : 0) * (arrowClientWidth + xOffset),
+            scaleY: dy ? (isOpen ? [from, 1] : [1, 0.8]) : undefined,
+            scaleX: dx ? (isOpen ? [from, 1] : [1, 0.8]) : undefined,
+            transformOrigin
+        }, { duration, delay, ease });
+        animate(node, { opacity: +isOpen }, { duration, ease, delay });
+    };
+}

package/dist/components/popover/popover-arrow.svelte

@@ -1,111 +1,111 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { animate as motion } from 'motion';
-	import { HtmlAtom, type Base } from '../atom';
-	import { PopoverBond } from './bond.svelte';
-	import type { PopoverArrowProps } from './types';
-
-	type Element = HTMLElementTagNameMap[E];
-
-	const bond = PopoverBond.get();
-
-	if (!bond) {
-		throw new Error('');
-	}
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = _animate,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: PopoverArrowProps<E, B> & HTMLAttributes<Element> = $props();
-
-	const position = $derived(bond.position);
-	const middlewareArrowData = $derived(position?.middlewareData?.arrow);
-	const isReady = $derived(!!middlewareArrowData);
-	const side = $derived(position?.placement?.split('-')[0] ?? 'top');
-
-	const arrowProps = $derived({
-		...bond.arrow(),
-		...restProps
-	});
-
-	// Rotation based on placement side
-	const rotation = $derived.by(() => {
-		switch (side) {
-			case 'top':
-				return 180;
-			case 'bottom':
-				return 0;
-			case 'left':
-				return 90;
-			case 'right':
-				return -90;
-			default:
-				return 0;
-		}
-	});
-
-	function _animate(node: HTMLElement) {
-		if (!middlewareArrowData) {
-			return;
-		}
-
-		const { x, y } = middlewareArrowData;
-
-		const isMainAxis = side === 'top' || side === 'bottom';
-
-		const crossAxisStyle = isMainAxis
-			? {
-					left: 0
-				}
-			: {
-					top: 0
-				};
-
-		motion(
-			node,
-			{
-				x: x ?? 0,
-				y: y ?? 0,
-				opacity: 1,
-				...crossAxisStyle
-			},
-			{ duration: 0 }
-		);
-	}
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="popover.arrow"
-	class={['text-border border-border pointer-events-none absolute opacity-0', '$preset', klass]}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	style="{side}: 100%;"
-	{...arrowProps}
->
-	{#if children}
-		{@render children({ popover: bond })}
-	{:else}
-		<svg
-			width="16"
-			height="8"
-			viewBox="0 0 16 8"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-			style="transform: rotate({rotation}deg);"
-		>
-			<path d="M0 8C2 8 6 4 8 0C10 4 14 8 16 8H0Z" fill="currentColor" />
-		</svg>
-	{/if}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { animate as motion } from 'motion';
+	import { HtmlAtom, type Base } from '../atom';
+	import { PopoverBond } from './bond.svelte';
+	import type { PopoverArrowProps } from './types';
+
+	type Element = HTMLElementTagNameMap[E];
+
+	const bond = PopoverBond.get();
+
+	if (!bond) {
+		throw new Error('');
+	}
+
+	let {
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = _animate,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: PopoverArrowProps<E, B> & HTMLAttributes<Element> = $props();
+
+	const position = $derived(bond.position);
+	const middlewareArrowData = $derived(position?.middlewareData?.arrow);
+	const isReady = $derived(!!middlewareArrowData);
+	const side = $derived(position?.placement?.split('-')[0] ?? 'top');
+
+	const arrowProps = $derived({
+		...bond.arrow(),
+		...restProps
+	});
+
+	// Rotation based on placement side
+	const rotation = $derived.by(() => {
+		switch (side) {
+			case 'top':
+				return 180;
+			case 'bottom':
+				return 0;
+			case 'left':
+				return 90;
+			case 'right':
+				return -90;
+			default:
+				return 0;
+		}
+	});
+
+	function _animate(node: HTMLElement) {
+		if (!middlewareArrowData) {
+			return;
+		}
+
+		const { x, y } = middlewareArrowData;
+
+		const isMainAxis = side === 'top' || side === 'bottom';
+
+		const crossAxisStyle = isMainAxis
+			? {
+					left: 0
+				}
+			: {
+					top: 0
+				};
+
+		motion(
+			node,
+			{
+				x: x ?? 0,
+				y: y ?? 0,
+				opacity: 1,
+				...crossAxisStyle
+			},
+			{ duration: 0 }
+		);
+	}
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="popover.arrow"
+	class={['text-border border-border pointer-events-none absolute opacity-0', '$preset', klass]}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	style="{side}: 100%;"
+	{...arrowProps}
+>
+	{#if children}
+		{@render children({ popover: bond })}
+	{:else}
+		<svg
+			width="16"
+			height="8"
+			viewBox="0 0 16 8"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			style="transform: rotate({rotation}deg);"
+		>
+			<path d="M0 8C2 8 6 4 8 0C10 4 14 8 16 8H0Z" fill="currentColor" />
+		</svg>
+	{/if}
+</HtmlAtom>