svelte-kit-vice/docs/audit/theming

Auditoría de alcance de tema — el catálogo entero

Generado, no escrito a mano: node --import tsx/esm scripts/theming-census.ts --report. Este README es la vista de conjunto; una ficha por componente al lado, con su análisis y su propuesta de corrección. Método, clases, protocolo de verificación y fases: PLAN-theming.md. La auditoría del SISTEMA de theming (fase 1, cerrada 2026-07-07) es theming-audit.md; ésta es la deuda de adopción que aquélla dejó apuntada en su §5.3-3.

• Medido: 2026-08-25 · 162 recetas con CSS + 8 componentes sin receta = 170 fichas, el árbol entero de eidos/components/
• La pregunta: ¿cuánto de la apariencia de cada componente puede cambiar un tema sin tocar el sistema ni la receta?
• Alcance global: 73% — 3074 de 4228 knobs pasan por un token público del componente
• Reparto: público 3074 · privado 66 · global 763 · literal 325 · sistema transversal 509 · excepción firmada 273 · estructural 9 · puente de paleta 132 · canal de valor 36 (los cinco últimos, fuera del ratio)
• Sin token público propio: 16 · alcance < 20 %: 6 · alcance 100 %: 65 · con eje size: 55 · estructurales: 5

Cómo se lee

clase	qué es	¿lo alcanza un tema del componente?
public	var(--{c}-…), el contrato del componente	sí
private	var(--_{c}-…), nombre interno	sólo si el privado deriva de un público (cada ficha lo dice en §3)
global	primitivo del sistema (--space-*, --radius-*, --color-*, bundle --size-{k}-*…)	sólo moviendo el sistema entero
literal	ni token: 8px, 1.25, #fff	no — y viola R-2/R-4
system	sistemas transversales que la receta CONSUME por contrato (capa de estado, anillo de foco, planos de depth, motion, bandas z, opacidad, shape, floating-gap)	sí, a nivel de sistema, por diseño (recipe-contract §2) — fuera del ratio
exception	un literal con su anotación /* literal: <razón> */ en la propia declaración	no hace falta: es la válvula de recipe-contract §3, una desviación ya firmada — fuera del ratio
structural	todos los knobs de un componente cuyo 0 % es su NATURALEZA y no su deuda: no hay contrato que escribir (lista firmada abajo)	no hace falta: no hay superficie que un tema pueda nombrar — fuera del ratio, y su fila lee strct, no 0 %
bridge	var(--_{c}-palette-{slot}): el privado que escribe el forward de la cascada de paleta (THM-2)	sí, por la paleta — y también por los tonos públicos del componente; acuñar encima mataría el color= por instancia — fuera del ratio
channel	var(--_{c}-x, fallback) que nadie declara: lo escribe soma o el envoltorio por INSTANCIA (un %, un rect medido, la talla de una prop)	no debe: fijarlo desde un tema rompe el comportamiento — fuera del ratio

Alcance = public / (public + private + global + literal). system, exception, structural, bridge y channel quedan fuera del denominador: el primero es tematizable a nivel de sistema por diseño, el segundo es una desviación que el canon ya aceptó por escrito, el tercero no tiene nada que un tema pueda nombrar, y los dos últimos son las dos formas de privado que la doctrina de este eje ya adjudicó como NO deuda — el mecanismo de la paleta y el valor de runtime. Lo que queda en private es el residuo: se adjudica clave por clave (theming-census.ts --residue).

Límites de la medida (regex sobre el CSS; sobre-reporta, nunca infra-reporta): una declaración con varios tokens se clasifica por la primera clase que casa (público → privado → sistema → global); el token público de OTRO componente cuenta como global y la ficha lo marca «⤴ prestado»; los valores dentro de @keyframes cuentan como cualquier otro. Tres defectos que ningún regex ve — privado que no deriva, velo en el nodo equivocado, doble animación — van en la checklist §4.4 de cada ficha.

Estructurales (5) — 0 % por naturaleza, no por deuda

Medidos uno a uno el 2026-08-22, con veredicto §5 escrito en su ficha: ninguno tiene contrato que escribir. Mientras el censo los contaba como a un componente con deuda real, la cifra global mentía por abajo y el gate de F3 («censo 100 %») era inalcanzable por construcción (next-features §13). Sus knobs se siguen contando y listando —un knob estructural sigue siendo un knob—; sólo salen del denominador, igual que system. La lista firmada vive en scripts/theming-census.ts (STRUCTURAL_COMPONENTS), con su razón al lado.

