@ajuarezso/sui-design-system 0.24.1 → 0.25.1

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

@@ -29,8 +29,8 @@ dice qué mide y cuánto.
 > y trae cuatro colores (`blue` default, `red`, `orange`, `green`), una sola altura, `value` y
 > `max`. No dice cuándo usar cada color. Cada color apunta a un token de estado
 > (`--sui-state-*`), igual que el badge: de ahí sale su significado, que es el mismo que el del
-> badge aprobado. Lo marcado «según la guía del DS» sale de ahí; el resto es **propuesta, falta
-> aprobación**.
+> badge aprobado. Lo marcado «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`: **2 barras peladas en 1 pantalla**
 > (`overview-visitors`), sin contar prototipos ni vitrinas (`master-preview`,
@@ -45,7 +45,7 @@ dice qué mide y cuánto.
 | `green` | `success` | Se cumplió o va bien. | Meta cumplida, saldo alto | según la guía del DS (token) · propuesta (cuándo) |
 | `orange` | `warning` | Va en curso y pide atención. | Saldo bajando, meta del día a medias | según la guía del DS (token) · propuesta (cuándo) |
 | `red` | `error` | Se perdió o se acabó. | Meta perdida, saldo agotado | según la guía del DS (token) · propuesta (cuándo) |
-| `purple` | `feature` | **No usar** (ver abajo). Extensión SUI. | — | propuesta, falta aprobación |
+| `purple` | `feature` | **No usar** (ver abajo). Extensión SUI. | — | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 
 **Ojo con el naranja**: en este proyecto el `orange` de estado (`--sui-state-warning-base`) es
 el mismo `#fa7319` de la marca. Una barra naranja sin un juicio detrás se lee como «marca», no
@@ -55,17 +55,17 @@ 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`
 
 | propiedad | regla | fuente |
 |---|---|---|
-| `value` | Siempre de 0 a 100. Si el dato viene como fracción (0,6) o como «3 de 5», se convierte antes. | propuesta, falta aprobación |
-| `ariaLabel` | **Obligatorio** en la barra pelada: sin título visible, el lector de pantalla no sabe qué mide. | propuesta, falta aprobación |
+| `value` | Siempre de 0 a 100. Si el dato viene como fracción (0,6) o como «3 de 5», se convierte antes. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `ariaLabel` o `ariaLabelledby` | **Uno de los dos es obligatorio** en la barra pelada: sin título visible, el lector de pantalla no sabe qué mide. `ariaLabelledby` apunta al id de un texto que ya se ve. | canon (aprobado por el dueño, 05-10-2026, bloque B13) |
 
 **Usos de hoy que rompen la regla — a discutir, 2:**
 `pages/overview/components/overview-visitors/overview-visitors.html:22` y `:45` pintan en
@@ -81,24 +81,52 @@ regla va `blue`, o mejor un gráfico. Tampoco llevan `ariaLabel`.
 
 ## 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
+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 -->
@@ -126,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

@@ -27,7 +27,8 @@ descripción y link, con el espaciado del DS.
 > **La guía del DS no tiene una página propia para esto**: son los ejemplos «With Label» y
 > «Advanced» de la página de la barra de progreso (título + «80%», y debajo un link
 > «Upgrade» con una descripción). No dice cuándo usar cada forma. Lo marcado «según la guía del
-> DS» sale de esos ejemplos; el resto es **propuesta, falta aprobación**.
+> DS» sale de esos ejemplos; lo marcado canon está aprobado; lo que sigue en
+> propuesta espera decisión.
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app`: **4 en 3 pantallas** (la descarga del
 > OTA, el saldo y la meta del día en el dashboard del repartidor, el saldo en la billetera), sin
