@ajuarezso/sui-design-system 0.25.0 → 0.25.1

package/docs/sui-tab-menu-horizontal/README.md

@@ -84,9 +84,27 @@ es solo el texto: el `gap` entre pestañas no responde.
 | 4+ secciones | si no entran a 390 px, se salen sin poder deslizarse (las 4 del panel de repartidores, con sus números, ya no entran a 360): va `sui-tab-chips` | el mismo | según el código |
 
 ```html
-<sui-tab-menu-horizontal [tabs]="secciones" [(active)]="seccion" [size]="bp.isMobile() ? 'large' : 'medium'" />
+<sui-tab-menu-horizontal [tabs]="secciones" [(active)]="seccion" [size]="bp.tactil() && !bp.celularChico() ? 'large' : 'medium'" />
 ```
 
+### Por dispositivo (D16)
+
+Fila de `tab-menu-horizontal` en la tabla de D16 (dueño, 05-10-2026): se toca, pero su `medium`
+ya mide 48 de alto, así que el celular chico no necesita subir.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380 px) | `medium` (48) | ya mide 48: pasa el piso de 44 sin subir |
+| celular (380–767 px) | `large` (52, texto 16) | |
+| tablet táctil (`pointer: coarse`) | `large` (52) | se toca con el dedo, aunque mida más de 767 |
+| computadora (`pointer: fine`) | `medium` (48) | `small` no se usa |
+
+Ultrawide (≥ 1920 px): igual que la computadora, `medium`. `xlarge` no sale de ningún dispositivo.
+
+En master-pedidos: `[size]="bp.tactil() && !bp.celularChico() ? 'large' : 'medium'"`. No hay
+helper propio, y `bp.sizeControl()` no sirve aunque los valores coincidan: da `large` en el celular
+chico.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -141,6 +159,49 @@ interface SuiTabMenuHorizontalItem<T = string> {
 - El ícono de la pestaña activa es `strong-950`, no naranja; en el tab menu vertical es naranja.
   Es a propósito.
 
+## Bien y mal
+
+Pestañas del modal del local, que el cliente abre en el teléfono
+
+```html
+<!-- ❌ mal: sin size queda en medium en el teléfono y la tablet (components/store-ratings-modal/store-ratings-modal.html:43) -->
+<sui-tab-menu-horizontal [tabs]="tabs" [active]="tab()" (tabChange)="tab.set($any($event))" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-tab-menu-horizontal [tabs]="tabs" [(active)]="tab"
+  [size]="bp.tactil() && !bp.celularChico() ? 'large' : 'medium'" />
+```
+
+Flecha en una pestaña
+
+```html
+<!-- ❌ mal: rightIcon dice «te lleva a otra pantalla» y una pestaña no navega -->
+<sui-tab-menu-horizontal [(active)]="tab"
+  [tabs]="[{ value: 'opiniones', label: 'Opiniones', rightIcon: true }, { value: 'info', label: 'Información' }]" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-tab-menu-horizontal [(active)]="tab"
+  [tabs]="[{ value: 'opiniones', label: 'Opiniones' }, { value: 'info', label: 'Información' }]" />
+```
+
+Un total neutro en el círculo rojo
+
+```html
+<!-- ❌ mal: number es para pendientes que piden acción, no para cuántos repartidores hay -->
+<sui-tab-menu-horizontal [(active)]="tab"
+  [tabs]="[{ value: 'activos', label: 'Activos', number: 42 }, { value: 'solicitudes', label: 'Solicitudes' }]" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-tab-menu-horizontal [(active)]="tab"
+  [tabs]="[{ value: 'activos', label: 'Activos' }, { value: 'solicitudes', label: 'Solicitudes', number: 3 }]" />
+```
+
 ## Ejemplo
 
 ```html

package/docs/sui-tab-menu-vertical/README.md

@@ -17,8 +17,9 @@ de pago · Repartidores»), el perfil del super admin.
 
 **No lo uses** para:
 
-- **Mobile**: el ítem mide 36 px y ocupa el ancho de la pantalla dejando el contenido debajo. En
-  mobile cada sección es una fila de una lista que abre su propia pantalla.
+- **Mobile y tablet táctil**: el ítem mide 36 px y no llega a los 44 del dedo; en el celular,
+  además, ocupa el ancho de la pantalla dejando el contenido debajo. Ahí cada sección es una fila
+  de una lista que abre su propia pantalla.
 - La navegación de toda la app: `sui-sidebar`.
 - 2 a 4 secciones arriba del contenido: `sui-tab-menu-horizontal`.
 - Filtros de una lista: `sui-tab-chips`.
@@ -71,11 +72,19 @@ Usos de hoy que rompen las reglas: **0** (no se usa).
 | secciones de ajustes | no se usa: lista de filas que abren pantalla | `tab-menu-vertical` | «no se usa en mobile»: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono — el ítem mide 36 y no tiene `size` · la lista de filas en mobile y el uso en web: canon (aprobado por el dueño, 05-10-2026, bloque B7) |
 
 ```html
-@if (!bp.isMobile()) {
+@if (!bp.tactil()) {
   <sui-tab-menu-vertical [tabs]="secciones" [(active)]="seccion" menuStyle="card" />
 }
 ```
 
+### Por dispositivo (D16)
+
+No tiene `size` (ítem único de 36, sin eje de tamaño en Figma): no hay tabla por dispositivo. Como
+se toca y no llega a 44, la regla general de D16 lo deja fuera de todo lo táctil: celular (chico o
+no) y tablet táctil van con la lista de filas que abren pantalla (B7); computadora y ultrawide, el
+menú tal cual. Fuente: D16, dueño 05-10-2026 (columna «lo que se toca»). En master-pedidos:
+`@if (!bp.tactil()) { <sui-tab-menu-vertical … /> }`.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -128,6 +137,50 @@ type SuiTabMenuVerticalStyle = 'card' | 'list';
 - `role="tablist"`: si cada ítem navega a una ruta, el lector de pantalla lo anuncia mal; para
   navegación entre rutas, `sui-sidebar`.
 
+## Bien y mal
+
+Menú en el celular
+
+```html
+<!-- ❌ mal: en el celular y la tablet táctil el ítem mide 36 (no llega a 44), y en el celular el contenido queda debajo -->
+<sui-tab-menu-vertical [tabs]="secciones" [(active)]="seccion" />
+```
+
+```html
+<!-- ✅ bien: en el celular y la tablet táctil, cada sección es una fila que abre su pantalla -->
+@if (!bp.tactil()) {
+  <sui-tab-menu-vertical [tabs]="secciones" [(active)]="seccion" />
+}
+```
+
+Ítem activo al entrar
+
+```html
+<!-- ❌ mal: sin active no se marca ningún ítem -->
+<sui-tab-menu-vertical [tabs]="secciones" (tabChange)="mostrar($event)" />
+```
+
+```html
+<!-- ✅ bien: seccion arranca en la primera sección ('datos') -->
+<sui-tab-menu-vertical [tabs]="secciones" [(active)]="seccion" />
+```
+
+Menú dentro de una card
+
+```html
+<!-- ❌ mal: card dentro de una card, borde y sombra dobles -->
+<sui-card>
+  <sui-tab-menu-vertical [tabs]="secciones" [(active)]="seccion" menuStyle="card" />
+</sui-card>
+```
+
+```html
+<!-- ✅ bien: la columna ya tiene fondo y borde, el menú va plano -->
+<sui-card>
+  <sui-tab-menu-vertical [tabs]="secciones" [(active)]="seccion" menuStyle="list" />
+</sui-card>
+```
+
 ## Ejemplo
 
 ```html

package/docs/sui-table/README.md

@@ -72,8 +72,8 @@ Dentro va un componente SUI, no HTML a mano:
 
 | contenido | componente | fuente |
 |---|---|---|
-| estado o categoría | `<sui-badge variant="lighter" size="medium">` | canon (dueño, 05-10-2026, D16); CANON-SUI §0 («Chip de estado») todavía dice `small`: hay que actualizarlo en master-pedidos |
-| acciones de la fila | `<sui-button variant="ghost" color="neutral" size="medium" [onlyIcon]="true">` | canon (dueño, 05-10-2026, D16) (README de `sui-button`: en una tabla, `medium`; antes `2xsmall`) |
+| estado o categoría | `<sui-badge variant="lighter" [size]="bp.sizeBadge()">` (`medium` en la computadora, `large` en el celular) | D16, dueño 05-10-2026; CANON-SUI §0 («Chip de estado») todavía dice `small`: hay que actualizarlo en master-pedidos |
+| acciones de la fila | `<sui-button variant="ghost" color="neutral" [size]="bp.sizeControl()" [onlyIcon]="true">` (`medium` en la computadora, `large` donde se toca) | D16, dueño 05-10-2026 (README de `sui-button`: en una tabla, `medium` en la computadora; antes `2xsmall`) |
 | prender/apagar | `<sui-switch>` | propuesta, falta aprobación |
 | calificación | `<sui-rating>` de solo lectura | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 
@@ -118,11 +118,11 @@ secundaria dentro de un tablero) y 6 sin `size` (o sea `medium`).
 | uso | mobile | web | fuente |
 |---|---|---|---|
 | tabla principal de una pantalla | `medium` | `medium` | práctica de la app |
-| tabla secundaria dentro de un tablero | `small` | `small` | práctica de la app (1 uso) |
+| tabla secundaria dentro de un tablero | `medium` | `medium` | D16, dueño 05-10-2026 (antes `small`, práctica de la app: `master-overview.html:126`) |
 | filas con dos líneas y un badge | `medium` | `medium` | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
 
-El patrón `[size]="bp.isMobile() ? 'large' : 'medium'"` de los botones **no aplica aquí**: la fila
-ya mide 64 y el toque es sobre toda la fila. `large`/`xlarge` no tienen uso hoy.
+El patrón por dispositivo de los botones (`bp.sizeControl()`) **no aplica al `size` de la tabla**:
+la fila ya mide 64 y el toque es sobre toda la fila. `large`/`xlarge` no tienen uso hoy.
 
 **Qué pasa en mobile (≤ 767 px):** la tabla scrollea en horizontal dentro de sí misma; la
 cabecera y el cuerpo miden lo mismo y la barra de scroll se oculta. En la app conviven dos
@@ -140,6 +140,19 @@ solo en Android**: pone `touch-action: pan-x` por JS para que el scroll horizont
 y mueve él mismo la página con el gesto vertical (con inercia). En iOS no hace nada: WebKit delega
 el vertical solo. Por eso la página **no** agrega `touch-action` ni un wrapper con `overflow-x`.
 
+### Por dispositivo (D16)
+
+El `size` de la tabla no depende del dispositivo: cambia el alto de la fila (48 a 96), no el área
+que se toca, y la fila entera ya pasa los 44 del dedo. Va `medium` (el default) en el celular
+chico, el celular, la tablet táctil, la computadora y el ultrawide; por eso no hay tabla de D16.
+Lo que sí sigue a D16 es lo que va **dentro** de las celdas: el badge como lo que no se toca y el
+botón de acción como lo que se toca. Fuente: D16, dueño 05-10-2026.
+
+En master-pedidos: `<sui-table>` sin `size`, y en las plantillas `[size]="bp.sizeBadge()"` (badge)
+y `[size]="bp.sizeControl()"` (botón). Las tablas de la app que tienen badge o botón en una celda
+ya llevan esos helpers; la que queda fuera es `master-overview.html:126`, que pasa `size="small"` a
+la tabla.
+
 ## Pista de scroll (canon, aprobado por el dueño el 05-10-2026)
 
 Desde la **0.24.0**. Cuando la tabla scrollea en horizontal (≤ 767 px, o con una columna `sticky`)
@@ -256,6 +269,54 @@ trabajo de la página.
 - **El degradado de la pista es `bg-white-0`**, el fondo de la propia tabla. Si la tabla vive
   sobre otro fondo (no es el caso hoy), se pisa `--sui-pista-de-scroll-fondo` en un contenedor.
 
+## Bien y mal
+
+Segunda línea en la columna principal
+
+```html
+<!-- ❌ mal: la columna tiene descriptionKey, pero con plantilla la segunda línea no sale (central-gastos.html:49, central-gastos.ts:83) -->
+<ng-template suiTableCell="concepto" let-row>
+  <span class="cg__concepto">{{ row.concepto }}</span>
+</ng-template>
+```
+
+```html
+<!-- ✅ bien: sin plantilla en 'concepto'; leading + descriptionKey pintan las dos líneas (como orders.html:94) -->
+<sui-table [columns]="columnas" [rows]="filas()" emptyMessage="No hay gastos registrados este mes." />
+```
+
+Columnas que no entran
+
+```html
+<!-- ❌ mal: wrapper con overflow-x desde la página (drivers.html:212, drivers.scss:111) -->
+<div class="drivers__table-wrap">
+  <sui-table [columns]="tableColumns" [rows]="filteredDrivers()" rowKey="id" />
+</div>
+```
+
+```html
+<!-- ✅ bien: las columnas entran en el ancho real; con 6+ columnas, tarjetas por debajo de 1350 px -->
+<sui-table [columns]="tableColumns" [rows]="filteredDrivers()" rowKey="id" />
+```
+
+Botón dentro de una fila que abre el detalle
+
+```html
+<!-- ❌ mal: el clic edita y además abre el detalle por rowClicked -->
+<ng-template suiTableCell="acciones" let-row>
+  <sui-button variant="ghost" color="neutral" [size]="bp.sizeControl()" [onlyIcon]="true"
+              leftIcon="pencil-line" aria-label="Editar" (click)="editar(row)" />
+</ng-template>
+```
+
+```html
+<!-- ✅ bien -->
+<ng-template suiTableCell="acciones" let-row>
+  <sui-button variant="ghost" color="neutral" [size]="bp.sizeControl()" [onlyIcon]="true"
+              leftIcon="pencil-line" aria-label="Editar" (click)="$event.stopPropagation(); editar(row)" />
+</ng-template>
+```
+
 ## Ejemplo
 
 ```html
@@ -268,12 +329,12 @@ trabajo de la página.
     emptyMessage="Sin pedidos en este estado."
     (rowClicked)="abrirDetalle($event)">
     <ng-template suiTableCell="estado" let-row>
-      <sui-badge [color]="row.color" variant="lighter" size="medium">{{ row.estadoLabel }}</sui-badge>
+      <sui-badge [color]="row.color" variant="lighter" [size]="bp.sizeBadge()">{{ row.estadoLabel }}</sui-badge>
     </ng-template>
   </sui-table>
 
   @if (hayMas()) {
-    <sui-button variant="stroke" color="neutral" [size]="bp.isMobile() ? 'large' : 'medium'"
+    <sui-button variant="stroke" color="neutral" [size]="bp.sizeControl()"
                 [disabled]="cargandoMas()" (click)="cargarMas()">Cargar más</sui-button>
   }
 </sui-card>

package/docs/sui-tag/README.md

@@ -72,8 +72,9 @@ Criterio de la app: **D16, tamaño por dispositivo** (canon, dueño, 05-10-2026)
 380 px o más y, en lo que se toca, también la tablet (`pointer: coarse`). La columna «web» es la
 computadora (`pointer: fine`) y, en lo que no se toca, también la tablet. En el celular chico
 (< 380 px) va `medium` a la vista, sin achicar el área de 44 de lo que se toca. **Nada en `small` ni
-`xsmall`**, salvo lo que el componente solo tiene en chico. Hoy la app corta con
-`BreakpointsService.isMobile()` (≤ 767 px), que todavía no mira el puntero ni los 380 px.
+`xsmall`**, salvo lo que el componente solo tiene en chico. `BreakpointsService` ya mira el puntero
+y los 380 px (`bp.toque()`, `bp.celularChico()`, `bp.celular()`, `bp.tactil()`), pero no tiene un
+helper para el tag: se usa la expresión de «Por dispositivo (D16)».
 
 | size | alto | texto | leading | X de quitar (área táctil) |
 |---|---|---|---|---|
@@ -97,17 +98,42 @@ máximo se sigue cortando, y la X queda siempre visible.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| Tag con X (filtro aplicado, elegido que se quita) | `xlarge` (40) | `medium` (24) | mobile: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono — solo la X de `xlarge` llega a 44 · web: canon (dueño, 05-10-2026, D16) (`medium` es el más chico que tiene) |
+| Tag con X (filtro aplicado, elegido que se quita) | `xlarge` (40) | `medium` (24) | mobile: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono — solo la X de `xlarge` llega a 44 (en la tablet de más de 767 px, 40: ver «Por dispositivo») · web: canon (dueño, 05-10-2026, D16) (`medium` es el más chico que tiene) |
 | Tag de solo lectura (sin X) | `large` (32) | `medium` (24) | canon (dueño, 05-10-2026, P1 b); el tamaño es extensión SUI aprobada (03-10-2026) |
 | Separación entre tags | 8 px | 4–6 px | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
 
 ```html
-<sui-tag [size]="bp.isMobile() ? 'xlarge' : 'medium'" [dismissible]="true" (dismiss)="quitar(f)">{{ f.nombre }}</sui-tag>
+<sui-tag [size]="bp.tactil() ? 'xlarge' : 'medium'" [dismissible]="true" (dismiss)="quitar(f)">{{ f.nombre }}</sui-tag>
 ```
 
 El leading proyectado (ícono, avatar, bandera) se escala solo a la caja de 20 en los grandes; un
 `<i class="ri-…">` necesita además su `font-size` en 20.
 
+### Por dispositivo (D16)
+
+Fila `tag` de la tabla D16 (dueño, 05-10-2026). El tag con X se toca (la X); el de solo lectura no:
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380) | con X `xlarge` · solo lectura `medium` | la X solo llega a 44 en `xlarge` (el área de 44 se prende con `max-width: 767px`) |
+| celular (380–767) | con X `xlarge` · solo lectura `large` | lo que no se toca sube un paso en el celular (P1 b) |
+| tablet táctil (`pointer: coarse`) | con X `xlarge` · solo lectura `medium` | la X se toca con el dedo (Apple pide 44 también en el iPad), pero en la tablet de más de 767 px hoy se toca en **40×40**, no en 44: ver abajo |
+| computadora (`pointer: fine`) | `medium` | `medium` es el más chico que tiene |
+
+Ultrawide (≥ 1920 px): igual que la computadora, `medium`.
+
+**La X en la tablet queda en 40×40.** El área de 44 de la X de `xlarge` se prende con
+`@media (max-width: 767px)` (`sui-tag.scss`, `inset` −10); en una tablet de más de 767 px de ancho
+(casi todos los iPad, y cualquiera en horizontal) la X se toca en 40×40 (`inset` −8). `xlarge`
+sigue siendo lo correcto en la tablet (es el más grande que tiene); llega a 44 cuando el DS cambie
+ese media query por el mixin `sui-tactil` (`max-width: 767px` o `pointer: coarse`), que está
+propuesto en el doc de D16 y todavía no se hizo.
+
+En master-pedidos (no hay helper para el tag):
+
+- con X: `[size]="bp.tactil() ? 'xlarge' : 'medium'"`
+- solo lectura: `[size]="bp.celular() ? 'large' : 'medium'"`
+
 ## API
 
 <!-- api:inicio -->
@@ -146,6 +172,51 @@ Slots: `[data-slot=start]` (avatar, logo, bandera o ícono de 16 px) y `<ng-cont
 - `sui-avatar` no tiene 16 px: el `xs` (20) se escala por CSS dentro del slot.
 - Radio de 6 px, 24 px de alto en `medium`, sin mayúsculas: no es un badge (radio completo).
 
+## Bien y mal
+
+Dato de solo lectura
+
+```html
+<!-- ❌ mal: solo se lee y no lleva nada a la izquierda, eso es un badge -->
+<sui-tag tagStyle="gray" sublabel="3 días">Frecuencia</sui-tag>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-badge color="gray" [size]="bp.sizeBadge()">Frecuencia: 3 días</sui-badge>
+```
+
+Filtro aplicado que se quita
+
+```html
+<!-- ❌ mal: sin size la X mide 16 en el celular, y el lector de pantalla solo oye «Quitar» -->
+<sui-tag [dismissible]="true" (dismiss)="quitarFiltro('abierto')">Abierto ahora</sui-tag>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-tag [size]="bp.tactil() ? 'xlarge' : 'medium'" [dismissible]="true"
+         dismissLabel="Quitar Abierto ahora" (dismiss)="quitarFiltro('abierto')">Abierto ahora</sui-tag>
+```
+
+Logo a la izquierda
+
+```html
+<!-- ❌ mal: con algo en [data-slot=start] y sin [leading]="true", el padding queda mal -->
+<sui-tag [size]="bp.celular() ? 'large' : 'medium'">
+  <sui-avatar data-slot="start" size="xs" [src]="local.imageUrl" [initials]="'B'" />
+  Burger House
+</sui-tag>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-tag [size]="bp.celular() ? 'large' : 'medium'" [leading]="true">
+  <sui-avatar data-slot="start" size="xs" [src]="local.imageUrl" [initials]="'B'" />
+  Burger House
+</sui-tag>
+```
+
 ## Ejemplo
 
 ```html

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

@@ -28,9 +28,10 @@ Regla corta: **varios valores libres → tag-input · varias opciones fijas →
 > **En la guía del DS es un ejemplo de su página del input** («With Tags»: un campo con los chips
 > Berlin, London, Paris debajo). No dice cuándo usarlo.
 >
-> Uso medido el 04-10-2026 en `master-pedidos/src/app`: **0 usos**. Candidato: «Rubros que entran»
-> en `pages/super-admin/master-settings/master-settings.html:136`, un `sui-input` donde se escriben
-> palabras separadas por coma («ferreteria, ferretería, construcción») y la pantalla las parte a mano.
+> Uso medido el 06-10-2026 en `master-pedidos/src/app`: **1 uso**, «Rubros que entran» de una
+> categoría propia del home (`pages/super-admin/master-categorias/master-categorias.html:179`), con
+> `commaSeparator` y `addOnBlur`. Antes eran palabras separadas por coma en un `sui-input` que la
+> pantalla partía a mano.
 
 | prop / evento | cuándo | fuente |
 |---|---|---|
@@ -65,17 +66,38 @@ en web; el alto sigue en 48/52.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| campo de formulario | `xlarge` (52, chips de 40 con X tocable en 44) | `medium` (40) | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono (el 44 lo da la X del chip `xlarge`) |
+| campo de formulario | `large` (48, chips de 32 con X tocable en 32) | `medium` (40) | D16, dueño 05-10-2026 (fila `input`/`tag-input`); reemplaza el `xlarge` del 04-10-2026 · la X de 32 no llega a 44: ver «Por dispositivo» |
 
 ```html
-<sui-tag-input [size]="bp.isMobile() ? 'xlarge' : 'medium'" … />   <!-- bp = BreakpointsService -->
+<sui-tag-input [size]="bp.sizeControl()" … />   <!-- bp = BreakpointsService -->
 ```
 
+### Por dispositivo (D16)
+
+Fila `input`/`tag-input` de la tabla D16 (dueño, 05-10-2026). Se toca, así que va por tipo de
+puntero además del ancho:
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380) | `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) | `large` (48) | los chips salen en `large`: la X mide 20 con área de 32, no llega a 44 |
+| tablet táctil (`pointer: coarse`) | `large` (48) | igual que el celular |
+| computadora (`pointer: fine`) | `medium` (40) | también en filtros del panel; `xsmall` y `small` no se usan |
+
+Ultrawide (≥ 1920 px): igual que la computadora, `medium`.
+
+**Choque entre dos filas de D16 (a confirmar con el dueño):** con el campo en `large` la X del
+chip queda en 32, y la fila `tag` dice que la X solo llega a 44 en `xlarge`. Hasta el 04-10-2026 el
+campo iba `xlarge` en el teléfono justo por eso. Mientras no se diga otra cosa, manda la fila
+`tag-input` (`large`).
+
+En master-pedidos: `[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 |
 |---|---|---|
-| el componente entero (0 usos) | nadie carga listas de palabras | «Rubros que entran» de una categoría del home (`master-settings.html:136`), o sinónimos de un producto para el buscador |
+| otros usos (hoy solo los rubros de una categoría) | nadie más carga listas de palabras | sinónimos de un producto para el buscador |
 | `rightIcon` | el hint explica mejor | — |
 | `maxTags` | no hay topes | un máximo de 5 palabras clave por producto |
 | `allowDuplicates` | repetir no sirve | — |
@@ -124,10 +146,52 @@ no es parte del valor. Slot `[slot=right]` para un contenido propio a la derecha
 - **Accesibilidad (04-10-2026)**: el control trae su `id`; el `label` interno apunta a él con `for`,
   el hint o el error se enlazan con `aria-describedby` y `error` pone `aria-invalid`.
 
-## Ejemplo
+## Bien y mal
+
+Tamaño en el celular
+
+```html
+<!-- ❌ mal: sin size queda en medium en el celular y la X de los chips mide 16 (master-categorias.html:179) -->
+<sui-tag-input label="Rubros que entran" [commaSeparator]="true" [addOnBlur]="true"
+               [value]="e.match" (valueChange)="editar('match', $event)" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-tag-input [size]="bp.sizeControl()" label="Rubros que entran" [commaSeparator]="true"
+               [addOnBlur]="true" [value]="e.match" (valueChange)="editar('match', $event)" />
+```
+
+Placeholder y hint
 
 ```html
