@svelte-atoms/core 1.0.0-alpha.30 → 1.0.0-alpha.31

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

@@ -1,110 +1,91 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { animate as motion } from 'motion';
-	import { Teleport, ActivePortal } from '../portal';
-	import { defineProperty, defineState } from '../../utils';
-	import type { Base } from '../atom';
-	import { DURATION } from '../../shared';
-	import { DialogBond, DialogBondState, type DialogBondProps } from './bond.svelte';
-	import type { DialogProps } from './types';
-
-	let {
-		class: klass = '',
-		open = $bindable(false),
-		disabled = false,
-		as = 'dialog' as E,
-		portal = undefined,
-		factory = _factory,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = _animate,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		children = undefined,
-		...restProps
-	}: DialogProps<E, B> = $props();
-
-	const bondProps = defineState<DialogBondProps>(
-		[
-			defineProperty(
-				'open',
-				() => open,
-				(v) => {
-					open = v;
-				}
-			)
-		],
-		() => ({ 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 _animate(node: HTMLDialogElement) {
-		motion(
-			node,
-			{
-				opacity: +open
-			},
-			{
-				duration: DURATION.normal / 1000,
-				ease: 'anticipate',
-				onComplete: () => {
-					if (!open) {
-						node?.close?.();
-					}
-				}
-			}
-		);
-	}
-
-	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
-	]}
-	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={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 { animateDialogRoot } from './motion.svelte';
+
+	let {
+		class: klass = '',
+		open = $bindable(false),
+		disabled = false,
+		as = 'dialog' as E,
+		portal = undefined,
+		factory = _factory,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = animateDialogRoot(),
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		children = undefined,
+		...restProps
+	}: DialogProps<E, B> = $props();
+
+	const bondProps = defineState<DialogBondProps>(
+		[
+			defineProperty(
+				'open',
+				() => open,
+				(v) => {
+					open = v;
+				}
+			)
+		],
+		() => ({ 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
+	]}
+	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={onclickDialogElement}
+	oncancel={(ev) => {
+		ev.preventDefault();
+		open = false;
+	}}
+	{...rootProps}
+>
+	<ActivePortal portal={portal ?? 'root.l1'}>
+		{@render children?.({ dialog: bond })}
+	</ActivePortal>
+</Teleport>

package/dist/components/dialog/dialog.stories.svelte

@@ -1,64 +1,64 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { Dialog as ADialog } from '.';
-	import { Dropdown } from '../dropdown';
-	import { dialog } from './attachements.svelte';
-
-	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-	const { Story } = defineMeta({
-		title: 'Atoms/Dialog',
-		// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-
-		parameters: {
-			// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-			layout: 'fullscreen'
-		},
-		args: {}
-	});
-</script>
-
-<script lang="ts">
-	let isDialogOpen = $state(false);
-	let isDropdownOpen = $state(false);
-</script>
-
-<Story name="Dialog" args={{}}>
-	<div class="size-10 bg-red-500"></div>
-	<button onclick={() => (isDialogOpen = !isDialogOpen)}>Open Dialog</button>
-
-	<ADialog.Root class="bg-neutral-900/20" bind:open={isDialogOpen}>
-		<ADialog.Content>
-			<ADialog.Header>
-				<div>Open Popover</div>
-				<ADialog.CloseButton class="ml-auto"></ADialog.CloseButton>
-			</ADialog.Header>
-
-			<ADialog.Body>
-				<p
-					{@attach dialog((node, atom) => {
-						console.log(atom);
-					})}
-				>
-					Mauris et habitasse cubilia potenti at condimentum iaculis nam. Ante fusce litora
-					tristique letius libero. Curabitur vitae cursus consectetur feugiat aenean viverra vel
-					dolor diam nascetur.
-				</p>
-
-				<Dropdown.Root open={isDialogOpen && isDropdownOpen} class="w-full">
-					<Dropdown.Trigger>Hello World</Dropdown.Trigger>
-					<Dropdown.List>
-						<Dropdown.Item id="ar">Arabic</Dropdown.Item>
-						<Dropdown.Item id="en">English</Dropdown.Item>
-						<Dropdown.Item id="sp">Spanish</Dropdown.Item>
-						<Dropdown.Item id="it">Italian</Dropdown.Item>
-					</Dropdown.List>
-				</Dropdown.Root>
-			</ADialog.Body>
-
-			<ADialog.Footer class="gap-4">
-				<button onclick={() => (isDialogOpen = false)}>Cancel</button>
-				<button>Save</button>
-			</ADialog.Footer>
-		</ADialog.Content>
-	</ADialog.Root>
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { Dialog as ADialog } from '.';
+	import { Dropdown } from '../dropdown';
+	import { dialog } from './attachements.svelte';
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'Atoms/Dialog',
+		// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+
+		parameters: {
+			// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+			layout: 'fullscreen'
+		},
+		args: {}
+	});
+</script>
+
+<script lang="ts">
+	let isDialogOpen = $state(false);
+	let isDropdownOpen = $state(false);
+</script>
+
+<Story name="Dialog" args={{}}>
+	<div class="size-10 bg-red-500"></div>
+	<button onclick={() => (isDialogOpen = !isDialogOpen)}>Open Dialog</button>
+
+	<ADialog.Root class="bg-neutral-900/20" bind:open={isDialogOpen}>
+		<ADialog.Content>
+			<ADialog.Header>
+				<div>Open Popover</div>
+				<ADialog.CloseButton class="ml-auto"></ADialog.CloseButton>
+			</ADialog.Header>
+
+			<ADialog.Body>
+				<p
+					{@attach dialog((node, atom) => {
+						console.log(atom);
+					})}
+				>
+					Mauris et habitasse cubilia potenti at condimentum iaculis nam. Ante fusce litora
+					tristique letius libero. Curabitur vitae cursus consectetur feugiat aenean viverra vel
+					dolor diam nascetur.
+				</p>
+
+				<Dropdown.Root open={isDialogOpen && isDropdownOpen} class="w-full">
+					<Dropdown.Trigger>Hello World</Dropdown.Trigger>
+					<Dropdown.List>
+						<Dropdown.Item id="ar">Arabic</Dropdown.Item>
+						<Dropdown.Item id="en">English</Dropdown.Item>
+						<Dropdown.Item id="sp">Spanish</Dropdown.Item>
+						<Dropdown.Item id="it">Italian</Dropdown.Item>
+					</Dropdown.List>
+				</Dropdown.Root>
+			</ADialog.Body>
+
+			<ADialog.Footer class="gap-4">
+				<button onclick={() => (isDialogOpen = false)}>Cancel</button>
+				<button>Save</button>
+			</ADialog.Footer>
+		</ADialog.Content>
+	</ADialog.Root>
+</Story>

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

@@ -0,0 +1,13 @@
+type AnimateDialogRootParams = {
+    duration?: number;
+    delay?: number;
+    ease?: string;
+};
+export declare function animateDialogRoot(params?: AnimateDialogRootParams): (node: HTMLElement) => void;
+type AnimateDialogContentParams = {
+    duration?: number;
+    delay?: number;
+    ease?: string;
+};
+export declare function animateDialogContent(params?: AnimateDialogContentParams): (node: HTMLElement) => void;
+export {};

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

@@ -0,0 +1,44 @@
+import { DURATION } from '../../shared';
+import { animate } from 'motion';
+import { DialogBond } from './bond.svelte';
+export function animateDialogRoot(params = {}) {
+    const { duration = DURATION.fast / 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
+        });
+    };
+}
+export function animateDialogContent(params = {}) {
+    const { duration = DURATION.fast / 1000, delay = 0, ease = 'anticipate' } = params;
+    const bond = DialogBond.get();
+    return (node) => {
+        const isOpen = bond?.state.props.open ?? false;
+        if (!bond?.elements.root.open) {
+            if (node instanceof HTMLDialogElement) {
+                node.show();
+            }
+        }
+        animate(node, { scale: 0.9 + 0.1 * +isOpen, opacity: +isOpen }, {
+            duration,
+            easing: ease,
+            delay,
+            onComplete: () => {
+                if (!isOpen) {
+                    if (node instanceof HTMLDialogElement) {
+                        node.close();
+                    }
+                }
+            }
+        });
+    };
+}

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

