@ajuarezso/sui-design-system 0.24.1 → 0.25.1

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

@@ -36,9 +36,9 @@ o con peso → radio-card · muchas → select.**
 > motivos («Spam», «Acoso», «Infringe las reglas»); el «avanzado» suma (Sublabel), badge «NEW»,
 > descripción, Link Button y la versión con el círculo a la derecha.
 >
-> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-badge`):
-> **1 uso**, las franjas horarias del checkout, con `flip`. Más **1 radio nativo** de motivos
-> (ver abajo a qué componente va).
+> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-badge`), revisado
+> el 06-10-2026: **2 usos**, las franjas horarias del checkout (con `flip`) y los distritos de
+> «Trabaja con nosotros». Más **1 radio nativo** de motivos (ver abajo a qué componente va).
 
 ### Las piezas
 
@@ -47,22 +47,26 @@ o con peso → radio-card · muchas → select.**
 | `value` | Siempre (es obligatorio). Lo que lee el `sui-radio-group`. | API |
 | `label` | Siempre. La opción en pocas palabras («Dirección no encontrada», «12:00 — 12:30 p. m.»). | según la guía del DS (pieza) |
 | `sublabel` | Precisión corta entre paréntesis: «(recomendado)». | según la guía del DS |
-| `description` | Una frase de qué pasa si se elige. Sube el label a peso medio. Si casi todas las opciones la necesitan, probablemente es `sui-radio-card`. | según la guía del DS (pieza); el «cuándo» es propuesta |
-| `badge` | Solo novedad. Con string sale naranja `light`: pasa el objeto. | según la guía del DS (pieza «NEW»); el color es propuesta |
+| `description` | Una frase de qué pasa si se elige. Sube el label a peso medio. Si casi todas las opciones la necesitan, probablemente es `sui-radio-card`. | según la guía del DS (pieza); el «cuándo» es canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `badge` | Solo novedad. Con string sale naranja `light`: pasa el objeto. | según la guía del DS (pieza «NEW»); el color es canon (aprobado por el dueño, 05-10-2026, bloque B3) |
 | `link` | «Ver detalle» que no elige la opción. Solo se ve con `description`. | según la guía del DS |
 | `flip` | Círculo a la derecha en listas de opciones tipo hoja (sheet) y de ajustes, donde el texto es lo que se lee y el círculo es el indicador, como las franjas del checkout. En formularios, a la izquierda. | canon (aprobado por el dueño, 03-10-2026) |
 | `disabled` | La opción existe pero no aplica (franja ya llena). | según la guía del DS |
-| `size` | `medium` (default, Figma): círculo 20, label 14/20. `large`: círculo 24, label 16/24. `xlarge`: círculo 28, label 16/24. En large y xlarge el sublabel y la descripción se quedan en 12/16 (canon, dueño 04-10-2026); el badge sin `size` propio sube a `medium` / `large` y el link a `medium`. Se usa con `[size]="bp.controlSize()"`. | `medium`: según la guía del DS · `large` / `xlarge`: canon (aprobado por el dueño, 03-10-2026), extensión SUI |
+| `size` | `medium` (default, Figma): círculo 20, label 14/20. `large`: círculo 24, label 16/24. `xlarge`: círculo 28, label 16/24. En large y xlarge el sublabel y la descripción se quedan en 12/16 (canon, dueño 04-10-2026); el badge sin `size` propio sube a `medium` / `large` y el link a `medium`. `2xlarge`: círculo 28 con la fila a 44 (su uso por dispositivo está pendiente, ver D16). Se usa con `[size]="bp.controlSize()"`. | `medium`: según la guía del DS · `large` / `xlarge`: canon (aprobado por el dueño, 03-10-2026), extensión SUI |
 
 **Usos de hoy:**
 
-- **1 radio nativo de motivos:** `pages/driver/driver-order-detail/driver-order-detail.html:844`
+- **1 radio nativo de motivos:** `pages/driver/driver-order-detail/driver-order-detail.html:874`
   (motivos de cancelación del repartidor). Por la pantalla hermana va a `sui-radio-card
   type="basic"` como `pages/orders/orders.html:567`, no a este componente.
