@ajuarezso/sui-design-system 0.24.1 → 0.25.1

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

@@ -47,8 +47,8 @@ otra marca: hoy Google y Apple.
 |---|---|---|---|
 | `google` + `stroke` | Iniciar sesión o registrarse con Google: fondo blanco, logo a color. | `pages/auth/login/login.html:39` («Continuar con Google») | canon (aprobado por el dueño, 03-10-2026) |
 | `apple` + `filled` | Iniciar sesión con Apple: negro lleno, como pide Apple. | `pages/auth/login/login.html:50` («Continuar con Apple») | canon (aprobado por el dueño, 03-10-2026) |
-| `google` + `filled` (rojo) | No: el botón de Google va en blanco. Es lo que sale si se olvida `variantStyle`. | — | propuesta |
-| `apple` + `stroke` | No: Apple va negro lleno en tema claro. | — | propuesta |
+| `google` + `filled` (rojo) | No: el botón de Google va en blanco. Es lo que sale si se olvida `variantStyle`. | — | canon (aprobado por el dueño, 05-10-2026, bloque B3) |
+| `apple` + `stroke` | No: Apple va negro lleno en tema claro. | — | canon (aprobado por el dueño, 05-10-2026, bloque B3) |
 | `facebook`, `x-twitter`, `linkedin`, `github`, `dropbox` (cualquier estilo) | No hay login con esas cuentas. | — | no usar · canon (aprobado por el dueño, 03-10-2026) |
 
 ### `onlyIcon`
@@ -70,11 +70,11 @@ otra marca: hoy Google y Apple.
 
 | prop | cuándo | fuente |
 |---|---|---|
-| `label` | Sin pasarlo sale «Continuar con Google» / «Continuar con Apple», que sirve igual para entrar y para registrarse. Pasarlo solo si el texto tiene que decir otra cosa. | propuesta |
-| `loading` | Desde el toque hasta que vuelve la ventana de la marca: cambia el logo por un spinner y deshabilita el botón. | propuesta (ya es la práctica del login) |
-| `disabled` | Mientras otro login está en curso, para que no se abran dos (en el login: `processingRedirect`). Nunca para una marca que no tiene login. | propuesta |
-| `href` | Solo si el login se hace navegando a una URL (OAuth por redirect web). Pinta un `<a>`. | propuesta |
-| `ariaLabel` | No hace falta: con texto se lee el texto; con `onlyIcon` el componente usa el label. | propuesta |
+| `label` | Sin pasarlo sale «Continuar con Google» / «Continuar con Apple», que sirve igual para entrar y para registrarse. Pasarlo solo si el texto tiene que decir otra cosa. | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `loading` | Desde el toque hasta que vuelve la ventana de la marca: cambia el logo por un spinner y deshabilita el botón. | canon (aprobado por el dueño, 05-10-2026, bloque B8); ya es la práctica del login |
+| `disabled` | Mientras otro login está en curso, para que no se abran dos (en el login: `processingRedirect`). Nunca para una marca que no tiene login. | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
+| `href` | Solo si el login se hace navegando a una URL (OAuth por redirect web). Pinta un `<a>`. | canon (aprobado por el dueño, 05-10-2026, bloque B10) |
+| `ariaLabel` | No hace falta: con texto se lee el texto; con `onlyIcon` el componente usa el label. | canon (aprobado por el dueño, 05-10-2026, bloque B5) |
 
 ## Tamaño en mobile y en web
 
@@ -94,11 +94,11 @@ con mouse, va un tamaño más chico. La app ya lo resuelve con `BreakpointsServi
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| login con Google o Apple | `large` (48), **ancho completo** (`width: 100%`) | `medium` (40), ancho del formulario | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono (alto) · propuesta (ancho, es lo que ya hace `pages/auth/login/login.html` con `.auth-page__provider-btn`) |
+| login con Google o Apple | `large` (48), **ancho completo** (`width: 100%`) | `medium` (40), ancho del formulario | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono (alto) · ancho: canon (aprobado por el dueño, 05-10-2026, bloque B1; es lo que ya hace `pages/auth/login/login.html` con `.auth-page__provider-btn`) |
 
 ```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

