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

package/dist/components/date-picker/bond.svelte.d.ts

@@ -12,13 +12,11 @@ export type DatePickerBondElements = PopoverDomElements & {
 };
 export declare class DatePickerBond<Props extends DatePickerBondProps = DatePickerBondProps, State extends DatePickerBondState<Props> = DatePickerBondState<Props>> extends PopoverBond<Props, State, DatePickerBondElements> {
     #private;
-    static CONTEXT_KEY: string;
     constructor(state: State);
     get calendar(): CalendarBond<CalendarBondProps, import("..").CalendarBondState<CalendarBondProps>> | undefined;
     setCalendar(calendar: CalendarBond): void;
     share(): this;
     trigger(): {
-        [x: symbol]: (node: HTMLInputElement) => void;
         id: string;
         role: string;
         'aria-expanded': boolean;
@@ -29,19 +27,31 @@ export declare class DatePickerBond<Props extends DatePickerBondProps = DatePick
         disabled: boolean;
         readonly: boolean;
         tabindex: number;
+        'aria-haspopup': string;
+        'data-kind': string;
+        onclick: (ev: PointerEvent) => void;
+        onkeydown: (ev: KeyboardEvent) => void;
     };
     content(): {
-        [x: symbol]: (node: HTMLElement) => void;
         id: string;
         role: string;
         'aria-label': string;
+        'aria-modal': boolean;
+        'aria-labelledby': string;
+        inert: boolean | undefined;
+        tabindex: number;
+        'data-atom': string;
+        'data-kind': string;
+        'data-active': boolean;
+        onkeydown: ((ev: KeyboardEvent) => void) | undefined;
     };
-    clearButton(props?: Record<string, unknown>): {
-        onclick: (ev: Event) => void;
+    clearButton(): {
+        [x: symbol]: (node: HTMLElement) => void;
         id: string;
         type: string;
         'aria-label': string;
         tabindex: number;
+        onclick: (ev: Event) => void;
     };
     static get(): DatePickerBond;
     static set(bond: DatePickerBond): DatePickerBond;

package/dist/components/date-picker/bond.svelte.js

@@ -2,7 +2,6 @@ import { PopoverBond, PopoverState } from '../popover/bond.svelte';
 import { getContext, setContext } from 'svelte';
 import { createAttachmentKey } from 'svelte/attachments';
 export class DatePickerBond extends PopoverBond {
-    static CONTEXT_KEY = '@atoms/context/date-picker';
     #calendarBond;
     constructor(state) {
         super(state);
@@ -20,6 +19,7 @@ export class DatePickerBond extends PopoverBond {
         const isDisabled = this.state.props.disabled ?? false;
         const placeholder = this.state.props.placeholder ?? 'Select a date';
         return {
+            ...super.trigger(),
             id: `date-picker-input-${this.id}`,
             role: 'combobox',
             'aria-expanded': this.state.props.open ?? false,
@@ -29,30 +29,24 @@ export class DatePickerBond extends PopoverBond {
             placeholder,
             disabled: isDisabled,
             readonly: true,
-            tabindex: isDisabled ? -1 : 0,
-            [createAttachmentKey()]: (node) => {
-                this.elements.trigger = node;
-            }
+            tabindex: isDisabled ? -1 : 0
         };
     }
     content() {
         return {
+            ...super.content(),
             id: `date-picker-calendar-${this.id}`,
             role: 'dialog',
-            'aria-label': 'Choose date',
-            [createAttachmentKey()]: (node) => {
-                this.elements.content = node;
-            }
+            'aria-label': 'Choose date'
         };
     }
-    clearButton(props = {}) {
+    clearButton() {
         const hasValue = this.state.hasValue;
         return {
             id: `date-picker-clear-${this.id}`,
             type: 'button',
             'aria-label': 'Clear date',
             tabindex: hasValue ? 0 : -1,
-            ...props,
             onclick: (ev) => {
                 ev.preventDefault();
                 ev.stopPropagation();

package/dist/components/date-picker/date-picker-calendar.svelte

@@ -52,11 +52,11 @@
 	{...calendarProps}
 >
 	<HtmlAtom base={Header} class="col-span-full" />
-	<HtmlAtom base={Weekdays} />
+	<HtmlAtom base={Weekdays} class="border-0" />
 
 	<HtmlAtom base={Body}>
 		{#snippet children({ day }: { day: CalendarDayType })}
-			<HtmlAtom base={Day} {day} class="flex items-center justify-center">
+			<HtmlAtom base={Day} {day} class="flex items-center justify-center border-0">
 				<span class="value">{day.dayOfMonth}</span>
 			</HtmlAtom>
 		{/snippet}

package/dist/components/date-picker/date-picker-root.svelte

@@ -1,95 +1,95 @@
-<script lang="ts">
-	import { startOfDay } from 'date-fns';
-	import { defineProperty, defineState } from '../../utils';
-	import { Root } from '../popover/atoms';
-	import type { CalendarRange } from '../calendar/types';
-	import { DatePickerBond, DatePickerBondState, type DatePickerBondProps } from './bond.svelte';
-	import type { DatePickerRootProps } from './types';
-
-	let {
-		open = $bindable(false),
-		value = $bindable(undefined),
-		range = $bindable([undefined, undefined]),
-		pivote = $bindable(new Date()),
-		start = $bindable(startOfDay(new Date())),
-		end = $bindable(undefined),
-		min = undefined,
-		max = undefined,
-		type = 'single',
-		offset = 1,
-		factory = _factory,
-		children,
-		...restProps
-	}: DatePickerRootProps = $props();
-
-	const seed = {};
-
-	const bondProps = defineState<DatePickerBondProps>(
-		[
-			defineProperty(
-				'open',
-				() => open,
-				(v) => {
-					open = v;
-				}
-			),
-			defineProperty(
-				'range',
-				() => range,
-				(v: CalendarRange) => {
-					range = v;
-					value = v[0];
-				}
-			),
-			defineProperty(
-				'value',
-				() => range?.[0],
-				(v) => {
-					range[0] = v;
-				}
-			),
-			defineProperty(
-				'pivote',
-				() => pivote,
-				(v: Date) => (pivote = v)
-			),
-			defineProperty(
-				'start',
-				() => range[0],
-				(v: Date) => {
-					range[0] = v;
-				}
-			),
-			defineProperty(
-				'end',
-				() => range[1],
-				(v: Date | undefined) => {
-					range[1] = v;
-				}
-			),
-			defineProperty(
-				'min',
-				() => min,
-				(v: Date | undefined) => (min = v)
-			),
-			defineProperty(
-				'max',
-				() => max,
-				(v: Date | undefined) => (max = v)
-			),
-			defineProperty('type', () => type ?? 'single')
-		],
-		() => seed
-	);
-
-	const bond = factory().share();
-
-	function _factory() {
-		const bondState = new DatePickerBondState(() => bondProps);
-		return new DatePickerBond(bondState);
-	}
-</script>
-
-<Root bind:open extend={bondProps} {offset} {...restProps}>
-	{@render children?.({ datePicker: bond })}
-</Root>
+<script lang="ts">
+	import { startOfDay } from 'date-fns';
+	import { defineProperty, defineState } from '../../utils';
+	import { Root } from '../popover/atoms';
+	import type { CalendarRange } from '../calendar/types';
+	import { DatePickerBond, DatePickerBondState, type DatePickerBondProps } from './bond.svelte';
+	import type { DatePickerRootProps } from './types';
+
+	let {
+		open = $bindable(false),
+		value = $bindable(undefined),
+		range = $bindable([undefined, undefined]),
+		pivote = $bindable(new Date()),
+		start = $bindable(startOfDay(new Date())),
+		end = $bindable(undefined),
+		min = undefined,
+		max = undefined,
+		type = 'single',
+		offset = 1,
+		factory = _factory,
+		children,
+		...restProps
+	}: DatePickerRootProps = $props();
+
+	const seed = {};
+
+	const bondProps = defineState<DatePickerBondProps>(
+		[
+			defineProperty(
+				'open',
+				() => open,
+				(v) => {
+					open = v;
+				}
+			),
+			defineProperty(
+				'range',
+				() => range,
+				(v: CalendarRange) => {
+					range = v;
+					value = v[0];
+				}
+			),
+			defineProperty(
+				'value',
+				() => range?.[0],
+				(v) => {
+					range[0] = v;
+				}
+			),
+			defineProperty(
+				'pivote',
+				() => pivote,
+				(v: Date) => (pivote = v)
+			),
+			defineProperty(
+				'start',
+				() => range[0],
+				(v: Date) => {
+					range[0] = v;
+				}
+			),
+			defineProperty(
+				'end',
+				() => range[1],
+				(v: Date | undefined) => {
+					range[1] = v;
+				}
+			),
+			defineProperty(
+				'min',
+				() => min,
+				(v: Date | undefined) => (min = v)
+			),
+			defineProperty(
+				'max',
+				() => max,
+				(v: Date | undefined) => (max = v)
+			),
+			defineProperty('type', () => type ?? 'single')
+		],
+		() => seed
+	);
+
+	const bond = factory().share();
+
+	function _factory() {
+		const bondState = new DatePickerBondState(() => bondProps);
+		return new DatePickerBond(bondState);
+	}
+</script>
+
+<Root bind:open extend={bondProps} {offset} {...restProps}>
+	{@render children?.({ datePicker: bond })}
+</Root>

package/dist/components/date-picker/date-picker.stories.svelte

@@ -1,35 +1,35 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-
-	const { Story } = defineMeta({
-		title: 'Atoms/Date Picker'
-	});
-</script>
-
-<script lang="ts">
-	import { DatePicker as ADatePicker } from '.';
-	import { Button } from '../button';
-	import { addDays, subDays } from 'date-fns';
-
-	let value: Date | undefined = $state(undefined);
-
-	let min = $state(subDays(new Date(), 5));
-	let max = $state(addDays(new Date(), 15));
-</script>
-
-<Story name="Date Picker">
-	{#snippet children({ args })}
-		<ADatePicker.Root bind:value {min} {max}>
-			<ADatePicker.Trigger base={Button} class="w-sm gap-4">
-				{#if value}
-					<div>{value.toDateString()}</div>
-				{:else}
-					<div>Open Date Picker</div>
-				{/if}
-
-				<ADatePicker.Indicator class="ml-auto" />
-			</ADatePicker.Trigger>
-			<ADatePicker.Calendar />
-		</ADatePicker.Root>
-	{/snippet}
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+	const { Story } = defineMeta({
+		title: 'Atoms/Date Picker'
+	});
+</script>
+
+<script lang="ts">
+	import { DatePicker as ADatePicker } from '.';
+	import { Button } from '../button';
+	import { addDays, subDays } from 'date-fns';
+
+	let value: Date | undefined = $state(undefined);
+
+	let min = $state(subDays(new Date(), 5));
+	let max = $state(addDays(new Date(), 15));
+</script>
+
+<Story name="Date Picker">
+	{#snippet children({ args })}
+		<ADatePicker.Root bind:value {min} {max}>
+			<ADatePicker.Trigger base={Button} class="w-sm gap-4">
+				{#if value}
+					<div>{value.toDateString()}</div>
+				{:else}
+					<div>Open Date Picker</div>
+				{/if}
+
+				<ADatePicker.Indicator class="ml-auto" />
+			</ADatePicker.Trigger>
+			<ADatePicker.Calendar />
+		</ADatePicker.Root>
+	{/snippet}
+</Story>

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

@@ -16,26 +16,33 @@ export declare class DialogBond<State extends DialogBondState<DialogBondProps> =
     static CONTEXT_KEY: string;
     constructor(s: State);
     share(): this;
-    root(props: Record<string, unknown>): {
+    root(): {
+        [x: symbol]: (node: HTMLDialogElement) => void;
         id: string;
         role: string;
         'aria-modal': boolean;
         'aria-labelledby': string;
         'aria-describedby': string;
-        'aria-opened': boolean;
-        'aria-disabled': boolean;
+        inert: string | undefined;
         'data-kind': string;
+        'data-open': boolean;
+        onclick: (ev: MouseEvent) => void;
+        onkeydown: (ev: KeyboardEvent) => void;
     };
     content(props: Record<string, unknown>): {
         id: string;
+        role: string;
         'data-kind': string;
     };
     header(props: Record<string, unknown>): {
         id: string;
+        role: string;
         'data-kind': string;
     };
     title(props: Record<string, unknown>): {
         id: string;
+        role: string;
+        'aria-level': number;
         'data-kind': string;
     };
     description(props: Record<string, unknown>): {
@@ -44,10 +51,13 @@ export declare class DialogBond<State extends DialogBondState<DialogBondProps> =
     };
     body(props: Record<string, unknown>): {
         id: string;
+        role: string;
+        'aria-live': string;
         'data-kind': string;
     };
     footer(props: Record<string, unknown>): {
         id: string;
+        role: string;
         'data-kind': string;
     };
     static get(): DialogBond | undefined;

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

@@ -1,6 +1,6 @@
 import { createAttachmentKey } from 'svelte/attachments';
 import { getContext, setContext } from 'svelte';
-import { getElementId } from '../../utils/dom.svelte';
+import { focusTrap, getElementId } from '../../utils/dom.svelte';
 import { Bond, BondState } from '../../shared/bond.svelte';
 const DIALOG_ELEMENTS_KIND = {
     root: 'dialog-root',
@@ -19,24 +19,63 @@ export class DialogBond extends Bond {
     share() {
         return DialogBond.set(this);
     }
-    root(props) {
+    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 idOpened = this.state.props.open ?? false;
+        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;
         return {
             id,
             role: 'dialog',
             'aria-modal': true,
             'aria-labelledby': titleId,
             'aria-describedby': descriptionId,
-            'aria-opened': idOpened,
-            'aria-disabled': isDisabled,
+            inert: !isOpen ? '' : undefined,
             'data-kind': DIALOG_ELEMENTS_KIND.root,
-            ...props,
+            'data-open': isOpen,
+            onclick: (ev) => {
+                // Close on backdrop click (clicking outside content)
+                if (ev.target === ev.currentTarget && !isDisabled) {
+                    this.state.close();
+                }
+            },
+            onkeydown: (ev) => {
+                // Close on Escape key
+                if (ev.key === 'Escape') {
+                    ev.preventDefault();
+                    this.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);
+                }
+                else {
+                    console.log('restoring focus to', previousActiveElement);
+                    // Restore focus to previous element
+                    if (previousActiveElement instanceof HTMLElement) {
+                        previousActiveElement.focus();
+                    }
+                }
             }
         };
     }
@@ -44,6 +83,7 @@ export class DialogBond extends Bond {
         const id = getElementId(this.id, DIALOG_ELEMENTS_KIND.content);
         return {
             id,
+            role: 'document',
             'data-kind': DIALOG_ELEMENTS_KIND.content,
             ...props,
             [createAttachmentKey()]: (node) => {
@@ -55,6 +95,7 @@ export class DialogBond extends Bond {
         const id = getElementId(this.id, DIALOG_ELEMENTS_KIND.header);
         return {
             id,
+            role: 'banner',
             'data-kind': DIALOG_ELEMENTS_KIND.header,
             ...props,
             [createAttachmentKey()]: (node) => {
@@ -66,6 +107,8 @@ export class DialogBond extends Bond {
         const id = getElementId(this.id, DIALOG_ELEMENTS_KIND.title);
         return {
             id,
+            role: 'heading',
+            'aria-level': 2,
             'data-kind': DIALOG_ELEMENTS_KIND.title,
             ...props,
             [createAttachmentKey()]: (node) => {
@@ -88,6 +131,8 @@ export class DialogBond extends Bond {
         const id = getElementId(this.id, DIALOG_ELEMENTS_KIND.body);
         return {
             id,
+            role: 'region',
+            'aria-live': 'polite',
             'data-kind': DIALOG_ELEMENTS_KIND.body,
             ...props,
             [createAttachmentKey()]: (node) => {
@@ -99,6 +144,7 @@ export class DialogBond extends Bond {
         const id = getElementId(this.id, DIALOG_ELEMENTS_KIND.footer);
         return {
             id,
+            role: 'contentinfo',
             'data-kind': DIALOG_ELEMENTS_KIND.footer,
             ...props,
             [createAttachmentKey()]: (node) => {

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

@@ -1,9 +1,8 @@
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { animate as motion } from 'motion';
-	import { DURATION } from '../../shared';
 	import { HtmlAtom, type Base } from '../atom';
 	import { DialogBond } from './bond.svelte';
 	import type { DialogContentProps } from './types';
+	import { animateDialogContent } from './motion.svelte';
 
 	const bond = DialogBond.get();
 
@@ -12,7 +11,7 @@
 		children = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
-		animate = _animate,
+		animate = animateDialogContent(),
 		enter = undefined,
 		exit = undefined,
 		initial = undefined,
@@ -23,23 +22,6 @@
 		...bond?.content({}),
 		...restProps
 	});
-
-	const open = $derived(bond?.state?.props?.open ?? false);
-
-	function _animate(node: HTMLElement) {
-		if (open) {
-			bond?.elements.root?.show?.();
-		}
-
-		motion(
-			node,
-			{ scale: 0.9 + 0.1 * +open, opacity: +open },
-			{
-				duration: DURATION.normal / 1000,
-				ease: 'anticipate'
-			}
-		);
-	}
 </script>
 
 <HtmlAtom

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

@@ -1,11 +1,10 @@
 <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';
+	import { animateDialogRoot } from './motion.svelte';
 
 	let {
 		class: klass = '',
@@ -16,7 +15,7 @@
 		factory = _factory,
 		onmount = undefined,
 		ondestroy = undefined,
-		animate = _animate,
+		animate = animateDialogRoot(),
 		enter = undefined,
 		exit = undefined,
 		initial = undefined,
@@ -39,7 +38,7 @@
 	const bond = _factory(bondProps).share();
 
 	const rootProps = $derived({
-		...bond?.root({}),
+		...bond?.root(),
 		...restProps
 	});
 
@@ -48,24 +47,6 @@
 		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;