@svelte-atoms/core 1.0.0-alpha.44 → 1.0.0-alpha.46

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

@@ -1,13 +1,13 @@
 <script lang="ts" generics="E extends HtmlElementTagName, B extends Base = Base">
-	import { PortalBond, PortalsBond, Teleport } from '../portal';
+	import { PortalBond, PortalsBond } from '../portal';
 	import { HtmlAtom, type Base } from '../atom';
 	import type { HtmlElementTagName } from '../element';
+	import { clickout } from '../../attachments';
 	import { PopoverBond } from './bond.svelte';
-	import { animatePopoverContent } from './motion';
-	import { ZLayer } from '../portal/zlayer.svelte';
+	import { animatePopoverContent } from './motion.svelte';
 	import type { PopoverContentProps } from './types';
 	import Floating from './strategies/floating.svelte';
-	import { clickout } from '../../attachments';
+	import PopoverOverlay from './popover-overlay.svelte';
 
 	const bond = PopoverBond.get();
 
@@ -15,18 +15,6 @@
 		throw new Error('<PopoverOverlay /> must be used within a <Popover />');
 	}
 
-	const positionStrategy = $derived(bond?.state.props.positionStrategy ?? 'absolute');
-
-	const parentLayer = (() => {
-		try {
-			return ZLayer.get();
-		} catch {
-			return undefined;
-		}
-	})();
-
-	const layer = new ZLayer('popover', () => parentLayer?.get() ?? 0).share();
-
 	const activePortalBond = $derived.by(() => {
 		const key = bond.state.props.portal;
 		if (key instanceof PortalBond) {
@@ -42,73 +30,21 @@
 
 	let {
 		class: klass = '',
+		overlay: Overlay = PopoverOverlay,
 		children = undefined,
-		animate = animatePopoverContent(),
 		onclickoutside = undefined,
+		fallback = {
+			animate: animatePopoverContent()
+		},
 		...restProps
 	}: PopoverContentProps<E, B> = $props();
 
-	const isOpen = $derived(bond.state.isOpen && !!bond.elements.trigger);
 	const portalId = $derived(activePortalBond?.id);
 
-	/**
-	 * Calculate the final position and opacity for the popover content
-	 */
-	function calculatePosition() {
-		const position = bond.state.position;
-
-		if (!position) {
-			return null;
-		}
-
-		const { placement, x = 0, y = 0, middlewareData } = position;
-		const offset = bond.state.props.offset;
-		const openState = +isOpen;
-
-		// Calculate direction multipliers based on placement
-		const directionY = placement?.startsWith('top') ? -1 : placement?.startsWith('bottom') ? 1 : 0;
-		const directionX = placement?.startsWith('left') ? -1 : placement?.startsWith('right') ? 1 : 0;
-
-		// Calculate arrow dimensions and delta
-		const arrowWidth = bond?.elements.arrow?.clientWidth ?? 0;
-		const arrowHeight = bond?.elements.arrow?.clientHeight ?? 0;
-		const arrowDelta = middlewareData?.arrow ? 1 : 0;
-
-		// Calculate final position with offset and arrow adjustment
-		const finalX = x + directionX * offset * openState + arrowDelta * directionX * arrowWidth;
-		const finalY = y + directionY * offset * openState + arrowDelta * directionY * arrowHeight;
-
-		return {
-			transform: `translate3d(${finalX}px, ${finalY}px, 1px)`,
-			opacity: openState.toString()
-		};
-	}
-
-	function containerInitial(this: typeof bond.state, node: HTMLElement) {
-		const styles = calculatePosition();
-
-		// Hide content until position is calculated to avoid ghosting
-		if (!styles) {
-			node.style.opacity = '0';
-			return;
-		}
-
-		node.style.transform = styles.transform;
-		node.style.opacity = styles.opacity;
-	}
-
-	function containerAnimate(this: typeof bond.state, node: HTMLElement) {
-		void bond.state.props.open; // Ensure reactivity to open state changes
-
-		const styles = calculatePosition();
-
-		if (!styles) {
-			return;
-		}
-
-		node.style.transform = styles.transform;
-		node.style.opacity = '1';
-	}
+	const contentProps = $derived({
+		...bond?.content().spread,
+		...restProps
+	});
 
 	function clickoutAttachement(node: HTMLElement) {
 		const cleanup = clickout((ev) => {
@@ -119,7 +55,7 @@
 
 			const trigger = bond.element('trigger');
 
-			if (trigger && (trigger.contains(ev.target as Node) || trigger === ev.target)) {
+			if (trigger instanceof Element && (trigger.contains(ev.target as Node) || trigger === ev.target)) {
 				return;
 			}
 
@@ -132,28 +68,19 @@
 
 <Floating />
 
-<Teleport
-	portal={portalId ?? 'root.l0'}
-	as="div"
-	class="top-0 left-0 h-min w-fit outline-none pointer-events-none"
-	style="z-index: {layer.get()}; position: {positionStrategy};"
-	initial={containerInitial?.bind(bond.state)}
-	animate={containerAnimate?.bind(bond.state)}
-	{...bond.content().spread}
->
+<Overlay portal={portalId ?? 'root.l0'} as="div">
 	<HtmlAtom
 		{@attach clickoutAttachement}
 		{bond}
+		{fallback}
 		preset="popover.content"
 		class={[
 			'popover-content bg-popover text-popover-foreground border-border rounded-md border p-2 opacity-0 shadow-lg outline-none',
-			// isOpen && 'pointer-events-auto',
 			'$preset',
 			klass
 		]}
-		animate={animate?.bind(bond.state)}
-		{...restProps}
+		{...contentProps}
 	>
 		{@render children?.({ popover: bond })}
 	</HtmlAtom>
-</Teleport>
+</Overlay>

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

@@ -0,0 +1,98 @@
+<script lang="ts">
+	import { Teleport, ZLayer } from "../portal";
+	import { PopoverBond } from "./bond.svelte";
+	import type { PopoverOverlayProps } from "./types";
+
+    const bond = PopoverBond.get();
+    const isOpen = $derived(bond?.state.isOpen ?? false);
+    const positionStrategy = $derived(bond?.state.props.positionStrategy ?? 'absolute');
+
+    const parentLayer = (() => {
+		try {
+			return ZLayer.get();
+		} catch {
+			return undefined;
+		}
+	})();
+
+	const layer = new ZLayer('popover', () => parentLayer?.get() ?? 0).share();
+
+    let { portal, children = undefined, ...restProps}: PopoverOverlayProps = $props();
+
+    const overlayProps = $derived({
+        ...bond?.overlay().spread,
+        ...restProps
+    });
+
+	/**
+	 * Calculate the final position and opacity for the popover content
+	 */
+	function calculatePosition() {
+		const position = bond.state.position;
+
+		if (!position) {
+			return null;
+		}
+
+		const { placement, x = 0, y = 0, middlewareData } = position;
+		const offset = bond.state.props.offset;
+		const openState = +isOpen;
+
+		// Calculate direction multipliers based on placement
+		const directionY = placement?.startsWith('top') ? -1 : placement?.startsWith('bottom') ? 1 : 0;
+		const directionX = placement?.startsWith('left') ? -1 : placement?.startsWith('right') ? 1 : 0;
+
+        const arrow = bond.element('arrow');
+		// Calculate arrow dimensions and delta
+		const arrowWidth = arrow?.clientWidth ?? 0;
+		const arrowHeight = arrow?.clientHeight ?? 0;
+		const arrowDelta = middlewareData?.arrow ? 1 : 0;
+
+		// Calculate final position with offset and arrow adjustment
+		const finalX = x + directionX * offset * openState + arrowDelta * directionX * arrowWidth;
+		const finalY = y + directionY * offset * openState + arrowDelta * directionY * arrowHeight;
+
+		return {
+			transform: `translate3d(${finalX}px, ${finalY}px, 1px)`,
+			opacity: openState.toString()
+		};
+	}
+
+	function initial(this: typeof bond.state, node: HTMLElement) {
+		const styles = calculatePosition();
+
+		// Hide content until position is calculated to avoid ghosting
+		if (!styles) {
+			node.style.opacity = '0';
+			return;
+		}
+
+		node.style.transform = styles.transform;
+		node.style.opacity = styles.opacity;
+	}
+
+	function animate(this: typeof bond.state, node: HTMLElement) {
+		void bond.state.props.open; // Ensure reactivity to open state changes
+
+		const styles = calculatePosition();
+
+		if (!styles) {
+			return;
+		}
+
+		node.style.transform = styles.transform;
+		node.style.opacity = '1';
+	}
+</script>
+
+<Teleport
+	{portal}
+	as="div"
+	class="top-0 left-0 h-min w-fit outline-none pointer-events-none"
+	style="z-index: {layer.get()}; position: {positionStrategy};"
+	initial={initial}
+	animate={animate}
+	{...overlayProps}
+>
+	{@render children?.({ popover: bond })}
+</Teleport>

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

@@ -0,0 +1,4 @@
+import type { PopoverOverlayProps } from "./types";
+declare const PopoverOverlay: import("svelte").Component<PopoverOverlayProps<"div", import("..").SnippetBase>, {}, "">;
+type PopoverOverlay = ReturnType<typeof PopoverOverlay>;
+export default PopoverOverlay;

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

@@ -14,6 +14,7 @@
 		as = 'button' as E,
 		preset = 'popover.trigger',
 		children = undefined,
+		onpointerenter = undefined,
 		...restProps
 	}: PopoverTriggerProps<E, B> = $props();
  
@@ -21,6 +22,13 @@
 		...bond.trigger().spread,
 		...restProps
 	});
+
+	function handlePointerEnter(event: PointerEvent) {
+		onpointerenter?.(event);
+		if(event.defaultPrevented) return;
+
+		bond.state.tracking = true;
+	}
 </script>
 
 <HtmlAtom
@@ -29,6 +37,7 @@
 	{preset}
 	class={['border-border flex w-fit cursor-pointer rounded-md p-2', '$preset', klass]}
 	type={as === 'button' ? 'button' : undefined}
+	onpointerenter={handlePointerEnter}
 	{...triggerProps}
 >
 	{@render children?.({ popover: bond })}

package/dist/components/popover/strategies/floating.svelte

@@ -13,12 +13,12 @@
 
 	const bond = PopoverBond.get();
 
-	const open = $derived(bond?.state.props.open);
+	const tracking = $derived(bond?.state.shouldTrackPosition ?? false);
 	const reference = $derived(bond?.element<BondVirtualElement>('virtual-trigger') ?? bond?.element<Element>('trigger'));
-	const content = $derived(bond?.element<HTMLElement>('content'));
+	const overlay = $derived(bond?.element<HTMLElement>('overlay'));
 
 	$effect.pre(() => {
-		if (!(reference) || !content || !open) return;
+		if (!reference || !overlay || !tracking) return;
 
 		// Use the existing positioning behavior
 		const cleanup = compute(bond)({}, autoUpdate);
@@ -33,7 +33,7 @@
 			const arrowElement = bond.element<HTMLElement>('arrow');
 
 			// Guard: ensure required elements exist
-			if (!reference || !content) {
+			if (!reference || !overlay) {
 				return;
 			}
 
@@ -69,7 +69,7 @@
 				// Double rAF ensures browser has completed layout + paint
 				await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
 
-				const position = await computePosition(reference, content, {
+				const position = await computePosition(reference, overlay, {
 					placement: placement ?? 'bottom',
 					middleware,
 					strategy: bond.state.props.positionStrategy
@@ -79,26 +79,26 @@
 				const x = Math.round((position.x ?? 0) * 100) / 100;
 				const y = Math.round((position.y ?? 0) * 100) / 100;
 
-				bond.state.position = {
+				bond.state.notifyComputed({
 					middlewareData: position.middlewareData,
 					placement: position.placement,
 					strategy: position.strategy,
 					x,
 					y
-				};
-				onchangeCallback?.(content, position);
+				});
+				onchangeCallback?.(overlay, position);
 
 				// Set minimum width to match trigger
 				if (reference && (reference instanceof Element)) {
 					requestAnimationFrame(() => {
-						content.style.minWidth = `${reference.clientWidth}px`;
+						overlay.style.minWidth = `${reference.clientWidth}px`;
 					});
 				}
 			};
 
 			// Use auto-update if provided, otherwise compute once
 			if (updater) {
-				return updater(reference, content, compute, {
+				return updater(reference, overlay, compute, {
 					ancestorScroll: false
 				});
 			}

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

@@ -1,10 +1,10 @@
-import type { Snippet } from 'svelte';
+import type { Component, Snippet } from 'svelte';
 import type { Placement } from '@floating-ui/dom';
 import type { Factory } from '../../types';
 import type { PopoverBond } from './bond.svelte';
 import type { Base, HtmlAtomProps } from '../atom';
 import type { HtmlElementTagName } from '../element';
-import type { PortalBond } from '../portal';
+import type { PortalBond, TeleportProps } from '../portal';
 export type PopoverChildren = Snippet<[{
     popover: PopoverBond;
 }]>;
@@ -26,7 +26,12 @@ export interface AnimateParams {
     yOffset: number;
     open: boolean;
 }
+export interface PopoverOverlayProps<E extends HtmlElementTagName = 'div', B extends Base = Base> extends TeleportProps<E, B, PopoverChildren> {
+    portal: string | PortalBond;
+    children?: PopoverChildren;
+}
 export interface PopoverContentProps<T extends HtmlElementTagName, B extends Base = Base> extends HtmlAtomProps<T, B, PopoverChildren> {
+    overlay?: Component<PopoverOverlayProps>;
     onclickoutside?: (ev: PointerEvent, atom: PopoverBond) => void;
 }
 export interface PopoverIndicatorProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, PopoverChildren> {

package/dist/components/portal/portal-inner.svelte

@@ -15,12 +15,6 @@
 	let {
 		class: klass = '',
 		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
 		...restProps
 	}: HtmlAtomProps<E, B> & HTMLAttributes<Element> = $props();
 
@@ -34,12 +28,6 @@
 	{bond}
 	preset="portal.inner"
 	class={['border-border relative size-full', '$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)}
 	{...bondProps}
 >
 	{@render children?.()}

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

@@ -17,12 +17,6 @@
 		id,
 		factory = _factory,
 		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
 		...restProps
 	}: PortalOuterProps<E, B> & HTMLAttributes<Element> = $props();
 
@@ -64,12 +58,6 @@
 	{bond}
 	preset="portal"
 	class={['border-border 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)}
 	{...rootProps}
 >
 	{@render children?.()}

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

@@ -16,6 +16,6 @@ export type PortalOuterProps<E extends keyof HTMLElementTagNameMap = 'div', B ex
     id: RootPortals | (string & {});
     children?: Snippet;
 };
-export type TeleportProps<E extends HtmlElementTagName = 'div', B extends Base = Base> = HtmlAtomProps<E, B, PortalChildren> & {
+export type TeleportProps<E extends HtmlElementTagName = 'div', B extends Base = Base, Children extends Snippet<unknown[]> = PortalChildren> = HtmlAtomProps<E, B, Children> & {
     portal?: string | PortalBond;
 };

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

@@ -0,0 +1,3 @@
+export { default as ProgressLinear } from './progress-linear.svelte';
+export { default as ProgressCircular } from './progress-circular.svelte';
+export * from './types';

package/dist/components/progress/index.js

@@ -0,0 +1,3 @@
+export { default as ProgressLinear } from './progress-linear.svelte';
+export { default as ProgressCircular } from './progress-circular.svelte';
+export * from './types';

package/dist/components/progress/progress-circular.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { HtmlAtom } from '../atom';
+	import type { ProgressCircularProps } from './types';
+	import { SvgElement } from '../element'
+
+	let {
+		class: klass = '',
+		value = null,
+		max = 100,
+		preset = 'progress.circular',
+		...restProps
+	}: ProgressCircularProps & HTMLAttributes<HTMLDivElement> = $props();
+
+	const isIndeterminate = $derived(value === null || value === undefined);
+	const percent = $derived(isIndeterminate ? null : Math.min(100, Math.max(0, (value! / max) * 100)));
+
+	const radius = 20;
+	const circumference = 2 * Math.PI * radius;
+	const strokeDashoffset = $derived(
+		isIndeterminate ? circumference : circumference - (percent! / 100) * circumference
+	);
+</script>
+
+{#snippet defaultCircularFill()}
+	<SvgElement
+		as="circle"
+		preset="progress.circular.fill"
+		cx="24"
+		cy="24"
+		r={radius}
+		fill="none"
+		stroke-width="4"
+		stroke-linecap="round"
+		stroke-dasharray={circumference}
+		stroke-dashoffset={strokeDashoffset}
+		class={[
+			'stroke-foreground origin-center duration-300',
+			!isIndeterminate && 'transition-[stroke-dashoffset]',
+			isIndeterminate && 'animate-progress-circular-indeterminate'
+		]
+			.filter(Boolean)
+			.join(' ')}
+	/>
+{/snippet}
+
+<HtmlAtom
+	{preset}
+	as="div"
+	class={[
+		'progress-root progress-root--circular relative inline-flex items-center justify-center',
+		'$preset',
+		klass
+	]}
+	role="progressbar"
+	aria-valuemin={0}
+	aria-valuemax={max}
+	aria-valuenow={isIndeterminate ? undefined : value ?? undefined}
+	aria-valuetext={isIndeterminate ? undefined : `${Math.round(percent!)}%`}
+	data-indeterminate={isIndeterminate}
+	data-value={isIndeterminate ? undefined : value ?? undefined}
+	data-max={max}
+	data-completed={!isIndeterminate && percent === 100}
+	{...restProps}
+>
+	<svg viewBox="0 0 48 48" class="h-full w-full -rotate-90" aria-hidden="true">
+		<SvgElement
+			as="circle"
+			preset="progress.circular.track"
+			cx="24"
+			cy="24"
+			r={radius}
+			fill="none"
+			stroke-width="4"
+			class="stroke-input"
+		/>
+		{@render defaultCircularFill()}
+	</svg>
+</HtmlAtom>
+
+<style>
+	@keyframes progress-circular-spin {
+		0% { transform: rotate(0deg); }
+		100% { transform: rotate(360deg); }
+	}
+
+	@keyframes progress-circular-dash {
+		0% { stroke-dashoffset: 119; }
+		50% { stroke-dashoffset: 30; }
+		100% { stroke-dashoffset: 119; }
+	}
+
+	:global(.animate-progress-circular-indeterminate) {
+		animation:
+			progress-circular-spin 1.4s linear infinite,
+			progress-circular-dash 1.4s ease-in-out infinite;
+		transform-origin: center;
+	}
+</style>

package/dist/components/progress/progress-circular.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ProgressCircularProps } from './types';
+type $$ComponentProps = ProgressCircularProps & HTMLAttributes<HTMLDivElement>;
+declare const ProgressCircular: import("svelte").Component<$$ComponentProps, {}, "">;
+type ProgressCircular = ReturnType<typeof ProgressCircular>;
+export default ProgressCircular;

package/dist/components/progress/progress-linear.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { HtmlAtom } from '../atom';
+	import type { ProgressLinearProps } from './types';
+	import { HtmlElement } from '../element';
+
+	let {
+		class: klass = '',
+		value = null,
+		max = 100,
+		preset = 'progress.linear',
+		...restProps
+	}: ProgressLinearProps & HTMLAttributes<HTMLDivElement> = $props();
+
+	const isIndeterminate = $derived(value === null || value === undefined);
+	const percent = $derived(isIndeterminate ? null : Math.min(100, Math.max(0, (value! / max) * 100)));
+</script>
+
+{#snippet defaultLinearFill({ percent: p }: { percent: number | null })}
+	<HtmlElement
+		preset="progress.linear.fill"
+		as="div"
+		class={[
+			'progress-fill bg-foreground h-full rounded-full transition-[width] duration-300',
+			isIndeterminate && 'animate-progress-indeterminate w-1/3',
+			'$preset'
+		]}
+		style={p !== null ? `width: ${p}%` : undefined}
+	/>
+{/snippet}
+
+<HtmlAtom
+	{preset}
+	as="div"
+	class={['progress-root flex flex-col gap-1', '$preset', klass]}
+	role="progressbar"
+	aria-valuemin={0}
+	aria-valuemax={max}
+	aria-valuenow={isIndeterminate ? undefined : value ?? undefined}
+	aria-valuetext={isIndeterminate ? undefined : `${Math.round(percent!)}%`}
+	data-indeterminate={isIndeterminate}
+	data-value={isIndeterminate ? undefined : value ?? undefined}
+	data-max={max}
+	data-completed={!isIndeterminate && percent === 100}
+	{...restProps}
+>
+	<HtmlElement
+		preset="progress.linear.track"
+		as="div"
+		class="progress-track bg-input border-none p-0.5 h-2 w-full overflow-hidden rounded-full border $preset"
+	>
+		{@render defaultLinearFill({ percent })}
+	</HtmlElement>
+</HtmlAtom>
+
+<style>
+	@keyframes progress-indeterminate {
+		0%   { transform: translateX(-100%); }
+		50%  { transform: translateX(300%); }
+		100% { transform: translateX(-100%); }
+	}
+
+	:global(.animate-progress-indeterminate) {
+		animation: progress-indeterminate 1.8s ease-in-out infinite;
+	}
+</style>

package/dist/components/progress/progress-linear.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ProgressLinearProps } from './types';
+type $$ComponentProps = ProgressLinearProps & HTMLAttributes<HTMLDivElement>;
+declare const ProgressLinear: import("svelte").Component<$$ComponentProps, {}, "">;
+type ProgressLinear = ReturnType<typeof ProgressLinear>;
+export default ProgressLinear;

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

@@ -0,0 +1,18 @@
+import type { HtmlAtomProps } from '../atom';
+interface ProgressSharedProps {
+    /**
+     * Current value (0–max). Set to `null` for indeterminate state.
+     * @default null
+     */
+    value?: number | null;
+    /**
+     * Maximum value
+     * @default 100
+     */
+    max?: number;
+}
+export interface ProgressLinearProps extends HtmlAtomProps<'div'>, ProgressSharedProps {
+}
+export interface ProgressCircularProps extends HtmlAtomProps<'div'>, ProgressSharedProps {
+}
+export {};

package/dist/components/progress/types.js

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

package/dist/components/scrollable/scrollable-container.svelte

@@ -12,12 +12,6 @@
 	let {
 		class: klass = '',
 		children,
-		onmount,
-		ondestroy,
-		animate,
-		enter,
-		exit,
-		initial,
 		...restProps
 	}: ScrollableContainerProps<E, B> = $props();
 
@@ -52,12 +46,6 @@
 		'$preset',
 		klass
 	]}
-	{enter}
-	{exit}
-	{initial}
-	{animate}
-	{onmount}
-	{ondestroy}
 	{...containerProps}
 >
 	{#if children}