@ajuarezso/sui-design-system 0.25.0 → 0.25.2

package/docs/sui-popover/README.md

@@ -32,8 +32,9 @@ una función nueva que conviene mostrar donde está («Aquí programas tus pedid
 > La guía del DS dice para qué es, pero no cuándo va cada pie ni cada posición. Lo marcado «según la
 > guía del DS» sale de su texto; «canon» es lo ya aprobado en la app; el resto es **propuesta**.
 >
-> Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos**, y ningún recorrido de
-> bienvenida hecho a mano. Todo lo de abajo es para el primer flujo que lo necesite.
+> Uso medido el 03-10-2026 en `master-pedidos/src/app` (re-medido el 06-10-2026, sin cambios): **0
+> usos** fuera de la página de guía de master-preview, y ningún recorrido de bienvenida hecho a
+> mano. Todo lo de abajo es para el primer flujo que lo necesite.
 
 ### Lo que sí dice la guía del DS
 
@@ -96,19 +97,37 @@ extensión SUI 03-10-2026).
 | uso | mobile | web | fuente |
 |---|---|---|---|
 | el panel | 320 px (cabe desde 352 px de pantalla) | 320 px | según el componente |
-| botones del pie | `large` (48) | `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) |
+| botones del pie | `large` (48), también en la tablet táctil | `medium` (40) | mobile: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono · tablet y web: D16, dueño 05-10-2026; antes `small` (el default del componente: hay que pasarlo) |
 | la X | se ve de 24, se toca en 40 | igual | canon (aprobado por el dueño, 03-10-2026) |
 
 ```html
-<sui-popover footer="stretch" [size]="bp.isMobile() ? 'large' : 'medium'" … />
+<sui-popover footer="stretch" [size]="bp.sizeControl()" … />
 ```
 
 `large` es el siguiente de la escala del `sui-button` (48, el del footer de los modales). `medium`
-(40) queda para quien ya lo usa: no llega al piso de 44.
+(40) es el de la computadora, con puntero fino (D16); no llega a 44, por eso no va en lo táctil.
 
 En mobile, si el recorrido es la bienvenida de la app, conviene una pantalla o un
 `sui-modal-sheet` por paso en vez del popover (propuesta, falta aprobación).
 
+### Por dispositivo (D16)
+
+Fila `popover` (botones del pie) de la tabla D16 (dueño, 05-10-2026). Los botones se tocan, así
+que van por tipo de puntero además del ancho. El panel no cambia: 320 px en todos.
+
+| 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). El panel de 320 cabe desde 352 px |
+| celular (380–767 px) | `large` (48) | |
+| tablet táctil (`pointer: coarse`) | `large` (48) | se toca con el dedo: Apple pide 44 pt también en el iPad |
+| computadora (`pointer: fine`) | `medium` (40) | el default es `small` (36): hay que pasarlo |
+
+Ultrawide (≥ 1920 px): igual que la computadora, `medium`.
+
+En master-pedidos: `[size]="bp.sizeControl()"` — el `size` del popover es el de sus `sui-button`,
+así que va el mismo helper del botón (`large` con `bp.tactil()`, `medium` si no). No uses
+`bp.isMobile()`: deja la tablet táctil en `medium`.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 Hoy el popover entero tiene **0 usos**; esto es lo que no se usaría aunque llegue un flujo nuevo.
@@ -168,6 +187,52 @@ Slot: `[data-slot=body]` reemplaza título y descripción.
   (crecen si el texto no entra). Hasta el 03-10-2026 no pasaba: el `.scss` apuntaba a
   `.sui-popover__btn` y el template pone `.sui-popover__action`.
 
+## Bien y mal
+
+Botones del pie
+
+```html
+<!-- ❌ mal: sin size queda en small, botones de 36. Sale de la página de guía, no de un uso real
+     (pages/super-admin/master-preview/_guia-moleculas/avisos.ts:224) -->
+<sui-popover position="top-center" icon="wallet-3-line" title="Aquí ves lo que ganaste hoy"
+  [doubleButton]="false" nextLabel="Entendido" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-popover position="top-center" icon="wallet-3-line" title="Aquí ves lo que ganaste hoy"
+  [doubleButton]="false" nextLabel="Entendido" [size]="bp.sizeControl()" />
+```
+
+Recorrido con puntos
+
+```html
+<!-- ❌ mal: sin step, los puntos dicen «1 de 4» aunque el recorrido tenga 3 pasos -->
+<sui-popover footer="stepper" icon="calendar-schedule-line" title="Programa tus pedidos"
+  [size]="bp.sizeControl()" (back)="anterior()" (next)="siguiente()" (dismissed)="saltar()" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-popover footer="stepper" [step]="{ current: 2, total: 3 }" icon="calendar-schedule-line"
+  title="Programa tus pedidos" [size]="bp.sizeControl()"
+  (back)="anterior()" (next)="siguiente()" (dismissed)="saltar()" />
+```
+
+Ícono del tema
+
+```html
+<!-- ❌ mal: sin icon sale una persona (user-6-line), que no dice nada de programar -->
+<sui-popover title="Programa tus pedidos" description="Elige el día y la hora."
+  [size]="bp.sizeControl()" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-popover icon="calendar-schedule-line" title="Programa tus pedidos"
+  description="Elige el día y la hora." [size]="bp.sizeControl()" />
+```
+
 ## Ejemplo
 
 ```html
