@ajuarezso/sui-design-system 0.24.1 → 0.25.1

package/docs/sui-compact-select-for-input/README.md

@@ -30,7 +30,7 @@ Regla corta: **el campo cambia según una elección corta pegada a él → este
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos**. Candidato: el gasto del super
 > admin pone «Monto» (`type="number"`) y «Moneda» (PEN/USD) como dos campos separados,
-> `pages/super-admin/master-gastos/master-gastos.html:195` y `:203`.
+> `pages/super-admin/master-gastos/master-gastos.html:197` y `:206` (medido el 06-10-2026).
 
 | prop | cuándo | fuente |
 |---|---|---|
@@ -57,20 +57,37 @@ en 16/24, igual que el valor del `sui-input` large; el alto no cambia (46 dentro
 | size del input y del selector | campo | fuente |
 |---|---|---|
 | `large` | 48 | canon (aprobado por el dueño, 03-10-2026), extensión SUI |
-| `medium` (default) · `small` · `xsmall` | 40 · 36 · 32 | según la guía del DS |
+| `medium` (default) · `small` · `xsmall` | 40 · 36 · 32 | según la guía del DS · `small` y `xsmall` no se usan: D16, dueño 05-10-2026 |
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| moneda dentro del monto | `sui-input` `large` + este `large` | `sui-input` `medium` + este `medium` | propuesta, falta aprobación |
+| moneda dentro del monto | `sui-input` `large` + este `large` | `sui-input` `medium` + este `medium` | mobile: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono · web: canon (dueño, 05-10-2026, D16) |
 
 Arreglo del 03-10-2026: antes el selector medía 40/36/32 y empujaba el campo a 42/38/34 (el padding
 de la guía no descontaba el borde del input). Ahora el campo mide exacto.
 
+### Por dispositivo (D16)
+
+Comparte fila con `input` y `select` en la tabla de D16 (dueño, 05-10-2026). El size lo decide el
+`sui-input` que lo contiene: el selector lleva **el mismo**.
+
+| dispositivo | size (input y selector) | nota |
+|---|---|---|
+| celular chico (< 380 px) | `large` (48) | interino: D16 pide `medium` con área tocable de 44, pero el DS todavía no la estira en `medium` (40); hasta que lo haga, el mismo que el celular |
+| celular (380–767 px) | `large` (48) | el selector toca de arriba a abajo (46) |
+| tablet táctil (`pointer: coarse`) | `large` (48) | también se toca; las opciones de un `medium` solo suben a 44 hasta 767 px |
+| computadora (`pointer: fine`) | `medium` (40) | `small` y `xsmall` no se usan |
+
+Ultrawide (≥ 1920 px): igual que la computadora.
+
+En master-pedidos: `[size]="bp.sizeControl()"` **en el `sui-input` y en el selector**, los dos con el
+mismo helper.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
 |---|---|---|
-| el componente entero (0 usos) | todo es en soles y con +51 | la moneda de un gasto (`master-gastos.html:195`) o teléfonos de otro país |
+| el componente entero (0 usos) | todo es en soles y con +51 | la moneda de un gasto (`master-gastos.html:197`) o teléfonos de otro país |
 | `country` con bandera | solo hay teléfonos de Perú | repartidores o clientes con número extranjero |
 
 ## API
@@ -110,11 +127,58 @@ Implementa `ControlValueAccessor`.
   movió el clic a un div interno. Aquí sigue en el host. Probar en un iPhone antes del primer uso.
 - No mezclar `[(selected)]` con `formControlName`.
 
+## Bien y mal
+
+**El tamaño del selector y del campo**
+
+```html
+<!-- ❌ mal: el selector en medium dentro de un input large; no cubre el campo (vitrina: master-preview/_guia-moleculas/campos.ts:247) -->
+<sui-input size="large" type="amount" label="Monto" [leadingControl]="true">
+  <sui-compact-select-for-input data-slot="start" size="medium" [country]="false" [items]="monedas" />
+</sui-input>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-input [size]="bp.sizeControl()" type="amount" label="Monto" [leadingControl]="true">
+  <sui-compact-select-for-input data-slot="start" [size]="bp.sizeControl()" [country]="false" [items]="monedas" />
+</sui-input>
+```
+
+**Dónde se proyecta**
+
+```html
+<!-- ❌ mal: slot="prefix" no proyecta y, sin leadingControl, el input no dibuja el divisor -->
+<sui-input [size]="bp.sizeControl()" type="amount" label="Monto">
+  <sui-compact-select-for-input slot="prefix" [size]="bp.sizeControl()" [country]="false" [items]="monedas" />
+</sui-input>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-input [size]="bp.sizeControl()" type="amount" label="Monto" [leadingControl]="true">
+  <sui-compact-select-for-input data-slot="start" [size]="bp.sizeControl()" [country]="false" [items]="monedas" />
+</sui-input>
+```
+
+**Una moneda**
+
+```html
+<!-- ❌ mal: country arranca en true; una moneda no lleva bandera -->
+<sui-compact-select-for-input data-slot="start" [size]="bp.sizeControl()" [items]="monedas" [(selected)]="moneda" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-compact-select-for-input data-slot="start" [size]="bp.sizeControl()" [country]="false"
+                              [items]="monedas" [(selected)]="moneda" />
+```
+
 ## Ejemplo
 
 ```html
-<sui-input label="Monto" type="amount" placeholder="0.00" [leadingControl]="true" [(value)]="monto">
-  <sui-compact-select-for-input data-slot="start" size="medium" [country]="false"
+<sui-input label="Monto" type="amount" placeholder="0.00" [size]="bp.sizeControl()" [leadingControl]="true" [(value)]="monto">
+  <sui-compact-select-for-input data-slot="start" [size]="bp.sizeControl()" [country]="false"
                                 [items]="monedas" [(selected)]="moneda" />
 </sui-input>
 ```

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

@@ -41,24 +41,24 @@ se elige → card de selección.**
 
 | type | cuándo | fuente |
 |---|---|---|
-| `avatar` (`avatar`) | Una persona o un local con foto. El color de las iniciales va por rol: local `orange`, repartidor `green`, cliente `blue`. | canon (avatar por rol); el uso es propuesta |
-| `left-icon` (`icon`) | La misma fila cuando no hay foto: `store-2-line` para el local sin logo. | propuesta (precedente `master-overview.html:224`) |
-| `basic` | Ver «No usar». | propuesta |
-| `company` (`avatar` + `companyLogoSrc`) | Ver «No usar». | propuesta |
-| `brand` (`brand`) | Ver «No usar». | propuesta |
-| `card-provider` (`brand`) | Ver «No usar». | propuesta |
+| `avatar` (`avatar`) | Una persona o un local con foto. El color de las iniciales va por rol: local `orange`, repartidor `green`, cliente `blue`. | canon (avatar por rol) · el uso: canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `left-icon` (`icon`) | La misma fila cuando no hay foto: `store-2-line` para el local sin logo. | canon (aprobado por el dueño, 05-10-2026, bloque B2; precedente `master-overview.html:224`) |
+| `basic` | Ver «No usar». | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `company` (`avatar` + `companyLogoSrc`) | Ver «No usar». | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `brand` (`brand`) | Ver «No usar». | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `card-provider` (`brand`) | Ver «No usar». | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 
 ### Las piezas
 
 | prop | cuándo | fuente |
 |---|---|---|
 | `title` | Siempre. El nombre, nunca un id (regla de la pasada de UX). | canon (CLAUDE.md, «un identificador nunca es el título») |
-| `subtitle` | El dato que se compara entre filas: «214 pedidos este mes», «38 calificaciones». | propuesta |
-| `badge` | Un dato chico que se compara de un vistazo (la nota). El color sigue el significado del badge: `red` si está mal. | propuesta (badge: canon de colores) |
-| `dismissible` | La X solo cuando quitar la fila ES la acción (sacar a alguien del equipo, borrar una tarjeta). **El default es `true`**: pasa `false` siempre que no. | propuesta |
+| `subtitle` | El dato que se compara entre filas: «214 pedidos este mes», «38 calificaciones». | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `badge` | Un dato chico que se compara de un vistazo (la nota). El color sigue el significado del badge: `red` si está mal. | canon (aprobado por el dueño, 05-10-2026, bloque B3; badge: canon de colores) |
+| `dismissible` | La X solo cuando quitar la fila ES la acción (sacar a alguien del equipo, borrar una tarjeta). **El default es `true`**: pasa `false` siempre que no. | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
 | `dismissAriaLabel` | Siempre que haya X: «Quitar a Rosa del equipo», no el default «Descartar». | propuesta |
-| `sublabel` | Ver «No usar». | propuesta |
-| `disabled` | Ver «No usar». | propuesta |
+| `sublabel` | Ver «No usar». | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `disabled` | Ver «No usar». | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 
 **Usos de hoy que rompen las reglas:** 0. Las 4 apagan la X a mano: el default de `dismissible`
 no le sirve a ningún uso de hoy.
@@ -79,12 +79,30 @@ táctil de `large` es de **44** (desde el 04-10-2026; 40 en web).
 | uso | mobile | web | fuente |
 |---|---|---|---|
 | fila | 74, sin cambio | 74, sin cambio | medido del `.scss` |
-| X para quitar | `large` (32, área 44) | `medium` (20) | propuesta: el tamaño es extensión SUI aprobada (03-10-2026); el «cuándo» falta aprobarlo |
+| X para quitar | `large` (32, área 44) | `medium` (20) | mobile: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono · web: canon (aprobado por el dueño, 05-10-2026, bloque B1) (el tamaño `large` es extensión SUI aprobada el 03-10-2026) |
 
 ```html
-<sui-content-card … [size]="bp.isMobile() ? 'large' : 'medium'" (dismiss)="quitar(item)" />
+<sui-content-card … [size]="bp.tactil() ? 'large' : 'medium'" (dismiss)="quitar(item)" />
 ```
 
+### Por dispositivo (D16)
+
+No está en la tabla por componente de D16 (dueño, 05-10-2026). La fila no cambia; el `size` solo
+mueve la X, que **se toca**, así que va como «lo que se toca».
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380 px) | `large` (32, área 44) | interino: D16 pide `medium` con área de 44, pero la X `medium` tiene área de 20; hasta que el DS la estire, el mismo que el celular |
+| celular (380–767 px) | `large` (32, área 44) | |
+| tablet táctil (`pointer: coarse`) | `large` (32, área 40) | también se toca. Ojo: el área de 44 del `::before` está bajo `@media (max-width: 767px)` (`sui-content-card.scss:118`), así que en la tablet se queda en 40 hasta que el DS la prenda con `pointer: coarse` |
+| computadora (`pointer: fine`) | `medium` (20) | |
+
+Ultrawide (≥ 1920 px): igual que la computadora. Con `[dismissible]="false"` (los 4 usos de hoy) el
+`size` no cambia nada y no hace falta pasarlo. El badge de adentro **no se toca**: su `size` va
+dentro del objeto `badge` con `bp.sizeBadge()` (como `master-overview.html:335`).
+
+En master-pedidos: `[size]="bp.tactil() ? 'large' : 'medium'"` (no hay helper propio).
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -135,6 +153,49 @@ táctil de `large` es de **44** (desde el 04-10-2026; 40 en web).
 - No tiene `interactive` ni output de toque: la fila no se puede tocar entera.
 - El host borra el atributo `title` del DOM y lleva `role="group"` con `aria-label` = `title`.
 
