@ajuarezso/sui-design-system 0.25.0 → 0.25.2

package/docs/sui-datepicker/README.md

@@ -56,7 +56,7 @@ type="date"` · día + franja de entrega → la hoja del checkout.**
 | `showFooter` | `true` (default) | Cancelar/Aplicar: la elección no se guarda hasta confirmar. Úsalo cuando cambiar la fecha recalcula algo caro (un reporte). | guía (ejemplo Approval) |
 | `showFooter` | `false` | Se aplica al tocar el día. Fecha única y nada que recalcular. En `range` no tiene efecto: el rango siempre trae footer. | guía (ejemplo Popover) |
 | `calendars` | `2` (default) | Rango en web: dos meses lado a lado (936 px). | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
-| `calendars` | `1` | Rango en un espacio angosto (columna, modal `medium`). En mobile se fuerza a 1 solo. | guía (Range con un mes) |
+| `calendars` | `1` | Rango en un espacio angosto (columna, modal `medium`, tablet en vertical: los 936 px necesitan ≥ 968 de ancho). En mobile (≤ 767) se fuerza a 1 solo; en tablet hay que pasarlo. | guía (Range con un mes) |
 
 ### `min`, `max`, `markedDates`, `presets`, `placeholder`, `disabled`
 
@@ -93,7 +93,7 @@ Tiene `size` para el campo: `small` (36), `medium` (40, default, el de siempre),
 el mismo alto que `sui-input` y `sui-select` `large`, y **`xlarge` (52)**, el de `sui-input` `xlarge`.
 Con `large` **y siempre en mobile (≤ 767 px)** el panel también crece: **flechas de mes de 40** y
 **Cancelar / Aplicar en `large` (48)**. Con **`xlarge`** todo lo que se toca llega a 44: **días de
-44 × 44** (`sui-day-cell` `large`, gap 4: 7 × 44 + 6 × 4 = 332, entra en 390), **flechas de mes de
+44 × 44** (`sui-day-cell` `large`, gap 4: grilla de 7 × 44 + 6 × 4 = 332, panel de 358 con padding y borde: entra en una pantalla de 390, y dentro de un modal fullscreen solo con `[fullBody]`, ver «Por dispositivo»), **flechas de mes de
 44** (`sui-date-selector` `large`, barra de 52) y **rangos predefinidos de 44** (`sui-period-range`
 `large`). En el teléfono el footer del rango pone el resumen «Rango: …» arriba y los dos botones
 abajo, 50/50.
@@ -112,18 +112,42 @@ campo (y su placeholder) va en 16/24. Con `large` el calendario no cambia (días
 `large`). El resumen del rango sigue en 14.
 
 ```html
