@ajuarezso/sui-design-system 0.25.0 → 0.25.1

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

@@ -30,7 +30,7 @@ Regla corta: **el campo cambia según una elección corta pegada a él → este
 >
 > 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:195` y `:203`.
+> `pages/super-admin/master-gastos/master-gastos.html:197` y `:206` (medido el 06-10-2026).
 
 | prop | cuándo | fuente |
 |---|---|---|
@@ -57,7 +57,7 @@ en 16/24, igual que el valor del `sui-input` large; el alto no cambia (46 dentro
 | 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 |
+| `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 |
 |---|---|---|---|
@@ -66,11 +66,28 @@ en 16/24, igual que el valor del `sui-input` large; el alto no cambia (46 dentro
 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:195`) o teléfonos de otro país |
+| 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
@@ -110,11 +127,58 @@ Implementa `ControlValueAccessor`.
   movió el clic a un div interno. Aquí sigue en el host. Probar en un iPhone antes del primer uso.
 - No mezclar `[(selected)]` con `formControlName`.
 
+## 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" [leadingControl]="true">
+  <sui-compact-select-for-input data-slot="start" size="medium" [country]="false" [items]="monedas" />
+</sui-input>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-input [size]="bp.sizeControl()" type="amount" label="Monto" [leadingControl]="true">
+  <sui-compact-select-for-input data-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" [leadingControl]="true">
+  <sui-compact-select-for-input data-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 data-slot="start" [size]="bp.sizeControl()" [items]="monedas" [(selected)]="moneda" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-compact-select-for-input data-slot="start" [size]="bp.sizeControl()" [country]="false"
+                              [items]="monedas" [(selected)]="moneda" />
+```
+
 ## Ejemplo
 
 ```html
-<sui-input label="Monto" type="amount" placeholder="0.00" [leadingControl]="true" [(value)]="monto">
-  <sui-compact-select-for-input data-slot="start" size="medium" [country]="false"
+<sui-input label="Monto" type="amount" placeholder="0.00" [size]="bp.sizeControl()" [leadingControl]="true" [(value)]="monto">
+  <sui-compact-select-for-input data-slot="start" [size]="bp.sizeControl()" [country]="false"
                                 [items]="monedas" [(selected)]="moneda" />
 </sui-input>
 ```

package/docs/sui-content-card/README.md

@@ -82,9 +82,27 @@ táctil de `large` es de **44** (desde el 04-10-2026; 40 en web).
 | X para quitar | `large` (32, área 44) | `medium` (20) | mobile: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono · web: canon (aprobado por el dueño, 05-10-2026, bloque B1) (el tamaño `large` es extensión SUI aprobada el 03-10-2026) |
 
 ```html
-<sui-content-card … [size]="bp.isMobile() ? 'large' : 'medium'" (dismiss)="quitar(item)" />
+<sui-content-card … [size]="bp.tactil() ? 'large' : 'medium'" (dismiss)="quitar(item)" />
 ```
 
+### Por dispositivo (D16)
+
+No está en la tabla por componente de D16 (dueño, 05-10-2026). La fila no cambia; el `size` solo
+mueve la X, que **se toca**, así que va como «lo que se toca».
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380 px) | `large` (32, área 44) | interino: D16 pide `medium` con área de 44, pero la X `medium` tiene área de 20; hasta que el DS la estire, el mismo que el celular |
+| celular (380–767 px) | `large` (32, área 44) | |
+| tablet táctil (`pointer: coarse`) | `large` (32, área 40) | también se toca. Ojo: el área de 44 del `::before` está bajo `@media (max-width: 767px)` (`sui-content-card.scss:118`), así que en la tablet se queda en 40 hasta que el DS la prenda con `pointer: coarse` |
+| computadora (`pointer: fine`) | `medium` (20) | |
+
+Ultrawide (≥ 1920 px): igual que la computadora. Con `[dismissible]="false"` (los 4 usos de hoy) el
+`size` no cambia nada y no hace falta pasarlo. El badge de adentro **no se toca**: su `size` va
+dentro del objeto `badge` con `bp.sizeBadge()` (como `master-overview.html:335`).
+
+En master-pedidos: `[size]="bp.tactil() ? 'large' : 'medium'"` (no hay helper propio).
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -135,6 +153,49 @@ táctil de `large` es de **44** (desde el 04-10-2026; 40 en web).
 - No tiene `interactive` ni output de toque: la fila no se puede tocar entera.
 - El host borra el atributo `title` del DOM y lleva `role="group"` con `aria-label` = `title`.
 
