svelte-kit-vice/pendiente.md

Pendientes

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

Permitir que cada componente reciba la familia de forma (rounded · continuous · cut · scoop) como prop / data-attr, además del default del tema. Diferenciador fuerte sobre todo en chips y badges — p. ej. un badge cut o scoop para una categoría frente al chip continuous por defecto, sin inventar variantes nuevas.

• API propuesta: prop shape en el wrapper eidos (<Badge shape="cut">, <Chip shape="scoop">) → emite data-shape="{family}" en el elemento. Hereda del tema si no se especifica. (Mecánica ya existente: la regla [data-shape='{family}'] está en el motor; solo falta exponer la prop en las recipes.)
• 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.
• 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.