@ajuarezso/sui-design-system 0.22.0 → 0.23.1

package/docs/sui-stepper/README.md

@@ -26,7 +26,8 @@ Vehículo → Listo»).
 - Secciones que se visitan en cualquier orden: `sui-tab-menu-horizontal`.
 - Un solo paso: no hay nada que indicar.
 
-Regla corta: **pasos con nombre y orden → stepper · porcentaje → progress-bar · secciones sin orden → tab menu.**
+Regla corta (propuesta, falta aprobación): **pasos con nombre y orden → stepper · porcentaje →
+progress-bar · secciones sin orden → tab menu.**
 
 ## Qué variante usar
 
@@ -35,9 +36,11 @@ Regla corta: **pasos con nombre y orden → stepper · porcentaje → progress-b
 > procesos secuenciales». El **vertical**, el mismo indicador «para layouts diversos», con una
 > flecha en el paso activo. Estados de cada paso: `default`, `active`, `completed`. No trae do/don't.
 >
-> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-badge`):
-> **7 usos en 7 archivos**, los 7 en los onboardings: todos `variant="horizontal"`, sin `size`
-> (`small`), sin `interactive`, de 2 o 3 pasos.
+> Uso medido el 04-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-badge`):
+> **8 usos en 8 archivos**. 7 en los onboardings: todos `variant="horizontal"`, sin `size`
+> (`small`), sin `interactive`, de 2 o 3 pasos. 1 en el home del cliente:
+> `pages/customer/store-browser/store-browser.html:214`, `variant="dot"`, `size="medium"`,
+> `[interactive]="true"` (paginador de los rubros, desde el 03-10-2026).
 
 ### `variant`
 
@@ -45,7 +48,7 @@ Regla corta: **pasos con nombre y orden → stepper · porcentaje → progress-b
 |---|---|---|---|
 | `horizontal` (default) | Flujo de **2 a 4 pasos** con nombre, arriba del contenido del paso. Mobile y web. | `pages/driver-onboarding/step-info/step-info.html:3` («Datos → Vehículo → Listo») | según la guía del DS (procesos secuenciales); el límite de pasos es propuesta |
 | `vertical` | Flujo de **5+ pasos** en web, en una columna al costado del formulario. | (sin uso) | según la guía del DS (la pieza existe); el cuándo es propuesta |
-| `dot` | Pantallas que se pasan de a una sin nombre: carrusel de bienvenida, fotos. | (sin uso) | según la guía del DS (puntos de carrusel) |
+| `dot` | Pantallas que se pasan de a una sin nombre: carrusel de bienvenida, fotos. | `pages/customer/store-browser/store-browser.html:214` (páginas de rubros del home) | según la guía del DS (puntos de carrusel) |
 
 ### `size`
 
@@ -53,7 +56,7 @@ Regla corta: **pasos con nombre y orden → stepper · porcentaje → progress-b
 |---|---|---|---|
 | `small` (default) | punto de 8 · indicador de 20 · texto 14 | Web. | según la guía del DS (`small` es su default) |
 | `xsmall` | solo el punto: 4 px. Horizontal y vertical quedan igual que `small`. | Puntos sobre una foto o un banner chico, donde 8 px tapan. | según la guía del DS (el tamaño existe); el cuándo es propuesta |
-| `medium` | punto de 10 · indicador de 24 · texto 16 · card vertical de 44 | Mobile. **Está en el repo del DS (03-10-2026), no en la versión publicada 0.19.0.** | canon (dueño: tamaño por plataforma, 03-10-2026) |
+| `medium` | punto de 10 · indicador de 24 · texto 16 · card vertical de 44 | Mobile. Publicado desde la 0.20.0 (la app usa la 0.22.0). | canon (dueño: tamaño por plataforma, 03-10-2026) |
 
 ### Estado de cada paso (`currentStep`, `errorStep`)
 
@@ -70,7 +73,7 @@ Regla corta: **pasos con nombre y orden → stepper · porcentaje → progress-b
 | valor | cuándo | fuente |
 |---|---|---|
 | `false` (default) | Los onboardings: se avanza con el botón «Continuar», no tocando el paso. | propuesta, falta aprobación |
-| `true` | Solo si los pasos hechos se pueden **volver a editar** y en web (el área tocable es chica, ver Tamaño). | propuesta, falta aprobación |
+| `true` | Los puntos de un carrusel (en el teléfono se tocan en 44 de alto, ver Tamaño), o pasos hechos que se pueden **volver a editar** en web (el horizontal mide 24 de alto). | propuesta, falta aprobación |
 
 ### `steps`, `count`, `ariaLabel`
 
@@ -82,11 +85,14 @@ Regla corta: **pasos con nombre y orden → stepper · porcentaje → progress-b
 
 **Usos de hoy que rompen las reglas:**
 
-- **0 de variante o estado**: los 7 son horizontales de 2 o 3 pasos, y `step-complete` usa
+- **0 de variante o estado** en los onboardings: los 7 son horizontales de 2 o 3 pasos, y `step-complete` usa
   `currentStep = stepLabels.length` para marcar todo hecho (`pages/driver-onboarding/step-complete/step-complete.html:3`).
-- **7 sin tamaño por plataforma** (el `medium` todavía no está publicado): los onboardings se hacen
-  en el teléfono. Cuando se publique, `[size]="bp.isMobile() ? 'medium' : 'small'"`. Ejemplos:
+- **7 sin tamaño por plataforma** (`medium` ya está publicado): los onboardings se hacen en el
+  teléfono y van con `[size]="bp.isMobile() ? 'medium' : 'small'"`. Ejemplos:
   `pages/customer-onboarding/step-phone/step-phone.html:3`, `pages/business-onboarding/step-info/step-info.html:3`.
+- **A discutir, 1 `interactive` en mobile:** `pages/customer/store-browser/store-browser.html:214`
+  usa los puntos `medium` como paginador tocable en el home del cliente. Desde el 04-10-2026 cada
+  punto se toca en 22 × 44 en el teléfono (ver Tamaño); el dibujo sigue de 10 × 10.
 
 ## Tamaño en mobile y en web
 
