@svelte-atoms/core 1.0.0-alpha.30 → 1.0.0-alpha.32

package/dist/components/root/root.css

@@ -1,119 +1,119 @@
-@import 'tailwindcss';
-
-:root {
-	--background: oklch(1 0 0);
-	--foreground: oklch(0.145 0 0);
-	--card: oklch(1 0 0);
-	--card-foreground: oklch(0.145 0 0);
-	--popover: oklch(1 0 0);
-	--popover-foreground: oklch(0.145 0 0);
-	--primary: oklch(0.205 0 0);
-	--primary-foreground: oklch(0.985 0 0);
-	--secondary: oklch(0.97 0 0);
-	--secondary-foreground: oklch(0.205 0 0);
-	--muted: oklch(0.97 0 0);
-	--muted-foreground: oklch(0.556 0 0);
-	--accent: oklch(0.97 0 0);
-	--accent-foreground: oklch(0.205 0 0);
-	--destructive: oklch(0.577 0.245 27.325);
-	--destructive-foreground: oklch(1 0 0);
-	--border: oklch(0.922 0 0);
-	--input: oklch(0.922 0 0);
-	--ring: oklch(0.708 0 0);
-	--chart-1: oklch(0.646 0.222 41.116);
-	--chart-2: oklch(0.6 0.118 184.704);
-	--chart-3: oklch(0.398 0.07 227.392);
-	--chart-4: oklch(0.828 0.189 84.429);
-	--chart-5: oklch(0.769 0.188 70.08);
-	--radius: 0.625rem;
-	--sidebar: oklch(0.985 0 0);
-	--sidebar-foreground: oklch(0.145 0 0);
-	--sidebar-primary: oklch(0.205 0 0);
-	--sidebar-primary-foreground: oklch(0.985 0 0);
-	--sidebar-accent: oklch(0.97 0 0);
-	--sidebar-accent-foreground: oklch(0.205 0 0);
-	--sidebar-border: oklch(0.922 0 0);
-	--sidebar-ring: oklch(0.708 0 0);
-	--radius: 0.625rem;
-	--shadow-x: 0px;
-	--shadow-y: 1px;
-	--shadow-blur: 2px;
-	--shadow-spread: 0px;
-	--shadow-opacity: 0.18;
-	--shadow-color: hsl(0 0% 0%);
-	--tracking-normal: 0em;
-	--spacing: 0.25rem;
-}
-
-.dark {
-	--background: oklch(0.145 0 0);
-	--foreground: oklch(0.985 0 0);
-	--card: oklch(0.205 0 0);
-	--card-foreground: oklch(0.985 0 0);
-	--popover: oklch(0.205 0 0);
-	--popover-foreground: oklch(0.985 0 0);
-	--primary: oklch(0.922 0 0);
-	--primary-foreground: oklch(0.205 0 0);
-	--secondary: oklch(0.269 0 0);
-	--secondary-foreground: oklch(0.985 0 0);
-	--muted: oklch(0.269 0 0);
-	--muted-foreground: oklch(0.708 0 0);
-	--accent: oklch(0.269 0 0);
-	--accent-foreground: oklch(0.985 0 0);
-	--destructive: oklch(0.704 0.191 22.216);
-	--destructive-foreground: oklch(0.985 0 0);
-	--border: oklch(1 0 0 / 10%);
-	--input: oklch(1 0 0 / 15%);
-	--ring: oklch(0.556 0 0);
-	--chart-1: oklch(0.488 0.243 264.376);
-	--chart-2: oklch(0.696 0.17 162.48);
-	--chart-3: oklch(0.769 0.188 70.08);
-	--chart-4: oklch(0.627 0.265 303.9);
-	--chart-5: oklch(0.645 0.246 16.439);
-	--sidebar: oklch(0.205 0 0);
-	--sidebar-foreground: oklch(0.985 0 0);
-	--sidebar-primary: oklch(0.488 0.243 264.376);
-	--sidebar-primary-foreground: oklch(0.985 0 0);
-	--sidebar-accent: oklch(0.269 0 0);
-	--sidebar-accent-foreground: oklch(0.985 0 0);
-	--sidebar-border: oklch(1 0 0 / 10%);
-	--sidebar-ring: oklch(0.556 0 0);
-	--shadow-color: hsl(0, 0%, 100%);
-}
-
-@theme inline {
-	--color-background: var(--background);
-	--color-foreground: var(--foreground);
-	--color-card: var(--card);
-	--color-card-foreground: var(--card-foreground);
-	--color-popover: var(--popover);
-	--color-popover-foreground: var(--popover-foreground);
-	--color-primary: var(--primary);
-	--color-primary-foreground: var(--primary-foreground);
-	--color-secondary: var(--secondary);
-	--color-secondary-foreground: var(--secondary-foreground);
-	--color-muted: var(--muted);
-	--color-muted-foreground: var(--muted-foreground);
-	--color-accent: var(--accent);
-	--color-accent-foreground: var(--accent-foreground);
-	--color-destructive: var(--destructive);
-	--color-destructive-foreground: var(--destructive-foreground);
-	--color-border: var(--border);
-	--color-input: var(--input);
-	--color-ring: var(--ring);
-	--color-chart-1: var(--chart-1);
-	--color-chart-2: var(--chart-2);
-	--color-chart-3: var(--chart-3);
-	--color-chart-4: var(--chart-4);
-	--color-chart-5: var(--chart-5);
-	--color-sidebar: var(--sidebar);
-	--color-sidebar-foreground: var(--sidebar-foreground);
-	--color-sidebar-primary: var(--sidebar-primary);
-	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-	--color-sidebar-accent: var(--sidebar-accent);
-	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-	--color-sidebar-border: var(--sidebar-border);
-	--color-sidebar-ring: var(--sidebar-ring);
-
-	--radius-inherit: inherit;
-}
+@import 'tailwindcss';
+
+:root {
+	--background: oklch(1 0 0);
+	--foreground: oklch(0.145 0 0);
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.145 0 0);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.145 0 0);
+	--primary: oklch(0.205 0 0);
+	--primary-foreground: oklch(0.985 0 0);
+	--secondary: oklch(0.97 0 0);
+	--secondary-foreground: oklch(0.205 0 0);
+	--muted: oklch(0.97 0 0);
+	--muted-foreground: oklch(0.556 0 0);
+	--accent: oklch(0.97 0 0);
+	--accent-foreground: oklch(0.205 0 0);
+	--destructive: oklch(0.577 0.245 27.325);
+	--destructive-foreground: oklch(1 0 0);
+	--border: oklch(0.922 0 0);
+	--input: oklch(0.99 0 0);
+	--ring: oklch(0.708 0 0);
+	--chart-1: oklch(0.646 0.222 41.116);
+	--chart-2: oklch(0.6 0.118 184.704);
+	--chart-3: oklch(0.398 0.07 227.392);
+	--chart-4: oklch(0.828 0.189 84.429);
+	--chart-5: oklch(0.769 0.188 70.08);
+	--radius: 0.625rem;
+	--sidebar: oklch(0.985 0 0);
+	--sidebar-foreground: oklch(0.145 0 0);
+	--sidebar-primary: oklch(0.205 0 0);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.97 0 0);
+	--sidebar-accent-foreground: oklch(0.205 0 0);
+	--sidebar-border: oklch(0.922 0 0);
+	--sidebar-ring: oklch(0.708 0 0);
+	--radius: 0.625rem;
+	--shadow-x: 0px;
+	--shadow-y: 1px;
+	--shadow-blur: 2px;
+	--shadow-spread: 0px;
+	--shadow-opacity: 0.18;
+	--shadow-color: hsl(0 0% 0%);
+	--tracking-normal: 0em;
+	--spacing: 0.25rem;
+}
+
+.dark {
+	--background: oklch(0.145 0 0);
+	--foreground: oklch(0.985 0 0);
+	--card: oklch(0.205 0 0);
+	--card-foreground: oklch(0.985 0 0);
+	--popover: oklch(0.205 0 0);
+	--popover-foreground: oklch(0.985 0 0);
+	--primary: oklch(0.922 0 0);
+	--primary-foreground: oklch(0.205 0 0);
+	--secondary: oklch(0.269 0 0);
+	--secondary-foreground: oklch(0.985 0 0);
+	--muted: oklch(0.269 0 0);
+	--muted-foreground: oklch(0.708 0 0);
+	--accent: oklch(0.269 0 0);
+	--accent-foreground: oklch(0.985 0 0);
+	--destructive: oklch(0.704 0.191 22.216);
+	--destructive-foreground: oklch(0.985 0 0);
+	--border: oklch(1 0 0 / 10%);
+	--input: oklch(1 0 0 / 5%);
+	--ring: oklch(0.556 0 0);
+	--chart-1: oklch(0.488 0.243 264.376);
+	--chart-2: oklch(0.696 0.17 162.48);
+	--chart-3: oklch(0.769 0.188 70.08);
+	--chart-4: oklch(0.627 0.265 303.9);
+	--chart-5: oklch(0.645 0.246 16.439);
+	--sidebar: oklch(0.205 0 0);
+	--sidebar-foreground: oklch(0.985 0 0);
+	--sidebar-primary: oklch(0.488 0.243 264.376);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.269 0 0);
+	--sidebar-accent-foreground: oklch(0.985 0 0);
+	--sidebar-border: oklch(1 0 0 / 10%);
+	--sidebar-ring: oklch(0.556 0 0);
+	--shadow-color: hsl(0, 0%, 100%);
+}
+
+@theme inline {
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-destructive: var(--destructive);
+	--color-destructive-foreground: var(--destructive-foreground);
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
+	--color-chart-1: var(--chart-1);
+	--color-chart-2: var(--chart-2);
+	--color-chart-3: var(--chart-3);
+	--color-chart-4: var(--chart-4);
+	--color-chart-5: var(--chart-5);
+	--color-sidebar: var(--sidebar);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-ring: var(--sidebar-ring);
+
+	--radius-inherit: inherit;
+}

