@ajuarezso/sui-design-system 0.25.0 → 0.25.1

package/docs/sui-select/README.md

@@ -110,14 +110,36 @@ y las opciones de la lista; el alto no cambia (las opciones bajan 2 de padding p
 | uso | mobile | web | fuente |
 |---|---|---|---|
 | campo de formulario | `large` (48) | `medium` (40) | mobile `large`: canon (decisión del dueño 04-10-2026, piso táctil 44: `medium` 40 no llega y `large` 48 es el primer size que sí) · web `medium`: canon (aprobado por el dueño, 05-10-2026, bloque B1) |
-| filtro de una barra | `large` (48) | `medium` (40) | mobile `large`: canon (decisión del dueño 04-10-2026, piso táctil 44: `large` 48 es el primer size que llega) · web `medium`: canon (dueño, 05-10-2026, D16) (hoy `pages/orders/orders.html:257` va en `small`: se migra) |
+| filtro de una barra | `large` (48) | `medium` (40) | mobile `large`: canon (decisión del dueño 04-10-2026, piso táctil 44: `large` 48 es el primer size que llega) · web `medium`: canon (dueño, 05-10-2026, D16) (el `small` de `pages/orders/orders.html:257` ya se migró a `bp.sizeControl()`) |
 | dentro de una tabla | no aplica | `medium` (40) | canon (dueño, 05-10-2026, D16): nada en `xsmall` (la guía del DS lo usa en tablas densas) |
 | `xlarge` (52) | no usar | no usar | canon (aprobado por el dueño, 05-10-2026, bloque B6): queda más alto que el botón `large` del footer |
 
 ```html
-<sui-select [size]="bp.isMobile() ? 'large' : 'medium'" label="Distrito" … />   <!-- bp = BreakpointsService -->
+<sui-select [size]="bp.sizeControl()" label="Distrito" … />   <!-- bp = BreakpointsService · D16, dueño 05-10-2026 -->
 ```
 
+### Por dispositivo (D16)
+
+Fila `select` de la tabla D16 (dueño, 05-10-2026): se decide por el tipo de puntero además del ancho.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380 px) | `large` (48) | interino: D16 pide `medium` con área tocable de 44; hasta que el DS la estire, se queda el grande (nota ¹ de D16) |
+| celular (380–767 px) | `large` (48) | el primer size que llega al piso táctil de 44 |
+| tablet táctil (`pointer: coarse`) | `large` (48) | Apple pide 44 pt también en iPad; con `bp.isMobile()` el iPad quedaba en `medium` 40 |
+| computadora (`pointer: fine`) | `medium` (40) | también en filtros de barra y dentro de tablas; nunca `small` ni `xsmall` |
+
+Ultrawide (≥ 1920 px): igual que la computadora, `medium`. El espacio extra va a ancho máximo y columnas, no a un campo más alto.
+
+En master-pedidos: `[size]="bp.sizeControl()"`. Re-medido el 06-10-2026: 52 de 56 `<sui-select>` ya lo usan. Faltan 4:
+
+- `pages/driver/driver-dashboard/driver-dashboard.html:1507`: `size="large"` fijo por pedido del dueño (22-09-2026),
+  pendiente de confirmar si D16 lo reemplaza.
+- `pages/super-admin/master-preview/master-preview.html:807` y `:813`: sin `size`, salen en `medium` (el default) en
+  todos los dispositivos. Es la vitrina del super admin.
+- `pages/super-admin/master-preview/_ruta-pedido/ruta-pedido.html:12`: sin `size`, sale en `medium`. Es la pantalla de
+  diagnóstico `/dx/ruta-pedido` (auditor de rutas del super admin), no una vitrina.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -176,12 +198,59 @@ decoración propia del campo (gana sobre ícono, imagen y bandera).
   label, con el placeholder), apunta al listbox abierto (`aria-controls`) y anuncia la opción
   resaltada con las flechas (`aria-activedescendant`). Hint y error van en `aria-describedby`.
 
