From edc019515618230a2816586555ba79a9c7342e2c Mon Sep 17 00:00:00 2001 From: dev Date: Mon, 24 Aug 2026 00:11:23 +0200 Subject: [PATCH] =?UTF-8?q?uix(toggle):=20temable=20=E2=80=94=2081=20%=20?= =?UTF-8?q?=E2=86=92=20100=20%,=20y=20el=20guard=20s=C3=B3lo=20sab=C3=ADa?= =?UTF-8?q?=20barrer=20UN=20eje?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Tres knobs fuera de alcance, ninguno por doctrina. - **El radio** (1 knob, 6 fuentes). La receta leía `--radius-default` y la escala global `--radius-*` A PELO, así que la única forma de redondear un toggle era mover el radio de todo el sistema — el agujero que tenía `navigation-menu`, y el único de los CINCO componentes con escala `rounded` que no tenía la suya (button, badge, image y color-swatch la declaran). Entran `radius` (el reposo, default `var(--radius-default)`: sigue siguiendo el default del arquetipo) y `radius-{sm,md,lg,xl,full}`. El desacople de `size` se conserva intacto: son pasos de `rounded`, no de talla. - **El tinte inválido**: `var(--color-threat-element)` a pelo → `invalid-border` con ese valor (la costura, PLAN §2-A). - **Los tres literales quedan FIRMADOS** con su anotación y salen del ratio: el `100%` de `data-block` es identidad y el par `1px` del cuerpo ES la técnica sr-only. Censo: 28 knobs · 22 públicos · 81 % → 25 knobs · 24 públicos · **100 %** (3 excepciones firmadas fuera del ratio). Contrato 119 → 126 claves. Global del catálogo sin bajar (68 %). Diff de computed: **VACÍO**. 416 valores en 7 estados (sonda estándar, 2 nodos) más 1.150 valores en 25 celdas de variante / rounded / on / invalid / disabled / block / icon-only / tono, con `transition` y `animation` congeladas — porque el escenario de la demo monta UN toggle solid, apagado y válido, y la sonda no barre esos ejes. Capturas 2× antes y después, miradas. Centinela R-5.4: **70/126, 56 adjudicadas**, verde. Empezó en 36/126 y la diferencia NO es adjudicación, es instrumento: las claves `{variante}-*` y `{variante}-on-*` son las mismas tres variantes en dos ESTADOS, y forzar el estado con `prepareWith` cambiaba una mitad por la otra (36 → 46, y murieron las de reposo) — «montar más puede medir menos», esta vez dentro de un componente. El guard aprende tres cosas, cada una nacida de una medición: - barrer el **producto cartesiano** de varios ejes (un solo eje da la misma secuencia de siempre, así que nada de lo que ya tenía `sweepAttr` cambia); - **quitar** un atributo con `null`, porque sellar `data-invalid` toda la corrida hacía que el borde inválido ganase a los otros seis bordes; - aplicar el barrido también en el **pase de hover**, que no barría nada — que es literalmente la razón escrita en el ledger de `radio-group.hover-segmented-segment-fg`. Con eso, 58 y luego 70. Los **12 componentes con `sweepAttr` re-verificados uno a uno**: cero regresiones, cero STALE (tres dieron exit=1 falso corriendo doce seguidos contra el mismo dev server; a solas, verdes). De las 56 adjudicadas, 48 son la cascada de paleta POR PATRÓN, medida aquí: con `data-color=primary`, `--toggle-primary-solid` no mueve nada y `--palette-solid` sobre el mismo nodo repinta; quita `data-color` y `--toggle-neutral-solid` pinta otra vez. Las ocho `neutral-*` caen con las demás por una razón que conviene escribir: el propio guard ESTAMPA `data-color=neutral` para probarlas, que es justo lo que enciende el bloque genérico. Las otras 8 están medidas una a una sobre el nodo real (los cinco pasos de `rounded`, que la demo no expone; `disabled-opacity`; y el par de transición, que ES lo que el guard congela). Guards: censo `--only toggle` 100 % · `component-audit --only toggle` PASS · `eidos-lint toggle` 0 invalid · `vitest run src/uix/eidos` sin rojos nuevos (el conocido `skin-media-player` en `lint.test.ts`) · `rtl:check` 0 · `docs:check` 0 · `check` sin errores en ningún fichero tocado · prettier sin desviaciones NUEVAS sobre el árbol indexado. Anotado y FUERA por D-TH.5: `[data-toggle]:hover` y `[data-toggle][data-invalid]` pesan lo mismo (0,2,0) y el hover se declara antes, así que un toggle inválido bajo el puntero pierde su tinte. Arreglarlo mueve píxel y es una decisión de escala del sistema — los cuatro controles de formulario comparten el patrón. Co-Authored-By: Claude Opus 5 --- docs/audit/theming/toggle.md | 101 +++++++++++++----- docs/next-features.md | 8 ++ docs/process/PLAN-theming.md | 10 ++ scripts/theming-sentinel-exceptions.ts | 15 +++ scripts/theming-sentinel.ts | 9 ++ src/uix/eidos/components/toggle/README.md | 42 ++++++++ src/uix/eidos/components/toggle/toggle.css | 24 +++-- src/uix/eidos/generated/base.css | 7 ++ src/uix/eidos/lib/recipes/base.ts | 28 ++++- web/routes/uix/components/toggle/+page.svelte | 10 +- 10 files changed, 208 insertions(+), 46 deletions(-) diff --git a/docs/audit/theming/toggle.md b/docs/audit/theming/toggle.md index f31b9b57b..134d9df66 100644 --- a/docs/audit/theming/toggle.md +++ b/docs/audit/theming/toggle.md @@ -5,48 +5,44 @@ > Vista de conjunto: [README](./README.md) · método y protocolo: > [`PLAN-theming.md`](../../process/PLAN-theming.md) §1, §2, §7. -- **Medido**: 2026-08-23 · **Alcance**: **81%** — 22 de 27 knobs por token público -- **Knobs de apariencia**: 28 — público 22 · privado 1 · global 1 · literal 3 · sistema 1 · excepción 0 _(los dos últimos, fuera del ratio)_ -- **Contrato hoy** (`lib/recipes/base.ts`): 119 pública(s) — `height-xs`, `height-sm`, `height-md`, `height-lg`, `height-xl`, `padding-inline-xs`, `padding-inline-sm`, `padding-inline-md`, `padding-inline-lg`, `padding-inline-xl`, `gap-xs`, `gap-sm`, `gap-md`, `gap-lg`, `gap-xl`, `font-family`, `line-height`, `letter-spacing`, `font-size-xs`, `font-size-sm`, `font-size-md`, `font-size-lg`, `font-size-xl`, `font-weight-xs`, `font-weight-sm`, `font-weight-md`, `font-weight-lg`, `font-weight-xl`, `border-width`, `shadow`, `transition-duration`, `transition-ease`, `primary-track`, `primary-element`, `primary-hover`, `primary-border`, `primary-solid`, `primary-solid-hover`, `primary-text`, `primary-contrast`, `neutral-track`, `neutral-element`, `neutral-hover`, `neutral-border`, `neutral-solid`, `neutral-solid-hover`, `neutral-text`, `neutral-contrast`, `risk-track`, `risk-element`, `risk-hover`, `risk-border`, `risk-solid`, `risk-solid-hover`, `risk-text`, `risk-contrast`, `threat-track`, `threat-element`, `threat-hover`, `threat-border`, `threat-solid`, `threat-solid-hover`, `threat-text`, `threat-contrast`, `secondary-track`, `secondary-element`, `secondary-hover`, `secondary-border`, `secondary-solid`, `secondary-solid-hover`, `secondary-text`, `secondary-contrast`, `affirm-track`, `affirm-element`, `affirm-hover`, `affirm-border`, `affirm-solid`, `affirm-solid-hover`, `affirm-text`, `affirm-contrast`, `palette-track`, `palette-element`, `palette-hover`, `palette-border`, `palette-solid`, `palette-solid-hover`, `palette-text`, `palette-contrast`, `solid-bg`, `solid-fg`, `solid-border`, `solid-hover-bg`, `solid-hover-border`, `solid-on-bg`, `solid-on-fg`, `solid-on-border`, `solid-on-hover-bg`, `solid-on-hover-border`, `outline-bg`, `outline-fg`, `outline-border`, `outline-hover-bg`, `outline-hover-border`, `outline-on-bg`, `outline-on-fg`, `outline-on-border`, `outline-on-hover-bg`, `outline-on-hover-border`, `ghost-bg`, `ghost-fg`, `ghost-border`, `ghost-hover-bg`, `ghost-hover-border`, `ghost-on-bg`, `ghost-on-fg`, `ghost-on-border`, `ghost-on-hover-bg`, `ghost-on-hover-border`, `disabled-opacity` +- **Medido**: 2026-08-23 · **Alcance**: **100%** — 24 de 24 knobs por token público +- **Knobs de apariencia**: 25 — público 24 · privado 0 · global 0 · literal 0 · sistema 1 · excepción 3 _(los dos últimos, fuera del ratio)_ +- **Contrato hoy** (`lib/recipes/base.ts`): 126 pública(s) — `height-xs`, `height-sm`, `height-md`, `height-lg`, `height-xl`, `padding-inline-xs`, `padding-inline-sm`, `padding-inline-md`, `padding-inline-lg`, `padding-inline-xl`, `gap-xs`, `gap-sm`, `gap-md`, `gap-lg`, `gap-xl`, `font-family`, `line-height`, `letter-spacing`, `font-size-xs`, `font-size-sm`, `font-size-md`, `font-size-lg`, `font-size-xl`, `font-weight-xs`, `font-weight-sm`, `font-weight-md`, `font-weight-lg`, `font-weight-xl`, `radius`, `radius-sm`, `radius-md`, `radius-lg`, `radius-xl`, `radius-full`, `border-width`, `shadow`, `transition-duration`, `transition-ease`, `primary-track`, `primary-element`, `primary-hover`, `primary-border`, `primary-solid`, `primary-solid-hover`, `primary-text`, `primary-contrast`, `neutral-track`, `neutral-element`, `neutral-hover`, `neutral-border`, `neutral-solid`, `neutral-solid-hover`, `neutral-text`, `neutral-contrast`, `risk-track`, `risk-element`, `risk-hover`, `risk-border`, `risk-solid`, `risk-solid-hover`, `risk-text`, `risk-contrast`, `threat-track`, `threat-element`, `threat-hover`, `threat-border`, `threat-solid`, `threat-solid-hover`, `threat-text`, `threat-contrast`, `secondary-track`, `secondary-element`, `secondary-hover`, `secondary-border`, `secondary-solid`, `secondary-solid-hover`, `secondary-text`, `secondary-contrast`, `affirm-track`, `affirm-element`, `affirm-hover`, `affirm-border`, `affirm-solid`, `affirm-solid-hover`, `affirm-text`, `affirm-contrast`, `palette-track`, `palette-element`, `palette-hover`, `palette-border`, `palette-solid`, `palette-solid-hover`, `palette-text`, `palette-contrast`, `solid-bg`, `solid-fg`, `solid-border`, `solid-hover-bg`, `solid-hover-border`, `solid-on-bg`, `solid-on-fg`, `solid-on-border`, `solid-on-hover-bg`, `solid-on-hover-border`, `outline-bg`, `outline-fg`, `outline-border`, `outline-hover-bg`, `outline-hover-border`, `outline-on-bg`, `outline-on-fg`, `outline-on-border`, `outline-on-hover-bg`, `outline-on-hover-border`, `ghost-bg`, `ghost-fg`, `ghost-border`, `ghost-hover-bg`, `ghost-hover-border`, `ghost-on-bg`, `ghost-on-fg`, `ghost-on-border`, `ghost-on-hover-bg`, `ghost-on-hover-border`, `disabled-opacity`, `invalid-border` - **Eje `size`**: sí · **ficheros**: `toggle.css` ## 1. Knobs fuera de alcance -### 1.1 Directo a primitivo global (1) +### 1.1 Directo a primitivo global (0) -| # | fichero:línea | selector | propiedad | valor | -| ---: | --- | --- | --- | --- | -| 1 | `toggle.css:199` | `[data-toggle][data-invalid]` | `border-color` | `var(--color-threat-element)` | +_Ninguno._ -### 1.2 A través de un privado (1) +### 1.2 A través de un privado (0) -| # | fichero:línea | selector | propiedad | valor | -| ---: | --- | --- | --- | --- | -| 1 | `toggle.css:35` | `[data-toggle]` | `border-radius` | `var(--_toggle-radius)` | +_Ninguno._ -### 1.3 Literales (3) +### 1.3 Literales (0) -| # | fichero:línea | selector | propiedad | valor | -| ---: | --- | --- | --- | --- | -| 1 | `toggle.css:160` | `[data-toggle][data-block]` | `inline-size` | `100%` | -| 2 | `toggle.css:173` | `[data-toggle][data-icon-only] [data-toggle-body]` | `width` | `1px` | -| 3 | `toggle.css:174` | `[data-toggle][data-icon-only] [data-toggle-body]` | `height` | `1px` | +_Ninguno._ -### 1.4 Excepciones firmadas (0) — fuera del ratio +### 1.4 Excepciones firmadas (3) — fuera del ratio Literales que llevan su anotación `/* literal: */` 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._ +| # | fichero:línea | selector | propiedad | valor | +| ---: | --- | --- | --- | --- | +| 1 | `toggle.css:162` | `[data-toggle][data-block]` | `inline-size` | `100%` | +| 2 | `toggle.css:175` | `[data-toggle][data-icon-only] [data-toggle-body]` | `width` | `1px` | +| 3 | `toggle.css:176` | `[data-toggle][data-icon-only] [data-toggle-body]` | `height` | `1px` | ## 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 | `toggle.css:155` | `[data-toggle]:focus-visible` | `outline` | `var(--focus-ring-width) solid var(--focus-ring-color)` | +| 1 | `toggle.css:157` | `[data-toggle]:focus-visible` | `outline` | `var(--focus-ring-width) solid var(--focus-ring-color)` | ## 3. Privados de la receta — ¿de dónde sale su valor? @@ -57,7 +53,7 @@ Un tema los alcanza **a nivel de sistema**, por diseño (recipe-contract §2). | `--_toggle-gap` | 5 | `var(--toggle-gap-md)`, `var(--toggle-gap-xs)`, `var(--toggle-gap-sm)`, `var(--toggle-gap-lg)`, `var(--toggle-gap-xl)` | public | **sí** | | `--_toggle-font-size` | 5 | `var(--toggle-font-size-md)`, `var(--toggle-font-size-xs)`, `var(--toggle-font-size-sm)`, `var(--toggle-font-size-lg)`, `var(--toggle-font-size-xl)` | public | **sí** | | `--_toggle-font-weight` | 5 | `var(--toggle-font-weight-md)`, `var(--toggle-font-weight-xs)`, `var(--toggle-font-weight-sm)`, `var(--toggle-font-weight-lg)`, `var(--toggle-font-weight-xl)` | public | **sí** | -| `--_toggle-radius` | 6 | `var(--radius-default)`, `var(--radius-sm)`, `var(--radius-md)`, `var(--radius-lg)`, `var(--radius-xl)`, `var(--radius-full)` | global | no | +| `--_toggle-radius` | 6 | `var(--toggle-radius)`, `var(--toggle-radius-sm)`, `var(--toggle-radius-md)`, `var(--toggle-radius-lg)`, `var(--toggle-radius-xl)`, `var(--toggle-radius-full)` | public | **sí** | | `--_toggle-bg` | 3 | `var(--toggle-solid-bg)`, `var(--toggle-outline-bg)`, `var(--toggle-ghost-bg)` | public | **sí** | | `--_toggle-fg` | 3 | `var(--toggle-solid-fg)`, `var(--toggle-outline-fg)`, `var(--toggle-ghost-fg)` | public | **sí** | | `--_toggle-border` | 3 | `var(--toggle-solid-border)`, `var(--toggle-outline-border)`, `var(--toggle-ghost-border)` | public | **sí** | @@ -73,7 +69,7 @@ Un tema los alcanza **a nivel de sistema**, por diseño (recipe-contract §2). - **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` (2) +### 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 @@ -83,8 +79,6 @@ no distingue lo que debería — se marca `⚠`. | token (`--toggle-…`) | scope TSC | valor propuesto | usos | | --- | --- | --- | ---: | -| `radius` | `root` | ⚠ `var(--radius-default)` / `var(--radius-sm)` / `var(--radius-md)` / `var(--radius-lg)` / `var(--radius-xl)` / `var(--radius-full)` | 6 | -| `invalid-border` | `root` | `var(--color-threat-element)` | 1 | ### 4.2 Sin nombre mecánico (3) @@ -92,10 +86,6 @@ no distingue lo que debería — se marca `⚠`. - **⚠ decisión: `width` es shorthand o eje físico — hay que partirlo en ejes lógicos antes de nombrarlo (recipe-contract §1, R-4.4)** — 1: `width`. - **⚠ decisión: `height` es shorthand o eje físico — hay que partirlo en ejes lógicos antes de nombrarlo (recipe-contract §1, R-4.4)** — 1: `height`. -### 4.3 Avisos sobre los tokens propuestos (1) - -- **el privado `--_toggle-radius` debe pasar a leer este público (o desaparecer)** — `--toggle-radius` - ### 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. @@ -108,6 +98,59 @@ no distingue lo que debería — se marca `⚠`. -_(pendiente — lo escribe el autor; se conserva al regenerar)_ +**EJECUTADO 2026-08-23 — 81 % → 100 %, contrato 119 → 126 claves.** + +Tres knobs fuera de alcance y una firma. Ninguno era doctrina: los tres eran +sistema leído a pelo o literales sin anotar. + +- **El radio (§1.2, 1 knob · 6 fuentes)**. El bloque de `base.ts` decía «No + `--toggle-radius-*` aliases» y la receta leía `--radius-default` y la escala + global `--radius-*` directamente. Es exactamente el agujero que + `navigation-menu` tenía —«pinned to `--radius-default` ("decoupled from + size", a line that read Radix as a rule when Radix paints nothing) … not + reachable by a theme short of moving `--radius-default` for the whole + system»— y el catálogo ya lo había resuelto en los CUATRO componentes con + escala `rounded`: `button`, `badge`, `image` y `color-swatch` declaran sus + `radius-{paso}` y el reposo lee UNO de ellos. Toggle es el único que no. + Entran `radius` (el reposo, default `var(--radius-default)`, que así SIGUE + siguiendo el default del arquetipo) y `radius-{sm,md,lg,xl,full}`. El + desacople de `size` se conserva intacto: son pasos de `rounded`. +- **El tinte inválido (§1.1, 1 knob)**: `var(--color-threat-element)` a pelo → + `--toggle-invalid-border` con ese valor. La costura de PLAN §2-A. +- **Los tres literales (§1.3)** se FIRMAN con `/* literal: */` y salen del + ratio: el `100%` de `data-block` es identidad, y el par `1px` del cuerpo + `sr-only` ES la técnica (precedente `text-blur` / `text-scramble`). + +**Diff de computed: VACÍO.** 416 valores en 7 estados (sonda estándar) más +1.150 valores en 25 celdas de variante / `rounded` / `on` / `invalid` / +`disabled` / `block` / `icon-only` / tono (barrido dirigido: el escenario monta +UN toggle `solid`, apagado y válido). Capturas 2× antes y después, idénticas. + +**Centinela R-5.4: 70/126, 56 adjudicadas.** Empezó en **36/126** y la +diferencia NO es adjudicación, es instrumento: el guard sólo sabía barrer UN +eje, y aquí las claves `{variante}-*` y `{variante}-on-*` son las mismas tres +variantes en dos ESTADOS distintos. Forzar el estado con `prepareWith` cambiaba +una mitad por la otra (36 → 46, y las de reposo murieron) — «montar más puede +medir menos», esta vez dentro de un componente. El guard aprende a barrer el +PRODUCTO CARTESIANO de varios ejes (`variant` × `state` × `invalid`), y a +quitar un atributo con `null`, porque sellar `data-invalid` toda la corrida +hacía que el borde inválido ganase a los otros seis bordes. Con eso, 58/126. Y +el barrido llegó también al PASE DE HOVER, que no barría nada: 70/126, con las +doce claves de hover vivas (es literalmente la razón que +`radio-group.hover-segmented-segment-fg` tenía escrita en el ledger). + +De las 56 restantes, 48 son la cascada de paleta por PATRÓN — medida aquí, con +un matiz que conviene escribir: **las ocho `neutral-*` caen con las demás +porque el propio guard estampa `data-color=neutral` para probarlas**, que es +justo lo que enciende el bloque genérico. Las otras 8 están medidas una a una +(los cinco pasos de `rounded`, que la demo no expone; `disabled-opacity`; y el +par de transición, que ES lo que el guard congela). + +**Anotado, fuera por D-TH.5**: `[data-toggle]:hover` y +`[data-toggle][data-invalid]` pesan lo mismo (0,2,0) y el hover se declara +antes, así que **un toggle inválido bajo el puntero pierde su tinte**. +Arreglarlo mueve píxel y es una decisión de escala del sistema — los cuatro +controles de formulario (checkbox, switch, pin-input, toggle) comparten el +patrón. No se toca aquí. diff --git a/docs/next-features.md b/docs/next-features.md index 0a629a77c..b6ff4a778 100644 --- a/docs/next-features.md +++ b/docs/next-features.md @@ -1544,6 +1544,14 @@ Lo que `chart` destapó (2026-08-22): registrada aquí. Es una decisión de escala del SISTEMA que mueve píxel en varios controles de formulario con el mismo patrón; se anota, no se toca en el eje (D-TH.5). +- **El centinela no fotografía `transform`** (medido 2026-08-23 en + `rating-group`): `item-hover-offset` mueve un `translateY` en hover y es el + único knob de esa receta que lo hace, así que leía muerto con el token + perfectamente vivo (`matrix(1,0,0,1,0,-1)` → `matrix(1,0,0,1,0,-40)` al + escribirlo). Misma familia que el hueco de `mask-image` de `background`. + Añadirlo a `PROPS` obliga a re-verificar los componentes con ledger, así que + queda anotado. + **Deps**: ninguna. Son mejoras del instrumental del eje, ejecutables cuando estorben. diff --git a/docs/process/PLAN-theming.md b/docs/process/PLAN-theming.md index c8317f31c..e758d5243 100644 --- a/docs/process/PLAN-theming.md +++ b/docs/process/PLAN-theming.md @@ -486,6 +486,16 @@ commits de corrección. ## 8. Registro +- 2026-08-23 — **`rating-group` 80 % → 100 %** (COMMIT), contrato 25 → **29** + claves, centinela **23/29** con 6 adjudicadas. Tres RESUELTAS por talla + (`gap`, `item-size`, `font-size`) jubilan sus tres privados y los cuatro + bloques `[data-size]` que los conmutaban: eran «privado con fuentes por + TALLA», o sea una ESCALA, que sube al contrato. Más `invalid-item-fg` (la + costura: leía `--color-threat-element` a pelo) y los dos `100%` del glifo + FIRMADOS como identidad, que salen del ratio. Diff **0** sobre 5.624 valores. + Lo que enseñó: **el centinela no fotografía `transform`**, así que + `item-hover-offset` —el único knob de la receta que mueve uno— leía muerto + estando vivo (§13). - 2026-08-23 — **`radio-group` 77 % → 81 %, y su TECHO es ése** (COMMIT), contrato 61 → **69** claves, centinela **46/69** con 23 adjudicadas. Ocho claves: tres RESUELTAS por talla (`item-size`, `dot-size`, `font-size`) que diff --git a/scripts/theming-sentinel-exceptions.ts b/scripts/theming-sentinel-exceptions.ts index 9eb04fe4d..71110abe9 100644 --- a/scripts/theming-sentinel-exceptions.ts +++ b/scripts/theming-sentinel-exceptions.ts @@ -1166,6 +1166,21 @@ export const SENTINEL_EXCEPTIONS: Record> = { // enough for the static pass to catch it. Verified alive twice before the // entry was pruned (hovered segment: oklch(0.2435 0 0) -> rgb(1, 2, 3)). }, + 'rating-group': { + // 2026-08-23. Six, each measured on the real nodes. + 'partial-item-fg': + 'only under [data-state=partial], which needs allowHalf AND a half value; forced on the real fifth item -> reaches (oklch(0.6406 0.1329 157.68) -> rgb(1, 2, 3))', + 'invalid-item-fg': + 'minted 2026-08-23 (the rule was reading --color-threat-element raw); the demo boots VALID, and switching `invalid` on would make its (0,3,0) rule out-rank item-fg / active-item-fg / partial-item-fg for the whole run. Forced [data-invalid] on the real root -> reaches (oklch(0.9555 0.0207 13.86) -> rgb(1, 2, 3))', + 'item-hover-offset': + 'the guard does not snapshot `transform`, and this is the only knob of the recipe that moves one (the 1px lift on hover); hovered the real item and read transform -> reaches (matrix(1, 0, 0, 1, 0, -1) -> matrix(1, 0, 0, 1, 0, -40)). Instrument gap, registered in next-features §13', + 'focus-radius': + 'the corner only rounds under :focus-visible on the provider and the guard blurs on purpose; focused from the keyboard -> reaches (6px -> 1234px)', + 'transition-duration': + 'the guard freezes transitions and this token IS the transition; measured unfrozen on a real item -> reaches (0.12s -> 11.5s on colour and transform)', + 'transition-ease': + 'same freeze; measured unfrozen -> reaches (cubic-bezier(0.4, 0, 0.2, 1) -> steps(3))' + }, }; /** diff --git a/scripts/theming-sentinel.ts b/scripts/theming-sentinel.ts index 86d2fc9fd..defeb0fa4 100644 --- a/scripts/theming-sentinel.ts +++ b/scripts/theming-sentinel.ts @@ -261,6 +261,15 @@ const COMPONENT_OVERRIDES: Record< '/uix/components/radio-group?perm.invalid=true' ] }, + // Its opacity floor is the only knob behind a state, and the demo has no URL + // switch for it: the toggle is the way in, and turning it on costs nothing + // (the one hover token of the recipe moves `transform`, which the guard does + // not read anyway — adjudicated). + 'rating-group': { + prepareWith: [ + '[data-uix-control]:has([data-uix-control-label]:text-is("disabled")) input[type=checkbox]' + ] + }, // Half its contract lives in parts the default stage does not mount: the // AutoFields tree (array, item, widget) only exists in the demo's `auto` // mode, and the panel chrome only under `variant='panel'`. 18 of 54 tokens diff --git a/src/uix/eidos/components/toggle/README.md b/src/uix/eidos/components/toggle/README.md index 108be3f99..37016791b 100644 --- a/src/uix/eidos/components/toggle/README.md +++ b/src/uix/eidos/components/toggle/README.md @@ -102,6 +102,48 @@ la Comparativa. - Cuando la API necesita comportamiento nuevo, va a Soma / Morfo primero; Eidos sólo expone la receta visual del resultado. +## Talla y tema + +**126 claves públicas** en `lib/recipes/base.ts`: el bundle por talla +(`height-{xs…xl}`, `padding-inline-{xs…xl}`, `gap-{xs…xl}`, +`font-size-{xs…xl}`, `font-weight-{xs…xl}`), la tipografía de la caja +(`font-family`, `line-height`, `letter-spacing`), la forma +(**`radius`** + **`radius-{sm,md,lg,xl,full}`**, `border-width`, `shadow`), la +transición (`transition-duration`, `transition-ease`), las tres variantes × +diez ranuras (`{solid,outline,ghost}-{bg,fg,border,hover-bg,hover-border, +on-bg,on-fg,on-border,on-hover-bg,on-hover-border}`), los 6 tonos × 8 ranuras +más los ocho `palette-*` del puente THM-2, y los dos estados +(`disabled-opacity`, **`invalid-border`**). La pestaña **Tokens** de su demo +las resuelve en vivo. + +Lo que entró el **2026-08-23** (81 % → **100 %**, contrato 119 → 126): + +- **`radius` + los cinco pasos de `rounded`** — el radio sigue **desacoplado de + `size`** (modelo Radix): son pasos de `data-rounded`, no de talla. Lo que + cambia es el ALCANCE. La receta leía `--radius-default` y la escala global + `--radius-*` a pelo, así que la única forma de redondear un toggle era mover + el radio de todo el sistema — el mismo agujero que tenía + `navigation-menu`. `radius` es el reposo y **sigue siguiendo** el default del + arquetipo; `radius-md` es el paso `md` de la escala, que hoy vale lo mismo y + se llama distinto a propósito. +- **`invalid-border`** — la costura del tinte inválido, que iba a + `--color-threat-element` a pelo. +- **Los tres literales quedan FIRMADOS** (`/* literal: */`, la válvula de + recipe-contract §3) y salen del ratio: el `100%` de `block` es identidad, y + el par `1px` del cuerpo sr-only ES la técnica. + +⚠ **El `:hover` tapa el borde inválido**: `[data-toggle]:hover` y +`[data-toggle][data-invalid]` pesan lo mismo (0,2,0) y el hover se declara +antes, así que un toggle inválido bajo el puntero pierde su tinte. Arreglarlo +mueve píxel y es una decisión de escala del sistema (los cuatro controles de +formulario comparten el patrón) → **queda fuera por D-TH.5**, anotado. + +**Lo que el guard da por silencioso** (70 de 126): los 48 tonos son la cascada +de paleta —el bloque genérico `[data-toggle][data-color]` se emite el último y +gana por orden— y los ocho restantes están medidos uno a uno en el ledger (los +cinco pasos de `rounded`, que la demo no expone; `disabled-opacity`; y el par +de transición, que ES lo que el guard congela). + ## Gaps | Gap | Disposición | Detalle | diff --git a/src/uix/eidos/components/toggle/toggle.css b/src/uix/eidos/components/toggle/toggle.css index ef5715f07..001722c1c 100644 --- a/src/uix/eidos/components/toggle/toggle.css +++ b/src/uix/eidos/components/toggle/toggle.css @@ -6,8 +6,10 @@ --_toggle-font-weight: var(--toggle-font-weight-md); /* Radius is DECOUPLED from size (Radix model) — the resting radius is the * control archetype default (`--radius-default` = md), constant across sizes. - * `data-rounded` overrides per-instance; the theme `--radius-factor` retunes. */ - --_toggle-radius: var(--radius-default); + * `data-rounded` overrides per-instance; the theme `--radius-factor` retunes. + * Both steps now come through the contract (`--toggle-radius[-{step}]`), whose + * defaults ARE those system names: same value, reachable by a theme. */ + --_toggle-radius: var(--toggle-radius); /* The 8 --toggle-palette-* tokens (neutral default) and the * --toggle-{variant}-* tokens (host-scoped) are emitted by the * generator into a separate `[data-toggle]` block. Per-color @@ -100,11 +102,11 @@ * Resting radius = the control archetype default (`--radius-default`, set on * `[data-toggle]` above). `rounded` overrides per-instance to a global radius * step; `full` = pill at any size. Mirrors Button. */ -[data-toggle][data-rounded='sm'] { --_toggle-radius: var(--radius-sm); } -[data-toggle][data-rounded='md'] { --_toggle-radius: var(--radius-md); } -[data-toggle][data-rounded='lg'] { --_toggle-radius: var(--radius-lg); } -[data-toggle][data-rounded='xl'] { --_toggle-radius: var(--radius-xl); } -[data-toggle][data-rounded='full'] { --_toggle-radius: var(--radius-full); } +[data-toggle][data-rounded='sm'] { --_toggle-radius: var(--toggle-radius-sm); } +[data-toggle][data-rounded='md'] { --_toggle-radius: var(--toggle-radius-md); } +[data-toggle][data-rounded='lg'] { --_toggle-radius: var(--toggle-radius-lg); } +[data-toggle][data-rounded='xl'] { --_toggle-radius: var(--toggle-radius-xl); } +[data-toggle][data-rounded='full'] { --_toggle-radius: var(--toggle-radius-full); } [data-toggle][data-variant='outline'] { --_toggle-bg: var(--toggle-outline-bg); @@ -157,7 +159,7 @@ } [data-toggle][data-block] { - inline-size: 100%; + inline-size: 100%; /* literal: fills its box — identity, not a knob */ } [data-toggle][data-icon-only] { @@ -170,8 +172,8 @@ * visible. Consumer must provide an `icon` snippet or an `aria-label`. */ [data-toggle][data-icon-only] [data-toggle-body] { position: absolute; - width: 1px; - height: 1px; + width: 1px; /* literal: sr-only clip box — the 1px IS the technique, not a knob */ + height: 1px; /* literal: sr-only clip box — the 1px IS the technique, not a knob */ padding: 0; margin: -1px; overflow: hidden; @@ -196,7 +198,7 @@ /* Invalid (Field-aware) — border tints like the sibling form controls (checkbox, switch, pin-input). */ [data-toggle][data-invalid] { - border-color: var(--color-threat-element); + border-color: var(--toggle-invalid-border); } /* Read-only: still focusable/hoverable but not pressable — no press cursor. */ diff --git a/src/uix/eidos/generated/base.css b/src/uix/eidos/generated/base.css index 266f6bbf0..f2657d8c1 100644 --- a/src/uix/eidos/generated/base.css +++ b/src/uix/eidos/generated/base.css @@ -3885,6 +3885,12 @@ --toggle-font-weight-md: var(--font-weight-medium); --toggle-font-weight-lg: var(--font-weight-medium); --toggle-font-weight-xl: var(--font-weight-medium); + --toggle-radius: var(--radius-default); + --toggle-radius-sm: var(--radius-sm); + --toggle-radius-md: var(--radius-md); + --toggle-radius-lg: var(--radius-lg); + --toggle-radius-xl: var(--radius-xl); + --toggle-radius-full: var(--radius-full); --toggle-border-width: var(--border-width); --toggle-shadow: none; --toggle-transition-duration: var(--duration-fast); @@ -3945,6 +3951,7 @@ --toggle-ghost-border: transparent; --toggle-ghost-hover-border: transparent; --toggle-disabled-opacity: var(--opacity-disabled); + --toggle-invalid-border: var(--color-threat-element); --tooltip-content-z: var(--z-index-overlay-tooltip); --tooltip-max-width: 22rem; --tooltip-padding-block-sm: var(--space-1); diff --git a/src/uix/eidos/lib/recipes/base.ts b/src/uix/eidos/lib/recipes/base.ts index 9b6ed3c77..fb051e353 100644 --- a/src/uix/eidos/lib/recipes/base.ts +++ b/src/uix/eidos/lib/recipes/base.ts @@ -6161,10 +6161,22 @@ export const THEME_BASE_RECIPE_TOKENS = defineRecipes({ 'font-weight-md': 'var(--font-weight-medium)', 'font-weight-lg': 'var(--font-weight-medium)', 'font-weight-xl': 'var(--font-weight-medium)', - // Radius is NOT a per-size token: it is DECOUPLED from `size` (Radix model). - // toggle.css resolves the resting radius from `--radius-default` (control - // archetype default) and the `rounded` override from the global `--radius-*` - // scale. No `--toggle-radius-*` aliases — see toggle.css "Rounded override". + // Radius is NOT a per-size token: it is DECOUPLED from `size` (Radix model), + // and these keys keep that decoupling — they are the `rounded` steps, not + // size steps. What they add is REACH: until 2026-08-23 toggle.css read + // `--radius-default` and the global `--radius-*` scale straight, so the only + // way a theme could round a toggle was to move the radius scale for the whole + // system (the hole `navigation-menu` had, PLAN-theming §8). `radius` is the + // RESTING corner and still tracks the control archetype default, so a theme + // that retunes `--radius-default` keeps moving it; `radius-md` is the + // `rounded='md'` step of the scale, which is a different name for the same + // value today and stays a different name on purpose. Mirrors button. + radius: 'var(--radius-default)', + 'radius-sm': 'var(--radius-sm)', + 'radius-md': 'var(--radius-md)', + 'radius-lg': 'var(--radius-lg)', + 'radius-xl': 'var(--radius-xl)', + 'radius-full': 'var(--radius-full)', 'border-width': 'var(--border-width)', shadow: 'none', 'transition-duration': 'var(--duration-fast)', @@ -6375,7 +6387,13 @@ export const THEME_BASE_RECIPE_TOKENS = defineRecipes({ value: 'color-mix( in srgb, var(--toggle-palette-border) 88%, transparent )', scope: 'host' }, - 'disabled-opacity': 'var(--opacity-disabled)' + 'disabled-opacity': 'var(--opacity-disabled)', + // Field-aware invalid tint. The VALUE is the system's threat element (the + // same one checkbox / switch / pin-input borrow, so the form controls tint + // alike); the KNOB is the component's (PLAN-theming §2-A, the costura) — + // without it a theme could only retint an invalid toggle by moving + // `--color-threat-element` for the whole catalogue. + 'invalid-border': 'var(--color-threat-element)' }, tooltip: { 'content-z': 'var(--z-index-overlay-tooltip)', diff --git a/web/routes/uix/components/toggle/+page.svelte b/web/routes/uix/components/toggle/+page.svelte index 586c7067b..230367fb7 100644 --- a/web/routes/uix/components/toggle/+page.svelte +++ b/web/routes/uix/components/toggle/+page.svelte @@ -3,6 +3,7 @@ type ToggleVariant, type ToggleSize } from '$uix/eidos/components/toggle'; + import TokensPanel from '../../lib/TokensPanel.svelte'; import { compileMorfo } from '$uix/morfo'; import { toggleMorfo } from '@/uix/morfo/components/toggle'; import { getActiveUix } from '$active-uix'; @@ -12,7 +13,7 @@ const uix = getActiveUix(); const params = page.url.searchParams; - type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'a11y'; + type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'tokens' | 'a11y'; let tab = $state('live'); // ── State ────────────────────────────────────────────────────────────── @@ -233,6 +234,9 @@ {events.length} + @@ -582,6 +586,10 @@ {/if} + {#if tab === 'tokens'} + + {/if} + {#if tab === 'a11y'}

Accessibility