svelte-kit-vice/docs/audit/theming/media-player.md

media-player — 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: 88% — 44 de 50 knobs por token público
• Knobs de apariencia: 50 — público 44 · privado 0 · global 0 · literal 6 · sistema 0 · excepción 0 · estructural 0 · puente 0 · canal 0 (los cinco últimos, fuera del ratio)
• Contrato hoy (lib/recipes/base.ts): 61 pública(s) — accent, accent-strong, bg, radius, fg, fg-muted, glass, border, scrim, scrim-height, track, buffered-bg, captions-bg, captions-fg, captions-radius, captions-gap, captions-padding-block, captions-padding-inline, title-font-size, title-font-weight, title-padding-block, title-padding-inline, buffering-size, buffering-border-width, gap-sm, gap-md, gap-lg, gap-xl, padding-block-sm, padding-block-md, padding-block-lg, padding-block-xl, padding-inline-sm, padding-inline-md, padding-inline-lg, padding-inline-xl, time-font-size-sm, time-font-size-md, time-font-size-lg, time-font-size-xl, control-height-sm, control-height-md, control-height-lg, control-height-xl, gap, padding-block, padding-inline, time-font-size, control-height, volume-width, volume-vertical-length, time-slider-min-width, rate-button-min-width, buffering-radius, captions-line-height, time-font-family, time-padding-inline, audio-title-padding-block, audio-title-padding-inline, volume-float-padding-block, volume-float-padding-inline
• Eje size: no · ficheros: media-player.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 (6)

#	fichero:línea	selector	propiedad	valor
1	media-player.css:21	[data-media-player]	width	100%
2	media-player.css:39	[data-media-player-media]	width	100%
3	media-player.css:40	[data-media-player-media]	height	100%
4	media-player.css:53	[data-media-player-poster]	width	100%
5	media-player.css:54	[data-media-player-poster]	height	100%
6	media-player.css:426	[data-media-player-rate-float], [data-media-player-caption-float]	inline-size	max-content

1.4 Excepciones firmadas (0) — 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.

Ninguno.

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?

La receta no declara privados propios en su CSS.

4. Propuesta de corrección

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 (--media-player-…)	scope TSC	valor propuesto	usos
rate-float-width	root	max-content	1

4.2 Sin nombre mecánico (5)

• ⚠ decisión: width es shorthand o eje físico — hay que partirlo en ejes lógicos antes de nombrarlo (recipe-contract §1, R-4.4) — 3: width.
• ⚠ decisión: height es shorthand o eje físico — hay que partirlo en ejes lógicos antes de nombrarlo (recipe-contract §1, R-4.4) — 2: height.

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

Revisión 2026-08-20 — verificación previa a implementación (Opus).

Análisis: CORRECTO en cifras (45 · 0 · 37 · 8 · 0), con el hallazgo de prefijo ya visto en los pickers: el «privado 0» es falso de nombre — la receta declara y consume --_mp-* (fg, fg-muted, accent, accent-strong, border, scrim, pad-inline, captions-*…), prefijo ABREVIADO que viola theming §6 regla 5 y que el censo cuenta como global. Paso previo: renombrar --_mp-* → --_media-player-* (git ls-files antes — el skin puede tocarlos).

Contexto que la propuesta ignora: el componente YA tiene contrato — 2 claves (accent: var(--scale-amber-9), accent-strong), con doctrina escrita en base.ts:4060: acento de proyector theme-stable (debe leerse sobre cualquier vídeo en claro Y oscuro), deliberadamente una escala cruda, y el scrubber lo consume re-tintando los tokens del Slider compuesto. NO «corregir» ese --scale-amber-9 a un rol: es decisión firmada en el propio bloque.

Propuesta: APTA EN PARTE, con tres correcciones:

1. El ⚠ de bg son DOS knobs: la superficie (--color-surface-default) y el velo de controles (linear-gradient(to top, scrim, transparent)). Acuñar bg y controls-scrim (o promover el privado scrim a público y que ambos gradientes lo lean — mejor: UN color de scrim, dos gradientes en la receta).
2. El ⚠ de time-fg son dos estados (tinta plena vs atenuada): tras el renombrado, esos privados deben derivar de públicos fg / fg-muted, y las filas colisionadas desaparecen.
3. Las filas cuyo valor es var(--_mp-*) no se copian tal cual: primero el renombrado, luego el privado lee el público nuevo (o muere). El resto (title, captions, buffering, radius) verbatim válido.

data-size en el root ✓; los sliders compuestos traen su receta (no acuñar sus ejes). El rojo conocido de la suite es skin-media-player — comparar por fichero, no por cifra.

Bloqueos de firma: ninguno duro (el acento theme-stable ya está firmado en el propio bloque).