fix(badge): la clave se llamaba como la PROPIEDAD — min-block-size-{k} → min-height-{k}

Corrección de nombre, sin píxel: la clave por talla que entró esta tarde salió
como `min-block-size-{k}` —el nombre de la propiedad CSS— cuando la ranura del
vocabulario para ella es `height`.

LO DICE EL CANON Y LO DICE EL PROPIO CENSO

recipe-contract §1: «Control height per size → control-height-{size} (o
{part}-height-{size} cuando la parte no es el control) · antipatrón: inventar un
tercer nombre por componente». Y `theming-census.ts` mapea, en su tabla de
propiedades, `min-block-size → height`: la herramienta que mide ya sabía cuál
era la ranura.

MEDIDO EN EL CATÁLOGO, NO SUPUESTO

24 componentes dimensionan por `…-height-{k}` (accordion, field, table,
tree-grid, sidebar, navigation-menu, select, tabs…) y `min-block-size-{k}`
existía SÓLO en badge. El gemelo con la forma exacta —raíz, por talla, sobre
`--size-{k}-control-height`— es `proof-of-human.min-height-{k}`, que además
resuelve igual (clave `min-height` con `declarations` por talla).

R-5.3 NO LO CAZA, Y ESO ES LO INTERESANTE

El guard de nombres cubre la ranura de tinta (`fg` vs `color`) y la posición del
modificador, pero no el vocabulario DIMENSIONAL: una clave con el nombre de la
propiedad pasa. Anotado en next-features §13 con el arreglo propuesto (extender
R-5.3 con la tabla propiedad → ranura que el censo ya tiene).

Verificación: sonda antes/después **0 diffs** (992 valores · 7 estados · 5
nodos) · R-5.4 29/71 idéntico, exit 0 · censo --only 75 % sin cambio ·
`--names` 0 desviadas · docs:check 0 · suite eidos 439/440 (el rojo conocido) ·
`component:audit` NEEDS-WORK preexistente (R-1.5, sin foco).

Sale de la revisión de hoy (`REVIEW-theming-2026-08-23.md`, punto P1).

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
alpha-0.1-background
dev 2 months ago
parent 233ef989b3
commit bfe7727b0c

