fix(ui): keep breadcrumb separators visible

bun.lock

@@ -688,7 +688,7 @@
     },
     "packages/ui": {
       "name": "@wrnexus/ui",
-      "version": "0.8.47",
+      "version": "0.8.48",
       "dependencies": {
         "@wrnexus/core": "workspace:*",
       },

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,

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

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");
   /*