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

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

@@ -1,7 +1,12 @@
-import { Bond, BondState, type BondStateProps } from '../../shared/bond.svelte';
+import { Bond, BondState, BondAtom, type BondStateProps } from '../../shared/bond.svelte';
 export type DialogBondProps = BondStateProps & {
     open: boolean;
     disabled: boolean;
+    configs: {
+        popovers: {
+            strategy: 'fixed' | 'absolute';
+        };
+    };
     readonly rest?: Record<string, unknown>;
 };
 export type DialogBondElements = {
@@ -12,55 +17,88 @@ export type DialogBondElements = {
     description: HTMLElement;
     body: HTMLElement;
     footer: HTMLElement;
+    trigger?: HTMLElement;
 };
-export declare class DialogBond<State extends DialogBondState<DialogBondProps> = DialogBondState<DialogBondProps>> extends Bond<DialogBondProps, State, DialogBondElements> {
-    static CONTEXT_KEY: string;
-    constructor(s: State);
-    share(): this;
-    root(): {
-        [x: symbol]: (node: HTMLDialogElement) => void;
-        id: string;
+export declare class DialogRootAtom extends BondAtom<DialogBond, HTMLDialogElement> {
+    #private;
+    constructor(bond: DialogBond);
+    get attrs(): {
         role: string;
         'aria-modal': boolean;
         'aria-labelledby': string;
         'aria-describedby': string;
         inert: string | undefined;
-        'data-kind': string;
         'data-open': boolean;
-        onclick: (ev: MouseEvent) => void;
+    };
+    get handlers(): {
         onkeydown: (ev: KeyboardEvent) => void;
     };
-    content(props: Record<string, unknown>): {
-        id: string;
+    onmount(node: HTMLDialogElement): void;
+}
+export declare class DialogContentAtom extends BondAtom<DialogBond> {
+    constructor(bond: DialogBond);
+    get attrs(): {
         role: string;
-        'data-kind': string;
     };
-    header(props: Record<string, unknown>): {
-        id: string;
+}
+export declare class DialogHeaderAtom extends BondAtom<DialogBond> {
+    constructor(bond: DialogBond);
+    get attrs(): {
         role: string;
-        'data-kind': string;
     };
-    title(props: Record<string, unknown>): {
-        id: string;
+}
+export declare class DialogTitleAtom extends BondAtom<DialogBond> {
+    constructor(bond: DialogBond);
+    get attrs(): {
         role: string;
         'aria-level': number;
-        'data-kind': string;
     };
-    description(props: Record<string, unknown>): {
-        id: string;
-        'data-kind': string;
+}
+export declare class DialogDescriptionAtom extends BondAtom<DialogBond> {
+    constructor(bond: DialogBond);
+    get attrs(): {
+        [x: string]: unknown;
     };
-    body(props: Record<string, unknown>): {
-        id: string;
+}
+export declare class DialogBodyAtom extends BondAtom<DialogBond> {
+    constructor(bond: DialogBond);
+    get attrs(): {
         role: string;
         'aria-live': string;
-        'data-kind': string;
     };
-    footer(props: Record<string, unknown>): {
-        id: string;
+}
+export declare class DialogFooterAtom extends BondAtom<DialogBond> {
+    constructor(bond: DialogBond);
+    get attrs(): {
         role: string;
-        'data-kind': string;
     };
+}
+export declare class DialogTriggerAtom extends BondAtom<DialogBond> {
+    constructor(bond: DialogBond);
+    get handlers(): {
+        onclick: () => void;
+    };
+}
+export declare class DialogBond<State extends DialogBondState<DialogBondProps> = DialogBondState<DialogBondProps>> extends Bond<DialogBondProps, State, DialogBondElements> {
+    static CONTEXT_KEY: string;
+    constructor(s: State);
+    share(): this;
+    /** Handle for granular access to root attrs, handlers, and attachment */
+    root(): DialogRootAtom;
+    /** Handle for granular access to content attrs and attachment */
+    content(): DialogContentAtom;
+    /** Handle for granular access to header attrs and attachment */
+    header(): DialogHeaderAtom;
+    /** Handle for granular access to title attrs and attachment */
+    title(): DialogTitleAtom;
+    /** Handle for granular access to description attrs and attachment */
+    description(): DialogDescriptionAtom;
+    /** Handle for granular access to body attrs and attachment */
+    body(): DialogBodyAtom;
+    /** Handle for granular access to footer attrs and attachment */
+    footer(): DialogFooterAtom;
+    /** Handle for granular access to trigger attrs, handlers, and attachment */
+    trigger(): DialogTriggerAtom;
     static get(): DialogBond | undefined;
     static set(bond: DialogBond): DialogBond;
 }

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

@@ -1,157 +1,176 @@
-import { createAttachmentKey } from 'svelte/attachments';
-import { getContext, setContext } from 'svelte';
+import { getContext, setContext, untrack } from 'svelte';
 import { focusTrap, getElementId } from '../../utils/dom.svelte';
-import { Bond, BondState } from '../../shared/bond.svelte';
-const DIALOG_ELEMENTS_KIND = {
-    root: 'dialog-root',
-    content: 'dialog-content',
-    header: 'dialog-header',
-    title: 'dialog-title',
-    description: 'dialog-description',
-    body: 'dialog-body',
-    footer: 'dialog-footer'
-};
-export class DialogBond extends Bond {
-    static CONTEXT_KEY = '@atoms/context/dialog';
-    constructor(s) {
-        super(s);
+import { Bond, BondState, BondAtom } from '../../shared/bond.svelte';
+export class DialogRootAtom extends BondAtom {
+    #activeElement = null;
+    constructor(bond) {
+        super(bond, 'root');
     }
-    share() {
-        return DialogBond.set(this);
-    }
-    root() {
-        const id = getElementId(this.id, DIALOG_ELEMENTS_KIND.root);
-        const titleId = getElementId(this.id, DIALOG_ELEMENTS_KIND.title);
-        const descriptionId = getElementId(this.id, DIALOG_ELEMENTS_KIND.description);
-        const isOpen = this.state.props.open ?? false;
-        const isDisabled = this.state.props.disabled ?? false;
-        // Focus trap handler
-        const focusManager = (ev) => {
-            focusTrap(ev);
-        };
-        let previousActiveElement = null;
+    get attrs() {
+        const titleId = getElementId(this.bond.id, 'dialog-title');
+        const descriptionId = getElementId(this.bond.id, 'dialog-description');
+        const isOpen = untrack(() => this.bond.state.props).open ?? false;
         return {
-            id,
+            ...super.attrs,
             role: 'dialog',
             'aria-modal': true,
             'aria-labelledby': titleId,
             'aria-describedby': descriptionId,
             inert: !isOpen ? '' : undefined,
-            'data-kind': DIALOG_ELEMENTS_KIND.root,
-            'data-open': isOpen,
-            onclick: (ev) => {
-                // Close on backdrop click (clicking outside content)
-                if (ev.target === ev.currentTarget && !isDisabled) {
-                    this.state.close();
-                }
-            },
+            'data-open': isOpen
+        };
+    }
+    get handlers() {
+        return {
             onkeydown: (ev) => {
-                // Close on Escape key
                 if (ev.key === 'Escape') {
                     ev.preventDefault();
-                    this.state.close();
+                    this.bond.state.close();
                 }
-                focusManager(ev);
-            },
-            [createAttachmentKey()]: (node) => {
-                this.elements.root = node;
-                if (this.state.props.open) {
-                    // Store current focus
-                    previousActiveElement = document.activeElement;
-                    // Focus first focusable element or dialog 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);
+                focusTrap(ev);
+            }
+        };
+    }
+    onmount(node) {
+        if (this.bond.state.props.open) {
+            this.#activeElement = document.activeElement;
+            requestAnimationFrame(() => {
+                const contentElement = this.bond.elements.content;
+                if (!contentElement)
+                    return;
+                const firstFocusable = contentElement.querySelector('a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])');
+                if (firstFocusable) {
+                    firstFocusable.focus();
                 }
                 else {
-                    console.log('restoring focus to', previousActiveElement);
-                    // Restore focus to previous element
-                    if (previousActiveElement instanceof HTMLElement) {
-                        previousActiveElement.focus();
-                    }
+                    node.focus();
                 }
+            });
+        }
+        else {
+            if (this.#activeElement instanceof HTMLElement) {
+                this.#activeElement.focus();
             }
-        };
+        }
+    }
+}
+export class DialogContentAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'content');
     }
-    content(props) {
-        const id = getElementId(this.id, DIALOG_ELEMENTS_KIND.content);
+    get attrs() {
         return {
-            id,
-            role: 'document',
-            'data-kind': DIALOG_ELEMENTS_KIND.content,
-            ...props,
-            [createAttachmentKey()]: (node) => {
-                this.elements.content = node;
-            }
+            ...super.attrs,
+            role: 'document'
         };
     }
-    header(props) {
-        const id = getElementId(this.id, DIALOG_ELEMENTS_KIND.header);
+}
+export class DialogHeaderAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'header');
+    }
+    get attrs() {
         return {
-            id,
-            role: 'banner',
-            'data-kind': DIALOG_ELEMENTS_KIND.header,
-            ...props,
-            [createAttachmentKey()]: (node) => {
-                this.elements.header = node;
-            }
+            ...super.attrs,
+            role: 'banner'
         };
     }
-    title(props) {
-        const id = getElementId(this.id, DIALOG_ELEMENTS_KIND.title);
+}
+export class DialogTitleAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'title');
+    }
+    get attrs() {
         return {
-            id,
+            ...super.attrs,
             role: 'heading',
-            'aria-level': 2,
-            'data-kind': DIALOG_ELEMENTS_KIND.title,
-            ...props,
-            [createAttachmentKey()]: (node) => {
-                this.elements.title = node;
-            }
+            'aria-level': 2
         };
     }
-    description(props) {
-        const id = getElementId(this.id, DIALOG_ELEMENTS_KIND.description);
+}
+export class DialogDescriptionAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'description');
+    }
+    get attrs() {
         return {
-            id,
-            'data-kind': DIALOG_ELEMENTS_KIND.description,
-            ...props,
-            [createAttachmentKey()]: (node) => {
-                this.elements.description = node;
-            }
+            ...super.attrs
         };
     }
-    body(props) {
-        const id = getElementId(this.id, DIALOG_ELEMENTS_KIND.body);
+}
+export class DialogBodyAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'body');
+    }
+    get attrs() {
         return {
-            id,
+            ...super.attrs,
             role: 'region',
-            'aria-live': 'polite',
-            'data-kind': DIALOG_ELEMENTS_KIND.body,
-            ...props,
-            [createAttachmentKey()]: (node) => {
-                this.elements.body = node;
-            }
+            'aria-live': 'polite'
         };
     }
-    footer(props) {
-        const id = getElementId(this.id, DIALOG_ELEMENTS_KIND.footer);
+}
+export class DialogFooterAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'footer');
+    }
+    get attrs() {
         return {
-            id,
-            role: 'contentinfo',
-            'data-kind': DIALOG_ELEMENTS_KIND.footer,
-            ...props,
-            [createAttachmentKey()]: (node) => {
-                this.elements.footer = node;
-            }
+            ...super.attrs,
+            role: 'contentinfo'
+        };
+    }
+}
+export class DialogTriggerAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'trigger');
+    }
+    get handlers() {
+        return {
+            onclick: () => this.bond.state.toggle()
         };
     }
