@ajuarezso/sui-design-system 0.21.0 → 0.23.0

package/docs/sui-modal-sheet/README.md

@@ -0,0 +1,170 @@
+---
+name: sui-modal-sheet
+selector: sui-modal-sheet
+resumen: Hoja que sube desde abajo, se arrastra entre alturas fijas y puede dejar usable lo de atrás (un mapa)
+alternativas: [sui-modal (pide terminar algo antes de seguir, sin fondo usable), sui-popover (contenido chico anclado a un botón), sui-dropdown-menu (lista de acciones)]
+---
+
+# sui-modal-sheet
+
+Story: [Organisms/Modal/Modal Sheet](https://sui-design-system.web.app/?path=/docs/organisms-modal-modal-sheet--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** cuando el contenido **convive con lo de atrás** o se mira a distintas alturas:
+
+- El panel del seguimiento sobre un mapa (pedido, envío, viaje): a 25 % se ve el mapa, a 100 %
+  el detalle. El mapa sigue respondiendo.
+- Una lista o un detalle que se abre desde abajo y se cierra deslizando (reseñas, movimientos
+  de la billetera, elegir la hora de entrega).
+
+**No lo uses** para:
+
+- Un formulario o una confirmación que hay que terminar: `sui-modal`. El sheet se cierra con un
+  deslizón y se pierde lo escrito.
+- Desktop como superficie principal: en una pantalla de 1440 px un sheet a todo el ancho se lee
+  como un error (ver tamaño). Si en desktop hay sitio, un panel lateral sirve mejor.
+
+## Qué variante usar
+
+> **No está en la guía del DS: es extensión de SUI**, inspirada en el `ion-modal` en modo sheet
+> de Ionic y en las hojas de Apple Maps. No hay Figma que la legisle. Lo marcado **canon** sale
+> de `master-pedidos/CLAUDE.md`; lo demás es **propuesta** sacada del uso real.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app`: 13 sheets, sin contar prototipos ni
+> vitrinas (`master-preview`, `master-prototipos`, `mockup-sheets-*`, `dx/*`, `master-rutina`,
+> `master-medico`, `dev-index`) ni las copias de `components/sui/`.
+
+### Lo que sí dice la guía del DS
+
+Nada: el sheet no está en la guía. Lo único que hereda del DS es el criterio del body (20 px) y
+el radio Android (`--sui-radius-20`).
+
+### Los dos patrones de la app
+
+El sheet no tiene variantes: se configura con tres números. En la app salen **dos recetas**, y
+conviene copiar una de las dos en vez de inventar otra.
+
+| patrón | `breakpoints` | `initialBreakpoint` | `backdropBreakpoint` | cuándo | ejemplo real de la app | fuente |
+|---|---|---|---|---|---|---|
+| **Sobre un mapa** | `[0.25, 0.5, 0.7, 1]` (sin `0`) | `0.5` | `1` | el seguimiento: el mapa se usa a cualquier altura y la hoja no se puede cerrar | `pages/customer/order-tracking/order-tracking.html:130` · `pages/driver/driver-order-detail/driver-order-detail.html:60` | propuesta |
+| **Hoja de lectura** | `[0, 0.92]` | `0.92` | `0` | una lista o detalle que se abre y se cierra deslizando, con el fondo apagado | `pages/customer/order-tracking/order-tracking.html:809` (reseñas) · `pages/customer/checkout/checkout.html:448` (hora) | propuesta |
+
+Hoy: 4 «sobre un mapa» (más 2 variantes con alturas propias: `pages/envios/envios.html:578` y
+`pages/customer/viaje/viaje.html:24`), 5 hojas de lectura en `0.92`–`0.96`, 2 en `[0, 1]` y 1 en
+`[0, 0.6, 0.95]`.
+
+| input | regla | fuente |
+|---|---|---|
+| `breakpoints` | Con `0` en la lista, la hoja **se cierra deslizando**. Sin `0`, no se cierra con el dedo (solo por código o backdrop). | componente |
+| `initialBreakpoint` | Tiene que estar en `breakpoints`. | componente |
+| `backdropBreakpoint` | `0` = fondo apagado desde que abre. `1` = **nunca hay backdrop**: el mapa de atrás se toca siempre. | componente |
+| tope en las hojas de lectura | `0.92`, no `1`: deja ver arriba un borde de la pantalla de atrás, que es lo que dice «esto es una hoja». | propuesta |
+| `showHandle` | Déjalo en `true` siempre que la hoja se arrastre. Hoy nadie lo apaga. | propuesta |
+| `fullBody` | Solo para contenido a sangre (una foto, un mapa dentro de la hoja). | canon (CLAUDE.md, 2026-07-21) |
+
+**Usos de hoy a revisar:**
+
+- `pages/customer/viaje/viaje.html:24` reabre la hoja en `(closed)` (`hojaAbierta.set(true)`)
+  para que no se pueda cerrar. Sin `0` en `breakpoints` y con `[closeOnBackdrop]="false"` ya no se
+  cierra; el reabrir sobra o tapa otro caso.
+- 2 footers de modal metidos en hojas: van sin `slot` (no hay slot de footer). Está bien, pero el
+  botón scrollea con el contenido: `pages/customer/checkout/checkout.html:490`,
+  `pages/super-admin/master-sonidos-push/master-sonidos-push.html:146`.
+
+## Tamaño en mobile y en web
+
+El sheet **no tiene `size`**. Mide lo que mide su contenido, con tope en el breakpoint más alto
+(y nunca más que la pantalla menos el safe-area de arriba y 16 px).
+
+| | mobile | web desktop | fuente |
+|---|---|---|---|
+| ancho | toda la pantalla menos 8 px a cada lado | **igual: todo el ancho menos 8 px** | componente |
+| esquinas | iOS 36 arriba / 54 abajo · Android 20 | igual | canon (CLAUDE.md, 2026-07-22) |
+| padding del body | `0 20px 20px` | igual | canon (CLAUDE.md, 2026-07-21) |
+| ancho en desktop | — | acotarlo a una columna centrada de 560 px | propuesta (hoy lo hace cada pantalla a mano) |
+
+**El sheet no se acota en desktop.** La app lo arregla con CSS propio, cinco reglas en cuatro archivos:
+`components/store-ratings-modal/store-ratings-modal.scss:81`,
+`pages/driver/movimientos/movimientos-sheet.scss:24`,
+`pages/driver/driver-order-detail/driver-order-detail.scss:1028` y
+`pages/customer/order-tracking/order-tracking.scss:1175` y `:1238`, todos a 560 px. Propuesta:
+que el DS traiga ese tope (`max-width` desde 768 px, centrado) y se borren esos parches.
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `open` · model, `[(open)]` | `boolean` | `false` |
+| `breakpoints` | `number[]` | `[0, 1]` |
+| `initialBreakpoint` | `number` | `1` |
+| `backdropBreakpoint` | `number` | `0` |
+| `showHandle` | `boolean` | `true` |
+| `closeOnBackdrop` | `boolean` | `true` |
+| `closeOnEscape` | `boolean` | `true` |
+| `fullBody` | `boolean` | `false` |
+
+| output | payload |
+|---|---|
+| `closed` | `void` |
+| `breakpointChange` | `number` |
+<!-- api:fin -->
+
+Métodos públicos: `setCurrentBreakpoint(bp, animated = true)` (avisa por consola y no hace nada
+si `bp` no está en `breakpoints`) y `close()`.
+
+Signals públicas: `currentBreakpoint` y `progress` (cambian al soltar, no durante el arrastre) y
+`dragging`.
+
+Slot: un solo `<ng-content>`, el body. No hay header ni footer.
+
+## Trampas
+
+- **El padding del body es fuente única** (`0 20px 20px`). No le pongas padding lateral ni abajo
+  a tus secciones ni lo pises con `::ng-deep .sui-sheet__body`: el margen queda doble (pasó en el
+  tracking del repartidor: ~36 px a los lados y ~68 px bajo el último botón).
+- **Anidar radios**: el body ya cumple `exterior = interior + padding` (36 − 20 = 16, el radio de
+  `sui-card`). Una card adentro no necesita otro radio.
+- **`breakpointChange` y `progress` no cambian durante el arrastre**, solo al soltar. Si algo
+  tiene que seguir al dedo (el padding del mapa), usa `breakpointChange` y acepta el salto, o lee
+  la posición del panel.
+- **Arrastre y scroll**: en la altura máxima el body scrollea; desde arriba del todo, jalar hacia
+  abajo mueve la hoja. En alturas intermedias el body entero arrastra (`touch-action: none`): un
+  carrusel o un slider dentro puede pelear con el gesto. Los campos (`input`, `textarea`,
+  `select`) no arrancan arrastre; para otro control que necesita el dedo, ponle el atributo
+  `data-sui-no-sheet-drag` (o a un ancestro).
+- **Sin `0` en `breakpoints` no se cierra deslizando.** Si quieres que se cierre y no lo hace, es
+  eso.
+- **`closeOnBackdrop` solo actúa cuando hay backdrop** (altura actual por encima de
+  `backdropBreakpoint`). Con `backdropBreakpoint` en `1` nunca hay.
+- **El transform es tuyo, el movimiento no**: el sheet se mueve con la propiedad `translate` del
+  panel interno, así que puedes escribir `left` / `right` / `transform` sobre `.sui-sheet` (por
+  ejemplo para centrarlo en desktop) sin romper el arrastre.
+- Pide ocultar la barra inferior de la app por `SUI_NAVBAR_VISIBILITY`, igual que `sui-modal`.
+
+## Ejemplo
+
+```html
+<!-- Sobre un mapa: no se cierra, el mapa se usa siempre -->
+<sui-modal-sheet
+  [(open)]="hojaAbierta"
+  [breakpoints]="[0.25, 0.5, 0.7, 1]"
+  [initialBreakpoint]="0.5"
+  [backdropBreakpoint]="1"
+  (breakpointChange)="mapa.setSheetRatio($event)">
+  <h2>Tu pedido va en camino</h2>
+  …
+</sui-modal-sheet>
+
+<!-- Hoja de lectura: se cierra deslizando -->
+<sui-modal-sheet
+  [(open)]="resenasAbiertas"
+  [breakpoints]="[0, 0.92]"
+  [initialBreakpoint]="0.92"
+  [backdropBreakpoint]="0">
+  <app-ratings-detail … />
+</sui-modal-sheet>
+```

package/docs/sui-notification/README.md

@@ -101,8 +101,8 @@ La fila **no tiene `size`**: foto de 40 px, 12 px de relleno, texto de 14.
 | uso | mobile | web | fuente |
 |---|---|---|---|
 | la fila | toda la fila se toca para abrirla: mide 64 px o más | igual | según el componente |
-| ⋮ (`showMore`) | no aplica: aparece con el mouse | 24 px | según el componente |
-| la X (`dismissible`) | se ve de 20 px; **se toca en 40 × 40** | igual | canon (aprobado por el dueño, 03-10-2026): área táctil invisible, extensión SUI |
+| ⋮ (`showMore`) | se ve de 24 y se toca en 44 × 44 cuando está visible (foco o fila activa); oculto no recibe toques | 24 px | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono |
+| la X (`dismissible`) | se ve de 20 px; **se toca en 44 × 44** | se ve de 20; se toca en 40 × 40 | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono (antes 40, pedido del dueño 03-10-2026): área táctil invisible, extensión SUI |
 | botones de `type="button"` | los pone quien la usa: `[size]="bp.isMobile() ? 'large' : 'xsmall'"` | `xsmall` | propuesta |
 
 ## «No usar»: por qué no hoy y cuándo sí
@@ -147,9 +147,9 @@ Slots: `[slot=company-logo]`, `[slot=file]`, `[slot=message]`, el contenido libr
 
 ## Trampas
 
-- **La X se toca en 40 × 40** aunque se vea de 20 (un `::before` invisible sobre su `<button>`,
-  desde 03-10-2026): en una fila que se toca entera, el toque a 10 px de la X la cierra en vez de
-  abrirla.
+- **La X se toca en 44 × 44 en el teléfono** (40 × 40 en web) aunque se vea de 20 (un `::before`
+  invisible sobre su `<button>`; 44 desde el 04-10-2026): en una fila que se toca entera, el toque a
+  12 px de la X la cierra en vez de abrirla. La X y el ⋮ comparten la esquina: no se usan juntos.
 - **Es el avatar el que decide el modelo**: con `avatar` es una fila plana (`role="article"`); sin
   `avatar` es un alert con borde y sombra (`role="status"`, que el lector de pantalla anuncia).
 - **El avatar no es `sui-avatar`**: lo dibuja la fila, en un círculo **negro** con iniciales.
@@ -161,7 +161,9 @@ Slots: `[slot=company-logo]`, `[slot=file]`, `[slot=message]`, el contenido libr
 - `feature` usa `sparkling-fill` aquí y en el alert, y `magic-fill` en el banner.
 - `dismissible` solo emite `(dismissed)`: la fila **no se esconde sola** (a diferencia de alert y
   banner). La saca quien la usa.
-- El ⋮ de `showMore` se ve solo con el mouse encima o con `active`: en mobile no aparece.
+- El ⋮ de `showMore` se ve solo con el mouse encima, con `active` o cuando le llega el foco de
+  teclado: en mobile no aparece. **Mientras está oculto no recibe toques** (desde el 04-10-2026;
+  antes un toque en la esquina disparaba `moreClicked` sin que se viera nada).
 - **`showMore` y `dismissible` juntos se pisan**: el ⋮ y la X van los dos arriba a la derecha.
 - Con avatar (o con `type` distinto de `basic`) y **sin `description`**, queda un «∙» colgando
   después de la hora («Hace 8 min ∙»).

package/docs/sui-notification-footer/README.md

@@ -44,7 +44,7 @@ la barra superior, con filas `sui-notification` y la cabecera `sui-notification-
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| el pie entero | no aplica: es ayuda de teclado; en mobile no se muestra | unos 48 px de alto | propuesta |
+| el pie entero | no aplica: es ayuda de teclado; en mobile no se muestra (el componente no se oculta solo: lo esconde quien lo usa) | 48 px de alto (14 + 20 de la tecla + 14) | alto: según el componente · ocultarlo en mobile: propuesta |
 | el link de ajustes | si hiciera falta, un `sui-link-button` `large` suelto | `small` (16 px) | propuesta |
 
 ```html
@@ -59,7 +59,7 @@ la barra superior, con filas `sui-notification` y la cabecera `sui-notification-
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
 |---|---|---|
 | el componente | no hay panel de campana | si el panel del local o el super admin suman una campana con la bandeja desplegable en la barra superior (web) |
-| `manage` con el texto por defecto | está en inglés | nunca: siempre un texto propio |
+| `manage` con el texto por defecto | ya está en español («Administrar notificaciones», 03-10-2026), pero el link debe nombrar la pantalla a la que lleva | nunca: siempre un texto propio |
 
 ## API
 

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

@@ -44,8 +44,8 @@ texto) y el filtro es un compact-button de 24 px.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| las pestañas | **no alcanza**: 20 px de alto para el dedo. Usar `sui-tab-chips` | 20 px de alto, en una fila de 48 | sin tamaño suficiente (no se cambia aquí) |
-| el filtro | 24 px, **bajo el mínimo de 32 px** en mobile | 24 px | sin tamaño suficiente |
+| las pestañas | **no alcanza**: 20 px de alto (el `line-height` del texto; el botón no tiene relleno), lejos de los 44 del dedo. Usar `sui-tab-chips` | 20 px de alto, en una fila de 48 | según el componente |
+| el filtro | 24 px (compact-button `large`), **bajo los 44 px del dedo** | 24 px | según el componente |
 
 ```html
 @if (bp.isMobile()) {
@@ -97,7 +97,9 @@ interface SuiNotificationTab<T = string> {
 - La raya de la pestaña activa usa el primario de la app (naranja), no el azul del Figma.
 - El badge no tiene tope: 120 sale «120». Si hace falta, el texto lo recorta quien lo usa («99+» va
   en `label`, no en `badge`, porque `badge` es un número).
-- El host lleva `role="tablist"` y cada pestaña `role="tab"` con `aria-selected`; no hay panel `tabpanel` asociado: lo arma quien lo usa.
+- Las pestañas van en su propio `role="tablist"` (el botón de filtro queda afuera, desde el
+  04-10-2026) y cada una es `role="tab"` con `aria-selected`. Un solo tab stop: ← → mueven y
+  activan con vuelta al inicio, Home/End a los extremos. No hay `tabpanel` asociado: lo arma quien lo usa.
 
 ## Ejemplo
 

package/docs/sui-page-header/README.md

@@ -0,0 +1,123 @@
+---
+name: sui-page-header
+selector: sui-page-header
+resumen: Título y subtítulo de una pantalla, con las acciones de la pantalla a la derecha en desktop y debajo en mobile
+alternativas: [sui-modal-header (cabecera de un modal), sui-drawer-header (cabecera de un panel lateral), sui-topbar (barra superior de la app, no de la pantalla)]
+---
+
+# sui-page-header
+
+Story: [Organisms/Page Header](https://sui-design-system.web.app/?path=/docs/organisms-page-header--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** una vez por pantalla, **arriba del todo**, antes de cualquier contenido: dice dónde
+está la persona («Pedidos», «Descuentos») y, si hace falta, junta las acciones que valen para
+toda la pantalla («Agregar», «Exportar»).
+
+**No lo uses** para:
+
+- Títulos de sección dentro de la pantalla: un `<h2>` con el token de tipografía, o el título de
+  la `sui-card`.
+- Modales y paneles: `sui-modal-header` / `sui-drawer-header`.
+- Meter contenido debajo del título: **solo** acepta `slot="actions"`; todo lo demás se descarta
+  sin avisar.
+- Re-implementarlo con un `<h1>` y CSS propio (canon, CANON-SUI §0: «no re-implementar»).
+
+## Qué variante usar
+
+> **No está en la guía del DS: es extensión de SUI.** Nació como el título de las pantallas del
+> panel de empresa y no tiene Figma. Lo marcado **canon** sale de `master-pedidos/docs/CANON-SUI.md`;
+> lo demás es **propuesta**.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app`: 64 page headers, sin contar prototipos ni
+> vitrinas (`master-preview`, `master-prototipos`, `mockup-sheets-*`, `dx/*`, `master-rutina`,
+> `master-medico`, `dev-index`) ni las copias de `components/sui/`. 50 llevan `subtitle` fijo, 14
+> calculado; 17 tienen acciones; 0 usan `sticky`.
+
+### Lo que sí dice la guía del DS
+
+Nada: el page header no está en la guía. Su tipografía (24/600, 28 en desktop) **no existe en la
+escala del DS** (CANON-SUI §7): si se homologa, sería `title-h5`.
+
+### Contenido
+
+| pieza | regla | ejemplo real de la app | fuente |
+|---|---|---|---|
+| `title` | El nombre de la pantalla, el mismo que en el menú. Sentence case, sin punto. Nunca un ID. | `pages/discounts/discounts.html:2` | canon (CANON-SUI, copy) |
+| `subtitle` | Una línea que dice **qué se hace aquí**, no que repite el título. | `pages/super-admin/master-orders/master-orders.html:1` | propuesta |
+| acciones | Las que valen para toda la pantalla: una `filled` como máximo (la principal) y el resto `stroke`. Hoy: 9 `filled`, 7 `stroke`. | `pages/drivers/drivers.html:2` | canon para «una principal» (CANON-SUI §6.2), propuesta el resto |
+
+**Usos de hoy que rompen el copy canon** (sentence case en botones): `pages/drivers/drivers.html:8`
+(«Nuevo Repartidor»).
+
+### `sticky`
+
+| valor | cuándo | fuente |
+|---|---|---|
+| `false` (default) | el caso normal: el título se va con el scroll | propuesta |
+| `true` | listas largas donde las acciones del header se usan mientras se recorre (filtros, «Agregar»). Le pone fondo blanco. 0 usos hoy | propuesta |
+
+## Tamaño en mobile y en web
+
+El page header **no tiene `size`**. Cambia solo en 767 px:
+
+| | mobile (< 767 px) | web (≥ 767 px) | fuente |
+|---|---|---|---|
+| título | 24 px | 28 px | componente |
+| disposición | título y subtítulo arriba, acciones **debajo** | título a la izquierda, acciones a la derecha, alineadas abajo | componente |
+| padding vertical | 24 arriba y abajo | 32 arriba, 16 abajo | componente |
+| padding lateral | ninguno: lo pone el contenedor del layout | igual | componente |
+| botones de las acciones | `large` (48) | `small` (36) | propuesta |
+
+Los botones de las acciones hoy: 10 `small` fijos, 2 `bp.isMobile() ? 'large' : 'small'`, 2
+`bp.controlSize()` (`large`/`xlarge`), 2 `large`, 1 `medium`. La propuesta es la pareja que ya
+usan dos pantallas: en mobile las acciones bajan a su fila y tienen sitio para 48 px; en desktop
+van al lado del título de 28 y `small` no le compite.
+
+```html
+<sui-button [size]="bp.isMobile() ? 'large' : 'small'" slot="actions">Agregar</sui-button>
+```
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `title` | `string` | — (requerido) |
+| `subtitle` | `string \| null` | `null` |
+| `sticky` | `boolean` | `false` |
+
+Outputs: ninguno.
+<!-- api:fin -->
+
+Slot: `slot="actions"`, a la derecha (desktop) o debajo (mobile), gap 8. No hay slot default.
+
+## Trampas
+
+- **Lo que proyectas sin `slot="actions"` desaparece.** El JSDoc viejo hablaba de un slot
+  default; no existe.
+- **No respeta el safe-area de arriba**: el padding es fijo. El layout de la pantalla se encarga
+  del notch; si lo pones en una pantalla sin layout, el título queda bajo la barra de estado.
+- **Sin padding lateral**: depende de que el contenedor de la página lo tenga
+  (`.layout__body`, `.ml__content`). Fuera de esos layouts queda pegado al borde.
+- `sticky` se pega a `top: 0` del **contenedor que scrollea**, no de la ventana. En los layouts de
+  la app el scroll vive en `.layout__body` / `.ml__content`, así que funciona; en un contenedor
+  sin overflow no hace nada.
+- El breakpoint es `min-width: 767px`: a 767 px exactos ya está en modo desktop, un píxel antes
+  que el `max-width: 767px` de los mixins de la app.
+- `title` es requerido: sin él, Angular falla al compilar la plantilla.
+- El host borra el atributo `title` nativo (sin tooltip gris del navegador).
+
+## Ejemplo
+
+```html
+<sui-page-header title="Descuentos" subtitle="Promociones y campañas activas de tu negocio.">
+  <sui-button slot="actions" variant="filled"
+    [size]="bp.isMobile() ? 'large' : 'small'" (click)="crear()">
+    Crear descuento
+  </sui-button>
+</sui-page-header>
+```

package/docs/sui-pagination/README.md

@@ -18,7 +18,8 @@ página.
 **No lo uses** para:
 
 - **Mobile**: las listas se recorren con el dedo. Va scroll infinito (la directiva
-  `appInfiniteScroll` que ya usan productos, clientes y equipo).
+  `appInfiniteScroll` que ya usan productos, clientes, el historial del repartidor y del cliente,
+  usuarios del super admin y las listas de la central).
 - **Listas que se leen de Firestore por cursor** (`getCollectionPage`): con cursores solo se puede
   pedir la página siguiente. Saltar a la página 7 obliga a leer las 6 anteriores, y Firestore las
   cobra igual. El canon de la app para esas listas es scroll infinito (CLAUDE.md, «Performance —
@@ -36,8 +37,10 @@ Regla corta: **tabla con todo cargado en web → pagination · lista de Firestor
 > cuándo cada forma.
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-badge`): **0 usos**.
-> Las 3 listas largas de la app (`pages/products/products.html:242`, `pages/customers/customers.html:161`,
-> `pages/settings/team/team.ts:347`) usan scroll infinito.
+> Las listas largas de la app usan scroll infinito con `appInfiniteScroll` (por ejemplo
+> `pages/products/products.html:242` y `pages/customers/customers.html:161`). Equipo
+> (`pages/settings/team/team.ts:339`) pagina por cursor con `loadMore()`, pero hoy nada lo llama
+> (medido el 04-10-2026).
 
 ### `type`
 
@@ -63,7 +66,7 @@ Regla corta: **tabla con todo cargado en web → pagination · lista de Firestor
 | `firstLast` | `true` | Más de 20 páginas, donde ir al final es un caso de uso (la última semana de un export). | según la guía del DS (los botones existen); el cuándo es propuesta |
 | `siblingCount` | `1` (default) | Siempre. Más números a cada lado ensanchan sin ayudar. | propuesta, falta aprobación |
 | `showInfo` | `true` (default) | Con `infoFormat="items"`: «Mostrando 11-20 de 134». | propuesta, falta aprobación |
-| `infoFormat` | `'items'` (default) | El único en español. | según el código |
+| `infoFormat` | `'items'` (default) | «Mostrando 11-20 de 134». | según el código |
 | `infoFormat` | `'pages'` | Imprime «Página 2 de 14» (en español desde 03-10-2026). Cuando no se sabe el total de ítems o no importa. | propuesta, falta aprobación |
 | `pageSizeOptions` | `[]` (default) | Lo normal: sin selector de filas por página. | propuesta, falta aprobación |
 | `pageSizeOptions` | `[10, 25, 50]` | Las opciones dicen «10 / página» (en español desde 03-10-2026). | propuesta, falta aprobación |
@@ -92,7 +95,7 @@ mobile no se usa.
 |---|---|---|
 | el componente entero | las listas de la app leen de Firestore por cursor y usan scroll infinito | una tabla de web con todos los datos ya cargados (un reporte de 300 filas filtrado en el navegador) |
 | `full-radius` | no combina con las esquinas del resto de la app | nunca, salvo que la app pase a botones redondos |
-| `infoFormat="pages"` | sale en inglés | cuando el DS lo traduzca («Página 2 de 14») |
+| `infoFormat="pages"` | la razón original (salía en inglés) ya no aplica: desde el 03-10-2026 dice «Página 2 de 14» | cuando no se sabe el total de ítems o no importa |
 | `firstLast` | ninguna tabla tiene 20+ páginas | un export largo donde ir al final es habitual |
 
 ## API

package/docs/sui-password-strength/README.md

@@ -18,7 +18,7 @@ la barra se llena (rojo, naranja, verde) y cada condición se marca a medida que
 
 - El login: la contraseña ya existe, no se evalúa.
 - Una sola regla («Mínimo 6 caracteres»): alcanza el `hint` del `sui-input`, como hoy en
-  `pages/auth/register/register.html:121`.
+  `pages/auth/register/register.html:124`.
 
 Regla corta: **contraseña nueva con 2+ reglas → este · una regla → hint.**
 

package/docs/sui-period-range/README.md

@@ -2,7 +2,7 @@
 name: sui-period-range
 selector: sui-period-range
 resumen: Un período predefinido (Hoy, Últimos 7 días) en la columna de presets del calendario de rango
-alternativas: [sui-datepicker mode="range" (ya los trae), sui-tab-chips (períodos fijos a la vista: super admin, ganancias del repartidor), sui-select (períodos fijos en poco espacio: resumen del local)]
+alternativas: [sui-datepicker mode="range" (ya los trae), sui-segmented-control (2 a 4 períodos fijos a la vista), sui-tab-chips (5 o más períodos fijos o que deslizan)]
 ---
 
 # sui-period-range
@@ -18,9 +18,10 @@ costado del calendario.
 
 - El rango normal: `sui-datepicker mode="range"` ya pinta los presets con este componente y los
   cambia por `[presets]`.
-- **Cambiar de período en un resumen** («Hoy · 7 días · 30 días»): `sui-tab-chips`, como hoy en
-  el super admin (`master-overview.html:13`) y en las ganancias del repartidor; o `sui-select`,
-  como el resumen del local (`overview.html:46`).
+- **Cambiar de período en un resumen** («Hoy · 7 días · 30 días»): `sui-segmented-control` si son 2
+  a 4 opciones, `sui-tab-chips` si son 5 o más o se deslizan (canon, dueño 04-10-2026). Hoy la app
+  los tiene en `sui-tab-chips` (super admin `master-overview.html:13`, ganancias del repartidor) y
+  en `sui-select` (resumen del local, `overview.html:44`): con 3 opciones pasan a segmented.
 
 ## Qué variante usar
 
@@ -40,26 +41,28 @@ Usos de hoy que rompen la regla: **0**.
 
 ## Tamaño en mobile y en web
 
-**No tiene `size`.** Mide 168 × 36: en mobile **no llega** a los 44 px. En el datepicker, en
-mobile, los presets pasan a una fila que se desplaza de costado.
+Tiene `size`: **`medium`** (default, 168 × 36, Figma) y **`large`** (168 × 44, texto 16/24). El
+`sui-datepicker` `xlarge` pinta sus rangos predefinidos en `large`; en mobile pasan a una fila que
+se desplaza de costado.
 
-| uso | mobile | web | fuente |
-|---|---|---|---|
-| preset de un rango | 36 px de alto — **no llega** | 168 × 36 | medido |
+| size | alto | texto | uso | fuente |
+|---|---|---|---|---|
+| `large` | **44** (10 + 24 + 10) | 16/24 | mobile | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono |
+| `medium` (default) | 36 | 14/20 | web, columna de presets | medido (Figma 443:341) |
 
 ```html
-<!-- Web: columna de presets -->
-<sui-period-range label="Últimos 7 días" [active]="preset() === '7d'" (clicked)="aplicar('7d')" />
+<sui-period-range [size]="bp.isMobile() ? 'large' : 'medium'" label="Últimos 7 días"
+                  [active]="preset() === '7d'" (clicked)="aplicar('7d')" />
 ```
 
-**Sin tamaño suficiente para mobile.** En el celular, los períodos fijos van en `sui-tab-chips`,
-como ya hacen el super admin y las ganancias del repartidor.
+Fuera del datepicker, en el celular los períodos fijos de 2 a 4 opciones van en
+`sui-segmented-control` y los de más opciones en `sui-tab-chips` (canon del dueño, 04-10-2026).
 
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
 |---|---|---|
-| todo el componente suelto (0 usos) | los períodos de la app son fijos y van en tab-chips o select | una columna de atajos al lado de un calendario propio, en web |
+| todo el componente suelto (0 usos) | los períodos de la app son fijos y van en segmented-control (2-4) o tab-chips (5+) | una columna de atajos al lado de un calendario propio, en web |
 | `disabled` | ningún período queda sin datos hoy | presets de un local nuevo («Últimos 12 meses» con 2 semanas de vida) |
 
 ## API
@@ -72,6 +75,7 @@ como ya hacen el super admin y las ganancias del repartidor.
 | `label` | `string` | — (requerido) |
 | `active` | `boolean` | `false` |
 | `disabled` | `boolean` | `false` |
+| `size` | `'medium' \| 'large'` | `'medium'` |
 
 | output | payload |
 |---|---|

package/docs/sui-popover/README.md

@@ -57,8 +57,8 @@ una función nueva que conviene mostrar donde está («Aquí programas tus pedid
 |---|---|---|---|
 | `doubleButton` | `true` (default) | Desde el segundo paso de un recorrido («Atrás» / «Siguiente»), o un aviso suelto con «Ahora no» / «Probar». | propuesta |
 | `doubleButton` | `false` | El primer paso de un recorrido o un aviso suelto con una sola salida («Entendido»). | propuesta |
-| `backLabel` · `nextLabel` | texto en español | Los defaults ya son «Atrás» y «Siguiente» (03-10-2026); el último paso pasa `nextLabel="Listo"`. | canon (copy de la app: tuteo, sentence case) |
-| orden | secundario a la izquierda, primario a la derecha | Ya lo hace el componente (stroke neutral + filled primary), igual que `sui-modal-footer`. | canon (orden de botones de la app) |
+| `backLabel` · `nextLabel` | texto en español | Los defaults ya son «Atrás» y «Siguiente» (03-10-2026); el último paso pasa `nextLabel="Listo"`. | canon (CANON-SUI §5.1 y §5.3: sentence case, tuteo) |
+| orden | secundario a la izquierda, primario a la derecha | Ya lo hace el componente (stroke neutral + filled primary), igual que `sui-modal-footer`. | canon (CLAUDE.md, «Botones — composición y orden») |
 | `step` | `{ current, total }` | Con `stepper`. Sin `step`, el componente asume **1 de 4**. | propuesta |
 
 ### Flecha, ícono, texto y cierre
@@ -73,7 +73,7 @@ una función nueva que conviene mostrar donde está («Aquí programas tus pedid
 | `position` | `*-left` · `*-center` · `*-right` | Alinea la flecha con el elemento cuando el popover no puede centrarse sobre él (está cerca de un borde). | propuesta |
 | `icon` | el de lo que se explica | Siempre uno que diga el tema (`calendar-schedule-line` para programar). El default es un ícono de persona. | propuesta |
 | `icon` | `null` | Cuando el texto ya basta y el ícono sería decoración. | propuesta |
-| `title` | frase corta | Qué es, en sentence case y sin punto final. | canon (copy de la app) |
+| `title` | frase corta | Qué es, en sentence case y sin punto final. | canon (CANON-SUI §5.1 y §5.2) |
 | `description` | una o dos frases | Qué hace o por qué importa. | propuesta |
 | `dismissIcon` | `true` (default) | Siempre: un recorrido se puede saltar. | propuesta |
 | `dismissIcon` | `false` | No usar hoy. **Cuándo sí:** un paso que no se puede saltar porque sin él no funciona lo siguiente. | propuesta |
@@ -88,20 +88,24 @@ cada lado; en uno más angosto se sale. El `size` cambia **los botones del pie**
 |---|---|---|
 | `small` (default) | 36 px (`sui-button` `small`) | Figma |
 | `medium` | 40 px (`sui-button` `medium`) | canon (aprobado por el dueño, 03-10-2026): extensión SUI |
+| `large` | 48 px (`sui-button` `large`) | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono. Size nuevo del 04-10-2026 |
 
-La X se ve de 24 y **se toca en 40 × 40** en los dos (un `::before` invisible sobre su botón,
+La X se ve de 24 y **se toca en 40 × 40** en todos (un `::before` invisible sobre su botón,
 extensión SUI 03-10-2026).
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
 | el panel | 320 px (cabe desde 352 px de pantalla) | 320 px | según el componente |
-| botones del pie | `medium` (40) | `small` (36) | propuesta: el tamaño es extensión SUI aprobada (03-10-2026); el «cuándo» falta aprobarlo |
+| botones del pie | `large` (48) | `small` (36) | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono |
 | la X | se ve de 24, se toca en 40 | igual | canon (aprobado por el dueño, 03-10-2026) |
 
 ```html
-<sui-popover footer="stretch" [size]="bp.isMobile() ? 'medium' : 'small'" … />
+<sui-popover footer="stretch" [size]="bp.isMobile() ? 'large' : 'small'" … />
 ```
 
+`large` es el siguiente de la escala del `sui-button` (48, el del footer de los modales). `medium`
+(40) queda para quien ya lo usa: no llega al piso de 44.
+
 En mobile, si el recorrido es la bienvenida de la app, conviene una pantalla o un
 `sui-modal-sheet` por paso en vez del popover (propuesta, falta aprobación).
 
@@ -135,7 +139,7 @@ Hoy el popover entero tiene **0 usos**; esto es lo que no se usaría aunque lleg
 | `nextLabel` | `string` | `'Siguiente'` |
 | `doubleButton` | `boolean` | `true` |
 | `step` | `{ current: number; total: number } \| null` | `null` |
-| `size` | `'small' \| 'medium'` | `'small'` |
+| `size` | `'small' \| 'medium' \| 'large'` | `'small'` |
 
 | output | payload |
 |---|---|
@@ -152,6 +156,8 @@ Slot: `[data-slot=body]` reemplaza título y descripción.
   «Paso X de N» (este último no se puede cambiar).
 - **El ícono por defecto es una persona** (`user-6-line`). Si no quieres ícono, `[icon]="null"`.
 - **`step` vacío = 1 de 4**: con `stepper` o `text-stepper`, pásalo siempre.
+- Con `stepper`, los puntos se leen como «Paso X de N» (`role="img"` con `aria-label`, desde el
+  04-10-2026; antes eran `aria-hidden` y el lector no sabía en qué paso iba).
 - **No se posiciona solo**: `position` cambia dónde sale la flecha, no dónde aparece el panel.
   Tampoco se cierra al tocar afuera ni con Escape; cierra quien escucha `(dismissed)`.
 - `position` se lee «borde de la flecha, luego su lugar»: `top-left` es flecha **arriba a la

package/docs/sui-product-card/README.md

@@ -32,7 +32,7 @@ Regla corta: **producto en la grilla de la carta → product-card · producto en
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-card`): **3
 > product-cards en 2 archivos**: la carta del cliente
-> (`pages/customer/restaurant-menu/restaurant-menu.html:324` y `:387`) y la grilla del local
+> (`pages/customer/restaurant-menu/restaurant-menu.html:323` y `:386`) y la grilla del local
 > (`pages/products/products.html:145`, con `action="edit"`).
 
 ### Las piezas
@@ -54,9 +54,10 @@ Regla corta: **producto en la grilla de la carta → product-card · producto en
 
 Outputs: `openDetail` (toque en la card), `add`, `increment`, `decrement`, `edit`.
 
-**Usos de hoy que rompen las reglas:** 0. **Falta en el DS:** el precio tachado y la chapa de
-descuento. La carta los dibuja afuera (`pages/customer/restaurant-menu/restaurant-menu.scss:426`,
-deuda anotada): cuando se pueda publicar, va un input `precioLista`.
+**Usos de hoy que rompen las reglas:** 0. **Pendiente de migrar:** el precio tachado y la chapa de
+descuento ya existen en el DS (`precioLista`, ver «Precio con descuento»), pero la carta los sigue
+dibujando afuera (`pages/customer/restaurant-menu/restaurant-menu.scss:426`, deuda anotada) y
+ninguna de las 3 cards pasa `precioLista` ni `size`.
 
 ## Tamaño en mobile y en web
 
@@ -67,20 +68,23 @@ El ancho lo da la grilla y la card llena su celda. El `size` cambia **los botone
 |---|---|---|---|---|
 | `small` (default) | 36 × 36 | 34 × 36 | 18 / 16 | lo que había en el DS |
 | `medium` | 40 × 40 | 40 × 40 (pill de 104) | 20 | canon (aprobado por el dueño, 03-10-2026): extensión SUI |
+| `large` | 44 × 44 | 44 × 44 (pill de 112) | 20 | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono. Size nuevo del 04-10-2026 |
 
-En `medium` el stepper (104 px) no entra al lado del precio en la grilla de 2 columnas de mobile:
-el pie envuelve y el stepper baja a su propia línea, a la derecha. El «+» y el lápiz sí siguen al
-lado del precio.
+En `medium` y `large` el stepper (104 / 112 px) no entra al lado del precio en la grilla de 2
+columnas de mobile: el pie envuelve y el stepper baja a su propia línea, a la derecha. El «+» y el
+lápiz sí siguen al lado del precio.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
 | grilla de la carta | 2 columnas (`1fr 1fr`, gap 12) | `repeat(auto-fill, minmax(220px, 1fr))` desde 600 px y `minmax(180px, 1fr)` en desktop | lo que hay en la app |
-| botón «+», lápiz, stepper | `medium` (40) | `small` (36) | propuesta: el tamaño es extensión SUI aprobada (03-10-2026); el «cuándo» falta aprobarlo |
+| botón «+», lápiz, stepper | `large` (44) | `small` (36) | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono |
 
 ```html
-<sui-product-card [size]="bp.isMobile() ? 'medium' : 'small'" … />
+<sui-product-card [size]="bp.isMobile() ? 'large' : 'small'" … />
 ```
 
+`medium` (40) queda para quien ya lo usa: no llega al piso de 44 del teléfono.
+
 ## Precio con descuento
 
 `precioLista` es el precio de referencia. Si es **mayor** que `price`, la card pinta el precio en
@@ -116,7 +120,7 @@ por `::after` y chapa por `::before` sobre `.product__price`), que se borra al m
 | `unavailableLabel` | `string` | `'Agotado'` |
 | `action` | `'add' \| 'edit'` | `'add'` |
 | `precioLista` | `number \| null` | `null` |
-| `size` | `'small' \| 'medium'` | `'small'` |
+| `size` | `'small' \| 'medium' \| 'large'` | `'small'` |
 
 | output | payload |
 |---|---|