@@ -175,10 +240,11 @@ Slot: `[data-slot=body]` reemplaza título y descripción.
 <sui-popover position="top-left" icon="calendar-schedule-line"
   title="Programa tus pedidos" description="Elige el día y la hora, y el pedido entra solo a la cocina."
   footer="stepper" [step]="{ current: 2, total: 3 }"
-  backLabel="Atrás" nextLabel="Siguiente"
+  backLabel="Atrás" nextLabel="Siguiente" [size]="bp.sizeControl()"
   (back)="anterior()" (next)="siguiente()" (dismissed)="saltar()" />
 
 <!-- Aviso suelto con una sola salida -->
 <sui-popover position="bottom-center" icon="wallet-3-line" title="Aquí ves lo que ganaste hoy"
-  [doubleButton]="false" nextLabel="Entendido" (next)="cerrar()" (dismissed)="cerrar()" />
+  [doubleButton]="false" nextLabel="Entendido" [size]="bp.sizeControl()"
+  (next)="cerrar()" (dismissed)="cerrar()" />
 ```

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

@@ -30,10 +30,11 @@ Regla corta: **producto en la grilla de la carta → product-card · producto en
 > de la carta de la app. La card **dibuja, no decide**: el precio, si se vende ahora y la
 > etiqueta de no disponible le llegan ya resueltos.
 >
-> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-card`): **3
+> Uso medido el 03-10-2026 y re-medido el 06-10-2026 en `master-pedidos/src/app` (misma exclusión
+> que `sui-card`; las líneas son las del 06-10-2026): **3
 > product-cards en 2 archivos**: la carta del cliente
 > (`pages/customer/restaurant-menu/restaurant-menu.html:323` y `:386`) y la grilla del local
-> (`pages/products/products.html:145`, con `action="edit"`).
+> (`pages/products/products.html:147`, con `action="edit"`).
 
 ### Las piezas
 
@@ -54,10 +55,13 @@ Regla corta: **producto en la grilla de la carta → product-card · producto en
 
 Outputs: `openDetail` (toque en la card), `add`, `increment`, `decrement`, `edit`.
 
-**Usos de hoy que rompen las reglas:** 0. **Pendiente de migrar:** el precio tachado y la chapa de
-descuento ya existen en el DS (`precioLista`, ver «Precio con descuento»), pero la carta los sigue
-dibujando afuera (`pages/customer/restaurant-menu/restaurant-menu.scss:426`, deuda anotada) y
-ninguna de las 3 cards pasa `precioLista` ni `size`.
+**Usos de hoy que rompen las reglas:** 3 (medido el 06-10-2026). Las 3 cards pasan
+`[size]="bp.isMobile() ? 'large' : 'small'"` (`products.html:147`, `restaurant-menu.html:323` y
+`:386`): `small` en la computadora y en la tablet táctil, cuando D16 pide `medium` y `large`. Va
+`bp.sizeControl()` (ver «Por dispositivo (D16)»). **Pendiente de migrar:** el precio tachado y la
+chapa de descuento ya existen en el DS (`precioLista`, ver «Precio con descuento»), pero la carta
+los sigue dibujando afuera (`pages/customer/restaurant-menu/restaurant-menu.scss:426`, deuda
+anotada) y ninguna de las 3 cards pasa `precioLista`.
 
 ## Tamaño en mobile y en web
 
