@ajuarezso/sui-design-system 0.25.0 → 0.25.1

package/docs/sui-modal/README.md

@@ -110,8 +110,8 @@ Hoy: 45 `small`, 63 `medium` (50 explícitos + 13 por default), 5 `large`, 14 `x
 | `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
 
@@ -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.
@@ -84,12 +84,14 @@ 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
@@ -102,8 +104,25 @@ aprobación: `[stretch]="bp.isMobile()"` para que desktop vuelva al tipo Basic.
 
 `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

@@ -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

@@ -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` | 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:809` (reseñas) · `pages/customer/checkout/checkout.html:448` (hora) | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| **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 |
 |---|---|---|
@@ -65,9 +66,10 @@ Hoy: 4 «sobre un mapa» (más 2 variantes con alturas propias: `pages/envios/en
 
 **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

@@ -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' : 'medium'"` | `medium` | mobile `large`: canon (decisión del dueño 04-10-2026, piso táctil 44) · web `medium`: canon (dueño, 05-10-2026, D16), reemplaza el `xsmall` del bloque B1 |
+| 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

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

@@ -45,7 +45,7 @@ la barra superior, con filas `sui-notification` y la cabecera `sui-notification-
 | uso | mobile | web | fuente |
 |---|---|---|---|
 | el pie entero | no aplica: es ayuda de teclado; en mobile no se muestra (el componente no se oculta solo: lo esconde quien lo usa) | 48 px de alto (14 + 20 de la tecla + 14) | alto: según el componente · ocultarlo en mobile: canon (aprobado por el dueño, 05-10-2026, bloque B7) |
-| el link de ajustes | si hiciera falta, un `sui-link-button` `large` suelto | `small` (16 px) | propuesta |
+| el link de ajustes | si hiciera falta, un `sui-link-button` suelto: su size en el celular y la tablet sigue **pendiente** (P8 de la tabla D16) | `small` (16 px), fijo dentro del componente | `small` fijo: según el componente · choca con el «nada en `small`» de D16 (el `link-button` va `medium` en la computadora): **pendiente** del componente, quien lo usa no lo puede cambiar |
 
 ```html
 @if (!bp.isMobile()) {
@@ -54,6 +54,15 @@ la barra superior, con filas `sui-notification` y la cabecera `sui-notification-
 }
 ```
 
+### Por dispositivo (D16)
+
+No aplica: no tiene `size` y solo se usa en la computadora (y el ultrawide), porque la mitad del
+pie es una ayuda de **teclado**; en el celular chico y en el celular no se muestra. En la tablet
+táctil de 768 px o más `bp.isMobile()` lo deja visible y el link de 16 px no llega al piso de 44:
+queda **pendiente**, igual que el resto del panel de la campana (`sui-notification-tab-menu`).
+
+En master-pedidos: sin helper; `@if (!bp.isMobile())` alrededor.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -90,6 +99,47 @@ interface SuiLinkConfig { label: string; href?: string; target?: string; rel?: s
 - Ocupa el 100 % del ancho de su contenedor (el Figma lo dibuja de 540 px).
 - Borra el `title` nativo del host.
 
+## Bien y mal
+
+Link a los ajustes
+
+```html
+<!-- ❌ mal: con un texto y sin (manageClick) ni href, el link no lleva a ningún lado (vitrina: pages/super-admin/master-preview/_guia-moleculas/avisos.ts:268) -->
+<sui-notification-footer manage="Ajustes de notificaciones" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-notification-footer
+  [manage]="{ label: 'Ajustes de notificaciones', href: '/empresa/notificaciones' }" />
+```
+
+Texto del link
+
+```html
+<!-- ❌ mal: sin manage sale «Administrar notificaciones», que no nombra la pantalla a la que lleva -->
+<sui-notification-footer (manageClick)="abrirAjustes()" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-notification-footer manage="Ajustes de notificaciones" (manageClick)="abrirAjustes()" />
+```
+
+En el celular
+
+```html
+<!-- ❌ mal: «Usa ↑ ↓ para moverte» en una pantalla sin teclado; el componente no se oculta solo -->
+<sui-notification-footer manage="Ajustes de notificaciones" (manageClick)="abrirAjustes()" />
+```
+
+```html
+<!-- ✅ bien -->
+@if (!bp.isMobile()) {
+  <sui-notification-footer manage="Ajustes de notificaciones" (manageClick)="abrirAjustes()" />
+}
+```
+
 ## Ejemplo
 
 ```html

package/docs/sui-notification-tab-menu/README.md

@@ -49,12 +49,29 @@ texto) y el filtro es un compact-button de 24 px.
 
 ```html
 @if (bp.isMobile()) {
-  <sui-tab-chips [chips]="pestanas" [value]="activa()" (valueChange)="activa.set($event)" />
+  <sui-tab-chips [chips]="pestanas" [size]="bp.sizeChips()"
+    [value]="activa()" (valueChange)="activa.set($event)" />
 } @else {
   <sui-notification-tab-menu [tabs]="pestanas" [(active)]="activa" [showFilter]="false" />
 }
 ```
 
+### Por dispositivo (D16)
+
+No aplica: no tiene `size` y es solo de la computadora (y el ultrawide). En el celular va
+`sui-tab-chips` con `[size]="bp.sizeChips()"` (`xlarge`, fila `tab-chips` de D16). En el celular
+chico el helper también da `xlarge`, pero es interino: la fila `tab-chips` pide `medium` con área
+tocable de 44, y mientras el DS no estire el área de los `medium` se queda el size grande (nota ¹
+de D16).
+Lo que trae fijo adentro: el filtro es un `sui-compact-button` `large` (24), que cuadra con la
+computadora; el conteo es un `sui-badge` `small`, que choca con el «nada en `small`» de D16 y
+queda **pendiente** del componente (quien lo usa no lo puede cambiar). En la tablet táctil de
+768 px o más `bp.isMobile()` lo deja visible con pestañas de 20 y filtro de 24, lejos del piso de
+44: queda **pendiente**, igual que el resto del panel de la campana.
+
+En master-pedidos: sin helper; `@if (bp.isMobile())` elige `sui-tab-chips` con
+`[size]="bp.sizeChips()"`, y si no, este componente.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -101,6 +118,45 @@ interface SuiNotificationTab<T = string> {
   04-10-2026) y cada una es `role="tab"` con `aria-selected`. Un solo tab stop: ← → mueven y
   activan con vuelta al inicio, Home/End a los extremos. No hay `tabpanel` asociado: lo arma quien lo usa.
 
+## Bien y mal
+
+Pestañas en el celular
+
+```html
+<!-- ❌ mal: cada pestaña mide 20 px de alto, lejos de los 44 del dedo -->
+<sui-notification-tab-menu [tabs]="pestanas" [(active)]="activa" [showFilter]="false" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-tab-chips [chips]="pestanas" [size]="bp.sizeChips()"
+  [value]="activa()" (valueChange)="activa.set($event)" />
+```
+
+Pestaña activa
+
+```html
+<!-- ❌ mal: active fijo; la pestaña cambia adentro pero la página no se entera (vitrina: pages/super-admin/master-preview/_guia-moleculas/avisos.ts:264) -->
+<sui-notification-tab-menu [tabs]="pestanas" active="todas" [showFilter]="false" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-notification-tab-menu [tabs]="pestanas" [(active)]="pestana" [showFilter]="false" />
+```
+
+Botón de filtro
+
+```html
+<!-- ❌ mal: showFilter arranca en true; sin filtros de verdad sale un botón que no hace nada -->
+<sui-notification-tab-menu [tabs]="pestanas" [(active)]="pestana" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-notification-tab-menu [tabs]="pestanas" [(active)]="pestana" [showFilter]="false" />
+```
+
 ## Ejemplo
 
 ```html