@@ -94,25 +100,29 @@ Regla corta: **pasos con nombre y orden → stepper · porcentaje → progress-b
 |---|---|---|---|
 | horizontal arriba de un paso | `medium` (indicador 24, texto 16) | `small` (indicador 20, texto 14) | canon (dueño: tamaño por plataforma, 03-10-2026) |
 | vertical al costado | no se usa (no entra al lado del formulario) | `small` | propuesta, falta aprobación |
-| puntos de carrusel | `medium` (10) | `small` (8) | propuesta, falta aprobación |
+| puntos de carrusel | `medium` (10, se toca en 22 × 44) | `small` (8) | tamaño: propuesta, falta aprobación · área de 44: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono |
 
 ```html
 <sui-stepper [steps]="pasos" [currentStep]="paso - 1" [size]="bp.isMobile() ? 'medium' : 'small'" />
 ```
 
-Sin `interactive` el tamaño solo afecta lo que se lee. Con `interactive`, **ningún tamaño llega a
-44 px tocables** en horizontal (24 de alto con `medium`) ni en puntos (10 px): por eso
-`interactive` queda para web. La card vertical `medium` sí llega a 44.
+Sin `interactive` el tamaño solo afecta lo que se lee. Con `interactive`, en el teléfono
+(≤ 767 px) **los puntos se tocan en 44 de alto** (canon (dueño, 04-10-2026): piso táctil 44 en el teléfono): un `::before` invisible
+los estira a 44 de alto y, de ancho, hasta la mitad del espacio con el vecino, para que dos áreas
+nunca se pisen: `medium` 22 × 44, `small` 18 × 44, `xsmall` 10 × 44. El dibujo no cambia. No se
+agregó un size que separe los puntos: cambiaría el paginador, y lo que faltaba era alto. El
+horizontal sigue en 24 de alto con `medium`: con `interactive` queda para web. La card vertical `medium` sí llega a 44 (padding 10 + 24 + padding 10).
+Alto de cada pieza: horizontal `small` 20 y `medium` 24 (el indicador; la línea del texto mide lo
+mismo) · puntos 4 / 8 / 10 · card vertical `small` 36 (8 + 20 + 8) y `medium` 44.
 
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
 |---|---|---|
 | `vertical` | ningún flujo tiene 5+ pasos | un alta de local completa en web (datos, carta, horario, pagos, repartidores) |
-| `dot` | ningún carrusel usa el componente | un carrusel de bienvenida o de fotos del producto |
 | `xsmall` | no hay puntos sobre fotos | puntos sobre el banner del carrusel del home |
 | `errorStep` | ningún flujo muestra dónde se cortó | el estado de una solicitud de repartidor rechazada en el paso «Documentos» |
-| `interactive` | en los onboardings se avanza con el botón | un formulario largo en web donde se vuelve a corregir un paso hecho |
+| `interactive` | en los onboardings se avanza con el botón (el único uso, en el home del cliente, está a discutir arriba) | un formulario largo en web donde se vuelve a corregir un paso hecho |
 
 ## API
 
@@ -140,7 +150,7 @@ interface SuiStepperItem {
   label?: string;   // sin label sale «Paso N»
 }
 type SuiStepperVariant = 'dot' | 'horizontal' | 'vertical';
-type SuiStepperSize = 'small' | 'xsmall' | 'medium';   // medium: repo del DS, no en 0.19.0
+type SuiStepperSize = 'small' | 'xsmall' | 'medium';   // medium: extensión SUI (03-10-2026)
 ```
 
 ## Trampas
@@ -152,6 +162,9 @@ type SuiStepperSize = 'small' | 'xsmall' | 'medium';   // medium: repo del DS, n
 - **El horizontal hace `flex-wrap`**: con muchos pasos o nombres largos baja a otra línea en vez de
   cortarse. Con 4+ pasos en mobile, revisa a 390 px.
 - **`stepClick` solo sale con `interactive`**; sin él los pasos son `div` y no responden.
+- **Rol del host (04-10-2026):** sin `interactive` es `role="list"` con hijos `listitem`; con
+  `interactive` los pasos son `<button>` (no pueden ser `listitem`), así que el host pasa a
+  `role="group"` con su `ariaLabel`. El paso actual lleva `aria-current="step"` en los dos casos.
 - `errorStep` gana sobre `currentStep`: los anteriores quedan hechos y los siguientes por hacer.
 - El activo usa `--sui-primary-base`, que en la app es naranja.
 

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

@@ -68,17 +68,22 @@ El ancho lo da el contenedor. El `size` cambia **el corazón de favorito**, en l
 |---|---|---|---|
 | `small` (default) | 36 × 36 | 18 | lo que había en el DS |
 | `medium` | 40 × 40 | 20 | canon (aprobado por el dueño, 03-10-2026): extensión SUI |
+| `large` | 44 × 44 | 20 | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono. Size nuevo del 04-10-2026; además la nota se toca en 44 de alto |
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
 | tarjeta | ancho completo | celda de una grilla de 2–3 columnas (≥ 300 de ancho) | lo que hay en la app |
-| corazón de favorito | `medium` (40) | `small` (36) | propuesta: el tamaño es extensión SUI aprobada (03-10-2026); el «cuándo» falta aprobarlo |
-| nota (abre las opiniones) | el alto de su columna (~40) | ~40 | lo que hay en el DS |
+| corazón de favorito | `large` (44) | `small` (36) | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono |
+| nota (abre las opiniones) | `large`: se ve igual (≈ 38) y se toca en 44 de alto con un `::before` invisible que no se estira a los lados (no pisa la columna de al lado) | ≈ 38: padding 4 × 2 + etiqueta de 10 px + gap 2 + valor de 13 px, con el `line-height` heredado | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono (área) · medido del `.scss` (alto visible) |
 
 ```html
