diff --git a/bun.lock b/bun.lock index 1dd3f6b4..362467bb 100644 --- a/bun.lock +++ b/bun.lock @@ -688,7 +688,7 @@ }, "packages/ui": { "name": "@wrnexus/ui", - "version": "0.8.39", + "version": "0.8.40", "dependencies": { "@wrnexus/core": "workspace:*", }, diff --git a/docs/ui-visual-contract-0.8.json b/docs/ui-visual-contract-0.8.json index e677e376..b9a3fa8d 100644 --- a/docs/ui-visual-contract-0.8.json +++ b/docs/ui-visual-contract-0.8.json @@ -55,7 +55,7 @@ "packages/ui/components/Map.wrn": "3e6d5de5a21dd050c5c65950d6fb2f89af4024e1856a48f055b65b88fcd7b890", "packages/ui/components/MarketingSectionHeader.wrn": "39b79499b77dc1c7d34e4e5ecb45a9ddc6182f78c2a2586671c4fa07f44679ad", "packages/ui/components/Marquee.wrn": "81cd80732be34c8d7e4bf28b00347e1a9273166afdf66589d9f5d5774b69403b", - "packages/ui/components/MegaMenu.wrn": "b8bbe7456645c66481fdc65929d85fc4fb4386f71e844f2cb593e9f7685e6180", + "packages/ui/components/MegaMenu.wrn": "2297245336e74193d155a3ed034f4cd6093b011219bb13594e27555e74e229c3", "packages/ui/components/MetricCard.wrn": "513a6e99be3d9db46d96af9942b51331a0a048b184603e77e814506f0a52bdc5", "packages/ui/components/MetricGrid.wrn": "1fcebf51dcbe8520fe16bda904c1ef206c25c3900438d53877492c64ea21a1a5", "packages/ui/components/Modal.wrn": "7fa4b877772736f29f690e24d8742922b310397ef3083f0b78acb67a9f0d14b2", diff --git a/packages/ui/components/MegaMenu.wrn b/packages/ui/components/MegaMenu.wrn index 1b592de0..4a347ccc 100644 --- a/packages/ui/components/MegaMenu.wrn +++ b/packages/ui/components/MegaMenu.wrn @@ -480,11 +480,11 @@ 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: var(--wrn-color-text); border-radius: 0.45rem; background: color-mix(in srgb, var(--wrn-color-text) 10%, transparent); font-size: 0.88rem; } + .wrn-mega[data-variant="catalog"] .wrn-mega__rail-icon { width: 1.65rem; height: 1.65rem; flex: 0 0 1.65rem; color: var(--wrn-color-text) !important; border: 1px solid var(--wrn-color-border); border-radius: 0.45rem; background: var(--wrn-color-surface); box-shadow: 0 1px 2px color-mix(in srgb, var(--wrn-color-text) 12%, transparent); font-size: 0.92rem; 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); } .wrn-mega[data-variant="catalog"] .wrn-mega__column { display: flex; min-height: 100%; flex-direction: column; } - .wrn-mega[data-variant="catalog"] .wrn-mega__column-header { width: fit-content; min-width: min(18rem, 100%); margin: 0 0 0.85rem; padding: 0.6rem 0.75rem; border: 1px solid var(--wrn-color-border); border-radius: var(--wrn-radius-sm); background: var(--wrn-color-surface-soft); } - .wrn-mega[data-variant="catalog"] .wrn-mega__heading { margin: 0; color: var(--wrn-color-text); font-size: 0.875rem; font-weight: 600; letter-spacing: 0; text-transform: none; } + .wrn-mega[data-variant="catalog"] .wrn-mega__column-header { width: 100%; min-width: 0; margin: 0 0 0.85rem; padding: 0 0 0.65rem; border: 0; border-bottom: 1px solid var(--wrn-color-border); border-radius: 0; background: transparent; } + .wrn-mega[data-variant="catalog"] .wrn-mega__heading { margin: 0; color: var(--wrn-color-text-muted); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .wrn-mega[data-variant="catalog"] .wrn-mega__column-description { margin: 0.3rem 0 0; } .wrn-mega[data-variant="catalog"] .wrn-mega__list { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.35rem; } .wrn-mega[data-variant="catalog"] .wrn-mega__link { min-height: 3.25rem; padding: 0.7rem 0.8rem; align-items: center; border: 1px solid var(--wrn-color-border); background: color-mix(in srgb, var(--wrn-color-surface-soft) 55%, transparent); } diff --git a/packages/ui/package.json b/packages/ui/package.json index 2f2a870c..aac3512f 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/ui", - "version": "0.8.39", + "version": "0.8.40", "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 336f97c7..5de18d43 100644 --- a/packages/ui/test/ui.test.ts +++ b/packages/ui/test/ui.test.ts @@ -2982,6 +2982,8 @@ test("catalog mega menu renders only the active rail category", async () => { expect(dom.querySelector(".wrn-mega__column-header")?.textContent).toContain("Sales"); 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("color: var(--wrn-color-text) !important"); }); test("mega menu supports rails, icons, badges, media, featured content and footer actions", async () => {