• aspect-ratio (3): es una FACETA de box, no un componente: el eje lo posee box y su knob viene prestado (⤴); --aspect-ratio es canal de valor por instancia
• cascade (1): su knob es el opacity del gate antiparpadeo: mecánica del canal de motion, cuyo valor tematizable vive en EidosConfig.motion
• date-picker (2): sus dos knobs son la corrección max-content del pie del popover — un único valor correcto; su cromo vive en field, calendar y picker-shell
• motion (1): igual que cascade: el opacity del gate [data-animation-pending] es mecánica del canal, tematizable desde EidosConfig.motion
• text-blur (2): sus dos knobs son el 1px de la técnica sr-only: receta de accesibilidad idéntica en todo el catálogo, no estética

Puente de paleta (132 knobs) y canal de valor (36) — privados que NO son deuda

Las dos formas de privado que la doctrina de este eje ya adjudicó, y que ahora se distinguen mecánicamente — medidas contra el emisor, no adivinadas por el nombre. La fuente es la SALIDA del generador (src/uix/eidos/generated/base.css, que generated-css.test.ts mantiene idéntica a renderStaticCss()):

• puente — el nombre aparece en la CSS generada como la línea del forward --_{c}-palette-{slot}: var(--palette-{slot}, …). Un nombre con forma de puente que nadie reenvía no cuenta.
• canal — el privado no lo declara nadie: ni la CSS del componente ni el generador. Lo escribe soma o el envoltorio por instancia.

Puente (30): tag-group 14 · stepper 11 · radio-group 10 · checkbox 8 · file-upload 8 · calendar 7 · editable 7 · month-grid 7 · range-calendar 7 · year-grid 7 · select 5 · card 4 · combobox 4 · tags-input 4 · callout 3 · listbox 3 · table 3 · badge 2 · carousel 2 · clipboard 2 · grid-list 2 · link 2 · mark 2 · switch 2 · color-picker 1 · drag-drop 1 · feed 1 · field 1 · tree-grid 1 · tree-view 1

Canal (14): chronos 7 · drawer 6 · dialog 4 · popover 3 · tooltip 3 · code-block 2 · color-picker 2 · link 2 · progress 2 · background 1 · file-upload 1 · knob 1 · meter 1 · scroll-frames 1

Lo que NO cae en ninguna de las dos es el residuo (66 knobs en 10 componentes): conmutadores por variante, privados que leen un global en una rama, escaleras por talla sin público detrás. Se adjudican clave a clave — theming-census.ts --residue los vuelca con las fuentes de cada declaración.

Qué NO propone una ficha

La propuesta deriva nombres de la doctrina; no la contradice. Por eso una ficha nunca propone acuñar un token para:

• lo que posee una capa compartida (list-surface, spin-field, picker-shell, viewport-placement, field-segment-state, menu-indicator, sliding-indicator): un eje = un token público de la capa
  • una ranura privada, consumido var(--_x, var(--x)) — el consumidor no acuña --{c}-{eje} (README de eidos/components, «Capas compartidas» regla 2);
• el foco (--focus-ring-*, theming §32) ni la capa de estado (--state-*, §38): un knob del sistema, no del componente;
• un token prestado de otro componente (la familia calendar en los pickers): la corrección es la decisión de familia registrada en theming-audit.md §B, no un duplicado con prefijo propio;
• un shorthand o un eje físico (padding, border, height): primero se parte en ejes lógicos (recipe-contract §1, R-4.4), y eso es decisión.

Sin receta CSS (8)

Ni un .css en su directorio: no hay knob que medir, y eso es una respuesta, no un hueco. Cada ficha dice —medido, no supuesto— dónde vive su visual: el componente que compone, la capa compartida que consume, o la receta ajena que pinta sus attrs (y cuyos knobs ya están contados allí).

affix · count-up · format-date · format-number · icon-button · relative-time · svg · trans

Y el vocabulario de nombres tiene una desviación medida: el catálogo habla mayoritariamente con el modificador al final (-bg-hover, -bg-active) mientras theming §6.7 lo pone delante (hover-bg). Las fichas proponen la forma documentada y lo dejan anotado: la normalización es D-TH.6, sin firmar.

Los 20 con más knobs fuera del contrato