+## Bien y mal
+
+**La nota como badge**
+
+```html
+<!-- ❌ mal: badge en string sale naranja lighter small, en MAYÚSCULAS (prototipo: master-prototipos.html:146) -->
+<sui-content-card type="avatar" [avatar]="{ initials: yo.iniciales, color: 'orange' }" [title]="yo.nombre"
+                  badge="★ 5.0" [dismissible]="false" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-content-card type="avatar" [avatar]="{ initials: yo.iniciales, color: 'orange' }" [title]="yo.nombre"
+                  [badge]="{ label: '5.0 ★', color: 'orange', variant: 'lighter', size: bp.sizeBadge() }"
+                  [dismissible]="false" />
+```
+
+**Una fila que no se quita**
+
+```html
+<!-- ❌ mal: dismissible arranca en true; sale una X que no hace nada -->
+<sui-content-card type="avatar" [avatar]="avatarDe(c, 'blue')" [title]="c.nombre" [subtitle]="c.detalle" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-content-card type="avatar" [avatar]="avatarDe(c, 'blue')" [title]="c.nombre" [subtitle]="c.detalle"
+                  [dismissible]="false" />
+```
+
+**Una fila que sí se quita**
+
+```html
+<!-- ❌ mal: la X en medium mide 20 en el celular y se anuncia como «Descartar» -->
+<sui-content-card type="avatar" [avatar]="m.avatar" [title]="m.nombre" (dismiss)="quitar(m)" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-content-card type="avatar" [avatar]="m.avatar" [title]="m.nombre" [size]="bp.tactil() ? 'large' : 'medium'"
+                  [dismissAriaLabel]="'Quitar a ' + m.nombre + ' del equipo'" (dismiss)="quitar(m)" />
+```
+
 ## Ejemplo
 
 ```html
@@ -143,6 +204,6 @@ táctil de `large` es de **44** (desde el 04-10-2026; 40 en web).
   [avatar]="{ src: local.logo, initials: 'SA', color: 'orange' }"
   [title]="local.nombre"
   [subtitle]="local.pedidos + ' pedidos este mes'"
-  [badge]="{ label: '4.6 ★', color: 'orange', variant: 'lighter', size: 'small' }"
+  [badge]="{ label: '4.6 ★', color: 'orange', variant: 'lighter', size: bp.sizeBadge() }"
   [dismissible]="false" />
 ```

