uix(drawer): los 24 rojos medidos uno a uno — y uno era un DEFECTO REAL: el velo no pinta

Sin cambios de código: 24 adjudicaciones medidas y dos hallazgos. El guard queda
en VERDE.

EL VELO DEL CAJÓN NO PINTA. Su regla es

    background: color-mix(in srgb,
      var(--drawer-overlay-bg) var(--drawer-overlay-opacity), transparent)

y **soma escribe `--drawer-overlay-opacity: 1` INLINE** en el nodo del velo — es
su progreso de arrastre, un número sin unidad. `color-mix` exige ahí un
PORCENTAJE: con `1` la función entera es inválida y el fondo cae a `transparent`.

Medido: el velo abierto computa `rgba(0, 0, 0, 0)`; escribiendo `80%` en el
propio nodo, pinta. Y VISTO en captura: el fondo tras el cajón sale desenfocado
pero **sin atenuar** — el `backdrop-filter` funciona y el tinte no existe. Un
cajón modal sin velo.

No se arregla aquí porque mueve píxel y toca soma (§7.8). Puede arreglarse de un
lado o del otro —que soma escriba un porcentaje, o que la receta no use ese slot
como porcentaje—, y la lección general queda escrita en §13: **un valor que soma
escribe inline y una receta consume tiene que compartir UNIDAD**, o el fallo es
silencioso.

SEGUNDO HALLAZGO: las tallas son canal de valor en el eje que manda. Soma escribe
`width` (o `height`, según el lado) inline en el contenido, así que
`content-width-{sm,md,lg}` no puede ganar desde `:root` en un cajón
izquierda/derecha; el eje cruzado sí alcanza (`height-sm` forzado: 260px →
976px). Misma clase que el `item-gap` de carousel y el `preview-z` de drag-drop,
que se retiraron — pero aquí el token sigue siendo la fuente del valor que soma
resuelve, así que retirarlo o no es firma tuya.

Los otros 22 son lo esperable, y quedan medidos con su valor: el asa —que la demo
no monta y cuyo tamaño INTERCAMBIA ejes según el lado (36px→1234px de largo,
4px→1234px de grosor)—, el anillo de arrastre, el padding `full`, la cabecera y
el pie opcionales, y la z de la variante inline.

Gates: centinela 29/54 con las 24 adjudicadas, exit 0 · docs:check 0 · captura de
la página con el cajón abierto mirada.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

docs/audit/theming/drawer.md

@@ -136,11 +136,26 @@ pasada de hover no puede posarse en él (Playwright se niega a hacer hover sobre
 un nodo que no recibe puntero). Con el cajón cerrado y hover a mano,
 `hover-trigger-bg` alcanza (oklch(0.931 0 0) → rgb(1,2,3)).
 
-**Lo rojo que queda es ANTERIOR**: 24 tokens sin adjudicar del bloque que ya
-existía —el asa de arrastre, el anillo de arrastre, los anchos y altos por
-talla, los gaps de cabecera y pie—, todos de partes o estados que la demo no
-monta. Su pase queda anotado; este commit no los empeora.
-
+**Los 24 que arrastraba de antes quedan MEDIDOS uno a uno** (2026-08-22, en la
+revisión del bloque): el asa y su estado de arrastre —que la demo no monta y
+cuyo tamaño INTERCAMBIA ejes según el lado—, el anillo de arrastre, las tallas,
+el padding `full`, la cabecera y el pie opcionales y la z de la variante
+inline. Todos alcanzan cuando existe lo que pintan. Con eso el guard queda en
+**verde**.
+
+**Dos de los 24 no son límite de instrumento, y los dos van a §13:**
+
+- **EL VELO NO PINTA.** Su regla es
+  `color-mix(in srgb, var(--drawer-overlay-bg) var(--drawer-overlay-opacity), transparent)`
+  y **soma escribe `--drawer-overlay-opacity: 1` INLINE** (su progreso de
+  arrastre, sin unidad). `color-mix` exige un PORCENTAJE: con `1` la función
+  entera es inválida y el fondo cae a `transparent`. Medido en el velo abierto
+  (`rgba(0, 0, 0, 0)`) y VISTO en captura: el fondo tras el cajón sale
+  desenfocado pero sin atenuar. Mueve píxel y toca soma → no se arregla aquí.
+- **Las tallas son canal de valor en el eje que manda**: soma escribe `width`
+  (o `height`, según el lado) inline en el contenido, así que
+  `content-width-*` no puede ganar desde `:root` en un cajón
+  izquierda/derecha. El eje cruzado sí alcanza (`height-sm`: 260px → 976px).
 Sonda antes/después: **0 diffs en 390 valores** (8 estados).
 
 <!-- veredicto:end -->

