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

package/dist/components/input/input-number-control.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { HtmlAtom } from '../atom';
 	import { InputBond } from './bond.svelte';
 	import type { InputNumberControlProps } from './types';
 
@@ -8,7 +7,7 @@
 
 	let {
 		class: klass = '',
-		number = $bindable(),
+		number = $bindable(0),
 		min = undefined,
 		max = undefined,
 		step = 1,
@@ -16,8 +15,8 @@
 		disabled = false,
 		placeholder = undefined,
 		preset = 'input.number',
-		decrementContent = undefined,
-		incrementContent = undefined,
+		decrement = undefined,
+		increment = undefined,
 		onchange = undefined,
 		...restProps
 	}: InputNumberControlProps & HTMLAttributes<HTMLDivElement> = $props();
@@ -27,17 +26,17 @@
 	const canDecrement = $derived(!disabled && (min === undefined || numberValue - step >= min));
 	const canIncrement = $derived(!disabled && (max === undefined || numberValue + step <= max));
 
-	const decrementSnippet = $derived(showControls ? (decrementContent ?? defaultDecrement) : undefined);
-	const incrementSnippet = $derived(showControls ? (incrementContent ?? defaultIncrement) : undefined);
+	const decrementSnippet = $derived(showControls ? (decrement ?? defaultDecrement) : undefined);
+	const incrementSnippet = $derived(showControls ? (increment ?? defaultIncrement) : undefined);
 	
