@ajuarezso/sui-design-system 0.20.0 → 0.21.0

package/docs/sui-checkbox-card/README.md

@@ -0,0 +1,150 @@
+---
+name: sui-checkbox-card
+selector: sui-checkbox-card
+resumen: Opción con tarjeta (ícono o foto, título, descripción y la casilla) para elegir VARIAS que se guardan después
+alternativas: [sui-checkbox-label (la misma casilla sin tarjeta, en un formulario denso), sui-switch-card (un ajuste que se aplica al toque, sin «Guardar»), sui-radio-card (se elige solo una), sui-tag-input (valores que la persona escribe)]
+---
+
+# sui-checkbox-card
+
+Story: [Molecules/Card/Checkbox Card](https://sui-design-system.web.app/?path=/docs/molecules-card-checkbox-card--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** para elegir varias opciones que se suman y que se confirman con «Guardar»: las formas
+de entrega del local («Recojo en tienda» + «Delivery»), los métodos de pago que acepta, los días
+de atención.
+
+**No lo uses** para:
+
+- Un ajuste que tiene efecto al toque, sin botón de guardar: `sui-switch-card`.
+- Elegir una sola: `sui-radio-card`.
+- Una lista larga de casillas en un formulario: `sui-checkbox-label` (sin tarjeta, ocupa menos).
+- Aceptar términos o confirmar algo: `sui-checkbox-label`.
+
+Regla corta: **varias que se guardan después → checkbox-card · se aplica al toque → switch-card ·
+una → radio-card.**
+
+## Qué variante usar
+
+> **La guía del DS no tiene página de la checkbox card.** De la guía sale solo lo del checkbox que
+> lleva adentro: **«para selecciones simples y múltiples»**. La frontera con el switch («se
+> confirma después con Guardar → checkbox») ya es canon desde el README de `sui-switch-label`.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-card`): **3
+> checkbox-cards en 2 archivos**, los 3 `left-icon` con ícono y descripción (formas de entrega en
+> mi-negocio y en locales administrados). 2 con `bp.controlSize()`, 1 sin `size`. Hay **5
+> `sui-switch-card` que deberían ser este componente** (los métodos de pago de mi-negocio).
+
+### `type` (el leading)
+
+| type | cuándo | fuente |
+|---|---|---|
+| `left-icon` (`icon`, `emoji` o `iconSrc`) | Lo normal: un ícono que dice de qué va la opción. | propuesta (los 3 de hoy) |
+| `basic` | Ver «No usar». | propuesta |
+| `avatar` (`imageUrl`) | Ver «No usar». | propuesta |
+| `card-provider`, `brand`, `company` | Ver «No usar». El logo lo proyectas tú con `slot="leading"`. | propuesta |
+
+### Las piezas
+
+| prop | cuándo | fuente |
+|---|---|---|
+| `label` | Siempre. El nombre de la opción: «Delivery». | propuesta |
+| `description` | Lo que significa elegirla: «Llevas los pedidos a la dirección del cliente». | propuesta (los 3 de hoy) |
+| `sublabel` | Precisión corta entre paréntesis. | propuesta |
+| `badge` | Marca una opción frente a las otras («Nuevo»). Con string sale azul `light`. | propuesta |
+| `indeterminate` | Una casilla que resume a otras («Todos los días» con algunos marcados). | propuesta |
+| `disabled` | La opción no aplica hoy; di por qué en la `description`. | propuesta |
+| `checked` | `[checked]` + `(checkedChange)`, o `[(checked)]`, o `formControlName`. | propuesta |
+
+### `size` (la casilla de adentro)
+
+| size | cuándo | fuente |
+|---|---|---|
+| `xlarge` | Mobile, vía `bp.controlSize()`. | canon (aprobado por el dueño, 28-09-2026: «componentes grandes») |
+| `large` | Desktop, vía `bp.controlSize()`. | canon (aprobado por el dueño, 28-09-2026) |
+| `medium` (default), `small` | No usar en pantallas nuevas. | canon (aprobado por el dueño, 28-09-2026) |
+
+**Usos de hoy que rompen las reglas:**
+
+- **1 sin `size`**: `pages/super-admin/master-administrados/master-administrados.html:172`.
+- **5 `sui-switch-card` que se guardan con «Guardar cambios»** y por lo tanto van aquí: los métodos
+  de pago de `pages/mi-negocio/mi-negocio.html:1181`, `:1190`, `:1199`, `:1208`, `:1217`
+  («Puedes seleccionar varias», dice la misma pantalla).
+
+## Tamaño en mobile y en web
+
+La card entera es el área táctil (≥ 72 con descripción): llega al piso de 44 sola. El `size`
+cambia solo la casilla.
+
+| uso | mobile | web |
+|---|---|---|
+| toda checkbox-card | `xlarge` | `large` |
+
+```html
+<sui-checkbox-card [size]="bp.controlSize()" … />   <!-- isMobile() ? 'xlarge' : 'large' -->
+```
+
+## «No usar»: por qué no hoy y cuándo sí
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| `type="basic"` (0 usos) | las opciones de hoy llevan ícono | opciones de texto que se suman (los días de atención, los tamaños de un producto) |
+| `type="avatar"` (0 usos) | no se elige gente de a varios | elegir a varios repartidores para mandarles un aviso |
+| `type="brand"` / `"company"` / `"card-provider"` (0 usos) | no hay integraciones ni tarjetas | prender varias integraciones a la vez (logo proyectado), varias sucursales de un local |
+| `size="medium"` / `"small"` | la casilla se pierde en el teléfono | una tabla densa solo de desktop |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `type` | `'basic' \| 'left-icon' \| 'avatar' \| 'card-provider' \| 'brand' \| 'company'` | `'basic'` |
+| `size` | `'small' \| 'medium' \| 'large' \| 'xlarge'` | `'medium'` |
+| `label` | `string` | `''` |
+| `sublabel` | `string \| null` | `null` |
+| `description` | `string \| null` | `null` |
+| `icon` | `string \| null` | `null` |
+| `emoji` | `SuiEmojiName \| null` | `null` |
+| `iconSrc` | `string \| null` | `null` |
+| `imageUrl` | `string \| null` | `null` |
+| `badge` | `SuiBadgeConfig \| string \| null` | `null` |
+| `indeterminate` | `boolean` | `false` |
+| `disabled` | `boolean` | `false` |
+| `checked` · model, `[(checked)]` | `boolean` | `false` |
+
+| output | payload |
+|---|---|
+| `checkedChange2` | `boolean` |
+<!-- api:fin -->
+
+Slot: `[slot=leading]` (solo para `card-provider`, `brand` y `company`). Implementa
+`ControlValueAccessor` (valor `boolean`).
+
+## Trampas
+
+- **Hay dos outputs con el mismo dato**: `checkedChange` (lo crea el `model`) y `checkedChange2`
+  (el explícito, nombre de compatibilidad). Usa `(checkedChange)` o `[(checked)]`, como la app.
+- **Es no controlada**: el toque cambia el estado adentro aunque no actualices nada afuera (al
+  revés que `sui-switch-card`). Si tu señal no se entera, el visual y tu estado se separan.
+- **El leading de `card-provider`, `brand` y `company` se proyecta** con `slot="leading"`
+  (atributo `slot=`, no `sui-…-leading` como en la switch-card). Sin proyección queda el hueco.
+- Con `avatar`, si `imageUrl` falla salen las iniciales del `label`.
+- El leading de 40 × 40 ya trae `box-sizing: border-box` (el proyecto no tiene reset global): si
+  proyectas una imagen con padding o borde propios, ponle `box-sizing` tú.
+- `badge` con string sale **azul `light` `small`**.
+
+## Ejemplo
+
+```html
+<sui-checkbox-card
+  [size]="bp.controlSize()"
+  type="left-icon"
+  icon="store-2-line"
+  label="Recojo en tienda"
+  description="El cliente recoge su pedido en tu local"
+  [checked]="ofreceRecojo()"
+  (checkedChange)="ofreceRecojo.set($event)" />
+```

package/docs/sui-compact-select/README.md

@@ -0,0 +1,127 @@
+---
+name: sui-compact-select
+selector: sui-compact-select
+resumen: Select chico que se ajusta al ancho de su texto, para filtros sueltos y paginación
+alternativas: [sui-select (campo de formulario a todo el ancho, con label), sui-inline-select (dentro de una frase, sin caja), sui-compact-select-for-input (dentro de un sui-input), sui-segmented-control (2 a 4 modos a la vista)]
+---
+
+# sui-compact-select
+
+Story: [Molecules/Select/Compact Select](https://sui-design-system.web.app/?path=/docs/molecules-select-compact-select--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** para un filtro suelto en una barra de herramientas del panel, donde el campo debe medir
+lo que mide su texto («Todos los roles ▾», «20 por página ▾»), sin label encima.
+
+**No lo uses** para:
+
+- Un campo de formulario con label, hint y error: `sui-select` (este no tiene label ni hint).
+- Algo dentro de un `sui-input` (moneda, país del teléfono): `sui-compact-select-for-input`.
+- Un valor dentro de una frase: `sui-inline-select`.
+- 2 a 4 modos que se ven todos (Hoy · Semana · Mes): `sui-segmented-control`.
+
+Regla corta: **filtro suelto en una barra, ancho al texto → compact · campo con label → select.**
+
+## Qué variante usar
+
+> **En la guía del DS es la variante `compact` del select**, con tres ejemplos: paginación
+> («filas por página»), país y tamaños. No dice cuándo usarla. Lo de abajo es **propuesta, falta
+> aprobación**, salvo lo marcado.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos**. Los filtros de las barras del
+> panel usan `sui-select` sin label (6: `pages/customers/customers.html:38`,
+> `pages/settings/team/team.html:66`, `pages/drivers/drivers.html:72`…), que se estira a todo el ancho.
+
+| prop | cuándo | fuente |
+|---|---|---|
+| `type="basic"` (default) | Texto + flecha: «Todos los roles», «20 por página». | según la guía del DS (ejemplo de paginación) |
+| `type="icon"` | Solo el ícono de la opción elegida, sin texto: un selector de vista en una barra muy apretada. Hoy sin caso. | según la guía del DS |
+| `type="country"` + `flag` | No usar hoy: todo es Perú. | según la guía del DS (ejemplo «Country») |
+| `items` | La lista: `{ value, label, sublabel?, icon?, flag?, disabled? }`. A diferencia de `sui-select`, cada opción **sí** puede llevar ícono o bandera. | API |
+| `selected` / `selectedChange` | La opción elegida (objeto entero). O `formControlName`, nunca los dos. | API |
+| `placeholder` | El filtro sin elegir: «Todos». Corto. | propuesta, falta aprobación |
+| `value` / `icon` | Lo que muestra el campo cuando no hay `items` (modo «solo campo», el menú lo arma la pantalla). | API |
+| `error` | No usar hoy: un filtro no tiene error. | — |
+| `disabled` | Mientras carga la lista. | según la guía del DS |
+| `clicked` | Solo si la pantalla arma su propio menú (sin `items`). | API |
+
+**Candidatos de hoy:** los 6 filtros de barra del panel en web (arriba). En mobile siguen como
+`sui-select` `large` a todo el ancho, porque este no pasa de 40 px.
+
+## Tamaño en mobile y en web
+
+Tiene los tres tamaños de la guía —`medium` (40), `small` (36), `xsmall` (32)— y **`large` (48)**,
+extensión SUI para mobile: mide lo mismo que un `sui-button` `large` de la misma barra. En `large`
+crece el aire (padding 14 · 12, radio 12); el texto y los íconos siguen en 14/20 y 20.
+
+Las opciones del menú siguen al `size` como en `sui-select`: 36 hasta `medium`, **44 en `large`**, y
+**44 en mobile (≤ 767 px) con cualquier tamaño**.
+
+| size | alto | opción del menú (web · mobile) | fuente |
+|---|---|---|---|
+| `large` | 48 | 44 · 44 | canon (aprobado por el dueño, 03-10-2026), extensión SUI |
+| `medium` (default) | 40 | 36 · 44 | según la guía del DS; 44 en mobile: canon (aprobado por el dueño, 03-10-2026) |
+| `small` | 36 | 36 · 44 | ídem |
+| `xsmall` | 32 | 36 · 44 | ídem |
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| filtro de una barra del panel | `large` (48), junto a botones `large` | `small` (36) | propuesta, falta aprobación |
+| paginación al pie de una tabla | no aplica | `xsmall` (32) | según la guía del DS (ejemplo de paginación); el tamaño es propuesta |
+
+```html
+<sui-compact-select [size]="bp.isMobile() ? 'large' : 'small'" placeholder="Todos los roles"
+                    [items]="roles" [(selected)]="rolElegido" />   <!-- bp = BreakpointsService -->
+```
+
+## «No usar»: por qué no hoy y cuándo sí
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| el componente entero (0 usos) | los filtros usan `sui-select` | filtros del panel en web, y «20 por página» si las tablas pasan a paginar |
+| `type="country"` | todo es Perú | si se abre otro país |
+| `type="icon"` | ninguna barra está tan apretada | un selector de vista (cuadrícula o lista) en la barra de productos |
+| `error` | un filtro no tiene error | — |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `type` | `'basic' \| 'icon' \| 'country'` | `'basic'` |
+| `size` | `'large' \| 'medium' \| 'small' \| 'xsmall'` | `'medium'` |
+| `value` | `string` | `''` |
+| `placeholder` | `string` | `''` |
+| `icon` | `string \| null` | `null` |
+| `flag` | `SuiFlagName \| null` | `null` |
+| `items` | `readonly SuiCompactSelectItem<T>[]` | `[]` |
+| `selected` · model, `[(selected)]` | `SuiCompactSelectItem<T> \| null` | `null` |
+| `error` | `boolean` | `false` |
+| `disabled` | `boolean` | `false` |
+
+| output | payload |
+|---|---|
+| `clicked` | `Event` |
+| `selectedChange` | `SuiCompactSelectItem<T>` |
+<!-- api:fin -->
+
+Implementa `ControlValueAccessor` (el valor es el `value` de la opción).
+
+## Trampas
+
+- **No mezclar `[(selected)]` con `formControlName`**: son dos fuentes de verdad y el formulario no
+  se entera de lo que escribe `selected`.
+- Sin `items` no abre nada: solo emite `(clicked)`.
+- `type="icon"` **no muestra texto**: solo el ícono de la opción elegida.
+- El menú mide al menos 200 px aunque el campo sea más angosto.
+- Las opciones miden 36 px en web hasta `medium`; 44 en `large` y en mobile (ver «Tamaño»).
+
+## Ejemplo
+
+```html
+<sui-compact-select size="small" placeholder="Todos los roles" [items]="roles"
+                    [(selected)]="rolElegido" />
+```

package/docs/sui-compact-select-for-input/README.md

@@ -0,0 +1,117 @@
+---
+name: sui-compact-select-for-input
+selector: sui-compact-select-for-input
+resumen: Selector chico que vive DENTRO de un sui-input, para elegir moneda o código de país sin salir del campo
+alternativas: [sui-select (el valor se elige aparte, con su propio label), sui-compact-select (filtro suelto con caja propia), sui-inline-select (dentro de una frase)]
+---
+
+# sui-compact-select-for-input
+
+Story: [Molecules/Select/Compact Select For Input](https://sui-design-system.web.app/?path=/docs/molecules-select-compact-select-for-input--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** cuando un dato del campo depende de una elección corta que va pegada a él: la moneda de
+un monto (`S/` o `$`) o el código de país de un teléfono. Se proyecta en el `[data-slot=start]`
+de un `sui-input` con `[leadingControl]="true"`, que dibuja el divisor.
+
+**No lo uses** para:
+
+- Un select con label propio: `sui-select`.
+- Suelto, fuera de un `sui-input`: no tiene borde ni foco propios. Para eso, `sui-compact-select`.
+- Un prefijo fijo (`S/` siempre): eso es `prefix="S/"` del `sui-input`, no un selector.
+
+Regla corta: **el campo cambia según una elección corta pegada a él → este · siempre igual → `prefix`.**
+
+## Qué variante usar
+
+> **En la guía del DS es la variante `compactForInput` del select**, con dos ejemplos: un monto
+> con su moneda («€») y los tamaños. Y la página del input lo usa en «With Select». No dice cuándo.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos**. Candidato: el gasto del super
+> admin pone «Monto» (`type="number"`) y «Moneda» (PEN/USD) como dos campos separados,
+> `pages/super-admin/master-gastos/master-gastos.html:193` y `:200`.
+
+| prop | cuándo | fuente |
+|---|---|---|
+| `items` | Las opciones: `{ value, label, sublabel?, flag?, disabled? }`. | API |
+| `selected` / `selectedChange` | La opción elegida. O `formControlName`, nunca los dos. | API |
+| `country` (default `true`) | Con bandera (teléfono). `false` para una moneda, que no lleva bandera. | según la guía del DS (ejemplo con moneda sin bandera) |
+| `flag` | Bandera a mostrar sin opción elegida. Hoy no aplica. | API |
+| `value` | Texto que se ve si no hay `selected` («S/»). | API |
+| `size` | El mismo tamaño que el `sui-input` que lo contiene, hasta `medium`. | según la guía del DS (ejemplo de tamaños) |
+| `disabled` | Cuando el campo entero está deshabilitado. | API |
+| `clicked` | Solo si la pantalla arma su propio menú. | API |
+
+## Tamaño en mobile y en web
+
+Tiene `medium` (40), `small` (36) y `xsmall` (32) de la guía, y **`large`** para el `sui-input`
+`large` (48) de mobile (extensión SUI). Va siempre con **el mismo `size` que el input que lo
+contiene**: el selector ocupa todo el alto interior del campo (46 · 38 · 34 · 30), así que lo que se
+toca (y su hover) cubre el campo de arriba a abajo. Sus opciones miden 44 en `large` y en mobile
+(≤ 767 px); 36 en el resto, como en `sui-select`.
+
+| size del input y del selector | campo | fuente |
+|---|---|---|
+| `large` | 48 | canon (aprobado por el dueño, 03-10-2026), extensión SUI |
+| `medium` (default) · `small` · `xsmall` | 40 · 36 · 32 | según la guía del DS |
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| moneda dentro del monto | `sui-input` `large` + este `large` | `sui-input` `medium` + este `medium` | propuesta, falta aprobación |
+
+Arreglo del 03-10-2026: antes el selector medía 40/36/32 y empujaba el campo a 42/38/34 (el padding
+de la guía no descontaba el borde del input). Ahora el campo mide exacto.
+
+## «No usar»: por qué no hoy y cuándo sí
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| el componente entero (0 usos) | todo es en soles y con +51 | la moneda de un gasto (`master-gastos.html:193`) o teléfonos de otro país |
+| `country` con bandera | solo hay teléfonos de Perú | repartidores o clientes con número extranjero |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `size` | `'large' \| 'medium' \| 'small' \| 'xsmall'` | `'medium'` |
+| `value` | `string` | `''` |
+| `country` | `boolean` | `true` |
+| `flag` | `SuiFlagName \| null` | `null` |
+| `items` | `readonly SuiCompactSelectForInputItem<T>[]` | `[]` |
+| `selected` · model, `[(selected)]` | `SuiCompactSelectForInputItem<T> \| null` | `null` |
+| `disabled` | `boolean` | `false` |
+
+| output | payload |
+|---|---|
+| `clicked` | `Event` |
+| `selectedChange` | `SuiCompactSelectForInputItem<T>` |
+<!-- api:fin -->
+
+Implementa `ControlValueAccessor`.
+
+## Trampas
+
+- **Va en `data-slot="start"`, no en `slot="prefix"`** (`slot="prefix"` no proyecta). El
+  `sui-input` necesita además `[leadingControl]="true"` (suelta el bloqueo de ícono decorativo y
+  dibuja el divisor).
+- El `size` tiene que ser el mismo del `sui-input`: uno `large` dentro de un input `medium` lo
+  agranda.
+- `country` arranca en `true`: para una moneda hay que apagarlo.
+- No tiene estado de error: lo pinta el `sui-input` que lo contiene.
+- **Riesgo en iPhone (no verificado en dispositivo):** el host escucha `touchend` y hace `blur()`.
+  En `sui-compact-select` ese mismo patrón cancelaba el clic de iOS y el menú no abría; ahí se
+  movió el clic a un div interno. Aquí sigue en el host. Probar en un iPhone antes del primer uso.
+- No mezclar `[(selected)]` con `formControlName`.
+
+## Ejemplo
+
+```html
+<sui-input label="Monto" type="amount" placeholder="0.00" [leadingControl]="true" [(value)]="monto">
+  <sui-compact-select-for-input data-slot="start" size="medium" [country]="false"
+                                [items]="monedas" [(selected)]="moneda" />
+</sui-input>
+```

package/docs/sui-content-card/README.md

@@ -0,0 +1,147 @@
+---
+name: sui-content-card
+selector: sui-content-card
+resumen: Fila «cara + nombre + detalle» dentro de su propia cajita, con badge y una X opcional para quitarla
+alternativas: [sui-content-label (la misma fila sin caja, dentro de una card que ya existe), sui-card (contenido libre), sui-radio-card / sui-checkbox-card (la fila se elige)]
+---
+
+# sui-content-card
+
+Story: [Molecules/Card/Content Card](https://sui-design-system.web.app/?path=/docs/molecules-card-content-card--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** para una fila suelta que representa a alguien o algo, con su propia caja: el top de
+locales, clientes y repartidores del resumen del super admin, una persona del equipo que se puede
+quitar, un método de pago guardado.
+
+**No lo uses** para:
+
+- Filas dentro de una card que ya pone el borde: `sui-content-label` (si no, queda caja dentro de
+  caja).
+- Una fila que se elige: `sui-radio-card` o `sui-checkbox-card`.
+- Una fila que se toca para abrir un detalle: hoy no tiene `interactive`; usa `sui-card
+  [interactive]` con un `sui-content-label` adentro.
+
+Regla corta: **fila suelta con caja → content-card · filas dentro de una card → content-label ·
+se elige → card de selección.**
+
+## Qué variante usar
+
+> **La guía del DS no tiene página de la content card.** Es un `sui-content-label size="medium"`
+> envuelto en una card con la X. Lo que sigue es práctica de la app («propuesta») salvo lo
+> aprobado («canon»).
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-card`): **4
+> content-cards, todas en `pages/super-admin/master-overview/master-overview.html`**. Tipos:
+> `avatar` (o `left-icon` cuando el local no tiene logo). Las 4 con `[dismissible]="false"`; 1 con
+> `badge` (la nota del local).
+
+### `type` (el leading)
+
+| type | cuándo | fuente |
+|---|---|---|
+| `avatar` (`avatar`) | Una persona o un local con foto. El color de las iniciales va por rol: local `orange`, repartidor `green`, cliente `blue`. | canon (avatar por rol); el uso es propuesta |
+| `left-icon` (`icon`) | La misma fila cuando no hay foto: `store-2-line` para el local sin logo. | propuesta (precedente `master-overview.html:224`) |
+| `basic` | Ver «No usar». | propuesta |
+| `company` (`avatar` + `companyLogoSrc`) | Ver «No usar». | propuesta |
+| `brand` (`brand`) | Ver «No usar». | propuesta |
+| `card-provider` (`brand`) | Ver «No usar». | propuesta |
+
+### Las piezas
+
+| prop | cuándo | fuente |
+|---|---|---|
+| `title` | Siempre. El nombre, nunca un id (regla de la pasada de UX). | canon (CLAUDE.md, «un identificador nunca es el título») |
+| `subtitle` | El dato que se compara entre filas: «214 pedidos este mes», «38 calificaciones». | propuesta |
+| `badge` | Un dato chico que se compara de un vistazo (la nota). El color sigue el significado del badge: `red` si está mal. | propuesta (badge: canon de colores) |
+| `dismissible` | La X solo cuando quitar la fila ES la acción (sacar a alguien del equipo, borrar una tarjeta). **El default es `true`**: pasa `false` siempre que no. | propuesta |
+| `dismissAriaLabel` | Siempre que haya X: «Quitar a Rosa del equipo», no el default «Descartar». | propuesta |
+| `sublabel` | Ver «No usar». | propuesta |
+| `disabled` | Ver «No usar». | propuesta |
+
+**Usos de hoy que rompen las reglas:** 0. Las 4 apagan la X a mano: el default de `dismissible`
+no le sirve a ningún uso de hoy.
+
+## Tamaño en mobile y en web
+
+La fila mide 72 (leading de 40 + padding 16) en las dos. El `size` cambia **solo la X de quitar**:
+
+| size | X visible | área táctil | glyph | fuente |
+|---|---|---|---|---|
+| `medium` (default) | 20 × 20 | 20 × 20 | 20 | Figma |
+| `large` | 32 × 32 (radius 8 al hover) | 40 × 40 (`::before` invisible) | 20 | canon (aprobado por el dueño, 03-10-2026): extensión SUI |
+
+En `large` el glyph queda en el mismo lugar que en `medium` (la caja grande se come el aire del
+gap con margen negativo), así que la fila se ve igual: lo que crece es dónde se puede tocar.
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| fila | 72, sin cambio | 72, sin cambio | Figma |
+| X para quitar | `large` (32, área 40) | `medium` (20) | propuesta: el tamaño es extensión SUI aprobada (03-10-2026); el «cuándo» falta aprobarlo |
+
+```html
+<sui-content-card … [size]="bp.isMobile() ? 'large' : 'medium'" (dismiss)="quitar(item)" />
+```
+
+## «No usar»: por qué no hoy y cuándo sí
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| `type="basic"` (0 usos) | las 4 filas tienen cara | un dato sin cara: una dirección guardada |
+| `type="company"` (0 usos) | no se listan empleados | un empleado con el logo de su local en la esquina |
+| `type="brand"` (0 usos) | no hay servicios conectados | WhatsApp o Mapbox conectado, con su logo |
+| `type="card-provider"` (0 usos) | no hay pago con tarjeta guardada | una tarjeta guardada, cuando entre Culqi / Niubiz |
+| `sublabel` (0 usos) | ninguna fila lo pide | «(tú)» en la lista del equipo |
+| `disabled` (0 usos) | ninguna fila está apagada | un repartidor suspendido en la lista de su local |
+| `dismissible` en mobile con `size="medium"` | la X mide 20 | nunca: en mobile va `size="large"` |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `type` | `'basic' \| 'left-icon' \| 'avatar' \| 'card-provider' \| 'brand' \| 'company'` | `'basic'` |
+| `title` | `string` | `''` |
+| `sublabel` | `string` | `''` |
+| `subtitle` | `string` | `''` |
+| `badge` | `SuiBadgeConfig \| string \| null` | `null` |
+| `icon` | `string \| null` | `null` |
+| `avatar` | `SuiAvatarConfig \| string \| null` | `null` |
+| `companyLogoSrc` | `string \| null` | `null` |
+| `brand` | `SuiBrandLogoCompany \| null` | `null` |
+| `dismissible` | `boolean` | `true` |
+| `dismissAriaLabel` | `string` | `'Descartar'` |
+| `size` | `'medium' \| 'large'` | `'medium'` |
+| `disabled` | `boolean` | `false` |
+
+| output | payload |
+|---|---|
+| `dismiss` | `MouseEvent` |
+<!-- api:fin -->
+
+## Trampas
+
+- **`dismissible` arranca en `true`**: sin `[dismissible]="false"` aparece una X que no hace nada.
+- **Aquí se llama `title` / `subtitle`**; en `sui-content-label` la misma fila es `label` /
+  `description`.
+- **`badge` con string sale naranja `lighter` `small`** (en MAYÚSCULAS); en el content-label el
+  mismo string sale `medium`.
+- `card-provider` toma el logo de `brand` y lo pone en una cajita de 32 × 24 (no hay assets de
+  tarjetas en el DS).
+- No tiene `interactive` ni output de toque: la fila no se puede tocar entera.
+- El host borra el atributo `title` del DOM y lleva `role="group"` con `aria-label` = `title`.
+
+## Ejemplo
+
+```html
+<sui-content-card
+  type="avatar"
+  [avatar]="{ src: local.logo, initials: 'SA', color: 'orange' }"
+  [title]="local.nombre"
+  [subtitle]="local.pedidos + ' pedidos este mes'"
+  [badge]="{ label: '4.6 ★', color: 'orange', variant: 'lighter', size: 'small' }"
+  [dismissible]="false" />
+```