+## Bien y mal
+
+**La nota como badge**
+
+```html
+<!-- ❌ mal: badge en string sale naranja lighter small, en MAYÚSCULAS (prototipo: master-prototipos.html:146) -->
+<sui-content-card type="avatar" [avatar]="{ initials: yo.iniciales, color: 'orange' }" [title]="yo.nombre"
+                  badge="★ 5.0" [dismissible]="false" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-content-card type="avatar" [avatar]="{ initials: yo.iniciales, color: 'orange' }" [title]="yo.nombre"
+                  [badge]="{ label: '5.0 ★', color: 'orange', variant: 'lighter', size: bp.sizeBadge() }"
+                  [dismissible]="false" />
+```
+
+**Una fila que no se quita**
+
+```html
+<!-- ❌ mal: dismissible arranca en true; sale una X que no hace nada -->
+<sui-content-card type="avatar" [avatar]="avatarDe(c, 'blue')" [title]="c.nombre" [subtitle]="c.detalle" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-content-card type="avatar" [avatar]="avatarDe(c, 'blue')" [title]="c.nombre" [subtitle]="c.detalle"
+                  [dismissible]="false" />
+```
+
+**Una fila que sí se quita**
+
+```html
+<!-- ❌ mal: la X en medium mide 20 en el celular y se anuncia como «Descartar» -->
+<sui-content-card type="avatar" [avatar]="m.avatar" [title]="m.nombre" (dismiss)="quitar(m)" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-content-card type="avatar" [avatar]="m.avatar" [title]="m.nombre" [size]="bp.tactil() ? 'large' : 'medium'"
+                  [dismissAriaLabel]="'Quitar a ' + m.nombre + ' del equipo'" (dismiss)="quitar(m)" />
+```
+
 ## Ejemplo
 
 ```html
@@ -143,6 +204,6 @@ táctil de `large` es de **44** (desde el 04-10-2026; 40 en web).
   [avatar]="{ src: local.logo, initials: 'SA', color: 'orange' }"
   [title]="local.nombre"
   [subtitle]="local.pedidos + ' pedidos este mes'"
-  [badge]="{ label: '4.6 ★', color: 'orange', variant: 'lighter', size: 'small' }"
+  [badge]="{ label: '4.6 ★', color: 'orange', variant: 'lighter', size: bp.sizeBadge() }"
   [dismissible]="false" />
 ```

package/docs/sui-content-divider/README.md

@@ -82,6 +82,15 @@ computadora (`pointer: fine`) y, en lo que no se toca, también la tablet. En el
 los botones (`icon-button`, `text-button`, grupos) quedan debajo de los 44 px del dedo; es otra
 razón para no usarlos hoy. Si un flujo nuevo los necesita en mobile, se pide al DS un tamaño grande.
 
+### Por dispositivo (D16)
+
+No aplica: **no tiene `size`** (texto de 11–12 y botones de 32 en todos los dispositivos, del
+celular chico al ultrawide). Con D16 los botones de 32 quedan bajo los 44 también en la tablet
+táctil (`pointer: coarse`), no solo en el celular: una razón más para no usar los tipos con botón
+hasta que el DS tenga un tamaño grande.
+
+En master-pedidos: no hay helper ni `[size]`; solo `type` y `text`.
+
 ## API
 
 <!-- api:inicio -->
@@ -107,13 +116,52 @@ Outputs: `(buttonClick)` en `icon-button` y `text-button`; `(itemClick)` con
 
 ## Trampas
 
-- **Todo el texto sale en MAYÚSCULAS** por CSS: escribirlo normal.
+- **El texto de `text-line`, `text` y `solid-text` sale en MAYÚSCULAS** por CSS: escribirlo normal.
+  Los botones (`text-button`, `text-button-group`) no van en mayúsculas.
 - **`text` y `solid-text` alinean a la izquierda**, no al centro (así está en el Figma).
 - `text-line` usa 11 px; `text` y `solid-text`, 12 px.
 - Sin `ariaLabel`, el `icon-button` se anuncia como «Acción» y los ítems de grupo como
   «Acción 0», «Acción 1».
 - `line` y `line-spacing` existen, pero la línea sola es `sui-divider`.
 
