@ajuarezso/sui-design-system 0.24.1 → 0.25.1

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

@@ -28,7 +28,7 @@ Regla corta: **un dato, en su lugar, que se corrige rápido → inline · varios
 ## 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**.
+> Las reglas de abajo son **canon (aprobado por el dueño, 05-10-2026)**; las filas «API» describen el componente.
 >
 > 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:101`, nombre de
@@ -38,11 +38,11 @@ Regla corta: **un dato, en su lugar, que se corrige rápido → inline · varios
 | 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 genérico es «Escribe aquí…» (en español desde el 04-10-2026). | 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 |
+| `placeholder` | Lo que se ve si está vacío: «Sin nombre». **Siempre**: el default genérico es «Escribe aquí…» (en español desde el 04-10-2026). | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `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`. | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `editLabel` | Nombre accesible del lápiz: «Editar nombre». | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `error` | El valor escrito no sirve (vacío, repetido). Solo se ve en edición; no trae mensaje. | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `disabled` | Mientras se guarda. | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
 | `(confirm)` | Guardar. Llega el texto nuevo. | API |
 | `(cancel)` · `(edit)` | Volver atrás sin guardar · avisar que se empezó a editar. | API |
 
@@ -51,13 +51,25 @@ Regla corta: **un dato, en su lugar, que se corrige rápido → inline · varios
 **No tiene `size`**: mide 38 px de alto (8 + 20 + 8 de padding y línea, más 1 + 1 de borde) y sus
 botones (lápiz, ✓, ✕) son de 24 × 24 (ícono de 20 + 2 de padding). En edición el texto 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`.
+de 24 px quedan lejos de los 44 que pide un dedo. Usarlo en el panel web; en el teléfono y en la
+tablet táctil, editar con un `sui-input` `large`.
 
 | uso | mobile | web |
 |---|---|---|
 | renombrar en una lista | `sui-input` `large` en un modal | este, 38 px |
 
+### Por dispositivo (D16)
+
+**No tiene `size`**: mide 38 px fijos y sus botones son de 24, así que no hay escala que repartir
+por dispositivo. Lo que sí aplica es la regla de lo que se toca (D16, dueño 05-10-2026): en toda
+pantalla táctil (celular chico, celular y tablet con `pointer: coarse`) los botones de 24 no llegan
+a 44, y ahí se edita con un `sui-input` en un modal. Este queda para la computadora (y el
+ultrawide, igual que ella). La condición es `bp.tactil()` y no `bp.isMobile()`: con `isMobile` el
+iPad se queda con los botones de 24.
+
+En master-pedidos: `@if (bp.tactil())` → `sui-input` con `[size]="bp.sizeControl()"` en un modal;
+si no, `sui-inline-input`.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -90,12 +102,58 @@ Implementa `ControlValueAccessor`.
 
 ## Trampas
 
-- **Los defaults están pensados para la story**: `placeholder` «Placeholder text...» y
+- **Los defaults están pensados para la story**: `placeholder` «Escribe aquí…» 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.
 
