fix(ui): render active breadcrumb pages

packages/ui/COMPONENTS.md

@@ -799,7 +799,7 @@ Provide a responsive floating control that returns long pages to the top and can
 Show responsive hierarchical navigation with home support, separators, current-page state, sizes, and selection events.
 
 - Mount: `data-component="Breadcrumb"`
-- Props: `label: string = "Breadcrumb"`, `items: unknown[] = []`, `active: string = ""`, `separator: string = "chevron"`, `showHome: boolean = false`, `homeLabel: string = "Home"`, `homeHref: string = "/"`, `homeIcon: string = "icon-[lucide--house]"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "minimal"`, `class: string = ""`
+- Props: `label: string = "Breadcrumb"`, `items: unknown[] = []`, `active: string = ""`, `activeIcon: string = "icon-[lucide--file-text]"`, `separator: string = "chevron"`, `showHome: boolean = false`, `homeLabel: string = "Home"`, `homeHref: string = "/"`, `homeIcon: string = "icon-[lucide--house]"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "minimal"`, `class: string = ""`
 - Slots: None
 - Outputs: `select({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`
 

packages/ui/components/Breadcrumb.wrn

@@ -7,6 +7,7 @@ component Breadcrumb {
 label: string = "Breadcrumb"
     items: unknown[] = []
     active: string = ""
+    activeIcon: string = "icon-[lucide--file-text]"
     separator: string = "chevron"
     showHome: boolean = false
     homeLabel: string = "Home"
@@ -99,6 +100,30 @@ label: string = "Breadcrumb"
             {/if}
           </li>
         {/each}
+
+        {#if active && !items.some((item) => active === (item.value || item.label || item.title))}
+          <li class="wrn-breadcrumb__item" data-current="true">
+            {#if showHome || items.length > 0}
+              <span class="wrn-breadcrumb__separator" aria-hidden="true">
+                {#if separator === "slash"}
+                  <span>/</span>
+                {:else if separator === "dot"}
+                  <span>•</span>
+                {:else if separator === "arrow"}
+                  <span>→</span>
+                {:else}
+                  <span class="icon-[lucide--chevron-right] wrn-breadcrumb__separator-icon"></span>
+                {/if}
+              </span>
+            {/if}
+            <span class="wrn-breadcrumb__current" aria-current="page">
+              {#if activeIcon}
+                <span class='{activeIcon} wrn-breadcrumb__icon' aria-hidden="true"></span>
+              {/if}
+              <span class="wrn-breadcrumb__label">{active}</span>
+            </span>
+          </li>
+        {/if}
       </ol>
     </nav>
   }

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ui",
-  "version": "0.8.46",
+  "version": "0.8.47",
   "private": true,
   "type": "module",
   "main": "src/index.ts",

packages/ui/test/ui.test.ts

@@ -3169,6 +3169,21 @@ test("breadcrumb marks the trail end without emitting an empty aria-current", as
   expect(dom.querySelectorAll(".wrn-breadcrumb__item").length).toBeGreaterThanOrEqual(3);
 });
 
+test("breadcrumb renders a standalone active page with its icon", async () => {
+  const source = readFileSync(uiComponentPath("Breadcrumb"), "utf8");
+  const html = await renderComponent(source, {
+    showHome: true,
+    items: [{ label: "Products", href: "/products", icon: "icon-[lucide--blocks]" }],
+    active: "CRM",
+    activeIcon: "icon-[lucide--contact-round]",
+  });
+  expect(html).toContain("CRM");
+  expect(html).toContain("icon-[lucide--contact-round]");
+  expect(html).toMatch(/aria-current="page"/);
+  const dom = mountHtml(html);
+  expect(dom.querySelectorAll(".wrn-breadcrumb__item").length).toBe(3);
+});
+
 test("mega menu bridges the gap between its trigger and panel", async () => {
   const source = readFileSync(uiComponentPath("MegaMenu"), "utf8");
   /*