+## Bien y mal
+
+**Filtro de período con 3 opciones**
+
+```html
+<!-- ❌ mal: 3 opciones excluyentes que se aplican al tocar, escondidas en un menú (pages/discounts/discounts.html:49) -->
+<sui-select [size]="bp.sizeControl()" placeholder="Período"
+            [options]="periodOptions" [value]="selectedPeriod()"
+            (valueChange)="selectedPeriod.set($event ?? '7days')" />
+```
+
+```html
+<!-- ✅ bien: 2 a 4 opciones excluyentes → sui-segmented-control (canon, dueño 04-10-2026) -->
+<sui-segmented-control [size]="bp.tactil() ? '2xlarge' : 'medium'"
+                       [tabs]="periodos" [(active)]="periodo" />
+```
+
+**El valor que vuelve del select**
+
+```html
+<!-- ❌ mal: `$any` es un `any` disfrazado y además deja pasar el `null` (pages/super-admin/super-admin.html:317) -->
+<sui-select [size]="bp.sizeControl()" label="Plan" placeholder="Elige…"
+            [options]="planSelectOptions()" [value]="subPlan()"
+            (valueChange)="subPlan.set($any($event))" />
+```
+
+```html
+<!-- ✅ bien: opciones tipadas (SuiSelectOption<string>[]) y el null resuelto en el template -->
+<sui-select [size]="bp.sizeControl()" label="Plan" placeholder="Elige…"
+            [options]="planSelectOptions()" [value]="subPlan()"
+            (valueChange)="subPlan.set($event ?? 'crecimiento')" />
+```
+
+**El size por dispositivo**
+
+```html
+<!-- ❌ mal: solo mira el ancho; el iPad (≥ 768, táctil) recibe `medium` 40, bajo el piso de 44 -->
+<sui-select [size]="bp.isMobile() ? 'large' : 'medium'" label="Distrito"
+            placeholder="Elige el distrito" [options]="distritos()" />
+```
+
+```html
+<!-- ✅ bien: el helper de D16 (`large` en celular y tablet táctil, `medium` en la computadora) -->
+<sui-select [size]="bp.sizeControl()" label="Distrito"
+            placeholder="Elige el distrito" [options]="distritos()" />
+```
+
 ## Ejemplo
 
 ```html
 <sui-select label="Distrito" [required]="true" placeholder="Elige tu distrito"
             [options]="distritos()" [disabled]="!provinciaId()"
             [error]="intentado() && !distritoId()" errorMessage="Elige tu distrito"
-            [size]="bp.isMobile() ? 'large' : 'medium'"
+            [size]="bp.sizeControl()"
             [value]="distritoId()" (valueChange)="distritoId.set($event ?? '')" />
 ```

package/docs/sui-sidebar/README.md

@@ -44,11 +44,11 @@ Regla corta: **navegación del rol → sidebar · secciones de una pantalla →
 | `brand` | `{ name: 'Master Pedidos', subtitle: '<Rol>', logo: 'assets/app-icon.png', fallback: 'M' }`. En empresa, el nombre del local. | práctica de la app (4 de 4) |
 | `showHeaderButton` + `headerButtonActive` + panel `[header-panel]` | El botón del header abre el **cambio de rol** (o de negocio/sucursal en empresa). El panel se proyecta con `<div header-panel>` y adentro van `sui-dropdown-item mode="option" size="large"`. El cliente lo muestra solo en mobile. | práctica de la app (4 de 4) |
 | tres secciones con rótulo | `items` + `itemsLabel` (lo de todos los días), `secondaryItems` + `secondaryItemsLabel` (dinero o crecimiento), `supportingItems` + `supportingItemsLabel` (cuenta, administración: va anclado abajo). Rótulos en sentence case: «Operación», «Dinero», «Cuenta». | práctica de la app (4 de 4) |
-| `activeRoute` | Siempre `[activeRoute]="currentUrl()"`, aunque los items tengan `route`: así el activo se resuelve por prefijo (`/cliente/pedidos/123` deja marcado «Pedidos»). | práctica de la app (4 de 4) |
+| `activeRoute` | No hace falta si los items de navegación llevan `route`: el `<a>` usa `routerLinkActive` y marca por prefijo (`/cliente/pedidos/123` deja «Mis pedidos» activo). `activeRoute` solo marca items **sin** `route`, y por `value` exacto (`activeRoute="pedidos"`), para demos sin router (`sui-sidebar.ts:369-412`). Los 4 layouts pasan `[activeRoute]="currentUrl()"`, pero no cambia nada: todos sus items de navegación tienen `route` y la URL nunca es igual al `value` de un item-acción. | comportamiento del `.ts` · práctica de la app (4 de 4 lo pasan, sin efecto) |
 | `profile` | Nombre + `avatarUrl` (nunca `photoURL`) + correo. | canon (CLAUDE.md, «Fotos de otra persona»: el campo correcto es `avatarUrl`) |
 | cerrar sesión | Hoy **ningún** item usa `action: 'logout'`: el cierre real vive en el selector de rol y el «salir» del panel solo cambia de rol (`components/sidebar/sidebar.ts:367`). Los 4 layouts dejan `(logoutClicked)` conectado por si se agrega. | práctica de la app |