-<!-- Web: popover. Mobile: en línea dentro de un sui-modal fullscreen. -->
+<!-- Web: popover. Mobile: en línea dentro de un sui-modal fullscreen con [fullBody]="true"
+     (sin él el body deja ancho − 56 y el panel de 358 no entra; ver «Por dispositivo»). -->
 @if (bp.isMobile()) {
   <sui-datepicker mode="range" size="xlarge" [inline]="true" [calendars]="1" [(value)]="rango" />
 } @else {
-  <sui-datepicker mode="range" placeholder="Elige el período" [(value)]="rango" />
+  <sui-datepicker mode="range" [size]="bp.tactil() ? 'xlarge' : 'medium'"
+                  [calendars]="bp.isTablet() ? 1 : 2"
+                  placeholder="Elige el período" [(value)]="rango" />
 }
 ```
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
 | fecha en un formulario | `xlarge` (días de 44) | `medium` | mobile: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono · web: canon (aprobado por el dueño, 05-10-2026, bloque B1) |
-| filtro de período de un reporte | `xlarge`, en línea dentro de un modal | `medium`, popover | mobile: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono · web: canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| filtro de período de un reporte | `xlarge`, en línea dentro de un modal con `[fullBody]` | `medium`, popover | mobile: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono · web: canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+
+### Por dispositivo (D16)
+
+El datepicker tiene fila propia en D16: los días solo llegan a 44 en `xlarge`, así que todo
+dispositivo táctil va en `xlarge`, también el celular chico.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380) | `xlarge` | **no entra en 360 hoy** (en 375 solo `mode="date"` con `[fullBody]`, por 1 px). La grilla de días mide 332 (7 × 44 + 6 × 4), pero el panel mide **358** (332 + 2 × 12 de padding + borde). Dentro de un `sui-modal` fullscreen el body deja `ancho − 56` (8 de inset y 20 de padding por lado): 304 en 360. Con `[fullBody]="true"` deja `ancho − 16`: 344 en 360, 359 en 375. En `range` además el panel se fija en `ancho − 32` (328 en 360, 343 en 375) y recorta el domingo. Pendiente: que quepa en 360 es código del DS (gap o padding del calendario), no del README |
+| celular (380–767) | `xlarge` | en línea dentro de un `sui-modal` fullscreen **con `[fullBody]="true"`**: sin él el body deja 334 en 390 y el panel de 358 se sale. Con él quedan 374 en 390. Se fuerza a 1 calendario |
+| tablet táctil (`pointer: coarse`) | `xlarge` | popover. En `mode="date"` el panel mide 368 y entra desde 768. En `range` con 2 calendarios mide 936 (200 + 2 × 368) y necesita ≥ 968 de ancho: un iPad en vertical (820–834) lo recorta, así que va con `[calendars]="1"` (200 + 368 = 568). Los días, flechas y rangos llegan a 44 por el `size`, no por el ancho |
+| computadora (`pointer: fine`) | `medium` | popover. Ojo: con `medium` el componente pinta Cancelar / Aplicar en `small` (36) por dentro (`footerButtonSize()`); D16 no deja nada en `small`, pero cambiarlo es código del DS, no del README |
+
+Ultrawide: igual que la computadora; el rango ya ocupa sus dos meses (936 px) y el espacio extra no
+agranda nada. Fuente: D16, dueño 05-10-2026.
+
+En master-pedidos: `[size]="bp.tactil() ? 'xlarge' : 'medium'"` (no hay helper que dé
+`xlarge`/`medium`). `bp.isMobile()` decide solo si va en línea o en popover, que es cuestión de
+ancho, no de puntero. En `range` fuera del celular, `[calendars]="bp.isTablet() ? 1 : 2"`: el
+componente solo baja a 1 calendario por su cuenta hasta 767. `isTablet()` es hasta 1024, un poco
+conservador (en 1024 los dos meses sí entran), pero es la señal que tiene el servicio.
 
 ## «No usar»: por qué no hoy y cuándo sí
 
@@ -198,6 +222,49 @@ interface DatepickerPreset { id: DatepickerPresetId; label: string; resolve: (ho
 - Las piezas internas son `sui-date-selector`, `sui-day-label`, `sui-day-cell` y
   `sui-period-range`: no se arman a mano.
 
+## Bien y mal
+
+Una fecha suelta en un formulario
+
+```html
+<!-- ❌ mal: un popover de 368 px para un campo «Válido hasta» (Cuándo no) -->
+<sui-form-label label="Válido hasta" />
+<sui-datepicker [min]="hoy" [(value)]="venceEl" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-input type="date" label="Válido hasta" [size]="bp.sizeControl()" [(value)]="venceEl" />
+```
+
+Período en el celular
+
+```html
+<!-- ❌ mal: en el celular el popover no es hoja (Trampas), y en medium los días miden 40
+     (Tamaño en mobile y en web) -->
+<sui-datepicker mode="range" [(value)]="rango" />
+```
+
+```html
+<!-- ✅ bien: [fullBody] porque el panel xlarge mide 358 y el body con padding deja 334 en 390.
+     En < 380 todavía no entra (pendiente del DS, ver «Por dispositivo») -->
+<sui-modal [(open)]="eligiendo" [fullscreen]="true" [fullBody]="true" title="Elige el período">
+  <sui-datepicker mode="range" size="xlarge" [inline]="true" [calendars]="1" [(value)]="rango" />
+</sui-modal>
+```
+
+Rango que se aplica al tocar
+
+```html
+<!-- ❌ mal: en range el footer sale igual; showFooter no tiene efecto (Trampas) -->
+<sui-datepicker mode="range" [showFooter]="false" [(value)]="rango" />
+```
+
+```html
+<!-- ✅ bien: el rango siempre confirma con Aplicar; [showFooter]="false" es solo para mode="date" -->
+<sui-datepicker mode="range" [max]="hoy" [(value)]="rango" />
+```
+
 ## Ejemplo
 
 ```html

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