+<!-- ❌ mal: el placeholder dice cómo se agrega, no qué se agrega (master-categorias.html:179) -->
+<sui-tag-input label="Rubros que entran" placeholder="Escribe y pulsa coma"
+               hint="Un local entra si su rubro contiene alguna de estas palabras" />
+```
+
+```html
+<!-- ✅ bien: el placeholder dice qué; el hint, cómo -->
 <sui-tag-input label="Rubros que entran" placeholder="Agrega una palabra…"
+               hint="Separa con coma. Un local entra si su rubro contiene alguna" />
+```
+
+Salir del campo sin Enter
+
+```html
+<!-- ❌ mal: sin addOnBlur, lo escrito y no confirmado se pierde al salir -->
+<sui-tag-input label="Sinónimos" [commaSeparator]="true" [(value)]="sinonimos" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-tag-input label="Sinónimos" [commaSeparator]="true" [addOnBlur]="true" [(value)]="sinonimos" />
+```
+
+## Ejemplo
+
+```html
+<sui-tag-input [size]="bp.sizeControl()" label="Rubros que entran" placeholder="Agrega una palabra…"
                hint="Un local entra si su rubro contiene alguna" [commaSeparator]="true"
                [addOnBlur]="true" [(value)]="rubros" />
 ```

package/docs/sui-textarea/README.md

@@ -18,8 +18,8 @@ comentario al calificar.
 **No lo uses** para:
 
 - Un dato de una línea (nombre, referencia corta, URL, un slug): `sui-input`. Hoy hay 4 así:
-  «Personaliza tu url» en `pages/mi-negocio/mi-negocio.html:713` (a propósito, para que envuelva en
-  mobile, según su comentario) y 3 URL de imagen: `pages/mi-negocio/mi-negocio.html:534`, `:588` y
+  «Personaliza tu url» en `pages/mi-negocio/mi-negocio.html:714` (a propósito, para que envuelva en
+  mobile, según su comentario) y 3 URL de imagen: `pages/mi-negocio/mi-negocio.html:533`, `:588` y
   `components/add-product-modal/add-product-modal.html:72`.
 - Un motivo que se puede elegir de una lista cerrada: radios o `sui-select`, y la opción «Otro»
   abre el textarea (como ya hace `pages/envios/envios.html:822`, con `[maxLength]="200"`; el
@@ -50,7 +50,7 @@ Regla corta: **se redacta y puede pasar de una línea → textarea · una línea
 | `maxLength` | **Siempre que otro lo va a leer** (cliente, repartidor, local) o se guarda en la base: muestra «n/200» y corta el exceso. 200 para motivos y notas; 500 para descripciones. | según la guía del DS (su ejemplo principal lleva contador); los topes: canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 | `size` | El mismo de los inputs del formulario: `large` en mobile, `medium` en web. Ver «Tamaño en mobile y en web». | canon (aprobado por el dueño, 03-10-2026), extensión SUI; el «cuándo»: canon (aprobado por el dueño, 05-10-2026, bloque B1) |
 | `rows` | `3` para motivos y notas (el default del componente es `4`). `2` para una nota corta en un formulario largo. `4` o más solo para una descripción larga. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
-| `resizable` | `true` en web. En mobile **`false`**: la manija no se puede arrastrar con el dedo y parece un adorno. | según la guía del DS (versión con y sin manija); el «cuándo»: canon (aprobado por el dueño, 05-10-2026, bloque B8) |
+| `resizable` | `true` en web. En mobile y en la tablet táctil **`false`** (`!bp.tactil()`, D16): la manija no se puede arrastrar con el dedo y parece un adorno. | según la guía del DS (versión con y sin manija); el «cuándo»: canon (aprobado por el dueño, 05-10-2026, bloque B8) |
 | `readonly` | Mostrar un texto ya enviado con la misma forma del campo (copiar un mensaje). | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
 | `disabled` | Mientras se envía. | según la guía del DS |
 | `autocomplete` | No hace falta: ningún texto libre se autocompleta. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
@@ -61,9 +61,12 @@ Regla corta: **se redacta y puede pasar de una línea → textarea · una línea
 
 - **7 sin `maxLength`**: 4 son las URL de una línea de arriba y 1 es de solo lectura
   (`components/copy-text-dialog/copy-text-dialog.html:9`); quedan 2 «Notas» que se guardan en la base:
-  `pages/super-admin/super-admin.html:334`, `pages/super-admin/master-gastos/master-gastos.html:228`.
-- **Ninguno lleva `size`**: los 50 quedan en `medium` también en el teléfono, aunque los inputs del
-  mismo formulario ya vayan en `large`.
+  `pages/super-admin/super-admin.html:339`, `pages/super-admin/master-gastos/master-gastos.html:235`.
+- **`size` ya cumple** (medido de nuevo el 06-10-2026, tras la migración a D16): los 51 usos de la
+  app (sin vitrinas) van con `bp.sizeControl()`.
+- **49 de 51 sin `resizable`**: la manija sale también en el celular y la tablet, donde no se puede
+  arrastrar con el dedo (p. ej. «Nota para el repartidor», `pages/envios/envios.html:422`). Solo
+  `copy-text-dialog.html:9` y `mi-negocio.html:714` la apagan, y fijo, también en la computadora.
 
 ## Tamaño en mobile y en web
 
@@ -90,14 +93,34 @@ también en web, así que cada fila mide 24 en las dos plataformas.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| motivo, nota | el `size` del formulario (`large` si los inputs van en `large`), `rows=3`, `[resizable]="false"` | `medium`, `rows=3`, manija | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| motivo, nota | el `size` del formulario (`large` si los inputs van en `large`), `rows=3`, sin manija | `medium`, `rows=3`, manija | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
 | descripción larga | igual, `rows=4` | `medium`, `rows=4` | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
 
+«Mobile» aquí incluye la tablet táctil (D16): la manija se apaga con `[resizable]="!bp.tactil()"`,
+no con `[resizable]="false"` ni por ancho, para que tampoco salga en una tablet ancha.
+
 ```html