docs/next-features.md

@@ -1073,5 +1073,30 @@ Lo que `chart` destapó (2026-08-22):
   retiradas. Confirma la regla de F2-A: **un falso negativo siempre tiene
   causa.**
 
+- **⚠⚠ EL VELO DEL `drawer` NO PINTA — defecto real, medido y visto**
+  (2026-08-22). Su regla es
+  `background: color-mix(in srgb, var(--drawer-overlay-bg) var(--drawer-overlay-opacity), transparent)`,
+  y **soma escribe `--drawer-overlay-opacity: 1` INLINE** en el nodo del velo (es
+  su progreso de arrastre, un número sin unidad). `color-mix` exige un
+  PORCENTAJE ahí: con `1` la función entera es inválida y el fondo cae a
+  `transparent`. Computado en el velo abierto: `rgba(0, 0, 0, 0)`; escribiendo
+  `80%` en el propio nodo pinta. **En la captura se ve**: el fondo detrás del
+  cajón está DESENFOCADO pero no atenuado — el `backdrop-filter` funciona y el
+  tinte no existe.
+
+  No se arregla aquí porque mueve píxel y toca soma (§7.8). El arreglo puede
+  ser de un lado o del otro: que soma escriba un porcentaje, o que la receta
+  no use ese slot como porcentaje. Y la lección general: **un valor que soma
+  escribe inline y una receta consume tiene que compartir UNIDAD**, o el fallo
+  es silencioso.
+
+- **⚠ Las tallas del `drawer` son canal de valor en el eje que manda**: soma
+  escribe `width` (o `height`, según el lado) INLINE en el contenido, así que
+  `content-width-{sm,md,lg}` no puede ganar desde `:root` para un cajón
+  izquierda/derecha —el eje cruzado sí alcanza (`height-sm` forzado: 260px →
+  976px)—. Misma clase que el `item-gap` de carousel y el `preview-z` de
+  drag-drop, que se RETIRARON; aquí no, porque el token sigue siendo la fuente
+  del valor que soma resuelve. Decidir si se retira o si soma lo lee es firma.
+
 **Deps**: ninguna. Son mejoras del instrumental del eje, ejecutables cuando
 estorben.

docs/process/PLAN-theming.md

@@ -455,6 +455,31 @@ de commit. Sin artefacto, el paso no se ha hecho.
 
 ## 8. Registro
 
+- 2026-08-22 — **`drawer`: los 24 rojos que arrastraba, medidos uno a uno — y
+  uno era un DEFECTO REAL.** El guard queda en verde; sin cambios de código.
+
+  **EL VELO DEL CAJÓN NO PINTA.** Su regla es
+  `color-mix(in srgb, var(--drawer-overlay-bg) var(--drawer-overlay-opacity), transparent)`
+  y **soma escribe `--drawer-overlay-opacity: 1` INLINE** —su progreso de
+  arrastre, un número sin unidad—. `color-mix` exige ahí un PORCENTAJE: con
+  `1` la función entera es inválida y el fondo cae a `transparent`. Medido
+  (`rgba(0, 0, 0, 0)` en el velo abierto; con `80%` en el nodo, pinta) y VISTO
+  en captura: el fondo tras el cajón sale desenfocado pero sin atenuar. Mueve
+  píxel y toca soma, así que va a §13 con su lección: **un valor que soma
+  escribe inline y una receta consume tiene que compartir UNIDAD**, o el fallo
+  es silencioso.
+
+  El segundo hallazgo: **las tallas son canal de valor en el eje que manda** —
+  soma escribe `width`/`height` inline según el lado, así que
+  `content-width-*` no gana desde `:root` en un cajón izquierda/derecha (el
+  eje cruzado sí: `height-sm` 260px → 976px). Misma clase que el `item-gap`
+  de carousel, pero aquí el token sigue siendo la fuente del valor que soma
+  resuelve: retirar o no es firma.
+
+  Los otros 22 son lo esperable y quedan medidos: el asa (no montada, y su
+  tamaño INTERCAMBIA ejes según el lado), el anillo de arrastre, el padding
+  `full`, la cabecera y el pie opcionales, la z de la variante inline.
+
 - 2026-08-22 — **REVISIÓN ADVERSARIAL DEL BLOQUE (§7.7): 5 hipótesis, 1
   hallazgo real, 4 refutadas.** Bloque de CATORCE componentes; global 56 % →
   **62 %**.

