@ajuarezso/sui-design-system 0.21.0 → 0.23.0

package/docs/sui-alert/README.md

@@ -20,9 +20,11 @@ el motivo por el que se canceló un pedido.
 
 - Confirmar que una acción salió bien («Producto guardado»): eso es `sui-toast`. Un alert que
   hay que cerrar a mano para decir «guardado» estorba.
-- Algo que afecta a toda la app (sin conexión, modo demo, versión nueva): `sui-banner`.
+- Algo que afecta a toda la app (modo demo, versión nueva, plan vencido): `sui-banner`. Si
+  impide usarla (sin conexión), ni alert ni banner: un `sui-modal` o una pantalla propia (ver `sui-banner`).
 - La ayuda de un solo campo de formulario: `sui-form-hint`.
-- Decorar. Lleva `role="alert"`: el lector de pantalla lo anuncia apenas aparece.
+- Decorar. El lector de pantalla lo anuncia apenas aparece (`role="alert"` en error y warning,
+  `role="status"` en el resto).
 
 Regla corta: **contexto → alert · toda la app → banner · efímero → toast · bandeja → notification.**
 
@@ -59,35 +61,35 @@ El alert tiene **dos ejes** y se eligen por separado: `variant` dice **qué tipo
 ### `variantStyle` — el peso visual (lo que más se confunde)
 
 Hoy cada tipo de mensaje se reparte casi mitad y mitad: 59 `filled`, 54 `lighter`, 2 `stroke` y
-2 que cambian según el caso. No hay criterio, y la guía tampoco lo da. La regla propuesta sale
+2 que cambian según el caso. No hay criterio, y la guía tampoco lo da. La regla sale
 de la jerarquía: `filled` es un bloque de color saturado con texto blanco y compite con el
 botón principal; `lighter` es un fondo pálido con texto oscuro y acompaña sin taparlo.
 
 | variantStyle | cuándo | ejemplo real de la app | fuente |
 |---|---|---|---|
 | `lighter` (default SUI) | El aviso **acompaña** al contenido: explica, da contexto, advierte sin frenar. También los errores de formulario que se corrigen ahí mismo. Es el caso normal. | `pages/orders/orders.html:281` («Recojo en tienda») · `pages/auth/login/login.html:31` (error de login) | canon (aprobado por el dueño, 03-10-2026) |
-| `filled` (default de la guía) | El aviso **es lo principal del momento** y hay que leerlo antes de actuar: la persona no puede seguir, va a hacer algo que no se deshace, o el resultado es final (cancelado, rechazado). Uno por pantalla como máximo. | `pages/mi-negocio/mi-negocio.html:1242` («Se eliminará permanentemente») · `pages/customer/order-tracking/order-tracking.html:194` («Pedido cancelado») | canon (aprobado por el dueño, 03-10-2026) |
+| `filled` (default de la guía) | El aviso **es lo principal del momento** y hay que leerlo antes de actuar: la persona no puede seguir, va a hacer algo que no se deshace, o el resultado es final (cancelado, rechazado). Uno por pantalla como máximo. | `pages/mi-negocio/mi-negocio.html:1257` («Se eliminará permanentemente») · `pages/customer/order-tracking/order-tracking.html:194` («Pedido cancelado») | canon (aprobado por el dueño, 03-10-2026) |
 | `light` | No usar hoy: queda a medio camino entre los dos de arriba (0 usos). **Cuándo sí:** un aviso dentro de una superficie ya teñida (un banner de color) donde `lighter` se pierde. | — | canon (aprobado por el dueño, 03-10-2026) |
 | `stroke` | Solo sobre una **superficie flotante** o encima de un mapa o una foto, donde un fondo pálido no se lee. | (sin uso correcto hoy) | canon (aprobado por el dueño, 03-10-2026) |
 | `stroke-dark` | Igual que `stroke`, en oscuro. Default del toast. Extensión de SUI: la guía no lo tiene. | `sui-toast/sui-toast.service.ts:92` del DS | canon (aprobado por el dueño, 03-10-2026) |
 
-**Usos de hoy que romperían la propuesta:**
+**Usos de hoy que rompen la regla:**
 
 - **24 `filled` que solo informan → `lighter`.** Los 22 `info filled` y los 5 `success filled`,
