From 510b3ba777de7f00bd802337be71f71e511d31ce Mon Sep 17 00:00:00 2001
From: Ajay Ghanwat <ghanwat.ajay@workroot.in>
Date: Tue, 25 Aug 2026 16:34:44 +0530
Subject: [PATCH] fix(ui): keep breadcrumb separators visible

---
 bun.lock                              |  2 +-
 packages/ui/components/Breadcrumb.wrn | 10 ++++++++--
 packages/ui/package.json              |  2 +-
 packages/ui/test/ui.test.ts           | 10 ++++++++++
 4 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/bun.lock b/bun.lock
index 6342adaa..0eca45f4 100644
--- a/bun.lock
+++ b/bun.lock
@@ -688,7 +688,7 @@
     },
     "packages/ui": {
       "name": "@wrnexus/ui",
-      "version": "0.8.47",
+      "version": "0.8.48",
       "dependencies": {
         "@wrnexus/core": "workspace:*",
       },
diff --git a/packages/ui/components/Breadcrumb.wrn b/packages/ui/components/Breadcrumb.wrn
index d9b5c38b..45e0778f 100644
--- a/packages/ui/components/Breadcrumb.wrn
+++ b/packages/ui/components/Breadcrumb.wrn
@@ -62,7 +62,7 @@ label: string = "Breadcrumb"
                 {:else if separator === "arrow"}
                   <span>→</span>
                 {:else}
-                  <span class="icon-[lucide--chevron-right] wrn-breadcrumb__separator-icon"></span>
+                  <span class="wrn-breadcrumb__separator-icon">›</span>
                 {/if}
               </span>
             {/if}
@@ -112,7 +112,7 @@ label: string = "Breadcrumb"
                 {:else if separator === "arrow"}
                   <span>→</span>
                 {:else}
-                  <span class="icon-[lucide--chevron-right] wrn-breadcrumb__separator-icon"></span>
+                  <span class="wrn-breadcrumb__separator-icon">›</span>
                 {/if}
               </span>
             {/if}
@@ -232,8 +232,14 @@ label: string = "Breadcrumb"
     }
 
     .wrn-breadcrumb__separator-icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
       width: 0.9rem;
       height: 0.9rem;
+      font-size: 1rem;
+      font-weight: 700;
+      line-height: 1;
     }
 
     .wrn-breadcrumb__link,
diff --git a/packages/ui/package.json b/packages/ui/package.json
index f0ce8bed..232893fa 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ui",
-  "version": "0.8.47",
+  "version": "0.8.48",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/packages/ui/test/ui.test.ts b/packages/ui/test/ui.test.ts
index cf3c8724..68541b2a 100644
--- a/packages/ui/test/ui.test.ts
+++ b/packages/ui/test/ui.test.ts
@@ -3184,6 +3184,16 @@ test("breadcrumb renders a standalone active page with its icon", async () => {
   expect(dom.querySelectorAll(".wrn-breadcrumb__item").length).toBe(3);
 });
 
+test("breadcrumb default separators remain visible without generated icon CSS", async () => {
+  const source = readFileSync(uiComponentPath("Breadcrumb"), "utf8");
+  const html = await renderComponent(source, {
+    showHome: true,
+    items: [{ label: "Legal" }, { label: "Terms", current: true }],
+  });
+  expect(html).toContain("›");
+  expect(html).not.toContain("icon-[lucide--chevron-right]");
+});
+
 test("mega menu bridges the gap between its trigger and panel", async () => {
   const source = readFileSync(uiComponentPath("MegaMenu"), "utf8");
   /*