#	componente	fuera de alcance	alcance	knobs	contrato
1	palabras	360	22%	468	0
2	chronos	223	1%	240	9
3	time-range-picker	67	20%	88	22
4	time-picker	47	18%	59	16
5	proof-of-human	44	24%	62	20
6	field-langs	37	0%	39	0
7	date-range-picker	30	40%	53	22
8	radio-cards	27	61%	72	40
9	drawer	21	67%	72	54
10	natural-time-picker	20	74%	77	62
11	sidebar	19	55%	45	50
12	mockup	18	38%	29	9
13	color-picker	16	79%	81	71
14	password-field	13	62%	35	30
15	popover	12	73%	50	46
16	chart	10	89%	95	45
17	combobox	9	89%	97	106
18	prose	9	83%	53	37
19	audio-player	8	56%	18	8
20	spin-field	8	67%	26	20

Sin ningún token público propio (16)

Ni una clave pública en lib/recipes/base.ts — alguno tiene privados forward (_palette-*), que no son contrato: un tema no puede nombrarlos.

alert-dialog · auto-grid · css-field · display · field-langs · heading · highlight · mask-field · month-grid · number-field · palabras · range-calendar · stack · text · wrap · year-grid

Tabla completa (162 recetas, por alcance ascendente)

La columna «contrato» cuenta las claves públicas del bloque del componente.

