@ajuarezso/sui-design-system 0.22.0 → 0.23.0

package/docs/INDEX.md

@@ -13,7 +13,7 @@ Documentados: 116 de 116.
 
 | name | resumen | alternativas |
 |---|---|---|
-| `sui-accordion` | Fila con título que se abre para mostrar un texto o contenido secundario que no hace falta ver siempre | sui-tabs (vistas hermanas que se alternan) · sui-modal (detalle que pide atención completa) · sui-card (contenido que siempre se ve) |
+| `sui-accordion` | Fila con título que se abre para mostrar un texto o contenido secundario que no hace falta ver siempre | sui-tab-menu-horizontal (vistas hermanas que se alternan) · sui-modal (detalle que pide atención completa) · sui-card (contenido que siempre se ve) |
 | `sui-activity-feed` | Historial de actividad — quién hizo qué y hace cuánto — con archivos, comentarios, personas o tareas debajo de cada fila | sui-notification (bandeja de avisos para quien mira, con leído/no leído) · sui-stepper (los pasos fijos de un flujo, no un historial) · sui-table (registros para comparar por columnas) · sui-activity-filter (los filtros que van arriba del feed) |
 | `sui-activity-filter` | Chip con ícono para filtrar un historial de actividad por tipo — Archivos, Comentarios, Tareas — prendido o apagado | sui-tab-chips (los filtros de lista de la app, siempre uno elegido) · sui-segmented-control (2-4 vistas hermanas) · sui-tag (una etiqueta que se puede quitar) · sui-badge (un estado que no se toca) |
 | `sui-alert` | Aviso que se queda en la pantalla, en el lugar donde pasa lo que avisa | sui-toast (efímero, resultado de una acción) · sui-banner (afecta a toda la app o la pantalla) · sui-notification (fila de la bandeja) · sui-form-hint (ayuda de un solo campo) |
@@ -25,7 +25,7 @@ Documentados: 116 de 116.
 | `sui-brand-logo` | El logo oficial de otra marca (WhatsApp, Google, Apple, Instagram…) en su color, sin tocarlo | sui-icon (el mismo logo como ícono monocromo de una línea) · sui-logo (el logo de Master Pedidos) · sui-social-button (botón de entrar con Google o Apple) |
 | `sui-breadcrumb-item` | Una miga suelta de la ruta; casi siempre la dibuja sui-breadcrumbs por ti | sui-breadcrumbs (la ruta completa con separadores) · sui-link-button (un enlace de texto suelto) |
 | `sui-breadcrumbs` | Ruta de migas en web que dice dónde estás dentro de una jerarquía de 3 o más niveles y deja volver a cualquiera | sui-page-header (título de la pantalla) · botón de volver del layout (mobile) · sui-tab-menu-horizontal (secciones del mismo nivel) |
-| `sui-button` | Botón base para que la persona dispare una acción | sui-link-button (acción que se lee como texto) · sui-compact-button (ícono de 20-28 px en filas y barras) · sui-fancy-button (el CTA héroe) · sui-social-button (entrar con Google/Apple) · sui-button-group (opciones que se ven como un solo control) |
+| `sui-button` | Botón base para que la persona dispare una acción | sui-link-button (acción que se lee como texto) · sui-compact-button (ícono de 20-40 px en filas y barras) · sui-fancy-button (el CTA héroe) · sui-social-button (entrar con Google/Apple) · sui-button-group (opciones que se ven como un solo control) |
 | `sui-button-group` | Opciones pegadas en una fila que se prenden y se apagan, varias a la vez | sui-segmented-control (cambiar de vista o elegir una sola opción) · sui-checkbox (opciones que se suman dentro de un formulario largo) · sui-tab-chips (filtros en chips que se pueden desplazar) |
 | `sui-button-group-item` | Cada opción de un sui-button-group; no se usa suelto | sui-button-group (el grupo, que ya pinta sus ítems desde items[]) · sui-segmented-control (elegir una sola opción) · sui-switch (prender o apagar algo suelto) |
 | `sui-card` | Superficie con borde, radio y sombra que agrupa contenido, con slots de header, cuerpo, media y footer | sui-content-card (una fila «cara + nombre + detalle» dentro de su cajita) · sui-radio-card / sui-checkbox-card / sui-switch-card (la card ES la opción que se elige) · sui-product-card (un producto de la carta) · sui-store-card (un local en un listado del cliente) · sui-modal-sheet (contenido encima de la pantalla) |
