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

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

@@ -1,205 +1,205 @@
-<script lang="ts">
-	import { animate } from 'motion';
-	import { getYear, setYear } from 'date-fns';
-	import { cn } from '../../utils';
-	import { DatePickerBond } from './bond.svelte';
-	import type { DatePickerYearsProps } from './types';
-	import { HtmlAtom } from '../atom';
-	import { Icon } from '../icon';
-
-	const datePicker = DatePickerBond.get();
-
-	const pivote = $derived(datePicker?.state.props.pivote ?? new Date());
-
-	let pivoteYear = $derived(pivote.getFullYear());
-
-	const currentYear = $derived(getYear(pivote));
-
-	// Generate array of years to display (12 years: current ±5)
-	const yearsGrid = $derived.by(() => {
-		const years = [];
-		const startYear = pivoteYear - 5;
-		for (let i = 0; i < 12; i++) {
-			years.push(startYear + i);
-		}
-		return years;
-	});
-
-	let {
-		class: klass = '',
-		preset = 'datepicker.years',
-		children,
-		...restProps
-	}: DatePickerYearsProps = $props();
-
-	let scrollTimeout: NodeJS.Timeout | undefined = undefined;
-
-	function enter(node: HTMLElement) {
-		animate(
-			node,
-			{
-				scale: [0.8, 1]
-			},
-			{ duration: 100 / 1000, ease: 'circOut' }
-		);
-		return {
-			duration: 100
-		};
-	}
-
-	function exit(node: HTMLElement) {
-		animate(
-			node,
-			{
-				scale: 0.8
-			},
-			{ duration: 100 / 1000, ease: 'circOut' }
-		);
-		return {
-			duration: 100
-		};
-	}
-
-	function handlePreviousYear() {
-		pivoteYear = pivoteYear - 1;
-	}
-
-	function handleNextYear() {
-		pivoteYear = pivoteYear + 1;
-	}
-
-	function handleYearSelect(year: number) {
-		if (!datePicker?.state.props.pivote) return;
-		const current = datePicker.state.props.pivote;
-		datePicker.state.props.pivote = setYear(current, year);
-
-		datePicker.state.closeYearsPicker();
-	}
-
-	function handleWheel(event: WheelEvent) {
-		event.preventDefault();
-
-		// Clear any existing timeout
-		if (scrollTimeout) {
-			clearTimeout(scrollTimeout);
-		}
-
-		// Debounce the scroll event to avoid rapid year changes
-		scrollTimeout = setTimeout(() => {
-			const direction = event.deltaY > 0 ? 1 : -1; // Positive = scroll down = next year
-			pivoteYear = pivoteYear + direction;
-		}, 50);
-	}
-</script>
-
-{#if datePicker.state.isYearsPickerOpen}
-	<HtmlAtom
-		class={['absolute inset-0 z-2 flex flex-col gap-2 bg-inherit opacity-0', '$preset', klass]}
-		enter={(node) => {
-			animate(
-				node,
-				{
-					opacity: [0, 1]
-				},
-				{ duration: 100 / 1000, ease: 'anticipate' }
-			);
-			return {
-				duration: 100
-			};
-		}}
-		exit={(node) => {
-			animate(
-				node,
-				{
-					opacity: 0
-				},
-				{ duration: 100 / 1000, ease: 'anticipate' }
-			);
-			return {
-				duration: 100
-			};
-		}}
-		onwheel={handleWheel}
-		{preset}
-		{...restProps}
-	>
-		<HtmlAtom class="flex flex-1 flex-col" {enter} {exit}>
-			<!-- Navigation Bar -->
-			<nav
-				class="border-border text-foreground flex h-12 items-center justify-between gap-2 border-b px-2 py-2"
-			>
-				<!-- Previous Year Button -->
-				<button
-					type="button"
-					class="hover:bg-foreground/10 active:bg-foreground/20 flex size-8 cursor-pointer items-center justify-center rounded-md transition-colors"
-					onclick={handlePreviousYear}
-					aria-label="Previous year"
-				>
-					<Icon class="size-5">
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							class="size-full"
-							viewBox="0 0 24 24"
-							fill="none"
-							stroke="currentColor"
-							stroke-width="2"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-						>
-							<path d="M15 18l-6-6 6-6" />
-						</svg>
-					</Icon>
-				</button>
-
-				<!-- Year Display -->
-				<div class="flex-1">
-					<!-- {currentYear} -->
-				</div>
-
-				<!-- Next Year Button -->
-				<button
-					type="button"
-					class="hover:bg-foreground/10 active:bg-foreground/20 flex size-8 cursor-pointer items-center justify-center rounded-md transition-colors"
-					onclick={handleNextYear}
-					aria-label="Next year"
-				>
-					<Icon class="size-5">
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							class="size-full"
-							viewBox="0 0 24 24"
-							fill="none"
-							stroke="currentColor"
-							stroke-width="2"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-						>
-							<path d="M9 18l6-6-6-6" />
-						</svg>
-					</Icon>
-				</button>
-			</nav>
-
-			<!-- Years Grid -->
-			<div class="grid flex-1 grid-cols-4 gap-1 px-2 py-2">
-				{#each yearsGrid as year}
-					{@const isSelected = year === pivote.getFullYear()}
-					{@const isCurrent = year === currentYear}
-					<button
-						type="button"
-						class={cn(
-							'hover:bg-foreground/10 active:bg-foreground/20 rounded-md px-3 py-2 text-sm transition-colors',
-							isSelected && 'bg-primary text-primary-foreground hover:bg-primary/90',
-							isCurrent && !isSelected && 'ring-foreground/20 ring-1'
-						)}
-						onclick={() => handleYearSelect(year)}
-						aria-label="Select year {year}"
-						aria-current={isSelected ? 'date' : undefined}
-					>
-						{year}
-					</button>
-				{/each}
-			</div>
-		</HtmlAtom>
-	</HtmlAtom>
-{/if}
+<script lang="ts">
+	import { animate } from 'motion';
+	import { getYear, setYear } from 'date-fns';
+	import { cn } from '../../utils';
+	import { DatePickerBond } from './bond.svelte';
+	import type { DatePickerYearsProps } from './types';
+	import { HtmlAtom } from '../atom';
+	import { Icon } from '../icon';
+
+	const datePicker = DatePickerBond.get();
+
+	const pivote = $derived(datePicker?.state.props.pivote ?? new Date());
+
+	let pivoteYear = $derived(pivote.getFullYear());
+
+	const currentYear = $derived(getYear(pivote));
+
+	// Generate array of years to display (12 years: current ±5)
+	const yearsGrid = $derived.by(() => {
+		const years = [];
+		const startYear = pivoteYear - 5;
+		for (let i = 0; i < 12; i++) {
+			years.push(startYear + i);
+		}
+		return years;
+	});
+
+	let {
+		class: klass = '',
+		preset = 'datepicker.years',
+		children,
+		...restProps
+	}: DatePickerYearsProps = $props();
+
+	let scrollTimeout: NodeJS.Timeout | undefined = undefined;
+
+	function enter(node: HTMLElement) {
+		animate(
+			node,
+			{
+				scale: [0.8, 1]
+			},
+			{ duration: 100 / 1000, ease: 'circOut' }
+		);
+		return {
+			duration: 100
+		};
+	}
+
+	function exit(node: HTMLElement) {
+		animate(
+			node,
+			{
+				scale: 0.8
+			},
+			{ duration: 100 / 1000, ease: 'circOut' }
+		);
+		return {
+			duration: 100
+		};
+	}
+
+	function handlePreviousYear() {
+		pivoteYear = pivoteYear - 1;
+	}
+
+	function handleNextYear() {
+		pivoteYear = pivoteYear + 1;
+	}
+
+	function handleYearSelect(year: number) {
+		if (!datePicker?.state.props.pivote) return;
+		const current = datePicker.state.props.pivote;
+		datePicker.state.props.pivote = setYear(current, year);
+
+		datePicker.state.closeYearsPicker();
+	}
+
+	function handleWheel(event: WheelEvent) {
+		event.preventDefault();
+
+		// Clear any existing timeout
+		if (scrollTimeout) {
+			clearTimeout(scrollTimeout);
+		}
+
+		// Debounce the scroll event to avoid rapid year changes
+		scrollTimeout = setTimeout(() => {
+			const direction = event.deltaY > 0 ? 1 : -1; // Positive = scroll down = next year
+			pivoteYear = pivoteYear + direction;
+		}, 50);
+	}
+</script>
+
+{#if datePicker.state.isYearsPickerOpen}
+	<HtmlAtom
+		class={['absolute inset-0 z-2 flex flex-col gap-2 bg-inherit opacity-0', '$preset', klass]}
+		enter={(node) => {
+			animate(
+				node,
+				{
+					opacity: [0, 1]
+				},
+				{ duration: 100 / 1000, ease: 'anticipate' }
+			);
+			return {
+				duration: 100
+			};
+		}}
+		exit={(node) => {
+			animate(
+				node,
+				{
+					opacity: 0
+				},
+				{ duration: 100 / 1000, ease: 'anticipate' }
+			);
+			return {
+				duration: 100
+			};
+		}}
+		onwheel={handleWheel}
+		{preset}
+		{...restProps}
+	>
+		<HtmlAtom class="flex flex-1 flex-col" {enter} {exit}>
+			<!-- Navigation Bar -->
+			<nav
+				class="border-border text-foreground flex h-12 items-center justify-between gap-2 border-b px-2 py-2"
+			>
+				<!-- Previous Year Button -->
+				<button
+					type="button"
+					class="hover:bg-foreground/10 active:bg-foreground/20 flex size-8 cursor-pointer items-center justify-center rounded-md transition-colors"
+					onclick={handlePreviousYear}
+					aria-label="Previous year"
+				>
+					<Icon class="size-5">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="size-full"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						>
+							<path d="M15 18l-6-6 6-6" />
+						</svg>
+					</Icon>
+				</button>
+
+				<!-- Year Display -->
+				<div class="flex-1">
+					<!-- {currentYear} -->
+				</div>
+
+				<!-- Next Year Button -->
+				<button
+					type="button"
+					class="hover:bg-foreground/10 active:bg-foreground/20 flex size-8 cursor-pointer items-center justify-center rounded-md transition-colors"
+					onclick={handleNextYear}
+					aria-label="Next year"
+				>
+					<Icon class="size-5">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="size-full"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						>
+							<path d="M9 18l6-6-6-6" />
+						</svg>
+					</Icon>
+				</button>
+			</nav>
+
+			<!-- Years Grid -->
+			<div class="grid flex-1 grid-cols-4 gap-1 px-2 py-2">
+				{#each yearsGrid as year}
+					{@const isSelected = year === pivote.getFullYear()}
+					{@const isCurrent = year === currentYear}
+					<button
+						type="button"
+						class={cn(
+							'hover:bg-foreground/10 active:bg-foreground/20 rounded-md px-3 py-2 text-sm transition-colors',
+							isSelected && 'bg-primary text-primary-foreground hover:bg-primary/90',
+							isCurrent && !isSelected && 'ring-foreground/20 ring-1'
+						)}
+						onclick={() => handleYearSelect(year)}
+						aria-label="Select year {year}"
+						aria-current={isSelected ? 'date' : undefined}
+					>
+						{year}
+					</button>
+				{/each}
+			</div>
+		</HtmlAtom>
+	</HtmlAtom>
+{/if}

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

@@ -1,42 +1,35 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-
-	const { Story } = defineMeta({
-		title: 'Atoms/Date Picker'
-	});
-</script>
-
-<script lang="ts">
-	import { Root } from '../root';
-	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 })}
-		<Root>
-			{#snippet children({})}
-				<div class="flex h-fit items-center justify-center">
-					<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>
-				</div>
-			{/snippet}
-		</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) => {