You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
svelte-kit-vice/docs/audit/theming/empty-state.md

99 lines
5.6 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

# empty-state — 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](./README.md) · método y protocolo:
> [`PLAN-theming.md`](../../process/PLAN-theming.md) §1, §2, §7.
- **Medido**: 2026-08-24 · **Alcance**: **100%** — 17 de 17 knobs por token público
- **Knobs de apariencia**: 17 — público 17 · privado 0 · global 0 · literal 0 · sistema 0 · excepción 0 _(los dos últimos, fuera del ratio)_
- **Contrato hoy** (`lib/recipes/base.ts`): 26 pública(s) — `gap`, `actions-gap`, `media-bg`, `media-fg`, `media-radius`, `description-measure`, `padding-block-sm`, `padding-block-md`, `padding-block-lg`, `padding-inline-sm`, `padding-inline-md`, `padding-inline-lg`, `title-font-size-sm`, `title-font-size-md`, `title-font-size-lg`, `description-font-size-sm`, `description-font-size-md`, `description-font-size-lg`, `media-glyph-size-sm`, `media-glyph-size-md`, `media-glyph-size-lg`, `title-font-weight`, `title-line-height`, `title-fg`, `description-line-height`, `description-fg`
- **Eje `size`**: sí · **ficheros**: `empty-state.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 (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?
| privado | declaraciones | valor(es) | origen | ¿deriva de un público? |
| --- | ---: | --- | --- | :-: |
| `--_empty-state-padding-block` | 3 | `var(--empty-state-padding-block-sm)`, `var(--empty-state-padding-block-md)`, `var(--empty-state-padding-block-lg)` | public | **sí** |
| `--_empty-state-padding-inline` | 3 | `var(--empty-state-padding-inline-sm)`, `var(--empty-state-padding-inline-md)`, `var(--empty-state-padding-inline-lg)` | public | **sí** |
| `--_empty-state-title-font-size` | 3 | `var(--empty-state-title-font-size-sm)`, `var(--empty-state-title-font-size-md)`, `var(--empty-state-title-font-size-lg)` | public | **sí** |
| `--_empty-state-body-font-size` | 3 | `var(--empty-state-description-font-size-sm)`, `var(--empty-state-description-font-size-md)`, `var(--empty-state-description-font-size-lg)` | public | **sí** |
| `--_empty-state-media-glyph` | 3 | `var(--empty-state-media-glyph-size-sm)`, `var(--empty-state-media-glyph-size-md)`, `var(--empty-state-media-glyph-size-lg)` | 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).
_Nada que proponer: no hay knobs fuera de alcance._
### 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
<!-- veredicto:start -->
**EJECUTADO 2026-08-23 — 29 % → 100 %**, 20 claves nuevas (6 → 26), y el
centinela pasa **26/26 sin una sola adjudicación**: no hay estado, variante ni
parte condicional que esconda nada.
Su deuda era de una sola clase: **la escala de talla estaba entera en privados**
que leían el bundle a pelo. Ahora cada paso tiene su público —relleno de bloque
y de línea, tamaño del título, del cuerpo y del glifo, en `sm`/`md`/`lg`— y los
privados los derivan. Con ellos, el resto sale solo: peso, interlínea y tinta
del título; interlínea y tinta de la descripción.
**La caja del glifo sigue derivándose (2×) de su propio tamaño**, que es lo que
la mantiene legible en las tres tallas; ahora ese tamaño es público, así que un
tema mueve las dos cosas con un valor.
**Cinco respaldos muertos retirados** (`var(--empty-state-gap, var(--space-3))`
y los cuatro de media/measure: las claves están en el contrato) más los dos de
interlínea, que además **mentían** —`--font-line-height-sm` vale 1.45, no el 1.4
del respaldo, y `--font-line-height-md` tampoco es 1.5—. Mismo defecto que
`callout` el mismo día: **un respaldo escrito a mano envejece contra el token**.
El título sube UN paso discreto sobre la talla del componente (`sm` → `md`,
`md` → `lg`, `lg` → `xl`): jerarquía sin acoplar el nivel semántico. Eso vivía
en el comentario de la receta y ahora está en el contrato, con su razón.
Verificación: **diff de computed = 0** sobre 1.056 valores en 7 estados ·
centinela **26/26** · censo 100 % · `component:audit` PASS · suite eidos con el
rojo conocido ajeno · `rtl:check` 0 · `docs:check` 0 · `check` sin errores
propios · captura de las tres tallas.
<!-- veredicto:end -->

Powered by TurnKey Linux.