diff --git a/src/uix/eidos/SHAPE_ENGINE_RFC.md b/src/uix/eidos/SHAPE_ENGINE_RFC.md index 962536878..9d3ad630a 100644 --- a/src/uix/eidos/SHAPE_ENGINE_RFC.md +++ b/src/uix/eidos/SHAPE_ENGINE_RFC.md @@ -101,6 +101,14 @@ nada → cero rotura): - **Anidado**: `border-radius: max(0px, calc(var(--_outer-radius) - var(--shape-nest-gap)))` — convención en `calc()`, sin token de salida nuevo. +> **El anidado concéntrico requiere radios FINITOS.** A `full` (`--radius-full` = 9999px) el radio +> se **recorta a la mitad de la dimensión menor de cada elemento** — un contenedor alto y su hijo +> ancho (p. ej. 16:10) recortan a valores distintos, así que **no pueden ser concéntricos**. `full` +> es para **hojas** (chips · botones · avatares · inputs-píldora), no para contenedores con hijos +> que deban encajar. La regla `[data-shape-nest]` se desactiva ahí; el hijo se queda en un radio +> finito limpio. El demo `/temas/forma` lo refleja: al elegir `full`, el toggle "radios +> concéntricos" se inhabilita («n/a a full — geometría de hoja») y la carátula cae a `--radius-xl`. + ## 6. Fases (la flexibilidad va horneada en cada una) 1. ✅ **Continuidad + escala + familias** — `--shape-smoothing` + `data-shape` → diff --git a/src/uix/eidos/THEMING.md b/src/uix/eidos/THEMING.md index 955840620..d245d8ca6 100644 --- a/src/uix/eidos/THEMING.md +++ b/src/uix/eidos/THEMING.md @@ -2322,7 +2322,10 @@ arco + estático; la continuidad solo existía en Apple, atada a plataforma). `corner-shape` (Chromium 2025+). - **Armonía anidada** — `[data-shape-nest]` deriva `border-radius: max(0px, var(--shape-outer-radius) − var(--shape-nest-gap))`: el hijo queda concéntrico al padre (que - expone su radio en `--shape-outer-radius`). + expone su radio en `--shape-outer-radius`). **Requiere radios finitos**: a `full` (9999px) el + radio se recorta a la mitad de la dimensión menor *de cada elemento*, así que padre e hijo con + proporciones distintas no pueden ser concéntricos — `full` es para **hojas** (chips · botones · + avatares · inputs-píldora), no para contenedores anidados. - **Eventful (dos momentos)** — la forma en reposo (`data-shape`) + el **morph** al pulsar: la firma `press-squeeze` cuadra la esquina un instante (`--shape-smoothing` 2→3→2, registrado con `@property` para que interpole). Cross-modal: un evento mueve escala + sombra + esquina. diff --git a/web/routes/temas/forma/+page.svelte b/web/routes/temas/forma/+page.svelte index 804fd50c5..ccf3c6c0a 100644 --- a/web/routes/temas/forma/+page.svelte +++ b/web/routes/temas/forma/+page.svelte @@ -40,6 +40,11 @@ let nest = $state(true) let playing = $state(true) + // `full` (pill/circle) is dimension-capped per element → concentric nesting is impossible there: + // a tall pill can't have a concentric wide-pill child (their radii cap to different values). + // Concentric needs FINITE radii; `full` is for leaf elements (chips · buttons · avatars). + const isFull = $derived(radius === 'full'); + const RADII = ['sm', 'md', 'lg', 'xl', 'full'] as const // ── 4 · eventful press ─────────────────────────────────────────────────────── @@ -90,8 +95,9 @@