fix: add explicit border-border to border-width-only utilities

Components using directional border-width utilities (border-b, border-t,
border-l, border-r) relied on the global `* { border-color: var(--border) }`
rule in `@layer base`. When consumers import Tailwind CSS after app-shell
styles, Tailwind's preflight resets border-color via shorthand, causing
thick dark borders (currentColor).

Adding explicit `astw:border-border` at the utility layer ensures the
correct color regardless of CSS import order.

Affected components: Sheet, Table, CsvImporter, CommandPalette, DataTable,
DataTable.Toolbar.

Author: IzumiSy

packages/core/__snapshots__/src__components__sheet.test.tsx.snap

@@ -1,11 +1,11 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Table > snapshots > basic table with header and body 1`] = `"<div data-slot="table-container" class="astw:relative astw:w-full astw:overflow-x-auto"><table data-slot="table" class="astw:w-full astw:caption-bottom astw:text-sm"><thead data-slot="table-header" class="astw:[&amp;_tr]:border-b"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:transition-colors"><th data-slot="table-head" class="astw:text-foreground astw:h-10 astw:px-2 astw:first:pl-6 astw:last:pr-6 astw:text-left astw:align-middle astw:font-medium astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0">Name</th><th data-slot="table-head" class="astw:text-foreground astw:h-10 astw:px-2 astw:first:pl-6 astw:last:pr-6 astw:text-left astw:align-middle astw:font-medium astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0">Status</th></tr></thead><tbody data-slot="table-body" class="astw:[&amp;_tr:last-child]:border-0"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:transition-colors"><td data-slot="table-cell" class="astw:px-2 astw:py-2 astw:first:pl-6 astw:last:pr-6 astw:align-middle astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0">Item 1</td><td data-slot="table-cell" class="astw:px-2 astw:py-2 astw:first:pl-6 astw:last:pr-6 astw:align-middle astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0">Active</td></tr></tbody></table></div>"`;
+exports[`Table > snapshots > basic table with header and body 1`] = `"<div data-slot="table-container" class="astw:relative astw:w-full astw:overflow-x-auto"><table data-slot="table" class="astw:w-full astw:caption-bottom astw:text-sm"><thead data-slot="table-header" class="astw:[&amp;_tr]:border-b astw:[&amp;_tr]:border-border"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:border-border astw:transition-colors"><th data-slot="table-head" class="astw:text-foreground astw:h-10 astw:px-2 astw:first:pl-6 astw:last:pr-6 astw:text-left astw:align-middle astw:font-medium astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0">Name</th><th data-slot="table-head" class="astw:text-foreground astw:h-10 astw:px-2 astw:first:pl-6 astw:last:pr-6 astw:text-left astw:align-middle astw:font-medium astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0">Status</th></tr></thead><tbody data-slot="table-body" class="astw:[&amp;_tr:last-child]:border-0"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:border-border astw:transition-colors"><td data-slot="table-cell" class="astw:px-2 astw:py-2 astw:first:pl-6 astw:last:pr-6 astw:align-middle astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0">Item 1</td><td data-slot="table-cell" class="astw:px-2 astw:py-2 astw:first:pl-6 astw:last:pr-6 astw:align-middle astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0">Active</td></tr></tbody></table></div>"`;
 
-exports[`Table > snapshots > empty table 1`] = `"<div data-slot="table-container" class="astw:relative astw:w-full astw:overflow-x-auto"><table data-slot="table" class="astw:w-full astw:caption-bottom astw:text-sm"><thead data-slot="table-header" class="astw:[&amp;_tr]:border-b"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:transition-colors"><th data-slot="table-head" class="astw:text-foreground astw:h-10 astw:px-2 astw:first:pl-6 astw:last:pr-6 astw:text-left astw:align-middle astw:font-medium astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0">Name</th><th data-slot="table-head" class="astw:text-foreground astw:h-10 astw:px-2 astw:first:pl-6 astw:last:pr-6 astw:text-left astw:align-middle astw:font-medium astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0">Status</th></tr></thead><tbody data-slot="table-body" class="astw:[&amp;_tr:last-child]:border-0"></tbody></table></div>"`;
+exports[`Table > snapshots > empty table 1`] = `"<div data-slot="table-container" class="astw:relative astw:w-full astw:overflow-x-auto"><table data-slot="table" class="astw:w-full astw:caption-bottom astw:text-sm"><thead data-slot="table-header" class="astw:[&amp;_tr]:border-b astw:[&amp;_tr]:border-border"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:border-border astw:transition-colors"><th data-slot="table-head" class="astw:text-foreground astw:h-10 astw:px-2 astw:first:pl-6 astw:last:pr-6 astw:text-left astw:align-middle astw:font-medium astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0">Name</th><th data-slot="table-head" class="astw:text-foreground astw:h-10 astw:px-2 astw:first:pl-6 astw:last:pr-6 astw:text-left astw:align-middle astw:font-medium astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0">Status</th></tr></thead><tbody data-slot="table-body" class="astw:[&amp;_tr:last-child]:border-0"></tbody></table></div>"`;
 
