svelte-kit-vice/docs/audit/theming/scroll-area.md

scroll-area — 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 · método y protocolo: PLAN-theming.md §1, §2, §7.

• Medido: 2026-08-24 · Alcance: 100% — 15 de 15 knobs por token público
• Knobs de apariencia: 16 — público 15 · privado 0 · global 0 · literal 0 · sistema 1 · excepción 1 (los dos últimos, fuera del ratio)
• Contrato hoy (lib/recipes/base.ts): 13 pública(s) — auto-max-block, bg, radius, scrollbar-padding, scrollbar-size, track-bg, hover-track-bg, thumb-bg, thumb-bg-hover, thumb-radius, thumb-min-size, transition-duration, transition-ease
• Eje size: no · ficheros: scroll-area.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	scroll-area.css:104	[data-scroll-area-scrollbar][data-state='visible']	opacity	1

2. Sistema transversal (1) — 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	scroll-area.css:113	[data-scroll-area-scrollbar]: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

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 (--scroll-area-…)	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

Medido y CERRADO al 100 % el 2026-08-24 (94 % → 100 %, contrato 13 → 13 claves —ninguna acuñada—, centinela 10/13 con 3 adjudicadas, diff de computed 0 sobre 896 valores en 7 estados, 4 nodos).

No entra una sola clave, y ése ES el resultado. El componente llegaba con global a cero, private a cero y trece claves públicas que ya cubrían todo su cromo. Lo único fuera de alcance era un literal: el opacity: 1 de [data-scroll-area-scrollbar][data-state='visible']. Es identidad y va firmado con su anotación: deshace el 0 del estado oculto de la regla de encima, así que es el otro extremo de un par, no un knob. Acuñar --scroll-area-visible-opacity habría creado una clave cuyo único valor sensato es 1 — y además una asimetría, porque el 0 del hermano el censo ni lo cuenta. Precedente literal: navigation-menu.css:360 y select.css:363, la misma frase sobre el mismo par.

Las tres silenciosas del centinela están VIVAS, y una de ellas es la más consumida del contrato. Medidas una a una sobre los nodos reales:

• auto-max-block — su regla es [data-scroll-area][data-autosize] [data-scroll-area-viewport] y el escenario monta el modo fijo por defecto. Forzando data-autosize sobre la raíz real: max-block-size pasa de none a 1234px, y al quitar el token vuelve a none. No es decorativa: la escriben combobox, command, gradient-picker, select y palabras sobre su propio ScrollArea para cerrar la altura del panel. Retirarla habría roto cinco componentes. ⚠ El atributo lo estampa el ENVOLTORIO de eidos desde una prop, no lo declara el morfo, así que la excepción de demo de PLAN §7.8 tampoco lo abre.
• transition-duration / transition-ease — la clase ya conocida: el guard congela transition para poder medir todo lo demás, y estos DOS tokens SON la transición. Medidos sin congelar: 0.12s → 11.5s y cubic-bezier(0.4, 0, 0.2, 1) → steps(4), en la barra y en el thumb.

thumb-bg-hover se queda con el modificador DETRÁS, a propósito. La gramática de D-TH.6 pediría hover-thumb-bg, pero los hovers neutros están EXCLUIDOS del codemod: migran a la capa de estado por la firma 3, y renombrar lo condenado es churn. Su migración además está bloqueada por morfo — el thumb lleva archetype: 'thumb', que no recibe velo — y sigue siendo el único knob de la firma 3 sin resolver.

Lo que este componente enseña: un contrato ya completo se cierra ADJUDICANDO, no acuñando; y la clave que el instrumento leía muerta era justamente la que cinco componentes escriben desde fuera.