@svelte-atoms/core 1.0.0-alpha.41 → 1.0.0-alpha.46

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

@@ -1,155 +1,36 @@
-import { getContext, setContext } from 'svelte';
-import { createAttachmentKey } from 'svelte/attachments';
-import { autoUpdate, computePosition, arrow, flip, shift, offset } from '@floating-ui/dom';
-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',
-    content: 'popover-content',
-    indicator: 'popover-indicator',
-    arrow: 'popover-arrow'
-};
+import { getContext, setContext, untrack } from 'svelte';
+import {} from '@floating-ui/dom';
+import { Bond, BondState } from '../../shared/bond.svelte';
+import { BondAtom } from '../../shared';
+import { focus, focusTrap, getElementId, isBrowser } from '../../utils/dom.svelte';
 export class PopoverBond extends Bond {
     static CONTEXT_KEY = '@atomic-sv/bonds/popover';
     constructor(state) {
-        super(state);
+        super(state, 'popover');
     }
+    /** Handle for granular access to trigger attrs, handlers, and attachment */
     trigger() {
-        const isButtonElement = isBrowser()
-            ? this.elements.trigger instanceof HTMLButtonElement
-            : false;
-        const isDisabled = this.state?.props?.disabled ?? false;
-        const isOpen = this.state?.props?.open ?? false;
-        const kind = POPOVER_ELEMENTS_KIND.trigger;
-        const id = getElementId(this.id, kind);
-        const overlayId = getElementId(this.id, POPOVER_ELEMENTS_KIND.content);
-        return {
-            id,
-            role: isButtonElement ? '' : 'button',
-            disabled: isButtonElement ? isDisabled : undefined,
-            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) {
-                    return; // Ignore right-clicks
-                }
-                if (ev.defaultPrevented) {
-                    return;
-                }
-                this.state.toggle();
-            },
-            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;
-            }
-        };
+        return this.atom('trigger', () => new PopoverTriggerAtom(this));
     }
-    content(params = { engine: 'internal' }) {
-        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',
-            'aria-modal': false,
-            'aria-labelledby': triggerId,
-            inert: !isActive ? true : undefined,
-            tabindex: -1,
-            'data-atom': this.id,
-            'data-kind': POPOVER_ELEMENTS_KIND.content,
-            'data-active': isActive,
-            onkeydown: isOpen ? focusManager : undefined,
-            [createAttachmentKey()]: (node) => {
-                this.elements.content = node;
-                const triggerElement = this.elements.trigger;
-                if (!triggerElement) {
-                    return;
-                }
-                if (!this.state.isOpen) {
-                    return;
-                }
-                // 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.contains(activeElement);
-                // Move focus to popover when opened
-                if (!triggerContainsFocus) {
-                    setTimeout(() => focus(node, ['textarea:not([disabled])', 'input:not([disabled])']), 0);
-                }
-                if (params?.engine === undefined) {
-                    return;
-                }
-                if (params?.engine && typeof params.engine === 'function') {
-                    const cleanup = params.engine(this)({});
-                    return () => {
-                        cleanup?.();
-                    };
-                }
-                const cleanup = popover(this)({}, autoUpdate);
-                return () => {
-                    cleanup?.();
-                };
-            }
-        };
+    /** Handle for granular access to the virtual trigger reference */
+    virtualTrigger() {
+        return this.atom('virtual-trigger', () => new PopoverVirtualTriggerAtom(this));
     }