+## Bien y mal
+
+Alias de una dirección
+
+```html
+<!-- ❌ mal: con los defaults, vacío dice «Escribe aquí…» y el ícono es una persona (user-3-line) -->
+<sui-inline-input [(value)]="alias" (confirm)="guardarAlias($event)" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-inline-input [(value)]="alias" placeholder="Sin alias" leftIcon="map-pin-line"
+                  editLabel="Editar alias" (confirm)="guardarAlias($event)" />
+```
+
+Formulario reactivo
+
+```html
+<!-- ❌ mal: dos dueños del mismo valor; [(value)] y formControlName se pisan -->
+<sui-inline-input formControlName="nombre" [(value)]="nombre" placeholder="Sin nombre" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-inline-input formControlName="nombre" placeholder="Sin nombre" leftIcon="price-tag-3-line"
+                  editLabel="Editar nombre" (confirm)="renombrar($event)" />
+```
+
+Renombrar en una pantalla táctil
+
+```html
+<!-- ❌ mal: con bp.isMobile() la tablet táctil se queda con el lápiz, el ✓ y el ✕ de 24 px -->
+@if (!bp.isMobile()) {
+  <sui-inline-input [(value)]="nombreCategoria" placeholder="Sin nombre" leftIcon="price-tag-3-line" />
+}
+```
+
+```html
+<!-- ✅ bien (el sui-input va dentro de un sui-modal) -->
+@if (bp.tactil()) {
+  <sui-input label="Nombre de la categoría" [size]="bp.sizeControl()" [(value)]="nombreCategoria" />
+} @else {
+  <sui-inline-input [(value)]="nombreCategoria" placeholder="Sin nombre" leftIcon="price-tag-3-line" />
+}
+```
+
 ## Ejemplo
 
 ```html

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

@@ -50,12 +50,26 @@ entera.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| dentro de una frase | evitar: usar `sui-select` | 20 px, en línea con el texto | propuesta, falta aprobación |
-| al final de un `sui-input` | el alto lo da el input (`large`) | el alto lo da el input (`medium`) | propuesta, falta aprobación |
+| dentro de una frase | evitar: usar `sui-select` | 20 px, en línea con el texto | canon (aprobado por el dueño, 05-10-2026, bloque B7) |
+| al final de un `sui-input` | el alto lo da el input (`large`) | el alto lo da el input (`medium`) | mobile (input `large`): canon (decisión del dueño 04-10-2026, piso táctil 44; ver `sui-input`) · web (input `medium`): canon (aprobado por el dueño, 05-10-2026, bloque B1) |
 
 Las opciones del menú miden **36 px también en mobile**: a diferencia de `sui-select` y de los
 compactos, este no tiene la regla de 44 en ≤ 767 px (`sui-inline-select.scss` no la trae).
 
+### Por dispositivo (D16)
+
+**No tiene `size`**: mide 20 px (la línea del texto) en cualquier pantalla, así que no hay escala
+que repartir por dispositivo. D16 (dueño, 05-10-2026) se aplica según dónde va:
+
+- **Al final de un `sui-input`**: el alto lo pone el input, que sigue su fila D16 (`large` en el
+  celular chico, el celular y la tablet táctil; `medium` en la computadora y el ultrawide).
+- **Dentro de una frase**: solo en la computadora (y el ultrawide). En toda pantalla táctil
+  (celular chico, celular y tablet con `pointer: coarse`) la palabra de 20 px no llega a 44: va un
+  `sui-select`. La condición es `bp.tactil()`, no `bp.isMobile()`, para que el iPad también cambie.
+
+En master-pedidos: el `sui-input` que lo contiene con `[size]="bp.sizeControl()"`; en una frase,
+`@if (bp.tactil())` → `sui-select` con `[size]="bp.sizeControl()"`.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -95,6 +109,52 @@ Implementa `ControlValueAccessor`.
 - No mezclar `[(selected)]` con `formControlName`.
 - El menú mide al menos 200 px aunque el texto sea corto.
 
+## Bien y mal
+
+Unidad al final de un campo
+
+```html
+<!-- ❌ mal: sin [trailingControl] el slot es un ícono de 20 × 20 con pointer-events: none y el selector no responde -->
+<sui-input label="Peso" type="number" [size]="bp.sizeControl()" [(value)]="peso">
+  <sui-inline-select data-slot="end" icon="ruler-line" [items]="unidades" [(selected)]="unidad" />
+</sui-input>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-input label="Peso" type="number" [size]="bp.sizeControl()" [trailingControl]="true" [(value)]="peso">
+  <sui-inline-select data-slot="end" icon="ruler-line" [items]="unidades" [(selected)]="unidad" />
+</sui-input>
+```
+
+Formulario reactivo
+
+```html
+<!-- ❌ mal: dos dueños del mismo valor; [(selected)] y formControlName se pisan -->
+<sui-inline-select formControlName="periodo" [items]="periodos" [(selected)]="periodo" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-inline-select formControlName="periodo" icon="calendar-line" [items]="periodos" />
+```
+
+Frase en una pantalla táctil
+
+```html
+<!-- ❌ mal: en el celular y la tablet táctil se toca una palabra de 20 px de alto -->
+<p>Mostrar ventas de <sui-inline-select icon="calendar-line" [items]="periodos" [(selected)]="periodo" /></p>
+```
+
+```html
+<!-- ✅ bien -->
+@if (bp.tactil()) {
+  <sui-select label="Periodo" [options]="opcionesPeriodo" [size]="bp.sizeControl()" [(value)]="periodoId" />
+} @else {
+  <p>Mostrar ventas de <sui-inline-select icon="calendar-line" [items]="periodos" [(selected)]="periodo" /></p>
+}
+```
+
 ## Ejemplo
 
 ```html

