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

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;

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

@@ -1,32 +1,34 @@
-import { createAttachmentKey } from 'svelte/attachments';
-import { getContext, setContext } from 'svelte';
-import { getElementId } from '../../utils/dom.svelte.js';
-import { Bond, BondState } from '../../shared/bond.svelte.js';
-const DRAWER_ELEMENTS_KIND = {
-    root: 'drawer-root',
-    content: 'drawer-content',
-    header: 'drawer-header',
-    body: 'drawer-body',
-    footer: 'drawer-footer',
-    title: 'drawer-title',
-    description: 'drawer-description',
-    backdrop: 'drawer-backdrop'
-};
-export class DrawerBond extends Bond {
-    static CONTEXT_KEY = '@atoms/context/drawer';
-    constructor(state) {
-        super(state);
-    }
-    root() {
-        const id = getElementId(this.id, DRAWER_ELEMENTS_KIND.root);
-        const drawerTitleId = getElementId(this.id, DRAWER_ELEMENTS_KIND.title);
-        const drawerDescriptionId = getElementId(this.id, DRAWER_ELEMENTS_KIND.description);
-        const haveDescriptionElement = !!this.elements.description;
-        const haveTitleElement = !!this.elements.title;
-        const isOpen = this.state?.props?.open ?? false;
-        const isDisabled = this.state?.props?.disabled ?? false;
+import { getContext, setContext, untrack } from 'svelte';
+import { getElementId } from '../../utils/dom.svelte';
+import { Bond, BondState, BondAtom } from '../../shared/bond.svelte';
+export class DrawerRootAtom extends BondAtom {
+    #previousActiveElement = null;
+    constructor(bond) {
+        super(bond, 'root');
+    }
+    get attrs() {
+        const drawerTitleId = getElementId(this.bond.id, 'drawer-title');
+        const drawerDescriptionId = getElementId(this.bond.id, 'drawer-description');
+        const haveDescriptionElement = !!this.bond.elements.description;
+        const haveTitleElement = !!this.bond.elements.title;
+        const isOpen = untrack(() => this.bond.state?.props)?.open ?? false;
+        const isDisabled = untrack(() => this.bond.state?.props)?.disabled ?? false;
         const isActive = isOpen && !isDisabled;
-        // Focus trap handler
+        return {
+            ...super.attrs,
+            role: 'dialog',
+            'aria-modal': true,
+            'aria-labelledby': haveTitleElement ? drawerTitleId : undefined,
+            'aria-describedby': haveDescriptionElement ? drawerDescriptionId : undefined,
+            'aria-hidden': !isActive,
+            inert: !isActive ? '' : undefined,
+            tabindex: -1,
+            'data-active': isActive,
+            'data-open': isOpen
+        };
+    }
+    get handlers() {
+        const isDisabled = this.bond.state?.props?.disabled ?? false;
         const focusTrap = (ev) => {
             const node = ev.currentTarget;
             if (ev.key === 'Tab') {
@@ -45,135 +47,161 @@ export class DrawerBond extends Bond {
                 }
             }
         };
-        let previousActiveElement = null;
         return {
-            id: id,
-            role: 'dialog',
-            'aria-modal': true,
-            'aria-labelledby': haveTitleElement ? drawerTitleId : undefined,
-            'aria-describedby': haveDescriptionElement ? drawerDescriptionId : undefined,
-            'aria-hidden': !isActive,
-            inert: !isActive ? '' : undefined,
-            tabindex: -1,
-            'data-active': isActive,
-            'data-open': isOpen,
-            'data-kind': DRAWER_ELEMENTS_KIND.root,
             onkeydown: (ev) => {
                 focusTrap(ev);
-                // Close on Escape key
                 if (ev.key === 'Escape' && !isDisabled) {
                     ev.preventDefault();
-                    this.state.close();
+                    this.bond.state.close();
                 }
-            },
-            [createAttachmentKey()]: (node) => {
-                this.elements.root = node;
-                if (this.state.props.open) {
-                    // Store current focus
-                    previousActiveElement = document.activeElement;
-                    // Focus first focusable element or drawer itself
-                    setTimeout(() => {
-                        const firstFocusable = node.querySelector('a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])');
-                        if (firstFocusable) {
-                            firstFocusable.focus();
-                        }
-                        else {
-                            node.focus();
-                        }
-                    }, 0);
+            }
+        };
+    }
+    onmount(node) {
+        const isOpen = untrack(() => this.bond.state.props)?.open ?? false;
+        if (isOpen) {
+            this.#previousActiveElement = document.activeElement;
+            setTimeout(() => {
+                const firstFocusable = node.querySelector('a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])');
+                if (firstFocusable) {
+                    firstFocusable.focus();
                 }
                 else {
-                    // Restore focus to previous element
-                    if (previousActiveElement instanceof HTMLElement) {
-                        previousActiveElement.focus();
-                    }
+                    node.focus();
                 }
+            }, 0);
+        }
+        else {
+            if (this.#previousActiveElement instanceof HTMLElement) {
+                this.#previousActiveElement.focus();
             }
-        };
+        }
     }
-    content() {
-        const id = getElementId(this.id, DRAWER_ELEMENTS_KIND.content);
+}
+export class DrawerContentAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'content');
+    }
+    get attrs() {
         return {
-            id: id,
-            role: 'document',
-            'data-kind': DRAWER_ELEMENTS_KIND.content,
-            [createAttachmentKey()]: (node) => {
-                this.elements.content = node;
-            }
+            ...super.attrs,
+            role: 'document'
         };
     }
-    body() {
-        const id = getElementId(this.id, DRAWER_ELEMENTS_KIND.body);
+}
+export class DrawerBodyAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'body');
+    }
+    get attrs() {
         return {
-            id: id,
-            role: 'region',
-            'data-kind': DRAWER_ELEMENTS_KIND.body,
-            [createAttachmentKey()]: (node) => {
-                this.elements.body = node;
-            }
+            ...super.attrs,
+            role: 'region'
         };
     }