-exports[`Table > snapshots > table with caption 1`] = `"<div data-slot="table-container" class="astw:relative astw:w-full astw:overflow-x-auto"><table data-slot="table" class="astw:w-full astw:caption-bottom astw:text-sm"><caption data-slot="table-caption" class="astw:text-muted-foreground astw:mt-4 astw:text-sm">A list of items</caption><thead data-slot="table-header" class="astw:[&amp;_tr]:border-b"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:transition-colors"><th data-slot="table-head" class="astw:text-foreground astw:h-10 astw:px-2 astw:first:pl-6 astw:last:pr-6 astw:text-left astw:align-middle astw:font-medium astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0">Name</th></tr></thead><tbody data-slot="table-body" class="astw:[&amp;_tr:last-child]:border-0"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:transition-colors"><td data-slot="table-cell" class="astw:px-2 astw:py-2 astw:first:pl-6 astw:last:pr-6 astw:align-middle astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0">Item</td></tr></tbody></table></div>"`;
+exports[`Table > snapshots > table with caption 1`] = `"<div data-slot="table-container" class="astw:relative astw:w-full astw:overflow-x-auto"><table data-slot="table" class="astw:w-full astw:caption-bottom astw:text-sm"><caption data-slot="table-caption" class="astw:text-muted-foreground astw:mt-4 astw:text-sm">A list of items</caption><thead data-slot="table-header" class="astw:[&amp;_tr]:border-b astw:[&amp;_tr]:border-border"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:border-border astw:transition-colors"><th data-slot="table-head" class="astw:text-foreground astw:h-10 astw:px-2 astw:first:pl-6 astw:last:pr-6 astw:text-left astw:align-middle astw:font-medium astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0">Name</th></tr></thead><tbody data-slot="table-body" class="astw:[&amp;_tr:last-child]:border-0"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:border-border astw:transition-colors"><td data-slot="table-cell" class="astw:px-2 astw:py-2 astw:first:pl-6 astw:last:pr-6 astw:align-middle astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0">Item</td></tr></tbody></table></div>"`;
 
-exports[`Table > snapshots > table with containerClassName 1`] = `"<div data-slot="table-container" class="astw:relative astw:w-full astw:overflow-x-auto custom-container"><table data-slot="table" class="astw:w-full astw:caption-bottom astw:text-sm"><thead data-slot="table-header" class="astw:[&amp;_tr]:border-b"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:transition-colors"><th data-slot="table-head" class="astw:text-foreground astw:h-10 astw:px-2 astw:first:pl-6 astw:last:pr-6 astw:text-left astw:align-middle astw:font-medium astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0">Name</th></tr></thead><tbody data-slot="table-body" class="astw:[&amp;_tr:last-child]:border-0"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:transition-colors"><td data-slot="table-cell" class="astw:px-2 astw:py-2 astw:first:pl-6 astw:last:pr-6 astw:align-middle astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0">Item</td></tr></tbody></table></div>"`;
+exports[`Table > snapshots > table with containerClassName 1`] = `"<div data-slot="table-container" class="astw:relative astw:w-full astw:overflow-x-auto custom-container"><table data-slot="table" class="astw:w-full astw:caption-bottom astw:text-sm"><thead data-slot="table-header" class="astw:[&amp;_tr]:border-b astw:[&amp;_tr]:border-border"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:border-border astw:transition-colors"><th data-slot="table-head" class="astw:text-foreground astw:h-10 astw:px-2 astw:first:pl-6 astw:last:pr-6 astw:text-left astw:align-middle astw:font-medium astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0">Name</th></tr></thead><tbody data-slot="table-body" class="astw:[&amp;_tr:last-child]:border-0"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:border-border astw:transition-colors"><td data-slot="table-cell" class="astw:px-2 astw:py-2 astw:first:pl-6 astw:last:pr-6 astw:align-middle astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0">Item</td></tr></tbody></table></div>"`;
 