package/docs/sui-input/README.md

@@ -33,13 +33,16 @@ Regla corta: **una línea → input · varias → textarea · de una lista → s
 > 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).
+> resto es canon (CLAUDE.md, CANON-SUI o aprobado por el dueño el 05-10-2026); lo que sigue en **propuesta** espera decisión.
 >
-> Uso medido el 04-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-badge`, más
-> `master-ejercicios`): **195 usos en 61 archivos**. Tipos: 42 `text`, 36 sin `type` (`text`),
-> 34 `amount`, 21 `search`, 21 `number`, 18 `tel`, 10 `email`, 7 `date`, 3 `password-toggle`,
-> 2 `url`, 1 `datetime-local`. Tamaños: 88 `bp.isMobile() ? 'large' : 'medium'`, 77 sin `size`
-> (`medium`), 18 `large`, 3 `xlarge`, 3 `medium`, 1 `small`, 3 `bp.controlSize()`, 2 otros dinámicos.
+> Uso medido el 06-10-2026 en `master-pedidos/src/app` @ `9f0e54c3` (misma exclusión que
+> `sui-badge`, más `master-ejercicios`): **200 usos en 66 archivos** — 196 en 63 `.html` y 4 en
+> templates inline de 3 `.ts` (`components/option-image/option-image.ts`, `pages/dx/modal-test/modal-test.ts`,
+> `pages/dx/sandbox/sandbox.ts`). Tipos: 45 `text`, 35 sin `type` (`text`), 35 `amount`,
+> 22 `search`, 22 `tel`, 18 `number`, 10 `email`, 7 `date`, 3 `password-toggle`, 2 `url`,
+> 1 `datetime-local`. Tamaños, tras la migración a D16: 195 `bp.sizeControl()` (191 en `.html`
+> y los 4 inline), 3 `xlarge` (los buscadores principales del cliente), 1 `bp.controlSize()` y
+> 1 dinámico propio (`components/product-detail-view/product-detail-view.html:223`). Ninguno sin `size`.
 
 ### `type` — qué dato es
 
@@ -52,10 +55,10 @@ El `type` decide el teclado del teléfono y el filtro de teclas. Por dentro, `nu
 | `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 |
+| `number` | Un entero que no es dinero: minutos, kilómetros, cupos, porcentaje. Si es dinero, `amount`. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 | `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 |
+| `password` | No usar: sin ojo, en el teléfono no se puede revisar lo tipeado. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 | `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») |
@@ -74,21 +77,21 @@ El `type` decide el teclado del teléfono y el filtro de teclas. Por dentro, `nu
 | `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 |
+| `hintIcon` | No usar hoy: el hint se lee solo; el ícono suma ruido en formularios largos. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 | `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 |
+| `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»: canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 | `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`) |
+| `fullRadius` | Solo el buscador principal del cliente (home, carta del local, rubro), que va encima de chips redondos. Los formularios, con el radio normal. | canon (aprobado por el dueño, 05-10-2026, bloque B9) (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 |
+| `autocomplete` | Siempre en datos de la persona: `name`, `given-name`, `email`, `tel`, `current-password`, `new-password`. `off` en buscadores. | canon (aprobado por el dueño, 05-10-2026, bloque B5) |
+| `readonly` | Un dato que se muestra en forma de campo pero se elige en otro lado (el distrito que sale del mapa). | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
 | `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 |
+| `paste` | `false` solo si pegar un monto armaría un valor equivocado. Hoy sin uso. | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
 | `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») |
 
@@ -114,23 +117,41 @@ teléfono también va en 16 en todos los tamaños (antes se quedaba en 14 al lad
 
 | 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 |
+| campo de formulario | `large` (48), igual que el botón del footer | `medium` (40) | mobile `large`: canon (decisión del dueño 04-10-2026, piso táctil 44: `medium` 40 no llega y `large` 48 es el primer size que sí) · web `medium`: canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| buscador principal del cliente (home, carta, rubro) | `xlarge` (52) + `fullRadius` | `xlarge` + `fullRadius` | canon (aprobado por el dueño, 05-10-2026, bloque B1) (ya es práctica en las 3 pantallas) |
+| buscador o filtro de una lista del panel | `large` (48) | `medium` (40) | mobile `large`: canon (decisión del dueño 04-10-2026, piso táctil 44: `large` 48 es el primer size que llega) · web `medium`: canon (dueño, 05-10-2026, D16) (`pages/orders/orders.html:73` ya va con `bp.sizeControl()`; medido el 06-10-2026) |
+| campo dentro de una tabla o fila densa | no aplica | `medium` (40) | canon (dueño, 05-10-2026, D16): nada en `xsmall` (la guía del DS lo usa ahí) |
 
 ```html