@@ -77,14 +81,33 @@ lápiz sí siguen al lado del precio.
 | uso | mobile | web | fuente |
 |---|---|---|---|
 | grilla de la carta | 2 columnas (`1fr 1fr`, gap 12) | `repeat(auto-fill, minmax(220px, 1fr))` desde 600 px y `minmax(180px, 1fr)` en desktop | lo que hay en la app |
-| botón «+», lápiz, stepper | `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) |
+| botón «+», lápiz, stepper | `large` (44), también en la tablet táctil | `medium` (40) | mobile: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono · tablet y web: D16, dueño 05-10-2026; antes `small` (el default del componente: hay que pasarlo) |
 
 ```html
-<sui-product-card [size]="bp.isMobile() ? 'large' : 'medium'" … />
+<sui-product-card [size]="bp.sizeControl()" … />
 ```
 
 `medium` (40) es el de la computadora (D16); la tablet va como el teléfono, porque se toca.
 
+### Por dispositivo (D16)
+
+Fila `product-card` de la tabla D16 (dueño, 05-10-2026). El «+», el lápiz y el stepper se tocan,
+así que van por tipo de puntero además del ancho.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380 px) | `large` (44) | D16 pide `medium` con área tocable de 44; mientras el DS no estire el área de los `medium`, va `large` (interino). El stepper baja a su propia línea |
+| celular (380–767 px) | `large` (44) | grilla de 2 columnas: el stepper baja a su propia línea |
+| tablet táctil (`pointer: coarse`) | `large` (44) | se toca con el dedo: Apple pide 44 pt también en el iPad |
+| computadora (`pointer: fine`) | `medium` (40) | el default es `small` (36): hay que pasarlo |
+
+Ultrawide (≥ 1920 px): igual que la computadora, `medium`; el espacio extra va a más columnas de
+la grilla, no a botones más grandes.
+
+En master-pedidos: `[size]="bp.sizeControl()"` — el «+» y el lápiz son la escala del `sui-button`,
+así que va el mismo helper (`large` con `bp.tactil()`, `medium` si no). No uses
+`bp.isMobile() ? 'large' : 'small'`: deja la tablet táctil y la computadora en `small`.
+
 ## Precio con descuento
 
 `precioLista` es el precio de referencia. Si es **mayor** que `price`, la card pinta el precio en
@@ -158,10 +181,55 @@ interface SuiProductCardFallback { variant?: 'name' | 'icon'; color?: string | n
 - Cada url nueva vuelve a mostrar el barrido de carga; si la miniatura falla, intenta con
   `fallbackUrl` antes de apagarlo.
 
+## Bien y mal
+
+Tamaño de los botones del pie
+
+```html
+<!-- ❌ mal: small (36) en la computadora y en la tablet táctil (pages/customer/restaurant-menu/restaurant-menu.html:323) -->
+<sui-product-card [size]="bp.isMobile() ? 'large' : 'small'"
+  [name]="product.name" [price]="product.price" (add)="onCardAdd(product)" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-product-card [size]="bp.sizeControl()"
+  [name]="product.name" [price]="product.price" (add)="onCardAdd(product)" />
+```
+
+La grilla del dueño del local
+
+```html
+<!-- ❌ mal: sin action="edit" el dueño ve el «+» del cliente, y en agotado ni eso -->
+<sui-product-card [size]="bp.sizeControl()" [name]="p.name" [price]="p.priceNum"
+  [available]="seVendeAhora(p)" (openDetail)="editProduct(p)" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-product-card [size]="bp.sizeControl()" action="edit" [name]="p.name" [price]="p.priceNum"
+  [available]="seVendeAhora(p)" (openDetail)="editProduct(p)" (edit)="editProduct(p)" />
+```
+
+Foto del producto
+
+```html
+<!-- ❌ mal: como string no hay respaldo si la miniatura falla, ni encuadre guardado -->
+<sui-product-card [size]="bp.sizeControl()" [name]="p.name" [price]="p.price"
+  [image]="p.thumbnailUrl" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-product-card [size]="bp.sizeControl()" [name]="p.name" [price]="p.price"
+  [image]="p.thumbnailUrl ? { url: p.thumbnailUrl, fallbackUrl: p.imageUrl, position: p.imagePosition ?? 50 } : null" />
+```
+
 ## Ejemplo
 
 ```html
 <sui-product-card
