@ajuarezso/sui-design-system 0.21.0 → 0.23.0

package/docs/sui-empty-state/README.md

@@ -28,40 +28,30 @@ algo que avisar → alert.**
 ## Qué variante usar
 
 > **La guía del DS no tiene página del empty state.** El componente de SUI se construyó a
-> propósito con Fluent Emoji animados en vez de ilustraciones: es una decisión del proyecto
-> (memoria «emojis animados en empty states», 17-04-2026).
+> propósito con Fluent Emoji animados en vez de ilustraciones: es una decisión del proyecto, escrita
+> en CANON-SUI §5.6 (ilustración = Fluent Emoji animado, default el zorro).
 >
-> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-card`): **66
-> empty-states en 40 archivos**. 25 con `action` (10 con `route`). 4 con `emoji` propio, 22 con la
-> URL del zorro pegada a mano (que ya es el default) y 40 sin `emoji`. 29 con un atributo `icon`
-> que el componente no tiene.
+> Uso medido el 04-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-card`): **66
+> empty-states en 40 archivos**. 29 con `action` (10 con `route`). 8 con `emoji` propio y 58 sin
+> `emoji` (sale el zorro). 0 con `icon`, 0 con la URL del zorro pegada, 0 con `size`.
 
 ### Las piezas
 
 | prop | cuándo | fuente |
 |---|---|---|
-| `emoji` vacío (default: el zorro) | Lo normal. El zorro es la mascota de los empty states y sale solo: **no pegues su URL**. | canon (memoria del proyecto) |
-| `emoji` propio | Cuando el emoji dice algo del caso: el reloj de arena en «Aún no tienes facturas» (se está esperando algo), el chef en los avisos del local. Siempre de `FLUENT_EMOJI_ANIM` (`core/fluent-emoji.ts`) o de `assets/emoji-anim/`. | canon (memoria del proyecto) |
-| `title` (obligatorio) | Qué pasa, en corto y sin punto: «Tu carrito está vacío», «Sin pedidos aún». En una búsqueda, repite lo buscado: «Nada con “pollo broaster”». | propuesta (práctica de la app) |
-| `subtitle` | Qué va a pasar o qué puede hacer la persona: «Cuando hagas tu primer pedido, aparecerá aquí.» | propuesta |
+| `emoji` vacío (default: el zorro) | Lo normal. El zorro es la mascota de los empty states y sale solo: **no pegues su URL**. | canon (CANON-SUI §5.6) |
+| `emoji` propio | Cuando el emoji dice algo del caso: el reloj de arena en «Aún no tienes facturas» (se está esperando algo), el chef en los avisos del local. Siempre de `FLUENT_EMOJI_ANIM` (`core/fluent-emoji.ts`) o de `assets/emoji-anim/`. | canon (CANON-SUI §5.6: Fluent Emoji animado) |
+| `title` (obligatorio) | Qué pasa, sin punto y en 2 a 4 palabras, con uno de tres patrones: «Todavía no hay <cosa>», «Sin <cosa>», «Tu <cosa> está vacío» («Tu carrito está vacío», «Sin pedidos aún»). En una búsqueda, repetir lo buscado («Nada con “pollo broaster”») queda fuera de esos patrones. | canon (CANON-SUI §5.6) · lo de la búsqueda: propuesta, falta aprobación |
+| `subtitle` | Una oración con punto, en futuro tranquilizador: «Cuando hagas tu primer pedido, aparecerá aquí.» | canon (CANON-SUI §5.6) |
 | `action` como string + `(actionClicked)` | La salida es algo de esta misma pantalla: «Reintentar», «Ver todo el catálogo», «Activar captura». | propuesta |
 | `action` como `{ label, route }` | La salida es otra pantalla: «Ver negocios» → `/cliente/inicio`. | propuesta |
 | sin `action` | No hay un paso obvio, o la pantalla ya tiene el botón para llenarla (el «Nuevo local» de arriba). | propuesta |
 | error de carga | Siempre con `action="Reintentar"`. Excepción: la pantalla reintenta sola y lo dice («Seguimos intentando»). | propuesta |
 
-**Usos de hoy que rompen las reglas:**
-
-- **29 con `icon="…"`**: `icon` no es un input, el atributo no hace nada. Ejemplos:
-  `pages/customer/cart/cart.html:18`, `pages/drivers/drivers.html:87`,
-  `pages/customer/order-history/order-history.html:20`. Se borra.
-- **22 con la URL del zorro pegada** (`emoji="…/Animals/Fox.png"`), que ya es el default:
-  `pages/customers/customers.html:65`, `pages/products/products.html:113`,
-  `pages/locations/locations.html:16`. Se borra.
-- **4 errores de carga sin «Reintentar»**:
-  `pages/driver/driver-dashboard/driver-dashboard.html:1071`,
-  `pages/customer/order-history/order-history.html:20`,
-  `pages/super-admin/master-drivers/master-drivers.html:524` y `:754`.
-  (`pages/public/pedido-en-vivo/pedido-en-vivo.html:50` no cuenta: reintenta solo.)
+**Usos de hoy que rompen las reglas:** 0. Los 29 `icon="…"` (que no es un input), las 22 URL del
+zorro pegadas a mano y los 4 errores de carga sin «Reintentar» se corrigieron el 03-10-2026 (commit
+`461efbec` de la app). `pages/public/pedido-en-vivo/pedido-en-vivo.html:50` sigue sin «Reintentar»
+a propósito: reintenta solo y lo dice.
 
 ## Tamaño en mobile y en web
 