scripts/theming-sentinel-exceptions.ts

@@ -359,7 +359,42 @@ export const SENTINEL_EXCEPTIONS: Record<string, Record<string, string>> = {
 		// trigger: the hover pass cannot reach it (Playwright refuses to hover a
 		// node that does not receive the pointer). Hovered by hand with the drawer
 		// closed 2026-08-22 -> reaches.
-		'hover-trigger-bg': 'the open drawer overlay covers the trigger, so the hover pass cannot land on it; hovered by hand with the drawer closed -> reaches (oklch(0.931 0 0) -> rgb(1,2,3))'
+		'hover-trigger-bg': 'the open drawer overlay covers the trigger, so the hover pass cannot land on it; hovered by hand with the drawer closed -> reaches (oklch(0.931 0 0) -> rgb(1,2,3))',
+		// ── The 24 the component carried from before the axis, measured one by one
+		// 2026-08-22 (transitions frozen, drawer open, each state forced).
+		// The GRABBER is not mounted in this demo and its size swaps with the side:
+		// length is the inline axis for top/bottom and the block axis for left/right.
+		'handle-bg': 'no grabber in this demo; mounted in place -> reaches (oklch(0.9911 0 0) -> rgb(1,2,3))',
+		'active-handle-bg': 'same grabber, and only while dragging; forced -> reaches (oklch(0.5032 0 0) -> rgb(1,2,3))',
+		'handle-radius': 'same grabber; mounted -> reaches (9999px -> 1234px)',
+		'handle-length': 'same grabber, and only under side=top/bottom; forced -> reaches (36px -> 1234px)',
+		'handle-thickness': 'same grabber, same side; forced -> reaches (4px -> 1234px)',
+		'handle-active-scale': 'same grabber, only while dragging (transform, which the guard does not read)',
+		'handle-transition-duration': 'the guard freezes transitions; the grabber transitions background and transform on it',
+		'handle-transition-ease': 'same freeze, same pair',
+		// The dragging ring only exists while a pointer drags the panel.
+		'content-ring-dragging-fg': 'only under [data-dragging]; forced -> reaches (srgb 0.392 / 0.32 -> rgb(1,2,3))',
+		'content-ring-dragging-width': 'same state; forced -> reaches (2px -> 1234px)',
+		'content-ring-dragging-offset': 'same state, outline-offset (read set)',
+		'content-shadow-dragging': 'same state; forced -> the box-shadow changes',
+		// Sizes: the demo runs md on the right side, and soma writes the resolved
+		// axis INLINE (width for left/right, height for top/bottom), so the token of
+		// the axis in play cannot win from :root — a value channel, like carousel
+		// item-gap. The cross axis does reach: height-sm forced 260px -> 976px.
+		'content-width-sm': 'soma writes width INLINE on the content for a left/right drawer, so no cascade can beat it - value channel, registered in next-features 13',
+		'content-width-md': 'same inline width channel',
+		'content-width-lg': 'same inline width channel',
+		'content-height-sm': 'the demo runs a right drawer, where the height is not the axis in play; forced side=bottom -> reaches (260px -> 976px)',
+		'content-height-md': 'same cross axis, same pass',
+		'content-height-lg': 'same cross axis, same pass',
+		'content-padding-full': 'only under [data-size=full]; forced -> reaches (24px -> 1234px)',
+		// Header and footer are optional parts the demo does not render.
+		'header-gap': 'the demo mounts no header; mounted in place -> reaches (12px -> 1234px)',
+		'footer-gap': 'the demo mounts no footer; mounted in place -> reaches (12px -> 1234px)',
+		'footer-margin-top': 'same footer; mounted -> reaches (8px -> 1234px)',
+		'inline-z': 'only under [data-variant=inline]; forced -> reaches (50 -> 4321)',
+		// AND A REAL DEFECT, not an instrument limit: the veil paints NOTHING.
+		'overlay-bg': 'the veil paints nothing today: soma writes --drawer-overlay-opacity INLINE as the unitless 1 (its drag progress) and the CSS consumes it as a color-mix PERCENTAGE, so the mix is invalid and the background falls to transparent. Writing 80% on the node paints it. Registered in next-features 13 - it moves pixel, so it is not fixed here'
 	},
 	aura: {
 		// The six state tints and the halo paint the INDICATOR background, and the