@spaethtech/svelte-ui 0.3.1-dev.8.7f749c3 → 0.3.1-dev.9.88889c6

package/dist/components/Card.svelte

@@ -6,9 +6,9 @@
  *
  * Border + radius come from the shared tint tokens (the same scheme Input/DataTable use, so surfaces
  * match): the OUTER frame is the variant token at `--ui-tint-border` (rest) / `--ui-tint-border-hover`
- * (hover) — one calc for every variant, no `secondary` special case — and the inset Header/Footer
- * separators use that SAME rest calc, so the divider always matches the frame. `variant` sets the
- * border colour; `size` the padding.
+ * (hover) — one calc for every variant, no `secondary` special case — while inset Header/Footer
+ * separators stay soft (`--ui-border-color`), matching the library's other internal dividers.
+ * `variant` sets the border colour; `size` the padding.
  *
  * Background comes from `--ui-color-background` so the card reads as a raised panel over the page
  * body (matches Input, Dialog, tooltip surface tokens). Themes remap this token to their own

package/dist/components/CardFooter.svelte

@@ -30,12 +30,13 @@
   } & Omit<HTMLAttributes<HTMLDivElement>, "class"> = $props();
 
   const space: Record<Size, string> = { sm: "pt-2 mt-2", md: "pt-3 mt-3", lg: "pt-4 mt-4" };
-  // The separator matches the Card frame EXACTLY: the shared tint calc for every variant
-  // (variantToken at --ui-tint-border), identical to Card.svelte's border. (Previously the
-  // `secondary` default used the softer `--ui-border-color` (30%), which read visibly lighter than
-  // the frame and than in-card fields like Input/TextArea.)
+  // The separator is a SOFT internal divider, consistent with the other section splits/footers in the
+  // library (DatePicker/TimePicker/TimeRangeInput) — deliberately lighter than the Card frame + fields.
+  // Default (secondary) → the shared `--ui-border-color`; any other variant → that accent's tint.
   const sepColor = $derived(
-    `color-mix(in srgb, var(${variantToken[variant]}) var(--ui-tint-border), transparent)`,
+    variant === "secondary"
+      ? "var(--ui-border-color)"
+      : `color-mix(in srgb, var(${variantToken[variant]}) var(--ui-tint-border), transparent)`,
   );
 </script>
 

package/dist/components/CardHeader.svelte

@@ -30,12 +30,13 @@
   } & Omit<HTMLAttributes<HTMLDivElement>, "class"> = $props();
 
   const space: Record<Size, string> = { sm: "pb-2 mb-2", md: "pb-3 mb-3", lg: "pb-4 mb-4" };
-  // The separator matches the Card frame EXACTLY: the shared tint calc for every variant
-  // (variantToken at --ui-tint-border), identical to Card.svelte's border. (Previously the
-  // `secondary` default used the softer `--ui-border-color` (30%), which read visibly lighter than
-  // the frame and than in-card fields like Input/TextArea.)
+  // The separator is a SOFT internal divider, consistent with the other section splits/footers in the
+  // library (DatePicker/TimePicker/TimeRangeInput) — deliberately lighter than the Card frame + fields.
+  // Default (secondary) → the shared `--ui-border-color`; any other variant → that accent's tint.
   const sepColor = $derived(
-    `color-mix(in srgb, var(${variantToken[variant]}) var(--ui-tint-border), transparent)`,
+    variant === "secondary"
+      ? "var(--ui-border-color)"
+      : `color-mix(in srgb, var(${variantToken[variant]}) var(--ui-tint-border), transparent)`,
   );
 </script>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaethtech/svelte-ui",
-  "version": "0.3.1-dev.8.7f749c3",
+  "version": "0.3.1-dev.9.88889c6",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/spaethtech/svelte-ui.git"