-<sui-input [size]="bp.isMobile() ? 'large' : 'medium'" label="Teléfono" type="tel" … />
+<sui-input [size]="bp.sizeControl()" 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:269`, `:384`,
-`pages/super-admin/master-sonidos-push/master-sonidos-push.html:43`). El texto sube solo a 16 px
-en mobile (evita el zoom de iOS): no hace falta pedirlo.
+No uses `bp.controlSize()` en campos: es el de checkbox/radio/switch, da `xlarge` (52) en mobile,
+más alto que el botón `large` del footer, y `large` en la computadora (1 uso hoy:
+`pages/customer/checkout/checkout.html:385`, el cupón). El texto sube solo a 16 px en mobile (evita
+el zoom de iOS): no hace falta pedirlo.
 
-Hoy: **88 usos** ya van con `bp.isMobile() ? 'large' : 'medium'`; **77 sin `size`** quedan en 40 px
-también en el teléfono (no alinea con el botón `large`).
+Hoy (medido el 06-10-2026): **195 de los 200 usos** ya van con `bp.sizeControl()` (191 en `.html` y
+4 en templates inline de `.ts`); quedan los 3 buscadores principales en `xlarge` fijo (van bien), el cupón con `bp.controlSize()` y un dinámico propio.
+
+### Por dispositivo (D16)
+
+Fila `input` de la tabla D16 (dueño, 05-10-2026). Se toca, así que va por tipo de puntero además
+del ancho, igual que `sui-button`: campo y botón de al lado miden lo mismo en cada dispositivo.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380 px) | `large` (48) | D16 pide `medium` con área tocable de 44; mientras el DS no estire el área de los `medium`, va `large` (interino) |
+| celular (380–767 px) | `large` (48) | mismo alto que el botón `large` del footer |
+| tablet táctil (`pointer: coarse`) | `large` (48) | también se toca con el dedo; `bp.isMobile()` la dejaba en `medium` |
+| computadora (`pointer: fine`) | `medium` (40) | también filtros y campos dentro de tablas; `small` y `xsmall` no se usan |
+
+Buscador principal del cliente (home, carta, rubro): `xlarge` (52) + `fullRadius` en todos los
+dispositivos (B1). Ultrawide (≥ 1920 px): igual que la computadora, `medium`; el espacio extra va a
+ancho y columnas, no a campos más altos.
+
+En master-pedidos: `[size]="bp.sizeControl()"` · buscador principal: `size="xlarge"` + `[fullRadius]="true"`.
 
 ## «No usar»: por qué no hoy y cuándo sí
 
@@ -148,7 +169,7 @@ en la columna de la derecha, se usa.
 | `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 |
+| `size="xsmall"` | es chico (D16, 05-10-2026) | nunca: la edición rápida de un precio dentro de una tabla va `medium` |
 
 ## API
 
@@ -221,13 +242,55 @@ proyectados con `leadingControl` / `trailingControl`).
 - En el teléfono la X de limpiar y el ojo se ven de 12-20 px pero se tocan en 44 × 44 (área
   invisible, 04-10-2026).
 
