uix(navigation-menu): los enlaces del panel hablan el mismo hover que la barra

«¿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 <noreply@anthropic.com>
alpha-0.1-background
dev 2 months ago
parent 822b78cf2c
commit 12796ac428

@ -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 caja gris bajo cada palabra (medido: fondo del trigger transparente, velo en
el `<li>`). Misma ley que Breadcrumb y Timeline: un envoltorio no lleva el `<li>`). Misma ley que Breadcrumb y Timeline: un envoltorio no lleva
arquetipo de ítem. La caja es de UN solo estado: abierto / `aria-current`. 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 **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 familia (`present-rise`, `--duration-slow`) estampada en el CONTENT —como

@ -217,23 +217,30 @@
* items in a grid/flex container, target its direct children too: * 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])`.
*/ */
/* 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]) { [data-navigation-menu-content] :is(a, [data-navigation-menu-link]) {
display: block; display: block;
padding-block: var(--space-2); padding-block: var(--space-2);
padding-inline: var(--space-3); padding-inline: var(--space-3);
border-radius: var(--radius-md); border-radius: var(--radius-md);
color: var(--color-content-primary); color: var(--navigation-menu-trigger-color);
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
outline: none; outline: none;
transition: transition:
background var(--duration-fast) var(--ease-default), background-color var(--duration-fast) var(--ease-default),
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 { [data-navigation-menu-content] :is(a, [data-navigation-menu-link]):hover {
background: var(--color-primary-element); background-image: none;
color: var(--color-content-primary); color: var(--navigation-menu-trigger-color-hover);
} }
[data-navigation-menu-content] :is(a, [data-navigation-menu-link]):focus-visible { [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])[aria-current='page'],
[data-navigation-menu-content] :is(a, [data-navigation-menu-link])[data-active] { [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 /* Vertical orientation flips the anchor — Content opens to the right

Loading…
Cancel
Save

Powered by TurnKey Linux.