-<sui-store-card [store]="local" [size]="bp.isMobile() ? 'medium' : 'small'" />
+<sui-store-card [store]="local" [size]="bp.isMobile() ? 'large' : 'small'" />
 ```
 
+`medium` (40) queda para quien ya lo usa: no llega al piso de 44. **Favoritos no pasa `size`**
+(`pages/customer/favorites/favorites.html`): en el teléfono el corazón queda en 36 hasta que la
+app le pase `[size]="bp.isMobile() ? 'large' : 'small'"` (cambio de la app, no del DS).
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -97,7 +102,7 @@ El ancho lo da el contenedor. El `size` cambia **el corazón de favorito**, en l
 | `isFavorite` | `boolean` | `false` |
 | `disableLink` | `boolean` | `false` |
 | `linkBase` | `string` | `'/cliente/restaurante'` |
-| `size` | `'small' \| 'medium'` | `'small'` |
+| `size` | `'small' \| 'medium' \| 'large'` | `'small'` |
 | `deliveryText` | `string \| null` | `undefined` |
 | `distanceText` | `string \| null` | `undefined` |
 

package/docs/sui-switch/README.md

@@ -22,7 +22,7 @@ propio título (día de la semana, tarjeta de la oferta).
   descripción y el toque en toda la fila.
 - Un valor de formulario que se confirma con «Guardar»: `sui-checkbox`. (Excepción aceptada hoy:
   los formularios de producto y de planes usan switch para «disponible»/«activo» aunque se guarden
-  después; es el patrón que la persona reconoce.)
+  después; es el patrón que la persona reconoce. Propuesta, falta aprobación.)
 - Algo destructivo o que no se deshace: el switch promete que se puede volver atrás al toque.
 - Elegir entre dos modos con nombre: `sui-segmented-control` si se aplica al instante (cuadrícula /
   lista); `sui-radio-card` si se guarda después («Por distancia» / «Precio único» en ajustes).
@@ -64,24 +64,24 @@ Regla corta: **se aplica ya → switch · se confirma después → checkbox · d
 **Usos de hoy que rompen las reglas:**
 
 - **19 switches con su texto armado a mano → `sui-switch-label`.** Ejemplos:
-  `pages/discounts/discounts.html:198` («Un uso por cliente», con `sui-form-label` + `<span>`),
+  `pages/discounts/discounts.html:207` («Un uso por cliente», con `sui-form-label` + `<span>`),
   `pages/drivers/drivers.html:58` («Aceptar pedidos automáticamente»),
-  `pages/super-admin/master-plans/master-plans.html:90` («Plan activo», y 8 más en ese archivo).
-  El resto: `discounts.html:302`, `pages/super-admin/master-map-overview/master-map-overview.html:67`,
-  `pages/schedule/schedule.html:46`, `components/add-product-modal/add-product-modal.html:196`, `:255`, `:280`,
-  `components/option-sections-manager/option-sections-manager.html:107`, `:123`.
+  `pages/super-admin/master-plans/master-plans.html:92` («Plan activo», y 8 más en ese archivo).
+  El resto: `discounts.html:319`, `pages/super-admin/master-map-overview/master-map-overview.html:67`,
+  `pages/schedule/schedule.html:46`, `components/add-product-modal/add-product-modal.html:205`, `:264`, `:289`,
+  `components/option-sections-manager/option-sections-manager.html:107`, `:125`.
 - **3 con la etiqueta que repite el estado** («Disponible» / «No disponible», «Activo»):
-  `components/option-sections-manager/option-sections-manager.html:143`,
-  `components/add-product-modal/add-product-modal.html:303`, `pages/employees/employees.html:99`.
+  `components/option-sections-manager/option-sections-manager.html:145`,
+  `components/add-product-modal/add-product-modal.html:312`, `pages/employees/employees.html:99`.
 - **2 en `medium` (sin `size`):** `pages/drivers/drivers.html:58`,
   `pages/super-admin/master-map-overview/master-map-overview.html:67`.
 - **1 nativo dibujado como switch:** `components/settings-panel/settings-panel.html:97`
   («Notificaciones Push») → `sui-switch-label`.
 
-Bien pelados (el texto vive en la fila o la tabla): `pages/discounts/discounts.html:96` (columna
-de la tabla), `pages/super-admin/master-settings/master-settings.html:103`, los días de
+Bien pelados (el texto vive en la fila o la tabla): `pages/discounts/discounts.html:98` (columna
+de la tabla), `pages/super-admin/master-settings/master-settings.html:105`, los días de
 `components/weekly-schedule-editor/weekly-schedule-editor.html:5` y
-`pages/driver/driver-schedule/driver-schedule.html:108`, `pages/central/central-ofertas/central-ofertas.html:19`.
+`pages/driver/driver-schedule/driver-schedule.html:106`, `pages/central/central-ofertas/central-ofertas.html:19`.
 
 ## Tamaño en mobile y en web
 
@@ -114,6 +114,7 @@ va `sui-switch-label`, que hace tocable todo el bloque.
 | `size` | `'medium' \| 'large' \| 'xlarge'` | `'medium'` |
 | `checked` | `boolean` | `false` |
 | `disabled` | `boolean` | `false` |
+| `focusable` | `boolean` | `true` |
 
 | output | payload |
 |---|---|
@@ -131,6 +132,10 @@ Implementa `ControlValueAccessor` (`[(ngModel)]`, `formControlName`).
   mezcles las dos formas.
 - `disabled` no baja la opacidad: cambia el color y achica el círculo. Un `opacity` encima lo duplica.
 - No tiene `aria-label`: pelado, pásalo con `[attr.aria-label]` (como en `central-ofertas`).
+  Dentro de `sui-switch-label`, `sui-switch-card`, `sui-integration-switch` y el toggle de
+  `sui-content-label` ya toma el nombre del texto con `aria-labelledby` (revisión 04-10-2026).
+- **`[focusable]="false"` lo saca del Tab** (tabindex -1), para cuando un padre es el control
+  enfocable. `tabindex="-1"` en el host no sirve: el binding del componente lo pisa.
 - Ya trae el arreglo de iOS para el `:active` pegado.
 
 ## Ejemplo

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

@@ -17,7 +17,8 @@ su propia tarjeta: «Notificaciones», «Ubicación siempre», «Recibir pedidos
 
 **No lo uses** para:
 
-- Algo que se confirma después con «Guardar»: `sui-checkbox-card` (canon del switch-label).
+- Algo que se confirma después con «Guardar»: `sui-checkbox-card` (según la guía del DS: el switch
+  es «para prender o apagar un ajuste de forma inmediata»).
 - Una lista larga de ajustes parecidos: `sui-switch-label` con `flip`, uno por fila.
 - Una integración con otro servicio (logo + «Administrar»): `sui-integration-switch`.
 - Algo destructivo o que no se deshace: un botón con confirmación.
@@ -30,16 +31,16 @@ Regla corta: **ajuste con peso, al toque → switch-card · lista de ajustes →
 > **La guía del DS no tiene página de la switch card.** De la guía sale lo del switch que lleva
 > adentro: **«para prender o apagar un ajuste de forma inmediata»**.
 >
-> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-card`): **26
-> switch-cards en 8 archivos**. Tipos: 19 `left-icon` (los 19 con el ícono proyectado), 7 `basic`
-> (5 de ellos sin `type`). Tamaños: 20 `bp.controlSize()`, 6 sin `size`. 10 viven en formularios
-> que se guardan con un botón.
+> Uso medido el 04-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-card`): **16
+> switch-cards en 8 archivos**. Tipos: 14 `left-icon` (los 14 con el ícono proyectado), 2 `basic`.
+> Tamaños: los 16 con `bp.controlSize()`. Ninguna vive ya en un formulario que se guarda con un
+> botón: las 10 que lo hacían pasaron a `sui-checkbox-card` el 03-10-2026.
 
 ### `type` (el leading)
 
 | type | cuándo | fuente |
 |---|---|---|
-| `left-icon` + ícono proyectado | Lo normal: `<sui-icon sui-switch-card-leading name="…" [size]="20" />`. | propuesta (19 de 26) |
+| `left-icon` + ícono proyectado | Lo normal: `<sui-icon sui-switch-card-leading name="…" [size]="20" />`. | propuesta (14 de 16) |
 | `left-icon` + `emoji` | Ver «No usar». | propuesta |
 | `basic` | El ajuste es EL tema de la pantalla y no necesita ícono («Disponible» en el inicio del repartidor, «Disponibilidad automática»). | propuesta |
 | `avatar` (`imageUrl`) | Ver «No usar». | propuesta |
@@ -64,19 +65,16 @@ Regla corta: **ajuste con peso, al toque → switch-card · lista de ajustes →
 | `large` (40 × 24) | Desktop, vía `bp.controlSize()`. | canon (aprobado por el dueño, 28-09-2026) |
 | `medium` (default) | No usar en pantallas nuevas. | canon (aprobado por el dueño, 28-09-2026) |
 
-**Usos de hoy que rompen las reglas:**
-
-- **10 switch-cards en formularios que se guardan con un botón** (van `sui-checkbox-card`): los 5
-  métodos de pago de `pages/mi-negocio/mi-negocio.html:1181`–`:1217` («Guardar cambios») y 5 de
-  `pages/super-admin/master-settings/master-settings.html` (`:36` «Pausar los pedidos», `:179`,
-  `:336`, `:342`, `:349`, cada uno con su «Guardar…» abajo).
-- **6 sin `size`**: los 5 de `master-settings` de arriba y `pages/notifications/notifications.html:59`
-  («Sonidos de la app»).
+**Usos de hoy que rompen las reglas: 0.** Los 10 que se guardaban con un botón (métodos de pago
+de mi-negocio y 5 ajustes de master-settings) pasaron a `sui-checkbox-card`, y el de
+`pages/notifications/notifications.html:59` («Sonidos de la app») ya lleva `bp.controlSize()`,
+los dos el 03-10-2026.
 
 ## Tamaño en mobile y en web
 
-La card entera se toca (≥ 72 con descripción): llega al piso de 44 sola. El `size` cambia solo el
-interruptor.
+La card entera se toca: 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 interruptor.
 
 | uso | mobile | web |
 |---|---|---|
@@ -130,6 +128,10 @@ Slot: `[sui-switch-card-leading]` (el ícono o el logo). Implementa `ControlValu
 - `avatar` siempre dibuja un `sui-avatar` con `imageUrl` (si falla, las iniciales del `label`): no usa lo
   proyectado. `card-provider`, `brand` y `company` leen `imageUrl` y, sin ella, usan lo proyectado.
 - Toda la card togglea; el toque sobre el propio switch no cuenta doble.