@@ -61,8 +61,8 @@ de 44 px en mobile (gap 4) y 48 en web (gap 8) con `medium`, y 48 (gap 4) con `l
 
 | size | celda | texto | uso | fuente |
 |---|---|---|---|---|
-| `large` | **44 × 44** | 16/24 | mobile: lo que se toca llega a 44 (en 390 entran 7 × 44 con gap 4 = 332) | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono |
-| `medium` (default) | 40 × 40 | 14/20 | web | medido (Figma 437:174) |
+| `large` | **44 × 44** | 16/24 | celular y tablet táctil: lo que se toca llega a 44 (en 390 entran 7 × 44 con gap 4 = 332) | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono · tablet: D16, dueño 05-10-2026 |
+| `medium` (default) | 40 × 40 | 14/20 | computadora | medido (Figma 437:174) |
 
 Los puntos de hoy y de marcado no cambian con el size.
 
@@ -70,12 +70,31 @@ Los puntos de hoy y de marcado no cambian con el size.
 <!-- La grilla da el paso: gap 4 -->
 <div class="semana" [style.gap.px]="4">
   @for (d of dias(); track d.fecha) {
-    <sui-day-cell [size]="bp.isMobile() ? 'large' : 'medium'" [day]="d.numero" [today]="d.esHoy"
+    <sui-day-cell [size]="bp.tactil() ? 'large' : 'medium'" [day]="d.numero" [today]="d.esHoy"
                   [marked]="d.conTurno" (clicked)="elegir(d)" />
   }
 </div>
 ```
 
+### Por dispositivo (D16)
+
+La celda se toca: sigue «lo que se toca» de D16. Su size grande es `large` (44), el único que llega
+al piso del dedo.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380) | `large` | interino: D16 pide `medium` con área de 44, pero el DS todavía no la estira; 7 × 44 + 6 × 4 = 332 entra en 360 |
+| celular (380–767) | `large` | gap 4 en la grilla |
+| tablet táctil (`pointer: coarse`) | `large` | Apple pide 44 también en iPad |
+| computadora (`pointer: fine`) | `medium` | 40 × 40, el de Figma |
+
+Ultrawide: igual que la computadora. Fuente: D16, dueño 05-10-2026.
+
+En master-pedidos: `[size]="bp.tactil() ? 'large' : 'medium'"`. `bp.sizeControl()` devuelve lo
+mismo (`'large' | 'medium'`), pero está documentado para botón y campo; la expresión deja claro de
+dónde sale. Si la grilla va con `sui-day-label`, la cabecera también tiene que medir 44 en `large`
+(ver su README).
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -119,6 +138,44 @@ Los puntos de hoy y de marcado no cambian con el size.
   completa. Hoy lleva `aria-current="date"` y, en `type="range"`, `start`/`end` salen
   `aria-selected` (04-10-2026).
 
+## Bien y mal
+
+El día de la grilla
+
+```html
+<!-- ❌ mal: day es el número, no una fecha; la celda no sabe qué día es (Trampas) -->
+<sui-day-cell [day]="d.fecha" [today]="true" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-day-cell [day]="d.fecha.getDate()" [today]="d.esHoy" [size]="bp.tactil() ? 'large' : 'medium'" />
+```
+
+Días del mes vecino que no se eligen
+
+```html
+<!-- ❌ mal: outOfMonth solo los apaga; se pueden tocar igual (Trampas) -->
+<sui-day-cell [day]="d.numero" [outOfMonth]="true" (clicked)="elegir(d)" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-day-cell [day]="d.numero" [outOfMonth]="true" [disabled]="true" (clicked)="elegir(d)" />
+```
+
+Un día con algo
+
+```html
+<!-- ❌ mal: el lector de pantalla dice «Día 12», sin mes ni qué tiene (canon B5) -->
+<sui-day-cell day="12" [marked]="true" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-day-cell day="12" [marked]="true" ariaLabel="Domingo 12 de octubre, con pedidos" />
+```
+
 ## Ejemplo
 
 ```html

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

@@ -38,17 +38,28 @@ 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

@@ -45,7 +45,9 @@ Story: [Atoms/Divider/Divider](https://sui-design-system.web.app/?path=/docs/ato
 | `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) | 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"`.
 
@@ -61,11 +63,17 @@ Criterio de la app: **D16, tamaño por dispositivo** (canon, dueño, 05-10-2026)
 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. Hoy la app corta con
-`BreakpointsService.isMobile()` (≤ 767 px), que todavía no mira el puntero ni los 380 px.
+`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
 
@@ -89,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

@@ -56,7 +56,7 @@ Regla corta: **modal o sheet → sui-modal con title · panel lateral de web →
 | `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) |
+| `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 |
 
@@ -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

@@ -59,6 +59,14 @@ de 44 px del dedo.
 |---|---|---|---|
 | 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
 
 <!-- api:inicio -->
@@ -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>