@ajuarezso/sui-design-system 0.22.0 → 0.23.1

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

@@ -30,7 +30,7 @@ Es el reemplazo del `sui-button` `ghost` `primary`.
 > los dos tamaños, el subrayado, los íconos y el deshabilitado, sin do/don't. Las reglas de
 > abajo son **canon (aprobado por el dueño, 03-10-2026)** salvo donde dice otra fuente.
 >
-> Uso medido el 03-10-2026 en `master-pedidos/src/app`: 22 link-buttons en 17 archivos, sin
+> Uso medido el 03-10-2026 en `master-pedidos/src/app` (el 04-10-2026 ya son 23): 22 link-buttons en 17 archivos, sin
 > contar prototipos ni vitrinas (`master-preview`, `master-prototipos`, `mockup-sheets-*`,
 > `dx/*`, `master-rutina`, `master-medico`, `dev-index`) ni la copia local del componente en
 > `components/sui/sui-link-button/`. Variantes: 10 `gray` (1 por default), 7 `primary`,
@@ -44,24 +44,26 @@ Es el reemplazo del `sui-button` `ghost` `primary`.
 - **`modifiable` no tiene color propio**: hereda el del contenedor, para que lo pinte quien lo usa.
 - **Subrayado**: aparece al pasar el mouse; con `underline` queda fijo.
 - **Deshabilitado**: el texto pasa a `text-disabled-300` y se va el subrayado.
-- **Tamaños**: `large` (24 px, texto `label-md`, ícono 20; extensión SUI para mobile), `medium` (20 px, `label-sm`, ícono 20) y `small` (16 px, `label-xs`, ícono 16).
+- **Tamaños**: `medium` (20 px, `label-sm`, ícono 20) y `small` (16 px, `label-xs`, ícono 16).
+  `large` (24 px, `label-md`, ícono 20) **no está en la guía**: es extensión de SUI para mobile.
 
 ### `variant`
 
 | variant | cuándo | ejemplo real de la app | fuente |
 |---|---|---|---|
 | `primary` | El link principal de una sección: «Ver todas», «Cambiar horario», «Descargar la app». Reemplaza al `sui-button` `ghost` `primary`. | `pages/customer/checkout/checkout.html:165` («Cambiar horario») · `pages/public/landing-business/landing-business.html:208` («Descargar la app») | canon (aprobado por el dueño, 03-10-2026) |
-| `gray` (default) | Salida de baja jerarquía: «Omitir», «Ahora no», «Cerrar sesión», «Más información». | `pages/account-suspended/account-suspended.html:70` («Cerrar sesión») · `pages/super-admin/master-approvals/master-approvals.html:90` («Más información») | canon (aprobado por el dueño, 03-10-2026) |
+| `gray` (default) | Salida de baja jerarquía: «Omitir», «Ahora no», «Cerrar sesión», «Más información». | `pages/account-suspended/account-suspended.html:70` («Cerrar sesión») · `pages/super-admin/master-approvals/master-approvals.html:89` («Más información») | canon (aprobado por el dueño, 03-10-2026) |
 | `black` | Un link dentro de un texto, con `underline`: «Términos y condiciones», «Ver política». | (sin uso hoy) | canon (aprobado por el dueño, 03-10-2026) |
 | `error` | Quitar algo menor, en texto: «Quitar», «Borrar foto». Nunca para abrir una destructiva grande. | (sin uso correcto hoy) | canon (aprobado por el dueño, 03-10-2026) |
 | `modifiable` | Toma el color del contenedor: las acciones del alert, del banner y del toast. | `components/sui/sui-toast/sui-toast-outlet.html:36` (acción del toast) · `components/subscription-banner/subscription-banner.html:10` («Renovar plan») | hereda el color: según la guía del DS · dónde va: canon (aprobado por el dueño, 03-10-2026) |
 
 **Usos de hoy que rompen la regla:**
 
-- **3 `error` que abren una destructiva grande → `sui-button` `stroke` `error`:**
+- **4 `error` que abren una destructiva grande → `sui-button` `stroke` `error`:**
   `pages/super-admin/master-orders/master-orders.html:425` («Cancelar pedido»),
-  `pages/orders/orders.html:232` («Rechazar pedido»), `pages/central/central-gastos/central-gastos.html:101`
-  («Anular gasto»).
+  `pages/orders/orders.html:233` («Rechazar pedido»), `pages/central/central-gastos/central-gastos.html:101`
+  («Anular gasto») y `pages/driver/driver-order-detail/driver-order-detail.html:745` («Cancelar» el
+  pedido, en `large`; nuevo, medido el 04-10-2026).
 - A discutir: `pages/super-admin/master-orders/master-orders.html:430` («Liberar» en `gray`): es una
   acción de operación, no una salida de baja jerarquía.
 
@@ -96,8 +98,8 @@ Los íconos son nombres RemixIcon sin el prefijo `ri-`. Miden 20 px en `large` y
 |---|---|---|
 | `true` | La acción existe pero ahora no se puede: mientras se guarda, mientras se procesa otra acción. Mejor que esconderla si la persona la espera en ese lugar. | cómo se ve: según la guía del DS · cuándo: propuesta |
 
-Ejemplos: `components/add-product-modal/add-product-modal.html:330` («Vista previa» mientras guarda),
-`pages/orders/orders.html:232`.
+Ejemplos: `components/add-product-modal/add-product-modal.html:339` («Vista previa» mientras guarda),
+`pages/orders/orders.html:233`.
 
 ### `href`, `target`, `rel`, `type`, `ariaLabel`
 