-    indicator() {
-        const kind = POPOVER_ELEMENTS_KIND.indicator;
-        const id = getElementId(this.id, kind);
-        const isOpen = this.state?.props?.open ?? false;
-        return {
-            id,
-            'aria-hidden': true,
-            'aria-live': isOpen ? 'polite' : 'off',
-            'data-kind': kind,
-            [createAttachmentKey()]: (node) => {
-                this.elements.indicator = node;
-            }
-        };
+    /** Handle for granular access to content attrs, handlers, and attachment */
+    overlay() {
+        return this.atom('overlay', () => new PopoverOverlayAtom(this));
+    }
+    /** Handle for granular access to content attrs, handlers, and attachment */
+    content() {
+        return this.atom('content', () => new PopoverContentAtom(this));
     }
+    /** Handle for granular access to arrow attrs and attachment */
     arrow() {
-        const kind = POPOVER_ELEMENTS_KIND.arrow;
-        const id = getElementId(this.id, kind);
-        return {
-            id: id,
-            role: 'presentation',
-            'aria-hidden': true,
-            'data-kind': kind,
-            [createAttachmentKey()]: (node) => {
-                this.elements.arrow = node;
-            }
-        };
+        return this.atom('arrow', () => new PopoverArrowAtom(this));
+    }
+    /** Handle for granular access to indicator attrs and attachment */
+    indicator() {
+        return this.atom('indicator', () => new PopoverIndicatorAtom(this));
     }
     share() {
         return PopoverBond.set(this);
@@ -163,9 +44,37 @@ export class PopoverBond extends Bond {
 }
 export class PopoverState extends BondState {
     position = $state();
+    /**
+     * Controls whether the positioning strategy should actively compute the
+     * popover position. Defaults to `open` when unset, but can be toggled
+     * independently to keep computing while the content is hiding, or to
+     * start computing on hover before the popover is opened.
+     */
+    tracking = $state(undefined);
+    #computedResolve;
+    /**
+     * A promise that resolves with the next position computation. The promise
+     * is renewed after each resolution, so consumers can `await bond.state.computed`
+     * repeatedly to wait for subsequent computations.
+     */
+    computed = this.#createComputed();
     constructor(props) {
         super(props);
     }
+    #createComputed() {
+        return new Promise((resolve) => {
+            this.#computedResolve = resolve;
+        });
+    }
+    /** Notify awaiters of a fresh computation and renew the promise. */
+    notifyComputed(position) {
+        this.position = position;
+        this.#computedResolve(position);
+        this.computed = this.#createComputed();
+    }
+    get shouldTrackPosition() {
+        return this.tracking ?? this.isOpen;
+    }
     get isOpen() {
         return this.props.open ?? false;
     }
@@ -179,62 +88,168 @@ export class PopoverState extends BondState {
         this.props.open = !this.props.open;
     }
 }
-function popover(bond) {
-    return (props, updater) => {
-        const { offset: ofs, placements, placement } = bond.state.props;
-        // Guard: ensure required elements exist
-        if (!bond.elements.content || !bond.elements.trigger) {
+export class PopoverArrowAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'arrow');
+    }
+    get attrs() {
+        return {
+            ...super.attrs,
+            role: 'presentation',
+            'aria-hidden': true
+        };
+    }
+}
+export class PopoverVirtualTriggerAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'virtual-trigger');
+    }
+    get attrs() {
+        return {};
+    }
+    get handlers() {
+        return {};
+    }
+    get attachments() {
+        return {};
+    }
+    get spread() {
+        return {};
+    }
+    get element() {
+        return super.element;
+    }
+    set element(element) {
+        this.setElement(element);
+    }
+}
+export class PopoverOverlayAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'overlay');
+    }
+    get attrs() {
+        const triggerId = getElementId(this.bond.id, `${this.bond.name}-trigger`);
+        const isOpen = this.bond.state?.props?.open ?? false;
+        const isDisabled = this.bond.state?.props?.disabled ?? false;
+        const isActive = isOpen && !isDisabled;
+        return {
+            ...super.attrs,
+            role: 'dialog',
+            'aria-modal': false,
+            'aria-labelledby': triggerId,
+            inert: !isActive ? true : undefined,
+            tabindex: -1,
+            'data-active': isActive
+        };
+    }
+    get handlers() {
+        const isOpen = this.bond.state?.props?.open ?? false;
+        const focusManager = (ev) => {
+            if (ev.key === 'Escape') {
+                this.bond.state.close();
+                this.bond.element('trigger')?.focus();
+                return;
+            }
+            focusTrap(ev);
+        };
+        return {
+            onkeydown: isOpen ? focusManager : undefined
+        };
+    }
+    onmount(node) {
+        const triggerElement = this.bond.element('trigger');
+        if (!triggerElement)
+            return;
+        const isOpen = untrack(() => this.bond.state?.props)?.open ?? false;
+        if (!isOpen)
             return;
+        // Avoid stealing focus from inputs/textareas inside trigger
+        const activeElement = document.activeElement;
+        const triggerContainsFocus = ['input', 'textarea'].includes(activeElement.tagName.toLowerCase()) &&
+            triggerElement.contains(activeElement);
+        if (!triggerContainsFocus) {
+            setTimeout(() => focus(node, ['textarea:not([disabled])', 'input:not([disabled])']), 0);
         }
-        const { content, trigger, arrow: arrowElement } = bond.elements;
-        // Build middleware stack
-        const middleware = [
-            offset(ofs),
-            flip({
-                fallbackPlacements: placements,
-                padding: 8,
-                crossAxis: true,
-                fallbackStrategy: 'bestFit'
-            }),
-            shift({
-                padding: 8,
-                limiter: {
-                    fn: (state) => {
-                        const { x, y } = state;
-                        return {
-                            x,
-                            y
-                        };
-                    }
+    }
+}
+export class PopoverContentAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'content');
+    }
+    get attrs() {
+        const isOpen = this.bond.state?.props?.open ?? false;
+        const isDisabled = this.bond.state?.props?.disabled ?? false;
+        const isActive = isOpen && !isDisabled;
+        return {
+            ...super.attrs,
+            'data-active': isActive
+        };
+    }
+    get handlers() {
+        return {};
+    }
+    onmount(_node) {
+        void _node;
+        return;
+    }
+}
+export class PopoverIndicatorAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'indicator');
+    }
+    get attrs() {
+        const isOpen = this.bond.state?.props?.open ?? false;
+        return {
+            ...super.attrs,
+            'aria-hidden': true,
+            'aria-live': isOpen ? 'polite' : 'off'
+        };
+    }
+}
+export class PopoverTriggerAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'trigger');
+    }
+    get attrs() {
+        const isButtonElement = isBrowser() ? this.element instanceof HTMLButtonElement : false;
+        const isDisabled = this.bond.state?.props?.disabled ?? false;
+        const isOpen = this.bond.state?.props?.open ?? false;
+        const overlayId = getElementId(this.bond.id, `${this.bond.name}-content`);
+        return {
+            ...super.attrs,
+            role: isButtonElement ? '' : 'button',
+            disabled: isButtonElement ? isDisabled : undefined,
+            tabindex: isDisabled ? -1 : 0,
+            'aria-expanded': isOpen,
+            'aria-disabled': isDisabled,
+            'aria-controls': overlayId,
+            'aria-haspopup': 'dialog'
+        };
+    }
+    get handlers() {
+        return {
+            onclick: (ev) => {
+                if (ev.button === 2)
+                    return;
+                if (ev.defaultPrevented)
+                    return;
+                this.bond.state.toggle();
+            },
+            onkeydown: (ev) => {
+                if (this.bond.state?.props?.disabled)
+                    return;
+                if (ev.key === 'Enter' || ev.key === ' ') {
+                    this.bond.state.toggle();
+                    return;
                 }
-            })
-        ];
-        // Add arrow middleware if element exists
-        if (arrowElement) {
-            middleware.push(arrow({ element: arrowElement }));
-        }
-        // Debounce position change callback
-        const onchangeCallback = props.onchange;
-        // 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
-            });
-            bond.state.position = position;
-            onchangeCallback?.(content, position);
-            // Set minimum width to match trigger
-            requestAnimationFrame(() => {
-                content.style.minWidth = `${trigger.clientWidth}px`;
-            });
+                if (ev.key === 'Tab') {
+                    this.bond.element('content')?.focus();
+                    return;
+                }
+                if (ev.key === 'Escape') {
+                    this.bond.state.close();
+                }
+            }
         };