@@ -35,7 +35,7 @@ etiqueta → badge.**
 > «resaltar estados o condiciones en poco espacio», trae cuatro estados (`completed`,
 > `pending`, `failed`, `disabled`), dos estilos (`stroke`, `light`), ícono o punto, y un ícono
 > por estado en sus ejemplos (los mismos que pone SUI). No trae do/don't. Lo marcado
-> «según la guía del DS» sale de ahí; el resto es **propuesta, falta aprobación**.
+> «según la guía del DS» sale de ahí; lo marcado **canon** está aprobado; lo que sigue en **propuesta** espera decisión.
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 status-badges** (eran 3), sin contar
 > prototipos ni vitrinas (`master-preview`, `master-prototipos`, `mockup-sheets-*`, `dx/*`,
@@ -51,7 +51,7 @@ etiqueta → badge.**
 | `pending` | orange (`warning`) | Espera que alguien haga algo. | «Pendiente», «En revisión» | según la guía del DS (estado y color) |
 | `failed` | red (`error`) | Terminó mal. | «Rechazada», «Fallido», «Anulado» | según la guía del DS (estado y color) |
 | `disabled` | gray (`faded`) | Apagado o fuera de uso. | «Desactivado», «Vencido» | según la guía del DS (estado y color; es el default de la guía) |
-| `information` | blue (`information`) | Extensión SUI: avanza solo y nadie tiene que actuar. | «En proceso» | propuesta, falta aprobación |
+| `information` | blue (`information`) | Extensión SUI: avanza solo y nadie tiene que actuar. | «En proceso» | canon (aprobado por el dueño, 05-10-2026, bloque B3) |
 
 Es el mismo mapa que el badge aprobado (green bien, orange pendiente, red error, blue info,
 gray neutro), porque los dos pintan con los mismos tokens `--sui-state-*`.
@@ -63,10 +63,10 @@ gray neutro), porque los dos pintan con los mismos tokens `--sui-state-*`.
 | `appearance` | `stroke` (default) | Tablas y listas: fondo blanco, texto gris, solo el ícono lleva color. Es el que menos ruido hace cuando hay muchos. | según la guía del DS (default) |
 | `appearance` | `light` | El estado es **el** dato de la card o de la fila (fondo teñido, texto de color). | propuesta, falta aprobación |
 | `withDot` | `false` (default) | Ícono del estado. Lo normal. | según la guía del DS |
-| `withDot` | `true` con `stroke` | Tabla densa con la misma columna de estado en muchas filas, donde veinte íconos hacen ruido. | propuesta, falta aprobación |
-| `withDot` | `true` con `light` | **No usar** (ver abajo). | propuesta, falta aprobación |
+| `withDot` | `true` con `stroke` | Tabla densa con la misma columna de estado en muchas filas, donde veinte íconos hacen ruido. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `withDot` | `true` con `light` | **No usar** (ver abajo). | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 | `icon` | `''` (default) | Siempre el del estado: es la mitad de su significado. | según la guía del DS (ícono por estado en sus ejemplos) |
-| `icon` | nombre Remix | **No usar** (ver abajo). | propuesta, falta aprobación |
+| `icon` | nombre Remix | **No usar** (ver abajo). | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 
 ### `sui-status-badge` o `sui-badge`
 
@@ -98,10 +98,15 @@ dueño, 03-10-2026).
 
 ## Tamaño en mobile y en web
 
