@ajuarezso/sui-design-system 0.20.0 → 0.21.0

package/docs/sui-inline-input/README.md

@@ -0,0 +1,104 @@
+---
+name: sui-inline-input
+selector: sui-inline-input
+resumen: Texto que se edita en su lugar: en reposo muestra el dato y un lápiz; al tocarlo, campo con ✓ y ✕
+alternativas: [sui-input (campo de formulario, siempre editable), sui-modal con sui-input (editar con más contexto o varios datos a la vez)]
+---
+
+# sui-inline-input
+
+Story: [Molecules/Input/Inline Input](https://sui-design-system.web.app/?path=/docs/molecules-input-inline-input--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** para corregir **un solo dato de una línea** en una lista o ficha, sin abrir un modal:
+renombrar una categoría de la carta, el alias de una dirección. En reposo se lee como texto con un
+lápiz; al tocar el lápiz pasa a campo con ✓ (confirmar) y ✕ (cancelar). Enter confirma y Escape
+cancela.
+
+**No lo uses** para:
+
+- Un formulario: `sui-input`, que siempre está editable.
+- Varios datos que se editan juntos o que necesitan explicación: un modal con sus `sui-input`.
+- Un dato con validación compleja o que dispara algo grande (precio, estado): mejor un flujo con
+  confirmación.
+
+Regla corta: **un dato, en su lugar, que se corrige rápido → inline · varios o delicados → modal.**
+
+## Qué variante usar
+
+> **La guía del DS no tiene página para este componente.** Viene del Figma («Inline Input»).
+> Todo lo de abajo es **propuesta, falta aprobación**.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos**. Hay listas con campos siempre
+> abiertos que se parecen (`pages/super-admin/master-settings/master-settings.html:99`, nombre de
+> cada categoría del home), pero ahí se editan varias filas y se guarda todo junto: está bien con
+> `sui-input`.
+
+| prop / evento | cuándo | fuente |
+|---|---|---|
+| `value` | El dato. `[(value)]` o `formControlName`, nunca los dos. | API |
+| `placeholder` | Lo que se ve si está vacío: «Sin nombre». **Siempre**: el default es «Placeholder text...». | propuesta, falta aprobación |
+| `leftIcon` | Un ícono que dice qué dato es (`price-tag-3-line` para una categoría). `false` si el texto se explica solo. El default es `user-3-line`. | propuesta, falta aprobación |
+| `editLabel` | Nombre accesible del lápiz: «Editar nombre». | propuesta, falta aprobación |
+| `error` | El valor escrito no sirve (vacío, repetido). Solo se ve en edición; no trae mensaje. | propuesta, falta aprobación |
+| `disabled` | Mientras se guarda. | propuesta, falta aprobación |
+| `(confirm)` | Guardar. Llega el texto nuevo. | API |
+| `(cancel)` · `(edit)` | Volver atrás sin guardar · avisar que se empezó a editar. | API |
+
+## Tamaño en mobile y en web
+
+**No tiene `size`**: mide 36 px de alto y sus botones (lápiz, ✓, ✕) son de 24 × 24. El texto ya
+sube a 16 px en mobile (sin zoom de iOS). **No tiene tamaño suficiente para mobile**: los botones
+de 24 px quedan lejos de los 44 que pide un dedo. Usarlo en el panel web; en el teléfono, editar
+con un `sui-input` `large`.
+
+| uso | mobile | web |
+|---|---|---|
+| renombrar en una lista | `sui-input` `large` en un modal | este, 36 px |
+
+## «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) | no hay datos que se corrijan sueltos en una lista | renombrar una categoría de la carta en web, o el alias de una dirección guardada |
+| `leftIcon` default (`user-3-line`) | casi nunca el dato es una persona | el nombre de un miembro del equipo |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `value` · model, `[(value)]` | `string` | `''` |
+| `placeholder` | `string` | `'Placeholder text...'` |
+| `leftIcon` | `string \| false` | `'user-3-line'` |
+| `error` | `boolean` | `false` |
+| `disabled` | `boolean` | `false` |
+| `editLabel` | `string` | `'Editar'` |
+
+| output | payload |
+|---|---|
+| `confirm` | `string` |
+| `cancel` | `void` |
+| `edit` | `void` |
+<!-- api:fin -->
+
+Implementa `ControlValueAccessor`.
+
+## Trampas
+
+- **Los defaults están pensados para la story**: `placeholder` «Placeholder text...» y
+  `leftIcon` `user-3-line`. Pasa los dos siempre.
+- `error` no trae mensaje: decir qué falta en otro lado (toast o hint cercano).
+- Cancelar restaura el texto de antes; `(confirm)` es el único momento de guardar.
+- Ocupa todo el ancho de su contenedor.
+
+## Ejemplo
+
+```html
+<sui-inline-input [(value)]="nombreCategoria" placeholder="Sin nombre" leftIcon="price-tag-3-line"
+                  editLabel="Editar nombre" [error]="!nombreCategoria().trim()"
+                  (confirm)="renombrar($event)" />
+```

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

@@ -0,0 +1,101 @@
+---
+name: sui-inline-select
+selector: sui-inline-select
+resumen: Selector sin caja que vive dentro de una frase o al final de un campo («Mostrar en USD ▾»)
+alternativas: [sui-compact-select (filtro suelto con caja propia), sui-compact-select-for-input (al inicio de un sui-input, con divisor), sui-select (campo de formulario)]
+---
+
+# sui-inline-select
+
+Story: [Molecules/Select/Inline Select](https://sui-design-system.web.app/?path=/docs/molecules-select-inline-select--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** para cambiar un valor sin romper la lectura: dentro de una frase («Tus precios se muestran
+en **USD ▾**») o al final de un `sui-input` (una unidad o moneda a la derecha). No tiene borde, ni
+fondo, ni padding: se lee como texto con una flecha.
+
+**No lo uses** para:
+
+- Un campo de formulario: `sui-select`.
+- Un filtro suelto en una barra: `sui-compact-select`.
+- Algo que la persona tiene que encontrar sin buscarlo: sin caja no parece un control. Si el dato
+  importa, va en un campo.
+
+Regla corta: **dentro de una frase o al final de un campo → inline · campo → select.**
+
+## Qué variante usar
+
+> **En la guía del DS es la variante `inline` del select**, con dos ejemplos: país y «con input»
+> (al final de un campo). La página del input lo repite en «With Inline Select». No dice cuándo.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos**.
+
+| prop | cuándo | fuente |
+|---|---|---|
+| `type="icon"` (default) | Con un ícono delante (atenuado hasta que se elige). | 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` | `{ value, label, sublabel?, icon?, flag?, disabled? }`. | API |
+| `selected` / `selectedChange` | La opción elegida. O `formControlName`, nunca los dos. | API |
+| `value` · `icon` · `flag` | Lo que se ve si no hay `selected`. | API |
+| `disabled` | Mientras carga. | API |
+| `clicked` | Solo si la pantalla arma su propio menú. | API |
+
+## Tamaño en mobile y en web
+
+**No tiene `size`**: mide 20 px de alto (la línea del texto). Dentro de una frase el área que se toca
+es la palabra, muy por debajo de los 44 px. **No tiene tamaño suficiente para mobile**: en el
+teléfono, solo dentro de un `sui-input` (que da el alto) o con la frase en una fila que se toque
+entera.
+
+| uso | mobile | web |
+|---|---|---|
+| dentro de una frase | evitar: usar `sui-select` | 20 px, en línea con el texto |
+| al final de un `sui-input` | el alto lo da el input (`large`) | el alto lo da el input (`medium`) |
+
+## «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) | ninguna frase de la app cambia un valor | «Mostrar ventas de **esta semana ▾**» en el inicio del local (web) |
+| `type="country"` | todo es Perú | si se abre otro país |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `type` | `'icon' \| 'country'` | `'icon'` |
+| `value` | `string` | `''` |
+| `icon` | `string \| null` | `null` |
+| `flag` | `SuiFlagName \| null` | `null` |
+| `items` | `readonly SuiInlineSelectItem<T>[]` | `[]` |
+| `selected` · model, `[(selected)]` | `SuiInlineSelectItem<T> \| null` | `null` |
+| `disabled` | `boolean` | `false` |
+
+| output | payload |
+|---|---|
+| `clicked` | `Event` |
+| `selectedChange` | `SuiInlineSelectItem<T>` |
+<!-- api:fin -->
+
+Implementa `ControlValueAccessor`.
+
+## Trampas
+
+- **Riesgo en iPhone (no verificado en dispositivo):** el host escucha `touchend` y hace `blur()`,
+  el mismo patrón que en `sui-compact-select` cancelaba el clic de iOS. Probar en un iPhone antes
+  del primer uso.
+- Al final de un `sui-input` va en `data-slot="end"` con `[trailingControl]="true"`.
+- No mezclar `[(selected)]` con `formControlName`.
+- El menú mide al menos 200 px aunque el texto sea corto.
+
+## Ejemplo
+
+```html
+<p>Mostrar ventas de
+  <sui-inline-select [items]="periodos" [(selected)]="periodo" />
+</p>
+```

package/docs/sui-input/README.md

@@ -0,0 +1,244 @@
+---
+name: sui-input
+selector: sui-input
+resumen: Campo de una sola línea para escribir un dato (nombre, teléfono, monto, búsqueda)
+alternativas: [sui-textarea (texto de varias líneas), sui-select (elegir de una lista), sui-counter-input (una cantidad con − y +), sui-tag-input (varios valores cortos), sui-otp-input (código de verificación), sui-inline-input (editar un dato en su lugar, con lápiz)]
+---
+
+# sui-input
+
+Story: [Molecules/Input/Input](https://sui-design-system.web.app/?path=/docs/molecules-input-input--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** para todo dato de una línea que la persona escribe: nombre, correo, teléfono, DNI,
+placa, dirección, referencia, monto, fecha, y para los buscadores. Trae adentro el label, el
+hint, el error, el prefijo `S/`, la X de limpiar y el ojo de la contraseña: no se arman a mano.
+
+**No lo uses** para:
+
+- Texto que puede ocupar más de una línea (motivo, nota al repartidor, descripción): `sui-textarea`.
+- Elegir entre opciones que ya existen: `sui-select` (o radio / segmented si son pocas).
+- Una cantidad que se sube y se baja de a uno: `sui-counter-input`.
+- Un código de verificación de N dígitos: `sui-otp-input`.
+- Varios valores cortos que se van sumando: `sui-tag-input`.
+- Un `<input>` nativo con CSS propio: hoy quedan **6** (`pages/products/add-product/add-product.html:130`,
+  `:143`, `:189`, `:275`, `pages/apps/apps.html:12`, `pages/employees/employees.html:43`).
+
+Regla corta: **una línea → input · varias → textarea · de una lista → select · cantidad → counter.**
+
+## Qué variante usar
+
+> **La guía del DS casi no dice «cuándo».** Su página del input lo define como el campo para
+> escribir un valor de una sola línea y muestra ejemplos (ícono, tamaños, afijos, label y hint,
+> contraseña con ojo, contraseña con niveles, error, con botón, tarjeta, con select, con tags,
+> fecha y contador) sin do/don't. Lo marcado «según la guía del DS» sale de esos ejemplos; el
+> resto es **propuesta, falta aprobación**, salvo lo que ya es canon (CLAUDE.md, CANON-SUI).
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-badge`, más
+> `master-ejercicios`): **194 usos en 61 archivos**. Tipos: 53 `text`, 36 sin `type` (`text`),
+> 32 `amount`, 22 `number`, 18 `tel`, 10 `email`, 10 `search`, 7 `date`, 3 `password`, 2 `url`,
+> 1 `datetime-local`. Tamaños: 163 sin `size` (`medium`), 18 `large`, 3 `xlarge`, 3 `medium`,
+> 2 `small`, 5 dinámicos.
+
+### `type` — qué dato es
+
+El `type` decide el teclado del teléfono y el filtro de teclas. Por dentro, `number`, `tel`,
+`amount` y `card` son un `<input type="text">`: el componente filtra lo que se tipea.
+
+| type | cuándo | fuente |
+|---|---|---|
+| `text` (default) | Nombre, dirección, referencia, placa, DNI (con `inputmode="numeric"`). | según la guía del DS (tipo nativo) |
+| `email` | Correo. Pide el teclado con `@`. Va con `autocomplete="email"`. | según la guía del DS (ejemplo con label y hint) |
+| `tel` | Celular peruano de 9 dígitos, con `[maxlength]="9"` y placeholder `987 654 321`. | según la guía del DS (tipo nativo); el formato es propuesta |
+| `amount` | **Todo monto en soles**, siempre con `prefix="S/"` y placeholder `0.00`. Pone comas de miles y dos decimales al salir. | canon (CANON-SUI §5.5, 27-07-2026) |
+| `number` | Un entero que no es dinero: minutos, kilómetros, cupos, porcentaje. Si es dinero, `amount`. | propuesta, falta aprobación |
+| `search` | **Todo buscador.** Pide la lupa en el teclado sola (y no lleva `inputmode`). | canon (CLAUDE.md «La lupa del teclado», 14-08-2026) |
+| `password-toggle` | **Toda contraseña**: login y registro. El ojo deja revisar lo escrito en el teléfono. | según la guía del DS (sus dos ejemplos de contraseña traen el ojo) |
+| `password` | No usar: sin ojo, en el teléfono no se puede revisar lo tipeado. | propuesta, falta aprobación |
+| `date` / `datetime-local` | Una fecha suelta en un formulario del panel («Válido hasta», «Fecha del gasto»). Abre el selector nativo. Para un calendario propio, ver `sui-datepicker`. | propuesta, falta aprobación |
+| `url` | Un enlace (imagen de campaña). | según la guía del DS (ejemplo con afijo `https://`) |
+| `card` | No usar hoy: no hay pago con tarjeta. | según la guía del DS (ejemplo «Payment Input») |
+| `button` | No usar hoy: campo de solo lectura con una acción al lado (copiar enlace). | según la guía del DS (ejemplo «With Button») |
+
+**Usos de hoy que rompen la regla:**
+
+- **11 buscadores con `type="text"`** → `type="search"` (hoy no sale la lupa en el teclado):
+  `pages/customers/customers.html:28`, `pages/products/products.html:71`,
+  `components/map-picker-modal/map-picker-modal.html:14`, `pages/settings/team/team.html:59`,
+  `pages/super-admin/super-admin.html:63`…
+- **21 `amount` sin `prefix="S/"`**, 15 de ellos con «(S/)» metido en el label:
+  `pages/super-admin/master-settings/master-settings.html:273` («Mínimo (S/)»),
+  `pages/business-onboarding/step-product/step-product.html:33` («Precio (S/)», placeholder «Ej: 25»),
+  `pages/super-admin/master-drivers/master-drivers.html:99`.
+- **2 montos con `type="number"`** → `amount` + `prefix`: `pages/super-admin/super-admin.html:649`
+  («Monto a cobrar»), `pages/super-admin/master-gastos/master-gastos.html:193` («Monto»).
+- **3 `password` sin ojo** → `password-toggle`: `pages/auth/login/login.html:71`,
+  `pages/auth/register/register.html:121`, `:133`.
+
+### Las piezas
+
+| prop | cuándo | fuente |
+|---|---|---|
+| `label` | Siempre, salvo en un buscador (ahí el placeholder y la lupa ya dicen qué es). Una a tres palabras, sentence case. | según la guía del DS (ejemplo con label); largo: canon (CANON-SUI §5.4) |
+| `required` | Campo obligatorio: asterisco rojo. | según la guía del DS (`Email Address*`) |
+| `sublabel` | **«(Opcional)»**, entre paréntesis, en un campo que no es obligatorio, en vez de escribir «(opcional)» en el label. También «(No editable)». El componente no pone los paréntesis: sin ellos queda pegado («ReferenciaOpcional»). | según la guía del DS (`(Optional)`) y canon (README de `sui-form-label`) |
+| `tooltip` | Una aclaración que no entra en el hint. Hoy sin uso. | según la guía del DS (ícono de info del label) |
+| `hint` | Una línea que ayuda a llenar bien: «9 dígitos, empezando con 9», «Mínimo 6 caracteres». | según la guía del DS |
+| `hintIcon` | No usar hoy: el hint se lee solo; el ícono suma ruido en formularios largos. | propuesta, falta aprobación |
+| `error` + `errorMessage` | El error va **con** su mensaje, que reemplaza al hint. `error` solo pinta el borde. | según la guía del DS (`Has Error`) |
+| `placeholder` | Un ejemplo del formato, no el nombre del campo: «987 654 321», «Ej: Av. Perú 224», «0.00». Elipsis `…`, no `...`. | canon (CANON-SUI §5.2 y §5.5) |
+| `prefix` | `S/` en los montos. Nada más hoy. | canon (CANON-SUI §5.5) |
+| `icon` + `iconPosition` | `search-line` a la izquierda en buscadores; `map-pin-2-line` en un campo de dirección de solo lectura. `right` no tiene caso hoy. | según la guía del DS (ejemplo con ícono); el «cuándo» es propuesta |
+| `showClear` | Buscadores: la X borra la búsqueda de un toque. | propuesta, falta aprobación (ya lo hacen los 3 buscadores del cliente) |
+| `fullRadius` | Solo el buscador principal del cliente (home, carta del local, rubro), que va encima de chips redondos. Los formularios, con el radio normal. | propuesta, falta aprobación (ya es práctica: `pages/customer/store-browser/store-browser.html:43`) |
+| `maxlength` | Teléfono (9), nombres con tope, códigos. | propuesta, falta aprobación |
+| `inputmode` | Solo cuando el `type` no pide el teclado correcto: un DNI o un número de cuenta en `type="text"` → `numeric`. **Nunca `search`.** | canon (CLAUDE.md «La lupa del teclado», 14-08-2026) |
+| `enterkeyhint` | `next` en formularios de varios pasos, `send` en un chat, `done` en el último campo. El buscador ya pide `search` solo. | propuesta, falta aprobación |
+| `autocomplete` | Siempre en datos de la persona: `name`, `given-name`, `email`, `tel`, `current-password`, `new-password`. `off` en buscadores. | propuesta, falta aprobación |
+| `readonly` | Un dato que se muestra en forma de campo pero se elige en otro lado (el distrito que sale del mapa). | propuesta, falta aprobación |
+| `disabled` | Mientras se envía, o cuando el campo no aplica todavía. | según la guía del DS |
+| `min` / `max` | **No hacen nada** (el `<input>` real es `text`). Validar en el componente que lo usa. | código del DS |
+| `paste` | `false` solo si pegar un monto armaría un valor equivocado. Hoy sin uso. | propuesta, falta aprobación |
+| `closeOnOutsideClick` | Déjalo en `true`: tocar fuera baja el teclado. `false` solo si la pantalla maneja el foco a mano (1 uso). | código del DS |
+| `leadingControl` / `trailingControl` / `leadingDivider` / `trailingDivider` | Componer un control adentro: el país del teléfono (`sui-compact-select-for-input` en `[data-slot=start]`) o una acción al lado. Hoy sin uso. | según la guía del DS (ejemplos «With Select» y «With Button») |
+
+**Usos de hoy que rompen la regla:**
+
+- **Los 24 `sublabel` de hoy van sin paréntesis** (input, textarea y select: 17 «Opcional», 4 «No editable», 2 «Máximo a descontar», 1 «Solo interno») y se leen pegados al label → «(Opcional)»:
+  `components/address-form-modal/address-form-modal.html:134`, `pages/discounts/discounts.html:170`,
+  `pages/customer/profile/profile.html:234`.
+- **16 «(opcional)» escritos en el label** (input, textarea y select juntos) → `sublabel="(Opcional)"`:
+  `pages/driver/driver-profile/driver-profile.html:431` («Placa (opcional)»),
+  `pages/super-admin/master-plans/master-plans.html:131`, `pages/super-admin/super-admin.html:661`.
+- **13 placeholders con `...`** (input, textarea y select) → `…`: `pages/customers/customers.html:28`
+  («Buscar clientes...»), `pages/products/products.html:71`, `components/address-form-modal/address-form-modal.html:134`.
+- **2 campos sin label en el login** (el placeholder hace de rótulo): `pages/auth/login/login.html:64`, `:71`.
+- **6 campos con el label afuera** (`<sui-form-label>` suelto encima) en el onboarding del
+  repartidor: `pages/driver-onboarding/step-info/step-info.html:37`. Funciona, pero el error y el
+  `required` quedan desconectados del campo: va el `label` del propio input.
+
+## Tamaño en mobile y en web
+
+Los altos de `sui-input` son **los del botón a propósito** (`large` 48 y `xlarge` 52 son
+extensión de SUI): un campo y un botón puestos lado a lado miden lo mismo. La guía del DS solo
+tiene `medium` (40), `small` (36) y `xsmall` (32).
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| campo de formulario | `large` (48), igual que el botón del footer | `medium` (40) | propuesta, falta aprobación |
+| buscador principal del cliente (home, carta, rubro) | `xlarge` (52) + `fullRadius` | `xlarge` + `fullRadius` | propuesta (ya es práctica en las 3 pantallas) |
+| buscador o filtro de una lista del panel | `large` (48) | `small` (36) | propuesta (ya es práctica en `pages/orders/orders.html:72`) |
+| campo dentro de una tabla o fila densa | no aplica | `xsmall` (32) | según la guía del DS |
+
+```html
+<sui-input [size]="bp.isMobile() ? 'large' : 'medium'" label="Teléfono" type="tel" … />
+<!-- bp = BreakpointsService de la app -->
+```
+
+No uses `bp.controlSize()` en campos: da `xlarge` (52) en mobile, más alto que el botón `large`
+del footer (3 usos hoy, `pages/customer/checkout/checkout.html:392`). El texto sube solo a 16 px
+en mobile (evita el zoom de iOS): no hace falta pedirlo.
+
+Hoy: **163 sin `size`** quedan en 40 px también en el teléfono (cumple el mínimo, no alinea con el
+botón `large`).
+
+## «No usar»: por qué no hoy y cuándo sí
+
+Nada se borra del DS. Lo marcado «no usar» no tiene caso en la app de hoy; si un flujo nuevo cae
+en la columna de la derecha, se usa.
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| `type="card"` | no hay pago con tarjeta | el día que entre Culqi o Niubiz y el número se tipee en la app |
+| `type="button"` | no hay campos con acción pegada | «Copia tu enlace de invitación» o el link público de la tienda con botón de copiar |
+| `type="password"` | sin ojo no se puede revisar en el teléfono | nunca en login; quizá un PIN que no debe mostrarse |
+| `type="time"` | los horarios usan `sui-time-picker` | una hora suelta en un formulario del panel |
+| `hintIcon` | el hint se lee solo | un hint que es advertencia («No se puede cambiar después») |
+| `tooltip` | el hint alcanza | un término técnico del panel (CCI, RUC) que no entra en una línea |
+| `iconPosition="right"` | el ícono de la derecha se confunde con una acción | un dato con unidad visual (un ícono de moto en «Placa») |
+| `paste=false` | pegar ayuda más de lo que rompe | un monto que llega con formato raro desde otra app |
+| afijos con control (`leadingControl`…) | solo hay teléfonos de Perú (+51) | teléfono con código de país, o monto con moneda (ver `sui-compact-select-for-input`) |
+| `size="xsmall"` | no hay campos dentro de tablas | edición rápida de un precio dentro de una tabla del panel |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `size` | `'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge'` | `'medium'` |
+| `type` | `'text' \| 'email' \| 'password' \| 'number' \| 'tel' \| 'url' \| 'search' \| 'amount' \| 'card' \| 'password-toggle' \| 'date' \| 'datetime-local' \| 'time' \| 'button'` | `'text'` |
+| `placeholder` | `string` | `''` |
+| `disabled` | `boolean` | `false` |
+| `readonly` | `boolean` | `false` |
+| `fullRadius` | `boolean` | `false` |
+| `error` | `boolean` | `false` |
+| `errorMessage` | `string \| null` | `null` |
+| `label` | `string \| null` | `null` |
+| `hint` | `string \| null` | `null` |
+| `hintIcon` | `string \| null` | `null` |
+| `autocomplete` | `string \| null` | `null` |
+| `inputmode` | `'none' \| 'text' \| 'decimal' \| 'numeric' \| 'tel' \| 'search' \| 'email' \| 'url' \| null` | `null` |
+| `enterkeyhint` | `'enter' \| 'done' \| 'go' \| 'next' \| 'previous' \| 'search' \| 'send' \| null` | `null` |
+| `sublabel` | `string \| null` | `null` |
+| `required` | `boolean` | `false` |
+| `tooltip` | `string \| null` | `null` |
+| `value` · model, `[(value)]` | `string` | `''` |
+| `maxlength` | `number \| null` | `null` |
+| `min` | `number \| null` | `null` |
+| `max` | `number \| null` | `null` |
+| `paste` | `boolean` | `true` |
+| `prefix` | `string \| null` | `null` |
+| `showClear` | `boolean` | `false` |
+| `icon` | `string \| null` | `null` |
+| `iconPosition` | `'left' \| 'right'` | `'left'` |
+| `closeOnOutsideClick` | `boolean` | `true` |
+| `leadingDivider` | `boolean` | `false` |
+| `trailingDivider` | `boolean` | `false` |
+| `leadingControl` | `boolean` | `false` |
+| `trailingControl` | `boolean` | `false` |
+
+Outputs: ninguno.
+<!-- api:fin -->
+
+`value` es `model<string>`: `[(value)]` o `[value]` + `(valueChange)`. También funciona con
+`formControlName` y `[(ngModel)]` (implementa `ControlValueAccessor`).
+
+Slots: `[data-slot=start]` y `[data-slot=end]` (íconos que no son RemixIcon o controles
+proyectados con `leadingControl` / `trailingControl`).
+
+## Trampas
+
+- **`maxlength` va en minúscula** aquí; en `sui-textarea` es `maxLength`.
+- **`min` y `max` no validan nada**: el `<input>` real es `type="text"` y el navegador los ignora.
+- **`amount` devuelve el número sin comas** («1234.50») aunque muestre «1,234.50», y rellena los
+  decimales al salir del campo. Si el padre hace `toFixed` y lo devuelve, compara con `parseFloat`,
+  no como texto (ver CLAUDE.md, bug de minOrder). Lo cubren 26 tests en `sui-input.spec.ts`.
+- **Nunca `inputmode="search"`**: en Android tapa la lupa del teclado. `type="search"` ya la pide.
+- **Un `tel` con `[maxlength]="9"` y placeholder `987 654 321`**: el filtro deja escribir espacios;
+  quien copie el formato del placeholder llega al tope antes del último dígito. Limpiar espacios en
+  el `(valueChange)` o no poner espacios en el placeholder.
+- `showClear` solo aparece con texto escrito y si el campo no está `disabled` ni `readonly`.
+- `error` sin `errorMessage` pinta el borde y no dice qué pasa.
+- El label no crece con el campo: en `large` y `xlarge` se queda en `medium` a propósito.
+- Tocar fuera baja el teclado (`closeOnOutsideClick`). Ya distingue tocar otro campo: no hace falta
+  agregar lógica de blur en la pantalla.
+- El `(keydown.enter)` puesto en el host funciona: el evento sube desde el `<input>` de adentro.
+
+## Ejemplo
+
+```html
+<!-- Campo de formulario -->
+<sui-input label="Teléfono" [required]="true" type="tel" [maxlength]="9" autocomplete="tel"
+           placeholder="987654321" hint="9 dígitos, empezando con 9"
+           [size]="bp.isMobile() ? 'large' : 'medium'" [(value)]="telefono" />
+
+<!-- Monto -->
+<sui-input label="Monto de la compra" type="amount" prefix="S/" placeholder="0.00" [(value)]="monto" />
+
+<!-- Buscador principal del cliente -->
+<sui-input type="search" icon="search-line" placeholder="Busca negocios…" size="xlarge"
+           [fullRadius]="true" [showClear]="true" autocomplete="off" [(value)]="busqueda" />
+```