-    header() {
-        const id = getElementId(this.id, DRAWER_ELEMENTS_KIND.header);
+}
+export class DrawerHeaderAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'header');
+    }
+    get attrs() {
         return {
-            id: id,
-            role: 'banner',
-            'data-kind': DRAWER_ELEMENTS_KIND.header,
-            [createAttachmentKey()]: (node) => {
-                this.elements.header = node;
-            }
+            ...super.attrs,
+            role: 'banner'
         };
     }
-    title() {
-        const id = getElementId(this.id, DRAWER_ELEMENTS_KIND.title);
+}
+export class DrawerTitleAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'title');
+    }
+    get attrs() {
         return {
-            id: id,
+            ...super.attrs,
             role: 'heading',
-            'aria-level': 2,
-            'data-kind': DRAWER_ELEMENTS_KIND.title,
-            [createAttachmentKey()]: (node) => {
-                this.elements.title = node;
-            }
+            'aria-level': 2
         };
     }
-    description() {
-        const id = getElementId(this.id, DRAWER_ELEMENTS_KIND.description);
+}
+export class DrawerDescriptionAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'description');
+    }
+    get attrs() {
         return {
-            id: id,
-            'data-kind': DRAWER_ELEMENTS_KIND.description,
-            [createAttachmentKey()]: (node) => {
-                this.elements.description = node;
-            }
+            ...super.attrs
         };
     }
-    footer() {
-        const id = getElementId(this.id, DRAWER_ELEMENTS_KIND.footer);
+}
+export class DrawerFooterAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'footer');
+    }
+    get attrs() {
         return {
-            id: id,
-            role: 'contentinfo',
-            'data-kind': DRAWER_ELEMENTS_KIND.footer,
-            [createAttachmentKey()]: (node) => {
-                this.elements.footer = node;
-            }
+            ...super.attrs,
+            role: 'contentinfo'
         };
     }