componente	alcance	knobs	público	privado	global	literal	sistema	estructural	puente	canal	contrato	size
range-calendar	0%	98	0	0	2	4	85	0	7	0	0	–
month-grid	0%	61	0	0	0	5	49	0	7	0	0	–
year-grid	0%	61	0	0	0	5	49	0	7	0	0	–
field-langs	0%	39	0	0	31	6	2	0	0	0	0	–
chronos	1%	240	3	14	198	11	7	0	0	7	9	y
time-picker	18%	59	10	12	24	11	2	0	0	0	16	y
time-range-picker	20%	88	17	19	33	15	4	0	0	0	22	y
skin-media-player	22%	11	2	0	1	6	2	0	0	0	10	y
palabras	22%	468	103	1	272	87	5	0	0	0	0	–
proof-of-human	24%	62	14	0	29	15	4	0	0	0	20	–
scroll-frames	38%	9	3	0	1	4	0	0	0	1	4	–
menu-dial	38%	8	3	0	1	4	0	0	0	0	3	y
mockup	38%	29	11	0	13	5	0	0	0	0	9	–
date-range-picker	40%	53	20	9	19	2	3	0	0	0	22	y
text-scramble	50%	4	2	0	0	2	0	0	0	0	2	–
split-button	50%	2	1	0	1	0	0	0	0	0	1	y
toggle-group	50%	2	1	0	1	0	0	0	0	0	1	–
sidebar	55%	45	23	0	14	5	3	0	0	0	50	–
audio-player	56%	18	10	0	8	0	0	0	0	0	8	–
link	57%	14	4	0	1	2	3	0	2	2	5	–
radio-cards	61%	72	43	0	23	4	2	0	0	0	40	y
password-field	62%	35	21	2	2	9	1	0	0	0	30	y
spin-field	67%	26	16	0	8	0	2	0	0	0	20	–
virtual-list	67%	13	8	0	0	4	1	0	0	0	12	–
drawer	67%	72	43	0	16	5	2	0	0	6	54	y
s-text-virtual-list	70%	10	7	0	3	0	0	0	0	0	9	–
popover	73%	50	32	0	12	0	3	0	0	3	46	y
virtual-grid	73%	12	8	0	0	3	1	0	0	0	12	–
natural-time-picker	74%	77	56	0	14	6	1	0	0	0	62	y
color-picker	79%	81	59	3	2	11	3	0	1	2	71	y
aura	80%	35	28	0	1	6	0	0	0	0	37	y
spinner	80%	20	16	0	0	4	0	0	0	0	18	–
knob	82%	26	18	0	1	3	3	0	0	1	33	–
meter	82%	12	9	0	2	0	0	0	0	1	28	y
carousel	82%	35	23	0	0	5	5	0	2	0	27	–
prose	83%	53	44	0	0	9	0	0	0	0	37	y
clipboard	83%	8	5	0	1	0	0	0	2	0	6	–
skeleton	83%	6	5	0	0	1	0	0	0	0	9	–
onion-menu	84%	22	16	0	1	2	3	0	0	0	19	–
waveform	86%	7	6	0	1	0	0	0	0	0	11	y
context-menu	87%	33	26	0	1	3	3	0	0	0	28	–
kbd	87%	15	13	0	1	1	0	0	0	0	13	–
textarea	87%	26	20	0	0	3	3	0	0	0	37	–
metrics	87%	47	41	2	0	4	0	0	0	0	72	y
announce	88%	8	7	0	1	0	0	0	0	0	9	–
media-player	88%	50	44	0	0	6	0	0	0	0	61	–
code-block	88%	27	22	0	3	0	0	0	0	2	20	–
gradient-picker	88%	27	23	0	2	1	1	0	0	0	25	–
menubar	88%	27	23	0	3	0	1	0	0	0	35	y
chart	89%	95	81	0	0	10	4	0	0	0	45	–
float-panel	89%	50	41	0	0	5	4	0	0	0	40	–
combobox	89%	97	76	0	3	6	8	0	4	0	106	–
card-group	90%	22	18	0	0	2	2	0	0	0	20	–
result	90%	21	19	0	0	2	0	0	0	0	27	–
grid-list	92%	31	22	0	1	1	5	0	2	0	38	–
listbox	92%	31	23	0	1	1	3	0	3	0	21	–
accordion	92%	64	58	0	0	5	1	0	0	0	76	y
table	93%	46	37	0	0	3	3	0	3	0	45	–
gradient-builder	93%	60	52	0	1	3	4	0	0	0	72	–
progress	93%	30	26	0	2	0	0	0	0	2	43	y
color-field	93%	15	14	0	1	0	0	0	0	0	26	y
form	93%	47	43	3	0	0	1	0	0	0	64	y
feed	94%	34	30	0	1	1	1	0	1	0	50	–
tooltip	94%	20	15	1	0	0	1	0	0	3	23	y
cropper	94%	20	17	0	1	0	2	0	0	0	17	–
picker-shell	95%	21	20	0	1	0	0	0	0	0	31	y
nav-tree	96%	24	22	0	0	1	1	0	0	0	18	–
tree-view	96%	28	24	0	0	1	2	0	1	0	46	–
dropdown-menu	96%	30	27	0	1	0	2	0	0	0	28	–
tag-group	97%	46	28	0	0	1	3	0	14	0	91	y
timeline	97%	37	36	0	0	1	0	0	0	0	45	y
tabs	97%	77	74	0	2	0	1	0	0	0	79	y
tree-grid	97%	42	37	0	0	1	3	0	1	0	47	–
stepper	98%	60	44	0	0	1	4	0	11	0	69	y
radio-group	98%	59	46	0	1	0	2	0	10	0	69	–
command	98%	52	49	0	0	1	2	0	0	0	57	–
chat-message	100%	78	71	0	0	0	7	0	0	0	81	y
select	100%	69	57	0	0	0	7	0	5	0	103	y
calendar	100%	67	57	0	0	0	3	0	7	0	74	–
field	100%	64	58	0	0	0	5	0	1	0	68	y
file-upload	100%	56	45	0	0	0	2	0	8	1	98	y
tags-input	100%	46	38	0	0	0	4	0	4	0	91	y
toast	100%	45	45	0	0	0	0	0	0	0	85	–
editable	100%	42	31	0	0	0	4	0	7	0	56	y
chat-composer	100%	39	34	0	0	0	5	0	0	0	33	–
chat-log	100%	37	34	0	0	0	3	0	0	0	35	–
navigation-menu	100%	37	33	0	0	0	4	0	0	0	44	–
heading	—	36	0	0	0	0	36	0	0	0	0	–
dialog	100%	35	31	0	0	0	0	0	0	4	44	y
card	100%	33	28	0	0	0	1	0	4	0	98	y
slider	100%	32	31	0	0	0	1	0	0	0	39	y
toolbar	100%	32	30	0	0	0	2	0	0	0	54	y
checkbox	100%	30	21	0	0	0	1	0	8	0	47	y
s-text	100%	30	2	0	0	0	28	0	0	0	3	–
emoji-picker	100%	26	22	0	0	0	4	0	0	0	21	–
pagination	100%	26	24	0	0	0	2	0	0	0	34	y
toggle	100%	25	24	0	0	0	1	0	0	0	126	y
avatar	100%	24	24	0	0	0	0	0	0	0	86	y
text	—	24	0	0	0	0	24	0	0	0	0	–
background	100%	23	19	0	0	0	3	0	0	1	37	–
breadcrumb	100%	23	20	0	0	0	3	0	0	0	28	y
image	100%	22	22	0	0	0	0	0	0	0	23	y
button	100%	21	20	0	0	0	1	0	0	0	106	y
switch	100%	20	17	0	0	0	1	0	2	0	52	y
chat-list	100%	18	18	0	0	0	0	0	0	0	18	–
pin-input	100%	18	17	0	0	0	1	0	0	0	22	y
splitter	100%	18	17	0	0	0	1	0	0	0	15	–
badge	100%	17	15	0	0	0	0	0	2	0	71	y
empty-state	100%	17	17	0	0	0	0	0	0	0	26	y
image-adjustments	100%	17	14	0	0	0	3	0	0	0	16	–
link-preview	100%	17	14	0	0	0	3	0	0	0	35	–
drag-drop	100%	16	8	0	0	0	7	0	1	0	9	–
fab	100%	16	16	0	0	0	0	0	0	0	12	–
image-picker	100%	16	13	0	0	0	3	0	0	0	14	–
scroll-area	100%	16	15	0	0	0	1	0	0	0	13	–
callout	100%	14	11	0	0	0	0	0	3	0	34	–
rating-group	100%	14	13	0	0	0	1	0	0	0	29	–
code	100%	13	7	0	0	0	6	0	0	0	6	–
anchor-nav	100%	12	11	0	0	0	1	0	0	0	12	–
collapsible	100%	12	10	0	0	0	2	0	0	0	12	–
date-field	100%	11	11	0	0	0	0	0	0	0	21	y
search-field	100%	11	10	0	0	0	1	0	0	0	17	y
time-field	100%	11	11	0	0	0	0	0	0	0	21	y
text-gradient	100%	10	10	0	0	0	0	0	0	0	7	–
banner	100%	9	9	0	0	0	0	0	0	0	53	y
box	100%	9	9	0	0	0	0	0	0	0	43	–
chat-typing	100%	9	9	0	0	0	0	0	0	0	8	–
label	100%	8	2	0	0	0	6	0	0	0	2	–
text-focus	100%	8	8	0	0	0	0	0	0	0	8	–
color-swatch	100%	7	7	0	0	0	0	0	0	0	14	y
date-range-field	100%	7	6	0	0	0	1	0	0	0	7	–
time-range-field	100%	7	6	0	0	0	1	0	0	0	7	–
display	—	6	0	0	0	0	6	0	0	0	0	–
skip-link	100%	6	5	0	0	0	1	0	0	0	8	–
text-circular	100%	6	6	0	0	0	0	0	0	0	6	–
barcode	100%	5	5	0	0	0	0	0	0	0	7	–
mark	100%	5	3	0	0	0	0	0	2	0	3	–
separator	100%	4	4	0	0	0	0	0	0	0	3	–
aspect-ratio	strct	3	0	0	0	0	0	3	0	0	0	–
qr-code	100%	3	3	0	0	0	0	0	0	0	10	–
button-group	100%	2	2	0	0	0	0	0	0	0	1	–
date-picker	strct	2	0	0	0	0	0	2	0	0	0	–
flex	100%	2	2	0	0	0	0	0	0	0	7	–
grid	100%	2	2	0	0	0	0	0	0	0	13	–
text-blur	strct	2	0	0	0	0	0	2	0	0	0	–
cascade	strct	1	0	0	0	0	0	1	0	0	0	–
motion	strct	1	0	0	0	0	0	1	0	0	0	–
sticky	100%	1	1	0	0	0	0	0	0	0	1	–
surface	100%	1	1	0	0	0	0	0	0	0	25	–
alert-dialog	—	0	0	0	0	0	0	0	0	0	0	–
auto-grid	—	0	0	0	0	0	0	0	0	0	0	–
container	—	0	0	0	0	0	0	0	0	0	1	–
css-field	—	0	0	0	0	0	0	0	0	0	0	–
float	—	0	0	0	0	0	0	0	0	0	1	–
group	—	0	0	0	0	0	0	0	0	0	1	–
highlight	—	0	0	0	0	0	0	0	0	0	0	–
icon	—	0	0	0	0	0	0	0	0	0	2	–
mask-field	—	0	0	0	0	0	0	0	0	0	0	–
number-field	—	0	0	0	0	0	0	0	0	0	0	–
section	—	0	0	0	0	0	0	0	0	0	4	–
stack	—	0	0	0	0	0	0	0	0	0	0	–
wrap	—	0	0	0	0	0	0	0	0	0	0	–

Veredicto y decisiones

(pendiente — lo escribe el autor; se conserva al regenerar)