+- **Teclado**: el único tab stop es el switch de la derecha, con nombre = `label` y descripción =
+  `description` (`aria-labelledby` / `aria-describedby`). Espacio y Enter emiten
+  `checkedChange` **una vez** (revisión 04-10-2026); antes emitían dos (el switch y, por burbujeo, la card),
+  y en formulario el valor se revertía.
 - El interruptor siempre va a la derecha (no hay `flip`).
 - `badge` con string sale **azul `light` `small`** (en `sui-switch-label` sale naranja).
 

package/docs/sui-switch-label/README.md

@@ -47,7 +47,7 @@ Regla corta: **ajuste con texto → este · ajuste con peso → switch-card · s
 | `sublabel` | Precisión corta entre paréntesis: «(beta)». | según la guía del DS |
 | `badge` | Solo novedad. Con string sale naranja `light`: pasa el objeto. | según la guía del DS (pieza «NEW»); el color es propuesta |
 | `link` | «Saber más» que no toca el interruptor. Solo se ve con `description`. | según la guía del DS |
-| `flip` | Interruptor a la **derecha** en listas de ajustes: el texto se lee primero y el control queda bajo el pulgar, como en iOS y Android (es lo que hacen a mano `drivers.html:58`, `discounts.html:198`, `schedule.html:46`). Sin `flip` (izquierda) dentro de un formulario, alineado con las casillas o los switches del resto del form. | canon (aprobado por el dueño, 03-10-2026) |
+| `flip` | Interruptor a la **derecha** en listas de ajustes: el texto se lee primero y el control queda bajo el pulgar, como en iOS y Android (es lo que hacen a mano `drivers.html:58`, `discounts.html:207`, `schedule.html:46`). Sin `flip` (izquierda) dentro de un formulario, alineado con las casillas o los switches del resto del form. | canon (aprobado por el dueño, 03-10-2026) |
 | `disabled` | Mientras se guarda el cambio o cuando no aplica. | según la guía del DS |
 
 ### `size`
