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

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

@@ -19,24 +19,78 @@ 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 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,
             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) => {
+                focusTrap(ev);
+                // Close on Escape key
+                if (ev.key === 'Escape' && !isDisabled) {
+                    ev.preventDefault();
+                    this.state.close();
+                }
+            },
             [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 +98,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 +110,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 +122,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 +146,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 +159,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,62 +1,44 @@
-<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';
-
-	const bond = DialogBond.get();
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = _animate,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: DialogContentProps<E, B> = $props();
-
-	const dialogProps = $derived({
-		...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
-	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',
-		'$preset',
-		klass
-	]}
-	{bond}
-	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)}
-	{...dialogProps}
->
-	{@render children?.({ dialog: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	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();
+
+	let {
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = animateDialogContent(),
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: DialogContentProps<E, B> = $props();
+
+	const dialogProps = $derived({
+		...bond?.content({}),
+		...restProps
+	});
+</script>
+
+<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',
+		'$preset',
+		klass
+	]}
+	{bond}
+	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)}
+	{...dialogProps}
+>
+	{@render children?.({ dialog: bond })}
+</HtmlAtom>