+  [size]="bp.sizeControl()"
   [name]="p.name"
   [description]="p.description ?? ''"
   [price]="p.price"

package/docs/sui-progress-bar/README.md

@@ -55,9 +55,9 @@ como «atención».
 
 | size | alto | cuándo | fuente |
 |---|---|---|---|
-| `small` | 4 px | Web: dentro de una card o una fila densa. | propuesta, falta aprobación |
-| `medium` (default) | 6 px | Web: lo normal y la barra principal. Mobile: dentro de una fila densa. Es la única altura de la guía. | según la guía del DS |
-| `large` | 8 px | Mobile: lo normal y la barra principal (descarga, meta del día). | propuesta, falta aprobación |
+| `small` | 4 px | Pendiente (P10). Era la barra de web en una card densa; D16 no deja nada en `small`, pero la opción recomendada de P10 (a) deja el saldo del repartidor en `small` como excepción escrita (decidido el 20-09-2026). | propuesta, espera P10 |
+| `medium` (default) | 6 px | Computadora, tablet y celular chico. Es la única altura de la guía. | según la guía del DS · D16, dueño 05-10-2026 (cuándo) |
+| `large` | 8 px | Celular de 380 px o más: lo normal y la barra principal (descarga, meta del día). | propuesta (P10 a), pendiente |
 | `xlarge` | 10 px | **No usar** (ver abajo). | propuesta, falta aprobación |
 
 ### `value` y `ariaLabel`
@@ -86,22 +86,47 @@ 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
+tiene las señales de D16: `celular()` (380–767 px), `celularChico()`, `toque()` y `tactil()`.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| Dentro de una fila o card densa | `medium` (6) | `small` (4) | propuesta, falta aprobación |
-| Lo normal, y la barra que es lo principal (descarga, meta del día) | `large` (8) | `medium` (6) | propuesta, falta aprobación |
+| Dentro de una fila o card densa | pendiente (P10) | `medium` (6) | web: D16, dueño 05-10-2026 · mobile: espera P10 (la excepción del saldo en `small` vive en `sui-progress-bar-label`) |
+| Lo normal, y la barra que es lo principal (descarga, meta del día) | `large` (8): propuesta (P10 a), pendiente | `medium` (6) | web: D16, dueño 05-10-2026 · mobile: espera P10 |
 
 ```ts
 readonly bp = inject(BreakpointsService); // master-pedidos: src/app/services/breakpoints.service.ts
 ```
 
+Si P10 se cierra en (a) o (c):
+
 ```html
-<sui-progress-bar [value]="progreso()" [size]="bp.isMobile() ? 'large' : 'medium'" ariaLabel="Subiendo la foto" />
+<sui-progress-bar [value]="progreso()" [size]="bp.celular() ? 'large' : 'medium'" ariaLabel="Subiendo la foto" />
 ```
 
+Va `bp.celular()` y no `bp.isMobile()`: `isMobile()` también incluye el celular chico, que en lo que
+no se toca lleva el valor de web (D16, dueño 05-10-2026).
+
+### Por dispositivo (D16)
+
+No se toca: sube un paso solo en el celular de 380 px o más (P1 b). El celular chico y la tablet
+van con el valor de la computadora.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380 px) | `medium` (6) | valor «web» |
+| celular (380–767 px) | `large` (8): propuesta (P10 a), pendiente | valor «mobile»: un paso más que la computadora, si P10 lo confirma |
+| tablet táctil (`pointer: coarse`) | `medium` (6) | no se toca, no necesita crecer |
+| computadora (`pointer: fine`) | `medium` (6) | |
+
+Ultrawide (≥ 1920 px): igual que la computadora; el espacio extra va a ancho, no a una barra más gruesa.
+
+**Pendiente (P10):** el valor del celular y si `small` queda como excepción del saldo del
+repartidor (20-09-2026). Decide el dueño.
+
+En master-pedidos: no hay helper. Si P10 confirma `large` en el celular,
+`[size]="bp.celular() ? 'large' : 'medium'"`.
+
 ## API
 
 <!-- api:inicio -->
