@wpic/ui 0.3.6 → 0.3.7

package/dist/wpic-ui.css

@@ -56,6 +56,21 @@
 .border-strong { border-color: var(--border-strong); }
 .border-hover  { border-color: var(--border-hover); }
 
+/* WCard owns its border colors. This avoids a missing host Tailwind utility
+   falling back to currentColor and producing a black header separator. */
+.wpic-card--bordered {
+  border: 1px solid var(--border-strong);
+}
+.wpic-card--borderless {
+  border: 0;
+}
+.wpic-card__header {
+  border-bottom: 1px solid var(--border-subtle);
+}
+.wpic-card__footer {
+  border-top: 1px solid var(--border-subtle);
+}
+
 /* ── Text ─────────────────────────────────────────────────────────────── */
 .text-main  { color: var(--text-main); }
 .text-muted { color: var(--text-muted); }

package/dist/wpic-ui.js

@@ -3225,13 +3225,13 @@ const h0 = /* @__PURE__ */ U1(b4, [["render", x4]]), y4 = ["disabled"], C2 = /*
   }
 }), y6 = {
   key: 0,
-  class: "px-4 py-3 flex items-center gap-2 border-b border-zinc-200 dark:border-zinc-700"
+  class: "wpic-card__header px-4 py-3 flex items-center gap-2"
 }, w6 = { class: "font-medium text-zinc-800 dark:text-zinc-200 flex-1 min-w-0 truncate" }, M6 = {
   key: 2,
-  class: "px-4 py-6 flex items-center gap-2 text-zinc-400 dark:text-zinc-500"
+  class: "wpic-card__empty px-4 py-6 flex items-center gap-2 text-zinc-400 dark:text-zinc-500"
 }, V6 = {
   key: 3,
-  class: "px-4 py-3 border-t border-zinc-100 dark:border-zinc-800"
+  class: "wpic-card__footer px-4 py-3"
 }, Xt = /* @__PURE__ */ J({
   __name: "WCard",
   props: {
@@ -3243,7 +3243,7 @@ const h0 = /* @__PURE__ */ U1(b4, [["render", x4]]), y4 = ["disabled"], C2 = /*
   },
   setup(n) {
     return (v, c) => (e(), t("div", {
-      class: g(["wpic-card rounded-xl bg-zinc-50 dark:bg-zinc-800/60 overflow-hidden", n.borderless ? "" : "border border-zinc-200 dark:border-zinc-700"])
+      class: g(["wpic-card rounded-xl bg-zinc-50 dark:bg-zinc-800/60 overflow-hidden", n.borderless ? "wpic-card--borderless" : "wpic-card--bordered"])
     }, [
       v.$slots.icon || v.$slots.title || n.title || v.$slots.actions ? (e(), t("div", y6, [
         Q(v.$slots, "icon"),
@@ -3258,7 +3258,7 @@ const h0 = /* @__PURE__ */ U1(b4, [["render", x4]]), y4 = ["disabled"], C2 = /*
         Q(v.$slots, "empty")
       ])) : (e(), t("div", {
         key: 1,
-        class: g(n.noPadding ? "" : n.bodyClass ?? "p-4")
+        class: g(["wpic-card__body", n.noPadding ? "" : n.bodyClass ?? "p-4"])
       }, [
         Q(v.$slots, "default")
       ], 2)),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wpic/ui",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "type": "module",
   "description": "WPIC shared Vue 3 component library",
   "publishConfig": {

package/src/style.css

@@ -56,6 +56,21 @@
 .border-strong { border-color: var(--border-strong); }
 .border-hover  { border-color: var(--border-hover); }
 
+/* WCard owns its border colors. This avoids a missing host Tailwind utility
+   falling back to currentColor and producing a black header separator. */
+.wpic-card--bordered {
+  border: 1px solid var(--border-strong);
+}
+.wpic-card--borderless {
+  border: 0;
+}
+.wpic-card__header {
+  border-bottom: 1px solid var(--border-subtle);
+}
+.wpic-card__footer {
+  border-top: 1px solid var(--border-subtle);
+}
+
 /* ── Text ─────────────────────────────────────────────────────────────── */
 .text-main  { color: var(--text-main); }
 .text-muted { color: var(--text-muted); }