package/docs/sui-fancy-button/README.md

@@ -38,7 +38,7 @@ marketing: brillo arriba, borde interior claro y un anillo del color del botón.
 
 - **Para qué es**: un botón normal con un acabado más vistoso.
 - **Default**: `neutral` (negro) en la guía; **`primary` en SUI**.
-- **Tamaños**: `medium` (40), `small` (36) y `xsmall` (32). No hay más grandes.
+- **Tamaños**: `medium` (40), `small` (36) y `xsmall` (32). SUI agrega `large` (48) para el teléfono (04-10-2026).
 - **Hover**: el brillo se aclara, no se oscurece. `basic` pasa a fondo gris plano.
 - **Deshabilitado**: fondo gris plano, sin brillo, sin anillo ni sombra, igual en los cuatro tipos.
 
@@ -55,6 +55,7 @@ marketing: brillo arriba, borde interior claro y un anillo del color del botón.
 
 | size | cuándo | fuente |
 |---|---|---|
+| `large` (48) | El CTA en el teléfono. Texto 16. | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono; extensión de SUI, la guía no lo tiene |
 | `medium` (40, default) | El CTA de la landing en desktop. | escala y default según la guía del DS · cuándo: propuesta |
 | `small` (36) | Un CTA dentro de una card de la landing (la card de un plan). | escala según la guía del DS · cuándo: propuesta |
 | `xsmall` (32) | Sin caso: en una landing el CTA nunca es tan chico. | escala según la guía del DS · cuándo: propuesta |
@@ -70,27 +71,32 @@ marketing: brillo arriba, borde interior claro y un anillo del color del botón.
 
 ## Tamaño en mobile y en web
 
-En mobile se toca con el dedo: el área táctil tiene que medir **44 px o más**. En web, con mouse,
-va un tamaño más chico. La app ya lo resuelve con `BreakpointsService`
-(`src/app/services/breakpoints.service.ts`, mobile = hasta 767 px):
-`[size]="bp.isMobile() ? 'large' : 'small'"`, 27 usos hoy en `master-pedidos` (16 `large`/`small`,
-9 `large`/`medium`, 2 `medium`/`xsmall`). Regla del dueño, 03-10-2026.
+En mobile se toca con el dedo: el área táctil tiene que medir **44 px o más** (canon (dueño, 04-10-2026): piso táctil 44 en el teléfono). En web,
+con mouse, va un tamaño más chico. La app ya lo resuelve con `BreakpointsService`
+(`src/app/services/breakpoints.service.ts`, mobile = hasta 767 px).
+
+| size | alto | texto | cuándo | fuente |
+|---|---|---|---|---|
+| `large` | 48 | 16 (Label/Medium) | CTA en el teléfono | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono. Size nuevo del 04-10-2026 |
+| `medium` (default) | 40 | 14 | CTA en web | Figma |
+| `small` | 36 | 14 | CTA dentro de una card en web | Figma |
+| `xsmall` | 32 | 14 | — | Figma |
+
+**Por qué `large` = 48 y no 44**: el fancy es «el mismo botón con otro acabado» que `sui-button` y su
+escala lo espeja tal cual (medium 40 / small 36 / xsmall 32). El siguiente es `large`, y el
+`large` de sui-button mide 48: el fancy en el teléfono queda del mismo alto que el botón normal
+que va al lado. El texto sube a 16 (regla de tamaños del 03-10-2026); los íconos siguen en 20.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| CTA principal de una landing | no usar fancy: `sui-button` `large` (48) | `medium` (40) | propuesta |
-| CTA dentro de la card de un plan | no usar fancy: `sui-button` `large` | `small` (36) | propuesta |
+| CTA principal de una landing | `large` (48) | `medium` (40) | propuesta |
+| CTA dentro de la card de un plan | `large` (48) | `small` (36) | propuesta |
 
 ```html
-@if (bp.isMobile()) {
-  <sui-button size="large">Empieza gratis</sui-button>
-} @else {
-  <sui-fancy-button type="primary" size="medium">Empieza gratis</sui-fancy-button>
-}
+<sui-fancy-button type="primary" [size]="bp.isMobile() ? 'large' : 'medium'">Empieza gratis</sui-fancy-button>
 ```
 
-**El fancy no tiene un tamaño táctil**: el más grande mide 40, por debajo de 44. En mobile el CTA
-va con `sui-button` `large`. Hoy no hay usos (todo el componente está en «no usar»).
+Hoy no hay usos (todo el componente está en «no usar»).
 
 ## «No usar»: por qué no hoy y cuándo sí
 
@@ -110,7 +116,7 @@ en la columna de la derecha, se usa (aprobado por el dueño, 03-10-2026).
 | input | tipo | default |
 |---|---|---|
 | `type` | `'primary' \| 'neutral' \| 'basic' \| 'destructive'` | `'primary'` |
-| `size` | `'medium' \| 'small' \| 'xsmall'` | `'medium'` |
+| `size` | `'large' \| 'medium' \| 'small' \| 'xsmall'` | `'medium'` |
 | `leftIcon` | `string \| null` | `null` |
 | `rightIcon` | `string \| null` | `null` |
 | `disabled` | `boolean` | `false` |
