From 27c8214d984b44686d3588d6ed33ffa411904c77 Mon Sep 17 00:00:00 2001 From: dev Date: Fri, 5 Jun 2026 22:40:49 +0200 Subject: [PATCH] feat(demos): expose the `shape` control in Badge/Button/Card/TagsInput demos MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The shape prop was usable but invisible — add a live `shape` chip control (rounded/continuous/cut/scoop) to each demo, wired to the live preview + code snippet, plus a "shape families" patterns row in Badge and a tag-shape control on TagsInput items. The family system is now discoverable, not just documented. Verified live (Chrome 146): badge cut -> bevel, button continuous -> squircle, both flow from the control to the rendered component. Co-Authored-By: Claude Opus 4.8 (1M context) --- pendiente.md | 5 ++-- web/routes/uix/components/badge/+page.svelte | 23 +++++++++++++++++++ web/routes/uix/components/button/+page.svelte | 12 ++++++++++ web/routes/uix/components/card/+page.svelte | 14 +++++++++++ .../uix/components/tags-input/+page.svelte | 14 ++++++++++- 5 files changed, 65 insertions(+), 3 deletions(-) diff --git a/pendiente.md b/pendiente.md index e47adcb17..4ac0db31b 100644 --- a/pendiente.md +++ b/pendiente.md @@ -18,8 +18,9 @@ como prop, además del default del tema. Diferenciador fuerte en **chips y badge - **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). +- ✅ **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 diff --git a/web/routes/uix/components/badge/+page.svelte b/web/routes/uix/components/badge/+page.svelte index 621fb518c..df39b81d9 100644 --- a/web/routes/uix/components/badge/+page.svelte +++ b/web/routes/uix/components/badge/+page.svelte @@ -6,6 +6,7 @@ type BadgeVariant, type BadgeRounded } from '$uix/eidos/components/badge'; + import { SHAPE_FAMILIES, type ShapeFamily } from '$uix/eidos/lib/types'; import { Box } from '$uix/eidos/components/box'; import { Stack } from '$uix/eidos/components/stack'; import { compileMorfo } from '$uix/morfo'; @@ -23,6 +24,7 @@ let size = $state('md'); let color = $state('primary'); let rounded = $state('full'); + let shape = $state('rounded'); let labelText = $state('New'); let withDot = $state(false); let withIcon = $state(false); @@ -84,6 +86,7 @@ size !== 'md' && ` size="${size}"`, color !== 'primary' && ` color="${color}"`, rounded !== 'full' && ` rounded="${rounded}"`, + shape !== 'rounded' && ` shape="${shape}"`, withDot && ' dot', removable && ' removable', removable && ' onRemove={() => removeTag(id)}', @@ -166,6 +169,7 @@ {size} {color} {rounded} + {shape} dot={withDot} {removable} onRemove={handleRemove} @@ -259,6 +263,16 @@ {/each} + + + +