@@ -48,8 +48,8 @@ Documentados: 116 de 116.
 | `sui-content-divider` | Línea con algo encima: el «o» entre dos opciones, la cabecera de un grupo o un botón entre bloques | sui-divider (la línea sola, horizontal o vertical) |
 | `sui-content-label` | Fila sin caja con ícono, foto o logo a la izquierda, título, descripción y un badge opcional | sui-content-card (la misma fila dentro de su propia cajita, con X) · sui-switch-label (un ajuste que se prende o apaga) · sui-alert (un aviso con color) · sui-card (para agrupar las filas) |
 | `sui-counter-input` | Cantidad con − y + a los lados, con mínimo y máximo (unidades en el carrito, pasajeros) | sui-input type="number" (un número que se tipea, sin pasos de a uno) · sui-slider (un valor de un rango continuo) · sui-select (elegir una cantidad de una lista corta) |
-| `sui-date-selector` | La cabecera de un calendario con el mes y las flechas de anterior y siguiente | sui-datepicker (el calendario completo, que ya la trae) · sui-tab-chips (elegir entre pocos días: hoy, mañana, sábado) |
-| `sui-datepicker` | Calendario para elegir una fecha o un rango de fechas, en popover o en línea | sui-input type="date" (una fecha suelta en un formulario: abre el selector del sistema) · sui-tab-chips + sui-radio-label (día y franja de un pedido programado) · sui-tab-chips o sui-select (períodos fijos: hoy, 7 días, 30 días) |
+| `sui-date-selector` | La cabecera de un calendario con el mes y las flechas de anterior y siguiente | sui-datepicker (el calendario completo, que ya la trae) · sui-segmented-control (2 a 4 días o períodos fijos) · sui-tab-chips (5 o más) |
+| `sui-datepicker` | Calendario para elegir una fecha o un rango de fechas, en popover o en línea | sui-input type="date" (una fecha suelta en un formulario: abre el selector del sistema) · sui-tab-chips + sui-radio-label (día y franja de un pedido programado) · sui-segmented-control (2 a 4 períodos fijos: hoy, 7 días, 30 días) · sui-tab-chips (5 o más períodos fijos) |
 | `sui-day-cell` | Un día del calendario, con sus estados de elegido, rango, hoy, marcado y bloqueado | sui-datepicker (el calendario completo, que ya la trae) · sui-tab-chips (pocos días para elegir, con nombre: hoy, mañana) |
 | `sui-day-label` | La inicial del día de la semana arriba de cada columna del calendario | sui-datepicker (el calendario completo, que ya la trae) · sui-button-group (elegir días de la semana: L M M J V S D) |
 | `sui-divider` | Línea de 1 px que separa bloques (horizontal) o datos en una fila (vertical) | sui-content-divider (línea con texto o botones encima, o el «o» entre dos opciones) |