+## Bien y mal
+
+**El «o» entre Google y el correo**
+
+```html
+<!-- ❌ mal: el «o» armado a mano, como estaba en login.html:61 y register.html:97 hasta el 03-10-2026 -->
+<div class="auth-page__divider"><span>o</span></div>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-content-divider type="text-line" text="o" />
+```
+
+**Cabecera de grupo en MAYÚSCULAS a mano**
+
+```html
+<!-- ❌ mal: el componente ya lo pasa a MAYÚSCULAS; el texto va en sentence case (CANON-SUI §5.1) -->
+<sui-content-divider type="solid-text" text="CON POCOS PEDIDOS" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-content-divider type="solid-text" text="Con pocos pedidos" />
+```
+
+**Una línea sola entre dos bloques**
+
+```html
+<!-- ❌ mal: `line` no dice nada; la línea sola es `sui-divider`, que pesa menos -->
+<sui-content-divider type="line" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-divider />
+```
+
 ## Ejemplo
 
 ```html

package/docs/sui-content-label/README.md

@@ -64,29 +64,61 @@ content-card · ajuste → switch-label.**
 | `toggle` / `toggleChecked` | Ver «No usar». | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 | `disabled` | Ver «No usar». | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 
-**Usos de hoy que rompen las reglas:** 0. A mirar: los 3 badges de
+**Usos de hoy que rompen las reglas:** 0 en tipo y piezas. **Con D16 (medido el 06-10-2026)
+rompen el `size` 5**: `pages/driver/driver-dashboard/driver-dashboard.html:1236` (`medium` fijo en
+una fila de dato), los 3 de `step-complete.html:48`–`:58` (sin `size`, fila de dato) y
+`step-complete.html:80` (sin `size`, fila que se toca: queda en `medium` en el celular y la tablet,
+donde la fila de D16 pide `large`). Ojo: en ese último el área táctil está bien (el `<a>` que lo
+envuelve mide 66); lo que rompe es el tamaño de lectura, no el dedo. A mirar: los 3 badges de
 `pages/driver-onboarding/step-complete/step-complete.html:48`–`:58` dicen estados de ciclo
 («Completados», «Esperando vinculación»); el README de `sui-badge` deja esos en
 `sui-status-badge`, pero el content-label solo recibe la config del badge.
 
 ## Tamaño en mobile y en web
 
-No se toca, así que no tiene que llegar a 44. El `size` es de lectura, no de dedo.
+No se toca, así que no tiene que llegar a 44. El `size` es de lectura, no de dedo: cuando la fila
+entera se toca, el área de 44 la pone lo que la envuelve (un `<a>` o un botón), no el `size`.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
 | consejos y pasos | `large` | `large` | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
 | filas de dato | `large` | `medium` | canon (dueño, 05-10-2026, D16): grande en el celular; `medium` en la computadora, la tablet y el celular chico (no se toca) |
-| fila que se toca (soporte) | `large`, o dale a la fila un alto mínimo de 44 | `medium` | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| fila que se toca (soporte) | `large` (celular y tablet táctil) | `medium` (computadora y celular chico) | canon (aprobado por el dueño, 05-10-2026, bloque B1; dispositivos por D16). Además, lo que la envuelve mide 44 o más de alto |
 
 Alto de la fila, medido: `medium` 40 (máx. entre el leading de 40 y el texto 20 + 4 + 16) y
 `large` 48 (máx. entre 48 y 24 + 4 + 20). Lo que se toca es lo que la envuelve: «Contactar soporte»
 va dentro de un `<a>` con padding 12 y borde 1, que da 66.
 
 ```html
