From 6a954c0e67ceb78d704473b9509e509e2f4d4b10 Mon Sep 17 00:00:00 2001
From: abdel <rioman19@gmail.com>
Date: Thu, 6 Nov 2025 18:49:30 +0800
Subject: [PATCH] chore: specify border color by default

---
 src/lib/components/accordion/accordion-root.svelte         | 2 +-
 .../components/accordion/item/accordion-item-body.svelte   | 2 +-
 .../components/accordion/item/accordion-item-header.svelte | 6 +++++-
 .../accordion/item/accordion-item-indicator.svelte         | 2 +-
 .../components/accordion/item/accordion-item-root.svelte   | 2 +-
 src/lib/components/alert/alert-actions.svelte              | 2 +-
 src/lib/components/alert/alert-close-button.svelte         | 2 +-
 src/lib/components/alert/alert-content.svelte              | 2 +-
 src/lib/components/alert/alert-description.svelte          | 2 +-
 src/lib/components/alert/alert-icon.svelte                 | 2 +-
 src/lib/components/alert/alert-root.svelte                 | 2 +-
 src/lib/components/alert/alert-title.svelte                | 2 +-
 src/lib/components/badge/badge.svelte                      | 2 +-
 src/lib/components/breadcrumb/breadcrumb-item.svelte       | 2 +-
 src/lib/components/breadcrumb/breadcrumb-root.svelte       | 2 +-
 src/lib/components/breadcrumb/breadcrumb-separator.svelte  | 2 +-
 src/lib/components/button/button.svelte                    | 2 +-
 src/lib/components/card/card-body.svelte                   | 2 +-
 src/lib/components/card/card-description.svelte            | 2 +-
 src/lib/components/card/card-footer.svelte                 | 2 +-
 src/lib/components/card/card-header.svelte                 | 2 +-
 src/lib/components/card/card-media.svelte                  | 2 +-
 src/lib/components/card/card-subtitle.svelte               | 2 +-
 src/lib/components/card/card-title.svelte                  | 6 +++++-
 src/lib/components/collapsible/collapsible-body.svelte     | 2 +-
 src/lib/components/collapsible/collapsible-header.svelte   | 2 +-
 .../components/collapsible/collapsible-indicator.svelte    | 2 +-
 src/lib/components/collapsible/collapsible-root.svelte     | 2 +-
 src/lib/components/combobox/combobox-control.svelte        | 2 +-
 src/lib/components/combobox/combobox-trigger.svelte        | 2 +-
 src/lib/components/combobox/compobox-item.svelte           | 2 +-
 src/lib/components/container/container.svelte              | 2 +-
 src/lib/components/datagrid/datagrid-body.svelte           | 2 +-
 src/lib/components/datagrid/datagrid-footer.svelte         | 2 +-
 src/lib/components/datagrid/datagrid-header.svelte         | 2 +-
 src/lib/components/datagrid/datagrid-root.svelte           | 2 +-
 src/lib/components/datagrid/td/datagrid-td.svelte          | 2 +-
 .../components/datagrid/th/datagrid-th-sort-icon.svelte    | 2 +-
 src/lib/components/datagrid/th/datagrid-th.svelte          | 2 +-
 src/lib/components/dialog/dialog-body.svelte               | 2 +-
 src/lib/components/dialog/dialog-close-button.svelte       | 2 +-
 src/lib/components/dialog/dialog-description.svelte        | 2 +-
 src/lib/components/dialog/dialog-footer.svelte             | 2 +-
 src/lib/components/dialog/dialog-header.svelte             | 2 +-
 src/lib/components/dialog/dialog-root.svelte               | 2 +-
 src/lib/components/dialog/dialog-title.svelte              | 2 +-
 src/lib/components/drawer/drawer-backdrop.svelte           | 2 +-
 src/lib/components/drawer/drawer-body.svelte               | 2 +-
 src/lib/components/drawer/drawer-description.svelte        | 2 +-
 src/lib/components/drawer/drawer-footer.svelte             | 2 +-
 src/lib/components/drawer/drawer-header.svelte             | 2 +-
 src/lib/components/drawer/drawer-root.svelte               | 2 +-
 src/lib/components/drawer/drawer-title.svelte              | 2 +-
 src/lib/components/dropdown/dropdown-placeholder.svelte    | 2 +-
 src/lib/components/dropdown/dropdown-query.svelte          | 2 +-
 src/lib/components/dropdown/dropdown-trigger.svelte        | 2 +-
 src/lib/components/dropdown/dropdown-value.svelte          | 2 +-
 src/lib/components/list/list-group.svelte                  | 2 +-
 src/lib/components/list/list-item.svelte                   | 2 +-
 src/lib/components/list/list-root.svelte                   | 7 ++++++-
 src/lib/components/list/list-title.svelte                  | 2 +-
 src/lib/components/menu/menu-list.svelte                   | 2 +-
 src/lib/components/popover/popover-arrow.svelte            | 2 +-
 src/lib/components/popover/popover-content.svelte          | 2 +-
 src/lib/components/popover/popover-indicator.svelte        | 2 +-
 src/lib/components/popover/popover-trigger.svelte          | 2 +-
 src/lib/components/portal/portal-inner.svelte              | 2 +-
 src/lib/components/portal/portal-root.svelte               | 2 +-
 src/lib/components/sidebar/sidebar-root.svelte             | 2 +-
 src/lib/components/stack/stack-item.svelte                 | 6 +++++-
 src/lib/components/stack/stack-root.svelte                 | 6 +++++-
 src/lib/components/tabs/tab/tab-body.svelte                | 2 +-
 src/lib/components/tabs/tab/tab-description.svelte         | 2 +-
 src/lib/components/tabs/tab/tab-header.svelte              | 2 +-
 src/lib/components/tabs/tab/tab-root.svelte                | 7 ++++++-
 src/lib/components/tabs/tabs-body.svelte                   | 2 +-
 src/lib/components/tabs/tabs-header.svelte                 | 2 +-
 src/lib/components/tabs/tabs-root.svelte                   | 2 +-
 src/lib/components/textarea/textarea-input.svelte          | 3 ++-
 src/lib/components/toast/toast-description.svelte          | 2 +-
 src/lib/components/toast/toast-root.svelte                 | 2 +-
 src/lib/components/toast/toast-title.svelte                | 2 +-
 src/lib/components/tree/tree-body.svelte                   | 2 +-
 src/lib/components/tree/tree-header.svelte                 | 2 +-
 src/lib/components/tree/tree-indicator.svelte              | 2 +-
 src/lib/components/tree/tree-root.svelte                   | 2 +-
 86 files changed, 113 insertions(+), 86 deletions(-)