@@ -113,8 +115,8 @@ Ejemplos: `components/add-product-modal/add-product-modal.html:330` («Vista pre
 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.
+`[size]="bp.isMobile() ? 'large' : 'small'"`. Medido el 04-10-2026 en `master-pedidos`: 166 `[size]`
+con `bp` (142 `large`/`medium`, 22 `large`/`small`, 2 `medium`/`xsmall`). Regla del dueño, 03-10-2026.
 
 | size | alto | texto | ícono |
 |---|---|---|---|
@@ -138,11 +140,13 @@ va un tamaño más chico. La app ya lo resuelve con `BreakpointsService`
 
 **Ningún tamaño llega a 44 px**: el link mide 16–24 de alto y no tiene padding. En mobile el área
 táctil la pone el contenedor: la fila o el bloque donde vive tiene que medir 44 px o más de alto, o
-dejar aire alrededor del link. `small` (16) no va en mobile: hoy hay 6 links `small` fijos
-(`pages/driver/driver-profile/driver-profile.html:258`, `:264`, `pages/driver/driver-dashboard/driver-dashboard.html:1089`,
-`pages/mi-negocio/mi-negocio.html:472`, `pages/customer/order-history/order-history.html:413`,
-`components/add-product-modal/add-product-modal.html:330`); los 4 de repartidor y cliente se usan
-sí o sí en el teléfono → `[size]="bp.isMobile() ? 'medium' : 'small'"`.
+dejar aire alrededor del link. `small` (16) no va en mobile. Medido el 04-10-2026: los 4 de
+repartidor y cliente ya usan `[size]="bp.isMobile() ? 'medium' : 'small'"`
+(`pages/driver/driver-profile/driver-profile.html:258` y `:264`,
+`pages/driver/driver-dashboard/driver-dashboard.html:1092`,
+`pages/customer/order-history/order-history.html:412`). Quedan 2 `small` fijos, los dos del panel
+de la empresa: `pages/mi-negocio/mi-negocio.html:474` y
+`components/add-product-modal/add-product-modal.html:339`.
 
 ## «No usar»: por qué no hoy y cuándo sí
 
@@ -180,8 +184,8 @@ Slots: `<ng-content>` (el texto).
 
 - **El output es `(clicked)`**, no `(click)` como en `sui-button`. `(click)` sobre el host igual
   funciona porque el clic burbujea, pero hoy hay 6 usos así (`components/subscription-banner/subscription-banner.html:10`,
-  `pages/super-admin/master-approvals/master-approvals.html:90`, `pages/central/central-gastos/central-gastos.html:101`,
-  `pages/account-suspended/account-suspended.html:66` y `:70`, `pages/customer/viaje/viaje.html:215`).
+  `pages/super-admin/master-approvals/master-approvals.html:89`, `pages/central/central-gastos/central-gastos.html:101`,
+  `pages/account-suspended/account-suspended.html:66` y `:70`, `pages/customer/viaje/viaje.html:216`).
   Usa `(clicked)`, que ya respeta `disabled`.
 - **`rel` arranca en `null`**, a diferencia de compact, fancy y social, que traen
   `'noopener noreferrer'`. Con `target="_blank"` hay que ponerlo a mano.

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

@@ -2,7 +2,7 @@
 name: sui-modal-footer
 selector: sui-modal-footer
 resumen: 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
