@svelte-atoms/core 1.0.0-alpha.25 → 1.0.0-alpha.27

package/dist/components/list/list-group.svelte

@@ -8,7 +8,7 @@
 <HtmlAtom
 	preset="list.group"
 	class={[
-		'rounded-b-inherit rounded-t-inherit flex flex-col',
+		'rounded-b-inherit rounded-t-inherit border-border flex flex-col',
 		'$preset',
 		toClassValue.apply(null, [klass, {}])
 	]}

package/dist/components/list/list-item.svelte

@@ -13,7 +13,7 @@
 <HtmlAtom
 	{as}
 	preset={presetKey}
-	class={['flex w-full gap-2 px-4 py-1', '$preset', klass]}
+	class={['border-border flex w-full gap-2 px-4 py-1', '$preset', klass]}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -4,6 +4,11 @@
 	let { class: klass = '', as = 'ul' as T, children = undefined, ...restProps } = $props();
 </script>
 
-<HtmlAtom {as} preset="list.root" class={['flex flex-col', '$preset', klass]} {...restProps}>
+<HtmlAtom
+	{as}
+	preset="list.root"
+	class={['border-border flex flex-col', '$preset', klass]}
+	{...restProps}
+>
 	{@render children?.()}
 </HtmlAtom>

package/dist/components/list/list-title.svelte

@@ -7,7 +7,7 @@
 <HtmlAtom
 	{as}
 	preset="list.title"
-	class={['mb-1 flex w-full px-6 py-1 font-medium', '$preset', klass]}
+	class={['border-border mb-1 flex w-full px-6 py-1 font-medium', '$preset', klass]}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -0,0 +1,8 @@
+import type { HtmlAtomProps, Base } from '../atom';
+/**
+ * Extend this interface to add custom list properties in your application.
+ */
+export interface ListExtendProps {
+}
+export interface ListRootProps<E extends keyof HTMLElementTagNameMap = 'ul', B extends Base = Base> extends HtmlAtomProps<E, B>, ListExtendProps {
+}

package/dist/components/list/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,2 +1,3 @@
 export * as Menu from './atoms';
+export * from './types';
 export { PopoverBond, type PopoverDomElements, type PopoverParams, PopoverState, type PopoverStateProps, type TriggerParams } from '../popover/bond.svelte';

package/dist/components/menu/index.js

@@ -1,2 +1,3 @@
 export * as Menu from './atoms';
+export * from './types';
 export { PopoverBond, PopoverState } from '../popover/bond.svelte';

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

@@ -26,7 +26,7 @@
 	{base}
 	{bond}
 	preset="menu.list"
-	class={['bg-background overflow-hidden p-0', '$preset', klass]}
+	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)}

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

@@ -0,0 +1,15 @@
+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/menu/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,5 +1,6 @@
 import { type ComputePositionReturn, type Placement } from '@floating-ui/dom';
 import { Bond, BondState, type BondStateProps } from '../../shared/bond.svelte.js';
