@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,209 @@
+---
+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
+
+<!-- generado por scripts/gen-docs.mjs — no editar a mano; `npm run docs` -->
+
+> **De dónde sale este doc.** El criterio es el del SUI Angular (`sui-tab-menu-vertical`); la API es la de este
+> paquete, leída del código. Los ejemplos se pasaron de Angular de forma mecánica: lo literal va como
+> atributo (`only-icon`, `size="large"`), lo dinámico entre llaves (`size={expr}` → `el.size = expr`)
+> y los eventos como `onValueChange={…}` → `el.addEventListener('valueChange', …)`. `@if`, `@for` y
+> `<ng-template>` quedan como en Angular: se leen como pseudocódigo.
+>
+> **La API de aquí no es igual a la de Angular.** Lo que el texto nombre y figure en «Diferencias con
+> el SUI Angular» (dentro de API) aquí no existe.
+
+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 y tablet táctil**: el ítem mide 36 px y no llega a los 44 del dedo; en el celular,
+  además, ocupa el ancho de la pantalla dejando el contenido debajo. Ahí 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 (canon, aprobado por el dueño, 05-10-2026, bloque B7): **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: canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `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: canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+
+### `dividerLabel`
+
+| valor | cuándo | fuente |
+|---|---|---|
+| vacío (default) | Un solo grupo de secciones. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| 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. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `number` | Pendientes que piden acción en esa sección (círculo rojo). | canon (aprobado por el dueño, 05-10-2026, bloque B3) |
+| `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. | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
+
+Usos de hoy que rompen las reglas: **0** (no se usa).
+
+## Tamaño en mobile y en web
+
+Í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 |
+|---|---|---|---|
+| secciones de ajustes | no se usa: lista de filas que abren pantalla | `tab-menu-vertical` | «no se usa en mobile»: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono — el ítem mide 36 y no tiene `size` · la lista de filas en mobile y el uso en web: canon (aprobado por el dueño, 05-10-2026, bloque B7) |
+
+```html
+@if (!bp.tactil()) {
+  <sui-tab-menu-vertical tabs={secciones} active={seccion} onActiveChange={(e) => (seccion = e.detail)} menu-style="card" />
+}
+```
+
+### Por dispositivo (D16)
+
+No tiene `size` (ítem único de 36, sin eje de tamaño en Figma): no hay tabla por dispositivo. Como
+se toca y no llega a 44, la regla general de D16 lo deja fuera de todo lo táctil: celular (chico o
+no) y tablet táctil van con la lista de filas que abren pantalla (B7); computadora y ultrawide, el
+menú tal cual. Fuente: D16, dueño 05-10-2026 (columna «lo que se toca»). En master-pedidos:
+`@if (!bp.tactil()) { <sui-tab-menu-vertical … /> }`.
+
+## «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` -->
+
+| prop | atributo | tipo | default |
+|---|---|---|---|
+| `active` | `active` | `string \| undefined` | `undefined` |
+| `dividerLabel` | `divider-label` | `string` | `''` |
+| `menuStyle` | `menu-style` | `"card" \| "list"` | `'card'` |
+| `tabs` | — (solo por propiedad JS) | `SuiTabMenuVerticalItem[]` | `[]` |
+
+| evento | `event.detail` |
+|---|---|
+| `tabChange` | `string` |
+
+### Diferencias con el SUI Angular
+
+- **Eventos de Angular que aquí no existen:** `activeChange`
+<!-- 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`, 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`.
+
+## Bien y mal
+
+Menú en el celular
+
+```html
+<!-- ❌ mal: en el celular y la tablet táctil el ítem mide 36 (no llega a 44), y en el celular el contenido queda debajo -->
+<sui-tab-menu-vertical tabs={secciones} active={seccion} onActiveChange={(e) => (seccion = e.detail)} />
+```
+
+```html
+<!-- ✅ bien: en el celular y la tablet táctil, cada sección es una fila que abre su pantalla -->
+@if (!bp.tactil()) {
+  <sui-tab-menu-vertical tabs={secciones} active={seccion} onActiveChange={(e) => (seccion = e.detail)} />
+}
+```
+
+Ítem activo al entrar
+
+```html
+<!-- ❌ mal: sin active no se marca ningún ítem -->
+<sui-tab-menu-vertical tabs={secciones} onTabChange={(e) => mostrar(e.detail)} />
+```
+
+```html
+<!-- ✅ bien: seccion arranca en la primera sección ('datos') -->
+<sui-tab-menu-vertical tabs={secciones} active={seccion} onActiveChange={(e) => (seccion = e.detail)} />
+```
+
+Menú dentro de una card
+
+```html
+<!-- ❌ mal: card dentro de una card, borde y sombra dobles -->
+<sui-card>
+  <sui-tab-menu-vertical tabs={secciones} active={seccion} onActiveChange={(e) => (seccion = e.detail)} menu-style="card" />
+</sui-card>
+```
+
+```html
+<!-- ✅ bien: la columna ya tiene fondo y borde, el menú va plano -->
+<sui-card>
+  <sui-tab-menu-vertical tabs={secciones} active={seccion} onActiveChange={(e) => (seccion = e.detail)} menu-style="list" />
+</sui-card>
+```
+
+## Ejemplo
+
+```html
+<sui-tab-menu-vertical
+  menu-style="card"
+  divider-label="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} onActiveChange={(e) => (seccion = e.detail)} />
+```

