@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,326 @@
+---
+name: sui-tab-chips
+selector: sui-tab-chips
+resumen: Fila de chips que se desliza en horizontal para filtrar una lista o saltar entre categorías; siempre hay uno elegido
+alternativas: [sui-segmented-control (2 a 4 modos de la misma vista), sui-tab-menu-horizontal (secciones de contenido distinto), sui-radio-card (elegir un valor de un formulario), sui-tag (chip que se quita)]
+---
+
+# sui-tab-chips
+
+<!-- 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-chips`); 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: [Molecules/Tabs/Tab Chips](https://sui-design-system.web.app/?path=/docs/molecules-tabs-tab-chips--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** para:
+
+- **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.
+
+Sirve cuando las opciones son muchas, cambian según los datos o no caben y tienen que deslizarse.
+
+**No lo uses** para:
+
+- **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`. (`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 (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). Las reglas marcadas canon están aprobadas; lo que sigue en propuesta espera decisión.
+>
+> Uso medido el 06-10-2026 en `master-pedidos/src/app` (sin `master-preview`, `master-prototipos`,
+> `mockup-sheets-*`, `dx/*`, `master-rutina`, `master-medico`, `dev-index`):
+> **44 usos en 31 archivos `.html`** (incluye `master-ejercicios`). `sticky`: 2 (la carta
+> del local y `master-ejercicios`). `count`: 5 listas (cifra del 03-10). `value` + `valueChange`: 2; el resto
+> `value` + `valueChange`. `autoScroll`: 0. `size`: los 44 lo pasan, 43 con `bp.sizeChips()` y 1
+> con `sizeRango()` (`master-overview`, ver «Por dispositivo»).
+
+### 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 **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` | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| 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) | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+
+### `sticky`
+
+| valor | cuándo | fuente |
+|---|---|---|
+| `false` (default) | Filtros arriba de una lista corta o dentro de un modal o sheet. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `true` | Solo la navegación de categorías de una lista larga que scrollea (la carta). Se pega arriba del contenedor de scroll y, pegado, pinta fondo `bg-weak-50`. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+
+### `autoScroll`
+
+| valor | cuándo | fuente |
+|---|---|---|
+| `true` (default) | Siempre: centra el chip elegido cuando cambia `value` (también si lo cambia el scroll de la carta). | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `false` | Solo si el `value` cambia muy seguido por código y el movimiento distrae. Hoy ningún caso. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+
+### Ítems (`chips`)
+
+| qué | cuándo | fuente |
+|---|---|---|
+| `string[]` | Cuando el texto es el valor (meses, provincias). | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `{ value, label }` | Cuando el valor es un id o una clave en inglés (`'active'` → «Activos»). | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `count` | El número de ítems detrás del filtro, cuando ayuda a decidir («Recargas 3»). `0` o `undefined` no se dibuja. **El número va en `count`, no dentro del `label`.** | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| texto | Una o dos palabras, sentence case, sin punto. Plural si filtra («Activos»). | canon (copy de `docs/CANON-SUI.md`) |
+
+**Usos de hoy que rompen las reglas:**
+
+- **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:99` («Ventas · Productos · Repartidores · Clientes»).
+- **2 son modos de la misma vista** (→ `sui-segmented-control`):
+  `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`; `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:194`
+  (`No leídas (3)` → `count: 3`).
+- **Resuelto el 06-10-2026: el tamaño por dispositivo.** Con D16 (05-10-2026) el size es
+  `bp.sizeChips()` (`xlarge` en lo táctil, `medium` en la computadora) y ningún chip queda en
+  `small`. De los 44 usos medidos (misma exclusión de arriba), 43 pasan `bp.sizeChips()` y el otro
+  es la excepción de `master-overview` (ver «Por dispositivo»). Fuera de la medición, la guía del
+  super admin tiene 13 sin `size` (quedan en `medium`):
+  `pages/super-admin/master-preview/_guia-moleculas/navegacion.ts` (11) y `fechas.ts:52`, `:119`.
+
+## Tamaño en mobile y en web
+
+`size` está publicado desde la 0.20.0; la app usa la 0.24.1.
+
+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; la tablet va como el celular, porque se
+toca (canon, dueño, 05-10-2026, D16).
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| filtros y categorías | `xlarge` (44) | `medium` | mobile: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono · computadora `medium` (la tablet va como el celular): canon (dueño, 05-10-2026, D16) |
+| filtros en la cabecera de una tabla | — | `medium` | canon (dueño, 05-10-2026, D16): nada en `small` |
+
+```html
+<sui-tab-chips chips={filtros} value={filtro} onValueChange={(e) => (filtro = e.detail)} size={bp.sizeChips()} />
+```
+
+### Por dispositivo (D16)
+
+Fila de `tab-chips` en la tabla de D16 (dueño, 05-10-2026): se toca, así que va grande en todo lo
+táctil y `medium` en la computadora.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380 px) | `xlarge` (44) | D16 pide `medium` con área tocable de 44, pero el DS todavía no estira el área de los `medium` (36). Hasta que lo haga, se queda el grande |
+| celular (380–767 px) | `xlarge` (44) | el size que llega al piso de 44 |
+| tablet táctil (`pointer: coarse`) | `xlarge` (44) | se toca con el dedo, aunque mida más de 767 |
+| computadora (`pointer: fine`) | `medium` (36) | también en filtros de tablas; `small` no se usa |
+
+Ultrawide (≥ 1920 px): igual que la computadora, `medium`. `large` (40) no sale de ningún
+dispositivo: no llega a 44.
+
+En master-pedidos: `size={bp.sizeChips()}`.
+
+Excepción que hay hoy: `pages/super-admin/master-overview/master-overview.ts:165` (`sizeRango()`)
+pasa `medium` en el teléfono porque los cinco períodos en `xlarge` no entran en los 398 px de un
+celular de 430. Deja el chip en 36, debajo del piso de 44, aunque la fila se desliza. Pendiente de
+confirmar con el dueño; no se copia a otras pantallas.
+
+## Pista de scroll (canon, aprobado por el dueño el 05-10-2026)
+
+Desde la **0.24.0**. La barra de scroll está oculta, así que con chips que no entran no se notaba
+que había más; en escritorio con mouse solo se llegaba con Shift+rueda. El componente lo avisa
+solo:
+
+| parte | qué hace | dónde |
+|---|---|---|
+| degradado | 40 px del color de fondo en el borde que tiene chips ocultos: `bg-white-0` (la página) y `bg-weak-50` cuando está pegado (`sticky`). Funciona en modo oscuro. Se va cuando ya no hay más de ese lado. | siempre |
+| flechas | botón redondo de 32 px con `arrow-left-s-line` / `arrow-right-s-line`, centrado en la fila. 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.
+- No cambia `autoScroll`: el chip elegido se sigue centrando, y la pista se actualiza con ese
+  scroll.
+- Las flechas tienen `aria-label` («Ver más a la derecha» / «Ver más a la izquierda») y
+  `tabindex="-1"`: los chips ya se recorren con ← →.
+- El estado sale del `scroll` del propio `<nav>` y de un `ResizeObserver`; sin listeners
+  globales. Es la misma implementación de `sui-table` (`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 |
+|---|---|---|
+| `autoScroll` en `false` | ningún caso cambia el valor tan seguido como para que moleste | una vista que sincroniza el chip con un scroll muy rápido y el movimiento distrae |
+| `sticky` fuera de la carta | en una lista corta tapa contenido sin ayudar | otra lista larga por categorías (un catálogo de bodega con muchas secciones) |
+| `small` en mobile | 32 px no llega al dedo | nunca en mobile |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| prop | atributo | tipo | default |
+|---|---|---|---|
+| `autoScroll` | `auto-scroll` | `boolean` | `true` |
+| `chips` | `chips` | `readonly (string \| SuiTabChipItem)[] \| string` | `[]` |
+| `pistaDeScroll` | `pista-de-scroll` | `boolean` | `true` |
+| `size` | `size` | `"large" \| "medium" \| "small" \| "xlarge"` | `'medium'` |
+| `sticky` | `sticky` | `boolean` | `false` |
+| `value` | `value` | `string` | `''` |
+
+| evento | `event.detail` |
+|---|---|
+| `valueChange` | `string` |
+
+### 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 |
+|---|---|---|
+| `comun.verMasIzquierda` | Ver más a la izquierda | — |
+| `comun.verMasDerecha` | Ver más a la derecha | — |
+<!-- textos:fin -->
+
+```ts
+interface SuiTabChipItem {
+  value: string;
+  label: string;
+  count?: number;   // 0 o undefined no se dibuja
+}
+type SuiTabChipsSize = 'small' | 'medium' | 'large' | 'xlarge';
+```
+
+## Trampas
+
+- **Siempre hay uno elegido.** Si `value` está vacío o no coincide con ningún chip, el componente
+  elige el **primero y lo emite** por `valueChange`. No existe «ninguno». Si el valor también lo
+  escribe otro control (un textarea), cada tecla rebota al primer chip: usa un signal propio para
+  los chips.
+- **`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.
+- **Desde la 0.24.0 el `<nav class="sui-tab-chips">` va dentro de `<sui-pista-de-scroll>`**, y en
+  modo `sticky` el que se pega es ese contenedor (no el nav). Los estilos de página que pisan
+  `.sui-tab-chips` (padding) siguen funcionando: el nav conserva la clase y sigue siendo el que
+  scrollea.
+- **El degradado asume fondo blanco** (`bg-white-0`) fuera del modo pegado. Sobre un fondo gris se
+  ve una mancha: pisa `--sui-pista-de-scroll-fondo` en un contenedor con el token del fondo real.
+- **Pegado, el fondo es `bg-weak-50`**: sobre una página blanca se nota la franja gris.
+  Con `sticky` el sentinel agrega 16 px arriba.
+- **`count` en 0 no se dibuja**: no sirve para decir «0 pendientes».
+- **El chip activo es oscuro** (`bg-strong-950`), no naranja: es el estilo del componente, no se
+  cambia por pantalla.
+
+## Bien y mal
+
+El número de pendientes
+
+```html
+<!-- ❌ mal: el número va dentro del label (armado en pages/notifications/notifications.ts:194) -->
+<sui-tab-chips size={bp.sizeChips()} value={tab} onValueChange={(e) => (tab = e.detail)}
+  chips={[{ value: 'todas', label: 'Todas' }, { value: 'no_leidas', label: 'No leídas (3)' }]} />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-tab-chips size={bp.sizeChips()} value={tab} onValueChange={(e) => (tab = e.detail)}
+  chips={[{ value: 'todas', label: 'Todas' }, { value: 'no_leidas', label: 'No leídas', count: 3 }]} />
+```
+
+Dos modos de la misma vista
+
+```html
+<!-- ❌ mal: 2 opciones excluyentes de la misma vista; no es un filtro (pages/super-admin/master-semanas/master-semanas.html:80) -->
+<sui-tab-chips size={bp.sizeChips()} chips={vistas} value={vista()}
+  onValueChange={(e) => vista.set($any(e.detail))} />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-segmented-control size={bp.tactil() ? '2xlarge' : 'medium'} tabs={vistas} active={vista} onActiveChange={(e) => (vista = e.detail)} />
+```
+
+Chips de sugerencia junto a un texto libre (los chips con su propio signal y «Otro motivo» primero en `chipsMotivo`)
+
+```html
+<!-- ❌ mal: chips y textarea comparten el signal; cada tecla rebota al primer chip -->
+<sui-tab-chips size={bp.sizeChips()} chips={motivos} value={motivo} onValueChange={(e) => (motivo = e.detail)} />
+<sui-textarea label="Motivo" value={motivo} onValueChange={(e) => (motivo = e.detail)} />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-tab-chips size={bp.sizeChips()} chips={chipsMotivo} value={chip()} onValueChange={(e) => elegirChip(e.detail)} />
+<sui-textarea label="Motivo" value={motivo} onValueChange={(e) => (motivo = e.detail)} />
+```
+
+## Ejemplo
+
+```html
+<!-- Filtro de estado: «Todos» primero -->
+<sui-tab-chips
+  size={bp.sizeChips()}
+  chips={[{ value: 'todos', label: 'Todos' }, { value: 'activos', label: 'Activos' },
+            { value: 'entregados', label: 'Entregados' }, { value: 'cancelados', label: 'Cancelados' }]}
+  value={filtro} onValueChange={(e) => (filtro = e.detail)} />
+
+<!-- Categorías de la carta -->
+<sui-tab-chips size={bp.sizeChips()} chips={categorias()} value={categoria()} onValueChange={(e) => irA(e.detail)} sticky />
+```

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

@@ -0,0 +1,226 @@
+---
+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
+
+<!-- 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-horizontal`); 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 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. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `number` | Pendientes **que piden acción** dentro de esa sección («Solicitudes 3»). Es un círculo rojo: no lo uses para totales neutros. | canon (aprobado por el dueño, 05-10-2026, bloque B3) |
+| `rightIcon` | No: la flecha dice «te lleva a otra pantalla» y una pestaña no navega. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `disabled` | Una sección que existe pero no aplica todavía (depende del plan). | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
+
+### `size`
+
+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: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
+  regla de abajo (canon, 05-10-2026) pide `large` en mobile.
+
+## 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 (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 |
+|---|---|---|---|
+| 2-3 secciones | `large` (52, texto 16) | `medium` (48) | canon (aprobado por el dueño, 05-10-2026, bloque B1); el tamaño es extensión SUI aprobada (03-10-2026) |
+| 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} onActiveChange={(e) => (seccion = e.detail)} size={bp.tactil() && !bp.celularChico() ? 'large' : 'medium'} />
+```
+
+### Por dispositivo (D16)
+
+Fila de `tab-menu-horizontal` en la tabla de D16 (dueño, 05-10-2026): se toca, pero su `medium`
+ya mide 48 de alto, así que el celular chico no necesita subir.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380 px) | `medium` (48) | ya mide 48: pasa el piso de 44 sin subir |
+| celular (380–767 px) | `large` (52, texto 16) | |
+| tablet táctil (`pointer: coarse`) | `large` (52) | se toca con el dedo, aunque mida más de 767 |
+| computadora (`pointer: fine`) | `medium` (48) | `small` no se usa |
+
+Ultrawide (≥ 1920 px): igual que la computadora, `medium`. `xlarge` no sale de ningún dispositivo.
+
+En master-pedidos: `size={bp.tactil() && !bp.celularChico() ? 'large' : 'medium'}`. No hay
+helper propio, y `bp.sizeControl()` no sirve aunque los valores coincidan: da `large` en el celular
+chico.
+
+## «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` -->
+
+| prop | atributo | tipo | default |
+|---|---|---|---|
+| `active` | `active` | `string \| undefined` | `undefined` |
+| `size` | `size` | `"large" \| "medium" \| "small" \| "xlarge"` | `'medium'` |
+| `tabs` | — (solo por propiedad JS) | `SuiTabMenuHorizontalItem[]` | `[]` |
+
+| evento | `event.detail` |
+|---|---|
+| `tabChange` | `string` |
+
+### Diferencias con el SUI Angular
+
+- **Eventos de Angular que aquí no existen:** `activeChange`
+<!-- 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` + `activeChange` 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.
+  Es a propósito.
+
+## Bien y mal
+
+Pestañas del modal del local, que el cliente abre en el teléfono
+
+```html
+<!-- ❌ mal: sin size queda en medium en el teléfono y la tablet (components/store-ratings-modal/store-ratings-modal.html:43) -->
+<sui-tab-menu-horizontal tabs={tabs} active={tab()} onTabChange={(e) => tab.set($any(e.detail))} />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-tab-menu-horizontal tabs={tabs} active={tab} onActiveChange={(e) => (tab = e.detail)}
+  size={bp.tactil() && !bp.celularChico() ? 'large' : 'medium'} />
+```
+
+Flecha en una pestaña
+
+```html
+<!-- ❌ mal: rightIcon dice «te lleva a otra pantalla» y una pestaña no navega -->
+<sui-tab-menu-horizontal active={tab} onActiveChange={(e) => (tab = e.detail)}
+  tabs={[{ value: 'opiniones', label: 'Opiniones', rightIcon: true }, { value: 'info', label: 'Información' }]} />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-tab-menu-horizontal active={tab} onActiveChange={(e) => (tab = e.detail)}
+  tabs={[{ value: 'opiniones', label: 'Opiniones' }, { value: 'info', label: 'Información' }]} />
+```
+
+Un total neutro en el círculo rojo
+
+```html
+<!-- ❌ mal: number es para pendientes que piden acción, no para cuántos repartidores hay -->
+<sui-tab-menu-horizontal active={tab} onActiveChange={(e) => (tab = e.detail)}
+  tabs={[{ value: 'activos', label: 'Activos', number: 42 }, { value: 'solicitudes', label: 'Solicitudes' }]} />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-tab-menu-horizontal active={tab} onActiveChange={(e) => (tab = e.detail)}
+  tabs={[{ value: 'activos', label: 'Activos' }, { value: 'solicitudes', label: 'Solicitudes', number: 3 }]} />
+```
+
+## Ejemplo
+
+```html
+<sui-tab-menu-horizontal
+  tabs={[{ value: 'opiniones', label: 'Opiniones' }, { value: 'info', label: 'Información' }]}
+  active={tab} onActiveChange={(e) => (tab = e.detail)} />
+```