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

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

@@ -1,40 +1,40 @@
-<script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { Content } from '../popover/atoms';
-	import type { Base } from '../atom';
-	import { MenuBond } from './bond.svelte';
-	import { Root } from '../list/atoms';
-
-	const bond = MenuBond.get();
-
-	let {
-		class: klass = '',
-		as = 'ul' as T,
-		base = Root as B,
-		preset = 'menu.content',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	} = $props();
-</script>
-
-<Content
-	{as}
-	{base}
-	{bond}
-	{preset}
-	class={['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 { Content } from '../popover/atoms';
+	import type { Base } from '../atom';
+	import { MenuBond } from './bond.svelte';
+	import { Root } from '../list/atoms';
+
+	const bond = MenuBond.get();
+
+	let {
+		class: klass = '',
+		as = 'ul' as T,
+		base = Root as B,
+		preset = 'menu.content',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	} = $props();
+</script>
+
+<Content
+	{as}
+	{base}
+	{bond}
+	{preset}
+	class={['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-root.svelte

@@ -1,15 +1,15 @@
-<script lang="ts">
-	import { MenuBond, MenuBondState, type MenuBondProps } from './bond.svelte';
-	import { Root } from '../popover/atoms';
-
-	let { open = $bindable(false), factory = _factory, children, ...restProps } = $props();
-
-	function _factory(props: MenuBondProps) {
-		const menuBondState = new MenuBondState(() => props);
-		return new MenuBond(menuBondState);
-	}
-</script>
-
-<Root bind:open {factory} {...restProps}>
-	{@render children?.()}
-</Root>
+<script lang="ts">
+	import { MenuBond, MenuBondState, type MenuBondProps } from './bond.svelte';
+	import { Root } from '../popover/atoms';
+
+	let { open = $bindable(false), factory = _factory, children, ...restProps } = $props();
+
+	function _factory(props: MenuBondProps) {
+		const menuBondState = new MenuBondState(() => props);
+		return new MenuBond(menuBondState);
+	}
+</script>
+
+<Root bind:open {factory} {...restProps}>
+	{@render children?.()}
+</Root>

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

@@ -1,7 +1,7 @@
 import { MenuBond, MenuBondState, type MenuBondProps } from './bond.svelte';
 declare const MenuRoot: import("svelte").Component<{
     open?: boolean;
-    factory?: (props: MenuBondProps) => MenuBond<import(".").PopoverStateProps, MenuBondState<import(".").PopoverStateProps>, import(".").PopoverDomElements>;
+    factory?: (props: MenuBondProps) => MenuBond<import("..").PopoverStateProps, MenuBondState<import("..").PopoverStateProps>, import("..").PopoverDomElements>;
     children: any;
 } & Record<string, any>, {}, "open">;
 type MenuRoot = ReturnType<typeof MenuRoot>;

package/dist/components/menu/types.d.ts

@@ -1,8 +1,4 @@
-import type { HtmlAtomProps, Base } from '../atom';
 /**
- * Extend this interface to add custom menu list properties in your application.
+ * @deprecated Import from `dropdown-menu` instead. This module will be removed in a future version.
  */
-export interface MenuListExtendProps {
-}
-export interface MenuListProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, MenuListExtendProps {
-}
+export type { DropdownMenuListProps as MenuListProps } from '../dropdown-menu/types';

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

@@ -1,6 +1,8 @@
 import { type ComputePositionReturn, type Placement } from '@floating-ui/dom';
-import { Bond, BondState, type BondStateProps } from '../../shared/bond.svelte.js';
+import { Bond, BondState, type BondStateProps, type BondVirtualElement } from '../../shared/bond.svelte';
+import { BondAtom } from '../../shared';
 import type { PortalBond } from '../portal';
+import type { PopoverStrategy } from './strategy-types';
 export type PopoverParams = {
     apply?: (node: HTMLElement, params: {
         x: number;
@@ -27,6 +29,8 @@ export type PopoverStateProps = BondStateProps & {
     placement: Placement | undefined;
     offset: number;
     portal?: string | PortalBond;
+    strategy?: PopoverStrategy;
+    readonly positionStrategy: 'fixed' | 'absolute';
     readonly rest?: Record<string, unknown>;
 };
 export type TriggerParams = {
@@ -34,6 +38,7 @@ export type TriggerParams = {
 };
 export type PopoverDomElements = {
     trigger: HTMLElement;
+    'virtual-trigger'?: BondVirtualElement;
     content: HTMLElement;
     indicator: HTMLElement;
     arrow: HTMLElement;
@@ -41,56 +46,79 @@ export type PopoverDomElements = {
 export declare class PopoverBond<Props extends PopoverStateProps = PopoverStateProps, State extends PopoverState<Props> = PopoverState<Props>, Elements extends PopoverDomElements = PopoverDomElements> extends Bond<Props, State, Elements> {
     static CONTEXT_KEY: string;
     constructor(state: State);
-    trigger(): {
-        [x: symbol]: (node: HTMLElement) => void;
-        id: string;
+    /** Handle for granular access to trigger attrs, handlers, and attachment */
+    trigger(): PopoverTriggerAtom;
+    /** Handle for granular access to the virtual trigger reference */
+    virtualTrigger(): PopoverVirtualTriggerAtom;
+    /** Handle for granular access to content attrs, handlers, and attachment */
+    content(): PopoverContentAtom;
+    /** Handle for granular access to arrow attrs and attachment */
+    arrow(): PopoverArrowAtom;
+    /** Handle for granular access to indicator attrs and attachment */
+    indicator(): PopoverIndicatorAtom;
+    share(): this;
+    static get(): PopoverBond;
+    static set(bond: PopoverBond): PopoverBond<PopoverStateProps, PopoverState<PopoverStateProps>, PopoverDomElements>;
+}
+export declare class PopoverState<Props extends PopoverStateProps = PopoverStateProps> extends BondState<Props> {
+    position: ComputePositionReturn | undefined;
+    constructor(props: () => Props);
+    get isOpen(): boolean;
+    open(): void;
+    close(): void;
+    toggle(): void;
+}
+export declare class PopoverArrowAtom extends BondAtom<PopoverBond, HTMLElement> {
+    constructor(bond: PopoverBond);
+    get attrs(): {
         role: string;
-        disabled: boolean | undefined;
-        tabindex: number;
-        'aria-expanded': boolean;
-        'aria-disabled': boolean;
-        'aria-controls': string;
-        'aria-haspopup': string;
-        'data-kind': string;
-        onclick: (ev: PointerEvent) => void;
-        onkeydown: (ev: KeyboardEvent) => void;
+        'aria-hidden': boolean;
     };
-    content(params?: PopoverContentPropsParams): {
-        [x: symbol]: (node: HTMLElement) => (() => void) | undefined;
-        id: string;
+}
+export declare class PopoverVirtualTriggerAtom extends BondAtom<PopoverBond, BondVirtualElement> {
+    constructor(bond: PopoverBond);
+    get attrs(): {};
+    get handlers(): {};
+    get attachments(): {};
+    get spread(): {};
+    get element(): BondVirtualElement | undefined;
+    set element(element: BondVirtualElement | undefined);
+}
+export declare class PopoverContentAtom extends BondAtom<PopoverBond, HTMLElement> {
+    constructor(bond: PopoverBond);
+    get attrs(): {
         role: string;
         'aria-modal': boolean;
         'aria-labelledby': string;
         inert: boolean | undefined;
         tabindex: number;
-        'data-atom': string;
-        'data-kind': string;
         'data-active': boolean;
+    };
+    get handlers(): {
         onkeydown: ((ev: KeyboardEvent) => void) | undefined;
     };
-    indicator(): {
-        [x: symbol]: (node: HTMLElement) => void;
-        id: string;
+    onmount(node: HTMLElement): void;
+}
+export declare class PopoverIndicatorAtom extends BondAtom<PopoverBond, HTMLElement> {
+    constructor(bond: PopoverBond);
+    get attrs(): {
         'aria-hidden': boolean;
-        'aria-live': string;
-        'data-kind': string;
+        'aria-live': "off" | "polite";
     };
-    arrow(): {
-        [x: symbol]: (node: HTMLElement) => void;
-        id: string;
+}
+export declare class PopoverTriggerAtom extends BondAtom<PopoverBond, HTMLElement> {
+    constructor(bond: PopoverBond);
+    get attrs(): {
         role: string;
-        'aria-hidden': boolean;
-        'data-kind': string;
+        disabled: boolean | undefined;
+        tabindex: number;
+        'aria-expanded': boolean;
+        'aria-disabled': boolean;
+        'aria-controls': string;
+        'aria-haspopup': string;
+    };
+    get handlers(): {
+        onclick: (ev: PointerEvent) => void;
+        onkeydown: (ev: KeyboardEvent) => void;
     };
-    share(): this;
-    static get(): PopoverBond;
-    static set(bond: PopoverBond): PopoverBond<PopoverStateProps, PopoverState<PopoverStateProps>, PopoverDomElements>;
-}
-export declare class PopoverState<Props extends PopoverStateProps = PopoverStateProps> extends BondState<Props> {
-    position: ComputePositionReturn | undefined;
-    constructor(props: () => Props);
-    get isOpen(): boolean;
-    open(): void;
-    close(): void;
-    toggle(): void;
 }

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

@@ -1,155 +1,32 @@
-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 */
+    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);
@@ -179,62 +56,147 @@ 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 PopoverContentAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'content');
+    }
+    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 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,6 @@
 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 './types';
+export * from './strategy-types';
+export * as PopoverStrategies from './strategies';

package/dist/components/popover/index.js

@@ -1,4 +1,6 @@
 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 './types';
+export * from './strategy-types';
+export * as PopoverStrategies from './strategies';