+## Bien y mal
+
+Tamaño del campo del cupón
+
+```html
+<!-- ❌ mal: bp.controlSize() es de checkbox/radio/switch: xlarge en el celular y large en la computadora (pages/customer/checkout/checkout.html:385) -->
+<sui-input [size]="bp.controlSize()" placeholder="Código de descuento" [(value)]="cupon" />
+```
+
+```html
+<!-- ✅ bien (y el botón «Aplicar» de al lado, también con bp.sizeControl()) -->
+<sui-input [size]="bp.sizeControl()" placeholder="Código de descuento" [(value)]="cupon" />
+```
+
+DNI con el label afuera
+
+```html
+<!-- ❌ mal: el label suelto no conoce el id del campo (su for no apunta a nada) y el DNI no es un número (pages/driver-onboarding/step-info/step-info.html:56 y :60) -->
+<sui-form-label label="DNI" [required]="true" for="ob-dni" />
+<sui-input [size]="bp.sizeControl()" type="number" inputmode="numeric" placeholder="74523618"
+           [maxlength]="8" [(value)]="dni" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-input label="DNI" [required]="true" type="text" inputmode="numeric" placeholder="74523618"
+           [maxlength]="8" hint="8 dígitos" [size]="bp.sizeControl()" [(value)]="dni" />
+```
+
+Teléfono con espacios en el placeholder
+
+```html
+<!-- ❌ mal: con [maxlength]="9", quien copia los espacios del placeholder llega al tope antes del último dígito (pages/mi-negocio/mi-negocio.html:689) -->
+<sui-input [size]="bp.sizeControl()" type="tel" placeholder="987 654 321" [maxlength]="9" [(value)]="telefono" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-input label="Teléfono" type="tel" [maxlength]="9" autocomplete="tel" placeholder="987654321"
+           [size]="bp.sizeControl()" [(value)]="telefono" />
+```
+
 ## 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" />
+           [size]="bp.sizeControl()" [(value)]="telefono" />
 
 <!-- Monto -->
 <sui-input label="Monto de la compra" type="amount" prefix="S/" placeholder="0.00" [(value)]="monto" />

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

@@ -38,26 +38,26 @@ Regla corta: **servicio externo que se prende y se configura → integration-swi
 
 | 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 |
+| `horizontal` · `card` (default) | Una integración suelta en una pantalla de ajustes de web. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `vertical` · `card` | Una grilla de integraciones, o la misma en mobile (el «Administrar» baja a ancho completo). | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `horizontal` · `list` | Una lista de integraciones dentro de una card que ya pone el borde. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `vertical` · `list` | Ver «No usar». | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 
 ### 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 |
+| `title` | Siempre. El nombre del servicio: «WhatsApp Business». | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `description` | Qué hace conectarlo, en una línea: «Avisa al cliente por WhatsApp cuando su pedido sale del local.» | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `brandIconSrc` | El logo del servicio (`assets/brand/brand-logos/<marca>-original.svg`). | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `brandIcon` | Un ícono Remix cuando no hay logo. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| logo proyectado `[sui-integration-brand]` | Un `sui-brand-logo` u otro elemento propio. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `manage` (`true`, dice «Administrar») | Siempre que el servicio tenga configuración. El default ya está en español (03-10-2026). | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `[manage]="false"` | El servicio no se configura: solo se prende. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `showToggle=false` | Se administra pero no se apaga desde aquí. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `badge` | Integración nueva. Con string sale naranja `light`; pasa el objeto (`purple` para lo nuevo, según el badge). | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `disabled` | Falta un dato para conectarla (el RUC, la cuenta). | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `[active]` + `(activeChange)` | El estado. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 
 **Usos de hoy que rompen las reglas:** 0 (no hay usos).
 
@@ -74,7 +74,7 @@ Regla corta: **servicio externo que se prende y se configura → integration-swi
 | layout | `vertical` | `horizontal` |
 
 ```html
-<sui-integration-switch [size]="bp.isMobile() ? 'large' : 'medium'"
+<sui-integration-switch [size]="bp.sizeControl()"
                         [type]="bp.isMobile() ? 'vertical' : 'horizontal'" … />
 ```
 
@@ -82,11 +82,33 @@ Regla corta: **servicio externo que se prende y se configura → integration-swi
 y a diferencia de `sui-switch-card`, tocar la tarjeta no prende nada: solo responde el
 interruptor. Para algo que se prende y apaga en el teléfono, `sui-switch-card` es la salida.
 
