@ajuarezso/sui-design-system 0.24.1 → 0.25.1

package/docs/sui-modal/README.md

@@ -38,7 +38,7 @@ es en desktop** (`size`) y **qué cabecera lleva** (`iconVariant` / `headerIcon`
 > trae el header (nodo 466:4778, tipos Basic / Left Icon / Error / Warning / Success / Info en
 > tamaños Small 56 y Medium 80), el footer (472:566), los Status Modals (480:1372) y el overlay
 > (480:2474). No trae do/don't. Lo marcado **canon** sale de `master-pedidos/CLAUDE.md` y
-> `docs/CANON-SUI.md`; lo marcado **propuesta** falta aprobar.
+> `docs/CANON-SUI.md` o de la aprobación del dueño del 05-10-2026; lo marcado **propuesta** falta aprobar.
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app`: 128 modales, sin contar prototipos ni
 > vitrinas (`master-preview`, `master-prototipos`, `mockup-sheets-*`, `dx/*`, `master-rutina`,
@@ -93,10 +93,10 @@ pantalla entera (fullscreen). Elegirlo es una decisión de desktop.
 
 | size | cuándo | ejemplo real de la app | fuente |
 |---|---|---|---|
-| `small` (400) | confirmación o aviso: título, una o dos frases y los botones | `pages/customer/order-tracking/order-tracking.html:756` | propuesta |
-| `medium` (440, default) | formulario corto (hasta ~5 campos) o un detalle simple | `pages/discounts/discounts.html:122` («Crear descuento») | propuesta |
-| `large` (560) | detalle con tabla o imagen: comprobantes, el detalle de un pedido | `pages/orders/orders.html:146` · `pages/super-admin/master-drivers/master-drivers.html:685` | propuesta |
-| `xlarge` (720) | mapa, formularios de dos columnas, listas largas de opciones | `components/address-picker-modal/address-picker-modal.html:1` · `pages/customer/checkout/checkout.html:1` | propuesta |
+| `small` (400) | confirmación o aviso: título, una o dos frases y los botones | `pages/customer/order-tracking/order-tracking.html:756` | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `medium` (440, default) | formulario corto (hasta ~5 campos) o un detalle simple | `pages/discounts/discounts.html:122` («Crear descuento») | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `large` (560) | detalle con tabla o imagen: comprobantes, el detalle de un pedido | `pages/orders/orders.html:146` · `pages/super-admin/master-drivers/master-drivers.html:685` | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `xlarge` (720) | mapa, formularios de dos columnas, listas largas de opciones | `components/address-picker-modal/address-picker-modal.html:1` · `pages/customer/checkout/checkout.html:1` | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
 
 Hoy: 45 `small`, 63 `medium` (50 explícitos + 13 por default), 5 `large`, 14 `xlarge` y 1 que cambia según el caso.
 
@@ -104,22 +104,22 @@ Hoy: 45 `small`, 63 `medium` (50 explícitos + 13 por default), 5 `large`, 14 `x
 
 | input | qué dibuja | cuándo | fuente |
 |---|---|---|---|
-| ninguno (Basic) | solo título (+ descripción) y la X | el caso normal: un formulario o un detalle | propuesta |
-| `iconVariant` | círculo de color con el ícono del estado (`info`, `success`, `warning`, `error`) | el modal **es** un aviso de ese tipo: «Eliminar usuario» (`error`), «Estás a punto de cambiar de local» (`warning`) | propuesta |
-| `headerIcon` | círculo gris con un ícono propio (Remix) | identifica **qué se está editando**: `edit-line`, `user-add-line`, `time-line`. Gana sobre `iconVariant` | propuesta |
+| ninguno (Basic) | solo título (+ descripción) y la X | el caso normal: un formulario o un detalle | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `iconVariant` | círculo de color con el ícono del estado (`info`, `success`, `warning`, `error`) | el modal **es** un aviso de ese tipo: «Eliminar usuario» (`error`), «Estás a punto de cambiar de local» (`warning`) | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `headerIcon` | círculo gris con un ícono propio (Remix) | identifica **qué se está editando**: `edit-line`, `user-add-line`, `time-line`. Gana sobre `iconVariant` | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 | `statusAlignment` | quita el header y pone ícono + texto dentro del body (`vertical` centrado, `horizontal` en fila) | pantallas de resultado («Pedido enviado») o confirmaciones con más peso visual. Requiere `iconVariant` o `headerIcon`. 0 usos hoy | según el Figma del DS (Status Modals) |
 
 **Usos de hoy que rompen el copy canon** (CANON-SUI: títulos en sentence case):
-`pages/super-admin/super-admin.html:353` «Suspender Negocio», `:471` «Evidencia de Pago»,
-`:487` «Rechazar Solicitud», `:557` «Rechazar Promoción».
+`pages/super-admin/super-admin.html:364` «Suspender Negocio», `:484` «Evidencia de Pago»,
+`:501` «Rechazar Solicitud», `:572` «Rechazar Promoción» (líneas al 06-10-2026).
 
 ### Cerrar
 
 | input | default | cuándo cambiarlo | fuente |
 |---|---|---|---|
-| `closeOnBackdrop` | `true` | `false` si el modal tiene un formulario a medio llenar o una operación en curso (`[closeOnBackdrop]="!guardando()"`): un toque fuera no debe tirar lo escrito. Hoy 42 en `false` y 5 dinámicos | propuesta |
-| `showClose` | `true` | `false` solo cuando la persona **tiene** que elegir un botón (actualización obligatoria, oferta de pedido al repartidor). Hoy 8 | propuesta |
-| `closeOnEscape` | `true` | casi nunca: es la salida por teclado en desktop | propuesta |
+| `closeOnBackdrop` | `true` | `false` si el modal tiene un formulario a medio llenar o una operación en curso (`[closeOnBackdrop]="!guardando()"`): un toque fuera no debe tirar lo escrito. Hoy 42 en `false` y 5 dinámicos | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
+| `showClose` | `true` | `false` solo cuando la persona **tiene** que elegir un botón (actualización obligatoria, oferta de pedido al repartidor). Hoy 8 | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
+| `closeOnEscape` | `true` | `false` solo junto con `showClose` `false`, o mientras corre una operación; el resto, `true`: es la salida por teclado en desktop | canon (aprobado por el dueño, 05-10-2026, bloque B13) |
 
 ### `fullBody` — contenido a sangre
 
@@ -140,6 +140,17 @@ interno lo pone quien proyecta. Canon (CLAUDE.md, 2026-07-21).
 
 El modal **no tiene un size para mobile**: la decisión de mobile es `fullscreen`.
 
+### Por dispositivo (D16)
+
+No aplica: `size` es el **ancho del modal centrado** y lo elige el contenido (tabla de arriba), no
+el dispositivo; a 768 px o menos ni se usa, porque el modal toma el ancho completo (centrado o
+fullscreen). En la tablet de 820 o 1024 px el modal se ve centrado con su `size`, igual que en la
+computadora y el ultrawide. Lo que se toca adentro lleva su propio D16: el pie va `large` en todos
+los dispositivos (D2) y los campos del body siguen la fila de `input`.
+
+En master-pedidos: sin helper para el modal; `<sui-modal-footer>` sin `buttonSize` (ya es
+`large`) y los campos del body con `[size]="bp.sizeControl()"`.
+
 ## API
 
 <!-- api:inicio -->
@@ -201,6 +212,54 @@ pinta una sombra sobre el footer).
 - `(closed)` se emite **después** de cerrar, por cualquier vía (X, backdrop, Escape o
   `open = false`). Para limpiar estado, escúchalo ahí y no en el botón.
 
+## Bien y mal
+
+Confirmación de sí o no
+
+```html
+<!-- ❌ mal: sin [fullscreen]="false", el 'auto' lo abre a pantalla completa en la app (components/confirm-dialog/confirm-dialog.html:1) -->
+<sui-modal [(open)]="open" size="small"
+  [title]="title()" [description]="description()" [closeOnBackdrop]="false">
+  <sui-modal-footer slot="footer" secondaryButton="Cancelar" primaryButton="Confirmar" />
+</sui-modal>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-modal [(open)]="open" size="small" [fullscreen]="false"
+  [title]="title()" [description]="description()" [closeOnBackdrop]="false">
+  <sui-modal-footer slot="footer" secondaryButton="Cancelar" primaryButton="Confirmar" />
+</sui-modal>
+```
+
+Pie con los botones
+
+```html
+<!-- ❌ mal: sin slot="footer" el pie cae dentro del body: doble padding y scrollea con el contenido -->
+<sui-modal [(open)]="creando" title="Crear descuento">
+  <sui-modal-footer secondaryButton="Cancelar" primaryButton="Crear descuento" />
+</sui-modal>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-modal [(open)]="creando" title="Crear descuento">
+  <sui-modal-footer slot="footer" secondaryButton="Cancelar" primaryButton="Crear descuento" />
+</sui-modal>
+```
+
+Título del modal
+
+```html
+<!-- ❌ mal: título en Title Case; el canon es sentence case (pages/super-admin/super-admin.html:364) -->
+<sui-modal [(open)]="suspendiendo" iconVariant="error" title="Suspender Negocio" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-modal [(open)]="suspendiendo" iconVariant="error" title="Suspender negocio" />
+```
+
 ## Ejemplo
 
 ```html

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

@@ -49,8 +49,8 @@ peso de los botones** de toda la app: no solo de los modales.
 | acciones | cómo | ejemplo real de la app | fuente |
 |---|---|---|---|
 | **1** | solo `primaryButton`. Queda a la derecha, no a todo el ancho (para eso, `[stretch]="true"`) | `pages/super-admin/master-sonidos-push/master-sonidos-push.html:146` («Cerrar») | canon (CLAUDE.md) |
-| **2** | `secondaryButton` + `primaryButton`. El componente los pone en orden: secundario a la izquierda | `pages/driver/driver-dashboard/driver-dashboard.html:1574` («Cancelar» / «Enviar») | canon (CLAUDE.md) |
-| **3+** | **no hay tercer botón.** La tercera acción va como `sui-link-button` en el slot izquierdo | `components/add-product-modal/add-product-modal.html:332` («Vista previa») | canon (CLAUDE.md) |
+| **2** | `secondaryButton` + `primaryButton`. El componente los pone en orden: secundario a la izquierda | `pages/driver/driver-dashboard/driver-dashboard.html:1691` («Cancelar» / «Enviar») | canon (CLAUDE.md) |
+| **3+** | **no hay tercer botón.** La tercera acción va como `sui-link-button` en el slot izquierdo | `components/add-product-modal/add-product-modal.html:334` («Vista previa») | canon (CLAUDE.md) |
 
 ### El slot izquierdo
 
@@ -58,7 +58,7 @@ peso de los botones** de toda la app: no solo de los modales.
 |---|---|---|---|
 | `sui-link-button` | la tercera acción, de menos peso | `pages/central/central-gastos/central-gastos.html:97` | canon (CLAUDE.md) |
 | `sui-checkbox-label` / `sui-switch-label` | una opción que acompaña la confirmación («No volver a preguntar») | (sin uso hoy) | según el Figma del DS |
-| texto | un dato que se lee antes de confirmar («Llega a las 8:30») | `components/add-product-modal/add-product-modal.html:359` | según el Figma del DS |
+| texto | un dato que se lee antes de confirmar («Llega a las 8:30») | `components/add-product-modal/add-product-modal.html:361` | según el Figma del DS |
 | `sui-counter-input` (stepper) | elegir cantidad junto al botón de agregar | `pages/customer/restaurant-menu/restaurant-menu.html:461` | según el Figma del DS |
 
 Con `stretch` y algo en el slot izquierdo, se reparte 50 % slot / 50 % botones.
@@ -79,17 +79,19 @@ Con `stretch` y algo en el slot izquierdo, se reparte 50 % slot / 50 % botones.
 | `false` (default) | modal centrado en desktop: botones a la derecha, del ancho de su texto | según el Figma del DS (tipo Basic) |
 
 El componente **no tiene `@media`**: `stretch` se ve igual en las dos plataformas. Hoy 95 de 121
-lo pasan fijo en `true`, así que también en desktop los botones van 50/50. Propuesta:
-`[stretch]="bp.isMobile()"` para que desktop vuelva al tipo Basic.
+lo pasan fijo en `true`, así que también en desktop los botones van 50/50. Propuesta, falta
+aprobación: `[stretch]="bp.isMobile()"` para que desktop vuelva al tipo Basic.
 
 **Usos de hoy que rompen el canon:**
 
-- **3 footers con un solo botón en `secondaryButton`** → pasarlo a `primaryButton`:
-  `pages/driver/driver-dashboard/driver-dashboard.html:1272`, `:1419` y `:1555` (los tres
-  «Cerrar»). Contraargumento a decidir: en un modal que solo informa, un «Cerrar» relleno de
+- **4 footers con un solo botón en `secondaryButton`** → pasarlo a `primaryButton`:
+  `pages/driver/driver-dashboard/driver-dashboard.html:1390`, `:1537` y `:1673` (los tres
+  «Cerrar»), y `pages/central/central-gastos/central-gastos.html:97` cuando el gasto está
+  anulado (el primario pasa a `null` y queda solo «Cerrar»). Contraargumento a decidir: en un modal que solo informa, un «Cerrar» relleno de
   naranja grita más que el contenido; si se prefiere así, hay que escribirlo como excepción.
 - **1 pie hecho a mano** con dos `sui-button` en un `<div slot="footer">` →
-  `sui-modal-footer`: `components/copy-text-dialog/copy-text-dialog.html:15`.
+  `sui-modal-footer`: `components/copy-text-dialog/copy-text-dialog.html:16`. Al migrarlo se
+  pierde el ícono del botón «Copiar» (`file-copy-line` → `check-line`): ver «Bien y mal».
 - Botones `sui-button` proyectados dentro del footer: 0.
 
 ## Tamaño en mobile y en web
@@ -97,13 +99,30 @@ lo pasan fijo en `true`, así que también en desktop los botones van 50/50. Pro
 | uso | mobile | web | fuente |
 |---|---|---|---|
 | botones | `large` (48) | `large` (48) | canon (CLAUDE.md, decisión de marca 2026-07-23; el Figma dibuja `small`) |
-| reparto | `[stretch]="true"`, 50/50 | botones a la derecha | canon en mobile (CANON-SUI §6.3), propuesta en web |
+| reparto | `[stretch]="true"`, 50/50 | botones a la derecha | canon en mobile (CANON-SUI §6.3), propuesta en web (falta aprobación) |
 | borde de arriba | sin borde en el modal a pantalla completa | con borde | componente (`sui-modal.scss`) |
 
 `buttonSize` existe para un caso puntual, no para «achicar porque se ve grande». Hoy 0 usos.
 
-`CANON-SUI.md` §6.3 todavía dice «botones `small`»: quedó viejo frente a la decisión del
-2026-07-23 y al default del componente.
+`CANON-SUI.md` §6.3 ya dice lo mismo: footer de modal con botones `large` (48), por encima del
+Figma que dibuja `small`.
+
+### Por dispositivo (D16)
+
+D16 lo nombra en la fila de `button`: **footer de modal, `large` siempre** (D2). No baja a
+`medium` en la computadora como los botones sueltos.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380) | `large` | ya llega a 48, no necesita el área de 44 aparte |
+| celular (380–767) | `large` | |
+| tablet táctil | `large` | |
+| computadora | `large` | D2 manda sobre la regla de `medium` en la computadora |
+
+Ultrawide: igual, `large`. Fuente: D16, dueño 05-10-2026 (fila `button`) y D2.
+
+En master-pedidos: no se pasa `buttonSize`; `null` ya resuelve a `large`. Nunca
+`[buttonSize]="bp.sizeControl()"`: en la computadora bajaría a `medium`.
 
 ## API
 
@@ -154,6 +173,61 @@ Slot: `<ng-content>` sin selector → el bloque **izquierdo**.
 - Dentro de `sui-modal` el footer recibe una sombra arriba mientras el body tiene más contenido
   para scrollear (`scrollActive`).
 
+## Bien y mal
+
+Un modal que solo informa
+
+```html
+<!-- ❌ mal: la única acción va en el secundario (pages/driver/driver-dashboard/driver-dashboard.html:1390) -->
+<sui-modal-footer slot="footer" secondaryButton="Cerrar"
+  (secondaryClick)="modalTope.set(false)" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-modal-footer slot="footer" primaryButton="Cerrar"
+  (primaryClick)="modalTope.set(false)" />
+```
+
+Copiar un texto y cerrar
+
+```html
+<!-- ❌ mal: pie hecho a mano con dos sui-button (components/copy-text-dialog/copy-text-dialog.html:16) -->
+<div slot="footer">
+  <sui-button variant="stroke" color="neutral" size="large" (click)="close()">{{ closeLabel() }}</sui-button>
+  <sui-button variant="filled" color="primary" size="large" (click)="onCopy()">
+    <sui-icon data-slot="start" [name]="copied() ? 'check-line' : 'file-copy-line'" [size]="16" />
+    {{ copied() ? copiedLabel() : copyLabel() }}
+  </sui-button>
+</div>
+```
+
+```html
+<!-- ✅ bien: el label sigue al estado copiado -->
+<sui-modal-footer slot="footer" [secondaryButton]="closeLabel()"
+  [primaryButton]="copied() ? copiedLabel() : copyLabel()"
+  (secondaryClick)="close()" (primaryClick)="onCopy()" />
+```
+
+Lo que se pierde: el ícono. `SuiFooterButtonConfig` solo acepta `label`, `disabled` y `color`, así
+que el footer no dibuja el `sui-icon` que hoy pasa de `file-copy-line` a `check-line`. El aviso de
+«copiado» sigue llegando por el label («Copiar» → «Copiado»). Conservar el ícono pide un `icon` en
+`SuiFooterButtonConfig`, que hoy no existe (**propuesta**, sin decidir); no es razón para volver al
+pie a mano.
+
+Botones del footer en la computadora
+
+```html
+<!-- ❌ mal: D16 deja el footer en large siempre (D2); esto lo baja a medium en la computadora -->
+<sui-modal-footer slot="footer" secondaryButton="Cancelar" primaryButton="Guardar"
+  [buttonSize]="bp.sizeControl()" />
+```
+
+```html
+<!-- ✅ bien: sin buttonSize, resuelve a large -->
+<sui-modal-footer slot="footer" secondaryButton="Cancelar" primaryButton="Guardar" />
+```
+
 ## Ejemplo
 
 ```html

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

@@ -51,7 +51,7 @@ componente **no la aplica solo**: si lo usas suelto, elige tú.
 |---|---|---|---|
 | ninguno | Basic: solo texto | el caso normal | según el Figma del DS |
 | `iconVariant` | ícono del estado en un círculo de su color | el panel **es** un aviso de error, advertencia, éxito o información | propuesta |
-| `icon` | ícono propio (Remix) en un círculo gris | identifica qué se edita (`edit-line`, `user-add-line`). Gana sobre `iconVariant` | propuesta |
+| `icon` | ícono propio (Remix) en un círculo gris | identifica qué se edita (`edit-line`, `user-add-line`). Gana sobre `iconVariant` | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 
 ## Tamaño en mobile y en web
 
@@ -63,6 +63,17 @@ mobile y en web. La X mide 24 px en las dos (`sui-compact-button` `large`).
 | con descripción | `medium` | `medium` | según el Figma del DS |
 | solo título | `small` | `small` | según el Figma del DS |
 
+### Por dispositivo (D16)
+
+No aplica: el `size` lo decide si hay `description` (56 solo título, 80 con descripción), no el
+dispositivo, y D16 deja fuera este `small` porque cambia el layout y no la escala. Es igual en el
+celular chico, el celular, la tablet, la computadora y el ultrawide. La X es un
+`sui-compact-button` interno de 24 a la vista; su área de 44 se prende solo bajo 768 px
+(`sui-modal-header.scss:119`), así que en la tablet táctil todavía no la tiene: eso espera el
+mixin `sui-tactil` de la propuesta de D16, **pendiente** del sí del dueño.
+
+En master-pedidos: `[size]="description ? 'medium' : 'small'"`, nunca una señal de `bp`.
+
 ## API
 
 <!-- api:inicio -->
@@ -98,6 +109,51 @@ mobile y en web. La X mide 24 px en las dos (`sui-compact-button` `large`).
   en `aria-labelledby`.
 - El host borra el atributo `title` nativo (sin tooltip gris del navegador).
 
+## Bien y mal
+
+La cabecera de un modal
+
+```html
+<!-- ❌ mal: sui-modal ya dibuja su header; quedan dos cabeceras -->
+<sui-modal [(open)]="abierto" [fullscreen]="true">
+  <sui-modal-header title="Editar producto" icon="edit-line" (closed)="abierto.set(false)" />
+</sui-modal>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-modal [(open)]="abierto" [fullscreen]="true" title="Editar producto" headerIcon="edit-line">
+</sui-modal>
+```
+
+Cabecera con descripción
+
+```html
+<!-- ❌ mal: con description va medium; en small el ícono pasa a plano de 24 -->
+<sui-modal-header size="small" title="Filtros" description="Elige qué pedidos ver" icon="filter-line" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-modal-header size="medium" title="Filtros" description="Elige qué pedidos ver" icon="filter-line" />
+```
+
+Un panel propio que hace de diálogo
+
+```html
+<!-- ❌ mal: sin titleId el diálogo no tiene nombre accesible -->
+<section class="panel" role="dialog">
+  <sui-modal-header size="small" title="Filtros" (closed)="cerrarPanel()" />
+</section>
+```
+
+```html
+<!-- ✅ bien -->
+<section class="panel" role="dialog" aria-labelledby="filtros-titulo">
+  <sui-modal-header size="small" title="Filtros" titleId="filtros-titulo" (closed)="cerrarPanel()" />
+</section>
+```
+
 ## Ejemplo
 
 ```html

package/docs/sui-modal-sheet/README.md

@@ -29,7 +29,7 @@ Story: [Organisms/Modal/Modal Sheet](https://sui-design-system.web.app/?path=/do
 
 > **No está en la guía del DS: es extensión de SUI**, inspirada en el `ion-modal` en modo sheet
 > de Ionic y en las hojas de Apple Maps. No hay Figma que la legisle. Lo marcado **canon** sale
-> de `master-pedidos/CLAUDE.md`; lo demás es **propuesta** sacada del uso real.
+> de `master-pedidos/CLAUDE.md` o de la aprobación del dueño (05-10-2026); lo demás es **propuesta** sacada del uso real.
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app`: 13 sheets, sin contar prototipos ni
 > vitrinas (`master-preview`, `master-prototipos`, `mockup-sheets-*`, `dx/*`, `master-rutina`,
@@ -47,12 +47,13 @@ conviene copiar una de las dos en vez de inventar otra.
 
 | patrón | `breakpoints` | `initialBreakpoint` | `backdropBreakpoint` | cuándo | ejemplo real de la app | fuente |
 |---|---|---|---|---|---|---|
-| **Sobre un mapa** | `[0.25, 0.5, 0.7, 1]` (sin `0`) | `0.5` | `1` | el seguimiento: el mapa se usa a cualquier altura y la hoja no se puede cerrar | `pages/customer/order-tracking/order-tracking.html:130` · `pages/driver/driver-order-detail/driver-order-detail.html:60` | propuesta |
-| **Hoja de lectura** | `[0, 0.92]` | `0.92` | `0` | una lista o detalle que se abre y se cierra deslizando, con el fondo apagado | `pages/customer/order-tracking/order-tracking.html:809` (reseñas) · `pages/customer/checkout/checkout.html:448` (hora) | propuesta |
+| **Sobre un mapa** | `[0.25, 0.5, 0.7, 1]` (sin `0`) | `0.5` | `1` | el seguimiento: el mapa se usa a cualquier altura y la hoja no se puede cerrar | `pages/customer/order-tracking/order-tracking.html:139` · `pages/driver/driver-order-detail/driver-order-detail.html:60` | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| **Hoja de lectura** | `[0, 0.92]` | `0.92` | `0` | una lista o detalle que se abre y se cierra deslizando, con el fondo apagado | `pages/customer/order-tracking/order-tracking.html:836` (reseñas) · `pages/customer/checkout/checkout.html:449` (hora, con tope `0.96`) | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 
-Hoy: 4 «sobre un mapa» (más 2 variantes con alturas propias: `pages/envios/envios.html:578` y
-`pages/customer/viaje/viaje.html:24`), 5 hojas de lectura en `0.92`–`0.96`, 2 en `[0, 1]` y 1 en
-`[0, 0.6, 0.95]`.
+Hoy: 3 «sobre un mapa» (`order-tracking.html:139`, `driver-order-detail.html:60` y
+`pages/super-admin/master-map-overview/master-map-overview.html:35`), más 2 variantes con alturas
+propias (`pages/envios/envios.html:584` y `pages/customer/viaje/viaje.html:30`), 5 hojas de
+lectura en `0.92`–`0.96`, 2 en `[0, 1]` y 1 en `[0, 0.6, 0.95]`. Suman los 13.
 
 | input | regla | fuente |
 |---|---|---|
@@ -60,14 +61,15 @@ Hoy: 4 «sobre un mapa» (más 2 variantes con alturas propias: `pages/envios/en
 | `initialBreakpoint` | Tiene que estar en `breakpoints`. | componente |
 | `backdropBreakpoint` | `0` = fondo apagado desde que abre. `1` = **nunca hay backdrop**: el mapa de atrás se toca siempre. | componente |
 | tope en las hojas de lectura | `0.92`, no `1`: deja ver arriba un borde de la pantalla de atrás, que es lo que dice «esto es una hoja». | propuesta |
-| `showHandle` | Déjalo en `true` siempre que la hoja se arrastre. Hoy nadie lo apaga. | propuesta |
+| `showHandle` | Déjalo en `true` siempre que la hoja se arrastre. Hoy nadie lo apaga. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 | `fullBody` | Solo para contenido a sangre (una foto, un mapa dentro de la hoja). | canon (CLAUDE.md, 2026-07-21) |
 
 **Usos de hoy a revisar:**
 
-- `pages/customer/viaje/viaje.html:24` reabre la hoja en `(closed)` (`hojaAbierta.set(true)`)
+- `pages/customer/viaje/viaje.html:36` reabre la hoja en `(closed)` (`hojaAbierta.set(true)`)
   para que no se pueda cerrar. Sin `0` en `breakpoints` y con `[closeOnBackdrop]="false"` ya no se
-  cierra; el reabrir sobra o tapa otro caso.
+  cierra con el dedo ni con el fondo; el caso que tapa es Escape (`closeOnEscape` sigue en `true`).
+  Con `[closeOnEscape]="false"` el reabrir sobra.
 - 2 footers de modal metidos en hojas: van sin `slot` (no hay slot de footer). Está bien, pero el
   botón scrollea con el contenido: `pages/customer/checkout/checkout.html:490`,
   `pages/super-admin/master-sonidos-push/master-sonidos-push.html:146`.
@@ -86,11 +88,22 @@ El sheet **no tiene `size`**. Mide lo que mide su contenido, con tope en el brea
 
 **El sheet no se acota en desktop.** La app lo arregla con CSS propio, cinco reglas en cuatro archivos:
 `components/store-ratings-modal/store-ratings-modal.scss:81`,
-`pages/driver/movimientos/movimientos-sheet.scss:24`,
-`pages/driver/driver-order-detail/driver-order-detail.scss:1028` y
-`pages/customer/order-tracking/order-tracking.scss:1175` y `:1238`, todos a 560 px. Propuesta:
+`components/movimientos-saldo/movimientos-saldo-sheet.scss:25`,
+`pages/driver/driver-order-detail/driver-order-detail.scss:1096` (las tres a 560 px) y
+`pages/customer/order-tracking/order-tracking.scss:1175` y `:1238` (a 480 px). Propuesta:
 que el DS traiga ese tope (`max-width` desde 768 px, centrado) y se borren esos parches.
 
+### Por dispositivo (D16)
+
+No aplica: el sheet **no tiene `size`**; mide lo que mide su contenido y se configura con alturas
+(`breakpoints`), no con un tamaño. Es igual en el celular chico, el celular, la tablet táctil, la
+computadora y el ultrawide. El tamaño de lo que va adentro (botones, campos) sigue su propia
+fila de D16. Lo único que cambia por dispositivo es el ancho desde 768 px, y eso es P21
+(**pendiente**: acotarlo a 560 en el DS o dejar los parches) y no se decide aquí.
+
+En master-pedidos: sin `[size]`; en desktop, cuando hay sitio, la pantalla puede mostrar el
+contenido en un panel en vez de la hoja (`pages/customer/viaje/viaje.html:25`, con `@if (escritorio())`).
+
 ## API
 
 <!-- api:inicio -->
@@ -145,6 +158,55 @@ Slot: un solo `<ng-content>`, el body. No hay header ni footer.
   ejemplo para centrarlo en desktop) sin romper el arrastre.
 - Pide ocultar la barra inferior de la app por `SUI_NAVBAR_VISIBILITY`, igual que `sui-modal`.
 
+## Bien y mal
+
+Una hoja que no se puede cerrar
+
+```html
+<!-- ❌ mal: la reabre en (closed) para tapar el cierre (pages/customer/viaje/viaje.html:36) -->
+<sui-modal-sheet [(open)]="hojaAbierta" [breakpoints]="[0.35, 0.6, 0.92]"
+  [backdropBreakpoint]="1" [closeOnBackdrop]="false"
+  (closed)="hojaAbierta.set(true)">
+```
+
+```html
+<!-- ✅ bien: sin 0 en breakpoints y sin Escape, no hay cierre que tapar -->
+<sui-modal-sheet [(open)]="hojaAbierta" [breakpoints]="[0.35, 0.6, 0.92]"
+  [backdropBreakpoint]="1" [closeOnBackdrop]="false" [closeOnEscape]="false">
+```
+
+Un formulario que hay que terminar
+
+```html
+<!-- ❌ mal: un deslizón cierra la hoja y se pierde lo escrito -->
+<sui-modal-sheet [(open)]="editando" [breakpoints]="[0, 0.92]" [initialBreakpoint]="0.92">
+  <sui-input label="Nombre del local" [(value)]="nombre" />
+</sui-modal-sheet>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-modal [(open)]="editando" [fullscreen]="true" title="Editar local">
+  <sui-input label="Nombre del local" [(value)]="nombre" />
+</sui-modal>
+```
+
+El margen del contenido
+
+```html
+<!-- ❌ mal: el body ya trae 0 20px 20px; con el padding propio queda doble (el tracking del repartidor) -->
+<sui-modal-sheet [(open)]="abierta" [breakpoints]="[0, 0.92]" [initialBreakpoint]="0.92">
+  <section style="padding: 16px 16px 48px">…</section>
+</sui-modal-sheet>
+```
+
+```html
+<!-- ✅ bien: la sección a 0, el margen lo pone el sheet -->
+<sui-modal-sheet [(open)]="abierta" [breakpoints]="[0, 0.92]" [initialBreakpoint]="0.92">
+  <section>…</section>
+</sui-modal-sheet>
+```
+
 ## Ejemplo
 
 ```html

package/docs/sui-notification/README.md

@@ -53,30 +53,30 @@ toast · bandeja → notification.**
 | `avatar` | `{ initials }` | Solo si no hay foto. Ojo: sale en un círculo negro, **no** con el color por rol (ver Trampas). | según el componente |
 | `avatar` | el isotipo de la app | Avisos **del sistema** sin una persona detrás («Tu plan vence en 3 días»): así toda la bandeja queda en filas iguales. | propuesta |
 | `title` | frase corta | Qué pasó: «Tu pedido llegó». Sentence case, sin punto final. | canon (copy de la app) |
-| `description` | una o dos frases | El detalle que decide si abrirla: «Pollería El Dorado · S/ 42.50». | propuesta |
-| `timestamp` | texto ya formateado | **Siempre**: la hora es lo que hace bandeja a la bandeja. «Hace 5 min», «Ayer 18:40». | canon (bandeja con hora) · formato: propuesta |
+| `description` | una o dos frases | El detalle que decide si abrirla: «Pollería El Dorado · S/ 42.50». | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `timestamp` | texto ya formateado | **Siempre**: la hora es lo que hace bandeja a la bandeja. «Hace 5 min», «Ayer 18:40». | canon (bandeja con hora) · formato relativo: canon (CANON-SUI §5.5, «hace 4 min», nunca «4 min atrás») · «Ayer 18:40»: propuesta |
 | `unread` | `true` | Hasta que la persona la abre. El punto es naranja (el primario de la app). | según el componente |
-| `showMore` | `true` | No usar hoy: el botón ⋮ solo aparece con el mouse encima. **Cuándo sí:** en web, acciones por fila (marcar como leída, archivar). | propuesta |
-| `active` | `true` | No usar hoy: pinta la fila como si tuviera el mouse encima. **Cuándo sí:** navegar la bandeja con las flechas del teclado (ver `sui-notification-footer`). | propuesta |
-| `dismissible` | `true` | No usar hoy: los avisos de la bandeja se leen, no se cierran. **Cuándo sí:** una bandeja donde se borran avisos uno por uno. | propuesta |
+| `showMore` | `true` | No usar hoy: el botón ⋮ solo aparece con el mouse encima. **Cuándo sí:** en web, acciones por fila (marcar como leída, archivar). | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `active` | `true` | No usar hoy: pinta la fila como si tuviera el mouse encima. **Cuándo sí:** navegar la bandeja con las flechas del teclado (ver `sui-notification-footer`). | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `dismissible` | `true` | No usar hoy: los avisos de la bandeja se leen, no se cierran. **Cuándo sí:** una bandeja donde se borran avisos uno por uno. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 
 ### `type` — el cuerpo de la fila
 
 | type | cuándo | fuente |
 |---|---|---|
 | `basic` (default) | Todas las de hoy: título, descripción y hora. | según el componente |
-| `button` | No usar hoy. **Cuándo sí:** una solicitud que se resuelve desde la misma bandeja, con «Rechazar» / «Aprobar» en `slot="actions"` (por ejemplo, una invitación a un equipo). Secundario a la izquierda, primario a la derecha. | propuesta · orden: canon |
-| `message` | No usar hoy. **Cuándo sí:** el aviso trae lo que escribió otra persona (la nota del cliente, un mensaje del repartidor), en la burbuja. | propuesta |
-| `file` | No usar hoy: la app no manda adjuntos. **Cuándo sí:** un comprobante o una boleta adjunta. | propuesta |
+| `button` | No usar hoy. **Cuándo sí:** una solicitud que se resuelve desde la misma bandeja, con «Rechazar» / «Aprobar» en `slot="actions"` (por ejemplo, una invitación a un equipo). Secundario a la izquierda, primario a la derecha. | canon (aprobado por el dueño, 05-10-2026, bloque B2) · orden: canon |
+| `message` | No usar hoy. **Cuándo sí:** el aviso trae lo que escribió otra persona (la nota del cliente, un mensaje del repartidor), en la burbuja. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `file` | No usar hoy: la app no manda adjuntos. **Cuándo sí:** un comprobante o una boleta adjunta. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 
 ### `variant` y `variantStyle` — el modelo de alert
 
 | prop | valor | cuándo | fuente |
 |---|---|---|---|
 | `variant` | `default` (default) | **Siempre** en la bandeja: el tipo lo dice la foto y el texto, no un color. | propuesta |
-| `variant` | `info` · `success` · `warning` · `error` · `feature` | No usar: con tipo y sin foto, la fila se vuelve un alert con borde y sombra. **Cuándo sí:** ninguno; ese aviso es un `sui-alert`. | propuesta (sigue la regla canon) |
+| `variant` | `info` · `success` · `warning` · `error` · `feature` | No usar: con tipo y sin foto, la fila se vuelve un alert con borde y sombra. **Cuándo sí:** ninguno; ese aviso es un `sui-alert`. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 | `variantStyle` | `stroke` (default) | Siempre. Con foto, la fila es plana: sin borde ni sombra. | según el componente |
-| `variantStyle` | `filled` · `light` · `lighter` | No usar: pintan la fila de color, que es lo que hace el alert. **Cuándo sí:** ninguno. | propuesta |
+| `variantStyle` | `filled` · `light` · `lighter` | No usar: pintan la fila de color, que es lo que hace el alert. **Cuándo sí:** ninguno. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 | `showIcon` | `true` (default) | No cambia nada con foto; el ícono de tipo solo sale en el modelo de alert. | según el componente |
 
 ### Slots
@@ -103,7 +103,23 @@ La fila **no tiene `size`**: foto de 40 px, 12 px de relleno, texto de 14.
 | la fila | toda la fila se toca para abrirla: mide 64 px o más | igual | según el componente |
 | ⋮ (`showMore`) | se ve de 24 y se toca en 44 × 44 cuando está visible (foco o fila activa); oculto no recibe toques | 24 px | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono |
 | la X (`dismissible`) | se ve de 20 px; **se toca en 44 × 44** | se ve de 20; se toca en 40 × 40 | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono (antes 40, pedido del dueño 03-10-2026): área táctil invisible, extensión SUI |
-| botones de `type="button"` | los pone quien la usa: `[size]="bp.isMobile() ? 'large' : 'xsmall'"` | `xsmall` | propuesta |
+| botones de `type="button"` | los pone quien la usa: `[size]="bp.sizeControl()"` (`large`, también en la tablet táctil) | `medium` | mobile `large`: canon (decisión del dueño 04-10-2026, piso táctil 44) · web `medium` y tablet táctil `large`: D16, dueño 05-10-2026 (reemplaza el `xsmall` del bloque B1 y el `bp.isMobile()`, que dejaba la tablet en `medium`) |
+
+### Por dispositivo (D16)
+
+Fila `notification` (botones) de la tabla D16 (dueño, 05-10-2026). La fila no tiene `size`: lo que
+cambia por dispositivo son los `sui-button` de `slot="actions"` (`type="button"`), que se tocan.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380 px) | `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 px) | `large` (48) | la X y el ⋮ se tocan en 44 × 44 |
+| tablet táctil (`pointer: coarse`) | `large` (48) | la X queda en 40 × 40 y el ⋮ en 24: su área de 44 se prende solo con `max-width: 767px`. **Pendiente**: el mixin `sui-tactil` (`pointer: coarse`) espera el sí del dueño |
+| computadora (`pointer: fine`) | `medium` (40) | `small`, `xsmall` y `2xsmall` no se usan |
+
+Ultrawide (≥ 1920 px): igual que la computadora, `medium`.
+
+En master-pedidos: `[size]="bp.sizeControl()"` en los `sui-button` de `slot="actions"`.
 
 ## «No usar»: por qué no hoy y cuándo sí
 
@@ -169,6 +185,60 @@ Slots: `[slot=company-logo]`, `[slot=file]`, `[slot=message]`, el contenido libr
   después de la hora («Hace 8 min ∙»).
 - Borra el `title` nativo del host.
 
+## Bien y mal
+
+Botones de una solicitud (`type="button"`)
+
+```html
+<!-- ❌ mal: xsmall (32) no llega al dedo y D16 no usa chicos (vitrina: pages/super-admin/master-preview/_guia-moleculas/avisos.ts:242) -->
+<sui-notification [avatar]="{ initials: 'MR' }" type="button" title="Miguel Rojas te invitó a su equipo">
+  <span slot="actions">
+    <sui-button variant="stroke" color="neutral" size="xsmall">Rechazar</sui-button>
+    <sui-button size="xsmall">Aprobar</sui-button>
+  </span>
+</sui-notification>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-notification [avatar]="{ initials: 'MR' }" type="button" title="Miguel Rojas te invitó a su equipo">
+  <span slot="actions">
+    <sui-button variant="stroke" color="neutral" [size]="bp.sizeControl()">Rechazar</sui-button>
+    <sui-button [size]="bp.sizeControl()">Aprobar</sui-button>
+  </span>
+</sui-notification>
+```
+
+Aviso del sistema en la bandeja
+
+```html
+<!-- ❌ mal: con tipo y sin foto la fila se vuelve un alert con borde y sombra (vitrina: avisos.ts:253) -->
+<sui-notification variant="success" title="Recarga aprobada"
+  description="Ya tienes S/ 20.00 en tu saldo" timestamp="Hace 1 h" />
+```
+
+```html
+<!-- ✅ bien: el isotipo de la app como foto, sin variant -->
+<sui-notification [avatar]="isotipo" title="Recarga aprobada"
+  description="Ya tienes S/ 20.00 en tu saldo" timestamp="Hace 1 h" />
+```
+
+Acciones de la fila
+
+```html
+<!-- ❌ mal: el ⋮ y la X van los dos arriba a la derecha y se pisan -->
+<sui-notification [avatar]="n.foto" title="Nuevo pedido" timestamp="Hace 5 min"
+  description="Pollería El Dorado · S/ 42.50"
+  [showMore]="true" [dismissible]="true" />
+```
+
+```html
+<!-- ✅ bien: uno solo (aquí, la X; el ⋮ es solo para web con mouse) -->
+<sui-notification [avatar]="n.foto" title="Nuevo pedido" timestamp="Hace 5 min"
+  description="Pollería El Dorado · S/ 42.50"
+  [dismissible]="true" (dismissed)="quitar(n)" />
+```
+
 ## Ejemplo
 
 ```html