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

package/dist/components/menu/{menu-list.svelte → menu-content.svelte}

@@ -1,40 +1,40 @@
-<script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { List } from '../list';
-	import { Content } from '../popover/atoms';
-	import type { Base } from '../atom';
-	import { PopoverBond } from '../popover';
-
-	const bond = PopoverBond.get();
-
-	let {
-		class: klass = '',
-		as = 'ul' as T,
-		base = List.Root as B,
-		preset = 'menu.list',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	} = $props();
-</script>
-
-<Content
-	{as}
-	{base}
-	{bond}
-	{preset}
-	class={['bg-background border-border overflow-hidden p-0', '$preset', klass]}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	{...restProps}
->
-	{@render children?.()}
-</Content>
+<script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { Content } from '../popover/atoms';
+	import type { Base } from '../atom';
+	import { MenuBond } from './bond.svelte';
+	import { Root } from '../list/atoms';
+
+	const bond = MenuBond.get();
+
+	let {
+		class: klass = '',
+		as = 'ul' as T,
+		base = Root as B,
+		preset = 'menu.content',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	} = $props();
+</script>
+
+<Content
+	{as}
+	{base}
+	{bond}
+	{preset}
+	class={['border-border overflow-hidden p-0', '$preset', klass]}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	{...restProps}
+>
+	{@render children?.()}
+</Content>

package/dist/components/menu/{menu-list.svelte.d.ts → menu-content.svelte.d.ts}

@@ -32,6 +32,6 @@ interface $$IsomorphicComponent {
     <T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<T, B>['props']> & {}): ReturnType<__sveltets_Render<T, B>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
-declare const MenuList: $$IsomorphicComponent;
-type MenuList<T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof MenuList<T, B>>;
-export default MenuList;
+declare const MenuContent: $$IsomorphicComponent;
+type MenuContent<T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof MenuContent<T, B>>;
+export default MenuContent;

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

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { MenuBond, MenuBondState, type MenuBondProps } from './bond.svelte';
+	import { Root } from '../popover/atoms';
+
+	let { open = $bindable(false), factory = _factory, children, ...restProps } = $props();
+
+	function _factory(props: MenuBondProps) {
+		const menuBondState = new MenuBondState(() => props);
+		return new MenuBond(menuBondState);
+	}
+</script>
+
+<Root bind:open {factory} {...restProps}>
+	{@render children?.()}
+</Root>

package/dist/components/menu/menu-root.svelte.d.ts

@@ -0,0 +1,8 @@
+import { MenuBond, MenuBondState, type MenuBondProps } from './bond.svelte';
+declare const MenuRoot: import("svelte").Component<{
+    open?: boolean;
+    factory?: (props: MenuBondProps) => MenuBond<MenuBondProps, MenuBondState<MenuBondProps>, import(".").PopoverDomElements>;
+    children: any;
+} & Record<string, any>, {}, "open">;
+type MenuRoot = ReturnType<typeof MenuRoot>;
+export default MenuRoot;

package/dist/components/menu/menu.stories.svelte