-| `[(mobileOpen)]` + `closeOnItemClick` | Siempre los dos. Más `cerrarAlNavegar(...)` en el constructor del layout (ver Trampas). | canon (CANON-SUI §1.1) |
-| `search` | `{ placeholder: 'Buscar...', shortcut: '⌘K' }` y el layout **filtra** los items con `searchValue` (el componente no filtra). | práctica de la app (4 de 4) |
+| `[(mobileOpen)]` + `closeOnItemClick` | Siempre los dos (`closeOnItemClick` ya es `true` por defecto; los 4 layouts lo pasan explícito). Más `cerrarAlNavegar(...)` en el constructor del layout (ver Trampas). | canon (CANON-SUI §1.1) |
+| `search` | `{ shortcut: '⌘K' }` (el placeholder por defecto ya es «Buscar…», con elipsis) y el layout **filtra** los items con `searchValue` (el componente no filtra). | buscador: práctica de la app (4 de 4) · `shortcut: '⌘K'`: práctica de la app (3 de 4; el cliente no lo pasa, `layouts/customer/customer-layout.html:12`) · la elipsis «…»: canon (CANON-SUI, copy); los 4 layouts todavía pasan «Buscar...» (ver «Bien y mal») |
 | `indicatorColor` | Default `brand` (naranja). No se cambia. | canon del DS (accent = marca) |
 | `collapsed` | Solo el cliente lo usa, con un item «colapsar», y **solo en web**: `[collapsed]="colapsado() && !bp.isMobile()"`. | práctica de la app (1 uso) |
 
@@ -87,6 +87,16 @@ con el fondo, con Escape, al tocar un item (`closeOnItemClick`) y —por el help
 al terminar cualquier navegación. Cerrado queda `inert` y `aria-hidden`: el foco no se mete.
 Respeta las safe areas de arriba, izquierda y abajo.
 