-<sui-textarea [size]="bp.isMobile() ? 'large' : 'medium'" [rows]="3"
-              [resizable]="!bp.isMobile()" … />   <!-- bp = BreakpointsService -->
+<sui-textarea [size]="bp.sizeControl()" [rows]="3"
+              [resizable]="!bp.tactil()" … />   <!-- bp = BreakpointsService -->
 ```
 
+### Por dispositivo (D16)
+
+Fila `textarea` de la tabla D16 (dueño, 05-10-2026), la misma de `sui-input`: se toca, así que va
+por tipo de puntero además del ancho, y mide lo mismo que los campos y el botón del formulario.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380 px) | `large` | D16 pide `medium` con área tocable de 44; mientras el DS no estire el área de los `medium`, va `large` (interino). Sin manija |
+| celular (380–767 px) | `large` | el mismo padding que el `sui-input` `large` de arriba. Sin manija |
+| tablet táctil (`pointer: coarse`) | `large` | también se toca con el dedo: `large` y sin manija, igual que el celular |
+| computadora (`pointer: fine`) | `medium` | con manija; `small` y `xsmall` no se usan |
+
+Ultrawide (≥ 1920 px): igual que la computadora, `medium`; el espacio extra va al ancho del
+formulario, no a un campo más alto. El alto lo siguen poniendo las `rows` en todos los dispositivos.
+
+En master-pedidos: `[size]="bp.sizeControl()"` + `[resizable]="!bp.tactil()"`.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -147,12 +170,56 @@ Outputs: ninguno.
 - **Accesibilidad (04-10-2026)**: el control trae su `id`; el `label` interno apunta a él con `for`,
   el hint o el error se enlazan con `aria-describedby` y `error` pone `aria-invalid`.
 
+## Bien y mal
+
+URL de una imagen
+
+```html
+<!-- ❌ mal: una URL es un dato de una línea, y sin maxLength (pages/mi-negocio/mi-negocio.html:533, components/add-product-modal/add-product-modal.html:72) -->
+<sui-textarea [size]="bp.sizeControl()" [rows]="2" placeholder="https://ejemplo.com/logo.png"
+              [value]="logoUrlInput()" (valueChange)="logoUrlInput.set($event)" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-input type="url" [size]="bp.sizeControl()" placeholder="https://ejemplo.com/logo.png"
+           [value]="logoUrlInput()" (valueChange)="logoUrlInput.set($event)" />
+```
+
+Nota que se guarda en la base
+
+```html
+<!-- ❌ mal: sin maxLength no hay contador ni tope, y la nota se guarda (pages/super-admin/super-admin.html:339) -->
+<sui-textarea [size]="bp.sizeControl()" label="Notas" sublabel="(Opcional)" [rows]="3"
+              [ngModel]="subNotes()" (ngModelChange)="subNotes.set($event)" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-textarea [size]="bp.sizeControl()" label="Notas" sublabel="(Opcional)" [rows]="3" [maxLength]="200"
+              [resizable]="!bp.tactil()" [ngModel]="subNotes()" (ngModelChange)="subNotes.set($event)" />
+```
+
+Nota para el repartidor en el celular
+
+```html
+<!-- ❌ mal: sin resizable, la manija sale en el celular y la tablet, donde no se arrastra con el dedo; y el tope de una nota es 200 (pages/envios/envios.html:422) -->
+<sui-textarea [size]="bp.sizeControl()" [maxLength]="300" label="Nota para el repartidor"
+              placeholder="Ej. frágil, tocar el timbre, entregar en recepción" [rows]="3" [(value)]="nota" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-textarea [size]="bp.sizeControl()" [maxLength]="200" label="Nota para el repartidor" [resizable]="!bp.tactil()"
+              placeholder="Ej. frágil, tocar el timbre, entregar en recepción" [rows]="3" [(value)]="nota" />
+```
+
 ## Ejemplo
 
 ```html
 <sui-textarea label="Nota para el repartidor" sublabel="(Opcional)" [rows]="3" [maxLength]="200"
-              [size]="bp.isMobile() ? 'large' : 'medium'" placeholder="Ej. frágil, tocar el timbre, entregar en recepción"
-              [resizable]="!bp.isMobile()" [(value)]="nota" />
+              [size]="bp.sizeControl()" placeholder="Ej. frágil, tocar el timbre, entregar en recepción"
+              [resizable]="!bp.tactil()" [(value)]="nota" />
 
 <sui-textarea label="Motivo del rechazo" [required]="true" [rows]="3" [maxLength]="200"
               hint="Lo va a leer el local" [error]="intentado() && !motivo()"