fix(demos): forma — scoop chips render clean (flat fill) + pendiente.md

The scoop family chip cast its box-shadow INTO the concave notches and the 1px
border seamed at the concave corners (native corner-shape, not clip-path) — looked
broken. Flat-filled chips render every family cleanly and are the right home for
cut/scoop (chips/badges), matching the per-component idea below.

Add pendiente.md: per-component shape family (chips/badges differentiator), general
shape adoption, corner-shape support (canon = degrade to arc, no polyfill), depth
scrim cue.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

pendiente.md

@@ -0,0 +1,41 @@
+# 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.

web/routes/temas/forma/+page.svelte

@@ -400,7 +400,10 @@
 	/* 3 · Familias */
 	.fam-row { display: flex; flex-wrap: wrap; gap: clamp(1rem, 4vw, 2.5rem); justify-content: center; }
 	.fam { margin: 0; display: flex; flex-direction: column; gap: 0.9rem; align-items: center; }
-	.fam-chip { display: grid; place-items: center; min-inline-size: 6.5rem; padding: 1.1rem 1.5rem; border-radius: 18px; background: linear-gradient(145deg, var(--color-surface-raised), var(--color-surface-overlay)); border: 1px solid var(--rule); box-shadow: var(--depth-raised-shadow); font-family: var(--font-family-mono); font-size: var(--font-size-sm); color: var(--color-content-primary); }
+	/* filled chips (no border / drop-shadow): a concave `scoop` casts shadow INTO its notches and
+	   a 1px border seams at the concave corners — both read as broken. Flat fills render every
+	   family cleanly and are the right home for cut/scoop anyway (chips/badges). */
+	.fam-chip { display: grid; place-items: center; min-inline-size: 6.5rem; padding: 0.9rem 1.6rem; border-radius: 16px; background: color-mix(in oklab, var(--color-primary-solid) 26%, var(--color-surface-overlay)); font-family: var(--font-family-mono); font-size: var(--font-size-sm); color: var(--color-content-primary); }
 	.fam figcaption { font-family: var(--font-family-mono); font-size: var(--font-size-xs); color: var(--color-content-muted); }
 
 	/* 4 · Ocurre */