@ajuarezso/sui-design-system 0.24.1 → 0.25.1

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` | Déjalo en `true`: la X de limpiar ahorra borrar a mano. El ícono de info del estado vacío no hace nada. | propuesta |
+| `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()" />   <!-- 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,5 +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.tactil()"
   (cleared)="resultados.set([])" />
 ```

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

@@ -22,8 +22,8 @@ de lista. Es una píldora blanca con los avatares casi pegados y el «+N» como
 ## Qué variante usar
 
 > **La guía del DS dice qué es, sus tamaños y sus dos estilos, no cuándo usar cada uno.** Lo
-> marcado «según la guía del DS» sale de su texto o de su código; el resto es **propuesta,
-> falta aprobación**.
+> marcado «según la guía del DS» sale de su texto o de su código. Lo marcado canon está
+> aprobado; lo que sigue en **propuesta, falta aprobación** espera decisión.
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos directos**. En el DS no lo
 > monta ningún componente: `sui-table` solo lo nombra como contenido que se proyecta en una celda.
@@ -38,22 +38,25 @@ de lista. Es una píldora blanca con los avatares casi pegados y el «+N» como
 
 | input | valor | cuándo | fuente |
 |---|---|---|---|
-| `size` | `'24'` | Celda de tabla. | propuesta |
-| `size` | `'32'` (default SUI) | Fila de una lista. | propuesta |
-| `size` | `'40'` (default de la guía) | Dentro de una card. | propuesta |
-| `appearance` | `default` | Sobre un fondo gris o de color: la sombra lo separa. | propuesta |
-| `appearance` | `stroke` | Sobre blanco, donde la sombra sola no alcanza a marcar el borde. | propuesta |
-| `max` | `3` (default) | Tres avatares visibles. | propuesta |
-| `count` | — | Solo si el total no está en `items` (vienen 3 caras pero son 12 personas): `count="+9"`. Si no, se calcula solo. | propuesta |
+| `size` | `'24'` | Celda de tabla. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `size` | `'32'` (default SUI) | Fila de una lista. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `size` | `'40'` (default de la guía) | Dentro de una card. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `appearance` | `default` | Sobre un fondo gris o de color: la sombra lo separa. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `appearance` | `stroke` | Sobre blanco, donde la sombra sola no alcanza a marcar el borde. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `max` | `3` (default) | Tres avatares visibles. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `count` | — | Solo si el total no está en `items` (vienen 3 caras pero son 12 personas): `count="+9"`. Si no, se calcula solo. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 
 Usos de hoy que rompen la regla: **0** (no hay usos).
 
 ## Tamaño en mobile y en web
 
-En mobile se lee y se toca con el dedo, así que va más grande; en web, más chico. En las
+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. Todo es **propuesta**.
+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.
 
 | uso | mobile | web |
 |---|---|---|
@@ -61,9 +64,26 @@ el celular (cliente, repartidor) va directo el valor de mobile. Todo es **propue
 | 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 |
@@ -97,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,38 +80,57 @@ 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`
 
 | fullRadius | cuándo | fuente |
 |---|---|---|
-| `false` (default, radio 6) | Lo normal: filas, cards, cabeceras. | default según la guía del DS · cuándo: propuesta |
+| `false` (default, radio 6) | Lo normal: filas, cards, cabeceras. | default según la guía del DS · cuándo: canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 | `true` (círculo) | Flotante (`white`) sobre mapa o foto. | canon (aprobado por el dueño, 03-10-2026) |
-| `true` (círculo) | El − / + de una cantidad, para que se lea como un stepper. | propuesta (es lo que ya hace `product-detail-view`) |
+| `true` (círculo) | El − / + de una cantidad, para que se lea como un stepper. | canon (aprobado por el dueño, 05-10-2026, bloque B2) (es lo que ya hace `product-detail-view`) |
 
 ### `disabled`, `href`, `ariaLabel`
 
 | prop | cuándo | fuente |
 |---|---|---|