-  menos los 3 que sí frenan (`pages/promociones/promociones.html:106` «No disponible en tu plan»,
+  menos los 3 que sí frenan (`pages/promociones/promociones.html:107` «No disponible en tu plan»,
   `pages/drivers/add-driver/add-driver.html:21`, `pages/super-admin/master-orders/master-orders.html:714`
   «Ningún repartidor disponible»). Ejemplos: `pages/driver/driver-earnings/driver-earnings.html:18`
   («Cobras por cada entrega»), `pages/driver/driver-wallet/driver-wallet.html:12`,
-  `pages/customer/store-browser/store-browser.html:573` («Tu local fue aprobado»).
+  `pages/customer/store-browser/store-browser.html:576` («Tu local fue aprobado»).
 - **5 `warning filled` que no frenan nada → `lighter`:** `pages/super-admin/master-roles/master-roles.html:6`,
-  `pages/driver/driver-schedule/driver-schedule.html:12` y `:40`, `pages/customer/favorites/favorites.html:100`,
+  `pages/driver/driver-schedule/driver-schedule.html:12` y `:40`, `pages/customer/favorites/favorites.html:96`,
   `pages/customer/order-tracking/order-tracking.html:314` («Esperando que el local confirme»).
 - **4 errores de carga en `lighter` → `filled`** (la pantalla queda vacía; el aviso es lo único
-  que hay): `pages/envios/envios.html:11`, `pages/super-admin/master-drivers/master-drivers.html:697`,
+  que hay): `pages/envios/envios.html:11`, `pages/super-admin/master-drivers/master-drivers.html:703`,
   `pages/super-admin/master-roles/master-roles.html:79`, `pages/super-admin/master-approvals/master-approvals.html:17`.
   El mismo caso ya está en `filled` en `pages/super-admin/master-orders/master-orders.html:347`.
 - **2 `stroke` inline sobre fondo blanco → `lighter`:** `pages/role-selector/role-selector.html:52`,
-  `pages/driver/driver-order-detail/driver-order-detail.html:360`.
+  `pages/driver/driver-order-detail/driver-order-detail.html:379`.
 
 La pregunta para decidir es una: **¿este aviso tiene que ganarle al botón principal?** Si no, `lighter`.
 
@@ -99,13 +101,13 @@ La guía lista los cinco tipos pero no dice cuándo va cada uno.
 |---|---|---|---|
 | `info` (default) | Un dato que conviene saber. No pide hacer nada. | `pages/orders/orders.html:281` | canon (aprobado por el dueño, 03-10-2026) |
 | `success` | Un resultado bueno que se queda (aprobado, verificado, enviado). Si es la confirmación de un clic, es toast. | `components/transfer-tenant-modal/transfer-tenant-modal.html:16` («Cuenta verificada») | canon (aprobado por el dueño, 03-10-2026) |
-| `warning` | Hay que atender algo o va a tener una consecuencia. | `pages/driver/driver-order-detail/driver-order-detail.html:856` («Se te cobran S/ 0.50») | canon (aprobado por el dueño, 03-10-2026) |
+| `warning` | Hay que atender algo o va a tener una consecuencia. | `pages/driver/driver-order-detail/driver-order-detail.html:899` («Se te cobran S/ 0.50») | canon (aprobado por el dueño, 03-10-2026) |
 | `error` | Algo falló o no se puede hacer. Su ejemplo de uso (contraseña incorrecta) es de este tipo. | `pages/auth/login/login.html:31` | canon (aprobado por el dueño, 03-10-2026) (el ejemplo sí es de la guía) |
 | `feature` | Novedad o función en prueba. Solo eso. El color sale del estado «feature» de la paleta. | `pages/customer/viaje/viaje.html:81` («Viajes está en prueba») | canon (aprobado por el dueño, 03-10-2026) |
 
-**Usos de hoy que romperían la propuesta:** 3 alerts `feature` muestran la **nota que dejó el
-cliente**, que no es una novedad: `pages/envios/envios.html:725`,
-`pages/driver/driver-order-detail/driver-order-detail.html:177`,
+**Usos de hoy que rompen la regla:** 3 alerts `feature` muestran la **nota que dejó el
+cliente**, que no es una novedad: `pages/envios/envios.html:728`,
+`pages/driver/driver-order-detail/driver-order-detail.html:196`,
 `pages/customer/order-tracking/order-tracking.html:551`. Pasarían a `info`.
 
 ### `size` y acciones
@@ -118,7 +120,7 @@ cliente**, que no es una novedad: `pages/envios/envios.html:725`,
 
 | acciones | regla | fuente |
 |---|---|---|
