@ajuarezso/sui-design-system 0.24.1 → 0.25.1

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

@@ -25,7 +25,7 @@ la barra superior, con filas `sui-notification` y la cabecera `sui-notification-
 ## Qué variante usar
 
 > La guía del DS no tiene página para este componente: sale del Figma del DS (pie del panel de
-> notificaciones). Todo lo de abajo es **propuesta**, salvo lo marcado «según el componente».
+> notificaciones). Lo marcado **canon** está aprobado; lo que sigue en **propuesta** espera decisión, y «según el componente» describe lo que el código ya hace.
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos**. La app no tiene panel
 > desplegable de campana: su bandeja es una pantalla (`pages/notifications/`).
@@ -33,10 +33,10 @@ la barra superior, con filas `sui-notification` y la cabecera `sui-notification-
 | prop | valor | cuándo | fuente |
 |---|---|---|---|
 | `usePrefix` · `useSuffix` | `'Usa'` · `'para moverte'` | Ya son los defaults (03-10-2026); no hace falta pasarlos. | canon (copy de la app: tuteo, español) |
-| `manage` | `'Ajustes de notificaciones'` | El link a los ajustes. Emite `(manageClick)`. | propuesta |
+| `manage` | `'Ajustes de notificaciones'` | El link a los ajustes. Emite `(manageClick)`. | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
 | `manage` | `{ label, href }` | Cuando los ajustes son otra ruta: se dibuja un `<a>` de verdad. | según el componente |
 | `manage` | `true` (default) | Dice «Administrar notificaciones» (en español desde 03-10-2026). | propuesta |
-| `manage` | `false` · `null` | Cuando los ajustes ya están a la vista en el mismo panel. | propuesta |
+| `manage` | `false` · `null` | Cuando los ajustes ya están a la vista en el mismo panel. | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
 
 ## Tamaño en mobile y en web
 
