# navigation-menu — alcance de tema: análisis y propuesta

> Generado por `node --import tsx/esm scripts/theming-census.ts --report`.
> Lo **medido** y la **propuesta** se regeneran; el **Veredicto** (§5) se conserva.
> Vista de conjunto: [README](./README.md) · método y protocolo:
> [`PLAN-theming.md`](../../process/PLAN-theming.md) §1, §2, §7.

- **Medido**: 2026-08-23 · **Alcance**: **100%** — 33 de 33 knobs por token público
- **Knobs de apariencia**: 37 — público 33 · privado 0 · global 0 · literal 0 · sistema 4 · excepción 1 _(los dos últimos, fuera del ratio)_
- **Contrato hoy** (`lib/recipes/base.ts`): 44 pública(s) — `content-z`, `indicator-w`, `indicator-thickness`, `indicator-bg`, `indicator-radius`, `trigger-height-sm`, `trigger-height-md`, `trigger-height-lg`, `trigger-font-size-sm`, `trigger-font-size-md`, `trigger-font-size-lg`, `trigger-line-height-sm`, `trigger-line-height-md`, `trigger-line-height-lg`, `trigger-padding-inline-sm`, `trigger-padding-inline-md`, `trigger-padding-inline-lg`, `trigger-radius-sm`, `trigger-radius-md`, `trigger-radius-lg`, `trigger-height`, `trigger-font-size`, `trigger-line-height`, `trigger-padding-inline`, `trigger-radius`, `trigger-fg`, `active-trigger-fg`, `active-trigger-bg`, `disabled-trigger-fg`, `trigger-font-family`, `trigger-gap`, `chevron-size`, `chevron-stroke`, `list-gap-sm`, `list-gap-md`, `list-gap-lg`, `list-gap`, `content-min-width`, `content-padding`, `content-radius`, `content-fg`, `content-link-padding-block`, `content-link-padding-inline`, `content-link-radius`
- **Eje `size`**: no · **ficheros**: `navigation-menu.css`

## 1. Knobs fuera de alcance

### 1.1 Directo a primitivo global (0)

_Ninguno._

### 1.2 A través de un privado (0)

_Ninguno._

### 1.3 Literales (0)

_Ninguno._

### 1.4 Excepciones firmadas (1) — fuera del ratio

Literales que llevan su anotación `/* literal: <razón> */` en la propia
declaración: la válvula de recipe-contract §3, la misma que honra
`component-audit`. **Una desviación firmada no es deuda** — se listan para que la
razón se lea, no para acuñarlas.

| # | fichero:línea | selector | propiedad | valor |
| ---: | --- | --- | --- | --- |
| 1 | `navigation-menu.css:360` | `[data-navigation-menu-indicator][data-state='open']` | `opacity` | `1` |
## 2. Sistema transversal (4) — informativo, fuera del ratio

Un tema los alcanza **a nivel de sistema**, por diseño (recipe-contract §2).

| # | fichero:línea | selector | propiedad | valor |
| ---: | --- | --- | --- | --- |
| 1 | `navigation-menu.css:130` | `[data-navigation-menu-trigger]:focus-visible, [data-navigation-menu-link]:focus-visible` | `outline` | `var(--focus-ring-width) solid var(--focus-ring-color)` |
| 2 | `navigation-menu.css:151` | `[data-navigation-menu-trigger]::after` | `opacity` | `var(--opacity-muted)` |
| 3 | `navigation-menu.css:232` | `[data-navigation-menu-content] :is(a, [data-navigation-menu-link]):hover` | `background-image` | `linear-gradient(var(--state-hover), var(--state-hover))` |
| 4 | `navigation-menu.css:236` | `[data-navigation-menu-content] :is(a, [data-navigation-menu-link]):focus-visible` | `outline` | `var(--focus-ring-width) solid var(--focus-ring-color)` |

## 3. Privados de la receta — ¿de dónde sale su valor?

_La receta no declara privados propios en su CSS._

## 4. Propuesta de corrección

- **Consume la capa compartida `menu-indicator`.** Un eje que la capa posee se consume como `var(--_x, var(--x))`; el consumidor **no acuña** `--navigation-menu-{eje}` para él — sería un vocabulario paralelo (README de `eidos/components`, «Capas compartidas» regla 2).

### 4.1 Tokens a declarar en `lib/recipes/base.ts` (0)