@@ -129,6 +154,45 @@ Outputs: ninguno.
   `prefers-reduced-motion`. Nombre: `ariaLabel`, o `ariaLabelledby` (id de un texto visible), y si
   no hay ninguno se llama «Progreso» (04-10-2026: antes quedaba sin nombre).
 
+## Bien y mal
+
+Barra pelada sin nombre
+
+```html
+<!-- ❌ mal: sin ariaLabel el lector anuncia «Progreso» y no qué mide (pages/overview/components/overview-visitors/overview-visitors.html:22) -->
+<sui-progress-bar [value]="device.percentage" color="orange" />
+```
+
+```html
+<!-- ✅ bien: el color sigue igual; si pasa a blue espera P9 -->
+<sui-progress-bar [value]="device.percentage" color="orange" [ariaLabel]="'Visitas desde ' + device.name" />
+```
+
+El valor como fracción
+
+```html
+<!-- ❌ mal: value es de 0 a 100; 0.6 pinta casi vacía -->
+<sui-progress-bar [value]="b.progreso" ariaLabel="Meta del día" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-progress-bar [value]="b.progreso * 100" ariaLabel="Meta del día" />
+```
+
+Título y número armados a mano
+
+```html
+<!-- ❌ mal: el texto va suelto, con otra tipografía y otro espaciado -->
+<p class="subida__texto">Subiendo la foto · {{ progreso() }} %</p>
+<sui-progress-bar [value]="progreso()" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-progress-bar-label title="Subiendo la foto" [value]="progreso()" />
+```
+
 ## Ejemplo
 
 ```html

package/docs/sui-progress-bar-label/README.md

@@ -45,17 +45,17 @@ que mide** (blue neutro, green cumplido, orange pide atención, red perdido o ag
 | `type` | `on-right` | Sin título: barra y número en una línea, dentro de una fila que ya dice qué mide a la izquierda. | Pedidos por distrito en una tabla | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 | `title` | texto | Qué mide, en sentence case, sin punto: «Saldo restante», «Meta del día». | `pages/driver/driver-wallet/driver-wallet.html:43` | según la guía del DS |
 | `percentage` | `true` (default) | El porcentaje es la unidad que importa (una descarga). | `components/ota-update/ota-update.html:132` | según la guía del DS («80%») |
-| `percentage` | texto | Hay una unidad real: entregas, soles. «3 de 5 entregas», «S/ 12.40 de S/ 20.00». | `pages/driver/driver-dashboard/driver-dashboard.html:512` | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `percentage` | texto | Hay una unidad real: entregas, soles. «3 de 5 entregas», «S/ 12.40 de S/ 20.00». | `pages/driver/driver-dashboard/driver-dashboard.html:539` | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
 | `percentage` | `false` | El número ya está escrito al lado, o no significa nada. | — | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
 | `showBottom` + `description` | texto | Qué está pasando o qué hacer mientras avanza: «No cierres la app, estamos dejando todo listo.» | `components/ota-update/ota-update.html:132` | según la guía del DS («Advanced») |
 | `link` | texto o `{ label, href }` | La acción que resuelve lo que la barra avisa: «Recargar» cuando el saldo está en rojo. Va con `showBottom`. | — (sin usos) | según la guía del DS («Upgrade») · canon (aprobado por el dueño, 05-10-2026, bloque B9) (cuándo) |
-| `ariaLabel` | texto | Lo que mide, si el título no alcanza («Saldo restante sobre el saldo de cortesía»). | `pages/driver/driver-dashboard/driver-dashboard.html:240` | canon (aprobado por el dueño, 05-10-2026, bloque B5) |
+| `ariaLabel` | texto | Lo que mide, si el título no alcanza («Saldo restante sobre el saldo de cortesía»). | `pages/driver/driver-dashboard/driver-dashboard.html:282` | canon (aprobado por el dueño, 05-10-2026, bloque B5) |
 
 **Usos de hoy que rompen la regla — a discutir, 1:**
 `components/ota-update/ota-update.html:132` pinta la descarga en `orange`. Una descarga es avance
 neutro: con la regla de color va `blue`. En la app el naranja se lee como la marca, así que puede
 ser una decisión de marca y no un error: decide el dueño. Las de saldo y meta (`driver-wallet:43`,
-`driver-dashboard:240` y `:512`) ya pintan verde, naranja y rojo según el estado: cumplen.
+`driver-dashboard:282` y `:539`) ya pintan verde, naranja y rojo según el estado: cumplen.
 
 ## No usar: por qué no hoy y cuándo sí
 
@@ -71,26 +71,52 @@ 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
+tiene las señales de D16: `celular()` (380–767 px), `celularChico()`, `toque()` y `tactil()`.
 
 El `size` solo cambia la barra; el título y el número no cambian de tamaño.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| Dentro de una card o fila densa (saldo en el dashboard) | `medium` (6) | `small` (4) | propuesta, falta aprobación |
-| Lo normal, y la barra que es lo principal (descarga, meta del día) | `large` (8) | `medium` (6) | propuesta, falta aprobación |
+| Dentro de una card o fila densa (saldo en el dashboard) | pendiente (P10) | pendiente (P10) | P10 sigue abierta. D16 no deja nada en `small`, pero la opción recomendada de P10 (a) deja el saldo del repartidor en `small` como excepción escrita (decidido el 20-09-2026, ver el comentario de `pages/driver/driver-dashboard/driver-dashboard.html:279`). Decide el dueño |
+| Lo normal, y la barra que es lo principal (descarga, meta del día) | `large` (8): propuesta (P10 a), pendiente | `medium` (6) | web: D16, dueño 05-10-2026 · mobile: espera P10 |
 
 ```ts
 readonly bp = inject(BreakpointsService); // master-pedidos: src/app/services/breakpoints.service.ts
 ```
 
+Si P10 se cierra en (a) o (c), la barra normal va así (la meta del día, no el saldo):
+
 ```html