@@ -132,8 +138,8 @@ El clic se escucha con `(clicked)`. Slots: `<ng-content>` (el texto).
 - **`type` es el relleno**, no el `type` HTML: ese se llama **`htmlType`**. `type="submit"` no
   compila (no es un tipo válido) y no hace un submit.
 - **El radio es 10 px, no pill.** Al lado de un `sui-button` (pill en SUI) se ven de dos familias.
-- **No hay `large` ni `xlarge`**: el más grande mide 40. En mobile, donde el CTA de la app es de
-  48, un fancy queda más bajo.
+- **`large` (48) es de SUI** (04-10-2026), no de la guía: en el teléfono va ese, del mismo alto que
+  el `large` de `sui-button`. No hay `xlarge`.
 - **El default es `primary`**; en la guía es `neutral`.
 - El anillo del `neutral` es un hex crudo (`#242628`): no hay token para ese gris.
 - Ya trae el arreglo de iOS para el `:active` pegado: no lo agregues.

package/docs/sui-file-icon/README.md

@@ -92,7 +92,7 @@ Outputs: ninguno.
 
 - **La extensión se corta a 4 letras** y va en mayúsculas: `.jpeg` → `JPEG`, `.numbers` → `NUMB`.
 - **`extension` gana sobre `filename`.**
-- **El nombre para el lector de pantalla está en inglés** («File: PDF») y no se puede cambiar.
+- El nombre para el lector de pantalla es «Archivo PDF» (en español desde el 04-10-2026) y no se puede cambiar.
 - `size` es `xsmall` o `medium`: no hay `small` ni `large`.
 
 ## Ejemplo

package/docs/sui-file-upload/README.md

@@ -132,6 +132,9 @@ en la columna de la derecha, se usa (aprobado por el dueño, 03-10-2026).
 ## Trampas
 
 - `browseLabel` dice «Buscar archivo» por defecto (antes «Browse File»).
+- **Con teclado el control es «Buscar archivo»**, no el área. Desde el 04-10-2026 el host ya no
+  es `role="button"` ni entra en el Tab (era un control con otro adentro y Enter pedía el selector
+  dos veces). Con el mouse o el dedo, tocar cualquier parte del área sigue abriendo el selector.
 - **Llena el ancho del contenedor** desde el 03-10-2026 (antes medía 400 fijo y había que forzar
   `style="width: 100%"`). Las pantallas que lo dejaban en 400 en un contenedor ancho ahora se
   estiran; para un ancho fijo, se lo pone el consumer al host.

package/docs/sui-file-upload-card/README.md

@@ -41,7 +41,7 @@ subiendo con su barra, listo, o falló con «Reintentar».
 | input | cuándo | fuente |
 |---|---|---|
 | `file` | El nombre real del archivo (`'carta-octubre.pdf'`). La extensión da el ícono y el color. | propuesta |
-| `description` | **Siempre** se pasa: el default es un texto de ejemplo («0 KB de 120 KB»). Subiendo: «1,2 MB de 3,4 MB»; listo: «3,4 MB». | propuesta |
+| `description` | **Siempre** se pasa: el default es un texto de ejemplo («0 KB de 120 KB»). Subiendo: «1.2 MB de 3.4 MB»; listo: «3.4 MB» (punto decimal, como el «10.0 MB» que arma `sui-file-upload`). | propuesta |
 | `progress` | 0–100, solo en `in-progress`. | propuesta |
 | `statusText` | Los defaults ya están en español («Subiendo…», «Completado», «Falló»); en error, mejor el motivo: «Se cortó la conexión». | propuesta |
 | `showStatus=false` | Solo en `success`, cuando el check sobra porque la lista ya dice «Archivos subidos». | propuesta |
@@ -52,14 +52,15 @@ Usos de hoy que rompen la regla: **0**.
 ## Tamaño en mobile y en web
 
 **No tiene `size`.** Llena el ancho del contenedor (antes 400 fijo) y la X o el tacho de la derecha
-es un `sui-compact-button` `2xlarge` de **32 px** (Figma: 24), que con el aire de la tarjeta (16 de
-padding, 72 de alto mínimo) se toca bien con el dedo. «Reintentar» sigue siendo un link de 20 px de
-alto: en mobile conviene que la fila entera también reintente.
+es un `sui-compact-button` `2xlarge` de **32 px** (Figma: 24): queda debajo de los 44 del dedo. La
+fila mide 74 sin barra (ícono de 40 + padding 16 × 2 + borde 1 × 2; no hay `min-height`).
+«Reintentar» sigue siendo un link de 20 px de alto: en mobile conviene que la fila entera también
+reintente.
 
 | pieza | mobile | web | fuente |
 |---|---|---|---|
 | ancho | el del contenedor | el del contenedor | canon (aprobado por el dueño, 03-10-2026), extensión SUI |
-| X / tacho | 32 px | 32 px | canon (aprobado por el dueño, 03-10-2026), extensión SUI |
+| X / tacho | 32 px — **no llega** a 44 | 32 px | canon (aprobado por el dueño, 03-10-2026), extensión SUI |
 | «Reintentar» | link de 20 px — **no llega** | link | medido |
 
 ```html
@@ -122,8 +123,8 @@ interface SuiFileUploadCardFile { filename: string; extension?: string; }
 
 ```html
 <sui-file-upload-card file="carta-octubre.pdf" state="in-progress" [progress]="45"