+### Por dispositivo (D16)
+
+No está en la tabla D16 por componente: va como **lo que se toca**, porque el `size` solo agranda
+«Administrar», que es un botón. Fuente: D16, dueño 05-10-2026.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380) | `large` (44) | D16 pide `medium` con área tocable de 44; mientras el DS no estire el área de los `medium`, va `large` (interino) |
+| celular (380–767) | `large` (44) | |
+| tablet táctil (`pointer: coarse`) | `large` (44) | también se toca con el dedo: Apple pide 44 pt en el iPad |
+| computadora (`pointer: fine`) | `medium` (38) | nunca más chico |
+
+En el ultrawide, igual que en la computadora: el espacio extra va a más columnas, no a un
+«Administrar» más grande.
+
+D16 no alcanza al interruptor: es `sui-switch` `medium` fijo dentro del componente, aunque los
+switches sueltos vayan en `xlarge`/`large`. El badge interno arranca en `small`: pásalo como objeto
+con `size: bp.sizeBadge()`.
+
+En master-pedidos: `[size]="bp.sizeControl()"`. El `type` sigue por ancho
+(`bp.isMobile() ? 'vertical' : 'horizontal'`): es layout, no tamaño.
+
 ## «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) |
+| todo el componente (0 usos) | no hay integraciones (el tamaño para mobile ya existe: `large`, 04-10-2026) | 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
@@ -135,6 +157,51 @@ Slot: `[sui-integration-brand]` (reemplaza al logo). Implementa `ControlValueAcc
   El interruptor toma su nombre de ese título (y su descripción de `description`) con
   `aria-labelledby` (revisión 04-10-2026); antes el lector decía solo «interruptor».
 
+## Bien y mal
+
+La app no tiene usos todavía: los pares salen de «Cuándo usarlo» y de «Trampas».
+
+Un ajuste propio de la app
+
+```html
+<!-- ❌ mal: avisar de pedidos nuevos es un ajuste de la app, no un servicio externo -->
+<sui-integration-switch title="Notificaciones" brandIcon="notification-3-line"
+  [manage]="false" [active]="avisos()" (activeChange)="avisos.set($event)" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-switch-card label="Notificaciones" [size]="bp.controlSize()"
+  [checked]="avisos()" (checkedChange)="avisos.set($event)" />
+```
+
+Servicio que solo se prende
+
+```html
+<!-- ❌ mal: manage arranca en true y pinta «Administrar» aunque no haya nada que configurar -->
+<sui-integration-switch title="Mapbox" brandIcon="map-2-line" [size]="bp.sizeControl()"
+  [active]="mapbox()" (activeChange)="mapbox.set($event)" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-integration-switch title="Mapbox" brandIcon="map-2-line" [manage]="false"
+  [active]="mapbox()" (activeChange)="mapbox.set($event)" />
+```
+
+Integración nueva
+
+```html
+<!-- ❌ mal: el string sale naranja light y en small, que D16 no usa -->
+<sui-integration-switch title="Culqi" brandIcon="bank-card-line" badge="Nuevo" … />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-integration-switch title="Culqi" brandIcon="bank-card-line" [size]="bp.sizeControl()"
+  [badge]="{ label: 'Nuevo', color: 'purple', size: bp.sizeBadge() }" … />
+```
+
 ## Ejemplo
 
 ```html

package/docs/sui-kbd/README.md

@@ -23,7 +23,7 @@ cerrar, las flechas y el enter al pie de un menú.
 
 > **La guía del DS tiene una sola variante** (la tecla con texto) y la muestra dentro del
 > buscador del command menu. Lo marcado «según la guía del DS» sale de ahí; el resto es
-> **propuesta, falta aprobación**.
+> **canon (aprobado por el dueño, 05-10-2026)**.
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos directos**. Lo usan por dentro
 > `sui-command-menu-search`, `sui-command-menu-item`, `sui-command-menu-footer`, `sui-filter`,
@@ -40,26 +40,50 @@ cerrar, las flechas y el enter al pie de un menú.
 | valor | cuándo | fuente |
 |---|---|---|
 | `default` | Tecla con texto: ⌘K, Esc. | según la guía del DS |
-| `subtle` | Tecla con un ícono de 16 px (flechas, enter) al pie de un menú. Extensión de SUI (sale del Figma del command menu). | propuesta |
+| `subtle` | Tecla con un ícono de 16 px (flechas, enter) al pie de un menú. Extensión de SUI (sale del Figma del command menu). | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 
 Usos de hoy que rompen la regla: **0**.
 
 ## Tamaño en mobile y en web
 