@ -7,7 +7,7 @@
- **Medido**: 2026-08-23 · **Alcance**: **75%** — 15 de 20 knobs por token público
- **Knobs de apariencia**: 20 — público 15 · privado 5 · global 0 · literal 0 · sistema 0 · excepción 2 _(los dos últimos, fuera del ratio)_
- **Contrato hoy** (`lib/recipes/base.ts`): 71 pública(s) — `padding-inline-xs`, `padding-inline-sm`, `padding-inline-md`, `padding-inline-lg`, `gap-xs`, `gap-sm`, `gap-md`, `gap-lg`, `font-family`, `font-size-xs`, `font-size-sm`, `font-size-md`, `font-size-lg`, `font-weight`, `line-height`, `letter-spacing`, `border-width`, `radius-sm`, `radius-md`, `radius-lg`, `radius-full`, `min-block-size-xs`, `min-block-size-sm`, `min-block-size-md`, `min-block-size-lg`, `min-block-size`, `dot-radius`, `dot-size`, `icon-size`, `remove-size`, `remove-margin-start`, `primary-solid`, `primary-text`, `primary-contrast`, `secondary-solid`, `secondary-text`, `secondary-contrast`, `neutral-solid`, `neutral-text`, `neutral-contrast`, `affirm-solid`, `affirm-text`, `affirm-contrast`, `fulfill-track`, `fulfill-border`, `fulfill-solid`, `fulfill-text`, `fulfill-contrast`, `risk-solid`, `risk-text`, `risk-contrast`, `threat-solid`, `threat-text`, `threat-contrast`, `loss-track`, `loss-border`, `loss-solid`, `loss-text`, `loss-contrast`, `primary-track`, `primary-border`, `secondary-track`, `secondary-border`, `neutral-track`, `neutral-border`, `affirm-track`, `affirm-border`, `risk-track`, `risk-border`, `threat-track`, `threat-border` · 5 privada(s) forward — `_palette-track`, `_palette-border`, `_palette-solid`, `_palette-text`, `_palette-contrast`
- **Contrato hoy** (`lib/recipes/base.ts`): 71 pública(s) — `padding-inline-xs`, `padding-inline-sm`, `padding-inline-md`, `padding-inline-lg`, `gap-xs`, `gap-sm`, `gap-md`, `gap-lg`, `font-family`, `font-size-xs`, `font-size-sm`, `font-size-md`, `font-size-lg`, `font-weight`, `line-height`, `letter-spacing`, `border-width`, `radius-sm`, `radius-md`, `radius-lg`, `radius-full`, `min-height-xs`, `min-height-sm`, `min-height-md`, `min-height-lg`, `min-height`, `dot-radius`, `dot-size`, `icon-size`, `remove-size`, `remove-margin-start`, `primary-solid`, `primary-text`, `primary-contrast`, `secondary-solid`, `secondary-text`, `secondary-contrast`, `neutral-solid`, `neutral-text`, `neutral-contrast`, `affirm-solid`, `affirm-text`, `affirm-contrast`, `fulfill-track`, `fulfill-border`, `fulfill-solid`, `fulfill-text`, `fulfill-contrast`, `risk-solid`, `risk-text`, `risk-contrast`, `threat-solid`, `threat-text`, `threat-contrast`, `loss-track`, `loss-border`, `loss-solid`, `loss-text`, `loss-contrast`, `primary-track`, `primary-border`, `secondary-track`, `secondary-border`, `neutral-track`, `neutral-border`, `affirm-track`, `affirm-border`, `risk-track`, `risk-border`, `threat-track`, `threat-border` · 5 privada(s) forward — `_palette-track`, `_palette-border`, `_palette-solid`, `_palette-text`, `_palette-contrast`
- **Eje `size`**: sí · **ficheros**: `badge.css`
## 1. Knobs fuera de alcance
@ -109,9 +109,21 @@ CONTROL a propósito —para que `md` signifique lo mismo lleve o no un control
dentro (el ✕ removible es un `IconButton`: medido, el mismo badge `md` daba 30px
sin él y 46px con él)— pero lo hacía desde un privado que leía
`--control-height-*` a pelo, con cuatro fuentes por talla. Eso es una ESCALA, no
un conmutador: sube al TSC como `min-block-size-{xs,sm,md,lg}` + el resuelto, el
un conmutador: sube al TSC como `min-height-{xs,sm,md,lg}` + el resuelto, el
mismo molde que sus vecinas `padding-inline` / `gap` / `font-size` ya tenían.
⚠⚠ **El NOMBRE estuvo mal unas horas.** Salió como `min-block-size-{k}` —la
propiedad CSS— cuando la ranura del vocabulario para ella es `height`: lo dice
recipe-contract §1 («Control height per size → `control-height-{size}`, o
`{part}-height-{size}`») y lo dice el propio censo, que mapea
`min-block-size → height` en su tabla de propiedades. Medido en el catálogo:
**24 componentes dimensionan por `…-height-{k}`, y `min-block-size-{k}` existía
sólo aquí**. El gemelo de raíz con esta forma exacta —por talla, sobre
`--size-{k}-control-height`— es `proof-of-human.min-height-{k}`. **Renombrado a
`min-height-{k}` + `min-height` el mismo día** (diff 0, guard 29/71 igual,
`--names` 0 desviadas). R-5.3 no lo cazó: guarda la tinta y el modificador, no
el vocabulario DIMENSIONAL — anotado en §13.
⚠ **Y al entrar en el contrato, la suite lo corrigió**: el valor verbatim del
CSS era el primitivo CRUDO (`--control-height-{k}`), y `recipe-css-contract`
exige la coordenada del BUNDLE (`--size-{k}-control-height`, theming §5). Es la

@ -1282,6 +1282,14 @@ Lo que `chart` destapó (2026-08-22):
waveform, chronos, los pickers) puede pasarle primitivos crudos sin que el
censo ni `recipe-css-contract` lo vean. Medir cuántas hay antes de decidir si
D-TH.2 se ensancha.
- **R-5.3 no guarda el vocabulario DIMENSIONAL** (medido 2026-08-23 en `badge`).
Cubre la ranura de tinta (`fg` vs `color`) y la posición del modificador, pero
no que una clave POR TALLA se llame `…-height-{k}` y no
`…-min-block-size-{k}` (el nombre de la PROPIEDAD). Una clave así pasó el
guard y vivió unas horas; la cazó una lectura del catálogo (24 componentes
dimensionan por `-height-{k}`, uno por `-min-block-size-{k}`) y la tabla del
propio censo, que ya mapea `min-block-size → height`. Extender R-5.3 con esa
tabla —propiedad → ranura— cierra la clase entera.
- **El guard no fotografía `translate` ni `transform`** (medido 2026-08-23 en
`background`, y ya latente en `drawer.handle-active-scale`). El paralaje entra
por `translate` sobre la capa; con `data-parallax` forzado y speed 1 el token

@ -43,17 +43,21 @@ patrón chip.
## Talla y tema
71 claves públicas. Las escalas van por talla con su nombre resuelto
(`padding-inline`, `gap`, `font-size`, **`min-block-size`**) y la forma por
(`padding-inline`, `gap`, `font-size`, **`min-height`**) y la forma por
`rounded` (`radius-{sm,md,lg,full}`).
Lo que entró el **2026-08-23** (59 % → 75 %):
- **`min-block-size-{xs,sm,md,lg}`** + el resuelto. La ALTURA del chip monta en
- **`min-height-{xs,sm,md,lg}`** + el resuelto. La ALTURA del chip monta en
la escala de CONTROL —para que `md` signifique lo mismo lleve o no un control
dentro (el ✕ removible es un `IconButton`: medido, el mismo badge `md` daba
30px sin él y 46px con él)— pero vivía en un privado que leía
`--control-height-*` a pelo: ningún tema podía mover el chip sin mover todos
los controles de la app.
los controles de la app. **El nombre es `min-height`**, no `min-block-size`: la
propiedad es lógica pero la ranura del vocabulario para ella es `height`
(recipe-contract §1, y el propio censo mapea `min-block-size → height`).
Veinticuatro componentes dimensionan por `…-height-{k}`; el gemelo de raíz con
esta forma exacta es `proof-of-human.min-height-{k}`.
- **`dot-radius`**, el par que a `dot-size` le faltaba. Redondo es el DEFECTO,
no la definición: `knob.indicator-radius` vale `--radius-sm`, así que el
catálogo ya trata el radio de un marcador como knob.