-<sui-progress-bar-label title="Saldo restante" [value]="balancePercent()"
-  [size]="bp.isMobile() ? 'large' : 'medium'" [color]="balanceColor()" />
+<sui-progress-bar-label title="Meta del día" [value]="metaPercent()"
+  [size]="bp.celular() ? 'large' : 'medium'" [color]="metaColor()" />
 ```
 
-Hoy las 4 de la app tienen un size fijo para las dos plataformas.
+Hoy las 4 de la app tienen un size fijo para todos los dispositivos, y una va en `small`
+(`pages/driver/driver-dashboard/driver-dashboard.html:284`, el saldo, desde el 20-09-2026). Si se
+queda como excepción o sube a `medium` / `large` espera P10.
+
+### Por dispositivo (D16)
+
+No se toca: sube un paso solo en el celular de 380 px o más (P1 b). El celular chico y la tablet
+van con el valor de la computadora. El size solo cambia la barra; el título y el número no se mueven.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380 px) | `medium` (barra de 6) | valor «web» |
+| celular (380–767 px) | `large` (barra de 8): propuesta (P10 a), pendiente | valor «mobile»: un paso más que la computadora, si P10 lo confirma |
+| tablet táctil (`pointer: coarse`) | `medium` (barra de 6) | no se toca, no necesita crecer |
+| computadora (`pointer: fine`) | `medium` (barra de 6) | |
+
+Ultrawide (≥ 1920 px): igual que la computadora.
+
+**Pendiente (P10): el saldo del repartidor.** Va en `small` en todos los dispositivos desde el
+20-09-2026. La opción recomendada de P10 (a) lo deja así como excepción escrita; la (c) lo sube.
+Hasta que el dueño decida, esta tabla no se le aplica.
+
+En master-pedidos: no hay helper. Si P10 confirma `large` en el celular,
+`[size]="bp.celular() ? 'large' : 'medium'"` (y no `bp.isMobile()`, que también agranda la barra en
+el celular chico).
 
 ## API
 
@@ -130,6 +156,37 @@ Output: `(linkClick)`. Con `link` de texto el `<a>` no navega y solo emite; con
 - El `title` visible nombra la barra (`aria-labelledby`, 04-10-2026); sin título (`on-right`) y sin
   `ariaLabel` se anuncia «Progreso».
 
+## Bien y mal
+
+El saldo en `small` de `pages/driver/driver-dashboard/driver-dashboard.html:284` no va aquí como
+❌: es la excepción del 20-09-2026 que P10 (a) propone escribir, y decide el dueño.
+
+La acción que no aparece
+
+```html
+<!-- ❌ mal: sin showBottom no se dibujan ni la descripción ni el link -->
+<sui-progress-bar-label title="Saldo restante" [value]="18" color="red"
+  link="Recargar" description="para seguir recibiendo pedidos" (linkClick)="abrirRecarga()" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-progress-bar-label title="Saldo restante" [value]="18" color="red" [showBottom]="true"
+  link="Recargar" description="para seguir recibiendo pedidos" (linkClick)="abrirRecarga()" />
+```
+
+Título en una barra `on-right`
+
+```html
+<!-- ❌ mal: on-right ignora title; el lector anuncia «Progreso» -->
+<sui-progress-bar-label type="on-right" title="Pedidos en Lince" [value]="72" />
+```
+
+```html
+<!-- ✅ bien: el nombre lo pone la fila; la barra lo recibe en ariaLabel -->
+<sui-progress-bar-label type="on-right" [value]="72" ariaLabel="Pedidos en Lince" />
+```
+
 ## Ejemplo
 
 ```html