-- El único uso actual, `pages/customer/checkout/checkout.html:473`, controla la selección con
-  `[checked]` + `(selected)` por fila, sin `sui-radio-group`. Funciona porque el padre fija el
-  estado, pero no se enchufa a un formulario. **Va sin `size`** (`medium`, círculo de 20 px) en
-  una hoja del checkout del cliente, que se usa en el teléfono: rompe la tabla de abajo.
+- `pages/customer/checkout/checkout.html:474` controla la selección con `[checked]` +
+  `(selected)` por fila, sin `sui-radio-group`. Funciona porque el padre fija el estado, pero no se
+  enchufa a un formulario. Va con `bp.isMobile() ? '2xlarge' : 'medium'`: en la computadora baja a
+  `medium`, que D16 ya no usa (va `large`, dueño 06-10-2026). El `2xlarge` del teléfono está
+  pendiente (ver D16).
+- `pages/customer/trabaja/trabaja.html:150` va con `bp.isMobile() ? 'xlarge' : 'large'`, que es lo
+  mismo que `bp.controlSize()`: cumple la fila de D16. Sin descripción la fila mide 28 en el
+  teléfono, no 44; si pasa a `2xlarge` está pendiente (ver D16).
 
 ## Tamaño en mobile y en web
 
@@ -74,12 +78,12 @@ dueño, 28-09-2026).
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| opciones de un formulario o una hoja (franjas horarias, método de entrega) | `2xlarge` (fila de 44 como mínimo, círculo 28, label 16/24) | `large` (círculo 24, label 16/24) | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono; web: canon (aprobado por el dueño, 03-10-2026) |
-| lista densa de desktop | — | `medium` (círculo 20, label 14/20) | propuesta, falta aprobación |
-| opciones con mucho contexto cada una | `sui-radio-card` con `bp.controlSize()` | `sui-radio-card` con `bp.controlSize()` | propuesta |
+| opciones de un formulario o una hoja (franjas horarias, método de entrega) | `xlarge` (círculo 28, label 16/24; sin descripción la fila mide 28, no 44: `2xlarge` pendiente, ver D16) | `large` (círculo 24, label 16/24) | D16 (fila de checkbox, radio y switch; dueño 06-10-2026) |
+| lista densa de desktop | — | `large` (círculo 24): no baja a `medium` | D16, dueño 06-10-2026 |
+| opciones con mucho contexto cada una | `sui-radio-card` con `bp.controlSize()` | `sui-radio-card` con `bp.controlSize()` | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 
 ```html
-<sui-radio-label value="recojo" [size]="bp.isMobile() ? '2xlarge' : 'large'" label="Recojo en tienda" />
+<sui-radio-label value="recojo" [size]="bp.controlSize()" label="Recojo en tienda" />
 ```
 
 | size | círculo | label | sublabel / descripción | alto de la fila sin descripción |
@@ -89,21 +93,42 @@ dueño, 28-09-2026).
 | `xlarge` | 28 | 16/24 | 12/16 | 28 |
 | `2xlarge` | 28 | 16/24 | 12/16 | **44** (`min-height`) |
 
-`2xlarge` (canon (dueño, 04-10-2026): piso táctil 44 en el teléfono) es la fila del teléfono: mismo círculo de 28 y mismo label que `xlarge`,
-pero la fila mide 44 como mínimo con todo centrado en vertical, y el texto secundario se queda en 12
-(regla del 03-10). Con descripción la fila ya pasa de 44 y vuelve a alinearse arriba.
+`2xlarge` (canon, dueño 04-10-2026: piso táctil 44 en el teléfono) tiene el mismo círculo de 28 y
+el mismo label que `xlarge`, pero la fila mide 44 como mínimo con todo centrado en vertical, y el
+texto secundario se queda en 12 (regla del 03-10). Con descripción la fila ya pasa de 44 y vuelve a
+alinearse arriba. Si reemplaza a `xlarge` en el celular y la tablet está **pendiente** (ver D16).
 
 Toda la fila se toca (el host recibe el click). Con `xlarge` el contenido baja 2 px para que la
 línea del label (24) quede centrada con el círculo (28).
 