-        // Use auto-update if provided, otherwise compute once
-        if (updater) {
-            return updater(trigger, content, compute, {});
-        }
-        compute();
-    };
+    }
 }

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

@@ -1,4 +1,7 @@
 export * as Popover from './atoms';
 export { clickoutPopover, popover } from './attachments.svelte';
-export { PopoverBond, type PopoverDomElements, type PopoverParams, PopoverState, type PopoverStateProps, type TriggerParams } from './bond.svelte';
+export { PopoverBond, type PopoverDomElements, type PopoverParams, PopoverState, type PopoverStateProps, type TriggerParams, PopoverTriggerAtom, PopoverContentAtom, PopoverArrowAtom, PopoverIndicatorAtom, PopoverVirtualTriggerAtom } from './bond.svelte';
+export * from './motion.svelte';
 export * from './types';
+export * from './strategy-types';
+export * as PopoverStrategies from './strategies';

package/dist/components/popover/index.js

@@ -1,4 +1,7 @@
 export * as Popover from './atoms';
 export { clickoutPopover, popover } from './attachments.svelte';
-export { PopoverBond, PopoverState } from './bond.svelte';
+export { PopoverBond, PopoverState, PopoverTriggerAtom, PopoverContentAtom, PopoverArrowAtom, PopoverIndicatorAtom, PopoverVirtualTriggerAtom } from './bond.svelte';
+export * from './motion.svelte';
 export * from './types';