-<sui-content-label [size]="bp.isMobile() ? 'large' : 'medium'" … />   <!-- filas de dato y filas que se tocan (D16) -->
+<sui-content-label [size]="bp.celular() ? 'large' : 'medium'" … />   <!-- filas de dato (D16) -->
+<sui-content-label [size]="bp.tactil() && !bp.celularChico() ? 'large' : 'medium'" … />  <!-- fila que se toca (D16) -->
 ```
 
+### Por dispositivo (D16)
+
+Fila de D16 para `content-label` (dueño, 05-10-2026). Es de lectura: sube un paso solo en el
+celular, salvo que la fila entera se toque, que entonces sube también en la tablet táctil. En el
+celular chico queda `medium` en los dos casos: la fila de D16 no lleva el «+ área 44» de lo que se
+toca, porque el área la da lo que envuelve a la fila.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380) | `medium` | también si la fila se toca: el área de 44 la pone el `<a>` que la envuelve («Contactar soporte» mide 66) |
+| celular (380–767) | `large` | lo que no se toca sube un paso en el celular (P1 b) |
+| tablet táctil (`pointer: coarse`) | `medium` · `large` si la fila se toca | |
+| computadora (`pointer: fine`) | `medium` | |
+
+Ultrawide: igual que la computadora; el espacio extra va al ancho de la lista, no a la fila.
+
+Los **consejos y pasos** quedan en `large` en todos los dispositivos (tabla de arriba, bloque B1):
+el `size` ahí es por la descripción larga, no por el dispositivo.
+
+En master-pedidos: no hay helper propio. Filas de dato `[size]="bp.celular() ? 'large' : 'medium'"`
+(da lo mismo que `bp.sizeBadge()`); fila que se toca
+`[size]="bp.tactil() && !bp.celularChico() ? 'large' : 'medium'"` (`bp.tactil()` solo daría `large`
+también en el celular chico, que la fila de D16 deja en `medium`);
+consejos `size="large"`.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -137,6 +169,53 @@ va dentro de un `<a>` con padding 12 y borde 1, que da 66.
 - El host lleva `role="group"` y `aria-label` = `label`. El `toggle` toma su nombre del `label`
   (y su descripción de `description`) con `aria-labelledby` (revisión 04-10-2026).
 
+## Bien y mal
+
+**Fila de dato con el tamaño fijo**
+
+```html
+<!-- ❌ mal: `medium` también en el celular, donde D16 pide `large` (driver-dashboard.html:1236; sin size en step-complete.html:48–58) -->
+<sui-content-label type="avatar" size="medium" [avatar]="n.avatar"
+  [label]="n.tenantName" [badge]="n.badge" badgePlacement="title" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-content-label type="avatar" [size]="bp.celular() ? 'large' : 'medium'" [avatar]="n.avatar"
+  [label]="n.tenantName" [badge]="n.badge" badgePlacement="title" />
+```
+
+**Fila que se toca sin `size`**
+
+```html
+<!-- ❌ mal: queda en `medium` en el celular y la tablet táctil, donde D16 pide `large`; el área ya está bien, el `<a>` mide 66 (step-complete.html:80) -->
+<a class="complete__quick-action" [href]="whatsappUrl">
+  <sui-content-label type="left-icon" icon="whatsapp-line" label="Contactar soporte" />
+</a>
+```
+
+```html
+<!-- ✅ bien -->
+<a class="complete__quick-action" [href]="whatsappUrl">
+  <sui-content-label type="left-icon" icon="whatsapp-line" label="Contactar soporte"
+    [size]="bp.tactil() && !bp.celularChico() ? 'large' : 'medium'" />
+</a>
+```
+
+**Un ajuste que se prende o apaga**
+
+```html
+<!-- ❌ mal: el `toggle` es un switch `medium` fijo y la fila no se toca entera («No usar») -->
+<sui-content-label label="Sonidos de la app" description="Avisos al confirmar pedidos"
+  [toggle]="true" [(toggleChecked)]="sonidos" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-switch-label [flip]="true" label="Sonidos de la app" description="Avisos al confirmar pedidos"
+  [size]="bp.controlSize()" [(active)]="sonidos" />
+```
+
 ## Ejemplo
 
 ```html

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

@@ -48,8 +48,16 @@ Regla corta: **se ajusta de a uno y tiene tope → counter · se tipea → input
 | `error` + `errorMessage` | No usar hoy: el contador no deja salir del rango. | — |
 | `required` · `sublabel` · `tooltip` | No usar hoy: una cantidad siempre tiene valor. | — |
 