Valor **verbatim** del CSS de hoy: el default no se mueve, sólo cambia quién
puede moverlo. Nombres derivados de recipe-contract §1 (ejes lógicos, talla
al final) y theming §6.7 (slots de color, modificador delante). Un token con
DOS valores distintos es una colisión de nombre: son dos knobs, o el nombre
no distingue lo que debería — se marca `⚠`.

| token (`--navigation-menu-…`) | scope TSC | valor propuesto | usos |
| --- | --- | --- | ---: |

### 4.2 Sin nombre mecánico (1)

- **⚠ decisión: `1` es un valor identidad o geometría de layout, no un knob de tema — el perímetro de «knob» es D-TH.2, sin firmar** — 1: `opacity`.

### 4.4 Lo que hay que comprobar a mano (PLAN-theming §1.3 · §7.4)

- [ ] **Privado que no deriva de un público** — §3 lo marca; el privado debe leer el público o desaparecer.
- [ ] **Velo o acento en el nodo equivocado** (`archetype: 'item'` en un envoltorio, un `background` en shorthand que mata la capa de estado) — se mide desde el píxel hacia arriba.
- [ ] **Doble animación** al mover un sello a una superficie con animación propia — registro de `animationstart`/`animationend`.
- [ ] **Diff de computed = 0** en reposo · hover · abierto · disabled · foco, por talla, antes y después.
- [ ] **Centinela por token nuevo**: valor imposible en el root → el nodo lo sigue. Si no, el token miente.

## 5. Veredicto

<!-- veredicto:start -->

**EJECUTADO 2026-08-23 — 44 % → 100 %.** Contrato 26 → 44 claves (19 nuevas,
una retirada). Diff de computed **0 sobre 2.752 valores en 8 estados**; guard
R-5.4 **43/44** con una adjudicación escrita. Bloque B1 de D-TH.4.

**Los 19 knobs, y de dónde salió cada nombre.** Ninguno se inventó: el catálogo
los tenía. `dropdown-menu` / `context-menu` (los gemelos cerrados el mismo día)
dan `content-{min-width,padding,radius,fg}` y `chevron-{size,stroke}`;
`accordion` da `trigger-font-family` y `disabled-trigger-fg`; `nav-tree` y
`card-group` confirman que **el tamaño de un chevron es un literal** en las
cuatro recetas que lo declaran (`0.42em`, `0.5em`, `0.625rem`) — un glifo no es
un paso de la escala de espacio. Al revés con el subrayado: `2px` ES
`--border-width-medium`, y el precedente `dropdown-menu.separator-thickness`
dice que un grosor decorativo se nombra por esa familia.

**Lo que la §4 generada proponía, y por qué NO se siguió — cinco fallos, uno
nuevo.** Llamaba `trigger-width` / `trigger-height` al CHEVRON (nombrando por el
primer selector de la regla, `[…-trigger]::after`, y **colisionando con
`trigger-height`, que ya existe y es la altura del control**); fundía en
`content-radius` dos nodos con dos valores (panel `--radius-lg` y fila
`--radius-md`); cruzaba los nombres (`content-padding-*` para lo que es de la
FILA, y el padding real del panel a §4.2 «sin nombre mecánico»); llamaba
`content-width` a un `min-inline-size`. Y el fallo NUEVO: abría pidiendo
«consume la capa compartida `menu-indicator`» — **homonimia**: esa capa es el
CHECK de los CheckboxItem de dropdown/context-menu, no tiene nada que ver con
el subrayado de esta barra. `LAYER_VOCABULARY` sólo registra `calendar-surface`,
y nav-menu no consume ninguna capa.

**Las filas del panel no son `item-` ni `link-`.** En los gemelos, `item` ES la
fila; aquí `item` es el `<li>` de la barra (parte del morfo) y el `Link` de barra
viste el cromo del trigger. Un `--navigation-menu-item-radius` o un
`--navigation-menu-link-radius` prometerían a un tema un nodo que no alcanzan.
Se acuñan como `content-link-*` — el nodo, nombrado por donde vive. Su tinta
sigue leyendo `trigger-fg`, como venía (D-TH.5: el default no se mueve).

**El privado era una ESCALA, no un conmutador.** `--_navigation-menu-list-gap`
tenía tres fuentes (`0` / `--space-1` / `--space-2`) por `data-size`: eso sube
al TSC como `list-gap-{sm,md,lg}` + el resuelto, el mismo molde que el bundle
del trigger ya tenía al lado. Los dos bloques `[data-size]` del CSS se retiran
(los emite el TSC; dejarlos vivos da un diff de 0 por la ruta vieja).

