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

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

@@ -1,23 +1,23 @@
-.scrollable-container {
-    scrollbar-width: none;
-    /* Firefox */
-    -ms-overflow-style: none;
-    /* Internet Explorer 10+ */
-}
-
-.scrollable-container::-webkit-scrollbar {
-    display: none;
-    /* WebKit */
-}
-
-.scrollable-container[data-hide-scrollbar='true'] {
-    --scrollbar-width: 0px;
-}
-
-.scrollable-container[data-hide-scrollbar='false'] {
-    --scrollbar-width: 16px;
-    /* margin-right: calc(-1 * var(--scrollbar-width, 16px));
-	margin-bottom: calc(-1 * var(--scrollbar-width, 16px));
-	padding-right: var(--scrollbar-width, 16px);
-	padding-bottom: var(--scrollbar-width, 16px); */
+.scrollable-container {
+    scrollbar-width: none;
+    /* Firefox */
+    -ms-overflow-style: none;
+    /* Internet Explorer 10+ */
+}
+
+.scrollable-container::-webkit-scrollbar {
+    display: none;
+    /* WebKit */
+}
+
+.scrollable-container[data-hide-scrollbar='true'] {
+    --scrollbar-width: 0px;
+}
+
+.scrollable-container[data-hide-scrollbar='false'] {
+    --scrollbar-width: 16px;
+    /* margin-right: calc(-1 * var(--scrollbar-width, 16px));
+	margin-bottom: calc(-1 * var(--scrollbar-width, 16px));
+	padding-right: var(--scrollbar-width, 16px);
+	padding-bottom: var(--scrollbar-width, 16px); */
 }

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

@@ -1,61 +1,54 @@
-<script module lang="ts">
-	export type { ScrollableContainerProps } from './types';
-</script>
-
-<script lang="ts" generics="T extends keyof HTMLElementTagNameMap">
-	import type { ScrollableContainerProps } from './types';
-	import { ScrollableBond } from './bond.svelte';
-	import { resizeObserver } from '../../attachments/resize-observer.svelte';
-	import { HtmlAtom } from '../atom';
-	import './scrollable-container.css';
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: ScrollableContainerProps<T> = $props();
-
-	const bond = ScrollableBond.get();
-
-	if (!bond) {
-		throw new Error('ScrollableContainer must be used within a ScrollableRoot');
-	}
-</script>
-
-<HtmlAtom
-	{@attach (node) => {
-		if (!bond) return;
-
-		return resizeObserver(() => {
-			bond.state.props.clientWidth = node.clientWidth;
-			bond.state.props.clientHeight = node.clientHeight;
-			bond.state.props.scrollWidth = node.scrollWidth;
-			bond.state.props.scrollHeight = node.scrollHeight;
-		})(node);
-	}}
-	{bond}
-	preset="scrollable.container"
-	class={[
-		'scrollable-container border-border h-full max-h-full w-full overflow-auto',
-		'$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)}
-	{...bond.container()}
-	{...restProps}
->
-	{#if children}
-		{@render children()}
-	{/if}
-</HtmlAtom>
+<script module lang="ts">
+	export type { ScrollableContainerProps } from './types';
+</script>
+
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends import('./bond.svelte').ScrollableBond = import('./bond.svelte').ScrollableBond">
+	import type { ScrollableContainerProps } from './types';
+	import { ScrollableBond } from './bond.svelte';
+	import { resizeObserver } from '../../attachments/resize-observer.svelte';
+	import { HtmlAtom } from '../atom';
+	import './scrollable-container.css';
+
+	let {
+		class: klass = '',
+		children,
+		...restProps
+	}: ScrollableContainerProps<E, B> = $props();
+
+	const bond = ScrollableBond.get();
+
+	if (!bond) {
+		throw new Error('ScrollableContainer must be used within a ScrollableRoot');
+	}
+
+	const containerProps = $derived({
+		...bond.container().spread,
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{@attach (node) => {
+		if (!bond) return;
+
+		return resizeObserver(() => {
+			bond.state.props.clientWidth = node.clientWidth;
+			bond.state.props.clientHeight = node.clientHeight;
+			bond.state.props.scrollWidth = node.scrollWidth;
+			bond.state.props.scrollHeight = node.scrollHeight;
+		})(node);
+	}}
+	{bond}
+	as="div"
+	preset="scrollable.container"
+	class={[
+		'scrollable-container border-border h-full max-h-full w-full overflow-auto',
+		'$preset',
+		klass
+	]}
+	{...containerProps}
+>
+	{#if children}
+		{@render children()}
+	{/if}
+</HtmlAtom>

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

@@ -1,27 +1,27 @@
 export type { ScrollableContainerProps } from './types';
 import type { ScrollableContainerProps } from './types';
 import './scrollable-container.css';
-declare function $$render<T extends keyof HTMLElementTagNameMap>(): {
-    props: ScrollableContainerProps<T>;
+declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends import('./bond.svelte').ScrollableBond = import('./bond.svelte').ScrollableBond>(): {
+    props: ScrollableContainerProps<E, B>;
     exports: {};
     bindings: "";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<T extends keyof HTMLElementTagNameMap> {
-    props(): ReturnType<typeof $$render<T>>['props'];
-    events(): ReturnType<typeof $$render<T>>['events'];
-    slots(): ReturnType<typeof $$render<T>>['slots'];
+declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'div', B extends import('./bond.svelte').ScrollableBond = import('./bond.svelte').ScrollableBond> {
+    props(): ReturnType<typeof $$render<E, B>>['props'];
+    events(): ReturnType<typeof $$render<E, B>>['events'];
+    slots(): ReturnType<typeof $$render<E, B>>['slots'];
     bindings(): "";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <T extends keyof HTMLElementTagNameMap>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
-    } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T extends keyof HTMLElementTagNameMap>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+    new <E extends keyof HTMLElementTagNameMap = 'div', B extends import('./bond.svelte').ScrollableBond = import('./bond.svelte').ScrollableBond>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<E, B>['props']>, ReturnType<__sveltets_Render<E, B>['events']>, ReturnType<__sveltets_Render<E, B>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<E, B>['bindings']>;
+    } & ReturnType<__sveltets_Render<E, B>['exports']>;
+    <E extends keyof HTMLElementTagNameMap = 'div', B extends import('./bond.svelte').ScrollableBond = import('./bond.svelte').ScrollableBond>(internal: unknown, props: ReturnType<__sveltets_Render<E, B>['props']> & {}): ReturnType<__sveltets_Render<E, B>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 declare const ScrollableContainer: $$IsomorphicComponent;
-type ScrollableContainer<T extends keyof HTMLElementTagNameMap> = InstanceType<typeof ScrollableContainer<T>>;
+type ScrollableContainer<E extends keyof HTMLElementTagNameMap = 'div', B extends import('./bond.svelte').ScrollableBond = import('./bond.svelte').ScrollableBond> = InstanceType<typeof ScrollableContainer<E, B>>;
 export default ScrollableContainer;

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

@@ -1,4 +1,4 @@
-<script lang="ts" generics="T extends keyof HTMLElementTagNameMap">
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends import('./bond.svelte').ScrollableBond = import('./bond.svelte').ScrollableBond">
 	import type { ScrollableContentProps } from './types';
 	import { ScrollableBond } from './bond.svelte';
 	import { HtmlAtom } from '../atom';
@@ -7,33 +7,26 @@
 
 	let {
 		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
+		children,
 		...restProps
-	}: ScrollableContentProps<T> = $props();
+	}: ScrollableContentProps<E, B> = $props();
 
 	if (!bond) {
 		throw new Error('ScrollableContent must be used within a ScrollableRoot');
 	}
+
+	const contentProps = $derived({
+		...bond.content().spread,
+		...restProps
+	});
 </script>
 
 <HtmlAtom
 	{bond}
+	as="div"
 	preset="scrollable.content"
 	class={['scrollable-content border-border h-full max-h-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)}
-	{...bond.content()}
-	{...restProps}
+	{...contentProps}
 >
 	{#if children}
 		{@render children()}

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

@@ -1,25 +1,25 @@
 import type { ScrollableContentProps } from './types';
-declare function $$render<T extends keyof HTMLElementTagNameMap>(): {
-    props: ScrollableContentProps<T>;
+declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends import('./bond.svelte').ScrollableBond = import('./bond.svelte').ScrollableBond>(): {
+    props: ScrollableContentProps<E, B>;
     exports: {};
     bindings: "";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<T extends keyof HTMLElementTagNameMap> {
-    props(): ReturnType<typeof $$render<T>>['props'];
-    events(): ReturnType<typeof $$render<T>>['events'];
-    slots(): ReturnType<typeof $$render<T>>['slots'];
+declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'div', B extends import('./bond.svelte').ScrollableBond = import('./bond.svelte').ScrollableBond> {
+    props(): ReturnType<typeof $$render<E, B>>['props'];
+    events(): ReturnType<typeof $$render<E, B>>['events'];
+    slots(): ReturnType<typeof $$render<E, B>>['slots'];
     bindings(): "";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <T extends keyof HTMLElementTagNameMap>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
-    } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T extends keyof HTMLElementTagNameMap>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+    new <E extends keyof HTMLElementTagNameMap = 'div', B extends import('./bond.svelte').ScrollableBond = import('./bond.svelte').ScrollableBond>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<E, B>['props']>, ReturnType<__sveltets_Render<E, B>['events']>, ReturnType<__sveltets_Render<E, B>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<E, B>['bindings']>;
+    } & ReturnType<__sveltets_Render<E, B>['exports']>;
+    <E extends keyof HTMLElementTagNameMap = 'div', B extends import('./bond.svelte').ScrollableBond = import('./bond.svelte').ScrollableBond>(internal: unknown, props: ReturnType<__sveltets_Render<E, B>['props']> & {}): ReturnType<__sveltets_Render<E, B>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 declare const ScrollableContent: $$IsomorphicComponent;
-type ScrollableContent<T extends keyof HTMLElementTagNameMap> = InstanceType<typeof ScrollableContent<T>>;
+type ScrollableContent<E extends keyof HTMLElementTagNameMap = 'div', B extends import('./bond.svelte').ScrollableBond = import('./bond.svelte').ScrollableBond> = InstanceType<typeof ScrollableContent<E, B>>;
 export default ScrollableContent;

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

@@ -1,101 +1,94 @@
-<script lang="ts" generics="T extends keyof HTMLElementTagNameMap">
-	import { defineProperty, defineState } from '../../utils';
-	import { HtmlAtom } from '../atom';
-	import { ScrollableBond, ScrollableState, type ScrollableStateProps } from './bond.svelte';
-	import type { ScrollableRootProps } from './types';
-	let {
-		scrollX = $bindable(0),
-		scrollY = $bindable(0),
-		scrollWidth = $bindable(0),
-		scrollHeight = $bindable(0),
-		clientWidth = $bindable(0),
-		clientHeight = $bindable(0),
-		class: klass = '',
-		disabled = false,
-		open = true,
-		factory = _factory,
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: ScrollableRootProps<T> = $props();
-
-	let isScrolling = $state(false);
-
-	const bondProps = defineState<ScrollableStateProps>([
-		defineProperty(
-			'scrollX',
-			() => scrollX,
-			(v) => (scrollX = v)
-		),
-		defineProperty(
-			'scrollY',
-			() => scrollY,
-			(v) => (scrollY = v)
-		),
-		defineProperty(
-			'scrollWidth',
-			() => scrollWidth,
-			(v) => (scrollWidth = v)
-		),
-		defineProperty(
-			'scrollHeight',
-			() => scrollHeight,
-			(v) => (scrollHeight = v)
-		),
-		defineProperty(
-			'clientWidth',
-			() => clientWidth,
-			(v) => (clientWidth = v)
-		),
-		defineProperty(
-			'clientHeight',
-			() => clientHeight,
-			(v) => (clientHeight = v)
-		),
-		defineProperty('disabled', () => disabled),
-		defineProperty(
-			'open',
-			() => open,
-			(v) => (open = v)
-		),
-		defineProperty(
-			'isScrolling',
-			() => isScrolling,
-			(v) => (isScrolling = v)
-		),
-		defineProperty('rest', () => restProps)
-	]);
-
-	const bond = factory(bondProps).share();
-
-	const rootProps = $derived({ ...bond.root(), ...restProps });
-
-	function _factory(props: typeof bondProps) {
-		const scrollableState = new ScrollableState(() => props);
-		return new ScrollableBond(scrollableState).share();
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="scrollable"
-	class={['scrollable-root border-border relative box-content overflow-hidden', '$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?.({ scrollable: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends import('./bond.svelte').ScrollableBond = import('./bond.svelte').ScrollableBond">
+	import { defineProperty, defineState } from '../../utils';
+	import { HtmlAtom } from '../atom';
+	import { ScrollableBond, ScrollableState, type ScrollableBondProps } from './bond.svelte';
+	import type { ScrollableRootProps } from './types';
+	
+	let {
+		scrollX = $bindable(0),
+		scrollY = $bindable(0),
+		scrollWidth = $bindable(0),
+		scrollHeight = $bindable(0),
+		clientWidth = $bindable(0),
+		clientHeight = $bindable(0),
+		class: klass = '',
+		disabled = false,
+		open = true,
+		factory = _factory,
+		children,
+		...restProps
+	}: ScrollableRootProps<E, B> = $props();
+
+	let isScrolling = $state(false);
+
+	const bondProps = defineState<ScrollableBondProps>([
+		defineProperty(
+			'scrollX',
+			() => scrollX,
+			(v) => (scrollX = v)
+		),
+		defineProperty(
+			'scrollY',
+			() => scrollY,
+			(v) => (scrollY = v)
+		),
+		defineProperty(
+			'scrollWidth',
+			() => scrollWidth,
+			(v) => (scrollWidth = v)
+		),
+		defineProperty(
+			'scrollHeight',
+			() => scrollHeight,
+			(v) => (scrollHeight = v)
+		),
+		defineProperty(
+			'clientWidth',
+			() => clientWidth,
+			(v) => (clientWidth = v)
+		),
+		defineProperty(
+			'clientHeight',
+			() => clientHeight,
+			(v) => (clientHeight = v)
+		),
+		defineProperty('disabled', () => disabled),
+		defineProperty(
+			'open',
+			() => open,
+			(v) => (open = v)
+		),
+		defineProperty(
+			'isScrolling',
+			() => isScrolling,
+			(v) => (isScrolling = v)
+		),
+		defineProperty('rest', () => restProps)
+	]);
+
+	const bond = factory(bondProps).share();
+
+	const rootProps = $derived({
+		...bond.root().spread,
+		...restProps
+	});
+
+	function _factory(props: typeof bondProps) {
+		const scrollableState = new ScrollableState(() => props);
+		return new ScrollableBond(scrollableState);
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+<HtmlAtom
+	{bond}
+	as="div"
+	preset="scrollable"
+	class={['scrollable-root border-border relative box-content overflow-hidden', '$preset', klass]}
+	{...rootProps}
+>
+	{@render children?.({ scrollable: bond })}
+</HtmlAtom>

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

@@ -1,7 +1,7 @@
 import { ScrollableBond } from './bond.svelte';
 import type { ScrollableRootProps } from './types';
-declare function $$render<T extends keyof HTMLElementTagNameMap>(): {
-    props: ScrollableRootProps<T>;
+declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends import('./bond.svelte').ScrollableBond = import('./bond.svelte').ScrollableBond>(): {
+    props: ScrollableRootProps<E, B>;
     exports: {
         getBond: () => ScrollableBond;
     };
@@ -9,22 +9,22 @@ declare function $$render<T extends keyof HTMLElementTagNameMap>(): {
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<T extends keyof HTMLElementTagNameMap> {
-    props(): ReturnType<typeof $$render<T>>['props'];
-    events(): ReturnType<typeof $$render<T>>['events'];
-    slots(): ReturnType<typeof $$render<T>>['slots'];
+declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'div', B extends import('./bond.svelte').ScrollableBond = import('./bond.svelte').ScrollableBond> {
+    props(): ReturnType<typeof $$render<E, B>>['props'];
+    events(): ReturnType<typeof $$render<E, B>>['events'];
+    slots(): ReturnType<typeof $$render<E, B>>['slots'];
     bindings(): "clientHeight" | "clientWidth" | "scrollHeight" | "scrollWidth" | "scrollX" | "scrollY";
     exports(): {
         getBond: () => ScrollableBond;
     };
 }
 interface $$IsomorphicComponent {
-    new <T extends keyof HTMLElementTagNameMap>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
-    } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T extends keyof HTMLElementTagNameMap>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+    new <E extends keyof HTMLElementTagNameMap = 'div', B extends import('./bond.svelte').ScrollableBond = import('./bond.svelte').ScrollableBond>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<E, B>['props']>, ReturnType<__sveltets_Render<E, B>['events']>, ReturnType<__sveltets_Render<E, B>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<E, B>['bindings']>;
+    } & ReturnType<__sveltets_Render<E, B>['exports']>;
+    <E extends keyof HTMLElementTagNameMap = 'div', B extends import('./bond.svelte').ScrollableBond = import('./bond.svelte').ScrollableBond>(internal: unknown, props: ReturnType<__sveltets_Render<E, B>['props']> & {}): ReturnType<__sveltets_Render<E, B>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 declare const ScrollableRoot: $$IsomorphicComponent;
-type ScrollableRoot<T extends keyof HTMLElementTagNameMap> = InstanceType<typeof ScrollableRoot<T>>;
+type ScrollableRoot<E extends keyof HTMLElementTagNameMap = 'div', B extends import('./bond.svelte').ScrollableBond = import('./bond.svelte').ScrollableBond> = InstanceType<typeof ScrollableRoot<E, B>>;
 export default ScrollableRoot;

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

@@ -1,20 +1,15 @@
-<script lang="ts" generics="T extends keyof HTMLElementTagNameMap">
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends import('./bond.svelte').ScrollableBond = import('./bond.svelte').ScrollableBond">
 	import { HtmlAtom } from '../atom';
 	import { ScrollableBond } from './bond.svelte';
 	import type { ScrollableThumbProps } from './types';
 
 	let {
 		class: klass = '',
-		children = undefined,
-		orientation,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = _animate,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
+		children,
+		orientation = 'vertical',
+
 		...restProps
-	}: ScrollableThumbProps<T> = $props();
+	}: ScrollableThumbProps<E, B> = $props();
 
 	const bond = ScrollableBond.get();
 
@@ -22,38 +17,15 @@
 		throw new Error('ScrollableThumb must be used within a ScrollableRoot');
 	}
 
-	const scrollX = $derived(bond.state.props.scrollX);
-	const scrollY = $derived(bond.state.props.scrollY);
-
-	const clientWidth = $derived(bond.state.props.clientWidth);
-	const clientHeight = $derived(bond.state.props.clientHeight);
-
-	const scrollWidth = $derived(bond.state.props.scrollWidth);
-	const scrollHeight = $derived(bond.state.props.scrollHeight);
-
-	const thumbX = $derived((scrollX / scrollWidth) * 100);
-	const thumbY = $derived((scrollY / scrollHeight) * 100);
-
-	const thumbWidth = $derived((clientWidth / scrollWidth) * 100);
-	const thumbHeight = $derived((clientHeight / scrollHeight) * 100);
-
-	const thumbProps = $derived(bond.thumb(orientation));
-
-	function _animate(node: HTMLElement) {
-		if (orientation === 'horizontal') {
-			node.style.left = thumbX + '%';
-			node.style.transform = `translateZ(1px)`;
-			node.style.width = thumbWidth + '%';
-		} else {
-			node.style.top = thumbY + '%';
-			node.style.transform = `translateZ(1px)`;
-			node.style.height = thumbHeight + '%';
-		}
-	}
+	const thumbProps = $derived({
+		...(orientation === 'horizontal' ? bond.thumbX().spread : bond.thumbY().spread),
+		...restProps
+	});
 </script>
 
 <HtmlAtom
 	{bond}
+	as="div"
 	preset="scrollable.thumb"
 	class={[
 		'scrollable-thumb border-border bg-foreground/10 hover:bg-foreground/20 absolute cursor-grab rounded-md active:cursor-grabbing',
@@ -62,14 +34,7 @@
 		'$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)}
 	{...thumbProps}
-	{...restProps}
 >
 	{@render children?.()}
 </HtmlAtom>