-Criterio de la app: **en mobile se lee y se toca con el dedo, así que va más grande; en web
-(desktop), más chico.** Mobile es `≤ 767 px`, el mismo corte de `BreakpointsService.isMobile()`
-en master-pedidos. Fuente: canon del dueño (03-10-2026), el mismo patrón que ya usan 27 controles
-de la app.
+Criterio de la app: **D16, tamaño por dispositivo** (canon, dueño, 05-10-2026), que reemplaza al
+«tamaño por plataforma» del 03-10-2026 (mobile grande, web chico). La columna «mobile» es el celular de
+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. 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 |
 |---|---|---|---|---|
@@ -117,15 +122,33 @@ 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) | 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) | propuesta: el tamaño es extensión SUI aprobada (03-10-2026); el «cuándo» falta aprobarlo |
+| 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) | 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 -->
@@ -157,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

@@ -26,7 +26,7 @@ Vehículo → Listo»).
 - Secciones que se visitan en cualquier orden: `sui-tab-menu-horizontal`.
 - Un solo paso: no hay nada que indicar.
 
-Regla corta (propuesta, falta aprobación): **pasos con nombre y orden → stepper · porcentaje →
+Regla corta (canon, aprobado por el dueño, 05-10-2026, bloque B2): **pasos con nombre y orden → stepper · porcentaje →
 progress-bar · secciones sin orden → tab menu.**
 
 ## Qué variante usar
@@ -46,17 +46,17 @@ progress-bar · secciones sin orden → tab menu.**
 
 | variant | cuándo | ejemplo real de la app | fuente |
 |---|---|---|---|
-| `horizontal` (default) | Flujo de **2 a 4 pasos** con nombre, arriba del contenido del paso. Mobile y web. | `pages/driver-onboarding/step-info/step-info.html:3` («Datos → Vehículo → Listo») | según la guía del DS (procesos secuenciales); el límite de pasos es propuesta |
-| `vertical` | Flujo de **5+ pasos** en web, en una columna al costado del formulario. | (sin uso) | según la guía del DS (la pieza existe); el cuándo es propuesta |
+| `horizontal` (default) | Flujo de **2 a 4 pasos** con nombre, arriba del contenido del paso. Mobile y web. | `pages/driver-onboarding/step-info/step-info.html:3` («Datos → Vehículo → Listo») | según la guía del DS (procesos secuenciales); el límite de pasos, canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `vertical` | Flujo de **5+ pasos** en web, en una columna al costado del formulario. | (sin uso) | según la guía del DS (la pieza existe); el cuándo, canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 | `dot` | Pantallas que se pasan de a una sin nombre: carrusel de bienvenida, fotos. | `pages/customer/store-browser/store-browser.html:214` (páginas de rubros del home) | según la guía del DS (puntos de carrusel) |
 
 ### `size`
 
 | size | qué cambia | cuándo | fuente |
 |---|---|---|---|
-| `small` (default) | punto de 8 · indicador de 20 · texto 14 | Web. | según la guía del DS (`small` es su default) |
-| `xsmall` | solo el punto: 4 px. Horizontal y vertical quedan igual que `small`. | Puntos sobre una foto o un banner chico, donde 8 px tapan. | según la guía del DS (el tamaño existe); el cuándo es propuesta |
-| `medium` | punto de 10 · indicador de 24 · texto 16 · card vertical de 44 | Mobile. Publicado desde la 0.20.0 (la app usa la 0.22.0). | canon (dueño: tamaño por plataforma, 03-10-2026) |
+| `small` (default) | punto de 8 · indicador de 20 · texto 14 | No usar: es chico. En web va `medium`. | el tamaño y el default: según la guía del DS · no usarlo: canon (dueño, 05-10-2026, D16) |
+| `xsmall` | solo el punto: 4 px. Horizontal y vertical quedan igual que `small`. | Puntos sobre una foto o un banner chico, donde 8 px tapan. | según la guía del DS (el tamaño existe); el cuándo, canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `medium` | punto de 10 · indicador de 24 · texto 16 · card vertical de 44 | Siempre: celular, tablet y computadora. Es el más grande que tiene, así que en el celular no sube un paso. Publicado desde la 0.20.0. | canon (dueño, 05-10-2026, D16); antes solo mobile (tamaño por plataforma, 03-10-2026) |
 
 ### Estado de cada paso (`currentStep`, `errorStep`)
 
