@ajuarezso/sui-design-system 0.25.0 → 0.25.1

package/docs/sui-badge/README.md

@@ -77,7 +77,7 @@ Regla corta: **etiqueta, número o estado con muchos valores → badge · comple
 fijos y los ternarios legibles en el template; el resto de los 77 dinámicos, que salen de
 funciones o campos, no):
 
-- **5 casos.** «Pendiente» en `red`: `pages/super-admin/super-admin.html:626`. «Pendiente» en
+- **5 casos.** «Pendiente» en `red`: `pages/super-admin/super-admin.html:637`. «Pendiente» en
   `yellow` (ausente): `pages/super-admin/master-gastos/master-gastos.html:67` y `:115`. «No cuadra»
   en `yellow`: `pages/super-admin/master-gastos/master-gastos.html:60` y `:129`. Los cinco pasan a
   `orange`.
@@ -117,7 +117,7 @@ un paso más fuerte con texto **oscuro**; `filled` = fondo saturado con texto bl
 
 - **16 `light` → `lighter`** (salvo que estén sobre superficie teñida; no se verificó
   renderizado). Ejemplos: `pages/super-admin/master-drivers/master-drivers.html:781`, `:783`, `:785`,
-  `pages/super-admin/master-users/master-user-sheet.html:44`, `pages/reports/reports.html:215`.
+  `pages/super-admin/master-users/master-user-sheet.html:44`, `pages/reports/reports.html:217`.
 - **1 `filled` como metadato → `lighter`:** `pages/customer/profile/profile.html:122` («Por defecto»).
   A discutir: `pages/public/pricing/pricing.html:37` (el «Popular» del plan destacado).
 - **1 `lighter` sobre superficie oscura → `dark`:** `pages/mi-negocio/mi-negocio.html:89` («Mes gratis»).
@@ -126,8 +126,7 @@ un paso más fuerte con texto **oscuro**; `filled` = fondo saturado con texto bl
 
 | eje | valor | cuándo | fuente |
 |---|---|---|---|
-| `size` | `small` (default, 16 px) | Lo normal. **Va en MAYÚSCULAS.** | según la guía del DS (mayúsculas y default) |
-| `size` | `small` | No usar: es chico (D16). Hasta el 05-10-2026 era el normal de web, en mayúsculas. | canon (dueño, 05-10-2026, D16); reemplaza la regla del 03-10-2026 |
+| `size` | `small` (default, 16 px) | **No usar**: es chico (D16). Es el default del componente, así que hay que pasar `size` siempre. Va en MAYÚSCULAS (eso sí es de la guía). Hasta el 05-10-2026 era el normal de web. | D16, dueño 05-10-2026 (reemplaza la regla del 03-10-2026) · mayúsculas y default: según la guía del DS |
 | `size` | `medium` (20 px) | **Lo normal en la computadora, la tablet y el celular chico** (el badge no se toca), sin mayúsculas. En el celular, `large` o `xlarge` (ver «Tamaño»). | canon (dueño, 05-10-2026, D16); antes, canon del 03-10-2026 solo para nombres, montos y títulos grandes |
 | `type` | `number` | **Números**: queda cuadrado/circular. | según la guía del DS |
 | `type` | `number` | Va con `filled` cuando el conteo pide acción. | canon (aprobado por el dueño, 03-10-2026) |
