@ajuarezso/sui-design-system 0.21.0 → 0.23.0

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,37 @@ 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.
 
 ## «No usar»: por qué no hoy y cuándo sí
 
@@ -98,7 +110,7 @@ dale a la fila un alto mínimo de 44 px.
 | `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` |
@@ -124,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,47 +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. Los tres
-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 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í
@@ -138,7 +149,7 @@ con texto de 14 px; cambia el alto y el aire lateral. El scroller suma 12 px arr
 | `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.
@@ -150,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
@@ -162,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.

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

@@ -23,8 +23,8 @@ de pago · Repartidores»), el perfil del super admin.
 - 2 a 4 secciones arriba del contenido: `sui-tab-menu-horizontal`.
 - Filtros de una lista: `sui-tab-chips`.
 
-Regla corta: **secciones de una página de ajustes en web → tab menu vertical · en mobile → lista de
-filas que abren pantalla.**
+Regla corta (propuesta, falta aprobación): **secciones de una página de ajustes en web → tab menu
+vertical · en mobile → lista de filas que abren pantalla.**
 
 ## Qué variante usar
 
@@ -63,7 +63,8 @@ Usos de hoy que rompen las reglas: **0** (no se usa).
 
 ## Tamaño en mobile y en web
 
-Ítem de **36 px** (8 + 20 + 8), ícono de 20. **No tiene `size`** y no tiene tamaño para mobile.
+Ítem de **36 px** (padding 8 + `line-height` 20 + padding 8; el ícono de 20 entra en la línea).
+**No tiene `size`** y no tiene tamaño para mobile: no llega a los 44 px del dedo.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
@@ -114,12 +115,16 @@ type SuiTabMenuVerticalStyle = 'card' | 'list';
 
 ## Trampas
 
-- **El estilo se llama `menuStyle`**, no `style` ni `variant` (ni `verticalStyle`, que era el nombre
-  viejo de `sui-tabs`).
+- **El estilo se llama `menuStyle`**, no `style` ni `variant` (ni `verticalStyle`, el input de
+  `sui-tabs variant="vertical"`, el componente que existió hasta la v0.2.x y ya no está en el DS).
 - **Sin `active` no se marca ningún ítem.** Pásale un valor inicial.
 - **Ocupa el ancho del padre**: dale un ancho fijo a la columna (240-280 px).
 - **El ícono activo es naranja** (`primary-base`); en el tab menu horizontal es negro. Es a propósito.
 - **Emite dos veces**: `tabChange` y `activeChange`.
+- **Teclado (04-10-2026):** `role="tablist"` con `aria-orientation="vertical"` y un solo tab
+  stop. ↑ ↓ mueven el foco **y activan**, con vuelta al inicio y saltando los deshabilitados;
+  Home/End a los extremos. Con `dividerLabel`, ese texto es el nombre del grupo
+  (`aria-labelledby`).
 - `role="tablist"`: si cada ítem navega a una ruta, el lector de pantalla lo anuncia mal; para
   navegación entre rutas, `sui-sidebar`.
 

package/docs/sui-table/README.md

@@ -0,0 +1,264 @@
+---
+name: sui-table
+selector: sui-table
+resumen: Tabla de datos — una fila por registro, una columna por dato — para comparar y recorrer listas en web
+alternativas: [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-table
+
+Story: [Organisms/Table](https://sui-design-system.web.app/?path=/docs/organisms-table--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** cuando la persona tiene que **comparar varios registros por las mismas columnas**:
+pedidos, repartidores, gastos, recargas. La tabla sirve si leer en vertical una columna
+(«¿cuál es el monto más alto?», «¿quién no tiene repartidor?») es parte de la decisión.
+
+**No lo uses** para:
+
+- Una lista donde cada registro se lee solo (sin comparar con el de al lado): tarjetas.
+- Pantallas del cliente o del repartidor en el teléfono: ahí la lista va en tarjetas o
+  filas de una columna. La tabla es de las pantallas de gestión (empresa, super admin, central).
+- Un historial de acciones con autor y hora: `sui-activity-feed`.
+- «Todavía no hay nada» a página completa: `sui-empty-state`. La tabla tiene su propio
+  vacío (`emptyMessage`), que es otro registro (ver abajo).
+
+Regla corta: **comparar por columnas → tabla · leer de a uno → tarjetas · historial → activity feed.**
+
+## Qué variante usar
+
+> **La guía del DS casi no dice cuándo ni cómo usar la tabla.** Su página la define como «una
+> estructura de dos dimensiones donde cada fila es un ítem y cada columna un dato del ítem»,
+> muestra un solo ejemplo (un directorio de personas **con selección por checkbox**), le pone
+> `overflow-x-auto` al contenedor y deriva el orden, la selección y la paginación a una
+> librería externa. No trae do/don't, tamaños ni comportamiento en mobile. Casi todo lo de
+> abajo es **práctica de la app** o **propuesta, falta aprobación**; lo marcado «canon» sale de
+> `master-pedidos/CLAUDE.md` o de `docs/CANON-SUI.md`.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app`: **9 tablas** en 7 pantallas, sin contar
+> prototipos ni vitrinas (`master-preview`, `master-prototipos`, `mockup-sheets-*`, `dx/*`,
+> `master-rutina`, `master-medico`, `dev-index`). `sortable`, `selectable` y `striped`: 0 usos.
+> `sticky`: 1, en una vitrina.
+
+### Lo que sí dice la guía del DS
+
+- **Qué es**: filas = ítems, columnas = datos del ítem.
+- **Partes**: cabecera, filas con hover, celdas con esquinas redondeadas y un **divisor entre
+  filas**. SUI lo replica (header gris `bg-weak-50`, filas con radio 12 y divisor de 1 px).
+- **Ancho**: el contenedor scrollea en horizontal (`overflow-x-auto`). En SUI eso pasa solo
+  **hasta 767 px** o con una columna `sticky` (ver Trampas).
+- **Selección**: su único ejemplo trae checkbox por fila. En SUI es `selectable`.
+
+### Las columnas (`SuiTableColumn`)
+
+| prop de columna | cuándo | ejemplo real de la app | fuente |
+|---|---|---|---|
+| `priority: 'leading'` + `descriptionKey` | La **primera** columna: el dato que identifica la fila arriba (14/500) y un dato de apoyo debajo (12/400). Se usa en vez de una plantilla propia para la columna principal. | `pages/orders/orders.ts:278` (pedido + «hace 12 min») · `pages/super-admin/master-orders/master-orders.ts:390` | práctica de la app (7 de 9 tablas) |
+| `priority: 'passive'` | Datos de contexto que no deciden nada: fecha, número de comprobante. Se leen en gris (`text-sub-600`). | `pages/super-admin/master-overview/master-overview.ts:192` | propuesta, falta aprobación |
+| `priority: 'none'` | Columna de acciones (íconos) sin texto propio. Con `label: ''` y `width` fijo. | `pages/super-admin/master-gastos/master-gastos.ts:143` | práctica de la app |
+| `align: 'right'` | Montos. Así se comparan en vertical. | `pages/central/central-gastos/central-gastos.ts:82` | propuesta, falta aprobación |
+| `width` | Columnas de largo fijo: monto, estado, fecha, acciones. | `central-gastos.ts:82-83` | práctica de la app |
+| `minWidth` | Columnas de texto que crecen (nombre, concepto): el piso para que no se aplasten. | `master-orders.ts:392` | práctica de la app |
+| `maxWidth` + `truncate` | Nombres que pueden ser muy largos: corta con «…» y el valor completo sale en tooltip. | `master-overview.ts:193` | práctica de la app |
+
+**Una ID nunca es el título de la fila** (`CLAUDE.md`, «Pasada de UX/UI»): la columna `leading`
+lleva el nombre o el número legible del pedido, no el uid.
+
+### Plantillas por columna (`suiTableCell`)
+
+Si una celda necesita algo más que texto, se proyecta un `<ng-template suiTableCell="<key>" let-row>`.
+Dentro va un componente SUI, no HTML a mano:
+
+| contenido | componente | fuente |
+|---|---|---|
+| estado o categoría | `<sui-badge variant="lighter" size="small">` | canon (CANON-SUI §0: «Chip de estado») |
+| acciones de la fila | `<sui-button variant="ghost" color="neutral" size="2xsmall" [onlyIcon]="true">` | canon (README de `sui-button`: tabla densa = `2xsmall`) |
+| prender/apagar | `<sui-switch>` | propuesta, falta aprobación |
+| calificación | `<sui-rating>` de solo lectura | propuesta, falta aprobación |
+
+Si la columna tiene plantilla, `descriptionKey` y `truncate` **no se aplican**: solo funcionan en
+el render de texto plano. Por eso `orders.html:94` deja la columna del pedido sin plantilla.
+
+### Cargar las filas: cuenta + página por cursor
+
+**Canon** (`master-pedidos/CLAUDE.md`, «Performance — Firestore reads»): una pantalla con tabla
+**no baja la colección entera** para mostrar 30 filas. Los totales salen de `getCount`, las filas
+de `getCollectionPage` con cursor, y debajo de la tabla va un «Cargar más»
+(`sui-button variant="stroke" color="neutral"`). Referencia: `pages/orders/orders.ts:716`
+(`loadMore`) y `orders.html:132`.
+
+- El orden de la tabla lo fija la consulta (`orderBy`). **No uses `sortable`** sobre una lista
+  paginada: ordenaría solo lo cargado y mentiría sobre el resto.
+- `sui-pagination` (números de página) no calza con cursor: Firestore no salta a «la página 7».
+
+### Vacío y carga
+
+- `loading` pinta 5 filas esqueleto con las columnas reales. Úsalo mientras llega la primera
+  página. Canon (memoria del proyecto: skeleton obligatorio en pantalla nueva).
+- `emptyMessage` es una línea con un ícono de bandeja, sin ilustración ni botón. **Canon**
+  (CANON-SUI §5.6): no se mezcla con `sui-empty-state`. Escríbelo como en la app, una frase con
+  punto: «Nadie recargó en este período.», «Sin gastos registrados todavía.». El default
+  `'No hay datos'` no dice nada: siempre se pasa uno propio (los 9 usos lo hacen).
+
+## Tamaño en mobile y en web
+
+`size` cambia **el alto mínimo de la fila**, no la letra (14 px en todos):
+
+| size | alto | nombre en el Figma | fuente |
+|---|---|---|---|
+| `small` | 48 | Large | Figma |
+| `medium` (default) | 64 | X-Large | Figma |
+| `large` | 80 | — | extensión SUI |
+| `xlarge` | 96 | — | extensión SUI |
+
+Uso de hoy: 2 `medium` explícitos (`orders`, `drivers`), 1 `small` (`master-overview`, una tabla
+secundaria dentro de un tablero) y 6 sin `size` (o sea `medium`).
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| tabla principal de una pantalla | `medium` | `medium` | práctica de la app |
+| tabla secundaria dentro de un tablero | `small` | `small` | práctica de la app (1 uso) |
+| filas con dos líneas y un badge | `medium` | `medium` | propuesta, falta aprobación |
+
+El patrón `[size]="bp.isMobile() ? 'large' : 'medium'"` de los botones **no aplica aquí**: la fila
+ya mide 64 y el toque es sobre toda la fila. `large`/`xlarge` no tienen uso hoy.
+
+**Qué pasa en mobile (≤ 767 px):** la tabla scrollea en horizontal dentro de sí misma; la
+cabecera y el cuerpo miden lo mismo y la barra de scroll se oculta. En la app conviven dos
+salidas, y las dos son práctica, no regla:
+
+| salida | dónde | cuándo elegirla (propuesta) |
+|---|---|---|
+| la misma tabla, con scroll lateral | `orders`, `master-orders`, `central-gastos`, `central-ingresos` | 3-4 columnas, y la primera (`leading`) ya dice casi todo |
+| tarjetas en grilla por debajo de 1350 px | `drivers` (`drivers.ts:282`), `master-gastos` | 6+ columnas: con el sidebar abierto no entran ni en laptop ni en iPad |
+
+**Android (canon del componente, no se repite en la página):** un contenedor con
+`overflow-x: auto` se queda con el gesto vertical y la página deja de scrollear sobre la tabla.
+Ningún `touch-action` solo lo arregla (probado en device). `sui-table` lo resuelve **por dentro y
+solo en Android**: pone `touch-action: pan-x` por JS para que el scroll horizontal sea el nativo,
+y mueve él mismo la página con el gesto vertical (con inercia). En iOS no hace nada: WebKit delega
+el vertical solo. Por eso la página **no** agrega `touch-action` ni un wrapper con `overflow-x`.
+
+## «No usar»: por qué no hoy y cuándo sí
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| `sortable` | toda tabla de la app es una lista paginada por cursor: el orden lo da la consulta | una tabla chica que se carga entera (≤ 50 filas, un reporte del mes) |
+| `selectable` | no hay acciones en lote | aprobar o rechazar varias recargas de una vez, exportar filas elegidas |
+| `striped` | con divisor entre filas ya se lee la fila; las rayas suman ruido | tablas de muchas columnas numéricas (un reporte contable) |
+| `sticky` | la columna fija tapó otra en 375 px (`central-gastos.ts:80`) | una tabla ancha en desktop donde la primera columna es la única referencia |
+| `large` / `xlarge` | 64 ya alcanza al dedo | filas con avatar grande y tres líneas |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+### `sui-table`
+
+| input | tipo | default |
+|---|---|---|
+| `columns` | `SuiTableColumn<T>[]` | — (requerido) |
+| `rows` | `T[]` | — (requerido) |
+| `size` | `'small' \| 'medium' \| 'large' \| 'xlarge'` | `'medium'` |
+| `loading` | `boolean` | `false` |
+| `emptyMessage` | `string` | `'No hay datos'` |
+| `striped` | `boolean` | `false` |
+| `selectable` | `boolean` | `false` |
+| `rowKey` | `keyof T \| ((row: T) => any)` | `undefined` |
+| `selectedRows` · model, `[(selectedRows)]` | `Set<any>` | `new Set()` |
+| `sortKey` · model, `[(sortKey)]` | `string \| null` | `null` |
+| `sortDir` · model, `[(sortDir)]` | `'asc' \| 'desc' \| null` | `null` |
+
+| output | payload |
+|---|---|
+| `rowClicked` | `T` |
+| `sortChanged` | `{ key: string; dir: 'asc' \| 'desc' \| null }` |
+
+### `[suiTableCell]`
+
+| input | tipo | default |
+|---|---|---|
+| `suiTableCell` | `string` | — (requerido) |
+
+Outputs: ninguno.
+<!-- api:fin -->
+
+```ts
+interface SuiTableColumn<T = any> {
+  key: string;                 // campo de la fila; único
+  label: string;               // '' para la columna de acciones
+  width?: string;              // ancho fijo ('100px', '20%')
+  minWidth?: string;           // piso (manda en el scroll de mobile)
+  maxWidth?: string;
+  align?: 'left' | 'center' | 'right';
+  sortable?: boolean;
+  disabled?: boolean;          // cabecera apagada, sin orden
+  priority?: 'regular' | 'leading' | 'passive' | 'none';
+  descriptionKey?: string;     // segunda línea (solo texto plano)
+  truncate?: boolean;          // «…» + tooltip (solo texto plano)
+  misc?: SuiTableCellMisc;     // documental: qué componente va en la plantilla
+  sticky?: boolean;            // fija la columna y activa el scroll lateral en cualquier ancho
+}
+```
+
+`SuiTableCellDirective` se importa aparte (`<ng-template suiTableCell="key" let-row>`).
+El orden cicla `asc → desc → sin orden` y emite `sortChanged` en cada paso; ordenar las filas es
+trabajo de la página.
+
+## Trampas
+
+- **Por encima de 767 px la tabla recorta, no scrollea.** Sin una columna `sticky`, el contenedor
+  es `overflow: hidden` en desktop: lo que no entra **desaparece** a la derecha (monto, estado,
+  acciones). Las columnas tienen que entrar en el ancho real, que con el sidebar abierto es
+  ~483 px en iPad y ~1015 px en una pantalla de 1351. Lo comentan tres pantallas:
+  `pages/drivers/drivers.html:210`, `pages/super-admin/master-gastos/master-gastos.html:38`,
+  `pages/central/central-gastos/central-gastos.ts:76`. El wrapper `drivers__table-wrap` es un
+  respaldo de eso; no se copia.
+- `sticky` en **cualquier** columna activa el scroll lateral en todos los anchos (no solo en mobile)
+  y quita el recorte redondeado de las filas.
+- `descriptionKey` y `truncate` **se ignoran** si la columna tiene plantilla `suiTableCell`.
+- Sin `rowKey`, la fila se identifica por su índice: la selección se mezcla al reordenar o al cargar
+  más. Si usas `selectable` o la lista cambia en vivo, pasa `rowKey="id"`.
+- `rowClicked` dispara en **toda** la fila. Un botón dentro de una plantilla necesita
+  `$event.stopPropagation()` o abre el detalle además de hacer lo suyo.
+- `toggleAll` selecciona **lo cargado**, no la colección: con cursor, «todas» son las de la página.
+- El hover de fila solo existe con mouse (`@media (hover: hover)`); en táctil no hay feedback de
+  toque: si la fila abre algo, que se note por el contenido (una pista «Toca un gasto para…», como
+  `central-gastos.html:46`).
+- La fila esqueleto son siempre 5, sin importar el tamaño de página.
+- No le pongas `touch-action` ni `overflow-x` desde la página: el componente ya maneja el gesto en
+  Android y lo romperías.
+
+## Ejemplo
+
+```html
+<sui-card>
+  <sui-table
+    [columns]="columnas"
+    [rows]="filas()"
+    rowKey="id"
+    [loading]="cargando()"
+    emptyMessage="Sin pedidos en este estado."
+    (rowClicked)="abrirDetalle($event)">
+    <ng-template suiTableCell="estado" let-row>
+      <sui-badge [color]="row.color" variant="lighter" size="small">{{ row.estadoLabel }}</sui-badge>
+    </ng-template>
+  </sui-table>
+
+  @if (hayMas()) {
+    <sui-button variant="stroke" color="neutral" [size]="bp.isMobile() ? 'large' : 'small'"
+                [disabled]="cargandoMas()" (click)="cargarMas()">Cargar más</sui-button>
+  }
+</sui-card>
+```
+
+```ts
+readonly columnas: SuiTableColumn[] = [
+  { key: 'numero', label: 'Pedido', priority: 'leading', descriptionKey: 'desdeHace', minWidth: '130px' },
+  { key: 'cliente', label: 'Cliente', minWidth: '160px', maxWidth: '220px', truncate: true },
+  { key: 'total', label: 'Total', align: 'right', width: '100px' },
+  { key: 'estado', label: 'Estado', width: '130px' },
+];
+```