From 12796ac42872f57bc0e500a1251fc89d4633bba5 Mon Sep 17 00:00:00 2001 From: dev Date: Wed, 19 Aug 2026 20:27:07 +0200 Subject: [PATCH] uix(navigation-menu): los enlaces del panel hablan el mismo hover que la barra MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit «¿Por qué los otros ítems no tienen el mismo hover? ¿Qué sentido tiene?» Ninguno. En 822b78cf2 apliqué la decisión del autor —hover = sólo color de texto, caja sólo para abierto / aria-current— al cromo de la BARRA y dejé los enlaces de DENTRO del panel con la regla vieja, llamándolos «otra superficie». Es el mismo componente. Y la regla vieja era además un defecto por sí sola: pintaba el hover con `--color-primary-element`, el color del trigger ABIERTO — un hover que parecía el estado activo. Ahora una sola escalera para todo enlace del componente, la de `Tabs`, por los mismos tokens públicos (`--navigation-menu-trigger-color{,-hover,-active}` · `-bg-active`): reposo secundario, hover primario sin relleno, caja sólo para `aria-current`. Medido: fila en reposo oklch 0.50 (= el enlace de la barra), fila en hover oklch 0.24 con fondo transparente y sin velo; captura con «For enterprise» en hover y «Solutions» abierto como único relleno. Gates: eidos-lint 31/0 invalid · component:audit PASS · rtl 0 · eidos 434/435 (skin-media-player, ajeno) · prettier limpio. Co-Authored-By: Claude Opus 5 --- .../components/navigation-menu/README.md | 5 +++++ .../navigation-menu/navigation-menu.css | 19 ++++++++++++++----- 2 files changed, 19 insertions(+), 5 deletions(-) diff --git a/src/uix/eidos/components/navigation-menu/README.md b/src/uix/eidos/components/navigation-menu/README.md index 98722f038..f57403ecf 100644 --- a/src/uix/eidos/components/navigation-menu/README.md +++ b/src/uix/eidos/components/navigation-menu/README.md @@ -92,6 +92,11 @@ de FILA de menú (`archetypes.css`) y era él —no el trigger— quien pintaba caja gris bajo cada palabra (medido: fondo del trigger transparente, velo en el `
  • `). Misma ley que Breadcrumb y Timeline: un envoltorio no lleva arquetipo de ítem. La caja es de UN solo estado: abierto / `aria-current`. +**La misma lengua dentro del panel**: los enlaces del mega-menú usan la misma +escalera (reposo secundario, hover primario, sin relleno; caja sólo para +`aria-current`). La regla anterior les pintaba el hover con +`--color-primary-element` — el color del ABIERTO —, o sea un hover que parecía +el estado activo, y distinto del de la barra. **Al abrir, el panel sube**: es un `emerge`, y su aparición es la firma de la familia (`present-rise`, `--duration-slow`) estampada en el CONTENT —como diff --git a/src/uix/eidos/components/navigation-menu/navigation-menu.css b/src/uix/eidos/components/navigation-menu/navigation-menu.css index 111479add..13998b669 100644 --- a/src/uix/eidos/components/navigation-menu/navigation-menu.css +++ b/src/uix/eidos/components/navigation-menu/navigation-menu.css @@ -217,23 +217,30 @@ * items in a grid/flex container, target its direct children too: * `[data-navigation-menu-content] :is(a, [data-navigation-menu-link])`. */ +/* ONE hover language for every link of the component, inside the panel as in + * the bar (author, 2026-08-19: «why don't the other items have the same + * hover?»): rest secondary, hover primary, NO fill — the same public ladder + * (`--navigation-menu-trigger-color{,-hover,-active}`). The rule that lived + * here filled the row with `--color-primary-element` on hover, which is the + * colour of the OPEN trigger: a hover that looks like the active state. The box + * is for `aria-current` only, here too. */ [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); + color: var(--navigation-menu-trigger-color); text-decoration: none; cursor: pointer; outline: none; transition: - background var(--duration-fast) var(--ease-default), + background-color 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); + background-image: none; + color: var(--navigation-menu-trigger-color-hover); } [data-navigation-menu-content] :is(a, [data-navigation-menu-link]):focus-visible { @@ -243,7 +250,9 @@ [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); + background-color: var(--navigation-menu-trigger-bg-active); + background-image: none; + color: var(--navigation-menu-trigger-color-active); } /* Vertical orientation flips the anchor — Content opens to the right