-exports[`Table > snapshots > table with footer 1`] = `"<div data-slot="table-container" class="astw:relative astw:w-full astw:overflow-x-auto"><table data-slot="table" class="astw:w-full astw:caption-bottom astw:text-sm"><thead data-slot="table-header" class="astw:[&amp;_tr]:border-b"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:transition-colors"><th data-slot="table-head" class="astw:text-foreground astw:h-10 astw:px-2 astw:first:pl-6 astw:last:pr-6 astw:text-left astw:align-middle astw:font-medium astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0">Product</th><th data-slot="table-head" class="astw:text-foreground astw:h-10 astw:px-2 astw:first:pl-6 astw:last:pr-6 astw:text-left astw:align-middle astw:font-medium astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0">Price</th></tr></thead><tbody data-slot="table-body" class="astw:[&amp;_tr:last-child]:border-0"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:transition-colors"><td data-slot="table-cell" class="astw:px-2 astw:py-2 astw:first:pl-6 astw:last:pr-6 astw:align-middle astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0">Widget</td><td data-slot="table-cell" class="astw:px-2 astw:py-2 astw:first:pl-6 astw:last:pr-6 astw:align-middle astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0">$10</td></tr></tbody><tfoot data-slot="table-footer" class="astw:border-t astw:font-medium astw:[&amp;>tr]:last:border-b-0"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:transition-colors"><td data-slot="table-cell" class="astw:px-2 astw:py-2 astw:first:pl-6 astw:last:pr-6 astw:align-middle astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0">Total</td><td data-slot="table-cell" class="astw:px-2 astw:py-2 astw:first:pl-6 astw:last:pr-6 astw:align-middle astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0">$10</td></tr></tfoot></table></div>"`;
+exports[`Table > snapshots > table with footer 1`] = `"<div data-slot="table-container" class="astw:relative astw:w-full astw:overflow-x-auto"><table data-slot="table" class="astw:w-full astw:caption-bottom astw:text-sm"><thead data-slot="table-header" class="astw:[&amp;_tr]:border-b astw:[&amp;_tr]:border-border"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:border-border astw:transition-colors"><th data-slot="table-head" class="astw:text-foreground astw:h-10 astw:px-2 astw:first:pl-6 astw:last:pr-6 astw:text-left astw:align-middle astw:font-medium astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0">Product</th><th data-slot="table-head" class="astw:text-foreground astw:h-10 astw:px-2 astw:first:pl-6 astw:last:pr-6 astw:text-left astw:align-middle astw:font-medium astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0">Price</th></tr></thead><tbody data-slot="table-body" class="astw:[&amp;_tr:last-child]:border-0"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:border-border astw:transition-colors"><td data-slot="table-cell" class="astw:px-2 astw:py-2 astw:first:pl-6 astw:last:pr-6 astw:align-middle astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0">Widget</td><td data-slot="table-cell" class="astw:px-2 astw:py-2 astw:first:pl-6 astw:last:pr-6 astw:align-middle astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0">$10</td></tr></tbody><tfoot data-slot="table-footer" class="astw:border-t astw:border-border astw:font-medium astw:[&amp;>tr]:last:border-b-0"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:border-border astw:transition-colors"><td data-slot="table-cell" class="astw:px-2 astw:py-2 astw:first:pl-6 astw:last:pr-6 astw:align-middle astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0">Total</td><td data-slot="table-cell" class="astw:px-2 astw:py-2 astw:first:pl-6 astw:last:pr-6 astw:align-middle astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0">$10</td></tr></tfoot></table></div>"`;

packages/core/__snapshots__/src__components__table.test.tsx.snap

@@ -509,7 +509,7 @@ export function CommandPaletteContent({ navItems }: CommandPaletteContentProps)
         aria-describedby={undefined}
       >
         <Dialog.Title className="astw:sr-only">{t("commandPaletteSearch")}</Dialog.Title>
