@ajuarezso/sui-design-system 0.25.0 → 0.25.2

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

@@ -53,7 +53,7 @@ dropdown, select y command menu en el README de `sui-dropdown-menu`.
 
 | size | alto | cuándo | fuente |
 |---|---|---|---|
-| `small` (default) | 36 | Menú de acciones en web, una línea (label + `sublabel` en la misma línea). | según la guía del DS (Figma: Small 36) |
+| `small` (default) | 36 | Fila de una línea (label + `sublabel` en la misma línea). En lo táctil no va (36 < 44); en la computadora está **pendiente** (D16, nota ⁵). | según la guía del DS (Figma: Small 36) · táctil y computadora: D16, dueño 05-10-2026 |
 | `large` | 56 | Toda fila en mobile; en web, cuando hay segunda línea (`description`) o el ícono va enmarcado. | según la guía del DS (Figma: Large 56) · toda fila en mobile: canon (decisión del dueño 04-10-2026, piso táctil 44); es el primer size ≥ 44, no hay 44 · el cuándo en web: propuesta |
 | `xlarge` | 76 | Extensión SUI. Sin uso hoy. | — |
 
@@ -90,18 +90,41 @@ celular: queda debajo de los 44 del dedo.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| menú de acciones (⋮) | `large` (56) | `small` (36) | mobile: canon (decisión del dueño 04-10-2026, piso táctil 44); `large` es el primer size ≥ 44, no hay 44 · web: propuesta, falta aprobación |
-| switcher con segunda línea (negocio + dirección) | `large` (56) | `large` (56) | mobile: canon (decisión del dueño 04-10-2026, piso táctil 44) · web: propuesta (ya es práctica en el sidebar) |
+| menú de acciones (⋮) | `large` (56), también en la tablet táctil | **pendiente** (ver D16 abajo); hoy la app va en `large` en los 10 usos | mobile: canon (decisión del dueño 04-10-2026, piso táctil 44); `large` es el primer size ≥ 44, no hay 44 · tablet y web: D16, dueño 05-10-2026 (antes decía `small` como propuesta) |
+| switcher con segunda línea (negocio + dirección) | `large` (56), también en la tablet táctil | `large` (56) mientras lleve `description`: en `small` no se ve | mobile: canon (decisión del dueño 04-10-2026, piso táctil 44) · tablet: D16, dueño 05-10-2026 · web: según el código (`description` solo en `large`) |
 | opciones de un select | las pone el select (44) | las pone el select (36–48) | canon (README de `sui-select`, aprobado 03-10-2026) |
 
 ```html
-<sui-dropdown-item label="Editar" [size]="bp.isMobile() ? 'large' : 'small'" … />   <!-- bp = BreakpointsService -->
+<!-- `large` fijo mientras la computadora siga pendiente (D16, nota ⁵): es lo que ya hace la app en los 10 usos -->
+<sui-dropdown-item label="Editar" size="large" … />
 ```
 
 En large y xlarge el texto sube a 16 px (regla del 03-10-2026). El label va en Label/Medium 16/24
 (el nodo de Figma del large lo dibuja en 14); la description no cambia en large (12) y el alto
 sigue en 56: el padding-y bajó de 8 a 6.
 
+### Por dispositivo (D16)
+
+Está en la tabla por componente de D16 (dueño, 05-10-2026). Se toca, así que la tablet va con el
+celular. En la computadora D16 lo deja **pendiente** (nota ⁵): no hay `medium`, y `small` (36) y
+`large` (56) no son la misma fila más chica o más grande, porque la `description` solo se ve en
+`large`; elegir uno cambia qué se lee.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380) | `large` (56) | D16 deja la celda vacía; `large` es el único size ≥ 44 y es lo que ya da `bp.tactil()` |
+| celular (380–767) | `large` (56) | el primer size ≥ 44 |
+| tablet táctil (`pointer: coarse`) | `large` (56) | Apple pide 44 pt también en el iPad |
+| computadora (`pointer: fine`) | **pendiente** | falta decidir (D16, nota ⁵) entre `small` (36, sin `description`) y `large` (56); hoy la app va en `large` en los 10 usos, y con `description` o `leadingFramed` solo sirve `large` |
+
+Ultrawide: igual que la computadora.
+
+En master-pedidos: no hay helper. Mientras la computadora siga pendiente, `size="large"` fijo en todo
+dispositivo (lo que ya hace la app en los 10 usos); no es la decisión de la celda pendiente, es no bajar
+de 44 en lo táctil sin elegir por la computadora. Cuando se decida, si la computadora queda en otro
+size: `[size]="bp.tactil() ? 'large' : '<ese size>'"`. Con `description` o `leadingFramed`:
+`size="large"` siempre.
+
 ## API
 
 <!-- api:inicio -->
@@ -146,11 +169,54 @@ está `disabled`.
 - El label corta con `…` en una línea: no hace salto de línea.
 - Ya trae los listeners `touchstart`/`touchend` para el `:active` pegado de iOS.
 