@@ -138,8 +195,8 @@ Output: `(linkClick)`. Con `link` de texto el `<a>` no navega y solo emite; con
   title="Meta del día"
   [value]="hechas / meta * 100"
   [percentage]="hechas + ' de ' + meta + ' entregas'"
-  [color]="perdida ? 'red' : cumplida ? 'green' : 'orange'"
-  size="large" />
+  [color]="perdida ? 'red' : cumplida ? 'green' : 'orange'" />
+<!-- size: medium (default); el valor del celular espera P10 -->
 
 <!-- Saldo en rojo, con la acción que lo resuelve -->
 <sui-progress-bar-label

package/docs/sui-radio/README.md

@@ -52,18 +52,17 @@ Regla corta: **lista densa de texto → radio-label · con peso o en el teléfon
 |---|---|---|---|
 | `xlarge` | 28 | Mobile, vía `bp.controlSize()`. | canon (aprobado por el dueño, 28-09-2026: «componentes grandes») |
 | `large` | 24 | Desktop, vía `bp.controlSize()`. | canon (aprobado por el dueño, 28-09-2026) |
-| `medium` (default) | 20 | Solo dentro de un componente que fija su escala (detalle de producto). Es el único tamaño de la guía. | según la guía del DS (único tamaño); el «cuándo» es canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `medium` (default) | 20 | Solo dentro de un componente que fija su escala en chico; hoy ningún padre lo hace (el detalle de producto recibe `xlarge` / `large`, ver «Por dispositivo»). Es el único tamaño de la guía. | según la guía del DS (único tamaño); el «cuándo» es canon (aprobado por el dueño, 05-10-2026, bloque B1) |
 
 **Usos de hoy que rompen la regla:**
 
 - **1 radio nativo → `sui-radio-card type="basic"`:**