package/docs/sui-table/README.md

@@ -0,0 +1,371 @@
+---
+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
+
+<!-- generado por scripts/gen-docs.mjs — no editar a mano; `npm run docs` -->
+
+> **De dónde sale este doc.** El criterio es el del SUI Angular (`sui-table`); la API es la de este
+> paquete, leída del código. Los ejemplos se pasaron de Angular de forma mecánica: lo literal va como
+> atributo (`only-icon`, `size="large"`), lo dinámico entre llaves (`size={expr}` → `el.size = expr`)
+> y los eventos como `onValueChange={…}` → `el.addEventListener('valueChange', …)`. `@if`, `@for` y
+> `<ng-template>` quedan como en Angular: se leen como pseudocódigo.
+
+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. Lo de abajo es
+> **práctica de la app**, **canon** (sale de `master-pedidos/CLAUDE.md`, de `docs/CANON-SUI.md` o lo
+> aprobó el dueño el 05-10-2026) o **propuesta, falta aprobación**, que espera decisión.
+>
+> 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` | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `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` | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `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={bp.sizeBadge()}>` (`medium` en la computadora, `large` en el celular) | D16, dueño 05-10-2026; CANON-SUI §0 («Chip de estado») todavía dice `small`: hay que actualizarlo en master-pedidos |
+| acciones de la fila | `<sui-button variant="ghost" color="neutral" size={bp.sizeControl()} only-icon>` (`medium` en la computadora, `large` donde se toca) | D16, dueño 05-10-2026 (README de `sui-button`: en una tabla, `medium` en la computadora; antes `2xsmall`) |
+| prender/apagar | `<sui-switch>` | propuesta, falta aprobación |
+| calificación | `<sui-rating>` de solo lectura | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+
+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 | `medium` | `medium` | D16, dueño 05-10-2026 (antes `small`, práctica de la app: `master-overview.html:126`) |
+| filas con dos líneas y un badge | `medium` | `medium` | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+
+El patrón por dispositivo de los botones (`bp.sizeControl()`) **no aplica al `size` de la tabla**:
+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 cuándo va cada una ya es regla:
+
+| salida | dónde | cuándo elegirla (canon (aprobado por el dueño, 05-10-2026, bloque B7)) |
+|---|---|---|
+| 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`.
+
+### Por dispositivo (D16)
+
+El `size` de la tabla no depende del dispositivo: cambia el alto de la fila (48 a 96), no el área
+que se toca, y la fila entera ya pasa los 44 del dedo. Va `medium` (el default) en el celular
+chico, el celular, la tablet táctil, la computadora y el ultrawide; por eso no hay tabla de D16.
+Lo que sí sigue a D16 es lo que va **dentro** de las celdas: el badge como lo que no se toca y el
+botón de acción como lo que se toca. Fuente: D16, dueño 05-10-2026.
+
+En master-pedidos: `<sui-table>` sin `size`, y en las plantillas `size={bp.sizeBadge()}` (badge)
+y `size={bp.sizeControl()}` (botón). Las tablas de la app que tienen badge o botón en una celda
+ya llevan esos helpers; la que queda fuera es `master-overview.html:126`, que pasa `size="small"` a
+la tabla.
+
+## Pista de scroll (canon, aprobado por el dueño el 05-10-2026)
+
+Desde la **0.24.0**. Cuando la tabla scrollea en horizontal (≤ 767 px, o con una columna `sticky`)
+la barra está oculta: en el teléfono se ve 1 de 5 columnas y parece completa. La tabla lo avisa
+sola, sin nada en la página:
+
+| parte | qué hace | dónde |
+|---|---|---|
+| degradado | 40 px del color de fondo de la tabla (`bg-white-0`, oscuro en modo oscuro) en el borde que tiene columnas ocultas. Se va cuando ya no hay más de ese lado. | siempre |
+| flechas | botón redondo de 28 px con `arrow-left-s-line` / `arrow-right-s-line`, **a la altura de la cabecera** (en una tabla larga el centro queda fuera de la pantalla). Desplaza ~80 % del ancho visible con scroll suave (sin animación con `prefers-reduced-motion`). | solo con mouse o trackpad (`hover: hover` y `pointer: fine`) |
+
+- En táctil no hay flechas: se desliza con el dedo y el degradado basta.
+- **Con una columna `sticky` no hay pista a la izquierda**: la columna pegada ya avisa, y el
+  degradado o la flecha se pintarían encima de ella. La derecha sí.
+- En escritorio sin `sticky` el contenedor es `overflow: hidden` (recorta, no scrollea): ahí no
+  hay pista aunque algo desborde. Ver Trampas.
+- Las flechas tienen `aria-label` («Ver más a la derecha» / «Ver más a la izquierda») y
+  `tabindex="-1"`: no son una parada de teclado.
+- El estado sale del `scroll` del propio contenedor y de un `ResizeObserver`; sin listeners
+  globales. Es la misma implementación de `sui-tab-chips` (`core/pista-de-scroll`).
+- `pista-de-scroll="false"` la apaga (default prendida). Hoy no hay un caso para apagarla.
+
+## «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` -->
+
+| prop | atributo | tipo | default |
+|---|---|---|---|
+| `columns` | — (solo por propiedad JS) | `SuiTableColumn<any>[]` | `[]` |
+| `emptyMessage` | `empty-message` | `string` | `'No hay datos'` |
+| `loading` | `loading` | `boolean` | `false` |
+| `pistaDeScroll` | `pista-de-scroll` | `boolean` | `true` |
+| `rowKey` | `row-key` | `((row: any) => any) \| null \| string` | `null` |
+| `rows` | — (solo por propiedad JS) | `any[]` | `[]` |
+| `selectable` | `selectable` | `boolean` | `false` |
+| `selectedRows` | — (solo por propiedad JS) | `Set<any>` | `new Set()` |
+| `size` | `size` | `"large" \| "medium" \| "small" \| "xlarge"` | `'medium'` |
+| `sortDir` | `sort-dir` | `"asc" \| "desc" \| null` | `null` |
+| `sortKey` | `sort-key` | `null \| string` | `null` |
+| `striped` | `striped` | `boolean` | `false` |
+
+| evento | `event.detail` |
+|---|---|
+| `rowClicked` | `any` |
+| `selectedRowsChange` | `Set<any>` |
+| `sortChanged` | `SuiTableSortEvent` |
+| `sortDirChange` | `"asc" \| "desc" \| null` |
+| `sortKeyChange` | `null \| string` |
+
+Slots: `(nombre dinámico)`.
+
+### Diferencias con el SUI Angular
+
+Ninguna en nombres de props, eventos y valores.
+<!-- api:fin -->
+
+<!-- textos:inicio -->
+### Textos
+
+Lo que el componente escribe solo sale de `provideSuiTextos` (español por defecto, se cambia en vivo; ver `docs/TEXTOS.md`). El input de la última columna le gana al texto global.
+
+| clave | por defecto | se pisa con |
+|---|---|---|
+| `tabla.seleccionarTodas` | Seleccionar todas las filas | — |
+| `tabla.seleccionarFila` | Seleccionar fila | — |
+| `tabla.sinDatos` | No hay datos | `emptyMessage` |
+| `comun.verMasIzquierda` | Ver más a la izquierda | — |
+| `comun.verMasDerecha` | Ver más a la derecha | — |
+<!-- textos: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.
+- **El degradado de la pista es `bg-white-0`**, el fondo de la propia tabla. Si la tabla vive
+  sobre otro fondo (no es el caso hoy), se pisa `--sui-pista-de-scroll-fondo` en un contenedor.
+
+## Bien y mal
+
+Segunda línea en la columna principal
+
+```html
+<!-- ❌ mal: la columna tiene descriptionKey, pero con plantilla la segunda línea no sale (central-gastos.html:49, central-gastos.ts:83) -->
+<ng-template suiTableCell="concepto" let-row>
+  <span class="cg__concepto">{row.concepto}</span>
+</ng-template>
+```
+
+```html
+<!-- ✅ bien: sin plantilla en 'concepto'; leading + descriptionKey pintan las dos líneas (como orders.html:94) -->
+<sui-table columns={columnas} rows={filas()} empty-message="No hay gastos registrados este mes." />
+```
+
+Columnas que no entran
+
+```html
+<!-- ❌ mal: wrapper con overflow-x desde la página (drivers.html:212, drivers.scss:111) -->
+<div class="drivers__table-wrap">
+  <sui-table columns={tableColumns} rows={filteredDrivers()} row-key="id" />
+</div>
+```
+
+```html
+<!-- ✅ bien: las columnas entran en el ancho real; con 6+ columnas, tarjetas por debajo de 1350 px -->
+<sui-table columns={tableColumns} rows={filteredDrivers()} row-key="id" />
+```
+
+Botón dentro de una fila que abre el detalle
+
+```html
+<!-- ❌ mal: el clic edita y además abre el detalle por rowClicked -->
+<ng-template suiTableCell="acciones" let-row>
+  <sui-button variant="ghost" color="neutral" size={bp.sizeControl()} only-icon
+              left-icon="pencil-line" aria-label="Editar" onClick={() => editar(row)} />
+</ng-template>
+```
+
+```html
+<!-- ✅ bien -->
+<ng-template suiTableCell="acciones" let-row>
+  <sui-button variant="ghost" color="neutral" size={bp.sizeControl()} only-icon
+              left-icon="pencil-line" aria-label="Editar" onClick={(e) => { e.stopPropagation(); editar(row) }} />
+</ng-template>
+```
+
+## Ejemplo
+
+```html
+<sui-card>
+  <sui-table
+    columns={columnas}
+    rows={filas()}
+    row-key="id"
+    loading={cargando()}
+    empty-message="Sin pedidos en este estado."
+    onRowClicked={(e) => abrirDetalle(e.detail)}>
+    <ng-template suiTableCell="estado" let-row>
+      <sui-badge color={row.color} variant="lighter" size={bp.sizeBadge()}>{row.estadoLabel}</sui-badge>
+    </ng-template>
+  </sui-table>
+
+  @if (hayMas()) {
+    <sui-button variant="stroke" color="neutral" size={bp.sizeControl()}
+                disabled={cargandoMas()} onClick={() => 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-tabs/README.md

@@ -0,0 +1,85 @@
+---
+name: sui-tabs
+selector: sui-tabs
+resumen: Obsoleto. Para código nuevo usar sui-tab-chips, sui-segmented-control, sui-tab-menu-horizontal, sui-tab-menu-vertical
+alternativas: [sui-tab-chips, sui-segmented-control, sui-tab-menu-horizontal, sui-tab-menu-vertical]
+---
+
+# sui-tabs
+
+<!-- generado por scripts/gen-docs.mjs — no editar a mano; `npm run docs` -->
+
+> **Obsoleto.** El SUI Angular ya no tiene `sui-tabs`: se partió en componentes propios, que ya están en este paquete. Para código nuevo usar `<sui-tab-chips>` (chips de filtro o pestañas), `<sui-segmented-control>` (2-4 opciones excluyentes de un valor), `<sui-tab-menu-horizontal>` (modo `line`) o `<sui-tab-menu-vertical>` (modo `vertical`).
+>
+> Para código nuevo, ya en este paquete: `sui-tab-chips`, `sui-segmented-control`, `sui-tab-menu-horizontal`, `sui-tab-menu-vertical`.
+
+> El SUI Angular no tiene un componente con este nombre, así que no hay criterio de uso que
+> heredar. Lo de abajo es la descripción que trae el código y su API.
+
+`<sui-tabs>` — Pestañas en tres modos (segment, line y vertical); obsoleto, ver `@deprecated`.
+
+Portado 1:1 desde el `SuiTabs` Angular de antes de partirse. Misma API pública
+(tabs/active/variant/size/verticalStyle/dividerLabel + evento de cambio),
+mismas variantes/sizes/states, mismo comportamiento (segment indicator
+animado vía ResizeObserver, disabled no-op, iOS :active fix) y mismos VALORES
+exactos (tokens del DS, no hex). El accent del DS es NARANJA brand (#fa7319),
+NO el azul de Figma.
+
+Figma file: 8p1k72aKKvzJV4XcvPS4VO.
+
+COMPUESTO: cubre tres componentes de Figma bajo un solo `sui-tabs`:
+  - variant='segment'  → "Segmented Control [1.1]" (pill iOS, indicador animado)
+  - variant='line'     → "Tab Menu Horizontal [1.1]" (underline tabs)
+  - variant='vertical' → "Tab Menu Vertical [1.1]" (sidebar nav, Card|List)
+
+Reusa el primitivo `<sui-icon>` ya portado para leftIcon / chevron (NO
+re-implementa el icono). El badge numérico es markup propio del Tab Menu
+(Badge [1.1] inline), igual que en el Angular original.
+
+EXACT specs (Tab Menu pass, homologado contra Figma):
+  Segment container (2604:152): bg-weak-50, padding 4px, gap 4px, radius 10px,
+    item padding 4px gap 6px radius 6px icon 20px; indicator bg-white-0 con
+    shadow del toggle/switch, animado por transform+width (ResizeObserver).
+  Horizontal container (3511:9958): border-t/b 1px stroke-soft-200, py-14px,
+    gap-24px, items-start, bg-white-0. Item gap icon↔label 6px, gap label↔badge
+    4px; default/off sub-600, hover/off strong-950 (icon queda sub-600),
+    active/on strong-950 + indicator line primary-base 2px al ras del borde.
+  Vertical item (3515:10327/10341): gap 6px, padding 8px, radius-8, w-full,
+    label flex-1; active/on bg-weak-50 + strong-950; hover/off bg-weak-50 +
+    strong-950; default/off sub-600 (bg-white-0 en Card, transparent en List).
+    Container Card (3516:10412): bg-white-0, border 1px stroke-soft-200, p-10px,
+    radius-16, shadow-x-small, gap-8px. List: flat, gap-8px.
+
+`scoped: true` (light DOM, NO shadow): los `<sui-icon>` proyectados heredan el
+`currentColor` del item (tokens text/icon por estado) y el `:host([data-sui-*])`
+styling per-variant / per-size / per-vstyle aplica. Misma estrategia que el
+Angular original.
+
+API ↔ Angular:
+  - `tabs`          → input.required<SuiTab[]>
+  - `active`        → model<T>()  (aquí `@Prop mutable`, string; two-way por
+                      lectura de `el.active` tras el evento o seteo directo)
+  - `variant`       → input ('line' default)
+  - `size`          → input ('medium' default)
+  - `verticalStyle` → input ('card' default)
+  - `dividerLabel`  → input ('' default)
+  - evento          → `tabChange` output → aquí `suiTabChange` CustomEvent
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| prop | atributo | tipo | default |
+|---|---|---|---|
+| `active` | `active` | `string \| undefined` | `undefined` |
+| `dividerLabel` | `divider-label` | `string` | `''` |
+| `size` | `size` | `"large" \| "medium" \| "small"` | `'medium'` |
+| `tabs` | — (solo por propiedad JS) | `readonly SuiTab[]` | `[]` |
+| `variant` | `variant` | `"line" \| "segment" \| "vertical"` | `'line'` |
+| `verticalStyle` | `vertical-style` | `"card" \| "list"` | `'card'` |
+
+| evento | `event.detail` |
+|---|---|
+| `suiTabChange` | `string` |
+<!-- api:fin -->