-        <div className="astw:flex astw:items-center astw:border-b astw:px-3 astw:py-1">
+        <div className="astw:flex astw:items-center astw:border-b astw:border-border astw:px-3 astw:py-1">
           <SearchIcon className="astw:mr-2 astw:h-4 astw:w-4 astw:shrink-0 astw:opacity-50" />
           {activeSearchSource && (
             <span className="astw:inline-flex astw:items-center astw:shrink-0 astw:rounded astw:bg-muted astw:px-1.5 astw:py-0.5 astw:mr-1.5 astw:text-xs astw:font-medium astw:text-muted-foreground">

packages/core/src/components/command-palette.tsx

@@ -209,7 +209,7 @@ function MappingStep({
       <div className="astw:overflow-y-auto astw:rounded-md astw:border astw:border-border">
         <table className="astw:w-full astw:text-sm">
           <thead>
-            <tr className="astw:border-b astw:bg-muted/50">
+            <tr className="astw:border-b astw:border-border astw:bg-muted/50">
               <th className="astw:w-10 astw:px-3 astw:py-2" />
               <th className="astw:px-3 astw:py-2 astw:text-left astw:font-medium astw:text-muted-foreground">
                 {t("mappingExpectedField")}
@@ -233,7 +233,7 @@ function MappingStep({
                 <tr
                   key={col.key}
                   className={cn(
-                    "astw:border-b last:astw:border-b-0 astw:transition-colors",
+                    "astw:border-b astw:border-border last:astw:border-b-0 astw:transition-colors",
                     !isMapped && col.required && "astw:bg-destructive/5",
                   )}
                 >
@@ -401,7 +401,7 @@ function ReviewStep({
           </thead>
           <tbody>
             {rawRows.map((row, rowIdx) => (
-              <tr key={rowIdx} className="astw:border-t">
+              <tr key={rowIdx} className="astw:border-t astw:border-border">
                 <td className="astw:px-3 astw:py-1 astw:text-muted-foreground">{rowIdx + 1}</td>
                 {activeMappings.map((m) => {
                   const colIdx = headerIndexMap.get(m.csvHeader);
@@ -718,12 +718,12 @@ export function CsvImporter<T extends CsvSchema>({
           <Drawer.Popup
             ref={drawerPopupRef}
             data-slot="csv-importer"
-            className="astw:bg-background astw:flex astw:flex-col astw:w-full astw:h-[70vh] astw:rounded-t-lg astw:border-t astw:shadow-lg astw:transition-transform astw:ease-[cubic-bezier(0.32,0.72,0,1)] astw:duration-[450ms] astw:[transform:translateY(var(--drawer-swipe-movement-y))] astw:data-ending-style:[transform:translateY(100%)] astw:data-starting-style:[transform:translateY(100%)]"
+            className="astw:bg-background astw:flex astw:flex-col astw:w-full astw:h-[70vh] astw:rounded-t-lg astw:border-t astw:border-border astw:shadow-lg astw:transition-transform astw:ease-[cubic-bezier(0.32,0.72,0,1)] astw:duration-[450ms] astw:[transform:translateY(var(--drawer-swipe-movement-y))] astw:data-ending-style:[transform:translateY(100%)] astw:data-starting-style:[transform:translateY(100%)]"
           >
             <PortalContainerContext.Provider value={drawerPopupRef}>
               <Drawer.Content data-slot="csv-importer-inner" className="astw:contents">
                 {/* Header: step indicators + title + close */}
-                <div className="astw:flex astw:items-center astw:justify-between astw:border-b astw:px-6 astw:py-4">
+                <div className="astw:flex astw:items-center astw:justify-between astw:border-b astw:border-border astw:px-6 astw:py-4">
                   <div className="astw:flex astw:items-center astw:gap-4">
                     <div className="astw:flex astw:items-center astw:gap-2">
                       {(["upload", "mapping", "review", "complete"] as const).map((s, idx) => (
@@ -808,7 +808,7 @@ export function CsvImporter<T extends CsvSchema>({
                 </div>
 
                 {/* Footer with navigation buttons */}
-                <div className="astw:flex astw:justify-between astw:border-t astw:px-6 astw:py-4">
+                <div className="astw:flex astw:justify-between astw:border-t astw:border-border astw:px-6 astw:py-4">
                   <div>
                     {step === "mapping" && (
                       <button

packages/core/src/components/csv-importer/CsvImporter.tsx

@@ -553,7 +553,10 @@ function DataTableFooter({ children, className }: { children: ReactNode; classNa
   return (
     <div
       data-slot="data-table-footer"
-      className={cn("astw:flex astw:items-center astw:border-t astw:px-4 astw:py-2", className)}
+      className={cn(
+        "astw:flex astw:items-center astw:border-t astw:border-border astw:px-4 astw:py-2",
+        className,
+      )}
     >
       {children}
     </div>

packages/core/src/components/data-table/data-table.tsx

@@ -21,7 +21,10 @@ function DataTableToolbar({ children, className }: { children: ReactNode; classN
   return (
     <div
       data-slot="data-table-toolbar"
-      className={cn("astw:flex astw:flex-col astw:gap-2 astw:border-b astw:p-2", className)}
+      className={cn(
+        "astw:flex astw:flex-col astw:gap-2 astw:border-b astw:border-border astw:p-2",
+        className,
+      )}
     >
       {children}
     </div>