-**Usos de hoy que rompen la regla:** ninguno (medido el 04-10-2026). Los 2 sin nombre para el
-lector y los 2 en `medium` fijo en el teléfono se corrigieron en la app el 03-10-2026 (`f96cf735`).
+**Usos de hoy que rompen la regla:** los 4, por el `size` (medido el 06-10-2026, D16): en el
+teléfono van en `large`, con botones de 40, por debajo del piso de 44.
+`pages/customer/restaurant-menu/restaurant-menu.html:479` y
+`components/cambiar-pasajeros/cambiar-pasajeros.html:8` llevan `size="large"` fijo, pero no les
+toca lo mismo: el de restaurant-menu va junto al CTA (`bp.tactil() ? 'xlarge' : 'large'`) y el de
+cambiar-pasajeros es un campo de formulario dentro de un modal, con `label` y `hint`, que va como
+una fila (`bp.tactil() ? 'xlarge' : 'medium'`). `pages/customer/cart/cart.html:77` y
+`pages/customer/viaje/viaje.html:182` llevan `bp.isMobile() ? 'large' : 'medium'` (además la tablet
+queda en `medium`); les toca `bp.tactil() ? 'xlarge' : 'medium'`. Los 2 sin nombre para el
+lector y los 2 en `medium` fijo en el teléfono ya se habían corregido el 03-10-2026 (`f96cf735`).
 
 ## Tamaño en mobile y en web
 
@@ -75,18 +83,37 @@ en 40, por debajo del piso; no hace falta un size nuevo porque `xlarge` ya llega
 | uso | mobile | web | fuente |
 |---|---|---|---|
 | cantidad junto al CTA (detalle del producto) | `xlarge` (52, botones de 44) | `large` | mobile: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono · web: canon (aprobado por el dueño, 05-10-2026, bloque B1) |
-| cantidad en una fila (carrito, pasajeros) | `xlarge` (52, botones de 44) | `medium` (40) | mobile: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono · web: canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| cantidad en una fila o campo de un formulario (carrito, pasajeros) | `xlarge` (52, botones de 44) | `medium` (40) | mobile: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono · web: canon (aprobado por el dueño, 05-10-2026, bloque B1) |
 
 ```html
-<sui-counter-input [size]="bp.isMobile() ? 'xlarge' : 'medium'" … />   <!-- bp = BreakpointsService -->
+<sui-counter-input [size]="bp.tactil() ? 'xlarge' : 'medium'" … />   <!-- en una fila · bp = BreakpointsService -->
+<sui-counter-input [size]="bp.tactil() ? 'xlarge' : 'large'" … />    <!-- junto al CTA -->
 ```
 
+### Por dispositivo (D16)
+
+Fila de D16 para `counter-input` (dueño, 05-10-2026). Se toca: donde hay dedo va `xlarge`, el
+único size con botones de 44.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380) | `xlarge` | no hay un `medium` con botones de 44, así que no baja como el resto de lo que se toca |
+| celular (380–767) | `xlarge` | campo de 52, botones de 44 |
+| tablet táctil (`pointer: coarse`) | `xlarge` | Apple pide 44 pt también en iPad |
+| computadora (`pointer: fine`) | `large` junto al CTA · `medium` en una fila o en un formulario | con mouse no hace falta llegar a 44 |
+
+Ultrawide: igual que la computadora.
+
+En master-pedidos: no hay helper (`bp.sizeControl()` da `large`/`medium` y no llega a `xlarge`).
+En una fila o en un formulario `[size]="bp.tactil() ? 'xlarge' : 'medium'"`; junto al CTA
+`[size]="bp.tactil() ? 'xlarge' : 'large'"`.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
 |---|---|---|
 | `size` `2xsmall`, `xsmall`, `small` | en la app la cantidad se toca con el dedo, y son chicos (D16, 05-10-2026) | nunca: una tabla del panel donde se ajusta el stock también va `medium` |
