@ajuarezso/sui-design-system 0.20.0 → 0.22.0

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

@@ -0,0 +1,142 @@
+---
+name: sui-tab-menu-horizontal
+selector: sui-tab-menu-horizontal
+resumen: Pestañas subrayadas para cambiar entre secciones de contenido distinto dentro de una pantalla
+alternativas: [sui-tab-chips (filtros o categorías que se deslizan), sui-segmented-control (2 a 4 modos de la misma vista), sui-tab-menu-vertical (menú lateral de ajustes en web)]
+---
+
+# sui-tab-menu-horizontal
+
+Story: [Molecules/Tabs/Tab Menu Horizontal](https://sui-design-system.web.app/?path=/docs/molecules-tabs-tab-menu-horizontal--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** para cambiar entre **secciones de contenido distinto** de la misma pantalla o detalle:
+«Opiniones · Información» en el modal del local, «Ventas · Productos · Repartidores · Clientes» en
+reportes. Cada pestaña muestra otra cosa, no la misma lista recortada.
+
+**No lo uses** para:
+
+- **Filtrar una lista** o saltar entre categorías: `sui-tab-chips`.
+- **2 a 4 modos de la misma vista** (cuadrícula o lista): `sui-segmented-control`.
+- **Secciones que no entran a lo ancho en mobile** (4 con nombres largos o con `number`, o 5+): el
+  componente no se desliza y las pestañas se salen de la pantalla (ver Trampas). Ahí, por ahora,
+  `sui-tab-chips`.
+- Un menú lateral de ajustes en web: `sui-tab-menu-vertical`.
+
+Regla corta (README de `sui-segmented-control`, 03-10-2026): **2-4 modos de la misma vista →
+segmented · secciones → tab menu · filtros → tab-chips.**
+
+## Qué variante usar
+
+> **Lo que dice la guía del DS**: es un layout lineal para **cambiar entre secciones o categorías**.
+> Muestra un ejemplo con pestañas que **desbordan y se deslizan**, y su pestaña mide 48 px de alto
+> (toda la franja es tocable). No trae do/don't ni tamaños.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-badge`):
+> **1 uso**: `components/store-ratings-modal/store-ratings-modal.html:43` («Opiniones ·
+> Información»), sin `size`, sin ícono, sin `number`.
+
+### Ítems (`tabs`)
+
+| qué | cuándo | fuente |
+|---|---|---|
+| texto | Lo normal: el nombre de la sección, una o dos palabras. | según la guía del DS (ejemplos con texto) |
+| `icon` | Solo si **todas** las pestañas llevan ícono y ayuda a reconocerlas. Nunca en una sola. | propuesta, falta aprobación |
+| `number` | Pendientes **que piden acción** dentro de esa sección («Solicitudes 3»). Es un círculo rojo: no lo uses para totales neutros. | propuesta, falta aprobación |
+| `rightIcon` | No: la flecha dice «te lleva a otra pantalla» y una pestaña no navega. | propuesta, falta aprobación |
+| `disabled` | Una sección que existe pero no aplica todavía (depende del plan). | propuesta, falta aprobación |
+
+### `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 |
+
+**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).
+
+## Tamaño en mobile y en web
+
+Cada pestaña ocupa **todo el alto de la franja**, así que lo tocable es la franja entera (desde
+03-10-2026; antes eran solo los 20 px del texto). El `size` cambia ese alto y el texto:
+
+| 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 |
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| 2-3 secciones | `large` (52, texto 16) | `medium` (48) | propuesta: el tamaño es extensión SUI aprobada (03-10-2026); el «cuándo» falta aprobarlo |
+| 4+ secciones | si no entran a 390 px, se salen sin poder deslizarse (las 4 del panel de repartidores, con sus números, ya no entran a 360): va `sui-tab-chips` | el mismo | según el código |
+
+```html
+<sui-tab-menu-horizontal [tabs]="secciones" [(active)]="seccion" [size]="bp.isMobile() ? 'large' : 'medium'" />
+```
+
+## «No usar»: por qué no hoy y cuándo sí
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| `rightIcon` | una pestaña no lleva a otra pantalla | nunca en pestañas; es del tab menu vertical cuando cada ítem abre una página |
+| `icon` | ningún caso de hoy lo necesita | secciones con ícono reconocible en las tres (Mapa · Lista · Fotos) en web |
+| `number` | ninguna sección del único uso tiene pendientes | «Solicitudes» o «Recargas» del panel de repartidores, si se pasa a tab menu |
+| `disabled` | ninguna sección bloqueada | una sección que depende del plan («Reportes» en plan básico) |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `tabs` | `SuiTabMenuHorizontalItem<T>[]` | — (requerido) |
+| `active` · model, `[(active)]` | `T` | `undefined` |
+| `size` | `'small' \| 'medium' \| 'large' \| 'xlarge'` | `'medium'` |
+
+| output | payload |
+|---|---|
+| `tabChange` | `T` |
+<!-- api:fin -->
+
+```ts
+interface SuiTabMenuHorizontalItem<T = string> {
+  value: T;
+  label: string;
+  icon?: string;        // RemixIcon, 20 px
+  rightIcon?: boolean;  // flecha en píldora
+  number?: number;      // círculo rojo; 0/undefined no se dibuja
+  disabled?: boolean;
+}
+```
+
+## Trampas
+
+- **Sin `active` no se marca ninguna pestaña.** Pásale siempre un valor inicial.
+- **No se desliza.** El track no tiene `overflow-x`: con muchas pestañas en un ancho chico se salen
+  del contenedor. La guía del DS sí lo resuelve; SUI todavía no.
+- **El área tocable es toda la franja** (40–56 según `size`), desde 03-10-2026: el aire de 14 px
+  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)`.
+- **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.
+  Es a propósito.
+
+## Ejemplo
+
+```html
+<sui-tab-menu-horizontal
+  [tabs]="[{ value: 'opiniones', label: 'Opiniones' }, { value: 'info', label: 'Información' }]"
+  [(active)]="tab" />
+```

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

@@ -0,0 +1,136 @@
+---
+name: sui-tab-menu-vertical
+selector: sui-tab-menu-vertical
+resumen: Menú apilado para cambiar entre secciones de una página de ajustes en web
+alternativas: [sui-tab-menu-horizontal (pocas secciones arriba del contenido), sui-sidebar (navegación de toda la app), sui-tab-chips (filtros o categorías)]
+---
+
+# sui-tab-menu-vertical
+
+Story: [Molecules/Tabs/Tab Menu Vertical](https://sui-design-system.web.app/?path=/docs/molecules-tabs-tab-menu-vertical--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** en **web** para una página con varias secciones que se leen de a una, con el menú a la
+izquierda y el contenido a la derecha: los ajustes del local («Datos del local · Horario · Métodos
+de pago · Repartidores»), el perfil del super admin.
+
+**No lo uses** para:
+
+- **Mobile**: el ítem mide 36 px y ocupa el ancho de la pantalla dejando el contenido debajo. En
+  mobile cada sección es una fila de una lista que abre su propia pantalla.
+- La navegación de toda la app: `sui-sidebar`.
+- 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.**
+
+## Qué variante usar
+
+> **Lo que dice la guía del DS**: es un layout apilado para **cambiar entre secciones o categorías**.
+> Sus ejemplos son ajustes («Profile Settings · Contact Information · Social Links · Export Data»),
+> uno con **título arriba** (en SUI, `dividerLabel`) y otro con **contenedor con estilo** (en SUI,
+> `menuStyle="card"`). No trae do/don't.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-badge`): **0 usos**.
+
+### `menuStyle`
+
+| valor | cuándo | fuente |
+|---|---|---|
+| `card` | El menú flota junto al contenido sobre un fondo gris (`bg-weak-50`): el borde y la sombra lo separan. | según la guía del DS (ejemplo «contenedor con estilo»); el cuándo es propuesta |
+| `list` | El menú vive dentro de una columna que ya tiene fondo o borde propio (una card, un panel). | según la guía del DS (ejemplo base); el cuándo es propuesta |
+
+### `dividerLabel`
+
+| valor | cuándo | fuente |
+|---|---|---|
+| vacío (default) | Un solo grupo de secciones. | propuesta, falta aprobación |
+| texto | Nombra el grupo cuando hay más de un menú apilado («Tu local» · «Tu cuenta»). Sale en MAYÚSCULAS y gris. | según la guía del DS (ejemplo con título) |
+
+### Ítems (`tabs`)
+
+| qué | cuándo | fuente |
+|---|---|---|
+| texto | El nombre de la sección. Una o dos palabras; si es más largo, se corta con «…». | según la guía del DS (ejemplos con texto) |
+| `icon` | Sí, en todos los ítems: en un menú lateral el ícono ayuda a encontrar rápido. El activo se pinta naranja. | propuesta, falta aprobación |
+| `number` | Pendientes que piden acción en esa sección (círculo rojo). | propuesta, falta aprobación |
+| `rightIcon` | Cuando el ítem lleva a otra página en vez de cambiar el panel de al lado. | propuesta, falta aprobación |
+| `disabled` | Una sección que depende del plan. | propuesta, falta aprobación |
+
+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.
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| secciones de ajustes | no se usa: lista de filas que abren pantalla | `tab-menu-vertical` | propuesta, falta aprobación |
+
+```html
+@if (!bp.isMobile()) {
+  <sui-tab-menu-vertical [tabs]="secciones" [(active)]="seccion" menuStyle="card" />
+}
+```
+
+## «No usar»: por qué no hoy y cuándo sí
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| el componente entero | ninguna pantalla de la app tiene hoy un menú lateral de secciones | una página de ajustes en web con 5+ secciones (ajustes del local en desktop) |
+| en mobile | 36 px y sin lugar para el contenido al lado | nunca |
+| `rightIcon` | ningún menú mezcla paneles y páginas | un ítem «Facturación» que sale a otra página mientras el resto cambia el panel |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `tabs` | `SuiTabMenuVerticalItem<T>[]` | — (requerido) |
+| `active` · model, `[(active)]` | `T` | `undefined` |
+| `menuStyle` | `'card' \| 'list'` | `'card'` |
+| `dividerLabel` | `string` | `''` |
+
+| output | payload |
+|---|---|
+| `tabChange` | `T` |
+<!-- api:fin -->
+
+```ts
+interface SuiTabMenuVerticalItem<T = string> {
+  value: T;
+  label: string;
+  icon?: string;        // RemixIcon, 20 px
+  rightIcon?: boolean;  // flecha en píldora con sombra
+  number?: number;      // círculo rojo; 0/undefined no se dibuja
+  disabled?: boolean;
+}
+type SuiTabMenuVerticalStyle = 'card' | 'list';
+```
+
+## Trampas
+
+- **El estilo se llama `menuStyle`**, no `style` ni `variant` (ni `verticalStyle`, que era el nombre
+  viejo de `sui-tabs`).
+- **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`.
+- `role="tablist"`: si cada ítem navega a una ruta, el lector de pantalla lo anuncia mal; para
+  navegación entre rutas, `sui-sidebar`.
+
+## Ejemplo
+
+```html
+<sui-tab-menu-vertical
+  menuStyle="card"
+  dividerLabel="Tu local"
+  [tabs]="[{ value: 'datos', label: 'Datos del local', icon: 'store-2-line' },
+           { value: 'horario', label: 'Horario', icon: 'time-line' },
+           { value: 'pagos', label: 'Métodos de pago', icon: 'bank-card-line' }]"
+  [(active)]="seccion" />
+```

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' },
+];
+```