-	function decrement() {
+	function handleDecrement() {
 		if (!canDecrement) return;
 		number = parseFloat((number - step).toPrecision(10));
 		onchange?.(undefined, { number });
 		bond?.state?.props && (bond.state.props.value = number);
 	}
 
-	function increment() {
+	function handleIncrement() {
 		if (!canIncrement) return;
 		number = parseFloat((number + step).toPrecision(10));
 		onchange?.(undefined, { number });
@@ -57,13 +56,13 @@
 
 <!-- ─── Default part snippets ──────────────────────────────────────────── -->
 
-{#snippet defaultDecrement({ decrement: dec, disabled: dis }: { decrement: () => void; disabled: boolean })}
+{#snippet defaultDecrement({ action: dec, disabled: dis }: { action: () => void; disabled: boolean })}
 	<button
 		type="button"
 		onclick={dec}
 		disabled={dis}
 		aria-label="Decrement"
-		class="input-number-decrement text-foreground hover:bg-muted disabled:text-muted-foreground flex h-full w-8 shrink-0 cursor-pointer items-center justify-center transition-colors disabled:cursor-not-allowed"
+		class="input-number-decrement text-foreground hover:bg-muted disabled:text-muted-foreground flex h-full aspect-square shrink-0 cursor-pointer items-center justify-center transition-colors disabled:cursor-not-allowed"
 	>
 		<svg viewBox="0 0 16 16" fill="none" class="h-3 w-3" aria-hidden="true">
 			<path d="M3 8h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
@@ -71,13 +70,13 @@
 	</button>
 {/snippet}
 
-{#snippet defaultIncrement({ increment: inc, disabled: dis }: { increment: () => void; disabled: boolean })}
+{#snippet defaultIncrement({ action: inc, disabled: dis }: { action: () => void; disabled: boolean })}
 	<button
 		type="button"
 		onclick={inc}
 		disabled={dis}
 		aria-label="Increment"
-		class="input-number-increment text-foreground hover:bg-muted disabled:text-muted-foreground flex h-full w-8 shrink-0 cursor-pointer items-center justify-center transition-colors disabled:cursor-not-allowed"
+		class="input-number-increment text-foreground hover:bg-muted disabled:text-muted-foreground flex h-full aspect-square shrink-0 cursor-pointer items-center justify-center transition-colors disabled:cursor-not-allowed"
 	>
 		<svg viewBox="0 0 16 16" fill="none" class="h-3 w-3" aria-hidden="true">
 			<path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
@@ -87,28 +86,22 @@
 
 <!-- ─── Render ────────────────────────────────────────────────────────── -->
 
-<HtmlAtom
-	{preset}
-	as="div"
-	class={['input-number-root flex h-full w-full items-center', '$preset', klass]}
-	{...restProps}
->
-	{@render decrementSnippet?.({ decrement, disabled: !canDecrement })}
+{@render decrementSnippet?.({ action: handleDecrement, disabled: !canDecrement })}
 
-	<input
-		type="number"
-		bind:value={number}
-		{min}
-		{max}
-		{step}
-		{disabled}
-		{placeholder}
-		oninput={handleInput}
-		class="input-number-field text-foreground placeholder:text-muted-foreground h-full w-full flex-1 bg-transparent text-center text-sm outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
-		aria-valuemin={min}
-		aria-valuemax={max}
-		aria-valuenow={number}
-	/>
+<input
+	type="number"
+	bind:value={number}
+	{min}
+	{max}
+	{step}
+	{disabled}
+	{placeholder}
+	oninput={handleInput}
+	class={["input-number-field text-foreground placeholder:text-muted-foreground h-full w-full flex-1 bg-transparent text-center text-sm outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", '$preset', klass]}
+	aria-valuemin={min}
+	aria-valuemax={max}
+	aria-valuenow={number}
+	{...restProps}
+/>
 
-	{@render incrementSnippet?.({ increment, disabled: !canIncrement })}
-</HtmlAtom>
+{@render incrementSnippet?.({ action: handleIncrement, disabled: !canIncrement })}

package/dist/components/input/input-text-control.svelte

@@ -11,7 +11,6 @@
 
 	let {
 		value = $bindable(),
-		type = 'text',
 		class: klass = '',
 		placeholder = '',
 		disabled = false,
@@ -31,8 +30,14 @@
 	function handleInput(ev: Event) {
 		const input = ev.currentTarget as HTMLInputElement;
 		value = input.value;
-		if (bond) bond.state.props.value = value;
+
 		oninput?.(ev, { value });
+
+		if(ev.defaultPrevented) {
+			return;
+		}
+
+		if (bond) bond.state.props.value = value;
 	}
 </script>
 
@@ -44,7 +49,7 @@
 			if (bond) bond.state.props.value = v;
 		}
 	}
-	type={type}
+	type='text'
 	{placeholder}
 	{disabled}
 	{readonly}

package/dist/components/input/input-url-control.svelte

@@ -12,7 +12,7 @@
 	let {
 		class: klass = '',
 		value = $bindable(),
-		placeholder = 'example.com/path',
+		placeholder = '',
 		disabled = false,
 		readonly = false,
 		preset: presetKey = 'input.url',
@@ -186,7 +186,7 @@
 		<!-- Offset to match input scroll position -->
 		<span style="transform: translateX(-{scrollLeft}px)">
 			{#if segments.length}
-				{#each segments as seg}
+				{#each segments as seg (seg)}
 					<span style={kindStyle[seg.kind]}>{seg.text}</span>
 				{/each}
 			{:else}

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

@@ -50,13 +50,13 @@ export interface InputNumberControlProps {
     placeholder?: string;
     showControls?: boolean;
     /** Custom decrement button snippet */
-    decrementContent?: Snippet<[{
-        decrement: () => void;
+    decrement?: Snippet<[{
+        action: () => void;
         disabled: boolean;
     }]>;
     /** Custom increment button snippet */
-    incrementContent?: Snippet<[{
-        increment: () => void;
+    increment?: Snippet<[{
+        action: () => void;
         disabled: boolean;
     }]>;
     onchange?: (ev?: Event, options?: {

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

@@ -0,0 +1,3 @@
+export { default as Kbd } from './kbd.svelte';
+export { default as Shortcut } from './shortcut.svelte';
+export * from './types';

package/dist/components/kbd/index.js

@@ -0,0 +1,3 @@
+export { default as Kbd } from './kbd.svelte';
+export { default as Shortcut } from './shortcut.svelte';
+export * from './types';

package/dist/components/kbd/kbd.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { HtmlAtom } from '../atom';
+	import type { KbdProps } from './types';
+
+	let { class: klass = '', children, ...restProps }: KbdProps = $props();
+</script>
+
+<HtmlAtom
+	preset="kbd"
+	as="kbd"
+	class={[
+		'kbd border-border bg-muted text-foreground inline-flex items-center justify-center rounded-md border px-1.5 py-0.5 font-mono text-xs font-medium shadow-[inset_0_-1px_0] shadow-black/10',
+		'$preset',
+		klass
+	]}
+	{...restProps}
+>
+	{@render children?.()}
+</HtmlAtom>

package/dist/components/kbd/kbd.svelte.d.ts

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

package/dist/components/kbd/shortcut.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { HtmlAtom } from '../atom';
+	import Kbd from './kbd.svelte';
+	import type { ShortcutProps } from './types';
+
+	let {
+		class: klass = '',
+		keys = [],
+		separator = '+',
+		children,
+		...restProps
+	}: ShortcutProps = $props();
+
+	let content = $derived(children ?? defaultChildren)
+</script>
+
+{#snippet separatorContent()}
+	<span class="text-muted-foreground text-xs">{separator}</span>
+{/snippet}
+
+{#snippet defaultChildren()}
+	{#each keys as key, i ( key )}
+		{@const content = i > 0 ? separatorContent : null}
+	
+		{@render content?.()}
+		<Kbd>{key}</Kbd>
+	{/each}
+{/snippet}
+
+<HtmlAtom
+	preset="shortcut"
+	as="span"
+	class={['shortcut inline-flex items-center gap-1', '$preset', klass]}
+	aria-label={keys.join(' ' + separator + ' ')}
+	{...restProps}
+>
+	{@render content()}
+</HtmlAtom>

package/dist/components/kbd/shortcut.svelte.d.ts

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

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

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+import type { HtmlAtomProps } from '../atom';
+export interface KbdExtendProps {
+}
+export interface ShortcutExtendProps {
+}
+export interface KbdProps extends HtmlAtomProps<'kbd'>, KbdExtendProps {
+    children?: Snippet<[]>;
+}
+export interface ShortcutProps extends HtmlAtomProps<'span'>, ShortcutExtendProps {
+    /**
+     * Array of keys to render in sequence, e.g. ['⌘', 'K'] or ['Ctrl', 'Shift', 'P']
+     */
+    keys?: string[];
+    /**
+     * Separator between keys — default '+'
+     */
+    separator?: string;
+    children?: Snippet<[]>;
+}

package/dist/components/kbd/types.js

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

package/dist/components/layer/layer-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();
 
@@ -33,12 +27,6 @@
 <HtmlAtom
 	preset="layer.inner"
 	class={['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)}
 	{...innerProps}
 >
 	{@render children?.()}

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

@@ -18,12 +18,6 @@
 		class: klass = '',
 		factory = _factory,
 		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
 		...restProps
 	}: HtmlAtomProps<E, B> & HTMLAttributes<Element> = $props();
 
@@ -53,12 +47,6 @@
 <HtmlAtom
 	preset="layer"
 	class={['pointer-events-none absolute inset-0', '$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/menu/menu-content.svelte

@@ -12,12 +12,6 @@
 		base = Root as B,
 		preset = 'menu.content',
 		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
 		...restProps
 	} = $props();
 </script>
@@ -28,12 +22,6 @@
 	{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?.()}

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

@@ -6,12 +6,6 @@ declare function $$render<T extends keyof HTMLElementTagNameMap = 'div', B exten
         base?: B;
         preset?: string;
         children?: any;
-        onmount?: any;
-        ondestroy?: any;
-        animate?: any;
-        enter?: any;
-        exit?: any;
-        initial?: any;
     } & Record<string, any>;
     exports: {};
     bindings: "";

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

@@ -39,6 +39,7 @@ export type TriggerParams = {
 export type PopoverDomElements = {
     trigger: HTMLElement;
     'virtual-trigger'?: BondVirtualElement;
+    overlay: HTMLElement;
     content: HTMLElement;
     indicator: HTMLElement;
     arrow: HTMLElement;
@@ -51,6 +52,8 @@ export declare class PopoverBond<Props extends PopoverStateProps = PopoverStateP
     /** Handle for granular access to the virtual trigger reference */
     virtualTrigger(): PopoverVirtualTriggerAtom;
     /** Handle for granular access to content attrs, handlers, and attachment */
+    overlay(): PopoverOverlayAtom;
+    /** Handle for granular access to content attrs, handlers, and attachment */
     content(): PopoverContentAtom;
     /** Handle for granular access to arrow attrs and attachment */
     arrow(): PopoverArrowAtom;
@@ -61,8 +64,25 @@ export declare class PopoverBond<Props extends PopoverStateProps = PopoverStateP
     static set(bond: PopoverBond): PopoverBond<PopoverStateProps, PopoverState<PopoverStateProps>, PopoverDomElements>;
 }
 export declare class PopoverState<Props extends PopoverStateProps = PopoverStateProps> extends BondState<Props> {
+    #private;
     position: ComputePositionReturn | undefined;
+    /**
+     * Controls whether the positioning strategy should actively compute the
+     * popover position. Defaults to `open` when unset, but can be toggled
+     * independently to keep computing while the content is hiding, or to
+     * start computing on hover before the popover is opened.
+     */
+    tracking: boolean | undefined;
+    /**
+     * A promise that resolves with the next position computation. The promise
+     * is renewed after each resolution, so consumers can `await bond.state.computed`
+     * repeatedly to wait for subsequent computations.
+     */
+    computed: Promise<ComputePositionReturn>;
     constructor(props: () => Props);
+    /** Notify awaiters of a fresh computation and renew the promise. */
+    notifyComputed(position: ComputePositionReturn): void;
+    get shouldTrackPosition(): boolean;
     get isOpen(): boolean;
     open(): void;
     close(): void;
@@ -84,7 +104,7 @@ export declare class PopoverVirtualTriggerAtom extends BondAtom<PopoverBond, Bon
     get element(): BondVirtualElement | undefined;
     set element(element: BondVirtualElement | undefined);
 }
-export declare class PopoverContentAtom extends BondAtom<PopoverBond, HTMLElement> {
+export declare class PopoverOverlayAtom extends BondAtom<PopoverBond, HTMLElement> {
     constructor(bond: PopoverBond);
     get attrs(): {
         role: string;
@@ -99,6 +119,14 @@ export declare class PopoverContentAtom extends BondAtom<PopoverBond, HTMLElemen
     };
     onmount(node: HTMLElement): void;
 }
+export declare class PopoverContentAtom extends BondAtom<PopoverBond, HTMLElement> {
+    constructor(bond: PopoverBond);
+    get attrs(): {
+        'data-active': boolean;
+    };
+    get handlers(): {};
+    onmount(_node: HTMLElement): void;
+}
 export declare class PopoverIndicatorAtom extends BondAtom<PopoverBond, HTMLElement> {
     constructor(bond: PopoverBond);
     get attrs(): {

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

@@ -17,6 +17,10 @@ export class PopoverBond extends Bond {
         return this.atom('virtual-trigger', () => new PopoverVirtualTriggerAtom(this));
     }
     /** Handle for granular access to content attrs, handlers, and attachment */
+    overlay() {
+        return this.atom('overlay', () => new PopoverOverlayAtom(this));
+    }
+    /** Handle for granular access to content attrs, handlers, and attachment */
     content() {
         return this.atom('content', () => new PopoverContentAtom(this));
     }
@@ -40,9 +44,37 @@ export class PopoverBond extends Bond {
 }
 export class PopoverState extends BondState {
     position = $state();
+    /**
+     * Controls whether the positioning strategy should actively compute the
+     * popover position. Defaults to `open` when unset, but can be toggled
+     * independently to keep computing while the content is hiding, or to
+     * start computing on hover before the popover is opened.
+     */
+    tracking = $state(undefined);
+    #computedResolve;
+    /**
+     * A promise that resolves with the next position computation. The promise
+     * is renewed after each resolution, so consumers can `await bond.state.computed`
+     * repeatedly to wait for subsequent computations.
+     */
+    computed = this.#createComputed();
     constructor(props) {
         super(props);
     }
+    #createComputed() {
+        return new Promise((resolve) => {
+            this.#computedResolve = resolve;
+        });
+    }
+    /** Notify awaiters of a fresh computation and renew the promise. */
+    notifyComputed(position) {
+        this.position = position;
+        this.#computedResolve(position);
+        this.computed = this.#createComputed();
+    }
+    get shouldTrackPosition() {
+        return this.tracking ?? this.isOpen;
+    }
     get isOpen() {
         return this.props.open ?? false;
     }
@@ -91,9 +123,9 @@ export class PopoverVirtualTriggerAtom extends BondAtom {
         this.setElement(element);
     }
 }
-export class PopoverContentAtom extends BondAtom {
+export class PopoverOverlayAtom extends BondAtom {
     constructor(bond) {
-        super(bond, 'content');
+        super(bond, 'overlay');
     }
     get attrs() {
         const triggerId = getElementId(this.bond.id, `${this.bond.name}-trigger`);
@@ -140,6 +172,27 @@ export class PopoverContentAtom extends BondAtom {
         }
     }
 }
+export class PopoverContentAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'content');
+    }
+    get attrs() {
+        const isOpen = this.bond.state?.props?.open ?? false;
+        const isDisabled = this.bond.state?.props?.disabled ?? false;
+        const isActive = isOpen && !isDisabled;
+        return {
+            ...super.attrs,
+            'data-active': isActive
+        };
+    }
+    get handlers() {
+        return {};
+    }
+    onmount(_node) {
+        void _node;
+        return;
+    }
+}
 export class PopoverIndicatorAtom extends BondAtom {
     constructor(bond) {
         super(bond, 'indicator');

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

@@ -1,6 +1,7 @@
 export * as Popover from './atoms';
 export { clickoutPopover, popover } from './attachments.svelte';
 export { PopoverBond, type PopoverDomElements, type PopoverParams, PopoverState, type PopoverStateProps, type TriggerParams, PopoverTriggerAtom, PopoverContentAtom, PopoverArrowAtom, PopoverIndicatorAtom, PopoverVirtualTriggerAtom } from './bond.svelte';
+export * from './motion.svelte';
 export * from './types';
 export * from './strategy-types';
 export * as PopoverStrategies from './strategies';

package/dist/components/popover/index.js

@@ -1,6 +1,7 @@
 export * as Popover from './atoms';
 export { clickoutPopover, popover } from './attachments.svelte';
 export { PopoverBond, PopoverState, PopoverTriggerAtom, PopoverContentAtom, PopoverArrowAtom, PopoverIndicatorAtom, PopoverVirtualTriggerAtom } from './bond.svelte';
+export * from './motion.svelte';
 export * from './types';
 export * from './strategy-types';
 export * as PopoverStrategies from './strategies';

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

@@ -13,7 +13,9 @@
 	let {
 		class: klass = '',
 		children = undefined,
-		animate = _animate,
+		fallback = {
+			animate: _animate
+		},
 		...restProps
 	}: PopoverArrowProps<E, B> = $props();
 
@@ -74,9 +76,9 @@
 
 <HtmlAtom
 	{bond}
+	{fallback}
 	preset="popover.arrow"
 	class={['text-border border-border pointer-events-none absolute opacity-0', '$preset', klass]}
-	animate={animate?.bind(bond.state)}
 	style="{side}: 100%;"
 	{...arrowProps}
 >