@@ -44,8 +44,8 @@ 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: propuesta |
-| el link de ajustes | si hiciera falta, un `sui-link-button` `large` suelto | `small` (16 px) | propuesta |
+| 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` 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

@@ -23,18 +23,18 @@ Archivadas» con el filtro a la derecha, encima de las filas `sui-notification`.
 ## Qué variante usar
 
 > La guía del DS no tiene página para este componente: sale del Figma del DS (cabecera del panel
-> de notificaciones). Todo lo de abajo es **propuesta**, salvo lo marcado «según el componente».
+> de notificaciones). Lo marcado **canon** está aprobado por el dueño; «según el componente» describe lo que el código ya hace.
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos** (no hay panel de campana).
 
 | prop | valor | cuándo | fuente |
 |---|---|---|---|
-| `tabs` | 2 a 4 pestañas | «Todas» primero, luego «No leídas» y los grupos del rol (Pedidos, Promos, Encargos…). Más de 4 no caben en el panel. | propuesta |
+| `tabs` | 2 a 4 pestañas | «Todas» primero, luego «No leídas» y los grupos del rol (Pedidos, Promos, Encargos…). Más de 4 no caben en el panel. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 | `tabs[].badge` | número > 0 | El conteo de **no leídas**, solo en la pestaña donde importa. Es un `sui-badge` rojo lleno: un conteo que pide acción. | según el componente · regla de badge: canon |
 | `tabs[].dividerBefore` | `true` | Separa lo que no es bandeja activa: «Archivadas» al final. | según el componente (Figma) |
 | `[(active)]` | el `value` de la pestaña | Siempre enlazado: es un model de dos vías. | según el componente |
-| `showFilter` | `true` (default) | Solo si el panel tiene filtros de verdad (por local, por fecha). | propuesta |
-| `showFilter` | `false` | Lo normal: sin filtros, un botón que no hace nada estorba. | propuesta |
+| `showFilter` | `true` (default) | Solo si el panel tiene filtros de verdad (por local, por fecha). | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `showFilter` | `false` | Lo normal: sin filtros, un botón que no hace nada estorba. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 | `filterLabel` | texto | El nombre del botón de filtro para el lector de pantalla. Default «Filtrar». | según el componente |
 
 ## Tamaño en mobile y en web
@@ -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

package/docs/sui-otp-input/README.md

@@ -36,19 +36,20 @@ Regla corta: **código corto que llega por otro canal → otp · cupón o clave
 | prop / evento | cuándo | fuente |
 |---|---|---|
 | `type="number"` (default) | Códigos numéricos: teclado de números. | según la guía del DS (códigos numéricos) |
-| `type="text"` | No usar hoy: un código con letras se tipea mejor en un `sui-input`. | propuesta, falta aprobación |
+| `type="text"` | No usar hoy: un código con letras se tipea mejor en un `sui-input`. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 | `length` | `6` para un SMS (lo que manda Firebase); `4` para un código de entrega dictado en voz alta. | propuesta, falta aprobación |
 | `error` | El código no coincide. Pinta todas las celdas; el mensaje va aparte, debajo. | según la guía del DS (ejemplo con error) |
 | `disabled` | Mientras se verifica el código. | según la guía del DS (ejemplo deshabilitado) |
-| `ariaLabel` | Qué código es: «Código que te llegó por SMS». El default es «Código de verificación». | propuesta, falta aprobación |
-| `(completed)` | Verificar apenas se llena, sin botón «Continuar». | propuesta, falta aprobación |
+| `ariaLabel` | Qué código es: «Código que te llegó por SMS». El default es «Código de verificación». | canon (aprobado por el dueño, 05-10-2026, bloque B5) |
+| `(completed)` | Verificar apenas se llena, sin botón «Continuar». | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
 
 ## Tamaño en mobile y en web
 
 Tiene `size` (extensión SUI) para la celda. `large` es el de la guía y el default: **80 × 64** con 8
 px entre celdas (6 celdas = 520 px). Para el teléfono, **`medium` (52 × 56)**: 6 celdas miden 352
-px y entran en los 358 útiles de una pantalla de 390. `small` (44 × 48, dígito de 20) queda para
-360 px o un código dentro de una tarjeta.
+px y entran en los 358 útiles de una pantalla de 390. `small` (44 × 48, dígito de 20) **no se usa**:
+en 360 px el `medium` se achica solo a unos 48 × 56 y sigue por encima de 44 (D16, dueño
+05-10-2026: nada en `small`; reemplaza el «`small` para 360 px» del 03-10-2026).
 
 Además, **el componente nunca es más ancho que su contenedor**: si las celdas no entran, se achican
 parejo en vez de salirse de la pantalla (un `large` de 6 en 390 queda en celdas de 53 × 64). Es la red
@@ -58,25 +59,45 @@ de seguridad, no el tamaño a elegir: se ve angosto y alto.
 |---|---|---|---|
 | `large` (default) | 80 × 64 · dígito 24 | 520 px | según la guía del DS |
 | `medium` | 52 × 56 · dígito 24 | 352 px | canon (aprobado por el dueño, 03-10-2026), extensión SUI |
-| `small` | 44 × 48 · dígito 20 | 304 px | canon (aprobado por el dueño, 03-10-2026), extensión SUI |
+| `small` | 44 × 48 · dígito 20 | 304 px | canon (aprobado por el dueño, 03-10-2026), extensión SUI · no se usa: D16, dueño 05-10-2026 |
 
 | uso | mobile (390) | web | fuente |
 |---|---|---|---|
-| código de 6 dígitos | `medium` | `large` | propuesta, falta aprobación |
-| código de 4 dígitos | `large` (344 px, entra) | `large` | propuesta, falta aprobación |
+| código de 6 dígitos | `medium` | `large` | canon (aprobado por el dueño, 05-10-2026, bloque B1) · la mitad web queda pendiente frente a D16 (ver «Por dispositivo») |
+| código de 4 dígitos | `large` (344 px, entra) | `large` | canon (aprobado por el dueño, 05-10-2026, bloque B1) · la mitad web queda pendiente frente a D16 (ver «Por dispositivo») |
 
 ```html
 <sui-otp-input [length]="6" [size]="bp.isMobile() ? 'medium' : 'large'" [(value)]="codigo" />
 <!-- bp = BreakpointsService -->
 ```
 
+### Por dispositivo (D16)
+
+Las celdas se tocan, pero aquí el `size` lo elige **el ancho** (que las celdas entren), no el
+puntero: las tres miden 48 o más de alto, así que cualquiera se toca bien. Fuente: D16, dueño
+05-10-2026, y el bloque B1 (05-10-2026).
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380) | `medium` (6 dígitos) · `large` (4) | 6 `medium` no entran en los 328 útiles de 360: se achican solos a unos 48 × 56 y siguen tocables. Nada en `small` |
+| celular (380–767) | `medium` (6 dígitos) · `large` (4) | 6 `medium` miden 352 y entran en los 358 útiles de 390; 4 `large` miden 344 |
+| tablet táctil (`pointer: coarse`) | `large` desde 768 px · por debajo (iPad mini vertical, 744), como el celular: `medium` con 6 dígitos | aquí manda el ancho, no el puntero: es lo que da `bp.isMobile()` (hasta 767). Las dos celdas pasan los 44 |
+| computadora (`pointer: fine`) | **pendiente** (`large` por ahora) | el bloque B1 (aprobado el 05-10-2026) dio `large` en web; la regla general de D16 (la misma tarde) da `medium` en lo que se toca. Pero el `medium` del otp es la celda angosta para que 6 entren en el teléfono (52 × 56), no un tamaño de escritorio. Falta que el dueño diga si D16 pisa a B1 aquí; mientras tanto se queda el `large` de B1, que es el default (interino) |
+
+En el ultrawide, igual que en la computadora: el espacio extra no agranda las celdas.
+
+En master-pedidos: `[size]="bp.isMobile() ? 'medium' : 'large'"` con 6 dígitos; con 4, sin `size`
+(`large` es el default). El `'large'` de la computadora es el interino de B1 mientras la fila sigue
+pendiente. No hay helper: `bp.sizeControl()` da `large` en el celular, y 6 celdas
+`large` no entran.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
 |---|---|---|
 | el componente entero (0 usos) | no hay verificación por código | verificar el teléfono del cliente por SMS, o un código de entrega de 4 dígitos que el cliente le dicta al repartidor |
 | `type="text"` | los códigos que llegan son numéricos | un código alfanumérico corto de una campaña |
-| `size="small"` | `medium` ya entra en 390 | pantallas de 360 px o un código dentro de una tarjeta |
+| `size="small"` | `medium` ya entra en 390 | ninguno: en 360 px el `medium` se achica solo a 48 × 56 (D16, dueño 05-10-2026: nada en `small`) |
 
 ## API
 
@@ -108,6 +129,46 @@ de seguridad, no el tamaño a elegir: se ve angosto y alto.
 - `disabled` es un `model`: si el formulario lo deshabilita, el componente lo escribe de vuelta.
 - No hay grupos (3-3): si se necesitan, son dos componentes.
 
+## Bien y mal
+
+Código de 6 dígitos en el teléfono
+
+```html
+<!-- ❌ mal: sin size va large; 6 celdas de 80 no entran en 390 y se aplastan a 53 × 64. No hay usos en la app: la vitrina aún lo muestra así, marcado como propuesta y con la nota «falta una celda angosta en el DS», que ya existe (medium) (pages/super-admin/master-preview/_guia-moleculas/campos.ts:322) -->
+<sui-otp-input [length]="6" ariaLabel="Código que te llegó por SMS" [(value)]="codigo" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-otp-input [length]="6" ariaLabel="Código que te llegó por SMS"
+               [size]="bp.isMobile() ? 'medium' : 'large'" [(value)]="codigo" />
+```
+
+Código que no coincide
+
+```html
+<!-- ❌ mal: error solo pinta las celdas; nadie dice qué pasó -->
+<sui-otp-input [length]="4" ariaLabel="Código de entrega" [error]="codigoMalo()" [(value)]="codigo" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-otp-input [length]="4" ariaLabel="Código de entrega" [error]="codigoMalo()" [(value)]="codigo" />
+@if (codigoMalo()) { <sui-form-hint variant="error" message="El código no coincide" /> }
+```
+
+Un cupón con letras
+
+```html
+<!-- ❌ mal: más de 6 caracteres y con letras no es un otp -->
+<sui-otp-input [length]="8" type="text" ariaLabel="Cupón" [(value)]="cupon" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-input label="Cupón" [size]="bp.sizeControl()" [(value)]="cupon" />
+```
+
 ## Ejemplo
 
 ```html

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