-Sin descripción, la fila en `xlarge` mide 28 px (lo que mide el círculo): en el teléfono va
-`2xlarge`, que la lleva a 44. Con descripción llega sola: 2 + 24 (label) + 4 + 16 (descripción) = 46 px
+Sin descripción, la fila en `xlarge` mide 28 px (lo que mide el círculo):
+`2xlarge` la lleva a 44 (pendiente, ver D16). Con descripción llega sola: 2 + 24 (label) + 4 + 16 (descripción) = 46 px
 en `xlarge` y en `2xlarge`.
 
 **Regla de tamaños aplicada (canon, dueño 04-10-2026):** en `large` y `xlarge` el label sube a
 16/24 y el sublabel y la descripción se quedan en 12/16, igual que `sui-switch-label`. Antes subían
 a 14/20. El badge y el link siguen creciendo con el size.
 
+### Por dispositivo (D16)
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380) | `xlarge` | círculo de 28 |
+| celular (380–767) | `xlarge` | |
+| tablet táctil (`pointer: coarse`) | `xlarge` | `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` | 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'`.
+
+**Pendiente: `2xlarge` en el celular y la tablet.** Sin descripción, `xlarge` deja la fila en 28 px,
+por debajo del piso de 44. El dueño aprobó `2xlarge` el 04-10-2026 justo para eso (fila de 44), pero
+la fila de D16 dice `xlarge` para toda la familia y ningún helper devuelve `2xlarge`. Falta que el
+dueño decida si en este componente el celular y la tablet pasan a `2xlarge` (y que D16 y
+`bp.controlSize()` lo recojan). Mientras no lo decida, manda la fila de D16: `xlarge`.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -140,7 +165,8 @@ a 14/20. El badge y el link siguen creciendo con el size.
 - **No implementa `ControlValueAccessor`.** El formulario se engancha al `sui-radio-group`, no a
   cada opción. Sin grupo, se maneja con `[(checked)]`.
 - **`size` arranca en `medium`** (círculo de 20 px): sin `[size]="bp.controlSize()"` choca con la
-  regla de controles grandes (dueño, 28-09-2026) en mobile.
+  regla de controles grandes (dueño, 28-09-2026) y con D16. Aun con `xlarge`, la fila sin
+  descripción queda en 28: si pasa a `2xlarge` está pendiente (ver D16).
 - **Tocar una opción ya elegida no la desmarca** (bien, es un radio). Tocar el link tampoco la elige.
 - **`link` solo se dibuja con `description`.**
 - El `sui-radio` de adentro no recibe clics (`pointer-events: none`): no le pongas handlers.
@@ -151,12 +177,53 @@ a 14/20. El badge y el link siguen creciendo con el size.
 - El badge con string sale naranja; en `sui-radio-card` el default es azul.
 - `flip` usa CSS `order`: el orden para lector de pantalla no cambia.
 
+## Bien y mal
+
+Sin size
+
+```html
+<!-- ❌ mal: sin size queda en medium, círculo de 20 en el teléfono y en la computadora -->
+<sui-radio-label [value]="d" [label]="d" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-radio-label [size]="bp.controlSize()" [value]="d" [label]="d" />
+```
+
+Franjas horarias en la computadora
+
+```html
+<!-- ❌ mal: medium en la computadora; D16 no baja de large (pages/customer/checkout/checkout.html:474) -->
+<sui-radio-label [size]="bp.isMobile() ? '2xlarge' : 'medium'" [value]="'' + f.inicioMs"
+  [label]="etiquetaFranja(f)" [flip]="true" [disabled]="!f.disponible" />
+```
+
+```html
+<!-- ✅ bien (si el teléfono pasa a 2xlarge está pendiente, ver D16) -->
+<sui-radio-label [size]="bp.controlSize()" [value]="'' + f.inicioMs"
+  [label]="etiquetaFranja(f)" [flip]="true" [disabled]="!f.disponible" />
+```
+
+Link sin descripción
+
+```html
+<!-- ❌ mal: link solo se dibuja con description; «Ver precios» no aparece -->
+<sui-radio-label value="pro" label="Plan Pro" [link]="{ label: 'Ver precios', href: '/precios' }" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-radio-label [size]="bp.controlSize()" value="pro" label="Plan Pro"
+  description="Facturación mensual." [link]="{ label: 'Ver precios', href: '/precios' }" />
+```
+
 ## Ejemplo
 
 ```html
 <sui-radio-group [(ngModel)]="motivo" class="lista-vertical">
   @for (m of motivos; track m) {
-    <sui-radio-label [value]="m" [label]="m" />
+    <sui-radio-label [size]="bp.controlSize()" [value]="m" [label]="m" />
   }
 </sui-radio-group>
 ```