+### Por dispositivo (D16)
+
+El sidebar **no tiene `size`**: D16 (dueño, 05-10-2026) no le da un tamaño que pasar. El alto de los items lo pone el DS por
+ancho: 52 en el cajón (≤ 767 px, `padding: 14px` + ícono 24) y 36 en la columna (> 767 px). Hueco conocido: una tablet táctil
+(iPad, ≥ 768 px y `pointer: coarse`) recibe la columna con items de 36, bajo el piso de 44 que D16 pide para lo que se toca.
+Queda **pendiente del DS** (el mixin `sui-tactil` de la propuesta de D16, que todavía espera el sí del dueño); desde la app no
+se corrige.
+
+En master-pedidos: no se pasa `size`; lo único que depende del dispositivo es `[collapsed]="colapsado() && !bp.isMobile()"`.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -170,16 +180,62 @@ Slots: `[header-panel]` (debajo del header: el switcher), `[feature-card]` (al f
   filtra los items (`master-layout.ts:125`). Su placeholder por defecto es «Buscar…» (en español desde el 04-10-2026).
 - **`collapsed` no mira el viewport.** Con `collapsed` en `true`, el cajón de mobile también sale
   de 80 px. Condiciónalo: `[collapsed]="colapsado() && !bp.isMobile()"`.
-- Un item con `route` queda activo por `routerLinkActive` **y** por `activeRoute`; un item sin
-  `route` solo por `activeRoute` (por `value` exacto). Si no pasas `activeRoute`, los items-acción
-  nunca se marcan.
-- Cualquier `action` (no solo `'logout'`) anula el `route`: el item no navega.
+- Un item con `route` (y sin `action`) queda activo **solo** por `routerLinkActive`, por prefijo:
+  `isItemActive()` devuelve `false` para todo item con `route` (`sui-sidebar.ts:411`), así que
+  `activeRoute` no lo toca. Un item sin `route` solo por `activeRoute`, y por `value` exacto
+  (`sui-sidebar.ts:379`): pasarle la URL actual no lo marca nunca.
+- Cualquier `action` (no solo `'logout'`) anula el `route`: el item se pinta como `<button>`, no navega y
+  tampoco se marca activo (tiene `route`, así que `isItemActive()` da `false`, y no hay `routerLinkActive`).
 - El `title` nativo del host se borra (sin tooltip gris); en colapsado el tooltip va en cada item.
 - El cajón tiene `z-index: 300` sobre la barra inferior (200). Mientras está abierto el layout
   esconde la barra (`customer-layout.ts:66`); si armas un layout nuevo, haz lo mismo.
 - El comentario de cabecera del `.ts` todavía dice 240 px; el ancho real es 272 (`sui-sidebar.scss:50`).
 - Los items ya traen el arreglo de iOS del `:active` pegado: no lo agregues.
 
+## Bien y mal
+
+**El buscador**
+
+```html
+<!-- ❌ mal: tres puntos sueltos en vez de elipsis. Así en components/sidebar/sidebar.html:48, layouts/driver/driver-layout.html:9 y layouts/master/master-layout.html:10; layouts/customer/customer-layout.html:12 pasa el mismo «Buscar...» sin `shortcut` -->
+<sui-sidebar [search]="{ placeholder: 'Buscar...', shortcut: '⌘K' }"
+             [(searchValue)]="busqueda" [items]="items()" />
+```
+
+```html
+<!-- ✅ bien: sin placeholder sale «Buscar…»; el layout filtra `items()` con `busqueda` -->
+<sui-sidebar [search]="{ shortcut: '⌘K' }"
+             [(searchValue)]="busqueda" [items]="items()" />
+```
+
+**Colapsar**
+
+```html
+<!-- ❌ mal: `collapsed` no mira el viewport; el cajón de mobile también sale de 80 px, solo íconos -->
+<sui-sidebar [collapsed]="colapsado()" [items]="items()" [(mobileOpen)]="menuAbierto" />
+```
+
+```html
+<!-- ✅ bien: se colapsa solo en web (layouts/customer/customer-layout.html:7) -->
+<sui-sidebar [collapsed]="colapsado() && !bp.isMobile()" [items]="items()" [(mobileOpen)]="menuAbierto" />
+```
+
+**El item activo**
+
+```ts
+// ❌ mal: navegar con `action` + `(itemClicked)` y `router.navigate`. El item se pinta como `<button>`,
+// no como `<a routerLink>`, y nunca queda activo: sin `route`, `activeRoute` solo lo marca si es igual
+// a su `value` (`sui-sidebar.ts:379`), y `[activeRoute]="currentUrl()"` nunca lo es
+{ value: 'pedidos', label: 'Mis pedidos', icon: 'time-line', action: 'ir-a-pedidos' }
+```
+
+```ts
+// ✅ bien: con `route` (y sin `action`) el item es un `<a routerLink>` y `routerLinkActive` lo marca por
+// prefijo: `/cliente/pedidos/123` deja «Mis pedidos» activo sin pasar `activeRoute`
+// (layouts/customer/customer-layout.ts:287)
+{ value: 'pedidos', label: 'Mis pedidos', icon: 'time-line', route: '/cliente/pedidos' }
+```
+
 ## Ejemplo
 
 ```html
@@ -188,12 +244,11 @@ Slots: `[header-panel]` (debajo del header: el switcher), `[feature-card]` (al f
   [showHeaderButton]="true"
   [headerButtonActive]="switcherOpen()"
   (headerButtonClicked)="switcherOpen.set(!switcherOpen())"
-  [search]="{ placeholder: 'Buscar...', shortcut: '⌘K' }"
+  [search]="{ shortcut: '⌘K' }"
   [(searchValue)]="busqueda"
   itemsLabel="Operación" [items]="items()"
   secondaryItemsLabel="Dinero" [secondaryItems]="itemsDinero()"
   supportingItemsLabel="Cuenta" [supportingItems]="itemsCuenta()"
-  [activeRoute]="currentUrl()"
   [profile]="perfil()"
   [(mobileOpen)]="menuAbierto"
   [closeOnItemClick]="true"

package/docs/sui-slider/README.md

@@ -73,7 +73,8 @@ va un tamaño más chico. La app ya lo resuelve con `BreakpointsService`
 | slider con label (radio de cobertura, filtro de precio) | `large` (manija 24, riel 8) | `medium` (manija 16, riel 6) | canon (aprobado por el dueño, 03-10-2026) |
 
 ```html
-<sui-slider [size]="bp.isMobile() ? 'large' : 'medium'" label="Radio de cobertura" amount="12 km"
+<!-- D16, dueño 05-10-2026: `large` en todo lo táctil, `medium` con mouse -->
+<sui-slider [size]="(bp.isMobile() || bp.toque()) ? 'large' : 'medium'" label="Radio de cobertura" amount="12 km"
             [min]="1" [max]="15" [(value)]="radioKm" />
 ```
 
@@ -82,6 +83,24 @@ manija. Igual la barra mide menos de 44: el slider necesita aire arriba y abajo
 manija en 0 o en 100 sobresale media manija (12 px en `large`) del borde de la barra: el
 contenedor tiene que tener margen lateral.
 
+### Por dispositivo (D16)
+
+Fila `slider` de la tabla D16 (dueño, 05-10-2026). A diferencia del botón o el campo, el slider **no** tiene la excepción
+«`medium` + área 44» en el celular chico: va `large` en todo lo que se toca.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380 px) | `large` | manija 24, riel 8; con `medium` la manija de 16 es difícil de agarrar |
+| celular (380–767 px) | `large` | |
+| tablet táctil (`pointer: coarse`) | `large` | también se arrastra con el dedo |
+| computadora (`pointer: fine`) | `medium` | manija 16, riel 6 (el de la guía del DS) |
+
+Ultrawide (≥ 1920 px): igual que la computadora, `medium`.
+
+En master-pedidos: `[size]="(bp.isMobile() || bp.toque()) ? 'large' : 'medium'"`. No hay helper propio. Hoy da lo mismo que
+`bp.tactil()`, pero el servicio anuncia que `tactil` dejará fuera al celular chico cuando el DS estire el área de los
+`medium`, y el slider tiene que seguir en `large` ahí.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -138,10 +157,58 @@ Implementa `ControlValueAccessor` **solo para `single`**.
   El lector lee el valor con su unidad: en single, el texto de `amount` («12 km»); en range (o sin
   `amount`), el número + `unit`. En range cada manija se anuncia «<label>, mínimo» / «…, máximo».
 
+## Bien y mal
+
+**El valor arriba y flotando a la vez**
+
+```html
+<!-- ❌ mal: `amount` muestra «12 km» y el tooltip repite «12» sin unidad (components/driver-coverage-modal/driver-coverage-modal.html:83) -->
+<sui-slider label="Radio de cobertura" [amount]="radiusKm() + ' km'"
+            [min]="minKm" [max]="maxKm" [tooltip]="true"
+            [value]="radiusKm()" (valueChange)="onRadiusChange($event)" />
+```
+
+```html
+<!-- ✅ bien: con `amount`, sin tooltip -->
+<sui-slider [size]="(bp.isMobile() || bp.toque()) ? 'large' : 'medium'"
+            label="Radio de cobertura" [amount]="radiusKm() + ' km'" [min]="minKm" [max]="maxKm"
+            [value]="radiusKm()" (valueChange)="onRadiusChange($event)" />
+```
+
+**El size en una pantalla del repartidor**
+
+```html
+<!-- ❌ mal: sin `size` sale `medium` (manija 16) en el teléfono (components/driver-coverage-modal/driver-coverage-modal.html:83) -->
+<sui-slider label="Radio de cobertura" [amount]="radiusKm() + ' km'" [min]="minKm" [max]="maxKm"
+            [value]="radiusKm()" (valueChange)="onRadiusChange($event)" />
+```
+
+```html
+<!-- ✅ bien: D16, `large` en todo lo táctil -->
+<sui-slider [size]="(bp.isMobile() || bp.toque()) ? 'large' : 'medium'"
+            label="Radio de cobertura" [amount]="radiusKm() + ' km'" [min]="minKm" [max]="maxKm"
+            [value]="radiusKm()" (valueChange)="onRadiusChange($event)" />
+```
+
+**Un mínimo y un máximo**
+
+```html
+<!-- ❌ mal: dos sliders sueltos para un rango; nada impide que el mínimo pase al máximo -->
+<sui-slider label="Precio mínimo" [min]="0" [max]="100" [(value)]="precioMin" />
+<sui-slider label="Precio máximo" [min]="0" [max]="100" [(value)]="precioMax" />
+```
+
+```html
+<!-- ✅ bien: una barra con dos manijas -->
+<sui-slider type="range" label="Precio" [amount]="'S/ ' + precioMin() + ' – S/ ' + precioMax()"
+            [min]="0" [max]="100" [(minValue)]="precioMin" [(maxValue)]="precioMax" />
+```
+
 ## Ejemplo
 
 ```html
 <sui-slider
+  [size]="(bp.isMobile() || bp.toque()) ? 'large' : 'medium'"
   label="Radio de cobertura"
   [amount]="radioKm() + ' km'"
   [min]="1" [max]="15" [step]="1"

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

@@ -98,7 +98,7 @@ con mouse, va un tamaño más chico. La app ya lo resuelve con `BreakpointsServi
 
 ```html
 <sui-social-button brand="google" variantStyle="stroke" style="width: 100%"
-                   [size]="bp.isMobile() ? 'large' : 'medium'" (clicked)="loginGoogle()" />
+                   [size]="bp.sizeControl()" (clicked)="loginGoogle()" />   <!-- D16, dueño 05-10-2026 -->
 ```
 
 **Ancho completo**: `width: 100%` en el host estira el botón (arreglado en el DS el 03-10-2026 con
@@ -111,6 +111,23 @@ estira nunca. El host sigue siendo `inline-flex`: para el ancho completo va `wid
 No se estira el alto con CSS desde afuera: el logo y el padding no escalan. Para el teléfono va
 `size="large"`.
 
+### Por dispositivo (D16)
+
+Fila `social-button` de la tabla D16 (dueño, 05-10-2026), la misma que `sui-button`.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380 px) | `large` (48) | interino: D16 pide `medium` con área tocable de 44; hasta que el DS la estire, se queda el grande (nota ¹ de D16) |
+| celular (380–767 px) | `large` (48) | ancho completo, del mismo alto que el CTA de al lado |
+| tablet táctil (`pointer: coarse`) | `large` (48) | con `bp.isMobile()` el iPad quedaba en `medium` 40 |
+| computadora (`pointer: fine`) | `medium` (40) | |
+
+Ultrawide (≥ 1920 px): igual que la computadora, `medium`; el formulario de login no se ensancha.
+
+En master-pedidos: `[size]="bp.sizeControl()"`, el mismo helper que `sui-button` (devuelve `'large' | 'medium'`, los dos
+sizes que tiene el componente). Hoy los 5 usos van con `bp.isMobile() ? 'large' : 'medium'`
+(`pages/auth/login/login.html:39` y `:50`, `pages/auth/register/register.html:86`, `:87` y `:94`): se migran.
+
 ## «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