**`indicator-x` era declaración MUERTA y se retiró.** Soma escribe las cuatro
coordenadas del rect INLINE sobre el indicador (`-x`, `-y`, `-w`, `-h`); la
receta lee sólo `-w` y `-h`, y su propio comentario registra que sumar
`translateX(var(--…-x))` DUPLICABA el desplazamiento. Nadie la leía. Retirada,
0 diffs — la prueba de que estaba muerta (precedente: el re-point de
`--command-radius`, el trío `item-gap*` de carousel). `-w` se queda: vive, y es
canal de valor, no superficie de tema.

**El panel NO acuña tipografía, y es a propósito.** Lleva
`[data-depth='overlay']`, y ese plano declara `font-family` / `line-height` con
la misma especificidad (0,1,0) y más tarde en la cascada: un token de la receta
ahí leería muerto. Es la firma §12.9 pendiente, la misma que hizo retirar claves
en menubar, dropdown-menu, context-menu y tooltip. Lo que sí se acuña es la
familia de la BARRA (`trigger-font-family`), que no es overlay y alcanza.

**Lo que el instrumento aprendió aquí (tres cosas, todas medidas):**

1. **La sonda y el centinela eran ciegos a la mitad del componente.** Las filas
   del mega-menú son los `<a>` DESNUDOS del consumidor, sin atributo propio: el
   filtro `data-{c}-*` veía 10 nodos y **ninguno era el panel ni una fila** — 9
   de los 19 knobs quedaban fuera del diff. Con `EXTRA_NODES` /
   `extraNodes` la sonda pasa a 16 nodos abiertos. Y el paso `open` de la sonda
   no honraba `EXTRA_NODES`: ahora sí.
2. **El guard cerraba el panel él mismo.** Este mega-menú abre por
   `pointerenter` y `pointerleave` programa el cierre; el guard abría con clic y
   después aparcaba el puntero en (0,0) — que es exactamente lo que lo cierra.
   Dos corridas del mismo código discrepaban en `content-link-padding-inline`.
   Con `openBy: 'hover'` el cursor se queda en el trigger: **dos corridas
   idénticas, 43/44**. El síntoma tenía además una cara de falso POSITIVO: ese
   mismo token leía «vivo» antes de ver las filas, porque su padding ensancha el
   panel que sí se medía.
3. **`color` está en transición en esta parte**, así que forzar `data-disabled`
   y leer en el acto devuelve el valor VIEJO: tres diagnósticos falsos («ni el
   inline lo mueve») hasta congelar `transition`. Es la trampa del cuentagotas
   del color-picker, en otro componente. Congelado: reposo `oklch(0.2435 0 0)` →
   disabled `oklch(0.61 0 0)`, y el centinela lo mueve a `rgb(1,2,3)` **en el
   trigger y en el Link**.

**La adjudicación (1):** `disabled-trigger-fg` — la demo no monta ningún trigger
ni Link deshabilitado; forzado alcanza en las dos partes. En el ledger.

**Una nota de contabilidad, no del componente**: esta ficha dice ahora «eje
`size`: **no**». El censo detecta el eje grepeando `data-size` en el CSS de la
receta, y el protocolo §7.4 ORDENA retirar esos bloques cuando la cascada la
emite el TSC — así que todo componente que aplique bien el protocolo aparecerá
sin eje. Ya le pasa a `sidebar` y `nav-tree`. Anotado en next-features §13; el
eje existe y se emite en `generated/base.css`.

**Verificación**: sonda antes/después **0 diffs** (2.752 valores · 8 estados ·
16 nodos con el panel abierto) · R-5.4 43/44, dos corridas idénticas ·
`component:audit` PASS · censo 100 % · `eidos-lint` 30 morfo-backed / 3
eidos-only / **0 invalid, 0 class-hooks** · `rtl:check` 0 · `docs:check` 0 ·
suite eidos 439/440 (el único rojo es `skin-media-player`, el conocido) ·
`check` sin error nuevo en los ficheros tocados (el de `sideOffset` en
`navigation-menu-content.svelte` es preexistente, commit `3097cfcb6`) ·
verificado en Chrome con el panel abierto (panel 8/10px/224px · fila 8/12/6px ·
trigger 36px/6px/gap 4px · indicador 2px). Tras el cambio del guard,
`command`, `table` y `tooltip` re-verificados sin regresión ni STALE.

<!-- veredicto:end -->