@@ -27,13 +27,15 @@ toda la pantalla («Agregar», «Exportar»).
 ## Qué variante usar
 
 > **No está en la guía del DS: es extensión de SUI.** Nació como el título de las pantallas del
-> panel de empresa y no tiene Figma. Lo marcado **canon** sale de `master-pedidos/docs/CANON-SUI.md`;
-> lo demás es **propuesta**.
+> panel de empresa y no tiene Figma. Lo marcado **canon** sale de `master-pedidos/docs/CANON-SUI.md` o de la aprobación del dueño (05-10-2026);
+> lo marcado «componente» describe lo que el código ya hace. No queda nada en propuesta.
 >
-> Uso medido el 03-10-2026 en `master-pedidos/src/app`: 64 page headers, sin contar prototipos ni
-> vitrinas (`master-preview`, `master-prototipos`, `mockup-sheets-*`, `dx/*`, `master-rutina`,
-> `master-medico`, `dev-index`) ni las copias de `components/sui/`. 50 llevan `subtitle` fijo, 14
-> calculado; 17 tienen acciones; 0 usan `sticky`.
+> Uso medido el 06-10-2026 en `master-pedidos/src/app`: 70 page headers en total y **66** sin contar
+> prototipos ni vitrinas (1 en cada uno: `master-preview`, `master-prototipos`, `master-rutina` y
+> `master-medico`; `mockup-sheets-*`, `dx/*`, `dev-index` y las copias de `components/sui/` no
+> tienen). Un `grep` da 72 porque cuenta 2 comentarios (`master-preview.scss:1`, `envios.ts:923`).
+> De los 66: 51 llevan `subtitle` fijo y 15 calculado; 17 tienen algo en
+> `slot="actions"` (15 botones y 2 solo badges: `master-drivers`, `master-approvals`); 0 usan `sticky`.
 
 ### Lo que sí dice la guía del DS
 