-| `disabled` | Se llegó al límite: no hay más stock para sumar, no se puede quitar el último. | cómo se ve: según la guía del DS · cuándo: propuesta |
-| `href` | Solo si el botón navega sin otra acción (volver a una ruta). Pinta un `<a>`; `rel` ya viene en `'noopener noreferrer'`. | propuesta |
-| `ariaLabel` (requerido) | Lo que hace, no lo que muestra: «Cerrar», «Quitar opción», «Agregar uno»; nunca «X» ni «Ícono». | propuesta (el input es obligatorio) |
-| `type="submit"` | Solo dentro de un `<form>`. | propuesta |
+| `disabled` | Se llegó al límite: no hay más stock para sumar, no se puede quitar el último. | cómo se ve: según la guía del DS · cuándo: canon (aprobado por el dueño, 05-10-2026, bloque B8) |
+| `href` | Solo si el botón navega sin otra acción (volver a una ruta). Pinta un `<a>`; `rel` ya viene en `'noopener noreferrer'`. | canon (aprobado por el dueño, 05-10-2026, bloque B10) |
+| `ariaLabel` (requerido) | Lo que hace, no lo que muestra: «Cerrar», «Quitar opción», «Agregar uno»; nunca «X» ni «Ícono». | canon (aprobado por el dueño, 05-10-2026, bloque B5) (el input es obligatorio) |
+| `type="submit"` | Solo dentro de un `<form>`. | canon (aprobado por el dueño, 05-10-2026, bloque B10) |
 
 ## Tamaño en mobile y en web
 
-En mobile se toca con el dedo: el área táctil tiene que medir **44 px o más**. En web, con mouse,
-va un tamaño más chico. La app ya lo resuelve con `BreakpointsService`
-(`src/app/services/breakpoints.service.ts`, mobile = hasta 767 px):
-`[size]="bp.isMobile() ? 'large' : 'small'"`. Medido el 04-10-2026 en `master-pedidos`: 166 `[size]`
-con `bp` (142 `large`/`medium`, 22 `large`/`small`, 2 `medium`/`xsmall`). Regla del dueño, 03-10-2026.
+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`), 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`). 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.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
@@ -115,7 +140,7 @@ con `bp` (142 `large`/`medium`, 22 `large`/`small`, 2 `medium`/`xsmall`). Regla
 
 ```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`
@@ -124,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
@@ -158,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.
@@ -171,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 -->
@@ -183,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

@@ -42,7 +42,7 @@ Regla corta: **filtro suelto en una barra, ancho al texto → compact · campo c
 | `selected` / `selectedChange` | La opción elegida (objeto entero). O `formControlName`, nunca los dos. | API |
 | `placeholder` | El filtro sin elegir: «Todos». Corto. | propuesta, falta aprobación |
 | `value` / `icon` | Lo que muestra el campo cuando no hay `items` (modo «solo campo», el menú lo arma la pantalla). | API |
-| `error` | No usar hoy: un filtro no tiene error. | propuesta, falta aprobación |
+| `error` | No usar hoy: un filtro no tiene error. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 | `disabled` | Mientras carga la lista. | según la guía del DS |
 | `clicked` | Solo si la pantalla arma su propio menú (sin `items`). | API |
 
@@ -66,19 +66,35 @@ 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 |
 |---|---|---|---|
-| filtro de una barra del panel | `large` (48), junto a botones `large` | `small` (36) | propuesta, falta aprobación |
-| paginación al pie de una tabla | no aplica | `xsmall` (32) | según la guía del DS (ejemplo de paginación); el tamaño es propuesta |
+| filtro de una barra del panel | `large` (48), junto a botones `large` | `medium` (40) | mobile `large`: canon (decisión del dueño 04-10-2026, piso táctil 44: es el único size de 44 o más; texto 16 en large, DS 0.22.0) · web `medium`: canon (dueño, 05-10-2026, D16) |
+| 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' : 'small'" 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="small" placeholder="Todos los roles" [items]="roles"
+<sui-compact-select [size]="bp.sizeControl()" placeholder="Todos los roles" [items]="roles"
                     [(selected)]="rolElegido" />
 ```