La revisión de hoy (`REVIEW-theming-2026-08-23.md`, punto P4) destapó que
NINGUNO de los commits de tokenización de la mañana del 23 hizo los pasos 8 y 9
del protocolo: `git show --stat` de los diecisiete sólo tocaba CSS, base.ts, el
ledger y las fichas. Veintidós componentes tokenizados sin la tabla de tokens en
su README y veintiuno sin la pestaña que la enseña viva.
QUÉ ENTRA
- **README «Talla y tema»** en 22 (los 21 con demo + `surface`, que no tiene
ruta). La tabla NO está escrita a mano: se DERIVA de `lib/recipes/base.ts` y
de `theming-sentinel-exceptions.ts`, así que lo que el lector ve es lo que el
contrato dice. Hasta 30 claves va la tabla completa clave → valor por defecto;
por encima, agrupada por parte (con la paleta en su propio grupo, que si no se
come la tabla: button tiene 70 claves de tono de 106). Debajo, lo que el guard
da por silencioso con su razón medida, y la excepción POR PATRÓN cuando la
razón es la cascada de paleta.
- **Pestaña `Tokens`** en los 21 con demo, con el conteo real de claves.
VERIFICADO EN EL NAVEGADOR, LOS 21
Cada pestaña abre y lista exactamente sus claves: menubar 35 · field 68 ·
onion-menu 19 · button 106 · callout 34 · empty-state 26 · dropdown-menu 28 ·
context-menu 28 · checkbox 47 · image 23 · anchor-nav 12 · banner 53 ·
date-range-field 7 · time-range-field 7 · tooltip 23 · section 4 · sticky 1 ·
button-group 1 · qr-code 10 · toggle-group 1 · split-button 1.
⚠ Y el verificador mintió DOS veces antes de acertar: primero buscaba el rótulo
de la cabecera del panel en `innerText` (no lo encontraba aunque la tabla estaba
ahí), y después clicaba con `element.click()` tras `waitUntil: 'load'` — la
página aún NO ha hidratado, así que el `onclick` de Svelte no está enganchado y
el clic no hace nada. Con `networkidle` + el clic de Playwright (que espera a
que el nodo sea accionable), los 21 en verde. Es la ley de siempre: el
instrumento miente primero.
`audio-player` queda fuera: no tiene README propio — hueco aparte, anotado.
Verificación: `npm run check` sin errores nuevos en las 21 demos (los 72
globales son ajenos y preexistentes) · `docs:check` 0 · cada README conserva su
estructura de encabezados y **ninguno gana un hunk de prettier** (mi sección se
formateó dentro de su propio recorte, sin tocar lo ajeno).
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
`section` (cuatro claves resucitadas), `sticky` 0 → 100 %, `button-group` 40 →
100 %, `qr-code` 43 → 100 %, `toggle-group` 33 → 50 % (su techo) y `split-button`
adjudicado en 50 % (el suyo). Cero claves nuevas. Global 65 %, 25 componentes al
100 %, y los de alcance <20 % bajan de 14 a 12.
EL HALLAZGO ESTÁ EN `section`: LA RECETA TAPABA SUS PROPIAS CLAVES PÚBLICAS.
Declaraba los cuatro pasos de relleno en el host
(`[data-box][data-section] { --section-padding-block-sm: … }`), y esa declaración
gana a la que el contrato emite en `:root`: un tema que escribiera
`--section-padding-block-lg` perdía contra la receta. Borrado el bloque —mismos
valores, una sola fuente—, computado idéntico (48px antes y después), y las
cuatro claves alcanzan.
Lo demás es IDENTIDAD: once `100 %` entre las seis recetas y el centinela de 2px
del sticky —el hilo invisible que el observador vigila—, todos con su razón
escrita. Más un respaldo muerto retirado en `toggle-group`, sobre un token
PRESTADO de `toggle`: el velo de un grupo deshabilitado ES el del toggle, y se
tema en su ficha (§5.3-3).
Y UNA CLASE DE ADJUDICACIÓN NUEVA, QUE SE REPETIRÁ: UN PASO POR INSTANCIA.
`section` y `qr-code` mapean su prop de talla a `var(--{c}-{eje}-{k})` y la
escriben INLINE, así que sólo el paso ACTIVO alcanza; los otros leen muertos
hasta que la prop cambia. No es deuda ni ceguera del instrumento: es cómo
funciona una escala resuelta por prop.
Gates: los seis guards en verde · censo 65 % · `component:audit` PASS · suite
eidos con el rojo conocido ajeno · `rtl:check` 0 · `docs:check` 0.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
badge: the Remove hover joins the MD3 state layer (§38) — background-image
veil with var(--state-hover); the hand-rolled 15% currentColor mix predated
the rollout. Verified in the demo (CSSOM rule + live removable badges).
The other 8 were exceptions WITH READ EVIDENCE, not fixes — each README
documents where the treatment actually paints:
- alert-dialog / fab / split-button / qr-code: every interactive part
composes the canonical <Button> (Action/Cancel wrappers, the fab itself,
both split halves, the DownloadTrigger) — focus + disabled in button.css.
- date-picker: the eidos root overlays data-field and the trigger input is a
composed DateField.Input carrying data-field-control — disabled/readonly
paint via the shared field.css chrome (R-1.2 + R-1.3).
- date-range-field: LAYOUT-ONLY recipe; each endpoint is a real DateField
whose [data-field] gets field.css :focus-within — mirror of the trf twin.
- mask-field: IS-A Field (fieldRole provider/control/input) — the whole
control chrome incl. the focus ring lives in field.css (R-1.2/3/4/5).
- pin-input: the ring ALREADY paints on [data-pin-input-cell][data-active]
(canonical --focus-ring-* tokens) — the soma-written focused-cell flag,
a state-attr vehicle the R-1.5 heuristic does not recognise by name.
Matrix: 120 -> 129 PASS / 5 NEEDS-WORK / 0 BROKEN. Type baseline 57.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The 5 BROKEN components (cascade, gradient-builder, menu-dial, motion,
qr-code) are BROKEN no more: cascade/motion/menu-dial now PASS,
gradient-builder/qr-code drop to NEEDS-WORK with only demo-phase (D-*)
and C8 items left.
Framework-level piece: component-audit gains the documented-exception
valve the checklist already used for A-2.3/R-1.7 — a greppable
'R-x.y exception: reason' line in the component README turns the rule
into a PASS that reports the reason. Wired for R-1.1, R-1.2, R-1.5 and
E-2.2; the checklist rows say the same. This separates deliberate
design (cascade and motion deliberately ship NO recipe — they ride the
foundation stagger + state presets; menu-dial's focus/disabled states
live in the composed Fab/Button recipes) from plain omission, which
stays an error.
Mechanical fixes: texts.label + langs entries for cascade/motion (new
files, registered) and gradient-builder (label added to its existing
entry); menu-dial's missing default export. README contract sections
(Baseline/Comparativa/Decisiones/Gaps/Passive justification + Audit
exceptions) added to cascade, motion, menu-dial and qr-code — mostly
re-heading content those docs already argued; comparativas grounded in
M3 speed dial/MUI SpeedDial/PrimeVue, Framer Motion/AnimatePresence/
Svelte transitions, ark-ui/qr-code-styling per component.
Verified: component:audit 130 -> 78 PASS / 52 NEEDS-WORK / 0 BROKEN;
npm run check at the 61-error pre-existing baseline (0 own).
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Size was applied via `var(--qr-code-size-${resolvedSize})` (interpolated), so
the literal token names never appeared in source and the recipe-css-contract
test flagged --qr-code-size-{xs..xl} as orphaned. Use an explicit literal map so
each name appears verbatim; behaviour unchanged.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The logo overlay rendered invisible. Inside a viewBox-scaled foreignObject a
fixed px padding (var(--space-1)) equals that many *modules*, overflowing the
cleared centre and collapsing the content box; inline-size/block-size also
don't size an <svg> element. Fix: proportional inline padding + physical
width/height. The logo now renders and still decodes at ECC H. Dropped the
now-orphan --qr-code-overlay-padding token + regenerated base.css.
Demo: content presets (URL / vCard / WiFi / unicode) prove the encoder takes
any UTF-8 string, not just URLs (each verified decoding via jsQR); logo on by
default; quiet-zone chips fixed to canonical [4, 8, 16] (was [2, …], below the
spec's 4-module minimum). README documents the quiet zone as modules, not
pixels — the canonical unit; for px layout spacing, pad the container in CSS.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Own QR encoder in $libs/qr (ISO/IEC 18004: segment analysis →
Reed-Solomon over GF(256) → matrix layout → 8-mask penalty selection),
no npm dependency. Eidos <QrCode> renders the module matrix as one SVG
path with square/rounded/dots cell shapes; function patterns stay square
(via the encoder's `reserved` mask) so every shape scans. Optional logo
clears the centre + auto-boosts ECC to H. <QrCode.DownloadTrigger>
exports PNG/SVG, baking resolved colours into the clone first (a
serialized SVG loses the document's CSS custom properties). Fixed-tone
default colours for scannability; themeable via color/background.
morfo qr-code (scope: eidos; parts Provider/Pattern/Overlay/
DownloadTrigger) + 'path' added to MorfoElement; recipe with 11
--qr-code-* tokens; canonical demo + nav entry. 11 encoder unit tests;
verified end-to-end via jsQR round-trip + browser.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
dev