@@ -45,18 +47,24 @@ escala del DS** (CANON-SUI §7): si se homologa, sería `title-h5`.
 | pieza | regla | ejemplo real de la app | fuente |
 |---|---|---|---|
 | `title` | El nombre de la pantalla, el mismo que en el menú. Sentence case, sin punto. Nunca un ID. | `pages/discounts/discounts.html:2` | canon (CANON-SUI, copy) |
-| `subtitle` | Una línea que dice **qué se hace aquí**, no que repite el título. | `pages/super-admin/master-orders/master-orders.html:1` | propuesta |
-| acciones | Las que valen para toda la pantalla: una `filled` como máximo (la principal) y el resto `stroke`. Hoy: 9 `filled`, 7 `stroke`. | `pages/drivers/drivers.html:2` | canon para «una principal» (CANON-SUI §6.2), propuesta el resto |
+| `subtitle` | Una línea que dice **qué se hace aquí**, no que repite el título. | `pages/super-admin/master-orders/master-orders.html:1` | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| acciones | Las que valen para toda la pantalla: una `filled` como máximo (la principal) y el resto `stroke`. Hoy, de los 16 botones que se dibujan: 10 `filled` (uno por default, sin `variant`: `master-gastos.html:8`) y 6 `stroke`. | `pages/drivers/drivers.html:2` | canon (CANON-SUI §6.2: una sola primaria por pantalla; CLAUDE.md «Botones — composición y orden», 27-07-2026: uno solo `filled`, el secundario `stroke` `neutral`) |
 
-**Usos de hoy que rompen el copy canon** (sentence case en botones): `pages/drivers/drivers.html:8`
-(«Nuevo Repartidor»).
+**Usos de hoy que rompen** (medido el 06-10-2026):
+
+- `pages/orders/orders.html:14`: el botón «Actualizar» va sin `slot="actions"`, así que no se
+  proyecta y no se dibuja en ningún ancho (ver «Bien y mal»).
+
+Los cuatro botones en Title Case que había (`drivers.html:8`, `discounts.html:7`,
+`employees.html:7`, `locations.html:7`) ya van en sentence case desde el commit `8b34d8ed`
+(06-10-2026) de master-pedidos.
 
 ### `sticky`
 
 | valor | cuándo | fuente |
 |---|---|---|
-| `false` (default) | el caso normal: el título se va con el scroll | propuesta |
-| `true` | listas largas donde las acciones del header se usan mientras se recorre (filtros, «Agregar»). Le pone fondo blanco. 0 usos hoy | propuesta |
+| `false` (default) | el caso normal: el título se va con el scroll | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `true` | listas largas donde las acciones del header se usan mientras se recorre (filtros, «Agregar»). Le pone fondo blanco. 0 usos hoy | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 
 ## Tamaño en mobile y en web
 
