@ajuarezso/sui-design-system 0.25.0 → 0.25.2

package/docs/sui-command-menu-item/README.md

@@ -71,13 +71,31 @@ buscador de mobile, la fila `small` mide 40 y queda debajo de los 44 del dedo.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| resultado de una línea | `medium` (64) | `small` (40) | mobile: canon (decisión del dueño 04-10-2026, piso táctil 44: `small` mide 40, `medium` es el único size que llega) · web: propuesta, falta aprobación |
+| resultado de una línea | `medium` (64) | **pendiente** (hoy `small`, 40, el default) | mobile: canon (decisión del dueño 04-10-2026, piso táctil 44: `small` mide 40, `medium` es el único size que llega) · web: pendiente (D16, dueño 05-10-2026: el tamaño cambia el layout) |
 | resultado con descripción | `medium` (64) | `medium` (64) | mobile: canon (decisión del dueño 04-10-2026, piso táctil 44) · web: lo impone el código (`description` solo se pinta en `medium`) |
 
 ```html
-<sui-command-menu-item [size]="bp.isMobile() ? 'medium' : 'small'" … />   <!-- bp = BreakpointsService -->
+<sui-command-menu-item [size]="bp.tactil() ? 'medium' : 'small'" … />   <!-- bp = BreakpointsService -->
 ```
 
+### Por dispositivo (D16)
+
+Se toca, así que la tablet va con el celular. En la computadora D16 lo deja **pendiente**: `small`
+(40) y `medium` (64) no son el mismo ítem más chico o más grande, porque `description` solo se pinta
+en `medium`; elegir uno cambia qué se lee en la fila.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380) | — | D16 no lo fija: el ⌘K no se arma en el celular. Si se reusa la lista, solo `medium` llega a 44 |
+| celular (380–767) | `medium` | el único que llega a 44 |
+| tablet táctil (`pointer: coarse`) | `medium` | Apple pide 44 también en iPad |
+| computadora (`pointer: fine`) | **pendiente** | falta decidir (D16, nota ⁵); hoy queda el default `small`, y con `description` va `medium` fijo |
+
+Ultrawide: igual que la computadora.
+
+En master-pedidos: `[size]="bp.tactil() ? 'medium' : 'small'"` (no hay helper; el `'small'` es el
+default de hoy mientras la computadora sigue pendiente). Con `description`: `size="medium"` en todos.
+
 ## API
 
 <!-- api:inicio -->
