@svelte-atoms/core 1.0.0-alpha.24 → 1.0.0-alpha.26

package/dist/components/checkbox/checkbox.svelte

@@ -1,21 +1,22 @@
 <script lang="ts">
+	import { circOut } from 'svelte/easing';
 	import type { HTMLInputAttributes } from 'svelte/elements';
 	import { scale } from 'svelte/transition';
-	import type { CheckboxProps } from './types';
 	import { Icon } from '../icon';
 	import { HtmlAtom } from '../atom';
 	import CheckmarkRegularIcon from '../../icons/icon-checkmark.svelte';
-	import './checkbox.css';
 	import { DURATION } from '../../shared';
-	import { circOut } from 'svelte/easing';
+	import type { CheckboxProps } from './types';
+	import './checkbox.css';
 
 	let {
 		class: klass = '',
 		checked = $bindable(false),
-		indeterminate = $bindable(),
+		indeterminate = $bindable(false),
 		value = $bindable(undefined),
 		group = $bindable([]),
 		id,
+		name,
 		checkedContent,
 		indeterminateContent,
 		enter,
@@ -31,29 +32,25 @@
 
 	let checkboxElement: HTMLInputElement | undefined = $state();
 
-	function handleChange(ev: Event) {
-		const checked = (ev.currentTarget as HTMLInputElement)?.checked ?? false;
+	// Computed state for visual representation
+	const isChecked = $derived(checked === true);
+	const isIndeterminate = $derived(indeterminate === true);
+	const showCheckmark = $derived(isChecked && !isIndeterminate);
 
+	function handleChange(ev: Event) {
 		onchange?.(ev, {
-			checked,
+			checked: checked,
 			value: checked,
 			type: 'boolean'
 		});
 	}
 
 	function handleInput(ev: Event) {
-		const currentTarget = ev.currentTarget as HTMLInputElement;
-		const _checked = currentTarget?.checked ?? false;
-
 		oninput?.(ev, {
-			checked: _checked,
-			value: _checked,
+			checked: checked,
+			value: checked,
 			type: 'boolean'
 		});
-
-		if (ev.defaultPrevented) {
-			return;
-		}
 	}
 
 	function handleClick(ev: MouseEvent) {
@@ -63,7 +60,18 @@
 			return;
 		}
 
-		checkboxElement?.click();
+		// Handle indeterminate → checked → unchecked cycle
+		if (indeterminate) {
+			// Indeterminate → checked
+			indeterminate = false;
+			checked = true;
+		} else {
+			// Toggle checked state
+			checked = !checked;
+		}
+
+		// Trigger input event manually if needed
+		handleInput(ev);
 	}
 </script>
 
@@ -71,15 +79,16 @@
 <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 <HtmlAtom
 	preset="checkbox"
-	as="button"
+	as="div"
 	class={[
-		'checkbox-root border-border outline-primary bg-foreground/5 aspect-square h-5 w-fit cursor-pointer rounded-sm border outline-0 outline-offset-2 transition-colors duration-100',
-		checked && 'bg-foreground',
-		!checked && '',
+		'checkbox-root border-border outline-primary bg-input text-foreground aspect-square h-5 w-fit cursor-pointer rounded-sm border outline-0 outline-offset-2 transition-colors duration-100',
+		isChecked && 'bg-foreground',
 		'$preset',
 		klass,
 		'relative'
 	]}
+	role="checkbox"
+	aria-checked={isIndeterminate ? 'mixed' : isChecked}
 	{enter}
 	{exit}
 	{initial}
@@ -87,6 +96,7 @@
 	{...restProps}
 >
 	<input
+		bind:this={checkboxElement}
 		bind:checked
 		bind:group
 		bind:indeterminate
@@ -94,34 +104,35 @@
 		class="checkbox-input pointer-events-none"
 		{value}
 		{id}
+		{name}
 		onchange={handleChange}
 		oninput={handleInput}
 		{onblur}
 		{onfocus}
 		hidden
-		{@attach (node) => {
-			checkboxElement = node;
-		}}
+		tabindex="-1"
 	/>
 
-	{#if indeterminate}
+	{#if isIndeterminate}
 		{#if indeterminateContent}
 			<HtmlAtom
 				preset="checkbox.indeterminate"
-				class={['checkbox-indeterminate flex size-full items-center justify-center p-1']}
+				class={[
+					'checkbox-indeterminate pointer-events-none flex size-full items-center justify-center p-1'
+				]}
 				base={indeterminateContent}
 			/>
 		{:else}
 			<HtmlAtom
 				preset="checkbox.indeterminate"
 				class={[
-					'checkbox-indeterminate text-foreground flex size-full items-center justify-center p-1'
+					'checkbox-indeterminate text-foreground pointer-events-none flex size-full items-center justify-center  p-1'
 				]}
 			>
 				<div class={['size-full rounded-xs bg-current']}></div>
 			</HtmlAtom>
 		{/if}
-	{:else if checked === true}
+	{:else if showCheckmark}
 		{#if checkedContent}
 			<HtmlAtom
 				preset="checkbox.checkmark"

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

@@ -2,6 +2,6 @@ import type { HTMLInputAttributes } from 'svelte/elements';
 import type { CheckboxProps } from './types';
 import './checkbox.css';
 type $$ComponentProps = CheckboxProps & Exclude<HTMLInputAttributes, 'type'>;
-declare const Checkbox: import("svelte").Component<$$ComponentProps, {}, "group" | "value" | "checked" | "indeterminate">;
+declare const Checkbox: import("svelte").Component<$$ComponentProps, {}, "value" | "group" | "checked" | "indeterminate">;
 type Checkbox = ReturnType<typeof Checkbox>;
 export default Checkbox;

package/dist/components/collapsible/collapsible-body.svelte

@@ -39,7 +39,7 @@
 <HtmlAtom
 	{bond}
 	preset="collapsible.body"
-	class={['$preset', klass]}
+	class={['border-border', '$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	animate={animate?.bind(bond.state)}

package/dist/components/collapsible/collapsible-header.svelte

@@ -39,7 +39,7 @@
 <HtmlAtom
 	{bond}
 	preset="collapsible.header"
-	class={['flex cursor-pointer items-center gap-2', '$preset', klass]}
+	class={['border-border flex cursor-pointer items-center gap-2', '$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	animate={animate?.bind(bond.state)}

package/dist/components/collapsible/collapsible-indicator.svelte

@@ -48,7 +48,7 @@
 <HtmlAtom
 	{bond}
 	preset="collapsible.indicator"
-	class={['flex size-4 items-center justify-center', '$preset', klass]}
+	class={['border-border flex size-4 items-center justify-center', '$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	animate={animate?.bind(bond.state)}

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

@@ -72,7 +72,7 @@
 <HtmlAtom
 	{bond}
 	preset="collapsible"
-	class={['flex w-full flex-col overflow-hidden', '$preset', klass]}
+	class={['border-border flex w-full flex-col overflow-hidden', '$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	animate={animate?.bind(bond.state)}

package/dist/components/combobox/atoms.d.ts

@@ -1,5 +1,9 @@
 export { default as Root } from './combobox-root.svelte';
 export { default as Trigger } from './combobox-trigger.svelte';
 export { default as Item } from './compobox-item.svelte';
-export { default as Input } from './combobox-input.svelte';
+/**
+ * @deprecated use Combobox.Control instead
+ */
+export { default as Input } from './combobox-control.svelte';
+export { default as Control } from './combobox-control.svelte';
 export { Arrow, Indicator, List } from '../dropdown/atoms';

package/dist/components/combobox/atoms.js

@@ -1,5 +1,9 @@
 export { default as Root } from './combobox-root.svelte';
 export { default as Trigger } from './combobox-trigger.svelte';
 export { default as Item } from './compobox-item.svelte';
-export { default as Input } from './combobox-input.svelte';
+/**
+ * @deprecated use Combobox.Control instead
+ */
+export { default as Input } from './combobox-control.svelte';
+export { default as Control } from './combobox-control.svelte';
 export { Arrow, Indicator, List } from '../dropdown/atoms';

package/dist/components/combobox/{combobox-input.svelte → combobox-control.svelte}

@@ -37,10 +37,10 @@
 	);
 </script>
 
-<Input.Value
+<Input.Control
 	{value}
-	preset="combobox.input"
-	class={['flex-1 py-1', '$preset', klass]}
+	preset="combobox.control"
+	class={['border-border flex-1 py-1', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}

package/dist/components/combobox/{combobox-input.svelte.d.ts → combobox-control.svelte.d.ts}

@@ -1,4 +1,4 @@
-declare const ComboboxInput: import("svelte").Component<{
+declare const ComboboxControl: import("svelte").Component<{
     class?: string;
     children?: any;
     onmount?: any;
@@ -8,5 +8,5 @@ declare const ComboboxInput: import("svelte").Component<{
     exit?: any;
     initial?: any;
 } & Record<string, any>, {}, "">;
-type ComboboxInput = ReturnType<typeof ComboboxInput>;
-export default ComboboxInput;
+type ComboboxControl = ReturnType<typeof ComboboxControl>;
+export default ComboboxControl;

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

@@ -18,7 +18,7 @@ declare function $$render<D>(): {
     exports: {
         getBond: () => ComboboxBond<D>;
     };
-    bindings: "values" | "text" | "value" | "open" | "query";
+    bindings: "values" | "value" | "text" | "open" | "query";
     slots: {};
     events: {};
 };
@@ -26,7 +26,7 @@ declare class __sveltets_Render<D> {
     props(): ReturnType<typeof $$render<D>>['props'];
     events(): ReturnType<typeof $$render<D>>['events'];
     slots(): ReturnType<typeof $$render<D>>['slots'];
-    bindings(): "values" | "text" | "value" | "open" | "query";
+    bindings(): "values" | "value" | "text" | "open" | "query";
     exports(): {
         getBond: () => ComboboxBond<D>;
     };

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

@@ -27,7 +27,7 @@
 	{as}
 	{bond}
 	preset="dropdown.trigger"
-	class={['h-8 w-40', '$preset', klass]}
+	class={['border-border h-8 w-40', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}

package/dist/components/combobox/compobox-item.svelte

@@ -55,7 +55,7 @@
 	}}
 	{bond}
 	preset="combobox.item"
-	class={['$preset', klass]}
+	class={['border-border', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}

package/dist/components/container/container.svelte

@@ -42,7 +42,7 @@
 		};
 	}}
 	preset="container"
-	class={['$preset', klass]}
+	class={['border-border', '$preset', klass]}
 	style={[containerTypeStype, containerNameStyle].filter(Boolean).join('; ')}
 	onmount={onmount?.bind(null)}
 	ondestroy={ondestroy?.bind(null)}

package/dist/components/datagrid/datagrid-body.svelte

@@ -31,7 +31,7 @@
 <HtmlAtom
 	{bond}
 	preset="datagrid.body"
-	class={['$preset', klass, 'contents']}
+	class={['border-border', '$preset', klass, 'contents']}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}

package/dist/components/datagrid/datagrid-footer.svelte

@@ -21,7 +21,7 @@
 <HtmlAtom
 	{bond}
 	preset="datagrid.footer"
-	class={['$preset', klass, 'contents']}
+	class={['border-border', '$preset', klass, 'contents']}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}

package/dist/components/datagrid/datagrid-header.svelte

@@ -36,7 +36,7 @@
 <HtmlAtom
 	{bond}
 	preset="datagrid.header"
-	class={['col-span-full grid grid-cols-subgrid', '$preset', klass]}
+	class={['border-border col-span-full grid grid-cols-subgrid', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}

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

@@ -45,7 +45,7 @@
 <HtmlAtom
 	{bond}
 	preset="datagrid"
-	class={['datagrid-root w-full gap-x-0 gap-y-0', '$preset', klass]}
+	class={['border-border', 'datagrid-root w-full gap-x-0 gap-y-0', '$preset', klass]}
 	style="--template-columns:{bond.state.template}"
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}

package/dist/components/datagrid/td/datagrid-td.svelte

@@ -65,7 +65,7 @@
 		}}
 		{bond}
 		preset="datagrid.td"
-		class={['flex h-full items-center py-2 text-left', '$preset', klass]}
+		class={['border-border flex h-full items-center py-2 text-left', '$preset', klass]}
 		enter={enter?.bind(bond.state)}
 		exit={exit?.bind(bond.state)}
 		initial={initial?.bind(bond.state)}

package/dist/components/datagrid/th/datagrid-th-sort-icon.svelte

@@ -34,7 +34,7 @@
 	<HtmlAtom
 		{bond}
 		preset="datagrid.sort-icon"
-		class={['$preset', klass]}
+		class={['border-border', '$preset', klass]}
 		enter={enter?.bind(bond.state)}
 		exit={exit?.bind(bond.state)}
 		initial={initial?.bind(bond.state)}

package/dist/components/datagrid/th/datagrid-th.svelte

@@ -107,7 +107,7 @@
 		{bond}
 		preset="datagrid.th"
 		class={[
-			'flex cursor-pointer py-1 font-medium select-none',
+			'border-border flex cursor-pointer py-1 font-medium select-none',
 			!!sortable && 'sortable',
 			'$preset',
 			klass

package/dist/components/dialog/dialog-body.svelte

@@ -32,7 +32,7 @@
 <HtmlAtom
 	{bond}
 	preset="dialog.body"
-	class={['px-4 py-2', '$preset', klass]}
+	class={['border-border px-4 py-2', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}

package/dist/components/dialog/dialog-close-button.svelte

@@ -41,7 +41,7 @@
 	{as}
 	{bond}
 	preset="dialog.close-button"
-	class={['cursor-pointer', '$preset', klass]}
+	class={['border-border cursor-pointer', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}

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

@@ -7,8 +7,9 @@
 
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import { animate as motion } from 'motion';
-	import { DialogBond } from './bond.svelte';
+	import { DURATION } from '../../shared';
 	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
+	import { DialogBond } from './bond.svelte';
 
 	const bond = DialogBond.get();
 
@@ -32,20 +33,16 @@
 	const open = $derived(bond?.state?.props?.open ?? false);
 
 	function _animate(node: HTMLElement) {
+		if (open) {
+			bond?.elements.root?.show?.();
+		}
+
 		motion(
 			node,
 			{ scale: 0.9 + 0.1 * +open, opacity: +open },
 			{
-				duration: 0.3,
-				ease: 'anticipate',
-				onComplete: () => {
-					if (!open) {
-						const root = bond?.elements.root;
-
-						root?.close?.();
-						console.log(root);
-					}
-				}
+				duration: DURATION.normal / 1000,
+				ease: 'anticipate'
 			}
 		);
 	}

package/dist/components/dialog/dialog-description.svelte

@@ -33,7 +33,7 @@
 <HtmlAtom
 	{as}
 	preset="dialog.description"
-	class={['$preset', klass]}
+	class={['border-border', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}

package/dist/components/dialog/dialog-footer.svelte

@@ -32,7 +32,7 @@
 <HtmlAtom
 	{bond}
 	preset="dialog.footer"
-	class={['flex px-4', '$preset', klass]}
+	class={['border-border', 'flex px-4', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}

package/dist/components/dialog/dialog-header.svelte

@@ -32,7 +32,7 @@
 <HtmlAtom
 	{bond}
 	preset="dialog.header"
-	class={['flex w-full px-4 text-xl', '$preset', klass]}
+	class={['border-border', 'flex w-full px-4 text-xl', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}