package/docs/sui-integration-switch/README.md

@@ -0,0 +1,142 @@
+---
+name: sui-integration-switch
+selector: sui-integration-switch
+resumen: Integración con otro servicio — logo, nombre, qué hace, botón «Administrar» y el interruptor para prenderla
+alternativas: [sui-switch-card (un ajuste propio de la app, sin logo ni «Administrar»), sui-switch-label (un ajuste en una lista), sui-content-card type="brand" (mostrar que un servicio está conectado, sin prender ni apagar)]
+---
+
+# sui-integration-switch
+
+Story: [Molecules/Integration Switch](https://sui-design-system.web.app/?path=/docs/molecules-integration-switch--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** para conectar o desconectar un servicio de terceros que además tiene su propia
+configuración: cobrar con tarjeta por Culqi o Izipay, avisar por WhatsApp Business, calcular el
+envío con Mapbox.
+
+**No lo uses** para:
+
+- Un ajuste de la app (notificaciones, ubicación, disponible): `sui-switch-card` o
+  `sui-switch-label`.
+- Mostrar que algo está conectado sin dejar apagarlo: `sui-content-card type="brand"` con un badge.
+- Elegir uno de varios servicios: `sui-radio-card type="brand"`.
+
+Regla corta: **servicio externo que se prende y se configura → integration-switch · ajuste propio
+→ switch-card.**
+
+## Qué variante usar
+
+> **La guía del DS no tiene página de la integration switch.** De la guía sale lo del switch que
+> lleva adentro: **«para prender o apagar un ajuste de forma inmediata»**.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-card`): **0
+> usos**. La app no conecta servicios de terceros desde la interfaz: todo lo de abajo es para
+> cuando lo haga.
+
+### `type` × `appearance`
+
+| combinación | cuándo | fuente |
+|---|---|---|
+| `horizontal` · `card` (default) | Una integración suelta en una pantalla de ajustes de web. | propuesta |
+| `vertical` · `card` | Una grilla de integraciones, o la misma en mobile (el «Administrar» baja a ancho completo). | propuesta |
+| `horizontal` · `list` | Una lista de integraciones dentro de una card que ya pone el borde. | propuesta |
+| `vertical` · `list` | Ver «No usar». | propuesta |
+
+### Las piezas
+
+| prop | cuándo | fuente |
+|---|---|---|
+| `title` | Siempre. El nombre del servicio: «WhatsApp Business». | propuesta |
+| `description` | Qué hace conectarlo, en una línea: «Avisa al cliente por WhatsApp cuando su pedido sale del local.» | propuesta |
+| `brandIconSrc` | El logo del servicio (`assets/brand/brand-logos/<marca>-original.svg`). | propuesta |
+| `brandIcon` | Un ícono Remix cuando no hay logo. | propuesta |
+| logo proyectado `[sui-integration-brand]` | Un `sui-brand-logo` u otro elemento propio. | propuesta |
+| `manage` (`true`, dice «Administrar») | Siempre que el servicio tenga configuración. El default ya está en español (03-10-2026). | propuesta |
+| `[manage]="false"` | El servicio no se configura: solo se prende. | propuesta |
+| `showToggle=false` | Se administra pero no se apaga desde aquí. | propuesta |
+| `badge` | Integración nueva. Con string sale naranja `light`; pasa el objeto (`purple` para lo nuevo, según el badge). | propuesta |
+| `disabled` | Falta un dato para conectarla (el RUC, la cuenta). | propuesta |
+| `[active]` + `(activeChange)` | El estado. | propuesta |
+
+**Usos de hoy que rompen las reglas:** 0 (no hay usos).
+
+## Tamaño en mobile y en web
+
+No tiene `size`.
+
+| uso | mobile | web |
+|---|---|---|
+| interruptor | **32 × 20 fijo: bajo el piso de mobile** | 32 × 20 |
+| «Administrar» | **36 de alto: bajo el piso de 44** | 36 |
+| layout | `vertical` | `horizontal` |
+
+```html
+<sui-integration-switch [type]="bp.isMobile() ? 'vertical' : 'horizontal'" … />
+```
+
+**No llega al tamaño de mobile.** El switch es `sui-switch` `medium` fijo y el botón mide 36. Antes
+de usarlo en el teléfono hace falta un `size` en el DS (no se inventó aquí).
+
+## «No usar»: por qué no hoy y cuándo sí
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| todo el componente (0 usos) | no hay integraciones; además le falta tamaño para mobile | conectar Culqi / Izipay o WhatsApp Business desde el panel del local (web primero) |
+| `vertical` · `list` | sin borde y en columna, el bloque se pierde | casi nunca: una sola integración destacada en una pantalla vacía |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `type` | `'horizontal' \| 'vertical'` | `'horizontal'` |
+| `appearance` | `'card' \| 'list'` | `'card'` |
+| `title` | `string` | `''` |
+| `description` | `string \| null` | `null` |
+| `brandIconSrc` | `string \| null` | `null` |
+| `brandIcon` | `string \| null` | `null` |
+| `badge` | `SuiBadgeConfig \| string \| null` | `null` |
+| `manage` | `SuiIntegrationManageConfig \| string \| boolean \| null` | `true` |
+| `showToggle` | `boolean` | `true` |
+| `disabled` | `boolean` | `false` |
+| `active` | `boolean` | `false` |
+
+| output | payload |
+|---|---|
+| `activeChange` | `boolean` |
+| `manageClick` | `MouseEvent` |
+<!-- api:fin -->
+
+```ts
+interface SuiIntegrationManageConfig { label?: string; icon?: string; }   // icon default 'settings-2-line'
+```
+
+Slot: `[sui-integration-brand]` (reemplaza al logo). Implementa `ControlValueAccessor`.
+
+## Trampas
+
+- **`manage` arranca en `true` y dice «Administrar»** (hasta el 03-10-2026 decía «Manage»). Sin
+  configuración, `[manage]="false"`.
+- **Es controlada**: `active` es input y `activeChange` solo avisa; sin actualizar tu señal el
+  interruptor no se mueve.
+- El estado se llama `active`, no `checked` (como en `sui-switch-label`).
+- El interruptor no tiene `size`: siempre `medium`.
+- En `vertical` el interruptor va arriba a la derecha y «Administrar» abajo a ancho completo.
+- `appearance="list"` no tiene borde ni fondo ni padding: va dentro de algo que los ponga.
+- El host borra el atributo `title` del DOM; el título se ve como texto, no como `aria-label`.
+
+## Ejemplo
+
+```html
+<sui-integration-switch
+  title="WhatsApp Business"
+  description="Avisa al cliente por WhatsApp cuando su pedido sale del local."
+  brandIconSrc="assets/brand/brand-logos/whatsapp-original.svg"
+  manage="Administrar"
+  [active]="whatsappActivo()"
+  (activeChange)="cambiarWhatsapp($event)"
+  (manageClick)="abrirAjustesWhatsapp()" />
+```