From a010f8f255385b3dedb3d8d68a05ee23335fac1d Mon Sep 17 00:00:00 2001
From: dev <info@activething.com>
Date: Sat, 23 May 2026 18:25:25 +0200
Subject: [PATCH] fix(eidos navigation-menu): style sub-items inside Content
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bug: anchors inside Content panels had no hover/padding/border treatment
— consumers writing typical mega-menu markup (<a> elements) got a wall
of unstyled text.

Adds a default sub-item recipe that targets
\`[data-navigation-menu-content] :is(a, [data-navigation-menu-link])\` —
covers both plain anchors AND the official \`NavigationMenu.Link\` part
when used inside Content. Each item gets:

- display: block
- padding 8px / 12px
- border-radius (matches md radius)
- color = primary content
- text-decoration: none, cursor: pointer
- hover/focus background = --color-primary-element
- aria-current="page" + data-active = same tinted active state

Demo cleanup: dropped the redundant inline \`style="color: inherit; text-decoration: none;"\` overrides on every <a>, tightened the grid gap
from space-3 to space-1 (rows now have their own background hover so
gap can shrink). Content panel padding reduced to space-2 (was space-4)
because sub-items already provide their own padding.

Verified in browser: items render with padding 8/12px, border-radius 6px,
text-decoration: none, cursor: pointer. Hover changes the background to
primary-element.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../navigation-menu/navigation-menu.css       | 44 ++++++++++++++++++-
 .../components/navigation-menu/+page.svelte   | 18 ++++----
 2 files changed, 52 insertions(+), 10 deletions(-)

diff --git a/src/uix/eidos/components/navigation-menu/navigation-menu.css b/src/uix/eidos/components/navigation-menu/navigation-menu.css
index 21189367b..7dc1a30ce 100644
--- a/src/uix/eidos/components/navigation-menu/navigation-menu.css
+++ b/src/uix/eidos/components/navigation-menu/navigation-menu.css
@@ -164,7 +164,7 @@
 	z-index: 50;
 
 	min-inline-size: 14rem;
-	padding: var(--space-4);
+	padding: var(--space-2);
 	border: 1px solid var(--color-border-default);
 	border-radius: var(--radius-lg);
 	background: var(--color-surface-overlay);
@@ -173,6 +173,48 @@
 	outline: none;
 }
 
+/* ── Content sub-items ──────────────────────────────────────────────────
+ *
+ * Consumers compose mega-menu contents with `<a>` (or
+ * `<NavigationMenu.Link>` — which already emits `[data-navigation-menu-link]`
+ * + matches this rule too). The recipe gives anchors inside Content a
+ * default row treatment: padding, rounded hover background, focus ring.
+ * Override by adding more specific selectors per-consumer.
+ *
+ * `> a` and `> [data-navigation-menu-link]` keep the rule shallow so
+ * nested layout wrappers don't accidentally pick it up; if you wrap your
+ * items in a grid/flex container, target its direct children too:
+ *   `[data-navigation-menu-content] :is(a, [data-navigation-menu-link])`.
+ */
+[data-navigation-menu-content] :is(a, [data-navigation-menu-link]) {
+	display: block;
+	padding-block: var(--space-2);
+	padding-inline: var(--space-3);
+	border-radius: var(--radius-md);
+	color: var(--color-content-primary);
+	text-decoration: none;
+	cursor: pointer;
+	outline: none;
+	transition:
+		background var(--duration-fast) var(--ease-default),
+		color var(--duration-fast) var(--ease-default);
+}
+
+[data-navigation-menu-content] :is(a, [data-navigation-menu-link]):hover {
+	background: var(--color-primary-element);
+	color: var(--color-content-primary);
+}
+
+[data-navigation-menu-content] :is(a, [data-navigation-menu-link]):focus-visible {
+	outline: var(--focus-ring-width) solid var(--focus-ring-color);
+	outline-offset: 1px;
+}
+
+[data-navigation-menu-content] :is(a, [data-navigation-menu-link])[aria-current='page'],
+[data-navigation-menu-content] :is(a, [data-navigation-menu-link])[data-active] {
+	background: var(--color-primary-element);
+}
+
 /* Vertical orientation flips the anchor — Content opens to the right
  * of the trigger column instead of below. */
 [data-navigation-menu][data-orientation='vertical'] [data-navigation-menu-content] {
diff --git a/web/routes/uix/components/navigation-menu/+page.svelte b/web/routes/uix/components/navigation-menu/+page.svelte
index f3535728a..07f32eb68 100644
--- a/web/routes/uix/components/navigation-menu/+page.svelte
+++ b/web/routes/uix/components/navigation-menu/+page.svelte
@@ -138,20 +138,20 @@
 					<NavigationMenu.Item value="products">
 						<NavigationMenu.Trigger>Products</NavigationMenu.Trigger>
 						<NavigationMenu.Content>
-							<div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--uix-space-3); min-inline-size: 24rem;">
-								<a href="#" style="color: inherit; text-decoration: none;">
+							<div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--uix-space-1); min-inline-size: 24rem;">
+								<a href="#">
 									<strong style="display: block;">Analytics</strong>
 									<span style="color: var(--color-content-secondary); font-size: var(--font-size-xs);">Real-time insights from your data.</span>
 								</a>
-								<a href="#" style="color: inherit; text-decoration: none;">
+								<a href="#">
 									<strong style="display: block;">Workflows</strong>
 									<span style="color: var(--color-content-secondary); font-size: var(--font-size-xs);">Automate repeating tasks.</span>
 								</a>
-								<a href="#" style="color: inherit; text-decoration: none;">
+								<a href="#">
 									<strong style="display: block;">Integrations</strong>
 									<span style="color: var(--color-content-secondary); font-size: var(--font-size-xs);">Connect to your favourite tools.</span>
 								</a>
-								<a href="#" style="color: inherit; text-decoration: none;">
+								<a href="#">
 									<strong style="display: block;">API</strong>
 									<span style="color: var(--color-content-secondary); font-size: var(--font-size-xs);">Build on the platform.</span>
 								</a>
@@ -163,10 +163,10 @@
 						<NavigationMenu.Trigger>Solutions</NavigationMenu.Trigger>
 						<NavigationMenu.Content>
 							<div style="display: flex; flex-direction: column; gap: var(--uix-space-2); min-inline-size: 18rem;">
-								<a href="#" style="color: inherit; text-decoration: none;">For startups</a>
-								<a href="#" style="color: inherit; text-decoration: none;">For enterprise</a>
-								<a href="#" style="color: inherit; text-decoration: none;">For agencies</a>
-								<a href="#" style="color: inherit; text-decoration: none;">For non-profits</a>
+								<a href="#">For startups</a>
+								<a href="#">For enterprise</a>
+								<a href="#">For agencies</a>
+								<a href="#">For non-profits</a>
 							</div>
 						</NavigationMenu.Content>
 					</NavigationMenu.Item>