@ajuarezso/sui-design-system 0.24.1 → 0.25.1

package/docs/sui-day-label/README.md

@@ -22,8 +22,8 @@ Story: [Molecules/Date & Time/Day Label](https://sui-design-system.web.app/?path
 
 ## Qué variante usar
 
-> **La guía del DS no tiene página para este componente** (vive dentro del datepicker). Todo es
-> **propuesta, falta aprobación**.
+> **La guía del DS no tiene página para este componente** (vive dentro del datepicker). 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`: **0 usos directos**. Lo usa por dentro
 > `sui-datepicker`.
@@ -31,24 +31,35 @@ Story: [Molecules/Date & Time/Day Label](https://sui-design-system.web.app/?path
 | input | valor | cuándo | fuente |
 |---|---|---|---|
 | `label` | dos letras en mayúsculas | Lo normal, igual que el datepicker: `LU MA MI JU VI SÁ DO`. La semana arranca el lunes. | propuesta |
-| `label` | una letra | No usar: «M» es martes y miércoles a la vez. | propuesta |
-| `label` | tres letras o más | No usar: «MIÉ» entra justo en 40 px, pero rompe el formato de dos letras del datepicker; «LUNES» ya no entra. | propuesta |
+| `label` | una letra | No usar: «M» es martes y miércoles a la vez. | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `label` | tres letras o más | No usar: «MIÉ» entra justo en 40 px, pero rompe el formato de dos letras del datepicker; «LUNES» ya no entra. | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
 
 Usos de hoy que rompen la regla: **0**.
 
 ## Tamaño en mobile y en web
 
-**No tiene `size`.** Mide 40 × 40, igual que `sui-day-cell`, para que las columnas calcen. No se
-toca: el tamaño solo importa para alinear.
+**No tiene `size`.** Mide 40 × 40, igual que `sui-day-cell` `medium`, para que las columnas calcen.
+No se toca: el tamaño solo importa para alinear. Con `sui-day-cell` `large` (44) la columna ya no
+calza sola: el `sui-datepicker` `xlarge` le pone `width: 44px` desde afuera, y un calendario armado a
+mano tiene que hacer lo mismo.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| cabecera de columna | 40 × 40 | 40 × 40 | medido |
+| cabecera de columna | 40 × 40 (44 de ancho, desde afuera, si las celdas van en `large`) | 40 × 40 | medido · 44: `sui-datepicker.scss`, size `xlarge` |
 
 ```html
 @for (d of ['LU','MA','MI','JU','VI','SÁ','DO']; track d) { <sui-day-label [label]="d" /> }
 ```
 
+### Por dispositivo (D16)
+
+No aplica: **no tiene `size`** y no se toca, así que no sube en ningún dispositivo. Lo único que
+cambia es su ancho, que sigue al de la celda: 44 donde `sui-day-cell` va en `large` (celular chico,
+celular y tablet táctil), 40 en la computadora. Fuente: D16, dueño 05-10-2026.
+
+En master-pedidos: sin `[size]`; el ancho de 44 sale de la misma señal que la celda,
+`bp.tactil()`.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -74,6 +85,44 @@ Outputs: ninguno.
   al lector de pantalla.
 - Acepta cualquier texto, pero el ancho es fijo de 40 px: lo que no entra se corta.
 
+## Bien y mal
+
+La cabecera de la semana
+
+```html
+<!-- ❌ mal: «M» es martes y miércoles a la vez (canon B4) -->
+@for (d of ['L','M','M','J','V','S','D']; track $index) { <sui-day-label [label]="d" /> }
+```
+
+```html
+<!-- ✅ bien -->
+@for (d of ['LU','MA','MI','JU','VI','SÁ','DO']; track d) { <sui-day-label [label]="d" /> }
+```
+
+Elegir los días que abre el local
+
+```html
+<!-- ❌ mal: es solo texto (columnheader); no se toca ni se marca -->
+@for (d of dias; track d.value) { <sui-day-label [label]="d.label" (click)="alternar(d)" /> }
+```
+
+```html
+<!-- ✅ bien: size por D16 (celular `large`, o `medium` si los 7 no entran: P18, pendiente) -->
+<sui-button-group [multi]="true" [items]="dias" [size]="bp.sizeControl()" [(value)]="diasAbiertos" />
+```
+
+Cabecera sobre celdas de 44
+
+```html
+<!-- ❌ mal: la etiqueta mide 40 y la celda large 44; las columnas se corren -->
+<sui-day-label label="LU" />
+```
+
+```html
+<!-- ✅ bien: el mismo ancho que la celda, como hace el datepicker xlarge -->
+<sui-day-label label="LU" [style.width.px]="bp.tactil() ? 44 : 40" [style.max-width.px]="bp.tactil() ? 44 : 40" />
+```
+
 ## Ejemplo
 
 ```html

package/docs/sui-divider/README.md

@@ -33,7 +33,7 @@ Story: [Atoms/Divider/Divider](https://sui-design-system.web.app/?path=/docs/ato
 > espacio, línea con texto, texto, texto con fondo y contenido al centro). Su variante «Line»
 > («una línea horizontal simple», la default) es este componente. La guía no trae la vertical ni
 > dice cuándo separar con línea y cuándo con espacio. Lo marcado «según la guía del DS» sale de
-> ahí; el resto es **propuesta, falta aprobación**.
+> ahí; el resto quedó aprobado por el dueño (canon, 05-10-2026).
 >
 > Uso medido el 04-10-2026 en `master-pedidos/src/app`: **39 dividers en 14 archivos** (los 13 de
 > antes + las 26 líneas a mano que se pasaron el 03-10-2026), todos horizontales, sin contar prototipos ni vitrinas (`master-preview`, `master-prototipos`,
@@ -43,9 +43,11 @@ Story: [Atoms/Divider/Divider](https://sui-design-system.web.app/?path=/docs/ato
 | orientation | cuándo | ejemplo real | fuente |
 |---|---|---|---|
 | `horizontal` (default) | Separa bloques o filas. El espacio arriba y abajo lo pone el `gap` del padre, no el divider. | `pages/driver/driver-dashboard/driver-dashboard.html:1127` (entre filas, `@if (!last)`) | según la guía del DS («Line») |
-| `vertical` | Separa datos cortos en una sola fila. El padre necesita alto (si no, mide 16 px). | — (sin usos) | propuesta, falta aprobación |
+| `vertical` | Separa datos cortos en una sola fila. El padre necesita alto (si no, mide 16 px). | — (sin usos) | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 
-**Corregido el 03-10-2026:** las 26 líneas hechas a mano (mi-negocio, checkout, carrito, billetera y movimientos) ya son `sui-divider`. Seis conservan un `margin` propio porque sus vecinos se separan con margen y no con el `gap` del padre; pasarlo al `gap` es un cambio aparte.
+**Corregido el 03-10-2026:** las 26 líneas hechas a mano (mi-negocio, checkout, carrito, billetera y movimientos) ya son `sui-divider`. Seis conservan un `margin` propio porque sus vecinos se separan con margen y no con el `gap` del padre; pasarlo al `gap` es un cambio aparte. Quedan **dos líneas a mano** (medido el 06-10-2026):
+`pages/driver/driver-dashboard/driver-dashboard.html:410` (`.dashboard__votaciones-sep`) y
+`pages/customer/viaje/viaje.html:111` (`.vj__ruta-divisor`).
 
 El «o» del login y del registro también pasó a `sui-content-divider type="text-line"`.
 
@@ -56,13 +58,22 @@ Nada: las dos orientaciones tienen caso. La vertical no tiene usos hoy, pero el
 
 ## Tamaño en mobile y en web
 
-Criterio de la app: **en mobile se lee y se toca con el dedo, así que va más grande; en web
-(desktop), más chico.** Mobile es `≤ 767 px`, el mismo corte de `BreakpointsService.isMobile()`
-en master-pedidos. Fuente: canon del dueño (03-10-2026), el mismo patrón que ya usan 27 controles
-de la app.
+Criterio de la app: **D16, tamaño por dispositivo** (canon, dueño, 05-10-2026), que reemplaza al
+«tamaño por plataforma» del 03-10-2026 (mobile grande, web chico). La columna «mobile» es el celular de
+380 px o más y, en lo que se toca, también la tablet (`pointer: coarse`). La columna «web» es la
+computadora (`pointer: fine`) y, en lo que no se toca, también la tablet. En el celular chico
+(< 380 px) va `medium` a la vista, sin achicar el área de 44 de lo que se toca. **Nada en `small` ni
+`xsmall`**, salvo lo que el componente solo tiene en chico. En la app, `BreakpointsService` ya
+mira el puntero y los 380 px: `bp.tactil()` (celular o pantalla táctil), `bp.celular()` (380–767) y
+`bp.celularChico()` (< 380).
 
-**No aplica**: es 1 px en las dos plataformas. Lo que cambia por plataforma es el `gap` del padre,
-que separa los bloques (la regla de spacing de la app: 20/16/12 según el breakpoint).
+### Por dispositivo (D16)
+
+**No aplica**: no tiene `size` y es 1 px en todos los dispositivos (celular chico, celular, tablet
+táctil, computadora y ultrawide). Lo que cambia es el `gap` del padre, que separa los bloques (la
+regla de spacing de la app: 20/16/12 según el breakpoint). Fuente: D16, dueño 05-10-2026.
+
+En master-pedidos: sin `[size]`.
 
 ## API
 
@@ -86,6 +97,50 @@ Outputs: ninguno.
 - Lleva `role="separator"` y `aria-orientation`. Va **entre** filas (`@if (!last)`), no uno por
   fila: el último sobra.
 
+## Bien y mal
+
+Separar dos bloques dentro de una card
+
+```html
+<!-- ❌ mal: línea hecha a mano (pages/driver/driver-dashboard/driver-dashboard.html:410, .scss:1527) -->
+<div class="dashboard__votaciones-sep"></div>
+```
+
+```html
+<!-- ✅ bien: la línea la pone el divider; la clase se queda solo con el margin, como en checkout y carrito -->
+<sui-divider class="dashboard__votaciones-sep" />
+```
+
+Una línea entre las filas de una lista
+
+```html
+<!-- ❌ mal: uno por fila; el último sobra y queda pegado al borde (Trampas) -->
+@for (f of filas; track f.id) {
+  <app-fila [fila]="f" />
+  <sui-divider />
+}
+```
+
+```html
+<!-- ✅ bien -->
+@for (f of filas; track f.id; let last = $last) {
+  <app-fila [fila]="f" />
+  @if (!last) { <sui-divider /> }
+}
+```
+
+Datos en una fila
+
+```html
+<!-- ❌ mal: el padre no tiene alto ni centra; la línea queda de 16 px y descolgada (Trampas) -->
+<div><span>4.7</span><sui-divider orientation="vertical" /><span>25–35 min</span></div>
+```
+
+```html
+<!-- ✅ bien: .meta { display: flex; align-items: center; height: 20px; gap: 8px } -->
+<div class="meta"><span>4.7</span><sui-divider orientation="vertical" /><span>25–35 min</span></div>
+```
+
 ## Ejemplo
 
 ```html

package/docs/sui-drawer-footer/README.md

@@ -69,14 +69,32 @@ El `size` cambia **los botones** (escala del `sui-button`):
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| pie de un drawer | `large` (48) | `medium` (40) | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono |
+| pie de un drawer | `large` (48), también en la tablet táctil | `medium` (40) | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono · tablet: D16, dueño 05-10-2026 |
 | par de botones de un modal | `sui-modal-footer` (botones `large`, 48) | `sui-modal-footer` | canon (CLAUDE.md, botones: size `large` en todos los modales) |
 
 ```html
-<sui-drawer-footer type="stretch" [size]="bp.isMobile() ? 'large' : 'medium'"
+<sui-drawer-footer type="stretch" [size]="bp.sizeControl()"
                    (primaryClick)="guardar()" (secondaryClick)="cancelar()" />
 ```
 
+### Por dispositivo (D16)
+
+No está en la tabla por componente de D16: son botones, así que va con **lo que se toca** (la fila
+de `button`). El `size` del pie es el de sus dos botones.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380) | `large` (48) | D16 pide `medium` con área tocable de 44; mientras el DS no estire el área de los `medium`, va `large` (interino) |
+| celular (380–767) | `large` (48) | |
+| tablet táctil (`pointer: coarse`) | `large` (48) | se toca con el dedo: Apple pide 44 pt también en el iPad |
+| computadora (`pointer: fine`) | `medium` (40) | |
+
+Ultrawide (≥ 1920 px): igual que la computadora, `medium`; el espacio extra va a ancho, no a botones
+más grandes.
+
+En master-pedidos: `[size]="bp.sizeControl()"` (da `large` o `medium`, los dos sizes que tiene el pie).
+Igual, el par de botones va en `sui-modal-footer` (ver arriba), cuyo canon es `large` siempre (D2).
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -130,6 +148,49 @@ interface SuiFooterButtonConfig { label: string; disabled?: boolean; color?: 'pr
 - `checkboxActive` y `toggleActive` son `model`: `[(checkboxActive)]`.
 - El borde de arriba ya viene puesto: no le sumes otro.
 
+## Bien y mal
+
+**Pie de un modal**
+
+```html
+<!-- ❌ mal: el par de botones de un modal es de sui-modal-footer (canon de botones, 27-07-2026) -->
+<sui-drawer-footer type="basic" primaryButton="Guardar"
+                   (primaryClick)="guardar()" (secondaryClick)="cerrar()" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-modal-footer secondaryButton="Cancelar" [primaryButton]="{ label: 'Guardar' }"
+                  (secondaryClick)="cerrar()" (primaryClick)="guardar()" />
+```
+
+**Confirmar algo destructivo**
+
+```html
+<!-- ❌ mal: el drawer-footer ignora `color: 'error'`; el «Eliminar» sale naranja -->
+<sui-drawer-footer type="basic" [primaryButton]="{ label: 'Eliminar', color: 'error' }"
+                   (primaryClick)="eliminar()" (secondaryClick)="cerrar()" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-modal-footer secondaryButton="Cancelar" [primaryButton]="{ label: 'Eliminar', color: 'error' }"
+                  (secondaryClick)="cerrar()" (primaryClick)="eliminar()" />
+```
+
+**Un solo botón**
+
+```html
+<!-- ❌ mal: sin `secondaryButton` aparece un «Cancelar» que nadie pidió (es el default) -->
+<sui-drawer-footer type="basic" primaryButton="Entendido" (primaryClick)="cerrar()" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-drawer-footer type="basic" primaryButton="Entendido" [secondaryButton]="null"
+                   [size]="bp.sizeControl()" (primaryClick)="cerrar()" />
+```
+
 ## Ejemplo
 
 ```html

package/docs/sui-drawer-header/README.md

@@ -37,27 +37,27 @@ Regla corta: **modal o sheet → sui-modal con title · panel lateral de web →
 
 | type | cuándo | fuente |
 |---|---|---|
-| `basic` (default) | Lo normal: título y cerrar. | propuesta, falta aprobación |
-| `left-icon` | El ícono dice de qué es el panel antes de leer («history-line» en el historial). En `small` va suelto (24); en `large`/`xlarge`, en un círculo con borde. | propuesta, falta aprobación |
+| `basic` (default) | Lo normal: título y cerrar. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `left-icon` | El ícono dice de qué es el panel antes de leer («history-line» en el historial). En `small` va suelto (24); en `large`/`xlarge`, en un círculo con borde. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 
 ### `size`
 
 | size | qué cambia | cuándo | fuente |
 |---|---|---|---|
-| `small` (default) | 64 px, todo en una línea; **no muestra `description`** | Panel con título que se explica solo. Es el único que admite `link`. | propuesta, falta aprobación |
-| `large` | 88 px, título arriba y `description` debajo | Panel que necesita una línea de contexto («Últimos 30 días»). | propuesta, falta aprobación |
-| `xlarge` | padding 24, título 20, descripción 16 | No: extensión de SUI sin caso; en web no hace falta letra más grande. | propuesta, falta aprobación |
+| `small` (default) | 64 px, todo en una línea; **no muestra `description`** | Panel con título que se explica solo. Es el único que admite `link`. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `large` | 88 px, título arriba y `description` debajo | Panel que necesita una línea de contexto («Últimos 30 días»). | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `xlarge` | padding 24, título 20, descripción 16 | No: extensión de SUI sin caso; en web no hace falta letra más grande. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 
 ### Lo demás
 
 | input | valor | cuándo | fuente |
 |---|---|---|---|
 | `showDismiss` | `true` (default) | Siempre. | según la guía del DS (cerrar visible por default) |
-| `showDismiss` | `false` | Solo si el panel no se puede cerrar sin decidir (y entonces es un modal, no un drawer). | propuesta, falta aprobación |
-| `showDivider` | `true` | Cuando el cuerpo scrollea por debajo de la cabecera. | propuesta, falta aprobación |
+| `showDismiss` | `false` | Solo si el panel no se puede cerrar sin decidir (y entonces es un modal, no un drawer). | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
+| `showDivider` | `true` | Cuando el cuerpo scrollea por debajo de la cabecera. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 | `badge` | número | Pendientes dentro del panel (círculo rojo). | propuesta, falta aprobación |
-| `badge` | texto o `SuiBadgeConfig` | Un estado o etiqueta al lado del título. Pasa `variant: 'lighter'`: el default de aquí es `light` (ver Trampas). | canon (README de `sui-badge`: `lighter` en cabeceras) |
-| `link` | texto | Una acción menor en la cabecera («Ver todo»). Solo en `small`. | propuesta, falta aprobación |
+| `badge` | texto o `SuiBadgeConfig` | Un estado o etiqueta al lado del título. Pasa `variant: 'lighter'` y `size: 'medium'`: los defaults de aquí son `light` y `small` (ver Trampas). | canon (README de `sui-badge`: `lighter` en cabeceras) |
+| `link` | texto | Una acción menor en la cabecera («Ver todo»). Solo en `small`. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 | `dismissAriaLabel` | «Cerrar» (default) | Ya está en español. | según el código |
 
 Usos de hoy que rompen las reglas: **0** (no se usa).
@@ -69,7 +69,7 @@ los 40-44 del dedo. Es una pieza de web.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| cabecera de panel | no se usa: `sui-modal` fullscreen con `title` | `small` o `large` | propuesta, falta aprobación |
+| cabecera de panel | no se usa: `sui-modal` fullscreen con `title` | `small` o `large` | canon (aprobado por el dueño, 05-10-2026, bloque B7) |
 
 ```html
 @if (!bp.isMobile()) {
@@ -77,6 +77,18 @@ los 40-44 del dedo. Es una pieza de web.
 }
 ```
 
+### Por dispositivo (D16)
+
+No aplica: su `size` no depende del dispositivo sino del contenido (`large` cuando hay `description`,
+`small` cuando el título se explica solo), y la X de cerrar es un `sui-compact-button` `large` fijo
+(24 px) que el `size` de la cabecera no mueve. En el celular chico y en el celular no se usa (el
+panel es un `sui-modal` fullscreen); en la computadora y el ultrawide va `small` o `large` según el
+contenido. En la tablet táctil con 768 px o más el panel sí se mostraría y la X de 24 no llega al
+piso de 44: ningún size lo arregla y queda **sin decidir**.
+
+En master-pedidos: sin helper; `@if (!bp.isMobile())` alrededor y `size="large"` solo si lleva
+`description`.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -119,13 +131,58 @@ type SuiDrawerHeaderSize = 'small' | 'large' | 'xlarge';
 
 - **`description` no se ve en `small`** y **`link` no se ve en `large`/`xlarge`**: los dos se pasan
   sin error y no aparecen.
-- **El badge de texto sale `orange` + `light` por default**, que va contra el canon del badge
-  (`lighter` en cabeceras, naranja solo si pide atención). Pasa un `SuiBadgeConfig` completo.
+- **El badge de texto sale `orange` + `light` + `small` por default**, que va contra el canon del badge
+  (`lighter` en cabeceras, naranja solo si pide atención) y contra D16 (`medium` en la computadora;
+  `small` no se usa). Pasa un `SuiBadgeConfig` completo, con `size: 'medium'`. Un `SuiBadgeConfig`
+  sin `size` también cae en `small` (`bcfg.size ?? 'small'` en el template).
 - **`badge` en `0` sí se dibuja** (un círculo rojo con «0»). Pasa `null` para no mostrarlo.
 - **`left-icon` sin `icon` no dibuja nada.**
 - El título es un `<h2>`: si la página ya tiene un `h2` al mismo nivel, revisa el orden de títulos.
 - No hay contenedor: el fondo, el ancho y la animación del panel los pones tú.
 
+## Bien y mal
+
+**Cabecera de un modal**
+
+```html
+<!-- ❌ mal: el modal ya trae su cabecera; el drawer-header es para un panel lateral de web -->
+<sui-modal [(open)]="abierto" [fullscreen]="true">
+  <sui-drawer-header title="Editar producto" (dismiss)="abierto.set(false)" />
+</sui-modal>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-modal [(open)]="abierto" [fullscreen]="true" title="Editar producto"
+           description="Los cambios se ven en la carta" />
+```
+
+**Estado al lado del título**
+
+```html
+<!-- ❌ mal: el texto suelto sale `orange` + `light`, contra el canon del badge (ver Trampas) -->
+<sui-drawer-header title="Sabores Andinos" badge="Abierto" (dismiss)="cerrar()" />
+```
+
+```html
+<!-- ✅ bien: config completa; sin `size` el badge cae en `small` y D16 pide `medium` en la computadora -->
+<sui-drawer-header title="Sabores Andinos" (dismiss)="cerrar()"
+                   [badge]="{ label: 'Abierto', color: 'green', variant: 'lighter', size: 'medium' }" />
+```
+
+**Línea de contexto**
+
+```html
+<!-- ❌ mal: con el `small` del default la `description` no se ve, y no avisa -->
+<sui-drawer-header title="Historial de pedidos" description="Últimos 30 días" (dismiss)="cerrar()" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-drawer-header size="large" title="Historial de pedidos" description="Últimos 30 días"
+                   (dismiss)="cerrar()" />
+```
+
 ## Ejemplo
 
 ```html

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

@@ -32,8 +32,8 @@ form-hint.**
 ## Qué variante usar
 
 > **La guía del DS no tiene una pieza «caption»** en su dropdown: tiene etiqueta de grupo y
-> separador. La caption sale del Figma del DS («Dropdown Misc Items»). Todo lo de abajo es
-> **propuesta, falta aprobación**.
+> separador. La caption sale del Figma del DS («Dropdown Misc Items»). Todas las reglas de abajo
+> son **canon**: lo que estaba en propuesta lo aprobó el dueño el 05-10-2026.
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-dropdown-menu`):
 > **0 usos**.
@@ -42,9 +42,9 @@ No tiene variantes. Lo único que se decide es el texto:
 
 | qué | regla | fuente |
 |---|---|---|
-| largo | Una línea; si no entra, corta palabra y salta de línea (`word-break: break-word`). | propuesta |
+| largo | Una línea; si no entra, corta palabra y salta de línea (`word-break: break-word`). | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
 | copy | Sentence case, con punto solo si son dos frases. Tuteo: «Presiona Enter para agregar». | canon (CANON-SUI §5, `docs/VOZ-Y-ESCRITURA.md`) |
-| posición | Al final del panel, después del último item. | propuesta |
+| posición | Al final del panel, después del último item. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 
 **Candidatos de hoy:** las cabeceras de grupo a mano del switcher del sidebar
 (`components/sidebar/sidebar.html:67`, `:88`, `:104`) **no** son caption: son cabeceras de grupo y van
@@ -57,7 +57,15 @@ de 44 px del dedo.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| pie de un menú | igual (14/20) | igual (14/20) | propuesta |
+| pie de un menú | igual (14/20) | igual (14/20) | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+
+### Por dispositivo (D16)
+
+No aplica: no tiene input `size` y no se toca, así que mide 14/20 con 8 px de padding en todo
+dispositivo (celular chico, celular, tablet táctil, computadora y ultrawide). El que crece en lo
+táctil es el `sui-dropdown-item` de al lado, no la caption.
+
+En master-pedidos: sin `[size]` ni helper.
 
 ## API
 
@@ -79,13 +87,57 @@ Slot: el contenido por defecto (`<ng-content />`) es el texto.
   la caja.
 - No lleva `role`: el lector de pantalla lo lee como texto suelto dentro del menú.
 
+## Bien y mal
+
+**Cabecera de un grupo**
+
+```html
+<!-- ❌ mal: la caption es gris claro y va al pie; no titula un grupo -->
+<sui-dropdown-caption>Negocios</sui-dropdown-caption>
+@for (t of negocios(); track t.id) { <sui-dropdown-item [label]="t.name" mode="option" size="large" /> }
+```
+
+```html
+<!-- ✅ bien (lo mismo para los <span> a mano de sidebar.html:67, :88 y :104) -->
+<sui-content-divider type="text" text="Negocios" />
+@for (t of negocios(); track t.id) { <sui-dropdown-item [label]="t.name" mode="option" size="large" /> }
+```
+
+**Un dato que ayuda a elegir**
+
+```html
+<!-- ❌ mal: `soft-400` es el gris de los metadatos; lo que decide la elección no va aquí -->
+<sui-dropdown-item label="Recojo en tienda" size="large" />
+<sui-dropdown-caption>El recojo está listo en 20 min</sui-dropdown-caption>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-dropdown-item label="Recojo en tienda" description="Listo en 20 min" size="large" />
+```
+
+**Dónde va**
+
+```html
+<!-- ❌ mal: arriba del todo, empuja los items y se lee antes que ellos -->
+<sui-dropdown-caption>Presiona Enter para agregar</sui-dropdown-caption>
+<sui-dropdown-search [(value)]="busqueda" placeholder="Buscar etiqueta…" />
+```
+
+```html
+<!-- ✅ bien: al final del panel, después del último item -->
+<sui-dropdown-search [(value)]="busqueda" placeholder="Buscar etiqueta…" />
+@for (e of etiquetas(); track e) { <sui-dropdown-item [label]="e" size="large" /> }
+<sui-dropdown-caption>Presiona Enter para agregar</sui-dropdown-caption>
+```
+
 ## Ejemplo
 
 ```html
 <ng-template suiDropdownPanel>
   <sui-dropdown-search [(value)]="busqueda" placeholder="Buscar etiqueta…" />
   @for (e of etiquetasFiltradas(); track e) {
-    <sui-dropdown-item [label]="e" (clicked)="menu.close(); elegir(e)" />
+    <sui-dropdown-item [label]="e" size="large" (clicked)="menu.close(); elegir(e)" />
   }
   <sui-dropdown-caption>Presiona Enter para crear «{{ busqueda() }}»</sui-dropdown-caption>
 </ng-template>

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

@@ -46,15 +46,15 @@ dropdown, select y command menu en el README de `sui-dropdown-menu`.
 
 | mode | cuándo | ejemplo real de la app | fuente |
 |---|---|---|---|
-| `menuitem` (default) | La fila **hace algo**: editar, archivar, ir a otra pantalla. `selected` no pinta nada. | `option-sections-manager.html:40` («Editar») | propuesta |
+| `menuitem` (default) | La fila **hace algo**: editar, archivar, ir a otra pantalla. `selected` no pinta nada. | `option-sections-manager.html:40` («Editar») | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 | `option` | La fila **es un valor** y el elegido queda marcado (fondo `primary-alpha-10` + check a la derecha). El contenedor lleva `role="listbox"`. | `sidebar.html:69` (el negocio actual) | propuesta (ya es práctica) |
 
 ### `size`
 
 | 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) |
-| `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); el cuándo es propuesta |
+| `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. | — |
 
 ### Las piezas
@@ -68,7 +68,7 @@ dropdown, select y command menu en el README de `sui-dropdown-menu`.
 | `shortcut` | Solo web (en mobile no hay teclado físico, ver README de `sui-kbd`). | canon (README de `sui-kbd`) |
 | `slot="trailing"` | Badge primero, después el atajo (lo pone el componente), al final un switch o botón. | según la guía del DS (orden del Figma) |
 | `disabled` | Existe pero hoy no se puede: queda gris claro y no recibe toques. | según la guía del DS |
-| `highlighted` | Lo usa el select para la navegación con flechas. A mano no hace falta. | propuesta |
+| `highlighted` | Lo usa el select para la navegación con flechas. A mano no hace falta. | según el código |
 
 **Usos de hoy que romperían la propuesta:**
 
@@ -90,18 +90,41 @@ celular: queda debajo de los 44 del dedo.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| menú de acciones (⋮) | `large` (56) | `small` (36) | propuesta, falta aprobación |
-| switcher con segunda línea (negocio + dirección) | `large` (56) | `large` (56) | 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>