@@ -122,16 +140,57 @@ Slot: `[slot=brand]` (solo con `type="brand"`). `avatar` acepta un string (la UR
 - Mide como máximo 600 px de ancho.
 - El host borra el atributo `title` nativo (no aparece el tooltip gris del navegador).
 
+## Bien y mal
+
+Abrir el resultado
+
+```html
+<!-- ❌ mal: (clicked) nunca sale; el componente no lo conecta a ningún clic -->
+<sui-command-menu-item type="left-icon" icon="file-list-3-line" title="Pedidos"
+                       (clicked)="ir('/empresa/pedidos')" />
+```
+
+```html
+<!-- ✅ bien: el (click) nativo del host, y Enter cableado a mano -->
+<sui-command-menu-item type="left-icon" icon="file-list-3-line" title="Pedidos"
+                       (click)="ir('/empresa/pedidos')" (keydown.enter)="ir('/empresa/pedidos')" />
+```
+
+Resultado con segunda línea
+
+```html
+<!-- ❌ mal: size queda en small (default) y description no se pinta -->
+<sui-command-menu-item title="Pedido #1234" description="Juan Pérez · S/ 45.00" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-command-menu-item size="medium" title="Pedido #1234" description="Juan Pérez · S/ 45.00" />
+```
+
+Ir a una pantalla
+
+```html
+<!-- ❌ mal: left-icon sin icon; en medium (celular y tablet) deja el círculo vacío -->
+<sui-command-menu-item type="left-icon" [size]="bp.tactil() ? 'medium' : 'small'" title="Recargas" />
+```
+
+```html
+<!-- ✅ bien: el size de una línea sigue la expresión vigente (la computadora está pendiente) -->
+<sui-command-menu-item type="left-icon" [size]="bp.tactil() ? 'medium' : 'small'" icon="wallet-3-line"
+                       title="Recargas" />
+```
+
 ## Ejemplo
 
 ```html
 <sui-modal [(open)]="buscadorAbierto" size="large" [fullscreen]="true">
   <sui-command-menu-search [(value)]="q" placeholder="Busca pedidos, locales o repartidores…"
-                           [shortcut]="!bp.isMobile()" [button]="!bp.isMobile()" />
+                           [shortcut]="!bp.isMobile()" [button]="!bp.tactil()" />
   <sui-content-divider type="text" text="Pantallas" />
   @for (p of pantallas(); track p.ruta) {
     <sui-command-menu-item type="left-icon" [icon]="p.icono" [title]="p.nombre"
-                           [size]="bp.isMobile() ? 'medium' : 'small'"
+                           [size]="bp.tactil() ? 'medium' : 'small'"
                            (click)="ir(p.ruta)" (keydown.enter)="ir(p.ruta)" />
   }
   @if (!bp.isMobile()) {

package/docs/sui-command-menu-search/README.md

@@ -43,7 +43,7 @@ más oscuro) y con texto (lupa naranja, X para limpiar).
 |---|---|---|
 | `placeholder` | **Siempre**, en español y diciendo qué se busca: «Busca pedidos, locales o repartidores…». El default genérico es `'Buscar o ir a…'`. | canon (CANON-SUI §5: copy en español, elipsis `…`) |
 | `shortcut` | `true` solo en web; en mobile `false` (no hay teclado físico). | canon (README de `sui-kbd`) |
-| `button` | La X de limpiar **solo en web** (`true`): ahorra borrar a mano. En mobile, `false` hasta que el DS tenga un size de 44 (la X mide 20). El ícono de info del estado vacío no hace nada. | canon (aprobado por el dueño, 05-10-2026, bloque B13) |
+| `button` | La X de limpiar **solo en la computadora** (`true`): ahorra borrar a mano. En el celular y en la tablet táctil, `false` hasta que el DS tenga un size de 44 (la X mide 20): se toca, así que la tablet va con el celular (D16). El ícono de info del estado vacío no hace nada. | canon (aprobado por el dueño, 05-10-2026, bloque B13) |
 
 ## Tamaño en mobile y en web
 
@@ -51,13 +51,26 @@ No tiene tamaños: 48 px de alto (14 + 20 + 13 + 1 de borde), texto 14/20, hasta
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| buscador del command menu | igual, sin chip ⌘K | igual, con chip ⌘K | canon para el chip (README de `sui-kbd`); el resto, propuesta |
+| buscador del command menu | igual, sin chip ⌘K ni X | igual, con chip ⌘K y X | canon para el chip (README de `sui-kbd`) y la X (B13 + D16: la tablet táctil va sin X); el resto, propuesta |
 
 ```html
 <sui-command-menu-search [(value)]="q" placeholder="Busca pedidos, locales o repartidores…"
-                         [shortcut]="!bp.isMobile()" [button]="!bp.isMobile()" />   <!-- bp = BreakpointsService -->
+                         [shortcut]="!bp.isMobile()" [button]="!bp.tactil()" />   <!-- bp = BreakpointsService -->
 ```
 
+### Por dispositivo (D16)
+
+No aplica: no tiene input `size` (48 px de alto y texto 14 en todos los dispositivos), así que D16 no
+lo mueve. Por dispositivo solo cambian dos cosas, y no con la misma señal:
+
+- **La X de limpiar se toca** (`sui-compact-button` `medium`, 20 px): va apagada en el celular **y en
+  la tablet táctil**, porque D16 pone la tablet con el celular en lo que se toca (Apple pide 44
+  también en iPad). `bp.tactil()`, no `bp.isMobile()`: `isMobile()` solo mira el ancho (≤ 767 px) y
+  en un iPad la dejaría prendida.
+- **El chip ⌘K no se toca**: sigue la regla de `sui-kbd`, apagado en el celular (`!bp.isMobile()`).
+
+En master-pedidos: `[shortcut]="!bp.isMobile()" [button]="!bp.tactil()"`, sin `[size]`.
+
 ## API
 
 <!-- api:inicio -->
@@ -94,6 +107,47 @@ No tiene tamaños: 48 px de alto (14 + 20 + 13 + 1 de borde), texto 14/20, hasta
 - No tiene `disabled`.
 - El ícono de info del estado vacío es decorativo: no abre ayuda ni tiene `aria-label`.
 
+## Bien y mal
+
+Devolver el texto al campo
+
+```html
+<!-- ❌ mal: sin [(value)] el componente no sabe que hay texto; la X nunca aparece -->
+<sui-command-menu-search placeholder="Busca pedidos, locales o repartidores…"
+                         (valueChange)="buscar($event)" />
+```
+
+```html
+<!-- ✅ bien: el filtro sale de q (un computed), no del evento -->
+<sui-command-menu-search [(value)]="q" placeholder="Busca pedidos, locales o repartidores…" />
+```
+
+Chip ⌘K y X en el celular
+
+```html
+<!-- ❌ mal (en el celular y en la tablet táctil): ⌘K sin teclado físico y una X de 20 px para el dedo -->
+<sui-command-menu-search [(value)]="q" placeholder="Busca pedidos, locales o repartidores…"
+                         [shortcut]="true" [button]="true" />
+```
+
+```html
+<!-- ✅ bien: la X se toca, así que también se apaga en la tablet táctil (bp.tactil()) -->
+<sui-command-menu-search [(value)]="q" placeholder="Busca pedidos, locales o repartidores…"
+                         [shortcut]="!bp.isMobile()" [button]="!bp.tactil()" />
+```
+
+Buscar dentro de una pantalla
+
+```html
+<!-- ❌ mal: suelto, sin caja, parece texto; y no lleva la lupa en el teclado -->
+<sui-command-menu-search [(value)]="q" placeholder="Buscar pedido…" />
+```
+
+```html
+<!-- ✅ bien: el buscador de una pantalla es sui-input search -->
+<sui-input type="search" [size]="bp.sizeControl()" placeholder="Buscar pedido…" [(value)]="q" />
+```
+
 ## Ejemplo
 
 ```html
@@ -101,6 +155,6 @@ No tiene tamaños: 48 px de alto (14 + 20 + 13 + 1 de borde), texto 14/20, hasta
   [(value)]="q"
   placeholder="Busca pedidos, locales o repartidores…"
   [shortcut]="!bp.isMobile()"
-  [button]="!bp.isMobile()"
+  [button]="!bp.tactil()"
   (cleared)="resultados.set([])" />
 ```

package/docs/sui-compact-avatar-group/README.md

@@ -53,8 +53,8 @@ Usos de hoy que rompen la regla: **0** (no hay usos).
 En mobile va más grande por legibilidad (el grupo no se toca: el área la da la fila); en web, más chico. En las
 pantallas que se usan en los dos (panel del local, super admin) se elige con el servicio de
 breakpoints de la app (`bp`, en `services/breakpoints.service.ts`); en las que solo existen en
-el celular (cliente, repartidor) va directo el valor de mobile. No se toca, así que la tablet va
-con el valor de web, y el celular chico (< 380 px) también (D16).
+el celular (cliente, repartidor) también va `bp.celular()`, porque el celular chico (< 380 px) toma
+el valor de web (D16, dueño 05-10-2026). No se toca, así que la tablet va con el valor de web.
 Es **canon (dueño, 05-10-2026, P1 b)**: un paso más grande en el celular que en computadora, y
 se migra todo ahora, no solo al tocar cada pantalla.
 
@@ -64,9 +64,26 @@ se migra todo ahora, no solo al tocar cada pantalla.
 | dentro de una card | `'40'` | `'32'` |
 
 ```html
-<sui-compact-avatar-group [size]="bp.isMobile() ? '32' : '24'" [items]="repartidores" />
+<sui-compact-avatar-group [size]="bp.celular() ? '32' : '24'" [items]="repartidores" />
 ```
 
+### Por dispositivo (D16)
+
+No se toca: sube un paso solo en el celular de 380 px o más; el resto va con el valor de web.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380) | valor web: `'24'` fila · `'32'` card | lo que no se toca va como en la computadora (D16) |
+| celular (380–767) | valor mobile: `'32'` fila · `'40'` card | P1 b: un paso más que en la computadora |
+| tablet táctil (`pointer: coarse`) | valor web: `'24'` fila · `'32'` card | no se toca: el puntero no lo mueve |
+| computadora (`pointer: fine`) | valor web: `'24'` fila · `'32'` card | |
+
+Ultrawide: igual que la computadora; el espacio extra no agranda el grupo.
+
+En master-pedidos: `[size]="bp.celular() ? '32' : '24'"` en una fila y `[size]="bp.celular() ? '40' : '32'"`
+en una card (no hay helper: `bp.sizeAvatar()` usa la escala de `sui-avatar`, no `'24'`/`'32'`/`'40'`).
+`bp.isMobile()` no sirve: incluye al celular chico.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -100,8 +117,48 @@ Outputs: ninguno.
 - Las reglas de foto y color de cada persona son las de `sui-avatar`: el `color` por rol va
   explícito en cada item (canon, aprobado por el dueño, 03-10-2026); sin él cae a `slate`.
 
+## Bien y mal
+
+El size es un string
+
+```html
+<!-- ❌ mal: con números no compila; el tipo es '24' | '32' | '40' -->
+<sui-compact-avatar-group [size]="bp.celular() ? 32 : 24" [items]="repartidores" />
+```
+
+```html
+<!-- ✅ bien: los valores van entre comillas (fila: '32' en el celular, '24' en el resto) -->
+<sui-compact-avatar-group [size]="bp.celular() ? '32' : '24'" [items]="repartidores" />
+```
+
+Tamaño en el celular chico
+
+```html
+<!-- ❌ mal: isMobile() también sube el celular chico, que va con el valor de web (D16) -->
+<sui-compact-avatar-group [size]="bp.isMobile() ? '32' : '24'" [items]="repartidores" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-compact-avatar-group [size]="bp.celular() ? '32' : '24'" [items]="repartidores" />
+```
+
+El «+N» a mano
+
+```html
+<!-- ❌ mal: items ya trae a todos; count fijo gana al cálculo y miente cuando cambia la lista -->
+<sui-compact-avatar-group [size]="bp.celular() ? '32' : '24'" appearance="stroke" [items]="repartidores"
+                          count="+3" />
+```
+
+```html
+<!-- ✅ bien: count solo si items trae menos personas que el total -->
+<sui-compact-avatar-group [size]="bp.celular() ? '32' : '24'" appearance="stroke" [items]="repartidores" />
+```
+
 ## Ejemplo
 
 ```html
-<sui-compact-avatar-group size="24" appearance="stroke" [items]="repartidoresDelLocal" />
+<!-- celda de la tabla de locales: '32' en el celular de 380 px o más, '24' en el resto (D16) -->
+<sui-compact-avatar-group [size]="bp.celular() ? '32' : '24'" appearance="stroke" [items]="repartidoresDelLocal" />
 ```

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

@@ -27,11 +27,15 @@ carrusel o un mapa.
 > dos tamaños, el radio completo y el deshabilitado, sin do/don't. Las reglas de abajo son
 > **canon (aprobado por el dueño, 03-10-2026)** salvo donde dice otra fuente.
 >
-> Uso medido el 04-10-2026 en `master-pedidos/src/app`: 11 compact-buttons en 7 archivos, sin
+> Uso medido el 06-10-2026 en `master-pedidos/src/app`: 12 compact-buttons en 8 archivos, sin
 > contar prototipos ni vitrinas (`master-preview`, `master-prototipos`, `mockup-sheets-*`,
-> `dx/*`, `master-rutina`, `master-medico`, `dev-index`). Estilos: 6 `ghost`, 3 `stroke` (uno
-> por error, ver abajo), 2 `white`, 0 `modifiable`. Tamaños: 3 `large`, 2 `medium`, 2 `xlarge` y
-> 4 por `bp` (`2xlarge`/`large` y `3xlarge`/`medium`). 4 con `fullRadius`, 1 con `disabled`.
+> `dx/*`, `master-rutina`, `master-medico`, `dev-index`). Estilos: 7 `ghost`, 3 `stroke` (uno
+> por error, ver abajo), 2 `white`, 0 `modifiable`. Tamaños: 7 por `bp` (6 `5xlarge`/`large` y 1
+> `5xlarge`/`medium`, los 7 con `bp.isMobile()`), 2 `large` fijo, 1 `medium` fijo y 2 `xlarge`
+> fijo. 4 con `fullRadius`, 1 con `disabled`.
+>
+> Las líneas citadas en este README son las de **apertura del elemento** (`<sui-compact-button`),
+> aunque el `[size]` o el `(click)` estén unas líneas más abajo.
 
 ### Lo que sí dice la guía del DS
 
@@ -53,14 +57,16 @@ carrusel o un mapa.
 
 **Usos de hoy que rompen la regla:**
 
-- **1 bug: `variant="ghost"` en vez de `variantStyle`.** `pages/super-admin/master-settings/master-settings.html:658`
-  («Quitar este nivel»). `variant` no es un input del compact-button: el atributo se ignora y el
-  botón sale `stroke`. Pasar a `variantStyle="ghost"`.
+- **Sin estilo explícito.** `pages/super-admin/master-settings/master-settings.html:649` («Quitar este
+  nivel»). Antes llevaba `variant="ghost"` (que el compact-button ignora); medido el 06-10-2026, ya
+  no lleva `variant`, pero tampoco `variantStyle`, así que sigue saliendo `stroke`. Pasar a
+  `variantStyle="ghost"` (además tiene `size="medium"` fijo y `(click)`: ver «Bien y mal»).
 - **Resuelto — `ghost` en acciones de fila** (canon, dueño 04-10-2026): se permite, igual que en
-  `sui-button`. Los 5 usos de hoy quedan bien: `components/option-sections-manager/option-sections-manager.html:38`
-  y `:148`, `components/add-product-modal/add-product-modal.html:315`,
-  `pages/super-admin/master-settings/master-settings.html:113` y `:658` (este último sigue con el
-  bug de `variant` en vez de `variantStyle`).
+  `sui-button`. En estos usos el **`ghost` queda bien**:
+  `components/option-sections-manager/option-sections-manager.html:38` y `:148`,
+  `components/add-product-modal/add-product-modal.html:317` y
+  `pages/super-admin/master-categorias/master-categorias.html:91` y `:98`. El **tamaño** no: los
+  cinco rompen D16 (ver «Usos de hoy que rompen la regla» en `size`).
 
 ### `size`
 
@@ -74,13 +80,26 @@ carrusel o un mapa.
 | `4xlarge` | 40 (24) | Flotantes sobre el mapa (volver, centrar). | ídem: canon; publicado desde 0.20.0 |
 | `5xlarge` | 44 (24) | **El del teléfono** cuando el botón se toca solo: cerrar un modal o sheet, flotantes sobre el mapa. El ícono se queda en 24 como `4xlarge`: crece el área, no el dibujo. | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono |
 
-**Migración a tamaños de mobile: hecha** (medido el 04-10-2026). Los 4 casos del cliente ya usan
-`bp`: `components/product-detail-view/product-detail-view.html:169` y `:173` y
-`pages/customer/order-history/order-history.html:382` con `2xlarge`/`large`, y
-`components/store-ratings-modal/store-ratings-modal.html:33` con `3xlarge` en mobile.
+**Migración a tamaños de mobile: a medias** (medido el 06-10-2026). 7 usos ya llevan `bp` con
+`5xlarge` en el celular, pero los 7 con `bp.isMobile()`, que mira solo el ancho: en la tablet quedan
+con el tamaño de web (24 o 20). Hay que pasarlos a `bp.tactil()` (D16):
+
+- `components/product-detail-view/product-detail-view.html:169` y `:173` (− / +)
+- `pages/customer/order-history/order-history.html:382` (ver detalle)
+- `components/store-ratings-modal/store-ratings-modal.html:33` (cerrar)
+- `components/add-product-modal/add-product-modal.html:317` (quitar opción)
+- `components/option-sections-manager/option-sections-manager.html:38` (más) y `:148` (quitar opción)
+
+**Usos de hoy que rompen la regla** (además de los 7 de arriba):
 
-**Uso de hoy que rompe la regla:** `store-ratings-modal.html:33` cierra en web con `medium` (20);
-la tabla de abajo pide `xlarge` (28).
+- `store-ratings-modal.html:33` cierra en web con `medium` (20); la tabla de abajo pide `xlarge` (28).
+- `pages/super-admin/master-settings/master-settings.html:649` («Quitar este nivel»): `size="medium"`
+  fijo, así que mide 20 en el celular y la tablet. Va `[size]="bp.tactil() ? '5xlarge' : 'large'"`.
+- `pages/super-admin/master-categorias/master-categorias.html:91` (fijar) y `:98` (editar):
+  `size="large"` fijo, 24 en el celular y la tablet. Va `[size]="bp.tactil() ? '5xlarge' : 'large'"`.
+
+Las flechas de `arrastre-carrusel.ts:102` y `:104` llevan `xlarge` fijo y están bien: solo aparecen
+con mouse.
 
 ### `fullRadius`
 
@@ -103,12 +122,13 @@ la tabla de abajo pide `xlarge` (28).
 
 En mobile se toca con el dedo: el área táctil tiene que medir **44 px o más**. En la tablet
 (`pointer: coarse`) va igual que en el celular, porque también se toca; en la computadora
-(`pointer: fine`), `medium`; en el celular chico (< 380 px), `medium` a la vista sin bajar el área de 44.
+(`pointer: fine`), el tamaño de web de la tabla de abajo. El compact-button no tiene un área tocable
+más grande que lo que se ve, así que en el celular chico (< 380 px) también va el de 44.
 Nada en `small` ni `xsmall` (canon, dueño, 05-10-2026, D16; reemplaza al «tamaño por plataforma» del
-03-10-2026, que bajaba la web a `small`). Hoy la app lo resuelve con `BreakpointsService`
-(`src/app/services/breakpoints.service.ts`, mobile = hasta 767 px): `[size]="bp.isMobile() ? 'large' : 'medium'"`,
-que todavía deja la tablet en `medium` (el helper de D16 está propuesto en la hoja de decisiones). Medido el 04-10-2026 en `master-pedidos`: 166 `[size]`
-con `bp` (142 `large`/`medium`, 22 `large`/`small`, 2 `medium`/`xsmall`); los 24 que bajan de `medium` se migran.
+03-10-2026, que bajaba la web a `small`). La app lo resuelve con `BreakpointsService`
+(`src/app/services/breakpoints.service.ts`): `bp.tactil()` es verdadero en todo celular (hasta 767 px)
+y en toda pantalla táctil (`pointer: coarse`), así que cubre la tablet; `bp.isMobile()` solo mira el
+ancho y deja la tablet con el tamaño de web.
 `sui-compact-button` tiene su propia escala (de `medium` 20 a `5xlarge` 44) y no tiene `small`: D16 no
 lo mueve por el nombre; la tabla de abajo sigue igual.
 
@@ -120,7 +140,7 @@ lo mueve por el nombre; la tabla de abajo sigue igual.
 
 ```html
 <sui-compact-button icon="close-line" variantStyle="ghost" ariaLabel="Cerrar"
-                    [size]="bp.isMobile() ? '5xlarge' : 'xlarge'" (clicked)="cerrar()" />
+                    [size]="bp.tactil() ? '5xlarge' : 'xlarge'" (clicked)="cerrar()" />
 ```
 
 `2xlarge`, `3xlarge` y `4xlarge` están publicados desde la 0.20.0 (la app usa la 0.22.0); `5xlarge`
@@ -129,6 +149,26 @@ entrar un botón de 44, `2xlarge` (32) con aire alrededor (gap o padding) es la
 dedo no toque el vecino. `medium` y `large` no
 van en mobile.
 
+### Por dispositivo (D16)
+
+Fila propia en la tabla de D16 (dueño, 05-10-2026): el compact-button tiene **escala propia** y no
+tiene `small`, así que D16 no lo mueve por el nombre; lo que manda es llegar a 44 donde se toca.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380 px) | `5xlarge` (44) | escala propia: el área tocable es el botón mismo (no hay un `medium` con área de 44), así que va el mismo que en el celular |
+| celular (380–767 px) | `5xlarge` (44) | `2xlarge` (32) con aire solo si la fila no lo deja entrar (propuesta, falta aprobación) |
+| tablet táctil (`pointer: coarse`) | `5xlarge` (44) | igual que el celular: también se toca |
+| computadora (`pointer: fine`) | `large` (24) en filas y cards · `xlarge` (28) en el cerrar y los flotantes | `medium` (20) solo en tablas densas |
+
+Ultrawide (≥ 1920 px): igual que la computadora; el espacio extra va a columnas, no a botones más grandes.
+Una flecha que **solo aparece con mouse** (las del carrusel, `arrastre-carrusel.ts:102`) no necesita
+`bp`: va `xlarge` fijo.
+
+En master-pedidos: `[size]="bp.tactil() ? '5xlarge' : 'large'"` (filas y cards) o
+`[size]="bp.tactil() ? '5xlarge' : 'xlarge'"` (cerrar y flotantes). No hay helper `size*` propio:
+`bp.sizeControl()` devuelve `large`/`medium`, que aquí miden 24/20.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 Ningún valor del compact-button está en «no usar»: los cuatro estilos y los siete tamaños tienen
@@ -163,10 +203,10 @@ El clic se escucha con `(clicked)`. `icon` recibe el nombre RemixIcon, sin el pr
 ## Trampas
 
 - **El estilo se llama `variantStyle`**, no `variant`. `variant="ghost"` no da error de
-  compilación: se ignora y sale `stroke` (pasa hoy en `master-settings.html:658`).
+  compilación: se ignora y sale `stroke` (pasó en `master-settings.html:649`).
 - **`icon` y `ariaLabel` son obligatorios**: sin `ariaLabel` no compila.
 - **El output es `(clicked)`**. `(click)` sobre el host también llega porque el clic burbujea; hoy 6
-  usos lo escuchan así (`product-detail-view.html:169` y `:173`, `master-settings.html:658`,
+  usos lo escuchan así (`product-detail-view.html:169` y `:173`, `master-settings.html:649`,
   `arrastre-carrusel.ts:102` y `:104`, `order-history.html:382`). Usa `(clicked)`, que ya respeta
   `disabled`.
 - En `medium` el ícono mide 16, no los 18 de la guía.
@@ -176,11 +216,55 @@ El clic se escucha con `(clicked)`. `icon` recibe el nombre RemixIcon, sin el pr
   blanco: es el estado activo del Figma, no un error.
 - Ya trae el arreglo de iOS para el `:active` pegado: no lo agregues.
 
+## Bien y mal
+
+**Una acción de fila con size fijo**
+
+```html
+<!-- ❌ mal: size fijo; en el celular y la tablet mide 20 o 24 (master-settings.html:649, master-categorias.html:98) -->
+<sui-compact-button icon="pencil-line" variantStyle="ghost" size="large"
+                    [ariaLabel]="'Editar ' + f.nombre" (clicked)="abrir(f.id)" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-compact-button icon="pencil-line" variantStyle="ghost" [size]="bp.tactil() ? '5xlarge' : 'large'"
+                    [ariaLabel]="'Editar ' + f.nombre" (clicked)="abrir(f.id)" />
+```
+
+**El cerrar de un modal**
+
+```html
+<!-- ❌ mal: en web cierra en medium (20) y la tablet queda con el de web (store-ratings-modal.html:33) -->
+<sui-compact-button icon="close-line" variantStyle="ghost" ariaLabel="Cerrar"
+                    [size]="bp.isMobile() ? '5xlarge' : 'medium'" (clicked)="onClosed()" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-compact-button icon="close-line" variantStyle="ghost" ariaLabel="Cerrar"
+                    [size]="bp.tactil() ? '5xlarge' : 'xlarge'" (clicked)="onClosed()" />
+```
+
+**El − / + de una cantidad**
+
+```html
+<!-- ❌ mal: (click) escucha al host; (clicked) es el que respeta disabled (product-detail-view.html:173) -->
+<sui-compact-button icon="add-line" [fullRadius]="true" [size]="bp.tactil() ? '5xlarge' : 'large'"
+                    [disabled]="sinStock" ariaLabel="Agregar uno" (click)="sumar()" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-compact-button icon="add-line" [fullRadius]="true" [size]="bp.tactil() ? '5xlarge' : 'large'"
+                    [disabled]="sinStock" ariaLabel="Agregar uno" (clicked)="sumar()" />
+```
+
 ## Ejemplo
 
 ```html
-<!-- Cerrar en la cabecera de un sheet: 5xlarge (44) en mobile, xlarge en web -->
-<sui-compact-button icon="close-line" variantStyle="ghost" [size]="bp.isMobile() ? '5xlarge' : 'xlarge'"
+<!-- Cerrar en la cabecera de un sheet: 5xlarge (44) donde se toca, xlarge en la computadora -->
+<sui-compact-button icon="close-line" variantStyle="ghost" [size]="bp.tactil() ? '5xlarge' : 'xlarge'"
                     ariaLabel="Cerrar" (clicked)="cerrar()" />
 
 <!-- Acción de una fila en desktop -->
@@ -188,5 +272,5 @@ El clic se escucha con `(clicked)`. `icon` recibe el nombre RemixIcon, sin el pr
 
 <!-- Flotante sobre el mapa -->
 <sui-compact-button icon="arrow-left-line" variantStyle="white" [fullRadius]="true"
-                    [size]="bp.isMobile() ? '5xlarge' : 'xlarge'" ariaLabel="Volver" (clicked)="volver()" />
+                    [size]="bp.tactil() ? '5xlarge' : 'xlarge'" ariaLabel="Volver" (clicked)="volver()" />
 ```

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

@@ -66,8 +66,8 @@ Las opciones del menú siguen al `size` como en `sui-select`: 36 hasta `medium`,
 |---|---|---|---|
 | `large` | 48 | 44 · 44 | canon (aprobado por el dueño, 03-10-2026), extensión SUI |
 | `medium` (default) | 40 | 36 · 44 | según la guía del DS; 44 en mobile: canon (aprobado por el dueño, 03-10-2026) |
-| `small` | 36 | 36 · 44 | ídem |
-| `xsmall` | 32 | 36 · 44 | ídem |
+| `small` | 36 | 36 · 44 | ídem · no se usa: D16, dueño 05-10-2026 |
+| `xsmall` | 32 | 36 · 44 | ídem · no se usa: D16, dueño 05-10-2026 (tampoco en la paginación) |
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
@@ -75,10 +75,26 @@ Las opciones del menú siguen al `size` como en `sui-select`: 36 hasta `medium`,
 | paginación al pie de una tabla | no aplica | `medium` (40) | canon (dueño, 05-10-2026, D16) (la guía del DS lo muestra en `xsmall`) |
 
 ```html
-<sui-compact-select [size]="bp.isMobile() ? 'large' : 'medium'" placeholder="Todos los roles"
+<sui-compact-select [size]="bp.sizeControl()" placeholder="Todos los roles"
                     [items]="roles" [(selected)]="rolElegido" />   <!-- bp = BreakpointsService -->
 ```
 
+### Por dispositivo (D16)
+
+Comparte fila con `input` y `select` en la tabla de D16 (dueño, 05-10-2026): se toca, así que va
+grande en el celular y en la tablet, y `medium` en la computadora.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380 px) | `large` (48) | interino: D16 pide `medium` con área tocable de 44, pero el DS todavía no la estira en `medium` (40); hasta que lo haga, el mismo que el celular |
+| celular (380–767 px) | `large` (48) | junto a botones `large` de la misma barra |
+| tablet táctil (`pointer: coarse`) | `large` (48) | también se toca. Ojo: las opciones del menú de un `medium` solo suben a 44 hasta 767 px, por eso la tablet no se queda en `medium` |
+| computadora (`pointer: fine`) | `medium` (40) | filtros del panel y paginación; `small` y `xsmall` no se usan |
+
+Ultrawide (≥ 1920 px): igual que la computadora.
+
+En master-pedidos: `[size]="bp.sizeControl()"` (`large` donde se toca, `medium` en la computadora).
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -126,9 +142,47 @@ Implementa `ControlValueAccessor` (el valor es el `value` de la opción).
 - El menú mide al menos 200 px aunque el campo sea más angosto.
 - Las opciones miden 36 px en web hasta `medium`; 44 en `large` y en mobile (ver «Tamaño»).
 
+## Bien y mal
+
+**El tamaño de un filtro del panel**
+
+```html
+<!-- ❌ mal: small fijo; D16 no usa small y en el celular mide 36 (vitrina: master-preview/_guia-moleculas/campos.ts:214) -->
+<sui-compact-select size="small" placeholder="Todos los roles" [items]="roles" [(selected)]="rolElegido" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-compact-select [size]="bp.sizeControl()" placeholder="Todos los roles" [items]="roles" [(selected)]="rolElegido" />
+```
+
+**Solo ícono**
+
+```html
+<!-- ❌ mal: type="icon" no muestra texto; sin ariaLabel el lector de pantalla no sabe qué elige (vitrina: campos.ts:218) -->
+<sui-compact-select type="icon" [size]="bp.sizeControl()" [items]="vistas" [(selected)]="vista" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-compact-select type="icon" [size]="bp.sizeControl()" ariaLabel="Ver como" [items]="vistas" [(selected)]="vista" />
+```
+
+**Dentro de un formulario reactivo**
+
+```html
+<!-- ❌ mal: dos fuentes de verdad; el formulario no se entera de lo que escribe selected -->
+<sui-compact-select [size]="bp.sizeControl()" [items]="roles" formControlName="rol" [(selected)]="rolElegido" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-compact-select [size]="bp.sizeControl()" [items]="roles" formControlName="rol" />
+```
+
 ## Ejemplo
 
 ```html
-<sui-compact-select [size]="bp.isMobile() ? 'large' : 'medium'" placeholder="Todos los roles" [items]="roles"
+<sui-compact-select [size]="bp.sizeControl()" placeholder="Todos los roles" [items]="roles"
                     [(selected)]="rolElegido" />
 ```