-| `size="xlarge"` | el CTA de al lado es `large` | si el CTA del detalle pasa a `xlarge` |
+| `size="xlarge"` en la computadora | con mouse no hace falta llegar a 44: junto al CTA va `large` y en una fila `medium` (D16, dueño 05-10-2026). En celular y tablet sí va `xlarge` | — |
 | `step` distinto de 1 | no hay productos que se vendan de a varios | huevos por media docena, gaseosas por pack de 6 |
 | `error` | el contador no deja salir del rango | el stock bajó con el carrito abierto y la cantidad ya no alcanza |
 | `tooltip` · `sublabel` · `required` | una cantidad siempre tiene valor | — |
@@ -136,14 +163,71 @@ en 40, por debajo del piso; no hace falta un size nuevo porque `xlarge` ya llega
   mínimo/máximo, si están definidos) desde el 04-10-2026; antes solo se operaba con − y +.
 - El campo es una píldora (radio completo), decisión de SUI; el Figma de origen usa 10/8 px.
 
+## Bien y mal
+
+**Cantidad junto al CTA del detalle**
+
+```html
+<!-- ❌ mal: `large` fijo deja los botones en 40 en el teléfono (restaurant-menu.html:479) -->
+<sui-counter-input size="large" ariaLabel="Cantidad" [min]="1" [max]="pdv.topeCantidad()"
+  [value]="pdv.qty()" (valueChange)="pdv.setQty($event)" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-counter-input [size]="bp.tactil() ? 'xlarge' : 'large'" ariaLabel="Cantidad" [min]="1"
+  [max]="pdv.topeCantidad()" [value]="pdv.qty()" (valueChange)="pdv.setQty($event)" />
+```
+
+**Cantidad en una fila del carrito**
+
+```html
+<!-- ❌ mal: `large` en el teléfono (botones de 40) y `medium` en la tablet (cart.html:77, viaje.html:182) -->
+<sui-counter-input [size]="bp.isMobile() ? 'large' : 'medium'" [ariaLabel]="'Cantidad de ' + item.name"
+  [value]="item.quantity" [min]="1" [max]="99" (valueChange)="setQuantity(item.lineKey, $event)" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-counter-input [size]="bp.tactil() ? 'xlarge' : 'medium'" [ariaLabel]="'Cantidad de ' + item.name"
+  [value]="item.quantity" [min]="1" [max]="99" (valueChange)="setQuantity(item.lineKey, $event)" />
+```
+
+**Campo de formulario con `large` fijo**
+
+```html
+<!-- ❌ mal: `large` fijo deja los botones en 40 en el teléfono, y en la computadora no va junto a un CTA (cambiar-pasajeros.html:8) -->
+<sui-counter-input size="large" label="Pasajeros" [hint]="cupoTexto()" [min]="1" [max]="cupo()"
+  [value]="pasajeros()" (valueChange)="pasajeros.set($event)" />
+```
+
+```html
+<!-- ✅ bien: es un campo, va como una fila -->
+<sui-counter-input [size]="bp.tactil() ? 'xlarge' : 'medium'" label="Pasajeros" [hint]="cupoTexto()"
+  [min]="1" [max]="cupo()" [value]="pasajeros()" (valueChange)="pasajeros.set($event)" />
+```
+
+**Sin tope y sin `valueChange`**
+
+```html
+<!-- ❌ mal: es controlado, el número no se mueve; y sin `min` baja a negativos (Trampas) -->
+<sui-counter-input ariaLabel="Cantidad" [value]="cantidad()" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-counter-input ariaLabel="Cantidad" [min]="1" [max]="99"
+  [value]="cantidad()" (valueChange)="cantidad.set($event)" />
+```
+
 ## Ejemplo
 
 ```html
 <!-- En el detalle del producto, al lado del CTA -->
-<sui-counter-input size="large" [min]="1" [max]="pdv.topeCantidad()"
+<sui-counter-input [size]="bp.tactil() ? 'xlarge' : 'large'" [min]="1" [max]="pdv.topeCantidad()"
                    ariaLabel="Cantidad" [value]="pdv.qty()" (valueChange)="pdv.setQty($event)" />
 
 <!-- Campo de formulario -->
 <sui-counter-input label="Pasajeros" hint="Hasta 4 pasajeros" [min]="1" [max]="4"
-                   [size]="bp.isMobile() ? 'large' : 'medium'" [(value)]="pasajeros" />
+                   [size]="bp.tactil() ? 'xlarge' : 'medium'" [(value)]="pasajeros" />
 ```