+export * from './strategy-types';
+export * as PopoverStrategies from './strategies';

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

@@ -0,0 +1,34 @@
+export type AnimatePopoverContentParams = {
+    /** Animation duration in seconds (default: 0.2) */
+    duration?: number;
+    /** Delay before animation starts in seconds (default: 0) */
+    delay?: number;
+    /** Use spring physics for natural motion (default: false) */
+    spring?: boolean;
+    /** Spring stiffness (default: 300) */
+    stiffness?: number;
+    /** Spring damping (default: 30) */
+    damping?: number;
+};
+/**
+ * Modern popover animation inspired by Radix UI and Linear
+ *
+ * Features:
+ * - Vertical scale only (0.96 → 1) for depth without width distortion
+ * - Smart directional slide (adapts to offset and arrow presence)
+ * - Smooth fade (0 → 1)
+ * - Optional spring physics for natural feel
+ * - Transform origin anchored to trigger side
+ *
+ * Edge cases handled:
+ * - offset=0: Minimal slide (4px) for subtle effect
+ * - No arrow: Uses offset-based slide distance
+ * - With arrow: Enhanced slide for arrow reveal
+ *
+ * @example
+ * ```svelte
+ * <Popover.Content animate={animatePopoverContent()}>
+ * <Popover.Content animate={animatePopoverContent({ spring: true })}>
+ * ```
+ */
+export declare function animatePopoverContent(params?: AnimatePopoverContentParams): (node: HTMLElement) => void;

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

