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

slider — 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% — 31 de 31 knobs por token público
• Knobs de apariencia: 32 — público 31 · privado 0 · global 0 · literal 0 · sistema 1 · excepción 1 · estructural 0 · puente 0 · canal 0 (los cinco últimos, fuera del ratio)
• Contrato hoy (lib/recipes/base.ts): 39 pública(s) — track-size-xs, track-size-sm, track-size-md, track-size-lg, track-size-xl, thumb-size-xs, thumb-size-sm, thumb-size-md, thumb-size-lg, thumb-size-xl, hit-size-xs, hit-size-sm, hit-size-md, hit-size-lg, hit-size-xl, tick-size-xs, tick-size-sm, tick-size-md, tick-size-lg, tick-size-xl, min-inline-size, min-block-size, track-radius, track-bg, range-bg, secondary-bg, thumb-radius, thumb-border-width, thumb-border, thumb-bg, thumb-shadow, active-thumb-scale, active-thumb-shadow, tick-radius, tick-bg, active-tick-bg, transition-duration, transition-ease, disabled-opacity
• Eje size: sí · ficheros: slider.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	slider.css:70	[data-slider][data-orientation='horizontal']	inline-size	100%

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	slider.css:174	[data-slider-thumb]:focus-visible	outline	var(--focus-ring-width) solid var(--focus-ring-color)

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

privado	declaraciones	valor(es)	origen	¿deriva de un público?
--_slider-track-size	5	var(--slider-track-size-md), var(--slider-track-size-xs), var(--slider-track-size-sm), var(--slider-track-size-lg), var(--slider-track-size-xl)	public	sí
--_slider-thumb-size	5	var(--slider-thumb-size-md), var(--slider-thumb-size-xs), var(--slider-thumb-size-sm), var(--slider-thumb-size-lg), var(--slider-thumb-size-xl)	public	sí
--_slider-hit-size	5	var(--slider-hit-size-md), var(--slider-hit-size-xs), var(--slider-hit-size-sm), var(--slider-hit-size-lg), var(--slider-hit-size-xl)	public	sí
--_slider-tick-size	5	var(--slider-tick-size-md), var(--slider-tick-size-xs), var(--slider-tick-size-sm), var(--slider-tick-size-lg), var(--slider-tick-size-xl)	public	sí

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 (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 (--slider-…)	scope TSC	valor propuesto	usos

4.2 Sin nombre mecánico (1)

• ⚠ 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 — 1: inline-size.

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 (97 % → 100 %, contrato 39 → 39 claves —ninguna acuñada—, centinela 32/39 con 7 adjudicadas, diff de computed 0 sobre 1.376 valores en 7 estados, 7 nodos).

No entra una sola clave. El componente llegaba con global a cero, private a cero —sus cuatro privados son la escala resuelta por talla, que ya deriva de públicos— y treinta y nueve claves cubriendo su cromo entero. Lo único fuera de alcance era un literal: el inline-size: 100% del rail horizontal. Es identidad —un rail ocupa su contenedor— y va firmado; el knob de verdad existe y se llama min-inline-size, que es su SUELO. Precedente literal: separator.css:26, cerrado el mismo día con la misma frase y también sin acuñar nada.

Las siete silenciosas del centinela están VIVAS. Ninguna miente: el escenario sólo lleva puesta una de sus caras. Medidas una a una sobre los nodos reales, con transition congelada salvo donde el token ES la transición:

• min-block-size — sólo [data-slider][data-orientation='vertical'] la lee. Con el chip de orientación de la demo: 160px → 1234px en block-size y min-block-size.
• active-thumb-scale / active-thumb-shadow — el pickup vive en [data-slider-thumb]:active y pide el puntero MANTENIDO; el pase estático del guard lo aparca. Con un mouse.down() real sobre el thumb real: scale 1.15 → 4.56 y la sombra sigue al centinela.
• active-tick-bg — un tick lleva data-active sólo mientras su valor cae DENTRO de [min(valores), max(valores)] (soma, SliderTickProvider.isActive), así que un pulgar único en 40 con ticks en 0/50/100 deja los tres inactivos: la marca activa no es un estado del tick, es una relación con el rango. Con el chip multiple (20–80) el tick 50 se activa y el token alcanza.
• disabled-opacity — el escenario arranca habilitado; con su propio interruptor, opacity 0.4 → 0.123.
• transition-duration / transition-ease — SON la transición que el guard congela para poder medir lo demás. Sin congelar: 0.12s → 11.5s en las cuatro propiedades transicionadas del thumb, y steps(4).

hit-size-{k} y track-size-{k} son dos knobs a propósito, y conviene que quede escrito antes de que alguien los funda: el primero es el área de agarre (la altura del control), el segundo el grosor de la pintura sobre el ::before de la raíz. Un rail de 6 px con 32 px de agarre es el objetivo táctil, no un descuadre.

Este contrato lo COMPONEN otros siete componentes —media-player, skin-media-player, waveform (su playhead ES este thumb), color-picker, gradient-builder, image-adjustments y time-range-picker— que re-tiñen o re-dimensionan estas mismas claves sobre su Slider embebido. min-block-size, que el centinela leía muerta, es exactamente la que media-player escribe para su volumen vertical. Ninguna clave de este bloque se retira ni se renombra sin barrer esos siete.

Lo que este componente enseña: cuando el escenario lleva un solo valor, el estado «activo» de un indicador de rango no existe, y el guard lo lee como un token que miente.