From 4045e308b1270514fb16cad59b6a198296083dd0 Mon Sep 17 00:00:00 2001
From: dev <info@activething.com>
Date: Fri, 5 Jun 2026 22:26:19 +0200
Subject: [PATCH] feat(eidos): shape prop on TagsInput.Item (the chip) +
 document universal data-shape
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`<TagsInput.Item shape="cut">` — typed `shape` (rounded/continuous/cut/scoop) on the
tag chip, the case the family system was made for. Emits `data-shape` -> the
foundation rule.

Also clarified (pendiente.md): every component that spreads `{...rest}` already
accepts `data-shape="…"` directly (verified on inputs + tags), so the families are
usable everywhere today; the typed `shape` prop is ergonomic sugar on the common
surfaces (Badge / Card / Button / TagsInput.Item).

Verified: check 0 errors. Browser: real tag chip data-shape=cut -> bevel.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 pendiente.md                                      | 15 +++++++++------
 .../components/tags-input/tags-input-item.svelte  |  4 ++--
 src/uix/eidos/components/tags-input/types.ts      | 11 +++++++++--
 3 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/pendiente.md b/pendiente.md
index d19d7902d..e47adcb17 100644
--- a/pendiente.md
+++ b/pendiente.md
@@ -6,12 +6,15 @@ Que cada componente reciba la **familia de forma** (`rounded` · `continuous` ·
 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`).
+  `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`.
diff --git a/src/uix/eidos/components/tags-input/tags-input-item.svelte b/src/uix/eidos/components/tags-input/tags-input-item.svelte
index e4ed40dc4..bb40f1192 100644
--- a/src/uix/eidos/components/tags-input/tags-input-item.svelte
+++ b/src/uix/eidos/components/tags-input/tags-input-item.svelte
@@ -2,9 +2,9 @@
 	import * as TagsInput from '$soma/components/tags-input';
 	import type { TagsInputItemProps } from './types';
 
-	let { children, ...rest }: TagsInputItemProps = $props();
+	let { shape, children, ...rest }: TagsInputItemProps = $props();
 </script>
 
-<TagsInput.Item {...rest}>
+<TagsInput.Item data-shape={shape} {...rest}>
 	{@render children?.()}
 </TagsInput.Item>
diff --git a/src/uix/eidos/components/tags-input/types.ts b/src/uix/eidos/components/tags-input/types.ts
index 5b0f0fbcc..a8e3a79c8 100644
--- a/src/uix/eidos/components/tags-input/types.ts
+++ b/src/uix/eidos/components/tags-input/types.ts
@@ -7,7 +7,7 @@ import type {
 	ItemTextProps,
 	ProviderProps
 } from '$soma/components/tags-input';
-import type { ColorRole, ControlVariant, ResponsiveProp, Size } from '$uix/eidos/lib/types';
+import type { ColorRole, ControlVariant, ResponsiveProp, ShapeFamily, Size } from '$uix/eidos/lib/types';
 
 export type TagsInputSize = Extract<Size, 'xs' | 'sm' | 'md' | 'lg' | 'xl'>;
 export type TagsInputVariant = ControlVariant;
@@ -24,7 +24,14 @@ export type TagsInputProps = ProviderProps & {
 
 export type TagsInputControlProps = ControlProps;
 export type TagsInputInputProps = InputProps;
-export type TagsInputItemProps = ItemProps;
+export type TagsInputItemProps = ItemProps & {
+	/**
+	 * Corner shape family for the tag chip — `rounded` (arc) · `continuous` (squircle) · `cut`
+	 * (bevel) · `scoop` (concave). Emits `data-shape`; degrades to the arc where `corner-shape`
+	 * is unsupported. A `cut`/`scoop` tag is a strong category differentiator. @default 'rounded'
+	 */
+	shape?: ShapeFamily;
+};
 export type TagsInputItemTextProps = ItemTextProps;
 export type TagsInputItemDeleteTriggerProps = ItemDeleteTriggerProps;
 export type TagsInputClearTriggerProps = ClearTriggerProps;