uix(separator): temable — 67 % → 100 %, SIN acuñar una sola clave

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 <noreply@anthropic.com>

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: <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._
+| # | 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 `⚠`.
 
 <!-- veredicto:start -->
 
-_(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.
 
 <!-- veredicto:end -->

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 {

src/uix/eidos/components/separator/README.md

@@ -22,6 +22,25 @@ no role) via the `decorative` prop.
 <Separator orientation={{ base: 'horizontal', md: 'vertical' }} />
 ```
 
+## 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`).

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;
 }

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<Tab>('live');
 	let trace = $state<TraceEntry[]>([]);
@@ -197,9 +198,16 @@
 			<span data-uix-tab-count>{events.length}</span>
 		</button>
 		<button data-uix-tab data-active={tab === 'recipe'} onclick={() => (tab = 'recipe')}>Recipe</button>
+		<button data-uix-tab data-active={tab === 'tokens'} onclick={() => (tab = 'tokens')}>
+			Tokens <span data-uix-tab-count>3</span>
+		</button>
 		<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
 	</div>
 
+	{#if tab === 'tokens'}
+		<TokensPanel component="separator" stage={stageRef ?? undefined} />
+	{/if}
+
 	{#if tab === 'live'}
 		<section data-uix-section>
 			<h2 data-uix-section-title>Controls</h2>