-No es táctil: es una tecla dibujada. En mobile no hay teclado físico, así que no se muestra; en
-web tiene un solo tamaño. Donde la pantalla existe en los dos (panel del local, super admin) se
-oculta con el servicio de breakpoints de la app (`bp`, en `services/breakpoints.service.ts`). Todo
-es **propuesta**.
+No es táctil: es una tecla dibujada. Donde se usa con el dedo no hay teclado físico, así que no se
+muestra; con mouse tiene un solo tamaño. Donde la pantalla existe en los dos (panel del local,
+super admin) se oculta con el servicio de breakpoints de la app (`bp`, en
+`services/breakpoints.service.ts`). Que no vaya en mobile es **canon (aprobado por el dueño,
+05-10-2026, bloque B7)**; que la tablet táctil cuente como mobile sale de D16 (ver abajo).
 
-| uso | mobile | web |
+| uso | mobile (celular y tablet táctil) | web (computadora) |
 |---|---|---|
 | atajo de teclado | no se muestra | tamaño único (20 px de alto) |
 
 ```html
-@if (!bp.isMobile()) { <sui-kbd>⌘K</sui-kbd> }
+@if (!bp.tactil()) { <sui-kbd>⌘K</sui-kbd> }
 ```
 
-No tiene tamaños: en mobile no hay teclado físico, así que no se pinta.
+No tiene tamaños: con el dedo no hay teclas, así que no se pinta.
+
+### Por dispositivo (D16)
+
+El tamaño no aplica: `sui-kbd` no tiene `size` (20 px fijo). Lo que depende del dispositivo es
+**si se muestra**, y eso no va por ancho sino por puntero, como D16: el iPad (768–1024 px,
+`pointer: coarse`) da `bp.isMobile()` falso, y con `!bp.isMobile()` el ⌘K saldría en una pantalla
+sin teclas.
+
+| dispositivo | se muestra | nota |
+|---|---|---|
+| celular chico (< 380) | no | con el dedo no hay teclas |
+| celular (380–767) | no | |
+| tablet táctil (`pointer: coarse`) | no | misma razón que el celular: se usa con el dedo |
+| computadora (`pointer: fine`) | sí, 20 px | |
+| ultrawide | sí, 20 px | igual que la computadora |
+
+**Pendiente**: el iPad con teclado físico. Con un teclado conectado los atajos sí funcionan, pero
+la pantalla sigue siendo táctil y ni el ancho ni el puntero dicen si hay un teclado conectado;
+falta que el dueño decida si se muestra ahí. Hasta entonces va oculto, que es el lado seguro: un atajo que falta no confunde, uno
+que no se puede apretar sí.
+
+En master-pedidos: `@if (!bp.tactil()) { <sui-kbd>⌘K</sui-kbd> }` (`tactil` = celular por ancho
+o cualquier pantalla `pointer: coarse`). No uses `!bp.isMobile()`: deja pasar la tablet.
 
 ## «No usar»: por qué no hoy y cuándo sí
 
@@ -88,6 +112,46 @@ Slot: `<ng-content>` (el texto o el `sui-icon`).
 - El ícono de adentro va a 16 px y toma `text-sub-600` aunque le pongas otro color.
 - Mide 20 px de alto fijo: no crece con el texto de al lado.
 
+## Bien y mal
+
+La app no lo usa directo: los pares salen de «Cuándo usarlo» y de «Trampas».
+
+Flecha al pie de un menú
+
+```html
+<!-- ❌ mal: subtle no se elige solo al poner un ícono; sale con el fondo blanco del texto -->
+<sui-kbd><sui-icon name="arrow-up-line" [size]="16" /></sui-kbd>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-kbd variant="subtle"><sui-icon name="arrow-up-line" [size]="16" /></sui-kbd>
+```
+
+Atajo en una pantalla que también se ve en el celular
+
+```html
+<!-- ❌ mal: con el dedo no hay teclas; con !bp.isMobile() el ⌘K igual sale en el iPad (768–1024, táctil) -->
+@if (!bp.isMobile()) { <sui-kbd>⌘K</sui-kbd> }
+```
+
+```html
+<!-- ✅ bien -->
+@if (!bp.tactil()) { <sui-kbd>⌘K</sui-kbd> }
+```
+
+Una etiqueta que no es una tecla
+
+```html
+<!-- ❌ mal: no es un atajo; además sale en MAYÚSCULAS -->
+<sui-kbd>Nuevo</sui-kbd>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-badge color="purple" [size]="bp.sizeBadge()">Nuevo</sui-badge>
+```
+
 ## Ejemplo
 
 ```html