@@ -60,25 +60,34 @@ Regla corta: **ajuste con texto → este · ajuste con peso → switch-card · s
 
 **Usos de hoy que rompen las reglas:**
 
-- **2 en `medium`:** `pages/products/products.html:300` («Horario propio
+- **2 en `medium`:** `pages/products/products.html:301` («Horario propio
   para esta categoría») y `pages/public/privacidad/privacidad.html:132` («Permitir analítica de uso»).
 - **19 `sui-switch` con texto a mano + 1 nativo** que deberían ser este componente: el detalle
-  está en el README de `sui-switch`. Ejemplos: `pages/discounts/discounts.html:198`,
+  está en el README de `sui-switch`. Ejemplos: `pages/discounts/discounts.html:207`,
   `pages/drivers/drivers.html:58`, `components/settings-panel/settings-panel.html:97`.
 
 ## Tamaño en mobile y en web
 
-| uso | mobile | web |
-|---|---|---|
-| fila de ajustes | `xlarge` (48 × 28) | `large` (40 × 24) |
-| ajuste que es la acción principal de la pantalla («Cerrar por hoy») | `xlarge` | `xlarge` |
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| fila de ajustes | `2xlarge` (fila de 44 como mínimo, switch 48 × 28) | `large` (40 × 24) | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono |
+| ajuste que es la acción principal de la pantalla («Cerrar por hoy») | `2xlarge` | `xlarge` | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono |
 
 ```html
-<sui-switch-label [size]="bp.controlSize()" … />   <!-- isMobile() ? 'xlarge' : 'large' -->
+<sui-switch-label [size]="bp.isMobile() ? '2xlarge' : 'large'" … />
 ```
 
-El bloque entero se toca, así que con descripción la fila pasa los 44 px sola. Sin descripción,
-dale a la fila un alto mínimo de 44 px.
+| size | switch | label | descripción | alto de la fila sin descripción |
+|---|---|---|---|---|
+| `medium` (default, Figma) | 32 × 20 | 14/20 | 12/16 | 20 |
+| `large` | 40 × 24 | 16/24 | 12/16 | 24 |
+| `xlarge` | 48 × 28 | 16/24 | 12/16 | 28 |
+| `2xlarge` | 48 × 28 | 16/24 | 12/16 | **44** (`min-height`) |
+
+El bloque entero se toca, así que con descripción la fila pasa los 44 px sola. Sin descripción
+`xlarge` mide 28: en el teléfono va `2xlarge` (canon (dueño, 04-10-2026): piso táctil 44 en el teléfono), que es la misma fila con
+`min-height: 44px` y todo centrado en vertical. `2xlarge` no es un size del switch: el switch
+interno se queda en `xlarge`.
 
 En large y xlarge el texto sube a 16 px (regla del 03-10-2026): el label va en 16/24; sublabel y
 descripción se quedan en 12.
@@ -101,7 +110,7 @@ descripción se quedan en 12.
 | `label` | `string` | `''` |
 | `sublabel` | `string \| null` | `null` |
 | `description` | `string \| null` | `null` |
-| `size` | `'medium' \| 'large' \| 'xlarge'` | `'medium'` |
+| `size` | `'medium' \| 'large' \| 'xlarge' \| '2xlarge'` | `'medium'` |
 | `badge` | `SuiBadgeConfig \| string \| null` | `null` |
 | `link` | `SuiLinkConfig \| string \| null` | `null` |
 | `flip` | `boolean` | `false` |
@@ -127,6 +136,8 @@ Implementa `ControlValueAccessor` (`[(ngModel)]`, `formControlName`).
 - Deshabilitado baja todo el bloque a 0.5 de opacidad **además** del gris propio del switch.
 - El badge con string sale naranja; en `sui-switch-card` el default es azul.
 - `flip` usa CSS `order`: el orden de lectura no cambia.
+- El switch de adentro es el tab stop y toma su nombre del `label` y su descripción de la
+  `description` (`aria-labelledby` / `aria-describedby`) (revisión 04-10-2026).
 
 ## Ejemplo
 

package/docs/sui-tab-chips/README.md

@@ -13,8 +13,9 @@ Story: [Molecules/Tabs/Tab Chips](https://sui-design-system.web.app/?path=/docs/
 
 **Úsalo** para:
 
-- **Filtrar una lista** por estado, período, rol o zona: «Todos · Activos · Entregados · Cancelados»,
-  «Hoy · 7 días · 30 días», los meses de la central.
+- **Filtrar una lista** por estado, período, rol o zona con **5 o más opciones**, o con opciones que
+  no caben y se deslizan: «Todos · Pendientes · En camino · Entregados · Cancelados», los meses de la
+  central.
 - **Saltar entre categorías** de un catálogo que viene de la base («Hamburguesas · Pizzas ·
   Bebidas»), con `sticky` en la carta del local.
 
@@ -22,35 +23,38 @@ Sirve cuando las opciones son muchas, cambian según los datos o no caben y tien
 
 **No lo uses** para:
 
-- **2 a 4 modos de la misma vista** (por semana / día vs día): `sui-segmented-control`.
+- **2 a 4 opciones excluyentes**, sean modos de la vista (por semana / día vs día) o un período o
+  filtro fijo («Hoy · 7 días · 30 días»): `sui-segmented-control`. **Período o filtro con 2 a 4 opciones excluyentes → `sui-segmented-control`; con 5 o más, o si no caben y tienen que deslizarse → `sui-tab-chips`** (canon, dueño 04-10-2026).
 - **Secciones de contenido distinto** (Ventas · Productos · Repartidores): `sui-tab-menu-horizontal`.
 - **Elegir un valor que se guarda** con un botón (radio de visibilidad, motivo de rechazo,
-  sumar o descontar): `sui-radio-card` o `sui-segmented-control`. El tab-chips **siempre tiene uno
-  elegido** y no puede quedar vacío (ver Trampas).
+  sumar o descontar): `sui-radio-card`. (`sui-segmented-control` no sirve para esto: su README lo
+  deja para opciones que se aplican en el momento.) El tab-chips **siempre tiene uno elegido** y no
+  puede quedar vacío (ver Trampas).
 - Un chip que la persona quita: `sui-tag`.
 
-Regla corta (la misma del README de `sui-segmented-control`, 03-10-2026): **2-4 modos de la misma
-vista → segmented · secciones → tab menu · filtros o categorías → tab-chips.**
+Regla corta (canon, dueño 04-10-2026; la misma del README de `sui-segmented-control`): **2-4
+opciones excluyentes (modo, período o filtro) → segmented · 5+ o que deslizan → tab-chips ·
+secciones → tab menu.**
 
 ## Qué variante usar
 
 > **La guía del DS no tiene este componente**: es una extensión de SUI (la «cat nav» de las apps de
 > delivery). Todo lo que sigue es propuesta salvo lo marcado como canon.
 >
-> Uso medido el 03-10-2026 en `master-pedidos/src/app` (sin `master-preview`, `master-prototipos`,
-> `mockup-*`, `dx/*`, `_guia-*`, `master-rutina`, `master-medico`, `master-ejercicios`):
-> **41 usos en 28 archivos `.html`**. `[sticky]="true"`: 1 (carta del local). `count`: 5 listas.
-> `[(value)]`: 2; el resto `[value]` + `(valueChange)`. `autoScroll`: 0. `size`: 0 (no existe en
-> la versión publicada).
+> Uso medido el 04-10-2026 en `master-pedidos/src/app` (sin `master-preview`, `master-prototipos`,
+> `mockup-sheets-*`, `dx/*`, `master-rutina`, `master-medico`, `dev-index`):
+> **42 usos en 29 archivos `.html`** (incluye `master-ejercicios`). `[sticky]="true"`: 2 (la carta
+> del local y `master-ejercicios`). `count`: 5 listas (cifra del 03-10). `[(value)]`: 2; el resto
+> `[value]` + `(valueChange)`. `autoScroll`: 0. `size`: 20, todos `bp.isMobile() ? 'large' : 'medium'`.
 
 ### Para qué se usa (el contenido de los chips)
 
 | caso | cuándo | ejemplo real de la app | fuente |
 |---|---|---|---|
 | filtro de estado | La lista es la misma; los chips la recortan. «Todos» va primero y es el elegido por defecto. | `pages/envios/envios.html:98` («Todos · Activos · Entregados · Cancelados») · `pages/orders/orders.html:64` | propuesta, falta aprobación |
-| filtro de período | Rango de fechas de un reporte o gráfico. | `pages/super-admin/master-earnings/master-earnings.html:11` · `pages/central/central-gastos/central-gastos.html:10` (meses) | propuesta, falta aprobación |
+| filtro de período | Rango de fechas de un reporte o gráfico **con 5 o más opciones** (los meses). Con 2 a 4 («Hoy · 7 días · 30 días») va `sui-segmented-control`. | `pages/central/central-gastos/central-gastos.html:10` (meses) | canon (dueño, 04-10-2026) |
 | categorías del catálogo | Saltar a una categoría de la carta; con `sticky` y `autoScroll`. | `pages/customer/restaurant-menu/restaurant-menu.html:226` | propuesta, falta aprobación |
-| sugerencias rápidas | **No.** Un motivo frecuente que completa un texto no es una selección: el chip elige el primero solo. Si se usa, el primer chip es el neutro («Otro motivo») y el texto lleva su propio signal. | `pages/super-admin/master-orders/master-orders.html:898` (bien resuelto) | propuesta, falta aprobación |
+| sugerencias rápidas | **No.** Un motivo frecuente que completa un texto no es una selección: el chip elige el primero solo. Si se usa, el primer chip es el neutro («Otro motivo») y el texto lleva su propio signal. | `pages/super-admin/master-orders/master-orders.html:900` (bien resuelto) | propuesta, falta aprobación |
 
 ### `sticky`
 
@@ -77,50 +81,54 @@ vista → segmented · secciones → tab menu · filtros o categorías → tab-c
 
 **Usos de hoy que rompen las reglas:**
 
-- **3 con un bug real: el motivo escrito a mano rebota al primer chip.** En los modales de rechazo
-  del super admin, los chips y el textarea comparten el mismo signal. Cada tecla deja un texto que
-  no es ningún chip; el componente vuelve al primero y lo emite, así que el textarea se reescribe con
-  «El comprobante no se lee». No se puede escribir un motivo propio, y al abrir el modal ya hay un
-  motivo elegido sin que nadie lo toque. `pages/super-admin/master-drivers/master-drivers.html:652`,
-  `:924` y `:1002`. Es el mismo bug que se arregló en `master-orders` el 01-09-2026 (signal propio
-  para los chips y «Otro motivo» primero).
+- **Resuelto el 03-10-2026: el motivo escrito a mano rebotaba al primer chip.** En los modales de
+  rechazo del super admin (`pages/super-admin/master-drivers/master-drivers.html:657`, `:933` y
+  `:1012`) los chips y el textarea compartían el signal. Ahora los chips llevan el suyo
+  (`master-drivers/motivo-con-chips.ts`, «Otro motivo» primero), igual que `master-orders` desde el
+  01-09-2026.
 - **4 son secciones de contenido distinto** (→ `sui-tab-menu-horizontal` en web; en mobile, a
   discutir porque el tab menu no se desliza, ver su README): `pages/products/products.html:6`
   («Categorías · Productos · Secciones reutilizables»), `pages/promociones/promociones.html:7`
   («Carrusel pagado · Push notifications»), `pages/super-admin/master-drivers/master-drivers.html:16`,
-  `pages/reports/reports.html:98` («Ventas · Productos · Repartidores · Clientes»).
+  `pages/reports/reports.html:99` («Ventas · Productos · Repartidores · Clientes»).
 - **2 son modos de la misma vista** (→ `sui-segmented-control`):
-  `pages/super-admin/master-semanas/master-semanas.html:67` (3 métricas del mismo gráfico) y `:72`
+  `pages/super-admin/master-semanas/master-semanas.html:75` (3 métricas del mismo gráfico) y `:80`
   («Por semana · Día vs día»).
-- **4 eligen un valor de un formulario** (→ `sui-radio-card` o `sui-segmented-control`):
-  `components/option-sections-manager/option-sections-manager.html:175` (a qué se aplica),
-  `pages/super-admin/master-drivers/master-drivers.html:98` («Sumar · Descontar»),
-  `pages/mi-negocio/mi-negocio.html:938` (radio de visibilidad) y `:973` (tiempo para confirmar).
-  A discutir: `pages/customer/checkout/checkout.html:468` (día del pedido programado), que filtra
+- **4 eligen un valor de un formulario** (→ `sui-radio-card`; `sui-segmented-control` solo si se
+  aplica en el momento, sin botón «Guardar»):
+  `components/option-sections-manager/option-sections-manager.html:177` (a qué se aplica),
+  `pages/super-admin/master-drivers/master-drivers.html:99` («Sumar · Descontar»),
+  `pages/mi-negocio/mi-negocio.html:952` (radio de visibilidad) y `:988` (tiempo para confirmar).
+  A discutir: `pages/customer/checkout/checkout.html:460` (día del pedido programado), que filtra
   las franjas de abajo y se parece más a un filtro.
-- **1 con el número dentro del texto:** `pages/notifications/notifications.ts:191`
+- **1 con el número dentro del texto:** `pages/notifications/notifications.ts:194`
   (`No leídas (3)` → `count: 3`).
-- **41 sin tamaño por plataforma** (el input todavía no está publicado): cuando se publique, los de
-  pantallas del cliente y del repartidor pasan a `large`.
+- **22 sin tamaño por plataforma.** Los 20 que ya lo tienen (`bp.isMobile() ? 'large' : 'medium'`)
+  entraron el 03-10-2026; los 22 que faltan son casi todos del super admin y de la central.
 
 ## Tamaño en mobile y en web
 
-> `size` está **en el repo del DS (03-10-2026) y no en la versión publicada 0.19.0**. Hasta que se
-> publique, todos miden lo de `medium`.
+`size` está publicado desde la 0.20.0; la app usa la 0.22.0.
 
-Alto del chip: `small` 32 px · `medium` 36 px (el de siempre, default) · `large` 40 px. `small` y
-`medium` con texto de 14 px; cambia el alto y el aire lateral. El scroller suma 12 px arriba y abajo.
+Alto del chip: `small` 32 px (`height: 32px`) · `medium` 36 px (el de siempre, default; sin alto
+fijo: 8 + 8 de padding + `line-height: normal` + 2 de borde, 36 medido en Storybook con Satoshi) ·
+`large` 40 px (`height: 40px`, con `border-box`) · `xlarge` 44 px (`height: 44px`, padding lateral 18).
+`small` y `medium` con texto de 14 px; cambia el alto y el aire lateral. El scroller suma 12 px arriba
+y abajo, pero ese aire es del `<nav>`, no del botón: tocar ahí no elige el chip.
 
-En large y xlarge el texto sube a 16 px (regla del 03-10-2026): el chip `large` va en 16/24 y sigue
-midiendo 40. El número del contador se queda en 12.
+En large y xlarge el texto sube a 16 px (regla del 03-10-2026): el chip va en 16/24. El número del
+contador mide 11 px en `small` y `medium`, y 12 px (pastilla de 20) en `large` y `xlarge`.
+
+**Área táctil: 44 px en `xlarge`**, el piso del teléfono (canon del dueño, 04-10-2026: piso táctil
+44 en el teléfono). `large` (40) queda para pantallas que ya lo usan y para tablet.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| filtros y categorías | `large` (40; con el aire del scroller llega a 44+ de área táctil) | `medium` | canon (dueño: tamaño por plataforma, 03-10-2026) |
+| filtros y categorías | `xlarge` (44) | `medium` | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono; tamaño por plataforma, 03-10-2026 |
 | filtros densos en la cabecera de una tabla | — | `small` | propuesta, falta aprobación |
 
 ```html
-<sui-tab-chips [chips]="filtros" [(value)]="filtro" [size]="bp.isMobile() ? 'large' : 'medium'" />
+<sui-tab-chips [chips]="filtros" [(value)]="filtro" [size]="bp.isMobile() ? 'xlarge' : 'medium'" />
 ```
 
 ## «No usar»: por qué no hoy y cuándo sí
@@ -141,7 +149,7 @@ midiendo 40. El número del contador se queda en 12.
 | `chips` | `readonly (string \| SuiTabChipItem)[]` | — (requerido) |
 | `value` · model, `[(value)]` | `string` | `''` |
 | `sticky` | `boolean` | `false` |
-| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` |
+| `size` | `'small' \| 'medium' \| 'large' \| 'xlarge'` | `'medium'` |
 | `autoScroll` | `boolean` | `true` |
 
 Outputs: ninguno.
@@ -153,7 +161,7 @@ interface SuiTabChipItem {
   label: string;
   count?: number;   // 0 o undefined no se dibuja
 }
-type SuiTabChipsSize = 'small' | 'medium' | 'large';   // repo del DS, no en 0.19.0
+type SuiTabChipsSize = 'small' | 'medium' | 'large';
 ```
 
 ## Trampas
@@ -165,6 +173,12 @@ type SuiTabChipsSize = 'small' | 'medium' | 'large';   // repo del DS, no en 0.1
 - **`value` es `string`.** Para números (km, minutos) hay que convertir en los dos sentidos
   (`radioEfectivo() + ''` y `+$event`).
 - **Lleva `role="tablist"`** aunque se use como filtro: el lector de pantalla lo anuncia como pestañas.
+- **Teclado (04-10-2026):** un solo tab stop (el chip activo). ← → mueven el foco entre chips con
+  vuelta al inicio, Home/End van al primero/último, y Enter/Espacio elige. Las flechas **no**
+  seleccionan (activación manual): cada filtro recarga datos y no se dispara una carga por chip
+  recorrido. Al salir del grupo, el tab stop vuelve al chip activo.
+- **La cuenta va en el nombre accesible** («Pendientes, 3»): el número visible sigue
+  `aria-hidden` para que no se lea dos veces.
 - **No tiene padding lateral propio**: lo pone la pantalla. Sí trae 12 px arriba y abajo.
 - **`sticky` cambia el host a `display: contents`**: las clases que le pongas al host dejan de
   pintar caja (márgenes, anchos). Pon el estilo en un contenedor.

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

@@ -49,18 +49,19 @@ segmented · secciones → tab menu · filtros → tab-chips.**
 
 ### `size`
 
-| size | cuándo | fuente |
-|---|---|---|
-| `medium` (default) | El único que cambia algo: **ninguno**. El input existe pero no tiene estilos; los cuatro valores se ven igual. No lo pases. | según el código (`sui-tab-menu-horizontal.scss`: no hay reglas por tamaño) |
-| `small` · `large` · `xlarge` | No usar: no hacen nada. | según el código |
+Los cuatro valores (`small`, `medium`, `large`, `xlarge`) cambian el alto de la franja y el texto
+desde el 03-10-2026 (`sui-tab-menu-horizontal.scss`, bloque «Tamaños»). Cuándo usar cada uno: ver
+«Tamaño en mobile y en web».
 
 **Usos de hoy que rompen las reglas:**
 
 - **0** en este componente. Los casos que deberían ser tab menu y hoy son `sui-tab-chips` están en el
   README de `sui-tab-chips` (4: `pages/products/products.html:6`, `pages/promociones/promociones.html:7`,
-  `pages/super-admin/master-drivers/master-drivers.html:16`, `pages/reports/reports.html:98`).
-- **A verificar en mobile:** el uso actual es del modal del local, que el cliente abre en el
-  teléfono. La pestaña mide 20 px de alto tocable (ver Tamaño).
+  `pages/super-admin/master-drivers/master-drivers.html:16`, `pages/reports/reports.html:99`).
+- **A discutir, 1 sin tamaño por plataforma:** el único uso
+  (`components/store-ratings-modal/store-ratings-modal.html:43`) es del modal del local, que el
+  cliente abre en el teléfono, y no pasa `size`: mide 48 px tocables (`medium`). Llega a 44, pero la
+  propuesta de abajo pide `large` en mobile.
 
 ## Tamaño en mobile y en web
 