diff --git a/src/lib/components/accordion/accordion-root.svelte b/src/lib/components/accordion/accordion-root.svelte
index c94517b..7743917 100644
--- a/src/lib/components/accordion/accordion-root.svelte
+++ b/src/lib/components/accordion/accordion-root.svelte
@@ -71,7 +71,7 @@
 
 <HtmlAtom
 	preset="accordion"
-	class={['bg-card flex list-none flex-col', '$preset', klass]}
+	class={['bg-card border-border flex list-none flex-col', '$preset', klass]}
 	{bond}
 	{...rootProps}
 >
diff --git a/src/lib/components/accordion/item/accordion-item-body.svelte b/src/lib/components/accordion/item/accordion-item-body.svelte
index 442508c..9d216f0 100644
--- a/src/lib/components/accordion/item/accordion-item-body.svelte
+++ b/src/lib/components/accordion/item/accordion-item-body.svelte
@@ -37,7 +37,7 @@
 {#if isOpen}
 	<HtmlAtom
 		preset="accordion.item.body"
-		class={['box-content', '$preset', klass]}
+		class={['border-border box-content', '$preset', klass]}
 		{bond}
 		onmount={onmount?.bind(bond.state)}
 		ondestroy={ondestroy?.bind(bond.state)}
diff --git a/src/lib/components/accordion/item/accordion-item-header.svelte b/src/lib/components/accordion/item/accordion-item-header.svelte
index 647341d..5413cb4 100644
--- a/src/lib/components/accordion/item/accordion-item-header.svelte
+++ b/src/lib/components/accordion/item/accordion-item-header.svelte
@@ -40,7 +40,11 @@
 	{as}
 	{bond}
 	preset="accordion.item.header"
-	class={['relative box-border flex w-full cursor-pointer items-center', '$preset', klass]}
+	class={[
+		'border-border relative box-border flex w-full cursor-pointer items-center',
+		'$preset',
+		klass
+	]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	animate={animate?.bind(bond.state)}
diff --git a/src/lib/components/accordion/item/accordion-item-indicator.svelte b/src/lib/components/accordion/item/accordion-item-indicator.svelte
index 2ecf93c..1a10b71 100644
--- a/src/lib/components/accordion/item/accordion-item-indicator.svelte
+++ b/src/lib/components/accordion/item/accordion-item-indicator.svelte
@@ -42,7 +42,7 @@
 
 <HtmlAtom
 	preset="accordion.item.indicator"
-	class={['pointer-events-none flex items-center justify-center', '$preset', klass]}
+	class={['border-border pointer-events-none flex items-center justify-center', '$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	animate={animate?.bind(bond.state)}
diff --git a/src/lib/components/accordion/item/accordion-item-root.svelte b/src/lib/components/accordion/item/accordion-item-root.svelte
index d4cd6ce..00f4f9e 100644
--- a/src/lib/components/accordion/item/accordion-item-root.svelte
+++ b/src/lib/components/accordion/item/accordion-item-root.svelte
@@ -66,7 +66,7 @@
 <HtmlAtom
 	{bond}
 	preset="accordion.item"
-	class={['$preset', klass]}
+	class={['border-border', '$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	animate={animate?.bind(bond.state)}
diff --git a/src/lib/components/alert/alert-actions.svelte b/src/lib/components/alert/alert-actions.svelte
index 91ce443..85d84bd 100644
--- a/src/lib/components/alert/alert-actions.svelte
+++ b/src/lib/components/alert/alert-actions.svelte
@@ -39,7 +39,7 @@
 <HtmlAtom
 	{bond}
 	preset="alert.actions"
-	class={['alert-actions mt-3 flex items-center gap-2', '$preset', klass]}
+	class={['alert-actions border-border mt-3 flex items-center gap-2', '$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	animate={animate?.bind(bond.state)}
diff --git a/src/lib/components/alert/alert-close-button.svelte b/src/lib/components/alert/alert-close-button.svelte
index a96c81b..70cf931 100644
--- a/src/lib/components/alert/alert-close-button.svelte
+++ b/src/lib/components/alert/alert-close-button.svelte
@@ -45,7 +45,7 @@
 		{bond}
 		preset="alert.close-button"
 		class={[
-			'alert-close-button absolute top-2 right-2 rounded p-1 transition-colors hover:bg-black/10 dark:hover:bg-white/10',
+			'alert-close-button border-border absolute top-2 right-2 rounded p-1 transition-colors hover:bg-black/10 dark:hover:bg-white/10',
 			'focus:ring-2 focus:ring-offset-1 focus:outline-none',
 			{
 				'focus:ring-blue-500': bond?.state.variant === 'info',
diff --git a/src/lib/components/alert/alert-content.svelte b/src/lib/components/alert/alert-content.svelte
index 8efe059..6d752a9 100644
--- a/src/lib/components/alert/alert-content.svelte
+++ b/src/lib/components/alert/alert-content.svelte
@@ -39,7 +39,7 @@
 <HtmlAtom
 	{bond}
 	preset="alert.content"
-	class={['alert-content flex-1 space-y-1', '$preset', klass]}
+	class={['alert-content border-border flex-1 space-y-1', '$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	animate={animate?.bind(bond.state)}
diff --git a/src/lib/components/alert/alert-description.svelte b/src/lib/components/alert/alert-description.svelte
index b389306..e2323b6 100644
--- a/src/lib/components/alert/alert-description.svelte
+++ b/src/lib/components/alert/alert-description.svelte
@@ -37,7 +37,7 @@
 <HtmlAtom
 	{bond}
 	preset="alert.description"
-	class={['alert-description mt-1 text-sm leading-relaxed', '$preset', klass]}
+	class={['alert-description border-border mt-1 text-sm leading-relaxed', '$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	animate={animate?.bind(bond.state)}
diff --git a/src/lib/components/alert/alert-icon.svelte b/src/lib/components/alert/alert-icon.svelte
index 442dfc7..77964f0 100644
--- a/src/lib/components/alert/alert-icon.svelte
+++ b/src/lib/components/alert/alert-icon.svelte
@@ -40,7 +40,7 @@
 	{base}
 	preset="alert.icon"
 	class={[
-		'alert-icon inline-flex aspect-square h-5 items-center justify-center rounded-full text-sm font-medium',
+		'alert-icon border-border inline-flex aspect-square h-5 items-center justify-center rounded-full text-sm font-medium',
 		'$preset',
 		klass
 	]}
diff --git a/src/lib/components/alert/alert-root.svelte b/src/lib/components/alert/alert-root.svelte
index 140e402..c0a3acc 100644
--- a/src/lib/components/alert/alert-root.svelte
+++ b/src/lib/components/alert/alert-root.svelte
@@ -94,7 +94,7 @@
 <HtmlAtom
 	preset="alert"
 	class={[
-		'alert relative flex gap-3 rounded-md border p-4 transition-all duration-200',
+		'alert border-border relative flex gap-3 rounded-md border p-4 transition-all duration-200',
 		// Base styles
 		'bg-background text-foreground',
 		// State styles
diff --git a/src/lib/components/alert/alert-title.svelte b/src/lib/components/alert/alert-title.svelte
index c27d74f..e29ba01 100644
--- a/src/lib/components/alert/alert-title.svelte
+++ b/src/lib/components/alert/alert-title.svelte
@@ -38,7 +38,7 @@
 	{as}
 	{bond}
 	preset="alert.title"
-	class={['alert-title text-sm leading-tight font-medium', '$preset', klass]}
+	class={['alert-title border-border text-sm leading-tight font-medium', '$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	animate={animate?.bind(bond.state)}
diff --git a/src/lib/components/badge/badge.svelte b/src/lib/components/badge/badge.svelte
index 6d331d0..076075d 100644
--- a/src/lib/components/badge/badge.svelte
+++ b/src/lib/components/badge/badge.svelte
@@ -8,7 +8,7 @@
 <HtmlAtom
 	preset="badge"
 	class={[
-		'bg-foreground/10 text-foreground inline-flex h-auto items-center rounded-full px-2.5 py-0.5 text-xs font-medium',
+		'bg-foreground/10 border-border text-foreground inline-flex h-auto items-center rounded-full px-2.5 py-0.5 text-xs font-medium',
 		'$preset',
 		klass
 	]}
diff --git a/src/lib/components/breadcrumb/breadcrumb-item.svelte b/src/lib/components/breadcrumb/breadcrumb-item.svelte
index 9720a56..fe5f350 100644
--- a/src/lib/components/breadcrumb/breadcrumb-item.svelte
+++ b/src/lib/components/breadcrumb/breadcrumb-item.svelte
@@ -9,7 +9,7 @@
 	{href}
 	preset="breadcrumb.item"
 	class={[
-		'hover:text-primary hover:bg-primary/5 flex gap-2 rounded-lg px-2 py-1',
+		'hover:text-primary hover:bg-primary/5 border-border flex gap-2 rounded-lg px-2 py-1',
 		'$preset',
 		klass
 	]}
diff --git a/src/lib/components/breadcrumb/breadcrumb-root.svelte b/src/lib/components/breadcrumb/breadcrumb-root.svelte
index fb32958..3053adc 100644
--- a/src/lib/components/breadcrumb/breadcrumb-root.svelte
+++ b/src/lib/components/breadcrumb/breadcrumb-root.svelte
@@ -7,7 +7,7 @@
 <HtmlAtom
 	{as}
 	preset="breadcrumb"
-	class={['flex flex-nowrap items-center gap-1', '$preset', klass]}
+	class={['border-border flex flex-nowrap items-center gap-1', '$preset', klass]}
 	data-kind="breadcrumb-root"
 	{...restProps}
 >
diff --git a/src/lib/components/breadcrumb/breadcrumb-separator.svelte b/src/lib/components/breadcrumb/breadcrumb-separator.svelte
index 32a092f..97d0149 100644
--- a/src/lib/components/breadcrumb/breadcrumb-separator.svelte
+++ b/src/lib/components/breadcrumb/breadcrumb-separator.svelte
@@ -7,7 +7,7 @@
 <HtmlAtom
 	{as}
 	preset="breadcrumb.separator"
-	class={['text-stroke-0/50 px-0', '$preset', klass]}
+	class={['text-stroke-0/50 border-border px-0', '$preset', klass]}
 	data-kind="breadcrumb-separator"
 	{...restProps}
 >
diff --git a/src/lib/components/button/button.svelte b/src/lib/components/button/button.svelte
index 9f561ca..54ef1b1 100644
--- a/src/lib/components/button/button.svelte
+++ b/src/lib/components/button/button.svelte
@@ -21,7 +21,7 @@
 	{preset}
 	as="button"
 	class={[
-		'button text-primary-foreground bg-primary hover:bg-primary/95 active:bg-primary/90 disabled:bg-muted disabled:text-muted-foreground w-fit cursor-pointer rounded-md px-3 py-2 transition-colors duration-200',
+		'button text-primary-foreground bg-primary border-border hover:bg-primary/95 active:bg-primary/90 disabled:bg-muted disabled:text-muted-foreground w-fit cursor-pointer rounded-md px-3 py-2 transition-colors duration-200',
 		'$preset',
 		klass
 	]}
diff --git a/src/lib/components/card/card-body.svelte b/src/lib/components/card/card-body.svelte
index 39ce91c..92594ba 100644
--- a/src/lib/components/card/card-body.svelte
+++ b/src/lib/components/card/card-body.svelte
@@ -32,7 +32,7 @@
 <HtmlAtom
 	{bond}
 	preset="card.content"
-	class={['card-content px-4', '$preset', klass]}
+	class={['card-content border-border px-4', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
diff --git a/src/lib/components/card/card-description.svelte b/src/lib/components/card/card-description.svelte
index 68609f2..5e52b79 100644
--- a/src/lib/components/card/card-description.svelte
+++ b/src/lib/components/card/card-description.svelte
@@ -35,7 +35,7 @@
 	{as}
 	{bond}
 	preset="card.description"
-	class={['card-description text-sm text-gray-500', '$preset', klass]}
+	class={['card-description border-border text-sm text-gray-500', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
diff --git a/src/lib/components/card/card-footer.svelte b/src/lib/components/card/card-footer.svelte
index 624ba59..d85891f 100644
--- a/src/lib/components/card/card-footer.svelte
+++ b/src/lib/components/card/card-footer.svelte
@@ -35,7 +35,7 @@
 	{as}
 	{bond}
 	preset="card.footer"
-	class={['card-footer flex items-center gap-2 px-4 py-4', '$preset', klass]}
+	class={['card-footer border-border flex items-center gap-2 px-4 py-4', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
diff --git a/src/lib/components/card/card-header.svelte b/src/lib/components/card/card-header.svelte
index 9c2d90b..d873bba 100644
--- a/src/lib/components/card/card-header.svelte
+++ b/src/lib/components/card/card-header.svelte
@@ -35,7 +35,7 @@
 	{as}
 	{bond}
 	preset="card.header"
-	class={['card-header flex flex-col space-y-1.5 px-4 py-4', '$preset', klass]}
+	class={['card-header border-border flex flex-col space-y-1.5 px-4 py-4', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
diff --git a/src/lib/components/card/card-media.svelte b/src/lib/components/card/card-media.svelte
index bd5e4b7..0fe1cc9 100644
--- a/src/lib/components/card/card-media.svelte
+++ b/src/lib/components/card/card-media.svelte
@@ -35,7 +35,7 @@
 	{as}
 	{bond}
 	preset="card.media"
-	class={['card-media overflow-hidden', '$preset', klass]}
+	class={['card-media border-border overflow-hidden', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
diff --git a/src/lib/components/card/card-subtitle.svelte b/src/lib/components/card/card-subtitle.svelte
index 827cff7..24085a8 100644
--- a/src/lib/components/card/card-subtitle.svelte
+++ b/src/lib/components/card/card-subtitle.svelte
@@ -35,7 +35,7 @@
 	{as}
 	{bond}
 	preset="card.subtitle"
-	class={['card-subtitle text-sm font-medium text-gray-600', '$preset', klass]}
+	class={['card-subtitle border-border text-sm font-medium text-gray-600', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
diff --git a/src/lib/components/card/card-title.svelte b/src/lib/components/card/card-title.svelte
index 371a783..8bc7c85 100644
--- a/src/lib/components/card/card-title.svelte
+++ b/src/lib/components/card/card-title.svelte
@@ -35,7 +35,11 @@
 	{as}
 	{bond}
 	preset="card.title"
-	class={['card-title text-lg leading-none font-semibold tracking-tight', '$preset', klass]}
+	class={[
+		'card-title border-border text-lg leading-none font-semibold tracking-tight',
+		'$preset',
+		klass
+	]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
diff --git a/src/lib/components/collapsible/collapsible-body.svelte b/src/lib/components/collapsible/collapsible-body.svelte
index 6f5c4f3..b06bed5 100644
--- a/src/lib/components/collapsible/collapsible-body.svelte
+++ b/src/lib/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)}
diff --git a/src/lib/components/collapsible/collapsible-header.svelte b/src/lib/components/collapsible/collapsible-header.svelte
index 9bef5d2..9d0db42 100644
--- a/src/lib/components/collapsible/collapsible-header.svelte
+++ b/src/lib/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)}
diff --git a/src/lib/components/collapsible/collapsible-indicator.svelte b/src/lib/components/collapsible/collapsible-indicator.svelte
index ed2308b..5f007b3 100644
--- a/src/lib/components/collapsible/collapsible-indicator.svelte
+++ b/src/lib/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)}
diff --git a/src/lib/components/collapsible/collapsible-root.svelte b/src/lib/components/collapsible/collapsible-root.svelte
index 1ea283f..66c5209 100644
--- a/src/lib/components/collapsible/collapsible-root.svelte
+++ b/src/lib/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)}
diff --git a/src/lib/components/combobox/combobox-control.svelte b/src/lib/components/combobox/combobox-control.svelte
index ddd2516..9e13454 100644
--- a/src/lib/components/combobox/combobox-control.svelte
+++ b/src/lib/components/combobox/combobox-control.svelte
@@ -40,7 +40,7 @@
 <Input.Control
 	{value}
 	preset="combobox.control"
-	class={['flex-1 py-1', '$preset', klass]}
+	class={['border-border flex-1 py-1', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
diff --git a/src/lib/components/combobox/combobox-trigger.svelte b/src/lib/components/combobox/combobox-trigger.svelte
index f2a38e2..cc9c10f 100644
--- a/src/lib/components/combobox/combobox-trigger.svelte
+++ b/src/lib/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)}
diff --git a/src/lib/components/combobox/compobox-item.svelte b/src/lib/components/combobox/compobox-item.svelte
index 19da818..802ce90 100644
--- a/src/lib/components/combobox/compobox-item.svelte
+++ b/src/lib/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)}
diff --git a/src/lib/components/container/container.svelte b/src/lib/components/container/container.svelte
index aaf438b..e28abf9 100644
--- a/src/lib/components/container/container.svelte
+++ b/src/lib/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)}
diff --git a/src/lib/components/datagrid/datagrid-body.svelte b/src/lib/components/datagrid/datagrid-body.svelte
index 8eb8e21..fbbd8e8 100644
--- a/src/lib/components/datagrid/datagrid-body.svelte
+++ b/src/lib/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)}
diff --git a/src/lib/components/datagrid/datagrid-footer.svelte b/src/lib/components/datagrid/datagrid-footer.svelte
index 3d003dc..92bb8e6 100644
--- a/src/lib/components/datagrid/datagrid-footer.svelte
+++ b/src/lib/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)}
diff --git a/src/lib/components/datagrid/datagrid-header.svelte b/src/lib/components/datagrid/datagrid-header.svelte
index 831d6cf..5805515 100644
--- a/src/lib/components/datagrid/datagrid-header.svelte
+++ b/src/lib/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)}
diff --git a/src/lib/components/datagrid/datagrid-root.svelte b/src/lib/components/datagrid/datagrid-root.svelte
index 419c79b..46bf0c6 100644
--- a/src/lib/components/datagrid/datagrid-root.svelte
+++ b/src/lib/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)}
diff --git a/src/lib/components/datagrid/td/datagrid-td.svelte b/src/lib/components/datagrid/td/datagrid-td.svelte
index 049d414..12eebb0 100644
--- a/src/lib/components/datagrid/td/datagrid-td.svelte
+++ b/src/lib/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)}
diff --git a/src/lib/components/datagrid/th/datagrid-th-sort-icon.svelte b/src/lib/components/datagrid/th/datagrid-th-sort-icon.svelte
index 75285b7..1d45d02 100644
--- a/src/lib/components/datagrid/th/datagrid-th-sort-icon.svelte
+++ b/src/lib/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)}
diff --git a/src/lib/components/datagrid/th/datagrid-th.svelte b/src/lib/components/datagrid/th/datagrid-th.svelte
index 326a358..646c216 100644
--- a/src/lib/components/datagrid/th/datagrid-th.svelte
+++ b/src/lib/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
diff --git a/src/lib/components/dialog/dialog-body.svelte b/src/lib/components/dialog/dialog-body.svelte
index 06c9aab..f858fe6 100644
--- a/src/lib/components/dialog/dialog-body.svelte
+++ b/src/lib/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)}
diff --git a/src/lib/components/dialog/dialog-close-button.svelte b/src/lib/components/dialog/dialog-close-button.svelte
index 4daef51..f0fc1c8 100644
--- a/src/lib/components/dialog/dialog-close-button.svelte
+++ b/src/lib/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)}
diff --git a/src/lib/components/dialog/dialog-description.svelte b/src/lib/components/dialog/dialog-description.svelte
index 931ad38..346a760 100644
--- a/src/lib/components/dialog/dialog-description.svelte
+++ b/src/lib/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)}
diff --git a/src/lib/components/dialog/dialog-footer.svelte b/src/lib/components/dialog/dialog-footer.svelte
index 7258c65..f2c8443 100644
--- a/src/lib/components/dialog/dialog-footer.svelte
+++ b/src/lib/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)}
diff --git a/src/lib/components/dialog/dialog-header.svelte b/src/lib/components/dialog/dialog-header.svelte
index 1bf7432..13fe73b 100644
--- a/src/lib/components/dialog/dialog-header.svelte
+++ b/src/lib/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)}
diff --git a/src/lib/components/dialog/dialog-root.svelte b/src/lib/components/dialog/dialog-root.svelte
index 12a719d..3b8f3f3 100644
--- a/src/lib/components/dialog/dialog-root.svelte
+++ b/src/lib/components/dialog/dialog-root.svelte
@@ -94,7 +94,7 @@
 	preset="dialog"
 	portal="root.l1"
 	class={[
-		'pointer-events-auto fixed top-0 left-0 flex h-full w-full items-center justify-center bg-neutral-900/10 opacity-0',
+		'border-border pointer-events-auto fixed top-0 left-0 flex h-full w-full items-center justify-center bg-neutral-900/10 opacity-0',
 		!open && 'pointer-events-none',
 		'$preset',
 		klass
diff --git a/src/lib/components/dialog/dialog-title.svelte b/src/lib/components/dialog/dialog-title.svelte
index cbc2a10..bb0b7a0 100644
--- a/src/lib/components/dialog/dialog-title.svelte
+++ b/src/lib/components/dialog/dialog-title.svelte
@@ -34,7 +34,7 @@
 	{as}
 	{bond}
 	preset="dialog.title"
-	class={['$preset', klass]}
+	class={['border-border', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
diff --git a/src/lib/components/drawer/drawer-backdrop.svelte b/src/lib/components/drawer/drawer-backdrop.svelte
index 19e7895..1bae55c 100644
--- a/src/lib/components/drawer/drawer-backdrop.svelte
+++ b/src/lib/components/drawer/drawer-backdrop.svelte
@@ -36,7 +36,7 @@
 <HtmlAtom
 	{bond}
 	preset="drawer.backdrop"
-	class={['absolute inset-0 z-0 bg-black/30', '$preset', klass]}
+	class={['border-border absolute inset-0 z-0 bg-black/30', '$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	enter={enter?.bind(bond.state)}
diff --git a/src/lib/components/drawer/drawer-body.svelte b/src/lib/components/drawer/drawer-body.svelte
index 97c533f..3d1649b 100644
--- a/src/lib/components/drawer/drawer-body.svelte
+++ b/src/lib/components/drawer/drawer-body.svelte
@@ -43,7 +43,7 @@
 <HtmlAtom
 	{bond}
 	preset="drawer.body"
-	class={['$preset', klass]}
+	class={['border-border', '$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	enter={enter?.bind(bond.state)}
diff --git a/src/lib/components/drawer/drawer-description.svelte b/src/lib/components/drawer/drawer-description.svelte
index 7d70ec2..8f4252e 100644
--- a/src/lib/components/drawer/drawer-description.svelte
+++ b/src/lib/components/drawer/drawer-description.svelte
@@ -44,7 +44,7 @@
 	{as}
 	{bond}
 	preset="drawer.description"
-	class={['$preset', klass]}
+	class={['border-border', '$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	enter={enter?.bind(bond.state)}
diff --git a/src/lib/components/drawer/drawer-footer.svelte b/src/lib/components/drawer/drawer-footer.svelte
index a7485b1..01968b9 100644
--- a/src/lib/components/drawer/drawer-footer.svelte
+++ b/src/lib/components/drawer/drawer-footer.svelte
@@ -41,7 +41,7 @@
 
 <HtmlAtom
 	{bond}
-	class={['$preset', klass]}
+	class={['border-border', '$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	enter={enter?.bind(bond.state)}
diff --git a/src/lib/components/drawer/drawer-header.svelte b/src/lib/components/drawer/drawer-header.svelte
index 1ee254b..39d1fe6 100644
--- a/src/lib/components/drawer/drawer-header.svelte
+++ b/src/lib/components/drawer/drawer-header.svelte
@@ -42,7 +42,7 @@
 <HtmlAtom
 	{bond}
 	preset="drawer.header"
-	class={['$preset', klass]}
+	class={['border-border', '$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	enter={enter?.bind(bond.state)}
diff --git a/src/lib/components/drawer/drawer-root.svelte b/src/lib/components/drawer/drawer-root.svelte
index 4c08a6b..a1a8e3f 100644
--- a/src/lib/components/drawer/drawer-root.svelte
+++ b/src/lib/components/drawer/drawer-root.svelte
@@ -95,7 +95,7 @@
 	portal="root.l1"
 	preset="drawer"
 	class={[
-		'pointer-events-auto h-full w-full overflow-hidden bg-transparent',
+		'border-border pointer-events-auto h-full w-full overflow-hidden bg-transparent',
 		!open && 'pointer-events-none',
 		'$preset',
 		klass
diff --git a/src/lib/components/drawer/drawer-title.svelte b/src/lib/components/drawer/drawer-title.svelte
index 7719a51..27e356f 100644
--- a/src/lib/components/drawer/drawer-title.svelte
+++ b/src/lib/components/drawer/drawer-title.svelte
@@ -44,7 +44,7 @@
 	{as}
 	{bond}
 	preset="drawer.title"
-	class={['$preset', klass]}
+	class={['border-border', '$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	enter={enter?.bind(bond.state)}
diff --git a/src/lib/components/dropdown/dropdown-placeholder.svelte b/src/lib/components/dropdown/dropdown-placeholder.svelte
index bac92bc..bcf64c3 100644
--- a/src/lib/components/dropdown/dropdown-placeholder.svelte
+++ b/src/lib/components/dropdown/dropdown-placeholder.svelte
@@ -29,7 +29,7 @@
 		{bond}
 		preset="dropdown.placeholder"
 		class={[
-			'absolute inset-0 flex h-full w-full items-center px-2 leading-1 opacity-50 outline-none',
+			'border-border absolute inset-0 flex h-full w-full items-center px-2 leading-1 opacity-50 outline-none',
 			'$preset',
 			klass
 		]}
diff --git a/src/lib/components/dropdown/dropdown-query.svelte b/src/lib/components/dropdown/dropdown-query.svelte
index b2ddf7d..4601301 100644
--- a/src/lib/components/dropdown/dropdown-query.svelte
+++ b/src/lib/components/dropdown/dropdown-query.svelte
@@ -38,7 +38,7 @@
 	);
 </script>
 
-<Input.Value
+<Input.Control
 	bind:value={bond.state.query}
 	{bond}
 	preset="dropdown.query"
diff --git a/src/lib/components/dropdown/dropdown-trigger.svelte b/src/lib/components/dropdown/dropdown-trigger.svelte
index 984bc4d..9e7def3 100644
--- a/src/lib/components/dropdown/dropdown-trigger.svelte
+++ b/src/lib/components/dropdown/dropdown-trigger.svelte
@@ -39,7 +39,7 @@
 	{as}
 	{bond}
 	preset="dropdown.trigger"
-	class={['relative flex h-auto min-h-10 flex-wrap items-center', '$preset', klass]}
+	class={['border-border relative flex h-auto min-h-10 flex-wrap items-center', '$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	enter={enter?.bind(bond.state)}
diff --git a/src/lib/components/dropdown/dropdown-value.svelte b/src/lib/components/dropdown/dropdown-value.svelte
index f828758..e3decc9 100644
--- a/src/lib/components/dropdown/dropdown-value.svelte
+++ b/src/lib/components/dropdown/dropdown-value.svelte
@@ -39,7 +39,7 @@
 	{bond}
 	preset="dropdown.value"
 	class={[
-		'dropdown-value bg-foreground/5 inline-flex flex-nowrap items-center gap-1 rounded-xs px-1 whitespace-nowrap',
+		'dropdown-value border-border bg-foreground/5 inline-flex flex-nowrap items-center gap-1 rounded-xs px-1 whitespace-nowrap',
 		'$preset',
 		klass
 	]}
diff --git a/src/lib/components/list/list-group.svelte b/src/lib/components/list/list-group.svelte
index d10b42e..e86f08e 100644
--- a/src/lib/components/list/list-group.svelte
+++ b/src/lib/components/list/list-group.svelte
@@ -8,7 +8,7 @@
 <HtmlAtom
 	preset="list.group"
 	class={[
-		'rounded-b-inherit rounded-t-inherit flex flex-col',
+		'rounded-b-inherit rounded-t-inherit border-border flex flex-col',
 		'$preset',
 		toClassValue.apply(null, [klass, {}])
 	]}
diff --git a/src/lib/components/list/list-item.svelte b/src/lib/components/list/list-item.svelte
index a640752..1b44936 100644
--- a/src/lib/components/list/list-item.svelte
+++ b/src/lib/components/list/list-item.svelte
@@ -13,7 +13,7 @@
 <HtmlAtom
 	{as}
 	preset={presetKey}
-	class={['flex w-full gap-2 px-4 py-1', '$preset', klass]}
+	class={['border-border flex w-full gap-2 px-4 py-1', '$preset', klass]}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/list/list-root.svelte b/src/lib/components/list/list-root.svelte
index d0f5bc9..0146750 100644
--- a/src/lib/components/list/list-root.svelte
+++ b/src/lib/components/list/list-root.svelte
@@ -4,6 +4,11 @@
 	let { class: klass = '', as = 'ul' as T, children = undefined, ...restProps } = $props();
 </script>
 
-<HtmlAtom {as} preset="list.root" class={['flex flex-col', '$preset', klass]} {...restProps}>
+<HtmlAtom
+	{as}
+	preset="list.root"
+	class={['border-border flex flex-col', '$preset', klass]}
+	{...restProps}
+>
 	{@render children?.()}
 </HtmlAtom>
diff --git a/src/lib/components/list/list-title.svelte b/src/lib/components/list/list-title.svelte
index bd36685..5ab1bd4 100644
--- a/src/lib/components/list/list-title.svelte
+++ b/src/lib/components/list/list-title.svelte
@@ -7,7 +7,7 @@
 <HtmlAtom
 	{as}
 	preset="list.title"
-	class={['mb-1 flex w-full px-6 py-1 font-medium', '$preset', klass]}
+	class={['border-border mb-1 flex w-full px-6 py-1 font-medium', '$preset', klass]}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/menu/menu-list.svelte b/src/lib/components/menu/menu-list.svelte
index 502f7c1..92290ae 100644
--- a/src/lib/components/menu/menu-list.svelte
+++ b/src/lib/components/menu/menu-list.svelte
@@ -26,7 +26,7 @@
 	{base}
 	{bond}
 	preset="menu.list"
-	class={['bg-background overflow-hidden p-0', '$preset', klass]}
+	class={['bg-background border-border overflow-hidden p-0', '$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	enter={enter?.bind(bond.state)}
diff --git a/src/lib/components/popover/popover-arrow.svelte b/src/lib/components/popover/popover-arrow.svelte
index 1a5e675..59bbe84 100644
--- a/src/lib/components/popover/popover-arrow.svelte
+++ b/src/lib/components/popover/popover-arrow.svelte
@@ -90,7 +90,7 @@
 <HtmlAtom
 	{bond}
 	preset="popover.arrow"
-	class={['text-border pointer-events-none absolute opacity-0', '$preset', klass]}
+	class={['text-border border-border pointer-events-none absolute opacity-0', '$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	animate={animate?.bind(bond.state)}
diff --git a/src/lib/components/popover/popover-content.svelte b/src/lib/components/popover/popover-content.svelte
index 3c9de85..387bc56 100644
--- a/src/lib/components/popover/popover-content.svelte
+++ b/src/lib/components/popover/popover-content.svelte
@@ -130,7 +130,7 @@
 		{bond}
 		preset="popover.content"
 		class={[
-			'popover-content border-border bg-background rounded-md border p-2 opacity-0 shadow-lg',
+			'popover-content bg-background border-border rounded-md border p-2 opacity-0 shadow-lg',
 			'$preset',
 			klass
 		]}
diff --git a/src/lib/components/popover/popover-indicator.svelte b/src/lib/components/popover/popover-indicator.svelte
index 8932d08..4c97a2b 100644
--- a/src/lib/components/popover/popover-indicator.svelte
+++ b/src/lib/components/popover/popover-indicator.svelte
@@ -24,7 +24,7 @@
 <HtmlAtom
 	{bond}
 	preset="popover.indicator"
-	class={['flex items-center justify-center', '$preset', klass]}
+	class={['border-border flex items-center justify-center', '$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	animate={animate?.bind(bond.state)}
diff --git a/src/lib/components/popover/popover-trigger.svelte b/src/lib/components/popover/popover-trigger.svelte
index da265fe..9fb3e90 100644
--- a/src/lib/components/popover/popover-trigger.svelte
+++ b/src/lib/components/popover/popover-trigger.svelte
@@ -42,7 +42,7 @@
 	{as}
 	{bond}
 	{preset}
-	class={['flex w-fit cursor-pointer rounded-md p-2', '$preset', klass]}
+	class={['border-border flex w-fit cursor-pointer rounded-md p-2', '$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	animate={animate?.bind(bond.state)}
diff --git a/src/lib/components/portal/portal-inner.svelte b/src/lib/components/portal/portal-inner.svelte
index 6f0680c..b659137 100644
--- a/src/lib/components/portal/portal-inner.svelte
+++ b/src/lib/components/portal/portal-inner.svelte
@@ -33,7 +33,7 @@
 <HtmlAtom
 	{bond}
 	preset="portal.inner"
-	class={['relative size-full', '$preset', klass]}
+	class={['border-border relative size-full', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
diff --git a/src/lib/components/portal/portal-root.svelte b/src/lib/components/portal/portal-root.svelte
index 7a50102..2891473 100644
--- a/src/lib/components/portal/portal-root.svelte
+++ b/src/lib/components/portal/portal-root.svelte
@@ -75,7 +75,7 @@
 <HtmlAtom
 	{bond}
 	preset="portal"
-	class={['pointer-events-none', '$preset', klass]}
+	class={['border-border pointer-events-none', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
diff --git a/src/lib/components/sidebar/sidebar-root.svelte b/src/lib/components/sidebar/sidebar-root.svelte
index d925d29..53bd642 100644
--- a/src/lib/components/sidebar/sidebar-root.svelte
+++ b/src/lib/components/sidebar/sidebar-root.svelte
@@ -74,7 +74,7 @@
 <HtmlAtom
 	{bond}
 	preset="sidebar"
-	class={['flex min-h-full w-full flex-1 flex-nowrap', '$preset', klass]}
+	class={['border-border flex min-h-full w-full flex-1 flex-nowrap', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
diff --git a/src/lib/components/stack/stack-item.svelte b/src/lib/components/stack/stack-item.svelte
index 5ff2bbf..793bf40 100644
--- a/src/lib/components/stack/stack-item.svelte
+++ b/src/lib/components/stack/stack-item.svelte
@@ -4,6 +4,10 @@
 	let { class: klass = '', children, ...restProps } = $props();
 </script>
 
-<HtmlAtom preset="stack.item" class={['stack-item flex flex-1', '$preset', klass]} {...restProps}>
+<HtmlAtom
+	preset="stack.item"
+	class={['stack-item border-border flex flex-1', '$preset', klass]}
+	{...restProps}
+>
 	{@render children?.()}
 </HtmlAtom>
diff --git a/src/lib/components/stack/stack-root.svelte b/src/lib/components/stack/stack-root.svelte
index 560848e..f4141c9 100644
--- a/src/lib/components/stack/stack-root.svelte
+++ b/src/lib/components/stack/stack-root.svelte
@@ -18,6 +18,10 @@
 	}: HtmlAtomProps<E, B> & HTMLAttributes<Element> = $props();
 </script>
 
-<HtmlAtom preset="stack.root" class={['stack-root flex flex-1', '$preset', klass]} {...restProps}>
+<HtmlAtom
+	preset="stack.root"
+	class={['stack-root border-border flex flex-1', '$preset', klass]}
+	{...restProps}
+>
 	{@render children?.()}
 </HtmlAtom>
diff --git a/src/lib/components/tabs/tab/tab-body.svelte b/src/lib/components/tabs/tab/tab-body.svelte
index 17a3da5..1b891fd 100644
--- a/src/lib/components/tabs/tab/tab-body.svelte
+++ b/src/lib/components/tabs/tab/tab-body.svelte
@@ -45,7 +45,7 @@
 <HtmlAtom
 	preset="tab.body"
 	class={[
-		'tab-body pointer-events-auto flex h-auto w-full min-w-full flex-1 flex-col',
+		'tab-body border-border pointer-events-auto flex h-auto w-full min-w-full flex-1 flex-col',
 		'$preset',
 		klass
 	]}
diff --git a/src/lib/components/tabs/tab/tab-description.svelte b/src/lib/components/tabs/tab/tab-description.svelte
index 3423a6d..ac9cb6d 100644
--- a/src/lib/components/tabs/tab/tab-description.svelte
+++ b/src/lib/components/tabs/tab/tab-description.svelte
@@ -36,7 +36,7 @@
 <HtmlAtom
 	{bond}
 	preset="tab.description"
-	class={['$preset', klass]}
+	class={['border-border', '$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	enter={enter?.bind(bond.state)}
diff --git a/src/lib/components/tabs/tab/tab-header.svelte b/src/lib/components/tabs/tab/tab-header.svelte
index c0526b3..1cb3cc1 100644
--- a/src/lib/components/tabs/tab/tab-header.svelte
+++ b/src/lib/components/tabs/tab/tab-header.svelte
@@ -58,7 +58,7 @@
 	preset="tab.header"
 	as="button"
 	class={[
-		'text-foreground/60 hover:text-foreground/80 active:text-foreground/100 flex cursor-pointer items-center px-2 py-2 text-sm font-medium transition-colors duration-100',
+		'border-border text-foreground/60 hover:text-foreground/80 active:text-foreground/100 flex cursor-pointer items-center px-2 py-2 text-sm font-medium transition-colors duration-100',
 		isActive && 'text-primary',
 		isDisabled && 'opacity-50',
 		'$preset',
diff --git a/src/lib/components/tabs/tab/tab-root.svelte b/src/lib/components/tabs/tab/tab-root.svelte
index b77a244..18ec135 100644
--- a/src/lib/components/tabs/tab/tab-root.svelte
+++ b/src/lib/components/tabs/tab/tab-root.svelte
@@ -67,7 +67,12 @@
 	<Stack.Item
 		{bond}
 		preset="tab"
-		class={['tab-root flex flex-col', !isActive && 'pointer-events-none', '$preset', klass]}
+		class={[
+			'border-border tab-root flex flex-col',
+			!isActive && 'pointer-events-none',
+			'$preset',
+			klass
+		]}
 		onmount={onmount?.bind(bond.state)}
 		ondestroy={ondestroy?.bind(bond.state)}
 		enter={enter?.bind(bond.state)}
diff --git a/src/lib/components/tabs/tabs-body.svelte b/src/lib/components/tabs/tabs-body.svelte
index f74f98d..1734aa0 100644
--- a/src/lib/components/tabs/tabs-body.svelte
+++ b/src/lib/components/tabs/tabs-body.svelte
@@ -27,7 +27,7 @@
 <Stack.Root
 	{bond}
 	preset="tabs.body"
-	class={['tabs-body relative flex-1', '$preset', klass]}
+	class={['tabs-body border-border relative flex-1', '$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	enter={enter?.bind(bond.state)}
diff --git a/src/lib/components/tabs/tabs-header.svelte b/src/lib/components/tabs/tabs-header.svelte
index dc9ffb0..2c72206 100644
--- a/src/lib/components/tabs/tabs-header.svelte
+++ b/src/lib/components/tabs/tabs-header.svelte
@@ -25,7 +25,7 @@
 <HtmlAtom
 	{bond}
 	preset="tabs.header"
-	class={['border-border relative flex min-w-full', '$preset', klass]}
+	class={['border-border border-border relative flex min-w-full', '$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	enter={enter?.bind(bond.state)}
diff --git a/src/lib/components/tabs/tabs-root.svelte b/src/lib/components/tabs/tabs-root.svelte
index 690554d..d8beec6 100644
--- a/src/lib/components/tabs/tabs-root.svelte
+++ b/src/lib/components/tabs/tabs-root.svelte
@@ -53,7 +53,7 @@
 <HtmlAtom
 	{bond}
 	preset="tabs"
-	class={['flex w-full flex-1 flex-col gap-2', '$preset', klass]}
+	class={['border-border flex w-full flex-1 flex-col gap-2', '$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	enter={enter?.bind(bond.state)}
diff --git a/src/lib/components/textarea/textarea-input.svelte b/src/lib/components/textarea/textarea-input.svelte
index 963e3a6..ab797e4 100644
--- a/src/lib/components/textarea/textarea-input.svelte
+++ b/src/lib/components/textarea/textarea-input.svelte
@@ -2,4 +2,5 @@
 	let { class: klass = '', value = $bindable(), ...restProps } = $props();
 </script>
 
-<textarea class={['w-full outline-none', '$preset', klass]} bind:value {...restProps}></textarea>
+<textarea class={['border-border w-full outline-none', '$preset', klass]} bind:value {...restProps}
+></textarea>
diff --git a/src/lib/components/toast/toast-description.svelte b/src/lib/components/toast/toast-description.svelte
index e9e6449..0cedb88 100644
--- a/src/lib/components/toast/toast-description.svelte
+++ b/src/lib/components/toast/toast-description.svelte
@@ -31,7 +31,7 @@
 	{as}
 	{bond}
 	preset="toast.description"
-	class={['$preset', klass]}
+	class={['border-border', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
diff --git a/src/lib/components/toast/toast-root.svelte b/src/lib/components/toast/toast-root.svelte
index 44244aa..7a4b5b5 100644
--- a/src/lib/components/toast/toast-root.svelte
+++ b/src/lib/components/toast/toast-root.svelte
@@ -61,7 +61,7 @@
 
 <HtmlAtom
 	{bond}
-	class={['$preset', klass]}
+	class={['border-border', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
diff --git a/src/lib/components/toast/toast-title.svelte b/src/lib/components/toast/toast-title.svelte
index 731d605..4caa6ec 100644
--- a/src/lib/components/toast/toast-title.svelte
+++ b/src/lib/components/toast/toast-title.svelte
@@ -30,7 +30,7 @@
 <HtmlAtom
 	{bond}
 	preset="toast.title"
-	class={['$preset', klass]}
+	class={['border-border', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
diff --git a/src/lib/components/tree/tree-body.svelte b/src/lib/components/tree/tree-body.svelte
index 6b4e9b1..fcaa8bc 100644
--- a/src/lib/components/tree/tree-body.svelte
+++ b/src/lib/components/tree/tree-body.svelte
@@ -37,7 +37,7 @@
 <HtmlAtom
 	{bond}
 	preset="tree.body"
-	class={['pl-4', '$preset', klass]}
+	class={['border-border pl-4', '$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	animate={animate?.bind(bond.state)}
diff --git a/src/lib/components/tree/tree-header.svelte b/src/lib/components/tree/tree-header.svelte
index 82b78e5..2012521 100644
--- a/src/lib/components/tree/tree-header.svelte
+++ b/src/lib/components/tree/tree-header.svelte
@@ -52,7 +52,7 @@
 <HtmlAtom
 	{bond}
 	preset="tree.header"
-	class={['cursor-pointer', '$preset', klass]}
+	class={['border-border cursor-pointer', '$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	animate={animate?.bind(bond.state)}
diff --git a/src/lib/components/tree/tree-indicator.svelte b/src/lib/components/tree/tree-indicator.svelte
index eed9e3c..0559ae4 100644
--- a/src/lib/components/tree/tree-indicator.svelte
+++ b/src/lib/components/tree/tree-indicator.svelte
@@ -37,7 +37,7 @@
 <HtmlAtom
 	{bond}
 	preset="tree.indicator"
-	class={['aspect-square h-fit', '$preset', klass]}
+	class={['border-border aspect-square h-fit', '$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	animate={animate?.bind(bond.state)}
diff --git a/src/lib/components/tree/tree-root.svelte b/src/lib/components/tree/tree-root.svelte
index f99f1d9..d46fcbb 100644
--- a/src/lib/components/tree/tree-root.svelte
+++ b/src/lib/components/tree/tree-root.svelte
@@ -67,7 +67,7 @@
 <HtmlAtom
 	{bond}
 	preset="tree"
-	class={['flex flex-col', '$preset', klass]}
+	class={['border-border flex flex-col', '$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	animate={animate?.bind(bond.state)}