@@ -65,30 +65,30 @@ progress-bar · secciones sin orden → tab menu.**
 | `completed` | índice menor que `currentStep` | pasos ya hechos (check verde) | según la guía del DS |
 | `active` | índice igual a `currentStep` | el paso en pantalla | según la guía del DS |
 | `default` | índice mayor que `currentStep` | lo que falta | según la guía del DS |
-| todos `completed` | `currentStep` = cantidad de pasos | la pantalla final («Listo») | propuesta, falta aprobación |
-| `error` | `errorStep` = índice | un flujo que se cortó en ese paso (pago rechazado, documento no aprobado). Extensión de SUI. | propuesta, falta aprobación |
+| todos `completed` | `currentStep` = cantidad de pasos | la pantalla final («Listo») | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
+| `error` | `errorStep` = índice | un flujo que se cortó en ese paso (pago rechazado, documento no aprobado). Extensión de SUI. | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
 
 ### `interactive`
 
 | valor | cuándo | fuente |
 |---|---|---|
-| `false` (default) | Los onboardings: se avanza con el botón «Continuar», no tocando el paso. | propuesta, falta aprobación |
+| `false` (default) | Los onboardings: se avanza con el botón «Continuar», no tocando el paso. | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
 | `true` | Los puntos de un carrusel (en el teléfono se tocan en 44 de alto, ver Tamaño), o pasos hechos que se pueden **volver a editar** en web (el horizontal mide 24 de alto). | propuesta, falta aprobación |
 
 ### `steps`, `count`, `ariaLabel`
 
 | input | cuándo | fuente |
 |---|---|---|
-| `steps` | Siempre en `horizontal` y `vertical`, con `label` en cada uno. | propuesta, falta aprobación |
+| `steps` | Siempre en `horizontal` y `vertical`, con `label` en cada uno. | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
 | `count` | Solo en `dot`, cuando los pasos no tienen nombre. Si pasas `steps`, `count` se ignora. | según el código |
-| `ariaLabel` | Default «Progreso». Cámbialo si hay más de un stepper en la pantalla («Pasos del registro»). | propuesta, falta aprobación |
+| `ariaLabel` | Default «Progreso». Cámbialo si hay más de un stepper en la pantalla («Pasos del registro»). | canon (aprobado por el dueño, 05-10-2026, bloque B5) |
 
 **Usos de hoy que rompen las reglas:**
 
 - **0 de variante o estado** en los onboardings: los 7 son horizontales de 2 o 3 pasos, y `step-complete` usa
   `currentStep = stepLabels.length` para marcar todo hecho (`pages/driver-onboarding/step-complete/step-complete.html:3`).
-- **7 sin tamaño por plataforma** (`medium` ya está publicado): los onboardings se hacen en el
-  teléfono y van con `[size]="bp.isMobile() ? 'medium' : 'small'"`. Ejemplos:
+- **7 en `small`** (`medium` ya está publicado): con D16 (05-10-2026) van `size="medium"` en el
+  celular, la tablet y la computadora (es su size más grande). Ejemplos:
   `pages/customer-onboarding/step-phone/step-phone.html:3`, `pages/business-onboarding/step-info/step-info.html:3`.
 - **A discutir, 1 `interactive` en mobile:** `pages/customer/store-browser/store-browser.html:214`
   usa los puntos `medium` como paginador tocable en el home del cliente. Desde el 04-10-2026 cada