@@ -69,10 +70,13 @@ Cada pestaña ocupa **todo el alto de la franja**, así que lo tocable es la fra
 
 | size | franja tocable (+ 2 de bordes) | texto | ícono | gap | fuente |
 |---|---|---|---|---|---|
-| `small` | 40 | `label-sm` 14/20 | 20 | 20 | canon (aprobado por el dueño, 03-10-2026): extensión SUI |
-| `medium` (default) | 48 | `label-sm` 14/20 | 20 | 24 | Figma |
-| `large` | 52 | `label-md` 16/24 | 20 | 24 | canon (aprobado por el dueño, 03-10-2026): extensión SUI |
-| `xlarge` | 56 | `label-md` 16/24 | 24 | 28 | canon (aprobado por el dueño, 03-10-2026): extensión SUI |
+| `small` | 40 (10 + 20 + 10) | `label-sm` 14/20 | 20 | 20 | canon (aprobado por el dueño, 03-10-2026): extensión SUI |
+| `medium` (default) | 48 (14 + 20 + 14) | `label-sm` 14/20 | 20 | 24 | Figma |
+| `large` | 52 (14 + 24 + 14) | `label-md` 16/24 | 20 | 24 | canon (aprobado por el dueño, 03-10-2026): extensión SUI |
+| `xlarge` | 56 (16 + 24 + 16) | `label-md` 16/24 | 24 | 28 | canon (aprobado por el dueño, 03-10-2026): extensión SUI |
+
+El alto sale del `padding` vertical del botón más el `line-height` del texto. A lo ancho, lo tocable
+es solo el texto: el `gap` entre pestañas no responde.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
@@ -128,6 +132,10 @@ interface SuiTabMenuHorizontalItem<T = string> {
   que Figma pone en el contenedor ahora va dentro de cada pestaña. Si algo de afuera le pone
   padding al `.sui-tab-menu-horizontal__track`, la franja crece al doble.
 - **Emite dos veces**: `tabChange` y `activeChange`. Con `[(active)]` no hace falta `(tabChange)`.
+- **Teclado (04-10-2026):** un solo tab stop (la pestaña activa). ← → mueven el foco **y activan**
+  (patrón de tablist con activación automática), con vuelta al inicio y saltando las deshabilitadas;
+  Home/End a los extremos. Cada flecha emite `tabChange`. No hay `aria-controls`: el `tabpanel` lo
+  arma quien lo usa.
 - **Trae bordes arriba y abajo** (`stroke-soft-200`) y fondo blanco: no lo metas en una card que ya
   tiene borde, o quedan dos líneas.
 - El ícono de la pestaña activa es `strong-950`, no naranja; en el tab menu vertical es naranja.