@@ -3,4 +3,4 @@ export declare function drawer(callback: (node: HTMLElement, bond?: DrawerBond)
 export declare function toggleDrawer(onclick?: (ev: MouseEvent) => void): (node: HTMLElement) => () => void;
 export declare function openDrawer(onclick?: (ev: MouseEvent) => void): (node: HTMLElement) => () => void;
 export declare function closeDrawer(onclick?: (ev: MouseEvent) => void): (node: HTMLElement) => (() => void) | undefined;
-export declare function clickoutDrawer(onclickout?: (ev: PointerEvent) => void): (node: Element) => () => void;
+export declare function clickoutDrawer(onclickout?: (ev: PointerEvent, bond?: DrawerBond) => void): (node: Element) => () => void;

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

@@ -1,4 +1,3 @@
-import { on } from '../../attachments/event.svelte';
 import { clickout } from '../../attachments/clickout.svelte';
 import { DrawerBond } from './bond.svelte';
 export function drawer(callback) {
@@ -68,8 +67,7 @@ export function clickoutDrawer(onclickout) {
         if (bond.elements.content?.contains(target)) {
             return;
         }
-        console.log('clickoutDrawer invoked', bond.state.props.open);
-        onclickout?.(ev);
+        onclickout?.(ev, bond);
         if (ev.defaultPrevented) {
             return;
         }

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

@@ -18,16 +18,27 @@ export type DrawerBondElements = {
 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(props?: Record<string, unknown>): {
+    root(props?: Record<string, unknown> & {
+        onclick?: (ev: MouseEvent) => void;
+        onkeydown?: (ev: KeyboardEvent) => void;
+    }): {
+        onclick?: (ev: MouseEvent) => void;
+        onkeydown: (ev: KeyboardEvent) => void;
         id: string;
-        'aria-expanded': boolean;
-        'aria-disabled': boolean;
+        role: string;
+        'aria-modal': boolean;
         'aria-labelledby': string | undefined;
+        'aria-describedby': string | undefined;
+        'aria-hidden': boolean;
+        inert: string | undefined;
+        tabindex: number;
         'data-active': boolean;
+        'data-open': boolean;
         'data-kind': string;
     };
     content(props?: Record<string, unknown>): {
         id: string;
+        role: string;
         'data-kind': string;
     };
     body(props?: Record<string, unknown>): {
@@ -42,6 +53,8 @@ export declare class DrawerBond<Props extends DrawerBondProps = DrawerBondProps,
     };
     title(props?: Record<string, unknown>): {
         id: string;
+        role: string;
+        'aria-level': number;
         'data-kind': string;
     };
     description(props?: Record<string, unknown>): {
@@ -50,10 +63,16 @@ export declare class DrawerBond<Props extends DrawerBondProps = DrawerBondProps,
     };
     footer(props?: Record<string, unknown>): {
         id: string;
+        role: string;
         'data-kind': string;
     };
-    backdrop(): {
-        [x: symbol]: (node: HTMLElement) => void;
+    backdrop(props?: Record<string, unknown> & {
+        onclick?: (ev: MouseEvent) => void;
+    }): {
+        onclick: (ev: MouseEvent) => void;
+        role: string;
+        'aria-hidden': boolean;
+        'data-kind': string;
     };
     share(): this;
     static get(): DrawerBond | undefined;

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

@@ -19,27 +19,77 @@ export class DrawerBond extends Bond {
     }
     root(props = {}) {
         const id = getElementId(this.id, DRAWER_ELEMENTS_KIND.root);
-        const drawerHeaderId = getElementId(this.id, DRAWER_ELEMENTS_KIND.header);
         const drawerTitleId = getElementId(this.id, DRAWER_ELEMENTS_KIND.title);
-        const haveHeaderElement = !!this.elements.header;
+        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;
         const isActive = isOpen && !isDisabled;
+        // Focus trap handler
+        const focusTrap = (ev) => {
+            const node = ev.currentTarget;
+            if (ev.key === 'Tab') {
+                const focusableElements = node.querySelectorAll('a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])');
+                const firstElement = focusableElements[0];
+                const lastElement = focusableElements[focusableElements.length - 1];
+                if (focusableElements.length === 0)
+                    return;
+                if (ev.shiftKey && document.activeElement === firstElement) {
+                    ev.preventDefault();
+                    lastElement?.focus();
+                }
+                else if (!ev.shiftKey && document.activeElement === lastElement) {
+                    ev.preventDefault();
+                    firstElement?.focus();
+                }
+            }
+        };
+        let previousActiveElement = null;
         return {
             id: id,
-            'aria-expanded': isOpen,
-            'aria-disabled': isDisabled,
-            'aria-labelledby': haveTitleElement
-                ? drawerTitleId
-                : haveHeaderElement
-                    ? drawerHeaderId
-                    : undefined,
+            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();
+                }
+                props.onkeydown?.(ev);
+            },
             ...props,
             [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);
+                }
+                else {
+                    // Restore focus to previous element
+                    if (previousActiveElement instanceof HTMLElement) {
+                        previousActiveElement.focus();
+                    }
+                }
             }
         };
     }
@@ -47,6 +97,7 @@ export class DrawerBond extends Bond {
         const id = getElementId(this.id, DRAWER_ELEMENTS_KIND.content);
         return {
             id: id,
+            role: 'document',
             'data-kind': DRAWER_ELEMENTS_KIND.content,
             ...props,
             [createAttachmentKey()]: (node) => {
@@ -70,7 +121,7 @@ export class DrawerBond extends Bond {
         const id = getElementId(this.id, DRAWER_ELEMENTS_KIND.header);
         return {
             id: id,
-            role: 'heading',
+            role: 'banner',
             'data-kind': DRAWER_ELEMENTS_KIND.header,
             ...props,
             [createAttachmentKey()]: (node) => {
@@ -82,6 +133,8 @@ export class DrawerBond extends Bond {
         const id = getElementId(this.id, DRAWER_ELEMENTS_KIND.title);
         return {
             id: id,
+            role: 'heading',
+            'aria-level': 2,
             'data-kind': DRAWER_ELEMENTS_KIND.title,
             ...props,
             [createAttachmentKey()]: (node) => {
@@ -104,6 +157,7 @@ export class DrawerBond extends Bond {
         const id = getElementId(this.id, DRAWER_ELEMENTS_KIND.footer);
         return {
             id: id,
+            role: 'contentinfo',
             'data-kind': DRAWER_ELEMENTS_KIND.footer,
             ...props,
             [createAttachmentKey()]: (node) => {
@@ -111,8 +165,20 @@ export class DrawerBond extends Bond {
             }
         };
     }
-    backdrop() {
+    backdrop(props = {}) {
+        const isDisabled = this.state?.props?.disabled ?? false;
         return {
+            role: 'presentation',
+            'aria-hidden': true,
+            'data-kind': DRAWER_ELEMENTS_KIND.backdrop,
+            onclick: (ev) => {
+                // Close drawer on backdrop click
+                if (!isDisabled) {
+                    this.state.close();
+                }
+                props.onclick?.(ev);
+            },
+            ...props,
             [createAttachmentKey()]: (node) => {
                 this.elements.backdrop = node;
             }

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

@@ -1,9 +1,9 @@
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { HtmlAtom, type Base } from '../atom';
+	import { HtmlAtom as Atom, type Base } from '../atom';
 	import type { SlideoverContentProps } from './types';
 	import { DrawerBond } from './bond.svelte';
-	import { animate as motion } from 'motion';
+	import { animateDrawerContent } from './motion';
 
 	type Element = HTMLElementTagNameMap[E];
 
@@ -15,10 +15,10 @@
 		children = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
-		animate = _animate,
+		animate = animateDrawerContent({ ease: 'easeOut', side: 'left' }),
 		enter = undefined,
 		exit = undefined,
-		initial = _initial,
+		initial = animateDrawerContent({ ease: 'easeOut', side: 'left', duration: 0 }),
 		...restProps
 	}: SlideoverContentProps<E, B> & HTMLAttributes<Element> = $props();
 
@@ -26,17 +26,9 @@
 		...bond?.content(),
 		...restProps
 	});
-
-	function _initial(node: HTMLElement) {
-		motion(node, { x: isOpen ? 0 : -100 + '%', left: 0 }, { duration: 0.3, ease: 'anticipate' });
-	}
-
-	function _animate(node: HTMLElement) {
-		motion(node, { x: isOpen ? 0 : -100 + '%', left: 0 }, { duration: 0.3, ease: 'anticipate' });
-	}
 </script>
 
-<HtmlAtom
+<Atom
 	preset="drawer.content"
 	class={[
 		'bg-card text-foreground border-border pointer-events-none absolute',
@@ -54,4 +46,4 @@
 	{...contentProps}
 >
 	{@render children?.({ drawer: bond })}
-</HtmlAtom>
+</Atom>