-                      description="1,2 MB de 2,6 MB" statusText="Subiendo…" />
-<sui-file-upload-card file="carta-octubre.pdf" state="error" description="2,6 MB"
+                      description="1.2 MB de 2.6 MB" statusText="Subiendo…" />
+<sui-file-upload-card file="carta-octubre.pdf" state="error" description="2.6 MB"
                       statusText="Se cortó la conexión" retryLabel="Reintentar"
                       (retryClicked)="reintentar()" (actionClicked)="quitar()" />
 ```

package/docs/sui-filter/README.md

@@ -0,0 +1,181 @@
+---
+name: sui-filter
+selector: sui-filter-bar, sui-filter-item, sui-filter-panel-header, sui-filter-panel-footer
+resumen: Piezas de filtros de una lista o tabla del panel; la barra horizontal (buscador, vista, orden) y el panel vertical (fila, cabecera con «Limpiar», pie con «Limpiar» / «Aplicar»)
+alternativas: [sui-segmented-control (2 a 4 vistas que se aplican al instante), sui-compact-select (un filtro suelto), sui-tab-chips (filtros rápidos con chips), sui-activity-filter (filtro del feed de actividad), sui-modal-sheet (el panel de filtros en mobile)]
+---
+
+# sui-filter
+
+Story: [Organisms/Filter Bar](https://sui-design-system.web.app/?path=/docs/organisms-filter-bar--docs)
+
+Son **cuatro componentes** en una carpeta, sin uno llamado `sui-filter`:
+
+- `sui-filter-bar`: la **barra horizontal** arriba de una tabla. Es solo layout: un lado
+  izquierdo (`slot="start"`) y uno derecho (`slot="end"`); los controles se proyectan.
+- `sui-filter-item`: una **fila** del panel vertical (una categoría de filtro: «Estado», «Local»).
+- `sui-filter-panel-header`: la **cabecera** del panel, con un link «Limpiar» opcional.
+- `sui-filter-panel-footer`: el **pie** del panel, con «Limpiar» y «Aplicar».
+
+El panel vertical **no existe como contenedor**: se arma con header + items + footer dentro de un
+`sui-dropdown-menu` (web) o de un `sui-modal-sheet` (mobile).
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** en las listas y tablas del panel del local o del super admin que necesitan filtrar
+(pedidos, productos, repartidores): la barra arriba con el buscador, la vista y el orden; el panel
+cuando hay varias categorías de filtro que se combinan y se aplican juntas.
+
+**No lo uses** para:
+
+- 2 a 4 vistas que se aplican al tocar (Hoy · Semana · Mes): `sui-segmented-control` solo, sin barra.
+- Un único filtro: un `sui-compact-select` o `sui-select` suelto.
+- Filtros rápidos de un toque en mobile (Todos · Pendientes · Entregados): `sui-tab-chips`.
+- El feed de actividad: `sui-activity-filter`.
+
+Regla corta: **barra arriba de una tabla → filter-bar · varias categorías que se aplican juntas →
+panel (header + items + footer) · un filtro suelto → compact-select.**
+
+## Qué variante usar
+
+> **La guía del DS no tiene página de filtros**: estas piezas salen solo del Figma del DS
+> («Filters»: HorizontalFilter y VerticalFilter). Todo lo de abajo es **propuesta, falta
+> aprobación**, salvo lo marcado canon.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-dropdown-menu`):
+> **0 usos**. Solo aparecen en la vitrina `master-preview`.
+
+### `sui-filter-bar`
+
+| variant | cuándo | fuente |
+|---|---|---|
+| `table` (default) | Arriba de una tabla: a la izquierda la vista (`sui-segmented-control`), a la derecha el buscador (`sui-input type="search"`) y el orden (`sui-select` o `sui-compact-select`). | propuesta (composición del Figma) |
+| `calendar` | Arriba de una vista por fechas: a la izquierda «Hoy» + el rango (`sui-button-group`), a la derecha el buscador. | propuesta (composición del Figma) |
+
+`variant` solo marca el host (`data-sui-variant`): **no cambia el layout**. Lo que se ve lo deciden
+los controles que se proyectan.
+
+### El panel: `sui-filter-item` + header + footer
+
+| pieza | regla | fuente |
+|---|---|---|
+| `sui-filter-item` `active` | La categoría abierta (la que muestra sus opciones al lado): fondo gris, texto negro, flecha a la derecha. | propuesta (estados del Figma) |
+| `sui-filter-item` `leftIcon` | Un ícono por categoría si ayuda a ubicarla («Estado», «Local», «Repartidor»). | propuesta |
+| `sui-filter-panel-header` `clear` | `clear=true` dice «Limpiar» (en español desde el 04-10-2026); un string lo cambia. | canon (CANON-SUI §5: copy en español) |
+| `sui-filter-panel-footer` | «Limpiar» a la izquierda (`stroke neutral`), «Aplicar» a la derecha (`filled primary`), mitad y mitad. | canon (orden de `sui-modal-footer`, CLAUDE.md «Botones») |
+| «Limpiar» en header **y** footer | Elegir uno. Con el footer, el header va sin link. | propuesta |
+| `applyButton` deshabilitado | `{ label: 'Aplicar', disabled: !cambio() }` mientras no se toca nada. | propuesta |
+
+## Tamaño en mobile y en web
+
+Ninguna pieza cambia sola en mobile, salvo la barra, que apila sus dos lados por debajo de 640 px.
+
+| pieza | mobile | web | fuente |
+|---|---|---|---|
+| `sui-filter-bar` | sin tamaño; los controles adentro van `large` (48) | sin tamaño; los controles `small` (36) | propuesta (igual que `sui-compact-select` en una barra) |
+| `sui-filter-item` | 36 de alto, no se puede cambiar: debajo de los 44 del dedo | 36 | propuesta |
+| `sui-filter-panel-footer` | `medium` (40) es lo más grande que tiene; en mobile, mejor `sui-modal-footer` (48) dentro de un `sui-modal-sheet` | `small` (36, default) | canon para el 48 de mobile (CLAUDE.md: footer de modal `large`); el resto, propuesta |
+| `sui-filter-panel-header` | sin tamaño | sin tamaño | — |
+
+```html
+<sui-filter-bar>
+  <sui-segmented-control slot="start" … />
+  <div slot="end">
+    <sui-input type="search" [size]="bp.isMobile() ? 'large' : 'small'" placeholder="Buscar pedido…" … />
+  </div>
+</sui-filter-bar>
+```
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+### `sui-filter-bar`
+
+| input | tipo | default |
+|---|---|---|
+| `variant` | `'calendar' \| 'table'` | `'table'` |
+
+Outputs: ninguno.
+
+### `sui-filter-item`
+
+| input | tipo | default |
+|---|---|---|
+| `active` | `boolean` | `false` |
+| `disabled` | `boolean` | `false` |
+| `leftIcon` | `string \| null` | `null` |
+| `activeIcon` | `string` | `'arrow-right-s-line'` |
+
+| output | payload |
+|---|---|
+| `selected` | `Event` |
+
+### `sui-filter-panel-footer`
+
+| input | tipo | default |
+|---|---|---|
+| `clearButton` | `SuiFooterButtonConfig \| string` | `'Limpiar'` |
+| `applyButton` | `SuiFooterButtonConfig \| string` | `'Aplicar'` |
+| `size` | `'small' \| 'medium'` | `'small'` |
+
+| output | payload |
+|---|---|
+| `clear` | `void` |
+| `apply` | `void` |
+
+### `sui-filter-panel-header`
+
+| input | tipo | default |
+|---|---|---|
+| `label` | `string` | `''` |
+| `leftIcon` | `string \| null` | `null` |
+| `clear` | `string \| boolean` | `false` |
+
+| output | payload |
+|---|---|
+| `clearClick` | `void` |
+<!-- api:fin -->
+
+Slots de `sui-filter-bar`: `[slot=start]`, `[slot=end]` y el contenido por defecto (fila única si no
+se usan los slots). El label de `sui-filter-item` es su contenido proyectado. `clearButton` y
+`applyButton` aceptan un string o `SuiFooterButtonConfig` (`{ label, disabled? }`, la misma interfaz
+de `sui-drawer-footer`).
+
+## Trampas
+
+- Los textos por defecto son «Limpiar» y «Aplicar» en el footer y «Limpiar» en el header con
+  `clear=true` (en español desde el 04-10-2026).
+- **La barra apila a 640 px; la app cambia a mobile a 767.** Entre 641 y 767 px la app ya está en
+  mobile y la barra sigue en una fila.
+- **Varios controles en un lado van en un contenedor.** Cada slot es una fila con 12 px de separación,
+  pero un solo elemento por `slot` queda más ordenado (`<div slot="end">`), como en el Figma.
+- **`sui-filter-item` tiene `role="option"`**: el contenedor tiene que llevar `role="listbox"`.
+- **`active` no es «elegido»**: marca la categoría abierta, no un valor aplicado. Para decir que una
+  categoría tiene un filtro puesto no hay prop (un `sui-badge` en el label es lo más cercano).
+- **El footer separa sus botones 16 px** (del Figma); el canon de la app entre botones hermanos es 12
+  (CANON-SUI §0, `sui-modal-footer`).
+- El footer no llega a `large`: en mobile queda más chico que el footer de cualquier modal.
+- `disabled` del item usa opacidad (no está en el Figma).
+
+## Ejemplo
+
+```html
+<!-- Panel de filtros en web, anclado a un botón «Filtros» -->
+<sui-dropdown-menu #filtros="suiDropdownMenu" [minWidth]="320">
+  <sui-button trigger variant="stroke" color="neutral" size="small">Filtros</sui-button>
+  <ng-template suiDropdownPanel>
+    <sui-filter-panel-header label="Filtros" leftIcon="equalizer-line" />
+    <div role="listbox" aria-label="Categorías de filtro">
+      <sui-filter-item leftIcon="checkbox-circle-line" [active]="cat() === 'estado'"
+                       (selected)="cat.set('estado')">Estado</sui-filter-item>
+      <sui-filter-item leftIcon="store-2-line" [active]="cat() === 'local'"
+                       (selected)="cat.set('local')">Local</sui-filter-item>
+    </div>
+    <sui-filter-panel-footer clearButton="Limpiar"
+                             [applyButton]="{ label: 'Aplicar', disabled: !cambio() }"
+                             (clear)="limpiar()" (apply)="filtros.close(); aplicar()" />
+  </ng-template>
+</sui-dropdown-menu>
+```

