svelte-kit-vice/pendiente.md

Pendientes

Forma (shape) — asignar la familia de borde por componente

Que cada componente reciba la familia de forma (rounded · continuous · cut · scoop) como prop, además del default del tema. Diferenciador fuerte en chips y badges.

• ✅ Hecho (2026-06-05): canon SHAPE_FAMILIES + tipo ShapeFamily en lib/types; prop shape en Badge · Card · Button → emite data-shape="{family}" (la regla [data-shape] del motor hace el resto). Ortogonal a rounded (magnitud); default = arco.
• ⏳ Pendiente — extender la prop a más superficies: inputs (text-field/number-field/ textarea/search-field), tags-input (los tags = chips, caso ideal de cut/scoop), contenidos flotantes (popover/dropdown/select content). Mismo patrón de 3 ediciones (import ShapeFamily + prop + data-shape).
• No aplicar familias a círculos / píldoras (avatares): las deformaría (un avatar continuous se vuelve squircle, un cut octágono). El default de esos componentes debe quedarse en rounded.
• Demo en componentes reales: falta un control shape en las demos de badge/button/card (hoy la prop existe y está verificada por probe, pero no se enseña en su demo).
• scoop / cóncavo: en Chromium actual, corner-shape: scoop con border + box-shadow proyecta la sombra DENTRO de los entrantes y el borde de 1px hace costura en las esquinas cóncavas → se ve sucio. Para chips/badges scoop (y cut), preferir relleno plano sin borde/sombra fuerte, o gestionar la sombra en la recipe (p. ej. filter: drop-shadow() en lugar de box-shadow, evaluando coste). Verificado en /temas/forma §Familias.

Forma — adopción general por componentes

Que las superficies rectangulares reales (cards, dialogs, inputs, popovers, menús…) opten a data-shape="continuous" desde sus recipes — como hicimos con el halo de depth. Cuidando de no squircle-izar avatares / píldoras (círculos perfectos). Es una pasada de barrido aparte.

Forma — soporte de corner-shape (decisión de canon)

La continuidad (squircle), cut y scoop dependen de corner-shape (Chromium 2025+). Donde no hay soporte degrada al arco de border-radius (la magnitud siempre funciona) — decisión de canon: progressive enhancement, NO polyfill. Un Houdini Paint Worklet no existe en Firefox y las máscaras SVG por elemento recortan la sombra (mismo problema que clip-path). Revisar el soporte de Safari/Firefox periódicamente y subir el listón cuando lleguen.

Depth — cue scrim

--depth-{plane}-scrim existe como token pero sin regla cableada; el backdrop dim de los modales lo gestiona hoy cada componente. Cablear una regla [data-depth][data-scrim] si emerge un consumidor que lo necesite fuera de dialog/drawer.