fix(ui): separate catalog icon masks from tiles

packages/ui/components/MegaMenu.wrn

@@ -215,12 +215,12 @@ component MegaMenu {
               {#each railList() as item, index}
                 {#if variant === "catalog"}
                   <button type="button" class="wrn-mega__rail-link" data-active='{activeCategoryIndex() === index ? "true" : "false"}' aria-pressed='{activeCategoryIndex() === index ? "true" : "false"}' @click='chooseCategory(item, index, event)'>
-                    {#if item.icon}<span class='wrn-mega__rail-icon {item.icon}' aria-hidden="true"></span>{/if}
+                    {#if item.icon}<span class="wrn-mega__rail-icon" aria-hidden="true"><span class='{item.icon}'></span></span>{/if}
                     <span><strong>{item.label}</strong>{#if item.description}<small>{item.description}</small>{/if}</span>
                   </button>
                 {:else}
                   <a class="wrn-mega__rail-link" href='{item.href || "#"}' @click='choose(item)'>
-                    {#if item.icon}<span class='wrn-mega__rail-icon {item.icon}' aria-hidden="true"></span>{/if}
+                    {#if item.icon}<span class="wrn-mega__rail-icon" aria-hidden="true"><span class='{item.icon}'></span></span>{/if}
                     <span><strong>{item.label}</strong>{#if item.description}<small>{item.description}</small>{/if}</span>
                   </a>
                 {/if}
@@ -315,7 +315,7 @@ component MegaMenu {
       border: 1px solid transparent;
       border-radius: var(--wrn-radius-sm);
       background: transparent;
-      color: var(--wrn-color-text-muted);
+      color: var(--wrn-color-text);
       font: inherit;
       font-size: 0.9rem;
       font-weight: 600;
@@ -480,7 +480,8 @@ component MegaMenu {
     .wrn-mega[data-variant="catalog"] .wrn-mega__rail-link { min-height: 2.5rem; padding: 0.45rem 0.55rem; align-items: center; gap: 0.7rem; }
     .wrn-mega[data-variant="catalog"] .wrn-mega__rail-link strong { font-size: 0.76rem; font-weight: 400; line-height: 1.25; }
     .wrn-mega[data-variant="catalog"] .wrn-mega__rail-link[data-active="true"] strong { font-weight: 600; }
-    .wrn-mega[data-variant="catalog"] .wrn-mega__rail-icon { width: 1.65rem; height: 1.65rem; flex: 0 0 1.65rem; color: currentColor !important; border: 1px solid currentColor; border-radius: 0.45rem; background: transparent; font-size: 0.92rem; opacity: 0.82; }
+    .wrn-mega[data-variant="catalog"] .wrn-mega__rail-icon { display: grid; width: 1.65rem; height: 1.65rem; flex: 0 0 1.65rem; place-items: center; color: currentColor; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); border-radius: 0.45rem; background: color-mix(in srgb, currentColor 8%, transparent); opacity: 0.9; }
+    .wrn-mega[data-variant="catalog"] .wrn-mega__rail-icon > span { display: block; width: 0.95rem; height: 0.95rem; color: currentColor !important; font-size: 0.95rem; }
     .wrn-mega[data-variant="catalog"] .wrn-mega__rail-link:hover .wrn-mega__rail-icon,
     .wrn-mega[data-variant="catalog"] .wrn-mega__rail-link[data-active="true"] .wrn-mega__rail-icon { opacity: 1; }
     .wrn-mega[data-variant="catalog"] .wrn-mega__columns { padding: 0.35rem 0.5rem 0.75rem 1.25rem; grid-template-columns: minmax(0, 1fr); }

packages/ui/package.json

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

packages/ui/test/ui.test.ts

@@ -2983,6 +2983,7 @@ test("catalog mega menu renders only the active rail category", async () => {
   expect(dom.querySelectorAll(".wrn-mega__link-icon")).toHaveLength(0);
   expect(dom.querySelectorAll(".wrn-mega__link-description")).toHaveLength(0);
   expect(source).toContain("border-bottom: 1px solid var(--wrn-color-border)");
+  expect(source).toContain('.wrn-mega__rail-icon > span');
   expect(source).toContain("color: currentColor !important");
 });