@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,210 @@
+---
+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
+
+<!-- generado por scripts/gen-docs.mjs — no editar a mano; `npm run docs` -->
+
+> **De dónde sale este doc.** El criterio es el del SUI Angular (`sui-compact-select`); la API es la de este
+> paquete, leída del código. Los ejemplos se pasaron de Angular de forma mecánica: lo literal va como
+> atributo (`only-icon`, `size="large"`), lo dinámico entre llaves (`size={expr}` → `el.size = expr`)
+> y los eventos como `onValueChange={…}` → `el.addEventListener('valueChange', …)`. `@if`, `@for` y
+> `<ng-template>` quedan como en Angular: se leen como pseudocódigo.
+>
+> **La API de aquí no es igual a la de Angular.** Lo que el texto nombre y figure en «Diferencias con
+> el SUI Angular» (dentro de API) aquí no existe.
+
+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:67`, `pages/drivers/drivers.html:73`…), 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. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `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 pueden seguir
+como `sui-select` `large` a todo el ancho o pasar a este en `large` (48, desde el 03-10-2026).
+
+## 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, 14 a la izquierda en `type="basic"`; radio 12) y los íconos
+siguen en 20. Alto: padding 11 + línea 24 + 11 + borde 2 = 48.
+
+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 · no se usa: D16, dueño 05-10-2026 |
+| `xsmall` | 32 | 36 · 44 | ídem · no se usa: D16, dueño 05-10-2026 (tampoco en la paginación) |
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| filtro de una barra del panel | `large` (48), junto a botones `large` | `medium` (40) | mobile `large`: canon (decisión del dueño 04-10-2026, piso táctil 44: es el único size de 44 o más; texto 16 en large, DS 0.22.0) · web `medium`: canon (dueño, 05-10-2026, D16) |
+| paginación al pie de una tabla | no aplica | `medium` (40) | canon (dueño, 05-10-2026, D16) (la guía del DS lo muestra en `xsmall`) |
+
+```html
+<sui-compact-select size={bp.sizeControl()} placeholder="Todos los roles"
+                    items={roles} selected={rolElegido} onSelectedChange={(e) => (rolElegido = e.detail)} />   <!-- bp = BreakpointsService -->
+```
+
+### Por dispositivo (D16)
+
+Comparte fila con `input` y `select` en la tabla de D16 (dueño, 05-10-2026): se toca, así que va
+grande en el celular y en la tablet, y `medium` en la computadora.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380 px) | `large` (48) | interino: D16 pide `medium` con área tocable de 44, pero el DS todavía no la estira en `medium` (40); hasta que lo haga, el mismo que el celular |
+| celular (380–767 px) | `large` (48) | junto a botones `large` de la misma barra |
+| tablet táctil (`pointer: coarse`) | `large` (48) | también se toca. Ojo: las opciones del menú de un `medium` solo suben a 44 hasta 767 px, por eso la tablet no se queda en `medium` |
+| computadora (`pointer: fine`) | `medium` (40) | filtros del panel y paginación; `small` y `xsmall` no se usan |
+
+Ultrawide (≥ 1920 px): igual que la computadora.
+
+En master-pedidos: `size={bp.sizeControl()}` (`large` donde se toca, `medium` en la computadora).
+
+## «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` -->
+
+| prop | atributo | tipo | default |
+|---|---|---|---|
+| `ariaLabel` | `aria-label` | `null \| string` | `null` |
+| `disabled` | `disabled` | `boolean` | `false` |
+| `error` | `error` | `boolean` | `false` |
+| `flag` | `flag` | `"abkhazia" \| "afghanistan" \| "aland-islands" \| "albania" \| "algeria" \| "american-samoa" \| "andorra" \| "angola" \| "anguilla" \| "antigua-and-barbuda" \| "argentina" \| "armenia" \| "aruba" \| "australia" \| "austria" \| "azerbaijan" \| "azores-islands" \| "bahamas" \| "bahrain" \| "balearic-islands" \| "bangladesh" \| "barbados" \| "basque-country" \| "belarus" \| "belgium" \| "belize" \| "benin" \| "bermuda" \| "bhutan" \| "bolivia" \| "bonaire" \| "bosnia-and-herzegovina" \| "botswana" \| "brazil" \| "british-columbia" \| "british-indian-ocean-territory" \| "british-virgin-islands" \| "brunei" \| "bulgaria" \| "burkina-faso" \| "burundi" \| "cambodia" \| "cameroon" \| "canada" \| "canary-islands" \| "cape-verde" \| "cayman-islands" \| "central-african-republic" \| "ceuta" \| "chad" \| "chile" \| "china" \| "christmas-island" \| "cocos-island" \| "colombia" \| "comoros" \| "cook-islands" \| "corsica" \| "costa-rica" \| "croatia" \| "cuba" \| "curacao" \| "cyprus" \| "czech-republic" \| "democratic-republic-of-congo" \| "denmark" \| "djibouti" \| "dominica" \| "dominican-republic" \| "east-timor" \| "ecuador" \| "egypt" \| "el-salvador" \| "england" \| "equatorial-guinea" \| "eritrea" \| "estonia" \| "ethiopia" \| "european-union" \| "falkland-islands" \| "faroe-islands" \| "fiji" \| "finland" \| "france" \| "french-polynesia" \| "gabon" \| "galapagos-islands" \| "gambia" \| "georgia" \| "germany" \| "ghana" \| "gibraltar" \| "greece" \| "greenland" \| "grenada" \| "guam" \| "guatemala" \| "guernsey" \| "guinea" \| "guinea-bissau" \| "guyana" \| "haiti" \| "hawaii" \| "honduras" \| "hong-kong" \| "hungary" \| "iceland" \| "india" \| "indonesia" \| "iran" \| "iraq" \| "ireland" \| "isle-of-man" \| "israel" \| "italy" \| "ivory-coast" \| "jamaica" \| "japan" \| "jersey" \| "jordan" \| "kazakhstan" \| "kenya" \| "kiribati" \| "kosovo" \| "kuwait" \| "kyrgyzstan" \| "laos" \| "latvia" \| "lebanon" \| "lesotho" \| "liberia" \| "libya" \| "liechtenstein" \| "lithuania" \| "luxembourg" \| "macao" \| "madagascar" \| "madeira" \| "malawi" \| "malaysia" \| "maldives" \| "mali" \| "malta" \| "marshall-island" \| "martinique" \| "mauritania" \| "mauritus" \| "melilla" \| "mexico" \| "micronesia" \| "moldova" \| "monaco" \| "mongolia" \| "montenegro" \| "montserrat" \| "morocco" \| "mozambique" \| "myanmar" \| "namibia" \| "nato" \| "nauru" \| "nepal" \| "netherlands" \| "new-zealand" \| "nicaragua" \| "niger" \| "nigeria" \| "niue" \| "norfolk-island" \| "north-korea" \| "northern-cyprus" \| "northern-marianas-islands" \| "norway" \| "oman" \| "orkney-islands" \| "ossetia" \| "pakistan" \| "palau" \| "palestine" \| "panama" \| "papua-new-guinea" \| "paraguay" \| "peru" \| "philippines" \| "pitcairn-islands" \| "poland" \| "portugal" \| "puerto-rico" \| "qatar" \| "rapa-nui" \| "republic-of-macedonia" \| "republic-of-the-congo" \| "romania" \| "russia" \| "rwanda" \| "saba-island" \| "sahrawi-arab-democratic-republic" \| "saint-kitts-and-nevis" \| "samoa" \| "san-marino" \| "sao-tome-and-prince" \| "sardinia" \| "saudi-arabia" \| "scotland" \| "senegal" \| "serbia" \| "seychelles" \| "sierra-leone" \| "singapore" \| "sint-eustatius" \| "sint-maarten" \| "slovakia" \| "slovania" \| "solomon-islands" \| "somalia" \| "somaliland" \| "south-africa" \| "south-korea" \| "south-sudan" \| "spain" \| "sri-lanka" \| "st-barts" \| "st-lucia" \| "st-vincent-and-the-grenadines" \| "sudan" \| "suriname" \| "swaziland" \| "sweden" \| "switzerland" \| "syria" \| "taijikistan" \| "taiwan" \| "tanzania" \| "thailand" \| "tibet" \| "togo" \| "tokelau" \| "tonga" \| "transnistria" \| "trinidad-and-tobago" \| "tunisia" \| "turkey" \| "turkmenistan" \| "turks-and-caicos" \| "tuvalu" \| "uganda" \| "ukraine" \| "united-arab-emirates" \| "united-kingdom" \| "united-nations" \| "united-states" \| "uruguay" \| "uzbekistan" \| "vanuatu" \| "vatican-city" \| "venezuela" \| "vietnam" \| "virgin-islands" \| "wales" \| "yemen" \| "zambia" \| "zimbabwe" \| null` | `null` |
+| `icon` | `icon` | `null \| string` | `null` |
+| `items` | — (solo por propiedad JS) | `SuiCompactSelectItem[]` | `[]` |
+| `placeholder` | `placeholder` | `string` | `''` |
+| `size` | `size` | `"large" \| "medium" \| "small" \| "xsmall"` | `'medium'` |
+| `type` | `type` | `"basic" \| "country" \| "icon"` | `'basic'` |
+| `value` | `value` | `string` | `''` |
+
+| evento | `event.detail` |
+|---|---|
+| `clicked` | `Event` |
+| `selectedChange` | `SuiCompactSelectItem` |
+
+| método | firma |
+|---|---|
+| `closeMenu` | `closeMenu() => Promise<void>` |
+| `openMenu` | `openMenu() => Promise<void>` |
+| `toggleMenu` | `toggleMenu() => Promise<void>` |
+
+### Diferencias con el SUI Angular
+
+- **Props de Angular que aquí no existen:** `selected`
+<!-- api:fin -->
+
+Implementa `ControlValueAccessor` (el valor es el `value` de la opción).
+
+## Trampas
+
+- **No mezclar `selected` + `selectedChange` 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.
+  Pásale `ariaLabel` («Ordenar por»): es el nombre que lee el lector de pantalla (desde el
+  04-10-2026; sin él usa el label de la opción elegida o el placeholder).
+- `type="country"` con **solo la bandera** (sin `value` ni `placeholder`) tampoco tiene texto:
+  pásale `ariaLabel` («País»). Si muestra el prefijo («+51») ya tiene nombre.
+- 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»).
+
+## Bien y mal
+
+**El tamaño de un filtro del panel**
+
+```html
+<!-- ❌ mal: small fijo; D16 no usa small y en el celular mide 36 (vitrina: master-preview/_guia-moleculas/campos.ts:214) -->
+<sui-compact-select size="small" placeholder="Todos los roles" items={roles} selected={rolElegido} onSelectedChange={(e) => (rolElegido = e.detail)} />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-compact-select size={bp.sizeControl()} placeholder="Todos los roles" items={roles} selected={rolElegido} onSelectedChange={(e) => (rolElegido = e.detail)} />
+```
+
+**Solo ícono**
+
+```html
+<!-- ❌ mal: type="icon" no muestra texto; sin ariaLabel el lector de pantalla no sabe qué elige (vitrina: campos.ts:218) -->
+<sui-compact-select type="icon" size={bp.sizeControl()} items={vistas} selected={vista} onSelectedChange={(e) => (vista = e.detail)} />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-compact-select type="icon" size={bp.sizeControl()} aria-label="Ver como" items={vistas} selected={vista} onSelectedChange={(e) => (vista = e.detail)} />
+```
+
+**Dentro de un formulario reactivo**
+
+```html
+<!-- ❌ mal: dos fuentes de verdad; el formulario no se entera de lo que escribe selected -->
+<sui-compact-select size={bp.sizeControl()} items={roles} formControlName="rol" selected={rolElegido} onSelectedChange={(e) => (rolElegido = e.detail)} />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-compact-select size={bp.sizeControl()} items={roles} formControlName="rol" />
+```
+
+## Ejemplo
+
+```html
+<sui-compact-select size={bp.sizeControl()} placeholder="Todos los roles" items={roles}
+                    selected={rolElegido} onSelectedChange={(e) => (rolElegido = e.detail)} />
+```

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