@@ -83,7 +83,7 @@ Documentados: 116 de 116.
 | `sui-link-button` | Acción que se lee como texto, sin caja | sui-button (acción con caja: la principal o la secundaria de un grupo) · sui-compact-button (solo ícono, sin texto) · sui-alert (sus acciones se pasan en actions[] y ya salen como link) |
 | `sui-logo` | El logo de Master Pedidos (la M y la palabra), dibujado en SVG y coloreable | sui-brand-logo (logos de OTRAS marcas: WhatsApp, Google, Apple…) · sui-avatar (el logo de un local, que es una foto) |
 | `sui-modal` | Diálogo que se abre encima de la pantalla y pide terminar o cerrar algo antes de seguir | sui-modal-sheet (hoja que sube desde abajo y deja ver lo de atrás, p. ej. un mapa) · sui-alert (aviso en la misma pantalla, sin interrumpir) · sui-toast (confirmación breve de una acción) · sui-popover (contenido chico anclado a un botón) · sui-drawer-header (panel lateral) |
-| `sui-modal-footer` | Pie de modal con la acción principal a la derecha, la secundaria a su izquierda y un slot izquierdo para un checkbox, un link o un texto | sui-button (botones sueltos fuera de un modal o una hoja) · sui-drawer-footer (pie de un panel lateral) · sui-notification-footer (acciones de una notificación) |
+| `sui-modal-footer` | Pie de modal con la acción principal a la derecha, la secundaria a su izquierda y un slot izquierdo para un checkbox, un link o un texto | sui-button (botones sueltos fuera de un modal o una hoja) · sui-drawer-footer (pie de un panel lateral) · sui-notification-footer (pie del panel de notificaciones: ayuda de teclado y link a ajustes) |
 | `sui-modal-header` | Cabecera de modal con título, descripción, ícono opcional y la X de cerrar; sui-modal ya la dibuja sola | sui-modal (ya trae este header por title/description/iconVariant) · sui-drawer-header (cabecera de un panel lateral) · sui-page-header (título de una pantalla) |
 | `sui-modal-sheet` | Hoja que sube desde abajo, se arrastra entre alturas fijas y puede dejar usable lo de atrás (un mapa) | sui-modal (pide terminar algo antes de seguir, sin fondo usable) · sui-popover (contenido chico anclado a un botón) · sui-dropdown-menu (lista de acciones) |
 | `sui-notification` | Fila de la bandeja de notificaciones, con quién, qué pasó, hace cuánto y si ya se leyó | sui-toast (aviso efímero, incluido el «notification» de esquina de la guía) · sui-alert (aviso que se queda en su contexto) · sui-banner (toda la app) |
@@ -94,7 +94,7 @@ Documentados: 116 de 116.
 | `sui-pagination` | Números de página para recorrer una tabla larga en web cuando todos los datos ya están cargados | scroll infinito (directiva appInfiniteScroll de la app, para listas de Firestore) · sui-stepper (pasos de un flujo) · sui-tab-chips (filtrar en vez de paginar) |
 | `sui-password-strength` | Barra de 3 niveles y lista de condiciones que acompaña al campo de una contraseña nueva | sui-input con hint (una sola regla, como «Mínimo 6 caracteres») |
 | `sui-payment-icon` | El círculo de color de un pago de servicio (agua, gas, luz, internet, alquiler…) | sui-key-icon (cualquier otro ícono en círculo) · sui-brand-logo (el logo de un medio de pago con marca) |
-| `sui-period-range` | Un período predefinido (Hoy, Últimos 7 días) en la columna de presets del calendario de rango | sui-datepicker mode="range" (ya los trae) · sui-tab-chips (períodos fijos a la vista: super admin, ganancias del repartidor) · sui-select (períodos fijos en poco espacio: resumen del local) |
+| `sui-period-range` | Un período predefinido (Hoy, Últimos 7 días) en la columna de presets del calendario de rango | sui-datepicker mode="range" (ya los trae) · sui-segmented-control (2 a 4 períodos fijos a la vista) · sui-tab-chips (5 o más períodos fijos o que deslizan) |
 | `sui-popover` | Panel con flecha que señala un elemento de la pantalla y explica algo nuevo, con una o dos acciones; sirve para recorridos de bienvenida | sui-tooltip (ayuda corta al pasar el mouse, sin acciones) · sui-alert (aviso dentro del contenido) · sui-modal (algo que pide decidir antes de seguir) |
 | `sui-product-card` | Tarjeta de un producto de la carta con foto, nombre, descripción, precio y el botón para agregar (o editar) | sui-store-card (un local, no un producto) · sui-card (cualquier otro contenido) · sui-content-card (un producto en una fila, sin foto grande) |
 | `sui-progress-bar` | Barra que muestra cuánto falta para completar algo, pintada con el estado de lo que mide | sui-progress-bar-label (la misma barra con título, número y descripción) · sui-circular-progress-bar (el avance en un círculo, junto a un título) · un gráfico (repartir un total entre partes) |
