@ajuarezso/sui-design-system 0.19.0 → 0.21.0

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

@@ -0,0 +1,190 @@
+---
+name: sui-compact-button
+selector: sui-compact-button
+resumen: Botón de solo ícono, chico, para cuando falta espacio
+alternativas: [sui-button (acción con texto, o de ícono con onlyIcon en tamaños de 28 a 52), sui-link-button (acción que se lee como texto), sui-topbar-button (ícono de la barra superior)]
+---
+
+# sui-compact-button
+
+Story: [Atoms/Button/Compact Button](https://sui-design-system.web.app/?path=/docs/atoms-button-compact-button--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** para una acción de un solo ícono donde no entra un botón: cerrar en la cabecera de un
+modal o sheet, «más» o «quitar» en una fila, el − / + de una cantidad, las flechas flotantes de un
+carrusel o un mapa.
+
+**No lo uses** para:
+
+- **Una acción con texto**: `sui-button` o `sui-link-button`.
+- **El ícono de la barra superior**: `sui-topbar-button`.
+- **Un ícono decorativo** que no hace nada: `sui-icon`.
+
+## Qué variante usar
+
+> **La guía del DS no dice cuándo usar cada estilo.** Su página muestra los cuatro estilos, los
+> dos tamaños, el radio completo y el deshabilitado, sin do/don't. Las reglas de abajo son
+> **canon (aprobado por el dueño, 03-10-2026)** salvo donde dice otra fuente.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app`: 11 compact-buttons en 7 archivos, sin
+> contar prototipos ni vitrinas (`master-preview`, `master-prototipos`, `mockup-sheets-*`,
+> `dx/*`, `master-rutina`, `master-medico`, `dev-index`). Estilos: 6 `ghost`, 3 `stroke` (uno
+> por error, ver abajo), 2 `white`, 0 `modifiable`. Tamaños: 6 `large`, 3 `medium`, 2 `xlarge`.
+> 4 con `fullRadius`, 1 con `disabled`.
+
+### Lo que sí dice la guía del DS
+
+- **Para qué es**: botones para cuando el espacio es limitado.
+- **Defaults**: `stroke` + `large` + sin `fullRadius`. Igual que SUI.
+- **Tamaños**: solo `large` (24 px, ícono 20) y `medium` (20 px, ícono 18; en SUI, 16). `xlarge`
+  y los tres más grandes son extensión de SUI.
+- **`modifiable` no tiene color, fondo ni hover propios**: hereda el color del contenedor.
+- **Deshabilitado**: sin borde, sin fondo y sin sombra; el ícono en `text-disabled-300`.
+
+### `variantStyle`
+
+| variantStyle | cuándo | ejemplo real de la app | fuente |
+|---|---|---|---|
+| `stroke` (default) | Acciones de una fila o una card: «más», «editar», el − / + de una cantidad. | `components/product-detail-view/product-detail-view.html:169` (− / +) | canon (aprobado por el dueño, 03-10-2026) |
+| `ghost` | Cerrar en la cabecera de un modal o un sheet. | `components/store-ratings-modal/store-ratings-modal.html:33` («Cerrar») | canon (aprobado por el dueño, 03-10-2026) |
+| `white` | Flotante sobre un mapa o una foto, siempre con `fullRadius`. | `pages/customer/store-browser/arrastre-carrusel.ts:102` (flechas del carrusel) | canon (aprobado por el dueño, 03-10-2026) |
+| `modifiable` | Hereda el color del contenedor: el cerrar del alert (ya lo trae `sui-alert` adentro). | (sin uso directo; vive dentro de `sui-alert`) | hereda el color: según la guía del DS · dónde va: canon (aprobado por el dueño, 03-10-2026) |
+
+**Usos de hoy que rompen la regla:**
+
+- **1 bug: `variant="ghost"` en vez de `variantStyle`.** `pages/super-admin/master-settings/master-settings.html:647`
+  («Quitar este nivel»). `variant` no es un input del compact-button: el atributo se ignora y el
+  botón sale `stroke`. Pasar a `variantStyle="ghost"`.
+- **A discutir — 5 `ghost` para acciones de fila** (quitar, más):
+  `components/option-sections-manager/option-sections-manager.html:39` y `:146`,
+  `components/add-product-modal/add-product-modal.html:306`,
+  `pages/super-admin/master-settings/master-settings.html:111` y `:647`. Este canon dice `stroke`
+  para filas y `ghost` solo para cerrar; el canon de `sui-button` permite `ghost` para editar y
+  borrar en filas. Los dos canon se contradicen: hay que elegir uno.
+
+### `size`
+
+| size | px (ícono) | cuándo | fuente |
+|---|---|---|---|
+| `medium` | 20 (16) | Solo desktop, filas muy densas (tablas). | escala: según la guía del DS · cuándo: canon (aprobado por el dueño, 03-10-2026) |
+| `large` (default) | 24 (20) | Desktop, dentro de cards. | default según la guía del DS · cuándo: canon (aprobado por el dueño, 03-10-2026) |
+| `xlarge` | 28 (24) | Cabeceras de modal en desktop; flechas de carrusel que solo se ven con mouse. | extensión de SUI · canon (aprobado por el dueño, 03-10-2026) |
+| `2xlarge` | 32 (20) | **El mínimo en mobile**: filas y cards que se tocan con el dedo. | extensión de SUI · canon (aprobado por el dueño, 03-10-2026). **En el repo del DS, todavía no en el paquete publicado 0.19.0** |
+| `3xlarge` | 36 (20) | Cerrar en modales y sheets en mobile. | ídem: canon; en el repo, no en 0.19.0 |
+| `4xlarge` | 40 (24) | Flotantes sobre el mapa (volver, centrar). | ídem: canon; en el repo, no en 0.19.0 |
+
+**Usos de hoy que rompen la regla** (pantallas del cliente, que se usan en el teléfono, con
+botones de 20 o 24 px):
+
+- **4 casos**: `components/product-detail-view/product-detail-view.html:169` y `:173` (− / + en
+  `large` → `2xlarge`), `components/store-ratings-modal/store-ratings-modal.html:33` (cerrar en
+  `medium` → `3xlarge`), `pages/customer/order-history/order-history.html:383` (flecha de la fila
+  en `large` → `2xlarge`).
+- **La migración está bloqueada** hasta que se publique la versión del DS con `2xlarge`,
+  `3xlarge` y `4xlarge`.
+
+### `fullRadius`
+
+| fullRadius | cuándo | fuente |
+|---|---|---|
+| `false` (default, radio 6) | Lo normal: filas, cards, cabeceras. | default según la guía del DS · cuándo: propuesta |
+| `true` (círculo) | Flotante (`white`) sobre mapa o foto. | canon (aprobado por el dueño, 03-10-2026) |
+| `true` (círculo) | El − / + de una cantidad, para que se lea como un stepper. | propuesta (es lo que ya hace `product-detail-view`) |
+
+### `disabled`, `href`, `ariaLabel`
+
+| prop | cuándo | fuente |
+|---|---|---|
+| `disabled` | Se llegó al límite: no hay más stock para sumar, no se puede quitar el último. | cómo se ve: según la guía del DS · cuándo: propuesta |
+| `href` | Solo si el botón navega sin otra acción (volver a una ruta). Pinta un `<a>`; `rel` ya viene en `'noopener noreferrer'`. | propuesta |
+| `ariaLabel` (requerido) | Lo que hace, no lo que muestra: «Cerrar», «Quitar opción», «Agregar uno»; nunca «X» ni «Ícono». | propuesta (el input es obligatorio) |
+| `type="submit"` | Solo dentro de un `<form>`. | propuesta |
+
+## Tamaño en mobile y en web
+
+En mobile se toca con el dedo: el área táctil tiene que medir **44 px o más**. En web, con mouse,
+va un tamaño más chico. La app ya lo resuelve con `BreakpointsService`
+(`src/app/services/breakpoints.service.ts`, mobile = hasta 767 px):
+`[size]="bp.isMobile() ? 'large' : 'small'"`, 27 usos hoy en `master-pedidos` (16 `large`/`small`,
+9 `large`/`medium`, 2 `medium`/`xsmall`). Regla del dueño, 03-10-2026.
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| acciones de fila o card (más, quitar, − / +) | `2xlarge` (32) | `large` (24); `medium` (20) en tablas densas | canon (aprobado por el dueño, 03-10-2026) |
+| cerrar en la cabecera de un modal o sheet | `3xlarge` (36) | `xlarge` (28) | canon (aprobado por el dueño, 03-10-2026) |
+| flotante sobre el mapa o una foto | `4xlarge` (40) | `xlarge` (28) | canon (aprobado por el dueño, 03-10-2026) |
+
+```html
+<sui-compact-button icon="close-line" variantStyle="ghost" ariaLabel="Cerrar"
+                    [size]="bp.isMobile() ? '3xlarge' : 'xlarge'" (clicked)="cerrar()" />
+```
+
+**`2xlarge`, `3xlarge` y `4xlarge` están en el repo del DS y todavía no en el paquete publicado
+(0.19.0).** Hasta publicarlos, el patrón de arriba no compila. Aun en `4xlarge` (40) el botón queda
+por debajo de 44: deja 4 px de aire alrededor (gap o padding del contenedor) para que el dedo no
+toque el vecino. `medium` y `large` no van en mobile: hoy hay 4 en pantallas del cliente (ver
+«`size`» arriba).
+
+## «No usar»: por qué no hoy y cuándo sí
+
+Ningún valor del compact-button está en «no usar»: los cuatro estilos y los seis tamaños tienen
+un caso. `modifiable` no tiene un uso directo hoy porque el único lugar donde va (el cerrar del
+alert) ya lo trae `sui-alert` adentro.
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `icon` | `string` | — (requerido) |
+| `variantStyle` | `'stroke' \| 'ghost' \| 'modifiable' \| 'white'` | `'stroke'` |
+| `size` | `'medium' \| 'large' \| 'xlarge' \| '2xlarge' \| '3xlarge' \| '4xlarge'` | `'large'` |
+| `fullRadius` | `boolean` | `false` |
+| `disabled` | `boolean` | `false` |
+| `href` | `string \| null` | `null` |
+| `target` | `string \| null` | `null` |
+| `rel` | `string \| null` | `'noopener noreferrer'` |
+| `type` | `'button' \| 'submit' \| 'reset'` | `'button'` |
+| `ariaLabel` | `string` | — (requerido) |
+
+| output | payload |
+|---|---|
+| `clicked` | `MouseEvent` |
+<!-- api:fin -->
+
+El clic se escucha con `(clicked)`. `icon` recibe el nombre RemixIcon, sin el prefijo `ri-`.
+
+## Trampas
+
+- **El estilo se llama `variantStyle`**, no `variant`. `variant="ghost"` no da error de
+  compilación: se ignora y sale `stroke` (pasó en `master-settings.html:647`).
+- **`icon` y `ariaLabel` son obligatorios**: sin `ariaLabel` no compila.
+- **El output es `(clicked)`**. `(click)` sobre el host también llega porque el clic burbujea; hoy 6
+  usos lo escuchan así (`product-detail-view.html:169` y `:173`, `master-settings.html:647`,
+  `arrastre-carrusel.ts:102` y `:104`, `order-history.html:383`). Usa `(clicked)`, que ya respeta
+  `disabled`.
+- **El paquete publicado (0.19.0) solo trae `medium`, `large` y `xlarge`.** Pasar `2xlarge` con un
+  cast compila, pero el botón sale sin tamaño y con ícono de 16: no lo hagas hasta que se publique.
+- En `medium` el ícono mide 16, no los 18 de la guía.
+- `modifiable` en hover pinta blanco al 16 %: pensado para fondos oscuros o de color. Sobre blanco
+  casi no se nota. Se ajusta con `--sui-compact-button-hover-bg` y `--sui-compact-button-active-bg`.
+- Al presionar, `stroke`, `ghost` y `white` se ponen oscuros (`bg-surface-800`) con el ícono
+  blanco: es el estado activo del Figma, no un error.
+- Ya trae el arreglo de iOS para el `:active` pegado: no lo agregues.
+
+## Ejemplo
+
+```html
+<!-- Cerrar en la cabecera de un sheet, en mobile -->
+<sui-compact-button icon="close-line" variantStyle="ghost" size="xlarge" ariaLabel="Cerrar" (clicked)="cerrar()" />
+
+<!-- Acción de una fila en desktop -->
+<sui-compact-button icon="more-2-line" ariaLabel="Opciones de la sección" (clicked)="abrirMenu()" />
+
+<!-- Flotante sobre el mapa -->
+<sui-compact-button icon="arrow-left-line" variantStyle="white" [fullRadius]="true" size="xlarge"
+                    ariaLabel="Volver" (clicked)="volver()" />
+```

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" />
+```