@@ -41,20 +42,20 @@ que mide** (blue neutro, green cumplido, orange pide atención, red perdido o ag
 | propiedad | valor | cuándo | ejemplo real | fuente |
 |---|---|---|---|---|
 | `type` | `on-top` (default) | Título y número arriba, barra abajo. Lo normal. | Las 4 de la app | según la guía del DS («With Label») |
-| `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 | propuesta, falta aprobación |
+| `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` | propuesta, falta aprobación |
-| `percentage` | `false` | El número ya está escrito al lado, o no significa nada. | — | propuesta, falta aprobación |
+| `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») · propuesta (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` | propuesta, falta aprobación |
+| `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: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í
 
@@ -65,28 +66,57 @@ ser una decisión de marca y no un error: decide el dueño. Las de saldo y meta
 
 ## 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
+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
 
@@ -126,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
@@ -134,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

@@ -43,7 +43,7 @@ Regla corta: **lista densa de texto → radio-label · con peso o en el teléfon
 | qué | cuándo | fuente |
 |---|---|---|
 | dentro de `sui-radio-group` + `[value]` | Siempre que haya más de una opción. El grupo hace la exclusión y se enchufa a `[(ngModel)]`. | según la guía del DS (es un radio group) |
-| suelto con `[(standaloneChecked)]` | Solo cuando la exclusión la hace la fila o el padre (la fila de opciones del detalle de producto). **Suelto, al tocarlo se desmarca** como un checkbox. | propuesta, falta aprobación |
+| suelto con `[(standaloneChecked)]` | Solo cuando la exclusión la hace la fila o el padre (la fila de opciones del detalle de producto). **Suelto, al tocarlo se desmarca** como un checkbox. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 | `disabled` | La opción existe pero no aplica ahora (una variante agotada). | según la guía del DS |
 
 ### `size`
@@ -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 propuesta |
+| `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

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

@@ -41,25 +41,25 @@ checkbox-card.**
 
 | type | cuándo | fuente |
 |---|---|---|
-| `left-icon` con `icon` | Lo normal: un ícono Remix que dice de qué va la opción (`truck-line` Delivery, `store-2-line` Recojo). | propuesta (práctica de la app) |
-| `left-icon` con `iconSrc` | Emoji animado cuando la elección es de las grandes del rol (el vehículo del repartidor, el rol al registrarse, el tipo de mandadito). Los emojis van de `assets/emojis/` o `FLUENT_EMOJI_ANIM`. | propuesta |
-| `left-icon` con `emoji` | Lo mismo con un nombre de `SuiEmoji` en vez de una URL. Hoy 0 usos; vale igual. | propuesta |
-| `basic` | Opciones de texto puro: motivos de cancelación, quién paga el envío, los premios de una meta. | propuesta |
-| `avatar` (`imageUrl`) | El logo redondo de un medio de pago (Yape, Plin, efectivo en el checkout). | propuesta |
-| `company` (`imageUrl`) | Elegir entre tus locales (cambiar de negocio en mi-negocio). | propuesta |
-| `brand`, `card-provider` | Ver «No usar». | propuesta |
+| `left-icon` con `icon` | Lo normal: un ícono Remix que dice de qué va la opción (`truck-line` Delivery, `store-2-line` Recojo). | canon (aprobado por el dueño, 05-10-2026, bloque B2) (práctica de la app) |
+| `left-icon` con `iconSrc` | Emoji animado cuando la elección es de las grandes del rol (el vehículo del repartidor, el rol al registrarse, el tipo de mandadito). Los emojis van de `assets/emojis/` o `FLUENT_EMOJI_ANIM`. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `left-icon` con `emoji` | Lo mismo con un nombre de `SuiEmoji` en vez de una URL. Hoy 0 usos; vale igual. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `basic` | Opciones de texto puro: motivos de cancelación, quién paga el envío, los premios de una meta. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `avatar` (`imageUrl`) | El logo redondo de un medio de pago (Yape, Plin, efectivo en el checkout). | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `company` (`imageUrl`) | Elegir entre tus locales (cambiar de negocio en mi-negocio). | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `brand`, `card-provider` | Ver «No usar». | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 
 ### Las piezas
 
 | prop | cuándo | fuente |
 |---|---|---|
-| `value` (obligatorio) | Siempre, aunque no haya grupo. Es lo que emite `selected`. | propuesta |
-| `label` | Siempre. El nombre de la opción, corto: «Delivery», «Lo antes posible». | propuesta |
-| `description` | Casi siempre: la consecuencia de elegirla («Lo revisamos y te transferimos. Puede tardar unas horas.»). | propuesta |
-| `sublabel` | Una precisión corta entre paréntesis («(canal estable)», «(sin OTA)»). Nunca la explicación: eso es `description`. | propuesta |
-| `badge` | Marca una opción frente a las otras: «Por defecto». Con string sale azul `light`; pasa el objeto con el color que corresponda según el badge (un «Por defecto» es `gray`). | propuesta |
-| `disabled` | La opción existe pero hoy no se puede: di por qué en la `description` («El local está cerrado ahora»). | propuesta |
-| `checked` / `[(ngModel)]` / `sui-radio-group` | El estado: `[checked]` + `(selected)` sueltos (lo normal en la app), o `ngModel` con `name` (checkout), o dentro de un `sui-radio-group`. | propuesta |
+| `value` (obligatorio) | Siempre, aunque no haya grupo. Es lo que emite `selected`. | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `label` | Siempre. El nombre de la opción, corto: «Delivery», «Lo antes posible». | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `description` | Casi siempre: la consecuencia de elegirla («Lo revisamos y te transferimos. Puede tardar unas horas.»). | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `sublabel` | Una precisión corta entre paréntesis («(canal estable)», «(sin OTA)»). Nunca la explicación: eso es `description`. | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `badge` | Marca una opción frente a las otras: «Por defecto». Con string sale azul `light`; pasa el objeto con el color que corresponda según el badge. Si «Por defecto» va `gray` o con el azul de hoy espera P48. | propuesta, espera P48 |
+| `disabled` | La opción existe pero hoy no se puede: di por qué en la `description` («El local está cerrado ahora»). | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
+| `checked` / `[(ngModel)]` / `sui-radio-group` | El estado: `[checked]` + `(selected)` sueltos (lo que más usa la app hoy), o `ngModel` con `name` (checkout), o dentro de un `sui-radio-group`. Cuál es el canon (grupo, o sueltos como lo normal) espera P49. | propuesta, espera P49 |
 
 ### `size` (el radio de adentro)
 
@@ -67,7 +67,7 @@ checkbox-card.**
 |---|---|---|
 | `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` (20, default) | No usar en pantallas nuevas. | canon (aprobado por el dueño, 28-09-2026) |
+| `medium` (20, default) | No usar en pantallas nuevas, tampoco en la computadora. | canon (aprobado por el dueño, 28-09-2026) · D16, dueño 06-10-2026 |
 
 **Usos de hoy que rompen las reglas: 0.** Los 5 que iban sin el size del breakpoint y el
 `xlarge` fijo de `pages/customer/mandadito/mandadito.html:30` pasaron a `bp.controlSize()` el
@@ -92,13 +92,27 @@ sola. El `size` cambia solo el radio.
 <sui-radio-card [size]="bp.controlSize()" … />   <!-- isMobile() ? 'xlarge' : 'large' -->
 ```
 
+### Por dispositivo (D16)
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380) | `xlarge` (radio 28) | la card entera ya pasa de 44; el size solo agranda el radio |
+| celular (380–767) | `xlarge` (radio 28) | |
+| tablet táctil (`pointer: coarse`) | `xlarge` (radio 28) | `bp.controlSize()` mira solo el ancho: un iPad de 768 o más recibe `large` hasta que el helper mire el puntero |
+| computadora (`pointer: fine`) | `large` (radio 24) | un paso menos que el celular; no baja a `medium` (D16, dueño 06-10-2026) |
+
+Ultrawide: igual que la computadora (`large`).
+
+En master-pedidos: `[size]="bp.controlSize()"` (`xlarge` hasta 767 px, `large` desde ahí). La
+expresión exacta de D16, con la tablet, es `bp.tactil() ? 'xlarge' : 'large'`.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
 |---|---|---|
 | `type="brand"` (0 usos) | no hay servicios de terceros que elegir | elegir el canal por el que te contactamos (WhatsApp, correo) con su logo (`brand`) |
 | `type="card-provider"` (0 usos) | no hay pago con tarjeta guardada | elegir una tarjeta guardada en el checkout, cuando entre Culqi / Niubiz |
