From 6d56188fde8d8b864a037f5c1988261008dcf4f5 Mon Sep 17 00:00:00 2001
From: dev <info@activething.com>
Date: Fri, 5 Jun 2026 22:19:40 +0200
Subject: [PATCH] feat(eidos): shape `shape` prop on Badge / Card / Button
 (per-component family)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Makes the shape families usable per-instance, not just in the demo. New canonical
SHAPE_FAMILIES + ShapeFamily in lib/types (canon, like the variant archetypes).
Badge / Card / Button gain a typed `shape` prop (rounded - continuous - cut - scoop)
that emits `data-shape` -> the foundation [data-shape] corner-shape rule. Orthogonal
to `rounded` (radius magnitude); default = arc (no attr); degrades to arc where
corner-shape is unsupported.

A differentiator for chips/badges (<Badge shape="cut">) and a premium touch for
buttons (<Button shape="continuous"> = squircle). For cut/scoop prefer filled
variants (concave/angular corners seam with borders) — documented per prop + pendiente.md.

Verified: check 0 errors; eidos 190/193 (3 pre-existing `words` failures, unrelated).
Browser: real Badge data-shape=cut -> bevel, real Button data-shape=continuous ->
squircle, radius magnitude preserved.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 pendiente.md                                  | 21 +++++++++++--------
 src/uix/eidos/components/badge/badge.svelte   |  2 ++
 src/uix/eidos/components/badge/types.ts       | 13 ++++++++++--
 src/uix/eidos/components/button/button.svelte |  2 ++
 src/uix/eidos/components/button/types.ts      | 10 +++++++--
 src/uix/eidos/components/card/card.svelte     |  2 ++
 src/uix/eidos/components/card/types.ts        | 11 +++++++++-
 src/uix/eidos/lib/types.ts                    | 11 ++++++++++
 8 files changed, 58 insertions(+), 14 deletions(-)

diff --git a/pendiente.md b/pendiente.md
index 4b7fed66c..d19d7902d 100644
--- a/pendiente.md
+++ b/pendiente.md
@@ -2,18 +2,21 @@
 
 ## 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.)
+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
diff --git a/src/uix/eidos/components/badge/badge.svelte b/src/uix/eidos/components/badge/badge.svelte
index dfc4783a6..8df4518ae 100644
--- a/src/uix/eidos/components/badge/badge.svelte
+++ b/src/uix/eidos/components/badge/badge.svelte
@@ -21,6 +21,7 @@
 		size = 'md',
 		color = 'primary',
 		rounded = 'full',
+		shape,
 		dot = false,
 		removable = false,
 		onRemove,
@@ -45,6 +46,7 @@
 	data-size={resolvedSize}
 	data-color={color}
 	data-rounded={resolvedRounded}
+	data-shape={shape}
 	data-dot={dot ? '' : undefined}
 	data-removable={removable ? '' : undefined}
 	{...rest}
diff --git a/src/uix/eidos/components/badge/types.ts b/src/uix/eidos/components/badge/types.ts
index aeb29c708..25dfd9a85 100644
--- a/src/uix/eidos/components/badge/types.ts
+++ b/src/uix/eidos/components/badge/types.ts
@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import type { ChipVariant, ColorRole, ResponsiveProp, Size } from '$uix/eidos/lib/types';
+import type { ChipVariant, ColorRole, ResponsiveProp, ShapeFamily, Size } from '$uix/eidos/lib/types';
 import type { BoxProps } from '../box/types';
 
 /**
@@ -43,8 +43,17 @@ export type BadgeProps = Omit<BoxProps, 'display'> & {
 	size?: ResponsiveProp<BadgeSize>;
 	/** Accent palette. @default 'primary' */
 	color?: BadgeColor;
-	/** Corner radius. @default 'full' (pill) */
+	/** Corner radius (magnitude). @default 'full' (pill) */
 	rounded?: ResponsiveProp<BadgeRounded>;
+	/**
+	 * Corner shape family — `rounded` (arc, default) · `continuous` (squircle) · `cut` (bevel) ·
+	 * `scoop` (concave). Orthogonal to `rounded` (which sets the radius magnitude); a strong
+	 * differentiator for badges/chips. Degrades to the arc where `corner-shape` is unsupported.
+	 * For `cut`/`scoop`, prefer a filled variant (`soft`/`solid`) — concave corners + a border or
+	 * drop-shadow seam at the corner.
+	 * @default 'rounded'
+	 */
+	shape?: ShapeFamily;
 	/**
 	 * Show a small coloured dot before the label — status-pill style.
 	 * Independent from `icon` (you can render both, though that's
diff --git a/src/uix/eidos/components/button/button.svelte b/src/uix/eidos/components/button/button.svelte
index 44855c6dc..99953f93d 100644
--- a/src/uix/eidos/components/button/button.svelte
+++ b/src/uix/eidos/components/button/button.svelte
@@ -18,6 +18,7 @@
 		variant = 'solid',
 		size = 'md',
 		rounded,
+		shape,
 		block = false,
 		iconOnly = false,
 		loading = false,
@@ -43,6 +44,7 @@
 	data-variant={variant}
 	data-size={resolvedSize}
 	data-rounded={resolvedRounded ?? undefined}
+	data-shape={shape}
 	data-block={block ? '' : undefined}
 	data-icon-only={iconOnly ? '' : undefined}
 	data-has-icon={icon || (loading && spinnerPlacement === 'start') ? '' : undefined}
diff --git a/src/uix/eidos/components/button/types.ts b/src/uix/eidos/components/button/types.ts
index 0f22d396a..85c87df2b 100644
--- a/src/uix/eidos/components/button/types.ts
+++ b/src/uix/eidos/components/button/types.ts
@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { ProviderProps, SpinnerProps } from '$soma/components/button';
-import type { ResponsiveProp, Size } from '$uix/eidos/lib/types';
+import type { ResponsiveProp, ShapeFamily, Size } from '$uix/eidos/lib/types';
 
 /**
  * Button visual variant. The 6-variant set ported from air covers the
@@ -40,8 +40,14 @@ export type ButtonProps = ProviderProps & {
 	variant?: ButtonVariant;
 	/** Sizing scale. @default 'md' */
 	size?: ResponsiveProp<ButtonSize>;