-  `pages/driver/driver-order-detail/driver-order-detail.html:844` (motivos de cancelación del
+  `pages/driver/driver-order-detail/driver-order-detail.html:874` (motivos de cancelación del
   repartidor, el mismo caso del ejemplo de la guía). La pantalla hermana del local ya lo resolvió
   así: `pages/orders/orders.html:567`.
-- **1 suelto que se puede desincronizar:** `pages/super-admin/master-settings/master-settings.html:107`
-  (categoría por defecto). Usa `[standaloneChecked]` + `$event && …`: al tocar el que ya está
-  elegido, el círculo se apaga por dentro pero el padre sigue diciendo que es el elegido. Va en
-  un `sui-radio-group` con `[ngModel]`.
+- **Resuelto el 04-10-2026:** el suelto que se podía desincronizar en `master-settings.html`
+  (categoría por defecto, con `[standaloneChecked]` + `$event && …`) se quitó junto con el «por
+  defecto», que nadie leía (commit `62ee5d60` de master-pedidos). El error queda como par en «Bien y mal».
 
 ## Tamaño en mobile y en web
 
@@ -78,6 +77,27 @@ Regla corta: **lista densa de texto → radio-label · con peso o en el teléfon
 
 El más grande mide 28 px: el área táctil de 44 px la tiene que dar la fila.
 
+### Por dispositivo (D16)
+
+Fila de `radio` en la tabla de D16 (dueño, 05-10-2026; computadora resuelta el 06-10-2026): se
+toca, y en la computadora va **un paso menos que en el celular**, sin bajar a `medium`.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380 px) | `xlarge` (28) | la fila que lo contiene da los 44 de alto |
+| celular (380–767 px) | `xlarge` (28) | |
+| tablet táctil (`pointer: coarse`) | `xlarge` (28) | `bp.controlSize()` hoy mira solo el ancho (≤ 767): en un iPad de 768 o más da `large`. Pendiente que el helper mire el puntero |
+| computadora (`pointer: fine`) | `large` (24) | un paso menos que el celular (dueño, 06-10-2026) |
+
+Ultrawide (≥ 1920 px): igual que la computadora, `large`. `medium` solo cuando un padre fija la
+escala en chico, y hoy ninguna pantalla lo hace: el detalle de producto
+(`components/product-detail-view/product-detail-view.html:202`) recibe el `size` de quien lo
+monta, y los dos que lo montan le pasan `xlarge` / `large` (`pages/customer/restaurant-menu/restaurant-menu.html:457`
+con `bp.controlSize()` y `components/add-product-modal/add-product-modal.html:360` con
+`ctrlSize()`, el mismo corte).
+
+En master-pedidos: `[size]="bp.controlSize()"`.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -130,6 +150,63 @@ y proyecta los radios (`sui-radio`, `sui-radio-label`, `sui-radio-card`).
 - Sin marcar, en foco, el círculo se pinta del color de marca: viene del Figma, no es un error.
 - No dibuja texto ni `aria-label`: pelado, pon el texto en un `<label>` o usa `sui-radio-label`.
 
+## Bien y mal
+
+Motivos de cancelación
+
+```html
+<!-- ❌ mal: radio nativo con <label> a mano (pages/driver/driver-order-detail/driver-order-detail.html:874) -->
+<label class="ts__modal-reason">
+  <input type="radio" name="driverCancelReason" [value]="reason" (change)="cancelReasonSelected.set(reason)" />
+  <span>{{ reason }}</span>
+</label>
+```
+
+```html
+<!-- ✅ bien: opción que se toca en el teléfono → radio-card en una columna, como la pantalla
+     hermana del local (pages/orders/orders.html:567). Dentro de sui-radio-group sin más, las
+     tarjetas quedan en fila (su host es inline-flex): si se usa el grupo, darle
+     flex-direction: column desde afuera (ver Trampas) -->
+<div class="motivos" role="radiogroup" aria-label="Motivo de cancelación">
+  @for (reason of CANCEL_REASONS; track reason) {
+    <sui-radio-card [size]="bp.controlSize()" type="basic" [value]="reason" [label]="reason"
+      [checked]="cancelReasonSelected() === reason" (selected)="cancelReasonSelected.set(reason)" />
+  }
+</div>
+<!-- .motivos { display: flex; flex-direction: column; gap: 8px; } -->
+```
+
+Elegir uno de una lista
+
+```html
+<!-- ❌ mal: sueltos con standaloneChecked; al tocar el elegido se apaga y el padre no se entera (se quitó de master-settings.html el 04-10-2026) -->
+@for (cat of categorias; track cat.id) {
+  <sui-radio [size]="bp.controlSize()" [standaloneChecked]="cat.id === porDefecto()"
+    (standaloneCheckedChange)="$event && porDefecto.set(cat.id)" />
+}
+```
+
+```html
+<!-- ✅ bien: el grupo hace la exclusión -->
+<sui-radio-group [ngModel]="porDefecto()" (ngModelChange)="porDefecto.set($event)">
+  @for (cat of categorias; track cat.id) {
+    <sui-radio [size]="bp.controlSize()" [value]="cat.id" [attr.aria-label]="cat.nombre" />
+  }
+</sui-radio-group>
+```
+
+Círculo pelado en una tabla
+
+```html
+<!-- ❌ mal: el radio no dibuja texto ni aria-label; el lector solo dice «botón de opción» -->
+<sui-radio [size]="bp.controlSize()" [value]="cat.id" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-radio [size]="bp.controlSize()" [value]="cat.id" [attr.aria-label]="'Por defecto: ' + cat.nombre" />
+```
+
 ## Ejemplo
 
 ```html