+## Bien y mal
+
+**Segunda línea en `large`**
+
+```html
+<!-- ❌ mal: en `large` el sublabel cae abajo en gris claro (sidebar.html:71; igual en customer-layout.html:27, driver-layout.html:25 y master-layout.html:27) -->
+<sui-dropdown-item [label]="t.name" [sublabel]="t.address ?? ''" mode="option" size="large" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-dropdown-item [label]="t.name" [description]="t.address ?? null" mode="option" size="large" />
+```
+
+**Ícono enmarcado**
+
+```html
+<!-- ❌ mal: el círculo está medido para 20; con 18 queda de 38 (option-sections-manager.html:41, :44, :47) -->
+<sui-dropdown-item label="Editar" size="large" [leadingFramed]="true" (clicked)="menu.close(); openEdit(s)">
+  <sui-icon slot="leading" name="pencil-line" [size]="18" />
+</sui-dropdown-item>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-dropdown-item label="Editar" size="large" [leadingFramed]="true" (clicked)="menu.close(); openEdit(s)">
+  <sui-icon slot="leading" name="pencil-line" [size]="20" />
+</sui-dropdown-item>
+```
+
+**Cerrar el menú**
+
+```html
+<!-- ❌ mal: el item no cierra el menú; el panel queda abierto después de archivar -->
+<sui-dropdown-item label="Archivar" size="large" (clicked)="archivar()" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-dropdown-item label="Archivar" size="large"
+                   (clicked)="menu.close(); archivar()" />
+```
+
 ## Ejemplo
 
 ```html
-<!-- Acción en un menú -->
-<sui-dropdown-item label="Archivar" [size]="bp.isMobile() ? 'large' : 'small'"
+<!-- Acción en un menú (`large` fijo mientras la computadora siga pendiente) -->
+<sui-dropdown-item label="Archivar" size="large"
                    (clicked)="menu.close(); archivar()">
   <sui-icon slot="leading" name="archive-line" [size]="20" />
 </sui-dropdown-item>

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

@@ -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) | mobile: canon (decisión del dueño 04-10-2026, piso táctil 44); `large` es el primer size ≥ 44, no hay 44 · web: propuesta; hoy los 3 items del ⋮ van en `large` en las dos |
+| 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

@@ -57,12 +57,23 @@ 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. 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
 
 <!-- api:inicio -->
@@ -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

@@ -32,7 +32,7 @@ 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` |
+| 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`) |
@@ -41,12 +41,12 @@ confirmado», los pasos de una landing, la barra de calificación.
 
 | valor | px | cuándo | fuente |
 |---|---|---|---|
-| `xl` | 48 | Estado vacío, celebración. | 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: lo usa `sui-empty-state`. | según el código |
+| `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`
 
@@ -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
@@ -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) | 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: propuesta, falta aprobación |
+| 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

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

@@ -95,11 +95,29 @@ que va al lado. El texto sube a 16 (regla de tamaños del 03-10-2026); los ícon
 | CTA dentro de la card de un plan | `large` (48) | `medium` (40) | mobile: canon (decisión del dueño 04-10-2026, piso táctil 44) · web: canon (dueño, 05-10-2026, D16) |
 
 ```html
-<sui-fancy-button type="primary" [size]="bp.isMobile() ? 'large' : 'medium'">Empieza gratis</sui-fancy-button>
+<sui-fancy-button type="primary" [size]="bp.sizeControl()">Empieza gratis</sui-fancy-button>
 ```
 
 Hoy no hay usos (todo el componente está en «no usar»).
 
+### Por dispositivo (D16)
+
+Se toca, así que va como «lo que se toca»; la fila de `fancy-button` de la tabla D16 manda
+(canon, dueño, 05-10-2026, D16).
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380 px) | `medium` + área de 44 ¹ | ¹ el DS todavía no estira a 44 el área del `medium` (40): hasta que lo haga, va `large`, que es lo que ya da el helper |
+| celular (380–767 px) | `large` (48) | del mismo alto que el `large` de `sui-button` que va al lado |
+| tablet táctil (`pointer: coarse`) | `large` (48) | Apple pide 44 pt también en el iPad; `bp.isMobile()` sola la deja en `medium` |
+| computadora (`pointer: fine`) | `medium` (40) | también dentro de la card de un plan; `small` y `xsmall` no se usan |
+
+Ultrawide (≥ 1920 px): igual que la computadora, `medium`. El espacio extra va al ancho de la
+sección, no a un CTA más grande.
+
+En master-pedidos: `[size]="bp.sizeControl()"` (`large` en el celular y en toda pantalla táctil,
+`medium` en la computadora).
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 Nada se borra del DS. Lo marcado «no usar» no tiene caso en la app de hoy; si un flujo nuevo cae
@@ -146,6 +164,46 @@ El clic se escucha con `(clicked)`. Slots: `<ng-content>` (el texto).
 - El anillo del `neutral` es un hex crudo (`#242628`): no hay token para ese gris.
 - Ya trae el arreglo de iOS para el `:active` pegado: no lo agregues.
 
+## Bien y mal
+
+**El CTA en el teléfono y en la computadora**
+
+```html
+<!-- ❌ mal: dos componentes para el mismo CTA. La vitrina (master-preview/_guia-atomos/botones.ts:138)
+     todavía pone sui-button large en mobile «porque el fancy mide 40»; desde el 04-10 tiene large (48) -->
+<sui-button size="large">Empieza gratis</sui-button>
+<sui-fancy-button type="primary" size="medium">Empieza gratis</sui-fancy-button>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-fancy-button type="primary" [size]="bp.sizeControl()">Empieza gratis</sui-fancy-button>
+```
+
+**Un formulario que se envía**
+
+```html
+<!-- ❌ mal: `type` es el relleno, no el type HTML; no compila y no hace submit (Trampas) -->
+<sui-fancy-button type="submit">Crear cuenta</sui-fancy-button>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-fancy-button type="primary" htmlType="submit" [size]="bp.sizeControl()">Crear cuenta</sui-fancy-button>
+```
+
+**Una acción destructiva**
+
+```html
+<!-- ❌ mal: una destructiva no es marketing («No usar»), y el brillo la vuelve llamativa -->
+<sui-fancy-button type="destructive">Eliminar cuenta</sui-fancy-button>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-button variant="filled" color="error" [size]="bp.sizeControl()">Eliminar cuenta</sui-button>
+```
+
 ## Ejemplo
 
 ```html