6.1 KiB
drag-drop — 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% — 8 de 8 knobs por token público
- Knobs de apariencia: 16 — público 8 · privado 0 · global 0 · literal 0 · sistema 7 · excepción 0 · estructural 0 · puente 1 · canal 0 (los cinco últimos, fuera del ratio)
- Contrato hoy (
lib/recipes/base.ts): 9 pública(s) —preview-padding-block,preview-padding-inline,preview-radius,preview-border-width,preview-bg,preview-fg,preview-font-family,preview-font-size,preview-shadow· 2 privada(s) forward —_palette-solid,_palette-element - Eje
size: no · ficheros:drag-drop.css
1. Knobs fuera de alcance
1.1 Directo a primitivo global (0)
Ninguno.
1.2 A través de un privado (0)
Sólo el residuo: el puente de paleta (§2-ter) y el canal de valor (§2-quater) salen aparte, porque no son deuda ni tienen nombre que acuñar.
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 (7) — 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 | drag-drop.css:38 |
[data-drag-drop-draggable][data-dragging] |
opacity |
var(--opacity-ghost) |
| 2 | drag-drop.css:43 |
[data-drag-drop-draggable][data-disabled] |
opacity |
var(--opacity-disabled) |
| 3 | drag-drop.css:47 |
[data-drag-drop-draggable]:focus-visible |
outline |
var(--focus-ring-width) solid var(--focus-ring-color) |
| 4 | drag-drop.css:63 |
[data-drag-drop-droppable][data-accepting] |
box-shadow |
inset 0 0 0 var(--ring-inset-width) var(--ring-inset-color, currentColor) |
| 5 | drag-drop.css:70 |
[data-drag-drop-droppable][data-dragover] |
box-shadow |
inset 0 0 0 var(--ring-inset-width) var(--ring-inset-color, currentColor) |
| 6 | drag-drop.css:75 |
[data-drag-drop-droppable][data-disabled] |
opacity |
var(--opacity-disabled) |
| 7 | drag-drop.css:79 |
[data-drag-drop-droppable]:focus-visible |
outline |
var(--focus-ring-width) solid var(--focus-ring-color) |
2-ter. Puente de paleta THM-2 (1) — fuera del ratio
La receta lee var(--_drag-drop-palette-{slot}), que lo escribe el forward de la
cascada de paleta bajo [data-drag-drop]:where([data-color], [data-color-custom])
(renderRecipePaletteForward, firma B′). Es el MECANISMO de la paleta por
instancia, y se alcanza dos veces: por la capa compartida --palette-* y
por los tonos públicos del propio componente. No se acuña: un público
encima dejaría que un tema lo fijara y matara en silencio el color= de cada
instancia (veredictos §5 de card, tags-input, avatar).
| # | fichero:línea | selector | propiedad | valor |
|---|---|---|---|---|
| 1 | drag-drop.css:68 |
[data-drag-drop-droppable][data-dragover] |
background |
var(--_drag-drop-palette-element) |
3. Privados de la receta — ¿de dónde sale su valor?
La receta no declara privados propios en su CSS.
Consumidos y no declarados en el CSS (vienen de base.ts o de un estilo inline del wrapper): --_drag-drop-palette-element, --_drag-drop-palette-solid.
4. Propuesta de corrección
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, unbackgrounden 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 2026-08-21 (sonda ×2 = 0 diffs en 1.827 valores · 7 estados). Es un
componente pequeño con una anatomía clara: de sus 16 knobs, SIETE ya son
sistema (opacidades de fantasma y deshabilitado, anillos de foco, el anillo
inset de los droppables) y quedan nueve puntuables, seis de ellos en el
PREVIEW.
- Casi todo lo tokenizable vive en
[data-drag-drop-preview], el fantasma que sigue al puntero. Existe SÓLO durante el arrastre, así que ni la sonda ni el guard lo ven en reposo: se verifica forzando el nodo. - Los dos forwards de paleta se quedan privados (THM-2). El fondo del
[data-dragover]los lee a pelo y no admite un público sin duplicar la regla; elbordery elbox-shadowdel preview los combinan con una anchura y una sombra que SÍ son knobs, así que esas dos declaraciones pasan a alcance conpreview-border-widthypreview-shadow. - El
--ring-inset-*de los droppables no se toca: es el vocabulario del anillo del sistema, que la receta ALIMENTA con su acento (--ring-inset-color: var(--_drag-drop-palette-element)). Acuñar undroppable-ring-*sería vocabulario paralelo sobre un sistema transversal. preview-zya existía en el contrato — es el único público que este componente tenía, y se conserva tal cual.- El
paddingdel preview es un shorthand de dos valores → dos knobs lógicos (preview-padding-block+preview-padding-inline).