@@ -119,13 +119,13 @@ Documentados: 116 de 116.
 | `sui-tab-menu-horizontal` | Pestañas subrayadas para cambiar entre secciones de contenido distinto dentro de una pantalla | sui-tab-chips (filtros o categorías que se deslizan) · sui-segmented-control (2 a 4 modos de la misma vista) · sui-tab-menu-vertical (menú lateral de ajustes en web) |
 | `sui-tab-menu-vertical` | Menú apilado para cambiar entre secciones de una página de ajustes en web | sui-tab-menu-horizontal (pocas secciones arriba del contenido) · sui-sidebar (navegación de toda la app) · sui-tab-chips (filtros o categorías) |
 | `sui-table` | Tabla de datos — una fila por registro, una columna por dato — para comparar y recorrer listas en web | tarjetas en grilla con sui-card (la misma lista cuando no entran las columnas) · sui-empty-state (no hay nada que listar todavía) · sui-pagination (paginar por número de página, debajo de la tabla) · sui-activity-feed (historial de quién hizo qué) |
-| `sui-tag` | Chip neutro que nombra algo elegido o aplicado y que la persona puede quitar | sui-badge (etiqueta de solo lectura, con color y significado) · sui-status-badge (resultado de un ciclo) · sui-tab-chips / sui-filter (chips para elegir) · sui-tag-input (campo que junta tags) |
+| `sui-tag` | Chip neutro que nombra algo elegido o aplicado y que la persona puede quitar | sui-badge (etiqueta de solo lectura, con color y significado) · sui-status-badge (resultado de un ciclo) · sui-tab-chips (chips para elegir) · sui-tag-input (campo que junta tags) |
 | `sui-tag-input` | Campo donde se escriben varios valores cortos que se van sumando como chips (palabras clave) | sui-input (un solo valor) · sui-select (una opción de una lista) · sui-checkbox-label (varias opciones fijas) |
 | `sui-textarea` | Campo de varias líneas para un texto libre (motivo, nota al repartidor, descripción) | sui-input (un dato de una línea) · sui-rich-editor (texto con formato, hoy sin uso) · sui-select (motivos que se pueden elegir de una lista) |
 | `sui-time-picker` | Campo para elegir una hora del día, con columnas de hora, minuto y AM/PM | sui-tab-chips + sui-radio-label (día y franja de entrega de un pedido programado) · sui-select (pocas horas fijas) · sui-input type="time" (hora libre con el selector del sistema) |
 | `sui-toast` | Aviso efímero que confirma el resultado de una acción y se va solo; se dispara con SuiToastService | sui-alert (aviso que se queda, en su contexto) · sui-banner (toda la app) · sui-notification (fila de la bandeja, con hora) · sui-form-hint (error de un campo) |
 | `sui-tooltip` | Directiva que muestra una ayuda corta al pasar el mouse o al enfocar un elemento; solo web, no sirve con el dedo | sui-form-hint (ayuda visible bajo un campo) · sui-modal-sheet (explicación que se abre al tocar, en mobile) · sui-popover (panel que señala algo y pide una acción) |
 | `sui-topbar` | Barra de navegación horizontal de escritorio — logo, secciones, buscador, íconos de acción y el chip de la cuenta | sui-sidebar (la navegación de los roles de la app, con cajón en mobile) · sui-page-header (el título de UNA pantalla, sin navegación) · sui-topbar-item / sui-topbar-button / sui-topbar-user (las piezas sueltas, para una cabecera armada a mano) |