package/docs/sui-rating/README.md

@@ -35,8 +35,8 @@ lista cargada, que viene con tope. La fórmula depende de `n`: otro denominador
 > el suyo («cada sistema de calificación se comporta distinto»). Los ejemplos son: nota con
 > reseñas («4.5 ∙ 5.2K Ratings · 18 reviews»), celdas, barra de estrellas, barra de corazones,
 > barra de emojis, barra de números del 1 al 5 y barra con área de texto. No trae tamaños, ni
-> do/don't. Lo marcado «según la guía del DS» es que el ejemplo existe; el cuándo es
-> **propuesta, falta aprobación**, salvo lo que diga «canon».
+> do/don't. Lo marcado «según la guía del DS» es que el ejemplo existe; el cuándo está
+> aprobado donde dice «canon»; lo que sigue en propuesta espera decisión.
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app`: **23 ratings en 13 pantallas**, sin
 > contar prototipos ni vitrinas (`master-preview`, `master-prototipos`, `mockup-sheets-*`,
@@ -50,7 +50,7 @@ lista cargada, que viene con tope. La fórmula depende de `n`: otro denominador
 | appearance | cuándo | ejemplo real | fuente |
 |---|---|---|---|
 | `inline` (default), `readonly` | **Mostrar** una nota: la fila de estrellas pelada. | `components/ratings-detail/ratings-detail.html:31` (la nota del local) | según la guía del DS (ejemplo «Rating Review») |
-| `inline`, interactivo | Pedir la nota en grande: en el teléfono con `size="2xlarge"` (estrellas de 32 en botones de 44 × 44); `xlarge` (28 tocables) queda para web. | `pages/customer/rate-order/rate-order.html:93` y `:167` (hoy en `xlarge`) | tamaño: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono; el «cuándo inline vs bar» sigue como propuesta |
+| `inline`, interactivo | Pedir la nota en grande: en el teléfono y la tablet con `size="2xlarge"` (estrellas de 32 en botones de 44 × 44); en la computadora, `medium`. | `pages/customer/rate-order/rate-order.html:95` y `:169` (hoy `2xlarge` / `xlarge`, cortado con `bp.isMobile()`) | teléfono: canon (dueño, 04-10-2026): piso táctil 44 · computadora: D16, dueño 05-10-2026 (antes `xlarge`) · el «cuándo inline vs bar» sigue como propuesta |
 | `bar` | **Pedir** una nota en el celular: con `size="2xlarge"` las celdas miden 64 × 44 (36 en los demás sizes). | `components/rate-entity-card/rate-entity-card.html:40` | según la guía del DS (ejemplo «Rating Bar») |
 | `cell` | **No usar** hoy (ver abajo). | — | según la guía del DS (ejemplo «Rating Cell») |
 | `bar-area` | **No usar** hoy (ver abajo). | — | según la guía del DS (ejemplo «Rating Bar With Textarea») |
@@ -59,8 +59,8 @@ lista cargada, que viene con tope. La fórmula depende de `n`: otro denominador
 
 | type | cuándo | fuente |
 |---|---|---|
-| `star` (default) | La nota de un pedido, un local, un repartidor o un cliente: la que entra al promedio. | según la guía del DS (ejemplo) · propuesta (cuándo) |
-| `emoji` | Cómo le fue a la persona con la app o con un proceso (no entra a la nota de nadie). Solo en `bar`. Hoy: `components/rate-entity-card/rate-entity-card.html:38`. | según la guía del DS (ejemplo «Single Selectable») · propuesta (cuándo) |
+| `star` (default) | La nota de un pedido, un local, un repartidor o un cliente: la que entra al promedio. | según la guía del DS (ejemplo) · canon (aprobado por el dueño, 05-10-2026, bloque B2) (cuándo) |
+| `emoji` | Cómo le fue a la persona con la app o con un proceso (no entra a la nota de nadie). Solo en `bar`. Hoy: `components/rate-entity-card/rate-entity-card.html:38`. | según la guía del DS (ejemplo «Single Selectable») · canon (aprobado por el dueño, 05-10-2026, bloque B2) (cuándo) |
 | `heart` | **No usar** como nota (ver abajo). | según la guía del DS (ejemplo «Rating Bar Heart») |
 | `number` | **No usar** hoy (ver abajo). Solo en `bar`. | según la guía del DS (ejemplo de 1 a 5) |
 
@@ -68,29 +68,29 @@ lista cargada, que viene con tope. La fórmula depende de `n`: otro denominador
 
 | size | px | cuándo | fuente |
 |---|---|---|---|
-| `small` | 16 | Web: filas y listas (cada reseña, tablas, historial). | propuesta, falta aprobación |
-| `medium` (default) | 20 | Web: perfil, ficha, detalle. Mobile: filas y listas. | propuesta, falta aprobación |
-| `large` | 24 | Web: la nota grande de un resumen, la card de una calificación enviada. Mobile: perfil y ficha. | propuesta, falta aprobación |
+| `small` | 16 | **No se usa**: es chico. Las filas y listas de la computadora (cada reseña, tablas, historial) van en `medium`. | D16, dueño 05-10-2026 (antes «web: filas y listas», propuesta) |
+| `medium` (default) | 20 | Computadora, tablet y celular chico: filas, listas, perfil, ficha y detalle. | D16, dueño 05-10-2026 |
+| `large` | 24 | Celular (380–767): filas, listas, perfil y ficha (un paso más que la computadora). Computadora: la nota grande de un resumen, la card de una calificación enviada. | celular: D16, dueño 05-10-2026 · resumen en la computadora: propuesta, falta aprobación |
 | `xlarge` | 28 | Extensión SUI. Mobile: la nota grande de un resumen. | propuesta, falta aprobación |
 
 ### El resto de las propiedades
 
 | propiedad | valor | cuándo | fuente |
 |---|---|---|---|
-| `readonly` | `true` | **Todo rating que muestra una nota.** Sin él se puede tocar y cambiar. | propuesta, falta aprobación |
+| `readonly` | `true` | **Todo rating que muestra una nota.** Sin él se puede tocar y cambiar. | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
 | `halfStep` | `true` | Obligatorio si el valor es un **promedio** (sin él, 4,5 se pinta como 4). Una nota individual es entera y no lo necesita. Solo funciona en `inline` + `readonly`. | según la guía del DS (muestra 4.5) |
-| `value` | `0` | Solo dentro del botón que invita a calificar, junto al texto «Calificar» (`pages/customer/order-history/order-history.html:352`). Suelto, cinco estrellas vacías se leen como «0 estrellas». | propuesta, falta aprobación |
-| `max` | `5` (default) | Siempre 5 en notas: la fórmula de la nota asume 5. | propuesta, falta aprobación |
-| `max` | otro | Solo con `type="number"` (encuesta de 1 a 10). | propuesta, falta aprobación |
-| `alignment` | `inline` (default) | Solo los íconos; el número y el conteo los escribe la pantalla. | propuesta, falta aprobación |
-| `alignment` | `horizontal` | Junto con `reviewLink`. | propuesta, falta aprobación |
-| `alignment` | `vertical` | **No usar** (ver abajo). | propuesta, falta aprobación |
+| `value` | `0` | Solo dentro del botón que invita a calificar, junto al texto «Calificar» (`pages/customer/order-history/order-history.html:352`). Suelto, cinco estrellas vacías se leen como «0 estrellas». | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
+| `max` | `5` (default) | Siempre 5 en notas: la fórmula de la nota asume 5. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `max` | otro | Solo con `type="number"` (encuesta de 1 a 10). | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `alignment` | `inline` (default) | Solo los íconos; el número y el conteo los escribe la pantalla. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `alignment` | `horizontal` | Junto con `reviewLink`. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `alignment` | `vertical` | **No usar** (ver abajo). | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 | `reviewLink` | `{ label, href? }` | Link «Ver 128 reseñas» que abre la hoja de reseñas. Hoy sin usos. | según la guía del DS («18 reviews») |
 | `showValue` | `true` | **No usar** (ver abajo). | propuesta, falta aprobación |
-| `reviewCount` | número | **No usar** (ver abajo). | propuesta, falta aprobación |
-| `emojis` | lista | Dejar el default (cinco caras, de triste a feliz). Cambiarlo rompe la lectura de la escala. | propuesta, falta aprobación |
-| `ariaLabel` | texto | Decir qué se califica: «Califica al repartidor», «Nota del local». El default es «Calificación». | propuesta, falta aprobación |
-| `reason` / `reasonPlaceholder` / `reasonRows` | — | Solo en `bar-area`. El placeholder por defecto es «Cuéntanos por qué» (03-10-2026). | propuesta, falta aprobación |
+| `reviewCount` | número | **No usar** (ver abajo). | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `emojis` | lista | Dejar el default (cinco caras, de triste a feliz). Cambiarlo rompe la lectura de la escala. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `ariaLabel` | texto | Decir qué se califica: «Califica al repartidor», «Nota del local». El default es «Calificación». | canon (aprobado por el dueño, 05-10-2026, bloque B5) |
+| `reason` / `reasonPlaceholder` / `reasonRows` | — | Solo en `bar-area`. El placeholder por defecto es «Cuéntanos por qué» (03-10-2026). | según el código |
 
 **Usos de hoy que rompen la regla:**
 
@@ -98,8 +98,8 @@ lista cargada, que viene con tope. La fórmula depende de `n`: otro denominador
   `pages/super-admin/master-users/master-user-sheet.html:142`.
 - **1 rating usado como ícono** (`type="heart"` con `max=1` para los favoritos):
   `components/ratings-detail/ratings-detail.html:45`. Va `sui-icon name="heart-3-fill"`.
-- **A discutir, 2 `inline` interactivos de 28 px** como input:
-  `pages/customer/rate-order/rate-order.html:93` y `:167`. Alternativa: `appearance="bar"`.
+- **A discutir, 2 `inline` interactivos de 28 px en la computadora** (en el teléfono ya van en `2xlarge`) como input:
+  `pages/customer/rate-order/rate-order.html:95` y `:169`. Alternativa: `appearance="bar"`.
 
 ## No usar: por qué no hoy y cuándo sí
 
@@ -115,17 +115,21 @@ lista cargada, que viene con tope. La fórmula depende de `n`: otro denominador
 
 ## 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, `bp.isMobile()` mira solo el
+ancho (≤ 767 px); `bp.celular()` (380–767) y `bp.tactil()` (celular o pantalla táctil) ya miran los
+380 px y el puntero: son las dos señales que usa este componente (ver «Por dispositivo (D16)»).
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| Mostrar en una fila o lista | `medium` (20) | `small` (16) | propuesta, falta aprobación |
-| Mostrar en perfil o ficha | `large` (24) | `medium` (20) | propuesta, falta aprobación |
+| Mostrar en una fila o lista | `large` (24) | `medium` (20) | D16, dueño 05-10-2026 (antes `medium` / `small`) |
+| Mostrar en perfil o ficha | `large` (24) | `medium` (20) | D16, dueño 05-10-2026 |
 | La nota grande de un resumen | `xlarge` (28) | `large` (24) | propuesta, falta aprobación |
-| Pedir una nota | `2xlarge`: `inline` (estrellas de 32 en botones de 44 × 44) o `bar` (celdas de 64 × 44) | `bar` (64 × 36), o `inline` `large` con mouse | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono; web: propuesta |
+| Pedir una nota | `2xlarge`: `inline` (estrellas de 32 en botones de 44 × 44) o `bar` (celdas de 64 × 44) | `bar` (64 × 36), o `inline` `medium` con mouse | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono · web: D16, dueño 05-10-2026 (lo que se toca va `medium` en la computadora; antes `large`, propuesta) |
 
 ```ts
 readonly bp = inject(BreakpointsService); // master-pedidos: src/app/services/breakpoints.service.ts