@@ -0,0 +1,204 @@
+---
+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
+
+<!-- generado por scripts/gen-docs.mjs — no editar a mano; `npm run docs` -->
+
+> **De dónde sale este doc.** El criterio es el del SUI Angular (`sui-compact-select-for-input`); la API es la de este
+> paquete, leída del código. Los ejemplos se pasaron de Angular de forma mecánica: lo literal va como
+> atributo (`only-icon`, `size="large"`), lo dinámico entre llaves (`size={expr}` → `el.size = expr`)
+> y los eventos como `onValueChange={…}` → `el.addEventListener('valueChange', …)`. `@if`, `@for` y
+> `<ng-template>` quedan como en Angular: se leen como pseudocódigo.
+>
+> **La API de aquí no es igual a la de Angular.** Lo que el texto nombre y figure en «Diferencias con
+> el SUI Angular» (dentro de API) aquí no existe.
+
+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 `slot="start"`
+de un `sui-input` con `leading-control`, 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:197` y `:206` (medido el 06-10-2026).
+
+| 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 · `small` y `xsmall` no se usan: D16, dueño 05-10-2026 |
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| moneda dentro del monto | `sui-input` `large` + este `large` | `sui-input` `medium` + este `medium` | mobile: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono · web: canon (dueño, 05-10-2026, D16) |
+
+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.
+
+### Por dispositivo (D16)
+
+Comparte fila con `input` y `select` en la tabla de D16 (dueño, 05-10-2026). El size lo decide el
+`sui-input` que lo contiene: el selector lleva **el mismo**.
+
+| dispositivo | size (input y selector) | nota |
+|---|---|---|
+| celular chico (< 380 px) | `large` (48) | interino: D16 pide `medium` con área tocable de 44, pero el DS todavía no la estira en `medium` (40); hasta que lo haga, el mismo que el celular |
+| celular (380–767 px) | `large` (48) | el selector toca de arriba a abajo (46) |
+| tablet táctil (`pointer: coarse`) | `large` (48) | también se toca; las opciones de un `medium` solo suben a 44 hasta 767 px |
+| computadora (`pointer: fine`) | `medium` (40) | `small` y `xsmall` no se usan |
+
+Ultrawide (≥ 1920 px): igual que la computadora.
+
+En master-pedidos: `size={bp.sizeControl()}` **en el `sui-input` y en el selector**, los dos con el
+mismo helper.
+
+## «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:197`) 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` -->
+
+| prop | atributo | tipo | default |
+|---|---|---|---|
+| `country` | `country` | `boolean` | `true` |
+| `disabled` | `disabled` | `boolean` | `false` |
+| `flag` | `flag` | `"abkhazia" \| "afghanistan" \| "aland-islands" \| "albania" \| "algeria" \| "american-samoa" \| "andorra" \| "angola" \| "anguilla" \| "antigua-and-barbuda" \| "argentina" \| "armenia" \| "aruba" \| "australia" \| "austria" \| "azerbaijan" \| "azores-islands" \| "bahamas" \| "bahrain" \| "balearic-islands" \| "bangladesh" \| "barbados" \| "basque-country" \| "belarus" \| "belgium" \| "belize" \| "benin" \| "bermuda" \| "bhutan" \| "bolivia" \| "bonaire" \| "bosnia-and-herzegovina" \| "botswana" \| "brazil" \| "british-columbia" \| "british-indian-ocean-territory" \| "british-virgin-islands" \| "brunei" \| "bulgaria" \| "burkina-faso" \| "burundi" \| "cambodia" \| "cameroon" \| "canada" \| "canary-islands" \| "cape-verde" \| "cayman-islands" \| "central-african-republic" \| "ceuta" \| "chad" \| "chile" \| "china" \| "christmas-island" \| "cocos-island" \| "colombia" \| "comoros" \| "cook-islands" \| "corsica" \| "costa-rica" \| "croatia" \| "cuba" \| "curacao" \| "cyprus" \| "czech-republic" \| "democratic-republic-of-congo" \| "denmark" \| "djibouti" \| "dominica" \| "dominican-republic" \| "east-timor" \| "ecuador" \| "egypt" \| "el-salvador" \| "england" \| "equatorial-guinea" \| "eritrea" \| "estonia" \| "ethiopia" \| "european-union" \| "falkland-islands" \| "faroe-islands" \| "fiji" \| "finland" \| "france" \| "french-polynesia" \| "gabon" \| "galapagos-islands" \| "gambia" \| "georgia" \| "germany" \| "ghana" \| "gibraltar" \| "greece" \| "greenland" \| "grenada" \| "guam" \| "guatemala" \| "guernsey" \| "guinea" \| "guinea-bissau" \| "guyana" \| "haiti" \| "hawaii" \| "honduras" \| "hong-kong" \| "hungary" \| "iceland" \| "india" \| "indonesia" \| "iran" \| "iraq" \| "ireland" \| "isle-of-man" \| "israel" \| "italy" \| "ivory-coast" \| "jamaica" \| "japan" \| "jersey" \| "jordan" \| "kazakhstan" \| "kenya" \| "kiribati" \| "kosovo" \| "kuwait" \| "kyrgyzstan" \| "laos" \| "latvia" \| "lebanon" \| "lesotho" \| "liberia" \| "libya" \| "liechtenstein" \| "lithuania" \| "luxembourg" \| "macao" \| "madagascar" \| "madeira" \| "malawi" \| "malaysia" \| "maldives" \| "mali" \| "malta" \| "marshall-island" \| "martinique" \| "mauritania" \| "mauritus" \| "melilla" \| "mexico" \| "micronesia" \| "moldova" \| "monaco" \| "mongolia" \| "montenegro" \| "montserrat" \| "morocco" \| "mozambique" \| "myanmar" \| "namibia" \| "nato" \| "nauru" \| "nepal" \| "netherlands" \| "new-zealand" \| "nicaragua" \| "niger" \| "nigeria" \| "niue" \| "norfolk-island" \| "north-korea" \| "northern-cyprus" \| "northern-marianas-islands" \| "norway" \| "oman" \| "orkney-islands" \| "ossetia" \| "pakistan" \| "palau" \| "palestine" \| "panama" \| "papua-new-guinea" \| "paraguay" \| "peru" \| "philippines" \| "pitcairn-islands" \| "poland" \| "portugal" \| "puerto-rico" \| "qatar" \| "rapa-nui" \| "republic-of-macedonia" \| "republic-of-the-congo" \| "romania" \| "russia" \| "rwanda" \| "saba-island" \| "sahrawi-arab-democratic-republic" \| "saint-kitts-and-nevis" \| "samoa" \| "san-marino" \| "sao-tome-and-prince" \| "sardinia" \| "saudi-arabia" \| "scotland" \| "senegal" \| "serbia" \| "seychelles" \| "sierra-leone" \| "singapore" \| "sint-eustatius" \| "sint-maarten" \| "slovakia" \| "slovania" \| "solomon-islands" \| "somalia" \| "somaliland" \| "south-africa" \| "south-korea" \| "south-sudan" \| "spain" \| "sri-lanka" \| "st-barts" \| "st-lucia" \| "st-vincent-and-the-grenadines" \| "sudan" \| "suriname" \| "swaziland" \| "sweden" \| "switzerland" \| "syria" \| "taijikistan" \| "taiwan" \| "tanzania" \| "thailand" \| "tibet" \| "togo" \| "tokelau" \| "tonga" \| "transnistria" \| "trinidad-and-tobago" \| "tunisia" \| "turkey" \| "turkmenistan" \| "turks-and-caicos" \| "tuvalu" \| "uganda" \| "ukraine" \| "united-arab-emirates" \| "united-kingdom" \| "united-nations" \| "united-states" \| "uruguay" \| "uzbekistan" \| "vanuatu" \| "vatican-city" \| "venezuela" \| "vietnam" \| "virgin-islands" \| "wales" \| "yemen" \| "zambia" \| "zimbabwe" \| null` | `null` |
+| `items` | — (solo por propiedad JS) | `SuiCompactSelectForInputItem[]` | `[]` |
+| `size` | `size` | `"large" \| "medium" \| "small" \| "xsmall"` | `'medium'` |
+| `value` | `value` | `string` | `''` |
+
+| evento | `event.detail` |
+|---|---|
+| `clicked` | `Event` |
+| `selectedChange` | `SuiCompactSelectForInputItem` |
+
+| método | firma |
+|---|---|
+| `closeMenu` | `closeMenu() => Promise<void>` |
+| `openMenu` | `openMenu() => Promise<void>` |
+| `toggleMenu` | `toggleMenu() => Promise<void>` |
+
+### Diferencias con el SUI Angular
+
+- **Props de Angular que aquí no existen:** `selected`
+<!-- api:fin -->
+
+Implementa `ControlValueAccessor`.
+
+## Trampas
+
+- **Va en `slot="start"`, no en `slot="prefix"`** (`slot="prefix"` no proyecta). El
+  `sui-input` necesita además `leading-control` (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` + `selectedChange` con `formControlName`.
+
+## Bien y mal
+
+**El tamaño del selector y del campo**
+
+```html
+<!-- ❌ mal: el selector en medium dentro de un input large; no cubre el campo (vitrina: master-preview/_guia-moleculas/campos.ts:247) -->
+<sui-input size="large" type="amount" label="Monto" leading-control>
+  <sui-compact-select-for-input slot="start" size="medium" country="false" items={monedas} />
+</sui-input>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-input size={bp.sizeControl()} type="amount" label="Monto" leading-control>
+  <sui-compact-select-for-input slot="start" size={bp.sizeControl()} country="false" items={monedas} />
+</sui-input>
+```
+
+**Dónde se proyecta**
+
+```html
+<!-- ❌ mal: slot="prefix" no proyecta y, sin leadingControl, el input no dibuja el divisor -->
+<sui-input size={bp.sizeControl()} type="amount" label="Monto">
+  <sui-compact-select-for-input slot="prefix" size={bp.sizeControl()} country="false" items={monedas} />
+</sui-input>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-input size={bp.sizeControl()} type="amount" label="Monto" leading-control>
+  <sui-compact-select-for-input slot="start" size={bp.sizeControl()} country="false" items={monedas} />
+</sui-input>
+```
+
+**Una moneda**
+
+```html
+<!-- ❌ mal: country arranca en true; una moneda no lleva bandera -->
+<sui-compact-select-for-input slot="start" size={bp.sizeControl()} items={monedas} selected={moneda} onSelectedChange={(e) => (moneda = e.detail)} />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-compact-select-for-input slot="start" size={bp.sizeControl()} country="false"
+                              items={monedas} selected={moneda} onSelectedChange={(e) => (moneda = e.detail)} />
+```
+
+## Ejemplo
+
+```html
+<sui-input label="Monto" type="amount" placeholder="0.00" size={bp.sizeControl()} leading-control value={monto} onValueChange={(e) => (monto = e.detail)}>
+  <sui-compact-select-for-input slot="start" size={bp.sizeControl()} country="false"
+                                items={monedas} selected={moneda} onSelectedChange={(e) => (moneda = e.detail)} />
+</sui-input>
+```