@ajuarezso/sui-design-system 0.20.0 → 0.22.0

package/docs/sui-activity-filter/README.md

@@ -0,0 +1,100 @@
+---
+name: sui-activity-filter
+selector: sui-activity-filter
+resumen: Chip con ícono para filtrar un historial de actividad por tipo — Archivos, Comentarios, Tareas — prendido o apagado
+alternativas: [sui-tab-chips (los filtros de lista de la app, siempre uno elegido), sui-segmented-control (2-4 vistas hermanas), sui-tag (una etiqueta que se puede quitar), sui-badge (un estado que no se toca)]
+---
+
+# sui-activity-filter
+
+Story: [Organisms/Activity/Activity Filter](https://sui-design-system.web.app/?path=/docs/organisms-activity-activity-filter--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** en la fila de filtros **de un `sui-activity-feed`**, para mostrar solo un tipo de
+actividad. Es un botón que se prende y se apaga (`aria-pressed`); la fila de chips y qué se
+filtra lo arma la pantalla.
+
+**No lo uses** para:
+
+- Filtrar una lista o un catálogo: `sui-tab-chips`, que es el patrón de filtros de toda la app
+  (desliza en horizontal y siempre hay uno elegido).
+- Cambiar entre 2-4 vistas de lo mismo: `sui-segmented-control`.
+- Mostrar un estado: `sui-badge`.
+
+Regla corta: **filtros del activity feed → activity filter · cualquier otra lista → tab chips.**
+
+## Qué variante usar
+
+> **La guía del DS no tiene página de este filtro.** Sale del Figma de SUI (Activity Feed Selected
+> Filter [1.1], frame 165967:3881: Default, Hover, Active). Uso medido el 03-10-2026 en
+> `master-pedidos/src/app`: **0 usos**. Lo de abajo es **propuesta, falta aprobación**.
+
+| prop | cuándo | fuente |
+|---|---|---|
+| `active` | El filtro que está aplicado (fondo naranja al 10 %, texto e ícono naranja). | Figma (State=Active) |
+| `icon` | Un ícono que diga el tipo: `file-list-2-line` archivos, `chat-3-line` comentarios, `task-line` tareas. | propuesta, falta aprobación |
+| `icon` en `null` | «Todos»: el chip que limpia el filtro va sin ícono. | propuesta, falta aprobación |
+| `disabled` | Un tipo que no tiene ninguna actividad en el rango elegido. Mejor que esconderlo: la fila no salta. | propuesta, falta aprobación (el disabled no está en el Figma) |
+
+¿Uno o varios a la vez? El componente no lo decide. Propuesta: **uno a la vez, con «Todos»**,
+igual que `sui-tab-chips`; así nadie se queda con un historial vacío por combinar filtros.
+
+## Tamaño en mobile y en web
+
+**No tiene `size`**: 30 de alto (4 + 20 + 4 y el borde), texto 14/500, ícono de 18, radio 8.
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| filtros del activity feed | no usar: 30 no llega al dedo; usar `sui-tab-chips` en `large` | `sui-activity-filter` | propuesta, falta aprobación |
+
+La fila de chips la arma la pantalla: el componente no trae contenedor ni scroll lateral.
+
+## «No usar»: por qué no hoy y cuándo sí
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| `sui-activity-filter` (0 usos) | no hay activity feed en la app | arriba de un historial de cambios en super admin, solo en web |
+| como filtro de listas | los filtros de la app son `sui-tab-chips` | nunca: dos componentes de filtro con distinto aspecto confunden |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `active` | `boolean` | `false` |
+| `disabled` | `boolean` | `false` |
+| `icon` | `string \| null` | `'file-list-2-line'` |
+
+| output | payload |
+|---|---|
+| `clicked` | `Event` |
+<!-- api:fin -->
+
+Slot: `<ng-content>` (el texto del chip).
+
+## Trampas
+
+- **`icon` trae un ícono por defecto** (`file-list-2-line`): un chip sin `icon` igual muestra el de
+  archivos. Para sacarlo, `[icon]="null"`.
+- **Escucha `(clicked)`, no `(click)`.** El host no es un `<button>` nativo: Enter y Espacio emiten
+  `(clicked)` pero **no** generan un `click`, así que con `(click)` el filtro no funciona por
+  teclado. Además `(clicked)` ya se calla cuando está `disabled`.
+- `active` no cambia solo al tocarlo: lo controla la pantalla (`[active]="filtro() === 'archivos'"`).
+- El host es el botón (`role="button"`, `tabindex`, Enter y Espacio): no lo envuelvas en un
+  `<button>`.
+- El foco usa un `outline` de 2 px naranja, no el doble anillo de los inputs del DS.
+- Ya trae el arreglo de iOS para el `:active` pegado.
+
+## Ejemplo
+
+```html
+<div class="historial__filtros">
+  <sui-activity-filter [icon]="null" [active]="filtro() === 'todos'" (clicked)="filtro.set('todos')">Todos</sui-activity-filter>
+  <sui-activity-filter icon="file-list-2-line" [active]="filtro() === 'archivos'" (clicked)="filtro.set('archivos')">Archivos</sui-activity-filter>
+  <sui-activity-filter icon="chat-3-line" [active]="filtro() === 'comentarios'" (clicked)="filtro.set('comentarios')">Comentarios</sui-activity-filter>
+</div>
+<sui-activity-feed [items]="historialFiltrado()" />
+```

package/docs/sui-alert/README.md

@@ -136,6 +136,19 @@ cliente**, que no es una novedad: `pages/envios/envios.html:725`,
   y `:198` (`accionActivar`, `accionReintentar`, usadas en `notifications.html:17` y `:23`).
 - Más de dos acciones: 0.
 
+## Tamaño en mobile y en web
+
+El alert no tiene un tamaño «de mobile»: el tamaño lo decide el contenido (guía del DS).
+Con descripción va `large` en las dos plataformas; de una línea, `small`. Lo que cambia
+en mobile es el ancho: ocupa toda la columna.
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| aviso con descripción | `large` | `large` | guía del DS |
+| aviso de una línea en la página | `small` | `small` | guía del DS |
+| dentro de un campo o una card | `xsmall` | `xsmall` | guía del DS |
+
+
 ## API
 
 <!-- api:inicio -->

package/docs/sui-badge/README.md

@@ -153,6 +153,23 @@ dos valores (`pages/invoices/invoices.html:50` pagado/reembolsado,
 `pages/super-admin/master-gastos/master-gastos.html:67` confirmado/pendiente) son candidatos; los de
 pedidos con muchos estados (`pages/orders/orders.html:113`) se quedan como badge.
 
+## Tamaño en mobile y en web
+
+En mobile el badge se lee de más lejos y al lado de textos de 16 px; en web va más chico.
+`large` (24) y `xlarge` (28) son extensión SUI del 03-10-2026.
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| estado en una lista o card | `large` (24) | `small` (16, mayúsculas) | canon (aprobado por el dueño, 03-10-2026) |
+| junto a un título o un monto | `xlarge` (28) | `medium` (20) | propuesta, falta aprobación |
+| conteo (`type="number"`) | `large` (24) | `small` (16) | propuesta, falta aprobación |
+
+Patrón (la app ya lo usa en 27 lugares; `bp` = `BreakpointsService`, mobile hasta 767 px):
+
+```html
+<sui-badge [size]="bp.isMobile() ? 'large' : 'small'" …/>
+```
+
 ## API
 
 <!-- api:inicio -->

package/docs/sui-banner/README.md

@@ -0,0 +1,190 @@
+---
+name: sui-banner
+selector: sui-banner
+resumen: Barra de aviso a todo el ancho, arriba de la pantalla, para algo que afecta a toda la app
+alternativas: [sui-alert (aviso ligado a una sección o una card), sui-toast (resultado efímero de una acción), sui-notification (fila de la bandeja), sui-modal (algo que bloquea todo, como quedarse sin conexión)]
+---
+
+# sui-banner
+
+Story: [Molecules/Feedback/Banner](https://sui-design-system.web.app/?path=/docs/molecules-feedback-banner--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** cuando el aviso es de **toda la app o de toda la pantalla**, no de una parte: el plan
+del local venció, estás administrando un local como super admin, hay una versión nueva, la app
+está en modo de prueba. Va pegado arriba, a todo el ancho, y se queda mientras dure la situación.
+
+**No lo uses** para:
+
+- Un aviso de una sección, una card o un paso del flujo («Cobras S/ 12.00 al local al recoger»):
+  eso es `sui-alert`, aunque sea importante. El banner no tiene tamaños ni descripción larga: no
+  está hecho para vivir en medio del contenido.
+- Confirmar que algo salió bien: `sui-toast`.
+- Algo que impide usar la app (sin conexión, cuenta suspendida): un `sui-modal` o una pantalla
+  propia. La app ya lo hace así con «Sin conexión».
+
+Regla corta (canon, la misma del alert): **contexto → alert · toda la app → banner · efímero →
+toast · bandeja → notification.**
+
+## 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
+> marcado «según la guía del DS» sale de su texto o de sus ejemplos publicados; lo marcado
+> «canon» ya lo aprobó el dueño en el README de `sui-alert`; el resto es **propuesta** y falta su ok.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app`, sin contar prototipos ni vitrinas
+> (`master-preview`, `master-prototipos`, `mockup-*`, `dx/*`, `_guia-*`, `master-rutina`,
+> `master-medico`, `master-ejercicios`, `dev-index`): **2 banners** en 2 archivos, más **1 barra
+> hecha a mano** que debería ser banner.
+
+### Lo que sí dice la guía del DS
+
+- **Para qué es**: avisos cruciales, **arriba de la pantalla** y a la vista. Coincide con «toda la
+  app → banner».
+- **Una sola línea**: título, punto medio, descripción y **un link** como acción. El link es un
+  `sui-link-button` `modifiable`, `medium` y **subrayado**: toma el color del banner.
+- **Botón de cerrar** en todos sus ejemplos.
+- **Defaults**: la guía arranca en relleno `filled` y tipo `feature`; SUI arranca en `stroke` e
+  `info`. Es un default, no una recomendación de uso.
+
+### `variant` — qué tipo de aviso es
+
+Los mismos cinco tipos que `sui-alert`, con el mismo significado.
+
+| variant | cuándo | ejemplo real de la app | fuente |
+|---|---|---|---|
+| `info` (default) | Un dato de toda la app que conviene saber y no pide nada: hay una versión nueva, estás viendo datos de prueba. | (sin uso hoy) | propuesta (sigue la regla canon del alert) |
+| `success` | Un estado bueno que dura y afecta a todo: «Tu local ya está publicado». Si es la confirmación de un clic, es toast. | (sin uso hoy) | propuesta (sigue la regla canon del alert) |
+| `warning` | Hay que hacer algo pronto o lo que hagas tiene consecuencia para toda la cuenta: el plan vence, estás administrando un local que no es tuyo. | `components/subscription-banner/subscription-banner.html:5` («Tu plan vence en 3 días») · candidato: `components/impersonation-banner/impersonation-banner.ts:17` | propuesta (sigue la regla canon del alert) |
+| `error` | Algo ya pasó y afecta a toda la cuenta. | `components/subscription-banner/subscription-banner.html:5` («Tu plan venció») | propuesta (sigue la regla canon del alert) |
+| `feature` | Novedad que alcanza a toda la app. **Aquí es gris**, no morado como en el alert. | (sin uso hoy) | canon (decisión documentada en el `.ts`, recogida en el README del alert) |
+
+### `variantStyle` — el peso visual
+
+Misma pregunta que en el alert: **¿este aviso tiene que ganarle a todo lo demás de la pantalla?**
+
+| variantStyle | cuándo | ejemplo real de la app | fuente |
+|---|---|---|---|
+| `lighter` | El aviso **acompaña**: hay que tenerlo presente, pero se puede seguir trabajando. Es el caso normal. | `subscription-banner.html:7` en el caso «vence en N días» (hoy en `light`) | propuesta |
+| `filled` (default de la guía) | Hay que **actuar ya**, o la app está en un **modo que cambia lo que haces**: el plan venció, estás administrando otro local. Uno a la vez. | `subscription-banner.html:7` («Tu plan venció») | propuesta |
+| `light` | No usar hoy, como en el alert. **Cuándo sí:** un banner dentro de una zona ya teñida, donde `lighter` se pierde. | — | propuesta |
+| `stroke` (default SUI) | No usar hoy: un banner blanco con borde se confunde con la barra superior. **Cuándo sí:** arriba de una pantalla a sangre (un mapa o una foto), donde la banda blanca sí se distingue. | — | propuesta |
+
+### `dismissible`, `showIcon`, acción y título
+
+| prop | valor | cuándo | fuente |
+|---|---|---|---|
+| `dismissible` | `true` | Solo si el aviso se puede ignorar sin problema (versión nueva, novedad). La guía lo muestra en todos sus ejemplos. | según la guía del DS (que exista) · propuesta (cuándo) |
+| `dismissible` | `false` (default) | Todo `filled` y todo aviso que tiene que seguir ahí: plan vencido, administrando otro local. Cerrarlo no arregla nada. | propuesta |
+| `showIcon` | `true` (default) | Siempre: el ícono es la mitad del significado del tipo. | propuesta |
+| `showIcon` | `false` | No usar hoy. **Cuándo sí:** cuando se proyecta un avatar o logo en `slot="icon"` (ver abajo), que ya ocupa ese lugar. | propuesta |
+| `slot="icon"` | avatar o logo | Reemplaza al ícono del tipo: el logo del local que estás administrando. | propuesta |
+| `slot="action"` | **un** `sui-link-button` `variant="modifiable"` con `[underline]="true"` | La única acción del banner: «Renovar plan», «Salir», «Actualizar». Nunca un `sui-button`, nunca dos. | según la guía del DS |
+| `title` | frase corta | Lo que pasa, en sentence case y sin punto final. | canon (copy de la app) |
+| `description` | complemento | Qué hacer o hasta cuándo. Una línea en web; en mobile se envuelve. | según la guía del DS (una línea) |
+
+### Usos de hoy que rompen la regla
+
+- **Rompe el canon — 1 banner en contexto → `sui-alert`:**
+  `pages/driver/driver-order-detail/driver-order-detail.html:391` («Cobras S/ … al local al
+  recoger»). Es el aviso de **un pedido**, dentro de su detalle: va `sui-alert` (`error` `filled`
+  si cobra en el mostrador, `info` `lighter` si cobra en la puerta).
+- **Barra hecha a mano que es un banner — 1:** `components/impersonation-banner/impersonation-banner.ts:17`
+  («Estás administrando … como super admin» + botón «Salir»), con `#fff` y `rgb()` sueltos. Pasaría a
+  `<sui-banner variant="warning" variantStyle="filled">` con un link «Salir».
+- **Romperían la propuesta — 1 `light` → `lighter`:** `components/subscription-banner/subscription-banner.html:7`
+  (el caso «vence en N días»).
+- No confundir: `components/upgrade-banner/` (6 pantallas) se llama «banner» pero es un aviso dentro
+  de una sección; su destino es `sui-alert`, ya anotado en `docs/CANON-SUI.md`.
+
+## Tamaño en mobile y en web
+
+El banner **no tiene `size`**: mide 44 px de alto en web, centrado; en mobile (≤ 767 px) pasa a
+`min-height: 44px`, se alinea a la izquierda y el texto se envuelve en varias líneas.
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| la barra | 44 px mínimo, crece si el texto envuelve | 44 px fijos, una línea | según el componente |
+| el link de acción | `large` (24 px) cuando se publique (hoy `medium`, 20 px) | `medium` (20 px) | propuesta |
+| la X de cerrar | se ve de 24 px; **se toca en 40 × 40** | igual | canon (aprobado por el dueño, 03-10-2026): área táctil invisible, extensión SUI |
+
+```html
+<sui-banner variant="warning" variantStyle="lighter" title="Tu plan vence en 3 días"
+  description="Renueva para seguir recibiendo pedidos">
+  <sui-link-button slot="action" variant="modifiable" [underline]="true"
+    [size]="bp.isMobile() ? 'large' : 'medium'" (clicked)="renovar()">Renovar plan</sui-link-button>
+</sui-banner>
+```
+
+`size="large"` del link-button está en el repo del DS y todavía no en el paquete publicado 0.19.0:
+hasta entonces va `medium` en las dos.
+
+## «No usar»: por qué no hoy y cuándo sí
+
+Nada se borra del DS. Lo marcado «no usar» no tiene caso en la app de hoy; si un flujo nuevo cae
+en la columna de la derecha, se usa.
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| `light` | queda a medio camino entre `lighter` y `filled` | un banner dentro de una zona ya teñida |
+| `stroke` | blanco con borde: se confunde con la barra superior | arriba de un mapa o una foto a sangre |
+| `success` | no hay estados buenos que afecten a toda la app | «Tu local ya está publicado» el día que sale al aire |
+| `feature` | no hay novedades anunciadas arriba | anunciar una función nueva a todos los locales, con X para cerrarlo |
+| `showIcon=false` | sin el ícono se pierde el tipo | con un avatar o logo en `slot="icon"` |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `variant` | `'info' \| 'success' \| 'warning' \| 'error' \| 'feature'` | `'info'` |
+| `variantStyle` | `'filled' \| 'light' \| 'lighter' \| 'stroke'` | `'stroke'` |
+| `title` | `string \| null` | `null` |
+| `description` | `string \| null` | `null` |
+| `showIcon` | `boolean` | `true` |
+| `dismissible` | `boolean` | `false` |
+
+| output | payload |
+|---|---|
+| `closed` | `void` |
+<!-- api:fin -->
+
+Signal pública: `dismissed` (`signal(false)`). Slots: `[slot=icon]` (reemplaza el ícono del tipo)
+y `[slot=action]` (el link).
+
+## Trampas
+
+- **Defaults distintos al alert:** el banner arranca en `stroke` (blanco con borde), el alert en
+  `lighter`. Pásale siempre `variantStyle`.
+- **`feature` es gris** aquí (estado «faded» de la paleta) y morado en `sui-alert`.
+- No tiene `size` ni `actions[]`: la acción va **proyectada** en `slot="action"`, a diferencia del
+  alert. Los slots usan `slot=`, no `data-slot=`.
+- En web la altura es **fija** (44 px): un título más una descripción largos se cortan. En mobile sí
+  envuelve.
+- **La X se toca en 40 × 40** aunque se vea de 24 (un `::before` invisible sobre su `<button>`,
+  desde 03-10-2026). En mobile esa área se mete 4 px en el espacio del texto o del link de acción
+  (el padding derecho es 40 y la X ocupa de 4 a 44 px desde el borde): un toque justo en la última
+  letra del link puede caer en la X.
+- Al tocar la X se oculta solo (`dismissed`) y emite `closed`; no recuerda nada: si tiene que
+  quedarse cerrado entre sesiones, lo guarda el padre.
+- El host lleva `role="region"` con `aria-label` = `title`, y borra el `title` nativo.
+- En mobile, una pantalla con modal a pantalla completa tapa el banner: el de la suscripción se
+  esconde con `uiOverlay.fullscreenOpen()` para no quedar encima.
+
+## Ejemplo
+
+```html
+<!-- Aviso que acompaña -->
+<sui-banner variant="warning" variantStyle="lighter"
+  title="Tu plan vence en 3 días" description="Renueva para seguir recibiendo pedidos">
+  <sui-link-button slot="action" variant="modifiable" [underline]="true" (clicked)="renovar()">Renovar plan</sui-link-button>
+</sui-banner>
+
+<!-- Modo que cambia lo que haces: filled, sin X -->
+<sui-banner variant="warning" variantStyle="filled" title="Estás administrando Pollería El Dorado como super admin">
+  <sui-link-button slot="action" variant="modifiable" [underline]="true" (clicked)="salir()">Salir</sui-link-button>
+</sui-banner>
+```

package/docs/sui-breadcrumb-item/README.md

@@ -0,0 +1,96 @@
+---
+name: sui-breadcrumb-item
+selector: sui-breadcrumb-item
+resumen: Una miga suelta de la ruta; casi siempre la dibuja sui-breadcrumbs por ti
+alternativas: [sui-breadcrumbs (la ruta completa con separadores), sui-link-button (un enlace de texto suelto)]
+---
+
+# sui-breadcrumb-item
+
+Story: [Molecules/Breadcrumbs/Breadcrumb Item](https://sui-design-system.web.app/?path=/docs/molecules-breadcrumbs-breadcrumb-item--docs)
+
+## Cuándo usarlo / cuándo no
+
+**No lo uses directo.** `sui-breadcrumbs` lo dibuja por cada entrada de `items`, pone los
+separadores y decide cuál es el activo. Las reglas de cuándo mostrar una ruta están en el README de
+`sui-breadcrumbs`.
+
+**Úsalo suelto** solo si armas una ruta que `sui-breadcrumbs` no cubre: una miga con un menú
+desplegable al lado o un separador propio. Hoy no hay ningún caso.
+
+**Tampoco** para un enlace de texto que no es parte de una ruta («Ver todas»): `sui-link-button`.
+
+## Qué variante usar
+
+> **Lo que dice la guía del DS**: el ítem de la ruta tiene un estado `active` (la página actual),
+> puede llevar **ícono** y puede ser **un enlace**. No trae do/don't.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-badge`): **0 usos**
+> directos (y 0 de `sui-breadcrumbs`).
+
+| input | valor | cuándo | fuente |
+|---|---|---|---|
+| `label` | texto | El nombre del nivel. | según la guía del DS |
+| `icon` | nombre RemixIcon | Solo el primer nivel (inicio), y con `ariaLabel` si va sin texto. | según la guía del DS (el ícono existe); el cuándo es propuesta |
+| `href` | ruta | Con ruta: dibuja un `<a>`; una ruta interna (`/…`) navega con el router sin recargar. | según la guía del DS (como enlace) |
+| `href` | vacío | Dibuja un `<button>` y avisa por `(clicked)`. | según el código |
+| `active` | `true` | La página actual: no es clicable, va en negro y lleva `aria-current="page"`. | según la guía del DS |
+| `ariaLabel` | texto | Obligatorio cuando va solo el ícono. | propuesta, falta aprobación |
+
+Usos de hoy que rompen las reglas: **0** (no se usa).
+
+## Tamaño en mobile y en web
+
+Alto fijo de **20 px**, sin `size`. **No tiene tamaño para mobile**, igual que `sui-breadcrumbs`:
+no se usa en mobile.
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| miga | no se usa | el componente (dentro de `sui-breadcrumbs`) | propuesta, falta aprobación |
+
+```html
+@if (!bp.isMobile()) { <sui-breadcrumbs [items]="ruta()" /> }
+```
+
+## «No usar»: por qué no hoy y cuándo sí
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| suelto, fuera de `sui-breadcrumbs` | `sui-breadcrumbs` cubre todos los casos | una ruta con un selector en una miga (cambiar de local desde la ruta en web) |
+| en mobile | 20 px de alto | nunca |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `label` | `string` | `''` |
+| `icon` | `string` | `''` |
+| `href` | `string` | `''` |
+| `active` | `boolean` | `false` |
+| `ariaLabel` | `string` | `''` |
+
+| output | payload |
+|---|---|
+| `clicked` | `void` |
+<!-- api:fin -->
+
+## Trampas
+
+- **`clicked` no sale cuando el ítem es `active`.**
+- **Con `href`, el clic navega y además emite `clicked`**: no navegues dos veces.
+- **El nombre de la clase es `SuiBreadcrumbItem`** y el de los datos de `sui-breadcrumbs` es
+  `SuiBreadcrumbEntry`. No son lo mismo.
+- No trae separador: el separador lo pone `sui-breadcrumbs`.
+
+## Ejemplo
+
+```html
+<!-- Lo normal: que lo dibuje sui-breadcrumbs -->
+<sui-breadcrumbs [items]="[{ label: 'Productos', href: '/empresa/productos' }, { label: 'Hamburguesas' }]" />
+
+<!-- Suelto, solo si de verdad hace falta -->
+<sui-breadcrumb-item icon="home-5-line" ariaLabel="Inicio" href="/empresa/inicio" />
+```

package/docs/sui-breadcrumbs/README.md

@@ -0,0 +1,122 @@
+---
+name: sui-breadcrumbs
+selector: sui-breadcrumbs
+resumen: Ruta de migas en web que dice dónde estás dentro de una jerarquía de 3 o más niveles y deja volver a cualquiera
+alternativas: [sui-page-header (título de la pantalla), botón de volver del layout (mobile), sui-tab-menu-horizontal (secciones del mismo nivel)]
+---
+
+# sui-breadcrumbs
+
+Story: [Molecules/Breadcrumbs/Breadcrumbs](https://sui-design-system.web.app/?path=/docs/molecules-breadcrumbs-breadcrumbs--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** en **web** cuando una pantalla está **3 o más niveles adentro** y sirve volver a un nivel
+intermedio sin pasar por todos: «Productos › Hamburguesas › Clásica con queso» en el panel de la
+empresa, «Locales › Sabores Andinos › Pedidos» en el super admin.
+
+**No lo uses** para:
+
+- **Mobile**: ahí se vuelve con la flecha del layout. Una fila de migas en 390 px se corta y
+  compite con el título.
+- **Una pantalla de 1 o 2 niveles**: el título y el volver ya lo dicen.
+- Secciones del mismo nivel: `sui-tab-menu-horizontal`.
+- Los pasos de un flujo: `sui-stepper`.
+
+Regla corta: **3+ niveles en web → breadcrumbs · mobile o 1-2 niveles → flecha de volver.**
+
+## Qué variante usar
+
+> **Lo que dice la guía del DS**: «guía mostrando el camino dentro de una app o sitio». Ejemplos con
+> flecha (default), **como enlaces** y con **separador `/`**. El ítem activo es la página actual. No
+> trae do/don't.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-badge`): **0 usos**.
+
+### `divider`
+
+| divider | cuándo | fuente |
+|---|---|---|
+| `arrow` (default) | Siempre en la app. | según la guía del DS (es su default) |
+| `slash` | No: misma función que la flecha; dos estilos en la misma app se leen como dos cosas. | según la guía del DS (la forma existe); el no es propuesta |
+| `dot` | No: el punto separa metadatos («12 min · S/ 4.50»), no niveles. Extensión de SUI. | propuesta, falta aprobación |
+
+### Ítems (`items`)
+
+| qué | cuándo | fuente |
+|---|---|---|
+| `label` | Siempre el nombre real del nivel («Hamburguesas», no «Categoría»). Un id nunca es el nombre. | canon (CLAUDE.md, «un identificador nunca es el título de nada») |
+| `href` | Cada nivel anterior con su ruta interna (`/empresa/productos`): navega con el router, sin recargar. | propuesta, falta aprobación |
+| sin `href` + `(navigate)` | Cuando volver no es una ruta (cerrar un panel, limpiar un filtro). | propuesta, falta aprobación |
+| `icon` solo en el primero | El inicio como casa (`home-5-line`) con `ariaLabel`. | según la guía del DS (ítems con ícono); el cuándo es propuesta |
+| `active` | No hace falta: el último ya es el activo. Solo si la página actual no va al final (raro). | según el código |
+
+Usos de hoy que rompen las reglas: **0** (no se usa).
+
+## Tamaño en mobile y en web
+
+Alto fijo de **20 px** (texto 14, ícono 20), sin `size`. **No tiene tamaño para mobile**: no se usa ahí.
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| ruta de 3+ niveles | no se usa: flecha de volver | `sui-breadcrumbs` | propuesta, falta aprobación |
+
+```html
+@if (!bp.isMobile()) {
+  <sui-breadcrumbs [items]="ruta()" />
+}
+```
+
+## «No usar»: por qué no hoy y cuándo sí
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| el componente entero | ninguna pantalla pasa de 2 niveles con salto a uno intermedio | el detalle de un producto dentro de una categoría en el panel web, o un local dentro del super admin |
+| `slash` | ya hay flecha; mezclar estilos confunde | nunca, mientras la flecha sea el estilo de la app |
+| `dot` | el punto es separador de metadatos | nunca para niveles |
+| en mobile | 20 px de alto y la ruta se corta | nunca |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `items` | `readonly SuiBreadcrumbEntry[]` | — (requerido) |
+| `divider` | `'arrow' \| 'slash' \| 'dot'` | `'arrow'` |
+
+| output | payload |
+|---|---|
+| `navigate` | `SuiBreadcrumbEntry` |
+<!-- api:fin -->
+
+```ts
+interface SuiBreadcrumbEntry {
+  label?: string;
+  icon?: string;       // RemixIcon, 20 px
+  href?: string;       // interno → router; externo → navegador
+  active?: boolean;    // default: el último
+  ariaLabel?: string;  // obligatorio si va solo el ícono
+}
+type SuiBreadcrumbDivider = 'arrow' | 'slash' | 'dot';
+```
+
+## Trampas
+
+- **`navigate` sale en todo clic**, también en los que tienen `href` (el navegador ya navega). Si
+  usas `href`, no navegues otra vez en `(navigate)`.
+- **El último ítem es el activo solo**: no es clicable y va en negro.
+- **No corta texto largo**: con nombres de producto largos la fila crece. Acórtalos tú.
+- El host dice `aria-label="Ruta de navegación"` (hasta el 03-10-2026, «Breadcrumb») y no se puede cambiar.
+- `SuiBreadcrumbEntry` (los datos) no es `SuiBreadcrumbItem` (el componente de cada miga).
+
+## Ejemplo
+
+```html
+<sui-breadcrumbs
+  [items]="[{ icon: 'home-5-line', href: '/empresa/inicio', ariaLabel: 'Inicio' },
+            { label: 'Productos', href: '/empresa/productos' },
+            { label: 'Hamburguesas', href: '/empresa/productos?categoria=hamburguesas' },
+            { label: 'Clásica con queso' }]" />
+```

package/docs/sui-button/README.md

@@ -122,6 +122,42 @@ flujo nuevo cae en la columna de la derecha, se usa (aprobado por el dueño, 03-
 | `sui-button-group` (0 usos) | hoy no hay opciones combinables pegadas | días del horario del local o filtros que se suman |
 | `sui-topbar-button` (0 usos) | las barras de la app tienen sus íconos propios | si se unifica la barra superior del admin con la del DS |
 
+## Tamaño en mobile y en web
+
+En mobile se toca con el dedo: 40 px como mínimo y 48 en la acción principal. En web, 28–40.
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| acción principal de la pantalla o footer de modal | `large` (48) | `medium` (40) | canon (aprobado por el dueño, 03-10-2026) (footer de modal siempre `large`) |
+| acción dentro de una card o una fila | `medium` (40) | `small` (36) / `xsmall` (32) | canon (aprobado por el dueño, 03-10-2026) |
+| acción en una tabla densa | — (no hay tablas en mobile) | `2xsmall` (28) | canon (aprobado por el dueño, 03-10-2026) |
+| CTA de landing | `xlarge` (52) | `large` (48) | propuesta, falta aprobación |
+
+Patrón (la app ya lo usa en 27 lugares; `bp` = `BreakpointsService`, mobile hasta 767 px):
+
+```html
+<sui-button [size]="bp.isMobile() ? 'large' : 'medium'" …/>
+```
+
+### Regla de tamaños para todo el DS (aprobada por el dueño, 03-10-2026)
+
+Vale para todos los componentes que tienen `size` `large` / `xlarge`:
+
+- **Alto, padding y área táctil crecen en cada paso.**
+- **El texto sube un solo escalón: hasta `medium` va en 14 px; `large` y `xlarge` van en 16 px.**
+  Labels, botones, chips, tabs e ítems usan `--sui-type-label-md-*`; valores y placeholders de
+  campos, `--sui-type-paragraph-md-*`. El line-height acompaña (24). Siempre con token (un
+  fallback `var(--token, 16px)` está bien), nunca px sueltos.
+- **El texto secundario chico no cambia**: hints, contadores, sublabels y captions de 12.
+- **Los íconos se quedan en 20.**
+- Si la línea de 24 movería el alto medido, se baja el padding para que el alto total quede igual.
+- Los chips cuya escala arranca en 12 (`sui-tag`, `sui-status-badge`) siguen a `sui-badge`, la
+  referencia: 14 en `large` y 16 en `xlarge` (derivado de la referencia `sui-badge`, falta
+  confirmación del dueño).
+
+En large y xlarge el texto sube a 16 px (regla del 03-10-2026): el botón ya usa Label/Medium 16/24
+en esos dos tamaños.
+
 ## API
 
 <!-- api:inicio -->