@@ -133,7 +137,7 @@ readonly bp = inject(BreakpointsService); // master-pedidos: src/app/services/br
 
 ```html
 <sui-rating [value]="local.rating" [readonly]="true" [halfStep]="true"
-  [size]="bp.isMobile() ? 'medium' : 'small'" ariaLabel="Nota del local" />
+  [size]="bp.celular() ? 'large' : 'medium'" ariaLabel="Nota del local" />
 ```
 
 En `bar` el `size` no cuenta salvo `2xlarge` (celda de 44 de alto en vez de 36; íconos fijos de 20
@@ -154,6 +158,28 @@ nota de solo lectura sigue `medium`/`large`.
 (el botón es el ícono, sin padding) y `2xlarge` 44 px (32 + 6 + 6); `bar` 36 px (8 + 20 + 8 de cada
 celda) y en `2xlarge` 44 (12 + 20 + 12); `cell` 58 px (12 + 32 + 12 de padding y 2 de borde).
 
+### Por dispositivo (D16)
+
+`rating` no está en la tabla por componente de D16 (dueño, 05-10-2026), así que va por la regla
+general y tiene **dos filas según el modo**: mostrar una nota (`readonly`) es «lo que no se toca» y
+pedirla es «lo que se toca».
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380 px) | mostrar `medium` · pedir `2xlarge` | D16 pide `medium` con área de 44 para pedir, pero solo `2xlarge` llega a 44: hasta que el DS estire el área (nota ¹ de D16), se queda el grande |
+| celular (380–767 px) | mostrar `large` · pedir `2xlarge` | mostrar sube un paso (P1 b); pedir: `inline` 44 × 44 o `bar` 64 × 44 |
+| tablet táctil (`pointer: coarse`) | mostrar `medium` · pedir `2xlarge` | se pide con el dedo: mismo piso de 44 que el celular |
+| computadora (`pointer: fine`) | mostrar `medium` · pedir `medium` | en `bar` el `size` no cuenta salvo `2xlarge` (celdas de 36) |
+
+Ultrawide (≥ 1920 px): igual que la computadora. `small` no se usa en ningún dispositivo. La nota
+grande de un resumen va un paso arriba de esta tabla (`large` en la computadora, `xlarge` en el
+celular), y eso sigue en propuesta.
+
+En master-pedidos, sin helper propio:
+
+- mostrar: `[size]="bp.celular() ? 'large' : 'medium'"` (resumen, en propuesta: `bp.celular() ? 'xlarge' : 'large'`)
+- pedir: `[size]="bp.tactil() ? '2xlarge' : 'medium'"`
+
 ## API
 
 <!-- api:inicio -->