package/docs/sui-flag/README.md

@@ -22,8 +22,9 @@ nada a nadie.
 > **La guía del DS no tiene este componente.** Todo es **propuesta, falta aprobación**.
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos directos**. Lo usan por dentro
-> `sui-select`, `sui-compact-select`, `sui-inline-select`, `sui-dropdown-item`, `sui-tag` y
-> `sui-command-menu-item`.
+> `sui-select`, `sui-compact-select`, `sui-compact-select-for-input`, `sui-inline-select`,
+> `sui-dropdown-item` y `sui-command-menu-item`. `sui-tag` no la trae: la recibe proyectada en
+> `[data-slot=start]`.
 
 ### `size`
 

package/docs/sui-form-hint/README.md

@@ -12,7 +12,7 @@ Story: [Atoms/Form/Form Hint](https://sui-design-system.web.app/?path=/docs/atom
 ## Cuándo usarlo / cuándo no
 
 **Úsalo** para una línea debajo de un campo o grupo **que no trae la suya**: cómo se llena
-(«Como aparece en tu DNI.»), un contador («120/200»), o qué falló («Selecciona un método de
+(«Como aparece en tu DNI»), un contador («120/200»), o qué falló («Selecciona un método de
 pago»). Va pegado al control que explica.
 
 **No lo uses** para:
@@ -31,7 +31,8 @@ Regla corta: **ayuda o error de un control sin hint propio → form-hint · camp
 > trae tres estados: normal, deshabilitado y con error (`hasError`). El ícono es una pieza aparte
 > y opcional. No da reglas de largo ni de copy.
 >
-> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-badge`):
+> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-badge`; las cifras
+> siguen iguales el 04-10-2026, las líneas de abajo están actualizadas a esa fecha):
 > **36 usos en 18 archivos**: 11 `error`, 25 `neutral` (24 por default y 1 explícito), 0
 > `disabled`; 2 con `icon` propio (`information-line`). Hay además **al menos 14 hints escritos a
 > mano** con clases propias (`__form-hint`, `__hint`).
@@ -48,7 +49,7 @@ Regla corta: **ayuda o error de un control sin hint propio → form-hint · camp
 
 | qué | regla | fuente |
 |---|---|---|
-| `message` | Hasta 8 palabras (mediana 6). Si no cabe, es un `sui-alert`. Con punto final si es una oración. | canon (`docs/CANON-SUI.md` §5.4) |
+| `message` | Hasta 8 palabras (mediana 6). Si no cabe, es un `sui-alert`. Sin punto final si es una frase corta; con punto si son dos oraciones. | canon (`docs/CANON-SUI.md` §5.4 el largo; `docs/VOZ-Y-ESCRITURA.md` el punto) |
 | `icon` sin pasar | El de la variante (ninguno en `neutral`, info en `error` y `disabled`). | según la guía del DS (ícono opcional); default de SUI |
 | `icon="…"` en `neutral` | Solo cuando la ayuda es una advertencia que conviene notar («No reconocimos el distrito…»). | propuesta, falta aprobación (2 usos hoy) |
 | `[icon]="null"` | Quita el ícono también en `error`. No usar: el error necesita algo más que el color. | propuesta, falta aprobación |
@@ -62,14 +63,14 @@ Regla corta: **ayuda o error de un control sin hint propio → form-hint · camp
   Bien usado, en cambio, `step-vehicle.html:43`: el error de un grupo de `sui-radio-card`.
 - **4 como subtítulo de una sección, no de un campo:** `pages/schedule/schedule.html:17`
   («Pausa tu sucursal…», bajo el título de la card), `:61`, `pages/drivers/drivers.html:29`,
-  `pages/driver/driver-schedule/driver-schedule.html:94`.
+  `pages/driver/driver-schedule/driver-schedule.html:92`.
 - **12 de más de 8 palabras** (4 son los subtítulos de arriba) → acortar, o `sui-alert` si de
   verdad hace falta todo: `pages/super-admin/master-users/master-users.html:66` (26 palabras),
-  `pages/orders/orders.html:587` (23), `pages/driver/driver-order-detail/driver-order-detail.html:834` (23),
-  `pages/envios/envios.html:399` (15).
-- **Al menos 14 hints a mano** con clases propias. Ejemplos: `pages/discounts/discounts.html:196`
+  `pages/orders/orders.html:589` (23), `pages/driver/driver-order-detail/driver-order-detail.html:868` (23),
+  `pages/envios/envios.html:401` (15).
+- **Al menos 14 hints a mano** con clases propias. Ejemplos: `pages/discounts/discounts.html:205`
   (`discounts__form-hint`), `components/settings-panel/settings-panel.html:93`,
-  `pages/promociones/promociones.html:180`.
+  `pages/promociones/promociones.html:181`.
 
 ## Tamaño en mobile y en web
 
@@ -110,6 +111,9 @@ Outputs: ninguno.
 - **Sin `message` no ocupa lugar**: no hace falta envolverlo en `@if`.
 - En `error` el ícono es `information-fill` en rojo, no `error-warning-line`.
 - Letra fija de 12/16 px; el ícono mide 16 px y se alinea con la primera línea.
+- `variant="error"` con mensaje lleva `role="alert"`: el lector lo anuncia al aparecer
+  (04-10-2026). Para enlazarlo a un control propio, pon `id` en el host y apúntalo con
+  `aria-describedby`; los campos del DS ya lo hacen solos.
 
 ## Ejemplo
 

package/docs/sui-form-label/README.md

@@ -19,7 +19,8 @@ Story: [Atoms/Form/Form Label](https://sui-design-system.web.app/?path=/docs/ato
 
 - **Encima de un `sui-input`, `sui-select` o `sui-textarea`**: esos ya dibujan su label, asterisco,
   sublabel y tooltip con `[label]`, `[required]`, `[sublabel]`, `[tooltip]`. Ponerle uno afuera
-  duplica la pieza y pierde el `for`.
+  duplica la pieza y deja el `required` y el error separados del campo. El label interno sí
+  lleva `for` al `id` del control (desde el 04-10-2026); uno puesto afuera no lo conoce.
 - El texto de un solo checkbox, radio o switch: `sui-checkbox-label`, `sui-radio-label`,
   `sui-switch-label`.
 - Un título de sección o de card («Datos personales»): `sui-page-header`, `sui-content-label` o
@@ -35,8 +36,8 @@ Regla corta: **campo de texto → su propio `[label]` · grupo o control sin lab
 > es «Last Name*(Optional)»: el opcional va **entre paréntesis** en el sub. Tiene un solo tamaño y
 > un estado deshabilitado. Info (tooltip) y el link de la derecha vienen del Figma del componente.
 >
-> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-badge`):
-> **37 usos en 13 archivos**: 13 con `required`, 5 con `sublabel="Opcional"`, 2 con `link`
+> Uso medido el 04-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-badge`):
+> **37 usos en 13 archivos**: 13 con `required`, 7 con `sublabel="(Opcional)"`, 2 con `link`
 > («Cambiar»), 0 con `tooltip`, 0 con `disabled`; 6 con `size="medium"` explícito, el resto en el
 > default (`medium`).
 
@@ -63,27 +64,21 @@ Regla corta: **campo de texto → su propio `[label]` · grupo o control sin lab
 La regla de controles grandes del dueño (28-09-2026) no aplica aquí: el `size` del label es
 tipografía, no área táctil.
 
-**Usos de hoy que rompen las reglas:**
+**Usos de hoy que rompen las reglas** (medido el 04-10-2026; los sublabels sin paréntesis, el
+«(opcional)» en el label, el número de paso en los labels de promociones y el Title Case de
+`drivers.html:28` ya se corrigieron en la app, commits `ce4a2d12` y `8128dc03`):
 
 - **8 encima de un campo que ya trae su label → pasar a `[label]` del campo:**
   `pages/driver-onboarding/step-info/step-info.html:37` («Nombre completo»), `:56`, `:77`;
   `pages/customer-onboarding/step-address/step-address.html:70` («Departamento», sobre
   `sui-select`), `:87`, `:106`; `pages/driver-onboarding/step-vehicle/step-vehicle.html:49`, `:62`.
   En esos mismos campos el `sui-form-hint` de abajo también es el `[hint]` del input.
-- **5 con `sublabel="Opcional"` sin paréntesis** → se lee «ImagenOpcional» (1 px de separación).
-  Pasar a «(Opcional)»: `components/add-product-modal/add-product-modal.html:42`, `:195`;
-  `pages/promociones/promociones.html:200`; `pages/business-onboarding/step-info/step-info.html:41`, `:54`.
-- **2 con «(opcional)» dentro del label → `sublabel`:** `pages/driver-onboarding/step-vehicle/step-vehicle.html:49`
-  («Placa del vehículo (opcional)») y `:62`.
 - **2 como título de sección → heading o `sui-content-label`:** `pages/customer/checkout/checkout.html:187`
   («Datos personales») y `:35` («Recoges en el local»).
-- **5 con el número de paso dentro del label** («1. Imagen del banner»…«5. Comprobante de pago»):
-  `pages/promociones/promociones.html:179`, `:200`, `:210`, `:230`, `:264`. Los pasos van en un
-  `sui-stepper` o en el título de la sección; el label queda «Imagen del banner». Además `:200`
-  («2. Descripción») está encima de un `sui-textarea`, que ya trae su `[label]`.
-- **1 en Title Case:** `pages/drivers/drivers.html:28` («Modo de Asignación» → «Modo de asignación»).
-- **3 con un switch armado a mano al lado → `sui-switch-label`:** `pages/discounts/discounts.html:195`,
-  `:299`; `components/add-product-modal/add-product-modal.html:195`.
+- **1 encima de un `sui-textarea`**, que ya trae su `[label]`: `pages/promociones/promociones.html:201`
+  («Descripción»).
+- **3 con un switch armado a mano al lado → `sui-switch-label`:** `pages/discounts/discounts.html:204`,
+  `:316`; `components/add-product-modal/add-product-modal.html:204`.
 
 ## Tamaño en mobile y en web
 

package/docs/sui-href/README.md

@@ -0,0 +1,85 @@
+---
+name: sui-href
+selector: a[suiHref]
+resumen: Directiva para los <a> del DS que reciben un href configurable; los links internos navegan con el Router sin recargar la app
+alternativas: [routerLink (link interno escrito en la plantilla de la app), sui-link-button (acción con forma de link, ya usa suiHref por dentro)]
+---
+
+# sui-href
+
+Story: [Utilities/Href](https://sui-design-system.web.app/?path=/docs/utilities-href--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** dentro de un componente del DS que recibe un `href` por input y lo pinta en un `<a>`:
+en vez de `[attr.href]="href()"`, `[suiHref]="href()"`. Así un `href="/cliente/pedidos"` que
+viene de la app navega **sin recargar el WebView** (en Capacitor, una recarga pierde el estado y
+tarda segundos) y uno externo se abre normal.
+
+Ya lo usan `sui-link-button`, `sui-compact-button`, `sui-fancy-button`, `sui-social-button`,
+`sui-breadcrumb-item`, `sui-topbar-item`, `sui-brand-logo`, `sui-app-store-badge`, `sui-rating` y
+`sui-progress-bar-label`.
+
+**No lo uses** para:
+
+- Un link interno que escribes en una plantilla de la app: `routerLink`. Es lo que usa la app
+  (98 usos, 0 de `suiHref` el 03-10-2026) y además marca el link activo.
+- Un botón que ejecuta algo: `sui-button` o `sui-link-button` con `(clicked)`.
+
+## Qué variante usar
+
+> **No está en la guía del DS: es una utilidad de SUI**, sin Figma ni variantes.
+
+No tiene variantes. Lo que decide qué hace es la URL:
+
+| `suiHref` | qué hace al tocarlo | fuente |
+|---|---|---|
+| empieza con `/` (no `//`) | `router.navigateByUrl()`: navegación dentro de la app, conserva query y `#` | componente |
+| `https://…`, `mailto:`, `tel:`, `#…`, `//host` | lo que haga el navegador | componente |
+| cualquiera, con `target` distinto de `_self` | lo que haga el navegador (nueva pestaña) | componente |
+| cualquiera, con cmd/ctrl/shift/alt o botón del medio | lo que haga el navegador | componente |
+| `null` o `''` | el `<a>` queda **sin** `href` (no navegable) | componente |
+
+## Tamaño en mobile y en web
+
+No aplica: es una directiva, no dibuja nada. El tamaño es el del componente que la usa.
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `suiHref` | `string \| null` | `null` |
+
+Outputs: ninguno.
+<!-- api:fin -->
+
+Solo se aplica a `<a>` (`selector: a[suiHref]`).
+
+## Trampas
+
+- **El atributo `href` real queda puesto**: el clic del medio, «copiar enlace» y «abrir en
+  pestaña nueva» siguen funcionando. Solo el clic normal se intercepta.
+- **Sin Router no intercepta nada**: en Storybook o en una app sin `provideRouter` es un `href`
+  común y corriente (recarga la página).
+- **Si el componente ya hizo `preventDefault()`** en su propio `(click)`, la directiva no navega.
+  Útil para un link que a veces solo emite un evento.
+- **No marca el link activo** (`routerLinkActive` no lo ve). Para menús de la app, `routerLink`.
+- Un `href` relativo sin `/` inicial (`pedidos/123`) **no** se intercepta: lo resuelve el
+  navegador contra la URL actual y recarga. Pasa rutas absolutas.
+
+## Ejemplo
+
+```html
+<!-- Dentro del template de un componente del DS -->
+<a class="sui-link-button" [suiHref]="href()" [attr.target]="target()">
+  <ng-content />
+</a>
+```
+
+```html
+<!-- Desde la app: el componente del DS ya lo resuelve -->
+<sui-link-button href="/cliente/pedidos">Ver mis pedidos</sui-link-button>
+```

package/docs/sui-icon/README.md

@@ -91,7 +91,7 @@ el celular (cliente, repartidor) va directo el valor de mobile. Todo es **propue
 
 Un ícono suelto **nunca** es el área táctil: si se toca, va en `sui-compact-button` o
 `sui-button` `onlyIcon`, que dan los 44 px. Hoy solo 2 íconos cambian por breakpoint
-(`pages/discounts/discounts.html:101` y `:106`, con `bp.isTablet() ? 20 : 16`).
+(`pages/discounts/discounts.html:103` y `:108`, con `bp.isTablet() ? 20 : 16`).
 
 ## «No usar»: por qué no hoy y cuándo sí
 
@@ -121,8 +121,9 @@ Outputs: ninguno.
 - **`size` acepta número o string**: `[size]="20"` son px; `size="1.25em"` es CSS. Con
   `size="20"` (string sin unidad) el ícono no toma tamaño.
 - **El nombre no se valida**: si no existe en RemixIcon, sale vacío sin error.
-- **No tiene `aria-label`**: los propios del DS llevan `aria-hidden`; los de RemixIcon son un
-  `<i>` vacío. Si el ícono es lo único que dice algo, el texto va al lado o en el contenedor.
+- **No tiene `aria-label` y es decorativo siempre**: el SVG propio y el `<i>` de RemixIcon llevan
+  `aria-hidden="true"` (el `<i>` desde el 04-10-2026; antes el lector podía leer el glifo como un
+  símbolo raro). Si el ícono es lo único que dice algo, el texto va al lado o en el contenedor.
 - **La app necesita la fuente de RemixIcon** (`remixicon/fonts/remixicon.css` en `styles.scss`):
   el paquete del DS no la trae.
 - Dentro de un `sui-kbd`, el kbd le fuerza el color `text-sub-600`.