@@ -160,12 +177,55 @@ en la columna de la derecha, se usa (aprobado por el dueño, 03-10-2026).
 - El output es `(clicked)`.
 - Ya trae el arreglo de iOS para el `:active` pegado: no lo agregues.
 
+## Bien y mal
+
+**Google sin estilo**
+
+```html
+<!-- ❌ mal: `variantStyle` arranca en `filled` y el botón de Google sale rojo lleno -->
+<sui-social-button brand="google" [size]="bp.sizeControl()" (clicked)="entrarConGoogle()" />
+```
+
+```html
+<!-- ✅ bien: Google en blanco con logo a color -->
+<sui-social-button brand="google" variantStyle="stroke" [size]="bp.sizeControl()" (clicked)="entrarConGoogle()" />
+```
+
+**La fila de marcas en el registro**
+
+```html
+<!-- ❌ mal: solo ícono y dos marcas sin login, deshabilitadas de adorno (pages/auth/register/register.html:86-94) -->
+<sui-social-button brand="x-twitter" variantStyle="stroke" [onlyIcon]="true" [disabled]="true" />
+<sui-social-button brand="google" variantStyle="stroke" [onlyIcon]="true" (clicked)="onGoogleRegister()" />
+<sui-social-button brand="linkedin" variantStyle="stroke" [onlyIcon]="true" [disabled]="true" />
+```
+
+```html
+<!-- ✅ bien: lo mismo que el login, con texto y solo las marcas que tienen login -->
+<sui-social-button brand="google" variantStyle="stroke" [size]="bp.sizeControl()"
+                   style="width: 100%" [loading]="loading()" (clicked)="onGoogleRegister()" />
+```
+
+**El size por dispositivo**
+
+```html
+<!-- ❌ mal: solo mira el ancho; en el iPad (≥ 768, táctil) queda en `medium` 40 (pages/auth/login/login.html:39) -->
+<sui-social-button brand="google" variantStyle="stroke"
+                   [size]="bp.isMobile() ? 'large' : 'medium'" (clicked)="entrarConGoogle()" />
+```
+
+```html
+<!-- ✅ bien: el helper de D16 -->
+<sui-social-button brand="google" variantStyle="stroke"
+                   [size]="bp.sizeControl()" (clicked)="entrarConGoogle()" />
+```
+
 ## Ejemplo
 
 ```html
 <!-- Login: Google en blanco, Apple negro lleno, los dos con texto -->
-<sui-social-button brand="google" variantStyle="stroke" [loading]="cargandoGoogle()"
+<sui-social-button brand="google" variantStyle="stroke" [size]="bp.sizeControl()" [loading]="cargandoGoogle()"
                    [disabled]="procesando()" (clicked)="entrarConGoogle()" />
-<sui-social-button brand="apple" variantStyle="filled" [loading]="cargandoApple()"
+<sui-social-button brand="apple" variantStyle="filled" [size]="bp.sizeControl()" [loading]="cargandoApple()"
                    [disabled]="procesando()" (clicked)="entrarConApple()" />
 ```

