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

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

@@ -1,8 +1,7 @@
 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 { focus, focusTrap, getElementId, isBrowser } from '../../utils/dom.svelte.js';
 import { Bond, BondState } from '../../shared/bond.svelte.js';
 const POPOVER_ELEMENTS_KIND = {
     trigger: 'popover-trigger',
@@ -12,14 +11,11 @@ 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 = {}) {
+    trigger() {
         const isButtonElement = isBrowser()
             ? this.elements.trigger instanceof HTMLButtonElement
             : false;
@@ -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) {
@@ -46,16 +43,30 @@ export class PopoverBond extends Bond {
                 }
                 this.state.toggle();
             },
-            ...props,
+            onkeydown: (ev) => {
+                if (isDisabled)
+                    return;
+                // Toggle on Enter or Space
+                if (ev.key === 'Enter' || ev.key === ' ') {
+                    this.state.toggle();
+                    return;
+                }
+                if (ev.key === 'Tab') {
+                    this.elements.content?.focus();
+                    return;
+                }
+                if (ev.key === 'Escape') {
+                    this.state.close();
+                }
+            },
             [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 = () => {
@@ -72,61 +83,85 @@ export class PopoverBond extends Bond {
             }
         };
     }
-    content(props = {}) {
+    content() {
         const kind = POPOVER_ELEMENTS_KIND.content;
         const id = getElementId(this.id, kind);
         const triggerId = getElementId(this.id, POPOVER_ELEMENTS_KIND.trigger);
         const isOpen = this.state?.props?.open ?? false;
         const isDisabled = this.state?.props?.disabled ?? false;
         const isActive = isOpen && !isDisabled;
+        // Focus management
+        const focusManager = (ev) => {
+            if (ev.key === 'Escape') {
+                this.state.close();
+                this.elements.trigger?.focus();
+                return;
+            }
+            focusTrap(ev);
+        };
         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,
+            inert: !isActive ? true : undefined,
+            tabindex: -1,
             'data-atom': this.id,
-            'data-kind': 'overlay',
+            'data-kind': 'content',
             'data-active': isActive,
-            ...props,
+            onkeydown: isOpen ? focusManager : undefined,
             [createAttachmentKey()]: (node) => {
                 this.elements.content = node;
-                if (!this.elements.trigger) {
+                const triggerElement = this.elements.trigger;
+                if (!triggerElement) {
                     return;
                 }
-                if (!this.state.isOpen)
+                if (!this.state.isOpen) {
                     return;
-                return popover(this)({
-                    ...props,
+                }
+                // check if trigger contains a focusable element and the focus is already inside
+                // check if the in-focus element is an input, textarea or select to avoid stealing focus
+                const activeElement = document.activeElement;
+                const triggerContainsFocus = ['input', 'textarea'].includes(activeElement.tagName.toLowerCase()) ||
+                    triggerElement === activeElement ||
+                    triggerElement.contains(activeElement);
+                // Move focus to popover when opened
+                if (!triggerContainsFocus) {
+                    setTimeout(() => focus(node), 0);
+                }
+                const cleanup = popover(this)({
                     onchange: (node, position) => {
-                        this.#position = position;
-                        props.onchange?.(node, position);
+                        this.position = position;
                     }
                 }, autoUpdate);
+                return () => {
+                    cleanup?.();
+                };
             }
         };
     }
-    indicator(props = {}) {
+    indicator() {
         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) => {
                 this.elements.indicator = node;
             }
         };
     }
-    arrow(props = {}) {
+    arrow() {
         const kind = POPOVER_ELEMENTS_KIND.arrow;
         const id = getElementId(this.id, kind);
         return {
             id: id,
+            role: 'presentation',
+            'aria-hidden': true,
             'data-kind': kind,
-            ...props,
             [createAttachmentKey()]: (node) => {
                 this.elements.arrow = node;
             }
@@ -167,8 +202,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 +216,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>