-alternativas: [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)]
+alternativas: [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-footer

package/docs/sui-notification/README.md

@@ -101,8 +101,8 @@ La fila **no tiene `size`**: foto de 40 px, 12 px de relleno, texto de 14.
 | uso | mobile | web | fuente |
 |---|---|---|---|
 | la fila | toda la fila se toca para abrirla: mide 64 px o más | igual | según el componente |
-| ⋮ (`showMore`) | no aplica: aparece con el mouse | 24 px | según el componente |
-| la X (`dismissible`) | se ve de 20 px; **se toca en 40 × 40** | igual | canon (aprobado por el dueño, 03-10-2026): área táctil invisible, extensión SUI |
+| ⋮ (`showMore`) | se ve de 24 y se toca en 44 × 44 cuando está visible (foco o fila activa); oculto no recibe toques | 24 px | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono |
+| la X (`dismissible`) | se ve de 20 px; **se toca en 44 × 44** | se ve de 20; se toca en 40 × 40 | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono (antes 40, pedido del dueño 03-10-2026): área táctil invisible, extensión SUI |
 | botones de `type="button"` | los pone quien la usa: `[size]="bp.isMobile() ? 'large' : 'xsmall'"` | `xsmall` | propuesta |
 
 ## «No usar»: por qué no hoy y cuándo sí
@@ -147,9 +147,9 @@ Slots: `[slot=company-logo]`, `[slot=file]`, `[slot=message]`, el contenido libr
 
 ## Trampas
 
-- **La X se toca en 40 × 40** aunque se vea de 20 (un `::before` invisible sobre su `<button>`,
-  desde 03-10-2026): en una fila que se toca entera, el toque a 10 px de la X la cierra en vez de
-  abrirla.
+- **La X se toca en 44 × 44 en el teléfono** (40 × 40 en web) aunque se vea de 20 (un `::before`
+  invisible sobre su `<button>`; 44 desde el 04-10-2026): en una fila que se toca entera, el toque a
+  12 px de la X la cierra en vez de abrirla. La X y el ⋮ comparten la esquina: no se usan juntos.
 - **Es el avatar el que decide el modelo**: con `avatar` es una fila plana (`role="article"`); sin
   `avatar` es un alert con borde y sombra (`role="status"`, que el lector de pantalla anuncia).
 - **El avatar no es `sui-avatar`**: lo dibuja la fila, en un círculo **negro** con iniciales.
@@ -161,7 +161,9 @@ Slots: `[slot=company-logo]`, `[slot=file]`, `[slot=message]`, el contenido libr
 - `feature` usa `sparkling-fill` aquí y en el alert, y `magic-fill` en el banner.
 - `dismissible` solo emite `(dismissed)`: la fila **no se esconde sola** (a diferencia de alert y
   banner). La saca quien la usa.
-- El ⋮ de `showMore` se ve solo con el mouse encima o con `active`: en mobile no aparece.
+- El ⋮ de `showMore` se ve solo con el mouse encima, con `active` o cuando le llega el foco de
+  teclado: en mobile no aparece. **Mientras está oculto no recibe toques** (desde el 04-10-2026;
+  antes un toque en la esquina disparaba `moreClicked` sin que se viera nada).
 - **`showMore` y `dismissible` juntos se pisan**: el ⋮ y la X van los dos arriba a la derecha.
 - Con avatar (o con `type` distinto de `basic`) y **sin `description`**, queda un «∙» colgando
   después de la hora («Hace 8 min ∙»).

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

@@ -44,7 +44,7 @@ la barra superior, con filas `sui-notification` y la cabecera `sui-notification-
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| el pie entero | no aplica: es ayuda de teclado; en mobile no se muestra | unos 48 px de alto | propuesta |
+| el pie entero | no aplica: es ayuda de teclado; en mobile no se muestra (el componente no se oculta solo: lo esconde quien lo usa) | 48 px de alto (14 + 20 de la tecla + 14) | alto: según el componente · ocultarlo en mobile: propuesta |
 | el link de ajustes | si hiciera falta, un `sui-link-button` `large` suelto | `small` (16 px) | propuesta |
 
 ```html
@@ -59,7 +59,7 @@ la barra superior, con filas `sui-notification` y la cabecera `sui-notification-
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
 |---|---|---|
 | el componente | no hay panel de campana | si el panel del local o el super admin suman una campana con la bandeja desplegable en la barra superior (web) |
-| `manage` con el texto por defecto | está en inglés | nunca: siempre un texto propio |
+| `manage` con el texto por defecto | ya está en español («Administrar notificaciones», 03-10-2026), pero el link debe nombrar la pantalla a la que lleva | nunca: siempre un texto propio |
 
 ## API
 

package/docs/sui-notification-tab-menu/README.md

@@ -44,8 +44,8 @@ texto) y el filtro es un compact-button de 24 px.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| las pestañas | **no alcanza**: 20 px de alto para el dedo. Usar `sui-tab-chips` | 20 px de alto, en una fila de 48 | sin tamaño suficiente (no se cambia aquí) |
-| el filtro | 24 px, **bajo el mínimo de 32 px** en mobile | 24 px | sin tamaño suficiente |
+| las pestañas | **no alcanza**: 20 px de alto (el `line-height` del texto; el botón no tiene relleno), lejos de los 44 del dedo. Usar `sui-tab-chips` | 20 px de alto, en una fila de 48 | según el componente |
+| el filtro | 24 px (compact-button `large`), **bajo los 44 px del dedo** | 24 px | según el componente |
 
 ```html
 @if (bp.isMobile()) {
@@ -97,7 +97,9 @@ interface SuiNotificationTab<T = string> {
 - La raya de la pestaña activa usa el primario de la app (naranja), no el azul del Figma.
 - El badge no tiene tope: 120 sale «120». Si hace falta, el texto lo recorta quien lo usa («99+» va
   en `label`, no en `badge`, porque `badge` es un número).
-- El host lleva `role="tablist"` y cada pestaña `role="tab"` con `aria-selected`; no hay panel `tabpanel` asociado: lo arma quien lo usa.
+- Las pestañas van en su propio `role="tablist"` (el botón de filtro queda afuera, desde el
+  04-10-2026) y cada una es `role="tab"` con `aria-selected`. Un solo tab stop: ← → mueven y
+  activan con vuelta al inicio, Home/End a los extremos. No hay `tabpanel` asociado: lo arma quien lo usa.
 
 ## Ejemplo
 

package/docs/sui-pagination/README.md

@@ -18,7 +18,8 @@ página.
 **No lo uses** para:
 
 - **Mobile**: las listas se recorren con el dedo. Va scroll infinito (la directiva
-  `appInfiniteScroll` que ya usan productos, clientes y equipo).
+  `appInfiniteScroll` que ya usan productos, clientes, el historial del repartidor y del cliente,
+  usuarios del super admin y las listas de la central).
 - **Listas que se leen de Firestore por cursor** (`getCollectionPage`): con cursores solo se puede
   pedir la página siguiente. Saltar a la página 7 obliga a leer las 6 anteriores, y Firestore las
   cobra igual. El canon de la app para esas listas es scroll infinito (CLAUDE.md, «Performance —
@@ -36,8 +37,10 @@ Regla corta: **tabla con todo cargado en web → pagination · lista de Firestor
 > cuándo cada forma.
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-badge`): **0 usos**.
-> Las 3 listas largas de la app (`pages/products/products.html:242`, `pages/customers/customers.html:161`,
-> `pages/settings/team/team.ts:347`) usan scroll infinito.
+> Las listas largas de la app usan scroll infinito con `appInfiniteScroll` (por ejemplo
+> `pages/products/products.html:242` y `pages/customers/customers.html:161`). Equipo
+> (`pages/settings/team/team.ts:339`) pagina por cursor con `loadMore()`, pero hoy nada lo llama
+> (medido el 04-10-2026).
 
 ### `type`
 
@@ -63,7 +66,7 @@ Regla corta: **tabla con todo cargado en web → pagination · lista de Firestor
 | `firstLast` | `true` | Más de 20 páginas, donde ir al final es un caso de uso (la última semana de un export). | según la guía del DS (los botones existen); el cuándo es propuesta |
 | `siblingCount` | `1` (default) | Siempre. Más números a cada lado ensanchan sin ayudar. | propuesta, falta aprobación |
 | `showInfo` | `true` (default) | Con `infoFormat="items"`: «Mostrando 11-20 de 134». | propuesta, falta aprobación |
-| `infoFormat` | `'items'` (default) | El único en español. | según el código |
+| `infoFormat` | `'items'` (default) | «Mostrando 11-20 de 134». | según el código |
 | `infoFormat` | `'pages'` | Imprime «Página 2 de 14» (en español desde 03-10-2026). Cuando no se sabe el total de ítems o no importa. | propuesta, falta aprobación |
 | `pageSizeOptions` | `[]` (default) | Lo normal: sin selector de filas por página. | propuesta, falta aprobación |
 | `pageSizeOptions` | `[10, 25, 50]` | Las opciones dicen «10 / página» (en español desde 03-10-2026). | propuesta, falta aprobación |
@@ -92,7 +95,7 @@ mobile no se usa.
 |---|---|---|
 | el componente entero | las listas de la app leen de Firestore por cursor y usan scroll infinito | una tabla de web con todos los datos ya cargados (un reporte de 300 filas filtrado en el navegador) |
 | `full-radius` | no combina con las esquinas del resto de la app | nunca, salvo que la app pase a botones redondos |
-| `infoFormat="pages"` | sale en inglés | cuando el DS lo traduzca («Página 2 de 14») |
+| `infoFormat="pages"` | la razón original (salía en inglés) ya no aplica: desde el 03-10-2026 dice «Página 2 de 14» | cuando no se sabe el total de ítems o no importa |
 | `firstLast` | ninguna tabla tiene 20+ páginas | un export largo donde ir al final es habitual |
 
 ## API

package/docs/sui-password-strength/README.md

@@ -18,7 +18,7 @@ la barra se llena (rojo, naranja, verde) y cada condición se marca a medida que
 
 - El login: la contraseña ya existe, no se evalúa.
 - Una sola regla («Mínimo 6 caracteres»): alcanza el `hint` del `sui-input`, como hoy en
-  `pages/auth/register/register.html:121`.
+  `pages/auth/register/register.html:124`.
 
 Regla corta: **contraseña nueva con 2+ reglas → este · una regla → hint.**
 

package/docs/sui-period-range/README.md

@@ -2,7 +2,7 @@
 name: sui-period-range
 selector: sui-period-range
 resumen: Un período predefinido (Hoy, Últimos 7 días) en la columna de presets del calendario de rango
-alternativas: [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)]
+alternativas: [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-period-range
@@ -18,9 +18,10 @@ costado del calendario.
 
 - El rango normal: `sui-datepicker mode="range"` ya pinta los presets con este componente y los
   cambia por `[presets]`.
-- **Cambiar de período en un resumen** («Hoy · 7 días · 30 días»): `sui-tab-chips`, como hoy en
-  el super admin (`master-overview.html:13`) y en las ganancias del repartidor; o `sui-select`,
-  como el resumen del local (`overview.html:46`).
+- **Cambiar de período en un resumen** («Hoy · 7 días · 30 días»): `sui-segmented-control` si son 2
+  a 4 opciones, `sui-tab-chips` si son 5 o más o se deslizan (canon, dueño 04-10-2026). Hoy la app
+  los tiene en `sui-tab-chips` (super admin `master-overview.html:13`, ganancias del repartidor) y
+  en `sui-select` (resumen del local, `overview.html:44`): con 3 opciones pasan a segmented.
 
 ## Qué variante usar
 
@@ -40,26 +41,28 @@ Usos de hoy que rompen la regla: **0**.
 
 ## Tamaño en mobile y en web
 
-**No tiene `size`.** Mide 168 × 36: en mobile **no llega** a los 44 px. En el datepicker, en
-mobile, los presets pasan a una fila que se desplaza de costado.
+Tiene `size`: **`medium`** (default, 168 × 36, Figma) y **`large`** (168 × 44, texto 16/24). El
+`sui-datepicker` `xlarge` pinta sus rangos predefinidos en `large`; en mobile pasan a una fila que
+se desplaza de costado.
 
-| uso | mobile | web | fuente |
-|---|---|---|---|
-| preset de un rango | 36 px de alto — **no llega** | 168 × 36 | medido |
+| size | alto | texto | uso | fuente |
+|---|---|---|---|---|
+| `large` | **44** (10 + 24 + 10) | 16/24 | mobile | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono |
+| `medium` (default) | 36 | 14/20 | web, columna de presets | medido (Figma 443:341) |
 
 ```html
-<!-- Web: columna de presets -->
-<sui-period-range label="Últimos 7 días" [active]="preset() === '7d'" (clicked)="aplicar('7d')" />
+<sui-period-range [size]="bp.isMobile() ? 'large' : 'medium'" label="Últimos 7 días"
+                  [active]="preset() === '7d'" (clicked)="aplicar('7d')" />
 ```
 
-**Sin tamaño suficiente para mobile.** En el celular, los períodos fijos van en `sui-tab-chips`,
-como ya hacen el super admin y las ganancias del repartidor.
+Fuera del datepicker, en el celular los períodos fijos de 2 a 4 opciones van en
+`sui-segmented-control` y los de más opciones en `sui-tab-chips` (canon del dueño, 04-10-2026).
 
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
 |---|---|---|
-| todo el componente suelto (0 usos) | los períodos de la app son fijos y van en tab-chips o select | una columna de atajos al lado de un calendario propio, en web |
+| todo el componente suelto (0 usos) | los períodos de la app son fijos y van en segmented-control (2-4) o tab-chips (5+) | una columna de atajos al lado de un calendario propio, en web |
 | `disabled` | ningún período queda sin datos hoy | presets de un local nuevo («Últimos 12 meses» con 2 semanas de vida) |
 
 ## API
@@ -72,6 +75,7 @@ como ya hacen el super admin y las ganancias del repartidor.
 | `label` | `string` | — (requerido) |
 | `active` | `boolean` | `false` |
 | `disabled` | `boolean` | `false` |
+| `size` | `'medium' \| 'large'` | `'medium'` |
 
 | output | payload |
 |---|---|

package/docs/sui-popover/README.md

@@ -57,8 +57,8 @@ una función nueva que conviene mostrar donde está («Aquí programas tus pedid
 |---|---|---|---|
 | `doubleButton` | `true` (default) | Desde el segundo paso de un recorrido («Atrás» / «Siguiente»), o un aviso suelto con «Ahora no» / «Probar». | propuesta |
 | `doubleButton` | `false` | El primer paso de un recorrido o un aviso suelto con una sola salida («Entendido»). | propuesta |
-| `backLabel` · `nextLabel` | texto en español | Los defaults ya son «Atrás» y «Siguiente» (03-10-2026); el último paso pasa `nextLabel="Listo"`. | canon (copy de la app: tuteo, sentence case) |
-| orden | secundario a la izquierda, primario a la derecha | Ya lo hace el componente (stroke neutral + filled primary), igual que `sui-modal-footer`. | canon (orden de botones de la app) |
+| `backLabel` · `nextLabel` | texto en español | Los defaults ya son «Atrás» y «Siguiente» (03-10-2026); el último paso pasa `nextLabel="Listo"`. | canon (CANON-SUI §5.1 y §5.3: sentence case, tuteo) |
+| orden | secundario a la izquierda, primario a la derecha | Ya lo hace el componente (stroke neutral + filled primary), igual que `sui-modal-footer`. | canon (CLAUDE.md, «Botones — composición y orden») |
 | `step` | `{ current, total }` | Con `stepper`. Sin `step`, el componente asume **1 de 4**. | propuesta |
 
 ### Flecha, ícono, texto y cierre
@@ -73,7 +73,7 @@ una función nueva que conviene mostrar donde está («Aquí programas tus pedid
 | `position` | `*-left` · `*-center` · `*-right` | Alinea la flecha con el elemento cuando el popover no puede centrarse sobre él (está cerca de un borde). | propuesta |
 | `icon` | el de lo que se explica | Siempre uno que diga el tema (`calendar-schedule-line` para programar). El default es un ícono de persona. | propuesta |
 | `icon` | `null` | Cuando el texto ya basta y el ícono sería decoración. | propuesta |
-| `title` | frase corta | Qué es, en sentence case y sin punto final. | canon (copy de la app) |
+| `title` | frase corta | Qué es, en sentence case y sin punto final. | canon (CANON-SUI §5.1 y §5.2) |
 | `description` | una o dos frases | Qué hace o por qué importa. | propuesta |
 | `dismissIcon` | `true` (default) | Siempre: un recorrido se puede saltar. | propuesta |
 | `dismissIcon` | `false` | No usar hoy. **Cuándo sí:** un paso que no se puede saltar porque sin él no funciona lo siguiente. | propuesta |
@@ -88,20 +88,24 @@ cada lado; en uno más angosto se sale. El `size` cambia **los botones del pie**
 |---|---|---|
 | `small` (default) | 36 px (`sui-button` `small`) | Figma |
 | `medium` | 40 px (`sui-button` `medium`) | canon (aprobado por el dueño, 03-10-2026): extensión SUI |
+| `large` | 48 px (`sui-button` `large`) | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono. Size nuevo del 04-10-2026 |
 
-La X se ve de 24 y **se toca en 40 × 40** en los dos (un `::before` invisible sobre su botón,
+La X se ve de 24 y **se toca en 40 × 40** en todos (un `::before` invisible sobre su botón,
 extensión SUI 03-10-2026).
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
 | el panel | 320 px (cabe desde 352 px de pantalla) | 320 px | según el componente |
-| botones del pie | `medium` (40) | `small` (36) | propuesta: el tamaño es extensión SUI aprobada (03-10-2026); el «cuándo» falta aprobarlo |
+| botones del pie | `large` (48) | `small` (36) | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono |
 | la X | se ve de 24, se toca en 40 | igual | canon (aprobado por el dueño, 03-10-2026) |
 
 ```html
-<sui-popover footer="stretch" [size]="bp.isMobile() ? 'medium' : 'small'" … />
+<sui-popover footer="stretch" [size]="bp.isMobile() ? 'large' : 'small'" … />
 ```
 
+`large` es el siguiente de la escala del `sui-button` (48, el del footer de los modales). `medium`
+(40) queda para quien ya lo usa: no llega al piso de 44.
+
 En mobile, si el recorrido es la bienvenida de la app, conviene una pantalla o un
 `sui-modal-sheet` por paso en vez del popover (propuesta, falta aprobación).
 
@@ -135,7 +139,7 @@ Hoy el popover entero tiene **0 usos**; esto es lo que no se usaría aunque lleg
 | `nextLabel` | `string` | `'Siguiente'` |
 | `doubleButton` | `boolean` | `true` |
 | `step` | `{ current: number; total: number } \| null` | `null` |
-| `size` | `'small' \| 'medium'` | `'small'` |
+| `size` | `'small' \| 'medium' \| 'large'` | `'small'` |
 
 | output | payload |
 |---|---|
@@ -152,6 +156,8 @@ Slot: `[data-slot=body]` reemplaza título y descripción.
   «Paso X de N» (este último no se puede cambiar).
 - **El ícono por defecto es una persona** (`user-6-line`). Si no quieres ícono, `[icon]="null"`.
 - **`step` vacío = 1 de 4**: con `stepper` o `text-stepper`, pásalo siempre.
+- Con `stepper`, los puntos se leen como «Paso X de N» (`role="img"` con `aria-label`, desde el
+  04-10-2026; antes eran `aria-hidden` y el lector no sabía en qué paso iba).
 - **No se posiciona solo**: `position` cambia dónde sale la flecha, no dónde aparece el panel.
   Tampoco se cierra al tocar afuera ni con Escape; cierra quien escucha `(dismissed)`.
 - `position` se lee «borde de la flecha, luego su lugar»: `top-left` es flecha **arriba a la

package/docs/sui-product-card/README.md

@@ -32,7 +32,7 @@ Regla corta: **producto en la grilla de la carta → product-card · producto en
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-card`): **3
 > product-cards en 2 archivos**: la carta del cliente
-> (`pages/customer/restaurant-menu/restaurant-menu.html:324` y `:387`) y la grilla del local
+> (`pages/customer/restaurant-menu/restaurant-menu.html:323` y `:386`) y la grilla del local
 > (`pages/products/products.html:145`, con `action="edit"`).
 
 ### Las piezas
@@ -54,9 +54,10 @@ Regla corta: **producto en la grilla de la carta → product-card · producto en
 
 Outputs: `openDetail` (toque en la card), `add`, `increment`, `decrement`, `edit`.
 
-**Usos de hoy que rompen las reglas:** 0. **Falta en el DS:** el precio tachado y la chapa de
-descuento. La carta los dibuja afuera (`pages/customer/restaurant-menu/restaurant-menu.scss:426`,
-deuda anotada): cuando se pueda publicar, va un input `precioLista`.
+**Usos de hoy que rompen las reglas:** 0. **Pendiente de migrar:** el precio tachado y la chapa de
+descuento ya existen en el DS (`precioLista`, ver «Precio con descuento»), pero la carta los sigue
+dibujando afuera (`pages/customer/restaurant-menu/restaurant-menu.scss:426`, deuda anotada) y
+ninguna de las 3 cards pasa `precioLista` ni `size`.
 
 ## Tamaño en mobile y en web
 
@@ -67,20 +68,23 @@ El ancho lo da la grilla y la card llena su celda. El `size` cambia **los botone
 |---|---|---|---|---|
 | `small` (default) | 36 × 36 | 34 × 36 | 18 / 16 | lo que había en el DS |
 | `medium` | 40 × 40 | 40 × 40 (pill de 104) | 20 | canon (aprobado por el dueño, 03-10-2026): extensión SUI |
+| `large` | 44 × 44 | 44 × 44 (pill de 112) | 20 | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono. Size nuevo del 04-10-2026 |
 
-En `medium` el stepper (104 px) no entra al lado del precio en la grilla de 2 columnas de mobile:
-el pie envuelve y el stepper baja a su propia línea, a la derecha. El «+» y el lápiz sí siguen al
-lado del precio.
+En `medium` y `large` el stepper (104 / 112 px) no entra al lado del precio en la grilla de 2
+columnas de mobile: el pie envuelve y el stepper baja a su propia línea, a la derecha. El «+» y el
+lápiz sí siguen al lado del precio.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
 | grilla de la carta | 2 columnas (`1fr 1fr`, gap 12) | `repeat(auto-fill, minmax(220px, 1fr))` desde 600 px y `minmax(180px, 1fr)` en desktop | lo que hay en la app |
-| botón «+», lápiz, stepper | `medium` (40) | `small` (36) | propuesta: el tamaño es extensión SUI aprobada (03-10-2026); el «cuándo» falta aprobarlo |
+| botón «+», lápiz, stepper | `large` (44) | `small` (36) | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono |
 
 ```html
-<sui-product-card [size]="bp.isMobile() ? 'medium' : 'small'" … />
+<sui-product-card [size]="bp.isMobile() ? 'large' : 'small'" … />
 ```
 
+`medium` (40) queda para quien ya lo usa: no llega al piso de 44 del teléfono.
+
 ## Precio con descuento
 
 `precioLista` es el precio de referencia. Si es **mayor** que `price`, la card pinta el precio en
@@ -116,7 +120,7 @@ por `::after` y chapa por `::before` sobre `.product__price`), que se borra al m
 | `unavailableLabel` | `string` | `'Agotado'` |
 | `action` | `'add' \| 'edit'` | `'add'` |
 | `precioLista` | `number \| null` | `null` |
-| `size` | `'small' \| 'medium'` | `'small'` |
+| `size` | `'small' \| 'medium' \| 'large'` | `'small'` |
 
 | output | payload |
 |---|---|

package/docs/sui-progress-bar/README.md

@@ -96,7 +96,7 @@ readonly bp = inject(BreakpointsService); // master-pedidos: src/app/services/br
 ```
 
 ```html
-<sui-progress-bar [value]="progreso()" [size]="bp.isMobile() ? 'medium' : 'small'" ariaLabel="Subiendo la foto" />
+<sui-progress-bar [value]="progreso()" [size]="bp.isMobile() ? 'large' : 'medium'" ariaLabel="Subiendo la foto" />
 ```
 
 ## API
@@ -110,6 +110,7 @@ readonly bp = inject(BreakpointsService); // master-pedidos: src/app/services/br
 | `color` | `'blue' \| 'green' \| 'orange' \| 'red' \| 'purple'` | `'blue'` |
 | `size` | `'small' \| 'medium' \| 'large' \| 'xlarge'` | `'medium'` |
 | `ariaLabel` | `string \| null` | `null` |
+| `ariaLabelledby` | `string \| null` | `null` |
 
 Outputs: ninguno.
 <!-- api:fin -->
@@ -122,7 +123,8 @@ Outputs: ninguno.
   este proyecto es naranja).
 - El ancho es el 100 % del padre: dentro de un flex, dale `flex: 1` o un ancho.
 - Lleva `role="progressbar"` con `aria-valuenow`; la animación se apaga con
-  `prefers-reduced-motion`.
+  `prefers-reduced-motion`. Nombre: `ariaLabel`, o `ariaLabelledby` (id de un texto visible), y si
+  no hay ninguno se llama «Progreso» (04-10-2026: antes quedaba sin nombre).
 
 ## Ejemplo
 

package/docs/sui-progress-bar-label/README.md

@@ -123,6 +123,8 @@ Output: `(linkClick)`. Con `link` de texto el `<a>` no navega y solo emite; con
 - El link se pinta en el azul de información, no en el naranja de la marca.
 - Si no hay `title` y `percentage` es `false`, no se dibuja la fila de arriba.
 - Tiene el strip del `title` nativo: no aparece el tooltip gris del navegador.
+- El `title` visible nombra la barra (`aria-labelledby`, 04-10-2026); sin título (`on-right`) y sin
+  `ariaLabel` se anuncia «Progreso».
 
 ## Ejemplo
 

package/docs/sui-radio/README.md

@@ -19,8 +19,8 @@ Va dentro de un `sui-radio-group`, que es el que hace que elegir una desmarque l
 
 - Un círculo con su texto en una lista densa (franjas horarias): `sui-radio-label`.
 - Opciones con peso (ícono, descripción, borde) o que se tocan en el teléfono: `sui-radio-card`
-  (método de pago, tipo de entrega, motivos de cancelación). Crece con `bp.controlSize()`; el
-  radio-label no tiene `size`.
+  (método de pago, tipo de entrega, motivos de cancelación). La tarjeta entera es el área táctil
+  (54 px o más); un radio-label sin descripción mide lo que su círculo.
 - Más de ~6 opciones: `sui-select`.
 - 2-4 modos de la misma vista que se aplican al instante: `sui-segmented-control`.
 - Varias a la vez: `sui-checkbox`.
@@ -57,10 +57,10 @@ Regla corta: **lista densa de texto → radio-label · con peso o en el teléfon
 **Usos de hoy que rompen la regla:**
 
 - **1 radio nativo → `sui-radio-card type="basic"`:**
-  `pages/driver/driver-order-detail/driver-order-detail.html:812` (motivos de cancelación del
+  `pages/driver/driver-order-detail/driver-order-detail.html:844` (motivos de cancelación del
   repartidor, el mismo caso del ejemplo de la guía). La pantalla hermana del local ya lo resolvió
-  así: `pages/orders/orders.html:566`.
-- **1 suelto que se puede desincronizar:** `pages/super-admin/master-settings/master-settings.html:105`
+  así: `pages/orders/orders.html:567`.
+- **1 suelto que se puede desincronizar:** `pages/super-admin/master-settings/master-settings.html:107`
   (categoría por defecto). Usa `[standaloneChecked]` + `$event && …`: al tocar el que ya está
   elegido, el círculo se apaga por dentro pero el padre sigue diciendo que es el elegido. Va en
   un `sui-radio-group` con `[ngModel]`.
@@ -96,6 +96,7 @@ El más grande mide 28 px: el área táctil de 44 px la tiene que dar la fila.
 | `size` | `'medium' \| 'large' \| 'xlarge'` | `'medium'` |
 | `value` | `SuiRadioValue` | `null` |
 | `disabled` | `boolean` | `false` |
+| `focusable` | `boolean` | `true` |
 | `standaloneChecked` · model, `[(standaloneChecked)]` | `boolean` | `false` |
 
 Outputs: ninguno.
@@ -117,8 +118,14 @@ y proyecta los radios (`sui-radio`, `sui-radio-label`, `sui-radio-card`).
 - **`sui-radio-group` no tiene `value`**: se maneja con `[(ngModel)]` o un form control.
 - **`sui-radio-group` es `inline-flex` en fila con gap 16.** Para lista vertical hay que darle
   `flex-direction: column; align-items: flex-start` desde afuera.
-- **Deshabilitar el control del grupo no deshabilita los radios** (`setDisabledState` no hace
-  nada): pasa `[disabled]` a cada uno.
+- **Teclado en `sui-radio-group`** (revisión 04-10-2026): un solo tab stop —la opción marcada, o la
+  primera habilitada— y las flechas ↑ ↓ ← → mueven el foco y eligen la vecina, saltando las
+  deshabilitadas y dando la vuelta. Vale igual con `sui-radio-label` y `sui-radio-card` adentro.
+  Antes cada radio era una parada de Tab y no había flechas.
+- **Deshabilitar el control del grupo deshabilita todas las opciones** (`setDisabledState`;
+  hasta el 04-10-2026 no hacía nada y había que pasar `[disabled]` a cada una).
+- **`[focusable]="false"`** saca al radio del Tab y del grupo de flechas: es para cuando un padre
+  ya es el radio enfocable (`sui-radio-label`).
 - No hay `small`: el más chico es `medium` (20 px).
 - Sin marcar, en foco, el círculo se pinta del color de marca: viene del Figma, no es un error.
 - No dibuja texto ni `aria-label`: pelado, pon el texto en un `<label>` o usa `sui-radio-label`.

package/docs/sui-radio-card/README.md

@@ -31,10 +31,11 @@ checkbox-card.**
 > adentro: **«para elegir una sola opción de una lista corta»**. El resto es práctica de la app
 > («propuesta») o regla ya aprobada («canon»).
 >
-> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-card`): **31
+> Uso medido el 04-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-card`): **31
 > radio-cards en 14 archivos**. Tipos: 23 `left-icon` (3 de ellos con emoji animado por
-> `iconSrc`), 6 `basic`, 1 `avatar`, 1 `company`. Tamaños: 24 `bp.controlSize()`, 4 `medium`, 1
-> `xlarge` fijo, 1 dinámico, 1 sin `size`. 6 con `sublabel`, 3 con `disabled`, 1 con `badge`.
+> `iconSrc`), 6 `basic`, 1 `avatar`, 1 `company`. Tamaños: 30 `bp.controlSize()` y 1 con el
+> `size()` del padre (`components/address-picker-modal/address-picker-modal.html:41`). 6 con
+> `sublabel`, 6 con `disabled`, 1 con `badge`.
 
 ### `type` (el leading)
 
@@ -68,13 +69,10 @@ checkbox-card.**
 | `large` (24) | Desktop, vía `bp.controlSize()`. | canon (aprobado por el dueño, 28-09-2026) |
 | `medium` (20, default) | No usar en pantallas nuevas. | canon (aprobado por el dueño, 28-09-2026) |
 
-**Usos de hoy que rompen las reglas:**
+**Usos de hoy que rompen las reglas: 0.** Los 5 que iban sin el size del breakpoint y el
+`xlarge` fijo de `pages/customer/mandadito/mandadito.html:30` pasaron a `bp.controlSize()` el
+03-10-2026.
 
-- **5 sin el size del breakpoint**: `components/por-cobrar-card/por-cobrar-card.html:38` y `:48`,
-  `pages/driver/driver-dashboard/driver-dashboard.html:581`,
-  `pages/super-admin/master-orders/master-orders.html:720` (los cuatro en `medium`) y
-  `pages/mi-negocio/mi-negocio.html:22` (sin `size`). Además `pages/customer/mandadito/mandadito.html:30`
-  va en `xlarge` fijo (en web debería ser `large`).
 - **A revisar:** `pages/super-admin/master-orders/master-orders.html:720` lista a los repartidores
   candidatos, una lista que crece con la flota (con muchos, `sui-select` o una lista con búsqueda).
   `pages/role-selector/role-selector.html:24` usa la radio como botón: elegir ya avanza, sin
@@ -82,8 +80,9 @@ checkbox-card.**
 
 ## Tamaño en mobile y en web
 
-La card entera es el área táctil (≥ 72 de alto con descripción, 16 de padding): llega al piso de
-44 sola. El `size` cambia solo el radio.
+La card entera es el área táctil: 74 px con descripción (16 + 40 + 16 de padding y contenido,
+más 2 de borde) y 54 px la más chica (`basic`, sin descripción, `medium`). Llega al piso de 44
+sola. El `size` cambia solo el radio.
 
 | uso | mobile | web |
 |---|---|---|
@@ -141,7 +140,8 @@ Implementa `ControlValueAccessor` (el valor del form es el `value` elegido). Den
   `imageUrl` si la marca no está en el catálogo). No hay slot para proyectar el leading (a
   diferencia de `sui-checkbox-card`).
 - Suelta (sin grupo), elegirla la marca pero **no desmarca a las otras**: el padre tiene que
-  bindear `[checked]` de todas a la misma señal.
+  bindear `[checked]` de todas a la misma señal. Suelta, además, **cada card es una parada de Tab
+  y no hay flechas**; dentro de `sui-radio-group` sí hay un solo tab stop y flechas (revisión 04-10-2026).
 - `badge` con string sale **azul `light` `small`** (en `sui-content-label` sale naranja).
 - `size` cambia solo el radio, no el padding ni el alto de la card.