package/docs/sui-status-badge/README.md

@@ -103,8 +103,10 @@ Criterio de la app: **D16, tamaño por dispositivo** (canon, dueño, 05-10-2026)
 380 px o más y, en lo que se toca, también la tablet (`pointer: coarse`). La columna «web» es la
 computadora (`pointer: fine`) y, en lo que no se toca, también la tablet. En el celular chico
 (< 380 px) va `medium` a la vista, sin achicar el área de 44 de lo que se toca. **Nada en `small` ni
-`xsmall`**, salvo lo que el componente solo tiene en chico. Hoy la app corta con
-`BreakpointsService.isMobile()` (≤ 767 px), que todavía no mira el puntero ni los 380 px.
+`xsmall`**, salvo lo que el componente solo tiene en chico. En la app, `BreakpointsService` ya
+separa el celular chico (`bp.celularChico()`, < 380 px), el celular (`bp.celular()`, 380–767) y la
+pantalla táctil (`bp.toque()`); `bp.isMobile()` sola (≤ 767 px) mete al celular chico con el
+celular, y para lo que no se toca eso está mal.
 
 | size | alto | texto | ícono (caja) | punto |
 |---|---|---|---|---|
@@ -121,14 +123,32 @@ escala de badge (12/14/16) se mantiene. No es táctil: no tiene foco ni output.
 | uso | mobile | web | fuente |
 |---|---|---|---|
 | Estado en una fila, card o tabla | `large` (28) | `medium` (24) | canon (dueño, 05-10-2026, P1 b); el tamaño es extensión SUI aprobada (03-10-2026) |
