@ajuarezso/sui-design-system 0.24.0 → 0.25.0

package/docs/sui-key-icon/README.md

@@ -22,8 +22,8 @@ modal, el resultado de una acción («Cuenta bloqueada», «Gracias por califica
 
 ## Qué variante usar
 
-> **La guía del DS no tiene página para este componente.** Todo es **propuesta, falta
-> aprobación**.
+> **La guía del DS no tiene página para este componente.** Las reglas marcadas canon están
+> aprobadas (05-10-2026); los tamaños quedaron en canon el 05-10-2026 (P1 b).
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos directos**. Lo usan por dentro
 > `sui-content-label` y `sui-payment-icon`.
@@ -32,8 +32,8 @@ modal, el resultado de una acción («Cuenta bloqueada», «Gracias por califica
 
 | valor | cuándo | fuente |
 |---|---|---|
-| `lighter` | El ícono dice un estado: el color del fondo **es** el significado («Cuenta bloqueada» en rojo, «Calificación enviada» en verde). | propuesta |
-| `stroke` (default) | Ícono neutro al inicio de una fila, sobre fondo blanco. **Siempre con `color="gray"`.** | propuesta |
+| `lighter` | El ícono dice un estado: el color del fondo **es** el significado («Cuenta bloqueada» en rojo, «Calificación enviada» en verde). | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `stroke` (default) | Ícono neutro al inicio de una fila, sobre fondo blanco. **Siempre con `color="gray"`.** | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 
 ### `color` — mismo significado que el badge, salvo `teal`
 
@@ -43,25 +43,25 @@ ni un color para stable.
 
 | valor | estado de la paleta | cuándo | fuente |
 |---|---|---|---|
-| `gray` (default) | faded | Neutro. El único color para `stroke`. | propuesta |
-| `blue` | information | Información. | propuesta |
-| `orange` | warning | Pendiente, pide atención. | propuesta |
-| `red` | error | Error, bloqueado, rechazado. | propuesta |
-| `green` | success | Bien, listo, aprobado. | propuesta |
-| `yellow` | away | En pausa. | propuesta |
-| `purple` | feature | Novedad. | propuesta |
-| `pink` | highlighted | Destacado. | propuesta |
-| `teal` | verified | Verificado. | propuesta |
+| `gray` (default) | faded | Neutro. El único color para `stroke`. | canon (aprobado por el dueño, 05-10-2026, bloque B3) |
+| `blue` | information | Información. | canon (aprobado por el dueño, 05-10-2026, bloque B3) |
+| `orange` | warning | Pendiente, pide atención. | canon (aprobado por el dueño, 05-10-2026, bloque B3) |
+| `red` | error | Error, bloqueado, rechazado. | canon (aprobado por el dueño, 05-10-2026, bloque B3) |
+| `green` | success | Bien, listo, aprobado. | canon (aprobado por el dueño, 05-10-2026, bloque B3) |
+| `yellow` | away | En pausa. | canon (aprobado por el dueño, 05-10-2026, bloque B3) |
+| `purple` | feature | Novedad. | canon (aprobado por el dueño, 05-10-2026, bloque B3) |
+| `pink` | highlighted | Destacado. | canon (aprobado por el dueño, 05-10-2026, bloque B3) |
+| `teal` | verified | Verificado. | canon (aprobado por el dueño, 05-10-2026, bloque B3) |
 
 ### `size`
 
 | valor | ícono | cuándo | fuente |
 |---|---|---|---|
-| `32` | 20 | Filas densas. | propuesta |
-| `40` (default) | 20 | Filas de una lista. | propuesta |
-| `48` | 24 | Cards. | propuesta |
-| `56` | 28 | Cabecera de un modal. | propuesta |
-| `64` | 32 | El resultado de un modal: cuenta bloqueada, calificación enviada. | propuesta |
+| `32` | 20 | Filas densas. | canon (dueño, 05-10-2026, P1 b) |
+| `40` (default) | 20 | Filas de una lista. | canon (dueño, 05-10-2026, P1 b) |
+| `48` | 24 | Cards. | canon (dueño, 05-10-2026, P1 b) |
+| `56` | 28 | Cabecera de un modal. | canon (dueño, 05-10-2026, P1 b) |
+| `64` | 32 | El resultado de un modal: cuenta bloqueada, calificación enviada. | canon (dueño, 05-10-2026, P1 b) |
 
 **Usos de hoy que romperían la propuesta: 7 círculos con ícono hechos a mano.** Dos son un
 `sui-key-icon` `lighter` exacto: `components/cuenta-bloqueada/cuenta-bloqueada.html:4` (64 px,
@@ -77,7 +77,10 @@ Se encontraron buscando reglas `*icon*` con `border-radius: 50%`, fondo y 32–6
 En mobile se lee y se toca con el dedo, así que va más grande; en web, más chico. En las
 pantallas que se usan en los dos (panel del local, super admin) se elige con el servicio de
 breakpoints de la app (`bp`, en `services/breakpoints.service.ts`); en las que solo existen en
-el celular (cliente, repartidor) va directo el valor de mobile. Todo es **propuesta**.
+el celular (cliente, repartidor) va directo el valor de mobile. No se toca, así que la tablet va
+con el valor de web, y el celular chico (< 380 px) también (D16).
+Es **canon (dueño, 05-10-2026, P1 b)**: un paso más grande en el celular que en computadora, y
+se migra todo ahora, no solo al tocar cada pantalla.
 
 | uso | mobile | web |
 |---|---|---|

package/docs/sui-link-button/README.md

@@ -73,7 +73,7 @@ Es el reemplazo del `sui-button` `ghost` `primary`.
 |---|---|---|
 | `large` (24 px, texto 16, ícono 20) | Mobile, donde se lee y se toca con el dedo: el link suelto de una pantalla de teléfono. | propuesta: el tamaño es extensión SUI aprobada (03-10-2026); el «cuándo» falta aprobarlo |
 | `medium` (20 px, default) | Lo normal: cabeceras de sección, párrafos, acciones sueltas. | default según la guía del DS; el «cuándo» es canon (aprobado por el dueño, 03-10-2026) |
-| `small` (16 px) | Junto a un dato en una fila: «Cambiar», «Mi billetera», «Cambiar mi calificación». | canon (aprobado por el dueño, 03-10-2026) |
+| `small` (16 px) | No usar: es chico. Junto a un dato en una fila («Cambiar», «Mi billetera») va `medium` en web. | canon (dueño, 05-10-2026, D16), reemplaza la regla del 03-10-2026 |
 
 ### `underline`
 
@@ -87,8 +87,8 @@ Es el reemplazo del `sui-button` `ghost` `primary`.
 | prop | cuándo | fuente |
 |---|---|---|
 | `rightIcon` (`arrow-right-s-line`) | Cuando el link lleva a otra pantalla: «Ver la carta», «Mi billetera». | canon (aprobado por el dueño, 03-10-2026) |
-| `leftIcon` | Cuando el ícono dice la acción: descargar, editar, agregar, ver. «Descargar la app», «Agregar nota para el conductor». | propuesta |
-| los dos a la vez | No: con dos íconos el link deja de leerse como texto. | propuesta |
+| `leftIcon` | Cuando el ícono dice la acción: descargar, editar, agregar, ver. «Descargar la app», «Agregar nota para el conductor». | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| los dos a la vez | No: con dos íconos el link deja de leerse como texto. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 
 Los íconos son nombres RemixIcon sin el prefijo `ri-`. Miden 20 px en `large` y `medium`, y 16 px en `small`.
 
@@ -96,7 +96,7 @@ Los íconos son nombres RemixIcon sin el prefijo `ri-`. Miden 20 px en `large` y
 
 | disabled | cuándo | fuente |
 |---|---|---|
-| `true` | La acción existe pero ahora no se puede: mientras se guarda, mientras se procesa otra acción. Mejor que esconderla si la persona la espera en ese lugar. | cómo se ve: según la guía del DS · cuándo: propuesta |
+| `true` | La acción existe pero ahora no se puede: mientras se guarda, mientras se procesa otra acción. Mejor que esconderla si la persona la espera en ese lugar. | cómo se ve: según la guía del DS · cuándo: canon (aprobado por el dueño, 05-10-2026, bloque B8) |
 
 Ejemplos: `components/add-product-modal/add-product-modal.html:339` («Vista previa» mientras guarda),
 `pages/orders/orders.html:233`.
@@ -105,18 +105,21 @@ Ejemplos: `components/add-product-modal/add-product-modal.html:339` («Vista pre
 
 | prop | cuándo | fuente |
 |---|---|---|
-| `href` | Navegar, sin otra acción: el componente pinta un `<a>` real. Las rutas internas (`/cliente/…`) navegan con el Router, sin recargar. | propuesta |
-| `target="_blank"` | Solo para destinos externos: la descarga, un documento, WhatsApp. **Pon también `rel="noopener noreferrer"`**: aquí el default de `rel` es `null`. | propuesta |
-| `type="submit"` | Solo dentro de un `<form>`. El resto, `button` (default). | propuesta (mismo criterio que `sui-button`) |
-| `ariaLabel` | Cuando el texto visible no basta fuera de contexto: «Descargar la app» → «Descargar la app de Master Pedidos». | propuesta |
+| `href` | Navegar, sin otra acción: el componente pinta un `<a>` real. Las rutas internas (`/cliente/…`) navegan con el Router, sin recargar. | canon (aprobado por el dueño, 05-10-2026, bloque B10) |
+| `target="_blank"` | Solo para destinos externos: la descarga, un documento, WhatsApp. **Pon también `rel="noopener noreferrer"`**: aquí el default de `rel` es `null`. | canon (aprobado por el dueño, 05-10-2026, bloque B10) |
+| `type="submit"` | Solo dentro de un `<form>`. El resto, `button` (default). | canon (aprobado por el dueño, 05-10-2026, bloque B10) (mismo criterio que `sui-button`) |
+| `ariaLabel` | Cuando el texto visible no basta fuera de contexto: «Descargar la app» → «Descargar la app de Master Pedidos». | canon (aprobado por el dueño, 05-10-2026, bloque B10) |
 
 ## Tamaño en mobile y en web
 
-En mobile se toca con el dedo: el área táctil tiene que medir **44 px o más**. En web, con mouse,
-va un tamaño más chico. La app ya lo resuelve con `BreakpointsService`
-(`src/app/services/breakpoints.service.ts`, mobile = hasta 767 px):
-`[size]="bp.isMobile() ? 'large' : 'small'"`. Medido el 04-10-2026 en `master-pedidos`: 166 `[size]`
-con `bp` (142 `large`/`medium`, 22 `large`/`small`, 2 `medium`/`xsmall`). Regla del dueño, 03-10-2026.
+En mobile se toca con el dedo: el área táctil tiene que medir **44 px o más**. En la tablet
+(`pointer: coarse`) va igual que en el celular, porque también se toca; en la computadora
+(`pointer: fine`), `medium`; en el celular chico (< 380 px), `medium` a la vista sin bajar el área de 44.
+Nada en `small` ni `xsmall` (canon, dueño, 05-10-2026, D16; reemplaza al «tamaño por plataforma» del
+03-10-2026, que bajaba la web a `small`). Hoy la app lo resuelve con `BreakpointsService`
+(`src/app/services/breakpoints.service.ts`, mobile = hasta 767 px): `[size]="bp.isMobile() ? 'large' : 'medium'"`,
+que todavía deja la tablet en `medium` (el helper de D16 está propuesto en la hoja de decisiones). Medido el 04-10-2026 en `master-pedidos`: 166 `[size]`
+con `bp` (142 `large`/`medium`, 22 `large`/`small`, 2 `medium`/`xsmall`); los 24 que bajan de `medium` se migran.
 
 | size | alto | texto | ícono |
 |---|---|---|---|
@@ -130,17 +133,17 @@ con `bp` (142 `large`/`medium`, 22 `large`/`small`, 2 `medium`/`xsmall`). Regla
 | uso | mobile | web | fuente |
 |---|---|---|---|
 | link suelto (cabecera de sección, «Omitir», «Ver todas») | `large` (24) | `medium` (20) | web: canon (aprobado por el dueño, 03-10-2026) · mobile `large`: propuesta: el tamaño es extensión SUI aprobada (03-10-2026); el «cuándo» falta aprobarlo (antes era `medium`) |
-| junto a un dato en una fila («Cambiar», «Mi billetera») | `medium` (20) | `small` (16) | canon (aprobado por el dueño, 03-10-2026) |
-| dentro de un párrafo | el del texto que lo rodea | el del texto que lo rodea | propuesta |
+| junto a un dato en una fila («Cambiar», «Mi billetera») | `medium` (20) | `medium` (20) | web: canon (dueño, 05-10-2026, D16), antes `small` · mobile `medium`: canon (aprobado por el dueño, 03-10-2026); D16 lo llevaría a `large`, pero el tamaño del link en el teléfono espera P8 |
+| dentro de un párrafo | el del texto que lo rodea | el del texto que lo rodea | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
 
 ```html
 <sui-link-button variant="primary" [size]="bp.isMobile() ? 'large' : 'medium'" rightIcon="arrow-right-s-line">Ver todas</sui-link-button>
-<sui-link-button variant="gray" [size]="bp.isMobile() ? 'medium' : 'small'" rightIcon="arrow-right-s-line">Mi billetera</sui-link-button>
+<sui-link-button variant="gray" size="medium" rightIcon="arrow-right-s-line">Mi billetera</sui-link-button>
 ```
 
 **Ningún tamaño llega a 44 px**: el link mide 16–24 de alto y no tiene padding. En mobile el área
 táctil la pone el contenedor: la fila o el bloque donde vive tiene que medir 44 px o más de alto, o
-dejar aire alrededor del link. `small` (16) no va en mobile. Medido el 04-10-2026: los 4 de
+dejar aire alrededor del link. `small` (16) no va en ningún lado (D16, 05-10-2026). Medido el 04-10-2026: los 4 de
 repartidor y cliente ya usan `[size]="bp.isMobile() ? 'medium' : 'small'"`
 (`pages/driver/driver-profile/driver-profile.html:258` y `:264`,
 `pages/driver/driver-dashboard/driver-dashboard.html:1092`,
@@ -208,7 +211,7 @@ Slots: `<ng-content>` (el texto).
 <sui-link-button variant="primary" (clicked)="verTodas()">Ver todas</sui-link-button>
 
 <!-- Junto a un dato, lleva a otra pantalla -->
-<sui-link-button variant="gray" size="small" rightIcon="arrow-right-s-line" (clicked)="irABilletera()">
+<sui-link-button variant="gray" rightIcon="arrow-right-s-line" (clicked)="irABilletera()">
   Mi billetera
 </sui-link-button>
 

package/docs/sui-logo/README.md

@@ -27,7 +27,8 @@ uno solo.
 ## Qué variante usar
 
 > **La guía del DS no tiene este componente**: es propio de SUI, porque es la marca de la app.
-> Todo lo de abajo es **propuesta, falta aprobación**; los ejemplos salen de cómo se usa hoy.
+> Todo lo de abajo es **canon** (aprobado por el dueño el 05-10-2026, o la decisión que cita cada fila); los ejemplos salen
+> de cómo se usa hoy.
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app`: 10 logos en 8 archivos, sin contar
 > prototipos ni vitrinas. 4 `horizontal`, 3 `stacked`, 3 `markOnly`; 7 con `[height]` y 3 con `size`.
@@ -36,9 +37,9 @@ uno solo.
 
 | valor | cuándo | ejemplo real de la app | fuente |
 |---|---|---|---|
-| `horizontal` (default) | Barras y cabeceras: la M a la izquierda y la palabra en dos líneas. | `layouts/public/public-layout.html:4` · `pages/public/pedido-en-vivo/pedido-en-vivo.html:72` · `pages/role-selector/role-selector.html:10` | propuesta |
-| `stacked` | Pantallas de marca centradas: la M arriba y la palabra abajo. | `pages/empresa/about/about.html:12` · `components/ota-update/ota-update.html:118` | propuesta |
-| `[markOnly]="true"` | Donde la palabra no entra o ya está escrita al lado: nav mobile, login. | `layouts/public/public-layout.html:6` · `pages/auth/login/login.html:3` | propuesta |
+| `horizontal` (default) | Barras y cabeceras: la M a la izquierda y la palabra en dos líneas. | `layouts/public/public-layout.html:4` · `pages/public/pedido-en-vivo/pedido-en-vivo.html:72` · `pages/role-selector/role-selector.html:10` | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `stacked` | Pantallas de marca centradas: la M arriba y la palabra abajo. | `pages/empresa/about/about.html:12` · `components/ota-update/ota-update.html:118` | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `[markOnly]="true"` | Donde la palabra no entra o ya está escrita al lado: nav mobile, login. | `layouts/public/public-layout.html:6` · `pages/auth/login/login.html:3` | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 
 No existe la versión de una sola línea («Master Pedidos» en un renglón): es otro dibujo.
 
@@ -48,14 +49,14 @@ No existe la versión de una sola línea («Master Pedidos» en un renglón): es
 
 | valor | alto | cuándo | fuente |
 |---|---|---|---|
-| `xs` / `sm` | 16 / 20 | No usar hoy: la palabra no se lee (con `markOnly` sí sirve). | propuesta |
-| `md` (default) | 24 | Barra de una página pública. | propuesta |
-| `lg` | 32 | Nav pública, login. | propuesta |
-| `xl` | 40 | Pantalla de actualización. | propuesta |
-| `2xl` | 48 | Selector de rol. | propuesta |
-| `height` | libre | **Solo para más de 48 px**: el apilado de 120 en «Acerca de» y en la actualización. | propuesta |
-
-**Usos de hoy que romperían la propuesta: 4 `[height]` que van a la escala.**
+| `xs` / `sm` | 16 / 20 | No usar hoy: la palabra no se lee (con `markOnly` sí sirve). | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `md` (default) | 24 | Barra de una página pública. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `lg` | 32 | Nav pública, login. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `xl` | 40 | Pantalla de actualización. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `2xl` | 48 | Selector de rol. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `height` | libre | **Solo para más de 48 px**: el apilado de 120 en «Acerca de» y en la actualización. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+
+**Usos de hoy que romperían la regla: 4 `[height]` que van a la escala.**
 `components/ota-update/ota-update.html:17` (`40` → `size="xl"`),
 `pages/public/pedido-en-vivo/pedido-en-vivo.html:72` (`22` → `md`),
 `layouts/public/public-layout.html:6` (`28` → `lg`), `pages/customer/about/about.html:19` (`44` → `xl` o `2xl`).
@@ -64,10 +65,10 @@ No existe la versión de una sola línea («Master Pedidos» en un renglón): es
 
 | combinación | cuándo | fuente |
 |---|---|---|
-| de marca (default): M `--sui-primary-base` + palabra `--sui-text-strong-950` | Sobre fondo claro. **No hace falta pasar los colores**: ya son el default. | propuesta |
-| monocromo: todo `--sui-text-strong-950` | Login y nav pública, donde el naranja ya está en el botón principal. | propuesta |
-| blanco: todo `--sui-static-white` | Sobre naranja o sobre foto. `static-white` no cambia con el tema. | propuesta |
-| cualquier otro color | No usar. | propuesta |
+| de marca (default): M `--sui-primary-base` + palabra `--sui-text-strong-950` | Sobre fondo claro. **No hace falta pasar los colores**: ya son el default. | canon (aprobado por el dueño, 05-10-2026, bloque B3) |
+| monocromo: todo `--sui-text-strong-950` | Login y nav pública, donde el naranja ya está en el botón principal. | canon (aprobado por el dueño, 05-10-2026, bloque B3) |
+| blanco: todo `--sui-static-white` | Sobre naranja o sobre foto. `static-white` no cambia con el tema. | canon (decisión del dueño, regla de tres blancos del modo oscuro: `static-white` sobre fondo fijo) |
+| cualquier otro color | No usar. | canon (aprobado por el dueño, 05-10-2026, bloque B3) |
 
 **Usos de hoy redundantes: 6** pasan a mano los colores que ya son el default (no rompen nada,
 sobran): `components/ota-update/ota-update.html:17`, `pages/role-selector/role-selector.html:10`,
@@ -80,15 +81,15 @@ sobran): `components/ota-update/ota-update.html:17`, `pages/role-selector/role-s
 
 | input | cuándo | fuente |
 |---|---|---|
-| `[decorative]="true"` | Cuando al lado ya está escrito «Master Pedidos» (el título de «Acerca de»): así el lector de pantalla no lo dice dos veces. | propuesta |
-| `ariaLabel` | No tocar: ya dice «Master Pedidos». | propuesta |
+| `[decorative]="true"` | Cuando al lado ya está escrito «Master Pedidos» (el título de «Acerca de»): así el lector de pantalla no lo dice dos veces. | canon (aprobado por el dueño, 05-10-2026, bloque B5) |
+| `ariaLabel` | No tocar: ya dice «Master Pedidos». | canon (aprobado por el dueño, 05-10-2026, bloque B5) |
 
 ## Tamaño en mobile y en web
 
 En mobile se lee y se toca con el dedo, así que va más grande; en web, más chico. En las
 pantallas que se usan en los dos (panel del local, super admin) se elige con el servicio de
 breakpoints de la app (`bp`, en `services/breakpoints.service.ts`); en las que solo existen en
-el celular (cliente, repartidor) va directo el valor de mobile. Todo es **propuesta**.
+el celular (cliente, repartidor) va directo el valor de mobile. Es **canon (aprobado por el dueño, 05-10-2026, bloque B1)**.
 
 | uso | mobile | web |
 |---|---|---|

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,9 +104,9 @@ 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):
@@ -117,9 +117,9 @@ Hoy: 45 `small`, 63 `medium` (50 explícitos + 13 por default), 5 `large`, 14 `x
 
 | 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
 

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

@@ -79,8 +79,8 @@ 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:**
 
@@ -97,7 +97,7 @@ 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.

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
 

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,8 +47,8 @@ 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: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) |
 
 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
@@ -60,7 +60,7 @@ 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:**

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,7 @@ 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.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 |
 
 ## «No usar»: por qué no hoy y cuándo sí
 

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,7 +44,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: 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` `large` suelto | `small` (16 px) | propuesta |
 
 ```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

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

@@ -36,12 +36,12 @@ 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
 
@@ -62,8 +62,8 @@ de seguridad, no el tamaño a elegir: se ve angosto y alto.
 
 | 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) |
+| código de 4 dígitos | `large` (344 px, entra) | `large` | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
 
 ```html
 <sui-otp-input [length]="6" [size]="bp.isMobile() ? 'medium' : 'large'" [(value)]="codigo" />

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

@@ -27,8 +27,8 @@ 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`,
@@ -45,8 +45,8 @@ 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: 9 `filled`, 7 `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»).
@@ -55,8 +55,8 @@ escala del DS** (CANON-SUI §7): si se homologa, sería `title-h5`.
 
 | 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,15 +68,17 @@ 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.
+`bp.controlSize()` (`large`/`xlarge`), 2 `large`, 1 `medium`. 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. Los 10 `small` fijos y los 2 pares con
+`small` se migran.
 
 ```html
-<sui-button [size]="bp.isMobile() ? 'large' : 'small'" slot="actions">Agregar</sui-button>
+<sui-button [size]="bp.isMobile() ? 'large' : 'medium'" slot="actions">Agregar</sui-button>
 ```
 
 ## API
@@ -116,7 +118,7 @@ Slot: `slot="actions"`, a la derecha (desktop) o debajo (mobile), gap 8. No hay
 ```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.isMobile() ? 'large' : 'medium'" (click)="crear()">
     Crear descuento
   </sui-button>
 </sui-page-header>