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

package/dist/components/dialog/dialog-root.svelte

@@ -1,82 +1,102 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { Teleport, ActivePortal } from '../portal';
-	import { defineProperty, defineState } from '../../utils';
-	import type { Base } from '../atom';
-	import { DialogBond, DialogBondState, type DialogBondProps } from './bond.svelte';
-	import type { DialogProps } from './types';
-	import { animateDialogRoot } from './motion.svelte';
-
-	let {
-		class: klass = '',
-		open = $bindable(false),
-		disabled = false,
-		as = 'dialog' as E,
-		portal = undefined,
-		factory = _factory,
-		animate = animateDialogRoot(),
-		children = undefined,
-		...restProps
-	}: DialogProps<E, B> = $props();
-
-	const bondProps = defineState<DialogBondProps>(
-		[
-			defineProperty(
-				'open',
-				() => open,
-				(v) => {
-					open = v;
-				}
-			),
-			defineProperty('rest', () => restProps)
-		],
-		() => ({ disabled })
-	);
-	const bond = _factory(bondProps).share();
-
-	const rootProps = $derived({
-		...bond?.root(),
-		...restProps
-	});
-
-	function _factory(props: typeof bondProps) {
-		const bondState = new DialogBondState(() => props);
-		return new DialogBond(bondState);
-	}
-
-	function onclickDialogElement(ev: MouseEvent) {
-		if (bond?.elements?.content?.contains(ev.target)) {
-			return;
-		}
-
-		// Clicked the backdrop
-		bond.state.close();
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-<Teleport
-	{as}
-	{bond}
-	preset="dialog"
-	portal={portal ?? 'root.l1'}
-	class={[
-		'border-border pointer-events-auto fixed top-0 left-0 flex h-full w-full items-center justify-center bg-neutral-900/10 opacity-0',
-		!open && 'pointer-events-none',
-		'$preset',
-		klass
-	]}
-	animate={animate?.bind(bond.state)}
-	onclick={onclickDialogElement}
-	oncancel={(ev) => {
-		ev.preventDefault();
-		open = false;
-	}}
-	{...rootProps}
->
-	<ActivePortal portal={portal ?? 'root.l1'}>
-		{@render children?.({ dialog: bond })}
-	</ActivePortal>
-</Teleport>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { Teleport, ActivePortal } from '../portal';
+	import { defineProperty, defineState } from '../../utils';
+	import type { Base } from '../atom';
+	import { DialogBond, DialogBondState, type DialogBondProps } from './bond.svelte';
+	import type { DialogProps } from './types';
+	import { ZLayer } from '../portal/zlayer.svelte';
+	import { untrack } from 'svelte';
+
+	let {
+		class: klass = '',
+		open = $bindable(false),
+		disabled = false,
+		type = 'modal' as 'modal' | 'non-modal',
+		as = 'dialog' as E,
+		"z-index": zindex = 0,
+		portal = undefined,
+		factory = _factory,
+		children = undefined,
+		trigger = undefined,
+		onclick = undefined,
+		...restProps
+	}: DialogProps<E, B> = $props();
+
+	const normalizedZIndex = $derived(
+		typeof zindex === 'number' && Number.isFinite(zindex) ? zindex : undefined
+	);
+	const layer = new ZLayer('dialog', () => normalizedZIndex ?? 0).share();
+
+	const bondProps = defineState<DialogBondProps>(
+		[
+			defineProperty(
+				'open',
+				() => open,
+				(v) => {
+					open = v;
+				}
+			),
+			defineProperty('rest', () => restProps)
+		],
+		() => ({ disabled })
+	);
+
+	const bond = untrack(() => factory(bondProps)).share();
+
+	const rootProps: Record<string, unknown> = $derived({
+		...bond?.root().spread,
+		...restProps
+	});
+
+	function _factory(props: typeof bondProps) {
+		const bondState = new DialogBondState(() => props);
+		return new DialogBond(bondState);
+	}
+
+	function onclickDialogElement(ev: MouseEvent) {
+		// Ignore clicks that originated inside the dialog content
+		if (bond?.elements?.content?.contains(ev.target as Node)) {
+			return;
+		}
+
+		// Let the user's onclick handler run first; they can call ev.preventDefault() to cancel close
+		onclick?.(ev, bond);
+
+		if (ev.defaultPrevented) return;
+
+		// Close on backdrop click unless opted out
+		if (type === 'modal' && !disabled) {
+			bond.state.close();
+		}
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+{@render trigger?.({ dialog: bond })}
+
+<Teleport
+	{as}
+	{bond}
+	preset="dialog"
+	portal={portal ?? 'root.l0'}
+	class={[
+		'border-border pointer-events-none fixed top-0 left-0 flex h-full w-full items-center justify-center bg-neutral-900/0 transition-colors duration-200',
+		open && 'pointer-events-auto bg-neutral-900/10',
+		'$preset',
+		klass
+	]}
+	style="z-index: {layer.get()};"
+	onclick={onclickDialogElement}
+	oncancel={(ev) => {
+		ev.preventDefault();
+		open = false;
+	}}
+	{...rootProps}
+>
+	<ActivePortal portal={portal ?? 'root.l0'}>
+		{@render children?.({ dialog: bond })}
+	</ActivePortal>
+</Teleport>

package/dist/components/dialog/dialog-title.svelte

@@ -19,7 +19,7 @@
 	const bond = DialogBond.get();
 
 	const titleProps = $derived({
-		...bond?.title({}),
+		...bond?.title().spread,
 		...restProps
 	});
 </script>

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

@@ -1,44 +1,86 @@
 import { DURATION } from '../../shared';
-import { animate } from 'motion';
+import { animate, easeInOut } from 'motion';
 import { DialogBond } from './bond.svelte';
+import { promiseWithResolvers } from '../../utils/promise.svelte';
 export function animateDialogRoot(params = {}) {
-    const { duration = DURATION.fast / 1000, delay = 0, ease = 'anticipate' } = params;
+    const { duration = DURATION.smooth / 1000, delay = 0, ease = 'anticipate' } = params;
     return (node) => {
         const bond = DialogBond.get();
         const isOpen = bond?.state.props.open ?? false;
         if (node instanceof HTMLDialogElement) {
             node.show();
         }
-        animate(node, {
-            opacity: +isOpen
-        }, {
-            duration,
-            delay,
-            ease
-        });
+        const promise = bond?.animationPromises.content;
+        if (!isOpen && promise) {
+            promise.then(({ duration: dr = 0, delay: dl = 0 }) => {
+                animate(node, {
+                    opacity: +isOpen
+                }, {
+                    duration,
+                    delay: duration + delay < dr + dl ? delay + Math.abs(dr + dl - (duration + delay)) : delay,
+                    ease
+                });
+            });
+        }
+        else {
+            animate(node, {
+                opacity: +isOpen
+            }, {
+                duration,
+                delay,
+                ease
+            });
+        }
     };
 }
 export function animateDialogContent(params = {}) {
-    const { duration = DURATION.fast / 1000, delay = 0, ease = 'anticipate' } = params;
-    const bond = DialogBond.get();
+    const { duration = DURATION.fast / 1000, delay = 0, ease = easeInOut } = params;
+    let mounted = false;
     return (node) => {
+        // Read bond inside the callback — safe at any call site, not just during component init
+        const bond = DialogBond.get();
+        const { resolve, promise } = promiseWithResolvers();
+        if (bond) {
+            bond.animationPromises.content = promise;
+        }
         const isOpen = bond?.state.props.open ?? false;
-        if (!bond?.elements.root.open) {
-            if (node instanceof HTMLDialogElement) {
-                node.show();
+        if (isOpen) {
+            const rootElement = bond?.elements.root;
+            if (rootElement instanceof HTMLDialogElement) {
+                rootElement.show();
             }
         }
-        animate(node, { scale: 0.9 + 0.1 * +isOpen, opacity: +isOpen }, {
-            duration,
-            easing: ease,
-            delay,
-            onComplete: () => {
-                if (!isOpen) {
-                    if (node instanceof HTMLDialogElement) {
-                        node.close();
-                    }
-                }
-            }
-        });
+        const triggerElement = bond?.elements.trigger;
+        if (triggerElement) {
+            node.style.transform = '';
+            const triggerRect = triggerElement.getBoundingClientRect();
+            const nodeRect = node.getBoundingClientRect();
+            const scaleX = triggerRect.width / nodeRect.width;
+            const scaleY = triggerRect.height / nodeRect.height;
+            const x = triggerRect.x - nodeRect.x;
+            const y = triggerRect.y - nodeRect.y;
+            const transformOriginX = triggerRect.x < nodeRect.x + nodeRect.width / 2 ? 'left' : 'right';
+            node.style.transformOrigin = `${transformOriginX} top`;
+            const c = animate(node, {
+                scaleX: isOpen ? [scaleX, 1] : [1, scaleX],
+                scaleY: isOpen ? [scaleY, 1] : [1, scaleY],
+                translateX: isOpen ? [`${x}px`, '0px'] : ['0px', `${x}px`],
+                translateY: isOpen ? [`${y}px`, '0px'] : ['0px', `${y}px`],
+                opacity: +isOpen
+            }, {
+                duration: duration * +mounted,
+                easing: ease,
+                delay
+            });
+            mounted = true;
+            resolve({ duration, delay, controller: c });
+        }
+        else {
+            animate(node, { scale: 0.9 + 0.1 * +isOpen, opacity: +isOpen }, {
+                duration,
+                easing: ease,
+                delay
+            });
+        }
     };
 }

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

@@ -1,67 +1,32 @@
 import type { Snippet } from 'svelte';
-import type { HtmlAtomProps, Base } from '../atom';
+import type { HtmlAtomProps, Base, SnippetProps } from '../atom';
 import type { PortalBond } from '../portal';
 import type { DialogBond, DialogBondProps } from './bond.svelte';
-/**
- * Extend this interface to add custom dialog root properties in your application.
- */
-export interface DialogExtendProps {
+export interface DialogSnippetProps extends SnippetProps {
+    dialog: DialogBond;
 }
-/**
- * Extend this interface to add custom dialog content properties in your application.
- */
-export interface DialogContentExtendProps {
-}
-/**
- * Extend this interface to add custom dialog header properties in your application.
- */
-export interface DialogHeaderExtendProps {
-}
-/**
- * Extend this interface to add custom dialog body properties in your application.
- */
-export interface DialogBodyExtendProps {
-}
-/**
- * Extend this interface to add custom dialog footer properties in your application.
- */
-export interface DialogFooterExtendProps {
-}
-/**
- * Extend this interface to add custom dialog title properties in your application.
- */
-export interface DialogTitleExtendProps {
-}
-/**
- * Extend this interface to add custom dialog description properties in your application.
- */
-export interface DialogDescriptionExtendProps {
-}
-/**
- * Extend this interface to add custom dialog close button properties in your application.
- */
-export interface DialogCloseButtonExtendProps {
-}
-export interface DialogProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Omit<HtmlAtomProps<E, B>, 'children'>, DialogExtendProps {
+export type DialogChildren = Snippet<[DialogSnippetProps]>;
+export interface DialogProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, DialogChildren> {
     open?: boolean;
     disabled?: boolean;
+    /** Controls backdrop click behaviour. 'modal' closes on backdrop click (default); 'non-modal' keeps it open. */
+    type?: 'modal' | 'non-modal' | undefined;
     portal?: string | PortalBond;
     factory?: (props: DialogBondProps) => DialogBond;
-    children?: Snippet<[{
-        dialog: DialogBond;
-    }]>;
+    trigger?: DialogChildren;
+    onclick?: (ev: MouseEvent, bond: DialogBond) => void;
 }
-export interface DialogContentProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, DialogContentExtendProps {
+export interface DialogContentProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, DialogChildren> {
 }
-export interface DialogHeaderProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, DialogHeaderExtendProps {
+export interface DialogHeaderProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, DialogChildren> {
 }
-export interface DialogBodyProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, DialogBodyExtendProps {
+export interface DialogBodyProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, DialogChildren> {
 }
-export interface DialogFooterProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, DialogFooterExtendProps {
+export interface DialogFooterProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, DialogChildren> {
 }
-export interface DialogTitleProps<E extends keyof HTMLElementTagNameMap = 'h2', B extends Base = Base> extends HtmlAtomProps<E, B>, DialogTitleExtendProps {
+export interface DialogTitleProps<E extends keyof HTMLElementTagNameMap = 'h2', B extends Base = Base> extends HtmlAtomProps<E, B, DialogChildren> {
 }
-export interface DialogDescriptionProps<E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base> extends HtmlAtomProps<E, B>, DialogDescriptionExtendProps {
+export interface DialogDescriptionProps<E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base> extends HtmlAtomProps<E, B, DialogChildren> {
 }
-export interface DialogCloseButtonProps<E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base> extends HtmlAtomProps<E, B>, DialogCloseButtonExtendProps {
+export interface DialogCloseButtonProps<E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base> extends HtmlAtomProps<E, B, DialogChildren> {
 }

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

@@ -1,10 +1,5 @@
 import type { HtmlAtomProps, Base } from '../atom';
-/**
- * Extend this interface to add custom divider properties in your application.
- */
-export interface DividerExtendProps {
-}
-export interface DividerProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, DividerExtendProps {
+export interface DividerProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B> {
     vertical?: boolean;
     transparent?: boolean;
 }

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

@@ -1,7 +1,8 @@
-import { Bond, BondState, type BondStateProps } from '../../shared/bond.svelte.js';
+import { Bond, BondState, BondAtom, type BondStateProps } from '../../shared/bond.svelte';
 export type DrawerBondProps<T extends Record<string, unknown> = Record<string, unknown>> = BondStateProps & {
     open: boolean;
     disabled: boolean;
+    side?: 'left' | 'right' | 'top' | 'bottom';
     extend: T;
     readonly rest?: Record<string, unknown>;
 };
@@ -16,12 +17,10 @@ export type DrawerBondElements = {
     description: HTMLElement;
     backdrop: HTMLElement;
 };
-export declare class DrawerBond<Props extends DrawerBondProps = DrawerBondProps, State extends DrawerBondState<Props> = DrawerBondState<Props>> extends Bond<Props, State, DrawerBondElements> {
-    static CONTEXT_KEY: string;
-    constructor(state: State);
-    root(): {
-        [x: symbol]: (node: HTMLElement) => void;
-        id: string;
+export declare class DrawerRootAtom extends BondAtom<DrawerBond> {
+    #private;
+    constructor(bond: DrawerBond);
+    get attrs(): {
         role: string;
         'aria-modal': boolean;
         'aria-labelledby': string | undefined;
@@ -31,52 +30,78 @@ export declare class DrawerBond<Props extends DrawerBondProps = DrawerBondProps,
         tabindex: number;
         'data-active': boolean;
         'data-open': boolean;
-        'data-kind': string;
+    };
+    get handlers(): {
         onkeydown: (ev: KeyboardEvent) => void;
     };
-    content(): {
-        [x: symbol]: (node: HTMLElement) => void;
-        id: string;
+    onmount(node: HTMLElement): void;
+}
+export declare class DrawerContentAtom extends BondAtom<DrawerBond> {
+    constructor(bond: DrawerBond);
+    get attrs(): {
         role: string;
-        'data-kind': string;
     };
-    body(): {
-        [x: symbol]: (node: HTMLElement) => void;
-        id: string;
+}
+export declare class DrawerBodyAtom extends BondAtom<DrawerBond> {
+    constructor(bond: DrawerBond);
+    get attrs(): {
         role: string;
-        'data-kind': string;
     };
-    header(): {
-        [x: symbol]: (node: HTMLElement) => void;
-        id: string;
+}
+export declare class DrawerHeaderAtom extends BondAtom<DrawerBond> {
+    constructor(bond: DrawerBond);
+    get attrs(): {
         role: string;
-        'data-kind': string;
     };
-    title(): {
-        [x: symbol]: (node: HTMLElement) => void;
-        id: string;
+}
+export declare class DrawerTitleAtom extends BondAtom<DrawerBond> {
+    constructor(bond: DrawerBond);
+    get attrs(): {
         role: string;
         'aria-level': number;
-        'data-kind': string;
     };
-    description(): {
-        [x: symbol]: (node: HTMLElement) => void;
-        id: string;
-        'data-kind': string;
+}
+export declare class DrawerDescriptionAtom extends BondAtom<DrawerBond> {
+    constructor(bond: DrawerBond);
+    get attrs(): {
+        [x: string]: unknown;
     };
-    footer(): {
-        [x: symbol]: (node: HTMLElement) => void;
-        id: string;
+}
+export declare class DrawerFooterAtom extends BondAtom<DrawerBond> {
+    constructor(bond: DrawerBond);
+    get attrs(): {
         role: string;
-        'data-kind': string;
     };
-    backdrop(): {
-        [x: symbol]: (node: HTMLElement) => void;
+}
+export declare class DrawerBackdropAtom extends BondAtom<DrawerBond> {
+    constructor(bond: DrawerBond);
+    get attrs(): {
         role: string;
         'aria-hidden': boolean;
-        'data-kind': string;
-        onclick: (ev: MouseEvent) => void;
     };
+    get handlers(): {
+        onclick: () => void;
+    };
+}
+export declare class DrawerBond<Props extends DrawerBondProps = DrawerBondProps, State extends DrawerBondState<Props> = DrawerBondState<Props>> extends Bond<Props, State, DrawerBondElements> {
+    static CONTEXT_KEY: string;
+    constructor(state: State);
+    /** Handle for granular access to root attrs, handlers, and attachment */
+    root(): DrawerRootAtom;
+    /** Handle for granular access to content attrs and attachment */
+    content(): DrawerContentAtom;
+    /** Handle for granular access to body attrs and attachment */
+    body(): DrawerBodyAtom;
+    /** Handle for granular access to header attrs and attachment */
+    header(): DrawerHeaderAtom;
+    /** Handle for granular access to title attrs and attachment */
+    title(): DrawerTitleAtom;
+    /** Handle for granular access to description attrs and attachment */
+    description(): DrawerDescriptionAtom;
+    /** Handle for granular access to footer attrs and attachment */
+    footer(): DrawerFooterAtom;
+    /** Handle for granular access to backdrop attrs, handlers, and attachment */
+    backdrop(): DrawerBackdropAtom;
     share(): this;
     static get(): DrawerBond | undefined;
     static set(bond: DrawerBond): DrawerBond;