@ajuarezso/sui-design-system 0.24.1 → 0.25.0

package/docs/sui-accordion/README.md

@@ -45,9 +45,9 @@ de cambios de una versión.
 
 | valor | cuándo | ejemplo real de la app | fuente |
 |---|---|---|---|
-| `[leftIcon]="false"` | el caso normal: el título se explica solo | `pages/envios/envios.html:412` («Más detalles (opcional)») | propuesta |
+| `[leftIcon]="false"` | el caso normal: el título se explica solo | `pages/envios/envios.html:412` («Más detalles (opcional)») | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 | `true` (default, `question-line`) | **solo** si el título es una pregunta de ayuda | `pages/driver/driver-profile/driver-profile.html:156` («¿Por qué no me llegan pedidos?») | propuesta |
-| un nombre de ícono | el ícono dice de qué es la sección y hay varias juntas | `pages/notifications/notifications.html:72` (`settings-3-line`) | propuesta |
+| un nombre de ícono | el ícono dice de qué es la sección y hay varias juntas | `pages/notifications/notifications.html:72` (`settings-3-line`) | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 
 Hoy: 16 en `false`, 2 con el default (las dos son preguntas de ayuda) y 1 con ícono propio. El
 default del componente es el caso raro: **casi siempre hay que apagarlo**.
@@ -61,7 +61,7 @@ son preguntas y van sin ícono; las dos de ayuda dentro de la app, con. Elegir u
 | qué | cuándo | fuente |
 |---|---|---|
 | `description` | **una respuesta corta en texto** (FAQ): aparece al abrir, alineada con el título | según el Figma del DS |
-| contenido proyectado | cualquier otra cosa: campos, listas, cards, tablas | propuesta |
+| contenido proyectado | cualquier otra cosa: campos, listas, cards, tablas | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 
 **A revisar:** 4 accordions pasan un **resumen** en `description` (`resumenReto()`,
 `resumenVotaciones()`, `resumenDetalles()`…) que, por cómo funciona el componente, **solo se ve
@@ -87,7 +87,7 @@ con el accordion abierto**. Si la idea era ver el resumen cerrado, hoy no se ve:
 | input | cuándo | fuente |
 |---|---|---|
 | `flipIcon="on"` | listas largas donde el «+» a la izquierda se escanea mejor que a la derecha. 0 usos hoy | según el Figma del DS (la variante existe) |
-| `badge` | marcar una sección como nueva o actualizada («Nuevo»). Extensión de SUI; 0 usos hoy | propuesta |
+| `badge` | marcar una sección como nueva o actualizada («Nuevo»). Extensión de SUI; 0 usos hoy | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 
 ## Tamaño en mobile y en web
 

package/docs/sui-activity-feed/README.md

@@ -29,28 +29,28 @@ Regla corta: **quién hizo qué → activity feed · avisos para mí → notific
 
 > **La guía del DS no tiene página del activity feed.** El componente sale del Figma de SUI
 > (Activity Feed [1.1], frame 166035:46833). Uso medido el 03-10-2026 en `master-pedidos/src/app`:
-> **0 usos**. Todo lo de abajo es **propuesta, falta aprobación**.
+> **0 usos**. Lo marcado canon está aprobado; lo que sigue en **propuesta** espera decisión.
 
 El tipo de fila lo decide `type` de cada item (una unión discriminada): lo que cuelga debajo de
 la línea de texto.
 
 | `type` | cuándo | ejemplo posible en la app | fuente |
 |---|---|---|---|
-| `default` | La acción se entiende sola con la línea. Es el caso normal. | «Ana aprobó la recarga de Luis» | propuesta, falta aprobación |
-| `file` | La acción dejó archivos que se pueden bajar. | «Luis subió su comprobante de Yape» | propuesta, falta aprobación |
-| `comment` | La acción fue escribir algo y el texto importa. | «El local dejó una nota en el pedido» | propuesta, falta aprobación |
-| `avatar-group` | La acción involucró a varias personas. | «Se asignaron 3 repartidores a la zona» | propuesta, falta aprobación |
-| `tasks` | La acción tuvo un resultado por partes (hechas, pendientes, con error). | «Se importó la carta: 40 productos, 2 con error» | propuesta, falta aprobación |
+| `default` | La acción se entiende sola con la línea. Es el caso normal. | «Ana aprobó la recarga de Luis» | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `file` | La acción dejó archivos que se pueden bajar. | «Luis subió su comprobante de Yape» | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `comment` | La acción fue escribir algo y el texto importa. | «El local dejó una nota en el pedido» | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `avatar-group` | La acción involucró a varias personas. | «Se asignaron 3 repartidores a la zona» | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `tasks` | La acción tuvo un resultado por partes (hechas, pendientes, con error). | «Se importó la carta: 40 productos, 2 con error» | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 
 | pieza del item | regla | fuente |
 |---|---|---|
-| leading | `avatar` cuando lo hizo una persona; `icon` cuando lo hizo el sistema (una Cloud Function, un cobro automático). | propuesta, falta aprobación |
+| leading | `avatar` cuando lo hizo una persona; `icon` cuando lo hizo el sistema (una Cloud Function, un cobro automático). | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 | `avatar.src` | La foto de **otra** persona va denormalizada y pasada por `fotoDeStorage()`, nunca la URL de Google. | canon (CLAUDE.md, «Fotos de otra persona») |
 | `avatar.color` | Para iniciales sin foto, `color` del set de SUI. `bgColor` solo como escape: no ajusta el color del texto. | canon del componente |
 | `userName` / `target` | Nombres, nunca IDs. | canon (CLAUDE.md, «Pasada de UX/UI»: un identificador nunca es el título de nada) |
-| `verb` | En pasado y en minúscula: «aprobó», «subió». | propuesta, falta aprobación |
-| `timestamp` | Relativo y corto: «hace 4 min», «ayer». Lo formateas tú. | propuesta, falta aprobación |
-| `showAction` | `false` salvo que haya un menú real detrás de los tres puntos. | propuesta, falta aprobación |
+| `verb` | En pasado y en minúscula: «aprobó», «subió». | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `timestamp` | Relativo y corto: «hace 4 min», «ayer». Lo formateas tú. | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `showAction` | `false` salvo que haya un menú real detrás de los tres puntos. | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
 
 **Carga:** un historial crece sin techo. Se pide por páginas con cursor (`getCollectionPage`
 ordenado por fecha) y un «Cargar más» al final, nunca la colección entera. Canon