@@ -68,17 +76,37 @@ El page header **no tiene `size`**. Cambia solo en 767 px:
 | disposición | título y subtítulo arriba, acciones **debajo** | título a la izquierda, acciones a la derecha, alineadas abajo | componente |
 | padding vertical | 24 arriba y abajo | 32 arriba, 16 abajo | componente |
 | padding lateral | ninguno: lo pone el contenedor del layout | igual | componente |
-| botones de las acciones | `large` (48) | `small` (36) | propuesta |
+| botones de las acciones | `large` (48) | `medium` (40) | 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 `small` del bloque B1 |
 
-Los botones de las acciones hoy: 10 `small` fijos, 2 `bp.isMobile() ? 'large' : 'small'`, 2
-`bp.controlSize()` (`large`/`xlarge`), 2 `large`, 1 `medium`. La propuesta es la pareja que ya
-usan dos pantallas: en mobile las acciones bajan a su fila y tienen sitio para 48 px; en desktop
-van al lado del título de 28 y `small` no le compite.
+En mobile, `large` es canon (piso táctil 44, 04-10-2026: `small` y `medium` no llegan); en la
+computadora va `medium` y la tablet va como el celular (canon, dueño, 05-10-2026, D16; reemplaza el
+`small` del bloque B1): en mobile las acciones bajan a su fila y tienen sitio para 48 px; en desktop
+van al lado del título de 28. Medido el 06-10-2026: 66 page headers (sin vitrinas ni prototipos),
+16 botones en las acciones, los 16 con `bp.sizeControl()` (ya no queda ningún `small`). Hay un
+botón 17 dentro de un page header, también con `bp.sizeControl()`, pero va sin `slot="actions"` y no
+se dibuja (`pages/orders/orders.html:14`).
 
 ```html
-<sui-button [size]="bp.isMobile() ? 'large' : 'small'" slot="actions">Agregar</sui-button>
+<sui-button [size]="bp.sizeControl()" slot="actions">Agregar</sui-button>
 ```
 
+### Por dispositivo (D16)
+
+El header no tiene `size`: lo que cambia por dispositivo son **los botones de las acciones**, que
+se tocan. Fuente: D16, dueño 05-10-2026 (fila `page-header (acciones)`).
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380) | `large` por ahora | D16 pide `medium` con área tocable de 44; el DS todavía no la estira, así que se queda el grande (interino) |
+| celular (380–767) | `large` | las acciones bajan a su propia fila |
+| tablet táctil (`pointer: coarse`) | `large` | Apple pide 44 también en el iPad; a 767 px o más las acciones ya van al lado del título |
+| computadora (`pointer: fine`) | `medium` | al lado del título de 28 |
+
+En el ultrawide, igual que en la computadora: el espacio extra no agranda los botones.
+
+En master-pedidos: `[size]="bp.sizeControl()"` en cada `sui-button` de las acciones. No uses
+`bp.isMobile() ? 'large' : 'medium'`: en el iPad `isMobile` es falso y el botón queda en 40.
+
 ## API
 
 <!-- api:inicio -->
@@ -111,12 +139,54 @@ Slot: `slot="actions"`, a la derecha (desktop) o debajo (mobile), gap 8. No hay
 - `title` es requerido: sin él, Angular falla al compilar la plantilla.
 - El host borra el atributo `title` nativo (sin tooltip gris del navegador).
 