-| `sui-topbar-button` | Botón de solo ícono de 40×40 para la barra superior, con punto rojo de «hay algo nuevo» | sui-button con onlyIcon (un botón de ícono en cualquier otro lugar) · sui-compact-button (ícono chico de 20-28 en filas y barras apretadas) · sui-topbar (la barra completa, que ya lo compone) |
+| `sui-topbar-button` | Botón de solo ícono de 40×40 para la barra superior, con punto rojo de «hay algo nuevo» | sui-button con onlyIcon (un botón de ícono en cualquier otro lugar) · sui-compact-button (ícono sin texto de 20 a 40 en filas y barras apretadas) · sui-topbar (la barra completa, que ya lo compone) |
 | `sui-topbar-item` | Una sección de la navegación horizontal — texto, ícono opcional, badge o contador — con estado activo | sui-topbar (la barra completa: lo compone desde [items]) · sui-tab-menu-horizontal (pestañas dentro de UNA pantalla) · sui-tab-chips (filtros) · sui-link-button (un link suelto en un texto) |
 | `sui-topbar-user` | Chip de la cuenta en la barra superior — avatar, nombre y flecha — que abre el menú de la cuenta | sui-topbar (la barra completa: lo compone desde [user]) · el perfil del pie de sui-sidebar (la cuenta en la navegación lateral) · sui-avatar (solo la foto, sin nombre ni menú) |

package/docs/sui-accordion/README.md

@@ -2,7 +2,7 @@
 name: sui-accordion
 selector: sui-accordion
 resumen: Fila con título que se abre para mostrar un texto o contenido secundario que no hace falta ver siempre
-alternativas: [sui-tabs (vistas hermanas que se alternan), sui-modal (detalle que pide atención completa), sui-card (contenido que siempre se ve)]
+alternativas: [sui-tab-menu-horizontal (vistas hermanas que se alternan), sui-modal (detalle que pide atención completa), sui-card (contenido que siempre se ve)]
 ---
 
 # sui-accordion
@@ -19,7 +19,7 @@ de cambios de una versión.
 
 - Lo que la persona necesita para decidir en esa pantalla: si hay que abrirlo siempre, va abierto
   (sin accordion).
-- Navegar entre vistas del mismo nivel: `sui-tabs`.
+- Navegar entre vistas del mismo nivel: `sui-tab-menu-horizontal` (o `sui-segmented-control` si son 2-4 modos de la misma vista). `sui-tabs` ya no existe: se partió en esos dos y `sui-tab-menu-vertical` en la 0.3.0.
 - Un solo campo que aparece o desaparece: un `@if` con un `sui-switch` que lo controle.
 - Anidar accordions: dos niveles de «+» dentro de una card se leen como un árbol.
 

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

@@ -119,8 +119,7 @@ interface SuiActivityTask { state: 'success' | 'warning' | 'pending' | 'error';
 
 - **Los tres puntos salen por defecto** (`showAction` es `true` si no lo pasas). Si no hay menú
   detrás, pon `showAction: false` en cada item o la persona toca algo que no hace nada.
-- **`replyLabel` por defecto dice «Reply», en inglés.** En una fila `comment`, pasa siempre
-  `replyLabel: 'Responder'`.
+- `replyLabel` por defecto dice «Responder» (en español desde el 04-10-2026).
 - **`file.href` no hace nada.** El tipo dice que dispara la descarga, pero la plantilla no lo lee:
   la descarga la haces tú en `(fileDownload)`.
 - `timestamp` es un string: el feed no formatea ni actualiza «hace 4 min». Si la pantalla queda

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ú.