chore: specify border color by default

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}
 >

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)}

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)}

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)}

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)}

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)}

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',

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)}

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)}

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
 	]}

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

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)}

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
 	]}

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
 	]}

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}
 >

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}
 >

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
 	]}

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)}

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)}

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)}

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)}

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)}

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)}

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)}

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)}

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)}

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)}

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)}

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)}

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)}

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)}

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)}

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)}

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)}

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)}

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)}

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)}

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)}

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

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)}

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)}

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)}

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)}