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

package/dist/components/menu/menu-item.svelte

@@ -1,51 +1,69 @@
-<script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { PopoverBond } from '../popover/bond.svelte';
-	import type { Base } from '../atom';
-	import { List } from '../list';
-
-	const bond = PopoverBond.get();
-
-	let {
-		class: klass = '',
-		preset: presetKey = 'menu.item',
-		children = undefined,
-		onclick = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	} = $props();
-
-	function _onclick(ev: MouseEvent) {
-		onclick?.(ev);
-
-		if (ev.defaultPrevented) {
-			return;
-		}
-
-		bond?.state.close();
-	}
-</script>
-
-<List.Item
-	{bond}
-	preset={presetKey}
-	class={[
-		'border-border last:border-b-none hover:bg-foreground/5 active:bg-foreground/10 cursor-pointer border-b',
-		'$preset',
-		klass
-	]}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	onclick={_onclick}
-	{...restProps}
->
-	{@render children?.({ menu: bond })}
-</List.Item>
+<script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { PopoverBond } from '../popover/bond.svelte';
+	import type { Base } from '../atom';
+	import { List } from '../list';
+
+	const bond = PopoverBond.get();
+
+	let {
+		class: klass = '',
+		preset: presetKey = 'menu.item',
+		children = undefined,
+		onclick = undefined,
+		disabled = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	} = $props();
+
+	function _onclick(ev: MouseEvent) {
+		onclick?.(ev);
+
+		if (ev.defaultPrevented) {
+			return;
+		}
+
+		bond?.state.close();
+	}
+
+	function _onkeydown(ev: KeyboardEvent) {
+		if (disabled) return;
+
+		// Activate on Enter or Space
+		if (ev.key === 'Enter' || ev.key === ' ') {
+			ev.preventDefault();
+			// Call the click handler if provided
+			// cast to any to avoid strict event-type mismatch when forwarding
+			onclick?.(ev as unknown as MouseEvent);
+			bond?.state.close();
+		}
+	}
+</script>
+
+<List.Item
+	{bond}
+	preset={presetKey}
+	class={[
+		'border-border last:border-b-none hover:bg-foreground/5 active:bg-foreground/10 cursor-pointer border-b',
+		'$preset',
+		klass
+	]}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	role="menuitem"
+	aria-disabled={disabled ? true : undefined}
+	tabIndex={disabled ? -1 : 0}
+	onkeydown={_onkeydown}
+	onclick={_onclick}
+	{...restProps}
+>
+	{@render children?.({ menu: bond })}
+</List.Item>

package/dist/components/menu/menu-item.svelte.d.ts

@@ -5,6 +5,7 @@ declare function $$render<T extends keyof HTMLElementTagNameMap = 'div', B exten
         preset?: string;
         children?: any;
         onclick?: any;
+        disabled?: any;
         onmount?: any;
         ondestroy?: any;
         animate?: any;

package/dist/components/menu/menu-list.svelte

@@ -1,40 +1,40 @@
-<script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { List } from '../list';
-	import { Content } from '../popover/atoms';
-	import type { Base } from '../atom';
-	import { PopoverBond } from '../popover';
-
-	const bond = PopoverBond.get();
-
-	let {
-		class: klass = '',
-		as = 'ul' as T,
-		base = List.Root as B,
-		preset = 'menu.list',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	} = $props();
-</script>
-
-<Content
-	{as}
-	{base}
-	{bond}
-	{preset}
-	class={['bg-background border-border overflow-hidden p-0', '$preset', klass]}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	{...restProps}
->
-	{@render children?.()}
-</Content>
+<script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { List } from '../list';
+	import { Content } from '../popover/atoms';
+	import type { Base } from '../atom';
+	import { PopoverBond } from '../popover';
+
+	const bond = PopoverBond.get();
+
+	let {
+		class: klass = '',
+		as = 'ul' as T,
+		base = List.Root as B,
+		preset = 'menu.list',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	} = $props();
+</script>
+
+<Content
+	{as}
+	{base}
+	{bond}
+	{preset}
+	class={['bg-background border-border overflow-hidden p-0', '$preset', klass]}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	{...restProps}
+>
+	{@render children?.()}
+</Content>

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

@@ -1,7 +1,6 @@
 <script module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 	import { Menu as AMenu } from '.';
-	import Root from '../root/root.svelte';
 	import { Button } from '../button';
 
 	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
@@ -22,15 +21,13 @@
 </script>
 
 <Story name="Menu" args={{}}>
-	<Root class="p-4">
-		<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>
-	</Root>
+	<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)(node, {
+                        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)(node, {
+                }
+                // 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) => {
@@ -160,38 +212,45 @@ export class PopoverState extends BondState {
     }
 }
 function popover(bond) {
-    return (node, props, updater) => {
+    return (props, updater) => {
         const { offset: ofs, placements, placement } = bond.state.props;
-        if (!bond.elements.content) {
-            return;
-        }
-        if (!bond.elements.trigger) {
+        // Guard: ensure required elements exist
+        if (!bond.elements.content || !bond.elements.trigger) {
             return;
         }
-        bond.elements.content.style.minWidth = bond.elements.trigger.clientWidth + 'px';
-        const middleware = [];
-        if (bond.elements.arrow) {
-            middleware.push(arrow({ element: bond.elements.arrow }));
+        const { content, trigger, arrow: arrowElement } = bond.elements;
+        // Build middleware stack
+        const middleware = [
+            offset(ofs),
+            flip({
+                fallbackPlacements: placements,
+                padding: 4
+            })
+        ];
+        // Add arrow middleware if element exists
+        if (arrowElement) {
+            middleware.push(arrow({ element: arrowElement }));
         }
-        const onchangeDebounced = debounce((node, position) => {
-            props.onchange?.(node, position);
-        }, 1000 / 60);
+        // Debounce position change callback
+        const onchangeCallback = props.onchange;
+        // Compute position and notify listeners
         const compute = async () => {
-            const position = await computePosition(bond.elements.trigger, node, {
-                placement,
-                middleware: [
-                    offset(ofs),
-                    flip({
-                        fallbackPlacements: placements,
-                        padding: 4
-                    }),
-                    ...middleware
-                ]
+            // 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
+            });
+            onchangeCallback?.(content, position);
+            // Set minimum width to match trigger
+            requestAnimationFrame(() => {
+                content.style.minWidth = `${trigger.clientWidth}px`;
             });
-            onchangeDebounced?.(node, position);
         };
+        // Use auto-update if provided, otherwise compute once
         if (updater) {
-            return updater(bond.elements.trigger, node, compute, {});
+            return updater(trigger, content, compute, {});
         }
         compute();
     };

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

@@ -98,14 +98,14 @@
 		{@render children({ popover: bond })}
 	{:else}
 		<svg
-			width="12"
-			height="12"
-			viewBox="0 0 12 12"
+			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 12L6 6L12 12H0Z" fill="currentColor" stroke="none" />
+			<path d="M0 8C2 8 6 4 8 0C10 4 14 8 16 8H0Z" fill="currentColor" />
 		</svg>
 	{/if}
 </HtmlAtom>