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

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

@@ -1,103 +1,87 @@
-<script
-	lang="ts"
-	generics="D, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base"
->
-	import { defineProperty, defineState } from '../../../utils';
-	import type { Base } from '../../atom';
-	import { MenuItemController, type MenuItemControllerProps } from './controller.svelte';
-	import { MenuBond } from '../bond.svelte';
-	import { List } from '../../list';
-	import type { MenuItemProps } from './types';
-
-	const menu = MenuBond.get();
-
-	if (!menu) {
-		throw new Error('<MenuItem> must be used within a <Menu>.');
-	}
-
-	const ID = $props.id();
-
-	let {
-		class: klass = '',
-		id = ID,
-		preset: presetKey = 'menu.item',
-		children = undefined,
-		onclick = undefined,
-		disabled = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		factory = _factory,
-		...restProps
-	}: MenuItemProps = $props();
-
-	const controller = factory().share();
-
-	const itemProps = $derived({
-		...menu?.item?.(),
-		...controller?.elementProps(),
-		...restProps
-	});
-
-	$effect(() => {
-		return () => {
-			controller.destroy();
-		};
-	});
-
-	function _factory() {
-		const item = menu?.state?.item?.(id);
-
-		if (item) {
-			return item as MenuItemController;
-		}
-
-		const bondProps = defineState<MenuItemControllerProps>([defineProperty('id', () => id)]);
-		const controller = new MenuItemController(() => bondProps);
-
-		controller.mount();
-
-		return controller;
-	}
-
-	function handleClick(ev: MouseEvent) {
-		onclick?.(ev);
-
-		if (ev.defaultPrevented) {
-			return;
-		}
-
-		ev.preventDefault();
-
-		controller?.menu?.state.close();
-	}
-
-	export function getController() {
-		return controller;
-	}
-</script>
-
-<List.Item
-	bond={controller}
-	preset={presetKey}
-	class={[
-		'border-border last:border-b-none hover:bg-foreground/5 active:bg-foreground/10 outline-primary cursor-pointer border-b',
-		'$preset',
-		klass
-	]}
-	onmount={onmount?.bind(controller) as any}
-	ondestroy={ondestroy?.bind(controller) as any}
-	enter={enter?.bind(controller) as any}
-	exit={exit?.bind(controller) as any}
-	initial={initial?.bind(controller) as any}
-	animate={animate?.bind(controller) as any}
-	aria-disabled={disabled ? true : undefined}
-	tabIndex={disabled ? -1 : 0}
-	onclick={handleClick}
-	{...itemProps}
->
-	{@render children?.({ menuItem: controller })}
-</List.Item>
+<script
+	lang="ts"
+	generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base"
+>
+	import type { Base } from '../../atom';
+	import { MenuItemAtom, type MenuItemAtomProps } from './bond.svelte';
+	import { MenuBond } from '../bond.svelte';
+	import { HtmlAtom } from '../../atom';
+	import type { MenuItemProps } from './types';
+
+	const menu = MenuBond.get();
+
+	if (!menu) {
+		throw new Error('<MenuItem> must be used within a <Menu>.');
+	}
+
+	let {
+		class: klass = '',
+		id,
+		preset: presetKey = 'menu.item',
+		disabled = undefined,
+		children = undefined,
+		onclick = undefined,
+		...restProps
+	}: MenuItemProps = $props();
+
+	// Create reactive props object for the atom
+	const itemProps = $derived<MenuItemAtomProps>({
+		id: id ?? '',
+		disabled
+	});
+
+	// Create the atom instance
+	const atom = new MenuItemAtom<typeof menu>(() => itemProps, menu);
+
+	// Derived reactive properties
+	const isHighlighted = $derived(atom.isHighlighted);
+
+	// Merge atom attrs with custom props
+	const itemAttrs = $derived({
+		...atom.attrs,
+		...restProps
+	});
+
+	// Register item with menu state and handle mounting
+	$effect.pre(() => {
+		menu.state.registerItem(id ?? '', atom as any);
+
+		const unmount = atom.mount();
+		return () => {
+			unmount?.();
+			atom.unmount();
+			menu.state.unregisterItem(id ?? '');
+		};
+	});
+
+	function handleClick(ev: MouseEvent) {
+		onclick?.(ev);
+
+		if (ev.defaultPrevented) {
+			return;
+		}
+
+		ev.preventDefault();
+
+		atom.close();
+	}
+
+	export function getController() {
+		return atom;
+	}
+</script>
+
+<HtmlAtom
+	preset={presetKey}
+	class={[
+		'border-border last:border-b-none hover:bg-foreground/5 active:bg-foreground/10 outline-primary cursor-pointer border-b',
+		'$preset',
+		klass
+	]
+		.filter(Boolean)
+		.join(' ')}
+	{...itemAttrs}
+	onclick={handleClick}
+>
+	{@render children?.({ menuItem: atom })}
+</HtmlAtom>

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

@@ -1,31 +1,32 @@
 import type { Base } from '../../atom';
-import { MenuItemController } from './controller.svelte';
+import { MenuItemAtom } from './bond.svelte';
+import { MenuBond } from '../bond.svelte';
 import type { MenuItemProps } from './types';