-    backdrop() {
-        const isDisabled = this.state?.props?.disabled ?? false;
+}
+export class DrawerBackdropAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'backdrop');
+    }
+    get attrs() {
         return {
+            ...super.attrs,
             role: 'presentation',
-            'aria-hidden': true,
-            'data-kind': DRAWER_ELEMENTS_KIND.backdrop,
-            onclick: (ev) => {
-                // Close drawer on backdrop click
-                if (!isDisabled) {
-                    this.state.close();
+            'aria-hidden': true
+        };
+    }
+    get handlers() {
+        return {
+            onclick: () => {
+                if (!(this.bond.state?.props?.disabled ?? false)) {
+                    this.bond.state.close();
                 }
-            },
-            [createAttachmentKey()]: (node) => {
-                this.elements.backdrop = node;
             }
         };
     }
+}
+export class DrawerBond extends Bond {
+    static CONTEXT_KEY = '@atoms/context/drawer';
+    constructor(state) {
+        super(state, 'drawer');
+    }
+    /** Handle for granular access to root attrs, handlers, and attachment */
+    root() {
+        return this.atom('root', () => new DrawerRootAtom(this));
+    }
+    /** Handle for granular access to content attrs and attachment */
+    content() {
+        return this.atom('content', () => new DrawerContentAtom(this));
+    }
+    /** Handle for granular access to body attrs and attachment */
+    body() {
+        return this.atom('body', () => new DrawerBodyAtom(this));
+    }
+    /** Handle for granular access to header attrs and attachment */
+    header() {
+        return this.atom('header', () => new DrawerHeaderAtom(this));
+    }
+    /** Handle for granular access to title attrs and attachment */
+    title() {
+        return this.atom('title', () => new DrawerTitleAtom(this));
+    }
+    /** Handle for granular access to description attrs and attachment */
+    description() {
+        return this.atom('description', () => new DrawerDescriptionAtom(this));
+    }
+    /** Handle for granular access to footer attrs and attachment */
+    footer() {
+        return this.atom('footer', () => new DrawerFooterAtom(this));
+    }
+    /** Handle for granular access to backdrop attrs, handlers, and attachment */
+    backdrop() {
+        return this.atom('backdrop', () => new DrawerBackdropAtom(this));
+    }
     share() {
         return DrawerBond.set(this);
     }

package/dist/components/drawer/drawer-backdrop.svelte

@@ -10,16 +10,11 @@
 
 	let {
 		class: klass = '',
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
 		...restProps
 	}: SlideoverBackdropProps<E, B> & HTMLAttributes<Element> = $props();
 
 	const backdropProps = $derived({
+		...bond?.backdrop().spread,
 		...restProps
 	});
 </script>
@@ -27,12 +22,6 @@
 <HtmlAtom
 	{bond}
 	preset="drawer.backdrop"
-	class={['border-border absolute inset-0 z-0 bg-black/30', '$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)}
+	class={['border-border absolute inset-0 bg-black/30', '$preset', klass]}
 	{...backdropProps}
 />

package/dist/components/drawer/drawer-body.svelte

@@ -9,19 +9,13 @@
 	let {
 		class: klass = '',
 		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
 		...restProps
 	}: DrawerBodyProps<E, B> & HTMLAttributes<Element> = $props();
 
 	const bond = DrawerBond.get();
 
 	const bodyProps = $derived({
-		...bond?.body(),
+		...bond?.body().spread,
 		...restProps
 	});
 </script>
@@ -30,12 +24,6 @@
 	{bond}
 	preset="drawer.body"
 	class={['border-border', '$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)}
 	{...bodyProps}
 >
 	{@render children?.({ drawer: bond })}

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

@@ -3,7 +3,7 @@
 	import { HtmlAtom as Atom, type Base } from '../atom';
 	import type { SlideoverContentProps } from './types';
 	import { DrawerBond } from './bond.svelte';
-	import { animateDrawerContent } from './motion';
+	import { animateDrawerContent, type DrawerSide } from './motion';
 
 	type Element = HTMLElementTagNameMap[E];
 
@@ -13,17 +13,15 @@
 	let {
 		class: klass = '',
 		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = animateDrawerContent({ ease: 'easeOut', side: 'left' }),
-		enter = undefined,
-		exit = undefined,
-		initial = animateDrawerContent({ ease: 'easeOut', side: 'left', duration: 0 }),
+		fallback = {
+			animate: animateDrawerContent({ }),
+			initial: animateDrawerContent({ duration: 0 }),
+		},
 		...restProps
-	}: SlideoverContentProps<E, B> & HTMLAttributes<Element> = $props();
+	}: SlideoverContentProps<E, B> & HTMLAttributes<Element> & { side?: DrawerSide } = $props();
 
 	const contentProps = $derived({
-		...bond?.content(),
+		...bond?.content().spread,
 		...restProps
 	});
 </script>
@@ -37,12 +35,7 @@
 		klass
 	]}
 	{bond}
-	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)}
+	{fallback}
 	{...contentProps}
 >
 	{@render children?.({ drawer: bond })}

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

@@ -1,8 +1,11 @@
 import type { HTMLAttributes } from 'svelte/elements';
 import { type Base } from '../atom';
 import type { SlideoverContentProps } from './types';
+import { type DrawerSide } from './motion';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
-    props: SlideoverContentProps<E, B> & HTMLAttributes<HTMLElementTagNameMap[E]>;
+    props: SlideoverContentProps<E, B> & HTMLAttributes<HTMLElementTagNameMap[E]> & {
+        side?: DrawerSide;
+    };
     exports: {};
     bindings: "";
     slots: {};

package/dist/components/drawer/drawer-description.svelte

@@ -12,17 +12,11 @@
 		class: klass = '',
 		as = 'p' as E,
 		children,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
 		...restProps
 	}: SlideoverDescriptionProps<E, B> & HTMLAttributes<Element> = $props();
 
 	const descriptionProps = $derived({
-		...bond?.description(),
+		...bond?.description().spread,
 		...restProps
 	});
 </script>
@@ -32,12 +26,6 @@
 	{bond}
 	preset="drawer.description"
 	class={['border-border', '$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)}
 	{...descriptionProps}
 >
 	{@render children?.({ drawer: bond })}

package/dist/components/drawer/drawer-footer.svelte

@@ -11,17 +11,11 @@
 	let {
 		class: klass = '',
 		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
 		...restProps
 	}: SlideoverFooterProps<E, B> & HTMLAttributes<Element> = $props();
 
 	const footerProps = $derived({
-		...bond?.footer(),
+		...bond?.footer().spread,
 		...restProps
 	});
 </script>
@@ -29,12 +23,6 @@
 <HtmlAtom
 	{bond}
 	class={['border-border', '$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)}
 	{...footerProps}
 >
 	{@render children?.({ drawer: bond })}

package/dist/components/drawer/drawer-header.svelte

@@ -11,17 +11,11 @@
 	let {
 		class: klass = '',
 		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
 		...restProps
 	}: SlideoverHeaderProps<E, B> & HTMLAttributes<Element> = $props();
 
 	const headerProps = $derived({
-		...bond?.header(),
+		...bond?.header().spread,
 		...restProps
 	});
 </script>
@@ -30,12 +24,6 @@
 	{bond}
 	preset="drawer.header"
 	class={['border-border', '$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)}
 	{...headerProps}
 	{...restProps}
 >