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

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

@@ -1,67 +1,67 @@
-<script lang="ts">
-	import { Content } from '../popover/atoms';
-	import {
-		Root,
-		Header as CalendarHeader,
-		Body as CalendarBody,
-		Day as CalendarDay
-	} from '../calendar/atoms';
-	import { DatePickerBond } from './bond.svelte';
-	import DatePickerHeader from './date-picker-header.svelte';
-	import DatePickerMonths from './date-picker-months.svelte';
-	import DatePickerYears from './date-picker-years.svelte';
-	import { HtmlAtom } from '../atom';
-	import type { CalendarRange, Day as CalendarDayType } from '../calendar/types';
-	import type { DatePickerCalendarProps } from './types';
-
-	const datePickerBond = DatePickerBond.get();
-	const datePickerBondProps = $derived(datePickerBond?.state.props);
-
-	let {
-		class: klass = '',
-		preset = 'datepicker.calendar',
-		children: childrenProp,
-		Header = DatePickerHeader,
-		Weekdays = CalendarHeader,
-		Body = CalendarBody,
-		Day = CalendarDay,
-		Months = DatePickerMonths,
-		Years = DatePickerYears,
-		...restProps
-	}: DatePickerCalendarProps = $props();
-
-	const calendarProps = $derived({
-		...datePickerBond?.content(),
-		...datePickerBondProps,
-		...restProps
-	});
-
-	function handleChange(_: CustomEvent, { range, pivote }: { range: CalendarRange; pivote: Date }) {
-		if (!datePickerBond) return;
-
-		datePickerBond.state.props.range = range;
-		datePickerBond.state.props.pivote = pivote;
-	}
-</script>
-
-<Content
-	class={['relative overflow-hidden p-0', klass]}
-	base={Root}
-	onchange={handleChange}
-	{preset}
-	{...calendarProps}
->
-	<HtmlAtom base={Header} class="col-span-full" />
-	<HtmlAtom base={Weekdays} class="border-0" />
-
-	<HtmlAtom base={Body}>
-		{#snippet children({ day }: { day: CalendarDayType })}
-			<HtmlAtom base={Day} {day} class="flex items-center justify-center border-0">
-				<span class="value">{day.dayOfMonth}</span>
-			</HtmlAtom>
-		{/snippet}
-	</HtmlAtom>
-
-	<HtmlAtom base={Months} />
-	<HtmlAtom base={Years} />
-</Content>
+<script lang="ts">
+	import { Content } from '../popover/atoms';
+	import {
+		Root,
+		Header as CalendarHeader,
+		Body as CalendarBody,
+		Day as CalendarDay
+	} from '../calendar/atoms';
+	import { DatePickerBond } from './bond.svelte';
+	import DatePickerHeader from './date-picker-header.svelte';
+	import DatePickerMonths from './date-picker-months.svelte';
+	import DatePickerYears from './date-picker-years.svelte';
+	import { HtmlAtom } from '../atom';
+	import type { CalendarRange, Day as CalendarDayType } from '../calendar/types';
+	import type { DatePickerCalendarProps } from './types';
+
+	const datePickerBond = DatePickerBond.get();
+	const datePickerBondProps = $derived(datePickerBond?.state.props);
+
+	let {
+		class: klass = '',
+		preset = 'datepicker.calendar',
+		children: childrenProp,
+		Header = DatePickerHeader,
+		Weekdays = CalendarHeader,
+		Body = CalendarBody,
+		Day = CalendarDay,
+		Months = DatePickerMonths,
+		Years = DatePickerYears,
+		...restProps
+	}: DatePickerCalendarProps = $props();
+
+	const calendarProps = $derived({
+		...datePickerBond?.content(),
+		...datePickerBondProps,
+		...restProps
+	});
+
+	function handleChange(_: CustomEvent, { range, pivote }: { range: CalendarRange; pivote: Date }) {
+		if (!datePickerBond) return;
+
+		datePickerBond.state.props.range = range;
+		datePickerBond.state.props.pivote = pivote;
+	}
+</script>
+
+<Content
+	class={['relative overflow-hidden p-0', klass]}
+	base={Root}
+	onchange={handleChange}
+	{preset}
+	{...calendarProps}
+>
+	<HtmlAtom base={Header} class="col-span-full" />
+	<HtmlAtom base={Weekdays} class="border-0" />
+
+	<HtmlAtom base={Body}>
+		{#snippet children({ day }: { day: CalendarDayType })}
+			<HtmlAtom base={Day} {day} class="flex items-center justify-center border-0">
+				<span class="value">{day.dayOfMonth}</span>
+			</HtmlAtom>
+		{/snippet}
+	</HtmlAtom>
+
+	<HtmlAtom base={Months} />
+	<HtmlAtom base={Years} />
+</Content>

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',
@@ -26,23 +26,8 @@ export class DialogBond extends Bond {
         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();
-                }
-            }
+        const focusManager = (ev) => {
+            focusTrap(ev);
         };
         let previousActiveElement = null;
         return {
@@ -61,12 +46,12 @@ export class DialogBond extends Bond {
                 }
             },
             onkeydown: (ev) => {
-                focusTrap(ev);
                 // Close on Escape key
-                if (ev.key === 'Escape' && !isDisabled) {
+                if (ev.key === 'Escape') {
                     ev.preventDefault();
                     this.state.close();
                 }
+                focusManager(ev);
             },
             [createAttachmentKey()]: (node) => {
                 this.elements.root = node;

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

@@ -1,44 +1,44 @@
-<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>
+<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>

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

@@ -1,91 +1,91 @@
-<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>
+<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/drawer/bond.svelte.d.ts

@@ -18,12 +18,8 @@ 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> & {
-        onclick?: (ev: MouseEvent) => void;
-        onkeydown?: (ev: KeyboardEvent) => void;
-    }): {
-        onclick?: (ev: MouseEvent) => void;
-        onkeydown: (ev: KeyboardEvent) => void;
+    root(): {
+        [x: symbol]: (node: HTMLElement) => void;
         id: string;
         role: string;
         'aria-modal': boolean;
@@ -35,44 +31,50 @@ export declare class DrawerBond<Props extends DrawerBondProps = DrawerBondProps,
         'data-active': boolean;
         'data-open': boolean;
         'data-kind': string;
+        onkeydown: (ev: KeyboardEvent) => void;
     };
-    content(props?: Record<string, unknown>): {
+    content(): {
+        [x: symbol]: (node: HTMLElement) => void;
         id: string;
         role: string;
         'data-kind': string;
     };
-    body(props?: Record<string, unknown>): {
+    body(): {
+        [x: symbol]: (node: HTMLElement) => void;
         id: string;
         role: string;
         'data-kind': string;
     };
-    header(props?: Record<string, unknown>): {
+    header(): {
+        [x: symbol]: (node: HTMLElement) => void;
         id: string;
         role: string;
         'data-kind': string;
     };
-    title(props?: Record<string, unknown>): {
+    title(): {
+        [x: symbol]: (node: HTMLElement) => void;
         id: string;
         role: string;
         'aria-level': number;
         'data-kind': string;
     };
-    description(props?: Record<string, unknown>): {
+    description(): {
+        [x: symbol]: (node: HTMLElement) => void;
         id: string;
         'data-kind': string;
     };
-    footer(props?: Record<string, unknown>): {
+    footer(): {
+        [x: symbol]: (node: HTMLElement) => void;
         id: string;
         role: string;
         'data-kind': string;
     };
-    backdrop(props?: Record<string, unknown> & {
-        onclick?: (ev: MouseEvent) => void;
-    }): {
-        onclick: (ev: MouseEvent) => void;
+    backdrop(): {
+        [x: symbol]: (node: HTMLElement) => void;
         role: string;
         'aria-hidden': boolean;
         'data-kind': string;
+        onclick: (ev: MouseEvent) => void;
     };
     share(): this;
     static get(): DrawerBond | undefined;

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

@@ -17,7 +17,7 @@ export class DrawerBond extends Bond {
     constructor(state) {
         super(state);
     }
-    root(props = {}) {
+    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);
@@ -65,9 +65,7 @@ export class DrawerBond extends Bond {
                     ev.preventDefault();
                     this.state.close();
                 }
-                props.onkeydown?.(ev);
             },
-            ...props,
             [createAttachmentKey()]: (node) => {
                 this.elements.root = node;
                 if (this.state.props.open) {
@@ -93,79 +91,73 @@ export class DrawerBond extends Bond {
             }
         };
     }
-    content(props = {}) {
+    content() {
         const id = getElementId(this.id, DRAWER_ELEMENTS_KIND.content);
         return {
             id: id,
             role: 'document',
             'data-kind': DRAWER_ELEMENTS_KIND.content,
-            ...props,
             [createAttachmentKey()]: (node) => {
                 this.elements.content = node;
             }
         };
     }
-    body(props = {}) {
+    body() {
         const id = getElementId(this.id, DRAWER_ELEMENTS_KIND.body);
         return {
             id: id,
             role: 'region',
             'data-kind': DRAWER_ELEMENTS_KIND.body,
-            ...props,
             [createAttachmentKey()]: (node) => {
                 this.elements.body = node;
             }
         };
     }
-    header(props = {}) {
+    header() {
         const id = getElementId(this.id, DRAWER_ELEMENTS_KIND.header);
         return {
             id: id,
             role: 'banner',
             'data-kind': DRAWER_ELEMENTS_KIND.header,
-            ...props,
             [createAttachmentKey()]: (node) => {
                 this.elements.header = node;
             }
         };
     }
-    title(props = {}) {
+    title() {
         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) => {
                 this.elements.title = node;
             }
         };
     }
-    description(props = {}) {
+    description() {
         const id = getElementId(this.id, DRAWER_ELEMENTS_KIND.description);
         return {
             id: id,
             'data-kind': DRAWER_ELEMENTS_KIND.description,
-            ...props,
             [createAttachmentKey()]: (node) => {
                 this.elements.description = node;
             }
         };
     }
-    footer(props = {}) {
+    footer() {
         const id = getElementId(this.id, DRAWER_ELEMENTS_KIND.footer);
         return {
             id: id,
             role: 'contentinfo',
             'data-kind': DRAWER_ELEMENTS_KIND.footer,
-            ...props,
             [createAttachmentKey()]: (node) => {
                 this.elements.footer = node;
             }
         };
     }
-    backdrop(props = {}) {
+    backdrop() {
         const isDisabled = this.state?.props?.disabled ?? false;
         return {
             role: 'presentation',
@@ -176,9 +168,7 @@ export class DrawerBond extends Bond {
                 if (!isDisabled) {
                     this.state.close();
                 }
-                props.onclick?.(ev);
             },
-            ...props,
             [createAttachmentKey()]: (node) => {
                 this.elements.backdrop = node;
             }