@@ -98,12 +98,12 @@ progress-bar · secciones sin orden → tab menu.**
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| horizontal arriba de un paso | `medium` (indicador 24, texto 16) | `small` (indicador 20, texto 14) | canon (dueño: tamaño por plataforma, 03-10-2026) |
-| vertical al costado | no se usa (no entra al lado del formulario) | `small` | propuesta, falta aprobación |
-| puntos de carrusel | `medium` (10, se toca en 22 × 44) | `small` (8) | tamaño: propuesta, falta aprobación · área de 44: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono |
+| horizontal arriba de un paso | `medium` (indicador 24, texto 16) | `medium` | canon (dueño, 05-10-2026, D16); reemplaza al web `small` del 03-10-2026 |
+| vertical al costado | no se usa (no entra al lado del formulario) | `medium` | canon (dueño, 05-10-2026, D16) |
+| puntos de carrusel | `medium` (10, se toca en 22 × 44) | `medium` (10) | tamaño: canon (dueño, 05-10-2026, D16) (`medium` es el más grande que tiene) · área de 44: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono |
 
 ```html
-<sui-stepper [steps]="pasos" [currentStep]="paso - 1" [size]="bp.isMobile() ? 'medium' : 'small'" />
+<sui-stepper [steps]="pasos" [currentStep]="paso - 1" size="medium" />
 ```
 
 Sin `interactive` el tamaño solo afecta lo que se lee. Con `interactive`, en el teléfono
@@ -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
@@ -175,5 +232,5 @@ type SuiStepperSize = 'small' | 'xsmall' | 'medium';   // medium: extensión SUI
   variant="horizontal"
   [steps]="[{ label: 'Datos' }, { label: 'Vehículo' }, { label: 'Listo' }]"
   [currentStep]="1"