+import type { PortalBond } from '../portal';
 export type PopoverParams = {
     apply?: (node: HTMLElement, params: {
         x: number;
@@ -17,6 +18,7 @@ export type PopoverStateProps<T extends Record<string, unknown> = Record<string,
     placements: Placement[];
     placement: Placement | undefined;
     offset: number;
+    portal?: string | PortalBond;
     extend: T;
 };
 export type TriggerParams = {

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

@@ -168,7 +168,7 @@ function popover(bond) {
         if (!bond.elements.trigger) {
             return;
         }
-        node.style.minWidth = bond.elements.trigger.clientWidth + 'px';
+        bond.elements.content.style.minWidth = bond.elements.trigger.clientWidth + 'px';
         const middleware = [];
         if (bond.elements.arrow) {
             middleware.push(arrow({ element: bond.elements.arrow }));

package/dist/components/popover/index.d.ts

@@ -1,3 +1,4 @@
 export * as Popover from './atoms';
 export { clickoutPopover, popover } from './attachments.svelte';
 export { PopoverBond, type PopoverDomElements, type PopoverParams, PopoverState, type PopoverStateProps, type TriggerParams } from './bond.svelte';
+export * from './types';

package/dist/components/popover/index.js

@@ -1,3 +1,4 @@
 export * as Popover from './atoms';
 export { clickoutPopover, popover } from './attachments.svelte';
 export { PopoverBond, PopoverState } from './bond.svelte';
+export * from './types';

package/dist/components/popover/popover-arrow.svelte

@@ -1,117 +1,111 @@
-<script module lang="ts">
-	export type PopoverArrowProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B>;
-</script>
-
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { animate as motion } from 'motion';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
-	import { PopoverBond } from './bond.svelte';
-
-	type Element = HTMLElementTagNameMap[E];
-
-	const bond = PopoverBond.get();
-
-	if (!bond) {
-		throw new Error('');
-	}
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = _animate,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: PopoverArrowProps<E, B> & HTMLAttributes<Element> = $props();
-
-	const position = $derived(bond.position);
-	const middlewareArrowData = $derived(position?.middlewareData?.arrow);
-	const isReady = $derived(!!middlewareArrowData);
-	const side = $derived(position?.placement?.split('-')[0] ?? 'top');
-
-	const arrowProps = $derived({
-		...bond.arrow(),
-		...restProps
-	});
-
-	// Rotation based on placement side
-	const rotation = $derived.by(() => {
-		switch (side) {
-			case 'top':
-				return 180;
-			case 'bottom':
-				return 0;
-			case 'left':
-				return 90;
-			case 'right':
-				return -90;
-			default:
-				return 0;
-		}
-	});
-
-	function _animate(node: HTMLElement) {
-		if (!middlewareArrowData) {
-			return;
-		}
-
-		const { x, y } = middlewareArrowData;
-
-		const isMainAxis = side === 'top' || side === 'bottom';
-
-		const crossAxisStyle = isMainAxis
-			? {
-					left: 0
-				}
-			: {
-					top: 0
-				};
-
-		motion(
-			node,
-			{
-				x: x ?? 0,
-				y: y ?? 0,
-				opacity: 1,
-				...crossAxisStyle
-			},
-			{ duration: 0 }
-		);
-	}
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="popover.arrow"
-	class={['text-border pointer-events-none absolute opacity-0', '$preset', klass]}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	style="{side}: 100%;"
-	{...arrowProps}
->
-	{#if children}
-		{@render children({ popover: bond })}
-	{:else}
-		<svg
-			width="12"
-			height="12"
-			viewBox="0 0 12 12"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-			style="transform: rotate({rotation}deg);"
-		>
-			<path d="M0 12L6 6L12 12H0Z" fill="currentColor" stroke="none" />
-		</svg>
-	{/if}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { animate as motion } from 'motion';
+	import { HtmlAtom, type Base } from '../atom';
+	import { PopoverBond } from './bond.svelte';
+	import type { PopoverArrowProps } from './types';
+
+	type Element = HTMLElementTagNameMap[E];
+
+	const bond = PopoverBond.get();
+
+	if (!bond) {
+		throw new Error('');
+	}
+
+	let {
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = _animate,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: PopoverArrowProps<E, B> & HTMLAttributes<Element> = $props();
+
+	const position = $derived(bond.position);
+	const middlewareArrowData = $derived(position?.middlewareData?.arrow);
+	const isReady = $derived(!!middlewareArrowData);
+	const side = $derived(position?.placement?.split('-')[0] ?? 'top');
+
+	const arrowProps = $derived({
+		...bond.arrow(),
+		...restProps
+	});
+
+	// Rotation based on placement side
+	const rotation = $derived.by(() => {
+		switch (side) {
+			case 'top':
+				return 180;
+			case 'bottom':
+				return 0;
+			case 'left':
+				return 90;
+			case 'right':
+				return -90;
+			default:
+				return 0;
+		}
+	});
+
+	function _animate(node: HTMLElement) {
+		if (!middlewareArrowData) {
+			return;
+		}
+
+		const { x, y } = middlewareArrowData;
+
+		const isMainAxis = side === 'top' || side === 'bottom';
+
+		const crossAxisStyle = isMainAxis
+			? {
+					left: 0
+				}
+			: {
+					top: 0
+				};
+
+		motion(
+			node,
+			{
+				x: x ?? 0,
+				y: y ?? 0,
+				opacity: 1,
+				...crossAxisStyle
+			},
+			{ duration: 0 }
+		);
+	}
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="popover.arrow"
+	class={['text-border border-border pointer-events-none absolute opacity-0', '$preset', klass]}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	style="{side}: 100%;"
+	{...arrowProps}
+>
+	{#if children}
+		{@render children({ popover: bond })}
+	{:else}
+		<svg
+			width="12"
+			height="12"
+			viewBox="0 0 12 12"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			style="transform: rotate({rotation}deg);"
+		>
+			<path d="M0 12L6 6L12 12H0Z" fill="currentColor" stroke="none" />
+		</svg>
+	{/if}
+</HtmlAtom>

package/dist/components/popover/popover-arrow.svelte.d.ts

@@ -1,25 +1,8 @@
-export type PopoverArrowProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B>;
 import type { HTMLAttributes } from 'svelte/elements';
-import { type HtmlAtomProps, type Base } from '../atom';
+import { type Base } from '../atom';
+import type { PopoverArrowProps } from './types';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
-    props: Record<string, unknown> & {
-        [key: string]: unknown;
-        class?: import("../..").ClassValue | import("../..").ClassValue[];
-        as?: (string & {}) | E | undefined;
-        global?: boolean;
-        initial?: import("..").NodeFunction<E> | undefined;
-        enter?: import("..").TransitionFunction<E> | undefined;
-        exit?: import("..").TransitionFunction<E> | undefined;
-        animate?: import("..").NodeFunction<E> | undefined;
-        onmount?: import("..").NodeFunction<E> | undefined;
-        ondestroy?: import("..").NodeFunction<E> | undefined;
-        children?: import("svelte").Snippet;
-    } & {
-        bond?: import("../..").Bond;
-        base?: B | undefined;
-        preset?: import("../..").ModuleName | (string & {});
-        variants?: import("../..").VariantDefinition<any> | ((bond: import("../..").Bond, variantProps: Record<string, any>) => Record<string, any>);
-    } & HTMLAttributes<HTMLElementTagNameMap[E]>;
+    props: PopoverArrowProps<E, B> & HTMLAttributes<HTMLElementTagNameMap[E]>;
     exports: {};
     bindings: "";
     slots: {};