-declare function $$render<D, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
+declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
     props: MenuItemProps;
     exports: {
-        getController: () => MenuItemController;
+        getController: () => MenuItemAtom<MenuBond<import("../..").PopoverStateProps, import("../bond.svelte").MenuBondState<import("../..").PopoverStateProps>, import("../..").PopoverDomElements>>;
     };
     bindings: "";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<D, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> {
-    props(): ReturnType<typeof $$render<D, E, B>>['props'];
-    events(): ReturnType<typeof $$render<D, E, B>>['events'];
-    slots(): ReturnType<typeof $$render<D, E, B>>['slots'];
+declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> {
+    props(): ReturnType<typeof $$render<E, B>>['props'];
+    events(): ReturnType<typeof $$render<E, B>>['events'];
+    slots(): ReturnType<typeof $$render<E, B>>['slots'];
     bindings(): "";
     exports(): {
-        getController: () => MenuItemController;
+        getController: () => MenuItemAtom<MenuBond<import("../..").PopoverStateProps, import("../bond.svelte").MenuBondState<import("../..").PopoverStateProps>, import("../..").PopoverDomElements>>;
     };
 }
 interface $$IsomorphicComponent {
-    new <D, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<D, E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<D, E, B>['props']>, ReturnType<__sveltets_Render<D, E, B>['events']>, ReturnType<__sveltets_Render<D, E, B>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<D, E, B>['bindings']>;
-    } & ReturnType<__sveltets_Render<D, E, B>['exports']>;
-    <D, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<D, E, B>['props']> & {}): ReturnType<__sveltets_Render<D, E, B>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
+    new <E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<E, B>['props']>, ReturnType<__sveltets_Render<E, B>['events']>, ReturnType<__sveltets_Render<E, B>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<E, B>['bindings']>;
+    } & ReturnType<__sveltets_Render<E, B>['exports']>;
+    <E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<E, B>['props']> & {}): ReturnType<__sveltets_Render<E, B>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 declare const MenuItem: $$IsomorphicComponent;
-type MenuItem<D, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof MenuItem<D, E, B>>;
+type MenuItem<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof MenuItem<E, B>>;
 export default MenuItem;

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

@@ -1,13 +1,12 @@
 import type { Snippet } from 'svelte';
 import type { MenuItemController } from './controller.svelte';
 import type { ClassValue } from '../../../utils';
-import type { Base, HtmlAtomProps } from '../../atom';
-/**
- * Extend this interface to add custom menu list properties in your application.
- */
-export interface MenuItemExtendProps {
+import type { Base, HtmlAtomProps, SnippetProps } from '../../atom';
+export interface MenuItemSnippetProps extends SnippetProps {
+    menuItem: MenuItemController;
 }
-export interface MenuItemProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, MenuItemExtendProps {
+export type MenuItemChildren = Snippet<[MenuItemSnippetProps]>;
+export interface MenuItemProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, MenuItemChildren> {
     /**
      * Custom CSS class(es) to apply to the menu item
      */
@@ -53,10 +52,4 @@ export interface MenuItemProps<E extends keyof HTMLElementTagNameMap = 'div', B
      * Factory function to create a custom MenuItemController instance
      */
     factory?: () => MenuItemController;
-    /**
-     * Render prop for children
-     */
-    children?: Snippet<[{
-        menuItem: MenuItemController;
-    }]>;
 }

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

@@ -1,40 +1,28 @@
-<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,
+		...restProps
+	} = $props();
+</script>
+
+<Content
+	{as}
+	{base}
+	{bond}
+	{preset}
+	class={['border-border overflow-hidden p-0', '$preset', klass]}
+	{...restProps}
+>
+	{@render children?.()}
+</Content>

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

@@ -6,12 +6,6 @@ declare function $$render<T extends keyof HTMLElementTagNameMap = 'div', B exten
         base?: B;
         preset?: string;
         children?: any;
-        onmount?: any;
-        ondestroy?: any;
-        animate?: any;
-        enter?: any;
-        exit?: any;
-        initial?: any;
     } & Record<string, any>;
     exports: {};
     bindings: "";

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,8 @@ export type TriggerParams = {
 };
 export type PopoverDomElements = {
     trigger: HTMLElement;
+    'virtual-trigger'?: BondVirtualElement;
+    overlay: HTMLElement;
     content: HTMLElement;
     indicator: HTMLElement;
     arrow: HTMLElement;
@@ -41,56 +47,106 @@ 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 */
+    overlay(): PopoverOverlayAtom;
+    /** 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> {
+    #private;
+    position: ComputePositionReturn | undefined;
+    /**
+     * 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: boolean | undefined;
+    /**
+     * 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: Promise<ComputePositionReturn>;
+    constructor(props: () => Props);
+    /** Notify awaiters of a fresh computation and renew the promise. */
+    notifyComputed(position: ComputePositionReturn): void;
+    get shouldTrackPosition(): boolean;
+    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 PopoverOverlayAtom 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;
-        'aria-hidden': boolean;
-        'aria-live': string;
-        'data-kind': string;
+    onmount(node: HTMLElement): void;
+}
+export declare class PopoverContentAtom extends BondAtom<PopoverBond, HTMLElement> {
+    constructor(bond: PopoverBond);
+    get attrs(): {
+        'data-active': boolean;
     };
-    arrow(): {
-        [x: symbol]: (node: HTMLElement) => void;
-        id: string;
-        role: string;
+    get handlers(): {};
+    onmount(_node: HTMLElement): void;
+}
+export declare class PopoverIndicatorAtom extends BondAtom<PopoverBond, HTMLElement> {
+    constructor(bond: PopoverBond);
+    get attrs(): {
         'aria-hidden': boolean;
-        'data-kind': string;
+        'aria-live': "off" | "polite";
     };
-    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 PopoverTriggerAtom 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;
+    };
+    get handlers(): {
+        onclick: (ev: PointerEvent) => void;
+        onkeydown: (ev: KeyboardEvent) => void;
+    };
 }