@@ -0,0 +1,135 @@
+import { animate, spring } from 'motion';
+import { untrack } from 'svelte';
+import { PopoverBond } from '.';
+/**
+ * Modern popover animation inspired by Radix UI and Linear
+ *
+ * Features:
+ * - Vertical scale only (0.96 → 1) for depth without width distortion
+ * - Smart directional slide (adapts to offset and arrow presence)
+ * - Smooth fade (0 → 1)
+ * - Optional spring physics for natural feel
+ * - Transform origin anchored to trigger side
+ *
+ * Edge cases handled:
+ * - offset=0: Minimal slide (4px) for subtle effect
+ * - No arrow: Uses offset-based slide distance
+ * - With arrow: Enhanced slide for arrow reveal
+ *
+ * @example
+ * ```svelte
+ * <Popover.Content animate={animatePopoverContent()}>
+ * <Popover.Content animate={animatePopoverContent({ spring: true })}>
+ * ```
+ */
+export function animatePopoverContent(params = {}) {
+    let prevOpen;
+    const bond = PopoverBond.get();
+    return (node) => {
+        const { duration = .05, delay = 0, spring: useSpring = false, stiffness = 300, damping = 30 } = params;
+        const isOpen = bond?.state.props.open ?? false;
+        const position = bond?.state.position;
+        if (!position)
+            return;
+        // Skip animation if open state hasn't changed
+        if (isOpen === prevOpen)
+            return;
+        prevOpen = isOpen;
+        requestAnimationFrame(() => {
+            const placement = untrack(() => position.placement);
+            const [side, alignment] = placement?.split('-') ?? ['bottom', ''];
+            // Get offset and arrow configuration
+            const offset = untrack(() => bond?.state.props.offset ?? 0);
+            const hasArrow = untrack(() => bond?.state.props.arrow ?? false);
+            // Calculate transform origin (anchor point relative to trigger)
+            const transformOrigin = getTransformOrigin(side, alignment);
+            // Calculate smart directional offset based on offset and arrow
+            const slideDistance = getSmartSlideDistance(offset, hasArrow);
+            const { x: offsetX, y: offsetY } = getDirectionalOffset(side, slideDistance);
+            // Set initial styles
+            node.style.transformOrigin = transformOrigin;
+            node.style.pointerEvents = 'none';
+            // Modern animation values
+            const keyframes = {
+                scaleY: isOpen ? [0.96, 1] : [1, 0.96],
+                translateX: isOpen ? [`${offsetX}px`, '0px'] : ['0px', `${offsetX}px`],
+                translateY: isOpen ? [`${offsetY}px`, '0px'] : ['0px', `${offsetY}px`],
+                opacity: isOpen ? [0, 1] : [1, 0]
+            };
+            // Animate with spring or standard easing
+            const animation = animate(node, keyframes, useSpring
+                ? { easing: spring({ stiffness, damping }), delay }
+                : { duration, easing: [0.16, 1, 0.3, 1], delay } // Custom cubic-bezier for smooth motion
+            );
+            animation.finished.then(() => {
+                node.style.pointerEvents = 'auto';
+            });
+        });
+    };
+}
+/**
+ * Calculate transform origin based on popover placement
+ * Anchors the animation to the side closest to the trigger
+ */
+function getTransformOrigin(side, alignment) {
+    const horizontal = (() => {
+        if (side === 'top' || side === 'bottom') {
+            if (alignment === 'start')
+                return 'left';
+            if (alignment === 'end')
+                return 'right';
+            return 'center';
+        }
+        return side === 'left' ? 'right' : side === 'right' ? 'left' : 'center';
+    })();
+    const vertical = (() => {
+        if (side === 'left' || side === 'right') {
+            if (alignment === 'start')
+                return 'top';
+            if (alignment === 'end')
+                return 'bottom';
+            return 'center';
+        }
+        return side === 'top' ? 'bottom' : side === 'bottom' ? 'top' : 'center';
+    })();
+    return `${horizontal} ${vertical}`;
+}
+/**
+ * Calculate smart slide distance based on offset and arrow configuration
+ *
+ * Logic:
+ * - offset=0 & no arrow: 4px (minimal, subtle effect)
+ * - offset=0 & arrow: 6px (enough to show arrow animation)
+ * - offset>0 & no arrow: min(offset/2, 8px) (proportional to gap)
+ * - offset>0 & arrow: 8px (standard directional slide)
+ */
+function getSmartSlideDistance(offset, hasArrow) {
+    if (offset === 0) {
+        // Flush against trigger - use minimal slide
+        return hasArrow ? 6 : 4;
+    }
+    if (hasArrow) {
+        // With arrow, use standard 8px slide for consistent arrow reveal
+        return 8;
+    }
+    // No arrow, offset > 0: Use proportional slide (max 8px)
+    // This creates a subtle effect that scales with the gap
+    return Math.min(offset / 2, 8);
+}
+/**
+ * Calculate directional offset based on placement side
+ */
+function getDirectionalOffset(side, distance) {
+    switch (side) {
+        case 'top':
+            return { x: 0, y: distance };
+        case 'bottom':
+            return { x: 0, y: -distance };
+        case 'left':
+            return { x: distance, y: 0 };
+        case 'right':
+            return { x: -distance, y: 0 };
+        default:
+            return { x: 0, y: -distance };
+    }
+}