package/docs/sui-content-divider/README.md

@@ -24,8 +24,8 @@ Story: [Atoms/Divider/Content Divider](https://sui-design-system.web.app/?path=/
 > **En la guía del DS este componente se llama «Divider»** y trae: línea (default), línea con
 > espacio, línea con texto («OR»), solo texto, texto con fondo («a menudo va en modales») y
 > contenido al centro. Los cuatro tipos con botones vienen del Figma del DS, no de la guía. Lo
-> marcado «según la guía del DS» sale de su texto o de sus ejemplos; el resto es **propuesta,
-> falta aprobación**.
+> marcado «según la guía del DS» sale de su texto o de sus ejemplos; las reglas marcadas canon
+> están aprobadas; lo que sigue en propuesta espera decisión.
 >
 > Uso medido el 04-10-2026 en `master-pedidos/src/app`: **3 content-dividers en 3 archivos**:
 > `pages/auth/login/login.html:61` y `pages/auth/register/register.html:97` (`text-line` «o») y
@@ -37,21 +37,21 @@ Story: [Atoms/Divider/Content Divider](https://sui-design-system.web.app/?path=/
 |---|---|---|---|
 | `text-line` | El «o» entre dos formas de hacer lo mismo. | `text="o"` entre «Continuar con Google» y el formulario de correo | según la guía del DS («OR») |
 | `solid-text` | Cabecera de un grupo dentro de una lista o un modal, con fondo. | «Con pocos pedidos» (`master-drivers.html:192`) | según la guía del DS («a menudo en modales») |
-| `text` | Cabecera de grupo sin fondo, en una lista partida por fecha o por tipo. | «Ayer», «Esta semana» | según la guía del DS (existe) · propuesta (cuándo) |
+| `text` | Cabecera de grupo sin fondo, en una lista partida por fecha o por tipo. | «Ayer», «Esta semana» | según la guía del DS (existe) · cuándo: canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 | `line` (default) | **No usar** (ver abajo). | — | según la guía del DS (default) |
 | `line-spacing` | **No usar** (ver abajo). | — | según la guía del DS |
-| `icon-button` | **No usar** hoy (ver abajo). | `icon="add-line"` | propuesta, falta aprobación |
-| `text-button` | **No usar** hoy (ver abajo). | «Ver 12 más» | propuesta, falta aprobación |
-| `icon-button-group` | **No usar** hoy (ver abajo). | Subir · agregar · bajar | propuesta, falta aprobación |
-| `text-button-group` | **No usar** hoy (ver abajo). | «Producto» · «Sección» | propuesta, falta aprobación |
+| `icon-button` | **No usar** hoy (ver abajo). | `icon="add-line"` | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `text-button` | **No usar** hoy (ver abajo). | «Ver 12 más» | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `icon-button-group` | **No usar** hoy (ver abajo). | Subir · agregar · bajar | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `text-button-group` | **No usar** hoy (ver abajo). | «Producto» · «Sección» | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 
 | propiedad | regla | fuente |
 |---|---|---|
-| `text` | Se escribe en sentence case («o», «Con pocos pedidos»): el componente lo pasa a MAYÚSCULAS. | propuesta, falta aprobación |
-| `icon` | Solo en `icon-button`. Nombre Remix sin `ri-`. | propuesta, falta aprobación |
-| `ariaLabel` | **Obligatorio en `icon-button`**: sin él el lector dice «Acción». | propuesta, falta aprobación |
+| `text` | Se escribe en sentence case («o», «Con pocos pedidos»): el componente lo pasa a MAYÚSCULAS. | canon (CANON-SUI §5.1: sentence case, nunca ALL CAPS a mano) |
+| `icon` | Solo en `icon-button`. Nombre Remix sin `ri-`. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `ariaLabel` | **Obligatorio en `icon-button`**: sin él el lector dice «Acción». | canon (aprobado por el dueño, 05-10-2026, bloque B5) |
 | `items` | Solo en los `-group`: de 2 a 3, cada uno con `ariaLabel` si es ícono. | propuesta, falta aprobación |
-| `disabled` | El botón existe pero hoy no aplica (lista ya completa). | propuesta, falta aprobación |
+| `disabled` | El botón existe pero hoy no aplica (lista ya completa). | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
 
 **Corregido el 03-10-2026:** los 2 «o» que estaban hechos a mano (login y registro) ya son `type="text-line"`.
 
@@ -66,10 +66,13 @@ Story: [Atoms/Divider/Content Divider](https://sui-design-system.web.app/?path=/
 
 ## 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. Hoy la app corta con
+`BreakpointsService.isMobile()` (≤ 767 px), que todavía no mira el puntero ni los 380 px.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
@@ -79,6 +82,15 @@ de la app.
 los botones (`icon-button`, `text-button`, grupos) quedan debajo de los 44 px del dedo; es otra
 razón para no usarlos hoy. Si un flujo nuevo los necesita en mobile, se pide al DS un tamaño grande.
 
+### Por dispositivo (D16)
+
+No aplica: **no tiene `size`** (texto de 11–12 y botones de 32 en todos los dispositivos, del
+celular chico al ultrawide). Con D16 los botones de 32 quedan bajo los 44 también en la tablet
+táctil (`pointer: coarse`), no solo en el celular: una razón más para no usar los tipos con botón
+hasta que el DS tenga un tamaño grande.
+
+En master-pedidos: no hay helper ni `[size]`; solo `type` y `text`.
+
 ## API
 
 <!-- api:inicio -->
@@ -104,13 +116,52 @@ Outputs: `(buttonClick)` en `icon-button` y `text-button`; `(itemClick)` con
 
 ## Trampas
 
-- **Todo el texto sale en MAYÚSCULAS** por CSS: escribirlo normal.
+- **El texto de `text-line`, `text` y `solid-text` sale en MAYÚSCULAS** por CSS: escribirlo normal.
+  Los botones (`text-button`, `text-button-group`) no van en mayúsculas.
 - **`text` y `solid-text` alinean a la izquierda**, no al centro (así está en el Figma).
 - `text-line` usa 11 px; `text` y `solid-text`, 12 px.
 - Sin `ariaLabel`, el `icon-button` se anuncia como «Acción» y los ítems de grupo como
   «Acción 0», «Acción 1».
 - `line` y `line-spacing` existen, pero la línea sola es `sui-divider`.
 
+## Bien y mal
+
+**El «o» entre Google y el correo**
+
+```html
+<!-- ❌ mal: el «o» armado a mano, como estaba en login.html:61 y register.html:97 hasta el 03-10-2026 -->
+<div class="auth-page__divider"><span>o</span></div>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-content-divider type="text-line" text="o" />
+```
+
+**Cabecera de grupo en MAYÚSCULAS a mano**
+
+```html
+<!-- ❌ mal: el componente ya lo pasa a MAYÚSCULAS; el texto va en sentence case (CANON-SUI §5.1) -->
+<sui-content-divider type="solid-text" text="CON POCOS PEDIDOS" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-content-divider type="solid-text" text="Con pocos pedidos" />
+```
+
+**Una línea sola entre dos bloques**
+
+```html
+<!-- ❌ mal: `line` no dice nada; la línea sola es `sui-divider`, que pesa menos -->
+<sui-content-divider type="line" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-divider />
+```
+
 ## Ejemplo
 
 ```html

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

@@ -39,54 +39,86 @@ content-card · ajuste → switch-label.**
 
 | type | cuándo | fuente |
 |---|---|---|
-| `left-icon` (`icon`) | El ícono dice de qué va la fila: los consejos («Revisa tu zona de cobertura»), «Contactar soporte». Sale en un círculo con borde (`sui-key-icon` stroke). | propuesta (14 de 18) |
-| `basic` | Fila de dato sin cara, casi siempre con badge: «Datos personales → Completados». | propuesta |
+| `left-icon` (`icon`) | El ícono dice de qué va la fila: los consejos («Revisa tu zona de cobertura»), «Contactar soporte». Sale en un círculo con borde (`sui-key-icon` stroke). | canon (aprobado por el dueño, 05-10-2026, bloque B2; 14 de 18) |
+| `basic` | Fila de dato sin cara, casi siempre con badge: «Datos personales → Completados». | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 | `avatar` (`avatar`) | Una persona o un local. El color de las iniciales va por rol: local `orange`, repartidor `green`, cliente `blue`. | canon (avatar por rol) |
-| `company` (`avatar` + `companyLogoSrc`) | Ver «No usar». | propuesta |
-| `brand` (`brand`) | Ver «No usar». | propuesta |
+| `company` (`avatar` + `companyLogoSrc`) | Ver «No usar». | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `brand` (`brand`) | Ver «No usar». | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 
 ### `size`
 
 | size | cuándo | fuente |
 |---|---|---|
-| `large` (leading 48, título 16) | Consejos y pasos que se leen, con descripción larga (los 13 de hoy). | propuesta |
-| `medium` (leading 40, título 14, default) | Filas de dato en una lista: el negocio del repartidor, el resumen del registro. | propuesta |
+| `large` (leading 48, título 16) | Consejos y pasos que se leen, con descripción larga (los 13 de hoy). | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `medium` (leading 40, título 14, default) | Filas de dato en una lista: el negocio del repartidor, el resumen del registro. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
 
 ### Las piezas
 
 | prop | cuándo | fuente |
 |---|---|---|
-| `label` | Siempre. En los consejos, una instrucción («Ponle foto a tus productos»); en los datos, el nombre del dato. | propuesta |
-| `description` | La explicación o el detalle. En los consejos, el porqué. | propuesta |
-| `badge` trailing (default) | El estado del dato a la derecha. Pasa el objeto con el color del badge: con string sale naranja. | propuesta |
-| `badgePlacement="title"` | El badge pegado al nombre, cuando la derecha queda libre o es angosta («Sabores Andinos · Propio»). | propuesta |
-| `sublabel` | Ver «No usar». | propuesta |
-| `toggle` / `toggleChecked` | Ver «No usar». | propuesta |
-| `disabled` | Ver «No usar». | propuesta |
-
-**Usos de hoy que rompen las reglas:** 0. A mirar: los 3 badges de
+| `label` | Siempre. En los consejos, una instrucción («Ponle foto a tus productos»); en los datos, el nombre del dato. | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `description` | La explicación o el detalle. En los consejos, el porqué. | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `badge` trailing (default) | El estado del dato a la derecha. Pasa el objeto con el color del badge: con string sale naranja. | canon (aprobado por el dueño, 05-10-2026, bloque B3) |
+| `badgePlacement="title"` | El badge pegado al nombre, cuando la derecha queda libre o es angosta («Sabores Andinos · Propio»). | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `sublabel` | Ver «No usar». | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `toggle` / `toggleChecked` | Ver «No usar». | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `disabled` | Ver «No usar». | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+
+**Usos de hoy que rompen las reglas:** 0 en tipo y piezas. **Con D16 (medido el 06-10-2026)
+rompen el `size` 5**: `pages/driver/driver-dashboard/driver-dashboard.html:1236` (`medium` fijo en
+una fila de dato), los 3 de `step-complete.html:48`–`:58` (sin `size`, fila de dato) y
+`step-complete.html:80` (sin `size`, fila que se toca: queda en `medium` en el celular y la tablet,
+donde la fila de D16 pide `large`). Ojo: en ese último el área táctil está bien (el `<a>` que lo
+envuelve mide 66); lo que rompe es el tamaño de lectura, no el dedo. A mirar: los 3 badges de
 `pages/driver-onboarding/step-complete/step-complete.html:48`–`:58` dicen estados de ciclo
 («Completados», «Esperando vinculación»); el README de `sui-badge` deja esos en
 `sui-status-badge`, pero el content-label solo recibe la config del badge.
 
 ## Tamaño en mobile y en web
 
-No se toca, así que no tiene que llegar a 44. El `size` es de lectura, no de dedo.
+No se toca, así que no tiene que llegar a 44. El `size` es de lectura, no de dedo: cuando la fila
+entera se toca, el área de 44 la pone lo que la envuelve (un `<a>` o un botón), no el `size`.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| consejos y pasos | `large` | `large` | propuesta, falta aprobación |
-| filas de dato | `medium` | `medium` | propuesta, falta aprobación |
-| fila que se toca (soporte) | `large`, o dale a la fila un alto mínimo de 44 | `medium` | propuesta, falta aprobación |
+| consejos y pasos | `large` | `large` | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| filas de dato | `large` | `medium` | canon (dueño, 05-10-2026, D16): grande en el celular; `medium` en la computadora, la tablet y el celular chico (no se toca) |
+| fila que se toca (soporte) | `large` (celular y tablet táctil) | `medium` (computadora y celular chico) | canon (aprobado por el dueño, 05-10-2026, bloque B1; dispositivos por D16). Además, lo que la envuelve mide 44 o más de alto |
 
 Alto de la fila, medido: `medium` 40 (máx. entre el leading de 40 y el texto 20 + 4 + 16) y
 `large` 48 (máx. entre 48 y 24 + 4 + 20). Lo que se toca es lo que la envuelve: «Contactar soporte»
 va dentro de un `<a>` con padding 12 y borde 1, que da 66.
 
 ```html
-<sui-content-label [size]="bp.isMobile() ? 'large' : 'medium'" … />   <!-- solo si la fila se toca -->
+<sui-content-label [size]="bp.celular() ? 'large' : 'medium'" … />   <!-- filas de dato (D16) -->
+<sui-content-label [size]="bp.tactil() && !bp.celularChico() ? 'large' : 'medium'" … />  <!-- fila que se toca (D16) -->
 ```
 
+### Por dispositivo (D16)
+
+Fila de D16 para `content-label` (dueño, 05-10-2026). Es de lectura: sube un paso solo en el
+celular, salvo que la fila entera se toque, que entonces sube también en la tablet táctil. En el
+celular chico queda `medium` en los dos casos: la fila de D16 no lleva el «+ área 44» de lo que se
+toca, porque el área la da lo que envuelve a la fila.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380) | `medium` | también si la fila se toca: el área de 44 la pone el `<a>` que la envuelve («Contactar soporte» mide 66) |
+| celular (380–767) | `large` | lo que no se toca sube un paso en el celular (P1 b) |
+| tablet táctil (`pointer: coarse`) | `medium` · `large` si la fila se toca | |
+| computadora (`pointer: fine`) | `medium` | |
+
+Ultrawide: igual que la computadora; el espacio extra va al ancho de la lista, no a la fila.
+
+Los **consejos y pasos** quedan en `large` en todos los dispositivos (tabla de arriba, bloque B1):
+el `size` ahí es por la descripción larga, no por el dispositivo.
+
+En master-pedidos: no hay helper propio. Filas de dato `[size]="bp.celular() ? 'large' : 'medium'"`
+(da lo mismo que `bp.sizeBadge()`); fila que se toca
+`[size]="bp.tactil() && !bp.celularChico() ? 'large' : 'medium'"` (`bp.tactil()` solo daría `large`
+también en el celular chico, que la fila de D16 deja en `medium`);
+consejos `size="large"`.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -137,6 +169,53 @@ va dentro de un `<a>` con padding 12 y borde 1, que da 66.
 - El host lleva `role="group"` y `aria-label` = `label`. El `toggle` toma su nombre del `label`
   (y su descripción de `description`) con `aria-labelledby` (revisión 04-10-2026).
 
+## Bien y mal
+
+**Fila de dato con el tamaño fijo**
+
+```html
+<!-- ❌ mal: `medium` también en el celular, donde D16 pide `large` (driver-dashboard.html:1236; sin size en step-complete.html:48–58) -->
+<sui-content-label type="avatar" size="medium" [avatar]="n.avatar"
+  [label]="n.tenantName" [badge]="n.badge" badgePlacement="title" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-content-label type="avatar" [size]="bp.celular() ? 'large' : 'medium'" [avatar]="n.avatar"
+  [label]="n.tenantName" [badge]="n.badge" badgePlacement="title" />
+```
+
+**Fila que se toca sin `size`**
+
+```html
+<!-- ❌ mal: queda en `medium` en el celular y la tablet táctil, donde D16 pide `large`; el área ya está bien, el `<a>` mide 66 (step-complete.html:80) -->
+<a class="complete__quick-action" [href]="whatsappUrl">
+  <sui-content-label type="left-icon" icon="whatsapp-line" label="Contactar soporte" />
+</a>
+```
+
+```html
+<!-- ✅ bien -->
+<a class="complete__quick-action" [href]="whatsappUrl">
+  <sui-content-label type="left-icon" icon="whatsapp-line" label="Contactar soporte"
+    [size]="bp.tactil() && !bp.celularChico() ? 'large' : 'medium'" />
+</a>
+```
+
+**Un ajuste que se prende o apaga**
+
+```html
+<!-- ❌ mal: el `toggle` es un switch `medium` fijo y la fila no se toca entera («No usar») -->
+<sui-content-label label="Sonidos de la app" description="Avisos al confirmar pedidos"
+  [toggle]="true" [(toggleChecked)]="sonidos" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-switch-label [flip]="true" label="Sonidos de la app" description="Avisos al confirmar pedidos"
+  [size]="bp.controlSize()" [(active)]="sonidos" />
+```
+
 ## Ejemplo
 
 ```html