-| tipo | Links por `actions[]`, nunca un `sui-button` proyectado en el slot. | según la guía del DS |
+| tipo | Links por `actions[]`, nunca un `sui-button` proyectado en el slot (ni `lighter` ni otro). | según la guía del DS · canon (dueño, 04-10-2026): resuelve la contradicción con el README de `sui-button` |
 | cuántas | Hasta dos, separadas por punto medio. | según la guía del DS |
 | subrayado | Solo la primera, con `underline: true`. | según la guía del DS |
 
@@ -127,13 +129,13 @@ cliente**, que no es una novedad: `pages/envios/envios.html:725`,
 - **3 alerts con descripción en `small` → `large`.** El componente hace lo que dice la guía
   (en `small` no hay descripción), así que no es un bug del componente: es un error de uso, y la
   descripción hoy **no se ve**. `pages/customer/checkout/checkout.html:417` (la descripción del
-  cupón), `pages/super-admin/master-settings/master-settings.html:633` y `:680`.
+  cupón), `pages/super-admin/master-settings/master-settings.html:644` y `:691`.
 - **5 alerts con un `sui-button` en el slot `action` → `actions[]`:** `pages/role-selector/role-selector.html:52`,
-  `pages/overview/overview.html:34`, `pages/mi-negocio/mi-negocio.html:376`,
+  `pages/overview/overview.html:34`, `pages/mi-negocio/mi-negocio.html:378`,
   `pages/customer/cart/cart.html:29`, `pages/customer/viaje/viaje.html:86` (este último es un
   `filled primary` dentro del alert: el CTA de la pantalla no debería vivir ahí).
-- **2 acciones únicas sin subrayar → `underline: true`:** `pages/notifications/notifications.ts:197`
-  y `:198` (`accionActivar`, `accionReintentar`, usadas en `notifications.html:17` y `:23`).
+- **2 acciones únicas sin subrayar → `underline: true`:** `pages/notifications/notifications.ts:200`
+  y `:201` (`accionActivar`, `accionReintentar`, usadas en `notifications.html:17` y `:23`).
 - Más de dos acciones: 0.
 
 ## Tamaño en mobile y en web
@@ -147,6 +149,8 @@ en mobile es el ancho: ocupa toda la columna.
 | aviso con descripción | `large` | `large` | guía del DS |
 | aviso de una línea en la página | `small` | `small` | guía del DS |
 | dentro de un campo o una card | `xsmall` | `xsmall` | guía del DS |
+| la X de cerrar (`dismissible`) | se ve de 16 px en `xsmall`, 20 en `small`, 24 en `large`, 28 en `xlarge`; **se toca en 44 × 44** (`::before` invisible; en `xsmall`/`small` el alert mide 32/36 y recorta el área a su alto, y a la izquierda solo crece 4 para no pisar las acciones inline) | se ve igual, sin área extra | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono |
+| las acciones (`actions[]`) | link de 20 px de alto en `large`/`xlarge`, 16 en `small`/`xsmall` | igual | según el componente |
 
 
 ## API
@@ -165,6 +169,7 @@ en mobile es el ancho: ocupa toda la columna.
 | `dismissible` | `boolean` | `false` |
 | `autoHideOnDismiss` | `boolean` | `true` |
 | `actions` | `readonly SuiAlertAction[]` | `[]` |
+| `ariaRole` | `'auto' \| 'alert' \| 'status' \| 'none'` | `'auto'` |
 
 | output | payload |
 |---|---|
@@ -202,6 +207,10 @@ Slot: `<ng-content select="[slot=action]">` — legado; solo se usa si `actions`
   misma línea, a la derecha. Es lo que define la guía del DS para esos tamaños: si hay
   descripción, va `large`.
 - `description` va por `innerHTML`: no le pases texto escrito por el usuario sin sanear.
+- **El rol depende del tipo** (desde el 04-10-2026; antes `role="alert"` fijo en los 117 alerts):
+  `error` y `warning` se anuncian con `role="alert"` (interrumpe), `info`, `success` y `feature`
+  con `role="status"` (espera a que el lector termine). `ariaRole` lo fuerza (`alert`, `status`) o lo
+  quita (`none`, cuando el contenedor ya anuncia: así lo usa `sui-toast`).
 - Las acciones toman el **color del texto** del alert (blanco en `filled`, casi negro en el
   resto), no el color del tipo. Para forzar otro, `color` en la acción.
 - `feature` es **morado** aquí y **gris** en `sui-banner` (decisión documentada en los dos `.ts`).

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