-| Estado principal de una pantalla de detalle (el pedido que se mira) | `xlarge` (32) | `medium` (24) | propuesta: el tamaño es extensión SUI aprobada (03-10-2026); el «cuándo» falta aprobarlo |
+| Estado principal de una pantalla de detalle (el pedido que se mira) | `xlarge` (32) | `medium` (24) | D16, dueño 05-10-2026 (tabla por componente: «`xlarge` en el detalle»); el tamaño es extensión SUI aprobada (03-10-2026) |
 
 ```html
-<sui-status-badge status="completed" appearance="light" [size]="bp.isMobile() ? 'large' : 'medium'">Entregado</sui-status-badge>
+<sui-status-badge status="completed" appearance="light" [size]="bp.celular() ? 'large' : 'medium'">Entregado</sui-status-badge>
 ```
 
 No se agranda con CSS en la pantalla: se pasa `size`.
 
+### Por dispositivo (D16)
+
+El status-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` en el detalle) | 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` | es el más chico que tiene; no hay `small` |
+
+En el ultrawide, igual que en la computadora.
+
+En master-pedidos no hay helper propio: `[size]="bp.celular() ? 'large' : 'medium'"` (es lo mismo
+que devuelve `bp.sizeBadge()`, y los dos valores existen aquí). En el detalle:
+`[size]="bp.celular() ? 'xlarge' : 'medium'"`.
+
 ## API
 
 <!-- api:inicio -->
@@ -160,12 +180,50 @@ Slot: `<ng-content>` (el texto).
   distintos a propósito.
 - El host lleva `role="status"`: el lector de pantalla anuncia los cambios.
 