@@ -1,33 +1,33 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { Menu as AMenu } from '.';
-	import { Button } from '../button';
-
-	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-	const { Story } = defineMeta({
-		title: 'Atoms/Menu',
-		// 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 open = $state(false);
-</script>
-
-<Story name="Menu" args={{}}>
-	<AMenu.Root bind:open offset={4}>
-		<AMenu.Trigger base={Button}>Select a language</AMenu.Trigger>
-		<AMenu.List>
-			<AMenu.Item>Arabic</AMenu.Item>
-			<AMenu.Item>English</AMenu.Item>
-			<AMenu.Item>Spanish</AMenu.Item>
-			<AMenu.Item>Italian</AMenu.Item>
-		</AMenu.List>
-	</AMenu.Root>
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { Menu as AMenu } from '.';
+	import { Button } from '../button';
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'Atoms/Menu',
+		// 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 open = $state(false);
+</script>
+
+<Story name="Menu" args={{}}>
+	<AMenu.Root bind:open>
+		<AMenu.Trigger base={Button}>Select a language</AMenu.Trigger>
+		<AMenu.List>
+			<AMenu.Item onclick={() => console.log('Arabic')}>Arabic</AMenu.Item>
+			<AMenu.Item onclick={() => console.log('English')}>English</AMenu.Item>
+			<AMenu.Item onclick={() => console.log('Spanish')}>Spanish</AMenu.Item>
+			<AMenu.Item onclick={() => console.log('Italian')}>Italian</AMenu.Item>
+		</AMenu.List>
+	</AMenu.Root>
+</Story>

package/dist/components/menu/types.d.ts

@@ -1,15 +1,8 @@
 import type { HtmlAtomProps, Base } from '../atom';
-/**
- * Extend this interface to add custom menu item properties in your application.
- */
-export interface MenuItemExtendProps {
-}
 /**
  * Extend this interface to add custom menu list properties in your application.
  */
 export interface MenuListExtendProps {
 }
-export interface MenuItemProps<E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base> extends HtmlAtomProps<E, B>, MenuItemExtendProps {
-}
 export interface MenuListProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, MenuListExtendProps {
 }

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

@@ -34,12 +34,8 @@ export declare class PopoverBond<Props extends PopoverStateProps = PopoverStateP
     static CONTEXT_KEY: string;
     position: ComputePositionReturn | undefined;
     constructor(state: State);
-    trigger(props?: Record<string, unknown> & {
-        onclick?: (ev: PointerEvent) => void;
-        onkeydown?: (ev: KeyboardEvent) => void;
-    }): {
-        onclick: (ev: PointerEvent) => void;
-        onkeydown: (ev: KeyboardEvent) => void;
+    trigger(): {
+        [x: symbol]: (node: HTMLElement) => (() => void) | undefined;
         id: string;
         role: string;
         disabled: boolean | undefined;
@@ -49,30 +45,31 @@ export declare class PopoverBond<Props extends PopoverStateProps = PopoverStateP
         'aria-controls': string;
         'aria-haspopup': string;
         'data-kind': string;
+        onclick: (ev: PointerEvent) => void;
+        onkeydown: (ev: KeyboardEvent) => void;
     };
-    content(props?: Record<string, unknown> & {
-        onchange?: (node: HTMLElement, position: ComputePositionReturn) => void;
-    }): {
-        onchange?: (node: HTMLElement, position: ComputePositionReturn) => void;
+    content(): {
+        [x: symbol]: (node: HTMLElement) => (() => void) | undefined;
         id: string;
         role: string;
         'aria-modal': boolean;
         'aria-labelledby': string;
-        'aria-hidden': boolean;
-        inert: string | undefined;
+        inert: boolean | undefined;
         tabindex: number;
         'data-atom': string;
         'data-kind': string;
         'data-active': boolean;
         onkeydown: ((ev: KeyboardEvent) => void) | undefined;
     };
-    indicator(props?: Record<string, unknown>): {
+    indicator(): {
+        [x: symbol]: (node: HTMLElement) => void;
         id: string;
         'aria-hidden': boolean;
         'aria-live': string;
         'data-kind': string;
     };
-    arrow(props?: Record<string, unknown>): {
+    arrow(): {
+        [x: symbol]: (node: HTMLElement) => void;
         id: string;
         role: string;
         'aria-hidden': boolean;

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

@@ -1,7 +1,7 @@
 import { getContext, setContext, untrack } from 'svelte';
 import { createAttachmentKey } from 'svelte/attachments';
 import { autoUpdate, computePosition, arrow, flip, offset } from '@floating-ui/dom';
-import { getElementId, isBrowser } from '../../utils/dom.svelte.js';
+import { focus, focusTrap, getElementId, isBrowser } from '../../utils/dom.svelte.js';
 import { Bond, BondState } from '../../shared/bond.svelte.js';
 const POPOVER_ELEMENTS_KIND = {
     trigger: 'popover-trigger',
@@ -15,7 +15,7 @@ export class PopoverBond extends Bond {
     constructor(state) {
         super(state);
     }
-    trigger(props = {}) {
+    trigger() {
         const isButtonElement = isBrowser()
             ? this.elements.trigger instanceof HTMLButtonElement
             : false;
@@ -42,32 +42,29 @@ export class PopoverBond extends Bond {
                     return;
                 }
                 this.state.toggle();
-                props.onclick?.(ev);
             },
             onkeydown: (ev) => {
                 if (isDisabled)
                     return;
                 // Toggle on Enter or Space
                 if (ev.key === 'Enter' || ev.key === ' ') {
-                    ev.preventDefault();
                     this.state.toggle();
-                    props.onkeydown?.(ev);
+                    return;
+                }
+                if (ev.key === 'Tab') {
+                    this.elements.content?.focus();
+                    return;
                 }
-                // Close on Escape
-                else if (ev.key === 'Escape' && isOpen) {
-                    ev.preventDefault();
+                if (ev.key === 'Escape') {
                     this.state.close();
-                    props.onkeydown?.(ev);
                 }
             },
-            ...props,
             [createAttachmentKey()]: (node) => {
                 this.elements.trigger = node;
                 const position = untrack(() => this.position);
                 if (!position) {
                     const init = async () => {
                         popover(this)({
-                            ...props,
                             onchange: (_node, position) => {
                                 this.position = position;
                             }
@@ -86,7 +83,7 @@ export class PopoverBond extends Bond {
             }
         };
     }
-    content(props = {}) {
+    content() {
         const kind = POPOVER_ELEMENTS_KIND.content;
         const id = getElementId(this.id, kind);
         const triggerId = getElementId(this.id, POPOVER_ELEMENTS_KIND.trigger);
@@ -94,59 +91,47 @@ export class PopoverBond extends Bond {
         const isDisabled = this.state?.props?.disabled ?? false;
         const isActive = isOpen && !isDisabled;
         // Focus management
-        const focusTrap = (ev) => {
-            const node = ev.currentTarget;
+        const focusManager = (ev) => {
             if (ev.key === 'Escape') {
-                ev.preventDefault();
                 this.state.close();
                 this.elements.trigger?.focus();
+                return;
             }
-            // Tab trap - keep focus within popover
-            else 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 (ev.shiftKey && document.activeElement === firstElement) {
-                    ev.preventDefault();
-                    lastElement?.focus();
-                }
-                else if (!ev.shiftKey && document.activeElement === lastElement) {
-                    ev.preventDefault();
-                    firstElement?.focus();
-                }
-            }
+            focusTrap(ev);
         };
         return {
             id,
             role: 'dialog',
             'aria-modal': false,
             'aria-labelledby': triggerId,
-            'aria-hidden': !isActive,
-            inert: !isActive ? '' : undefined,
+            inert: !isActive ? true : undefined,
             tabindex: -1,
             'data-atom': this.id,
             'data-kind': 'content',
             'data-active': isActive,
-            onkeydown: isOpen ? focusTrap : undefined,
-            ...props,
+            onkeydown: isOpen ? focusManager : undefined,
             [createAttachmentKey()]: (node) => {
                 this.elements.content = node;
-                if (!this.elements.trigger) {
+                const triggerElement = this.elements.trigger;
+                if (!triggerElement) {
                     return;
                 }
                 if (!this.state.isOpen) {
                     return;
                 }
+                // check if trigger contains a focusable element and the focus is already inside
+                // check if the in-focus element is an input, textarea or select to avoid stealing focus
+                const activeElement = document.activeElement;
+                const triggerContainsFocus = ['input', 'textarea'].includes(activeElement.tagName.toLowerCase()) ||
+                    triggerElement === activeElement ||
+                    triggerElement.contains(activeElement);
                 // Move focus to popover when opened
-                setTimeout(() => {
-                    const firstFocusable = node.querySelector('a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])');
-                    (firstFocusable || node).focus();
-                }, 0);
+                if (!triggerContainsFocus) {
+                    setTimeout(() => focus(node), 0);
+                }
                 const cleanup = popover(this)({
-                    ...props,
                     onchange: (node, position) => {
                         this.position = position;
-                        props.onchange?.(node, position);
                     }
                 }, autoUpdate);
                 return () => {
@@ -155,7 +140,7 @@ export class PopoverBond extends Bond {
             }
         };
     }
-    indicator(props = {}) {
+    indicator() {
         const kind = POPOVER_ELEMENTS_KIND.indicator;
         const id = getElementId(this.id, kind);
         const isOpen = this.state?.props?.open ?? false;
@@ -164,13 +149,12 @@ export class PopoverBond extends Bond {
             'aria-hidden': true,
             'aria-live': isOpen ? 'polite' : 'off',
             'data-kind': kind,
-            ...props,
             [createAttachmentKey()]: (node) => {
                 this.elements.indicator = node;
             }
         };
     }
-    arrow(props = {}) {
+    arrow() {
         const kind = POPOVER_ELEMENTS_KIND.arrow;
         const id = getElementId(this.id, kind);
         return {
@@ -178,7 +162,6 @@ export class PopoverBond extends Bond {
             role: 'presentation',
             'aria-hidden': true,
             'data-kind': kind,
-            ...props,
             [createAttachmentKey()]: (node) => {
                 this.elements.arrow = node;
             }