@ajuarezso/sui-design-system 0.24.1 → 0.25.1

package/docs/sui-dropdown-menu/README.md

@@ -55,8 +55,8 @@ trigger no se dibuja.
 
 > **La guía del DS lo define como el menú de acciones que abre un botón** y lo arma por partes:
 > item con ícono, grupo con su etiqueta, separador, items con casilla o radio y submenús. No trae
-> variantes ni do/don't; el panel arranca en 300 px de ancho y 8 px separado del trigger. Lo
-> demás es **propuesta, falta aprobación**, salvo lo marcado canon.
+> variantes ni do/don't; el panel arranca en 300 px de ancho y 8 px separado del trigger. Las
+> reglas marcadas canon están aprobadas; lo que sigue en propuesta espera decisión.
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app` (sin `master-preview`, `master-prototipos`,
 > `mockup-sheets-*`, `dx/*`, `master-rutina`, `master-medico`, `master-ejercicios`, `dev-index` ni las
@@ -77,15 +77,15 @@ trigger no se dibuja.
 
 | prop | cuándo | fuente |
 |---|---|---|
-| sin props (default) | El caso normal: un ⋮ o un botón con 2 a 5 acciones. El panel se ajusta al contenido. | propuesta |
-| `matchWidth` | El panel debe medir lo mismo que el trigger (un botón ancho que abre opciones). | propuesta |
+| sin props (default) | El caso normal: un ⋮ o un botón con 2 a 5 acciones. El panel se ajusta al contenido. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `matchWidth` | El panel debe medir lo mismo que el trigger (un botón ancho que abre opciones). | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 | `minWidth` | El trigger es un ícono chico y el panel quedaría angosto: 200 a 240 px. | propuesta |
-| `position="above"` | El trigger vive pegado al borde de abajo (una barra inferior). Con `auto` ya cae arriba si no entra. | propuesta |
+| `position="above"` | El trigger vive pegado al borde de abajo (una barra inferior). Con `auto` ya cae arriba si no entra. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 | `popupRole="listbox"` | **Solo** si los items son `mode="option"`. El rol tiene que coincidir con el de los items. | según ARIA (documentado en el `.ts`) |
-| `popupRole="true"` | El panel no es un menú: un campo, un formulario chico (`option-image.ts:52`). | propuesta (ya es práctica) |
-| `origin` | El trigger lo maneja el padre (los selects del DS). En la app no hace falta. | propuesta |
+| `popupRole="true"` | El panel no es un menú: un campo, un formulario chico (`option-image.ts:52`). | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `origin` | El trigger lo maneja el padre (los selects del DS). En la app no hace falta. | según el código |
 | `push` | No usar: un panel empujado queda fijo y **se despega del trigger al scrollear**. | canon (comentario del `.ts`, bug real del color picker 21-07-2026) |
-| `flexibleDimensions=false` | Solo paneles de tamaño fijo que no pueden encogerse (el color picker). | propuesta |
+| `flexibleDimensions=false` | Solo paneles de tamaño fijo que no pueden encogerse (el color picker). | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 
 **Usos de hoy que rompen la propuesta:**
 
@@ -103,14 +103,34 @@ El menú **no tiene `size`**: el alto lo ponen los items. El panel mide lo que s
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| items de un menú de acciones | `sui-dropdown-item size="large"` (56) | `size="small"` (36) | propuesta; hoy los 3 items del ⋮ van en `large` en las dos |
-| trigger ⋮ | `sui-compact-button` de 40 o más | `sui-compact-button` `large` | propuesta (ver README de `sui-compact-button`) |
+| items de un menú de acciones | `sui-dropdown-item size="large"` (56) | **pendiente** (D16, nota ⁵); hoy queda `small` (36), el default | mobile: canon (decisión del dueño 04-10-2026, piso táctil 44); `large` es el primer size ≥ 44, no hay 44 · web: pendiente (D16, dueño 05-10-2026): el item no tiene `medium` y `description` solo se ve en `large` y `xlarge`; hoy los 3 items del ⋮ van en `large` en las dos |
+| trigger ⋮ | `sui-compact-button` `5xlarge` (44) | `sui-compact-button` `large` | canon (aprobado por el dueño, 05-10-2026, bloque B13) (ver README de `sui-compact-button`) |
 | más de 5 acciones, o alguna destructiva que pide confirmar | `sui-modal-sheet` | `sui-dropdown-menu` | propuesta, falta aprobación |
 
 ```html
-<sui-dropdown-item [size]="bp.isMobile() ? 'large' : 'small'" … />   <!-- bp = BreakpointsService -->
+<sui-dropdown-item [size]="bp.tactil() ? 'large' : 'small'" … />   <!-- bp = BreakpointsService -->
 ```
 
+### Por dispositivo (D16)
+
+El menú no tiene `size`, así que D16 se aplica a lo que va adentro y al trigger, que se tocan: la
+tablet va con el celular. Para los items manda la fila `dropdown-item` de D16; para el ⋮, la de
+`compact-button`.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380) | items `large` · ⋮ `5xlarge` | D16 no fija los items aquí; `large` (56) es el primer size ≥ 44 (`small` mide 36 y el item no tiene `medium` con área de 44). El ⋮ va con su escala propia |
+| celular (380–767) | items `large` · ⋮ `5xlarge` (44) | `large` (56) es el primer size ≥ 44 |
+| tablet táctil (`pointer: coarse`) | items `large` · ⋮ `5xlarge` | Apple pide 44 también en iPad |
+| computadora (`pointer: fine`) | items **pendiente** · ⋮ `large` | items: falta decidir (D16, nota ⁵): `small` (36) y `large` (56) no son el mismo item más chico o más grande, porque la descripción solo se ve en `large` y `xlarge`. Hoy queda el default `small` |
+
+Ultrawide: igual que la computadora. Fuente: D16, dueño 05-10-2026.
+
+En master-pedidos: items `[size]="bp.tactil() ? 'large' : 'small'"` y trigger
+`[size]="bp.tactil() ? '5xlarge' : 'large'"` (no hay helper; el `'small'` es el default de hoy
+mientras la computadora sigue pendiente). Con `bp.isMobile()` la tablet táctil se queda con el
+tamaño de la computadora.
+
 ## API
 
 <!-- api:inicio -->
@@ -176,18 +196,67 @@ panel va en un `<ng-template suiDropdownPanel>` (hay que importar `SuiDropdownPa
   app, pero es lo primero que hay que mirar si un menú «no abre» dentro de un modal.
 - El host es `display: contents`: no ocupa caja. Para alinearlo, se alinea el trigger.
 
+## Bien y mal
+
+El ⋮ en la tablet
+
+```html
+<!-- ❌ mal: con isMobile la tablet táctil se queda con el ⋮ de la computadora, sin 44 (components/option-sections-manager/option-sections-manager.html:38) -->
+<sui-compact-button trigger icon="more-2-line" variantStyle="ghost"
+  [size]="bp.isMobile() ? '5xlarge' : 'large'" ariaLabel="Opciones de la sección" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-compact-button trigger icon="more-2-line" variantStyle="ghost"
+  [size]="bp.tactil() ? '5xlarge' : 'large'" ariaLabel="Opciones de la sección" />
+```
+
+Items sin `ng-template`
+
+```html
+<!-- ❌ mal: los items no se proyectan en ningún lado y el menú no abre -->
+<sui-dropdown-menu #menu="suiDropdownMenu">
+  <sui-compact-button trigger icon="more-2-line" variantStyle="ghost" ariaLabel="Opciones" />
+  <sui-dropdown-item label="Editar" (clicked)="editar()" />
+</sui-dropdown-menu>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-dropdown-menu #menu="suiDropdownMenu">
+  <sui-compact-button trigger icon="more-2-line" variantStyle="ghost" ariaLabel="Opciones" />
+  <ng-template suiDropdownPanel>
+    <sui-dropdown-item label="Editar" (clicked)="menu.close(); editar()" />
+  </ng-template>
+</sui-dropdown-menu>
+```
+
+Cerrar al elegir
+
+```html
+<!-- ❌ mal: el item no cierra el menú; queda abierto encima del modal de edición -->
+<sui-dropdown-item label="Editar" (clicked)="editar()" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-dropdown-item label="Editar" (clicked)="menu.close(); editar()" />
+```
+
 ## Ejemplo
 
 ```html
 <sui-dropdown-menu #menu="suiDropdownMenu">
-  <sui-compact-button trigger icon="more-2-line" variantStyle="ghost" size="large"
+  <sui-compact-button trigger icon="more-2-line" variantStyle="ghost"
+                      [size]="bp.tactil() ? '5xlarge' : 'large'"
                       ariaLabel="Opciones de la sección" />
   <ng-template suiDropdownPanel>
-    <sui-dropdown-item label="Editar" [size]="bp.isMobile() ? 'large' : 'small'"
+    <sui-dropdown-item label="Editar" [size]="bp.tactil() ? 'large' : 'small'"
                        (clicked)="menu.close(); editar()">
       <sui-icon slot="leading" name="pencil-line" [size]="20" />
     </sui-dropdown-item>
-    <sui-dropdown-item label="Archivar" [size]="bp.isMobile() ? 'large' : 'small'"
+    <sui-dropdown-item label="Archivar" [size]="bp.tactil() ? 'large' : 'small'"
                        (clicked)="menu.close(); archivar()">
       <sui-icon slot="leading" name="archive-line" [size]="20" />
     </sui-dropdown-item>

package/docs/sui-dropdown-search/README.md

@@ -36,8 +36,8 @@ aprobación.
 ## Qué variante usar
 
 > **La guía del DS no tiene buscador en su dropdown**; el buscador de lista vive en su command
-> menu. Este sale del Figma del DS («Dropdown Misc Items», estados Default / Hover / Active). Todo lo
-> de abajo es **propuesta, falta aprobación**, salvo lo marcado canon.
+> menu. Este sale del Figma del DS («Dropdown Misc Items», estados Default / Hover / Active). Las
+> reglas marcadas canon están aprobadas; lo que sigue en propuesta espera decisión.
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-dropdown-menu`):
 > **0 usos**.
@@ -57,11 +57,22 @@ No tiene tamaños: 36 px de alto (8 + 20 + 8), texto 14/20, en los dos.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| buscador del menú | igual (36) | igual (36) | propuesta |
+| buscador del menú | no se usa: `sui-modal-sheet` con `sui-input type="search"` arriba | 36, fijo | mobile: canon (aprobado por el dueño, 05-10-2026, bloque B7) y D16 (dueño 05-10-2026: lo que se toca llega a 44, y este campo mide 36) · web: lo que hay en el DS |
 
 En mobile tiene dos problemas que el componente no resuelve (ver «Trampas»): el texto de 14 px hace
 que iOS haga zoom al enfocarlo, y el teclado no muestra la lupa. Para buscar en una lista larga en
-mobile, mejor un `sui-modal-sheet` con `sui-input type="search"` arriba. Propuesta, falta aprobación.
+mobile, mejor un `sui-modal-sheet` con `sui-input type="search"` arriba. Canon (aprobado por el dueño, 05-10-2026, bloque B7).
+
+### Por dispositivo (D16)
+
+No aplica como tabla: **no tiene `size`** (36 px fijo, del celular chico al ultrawide), así que D16
+no lo agranda; lo único que cambia por dispositivo es **si se usa**. Se toca, y 36 no llega a 44:
+en el celular (también el chico) y en la tablet táctil va el sheet con `sui-input type="search"`
+(que sí tiene `size`); en la computadora y el ultrawide, este buscador dentro del menú. La tablet
+entra con el celular porque D16 pone la tablet táctil con el celular en todo lo que se toca.
+
+En master-pedidos: `@if (bp.tactil())` → sheet con `<sui-input type="search" [size]="bp.sizeControl()">`;
+`@else` → `sui-dropdown-search` en el menú, sin `[size]`.
 
 ## API
 
@@ -96,6 +107,51 @@ que además deja `value` en `''`.
   a mano.
 - El `<input>` no tiene `(keydown)`: Enter no hace nada salvo que quien lo usa lo escuche.
 
+## Bien y mal
+
+Hoy no hay usos en la app (0, medido el 03-10-2026): los pares salen de «Trampas» y de la regla B7.
+
+Qué se busca
+
+```html
+<!-- ❌ mal: sin placeholder sale el genérico «Buscar…» y no dice qué se busca -->
+<sui-dropdown-search [(value)]="busqueda" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-dropdown-search [(value)]="busqueda" placeholder="Buscar repartidor…" />
+```
+
+Filtrar la lista
+
+```html
+<!-- ❌ mal: el buscador no filtra; la lista sigue entera aunque se escriba -->
+<sui-dropdown-search [(value)]="busqueda" placeholder="Buscar repartidor…" />
+@for (r of repartidores(); track r.uid) { <sui-dropdown-item [label]="r.nombre" /> }
+```
+
+```html
+<!-- ✅ bien: repartidoresFiltrados() es un computed sobre busqueda() -->
+<sui-dropdown-search [(value)]="busqueda" placeholder="Buscar repartidor…" />
+@for (r of repartidoresFiltrados(); track r.uid) { <sui-dropdown-item [label]="r.nombre" /> }
+```
+
+Buscar en el celular
+
+```html
+<!-- ❌ mal: 36 px sin lupa en el teclado, y iOS hace zoom al enfocarlo -->
+<sui-dropdown-search [(value)]="busqueda" placeholder="Buscar repartidor…" />
+```
+
+```html
+<!-- ✅ bien: en el celular y la tablet táctil, sheet con el input de búsqueda (B7) -->
+<sui-modal-sheet [(open)]="buscando">
+  <sui-input type="search" [size]="bp.sizeControl()" placeholder="Buscar repartidor…"
+             [(value)]="busqueda" />
+</sui-modal-sheet>
+```
+
 ## Ejemplo
 
 ```html

package/docs/sui-emoji/README.md

@@ -22,8 +22,8 @@ confirmado», los pasos de una landing, la barra de calificación.
 
 ## Qué variante usar
 
-> **La guía del DS no tiene este componente**: es propio de SUI. Lo marcado «canon» ya es regla
-> del proyecto; el resto es **propuesta, falta aprobación**.
+> **La guía del DS no tiene este componente**: es propio de SUI. Las reglas marcadas canon están
+> aprobadas; lo que sigue en propuesta espera decisión.
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app`: 10 emojis en 3 archivos, sin contar
 > prototipos ni vitrinas. El catálogo tiene 59.
@@ -32,30 +32,30 @@ confirmado», los pasos de una landing, la barra de calificación.
 
 | caso | cómo | fuente |
 |---|---|---|
-| Estados vacíos y celebraciones | Emoji animado, uno solo, en `xl`. Nada de íconos genéricos en un estado vacío. | canon (CANON-SUI §5.6) para los estados vacíos · propuesta, falta aprobación para celebraciones y el `xl` |
-| Pasos de una landing | `lg`, uno por paso. | propuesta |
-| Junto a un título o dentro de un texto | `md` o `sm`, como acento. | propuesta |
-| Como ícono de un botón | No: el botón lleva `leftIcon`. | derivado de CANON-SUI §5.7 (emojis solo en contenido escrito por un usuario; botones con `leftIcon`), falta confirmación |
+| Estados vacíos y celebraciones | Emoji animado, uno solo. Nada de íconos genéricos en un estado vacío. El del vacío lo pone `sui-empty-state` en `full` (caja de 120); el `size` de la celebración está **pendiente** (P38). | canon (CANON-SUI §5.6) para los estados vacíos · `full` en el vacío: según el código (`sui-empty-state.html`) · celebración: pendiente (P38) |
+| Pasos de una landing | `lg`, uno por paso. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| Junto a un título o dentro de un texto | `md` o `sm`, como acento. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| Como ícono de un botón | No: el botón lleva `leftIcon`. | canon (CANON-SUI §5.7: emojis solo en contenido escrito por un usuario; en un botón, `leftIcon` con `sui-icon`) |
 
 ### `size`
 
 | valor | px | cuándo | fuente |
 |---|---|---|---|
-| `xl` | 48 | Estado vacío, celebración. | propuesta |
-| `lg` | 32 | Pasos de una landing, la barra de calificación. | propuesta |
-| `md` (default) | 24 | Acompaña un título. | propuesta |
-| `sm` | 20 | Dentro de una línea de texto. | propuesta |
-| `xs` | 16 | No usar hoy. | propuesta |
-| `full` | 100 % | Llena su caja: lo usa `sui-empty-state`. | propuesta |
+| `xl` | 48 | El más grande con nombre. Para la celebración, **pendiente** (P38): todavía no se decidió su `size`. El estado vacío no lo usa: va en `full`. | pendiente (P38) |
+| `lg` | 32 | Pasos de una landing, la barra de calificación. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `md` (default) | 24 | Acompaña un título. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `sm` | 20 | Dentro de una línea de texto. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `xs` | 16 | No usar hoy. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `full` | 100 % | Llena su caja: es el del estado vacío (`sui-empty-state` lo pone en una caja de 120). | según el código |
 
 ### `animated`, `src`, `name`, `ariaLabel`
 
 | input | cuándo | fuente |
 |---|---|---|
 | `animated` (default `true`) | Uno solo → animado. **Varios a la vez → `false`.** Ojo: solo las 5 caritas de la calificación (`pensive-face` … `grinning-face-smiling-eyes`) tienen copia estática; para el resto, `false` no cambia nada. | propuesta (la regla ya está escrita en `sui-emoji.ts`) |
-| `name` | Uno del catálogo. Si no está, se agrega al catálogo del DS. | propuesta |
-| `src` | Un emoji que no está en el catálogo, mientras se agrega. **Nunca** un `<img>` suelto con la URL del emoji. | propuesta |
-| `ariaLabel` | Solo si el emoji dice algo que el texto no dice. Si no, queda decorativo (`aria-hidden`). | propuesta |
+| `name` | Uno del catálogo. Si no está, se agrega al catálogo del DS. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `src` | Un emoji que no está en el catálogo, mientras se agrega. **Nunca** un `<img>` suelto con la URL del emoji. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `ariaLabel` | Solo si el emoji dice algo que el texto no dice. Si no, queda decorativo (`aria-hidden`). | canon (aprobado por el dueño, 05-10-2026, bloque B5) |
 
 **Usos de hoy que romperían la propuesta:**
 
@@ -75,24 +75,45 @@ confirmado», los pasos de una landing, la barra de calificación.
 
 ## 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
-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 emoji no se toca: en el celular va **un paso más grande** que en la computadora (D16, P1 b),
+porque ahí se lee más de cerca y en una columna sola. Se elige con el servicio de breakpoints de
+la app (`bp`, en `services/breakpoints.service.ts`), también en las pantallas del cliente y del
+repartidor: el celular chico y la tablet llevan el valor de web.
 
-| uso | mobile | web |
-|---|---|---|
-| estado vacío, celebración | `xl` (48) | `xl` (48) |
-| pasos de una landing | `lg` (32) | `xl` (48) |
-| dentro de un texto | `md` (24) | `sm` (20) |
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| estado vacío | `full` (caja de 120) | `full` (caja de 120) | según el código: lo pone `sui-empty-state` y no cambia por dispositivo |
+| celebración | **pendiente** (P38) | **pendiente** (P38) | P38 sigue abierta: no se decidió el `size` |
+| pasos de una landing | `xl` (48) | `lg` (32) | web: canon (aprobado por el dueño, 05-10-2026, bloque B1) · mobile: D16, dueño 05-10-2026 (antes decía `lg` en mobile y `xl` en web, al revés de P1 b) |
+| dentro de un texto | `md` (24) | `sm` (20) | propuesta; cuadra con D16 (un paso más en el celular) |
 
 ```html
-<sui-emoji name="hamburger" [size]="bp.isMobile() ? 'lg' : 'xl'" />
+<sui-emoji name="hamburger" [size]="bp.celular() ? 'xl' : 'lg'" />
 ```
 
-El emoji no se toca, así que la regla del dedo no aplica: en los casos de ilustración va igual o
-más grande en web, donde sobra espacio. El tamaño con nombre más grande es `xl` (48); para uno más
-grande, `size="full"` dentro de una caja con el alto que se quiera.
+El tamaño con nombre más grande es `xl` (48); para uno más grande, `size="full"` dentro de una
+caja con el alto que se quiera.
+
+### Por dispositivo (D16)
+
+No está en la tabla por componente de D16; como no se toca, sigue la columna «lo que no se toca»:
+valor «web» en todos salvo el celular de 380 o más. Dos casos quedan fuera: el estado vacío no
+cambia por dispositivo (lo pone `sui-empty-state` en `full`) y la celebración espera P38 («Lo que
+esta hoja no cierra» de D16).
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380) | valor «web»: landing `lg` · texto `sm` · vacío `full` · celebración pendiente (P38) | lo que no se toca no sube en el celular chico |
+| celular (380–767) | valor «mobile»: landing `xl` · texto `md` · vacío `full` · celebración pendiente (P38) | un paso más que en la computadora (P1 b); el vacío no cambia, lo pone `sui-empty-state` |
+| tablet táctil (`pointer: coarse`) | valor «web»: landing `lg` · texto `sm` · vacío `full` · celebración pendiente (P38) | |
+| computadora (`pointer: fine`) | valor «web»: landing `lg` · texto `sm` · vacío `full` · celebración pendiente (P38) | `sm` (20) aquí es el alto de una línea de texto 14/20, no el `small` de los controles que D16 saca |
+
+Ultrawide: igual que la computadora. Fuente: D16, dueño 05-10-2026.
+
+En master-pedidos: no hay helper (`bp.sizeAvatar()` es solo del avatar, con otra escala). Landing:
+`[size]="bp.celular() ? 'xl' : 'lg'"` · dentro de un texto: `[size]="bp.celular() ? 'md' : 'sm'"` ·
+estado vacío: no se usa `sui-emoji` suelto, va `sui-empty-state` (que lo pone en `full`) ·
+celebración: pendiente (P38).
 
 ## «No usar»: por qué no hoy y cuándo sí
 
@@ -127,11 +148,54 @@ Outputs: ninguno.
 - Sin `ariaLabel` es decorativo: el lector de pantalla no lo dice.
 - `loading="lazy"`: fuera de la pantalla, no carga hasta que se acerca.
 
+## Bien y mal
+
+El emoji de un botón
+
+```html
+<!-- ❌ mal: un emoji no es un ícono (pages/orders/orders.html:323 y :354) -->
+<sui-button variant="stroke" color="neutral" [size]="bp.sizeControl()" (click)="handleMyself(order)">
+  <sui-emoji data-slot="start" name="shop" size="sm" />
+  Encargarme yo
+</sui-button>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-button variant="stroke" color="neutral" [size]="bp.sizeControl()" leftIcon="store-2-line"
+            (click)="handleMyself(order)">Encargarme yo</sui-button>
+```
+
+Pasos de una landing
+
+```html
+<!-- ❌ mal: lg fijo; en el celular no sube el paso que pide D16 (pages/public/landing-customers/landing-customers.html:160) -->
+<sui-emoji name="pushpin" size="lg" class="landing-customers__flow-icon"></sui-emoji>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-emoji name="pushpin" [size]="bp.celular() ? 'xl' : 'lg'" class="landing-customers__flow-icon" />
+```
+
+Un emoji del catálogo con `<img>`
+
+```html
+<!-- ❌ mal: la URL del paquete escrita a mano, fuera del componente (pages/products/add-product/add-product.html:122) -->
+<img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Package.png"
+     alt="Producto" width="48" height="48" />
+```
+
+```html
+<!-- ✅ bien: decorativo, el título de al lado ya lo dice -->
+<sui-emoji name="package" size="xl" />
+```
+
 ## Ejemplo
 
 ```html
-<!-- Celebración -->
-<sui-emoji name="party-popper" size="xl" />
+<!-- Junto a un texto: un paso más en el celular (D16) -->
+<p>Pedido confirmado <sui-emoji name="party-popper" [size]="bp.celular() ? 'md' : 'sm'" /></p>
 
 <!-- La barra de calificación: cinco juntos, estáticos -->
 <sui-emoji name="neutral-face" size="lg" [animated]="false" ariaLabel="Regular" />

package/docs/sui-empty-state/README.md

@@ -31,8 +31,8 @@ algo que avisar → alert.**
 > propósito con Fluent Emoji animados en vez de ilustraciones: es una decisión del proyecto, escrita
 > en CANON-SUI §5.6 (ilustración = Fluent Emoji animado, default el zorro).
 >
-> Uso medido el 04-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-card`): **66
-> empty-states en 40 archivos**. 29 con `action` (10 con `route`). 8 con `emoji` propio y 58 sin
+> Uso medido el 06-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-card`): **70
+> empty-states en 42 archivos**. 31 con `action` (10 con `route`). 8 con `emoji` propio y 62 sin
 > `emoji` (sale el zorro). 0 con `icon`, 0 con la URL del zorro pegada, 0 con `size`.
 
 ### Las piezas
@@ -44,9 +44,9 @@ algo que avisar → alert.**
 | `title` (obligatorio) | Qué pasa, sin punto y en 2 a 4 palabras, con uno de tres patrones: «Todavía no hay <cosa>», «Sin <cosa>», «Tu <cosa> está vacío» («Tu carrito está vacío», «Sin pedidos aún»). En una búsqueda, repetir lo buscado («Nada con “pollo broaster”») queda fuera de esos patrones. | canon (CANON-SUI §5.6) · lo de la búsqueda: propuesta, falta aprobación |
 | `subtitle` | Una oración con punto, en futuro tranquilizador: «Cuando hagas tu primer pedido, aparecerá aquí.» | canon (CANON-SUI §5.6) |
 | `action` como string + `(actionClicked)` | La salida es algo de esta misma pantalla: «Reintentar», «Ver todo el catálogo», «Activar captura». | propuesta |
-| `action` como `{ label, route }` | La salida es otra pantalla: «Ver negocios» → `/cliente/inicio`. | propuesta |
-| sin `action` | No hay un paso obvio, o la pantalla ya tiene el botón para llenarla (el «Nuevo local» de arriba). | propuesta |
-| error de carga | Siempre con `action="Reintentar"`. Excepción: la pantalla reintenta sola y lo dice («Seguimos intentando»). | propuesta |
+| `action` como `{ label, route }` | La salida es otra pantalla: «Ver negocios» → `/cliente/inicio`. | canon (aprobado por el dueño, 05-10-2026, bloque B10) |
+| sin `action` | No hay un paso obvio, o la pantalla ya tiene el botón para llenarla (el «Nuevo local» de arriba). | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| error de carga | Siempre con `action="Reintentar"`. Excepción: la pantalla reintenta sola y lo dice («Seguimos intentando»). | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
 
 **Usos de hoy que rompen las reglas:** 0. Los 29 `icon="…"` (que no es un input), las 22 URL del
 zorro pegadas a mano y los 4 errores de carga sin «Reintentar» se corrigieron el 03-10-2026 (commit
@@ -66,15 +66,32 @@ abajo (media query `bp.medium` del componente). El `size` solo cambia **el botó
 | uso | mobile | web | fuente |
 |---|---|---|---|
 | ilustración + texto | lo resuelve el componente | lo resuelve el componente | lo que hay en el DS |
-| botón de la acción | `large` (48) | `medium` (40) | propuesta: el tamaño es extensión SUI aprobada (03-10-2026); el «cuándo» falta aprobarlo |
+| botón de la acción | `large` (48) | `medium` (40) | el tamaño es extensión SUI aprobada (03-10-2026) · mobile: canon (decisión del dueño 04-10-2026, piso táctil 44) · web: D16, dueño 05-10-2026 (fila `button`) |
 
 ```html
 <sui-empty-state
   title="Tu carrito está vacío"
   [action]="{ label: 'Ver negocios', route: '/cliente/inicio' }"
-  [size]="bp.isMobile() ? 'large' : 'medium'" />
+  [size]="bp.sizeControl()" />
 ```
 
+### Por dispositivo (D16)
+
+El `size` es el del botón de la acción, que se toca: sigue la fila `button` de D16. Sin `action`,
+`size` no cambia nada y no hace falta pasarlo.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380) | `large` | D16 pide `medium` con área de 44, pero el DS todavía no la estira: hasta entonces, `large` |
+| celular (380–767) | `large` (48) | |
+| tablet táctil (`pointer: coarse`) | `large` | Apple pide 44 también en iPad |
+| computadora (`pointer: fine`) | `medium` (40) | el default |
+
+Ultrawide: igual que la computadora. Fuente: D16, dueño 05-10-2026.
+
+En master-pedidos: `[size]="bp.sizeControl()"` en todo empty-state con `action`. Medido el
+06-10-2026: 0 de los 31 con `action` lo pasan, así que en el celular y la tablet todos salen en 40.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -116,6 +133,53 @@ interface SuiEmptyStateAction { label: string; route?: string; }
 - El botón es `sui-button` `filled` `primary`: el color no se cambia; el tamaño sí, con `size` (`medium` 40 · `large` 48).
 - El emoji carga con `loading="lazy"`: en una captura de pantalla completa puede salir vacío.
 
+## Bien y mal
+
+La acción en el celular
+
+```html
+<!-- ❌ mal: sin size el botón sale en 40 también en el celular (pages/customer/cart/cart.html:18) -->
+<sui-empty-state
+  title="Tu carrito está vacío"
+  [action]="{ label: 'Explorar negocios', route: '/cliente/inicio' }" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-empty-state
+  title="Tu carrito está vacío"
+  [action]="{ label: 'Explorar negocios', route: '/cliente/inicio' }"
+  [size]="bp.sizeControl()" />
+```
+
+Un emoji propio
+
+```html
+<!-- ❌ mal: emoji es una URL, no un nombre de sui-emoji; 'hourglass' no carga nada -->
+<sui-empty-state emoji="hourglass" title="Aún no tienes facturas" />
+```
+
+```html
+<!-- ✅ bien: la URL de FLUENT_EMOJI_ANIM, como pages/invoices/invoices.ts:50 -->
+<sui-empty-state [emoji]="emptyEmoji" title="Aún no tienes facturas" />
+<!-- emptyEmoji = FLUENT_EMOJI_ANIM.hourglass -->
+```
+
+Mientras carga
+
+```html
+<!-- ❌ mal: mientras llega la lista se lee «no hay nada» por un segundo -->
+@if (pedidos().length === 0) {
+  <sui-empty-state title="Sin pedidos aún" />
+}
+```
+
+```html
+<!-- ✅ bien: skeleton hasta que cargue; el vacío solo con la lista ya cargada (el guard `hasLoaded()` es el de pages/locations/locations.html:15; esa pantalla, mientras carga, muestra un texto y no un skeleton) -->
+@if (isLoading()) { <!-- skeleton de la lista --> }
+@else if (hasLoaded() && pedidos().length === 0) { <sui-empty-state title="Sin pedidos aún" /> }
+```
+
 ## Ejemplo
 
 ```html