@@ -206,13 +232,57 @@ Implementa `ControlValueAccessor` sobre `value` (sirve con `formControlName`). `
   nativo), Home/End van a 1 y al máximo, sin vuelta. Cada flecha elige y emite `valueChange`. Si
   la pantalla ya escribe la nota al lado, ponle `aria-hidden="true"` para que no se lea dos veces.
 
+## Bien y mal
+
+Lo favorito no es una nota
+
+```html
+<!-- ❌ mal: un rating de un corazón como ícono (components/ratings-detail/ratings-detail.html:45) -->
+<sui-rating type="heart" appearance="inline" [readonly]="true" [value]="1" [max]="1" />
+```
+
+```html
+<!-- ✅ bien: ícono del mismo tamaño que las estrellas de al lado -->
+<sui-icon name="heart-3-fill" [size]="bp.celular() ? 28 : 24" aria-hidden="true" />
+```
+
+La nota grande de un resumen
+
+```html
+<!-- ❌ mal: tamaños invertidos, más chico en el celular (components/ratings-detail/ratings-detail.html:34) -->
+<sui-rating [value]="average()" [readonly]="true" [halfStep]="true"
+  [size]="bp.isMobile() ? 'large' : 'xlarge'" />
+```
+
+```html
+<!-- ✅ bien: regla general de lo que no se toca, un paso más grande en el celular.
+     El paso extra del resumen (`xlarge` / `large`) sigue en propuesta, falta aprobación -->
+<sui-rating [value]="average()" [readonly]="true" [halfStep]="true"
+  [size]="bp.celular() ? 'large' : 'medium'" />
+```
+
+La nota en una fila o lista
+
+```html
+<!-- ❌ mal: `small` fijo, 16 px también en el celular (pages/drivers/drivers.html:160, pages/customer/order-tracking/order-tracking.html:407) -->
+<sui-rating type="star" size="small" [value]="driver.rating" [readonly]="true" [halfStep]="true" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-rating type="star" [size]="bp.celular() ? 'large' : 'medium'"
+  [value]="driver.rating" [readonly]="true" [halfStep]="true" />
+```
+
 ## Ejemplo
 
 ```html
 <!-- Mostrar la nota del local (promedio, desde el agregado) -->
 <span class="nota">{{ notaTexto }}</span>
