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/pin-input.md

6.6 KiB

pin-input — 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-23 · Alcance: 100% — 17 de 17 knobs por token público
  • Knobs de apariencia: 18 — público 17 · privado 0 · global 0 · literal 0 · sistema 1 · excepción 1 (los dos últimos, fuera del ratio)
  • Contrato hoy (lib/recipes/base.ts): 22 pública(s) — gap, disabled-opacity, cell-size-sm, cell-size-md, cell-size-lg, cell-size-xl, cell-font-size-sm, cell-font-size-md, cell-font-size-lg, cell-font-size-xl, font-family, cell-fg, cell-font-weight, cell-radius, cell-border-width, cell-border-fg, cell-bg, cell-filled-bg, cell-filled-border, cell-active-border, cell-invalid-border, cell-readonly-bg
  • Eje size: sí · ficheros: pin-input.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 pin-input.css:51 [data-pin-input-cell] line-height 1

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 pin-input.css:67 [data-pin-input-cell][data-active] 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?
--_pin-input-cell-size 4 var(--pin-input-cell-size-md), var(--pin-input-cell-size-sm), var(--pin-input-cell-size-lg), var(--pin-input-cell-size-xl) public sí
--_pin-input-cell-font-size 4 var(--pin-input-cell-font-size-md), var(--pin-input-cell-font-size-sm), var(--pin-input-cell-font-size-lg), var(--pin-input-cell-font-size-xl) public sí
--_pin-input-cell-radius 1 var(--pin-input-cell-radius) 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 (--pin-input-…) scope TSC valor propuesto usos

4.2 Sin nombre mecánico (1)

  • ⚠ 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 — 1: 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 — 65 % → 100 %. Dos claves nuevas (20 → 22), cuatro privados renombrados, veintidós respaldos retirados y seis adjudicaciones medidas. Diff de computed 0 sobre 1.856 valores en 8 estados.

Su 35 % de deuda eran tres defectos, ninguno de diseño.

  1. Un prefijo ABREVIADO. Los privados se llamaban --_pin-cell-* dentro de un componente llamado pin-input: el censo no podía reconocerlos como suyos, así que los cuatro knobs que los leen (tamaño, radio y tipo de la celda) contaban como deuda aunque DERIVAN de públicos. Renombrados a --_pin-input-cell-* — el cuarto caso de esta clase tras color-picker, metrics y time-picker.
  2. Un respaldo a SÍ MISMO: font-family leía var(--style-label-font-family, var(--style-label-font-family)), que es un no-op con forma de defecto. Ahora es la costura: --pin-input-font-family.
  3. La tinta del dígito iba a --color-content-primary a pelo → cell-fg.

Y los veintidós respaldos escritos a mano. Cada var(--pin-input-x, <valor>) duplicaba lo que el contrato ya declara en :root, así que eran código muerto — retirarlos dio 0 diffs, que es la prueba. Pero uno mentía: disabled-opacity respaldaba 0.55 cuando --opacity-disabled vale 0.4. Es la ley de los , 1.4 contra un --font-line-height-sm de 1.45 que este mes salió en dos componentes, aquí con más deriva. Un respaldo no es una red de seguridad: es una segunda fuente que nadie actualiza.

Las seis adjudicaciones, y dónde vive cada estado. La demo muestra un pin vacío, editable y válido, así que los seis tokens de estado no tenían nodo. Forzados sobre los nodos reales, los seis alcanzan — con un detalle que costó una pasada: filled y active son atributos de la CELDA, pero invalid y readonly se estampan en el CONTENEDOR y cascadean a las celdas (soma los OR-fusiona con el Field que las envuelve). Forzarlos en la celda no hace nada.

Verificación: sonda antes/después 0 diffs (1.856 valores · 8 estados · 8 nodos) · R-5.4 16/22 con las seis adjudicadas, exit 0 · component:audit PASS · censo 100 % · eidos-lint 8 morfo-backed / 0 invalid, 0 class-hooks · capturas 2× antes y después.

Powered by TurnKey Linux.