package/dist/components/root/root.svelte

@@ -4,23 +4,27 @@
 
 <script lang="ts">
 	import { cn, defineState, defineProperty } from '../../utils';
-	import { RootBond, RootBondState, type RootStateProps } from './bond.svelte';
-	import { Portal, ActivePortal, Portals } from '../portal';
-	import { Stack } from '../stack';
-	import { HtmlAtom } from '../atom';
+	import { ActivePortal, Portals } from '../portal';
+	import { HtmlAtom as Atom } from '../atom';
 	import { HtmlElement, MathmlElement, SvgElement } from '../element';
+	import { RootBond, RootBondState, type RootStateProps } from './bond.svelte';
+	import L0Portal from './l0-portal.svelte';
+	import L1Portal from './l1-portal.svelte';
+	import type { RootProps } from './types';
 
 	let {
 		class: klass = '',
-		base,
+		base = undefined,
 		children = undefined,
 		portals = undefined,
+		l0portal = undefined,
+		l1portal = undefined,
 		...restProps
-	} = $props();
+	}: RootProps = $props();
 
-	let html: typeof HtmlElement | undefined = HtmlElement;
-	let svg: typeof SvgElement | undefined = undefined;
-	let mathml: typeof MathmlElement | undefined = undefined;
+	let html: typeof HtmlElement | undefined = $state(HtmlElement);
+	let svg: typeof SvgElement | undefined = $state(undefined);
+	let mathml: typeof MathmlElement | undefined = $state(undefined);
 
 	type Renderers = {
 		html?: typeof HtmlElement;
@@ -65,57 +69,35 @@
 </script>
 
 <Portals id="root">
-	<Stack.Root
+	<Atom
 		{@attach (node) => {
 			bond.rootElement = node;
 		}}
 		{base}
 		preset="root"
 		class={cn(
-			'atom-root bg-background text-foreground relative flex w-full flex-1 flex-col items-start justify-stretch font-sans',
+			'atom-root bg-background text-foreground relative flex h-full w-full flex-1 flex-col items-start justify-stretch font-sans',
 			'$preset',
 			klass
 		)}
 		{...restProps}
 	>
-		{#if portals}
-			{@render portals?.()}
+		{#if l0portal}
+			{@render l0portal?.()}
 		{:else}
-			<Portal.Outer
-				base={Stack.Item}
-				id="root.l0"
-				class="pointer-events-none absolute inset-0 z-10 overflow-hidden"
-			>
-				<Portal.Inner />
-			</Portal.Outer>
-
-			<Portal.Outer
-				base={Stack.Item}
-				id="root.l1"
-				class="pointer-events-none absolute inset-0 z-10 overflow-hidden"
-			>
-				<Portal.Inner />
-			</Portal.Outer>
-
-			<Portal.Outer
-				base={Stack.Item}
-				id="root.l2"
-				class="pointer-events-none absolute inset-0 z-10 overflow-hidden"
-			>
-				<Portal.Inner />
-			</Portal.Outer>
+			<L0Portal />
+		{/if}
 
-			<Portal.Outer
-				base={Stack.Item}
-				id="root.l3"
-				class="pointer-events-none absolute inset-0 z-10 overflow-hidden"
-			>
-				<Portal.Inner />
-			</Portal.Outer>
+		{#if l1portal}
+			{@render l1portal?.()}
+		{:else}
+			<L1Portal />
 		{/if}
 
+		{@render portals?.()}
+
 		<ActivePortal portal="root.l0">
 			{@render children?.()}
 		</ActivePortal>
-	</Stack.Root>
+	</Atom>
 </Portals>

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

@@ -1,9 +1,5 @@
 export type RootPortals = 'root.l0' | 'root.l1' | 'root.l2' | 'root.l3';
-declare const Root: import("svelte").Component<{
-    class?: string;
-    base: any;
-    children?: any;
-    portals?: any;
-} & Record<string, any>, {}, "">;
+import type { RootProps } from './types';
+declare const Root: import("svelte").Component<RootProps<"div", import("../atom").ComponentBase | import("../atom").SnippetBase>, {}, "">;
 type Root = ReturnType<typeof Root>;
 export default Root;

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

@@ -0,0 +1,7 @@
+<script>
+	import { Portal } from '../portal';
+</script>
+
+<Portal.Outer id="root.l3" class="pointer-events-none absolute inset-0 z-14 overflow-hidden">
+	<Portal.Inner />
+</Portal.Outer>

package/dist/components/root/toasts-portal.svelte.d.ts

@@ -0,0 +1,26 @@
+export default ToastsPortal;
+type ToastsPortal = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string;
+};
+declare const ToastsPortal: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

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

@@ -1,8 +1,25 @@
 import type { HtmlAtomProps, Base } from '../atom';
+import type { Snippet } from 'svelte';
 /**
  * Extend this interface to add custom root properties in your application.
  */
 export interface RootExtendProps {
 }
 export interface RootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, RootExtendProps {
+    /**
+     * Main content to render inside the root component.
+     */
+    children?: Snippet;
+    /**
+     * Custom portal configuration snippet.
+     */
+    portals?: Snippet;
+    /**
+     * Custom L0 portal snippet (z-10 layer for popovers).
+     */
+    l0portal?: Snippet;
+    /**
+     * Custom L1 portal snippet (z-12 layer).
+     */
+    l1portal?: Snippet;
 }

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

@@ -5,7 +5,7 @@ declare function $$render<T extends keyof HTMLElementTagNameMap>(): {
     exports: {
         getBond: () => ScrollableBond;
     };
-    bindings: "scrollX" | "clientWidth" | "scrollWidth" | "scrollY" | "clientHeight" | "scrollHeight";
+    bindings: "clientHeight" | "clientWidth" | "scrollHeight" | "scrollWidth" | "scrollX" | "scrollY";
     slots: {};
     events: {};
 };
@@ -13,7 +13,7 @@ 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'];
-    bindings(): "scrollX" | "clientWidth" | "scrollWidth" | "scrollY" | "clientHeight" | "scrollHeight";
+    bindings(): "clientHeight" | "clientWidth" | "scrollHeight" | "scrollWidth" | "scrollX" | "scrollY";
     exports(): {
         getBond: () => ScrollableBond;
     };

package/dist/components/scrollable/scrollable.stories.svelte

@@ -1,116 +1,116 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { Scrollable as Scrollable_ } from '.';
-	import { animate } from 'motion';
-	import { ScrollableBond } from './bond.svelte';
-	import { on } from '../../attachments/event.svelte';
-
-	const { Story } = defineMeta({
-		title: 'ATOMS/Scrollable'
-	});
-</script>
-
-<Story name="Scrollable">
-	{#snippet children({ args })}
-		<div class="h-full w-full flex-1">
-			<Scrollable_.Root
-				class="border-border box-border flex min-h-full w-full rounded-lg border shadow-inner"
-				open={false}
-				{@attach (node) => {
-					const scrollable = ScrollableBond.get();
-					if (!scrollable) return;
-
-					const c1 = on('pointerenter', () => {
-						scrollable.state.props.open = true;
-					})(node);
-
-					const c2 = on('pointerleave', () => {
-						scrollable.state.props.open = false;
-					})(node);
-
-					return () => {
-						c1();
-						c2();
-					};
-				}}
-			>
-				{#snippet children({ scrollable })}
-					<Scrollable_.Container class="max-h-[100svh]">
-						<Scrollable_.Content>
-							<div class="mx-auto w-[600px] p-4">
-								<h3 class="mb-4 text-lg font-semibold">Scrollable Content (New API)</h3>
-								<div class="grid grid-cols-3 gap-4">
-									{#each Array(99) as _, i}
-										<div class="rounded border p-4 shadow">
-											<h4 class="font-medium">Card {i + 1}</h4>
-											<p class="mt-2 text-sm">
-												This is some sample content in card {i + 1}. You can scroll horizontally and
-												vertically to see more content.
-											</p>
-										</div>
-									{/each}
-								</div>
-
-								<div class="bg-foreground/10 mt-6 rounded p-4">
-									<p class="text-sm">
-										This content area is larger than the container, so you can scroll both
-										horizontally and vertically using the custom scrollbars or mouse wheel.
-									</p>
-								</div>
-
-								<div class="mt-4 flex gap-2">
-									<button
-										class="rounded bg-blue-500 px-3 py-2 hover:bg-blue-600"
-										onclick={() => scrollable.scrollTo(0, 0)}
-									>
-										Scroll to Top
-									</button>
-									<button
-										class="rounded bg-green-500 px-3 py-2 hover:bg-green-600"
-										onclick={() => scrollable.scrollBy(50, 50)}
-									>
-										Scroll +50px
-									</button>
-								</div>
-							</div>
-						</Scrollable_.Content>
-					</Scrollable_.Container>
-
-					<!-- New unified vertical scrollbar -->
-					<Scrollable_.Track
-						orientation="vertical"
-						class="inset-y-0 right-0 w-[2px] rounded-md"
-						initial={(node) => {
-							animate(node, { opacity: 0, right: 0, top: 0, bottom: 0 }, { duration: 0 });
-						}}
-						enter={(node) => {
-							animate(
-								node,
-								{ opacity: 1, right: 8, top: 8, bottom: 8 },
-								{ duration: 0.3, ease: 'easeOut' }
-							);
-							return {
-								duration: 300
-							};
-						}}
-						exit={(node) => {
-							animate(
-								node,
-								{ opacity: 0, right: 0, top: 0, bottom: 0 },
-								{ duration: 0.3, ease: 'easeOut' }
-							);
-							return {
-								duration: 300
-							};
-						}}
-					>
-						<Scrollable_.Thumb
-							orientation="vertical"
-							class="left-[50%] w-2 origin-center translate-x-[-50%] rounded-none transition-colors"
-						/>
-					</Scrollable_.Track>
-				{/snippet}
-			</Scrollable_.Root>
-		</div>
-	{/snippet}
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { Scrollable as Scrollable_ } from '.';
+	import { animate } from 'motion';
+	import { ScrollableBond } from './bond.svelte';
+	import { on } from '../../attachments/event.svelte';
+
+	const { Story } = defineMeta({
+		title: 'ATOMS/Scrollable'
+	});
+</script>
+
+<Story name="Scrollable">
+	{#snippet children({ args })}
+		<div class="h-full w-full flex-1">
+			<Scrollable_.Root
+				class="border-border box-border flex min-h-full w-full rounded-lg border shadow-inner"
+				open={false}
+				{@attach (node) => {
+					const scrollable = ScrollableBond.get();
+					if (!scrollable) return;
+
+					const c1 = on('pointerenter', () => {
+						scrollable.state.props.open = true;
+					})(node);
+
+					const c2 = on('pointerleave', () => {
+						scrollable.state.props.open = false;
+					})(node);
+
+					return () => {
+						c1();
+						c2();
+					};
+				}}
+			>
+				{#snippet children({ scrollable })}
+					<Scrollable_.Container class="max-h-[100svh]">
+						<Scrollable_.Content>
+							<div class="mx-auto w-[600px] p-4">
+								<h3 class="mb-4 text-lg font-semibold">Scrollable Content (New API)</h3>
+								<div class="grid grid-cols-3 gap-4">
+									{#each Array(99) as _, i}
+										<div class="rounded border p-4 shadow">
+											<h4 class="font-medium">Card {i + 1}</h4>
+											<p class="mt-2 text-sm">
+												This is some sample content in card {i + 1}. You can scroll horizontally and
+												vertically to see more content.
+											</p>
+										</div>
+									{/each}
+								</div>
+
+								<div class="bg-foreground/10 mt-6 rounded p-4">
+									<p class="text-sm">
+										This content area is larger than the container, so you can scroll both
+										horizontally and vertically using the custom scrollbars or mouse wheel.
+									</p>
+								</div>
+
+								<div class="mt-4 flex gap-2">
+									<button
+										class="rounded bg-blue-500 px-3 py-2 hover:bg-blue-600"
+										onclick={() => scrollable.scrollTo(0, 0)}
+									>
+										Scroll to Top
+									</button>
+									<button
+										class="rounded bg-green-500 px-3 py-2 hover:bg-green-600"
+										onclick={() => scrollable.scrollBy(50, 50)}
+									>
+										Scroll +50px
+									</button>
+								</div>
+							</div>
+						</Scrollable_.Content>
+					</Scrollable_.Container>
+
+					<!-- New unified vertical scrollbar -->
+					<Scrollable_.Track
+						orientation="vertical"
+						class="inset-y-0 right-0 w-[2px] rounded-md"
+						initial={(node) => {
+							animate(node, { opacity: 0, right: 0, top: 0, bottom: 0 }, { duration: 0 });
+						}}
+						enter={(node) => {
+							animate(
+								node,
+								{ opacity: 1, right: 8, top: 8, bottom: 8 },
+								{ duration: 0.3, ease: 'easeOut' }
+							);
+							return {
+								duration: 300
+							};
+						}}
+						exit={(node) => {
+							animate(
+								node,
+								{ opacity: 0, right: 0, top: 0, bottom: 0 },
+								{ duration: 0.3, ease: 'easeOut' }
+							);
+							return {
+								duration: 300
+							};
+						}}
+					>
+						<Scrollable_.Thumb
+							orientation="vertical"
+							class="left-[50%] w-2 origin-center translate-x-[-50%] rounded-none transition-colors"
+						/>
+					</Scrollable_.Track>
+				{/snippet}
+			</Scrollable_.Root>
+		</div>
+	{/snippet}
+</Story>