-<sui-rating [value]="local.rating" [readonly]="true" [halfStep]="true" size="small" aria-hidden="true" />
+<sui-rating [value]="local.rating" [readonly]="true" [halfStep]="true"
+  [size]="bp.celular() ? 'large' : 'medium'" aria-hidden="true" />
 
 <!-- Pedir la nota al repartidor -->
-<sui-rating appearance="bar" type="star" [(value)]="nota" ariaLabel="Califica al repartidor" />
+<sui-rating appearance="bar" type="star" [size]="bp.tactil() ? '2xlarge' : 'medium'"
+  [(value)]="nota" ariaLabel="Califica al repartidor" />
 ```

package/docs/sui-rich-editor/README.md

@@ -25,14 +25,14 @@ Regla corta: **hoy, siempre `sui-textarea`.**
 ## Qué variante usar
 
 > **La guía del DS no tiene página para este componente.** Viene del Figma («Rich Editor»), donde
-> solo está la barra de formato. Todo lo de abajo es **propuesta, falta aprobación**.
+> solo está la barra de formato. Las reglas marcadas **canon** están aprobadas; lo que sigue en **propuesta** espera decisión.
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos**.
 
 | prop / evento | cuándo | fuente |
 |---|---|---|
 | `layout="full"` (default) | Título, tamaño, B I U S, alineación, comentario, enlace, mención. | API |
-| `layout="formatting"` | Solo B I U S y alineación: lo único que el editor aplica solo. | propuesta, falta aprobación |
+| `layout="formatting"` | Solo B I U S y alineación: lo único que el editor aplica solo. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 | `layout="compact"` | Solo título y tamaño (los dos son avisos a la pantalla, no formato real). | — |
 | `layout="social"` | Comentario, enlace, mención (también avisos). | — |
 | `showMore` | El botón ⋮ al final. Apagarlo si no hay más acciones. | API |
@@ -47,6 +47,12 @@ Regla corta: **hoy, siempre `sui-textarea`.**
 **No tiene `size`.** Los botones de la barra son de 28 px: **no tiene tamaño suficiente para
 mobile**. Si alguna vez se usa, que sea en el panel web.
 
+### Por dispositivo (D16)
+
+No aplica: no tiene input `size` y la barra mide 28 px en todos los dispositivos, así que no llega a
+los 44 de D16 (dueño, 05-10-2026) en el celular ni en la tablet táctil. Solo en la computadora
+(`pointer: fine`); en master-pedidos no hay nada que bindear.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -106,6 +112,45 @@ Sub-componente: `sui-rich-editor-item` (cada botón de la barra).
 - Por default muestra solo la barra: sin `[editable]="true"` no hay dónde escribir.
 - El label de tamaño por default es técnico («14px»); el de título ya está en español («Título», 04-10-2026).
 
+## Bien y mal
+
+Una descripción o una nota
+
+```html
+<!-- ❌ mal: el texto se guarda y se muestra plano; la barra sobra y en el teléfono no se toca -->
+<sui-rich-editor [editable]="true" placeholder="Describe el producto…" [(value)]="descripcion" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-textarea [size]="bp.sizeControl()" label="Descripción" [rows]="4"
+  placeholder="Describe el producto…" [(value)]="descripcion" />
+```
+
+La barra entera esperando que todo funcione
+
+```html
+<!-- ❌ mal: título, tamaño, enlace, comentario y mención solo emiten (action); nadie los resuelve -->
+<sui-rich-editor [editable]="true" [(value)]="html" />
+```
+
+```html
+<!-- ✅ bien: solo lo que el editor aplica solo -->
+<sui-rich-editor layout="formatting" [showMore]="false" [editable]="true" [(value)]="html" />
+```
+
+Un editor sin dónde escribir
+
+```html
+<!-- ❌ mal: sin [editable]="true" solo se dibuja la barra -->
+<sui-rich-editor layout="formatting" placeholder="Escribe la respuesta…" [(value)]="html" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-rich-editor layout="formatting" [editable]="true" placeholder="Escribe la respuesta…" [(value)]="html" />
+```
+
 ## Ejemplo
 
 ```html