package/docs/sui-tag-input/README.md

@@ -0,0 +1,123 @@
+---
+name: sui-tag-input
+selector: sui-tag-input
+resumen: Campo donde se escriben varios valores cortos que se van sumando como chips (palabras clave)
+alternativas: [sui-input (un solo valor), sui-select (una opción de una lista), sui-checkbox-label (varias opciones fijas)]
+---
+
+# sui-tag-input
+
+Story: [Molecules/Input/Tag Input](https://sui-design-system.web.app/?path=/docs/molecules-input-tag-input--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** para una lista de valores **libres y cortos** que la persona escribe uno por uno: palabras
+clave, rubros, sinónimos. Enter (y la coma, si se pide) convierte lo escrito en un chip; la ✕ de
+cada chip lo quita; borrar con el campo vacío quita el último.
+
+**No lo uses** para:
+
+- Elegir varias opciones que ya existen: casillas (`sui-checkbox-label`).
+- Un solo valor: `sui-input`.
+- Una lista que se guarda como texto separado por comas y nadie ve como lista.
+
+Regla corta: **varios valores libres → tag-input · varias opciones fijas → casillas.**
+
+## Qué variante usar
+
+> **En la guía del DS es un ejemplo de su página del input** («With Tags»: un campo con los chips
+> Berlin, London, Paris debajo). No dice cuándo usarlo.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos**. Candidato: «Rubros que entran»
+> en `pages/super-admin/master-settings/master-settings.html:134`, un `sui-input` donde se escriben
+> palabras separadas por coma («ferreteria, ferretería, construcción») y la pantalla las parte a mano.
+
+| prop / evento | cuándo | fuente |
+|---|---|---|
+| `label` · `required` · `sublabel` · `tooltip` · `hint` | Igual que `sui-input`. El hint dice cómo se agrega: «Escribe y presiona Enter». | según la guía del DS (ejemplo con label «Tag Input») |
+| `placeholder` | **Siempre**: el default es «Add tags...». «Agrega una palabra…». | propuesta, falta aprobación |
+| `commaSeparator` | `true` cuando la gente ya escribe con comas (rubros, sinónimos). | propuesta, falta aprobación |
+| `addOnBlur` | `true` en mobile: si sale del campo sin Enter, lo escrito no se pierde. | propuesta, falta aprobación |
+| `maxTags` | Cuando hay un tope real. Hoy no hay. | propuesta, falta aprobación |
+| `allowDuplicates` | `false` (default). | propuesta, falta aprobación |
+| `rightIcon` | No usar hoy (ícono de info a la derecha). | — |
+| `error` + `errorMessage` | Falta al menos un valor en un campo obligatorio. | según la guía del DS (estado de error del Figma) |
+| `disabled` | Mientras se guarda. | API |
+| `(tagAdded)` · `(tagRemoved)` | Guardar al momento, sin botón. | API |
+
+## Tamaño en mobile y en web
+
+Publicado (0.19.0): `xsmall` (32), `small` (36), `medium` (40). **En el repo del DS, sin publicar:**
+`large` (48) y `xlarge` (52), los mismos altos de `sui-input`, y el texto a 16 px en mobile (en
+0.19.0 queda en 14). Los chips de abajo son `sui-tag` de tamaño fijo: **la ✕ para quitar un chip
+no crece** con el campo.
+
+En large y xlarge el texto sube a 16 px (regla del 03-10-2026): lo que se escribe va en 16/24 también
+en web; el alto sigue en 48/52. Los chips de abajo no cambian.
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| campo de formulario | `large` (48) **cuando se publique**; hasta entonces `medium` (40) | `medium` (40) | propuesta, falta aprobación |
+
+```html
+<sui-tag-input [size]="bp.isMobile() ? 'large' : 'medium'" … />   <!-- 'large' desde la próxima versión -->
+```
+
+## «No usar»: por qué no hoy y cuándo sí
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| el componente entero (0 usos) | nadie carga listas de palabras | «Rubros que entran» de una categoría del home (`master-settings.html:134`), o sinónimos de un producto para el buscador |
+| `rightIcon` | el hint explica mejor | — |
+| `maxTags` | no hay topes | un máximo de 5 palabras clave por producto |
+| `allowDuplicates` | repetir no sirve | — |
+| `size` `xsmall` / `small` | no hay tag-inputs en tablas | un filtro denso del panel |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `size` | `'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge'` | `'medium'` |
+| `placeholder` | `string` | `'Add tags...'` |
+| `disabled` | `boolean` | `false` |
+| `error` | `boolean` | `false` |
+| `errorMessage` | `string \| null` | `null` |
+| `rightIcon` | `string \| boolean` | `false` |
+| `label` | `string \| null` | `null` |
+| `sublabel` | `string \| null` | `null` |
+| `required` | `boolean` | `false` |
+| `tooltip` | `string \| null` | `null` |
+| `hint` | `string \| null` | `null` |
+| `commaSeparator` | `boolean` | `false` |
+| `allowDuplicates` | `boolean` | `false` |
+| `maxTags` | `number \| null` | `null` |
+| `addOnBlur` | `boolean` | `false` |
+| `value` · model, `[(value)]` | `string[]` | `[]` |
+
+| output | payload |
+|---|---|
+| `tagAdded` | `string` |
+| `tagRemoved` | `string` |
+<!-- api:fin -->
+
+`value` es `model<string[]>`. Implementa `ControlValueAccessor`: lo que está escrito sin confirmar
+no es parte del valor. Slot `[slot=right]` para un contenido propio a la derecha.
+
+## Trampas
+
+- **Placeholder en inglés por default** («Add tags...»). Pásalo siempre.
+- Sin `commaSeparator` la coma es un carácter más: «a, b» queda como un solo chip.
+- Sin `addOnBlur`, lo que se escribió y no se confirmó con Enter se pierde al salir.
+- Los chips van **debajo** del campo, no adentro.
+- El hover quita el borde (a diferencia de `sui-input`, que lo oscurece).
+
+## Ejemplo
+
+```html
+<sui-tag-input label="Rubros que entran" placeholder="Agrega una palabra…"
+               hint="Un local entra si su rubro contiene alguna" [commaSeparator]="true"
+               [addOnBlur]="true" [(value)]="rubros" />
+```