svelte-kit-vice/docs/audit/theming/emoji-picker.md

emoji-picker — 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% — 22 de 22 knobs por token público
• Knobs de apariencia: 26 — público 22 · privado 0 · global 0 · literal 0 · sistema 4 · excepción 3 (los dos últimos, fuera del ratio)
• Contrato hoy (lib/recipes/base.ts): 21 pública(s) — trigger-size, open-trigger-fg, panel-width, panel-gap, header-gap, grid-gap, grid-max-block-size, grid-padding-inline, grid-padding-block-end, option-radius, option-font-size, tone-marker-size, tone-marker-radius, tone-marker-bg, footer-gap, footer-border-fg, preview-gap, preview-glyph-size, preview-name-font-size, preview-name-fg, preview-min-block-size
• Eje size: no · ficheros: emoji-picker.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 (3) — 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	emoji-picker.css:64	[data-emoji-picker-content]	inline-size	100%
2	emoji-picker.css:111	[data-emoji-picker-content] [data-emoji-picker-option]	line-height	1
3	emoji-picker.css:155	[data-emoji-picker-preview] > :first-child	line-height	1

2. Sistema transversal (4) — 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	emoji-picker.css:38	[data-emoji-picker-trigger]:hover:not([data-disabled])	background-image	linear-gradient(var(--state-hover), var(--state-hover))
2	emoji-picker.css:42	[data-emoji-picker-trigger]:focus-visible	outline	var(--focus-ring-width) solid var(--focus-ring-color)
3	emoji-picker.css:48	[data-emoji-picker-trigger][data-state='open']	background-image	linear-gradient(var(--state-hover), var(--state-hover))
4	emoji-picker.css:53	[data-emoji-picker-trigger][data-disabled]	opacity	var(--opacity-disabled)

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

4.2 Sin nombre mecánico (3)

• ⚠ 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.
• ⚠ 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 — 2: line-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

EJECUTADO 2026-08-23 — 61 % → 100 %. Siete claves nuevas, tres retiradas por muertas, tres literales firmados y cinco adjudicaciones medidas. Contrato 17 → 21. Diff de computed 0 sobre 6.080 valores en 8 estados (176 nodos con el panel abierto), capturas 2× antes/después idénticas.

Las siete, con el nombre que dio el catálogo: open-trigger-fg (accordion lo nombra igual), grid-padding-inline + grid-padding-block-end (el eje lógico completo, como en card-group / combobox / command) y las tres del marcador de tono, la familia timeline.marker-{size,radius,bg}. Se llama tone-marker-* y no marker-* porque el pie lleva además un selector de TONO: marker a secas sería ambiguo dentro del propio componente.

TRES CLAVES RETIRADAS — el cromo de reposo del trigger no es suyo. El trigger lleva también data-popover-trigger, y [data-popover-trigger]:not([data-archetype='field-trigger']) es (0,2,0) contra el (0,1,0) de esta receta: el radio, la tinta y el tamaño de letra los pinta popover.css. Medido: mover --emoji-picker-trigger-{fg,radius,font-size} no cambiaba NADA. Retiradas con sus declaraciones, 0 diffs, que es la prueba de que estaban muertas. Es el defecto que gradient-picker documentó (36 de sus 45 tokens) y la misma respuesta. Sobreviven dos, y por razones distintas: trigger-size porque popover dimensiona con height y no con el par lógico, y open-trigger-fg porque su selector añade [data-state='open'] y gana por orden. trigger-fg no llegó a existir: se acuñó y se midió muerta en el mismo pase.

Cinco adjudicaciones, todas medidas forzando sobre nodos reales: las tres del marcador de tono (la demo monta cero celdas data-tone-capable; forzado el atributo sobre una celda real, el ::after alcanza — 4px → 37px, 9999px → 37px, y el fondo), preview-name-fg (los hijos de la vista previa son <span> desnudos, sin atributo del componente, así que quedan fuera del conjunto medido) y open-trigger-fg, que es el caso interesante.

⚠ open-trigger-fg OSCILA entre corridas: 17/21, 16/21, 16/21 con el mismo código. Medido vivo cuatro veces —la última replicando paso a paso el staticPass del propio guard, que movió a la primera talla—, así que el token no miente: lo que falla es el instrumento. La causa: el panel se cierra en algún punto de la pasada y, durante la animación de SALIDA, el content sigue en el DOM mientras el trigger ya perdió data-state='open' — que es lo que la regla selecciona; reopen() mira el CONTENT, cree que está abierto y no reabre. Probé un openMarker sobre el trigger y no basta (el clic de reapertura cae en esa misma ventana), así que lo retiré en vez de dejar un override que no arregla. El arreglo real es que reopen() espere a la CONDICIÓN en vez de dormir un número fijo — §13. Su entrada de ledger saldrá STALE en las corridas donde alcanza, y eso está escrito en la propia razón para que nadie la borre por ello.

Y el instrumento de captura estaba roto desde siempre: __shot.ts tenía el puerto 5173 cableado, así que cualquier sesión en otro puerto moría con ERR_EMPTY_RESPONSE. Es probablemente por lo que los pasos 6 y 13 del protocolo se saltaron en 33 componentes. Ahora toma la URL como argumento y un --open opcional para los componentes cuya superficie sólo existe abierta.

Verificación: sonda antes/después 0 diffs (6.080 valores · 8 estados) · R-5.4 17/21 con las cinco adjudicadas, exit 0 · component:audit PASS · censo 100 % · eidos-lint 17 morfo-backed / 0 invalid, 0 class-hooks · rtl:check 0 · docs:check 0 · capturas 2× antes y después, miradas.