-	/** Corner radius. @default inherits from size */
+	/** Corner radius (magnitude). @default inherits from size */
 	rounded?: ResponsiveProp<ButtonRounded>;
+	/**
+	 * Corner shape family — `rounded` (arc) · `continuous` (squircle) · `cut` (bevel) · `scoop`
+	 * (concave). Orthogonal to `rounded` (radius magnitude). A squircle button reads notably more
+	 * premium. Degrades to the arc where `corner-shape` is unsupported. @default 'rounded'
+	 */
+	shape?: ShapeFamily;
 	/** Stretch to fill the container's inline-size. @default false */
 	block?: boolean;
 	/**
diff --git a/src/uix/eidos/components/card/card.svelte b/src/uix/eidos/components/card/card.svelte
index 0e906c95e..6a019a46b 100644
--- a/src/uix/eidos/components/card/card.svelte
+++ b/src/uix/eidos/components/card/card.svelte
@@ -25,6 +25,7 @@
 		size = 'md',
 		color = 'neutral',
 		rounded = 'md',
+		shape,
 		interactive = false,
 		selected = false,
 		disabled = false,
@@ -74,6 +75,7 @@
 	data-color={resolvedColor}
 	data-color-custom={customColor ? '' : undefined}
 	data-rounded={resolvedRounded}
+	data-shape={shape}
 	data-interactive={interactive ? '' : undefined}
 	data-selected={selected ? '' : undefined}
 	data-disabled={disabled ? '' : undefined}
diff --git a/src/uix/eidos/components/card/types.ts b/src/uix/eidos/components/card/types.ts
index 4b7e9a727..2de0ad40e 100644
--- a/src/uix/eidos/components/card/types.ts
+++ b/src/uix/eidos/components/card/types.ts
@@ -4,6 +4,7 @@ import type {
 	ChipVariant,
 	ColorRole,
 	ResponsiveProp,
+	ShapeFamily,
 	Size
 } from '$uix/eidos/lib/types';
 import type { BoxProps } from '../box/types';
@@ -70,8 +71,16 @@ export type CardProps = Omit<BoxProps, 'display'> & {
 	 * string (hex / rgb / oklch / named). @default 'neutral'
 	 */
 	color?: CardColor;
-	/** Corner radius. @default 'md' */
+	/** Corner radius (magnitude). @default 'md' */
 	rounded?: ResponsiveProp<CardRounded>;
+	/**
+	 * Corner shape family — `rounded` (arc) · `continuous` (squircle) · `cut` (bevel) · `scoop`
+	 * (concave). Orthogonal to `rounded` (radius magnitude). Degrades to the arc where
+	 * `corner-shape` is unsupported. For `cut`/`scoop` prefer the `soft`/`solid` variant — an
+	 * `outline` border seams at concave/angular corners in current engines.
+	 * @default 'rounded'
+	 */
+	shape?: ShapeFamily;
 	/**
 	 * Make the card clickable. Promotes the Provider to `<button>` and
 	 * enables hover / press / focus visual feedback. Fires
diff --git a/src/uix/eidos/lib/types.ts b/src/uix/eidos/lib/types.ts
index 1a567851b..63ff834ac 100644
--- a/src/uix/eidos/lib/types.ts
+++ b/src/uix/eidos/lib/types.ts
@@ -107,6 +107,17 @@ export type ChipVariant = (typeof EIDOS_VARIANTS.chip)[number];
 export type MarkerVariant = (typeof EIDOS_VARIANTS.marker)[number];
 export type TabsVariant = (typeof EIDOS_VARIANTS.tabs)[number];
 
+/**
+ * Canonical Eidos shape families — the `corner-shape` archetypes a component opts into via the
+ * `shape` prop (→ `data-shape='{family}'`). Single source of truth; the foundation emits one
+ * `[data-shape='{family}']` rule per entry (SHAPE_ENGINE_RFC). `rounded` = the circular arc
+ * (default); `continuous` = the squircle (superellipse); `cut` = bevel; `scoop` = concave.
+ * Orthogonal to the radius MAGNITUDE (`--radius-*` / a component's `rounded` prop). Canon of the
+ * eidos, like the variant archetypes — a theme retunes the values, not the set.
+ */
+export const SHAPE_FAMILIES = ['rounded', 'continuous', 'cut', 'scoop'] as const;
+export type ShapeFamily = (typeof SHAPE_FAMILIES)[number];
+
 /**
  * Shared Eidos color role vocabulary. `primary` and `secondary` are
  * hierarchy roles; the remaining values come from the UIX intent canon.