@@ -136,7 +136,7 @@ interface SuiActivityTask { state: 'success' | 'warning' | 'pending' | 'error';
 <sui-card>
   <sui-activity-feed [items]="historial()" (fileDownload)="descargar($event.file)" />
   @if (hayMas()) {
-    <sui-button variant="stroke" color="neutral" [size]="bp.isMobile() ? 'large' : 'small'"
+    <sui-button variant="stroke" color="neutral" [size]="bp.isMobile() ? 'large' : 'medium'"
                 (click)="cargarMas()">Cargar más</sui-button>
   }
 </sui-card>

package/docs/sui-activity-filter/README.md

@@ -28,16 +28,16 @@ Regla corta: **filtros del activity feed → activity filter · cualquier otra l
 
 > **La guía del DS no tiene página de este filtro.** Sale del Figma de SUI (Activity Feed Selected
 > Filter [1.1], frame 165967:3881: Default, Hover, Active). Uso medido el 03-10-2026 en
-> `master-pedidos/src/app`: **0 usos**. Lo de abajo es **propuesta, falta aprobación**.
+> `master-pedidos/src/app`: **0 usos**. Lo marcado canon está aprobado; lo que sigue en **propuesta** espera decisión.
 
 | prop | cuándo | fuente |
 |---|---|---|
 | `active` | El filtro que está aplicado (fondo naranja al 10 %, texto e ícono naranja). | Figma (State=Active) |
-| `icon` | Un ícono que diga el tipo: `file-list-2-line` archivos, `chat-3-line` comentarios, `task-line` tareas. | propuesta, falta aprobación |
-| `icon` en `null` | «Todos»: el chip que limpia el filtro va sin ícono. | propuesta, falta aprobación |
+| `icon` | Un ícono que diga el tipo: `file-list-2-line` archivos, `chat-3-line` comentarios, `task-line` tareas. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `icon` en `null` | «Todos»: el chip que limpia el filtro va sin ícono. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 | `disabled` | Un tipo que no tiene ninguna actividad en el rango elegido. Mejor que esconderlo: la fila no salta. | propuesta, falta aprobación (el disabled no está en el Figma) |
 
-¿Uno o varios a la vez? El componente no lo decide. Propuesta: **uno a la vez, con «Todos»**,
+¿Uno o varios a la vez? El componente no lo decide. Canon (aprobado por el dueño, 05-10-2026, bloque B8): **uno a la vez, con «Todos»**,
 igual que `sui-tab-chips`; así nadie se queda con un historial vacío por combinar filtros.
 
 ## Tamaño en mobile y en web
@@ -46,7 +46,7 @@ igual que `sui-tab-chips`; así nadie se queda con un historial vacío por combi
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| filtros del activity feed | no usar: 30 no llega al dedo; usar `sui-tab-chips` en `large` | `sui-activity-filter` | propuesta, falta aprobación |
+| filtros del activity feed | no usar: 30 no llega al dedo; usar `sui-tab-chips` en `xlarge` (44) | `sui-activity-filter` | canon (aprobado por el dueño, 05-10-2026, bloque B13) |
 
 La fila de chips la arma la pantalla: el componente no trae contenedor ni scroll lateral.
 

package/docs/sui-app-store-badge/README.md

@@ -25,7 +25,7 @@ Google Play, en ese orden.
 ## Qué variante usar
 
 > **La guía del DS no tiene página para este componente.** Todo lo de abajo es **canon (aprobado
-> por el dueño, 03-10-2026)** o propuesta. Los sellos son los oficiales de cada tienda (cada una
+> por el dueño, 03-10-2026 o 05-10-2026)** o propuesta. Los sellos son los oficiales de cada tienda (cada una
 > pide usar el suyo tal cual, sin recolorear ni tocar el logo).
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app`: 10 sellos en 4 archivos, sin contar
@@ -55,12 +55,12 @@ Google Play, en ese orden.
 
 | prop | cuándo | fuente |
 |---|---|---|
-| `height` (40, default) | 40 en desktop y en el footer. El ancho sale solo de la proporción de cada sello. | propuesta |
+| `height` (40, default) | 40 en web; el footer en mobile va a 44. El ancho sale solo de la proporción de cada sello. | canon (aprobado por el dueño, 05-10-2026, bloque B13) |
 | `height` 48 | En el hero de una landing en mobile, si los sellos son el CTA principal. Los dos sellos siempre a la misma altura. | propuesta |
-| `href` | Siempre: el link de la ficha de la tienda (`apps.apple.com/pe/app/master-pedidos/…`, `play.google.com/store/apps/details?id=com.masterpedidos.app`). Sin `href` el sello no es un link. | propuesta (es la práctica de los 10 usos de hoy) |
-| `target="_blank"` | Siempre que hay `href`: el `rel="noopener"` se aplica solo en ese caso. | propuesta |
-| `ariaLabel` | Siempre, en español: «Descargar Master Pedidos en App Store». Sin él, el texto alternativo es genérico («Descargar en App Store», en español desde el 04-10-2026). | propuesta |
-| `disabled` | Sin caso: si la app no está en una tienda, no se muestra su sello. | propuesta |
+| `href` | Siempre: el link de la ficha de la tienda (`apps.apple.com/pe/app/master-pedidos/…`, `play.google.com/store/apps/details?id=com.masterpedidos.app`). Sin `href` el sello no es un link. | canon (aprobado por el dueño, 05-10-2026, bloque B10) (es la práctica de los 10 usos de hoy) |
+| `target="_blank"` | Siempre que hay `href`: el `rel="noopener"` se aplica solo en ese caso. | canon (aprobado por el dueño, 05-10-2026, bloque B10) |
+| `ariaLabel` | Siempre, en español: «Descargar Master Pedidos en App Store». Sin él, el texto alternativo es genérico («Descargar en App Store», en español desde el 04-10-2026). | canon (aprobado por el dueño, 05-10-2026, bloque B5) |
+| `disabled` | Sin caso: si la app no está en una tienda, no se muestra su sello. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 
 ## Tamaño en mobile y en web
 
@@ -74,7 +74,7 @@ Regla del dueño, 03-10-2026.
 | uso | mobile | web | fuente |
 |---|---|---|---|
 | hero de una landing, cuando los sellos son el CTA | `[height]="48"` | `[height]="40"` | propuesta |
-| footer de las landings, «Descarga la app» | `[height]="44"` | `[height]="40"` (default) | propuesta |
+| footer de las landings, «Descarga la app» | `[height]="44"` | `[height]="40"` (default) | mobile: canon (decisión del dueño 04-10-2026, piso táctil 44) · web: propuesta |
 
 ```html
 <sui-app-store-badge company="app-store" [height]="bp.isMobile() ? 48 : 40" href="…" target="_blank"

package/docs/sui-avatar/README.md

@@ -29,7 +29,7 @@ Regla corta: **es alguien → avatar · es una cosa → key-icon · son varios
 
 > **La guía del DS dice qué es y qué opciones tiene, no cuándo usar cada una.** Lo marcado
 > «según la guía del DS» sale de su texto o de su código publicado; lo marcado «canon» ya es
-> regla escrita del proyecto (`CLAUDE.md`); el resto es **propuesta, falta aprobación**.
+> regla escrita del proyecto (`CLAUDE.md`) o lo aprobó el dueño; el resto es **propuesta, falta aprobación**.
 >
 > Uso medido el 04-10-2026 en `master-pedidos/src/app`: 55 avatares en los templates, sin contar
 > prototipos ni vitrinas (`master-preview`, `master-prototipos`, `mockup-sheets-*`, `dx/*`,
@@ -58,21 +58,21 @@ la foto falla al cargar, cae sola a las iniciales.
 |---|---|---|
 | foto (`src`) | Siempre que exista. Si es la foto **de otra persona**, es su `avatarUrl` de nuestro Storage, denormalizada en el documento por la Cloud Function y filtrada por `fotoDeStorage()`. **Nunca `photoURL` de Google**: solo carga en el navegador del dueño de esa cuenta. | canon (`CLAUDE.md`, «Fotos de otra persona») |
 | `initials` | Sin foto. Pasa el **nombre completo**: el componente saca las iniciales. | según la guía del DS |
-| `icon` | Solo para «todavía no hay nadie»: pedido sin repartidor (`e-bike-2-line`), envío sin destinatario (`user-3-line`). Va con `color="gray"`. Extensión de SUI. | propuesta |
+| `icon` | Solo para «todavía no hay nadie»: pedido sin repartidor (`e-bike-2-line`), envío sin destinatario (`user-3-line`). Va con `color="gray"`. Extensión de SUI. | canon (aprobado por el dueño, 05-10-2026, bloque B3) |
 | silueta | Cae sola cuando no hay ni nombre. No se pide a propósito. | según la guía del DS |
 
 ### `size`
 
 | size | px | cuándo | ejemplo real de la app | fuente |
 |---|---|---|---|---|
-| `xs` | 20 | Pegado a un texto en la misma línea. | `components/sidebar/sidebar.html:77` (selector de local) · `pages/envios/envios.html:250` | propuesta |
-| `sm` | 24 | Chips y filas compactas. | `pages/driver/driver-dashboard/driver-dashboard.html:1047` (quién tomó el pedido) | propuesta |
-| `md` (default SUI) | 32 | Filas de listas y tablas. | `pages/super-admin/master-orders/master-orders.html:197` | propuesta |
-| `lg` | 40 | La tarjeta de una persona o de un local. | `pages/customer/order-tracking/order-tracking.html:348` (tu repartidor) | propuesta |
-| `xl` | 48 | Cabecera de un panel. | `pages/driver/driver-dashboard/driver-dashboard.html:19` (tu foto) | propuesta |
-| `2xl` | 56 | Cabecera de una ficha. | `pages/super-admin/master-users/master-user-sheet.html:21` | propuesta |
-| `3xl` | 64 | Tu propia foto al registrarte. | `pages/driver-onboarding/step-info/step-info.html:31` | propuesta |
-| `4xl` / `5xl` | 72 / 80 | No usar hoy (ver «No usar»). | — | propuesta |
+| `xs` | 20 | Pegado a un texto en la misma línea. | `components/sidebar/sidebar.html:77` (selector de local) · `pages/envios/envios.html:250` | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `sm` | 24 | Chips y filas compactas. | `pages/driver/driver-dashboard/driver-dashboard.html:1047` (quién tomó el pedido) | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `md` (default SUI) | 32 | Filas de listas y tablas. | `pages/super-admin/master-orders/master-orders.html:197` | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `lg` | 40 | La tarjeta de una persona o de un local. | `pages/customer/order-tracking/order-tracking.html:348` (tu repartidor) | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `xl` | 48 | Cabecera de un panel. | `pages/driver/driver-dashboard/driver-dashboard.html:19` (tu foto) | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `2xl` | 56 | Cabecera de una ficha. | `pages/super-admin/master-users/master-user-sheet.html:21` | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `3xl` | 64 | Tu propia foto al registrarte. | `pages/driver-onboarding/step-info/step-info.html:31` | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `4xl` / `5xl` | 72 / 80 | No usar hoy (ver «No usar»). | — | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
 
 Hasta `md` (32 px) se ve **una** inicial; desde `lg` (40 px), dos. Es del Figma: en chico dos
 letras no entran.
@@ -113,11 +113,11 @@ logueada sigue en el default.
 
 | status | cuándo | fuente |
 |---|---|---|
-| `online` | Conectado **ahora** (repartidor en línea). No significa «cuenta activa». | propuesta (el valor es de la guía) |
-| `away` | En pausa: conectado pero sin recibir pedidos. | propuesta (el valor es de la guía) |
-| `busy` | Ocupado: ya lleva un pedido. | propuesta (el valor es de la guía) |
-| `offline` | Desconectado. Si en esa lista todos estarían `offline` casi siempre, mejor sin punto. | propuesta (el valor es de la guía) |
-| `company` | Repartidor propio de un local: el logo del local abajo (con `companyLogoSrc`). | propuesta (la guía lo muestra como «con logo de marca») |
+| `online` | Conectado **ahora** (repartidor en línea). No significa «cuenta activa». | canon (aprobado por el dueño, 05-10-2026, bloque B2) (el valor es de la guía) |
+| `away` | En pausa: conectado pero sin recibir pedidos. | canon (aprobado por el dueño, 05-10-2026, bloque B2) (el valor es de la guía) |
+| `busy` | Ocupado: ya lleva un pedido. | canon (aprobado por el dueño, 05-10-2026, bloque B2) (el valor es de la guía) |
+| `offline` | Desconectado. Si en esa lista todos estarían `offline` casi siempre, mejor sin punto. | canon (aprobado por el dueño, 05-10-2026, bloque B2) (el valor es de la guía) |
+| `company` | Repartidor propio de un local: el logo del local abajo (con `companyLogoSrc`). | canon (aprobado por el dueño, 05-10-2026, bloque B2) (la guía lo muestra como «con logo de marca») |
 
 **Usos de hoy que rompen la regla: 2.** Los dos usan el punto para el **estado de la cuenta**,
 no para la presencia: `pages/settings/team/team.html:99` (activo/pendiente/inactivo →
@@ -128,9 +128,9 @@ online/away/offline, mapeo en `pages/settings/team/team.ts:99`) y `pages/employe
 
 | topBadge | cuándo | fuente |
 |---|---|---|
-| `verified` | Identidad revisada (repartidor aprobado). | propuesta (la guía muestra un sello de verificado arriba) |
-| `notification` | Tiene algo sin leer. | propuesta (el punto rojo arriba es de la guía) |
-| `favorite`, `pin`, `add`, `remove` | No usar hoy (ver «No usar»). | propuesta |
+| `verified` | Identidad revisada (repartidor aprobado). | canon (aprobado por el dueño, 05-10-2026, bloque B2) (la guía muestra un sello de verificado arriba) |
+| `notification` | Tiene algo sin leer. | canon (aprobado por el dueño, 05-10-2026, bloque B2) (el punto rojo arriba es de la guía) |
+| `favorite`, `pin`, `add`, `remove` | No usar hoy (ver «No usar»). | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 
 Hoy no hay ningún `topBadge` en la app.
 
@@ -138,10 +138,10 @@ Hoy no hay ningún `topBadge` en la app.
 
 | input | cuándo | fuente |
 |---|---|---|
-| `alt` | **Siempre** el nombre de quien es. Con foto va en el `<img>`; con iniciales, ícono o silueta el host pasa a `role="img"` con `aria-label` = `alt` (desde el 04-10-2026; antes el lector leía la letra suelta). Sin `alt`, el lector no dice nada. | propuesta |
-| `companyLogoSrc` | Solo con `status="company"`. | propuesta |
-| `memojiSrc`, `illustrationSrc` | No usar hoy. | propuesta |
-| `bgColor` | No usar (ver abajo). | propuesta |
+| `alt` | **Siempre** el nombre de quien es. Con foto va en el `<img>`; con iniciales, ícono o silueta el host pasa a `role="img"` con `aria-label` = `alt` (desde el 04-10-2026; antes el lector leía la letra suelta). Sin `alt`, el lector no dice nada. | canon (aprobado por el dueño, 05-10-2026, bloque B5) |
+| `companyLogoSrc` | Solo con `status="company"`. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `memojiSrc`, `illustrationSrc` | No usar hoy. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `bgColor` | No usar (ver abajo). | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 
 **Usos de hoy sin `alt`: 9** (más uno decorativo que está bien sin él,
 `pages/super-admin/master-orders/master-orders.html:586`). Ejemplos:
@@ -168,7 +168,10 @@ disfrazado. Todos pasaron a `color` por rol.
 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-avatar-group/README.md

@@ -23,7 +23,8 @@ conectados en una zona. Cada persona se ve chica; el grupo es lo que cuenta.
 ## Qué variante usar
 
 > **La guía del DS dice qué es y sus tamaños, no cuándo usarlo.** Lo marcado «según la guía
-> del DS» sale de su texto o de su código; el resto es **propuesta, falta aprobación**.
+> del DS» sale de su texto o de su código; lo marcado «canon» ya lo aprobó el dueño; el resto es
+> **propuesta, falta aprobación**.
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos directos**. En el DS no lo
 > monta ningún componente: `sui-table` solo lo nombra como contenido que se proyecta en una celda.
@@ -39,11 +40,11 @@ conectados en una zona. Cada persona se ve chica; el grupo es lo que cuenta.
 
 | input | valor | cuándo | fuente |
 |---|---|---|---|
-| `size` | `sm` (24) | Dentro de una fila: «los que tomaron pedidos hoy». | propuesta |
-| `size` | `md` (32, default SUI) | La card del equipo de un local. | propuesta |
-| `size` | `lg` (40) | La cabecera de un panel (repartidores en la zona). | propuesta |
-| `size` | `xs`, `xl` a `5xl` | No usar hoy: en `xs` el «+N» no se lee; desde `xl` ya no es un resumen. | propuesta |
-| `max` | `3` | Tres visibles y el «+N», como el ejemplo de la guía. El default de SUI es `4`. | propuesta |
+| `size` | `sm` (24) | Dentro de una fila: «los que tomaron pedidos hoy». | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `size` | `md` (32, default SUI) | La card del equipo de un local. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `size` | `lg` (40) | La cabecera de un panel (repartidores en la zona). | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `size` | `xs`, `xl` a `5xl` | No usar hoy: en `xs` el «+N» no se lee; desde `xl` ya no es un resumen. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `max` | `3` | Tres visibles y el «+N», como el ejemplo de la guía. El default de SUI es `4`. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
 | `items` | — | Cada item es `{ src, initials, color, alt }`. Las reglas de foto y color son las de `sui-avatar`: la foto de otra persona es su `avatarUrl` de Storage, y el `color` va **siempre** explícito por rol (sin `color` el item cae a `slate`). | canon (`CLAUDE.md`, «Fotos de otra persona») · canon (aprobado por el dueño, 03-10-2026: naranja local, verde repartidor, azul cliente) |
 
 Usos de hoy que rompen la regla: **0** (no hay usos).
@@ -53,7 +54,10 @@ Usos de hoy que rompen la regla: **0** (no hay usos).
 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-badge/README.md

@@ -127,8 +127,8 @@ un paso más fuerte con texto **oscuro**; `filled` = fondo saturado con texto bl
 | eje | valor | cuándo | fuente |
 |---|---|---|---|
 | `size` | `small` (default, 16 px) | Lo normal. **Va en MAYÚSCULAS.** | según la guía del DS (mayúsculas y default) |
-| `size` | `small` | Una o dos palabras, justamente por las mayúsculas. | canon (aprobado por el dueño, 03-10-2026) |
-| `size` | `medium` (20 px) | Texto que no debe ir en mayúsculas (nombres, montos) o un badge que acompaña un título grande. | canon (aprobado por el dueño, 03-10-2026) |
+| `size` | `small` | No usar: es chico (D16). Hasta el 05-10-2026 era el normal de web, en mayúsculas. | canon (dueño, 05-10-2026, D16); reemplaza la regla del 03-10-2026 |
+| `size` | `medium` (20 px) | **Lo normal en la computadora, la tablet y el celular chico** (el badge no se toca), sin mayúsculas. En el celular, `large` o `xlarge` (ver «Tamaño»). | canon (dueño, 05-10-2026, D16); antes, canon del 03-10-2026 solo para nombres, montos y títulos grandes |
 | `type` | `number` | **Números**: queda cuadrado/circular. | según la guía del DS |
 | `type` | `number` | Va con `filled` cuando el conteo pide acción. | canon (aprobado por el dueño, 03-10-2026) |
 | `type` | `with-dot` | Un estado **vivo** que cambia solo (abierto, en línea, en curso). La guía lo muestra pero no dice cuándo. | canon (aprobado por el dueño, 03-10-2026) |
@@ -156,7 +156,7 @@ pedidos con muchos estados (`pages/orders/orders.html:113`) se quedan como badge
 
 ## Tamaño en mobile y en web
 
-En mobile el badge se lee de más lejos y al lado de textos de 16 px; en web va más chico.
+En mobile el badge se lee de más lejos y al lado de textos de 16 px; en la computadora, la tablet y el celular chico va `medium`, un paso más chico (P1 b), y nunca `small` (D16).
 `large` (24) y `xlarge` (28) son extensión SUI del 03-10-2026.
 
 | size | alto | texto | ícono del slot |
@@ -175,16 +175,16 @@ canon (dueño, 04-10-2026):** el badge mantiene su escala propia 12 / 14 / 16 (`
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| estado en una lista o card | `large` (24) | `small` (16, mayúsculas) | canon (aprobado por el dueño, 03-10-2026) |
-| junto a un título o un monto | `xlarge` (28) | `medium` (20) | propuesta, falta aprobación |
-| conteo (`type="number"`) | `large` (24) | `small` (16) | propuesta, falta aprobación |
+| estado en una lista o card | `large` (24) | `medium` (20) | mobile: canon (aprobado por el dueño, 03-10-2026) · web: canon (dueño, 05-10-2026, D16), antes `small` (03-10-2026) · un paso de diferencia: canon (dueño, 05-10-2026, P1 b) |
+| junto a un título o un monto | `xlarge` (28) | `medium` (20) | canon (dueño, 05-10-2026, P1 b) |
+| conteo (`type="number"`) | `large` (24) | `medium` (20) | canon (dueño, 05-10-2026, P1 b); web `medium`: canon (dueño, 05-10-2026, D16) · antes de migrar, ver en captura que el contador de 24 no tape el ícono de la barra inferior |
 
 Patrón (`bp` = `BreakpointsService`, mobile hasta 767 px). Medido el 04-10-2026: solo 6 de los
 214 badges de la app lo aplican (`pages/customer/cart/cart.html:71`,
 `pages/customer/order-history/order-history.html:176`…); el resto va con `size` fijo:
 
 ```html
-<sui-badge [size]="bp.isMobile() ? 'large' : 'small'" …/>
+<sui-badge [size]="bp.isMobile() ? 'large' : 'medium'" …/>
 ```
 
 ## API

package/docs/sui-banner/README.md

@@ -44,7 +44,7 @@ puesto.
 
 > La guía del DS dice **para qué** es el banner, pero no cuándo va cada relleno ni cada tipo. Lo
 > marcado «según la guía del DS» sale de su texto o de sus ejemplos publicados; lo marcado
-> «canon» ya lo aprobó el dueño en el README de `sui-alert`; el resto es **propuesta** y falta su ok.
+> «canon» ya lo aprobó el dueño (en el README de `sui-alert` o el 05-10-2026); el resto es **propuesta** y falta su ok.
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app`, sin contar prototipos ni vitrinas
 > (`master-preview`, `master-prototipos`, `mockup-*`, `dx/*`, `_guia-*`, `master-rutina`,
@@ -67,10 +67,10 @@ Los mismos cinco tipos que `sui-alert`, con el mismo significado.
 
 | variant | cuándo | ejemplo real de la app | fuente |
 |---|---|---|---|
-| `info` (default) | Un dato de toda la app que conviene saber y no pide nada: hay una versión nueva, estás viendo datos de prueba. | (sin uso hoy) | propuesta (sigue la regla canon del alert) |
-| `success` | Un estado bueno que dura y afecta a todo: «Tu local ya está publicado». Si es la confirmación de un clic, es toast. | (sin uso hoy) | propuesta (sigue la regla canon del alert) |
-| `warning` | Hay que hacer algo pronto o lo que hagas tiene consecuencia para toda la cuenta: el plan vence, estás administrando un local que no es tuyo. | `components/subscription-banner/subscription-banner.html:5` («Tu plan vence en 3 días») · candidato: `components/impersonation-banner/impersonation-banner.ts:17` | propuesta (sigue la regla canon del alert) |
-| `error` | Algo ya pasó y afecta a toda la cuenta. | `components/subscription-banner/subscription-banner.html:5` («Tu plan venció») | propuesta (sigue la regla canon del alert) |
+| `info` (default) | Un dato de toda la app que conviene saber y no pide nada: hay una versión nueva, estás viendo datos de prueba. | (sin uso hoy) | canon (aprobado por el dueño, 05-10-2026, bloque B3) (sigue la regla canon del alert) |
+| `success` | Un estado bueno que dura y afecta a todo: «Tu local ya está publicado». Si es la confirmación de un clic, es toast. | (sin uso hoy) | canon (aprobado por el dueño, 05-10-2026, bloque B3) (sigue la regla canon del alert) |
+| `warning` | Hay que hacer algo pronto o lo que hagas tiene consecuencia para toda la cuenta: el plan vence, estás administrando un local que no es tuyo. | `components/subscription-banner/subscription-banner.html:5` («Tu plan vence en 3 días») · candidato: `components/impersonation-banner/impersonation-banner.ts:17` | canon (aprobado por el dueño, 05-10-2026, bloque B3) (sigue la regla canon del alert) |
+| `error` | Algo ya pasó y afecta a toda la cuenta. | `components/subscription-banner/subscription-banner.html:5` («Tu plan venció») | canon (aprobado por el dueño, 05-10-2026, bloque B3) (sigue la regla canon del alert) |
 | `feature` | Novedad que alcanza a toda la app. **Aquí es gris**, no morado como en el alert. | (sin uso hoy) | canon (decisión documentada en el `.ts`, recogida en el README del alert) |
 
 ### `variantStyle` — el peso visual
@@ -79,20 +79,20 @@ Misma pregunta que en el alert: **¿este aviso tiene que ganarle a todo lo demá
 
 | variantStyle | cuándo | ejemplo real de la app | fuente |
 |---|---|---|---|
-| `lighter` | El aviso **acompaña**: hay que tenerlo presente, pero se puede seguir trabajando. Es el caso normal. | `subscription-banner.html:7` en el caso «vence en N días» (hoy en `light`) | propuesta |
-| `filled` (default de la guía) | Hay que **actuar ya**, o la app está en un **modo que cambia lo que haces**: el plan venció, estás administrando otro local. Uno a la vez. | `subscription-banner.html:7` («Tu plan venció») | propuesta |
-| `light` | No usar hoy, como en el alert. **Cuándo sí:** un banner dentro de una zona ya teñida, donde `lighter` se pierde. | — | propuesta |
-| `stroke` (default SUI) | No usar hoy: un banner blanco con borde se confunde con la barra superior. **Cuándo sí:** arriba de una pantalla a sangre (un mapa o una foto), donde la banda blanca sí se distingue. | — | propuesta |
+| `lighter` | El aviso **acompaña**: hay que tenerlo presente, pero se puede seguir trabajando. Es el caso normal. | `subscription-banner.html:7` en el caso «vence en N días» (hoy en `light`) | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `filled` (default de la guía) | Hay que **actuar ya**, o la app está en un **modo que cambia lo que haces**: el plan venció, estás administrando otro local. Uno a la vez. | `subscription-banner.html:7` («Tu plan venció») | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `light` | No usar hoy, como en el alert. **Cuándo sí:** un banner dentro de una zona ya teñida, donde `lighter` se pierde. | — | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `stroke` (default SUI) | No usar hoy: un banner blanco con borde se confunde con la barra superior. **Cuándo sí:** arriba de una pantalla a sangre (un mapa o una foto), donde la banda blanca sí se distingue. | — | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 
 ### `dismissible`, `showIcon`, acción y título
 
 | prop | valor | cuándo | fuente |
 |---|---|---|---|
-| `dismissible` | `true` | Solo si el aviso se puede ignorar sin problema (versión nueva, novedad). La guía lo muestra en todos sus ejemplos. | según la guía del DS (que exista) · propuesta (cuándo) |
-| `dismissible` | `false` (default) | Todo `filled` y todo aviso que tiene que seguir ahí: plan vencido, administrando otro local. Cerrarlo no arregla nada. | propuesta |
-| `showIcon` | `true` (default) | Siempre: el ícono es la mitad del significado del tipo. | propuesta |
-| `showIcon` | `false` | No usar hoy. **Cuándo sí:** cuando se proyecta un avatar o logo en `slot="icon"` (ver abajo), que ya ocupa ese lugar. | propuesta |
-| `slot="icon"` | avatar o logo | Reemplaza al ícono del tipo: el logo del local que estás administrando. | propuesta |
+| `dismissible` | `true` | Solo si el aviso se puede ignorar sin problema (versión nueva, novedad). La guía lo muestra en todos sus ejemplos. | según la guía del DS (que exista) · canon (aprobado por el dueño, 05-10-2026, bloque B8) (cuándo) |
+| `dismissible` | `false` (default) | Todo `filled` y todo aviso que tiene que seguir ahí: plan vencido, administrando otro local. Cerrarlo no arregla nada. | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
+| `showIcon` | `true` (default) | Siempre: el ícono es la mitad del significado del tipo. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `showIcon` | `false` | No usar hoy. **Cuándo sí:** cuando se proyecta un avatar o logo en `slot="icon"` (ver abajo), que ya ocupa ese lugar. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `slot="icon"` | avatar o logo | Reemplaza al ícono del tipo: el logo del local que estás administrando. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 | `slot="action"` | **un** `sui-link-button` `variant="modifiable"` con `[underline]="true"` | La única acción del banner: «Renovar plan», «Salir», «Actualizar». Nunca un `sui-button`, nunca dos. | según la guía del DS |
 | `title` | frase corta | Lo que pasa, en sentence case y sin punto final. | canon (copy de la app) |
 | `description` | complemento | Qué hacer o hasta cuándo. Una línea en web; en mobile se envuelve. | según la guía del DS (una línea) |
@@ -106,7 +106,7 @@ Misma pregunta que en el alert: **¿este aviso tiene que ganarle a todo lo demá
 - **Barra hecha a mano que es un banner — 1:** `components/impersonation-banner/impersonation-banner.ts:17`
   («Estás administrando … como super admin» + botón «Salir»), con `#fff` y `rgb()` sueltos. Pasaría a
   `<sui-banner variant="warning" variantStyle="filled">` con un link «Salir».
-- **Romperían la propuesta — 1 `light` → `lighter`:** `components/subscription-banner/subscription-banner.html:7`
+- **Rompe el canon (aprobado por el dueño, 05-10-2026, bloque B2) — 1 `light` → `lighter`:** `components/subscription-banner/subscription-banner.html:7`
   (el caso «vence en N días»).
 - No confundir: `components/upgrade-banner/` (6 pantallas) se llama «banner» pero es un aviso dentro
   de una sección; su destino es `sui-alert`, ya anotado en `docs/CANON-SUI.md`.

package/docs/sui-brand-logo/README.md

@@ -25,8 +25,8 @@ Regla corta: **la marca es lo que se muestra → brand-logo · es un ícono más
 
 ## 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.** Lo marcado canon está
+> aprobado; lo que sigue en **propuesta** espera decisión.
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos directos**. Lo usan por dentro
 > `sui-content-card` (`type="brand"`), `sui-social-button`, `sui-content-label`,
@@ -37,10 +37,10 @@ Regla corta: **la marca es lo que se muestra → brand-logo · es un ícono más
 
 | valor | cuándo | fuente |
 |---|---|---|
-| `whatsapp` | Soporte y contacto con el negocio. | propuesta |
-| `google`, `apple` | Entrar con esa cuenta (vía `sui-social-button`). | propuesta |
-| `instagram`, `facebook` | Las redes del negocio o de la app. | propuesta |
-| las otras 23 (`adobe`, `notion`, `slack`, `stripe`…) | No usar hoy. | propuesta |
+| `whatsapp` | Soporte y contacto con el negocio. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `google`, `apple` | Entrar con esa cuenta (vía `sui-social-button`). | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `instagram`, `facebook` | Las redes del negocio o de la app. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| las otras 23 (`adobe`, `notion`, `slack`, `stripe`…) | No usar hoy. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 
 **No hay TikTok** en el catálogo (son 28 marcas), aunque la app hace publicidad ahí.
 
@@ -48,28 +48,28 @@ Regla corta: **la marca es lo que se muestra → brand-logo · es un ícono más
 
 | valor | cuándo | fuente |
 |---|---|---|
-| `original` (default) | El normal: sobre fondo claro, con su color oficial. | propuesta |
-| `white` | Sobre fondo oscuro o sobre foto. | propuesta |
-| `black` | No usar hoy. | propuesta |
+| `original` (default) | El normal: sobre fondo claro, con su color oficial. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `white` | Sobre fondo oscuro o sobre foto. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `black` | No usar hoy. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 
 ### `size`
 
 | valor | px | cuándo | fuente |
 |---|---|---|---|
-| `xs` | 16 | Dentro de un texto o de un tag. | propuesta |
-| `sm` | 20 | Dentro de un botón (lo usa `sui-social-button`). | propuesta |
-| `md` (default) | 24 | Fila de una lista. | propuesta |
-| `lg` | 32 | Tarjeta de contacto (el tamaño del Figma). | propuesta |
-| `xl` | 40 | Tarjeta grande. | propuesta |
-| `2xl` | 48 | Lo pide `sui-content-label` en tamaño grande. | propuesta |
+| `xs` | 16 | Dentro de un texto o de un tag. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `sm` | 20 | Dentro de un botón (lo usa `sui-social-button`). | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `md` (default) | 24 | Fila de una lista. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `lg` | 32 | Tarjeta de contacto (el tamaño del Figma). | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `xl` | 40 | Tarjeta grande. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `2xl` | 48 | Lo pide `sui-content-label` en tamaño grande. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
 
 ### `href`, `target`, `rel`, `disabled`, `ariaLabel`
 
 | input | cuándo | fuente |
 |---|---|---|
-| `href` + `target="_blank"` | El logo lleva a la red social. `rel` ya viene en `noopener noreferrer`. | propuesta |
-| `ariaLabel` | Con `href`, siempre: «Síguenos en Instagram». Sin `href`, el default («Logo de Instagram») alcanza. | propuesta |
-| `disabled` | No usar hoy. | propuesta |
+| `href` + `target="_blank"` | El logo lleva a la red social. `rel` ya viene en `noopener noreferrer`. | canon (aprobado por el dueño, 05-10-2026, bloque B10) |
+| `ariaLabel` | Con `href`, siempre: «Síguenos en Instagram». Sin `href`, el default («Logo de Instagram») alcanza. | canon (aprobado por el dueño, 05-10-2026, bloque B10) |
+| `disabled` | No usar hoy. | canon (aprobado por el dueño, 05-10-2026, bloque B10) |
 
 Usos de hoy que rompen la regla: **0**.
 
@@ -78,12 +78,13 @@ Usos de hoy que rompen la regla: **0**.
 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. Todo es **propuesta**, salvo lo
+marcado canon.
 
-| uso | mobile | web |
-|---|---|---|
-| tarjeta de contacto, fila | `lg` (32) | `md` (24) |
-| como link (con `href`, se toca) | `2xl` (48) | `lg` (32) |
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| tarjeta de contacto, fila | `lg` (32) | `md` (24) | canon (dueño, 05-10-2026, P1 b) |
+| como link (con `href`, se toca) | `2xl` (48) | `lg` (32) | mobile: canon (decisión del dueño 04-10-2026, piso táctil 44: `2xl` es el único size que llega) · web: propuesta |
 
 ```html
 <sui-brand-logo company="instagram" [size]="bp.isMobile() ? '2xl' : 'lg'" [href]="url" target="_blank"

package/docs/sui-breadcrumb-item/README.md

@@ -31,11 +31,11 @@ desplegable al lado o un separador propio. Hoy no hay ningún caso.
 | input | valor | cuándo | fuente |
 |---|---|---|---|
 | `label` | texto | El nombre del nivel. | según la guía del DS |
-| `icon` | nombre RemixIcon | Solo el primer nivel (inicio), y con `ariaLabel` si va sin texto. | según la guía del DS (el ícono existe); el cuándo es propuesta |
+| `icon` | nombre RemixIcon | Solo el primer nivel (inicio), y con `ariaLabel` si va sin texto. | según la guía del DS (el ícono existe); el cuándo: canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 | `href` | ruta | Con ruta: dibuja un `<a>`; una ruta interna (`/…`) navega con el router sin recargar. | según la guía del DS (como enlace) |
 | `href` | vacío | Dibuja un `<button>` y avisa por `(clicked)`. | según el código |
 | `active` | `true` | La página actual: no es clicable, va en negro y lleva `aria-current="page"`. | según la guía del DS |
-| `ariaLabel` | texto | Obligatorio cuando va solo el ícono. | propuesta, falta aprobación |
+| `ariaLabel` | texto | Obligatorio cuando va solo el ícono. | canon (aprobado por el dueño, 05-10-2026, bloque B5) |
 
 Usos de hoy que rompen las reglas: **0** (no se usa).
 
@@ -46,7 +46,7 @@ no se usa en mobile.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| miga | no se usa | el componente (dentro de `sui-breadcrumbs`) | propuesta, falta aprobación |
+| miga | no se usa | el componente (dentro de `sui-breadcrumbs`) | canon (aprobado por el dueño, 05-10-2026, bloque B7) |
 
 ```html
 @if (!bp.isMobile()) { <sui-breadcrumbs [items]="ruta()" /> }

package/docs/sui-breadcrumbs/README.md

@@ -38,17 +38,17 @@ Regla corta: **3+ niveles en web → breadcrumbs · mobile o 1-2 niveles → fle
 | divider | cuándo | fuente |
 |---|---|---|
 | `arrow` (default) | Siempre en la app. | según la guía del DS (es su default) |
-| `slash` | No: misma función que la flecha; dos estilos en la misma app se leen como dos cosas. | según la guía del DS (la forma existe); el no es propuesta |
-| `dot` | No: el punto separa metadatos («12 min · S/ 4.50»), no niveles. Extensión de SUI. | propuesta, falta aprobación |
+| `slash` | No: misma función que la flecha; dos estilos en la misma app se leen como dos cosas. | según la guía del DS (la forma existe); el no: canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `dot` | No: el punto separa metadatos («12 min · S/ 4.50»), no niveles. Extensión de SUI. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 
 ### Ítems (`items`)
 
 | qué | cuándo | fuente |
 |---|---|---|
 | `label` | Siempre el nombre real del nivel («Hamburguesas», no «Categoría»). Un id nunca es el nombre. | canon (CLAUDE.md, «un identificador nunca es el título de nada») |
-| `href` | Cada nivel anterior con su ruta interna (`/empresa/productos`): navega con el router, sin recargar. | propuesta, falta aprobación |
-| sin `href` + `(navigate)` | Cuando volver no es una ruta (cerrar un panel, limpiar un filtro). | propuesta, falta aprobación |
-| `icon` solo en el primero | El inicio como casa (`home-5-line`) con `ariaLabel`. | según la guía del DS (ítems con ícono); el cuándo es propuesta |
+| `href` | Cada nivel anterior con su ruta interna (`/empresa/productos`): navega con el router, sin recargar. | canon (aprobado por el dueño, 05-10-2026, bloque B10) |
+| sin `href` + `(navigate)` | Cuando volver no es una ruta (cerrar un panel, limpiar un filtro). | canon (aprobado por el dueño, 05-10-2026, bloque B10) |
+| `icon` solo en el primero | El inicio como casa (`home-5-line`) con `ariaLabel`. | según la guía del DS (ítems con ícono); el cuándo: canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 | `active` | No hace falta: el último ya es el activo. Solo si la página actual no va al final (raro). | según el código |
 
 Usos de hoy que rompen las reglas: **0** (no se usa).
@@ -59,7 +59,7 @@ Alto fijo de **20 px** (texto 14, ícono 20), sin `size`. **No tiene tamaño par
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| ruta de 3+ niveles | no se usa: flecha de volver | `sui-breadcrumbs` | propuesta, falta aprobación |
+| ruta de 3+ niveles | no se usa: flecha de volver | `sui-breadcrumbs` | canon (aprobado por el dueño, 05-10-2026, bloque B7) |
 
 ```html
 @if (!bp.isMobile()) {

package/docs/sui-button/README.md

@@ -98,9 +98,9 @@ Uso medido el 04-10-2026: 123 `large`, 93 `small`, 58 `medium` (5 por default),
 | size | cuándo | fuente |
 |---|---|---|
 | `large` (48 px) | Footers de modal y CTA táctiles en mobile. | ya es canon (default de sui-modal-footer); extensión de SUI, la guía no lo tiene |
-| `medium` (40 px, default) | CTA en desktop y formularios. | default según la guía del DS; el «cuándo» es propuesta |
-| `small` (36) / `xsmall` (32) | Acciones dentro de cards, filas y cabeceras de sección. | escala según la guía del DS; el «cuándo» es propuesta |
-| `2xsmall` (28) | Acciones de ícono en tablas y filas densas. Si el espacio es de verdad chico, mirar antes `sui-compact-button`. | escala según la guía del DS; el «cuándo» es propuesta |
+| `medium` (40 px, default) | Todo botón en la computadora: CTA, formularios, acciones de cards, filas, cabeceras y tablas. En el celular chico (< 380 px), a la vista, con el área de 44. La tablet va como el celular. | default según la guía del DS; el «cuándo»: canon (aprobado por el dueño, 05-10-2026, bloque B1) y, para filas, cabeceras y tablas, canon (dueño, 05-10-2026, D16); solo en web (en el teléfono manda el piso táctil de 44) |
+| `small` (36) / `xsmall` (32) | No usar: son chicos. Las acciones de cards, filas y cabeceras van en `medium` en web y `large` en el teléfono. | escala según la guía del DS; no usarlos: canon (dueño, 05-10-2026, D16), reemplaza el «cuándo» del bloque B13 |
+| `2xsmall` (28) | No usar: es chico. Las acciones de ícono en tablas van en `medium` `onlyIcon`; si de verdad no entra, `sui-compact-button`. | escala según la guía del DS; no usarlo: canon (dueño, 05-10-2026, D16), reemplaza el «cuándo» del bloque B13 |
 | `xlarge` (52) | Extensión de SUI. Sin uso hoy. | canon (aprobado por el dueño, 03-10-2026) |
 
 En la app el patrón responsive ya es `[size]="bp.isMobile() ? 'large' : 'medium'"` (o
@@ -127,13 +127,15 @@ flujo nuevo cae en la columna de la derecha, se usa (aprobado por el dueño, 03-
 ## Tamaño en mobile y en web
 
 En mobile se toca con el dedo: **44 px como mínimo** (piso táctil, canon del dueño 04-10-2026) y 48
-en la acción principal. En web, 28–40.
+en la acción principal. En la computadora, `medium` (40); la tablet va como el celular; en el celular chico
+(< 380 px), `medium` a la vista con el área de 44. Nada en `small`, `xsmall` ni `2xsmall` (canon, dueño,
+05-10-2026, D16).
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
 | acción principal de la pantalla o footer de modal | `large` (48) | `medium` (40) | canon (aprobado por el dueño, 03-10-2026) (footer de modal siempre `large`) |
-| acción dentro de una card o una fila | `large` (48) | `small` (36) / `xsmall` (32) | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono — antes `medium` (40), que no llega |
-| acción en una tabla densa | — (no hay tablas en mobile) | `2xsmall` (28) | canon (aprobado por el dueño, 03-10-2026) |
+| acción dentro de una card o una fila | `large` (48) | `medium` (40) | mobile: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono — antes `medium` (40), que no llega · web: canon (dueño, 05-10-2026, D16), antes `small` / `xsmall` |
+| acción en una tabla | — (no hay tablas en mobile) | `medium` (40) | canon (dueño, 05-10-2026, D16), antes `2xsmall` (03-10-2026) |
 | CTA de landing | `xlarge` (52) | `large` (48) | propuesta, falta aprobación |
 
 Patrón (`bp` = `BreakpointsService`, mobile hasta 767 px). Medido el 04-10-2026: 9 `sui-button` con este
@@ -247,6 +249,6 @@ interface SuiFooterButtonConfig {
 </sui-button>
 
 <!-- Solo ícono -->
-<sui-button variant="ghost" color="neutral" size="2xsmall" leftIcon="pencil-line" [onlyIcon]="true"
+<sui-button variant="ghost" color="neutral" [size]="bp.isMobile() ? 'large' : 'medium'" leftIcon="pencil-line" [onlyIcon]="true"
             aria-label="Editar" (click)="editar()" />
 ```