+## Bien y mal
+
+Botón de la pantalla
+
+```html
+<!-- ❌ mal: sin slot="actions" el botón no se dibuja en ningún ancho (pages/orders/orders.html:14) -->
+<sui-page-header title="Pedidos" subtitle="Lo que está en curso y todo lo que pasó por tu local.">
+  <sui-button variant="stroke" color="neutral" [size]="bp.sizeControl()" (click)="refresh()">Actualizar</sui-button>
+</sui-page-header>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-page-header title="Pedidos" subtitle="Lo que está en curso y todo lo que pasó por tu local.">
+  <sui-button slot="actions" variant="stroke" color="neutral" [size]="bp.sizeControl()" (click)="refresh()">Actualizar</sui-button>
+</sui-page-header>
+```
+
+Texto de la acción
+
+```html
+<!-- ❌ mal: Title Case; los botones van en sentence case (así estaba pages/locations/locations.html:7 hasta el 06-10-2026) -->
+<sui-button slot="actions" variant="filled" color="primary" [size]="bp.sizeControl()">Agregar Sucursal</sui-button>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-button slot="actions" variant="filled" color="primary" [size]="bp.sizeControl()">Agregar sucursal</sui-button>
+```
+
+Tamaño de la acción
+
+```html
+<!-- ❌ mal: isMobile no mira el puntero; en el iPad el botón queda en medium (40) -->
+<sui-button slot="actions" variant="filled" [size]="bp.isMobile() ? 'large' : 'medium'">Crear descuento</sui-button>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-button slot="actions" variant="filled" [size]="bp.sizeControl()">Crear descuento</sui-button>
+```
+
 ## Ejemplo
 
 ```html
 <sui-page-header title="Descuentos" subtitle="Promociones y campañas activas de tu negocio.">
   <sui-button slot="actions" variant="filled"
-    [size]="bp.isMobile() ? 'large' : 'small'" (click)="crear()">
+    [size]="bp.sizeControl()" (click)="crear()">
     Crear descuento
   </sui-button>
 </sui-page-header>

package/docs/sui-pagination/README.md

@@ -46,30 +46,30 @@ Regla corta: **tabla con todo cargado en web → pagination · lista de Firestor
 
 | type | cuándo | fuente |
 |---|---|---|
-| `basic` (default) | El normal, debajo de una tabla con bordes. | según la guía del DS (es su default); el cuándo es propuesta |
-| `group` | Cuando la tabla va dentro de una card y la paginación se apoya en su borde: un solo bloque se lee como parte de la tabla. | según la guía del DS (la forma existe); el cuándo es propuesta |
+| `basic` (default) | El normal, debajo de una tabla con bordes. | según la guía del DS (es su default); el cuándo: canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `group` | Cuando la tabla va dentro de una card y la paginación se apoya en su borde: un solo bloque se lee como parte de la tabla. | según la guía del DS (la forma existe); el cuándo: canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 | `full-radius` | No: el resto de los controles de la app (botones, inputs) tienen esquinas de 8-10, no círculos. | según la guía del DS (la forma existe); el no es propuesta |
 
 ### `size`
 
 | size | qué mide | cuándo | fuente |
 |---|---|---|---|
-| `medium` (default) | celdas de 32 px | Web, debajo de una tabla. | extensión de SUI (la guía tiene un tamaño); el cuándo es propuesta |
-| `small` | celdas de 28 px | Web, en una tabla dentro de un modal o panel angosto. | propuesta, falta aprobación |
+| `medium` (default) | celdas de 32 px | Web, siempre: debajo de una tabla y en un modal o panel angosto. | extensión de SUI (la guía tiene un tamaño); el cuándo: canon (aprobado por el dueño, 05-10-2026, bloque B1) · también en paneles angostos: canon (dueño, 05-10-2026, D16) |
+| `small` | celdas de 28 px | No usar: es chico. En un modal o panel angosto va `medium`. | canon (dueño, 05-10-2026, D16), reemplaza el «cuándo» del bloque B1 |
 
 ### Botones y texto
 
 | input | valor | cuándo | fuente |
 |---|---|---|---|
 | `nextPrevious` | `true` (default) | Siempre. | según la guía del DS |
-| `firstLast` | `false` (default) | Lo normal: con las elipsis ya se ve la primera y la última. | propuesta, falta aprobación |
-| `firstLast` | `true` | Más de 20 páginas, donde ir al final es un caso de uso (la última semana de un export). | según la guía del DS (los botones existen); el cuándo es propuesta |
-| `siblingCount` | `1` (default) | Siempre. Más números a cada lado ensanchan sin ayudar. | propuesta, falta aprobación |
-| `showInfo` | `true` (default) | Con `infoFormat="items"`: «Mostrando 11-20 de 134». | propuesta, falta aprobación |
+| `firstLast` | `false` (default) | Lo normal: con las elipsis ya se ve la primera y la última. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `firstLast` | `true` | Más de 20 páginas, donde ir al final es un caso de uso (la última semana de un export). | según la guía del DS (los botones existen); el cuándo: canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `siblingCount` | `1` (default) | Siempre. Más números a cada lado ensanchan sin ayudar. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `showInfo` | `true` (default) | Con `infoFormat="items"`: «Mostrando 11-20 de 134». | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
 | `infoFormat` | `'items'` (default) | «Mostrando 11-20 de 134». | según el código |
-| `infoFormat` | `'pages'` | Imprime «Página 2 de 14» (en español desde 03-10-2026). Cuando no se sabe el total de ítems o no importa. | propuesta, falta aprobación |
-| `pageSizeOptions` | `[]` (default) | Lo normal: sin selector de filas por página. | propuesta, falta aprobación |
-| `pageSizeOptions` | `[10, 25, 50]` | Las opciones dicen «10 / página» (en español desde 03-10-2026). | propuesta, falta aprobación |
+| `infoFormat` | `'pages'` | Imprime «Página 2 de 14» (en español desde 03-10-2026). Cuando no se sabe el total de ítems o no importa. | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `pageSizeOptions` | `[]` (default) | Lo normal: sin selector de filas por página. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `pageSizeOptions` | `[10, 25, 50]` | Las opciones dicen «10 / página» (en español desde 03-10-2026). | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 
 Usos de hoy que rompen las reglas: **0** (no se usa).
 
@@ -80,8 +80,8 @@ mobile no se usa.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| debajo de una tabla | no se usa: scroll infinito | `medium` (32) | propuesta, falta aprobación |
-| tabla en un panel angosto | no se usa | `small` (28) | propuesta, falta aprobación |
+| debajo de una tabla | no se usa: scroll infinito | `medium` (32) | canon (aprobado por el dueño, 05-10-2026, bloque B7) |
+| tabla en un panel angosto | no se usa | `medium` (32) | no se usa en mobile: canon (aprobado por el dueño, 05-10-2026, bloque B7) · web: canon (dueño, 05-10-2026, D16), antes `small` |
 
 ```html
 @if (!bp.isMobile()) {
@@ -89,6 +89,26 @@ mobile no se usa.
 }
 ```
 
+### Por dispositivo (D16)
+
+Las celdas se tocan, pero ningún `size` llega a 44 (el más grande mide 32). Fuente: D16, dueño
+05-10-2026 (fila `pagination`).
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380) | no se usa | scroll infinito |
+| celular (380–767) | no se usa | scroll infinito |
+| tablet táctil (`pointer: coarse`) | **pendiente** | con 32 px tiene el mismo problema que en el celular: celdas por debajo de 44 para el dedo. Falta que el dueño decida qué va en la tablet |
+| computadora (`pointer: fine`) | `medium` | también en un modal o panel angosto. `small` no se usa |
+
+En el ultrawide, igual que en la computadora: el espacio extra va a más columnas de la tabla, no a
+celdas más grandes.
+
+En master-pedidos no hay helper: `size` no se pasa (`medium` es el default) y el componente va
+dentro de `@if (!bp.isMobile())`. Ojo: con esa condición el iPad (768 px o más) **sí** lo muestra,
+en 32 px; es justo el caso pendiente, y no se resuelve cambiando a `bp.tactil()` hasta que el dueño
+decida.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -142,6 +162,46 @@ type SuiPaginationInfoFormat = 'items' | 'pages';
 - **Con `total` en 0 no dibuja el texto**, pero sí los botones (una sola página «1»). Ocúltalo tú.
 - Las flechas son `<i class="ri-…">`: necesitan la fuente de Remix Icon cargada.
 
+## Bien y mal
+
+Lista en el celular
+
+```html
+<!-- ❌ mal: en el celular no se usa; las celdas de 32 no llegan a 44 -->
+<sui-pagination [total]="filas().length" [(currentPage)]="pagina" [pageSize]="25" />
+```
+
+```html
+<!-- ✅ bien -->
+@if (!bp.isMobile()) {
+  <sui-pagination [total]="filas().length" [(currentPage)]="pagina" [pageSize]="25" />
+}
+```
+
+Tabla en un panel angosto
+
+```html
+<!-- ❌ mal: small (28) no se usa; la vitrina aún lo marca como propuesta (pages/super-admin/master-preview/_guia-moleculas/navegacion.ts:169) -->
+<sui-pagination [total]="134" [(currentPage)]="pagina" size="small" [showInfo]="false" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-pagination [total]="134" [(currentPage)]="pagina" [showInfo]="false" />
+```
+
+Qué va en `total`
+
+```html
+<!-- ❌ mal: total es la cantidad de ítems, no de páginas: con 6 páginas de 25 dibuja una sola -->
+<sui-pagination [total]="paginas()" [(currentPage)]="pagina" [pageSize]="25" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-pagination [total]="filas().length" [(currentPage)]="pagina" [pageSize]="25" />
+```
+
 ## Ejemplo
 
 ```html