@@ -179,14 +178,45 @@ canon (dueño, 04-10-2026):** el badge mantiene su escala propia 12 / 14 / 16 (`
 | junto a un título o un monto | `xlarge` (28) | `medium` (20) | canon (dueño, 05-10-2026, P1 b) |
 | conteo (`type="number"`) | `large` (24) | `medium` (20) | canon (dueño, 05-10-2026, P1 b); web `medium`: canon (dueño, 05-10-2026, D16) · antes de migrar, ver en captura que el contador de 24 no tape el ícono de la barra inferior |
 
-Patrón (`bp` = `BreakpointsService`, mobile hasta 767 px). Medido el 04-10-2026: solo 6 de los
-214 badges de la app lo aplican (`pages/customer/cart/cart.html:71`,
-`pages/customer/order-history/order-history.html:176`…); el resto va con `size` fijo:
+Patrón (`bp` = `BreakpointsService`). Medido el 06-10-2026 en `master-pedidos/src/app` (sin
+`master-preview`, `master-prototipos`, `mockup-sheets-*`, `dx/*`, `master-rutina`, `master-medico`
+ni `dev-index`): 211 de los 228 badges ya van con `bp.sizeBadge()`. Quedan **17 fijos**:
+
+- **2 en `small`**, el conteo de la barra inferior: `components/glass-tab-bar/glass-tab-bar.html:16`
+  y `:33` (pendiente de ver en captura que el de 24 no tape el ícono).
+- **15 en `medium`**, que en el celular no suben (van a `large`, o a `xlarge` si están junto a un
+  título o un monto, según la tabla de arriba):
+  `components/product-categories/product-categories.html:17` y `:52`,
+  `components/total-sales/total-sales.html:20`, `components/metrics-cards/metrics-cards.html:15`,
+  `pages/products/products.html:61`, `pages/customers/customers.html:16`,
+  `pages/discounts/discounts.html:20`,
+  `pages/super-admin/master-semanas/master-semanas.html:26`, `:40`, `:52` y `:64`,
+  `pages/overview/components/overview-visitors/overview-visitors.html:11`,
+  `pages/overview/components/overview-conversion/overview-conversion.html:11`,
+  `pages/overview/components/overview-sales/overview-sales.html:11` y
+  `pages/reports/reports.html:40`.
 
 ```html
-<sui-badge [size]="bp.isMobile() ? 'large' : 'medium'" …/>
+<sui-badge [size]="bp.sizeBadge()" …/>
 ```
 
+### Por dispositivo (D16)
+
+El badge no se toca: sube **solo en el celular de 380 px o más**. Fuente: D16, dueño 05-10-2026.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380) | `medium` | no se toca: no sube aunque sea un celular |
+| celular (380–767) | `large` (`xlarge` junto a un título o un monto) | un paso más que en la computadora |
+| tablet táctil (`pointer: coarse`) | `medium` | no se toca: el puntero no cambia nada |
+| computadora (`pointer: fine`) | `medium` | nunca `small`; `medium` va sin MAYÚSCULAS |
+
+En el ultrawide, igual que en la computadora.
+
+En master-pedidos: `[size]="bp.sizeBadge()"` (`large` en el celular, `medium` en el resto). Junto
+a un título o un monto, donde el celular va en `xlarge`, el helper no alcanza (solo devuelve
+`large` o `medium`): `[size]="bp.celular() ? 'xlarge' : 'medium'"`.
+
 ## API
 
 <!-- api:inicio -->
@@ -233,15 +263,53 @@ interface SuiBadgeConfig {
 - `disabled` no baja la opacidad: pinta todo en los grises de deshabilitado.
 - El host lleva `role="status"`: el lector de pantalla anuncia los cambios.
 
+## Bien y mal
+
+Estado pendiente
+
+```html
+<!-- ❌ mal: red es error; «Pendiente» pide atención (pages/super-admin/super-admin.html:637) -->
+<sui-badge variant="lighter" color="red" [size]="bp.sizeBadge()">Pendiente</sui-badge>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-badge color="orange" [size]="bp.sizeBadge()">Pendiente</sui-badge>
+```
+
+Categoría en una lista
+
+```html
+<!-- ❌ mal: light es solo para una superficie ya teñida; en una lista va lighter (pages/reports/reports.html:217) -->
+<sui-badge variant="light" color="gray" [size]="bp.sizeBadge()">{{ product.category }}</sui-badge>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-badge color="gray" [size]="bp.sizeBadge()">{{ product.category }}</sui-badge>
+```
+
+Metadato al lado de un nombre
+
+```html
+<!-- ❌ mal: filled es para un conteo que pide acción o encima de una foto; «Por defecto» es un metadato sin carga, va gray lighter (pages/customer/profile/profile.html:122) -->
+<sui-badge variant="filled" color="orange" [size]="bp.sizeBadge()">Por defecto</sui-badge>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-badge color="gray" [size]="bp.sizeBadge()">Por defecto</sui-badge>
+```
+
 ## Ejemplo
 
 ```html
 <!-- Metadato en una lista: lighter (default) -->
-<sui-badge color="green">Conectado</sui-badge>
+<sui-badge color="green" [size]="bp.sizeBadge()">Conectado</sui-badge>
 
 <!-- Estado vivo -->
-<sui-badge color="green" type="with-dot">Abierto</sui-badge>
+<sui-badge color="green" type="with-dot" [size]="bp.sizeBadge()">Abierto</sui-badge>
 
 <!-- Conteo que pide acción -->
-<sui-badge color="orange" variant="filled" type="number">3</sui-badge>
+<sui-badge color="orange" variant="filled" type="number" [size]="bp.sizeBadge()">3</sui-badge>
 ```

package/docs/sui-banner/README.md

@@ -119,19 +119,37 @@ El banner **no tiene `size`**: mide 44 px de alto en web, centrado; en mobile (
 | 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) | `medium` (20 px) | propuesta, falta aprobación |
+| el link de acción | **pendiente (P8)**: `medium` con el área de 44 en la barra (a, recomendada) o `large` (b) | `medium` (20 px) | web: D16, dueño 05-10-2026 · mobile: pendiente P8 (antes decía `large` como propuesta) |
 | la X de cerrar | se ve de 24 px; **se toca en 44 × 44** | se ve de 24; 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 |
 
 ```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-link-button slot="action" variant="modifiable" [underline]="true" (clicked)="renovar()">Renovar plan</sui-link-button>
 </sui-banner>
 ```
 
-`size="large"` del link-button ya está publicado (la app usa 0.22.0). Hoy el link del banner de la
-suscripción (`subscription-banner.html:10`) sigue con `medium` en las dos.
+`size="large"` del link-button ya está publicado (la app usa 0.24.1), pero mientras P8 siga
+pendiente el link queda en su default (`medium`), que es como está hoy el de la suscripción
+(`subscription-banner.html:10`).
+
+### Por dispositivo (D16)
+
+La barra **no tiene `size`**: su alto lo decide el ancho (≤ 767 px envuelve con mínimo de 44; más
+ancho, 44 fijos en una línea). Lo único que cambia por dispositivo es el link del slot `action`, que
+sigue la fila de `link-button` de D16.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380) | link `medium` | la barra envuelve; la X se toca en 44 × 44 |
+| celular (380–767) | link **pendiente (P8)** | la barra envuelve; la X se toca en 44 × 44. Ningún size del link llega a 44 por sí solo |
+| tablet táctil (`pointer: coarse`) | link **pendiente (P8)** | con ≥ 768 px la barra va en una línea y la X se toca en 40 × 40: el área de 44 sale con `max-width: 767px`, no con el puntero (el mixin `sui-tactil` está propuesto, sin aprobar) |
+| computadora (`pointer: fine`) | link `medium` | 44 px fijos, una línea; X en 40 × 40 |
+
+Ultrawide: igual que la computadora; el banner ya ocupa todo el ancho de su contenedor.
+
+En master-pedidos: el banner no lleva `[size]`; el link va sin `[size]` (su default `medium`)
+hasta que se decida P8. No hay helper en `BreakpointsService` para el link.
 
 ## «No usar»: por qué no hoy y cuándo sí
 
@@ -188,6 +206,53 @@ y `[slot=action]` (el link).
 - 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.
 
+## Bien y mal
+
+**Aviso de un pedido, no de toda la app**
+
+```html
+<!-- ❌ mal: es el cobro de UN pedido, dentro de su detalle (driver-order-detail.html:410) -->
+<sui-banner [variant]="pagaElLocal() ? 'error' : 'info'" variantStyle="filled"
+  [title]="quienPagaTitulo()" [description]="cobro" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-alert [variant]="pagaElLocal() ? 'error' : 'info'" [variantStyle]="pagaElLocal() ? 'filled' : 'lighter'"
+  [title]="quienPagaTitulo()" [description]="cobro" />
+```
+
+**Plan por vencer: acompaña, no grita**
+
+```html
+<!-- ❌ mal: `light` no se usa hoy; el aviso que acompaña es `lighter` (subscription-banner.html:7) -->
+<sui-banner [variant]="isDanger() ? 'error' : 'warning'"
+  [variantStyle]="isDanger() ? 'filled' : 'light'" [title]="bannerTitle()" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-banner [variant]="isDanger() ? 'error' : 'warning'"
+  [variantStyle]="isDanger() ? 'filled' : 'lighter'" [title]="bannerTitle()" />
+```
+
+**Modo de toda la app hecho a mano**
+
+```html
+<!-- ❌ mal: barra propia con #fff y un <button> suelto (impersonation-banner.ts:17) -->
+<div class="imp" role="status">
+  <span class="imp__text">Estás administrando <strong>{{ t.name }}</strong> como super admin</span>
+  <button type="button" class="imp__exit" (click)="exit()">Salir</button>
+</div>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-banner variant="warning" variantStyle="filled" [title]="'Estás administrando ' + t.name + ' como super admin'">
+  <sui-link-button slot="action" variant="modifiable" [underline]="true" (clicked)="exit()">Salir</sui-link-button>
+</sui-banner>
+```
+
 ## Ejemplo
 
 ```html

package/docs/sui-brand-logo/README.md

@@ -58,10 +58,10 @@ Regla corta: **la marca es lo que se muestra → brand-logo · es un ícono más
 |---|---|---|---|
 | `xs` | 16 | Dentro de un texto o de un tag. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
 | `sm` | 20 | Dentro de un botón (lo usa `sui-social-button`). | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
-| `md` (default) | 24 | Fila de una lista. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
-| `lg` | 32 | Tarjeta de contacto (el tamaño del Figma). | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `md` (default) | 24 | Fila de una lista o tarjeta de contacto, en la computadora, la tablet y el celular chico (ver «Por dispositivo (D16)»). | canon (aprobado por el dueño, 05-10-2026, bloque B1) · por dispositivo: D16, dueño 05-10-2026 |
+| `lg` | 32 | Tarjeta de contacto o fila en el celular (380–767), un paso arriba del `md` de la computadora; es el tamaño del Figma. También el logo con `href` en la computadora (propuesta). | canon (aprobado por el dueño, 05-10-2026, bloque B1) · por dispositivo: D16, dueño 05-10-2026 |
 | `xl` | 40 | Tarjeta grande. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
-| `2xl` | 48 | Lo pide `sui-content-label` en tamaño grande. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `2xl` | 48 | Lo pide `sui-content-label` en tamaño grande. Y el logo con `href` en todo lo táctil: es el único que llega a 44. | canon (aprobado por el dueño, 05-10-2026, bloque B1) · con `href`: canon (dueño, 04-10-2026) |
 
 ### `href`, `target`, `rel`, `disabled`, `ariaLabel`
 
@@ -75,19 +75,19 @@ Usos de hoy que rompen la regla: **0**.
 
 ## Tamaño en mobile y en web
 
-En mobile se lee y se toca con el dedo, así que va más grande; en web, más chico. En las
-pantallas que se usan en los dos (panel del local, super admin) se elige con el servicio de
-breakpoints de la app (`bp`, en `services/breakpoints.service.ts`); en las que solo existen en
-el celular (cliente, repartidor) va directo el valor de mobile. Todo es **propuesta**, salvo lo
-marcado canon.
+En mobile se lee y se toca con el dedo, así que va más grande; en web, más chico. Se elige
+siempre con el servicio de breakpoints de la app (`bp`, en `services/breakpoints.service.ts`),
+también en las pantallas que solo existen en el celular (cliente, repartidor): con D16 el celular
+chico y la tablet llevan el valor de web en lo que no se toca (D16, dueño 05-10-2026). Todo es
+**propuesta**, salvo lo marcado canon.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
 | tarjeta de contacto, fila | `lg` (32) | `md` (24) | canon (dueño, 05-10-2026, P1 b) |
-| como link (con `href`, se toca) | `2xl` (48) | `lg` (32) | mobile: canon (decisión del dueño 04-10-2026, piso táctil 44: `2xl` es el único size que llega) · web: propuesta |
+| como link (con `href`, se toca) | `2xl` (48), también en la tablet táctil | `lg` (32) | mobile: canon (decisión del dueño 04-10-2026, piso táctil 44: `2xl` es el único size que llega) · tablet: D16, dueño 05-10-2026 (lo que se toca) · web: propuesta |
 
 ```html
-<sui-brand-logo company="instagram" [size]="bp.isMobile() ? '2xl' : 'lg'" [href]="url" target="_blank"
+<sui-brand-logo company="instagram" [size]="bp.tactil() ? '2xl' : 'lg'" [href]="url" target="_blank"
                 ariaLabel="Síguenos en Instagram" />
 ```
 
@@ -95,6 +95,25 @@ Con `href` el logo **es** el área táctil: en mobile tiene que medir 44 px o m
 tamaño que llega es `2xl` (48). Si se quiere un logo de 32 px tocable, el link va en un
 contenedor de 44 px.
 
+### Por dispositivo (D16)
+
+Sin `href` no se toca: sigue la fila de `brand-logo` de D16 (sube un paso solo en el celular). Con
+`href` se toca: va `2xl` en todo lo táctil.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380) | `md` · con `href`: `2xl` | lo que no se toca va con el valor de web; el link no tiene otro size que llegue a 44 |
+| celular (380–767) | `lg` · con `href`: `2xl` | el valor de mobile de la tabla de arriba |
+| tablet táctil (`pointer: coarse`) | `md` · con `href`: `2xl` | se toca con el dedo: el link también pide 44 |
+| computadora (`pointer: fine`) | `md` · con `href`: `lg` | el `lg` del link en la computadora sigue siendo propuesta |
+
+Ultrawide: igual que la computadora.
+
+En master-pedidos (no hay helper propio): `[size]="bp.celular() ? 'lg' : 'md'"` sin `href`;
+`[size]="bp.tactil() ? '2xl' : 'lg'"` con `href`. Los size de la fila son los de «tarjeta de
+contacto, fila»: en otro uso (`xs` en un texto, `xl` en una tarjeta grande) se sube un paso igual,
+solo en `bp.celular()`.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -132,13 +151,57 @@ Outputs: ninguno.
 - Con `href` y `disabled` a la vez, no se vuelve link.
 - El `aria-label` por defecto es «Logo de <Marca>» (en español desde el 04-10-2026); con `href` pasa uno que diga adónde lleva.
 
+## Bien y mal
+
+**Logo que lleva a la red del negocio**
+
+```html
+<!-- ❌ mal: con `href` el logo ES el área táctil, y `lg` (32) no llega a 44 en el celular -->
+<sui-brand-logo company="instagram" size="lg" [href]="url" target="_blank"
+                ariaLabel="Síguenos en Instagram" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-brand-logo company="instagram" [size]="bp.tactil() ? '2xl' : 'lg'" [href]="url" target="_blank"
+                ariaLabel="Síguenos en Instagram" />
+```
+
+**Entrar con Google**
+
+```html
+<!-- ❌ mal: botón armado a mano con el logo adentro -->
+<sui-button variant="stroke" color="neutral" [size]="bp.sizeControl()">
+  <sui-brand-logo company="google" size="sm" /> Continuar con Google
+</sui-button>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-social-button brand="google" variantStyle="stroke" [size]="bp.sizeControl()" label="Continuar con Google" />
+```
+
+**WhatsApp como un ícono más del botón**
+
+```html
+<!-- ❌ mal: dentro de un botón la marca no es el contenido, y el <img> no toma el color del texto -->
+<sui-button variant="stroke" color="neutral" [size]="bp.sizeControl()">
+  <sui-brand-logo company="whatsapp" size="sm" /> Escríbenos
+</sui-button>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-button variant="stroke" color="neutral" [size]="bp.sizeControl()" leftIcon="whatsapp-line">Escríbenos</sui-button>
+```
+
 ## Ejemplo
 
 ```html
-<!-- Tarjeta de soporte -->
-<sui-brand-logo company="whatsapp" size="lg" />
+<!-- Tarjeta de soporte: no se toca, sube un paso solo en el celular -->
+<sui-brand-logo company="whatsapp" [size]="bp.celular() ? 'lg' : 'md'" />
 
-<!-- Red del negocio, como link -->
-<sui-brand-logo company="instagram" size="2xl" [href]="tenant.instagramUrl" target="_blank"
+<!-- Red del negocio, como link: se toca, 2xl en todo lo táctil -->
+<sui-brand-logo company="instagram" [size]="bp.tactil() ? '2xl' : 'lg'" [href]="tenant.instagramUrl" target="_blank"
                 ariaLabel="Síguenos en Instagram" />
 ```

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

@@ -52,6 +52,17 @@ no se usa en mobile.
 @if (!bp.isMobile()) { <sui-breadcrumbs [items]="ruta()" /> }
 ```
 
+### Por dispositivo (D16)
+
+No aplica: no tiene `size` y mide 20 px fijos en todo dispositivo. Ni la miga ni `sui-breadcrumbs`
+se ocultan solos (no tienen `@media` ni lógica para eso): **lo decide la pantalla que usa la ruta**,
+con su propio `@if (!bp.isMobile())`. Con eso no se muestra en el celular chico ni en el celular, y
+sí en la computadora y el ultrawide. En la tablet táctil con 768 px o más `bp.isMobile()` es falso, la
+ruta se muestra y la miga de 20 px no llega al piso de 44 de lo táctil: no hay size que lo arregle y
+queda sin decidir, igual que en `sui-breadcrumbs`.
+
+En master-pedidos: sin `[size]`; la pantalla envuelve `sui-breadcrumbs` en `@if (!bp.isMobile())`.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -85,6 +96,46 @@ no se usa en mobile.
   `SuiBreadcrumbEntry`. No son lo mismo.
 - No trae separador: el separador lo pone `sui-breadcrumbs`.
 
+## Bien y mal
+
+**Ruta armada a mano**
+
+```html
+<!-- ❌ mal: separador propio y activo a mano; sui-breadcrumbs ya hace las dos cosas -->
+<sui-breadcrumb-item label="Productos" href="/empresa/productos" />
+<sui-icon name="arrow-right-s-line" />
+<sui-breadcrumb-item label="Hamburguesas" [active]="true" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-breadcrumbs [items]="[{ label: 'Productos', href: '/empresa/productos' }, { label: 'Hamburguesas' }]" />
+```
+
+**Inicio solo con el ícono**
+
+```html
+<!-- ❌ mal: sin texto ni `ariaLabel`, el lector de pantalla no dice adónde lleva -->
+<sui-breadcrumb-item icon="home-5-line" href="/empresa/inicio" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-breadcrumb-item icon="home-5-line" ariaLabel="Inicio" href="/empresa/inicio" />
+```
+
+**Navegar dos veces**
+
+```html
+<!-- ❌ mal: con `href` el clic ya navega y además emite `clicked` -->
+<sui-breadcrumb-item label="Productos" href="/empresa/productos" (clicked)="router.navigateByUrl('/empresa/productos')" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-breadcrumb-item label="Productos" href="/empresa/productos" />
+```
+
 ## Ejemplo
 
 ```html

package/docs/sui-breadcrumbs/README.md

@@ -67,6 +67,16 @@ Alto fijo de **20 px** (texto 14, ícono 20), sin `size`. **No tiene tamaño par
 }
 ```
 
+### Por dispositivo (D16)
+
+No aplica: no tiene `size` y sus migas miden 20 px fijos (texto 14, ícono 20) en todo dispositivo;
+lo que cambia por dispositivo es si se muestra, no su tamaño. En el celular chico y el celular no se
+usa (flecha de volver); en la computadora y el ultrawide va tal cual. En la tablet táctil con 768 px o
+más `bp.isMobile()` es falso y la ruta se muestra, con migas de 20 px que no llegan al piso de 44 de
+lo táctil: no hay size que lo arregle y no está decidido si se oculta también ahí.
+
+En master-pedidos: sin `[size]`; se muestra con `@if (!bp.isMobile())`.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -111,6 +121,44 @@ type SuiBreadcrumbDivider = 'arrow' | 'slash' | 'dot';
 - 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).
 
+## Bien y mal
+
+**Ruta en el celular**
+
+```html
+<!-- ❌ mal: en 390 px la fila se corta y compite con el título -->
+<sui-breadcrumbs [items]="ruta()" />
+```
+
+```html
+<!-- ✅ bien -->
+@if (!bp.isMobile()) { <sui-breadcrumbs [items]="ruta()" /> }
+```
+
+**El nombre del nivel**
+
+```html
+<!-- ❌ mal: un id nunca es el nombre de nada -->
+<sui-breadcrumbs [items]="[{ label: 'Productos', href: '/empresa/productos' }, { label: producto.id }]" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-breadcrumbs [items]="[{ label: 'Productos', href: '/empresa/productos' }, { label: producto.name }]" />
+```
+
+**Navegar dos veces**
+
+```html
+<!-- ❌ mal: los ítems con `href` ya navegan; `navigate` sale igual y vuelve a navegar -->
+<sui-breadcrumbs [items]="ruta()" (navigate)="router.navigateByUrl($event.href ?? '')" />
+```
+
+```html
+<!-- ✅ bien: con `href`, sin `(navigate)` -->
+<sui-breadcrumbs [items]="ruta()" />
+```
+
 ## Ejemplo
 
 ```html

package/docs/sui-button/README.md

@@ -103,8 +103,9 @@ Uso medido el 04-10-2026: 123 `large`, 93 `small`, 58 `medium` (5 por default),
 | `2xsmall` (28) | No usar: es chico. Las acciones de ícono en tablas van en `medium` `onlyIcon`; si de verdad no entra, `sui-compact-button`. | escala según la guía del DS; no usarlo: canon (dueño, 05-10-2026, D16), reemplaza el «cuándo» del bloque B13 |
 | `xlarge` (52) | Extensión de SUI. Sin uso hoy. | canon (aprobado por el dueño, 03-10-2026) |
 
-En la app el patrón responsive ya es `[size]="bp.isMobile() ? 'large' : 'medium'"` (o
-`bp.controlSize()`).
+En la app el patrón responsive es `[size]="bp.sizeControl()"`: `large` en el celular y la tablet
+táctil, `medium` en la computadora (D16, dueño 05-10-2026). **No uses `bp.controlSize()` en un
+botón**: es el de checkbox/radio/switch y da `large` en la computadora. Ver «Por dispositivo (D16)».
 
 ## «No usar»: por qué no hoy y cuándo sí
 
@@ -138,11 +139,15 @@ en la acción principal. En la computadora, `medium` (40); la tablet va como el
 | acción en una tabla | — (no hay tablas en mobile) | `medium` (40) | canon (dueño, 05-10-2026, D16), antes `2xsmall` (03-10-2026) |
 | CTA de landing | `xlarge` (52) | `large` (48) | propuesta, falta aprobación |
 
-Patrón (`bp` = `BreakpointsService`, mobile hasta 767 px). Medido el 04-10-2026: 9 `sui-button` con este
-par exacto y 30 con algún tamaño por `bp`; en toda la app hay 142 `[size]` con este mismo par:
+Patrón (`bp` = `BreakpointsService`). Medido el 06-10-2026 en `master-pedidos/src/app`, sin
+prototipos ni vitrinas: 399 de 412 `sui-button` ya van con `bp.sizeControl()`; quedan 5 con
+`sizeAccionesCard()` de `master-drivers.ts:243` (`bp.isMobile()` solo: deja la tablet en `medium`),
+1 con `bp.controlSize()` (`checkout.html:392`), 1 en `small` (`notifications.html:50`), 2 sin
+`size` y 4 en `large` fijo (2 en el footer de `copy-text-dialog`, donde va bien; `cart.html:190` y
+`master-orders.html:662` no son footer de modal y en la computadora irían en `medium`):
 
 ```html
-<sui-button [size]="bp.isMobile() ? 'large' : 'medium'" …/>
+<sui-button [size]="bp.sizeControl()" …/>
 ```
 
 ### Piso táctil de 44 en el teléfono (canon, dueño 04-10-2026)
@@ -181,6 +186,23 @@ Vale para todos los componentes que tienen `size` `large` / `xlarge`:
 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.
 
+### Por dispositivo (D16)
+
+Fila `button` de la tabla D16 (dueño, 05-10-2026). Se toca, así que va por tipo de puntero además
+del ancho.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380 px) | `large` (48) | D16 pide `medium` con área tocable de 44; mientras el DS no estire el área de los `medium`, va `large` (interino) |
+| celular (380–767 px) | `large` (48) | |
+| tablet táctil (`pointer: coarse`) | `large` (48) | también se toca con el dedo: Apple pide 44 pt en el iPad |
+| computadora (`pointer: fine`) | `medium` (40) | también en tablas, filas y cabeceras; `small`, `xsmall` y `2xsmall` no se usan |
+
+Footer de modal: `large` en todos (D2). Ultrawide (≥ 1920 px): igual que la computadora, `medium`;
+el espacio extra va a ancho y columnas, no a botones más grandes.
+
+En master-pedidos: `[size]="bp.sizeControl()"`.
+
 ## API
 
 <!-- api:inicio -->
@@ -236,6 +258,46 @@ interface SuiFooterButtonConfig {
   disabled propio desde afuera.
 - Ya trae el arreglo de iOS para el `:active` pegado (`touchstart`/`touchend`): no lo agregues.
 
+## Bien y mal
+
+**Botón de ícono en una cabecera**
+
+```html
+<!-- ❌ mal: small (36) no llega a 44 en el teléfono y en la computadora va medium (pages/notifications/notifications.html:50) -->
+<sui-button variant="stroke" color="neutral" size="small" [onlyIcon]="true" leftIcon="check-double-line"
+            aria-label="Marcar todas como leídas" (click)="markAllAsRead()" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-button variant="stroke" color="neutral" [size]="bp.sizeControl()" [onlyIcon]="true" leftIcon="check-double-line"
+            aria-label="Marcar todas como leídas" (click)="markAllAsRead()" />
+```
+
+**El helper equivocado para el tamaño**
+
+```html
+<!-- ❌ mal: controlSize() es de checkbox/radio/switch y da large en la computadora (pages/customer/checkout/checkout.html:392) -->
+<sui-button [size]="bp.controlSize()" (click)="applyCoupon()">Aplicar</sui-button>
+```
+
+```html
+<!-- ✅ bien: large en celular y tablet táctil, medium en la computadora -->
+<sui-button [size]="bp.sizeControl()" (click)="applyCoupon()">Aplicar</sui-button>
+```
+
+**El botón que abre una confirmación de borrar**
+
+```html
+<!-- ❌ mal: filled error es para confirmar; este solo abre el modal (pages/empresa/about/about.html:46, igual en repartidor/about) -->
+<sui-button variant="filled" color="error" [size]="bp.sizeControl()" (click)="openDeleteModal()">Eliminar mi cuenta</sui-button>
+```
+
+```html
+<!-- ✅ bien: stroke error abre; el filled error queda para el «Sí, eliminar» del modal -->
+<sui-button variant="stroke" color="error" [size]="bp.sizeControl()" (click)="openDeleteModal()">Eliminar mi cuenta</sui-button>
+```
+
 ## Ejemplo
 
 ```html
@@ -249,6 +311,6 @@ interface SuiFooterButtonConfig {
 </sui-button>
 
 <!-- Solo ícono -->
-<sui-button variant="ghost" color="neutral" [size]="bp.isMobile() ? 'large' : 'medium'" leftIcon="pencil-line" [onlyIcon]="true"
+<sui-button variant="ghost" color="neutral" [size]="bp.sizeControl()" leftIcon="pencil-line" [onlyIcon]="true"
             aria-label="Editar" (click)="editar()" />
 ```