package/docs/sui-date-selector/README.md

@@ -53,13 +53,30 @@ Tiene `size`: **`medium`** (default, 288 × 36, flechas `sui-compact-button` de
 | `medium` (default) | 36 | 24 × 24 | 14/20 | web | medido (Figma 442:192) |
 
 ```html
-<sui-date-selector [size]="bp.isMobile() ? 'large' : 'medium'" label="Octubre 2026"
+<sui-date-selector [size]="bp.tactil() ? 'large' : 'medium'" label="Octubre 2026"
                    [rightIcon]="!esMesActual()" (prev)="mesAnterior()" (next)="mesSiguiente()" />
 ```
 
 Dentro del `sui-datepicker` `large` (y en mobile con `small`–`large`) el datepicker agranda las
 flechas a 40 por su cuenta; con `xlarge` usa este `size="large"` (44).
 
+### Por dispositivo (D16)
+
+No está en la tabla por componente de D16; las flechas se tocan, así que va como **lo que se
+toca** (dueño, 05-10-2026). `large` es el único size con flechas de 44.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380) | `medium` + área 44 | interino: hoy `large`, porque el DS todavía no estira a 44 el área de las flechas de 24 del `medium` |
+| celular (380–767) | `large` | barra de 52, flechas de 44 |
+| tablet táctil (`pointer: coarse`) | `large` | Apple pide 44 pt también en iPad |
+| computadora (`pointer: fine`) | `medium` | barra de 36, flechas de 24 |
+
+Ultrawide: igual que la computadora; el ancho sigue fijo en 288.
+
+En master-pedidos: `[size]="bp.tactil() ? 'large' : 'medium'"` (son los mismos literales que
+devuelve `bp.sizeControl()`, que también sirve).
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -90,13 +107,54 @@ flechas a 40 por su cuenta; con `xlarge` usa este `size="large"` (44).
 
 - **`leftIcon` y `rightIcon` son booleanos**, no nombres de ícono: prenden o apagan las flechas.
 - **Ancho fijo de 288 px** (`max-width` incluido): no se estira con el contenedor.
-- Con una flecha apagada queda un hueco de 24 px para que el texto siga centrado.
+- Con una flecha apagada queda un hueco del ancho de la flecha (24 px en `medium`, 44 en `large`)
+  para que el texto siga centrado.
 - El componente **no sabe de fechas**: el texto lo arma quien lo usa y las flechas solo emiten.
 - Los `aria-label` de las flechas dicen «Mes anterior» y «Mes siguiente» aunque el período sea
   una semana.
 
-## Ejemplo
+## Bien y mal
+
+**Las flechas en el teléfono**
+
+```html
+<!-- ❌ mal: `medium` deja las flechas en 24 en el celular y la tablet -->
+<sui-date-selector label="Octubre 2026" (prev)="mesAnterior()" (next)="mesSiguiente()" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-date-selector [size]="bp.tactil() ? 'large' : 'medium'" label="Octubre 2026"
+                   (prev)="mesAnterior()" (next)="mesSiguiente()" />
+```
+
+**Ya se está en el mes actual**
 
 ```html
+<!-- ❌ mal: los dos en `false` es un título con fondo; y abrevia el mes («Qué variante usar») -->
+<sui-date-selector label="Oct. 2026" [leftIcon]="false" [rightIcon]="false" />
+```
+
+```html
+<!-- ✅ bien: se apaga solo la flecha que no lleva a nada -->
 <sui-date-selector label="Octubre 2026" [rightIcon]="false" (prev)="mesAnterior()" />
 ```
+
+**Períodos fijos**
+
+```html
+<!-- ❌ mal: «Hoy», «Esta semana», «Este mes» no se recorren con flechas («Cuándo no») -->
+<sui-date-selector [label]="periodo()" (prev)="periodoAnterior()" (next)="periodoSiguiente()" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-segmented-control [tabs]="periodos" [(active)]="periodo" ariaLabel="Período" />
+```
+
+## Ejemplo
+
+```html
+<sui-date-selector [size]="bp.tactil() ? 'large' : 'medium'" label="Octubre 2026"
+                   [rightIcon]="false" (prev)="mesAnterior()" />
+```