-  [size]="bp.isMobile() ? 'medium' : 'small'" />
+  size="medium" />
 ```

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

@@ -29,35 +29,38 @@ Regla corta: **local en un listado del cliente → store-card · local en un pan
 > (`deliveryText`, `distanceText`) desde que la tarjeta y el checkout cobraban distinto.
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-card`): **2
-> store-cards en 2 archivos**: favoritos del cliente (`pages/customer/favorites/favorites.html:121`,
+> store-cards en 2 archivos**: favoritos del cliente (`pages/customer/favorites/favorites.html:117`,
 > con `deliveryText` y `distanceText`) y la cola de aprobación
-> (`pages/super-admin/master-approvals/master-approvals.html:32`, en vista previa). El inicio del
+> (`pages/super-admin/master-approvals/master-approvals.html:31`, en vista previa). Líneas
+> revisadas el 06-10-2026. El inicio del
 > cliente arma sus filas de locales con clases propias.
 
 ### Los estados (salen de `store`)
 
 | estado | cuándo | fuente |
 |---|---|---|
-| `isOpen: true` | Abierto: chip verde «Abierto». | propuesta |
-| `isOpen: false` | Cerrado: chip «Cerrado» y la portada en gris; sigue abriendo la carta (se puede mirar). | propuesta |
-| `isSuspended: true` | No se puede pedir: «No disponible», toda la tarjeta al 60 % y sin link. | propuesta |
-| `isOwnerPreview` + `ownerPreviewStatus` | Vista previa: «Borrador», «En revisión» o «Rechazado»; sin corazón, sin nota ni distancia (solo ubicación y envío). | propuesta |
+| `isOpen: true` | Abierto: chip verde «Abierto». | según el código |
+| `isOpen: false` | Cerrado: chip «Cerrado» y la portada en gris; sigue abriendo la carta (se puede mirar). | según el código |
+| `isSuspended: true` | No se puede pedir: «No disponible», toda la tarjeta al 60 % y sin link. | según el código |
+| `isOwnerPreview` + `ownerPreviewStatus` | Vista previa: «Borrador», «En revisión» o «Rechazado»; sin corazón, sin nota ni distancia (solo ubicación y envío). | según el código |
 
 ### Las piezas
 
 | prop | cuándo | fuente |
 |---|---|---|
-| `store` (obligatorio) | Siempre, con `SuiStoreCardData`. | propuesta |
-| `deliveryText` string | **Siempre en pantallas nuevas**: el texto del envío calculado por la app (`StateService.computeDeliveryFee`). | propuesta (precedente: favoritos) |
-| `deliveryText = null` | No hay envío que mostrar: la columna desaparece y el distrito deja de cortarse. | propuesta |
-| `deliveryText` sin pasar | La tarjeta lo deduce de `deliveryType` (Gratis / Recojo / Courier / S/ X). Solo para no romper lo viejo. | propuesta |
-| `distanceText` | Lo mismo para la distancia: un rango mientras es estimada («menos de 500 m»), el número cuando la ruta se midió («475 m»). `null` la quita. | propuesta |
-| `isFavorite` + `(toggleFavorite)` | El corazón lleno o vacío; el padre guarda el favorito. | propuesta |
-| `(ratingClicked)` | La nota abre las opiniones y la info del local (`StoreRatingsModalService`). | propuesta |
-| `disableLink` | La tarjeta no navega (una vitrina, una lámina, una vista previa). | propuesta |
-
-**Usos de hoy que rompen las reglas:** 0. A mirar: la cola de aprobación no pasa
-`deliveryText` (deduce el envío del `deliveryType`).
+| `store` (obligatorio) | Siempre, con `SuiStoreCardData`. | según el código |
+| `deliveryText` string | **Siempre en pantallas nuevas**: el texto del envío calculado por la app (`StateService.computeDeliveryFee`). | canon (aprobado por el dueño, 05-10-2026, bloque B9); precedente: favoritos |
+| `deliveryText = null` | No hay envío que mostrar: la columna desaparece y el distrito deja de cortarse. | según el código |
+| `deliveryText` sin pasar | La tarjeta lo deduce de `deliveryType` (Gratis / Recojo / Courier / S/ X). Solo para no romper lo viejo. | según el código |
+| `distanceText` | Lo mismo para la distancia: un rango mientras es estimada («menos de 500 m»), el número cuando la ruta se midió («475 m»). `null` la quita. | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `isFavorite` + `(toggleFavorite)` | El corazón lleno o vacío; el padre guarda el favorito. | según el código |
+| `(ratingClicked)` | La nota abre las opiniones y la info del local (`StoreRatingsModalService`). | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `disableLink` | La tarjeta no navega (una vitrina, una lámina, una vista previa). | según el código |
+
+**Usos de hoy que rompen las reglas:** 1. Favoritos pasa `small` en la computadora
+(`pages/customer/favorites/favorites.html:117`, `[size]="bp.isMobile() ? 'large' : 'small'"`): con
+D16 va `medium` (ver «Por dispositivo»). A mirar: la cola de aprobación no pasa `deliveryText`
+(deduce el envío del `deliveryType`).
 
 ## Tamaño en mobile y en web
 
@@ -73,16 +76,36 @@ El ancho lo da el contenedor. El `size` cambia **el corazón de favorito**, en l
 | uso | mobile | web | fuente |
 |---|---|---|---|
 | tarjeta | ancho completo | celda de una grilla de 2–3 columnas (≥ 300 de ancho) | lo que hay en la app |
-| corazón de favorito | `large` (44) | `small` (36) | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono |
+| corazón de favorito | `large` (44) | `medium` (40) | mobile: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono · web: canon (dueño, 05-10-2026, D16), antes `small` (el default del componente: hay que pasarlo) |
 | nota (abre las opiniones) | `large`: se ve igual (≈ 38) y se toca en 44 de alto con un `::before` invisible que no se estira a los lados (no pisa la columna de al lado) | ≈ 38: padding 4 × 2 + etiqueta de 10 px + gap 2 + valor de 13 px, con el `line-height` heredado | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono (área) · medido del `.scss` (alto visible) |
 
 ```html
-<sui-store-card [store]="local" [size]="bp.isMobile() ? 'large' : 'small'" />
+<sui-store-card [store]="local" [size]="bp.sizeControl()" />
 ```
 
-`medium` (40) queda para quien ya lo usa: no llega al piso de 44. **Favoritos no pasa `size`**
-(`pages/customer/favorites/favorites.html`): en el teléfono el corazón queda en 36 hasta que la
-app le pase `[size]="bp.isMobile() ? 'large' : 'small'"` (cambio de la app, no del DS).
+`medium` (40) es el de la computadora (D16); la tablet va como el teléfono, porque se toca.
+**Favoritos pasa `small` en la computadora** (`pages/customer/favorites/favorites.html:117`,
+`[size]="bp.isMobile() ? 'large' : 'small'"`): el corazón queda en 36 y en un iPad de 768 o más
+también, porque `isMobile()` no mira el puntero. Va `[size]="bp.sizeControl()"` (cambio de la app,
+no del DS).
+
+### Por dispositivo (D16)
+
+El corazón y la nota se tocan: la tarjeta sigue la fila «lo que se toca». Fuente: D16, dueño
+05-10-2026 (tabla por componente: «el default del componente es `small`: hay que pasar `size`»).
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380) | `large` (interino) | D16 pide `medium` con área de 44, pero el DS todavía no estira el corazón de 40 a 44: hasta que lo haga, se queda `large` |
+| celular (380–767) | `large` | corazón de 44 y la nota tocable en 44 de alto |
+| tablet táctil (`pointer: coarse`) | `large` | se toca igual que el teléfono |
+| computadora (`pointer: fine`) | `medium` | corazón de 40; nunca `small` (el default) |
+
+En el ultrawide, igual que en la computadora: el espacio extra va a más columnas en la grilla, no
+a una tarjeta más grande.
+
+En master-pedidos: `[size]="bp.sizeControl()"` (`large` en todo celular y pantalla táctil,
+`medium` en la computadora).
 
 ## «No usar»: por qué no hoy y cuándo sí
 