@@ -57,9 +57,9 @@ Google Play, en ese orden.
 |---|---|---|
 | `height` (40, default) | 40 en desktop y en el footer. El ancho sale solo de la proporción de cada sello. | propuesta |
 | `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. | canon (todos los usos de hoy) |
+| `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 sale en inglés («Download on the App Store»). | 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 |
 
 ## Tamaño en mobile y en web
@@ -67,8 +67,9 @@ Google Play, en ese orden.
 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'"`, 27 usos hoy en `master-pedidos` (16 `large`/`small`,
-9 `large`/`medium`, 2 `medium`/`xsmall`). Regla del dueño, 03-10-2026.
+en los componentes con `size` va `[size]="bp.isMobile() ? 'large' : 'medium'"` (142 de los 166 `[size]`
+con `bp` medidos el 04-10-2026). **El sello no tiene `size`**: su alto va en px por `[height]`, ver abajo.
+Regla del dueño, 03-10-2026.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|

package/docs/sui-avatar/README.md

@@ -31,11 +31,11 @@ Regla corta: **es alguien → avatar · es una cosa → key-icon · son varios
 > «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**.
 >
-> Uso medido el 03-10-2026 en `master-pedidos/src/app`: 55 avatares en 25 archivos, sin contar
+> 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/*`,
 > `master-rutina`, `master-medico`, `dev-index`). Tamaños: 23 `lg`, 19 `md`, 5 `sm`, 3 `xs`,
-> 3 `xl`, 1 `2xl`, 1 `3xl`. Colores: 34 `orange`, 7 `blue`, 7 con `bgColor`, 3 `green`,
-> 1 `purple`, 1 `gray`, 1 `slate`, 1 dinámico. 34 traen `src`.
+> 3 `xl`, 1 `2xl`, 1 `3xl`. Colores, ya con el canon por rol: 21 `green`, 14 `orange`, 12 `blue`,
+> 1 `gray` y 7 dinámicos (`[color]` que sale del rol). Ninguno con `bgColor` ni `slate`.
 
 ### Lo que sí dice la guía del DS
 
@@ -65,8 +65,8 @@ la foto falla al cargar, cae sola a las iniciales.
 
 | 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:249` | propuesta |
-| `sm` | 24 | Chips y filas compactas. | `pages/driver/driver-dashboard/driver-dashboard.html:1046` (quién tomó el pedido) | 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` | 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 |
@@ -89,8 +89,8 @@ sin leer el nombre.
 | `green` | Repartidores, también el propio repartidor en su app. Extensión de SUI. | canon (aprobado por el dueño, 03-10-2026) |
 | `blue` | Clientes y destinatarios, también quien firma una reseña de cliente. | canon (aprobado por el dueño, 03-10-2026) |
 | `gray` (default de la guía) | «Todavía nadie», con `icon` (pedido sin repartidor, envío sin destinatario). | canon (aprobado por el dueño, 03-10-2026) |
-| `slate` (default SUI) | No hace falta en la app: todo avatar tiene un rol o es «todavía nadie». | consecuencia del canon de arriba |
-| `purple`, `sky`, `yellow`, `pink`, `teal`, `red` | No se usan para personas: un quinto color no diría ningún rol. | consecuencia del canon de arriba |
+| `slate` (default SUI) | No hace falta en la app: todo avatar tiene un rol o es «todavía nadie». | derivado del canon por rol, falta confirmación |
+| `purple`, `sky`, `yellow`, `pink`, `teal`, `red` | No se usan para personas: un quinto color no diría ningún rol. | derivado del canon por rol, falta confirmación |
 
 Reglas que van con la tabla:
 
@@ -138,14 +138,14 @@ Hoy no hay ningún `topBadge` en la app.
 
 | input | cuándo | fuente |
 |---|---|---|
-| `alt` | **Siempre** el nombre de quien es. Sin `alt`, el lector de pantalla no dice nada. | 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. | propuesta |
 | `companyLogoSrc` | Solo con `status="company"`. | propuesta |
 | `memojiSrc`, `illustrationSrc` | No usar hoy. | propuesta |
 | `bgColor` | No usar (ver abajo). | propuesta |
 
 **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:
-`pages/super-admin/master-drivers/master-drivers.html:250`, `:770`, `pages/employees/employees.html:70`.
+`pages/super-admin/master-drivers/master-drivers.html:252`, `:779`, `pages/employees/employees.html:70`.
 
 **`bgColor` en la app: 0** (eran 7 hasta el 03-10-2026). Los cinco con paleta saturada escrita a
 mano (clientes, empleados, reporte de repartidores y equipo) rompían la rampa `*-200` del DS y
@@ -154,14 +154,13 @@ disfrazado. Todos pasaron a `color` por rol.
 
 ### La foto de otra persona (regla del proyecto)
 
-- **1 violación**: `core/services/orders.service.ts:403` hace `user?.avatarUrl ?? user?.photoURL`
-  sin filtrar y lo **congela** en el pedido (`driverPhotoUrl`), que es lo que ve el cliente en
-  `pages/customer/order-tracking/order-tracking.html:348`. Si el repartidor todavía tiene la de
-  Google, el cliente ve la foto rota para siempre.
+- **Resuelta** (commit `74fa3b26` de master-pedidos): `core/services/orders.service.ts:407` ya
+  congela en el pedido (`driverPhotoUrl`) solo una foto que pasa `esFotoDeStorage`, así que el
+  cliente ya no puede recibir la de Google en `pages/customer/order-tracking/order-tracking.html:348`.
 - **A revisar** (pintan un `avatarUrl` de otra persona sin el filtro de `fotoMostrable` a la
-  vista): `pages/super-admin/master-drivers/master-drivers.html:706` (`r.foto`), `:770`
+  vista): `pages/super-admin/master-drivers/master-drivers.html:712` (`r.foto`), `:779`
   (`s.avatarUrl`) y `pages/drivers/add-driver/add-driver.html:73`.
-- **Latente**: `pages/customers/customers.ts:280` arma `avatarUrl || photoURL`, pero la tabla
+- **Latente**: `pages/customers/customers.ts:277` arma `avatarUrl || photoURL`, pero la tabla
   hoy no lo pinta.
 
 ## Tamaño en mobile y en web
@@ -243,7 +242,8 @@ interface SuiAvatarConfig {
 - **El avatar no cambia con el tema oscuro**: fondos y texto de las iniciales son fijos a propósito.
 - **`bgColor` gana sobre `color`** pero no cambia el color del texto: con un fondo oscuro, las
   iniciales quedan ilegibles.
-- **`status` y `topBadge` miden el 40 % del avatar**: en `xs` casi no se ven.
+- **El punto de `status` mide el 25 % del avatar; `topBadge` y el logo de `company`, el 40 %**:
+  en `xs` casi no se ven.
 - **`companyLogoSrc` solo se ve con `status="company"`.**
 - **Si la foto falla, cae sola a las iniciales**, y si cambia el `src` lo vuelve a intentar.
 - **No tiene `title`, ni output, ni es clickeable.** Para tocarlo, envuélvelo en un botón o en

package/docs/sui-avatar-group/README.md

@@ -25,8 +25,8 @@ conectados en una zona. Cada persona se ve chica; el grupo es lo que cuenta.
 > **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**.
 >
-> Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos directos**. El DS lo usa dentro
-> de `sui-table`.
+> 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.
 
 ### Lo que sí dice la guía del DS
 
@@ -44,7 +44,7 @@ conectados en una zona. Cada persona se ve chica; el grupo es lo que cuenta.
 | `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 |
-| `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). | canon (`CLAUDE.md`, «Fotos de otra persona») |
+| `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).
 
@@ -108,7 +108,7 @@ interface SuiAvatarGroupItem {
 ```html
 <sui-avatar-group size="md" [max]="3" [items]="[
   { initials: 'Carlos Mamani', color: 'green', alt: 'Carlos Mamani' },
-  { src: repartidor2.avatarUrl, alt: repartidor2.nombre },
+  { src: repartidor2.avatarUrl, initials: repartidor2.nombre, color: 'green', alt: repartidor2.nombre },
   { initials: 'Luis Huamán', color: 'green', alt: 'Luis Huamán' },
   { initials: 'Ana Torres', color: 'green', alt: 'Ana Torres' }
 ]" />

package/docs/sui-badge/README.md

@@ -71,22 +71,23 @@ Regla corta: **etiqueta, número o estado con muchos valores → badge · comple
 | `pink` | highlighted | Destacado. | según la guía del DS (nombre del estado) |
 | `teal` | stable | Estable. | según la guía del DS (nombre del estado) |
 | (categorías) | — | Una categoría sin carga de bien/mal va en `gray`. Si tiene que distinguirse de otras en la misma fila, el color cuyo estado le calce (`purple` para lo nuevo, `pink` para lo destacado). | canon (aprobado por el dueño, 03-10-2026) |
+| (distintivos del local) | — | «Local exclusivo» en `pink` (destacado) y «Mismo precio que en el local» en `sky` (verificado), `type="left-icon"`. Salen de `core/distintivos-local.ts` en master-pedidos; antes eran un `sui-status-badge` y no son un estado. | canon (aprobado por el dueño, 03-10-2026) |
 
 **Usos de hoy que rompen la guía** (estado con el color de otro estado; se evaluaron los colores
 fijos y los ternarios legibles en el template; el resto de los 77 dinámicos, que salen de
 funciones o campos, no):
 
-- **5 casos.** «Pendiente» en `red`: `pages/super-admin/super-admin.html:617`. «Pendiente» en
+- **5 casos.** «Pendiente» en `red`: `pages/super-admin/super-admin.html:626`. «Pendiente» en
   `yellow` (ausente): `pages/super-admin/master-gastos/master-gastos.html:67` y `:115`. «No cuadra»
   en `yellow`: `pages/super-admin/master-gastos/master-gastos.html:60` y `:129`. Los cinco pasan a
   `orange`.
 - Sin evaluar: `pages/super-admin/master-drivers/master-drivers.html:201` (`yellow` con un texto
   que viene de datos).
 
-**Usos de hoy que romperían la propuesta de categorías** (categoría pintada con color de estado):
+**Usos de hoy que rompen la regla de categorías** (categoría pintada con color de estado):
 
-- **15 casos.** «Por delivery» en `green` y «Sueldo fijo» en `blue`: `pages/drivers/drivers.html:135`,
-  `:137`, `:256`, `:258`. «Primer pedido» en `orange`: `pages/driver/driver-order-detail/driver-order-detail.html:463`,
+- **15 casos.** «Por delivery» en `green` y «Sueldo fijo» en `blue`: `pages/drivers/drivers.html:134`,
+  `:136`, `:255`, `:257`. «Primer pedido» en `orange`: `pages/driver/driver-order-detail/driver-order-detail.html:482`,
   `pages/super-admin/master-orders/master-orders.html:205` y `:505`. El plan en `purple`:
   `pages/super-admin/super-admin.html:116`, `:252`, `pages/super-admin/master-earnings/master-earnings.html:95`.
   «Envío» y «Mandadito» en `purple`: `pages/super-admin/master-orders/master-orders.html:83` y `:87`.
@@ -110,16 +111,16 @@ un paso más fuerte con texto **oscuro**; `filled` = fondo saturado con texto bl
 | `filled` (default de la guía) | Solo dos casos: (1) **un conteo que pide acción** (pendientes, notificaciones), y (2) un badge **encima de una foto**, donde un fondo pálido se pierde. | `components/glass-tab-bar/glass-tab-bar.html:13` (conteo del tab) · `components/product-detail-view/product-detail-view.html:40` («Agotado» sobre la foto) | canon (aprobado por el dueño, 03-10-2026) |
 | `light` | Solo sobre una **superficie ya teñida** (dentro de un alert `lighter`, una card de color), donde el `lighter` se confunde con el fondo. | (sin uso correcto hoy) | canon (aprobado por el dueño, 03-10-2026) |
 | `stroke` | Metadato **neutro** (`gray`) que convive con badges de color en la misma fila y no debe leerse como estado: «Obligatorio», «12 secciones». | `components/product-detail-view/product-detail-view.html:93` («Obligatorio») · `pages/settings/team/team.html:136` | canon (aprobado por el dueño, 03-10-2026) |
-| `dark` | Solo sobre una **superficie oscura** (card negra, foto oscura). Extensión de SUI: la guía no lo tiene. | `pages/mi-negocio/mi-negocio.html:92` (precio sobre la card negra del plan) | canon (aprobado por el dueño, 03-10-2026) |
+| `dark` | Solo sobre una **superficie oscura** (card negra, foto oscura). Extensión de SUI: la guía no lo tiene. | `pages/mi-negocio/mi-negocio.html:94` (precio sobre la card negra del plan) | canon (aprobado por el dueño, 03-10-2026) |
 
-**Usos de hoy que romperían la propuesta:**
+**Usos de hoy que rompen la regla:**
 
 - **16 `light` → `lighter`** (salvo que estén sobre superficie teñida; no se verificó
   renderizado). Ejemplos: `pages/super-admin/master-drivers/master-drivers.html:781`, `:783`, `:785`,
   `pages/super-admin/master-users/master-user-sheet.html:44`, `pages/reports/reports.html:215`.
 - **1 `filled` como metadato → `lighter`:** `pages/customer/profile/profile.html:122` («Por defecto»).
   A discutir: `pages/public/pricing/pricing.html:37` (el «Popular» del plan destacado).
-- **1 `lighter` sobre superficie oscura → `dark`:** `pages/mi-negocio/mi-negocio.html:87` («Mes gratis»).
+- **1 `lighter` sobre superficie oscura → `dark`:** `pages/mi-negocio/mi-negocio.html:89` («Mes gratis»).
 
 ### `size` y `type`
 
@@ -158,13 +159,29 @@ pedidos con muchos estados (`pages/orders/orders.html:113`) se quedan como badge
 En mobile el badge se lee de más lejos y al lado de textos de 16 px; en web va más chico.
 `large` (24) y `xlarge` (28) son extensión SUI del 03-10-2026.
 
+| size | alto | texto | ícono del slot |
+|---|---|---|---|
+| `small` (default) | 16 px | 11/12, MAYÚSCULAS | 12 |
+| `medium` | 20 px | 12/16 | 16 |
+| `large` | 24 px | 14/20 | 16 |
+| `xlarge` | 28 px | 16/24 | 20 |
+
+Ojo con la regla de tamaños del 03-10-2026 (en `large`/`xlarge` el texto va en 16): el badge
+`large` queda en 14. El README de `sui-button` toma esta escala como referencia de los chips:
+`sui-tag` y `sui-status-badge` van en 14 en `large` y 16 en `xlarge`. **Excepción documentada,
+canon (dueño, 04-10-2026):** el badge mantiene su escala propia 12 / 14 / 16 (`medium` / `large` /
+`xlarge`) y no sube a 16 en `large`; tag y status-badge la siguen. El badge no se toca: no tiene
+área táctil.
+
 | 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 |
 
-Patrón (la app ya lo usa en 27 lugares; `bp` = `BreakpointsService`, mobile hasta 767 px):
+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'" …/>
@@ -211,7 +228,8 @@ interface SuiBadgeConfig {
   intercambiables aunque se parezcan.
 - Los slots usan **`data-slot=`**, no `slot=` (alert y banner sí usan `slot=`).
 - Proyectar un ícono no basta: hace falta `type="left-icon"` o `"right-icon"`.
-- El punto de `with-dot` mide 4 px; el de `sui-status-badge` mide 6 px. Son distintos a propósito.
+- El punto de `with-dot` mide 4 px en todos los tamaños; el de `sui-status-badge` mide 6 px en
+  `medium` y 8 en `large`/`xlarge`. Son distintos a propósito.
 - `disabled` no baja la opacidad: pinta todo en los grises de deshabilitado.
 - El host lleva `role="status"`: el lector de pantalla anuncia los cambios.
 

package/docs/sui-banner/README.md

@@ -87,7 +87,7 @@ Misma pregunta que en el alert: **¿este aviso tiene que ganarle a todo lo demá
 ### Usos de hoy que rompen la regla
 
 - **Rompe el canon — 1 banner en contexto → `sui-alert`:**
-  `pages/driver/driver-order-detail/driver-order-detail.html:391` («Cobras S/ … al local al
+  `pages/driver/driver-order-detail/driver-order-detail.html:410` («Cobras S/ … al local al
   recoger»). Es el aviso de **un pedido**, dentro de su detalle: va `sui-alert` (`error` `filled`
   si cobra en el mostrador, `info` `lighter` si cobra en la puerta).
 - **Barra hecha a mano que es un banner — 1:** `components/impersonation-banner/impersonation-banner.ts:17`
@@ -106,8 +106,8 @@ El banner **no tiene `size`**: mide 44 px de alto en web, centrado; en mobile (
 | uso | mobile | web | fuente |
 |---|---|---|---|
 | la barra | 44 px mínimo, crece si el texto envuelve | 44 px fijos, una línea | según el componente |
-| el link de acción | `large` (24 px) cuando se publique (hoy `medium`, 20 px) | `medium` (20 px) | propuesta |
-| la X de cerrar | se ve de 24 px; **se toca en 40 × 40** | igual | canon (aprobado por el dueño, 03-10-2026): área táctil invisible, extensión SUI |
+| el link de acción | `large` (24 px) | `medium` (20 px) | propuesta, falta aprobación |
+| la X de cerrar | se ve de 24 px; **se toca en 44 × 44** | se ve de 24; 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 |
 
 ```html
 <sui-banner variant="warning" variantStyle="lighter" title="Tu plan vence en 3 días"
@@ -117,8 +117,8 @@ El banner **no tiene `size`**: mide 44 px de alto en web, centrado; en mobile (
 </sui-banner>
 ```
 
-`size="large"` del link-button está en el repo del DS y todavía no en el paquete publicado 0.19.0:
-hasta entonces va `medium` en las dos.
+`size="large"` del link-button ya está publicado (la app usa 0.22.0). Hoy el link del banner de la
+suscripción (`subscription-banner.html:10`) sigue con `medium` en las dos.
 
 ## «No usar»: por qué no hoy y cuándo sí
 
@@ -164,10 +164,11 @@ y `[slot=action]` (el link).
   alert. Los slots usan `slot=`, no `data-slot=`.
 - En web la altura es **fija** (44 px): un título más una descripción largos se cortan. En mobile sí
   envuelve.
-- **La X se toca en 40 × 40** aunque se vea de 24 (un `::before` invisible sobre su `<button>`,
-  desde 03-10-2026). En mobile esa área se mete 4 px en el espacio del texto o del link de acción
-  (el padding derecho es 40 y la X ocupa de 4 a 44 px desde el borde): un toque justo en la última
-  letra del link puede caer en la X.
+- **La X se toca en 44 × 44 en el teléfono** (40 × 40 en web) aunque se vea de 24 (un `::before`
+  invisible sobre su `<button>`; 44 desde el 04-10-2026). En mobile esa área crece hacia el borde
+  derecho y se mete solo 4 px en el espacio del texto o del link de acción (el padding derecho es 40
+  y la X ocupa de 0 a 44 px desde el borde): un toque justo en la última letra del link puede caer
+  en la X.
 - Al tocar la X se oculta solo (`dismissed`) y emite `closed`; no recuerda nada: si tiene que
   quedarse cerrado entre sesiones, lo guarda el padre.
 - El host lleva `role="region"` con `aria-label` = `title`, y borra el `title` nativo.

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

@@ -68,7 +68,7 @@ Regla corta: **la marca es lo que se muestra → brand-logo · es un ícono más
 | 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 («Instagram logo») alcanza. | propuesta |
+| `ariaLabel` | Con `href`, siempre: «Síguenos en Instagram». Sin `href`, el default («Logo de Instagram») alcanza. | propuesta |
 | `disabled` | No usar hoy. | propuesta |
 
 Usos de hoy que rompen la regla: **0**.
@@ -129,7 +129,7 @@ Outputs: ninguno.
 - **No se tiñe**: es un `<img>`. Si necesitas otro color, es `sui-icon`.
 - **`variant` es el color**, no el tamaño ni la forma.
 - Con `href` y `disabled` a la vez, no se vuelve link.
-- El `aria-label` por defecto está en inglés («WhatsApp logo»): pasa `ariaLabel` en español.
+- El `aria-label` por defecto es «Logo de <Marca>» (en español desde el 04-10-2026); con `href` pasa uno que diga adónde lleva.
 
 ## Ejemplo
 
@@ -138,6 +138,6 @@ Outputs: ninguno.
 <sui-brand-logo company="whatsapp" size="lg" />
 
 <!-- Red del negocio, como link -->
-<sui-brand-logo company="instagram" size="md" [href]="tenant.instagramUrl" target="_blank"
+<sui-brand-logo company="instagram" size="2xl" [href]="tenant.instagramUrl" target="_blank"
                 ariaLabel="Síguenos en Instagram" />
 ```

package/docs/sui-breadcrumbs/README.md

@@ -104,7 +104,7 @@ type SuiBreadcrumbDivider = 'arrow' | 'slash' | 'dot';
 
 ## Trampas
 
-- **`navigate` sale en todo clic**, también en los que tienen `href` (el navegador ya navega). Si
+- **`navigate` sale en todo clic** (menos en el ítem activo), también en los que tienen `href` (el navegador ya navega). Si
   usas `href`, no navegues otra vez en `(navigate)`.
 - **El último ítem es el activo solo**: no es clicable y va en negro.
 - **No corta texto largo**: con nombres de producto largos la fila crece. Acórtalos tú.