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 · TagsInput.Item (el chip) → emite data-shape="{family}" (la regla [data-shape] del motor hace el resto). Ortogonal a rounded (magnitud); default = arco.
• 💡 Universal hoy vía atributo: TODO componente que difunde {...rest} acepta data-shape="cut" directamente (verificado en inputs, tags, etc.) — la familia ya es usable en cualquier sitio sin prop. La prop typed es solo el azúcar ergonómico de los más comunes.
• ⏳ Pendiente — azúcar typed en más superficies si se piden: inputs (number-field/ textarea/search-field/select), 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.
• ✅ Demos (2026-06-05): control shape en vivo en las demos de badge · button · card · tags-input (chips + code snippet + fila de patrones en badge). Ya es descubrible, no solo documentado.
• 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.