svelte-kit-vice/inherit_audit.md

Auditoría de herencia y escalado — capa Eidos / Theming

Fecha: 2026-06-27 · Alcance: src/uix/eidos (foundation + recipes + 80 componentes). Excluidos (tracks WIP, regla de proyecto): words/**, palabras/**, chronos/**.

Método: lectura directa de la foundation (lib/render-css.ts, lib/primitives/static.ts, lib/config-types.ts), de la doctrina (THEMING.md, SCALING_RFC.md, SHAPE_ENGINE_RFC.md, STRUCTURE_ENGINE_RFC.md, TYPOGRAPHY_ENGINE_RFC.md) y de los recipes (lib/recipes/base.ts) + CSS por componente. Cada hallazgo lleva evidencia archivo:línea. No se usaron agentes; los datos provienen de grep/lectura verificables.

---

0. Las 5 reglas auditadas

#	Regla (enunciado del usuario)	Veredicto global
R1	Los componentes deben escalar con el nivel de escala del tema (data-scaling).	✅ Cumplida en lo esencial (vía tokens) — 2 excepciones puntuales.
R2	Los componentes deben reaccionar a la densidad del tema (data-density).	✅ Cumplida en lo esencial (vía tokens) — mismas excepciones.
R3	Un componente sin size propio debe heredar el size de su padre.	❌ Incumplida de forma sistémica — ~todos hardcodean size='md'.
R4	Los sub-componentes internos deben escalar con el size (tipografía, controles, etc.).	🟡 Parcial — geometría + tipografía sí; el radio NO.
R5	Las formas de esquina/radios deben heredar/escalar (radios concéntricos).	❌ Incumplida — radio desacoplado del size; concéntrico casi sin adoptar.

Tesis de la auditoría: la disciplina de tokenización del framework hace que R1 y R2 se cumplan casi gratis (todo lo que es un token hereda --scaling y la densidad). Donde el sistema falla es en las tres reglas de herencia/coherencia de tamaño y forma (R3, R4-radio, R5): no existe herencia ambiental de size, el radio no forma parte de la cascada [data-size] salvo en toggle, y conviven tres filosofías de radio incompatibles sin doctrina única.

---

1. Cómo la foundation implementa cada eje (el contrato)

1.1 Scaling (zoom global data-scaling 90–110)

--scaling se emite en :root (render-css.ts:708 appendScalingDeclarations) y multiplica las métricas px en su calc:

• font-size → calc(<size> * var(--scaling)) (render-css.ts:1028).
• icon-size, blur → appendScaledMetricDeclarations (render-css.ts:260,266).
• space, control-height → calc(value * var(--density-*-scale) * var(--scaling)) (render-css.ts:162-168).
• NO escalan: radius, border-width, shadow, z, line-height (ratio), opacity, motion (decisión deliberada, SCALING_RFC.md:34-36).

→ Consecuencia: cualquier componente que dimensione con var(--font-size-*), var(--icon-size-*), var(--space-*), var(--control-height-*) (o tokens de recipe que los referencian) escala con --scaling automáticamente. Solo los literales px/rem quedan fuera.

1.2 Densidad (data-density compact/comfortable/spacious)

--density-space-scale + --density-control-scale (static.ts:169 STATIC_DENSITY) multiplican --space-* y --control-height-* (render-css.ts:162-168). La tipografía no lleva densidad por diseño (THEMING.md:687-694, paridad Radix).

→ Consecuencia: los componentes reaccionan a densidad si su padding/gap salen de --space-* y sus alturas de --control-height-*. Confirmado en los recipes: button.height-md → var(--control-height-md), field, combobox, etc. (base.ts:841,1065,1222).

1.3 Size (prop size discreto xxs…xxl)

La foundation emite un bundle --size-{k}-{control-height,font-size,icon-size, padding-inline,padding-block,gap,radius} (render-css.ts:1328 appendSizeDeclarations, desde STATIC_SIZE en static.ts:393). PERO ese bundle está huérfano: 0 consumidores (THEMING.md:605-606). En su lugar, cada recipe re-declara su propia familia de tokens por size (--{c}-height-{size}, --{c}-font-size-{size}, …) y el CSS rebindea --_{c}-* en bloques [data-size='X']. El patrón canónico (piloto) es toggle (toggle.css:64-98).

1.4 Radio / forma (shape)

• Escala --radius-{none…full} (4/6/10/16/20px + pill) (static.ts:40).
• STATIC_SIZE mapea cada size a un radio (xxs/xs→sm, sm/md→md, lg→lg, xl→xl, xxl→xxl) (static.ts:393-457) — pero ese mapeo viaja en el bundle --size-* huérfano, así que nadie lo consume.
• Concéntrico: [data-shape-nest] deriva border-radius: max(0px, var(--shape-outer-radius) − var(--shape-nest-gap)) (render-css.ts:1153-1159, SHAPE_ENGINE_RFC.md Fase 2).
• Familias data-shape='rounded|continuous|cut|scoop' + --shape-smoothing (superelipse) (render-css.ts:1140-1151).

---

2. Hallazgos por regla

R1 — Scaling · ✅ cumplida en lo esencial · severidad de los huecos: BAJA

Todo el dimensionado pasa por tokens scaling-coupled, así que el grueso cumple. Excepciones reales (literales que no siguen --scaling):

Evidencia	Problema
carousel.css:128-142	--_carousel-indicator-size: 0.375rem … 0.75rem — literal rem por size, no token. Los puntos de paginación no siguen --scaling (sí el zoom de navegador, pero no el eje del tema).
base.ts:1030-1031 (meter/progress)	height-md: '6px', height-lg: '8px' — grosor de barra en px fijo (no escala). Menor: es grosor visual, discutible.
Hairlines 1px/2px (separadores, indicadores) — button.css:245, command.css:153, navigation-menu.css:288, etc.	Legítimo: un separador de 1px no debe escalar. No es violación.

R2 — Densidad · ✅ cumplida en lo esencial · severidad: BAJA

Padding/gap salen de --space-* y alturas de --control-height-* (ambos density-coupled). Confirmado en recipes (base.ts:341-352,481-525,841-842,1065-1076). Mismas excepciones que R1 (el rem de carousel tampoco lleva densidad; grosor de barra fijo). La tipografía no escala con densidad a propósito (correcto).

R3 — Herencia de size del padre · ❌ incumplida sistémica · severidad: ALTA

No existe herencia ambiental de size. Prácticamente todos los componentes hardcodean size = 'md' como default (grep: 90+ wrappers .svelte con size = 'md'). Un componente sin size no mira a su padre: fija md.

Las únicas propagaciones contenedor→parte (las excepciones que confirman la regla):

Mecanismo	Evidencia	Alcance
dialog/context.ts → Dialog.Close deriva el size del dialog (cap en su subset)	dialog/context.ts:21-31, dialog-close.svelte:49	solo Dialog→Close
list-surface-context.ts — paneles flotantes anidados igualan el size de la superficie raíz	lib/list-surface-context.ts:14-30	menús/popups anidados (SubContent, listbox combobox)
toggle-group/context.ts — propaga variant/size a los items	(contexto de toggle-group)	solo items de toggle-group

Casos que deberían heredar y NO lo hacen:

• Un <Select> / <Switch> / <Checkbox> junto a hermanos lg o dentro de un bloque sizeado: salen md.
• <Form size="lg"> no propaga el size a los <Field> / controles anidados por contexto ambiental — el recipe form solo sizea su propio gap + sus acciones (form.css:25-51,118-137), no inyecta un size a Fields arbitrarios.
• Dialog.* / Drawer.* solo propagan al Close; el resto de partes internas no.

Causa raíz: no hay un token/contexto --ui-size ambiental ni un SizeContext genérico que un control lea cuando su prop size es undefined. El default es un literal 'md', no inherit.

R4 — Escalado interno con el size propio · 🟡 parcial · severidad: MEDIA

Lo que SÍ escala (verificado en ~35 componentes): por cada [data-size='X'] el componente rebindea altura, padding, gap, font-size, icon-size y sus dimensiones específicas (track/thumb/indicator/control-size/swatch/preview/day-size…). Ejemplos confirmados: button.css:111-154, field.css:56-78, select.css:55-80,198-220, switch.css:35-61, slider.css:10-36, radio-group.css:96-114,212-230, tabs.css:23-42, tag-group.css:20-41, toolbar.css:30-55, pagination.css:15-34, accordion.css:42-150, calendar.css:28-47, card.css:95-129, checkbox.css:34-62, combobox.css:109-135,293-315, feed.css:45-68, editable.css:23-49, file-upload.css:17-31, avatar.css:50-73, banner.css:38-54, tooltip.css:46-56. → La tipografía interna y la geometría de sub-controles escalan correctamente.

Lo que NO escala con el size:

1. El radio — ausente de casi todas las cascadas [data-size] (ver R5). Solo toggle lo rebindea.
2. Decoraciones con literal — carousel puntos en rem (R1).

R5 — Radio / forma · ❌ incumplida · severidad: ALTA

5.a — El radio NO escala con el size. En casi todos los componentes el radio es un token fijo, idéntico en todas las tallas:

Componente	Radio	Evidencia
field (toda la familia de campos)	var(--field-control-radius) único	field.css:191
select	--select-trigger-radius / --select-content-radius fijos	select.css:39,189
tabs	--tabs-trigger/content/list/pills-*-radius fijos	tabs.css:72,115,166,174,198
pagination	--pagination-control-radius fijo	pagination.css:52
tag-group	--tag-group-item-radius fijo	tag-group.css:70
stepper, toolbar, combobox, tooltip, listbox, menús, calendars	var(--radius-*) fijo	grep border-radius: var(--radius-

Único componente que acopla radio↔size: toggle — --_toggle-radius: var(--toggle-radius-{size}) rebindeado por [data-size] (toggle.css:7,70,79,88,97). Es el patrón correcto según STATIC_SIZE.

5.b — Incoherencia de filosofía: 3 modelos de radio coexisten sin doctrina.

• size-coupled: toggle (radio sigue el size).
• prop rounded independiente: button y card declaran --{c}-radius-{sm..xl} pero los cablean a data-rounded (default md), no a data-size (button.css:27,216-220; card.css:40,133-134). → un <Button size="xl"> conserva esquinas md.
• token fijo único: todos los demás (sin rounded, sin acoplar a size).

El primitivo canónico que zanjaría esto — el campo radius por size de STATIC_SIZE y el token --size-{k}-radius (render-css.ts:1344) — está huérfano (0 consumidores) (THEMING.md:605). El contrato existe pero nadie lo usa.

5.c — Radios concéntricos: adopción casi nula. [data-shape-nest] / --shape-outer-radius solo aparece en 11 archivos (card-group, combobox, select, command, menubar + sus items). Las superficies anidadas más comunes — campo dentro de Form, card dentro de panel, contenido de Dialog/Drawer, calendar dentro de un picker, items de la mayoría de menús — no derivan su radio del padre. El concéntrico es opt-in por diseño (SHAPE_ENGINE_RFC.md:80), pero su penetración real es marginal.

---

3. Incoherencias estructurales transversales

1. Bundle --size-* huérfano + contradictorio. La foundation emite --size-md-font-size: 14px (appendSizeDeclarations), pero la regla viva es el 1:1 (md = 16px) re-declarado en cada recipe (THEMING.md:605-606). El sistema mantiene un contrato de tamaño que (a) nadie consume y (b) miente sobre los valores actuales. Es deuda que invita a drift.
2. Re-declaración del mapeo size→token en cada recipe. Como nadie consume --size-{k}-*, cada componente repite a mano height/px/gap/font/radius por size (decenas de tokens × 80 componentes). Un solo punto de verdad (consumir el bundle) eliminaría la duplicación — hoy el único guard contra drift es el test de "no literales px en font/icon" (THEMING.md:608-611), que no cubre padding/gap/radio.
3. Sin herencia ambiental de size (R3) ni de forma (R5.c): los dos ejes que el usuario espera "heredables por defecto" son justo los que el sistema trata como per-instancia con default literal.

---

4. Matriz por componente

Leyenda: ✅ cumple · 🟡 parcial · ❌ incumple · — no aplica (sin eje de size/densidad). R1=scaling · R2=densidad · R3=hereda size del padre · R4=escalado interno con size · R5=radio escala/concéntrico.

4.1 Controles e inputs (tienen size)

Componente	R1	R2	R3	R4	R5	Notas
toggle	✅	✅	❌ md	✅	✅	Referencia: radio acoplado a size.
button	✅	✅	❌ md	🟡	❌	radio por rounded, no size.
badge	✅	✅	❌ md	🟡	❌	radio fijo / rounded.
checkbox	✅	✅	❌ md	✅	❌	radio del box fijo.
radio-group	✅	✅	❌ md	✅	❌	indicador circular (radio N/A), pero item radio fijo.
switch	✅	✅	❌ md	✅	❌	track/thumb son pills (radio full, OK).
slider	✅	✅	❌ md	✅	❌	track/thumb pills (OK).
field (genérico)	✅	✅	❌ md	✅	❌	--field-control-radius único.
spin/number/css-field	✅	✅	❌ md	✅	❌	comparten superficie spin-field.
date/time/color-field	✅	✅	❌ md	✅	❌	segmentos + swatch escalan; radio fijo.
search/password-field	✅	✅	❌ md	✅	❌	radio fijo.
pin-input	✅	✅	❌ md	✅	❌	celdas: font escala (cell-font-size-*), radio fijo.
textarea	✅	✅	❌ md	✅	❌	radio fijo.
tags-input	✅	✅	❌ md	✅	❌	radio fijo.
editable	✅	✅	❌ md	✅	❌	radio fijo.
select	✅	✅	❌ md	✅	❌	trigger+content escalan; radios fijos.
combobox	✅	✅	❌ md	✅	❌	usa concéntrico en items (data-shape-nest).
rating-group	✅	✅	❌ md	✅	—	iconos (estrellas); radio N/A.
stepper	✅	✅	❌ md	✅	❌	indicador/trigger/content radio fijo.

4.2 Acciones compuestas (composición sobre Button/Toggle)

Componente	R1	R2	R3	R4	R5	Notas
toggle-group	✅	✅	🟡 ctx	✅	❌	hereda size/variant del grupo (contexto) — único buen caso de R3 en controles; items son Toggle → radio podría seguir el size pero se aplana en grupo.
button-group	✅	✅	❌ md	🟡	❌	radio en extremos via Button.
split-button	✅	✅	❌ md	🟡	❌	compone Button.
fab	✅	✅	❌ md	✅	❌	redondo (radio full, OK).
menu-dial / onion-menu	✅	✅	❌ md	✅	—	radial; radio full.

4.3 Overlays y superficies (size = densidad/anchura del panel)

Componente	R1	R2	R3	R4	R5	Notas
dialog	✅	✅	🟡 Close	✅	🟡	propaga size al Close (ctx). Radio panel fijo (en full lo cambia, dialog.css:177).
drawer	✅	✅	❌	✅	🟡	width/height/padding por size; radio fijo.
popover	✅	✅	❌ md	🟡	❌	radio --radius-md fijo.
tooltip	✅	✅	❌ md	✅	❌	py/px/font por size; radio fijo.
dropdown/context-menu	✅	✅	🟡 ctx	🟡	❌	list-surface ctx para anidados; usan data-shape-nest en items.
menubar / navigation-menu	✅	✅	🟡 ctx	🟡	❌	concéntrico parcial.
command	✅	✅	❌ md	✅	❌	input/item escalan; concéntrico en items.
listbox	✅	✅	🟡 ctx	🟡	❌	radio fijo.
tabs	✅	✅	❌ md	✅	❌	trigger/content/list/pills radio TODO fijo.
toolbar	✅	✅	❌ md	✅	❌	controles escalan; radios fijos.
banner / toast / announce	✅	✅	❌ md	✅	❌	radio fijo.

4.4 Pickers y calendarios

Componente	R1	R2	R3	R4	R5	Notas
calendar / range-calendar	✅	✅	❌ md	✅	❌	padding/control/day/font por size; celdas radio fijo.
month-grid / year-grid	✅	✅	❌ md	✅	❌	escalan font/celda.
date/time/date-range/time-range-picker	✅	✅	❌ md	✅	❌	reusan tokens de field+calendar por size.
color-picker	✅	✅	❌ md	✅	❌	trigger/content/swatch por size.
gradient-builder / gradient-picker	✅	✅	❌ md	🟡	❌	(nuevos, sin commitear) radio fijo.

4.5 Datos / navegación / feedback

Componente	R1	R2	R3	R4	R5	Notas
accordion	✅	✅	❌ md	✅	❌	trigger/content/indicator por size (incl. full); radio item fijo.
breadcrumb	✅	✅	❌ md	✅	—	solo gap+font (sin radio relevante).
pagination	✅	✅	❌ md	✅	❌	control radio fijo.
tag-group	✅	✅	❌ md	✅	❌	item radio fijo.
tabs	(ver 4.3)
table / tree-view / tree-grid / grid-list	✅	✅	❌ md	✅	❌	densidad de fila por size; radios de celda/chip fijos.
feed	✅	✅	❌ md	✅	—	padding/indent/font por size.
carousel	🟡	🟡	❌ md	🟡	—	indicadores en rem literal (carousel.css:128-142).
virtual-list / virtual-grid	✅	✅	❌ md	✅	—	densidad por size.
progress / meter	🟡	🟡	❌ md	✅	—	grosor de barra px fijo (base.ts:1030); radio full (OK).
spinner / skeleton	✅	✅	❌ md	✅	—	radio circular/sm.
avatar	✅	✅	❌ md	✅	🟡	tamaño+font por size; radio via data-radius, no size.
card	✅	✅	❌ md	✅	❌	título/desc/body+padding por size; radio por rounded.
card-group	✅	✅	❌ md	✅	🟡	usa data-shape-nest (concéntrico).
metrics / timeline	✅	✅	❌ md	✅	❌	radios fijos.
file-upload	✅	✅	❌ md	✅	❌	gap/padding/control/preview por size.
form	✅	✅	❌ md	🟡	—	sizea gap+acciones; no propaga size a Fields (R3).

4.6 Primitivas de layout / tipografía (sin eje size-densidad)

box · stack · flex · grid · wrap · group · float · aspect-ratio · auto-grid · container · section (layout) y text · heading · display · code · code-block · kbd · mark · highlight · link · separator (tipografía/inline):

• R1/R2: ✅ — escalan vía var(--space-*) (layout) y var(--font-size-*) / var(--style-*) (tipografía), todos scaling/densidad-coupled.
• R3/R4/R5: — — no exponen size discreto de control (excepto container default xl / section default lg, que son anchuras de layout, no densidad).
• Radio relevante solo en code-block/kbd/mark/link → --radius-sm/md fijo (aceptable: no tienen eje de size).

---

5. Recomendaciones priorizadas

P0 — Herencia ambiental de size (cierra R3)

Introducir un contexto/cascada de size ambiental que un control lea cuando su prop size es undefined, en lugar de hardcodear 'md'. Dos vías:

• Contexto Svelte genérico SizeContext (como list-surface-context.ts pero universal), set por contenedores sizeados (Form, Card, Toolbar, Dialog…) y leído por cada wrapper: size = props.size ?? ctx?.size ?? 'md'.
• O un token CSS heredable --ui-size + data-size que cascadee por DOM (cuando no haya portal de por medio). Aplicar primero a Form → Field/controles (el caso más esperado) reutilizando la norma cap-en-md ya documentada (THEMING.md:560-579).

P1 — Acoplar el radio al size (cierra R5.a / R4-radio)

Decidir una doctrina de radio y aplicarla:

• Opción canónica (recomendada): consumir el radius por size de STATIC_SIZE — añadir --_{c}-radius a cada cascada [data-size] como hace toggle. Resucita el contrato --size-{k}-radius hoy huérfano.
• Mantener rounded como override explícito sobre ese default por size (no como sustituto), unificando button/card con el resto.

P1 — Eliminar el bundle --size-* huérfano o forzar su consumo

O bien (a) los recipes consumen --size-{k}-* en vez de re-declarar el mapeo (un punto de verdad, mata el drift y la mentira del 14px), o bien (b) se poda el bundle y se documenta que el canon vivo es el 1:1 por recipe. Hoy coexisten ambos y se contradicen (THEMING.md:605).

P2 — Ampliar radios concéntricos (R5.c)

Extender [data-shape-nest] a las superficies anidadas obvias: contenido de Dialog/Drawer, Field dentro de Form, calendar dentro de los pickers, items de menús que aún no lo usan.

P3 — Tokenizar los literales residuales (R1/R2)

• carousel indicadores: 0.375rem…0.75rem → tokens (--icon-size-* o --space-*) para que sigan --scaling/densidad (carousel.css:128-142).
• Evaluar grosor de barra progress/meter (base.ts:1030) — si debe seguir el zoom, pasarlo a un token escalado.

P3 — Guard de coherencia ampliado

El test actual solo prohíbe literales px en font-size/icon-size (THEMING.md:608). Ampliarlo a padding/gap/radius de recipe y a una regla "si hay [data-size], debe rebindear el radio" cerraría R4/R5 a nivel de CI.

---

6. Resumen de severidad

Hallazgo	Regla	Severidad	Amplitud
Sin herencia ambiental de size (default literal md)	R3	ALTA	~todos los componentes
Radio desacoplado del size (solo toggle lo acopla)	R5.a / R4	ALTA	~todos los controles/superficies
3 filosofías de radio sin doctrina única	R5.b	ALTA (coherencia)	toggle vs button/card vs resto
Bundle --size-* huérfano y contradictorio	transversal	MEDIA	foundation + 80 recipes
Concéntrico casi sin adoptar	R5.c	MEDIA	superficies anidadas
Literales rem/px (carousel, barras)	R1/R2	BAJA	2–3 componentes

Conclusión: el sistema es fuerte en R1/R2 (la tokenización fuerza scaling+densidad casi gratis) y débil justo donde el usuario apunta: la herencia (R3 inexistente, R5.c marginal) y la coherencia del radio con el size (R5.a/R4, con una inconsistencia de fondo entre toggle, button/card y el resto). Las cuatro acciones P0–P1 resuelven el 80% del problema reutilizando mecanismos que el framework ya tiene a medio cablear (el contexto de size de dialog, el radius por size de STATIC_SIZE, el patrón toggle).