+}
+export class DialogBond extends Bond {
+    static CONTEXT_KEY = '@atoms/context/dialog';
+    constructor(s) {
+        super(s, 'dialog');
+    }
+    share() {
+        return DialogBond.set(this);
+    }
+    /** Handle for granular access to root attrs, handlers, and attachment */
+    root() {
+        return this.atom('root', () => new DialogRootAtom(this));
+    }
+    /** Handle for granular access to content attrs and attachment */
+    content() {
+        return this.atom('content', () => new DialogContentAtom(this));
+    }
+    /** Handle for granular access to header attrs and attachment */
+    header() {
+        return this.atom('header', () => new DialogHeaderAtom(this));
+    }
+    /** Handle for granular access to title attrs and attachment */
+    title() {
+        return this.atom('title', () => new DialogTitleAtom(this));
+    }
+    /** Handle for granular access to description attrs and attachment */
+    description() {
+        return this.atom('description', () => new DialogDescriptionAtom(this));
+    }
+    /** Handle for granular access to body attrs and attachment */
+    body() {
+        return this.atom('body', () => new DialogBodyAtom(this));
+    }
+    /** Handle for granular access to footer attrs and attachment */
+    footer() {
+        return this.atom('footer', () => new DialogFooterAtom(this));
+    }
+    /** Handle for granular access to trigger attrs, handlers, and attachment */
+    trigger() {
+        return this.atom('trigger', () => new DialogTriggerAtom(this));
+    }
     static get() {
         return getContext(DialogBond.CONTEXT_KEY);
     }

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

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

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

@@ -0,0 +1,58 @@
+<script
+	lang="ts"
+	generics="E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base"
+>
+	import { Icon } from '../icon';
+	import Close from '../../icons/icon-close.svelte';
+	import { HtmlAtom, type Base } from '../atom';
+	import { DialogBond } from './bond.svelte';
+	import type { DialogCloseButtonProps } from './types';
+
+	const bond = DialogBond.get();
+
+	let {
+		class: klass = '',
+		as = 'button' as E,
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		onclick = undefined,
+		...restProps
+	}: DialogCloseButtonProps<E, B> = $props();
+
+	function onclick_(ev: MouseEvent) {
+		onclick?.(ev);
+		if (ev.defaultPrevented) {
+			return;
+		}
+
+		bond?.state.close();
+	}
+</script>
+
+<HtmlAtom
+	{as}
+	{bond}
+	preset="dialog.close-button"
+	class={['border-border cursor-pointer', '$preset', klass]}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	onclick={onclick_}
+	{...restProps}
+>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		<Icon>
+			<Close />
+		</Icon>
+	{/if}
+</HtmlAtom>

package/dist/components/dialog/dialog-close.svelte.d.ts

@@ -0,0 +1,26 @@
+import { type Base } from '../atom';
+import type { DialogCloseButtonProps } from './types';
+declare function $$render<E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base>(): {
+    props: DialogCloseButtonProps<E, B>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'button', 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(): {};
+}
+interface $$IsomorphicComponent {
+    new <E extends keyof HTMLElementTagNameMap = 'button', 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 = 'button', 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 DialogClose: $$IsomorphicComponent;
+type DialogClose<E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base> = InstanceType<typeof DialogClose<E, B>>;
+export default DialogClose;

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

@@ -19,7 +19,7 @@
 	}: DialogContentProps<E, B> = $props();
 
 	const dialogProps = $derived({
-		...bond?.content({}),
+		...bond?.content().spread,
 		...restProps
 	});
 </script>
@@ -27,7 +27,7 @@
 <HtmlAtom
 	preset="dialog.content"
 	class={[
-		'bg-card text-foreground border-border flex h-fit w-full max-w-[90svw] flex-col rounded-md border py-4 shadow-sm',
+		'bg-card text-foreground border-border flex h-fit w-full max-w-[90svw] flex-col rounded-md border py-4 shadow-sm opacity-0',
 		'$preset',
 		klass
 	]}

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

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

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

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

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

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