@ -44,7 +44,7 @@
align-items: center;
justify-content: center;
gap: var(--_badge-gap);
min-block-size: var(--badge-min-block-size);
min-block-size: var(--badge-min-height);
padding-inline: var(--_badge-padding-inline);
padding-block: 0;
border: var(--badge-border-width) solid var(--_badge-border-color);

@ -710,10 +710,10 @@
--badge-radius-md: var(--radius-md);
--badge-radius-lg: var(--radius-lg);
--badge-radius-full: var(--radius-full);
--badge-min-block-size-xs: var(--size-xs-control-height);
--badge-min-block-size-sm: var(--size-sm-control-height);
--badge-min-block-size-md: var(--size-md-control-height);
--badge-min-block-size-lg: var(--size-lg-control-height);
--badge-min-height-xs: var(--size-xs-control-height);
--badge-min-height-sm: var(--size-sm-control-height);
--badge-min-height-md: var(--size-md-control-height);
--badge-min-height-lg: var(--size-lg-control-height);
--badge-dot-radius: var(--radius-full);
--badge-dot-size: 0.5em;
--badge-icon-size: 1em;
@ -5722,7 +5722,7 @@
}
[data-badge] {
--badge-min-block-size: var(--badge-min-block-size-md);
--badge-min-height: var(--badge-min-height-md);
--_badge-palette-track: var(--badge-primary-track);
--_badge-palette-border: var(--badge-primary-border);
--_badge-palette-solid: var(--badge-primary-solid);
@ -5731,15 +5731,15 @@
}
[data-badge][data-size='xs'] {
--badge-min-block-size: var(--badge-min-block-size-xs);
--badge-min-height: var(--badge-min-height-xs);
}
[data-badge][data-size='sm'] {
--badge-min-block-size: var(--badge-min-block-size-sm);
--badge-min-height: var(--badge-min-height-sm);
}
[data-badge][data-size='lg'] {
--badge-min-block-size: var(--badge-min-block-size-lg);
--badge-min-height: var(--badge-min-height-lg);
}
[data-badge][data-color='secondary'] {

@ -412,16 +412,24 @@ export const THEME_BASE_RECIPE_TOKENS = defineRecipes({
// the value goes to the canonical BUNDLE coordinate, not the raw
// primitive: `recipe-css-contract` caught the verbatim copy the moment it
// entered (theming/reference §5) — the same trap that bit `code-block`.
'min-block-size-xs': 'var(--size-xs-control-height)',
'min-block-size-sm': 'var(--size-sm-control-height)',
'min-block-size-md': 'var(--size-md-control-height)',
'min-block-size-lg': 'var(--size-lg-control-height)',
'min-block-size': {
declarations: [
{ value: 'var(--badge-min-block-size-md)', scope: 'host' },
{ value: 'var(--badge-min-block-size-xs)', scope: 'size:xs' },
{ value: 'var(--badge-min-block-size-sm)', scope: 'size:sm' },
{ value: 'var(--badge-min-block-size-lg)', scope: 'size:lg' }
//
// The NAME is `min-height`, not `min-block-size`: the property is logical
// but the vocabulary's slot for it is `height` (recipe-contract §1, and
// the census maps `min-block-size → height` itself). Twenty-four
// components size by `…-height-{k}`; the root-level twin with this exact
// shape — per size, over `--size-{k}-control-height` — is
// `proof-of-human.min-height-{k}`. Shipped as `min-block-size-*` for a
// few hours on 2026-08-23 and renamed the same day.
'min-height-xs': 'var(--size-xs-control-height)',
'min-height-sm': 'var(--size-sm-control-height)',
'min-height-md': 'var(--size-md-control-height)',
'min-height-lg': 'var(--size-lg-control-height)',
'min-height': {
declarations: [
{ value: 'var(--badge-min-height-md)', scope: 'host' },
{ value: 'var(--badge-min-height-xs)', scope: 'size:xs' },
{ value: 'var(--badge-min-height-sm)', scope: 'size:sm' },
{ value: 'var(--badge-min-height-lg)', scope: 'size:lg' }
]
},
// The dot's shape, the pair `dot-size` was missing. Round is the default,

Loading…
Cancel
Save

Powered by TurnKey Linux.