@ajuarezso/sui-design-system 0.20.0 → 0.22.0

package/docs/sui-command-menu-footer/README.md

@@ -0,0 +1,100 @@
+---
+name: sui-command-menu-footer
+selector: sui-command-menu-footer
+resumen: Pie del buscador ⌘K (command menu) con las teclas para moverse y elegir, y un link de ayuda
+alternativas: [sui-modal-footer (botones de un modal), sui-kbd (una tecla suelta), sui-dropdown-caption (texto de pie de un menú flotante)]
+---
+
+# sui-command-menu-footer
+
+Story: [Organisms/Command Menu/Command Menu Footer](https://sui-design-system.web.app/?path=/docs/organisms-command-menu-command-menu-footer--docs)
+
+La última de las tres piezas del command menu (ver README de `sui-command-menu-item`): dos grupos
+de teclas (↑ ↓ «Navegar», ↵ «Seleccionar») y a la derecha un texto con un link de ayuda.
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** al pie de un command menu **en desktop**, para enseñar las teclas.
+
+**No lo uses** para:
+
+- Mobile: no hay teclado físico; las teclas no dicen nada (README de `sui-kbd`). No se pinta.
+- Un command menu que **no** se mueve con flechas: si el pie dice «↑ ↓ Navegar», las flechas tienen
+  que funcionar. `sui-command-menu-item` no las trae; las cablea quien arma el menú.
+- Botones de un modal: `sui-modal-footer`.
+
+Regla corta: **command menu en desktop con flechas cableadas → footer · mobile → nada.**
+
+## Qué variante usar
+
+> **La guía del DS lo pone como parte opcional del command menu**: un pie para mostrar atajos de
+> teclado o información extra. No trae do/don't. Todo lo de abajo es **propuesta, falta
+> aprobación**, salvo lo marcado canon.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-dropdown-menu`):
+> **0 usos**.
+
+No tiene variantes. Se decide el copy y si va el bloque de ayuda.
+
+| prop | regla | fuente |
+|---|---|---|
+| `navigateLabel` · `selectLabel` | **Siempre en español**: «Moverte» y «Abrir» (o «Elegir»). Los defaults son `'Navigate'` y `'Select'`. | canon (CANON-SUI §5: copy en español, tuteo) |
+| `helpText` + `helpLink` | Solo si hay adónde mandar a la persona (el WhatsApp de soporte). Si no, `[helpText]="null"` saca el bloque entero. Los defaults están en inglés. | propuesta |
+| `helpLink` como objeto | `{ label, href, target }` dibuja un `<a>` de verdad; con `target: '_blank'` pone `rel="noopener noreferrer"` solo. | API |
+
+## Tamaño en mobile y en web
+
+No tiene tamaños: 48 px de alto, textos 12/16, hasta 600 px de ancho.
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| pie del command menu | no se pinta | 48 px | canon para mobile (README de `sui-kbd`: en mobile las teclas no se muestran) |
+
+```html
+@if (!bp.isMobile()) {
+  <sui-command-menu-footer navigateLabel="Moverte" selectLabel="Abrir" [helpText]="null" />
+}
+```
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `navigateLabel` | `string` | `'Navigate'` |
+| `selectLabel` | `string` | `'Select'` |
+| `helpText` | `string \| null` | `"Not what you're looking for? Try the"` |
+| `helpLink` | `SuiLinkConfig \| string \| null` | `'Help Center'` |
+
+| output | payload |
+|---|---|
+| `helpClicked` | `MouseEvent` |
+<!-- api:fin -->
+
+`helpLink` como string dibuja un botón que solo emite `helpClicked`; como `SuiLinkConfig`
+(`{ label, href?, target?, rel? }`) dibuja un `<a>`, y un `href` interno navega dentro de la app.
+
+## Trampas
+
+- **Los cuatro textos vienen en inglés.** Si no se pasan, el pie dice «Navigate», «Select», «Not
+  what you're looking for? Try the» y «Help Center».
+- **`helpText: null` saca también el link**; `helpLink: null` saca solo el link y deja el texto.
+- **Promete flechas que nadie cablea**: ni `sui-command-menu-item` ni el modal mueven la selección
+  con ↑ ↓.
+- Hasta 600 px el texto de ayuda se oculta (queda solo el link): pasa en un modal angosto aunque sea
+  desktop.
+- Las teclas son íconos fijos (↑ ↓ ↵); no se pueden cambiar.
+
+## Ejemplo
+
+```html
+@if (!bp.isMobile()) {
+  <sui-command-menu-footer
+    navigateLabel="Moverte"
+    selectLabel="Abrir"
+    helpText="¿No es lo que buscas? Escríbenos por"
+    [helpLink]="{ label: 'WhatsApp', href: 'https://wa.me/51931819925', target: '_blank' }" />
+}
+```

package/docs/sui-command-menu-item/README.md

@@ -0,0 +1,140 @@
+---
+name: sui-command-menu-item
+selector: sui-command-menu-item
+resumen: Fila de resultado del buscador ⌘K (command menu) que lleva a una pantalla, un pedido o una persona
+alternativas: [sui-dropdown-item (fila de un menú de acciones anclado a un botón), sui-filter-item (fila de un panel de filtros), sui-content-card (resultado que se ve en una lista de la pantalla)]
+---
+
+# sui-command-menu-item
+
+Story: [Organisms/Command Menu/Command Menu Item](https://sui-design-system.web.app/?path=/docs/organisms-command-menu-command-menu-item--docs)
+
+**SUI no tiene un componente «command menu» entero.** Se arma con tres piezas dentro de un
+`sui-modal`: `sui-command-menu-search` arriba, la lista de `sui-command-menu-item` en el medio
+(con cabeceras de grupo `sui-content-divider`) y `sui-command-menu-footer` abajo. Quien lo arma pone
+el filtrado, el teclado y el atajo ⌘K.
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** para los resultados de un buscador que **lleva a algún lado**: abrir un pedido, ir a una
+pantalla del panel, abrir la ficha de un repartidor o un local. Es el patrón del super admin o del
+panel del local **en desktop**, donde hay teclado.
+
+**No lo uses** para:
+
+- Acciones sobre algo concreto (editar, archivar): `sui-dropdown-item` dentro de un
+  `sui-dropdown-menu`.
+- Elegir un valor de un formulario: `sui-select`.
+- La lista de resultados de una pantalla de búsqueda (la del cliente buscando tiendas): ahí van las
+  cards de la pantalla, no filas de palette.
+- Un menú en mobile: el ⌘K es un patrón de teclado.
+
+Regla corta: **buscar y saltar → command menu · actuar sobre algo → dropdown · elegir un valor →
+select.** La tabla completa está en el README de `sui-dropdown-menu`.
+
+## Qué variante usar
+
+> **La guía del DS define el command menu como el buscador que deja saltar rápido desde cualquier
+> pantalla**, armado dentro de un diálogo, con input, lista, grupos con título, items y un pie con
+> teclas. El item tiene dos tamaños, `small` (default) y `medium`, y el elegido se marca con fondo
+> `bg-weak-50`. No trae do/don't. Lo demás es **propuesta, falta aprobación**.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-dropdown-menu`):
+> **0 usos**. Solo aparece en la vitrina `master-preview`.
+
+### `type` — qué va a la izquierda
+
+| type | cuándo | fuente |
+|---|---|---|
+| `left-icon` | Ir a una **pantalla** o una sección: «Pedidos», «Mi negocio», «Recargas». | según la guía del DS (item con ícono); el cuándo es propuesta |
+| `avatar` | Una **persona**: repartidor, cliente, dueño de local (`avatar` con `src` o `initials`). | propuesta |
+| `company` | Un **local**: su logo en `avatar.src`. | propuesta |
+| `basic` (default) | Una búsqueda reciente o un resultado sin imagen («Pedido #1234»). | propuesta |
+| `brand` | Un servicio externo con su logo (Yape, WhatsApp), proyectado en `slot="brand"`. | propuesta |
+| `country` | No usar hoy: todo es Perú. | propuesta |
+
+### `size` y los extras
+
+| prop | cuándo | fuente |
+|---|---|---|
+| `size="small"` (default, 40) | Listas de resultados de una línea (`title` + `sublabel`). | según la guía del DS (default `small`) |
+| `size="medium"` (64) | Cuando el resultado necesita una segunda línea (`description`) para distinguirse: «Pedido #1234» · «Juan Pérez · S/ 45.00». | según la guía del DS (existe); el cuándo es propuesta |
+| `badge` | Un estado corto que ayuda a elegir («Pendiente», «Cerrado»). String = gris `lighter`; objeto `SuiBadgeConfig` para color. | propuesta |
+| `shortcut` | El atajo de esa acción (`sui-kbd`). Solo web. | canon (README de `sui-kbd`: en mobile no se pinta) |
+| `showButton` | Una flecha a la derecha cuando el resultado abre otra pantalla. | propuesta |
+
+## Tamaño en mobile y en web
+
+El command menu es un patrón de desktop. En mobile no hay ⌘K ni flechas; si se reusa la lista en un
+buscador de mobile, la fila `small` mide 40 y queda debajo de los 44 del dedo.
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| resultado de una línea | `medium` (64) | `small` (40) | propuesta, falta aprobación |
+| resultado con descripción | `medium` (64) | `medium` (64) | propuesta |
+
+```html
+<sui-command-menu-item [size]="bp.isMobile() ? 'medium' : 'small'" … />   <!-- bp = BreakpointsService -->
+```
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `type` | `'basic' \| 'left-icon' \| 'avatar' \| 'brand' \| 'company' \| 'country'` | `'basic'` |
+| `size` | `'small' \| 'medium'` | `'small'` |
+| `title` | `string` | — (requerido) |
+| `sublabel` | `string \| null` | `null` |
+| `description` | `string \| null` | `null` |
+| `icon` | `string \| null` | `null` |
+| `avatar` | `SuiAvatarConfig \| string \| null` | `null` |
+| `flagName` | `SuiFlagName \| null` | `null` |
+| `badge` | `SuiBadgeConfig \| string \| null` | `null` |
+| `shortcut` | `string \| null` | `null` |
+| `showButton` | `boolean` | `false` |
+
+| output | payload |
+|---|---|
+| `clicked` | `MouseEvent` |
+| `buttonClicked` | `MouseEvent` |
+<!-- api:fin -->
+
+Slot: `[slot=brand]` (solo con `type="brand"`). `avatar` acepta un string (la URL) o
+`SuiAvatarConfig` (`{ src?, initials?, color? }`).
+
+## Trampas
+
+- **`(clicked)` nunca sale.** El componente declara el output pero no lo conecta a ningún clic (el
+  host no escucha `click` y el template no llama a `onClick`; el spec no lo prueba). Escucha el
+  `(click)` nativo del host: `<sui-command-menu-item (click)="ir(r)" … />`.
+- **Enter y Espacio no hacen nada.** Tiene `role="button"` y `tabindex="0"`, así que se enfoca con
+  Tab, pero activarlo con teclado lo tiene que cablear quien lo usa (`(keydown.enter)`).
+- **No hay estado «elegido»** para la navegación con flechas: el fondo `weak-50` sale con hover y
+  con `:focus-visible`. Para mover la selección con ↑ ↓ hay que mover el foco entre filas.
+- `description` solo se ve en `medium`.
+- `showButton` pinta una flecha con `ariaLabel="Abrir"` fijo, y su clic sale por `buttonClicked`
+  (no burbujea al item).
+- `type="left-icon"` sin `icon` en `small` cae al ícono `apps-line`; en `medium` queda el círculo vacío.
+- Mide como máximo 600 px de ancho.
+- El host borra el atributo `title` nativo (no aparece el tooltip gris del navegador).
+
+## Ejemplo
+
+```html
+<sui-modal [(open)]="buscadorAbierto" size="large" [fullscreen]="true">
+  <sui-command-menu-search [(value)]="q" placeholder="Busca pedidos, locales o repartidores…"
+                           [shortcut]="!bp.isMobile()" />
+  <sui-content-divider type="text" text="Pantallas" />
+  @for (p of pantallas(); track p.ruta) {
+    <sui-command-menu-item type="left-icon" [icon]="p.icono" [title]="p.nombre"
+                           [size]="bp.isMobile() ? 'medium' : 'small'"
+                           (click)="ir(p.ruta)" (keydown.enter)="ir(p.ruta)" />
+  }
+  @if (!bp.isMobile()) {
+    <sui-command-menu-footer navigateLabel="Moverte" selectLabel="Abrir" [helpText]="null" />
+  }
+</sui-modal>
+```

package/docs/sui-command-menu-search/README.md

@@ -0,0 +1,105 @@
+---
+name: sui-command-menu-search
+selector: sui-command-menu-search
+resumen: Campo de arriba del buscador ⌘K (command menu), sin caja y con borde inferior
+alternativas: [sui-input type="search" (buscador de una pantalla), sui-dropdown-search (filtrar los items de un menú flotante)]
+---
+
+# sui-command-menu-search
+
+Story: [Organisms/Command Menu/Command Menu Search](https://sui-design-system.web.app/?path=/docs/organisms-command-menu-command-menu-search--docs)
+
+Es la primera de las tres piezas del command menu (ver README de `sui-command-menu-item`): el
+campo, el chip ⌘K y un botón para limpiar. **No busca**: emite el texto y quien lo usa filtra.
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** arriba de un command menu armado dentro de un `sui-modal`: el buscador que salta a
+pedidos, locales, repartidores o pantallas del panel en desktop.
+
+**No lo uses** para:
+
+- El buscador de una pantalla o de una lista a la vista: `sui-input type="search"` (ya lleva
+  `enterkeyhint="search"`, tamaños y label).
+- Filtrar las opciones de un menú anclado a un botón: `sui-dropdown-search`.
+- Fuera del command menu: no tiene caja, solo un borde abajo; suelto parece texto.
+
+Regla corta: **buscar en toda la app → command-menu-search · buscar en una pantalla → sui-input
+search · filtrar un menú → dropdown-search.**
+
+## Qué variante usar
+
+> **La guía del DS define el command menu como el buscador que deja saltar rápido desde cualquier
+> pantalla**; el input es su primera parte. No dice nada del chip ni del botón de la derecha (salen
+> del Figma del DS). Todo lo de abajo es **propuesta, falta aprobación**, salvo lo marcado canon.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-dropdown-menu`):
+> **0 usos**.
+
+Los tres estados salen solos del `value`: vacío (lupa gris, placeholder gris), hover (placeholder
+más oscuro) y con texto (lupa naranja, X para limpiar).
+
+| prop | regla | fuente |
+|---|---|---|
+| `placeholder` | **Siempre**, en español y diciendo qué se busca: «Busca pedidos, locales o repartidores…». El default es `'Search or jump to'`. | canon (CANON-SUI §5: copy en español, elipsis `…`) |
+| `shortcut` | `true` solo en web; en mobile `false` (no hay teclado físico). | canon (README de `sui-kbd`) |
+| `button` | Déjalo en `true`: la X de limpiar ahorra borrar a mano. El ícono de info del estado vacío no hace nada. | propuesta |
+
+## Tamaño en mobile y en web
+
+No tiene tamaños: 48 px de alto (14 + 20 + 13 + 1 de borde), texto 14/20, hasta 600 px de ancho.
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| buscador del command menu | igual, sin chip ⌘K | igual, con chip ⌘K | canon para el chip (README de `sui-kbd`); el resto, propuesta |
+
+```html
+<sui-command-menu-search [(value)]="q" placeholder="Busca pedidos, locales o repartidores…"
+                         [shortcut]="!bp.isMobile()" />   <!-- bp = BreakpointsService -->
+```
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `value` | `string` | `''` |
+| `placeholder` | `string` | `'Search or jump to'` |
+| `shortcut` | `boolean` | `true` |
+| `button` | `boolean` | `true` |
+
+| output | payload |
+|---|---|
+| `valueChange` | `string` |
+| `cleared` | `void` |
+<!-- api:fin -->
+
+`value` no es `model`, pero el par `value` + `valueChange` permite `[(value)]`. La X emite
+`valueChange('')` y `cleared`, y devuelve el foco al campo.
+
+## Trampas
+
+- **Sin `[(value)]` no funciona bien.** El componente no guarda lo que se escribe: solo lo emite. Si
+  no se le devuelve el `value`, la X nunca aparece y la lupa no cambia: el estado «con texto» sale
+  del input `value`, no de lo escrito.
+- **El chip dice ⌘K, fijo.** En Windows el atajo es Ctrl+K y el chip no cambia; tampoco hay atajo
+  real: el `keydown` global lo cablea quien arma el command menu.
+- **iOS hace zoom al enfocarlo**: el campo está en 14 px y la regla de la app pide 16 px en los
+  inputs de mobile (CLAUDE.md, «Responsive mobile»).
+- **El teclado no trae la lupa**: el `<input>` es `type="text"` sin `enterkeyhint="search"` (CLAUDE.md,
+  «La lupa del teclado»).
+- **El campo no tiene nombre accesible**: solo placeholder, sin `aria-label`.
+- No tiene `disabled`.
+- El ícono de info del estado vacío es decorativo: no abre ayuda ni tiene `aria-label`.
+
+## Ejemplo
+
+```html
+<sui-command-menu-search
+  [(value)]="q"
+  placeholder="Busca pedidos, locales o repartidores…"
+  [shortcut]="!bp.isMobile()"
+  (cleared)="resultados.set([])" />
+```

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

@@ -0,0 +1,130 @@
+---
+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 12 a los lados, radio 12) y los íconos siguen en 20.
+
+En large y xlarge el texto sube a 16 px (regla del 03-10-2026): el valor y las opciones del menú
+van en 16/24 en `large` y el padding vertical baja para que el alto siga en 48 (trigger) y 44 (opción).
+
+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,120 @@
+---
+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`.
+
+En large y xlarge el texto sube a 16 px (regla del 03-10-2026): en `large` el valor y las opciones van
+en 16/24, igual que el valor del `sui-input` large; el alto no cambia (46 dentro del campo, 44 la opción).
+
+| 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>
+```