|
|
|
|
# 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.
|