@@ -139,11 +162,51 @@ app le pase `[size]="bp.isMobile() ? 'large' : 'small'"` (cambio de la app, no d
 - Los íconos usan `color="var(--sui-primary-base, #fa7319)"`: el hex es respaldo, no se repite
   afuera.
 
+## Bien y mal
+
+Corazón en la computadora
+
+```html
+<!-- ❌ mal: small (36) en la computadora y en el iPad; D16 pide medium y large (pages/customer/favorites/favorites.html:117) -->
+<sui-store-card [size]="bp.isMobile() ? 'large' : 'small'" [store]="fav" [isFavorite]="true" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-store-card [size]="bp.sizeControl()" [store]="fav" [isFavorite]="true" />
+```
+
+Envío y distancia en un listado nuevo
+
+```html
+<!-- ❌ mal: sin deliveryText la tarjeta deduce el envío del deliveryType y puede cobrar distinto que el checkout (mismo patrón que pages/super-admin/master-approvals/master-approvals.html:31, a mirar) -->
+<sui-store-card [store]="local" [size]="bp.sizeControl()" />
+```
+
+```html
+<!-- ✅ bien: el texto llega escrito; null quita la columna -->
+<sui-store-card [store]="local" [size]="bp.sizeControl()"
+  [deliveryText]="envioDeLaTarjeta(local)" [distanceText]="distanciaDeLaTarjeta(local)" />
+```
+
+Tarjeta en una vitrina
+
+```html
+<!-- ❌ mal: sin disableLink la tarjeta navega a /cliente/restaurante/:id desde una lámina -->
+<sui-store-card [store]="local" [size]="bp.sizeControl()" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-store-card [store]="local" [size]="bp.sizeControl()" [disableLink]="true" />
+```
+
 ## Ejemplo
 
 ```html
 <sui-store-card
   [store]="local"
+  [size]="bp.sizeControl()"
   [isFavorite]="true"
   [deliveryText]="envioDeLaTarjeta(local)"
   [distanceText]="distanciaDeLaTarjeta(local)"