@ajuarezso/sui-design-system 0.23.1 → 0.24.0

package/docs/sui-banner/README.md

@@ -27,6 +27,19 @@ está en modo de prueba. Va pegado arriba, a todo el ancho, y se queda mientras
 Regla corta (canon, la misma del alert): **contexto → alert · toda la app → banner · efímero →
 toast · bandeja → notification.**
 
+## Ancho: siempre todo el de su contenedor (regla del dueño, 04-10-2026)
+
+El banner **ocupa siempre el ancho disponible de su contenedor**, de borde a borde. No se mete
+dentro de una columna centrada ni de una card, ni se le pone `border-radius` o márgenes laterales
+para que «encaje» con el contenido: si se ve como un rectángulo flotando entre cards, está mal
+puesto.
+
+- Va **fuera** de la columna con `max-width` de la página, como primer hijo del host.
+- Si el host tiene padding lateral (p. ej. `customer-page-base`: 32px en desktop y 16px en
+  mobile), el banner se come ese padding con margen negativo para llegar al borde.
+- Ejemplo real: el aviso de app cerrada en la bandeja del repartidor
+  (`driver-dashboard.html`, clase `.cerrada`).
+
 ## Qué variante usar
 
 > La guía del DS dice **para qué** es el banner, pero no cuándo va cada relleno ni cada tipo. Lo

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

@@ -131,6 +131,26 @@ contador mide 11 px en `small` y `medium`, y 12 px (pastilla de 20) en `large` y
 <sui-tab-chips [chips]="filtros" [(value)]="filtro" [size]="bp.isMobile() ? 'xlarge' : 'medium'" />
 ```
 
+## 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`).
+- `[pistaDeScroll]="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 |
@@ -151,6 +171,7 @@ contador mide 11 px en `small` y `medium`, y 12 px (pastilla de 20) en `large` y
 | `sticky` | `boolean` | `false` |
 | `size` | `'small' \| 'medium' \| 'large' \| 'xlarge'` | `'medium'` |
 | `autoScroll` | `boolean` | `true` |
+| `pistaDeScroll` | `boolean` | `true` |
 
 Outputs: ninguno.
 <!-- api:fin -->
@@ -161,7 +182,7 @@ interface SuiTabChipItem {
   label: string;
   count?: number;   // 0 o undefined no se dibuja
 }
-type SuiTabChipsSize = 'small' | 'medium' | 'large';
+type SuiTabChipsSize = 'small' | 'medium' | 'large' | 'xlarge';
 ```
 
 ## Trampas
@@ -182,6 +203,12 @@ type SuiTabChipsSize = 'small' | 'medium' | 'large';
 - **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».

package/docs/sui-table/README.md

@@ -140,6 +140,28 @@ solo en Android**: pone `touch-action: pan-x` por JS para que el scroll horizont
 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`.
 
+## 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`).
+- `[pistaDeScroll]="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 |
@@ -167,6 +189,7 @@ el vertical solo. Por eso la página **no** agrega `touch-action` ni un wrapper
 | `striped` | `boolean` | `false` |
 | `selectable` | `boolean` | `false` |
 | `rowKey` | `keyof T \| ((row: T) => any)` | `undefined` |
+| `pistaDeScroll` | `boolean` | `true` |
 | `selectedRows` · model, `[(selectedRows)]` | `Set<any>` | `new Set()` |
 | `sortKey` · model, `[(sortKey)]` | `string \| null` | `null` |
 | `sortDir` · model, `[(sortDir)]` | `'asc' \| 'desc' \| null` | `null` |
@@ -230,6 +253,8 @@ trabajo de la página.
 - 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.
 
 ## Ejemplo