From acf9c3a2340e98b3148f80911c63e5cb5968dc8c Mon Sep 17 00:00:00 2001 From: dev Date: Mon, 24 Aug 2026 03:03:10 +0200 Subject: [PATCH] =?UTF-8?q?uix(separator):=20temable=20=E2=80=94=2067=20%?= =?UTF-8?q?=20=E2=86=92=20100=20%,=20SIN=20acu=C3=B1ar=20una=20sola=20clav?= =?UTF-8?q?e?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Su alcance no subía porque le faltaran tokens: subía firmando lo que nunca fue un knob. Los dos que quedaban fuera eran `inline-size: 100%` en el horizontal y `block-size: 100%` en el vertical — la IDENTIDAD del primitivo. Una regla ocupa su contenedor; un separador que no lo hiciera sería otro componente, y su propio README ya lo decía en sus Gaps («Horizontal already fills 100%»). Llevan ahora su anotación `/* literal: … */` (recipe-contract §3) y salen del ratio. Contrato **3 → 3 claves**: no entra ninguna, y ésa es la decisión. `thickness` (el mismo token alimenta `block-size` en horizontal e `inline-size` en vertical), `fg` (el slot 6 `--color-neutral-separator`, que existe para retocar divisores sin tocar bordes de control) y `min-length` son TODA su apariencia. Acuñar un `--separator-length` habría sido inventar un eje que nadie pidió. Censo: 6 knobs · 4 públicos · 2 literales · **67 %** → 4 knobs · 4 públicos · 0 literales · 2 excepciones · **100 %**. Diff de computed **VACÍO**: 448 valores, 7 estados, sonda antes y después (el cambio es de comentarios: no puede mover un píxel, y se midió igual). Capturas 2× antes/después, miradas: idénticas. Centinela R-5.4 **2/3 → 3/3, cero adjudicadas**, y ahí estuvo el trabajo: `min-length` leía MUERTO y no mentía. La demo arranca en el ejemplo `stacked`, que monta sólo reglas horizontales, y la mitad de la receta cuelga de `[data-orientation='vertical']`. Se arregla midiendo, no adjudicando: un `sweepAttr` sobre `data-orientation` en `COMPONENT_OVERRIDES` recorre las DOS orientaciones sobre los mismos nodos. Cambiar el chip de la demo al ejemplo `toolbar` no habría servido — cambia una orientación por la otra en vez de sumarlas, la trampa de «montar MÁS puede medir MENOS» otra vez. Guards: censo `--only separator` 100 % · `component-audit` PASS · `eidos-lint` invalid 0 · `vitest run src/uix/eidos` 35/36 ficheros (el rojo conocido `skin-media-player`) · `rtl:check` 0 · `docs:check` 0 · `check` sin un solo error atribuible a este componente · prettier limpio con el contenido normalizado a LF. Más el README con su sección «Talla y tema», la pestaña `Tokens` de la demo (3 claves, verificada en navegador) y el veredicto §5 de su ficha, que escribe la cifra cerrada: el techo de este componente ES el 100 %. Co-Authored-By: Claude Opus 5 --- docs/audit/theming/separator.md | 52 +++++++++++++++---- scripts/theming-sentinel.ts | 8 ++- src/uix/eidos/components/separator/README.md | 19 +++++++ .../eidos/components/separator/separator.css | 4 +- .../uix/components/separator/+page.svelte | 10 +++- 5 files changed, 79 insertions(+), 14 deletions(-) diff --git a/docs/audit/theming/separator.md b/docs/audit/theming/separator.md index 685de9803..1f48fdf83 100644 --- a/docs/audit/theming/separator.md +++ b/docs/audit/theming/separator.md @@ -5,8 +5,8 @@ > 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**: **67%** — 4 de 6 knobs por token público -- **Knobs de apariencia**: 6 — público 4 · privado 0 · global 0 · literal 2 · sistema 0 · excepción 0 _(los dos últimos, fuera del ratio)_ +- **Medido**: 2026-08-24 · **Alcance**: **100%** — 4 de 4 knobs por token público +- **Knobs de apariencia**: 4 — público 4 · privado 0 · global 0 · literal 0 · sistema 0 · excepción 2 _(los dos últimos, fuera del ratio)_ - **Contrato hoy** (`lib/recipes/base.ts`): 3 pública(s) — `thickness`, `fg`, `min-length` - **Eje `size`**: no · **ficheros**: `separator.css` @@ -20,21 +20,21 @@ _Ninguno._ _Ninguno._ -### 1.3 Literales (2) +### 1.3 Literales (0) -| # | fichero:línea | selector | propiedad | valor | -| ---: | --- | --- | --- | --- | -| 1 | `separator.css:26` | `[data-separator][data-orientation='horizontal']` | `inline-size` | `100%` | -| 2 | `separator.css:32` | `[data-separator][data-orientation='vertical']` | `block-size` | `100%` | +_Ninguno._ -### 1.4 Excepciones firmadas (0) — fuera del ratio +### 1.4 Excepciones firmadas (2) — 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 | `separator.css:26` | `[data-separator][data-orientation='horizontal']` | `inline-size` | `100%` | +| 2 | `separator.css:32` | `[data-separator][data-orientation='vertical']` | `block-size` | `100%` | ## 2. Sistema transversal (0) — informativo, fuera del ratio Un tema los alcanza **a nivel de sistema**, por diseño (recipe-contract §2). @@ -74,6 +74,38 @@ no distingue lo que debería — se marca `⚠`. -_(pendiente — lo escribe el autor; se conserva al regenerar)_ +**Ejecutado 2026-08-24 · 67 % → 100 %, y SIN ACUÑAR UNA SOLA CLAVE.** Contrato +**3 → 3**. Censo: público 4, global 0, literal **2 → 0** (los dos pasan a +`exception`, fuera del ratio), privado 0, sistema 0. Diff de computed **VACÍO** +(448 valores, 7 estados); capturas 2× antes/después idénticas. Centinela +**3/3**, **cero adjudicadas**. + +**El techo de este componente ES el 100 %, y se alcanza firmando, no acuñando.** +Los dos knobs que faltaban eran `inline-size: 100%` en el horizontal y +`block-size: 100%` en el vertical: no son knobs, son la IDENTIDAD del primitivo. +Una regla ocupa el contenedor; un separador que no lo hiciera sería otro +componente, y su propio README ya lo decía en la fila «Decorative + horizontal +default min-length» de sus Gaps («Horizontal already fills 100%»). Llevan su +`/* literal: … */` (recipe-contract §3) y salen del ratio. Acuñar +`--separator-length` habría sido inventar un eje que nadie pidió y que ninguna +composición del catálogo usa. + +**Las tres claves que ya tenía son TODA su apariencia**, y ninguna es prestada: +`thickness` (el grosor, que cambia de eje con la orientación — el mismo token +alimenta `block-size` en horizontal e `inline-size` en vertical), `fg` (la +tinta, en el slot 6 `--color-neutral-separator`, que existe precisamente para +que un tema retoque los divisores sin tocar los bordes de control) y +`min-length` (el suelo del vertical cuando el eje cruzado colapsa al contenido). +El `border: 0` y el `flex-shrink: 0` no son apariencia: son la puesta a cero y +la defensa contra el colapso en un padre flex. + +**Lo que costó una medición, y es del INSTRUMENTO, no del componente**: +`min-length` leía MUERTO (2/3). No era un token que miente — es que la demo +arranca en el ejemplo `stacked`, que monta sólo reglas horizontales, y la mitad +de la receta cuelga de `[data-orientation='vertical']`. Se arregla midiendo, no +adjudicando: un `sweepAttr` sobre `data-orientation` en `COMPONENT_OVERRIDES` +recorre las DOS orientaciones sobre los mismos nodos. Cambiar el chip de la demo +al ejemplo `toolbar` no habría servido: cambia una orientación por la otra en +vez de sumarlas — la trampa de «montar MÁS puede medir MENOS», otra vez. diff --git a/scripts/theming-sentinel.ts b/scripts/theming-sentinel.ts index 595dcef2c..54a09cca7 100644 --- a/scripts/theming-sentinel.ts +++ b/scripts/theming-sentinel.ts @@ -592,7 +592,13 @@ const COMPONENT_OVERRIDES: Record< 'image-adjustments': { extraNodes: "[data-image-adjustments-item][data-adjustment='hue'] [data-slider]", sweepAttr: { attr: 'disabled', values: [null] } - } + }, + // Half its recipe hangs off `[data-orientation='vertical']` — the thickness on + // the inline axis and `min-length` — and the demo boots the `stacked` sample, + // which mounts horizontal rules only: `min-length` had no node and read dead + // (2/3). Sweeping the attribute measures BOTH orientations on the same nodes, + // which switching the demo chip could not do (it trades one for the other). + separator: { sweepAttr: { attr: 'data-orientation', values: ['horizontal', 'vertical'] } } }; function sentinelFor(key: string): string { diff --git a/src/uix/eidos/components/separator/README.md b/src/uix/eidos/components/separator/README.md index cda080878..f298e1daf 100644 --- a/src/uix/eidos/components/separator/README.md +++ b/src/uix/eidos/components/separator/README.md @@ -22,6 +22,25 @@ no role) via the `decorative` prop. ``` +## Talla y tema + +**3 claves públicas** en `lib/recipes/base.ts`, y son TODA la apariencia del +componente. No hay eje `size`: un separador no es un control, se estira a lo que +lo contiene. La pestaña **Tokens** de su demo las resuelve en vivo. + +| Rol | Clave | Default | +| --- | --- | --- | +| Grosor de la regla (bloque en horizontal, inline en vertical) | `thickness` | `--border-width` | +| Tinta | `fg` | `--color-neutral-separator` | +| Largo mínimo del vertical, cuando el eje cruzado colapsa al contenido | `min-length` | `--space-4` | + +**Cerrado en el 100 % el 2026-08-24 (67 % → 100 %) sin acuñar una sola clave.** +Los dos knobs que faltaban eran los `100%` de cada orientación, y no son knobs: +son la IDENTIDAD del primitivo — una regla ocupa su contenedor, y un separador +que no lo hiciera sería otra cosa. Van firmados con su anotación +`/* literal: … */` (recipe-contract §3), que es lo que los saca del ratio. El +techo de este componente es su contrato de tres claves, y está lleno. + ## Baseline Origin: `air/components/layout/separator` (branch `morfo-runtime`). diff --git a/src/uix/eidos/components/separator/separator.css b/src/uix/eidos/components/separator/separator.css index ce7837108..74a42082a 100644 --- a/src/uix/eidos/components/separator/separator.css +++ b/src/uix/eidos/components/separator/separator.css @@ -23,13 +23,13 @@ } [data-separator][data-orientation='horizontal'] { - inline-size: 100%; + inline-size: 100%; /* literal: a rule spans its container — identity, not a knob */ block-size: var(--separator-thickness, var(--border-width)); } [data-separator][data-orientation='vertical'] { inline-size: var(--separator-thickness, var(--border-width)); - block-size: 100%; + block-size: 100%; /* literal: a rule spans its container — identity, not a knob */ min-block-size: var(--separator-min-length, var(--space-4)); align-self: stretch; } diff --git a/web/routes/uix/components/separator/+page.svelte b/web/routes/uix/components/separator/+page.svelte index 085366bc5..0ced2819d 100644 --- a/web/routes/uix/components/separator/+page.svelte +++ b/web/routes/uix/components/separator/+page.svelte @@ -6,8 +6,9 @@ } from '$uix/eidos/components/separator'; import { compileMorfo } from '$uix/morfo'; import { separatorMorfo } from '@/uix/morfo/components/separator'; + import TokensPanel from '../../lib/TokensPanel.svelte'; - type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'a11y'; + type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'tokens' | 'a11y'; type TraceEntry = { event: string; family: string; intent?: string; at: number }; let tab = $state('live'); let trace = $state([]); @@ -197,9 +198,16 @@ {events.length} + + {#if tab === 'tokens'} + + {/if} + {#if tab === 'live'}

Controls