-| `size="medium"` | el radio de 20 se pierde en el teléfono | una tabla densa solo de desktop |
+| `size="medium"` | el radio de 20 se pierde en el teléfono | no hay: en la computadora va `large` (D16, dueño 06-10-2026) |
 
 ## API
 
@@ -142,12 +156,52 @@ Implementa `ControlValueAccessor` (el valor del form es el `value` elegido). Den
 - Suelta (sin grupo), elegirla la marca pero **no desmarca a las otras**: el padre tiene que
   bindear `[checked]` de todas a la misma señal. Suelta, además, **cada card es una parada de Tab
   y no hay flechas**; dentro de `sui-radio-group` sí hay un solo tab stop y flechas (revisión 04-10-2026).
+  Cuál de las dos formas es el canon espera P49.
 - `badge` con string sale **azul `light` `small`** (en `sui-content-label` sale naranja).
 - `size` cambia solo el radio, no el padding ni el alto de la card.
 
+## Bien y mal
+
+Motivos de cancelación con un radio nativo
+
+```html
+<!-- ❌ mal: radio del navegador, sin tamaño ni foco del DS (pages/driver/driver-order-detail/driver-order-detail.html:874) -->
+<label class="ts__modal-reason">
+  <input type="radio" name="driverCancelReason" [value]="reason"
+    [checked]="cancelReasonSelected() === reason" (change)="cancelReasonSelected.set(reason)" />
+  <span>{{ reason }}</span>
+</label>
+```
+
+```html
+<!-- ✅ bien: igual que la pantalla hermana, pages/orders/orders.html:567 (sueltas con [checked]; si va en sui-radio-group espera P49) -->
+<sui-radio-card type="basic" [size]="bp.controlSize()" [value]="reason" [label]="reason"
+  [checked]="cancelReasonSelected() === reason" (selected)="cancelReasonSelected.set(reason)" />
+```
+
+Suelta, sin `[checked]`
+
+```html
+<!-- ❌ mal: elegir una no desmarca a las otras; quedan dos marcadas -->
+<sui-radio-card [size]="bp.controlSize()" value="delivery" label="Delivery" (selected)="modo.set('delivery')" />
+<sui-radio-card [size]="bp.controlSize()" value="pickup" label="Recojo en tienda" (selected)="modo.set('pickup')" />
+```
+
+```html
+<!-- ✅ bien: el grupo decide cuál está marcada (como pages/super-admin/master-settings/master-settings.html:438) -->
+<sui-radio-group [ngModel]="modo()" (ngModelChange)="modo.set($event)">
+  <sui-radio-card [size]="bp.controlSize()" value="delivery" label="Delivery" />
+  <sui-radio-card [size]="bp.controlSize()" value="pickup" label="Recojo en tienda" />
+</sui-radio-group>
+```
+
+Sueltas con `[checked]="modo() === '…'"` + `(selected)` también funciona (es lo que hace hoy casi
+toda la app). Cuál de las dos es el canon espera P49.
+
 ## Ejemplo
 
 ```html
+<!-- suelta con [checked], como casi toda la app; si va en sui-radio-group espera P49 -->
 <sui-radio-card
   [size]="bp.controlSize()"
   type="left-icon"