+## Bien y mal
+
+Distintivo del local
+
+```html
+<!-- ❌ mal: no es un trámite; pending con ícono propio se lee «algo avanza» (así estaba pages/customer/restaurant-menu/restaurant-menu.html hasta el 03-10-2026) -->
+<sui-status-badge status="pending" icon="vip-crown-2-fill" appearance="light">Local exclusivo</sui-status-badge>
+```
+
+```html
+<!-- ✅ bien: categoría o distinción → sui-badge (pink = destacado) -->
+<sui-badge color="pink" type="left-icon" [size]="bp.sizeBadge()"><sui-icon data-slot="start" name="vip-crown-2-fill" [size]="16" />Local exclusivo</sui-badge>
+```
+
+Estado del pedido
+
+```html
+<!-- ❌ mal: el pedido tiene más de cuatro estados (preparando, en camino…); «En camino» no es el final de un ciclo -->
+<sui-status-badge status="information">En camino</sui-status-badge>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-badge color="blue" [size]="bp.sizeBadge()">En camino</sui-badge>
+```
+
+Punto en una tabla densa
+
+```html
+<!-- ❌ mal: con light el fondo ya dice el color, el punto repite; y sin status sale verde (completed) -->
+<sui-status-badge appearance="light" [withDot]="true">Desactivado</sui-status-badge>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-status-badge status="disabled" [withDot]="true" [size]="bp.celular() ? 'large' : 'medium'">Desactivado</sui-status-badge>
+```
+
 ## Ejemplo
 
 ```html
 <!-- En una tabla de recargas: stroke (default) -->
-<sui-status-badge status="pending">En revisión</sui-status-badge>
+<sui-status-badge status="pending" [size]="bp.celular() ? 'large' : 'medium'">En revisión</sui-status-badge>
 
 <!-- El estado es el dato principal de la card -->
-<sui-status-badge status="failed" appearance="light">Rechazada</sui-status-badge>
+<sui-status-badge status="failed" appearance="light" [size]="bp.celular() ? 'large' : 'medium'">Rechazada</sui-status-badge>
 ```

package/docs/sui-stepper/README.md

@@ -115,6 +115,23 @@ horizontal sigue en 24 de alto con `medium`: con `interactive` queda para web. L
 Alto de cada pieza: horizontal `small` 20 y `medium` 24 (el indicador; la línea del texto mide lo
 mismo) · puntos 4 / 8 / 10 · card vertical `small` 36 (8 + 20 + 8) y `medium` 44.
 
+### Por dispositivo (D16)
+
+`medium` es el size más grande del stepper, así que no cambia por dispositivo: va `medium` en
+todos. Fuente: D16, dueño 05-10-2026 (tabla por componente).
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380) | `medium` | con `interactive`, los puntos se tocan en 22 × 44 |
+| celular (380–767) | `medium` | no sube un paso: no hay uno más grande |
+| tablet táctil (`pointer: coarse`) | `medium` | el área de 44 de los puntos hoy se prende solo hasta 767 px: en un iPad de 768 o más los puntos `interactive` se tocan en 10 × 10 |
+| computadora (`pointer: fine`) | `medium` | nunca `small` (el default): hay que pasar `size` |
+
+En el ultrawide, igual que en la computadora. `xsmall` solo para puntos sobre una foto o un banner
+chico (ver `size`).
+
+En master-pedidos: `size="medium"` fijo, sin helper (no depende del dispositivo).
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -168,6 +185,46 @@ type SuiStepperSize = 'small' | 'xsmall' | 'medium';   // medium: extensión SUI
 - `errorStep` gana sobre `currentStep`: los anteriores quedan hechos y los siguientes por hacer.
 - El activo usa `--sui-primary-base`, que en la app es naranja.
 
+## Bien y mal
+
+Stepper de un onboarding
+
+```html
+<!-- ❌ mal: sin size queda small, el default chico (pages/customer-onboarding/step-phone/step-phone.html:3 y los otros 6 onboardings) -->
+<sui-stepper variant="horizontal" [steps]="stepLabels" [currentStep]="currentStep - 1" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-stepper variant="horizontal" [steps]="stepLabels" [currentStep]="currentStep - 1" size="medium" />
+```
+
+Paso actual numerado desde 1
+
+```html
+<!-- ❌ mal: currentStep arranca en 0; con el número de la app marca como hecho el paso en pantalla -->
+<sui-stepper [steps]="stepLabels" [currentStep]="currentStep" size="medium" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-stepper [steps]="stepLabels" [currentStep]="currentStep - 1" size="medium" />
+```
+
+Puntos que llevan a una página
+
+```html
+<!-- ❌ mal: sin interactive los puntos son div y stepClick nunca sale -->
+<sui-stepper variant="dot" size="medium" [count]="paginas().length"
+             [currentStep]="pagina()" (stepClick)="irAPagina($event)" />
+```
+
+```html
+<!-- ✅ bien (como pages/customer/store-browser/store-browser.html:214) -->
+<sui-stepper variant="dot" size="medium" [count]="paginas().length" [currentStep]="pagina()"
+             [interactive]="true" ariaLabel="Páginas de rubros" (stepClick)="irAPagina($event)" />
+```
+
 ## Ejemplo
 
 ```html