svelte-kit-vice/docs/audit/theming/image.md

image — 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-25 · Alcance: 100% — 22 de 22 knobs por token público
• Knobs de apariencia: 22 — público 22 · privado 0 · global 0 · literal 0 · sistema 0 · excepción 13 · estructural 0 · puente 0 · canal 0 (los cinco últimos, fuera del ratio)
• Contrato hoy (lib/recipes/base.ts): 23 pública(s) — size-xs, size-sm, size-md, size-lg, size-xl, radius-none, radius-sm, radius-md, radius-lg, radius-full, fade-duration, fade-ease, placeholder-base, skeleton-bg, shimmer-duration, font-family, fallback-fg, fallback-font-size, fallback-line-height, error-bg, error-fg, error-font-size, error-line-height · 1 privada(s) forward — _palette-track
• Eje size: sí · ficheros: image.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 (13) — 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	image.css:30	[data-image]	inline-size	100%
2	image.css:75	[data-image-img]	inline-size	100%
3	image.css:76	[data-image-img]	block-size	100%
4	image.css:89	[data-image-img][data-status='loaded']	opacity	1
5	image.css:129	[data-image-fallback]	inline-size	100%
6	image.css:130	[data-image-fallback]	block-size	100%
7	image.css:140	[data-image-fallback-src]	inline-size	100%
8	image.css:141	[data-image-fallback-src]	block-size	100%
9	image.css:170	[data-image][data-placeholder='color'] [data-image-fallback]	background	var(--_image-placeholder-color)
10	image.css:208	[data-image-error]	inline-size	100%
11	image.css:209	[data-image-error]	block-size	100%
12	image.css:220	[data-image-error-src]	inline-size	100%
13	image.css:221	[data-image-error-src]	block-size	100%

2. Sistema transversal (0) — informativo, fuera del ratio

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

Ninguno.

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

privado	declaraciones	valor(es)	origen	¿deriva de un público?
--_image-radius	5	var(--image-radius-none), var(--image-radius-sm), var(--image-radius-md), var(--image-radius-lg), var(--image-radius-full)	public	sí
--_image-placeholder-color	2	var(--_image-palette-track), var(--color-neutral-track)	global, private	no

Consumidos y no declarados en el CSS (vienen de base.ts o de un estilo inline del wrapper): --_image-palette-track.

4. Propuesta de corrección

• Tiene eje size: los tokens dimensionales van por talla ({part}-{eje}-{k}) apuntando al bundle --size-{k}-*, nunca al primitivo crudo (theming §5; el guard recipe-css-contract prohíbe el primitivo).

4.1 Tokens a declarar en lib/recipes/base.ts (1)

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 (--image-…)	scope TSC	valor propuesto	usos
fallback-bg	root	var(--_image-placeholder-color)	1

4.2 Sin nombre mecánico (12)

• ⚠ decisión: 100% 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 — 11: inline-size, block-size.
• ⚠ 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

EJECUTADO 2026-08-23 — 60 % → 96 %, UNA clave nueva y 12 literales anotados. La fila que queda fuera es el puente de paleta del placeholder de color, que no es deuda.

Su «deuda» era casi toda identidad: once 100 % (la imagen, el fallback, el error y sus dos <img> llenan su caja) y un opacity: 1 (una imagen CARGADA es opaca). Ninguno es una perilla; los doce llevan ya su razón escrita.

Lo acuñado es la barra del esqueleto (skeleton-bg): leía --gradient-shimmer a pelo, y es lo único que un tema querría retocar de ese placeholder sin tocar todas las recetas que brillan.

Tres cegueras del instrumento, y una es nueva y genérica:

• placeholder-base sólo existe dentro de @media (prefers-reduced-motion: reduce) —donde el brillo se sustituye por un plano—, y el guard corre con el movimiento activo. Emulando la preferencia, alcanza. Cualquier token que viva bajo una media query de preferencia leerá muerto.
• Los dos de fade son la transición que el guard congela para poder medir.
• La página NO alcanza networkidle NUNCA (monta un src roto a propósito para su estado de error, y el navegador reintenta): sonda y guard morían con un TimeoutError antes de medir un solo nodo. Ahora las dos caen al evento load si la espera de red se agota — la ociosidad era una comodidad, no una garantía.

Y una lectura fantasma, cazada por repetición: el primer diff acusó opacity: 0.925793 → 1 en la imagen cargada. Era el fade EN VUELO — el mismo tipo de falso positivo que el rim animado de onion-menu esta mañana. Repetida la medida: 0 diffs. Un comentario CSS no puede mover un computado, y la prueba es que la segunda pasada coincide consigo misma.

Verificación: diff de computed = 0 sobre 544 valores en 7 estados (medida repetida) · comprobación aparte del esqueleto y del base de movimiento reducido · centinela 20/23 con las tres adjudicadas · censo 96 % · component:audit PASS · suite eidos con el rojo conocido ajeno · rtl:check 0 · docs:check 0.