@ajuarezso/sui-design-system 0.24.1 → 0.25.1

package/docs/sui-chart-legend-dot/README.md

@@ -24,7 +24,7 @@ Story: [Molecules/Chart/Chart Legend Dot](https://sui-design-system.web.app/?pat
 ## Qué variante usar
 
 > La guía del DS no tiene página para este componente: sale del Figma del DS (set «Chart Legend
-> Dots»). Todo lo de abajo es **propuesta**, salvo lo marcado «según el componente» o «canon».
+> Dots»). Las reglas de abajo son **canon** (cada fila dice de qué aprobación sale), salvo lo marcado «según el componente».
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos sueltos** (sí dentro de la única
 > `sui-chart-legend`), y **3 puntos de serie hechos a mano** fuera de una leyenda.
@@ -37,23 +37,23 @@ Cada color apunta al mismo estado de la paleta que en `sui-badge`. En un gráfic
 | color | estado de la paleta | cuándo | fuente |
 |---|---|---|---|
 | `blue` | information | Primera serie de categorías sin carga (el orden automático arranca aquí). | según el componente (orden) |
-| `orange` | warning | Pendiente; o segunda serie de categorías. | canon (significado del badge) · como serie de categorías: propuesta |
+| `orange` | warning | Pendiente; o segunda serie de categorías. | canon (significado del badge) · como serie de categorías: canon (aprobado por el dueño, 05-10-2026, bloque B3) |
 | `red` | error | Cancelado, rechazado, fallido. | canon (significado del badge) |
 | `green` | success | Entregado, pagado, aprobado. | canon (significado del badge) |
-| `yellow` | away | En pausa; o una serie más de categorías. | canon (significado del badge) · como serie de categorías: propuesta |
-| `purple` | feature | Lo nuevo; o una serie más de categorías. | canon (significado del badge) · como serie de categorías: propuesta |
-| `sky` · `pink` · `teal` | verified · highlighted · stable | Series de categorías a partir de la séptima. | propuesta |
-| `gray` (default) | faded | «Otros» o «Sin categoría»: lo que no se reparte. | propuesta |
-| `light-gray` | — | No usar: es el mismo gris del apagado. **Cuándo sí:** el resto de una barra de progreso partida («lo que falta»). | propuesta |
+| `yellow` | away | En pausa; o una serie más de categorías. | canon (significado del badge) · como serie de categorías: canon (aprobado por el dueño, 05-10-2026, bloque B3) |
+| `purple` | feature | Lo nuevo; o una serie más de categorías. | canon (significado del badge) · como serie de categorías: canon (aprobado por el dueño, 05-10-2026, bloque B3) |
+| `sky` · `pink` · `teal` | verified · highlighted · stable | Series de categorías a partir de la séptima. | canon (aprobado por el dueño, 05-10-2026, bloque B3) |
+| `gray` (default) | faded | «Otros» o «Sin categoría»: lo que no se reparte. | canon (aprobado por el dueño, 05-10-2026, bloque B3) |
+| `light-gray` | — | No usar: es el mismo gris del apagado. **Cuándo sí:** el resto de una barra de progreso partida («lo que falta»). | canon (aprobado por el dueño, 05-10-2026, bloque B3) |
 | `disabled` | — | Una serie sin datos o apagada. Dentro de `sui-chart-legend` va por `disabled: true`, no por color. | según el componente |
-| `customColor` | el color que ya usa el gráfico | Solo si el gráfico tiene paleta propia; gana sobre `color`. | propuesta |
+| `customColor` | el color que ya usa el gráfico | Solo si el gráfico tiene paleta propia; gana sobre `color`. | canon (aprobado por el dueño, 05-10-2026, bloque B3) |
 
 ### `size`
 
 | size | cuándo | fuente |
 |---|---|---|
 | `small` (16 px) | Junto a texto de 12 (como en la leyenda, que lo usa siempre). | según el componente |
-| `medium` (20 px, default) | Junto a texto de 14: filas y tablas. | propuesta |
+| `medium` (20 px, default) | Junto a texto de 14: filas y tablas. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
 
 El círculo de color mide 12 px en los dos tamaños: lo que cambia es el aire alrededor.
 
@@ -71,11 +71,21 @@ Es decorativo y no se toca: no tiene mínimo para el dedo.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| fila de resumen o tabla | `medium` (20) | `medium` (20) | propuesta |
+| fila de resumen o tabla | `medium` (20) | `medium` (20) | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
 | junto a texto de 12 | `small` (16) | `small` (16) | según el componente |
 
 No cambia por plataforma: va con el tamaño del texto que acompaña, no con la pantalla.
 
+### Por dispositivo (D16)
+
+No aplica: el tamaño va con el texto de al lado (`medium` junto a 14, `small` junto a 12, como en la
+leyenda), igual en celular chico, celular, tablet, computadora y ultrawide. Es lo que no se toca, y
+`medium` ya es su size más grande: el paso extra del celular (P1 b) no tiene a dónde subir (D16,
+dueño 05-10-2026).
+
+En master-pedidos: no hay helper; el `size` va literal según el texto (`size="small"` junto a 12, o
+nada para `medium`).
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -110,6 +120,45 @@ Constantes exportadas: `SUI_CHART_LEGEND_COLORS` (los 11 colores en el orden del
 - `SUI_CHART_LEGEND_HEX` tiene los hex del modo claro: en modo oscuro no se invierten.
 - Es decorativo (`aria-hidden`): el significado lo dice el texto de al lado.
 
+## Bien y mal
+
+Punto de una serie fuera de la leyenda
+
+```html
+<!-- ❌ mal: punto hecho a mano, sin anillo ni sombra (components/customer-retention/customer-retention.html:17) -->
+<span class="customer-retention__stat-dot" [style.background]="seg.color"></span>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-chart-legend-dot [customColor]="seg.color" />
+```
+
+Punto sin `color`
+
+```html
+<!-- ❌ mal: sin color sale el default gray, no el verde de la serie -->
+<span class="fila"><sui-chart-legend-dot /> Entregados <b>86 %</b></span>
+```
+
+```html
+<!-- ✅ bien -->
+<span class="fila"><sui-chart-legend-dot color="green" /> Entregados <b>86 %</b></span>
+```
+
+Varios puntos sueltos que hacen de leyenda
+
+```html
+<!-- ❌ mal: es una leyenda armada a mano con puntos sueltos -->
+<span><sui-chart-legend-dot color="blue" size="small" /> Yape</span>
+<span><sui-chart-legend-dot color="orange" size="small" /> Efectivo</span>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-chart-legend [items]="[{ label: 'Yape' }, { label: 'Efectivo' }]" />
+```
+
 ## Ejemplo
 
 ```html

package/docs/sui-checkbox/README.md

@@ -34,11 +34,13 @@ Regla corta: **se suma y se confirma después → checkbox · se aplica ya → s
 > avanzado (sublabel, badge, descripción y link). Lo marcado «según la guía del DS» sale de ahí;
 > el resto es canon del dueño o propuesta.
 >
-> Uso medido el 03-10-2026 en `master-pedidos/src/app`, sin contar prototipos ni vitrinas
-> (`master-preview`, `master-prototipos`, `mockup-sheets-*`, `dx/*`, `_guia-*`, `master-rutina`,
-> `master-medico`, `dev-index`): **5 checkbox en 3 archivos**, todos con tamaño dinámico
-> (`bp.controlSize()` / `ctrlSize()` = `large` en desktop, `xlarge` en mobile, y uno con el
-> `size()` del padre). Más **1 `<input type="checkbox">` nativo** que debería ser este componente.
+> Uso medido el 03-10-2026 y revisado el 06-10-2026 en `master-pedidos/src/app`, sin contar
+> prototipos ni vitrinas (`master-preview`, `master-prototipos`, `mockup-sheets-*`, `dx/*`,
+> `_guia-*`, `master-rutina`, `master-medico`, `dev-index`): **queda 1 `sui-checkbox`**, el de la
+> fila de opciones del detalle de producto, con el `size()` que le pasa el padre (`bp.controlSize()`
+> en la carta del cliente, `ctrlSize()` en la vista previa del modal de producto). Los otros 4 del
+> 03-10 eran casillas con texto armadas a mano y ya pasaron a `sui-checkbox-label`. Quedan además
+> **2 `<input type="checkbox">` nativos** que no deberían serlo (ver abajo).
 
 ### Lo que sí dice la guía del DS
 
@@ -52,32 +54,37 @@ Regla corta: **se suma y se confirma después → checkbox · se aplica ya → s
 | estado | cuándo | fuente |
 |---|---|---|
 | sin marcar / marcado | Lo normal. `[(checked)]` o `formControlName`. | según la guía del DS |
-| `indeterminate` | Solo en el «seleccionar todo» de una lista cuando hay algunas marcadas y otras no. Se ve un guion. Hoy no usar (0 casos, ver abajo). | propuesta, falta aprobación |
-| `disabled` | La opción existe pero hoy no se puede tocar (un producto agotado en las opciones de un plato). Decir por qué cerca. | según la guía del DS (existe); el «cuándo» es propuesta |
+| `indeterminate` | Solo en el «seleccionar todo» de una lista cuando hay algunas marcadas y otras no. Se ve un guion. Hoy no usar (0 casos, ver abajo). | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
+| `disabled` | La opción existe pero hoy no se puede tocar (un producto agotado en las opciones de un plato). Decir por qué cerca. | según la guía del DS (existe); el «cuándo»: canon (aprobado por el dueño, 05-10-2026, bloque B8) |
 
 ### `size`
 
 | size | px | cuándo | fuente |
 |---|---|---|---|
-| `xlarge` | 28 | Mobile. Viene de `bp.controlSize()`. | canon (aprobado por el dueño, 28-09-2026: «componentes grandes») |
-| `large` | 24 | Desktop. Viene de `bp.controlSize()`. | canon (aprobado por el dueño, 28-09-2026) |
-| `medium` (default) | 20 | Solo dentro de un componente que ya fija su escala (la fila de opciones del detalle de producto recibe el `size` del padre). | propuesta, falta aprobación |
+| `xlarge` | 28 | Celular y tablet táctil (D16). | canon (aprobado por el dueño, 28-09-2026: «componentes grandes») |
+| `large` | 24 | Computadora (D16). | canon (aprobado por el dueño, 28-09-2026) |
+| `medium` (default) | 20 | Solo dentro de un componente que ya fija su escala. Hoy no hay ninguno: la fila de opciones del detalle de producto recibe el `size` del padre, que es el de D16. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
 | `small` | 16 | No usar (ver abajo). | canon (aprobado por el dueño, 28-09-2026) |
 
-Regla: **`[size]="bp.controlSize()"`** en toda pantalla. Así ya están los 5 usos de hoy.
+Regla: **`[size]="bp.tactil() ? 'xlarge' : 'large'"`** en toda pantalla (la expresión exacta de
+D16, ver «Por dispositivo»). El único `sui-checkbox` de hoy no la lleva escrita: recibe el `size()`
+del detalle de producto, y ese padre recibe `bp.controlSize()` o `ctrlSize()`.
 
-**Usos de hoy que rompen la regla de componente:**
+**Usos de hoy frente a la regla de componente** (revisado 06-10-2026):
 
-- **4 `sui-checkbox` envueltos en un `<label>` hecho a mano con su texto → `sui-checkbox-label`.**
-  `pages/settings/team/team.html:228` y `:301` (permisos: «Gestionar productos»…),
-  `components/option-sections-manager/option-sections-manager.html:191` (categorías) y `:214`
-  (productos). Además, tocar el texto no marca nada: un `<label>` solo activa controles nativos
-  y `sui-checkbox` no lo es, así que hoy solo responde la casilla.
+- **Los 4 `sui-checkbox` envueltos en un `<label>` a mano ya pasaron a `sui-checkbox-label`** con
+  su tamaño: `pages/settings/team/team.html:237` y `:309` (permisos, `[size]="bp.controlSize()"`),
+  `components/option-sections-manager/option-sections-manager.html:190` (categorías) y `:212`
+  (productos). Estos dos usan `ctrlSize()`, una copia local de `bp.controlSize()`
+  (`option-sections-manager.ts:62`): da lo mismo, pero conviene usar el helper del servicio.
+  Antes, tocar el texto no marcaba nada: un `<label>` solo activa controles nativos y
+  `sui-checkbox` no lo es, así que solo respondía la casilla. `sui-checkbox-label` hace que toda
+  la fila responda.
 - **1 checkbox nativo → `sui-checkbox-label`:** `pages/sales-channels/facebook/facebook.html:69`
-  («Qué se sincroniza»).
-- **Al migrar, pásale el tamaño:** `sui-checkbox-label` tiene `size` (`medium` 20, `large` 24,
-  `xlarge` 28) desde el 03-10-2026. Con `[size]="bp.controlSize()"` los 4 de arriba siguen en
-  24/28 px; sin él caen a 20.
+  («Qué se sincroniza»). **Al migrarlo, pásale el tamaño:** `sui-checkbox-label` arranca en
+  `medium` (casilla de 20); sin `[size]` queda chico en el celular.
+- **1 checkbox nativo que en realidad es un interruptor → `sui-switch-label`:**
+  `components/settings-panel/settings-panel.html:99` (notificaciones push, se aplica al instante).
 - El de `components/product-detail-view/product-detail-view.html:204` está bien pelado: la fila
   es propia (foto, nombre, precio) y es la fila la que recibe el clic.
 
@@ -89,14 +96,38 @@ que lo contiene. En web va un escalón más chico.
 | uso | mobile | web |
 |---|---|---|
 | casilla en una lista, tabla o fila de formulario | `xlarge` (28 px) | `large` (24 px) |
-| dentro de un componente que fija su escala (fila de opciones del detalle de producto) | lo que pase el padre | lo que pase el padre |
+| dentro de un componente que recibe su `size` del padre (fila de opciones del detalle de producto) | lo que pase el padre | lo que pase el padre |
 
 ```html
-<sui-checkbox [size]="bp.controlSize()" … />   <!-- controlSize() = isMobile() ? 'xlarge' : 'large' -->
+<sui-checkbox [size]="bp.tactil() ? 'xlarge' : 'large'" … />   <!-- tactil() = isMobile() || pointer: coarse -->
 ```
 
-El más grande mide 28 px: ningún tamaño llega a 44 px por sí solo. La fila (o el `<label>` que
-envuelve) tiene que medir al menos 44 px de alto para que el toque sea cómodo.
+El más grande mide 28 px: ningún tamaño llega a 44 px por sí solo. La fila que lo
+contiene tiene que medir al menos 44 px de alto para que el toque sea cómodo.
+
+### Por dispositivo (D16)
+
+Fila de `checkbox` 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) | Apple pide 44 pt también en iPad; la fila da el alto |
+| computadora (`pointer: fine`) | `large` (24) | un paso menos que el celular (dueño, 06-10-2026) |
+
+Ultrawide (≥ 1920 px): igual que la computadora, `large`. `small` no se usa en ningún dispositivo;
+`medium` solo si un padre fija su propia escala (el detalle de producto hoy no lo hace: recibe el
+tamaño de D16 de su padre).
+
+En master-pedidos, la expresión que da esta tabla completa es
+**`[size]="bp.tactil() ? 'xlarge' : 'large'"`** (`bp.tactil()` = celular por ancho o pantalla
+táctil). La fila de D16 nombra `bp.controlSize()`, que es lo que llevan hoy los usos de la app: da
+lo mismo en el celular y en la computadora, pero mira solo el ancho (≤ 767 px), así que en un iPad
+de 768 o más devuelve `large` y no `xlarge`. Para que la tabla se cumpla en la tablet hay dos
+caminos: escribir la expresión de arriba, o que `controlSize()` pase a mirar `tactil()` en el
+servicio. Eso último cambia todos los usos de golpe y es decisión del dueño.
 
 ## «No usar»: por qué no hoy y cuándo sí
 
@@ -105,7 +136,7 @@ cae en la columna de la derecha, se usa.
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
 |---|---|---|
-| `size="small"` (16 px) | en el teléfono se pierde y no llega al área táctil (el dueño pidió controles grandes) | una tabla densa solo de desktop con selección por fila (super admin), donde 24 px desalinea la fila |
+| `size="small"` (16 px) | en el teléfono se pierde y no llega al área táctil (el dueño pidió controles grandes), y es chico (D16, 05-10-2026) | nunca: una tabla del super admin con selección por fila también va con la casilla de web |
 | `indeterminate` (0 usos) | ninguna lista tiene «seleccionar todo» | el «seleccionar todo» de una lista de productos o pedidos con acciones en lote |
 
 ## API
@@ -129,7 +160,10 @@ Implementa `ControlValueAccessor`: funciona con `[(ngModel)]` y `formControlName
 ## Trampas
 
 - **No tiene `label`.** Para el texto está `sui-checkbox-label`. Y el host lleva `role="checkbox"`
-  sin `aria-label` propio: pelado, ponle `aria-label="…"` o un `<label>` que lo envuelva.
+  sin `aria-label` propio: pelado, ponle `aria-label="…"` (o `aria-labelledby` apuntando al texto
+  de la fila). **Un `<label>` que lo envuelva no sirve**: `<label>` solo activa y nombra controles
+  nativos, y `sui-checkbox` es un elemento propio con `role="checkbox"`. Tocar el texto no lo marca
+  y el lector de pantalla no lo asocia.
 - **`checked` es model; `indeterminate` es input.** Hay `[(checked)]` pero no `[(indeterminate)]`,
   y el componente **no limpia el guion solo** al tocarlo: mientras `indeterminate` siga en `true`
   se ve el guion aunque cambie `checked`.
@@ -141,12 +175,58 @@ Implementa `ControlValueAccessor`: funciona con `[(ngModel)]` y `formControlName
 - El tilde es un SVG dibujado a mano: no se cambia el ícono.
 - Ya trae el arreglo de iOS para el `:active` pegado: no lo agregues.
 
+## Bien y mal
+
+Casilla con su texto
+
+```html
+<!-- ❌ mal: nativo dentro de un <label> hecho a mano (pages/sales-channels/facebook/facebook.html:69) -->
+<label class="fb-channel__sync-item">
+  <input type="checkbox" [checked]="item.checked" (change)="toggleSync(item.id)" />
+  <span>{{ item.label }}</span>
+</label>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-checkbox-label [size]="bp.tactil() ? 'xlarge' : 'large'" [label]="item.label"
+  [active]="item.checked" (activeChange)="toggleSync(item.id)" />
+```
+
+Algo que se aplica al instante
+
+```html
+<!-- ❌ mal: casilla nativa pintada de interruptor para las notificaciones (components/settings-panel/settings-panel.html:99) -->
+<label class="sp__toggle">
+  <input type="checkbox" [checked]="pushEnabled()" (change)="togglePush(!pushEnabled())" />
+</label>
+```
+
+```html
+<!-- ✅ bien: se aplica ya → switch, no checkbox -->
+<sui-switch-label [size]="bp.tactil() ? 'xlarge' : 'large'" label="Notificaciones push"
+  [active]="pushEnabled()" (activeChange)="togglePush($event)" />
+```
+
+«Seleccionar todo» de una lista
+
+```html
+<!-- ❌ mal: el guion fijo no se limpia al tocar la casilla, y pelada no tiene nombre -->
+<sui-checkbox [size]="bp.tactil() ? 'xlarge' : 'large'" [indeterminate]="true" [(checked)]="todas" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-checkbox [size]="bp.tactil() ? 'xlarge' : 'large'" aria-label="Seleccionar todo"
+  [indeterminate]="algunas() && !todas()" [checked]="todas()" (checkedChange)="marcarTodas($event)" />
+```
+
 ## Ejemplo
 
 ```html
 <!-- Pelado, el texto vive en la fila (celda de tabla, fila propia) -->
-<sui-checkbox [size]="bp.controlSize()" [(checked)]="seleccionado" aria-label="Elegir pedido" />
+<sui-checkbox [size]="bp.tactil() ? 'xlarge' : 'large'" [(checked)]="seleccionado" aria-label="Elegir pedido" />
 
 <!-- Con texto: usa sui-checkbox-label, no esto a mano -->
-<sui-checkbox-label label="Gestionar productos" [(active)]="puedeProductos" />
+<sui-checkbox-label [size]="bp.tactil() ? 'xlarge' : 'large'" label="Gestionar productos" [(active)]="puedeProductos" />
 ```

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

@@ -44,23 +44,23 @@ una → radio-card.**
 
 | type | cuándo | fuente |
 |---|---|---|
-| `left-icon` (`icon`, `emoji` o `iconSrc`) | Lo normal: un ícono que dice de qué va la opción. | propuesta (6 de hoy) |
-| `basic` | Un ajuste o una opción de texto que se guarda con un botón y no necesita ícono («Pausar los pedidos» en master-settings). | propuesta (5 de hoy) |
-| `company` | Un medio de pago o servicio con su logo redondo (Yape, Plin). El logo lo proyectas tú con `slot="leading"`. | propuesta (2 de hoy) |
-| `avatar` (`imageUrl`) | Ver «No usar». | propuesta |
-| `card-provider`, `brand` | Ver «No usar». El logo lo proyectas tú con `slot="leading"`. | propuesta |
+| `left-icon` (`icon`, `emoji` o `iconSrc`) | Lo normal: un ícono que dice de qué va la opción. | canon (aprobado por el dueño, 05-10-2026, bloque B2) (6 de hoy) |
+| `basic` | Un ajuste o una opción de texto que se guarda con un botón y no necesita ícono («Pausar los pedidos» en master-settings). | canon (aprobado por el dueño, 05-10-2026, bloque B2) (5 de hoy) |
+| `company` | Un medio de pago o servicio con su logo redondo (Yape, Plin). El logo lo proyectas tú con `slot="leading"`. | canon (aprobado por el dueño, 05-10-2026, bloque B2) (2 de hoy) |
+| `avatar` (`imageUrl`) | Ver «No usar». | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `card-provider`, `brand` | Ver «No usar». El logo lo proyectas tú con `slot="leading"`. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 
 ### Las piezas
 
 | prop | cuándo | fuente |
 |---|---|---|
-| `label` | Siempre. El nombre de la opción: «Delivery». | propuesta |
-| `description` | Lo que significa elegirla: «Llevas los pedidos a la dirección del cliente». | propuesta (8 de hoy) |
-| `sublabel` | Precisión corta entre paréntesis. | propuesta |
-| `badge` | Marca una opción frente a las otras («Nuevo»). Con string sale azul `light`. | propuesta |
-| `indeterminate` | Una casilla que resume a otras («Todos los días» con algunos marcados). | propuesta |
-| `disabled` | La opción no aplica hoy; di por qué en la `description`. | propuesta |
-| `checked` | `[checked]` + `(checkedChange)`, o `[(checked)]`, o `formControlName`. | propuesta |
+| `label` | Siempre. El nombre de la opción: «Delivery». | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `description` | Lo que significa elegirla: «Llevas los pedidos a la dirección del cliente». | canon (aprobado por el dueño, 05-10-2026, bloque B4) (8 de hoy) |
+| `sublabel` | Precisión corta entre paréntesis. | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `badge` | Marca una opción frente a las otras («Nuevo»). Con string sale azul `light`. | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `indeterminate` | Una casilla que resume a otras («Todos los días» con algunos marcados). | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `disabled` | La opción no aplica hoy; di por qué en la `description`. | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `checked` | `[checked]` + `(checkedChange)`, o `[(checked)]`, o `formControlName`. | según el código |
 
 ### `size` (la casilla de adentro)
 
@@ -71,7 +71,7 @@ una → radio-card.**
 | `medium` (default), `small` | No usar en pantallas nuevas. | canon (aprobado por el dueño, 28-09-2026) |
 
 **Usos de hoy que rompen las reglas: 0.** El que iba sin `size`
-(`pages/super-admin/master-administrados/master-administrados.html:172`) y los switch-cards que se
+(`pages/super-admin/master-administrados/master-administrados.html:171`) y los switch-cards que se
 guardaban con un botón se corrigieron el 03-10-2026.
 
 ## Tamaño en mobile y en web
@@ -88,13 +88,27 @@ sola. El `size` cambia solo la casilla.
 <sui-checkbox-card [size]="bp.controlSize()" … />   <!-- isMobile() ? 'xlarge' : 'large' -->
 ```
 
+### Por dispositivo (D16)
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380) | `xlarge` | la card entera ya pasa de 44; el size solo agranda la casilla |
+| 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'`.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
 |---|---|---|
 | `type="avatar"` (0 usos) | no se elige gente de a varios | elegir a varios repartidores para mandarles un aviso |
 | `type="brand"` / `"card-provider"` (0 usos) | no hay integraciones ni tarjetas | prender varias integraciones a la vez (logo proyectado), aceptar varias marcas de tarjeta |
-| `size="medium"` / `"small"` | la casilla se pierde en el teléfono | una tabla densa solo de desktop |
+| `size="medium"` / `"small"` | la casilla se pierde en el teléfono | no hay: en la computadora va `large` (D16, dueño 06-10-2026) |
 
 ## API
 
@@ -141,6 +155,48 @@ Slot: `[slot=leading]` (solo para `card-provider`, `brand` y `company`). Impleme
   derecha solo dibuja el estado, va oculta al lector y fuera del Tab (`[focusable]="false"`).
   Hasta el 04-10-2026 quedaba enfocable con `aria-hidden` y ahí Espacio no marcaba nada.
 
+## Bien y mal
+
+Card sin `size`
+
+```html
+<!-- ❌ mal: sin size queda la casilla medium de 20 (así estaba pages/super-admin/master-administrados/master-administrados.html:171 hasta el 03-10-2026) -->
+<sui-checkbox-card type="left-icon" icon="motorbike-line" label="Delivery" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-checkbox-card [size]="bp.controlSize()" type="left-icon" icon="motorbike-line" label="Delivery" />
+```
+
+Estado que no vuelve a la señal
+
+```html
+<!-- ❌ mal: es no controlada; el toque la marca adentro y ofreceRecojo() no se entera -->
+<sui-checkbox-card [size]="bp.controlSize()" label="Recojo en tienda"
+  [checked]="ofreceRecojo()" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-checkbox-card [size]="bp.controlSize()" label="Recojo en tienda"
+  [checked]="ofreceRecojo()" (checkedChange)="ofreceRecojo.set($event)" />
+```
+
+Medio de pago con logo
+
+```html
+<!-- ❌ mal: type="company" sin slot="leading" deja el hueco del logo -->
+<sui-checkbox-card type="company" [size]="bp.controlSize()" label="Yape" />
+```
+
+```html
+<!-- ✅ bien (como pages/mi-negocio/mi-negocio.html:1209) -->
+<sui-checkbox-card type="company" [size]="bp.controlSize()" label="Yape">
+  <span slot="leading" aria-label="Yape">Y</span>
+</sui-checkbox-card>
+```
+
 ## Ejemplo
 
 ```html

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

@@ -13,8 +13,8 @@ Story: [Atoms/Checkbox, Radio & Switch/Checkbox Label](https://sui-design-system
 
 **Úsalo** para toda casilla que tiene texto al lado: «Acepto los términos», cada permiso de un
 miembro del equipo, cada categoría de una lista. Toda la fila es clicable y se enchufa a un
-formulario. En mobile va con `[size]="bp.controlSize()"` (casilla de 28 px), como los demás
-controles.
+formulario. En el celular y la tablet va `xlarge` (casilla de 28 px) y en la computadora `large`,
+con `[size]="bp.controlSize()"`, como los demás controles (D16).
 
 **No lo uses** para:
 
@@ -32,9 +32,10 @@ Regla corta: **casilla con texto → este · casilla sin texto → `sui-checkbox
 > arma Label + (Sublabel) + badge «NEW» + descripción + Link Button, y la variante invertida
 > (casilla a la derecha). No trae do/don't. Lo marcado «según la guía del DS» sale de ese ejemplo.
 >
-> Uso medido el 03-10-2026 en `master-pedidos/src/app` (sin prototipos ni vitrinas, misma lista
-> de exclusión que `sui-badge`): **0 usos**. Hay **5 casillas armadas a mano** que deberían ser
-> este componente (ver abajo).
+> Uso medido el 06-10-2026 en `master-pedidos/src/app` (sin prototipos ni vitrinas, misma lista
+> de exclusión que `sui-badge`): **4 usos**, todos con `bp.controlSize()` o su equivalente
+> `ctrlSize()`. El 03-10-2026 eran 0: los 4 eran `sui-checkbox` dentro de un `<label>` a mano y se
+> migraron el 04-10-2026. Queda **1 casilla armada a mano** (ver abajo).
 
 ### Las piezas
 
@@ -43,22 +44,20 @@ Regla corta: **casilla con texto → este · casilla sin texto → `sui-checkbox
 | `label` | Siempre. Qué se marca, en una a tres palabras («Gestionar productos»). | según la guía del DS (pieza); largo según `docs/CANON-SUI.md` §5.4 |
 | `sublabel` | Una precisión corta entre paréntesis: «(opcional)», «(12)». Va con paréntesis en el texto: el componente no los pone. | según la guía del DS («Label(Sublabel)») |
 | `description` | Cuando la opción necesita una frase que explique qué pasa si se marca («Recibe un correo cada vez que entra un pedido»). Pasa el label a peso medio. | según la guía del DS (pieza); el «cuándo» es propuesta |
-| `badge` | Solo para algo **nuevo** («Nuevo», en `purple` como el badge de novedad). Con string sale naranja `light`: pásale el objeto. | según la guía del DS (pieza «NEW»); el color es propuesta |
+| `badge` | Solo para algo **nuevo** («Nuevo», en `purple` como el badge de novedad). Con string sale naranja `light`: pásale el objeto. | según la guía del DS (pieza «NEW»); el color: canon (aprobado por el dueño, 05-10-2026, bloque B3) |
 | `link` | Un «Ver detalle» que abre más información sin marcar la casilla. **Solo se ve si hay `description`.** | según la guía del DS (pieza «Link Button») |
-| `flip` | No usar en formularios: la casilla va a la izquierda, como en la guía. | propuesta, falta aprobación |
-| `indeterminate` | El «seleccionar todo» de un grupo, cuando hay algunas marcadas. Hoy no usar (ver abajo). | propuesta, falta aprobación |
+| `flip` | No usar en formularios: la casilla va a la izquierda, como en la guía. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `indeterminate` | El «seleccionar todo» de un grupo, cuando hay algunas marcadas. Hoy no usar (ver abajo). | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
 | `disabled` | La opción existe pero no se puede tocar ahora; decir por qué en la descripción. | según la guía del DS |
-| `size` | `medium` (default, Figma): casilla 20, label 14/20. `large`: casilla 24, label 16/24. `xlarge`: casilla 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): casilla 20, label 14/20. `large`: casilla 24, label 16/24. `xlarge`: casilla 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`: casilla 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 que deberían ser este componente (5):**
+**Usos de hoy (4), todos con el size de D16:** `pages/settings/team/team.html:237` y `:309`
+(permisos, `bp.controlSize()`), `components/option-sections-manager/option-sections-manager.html:190`
+y `:212` (`ctrlSize()`, que hace lo mismo con `bp.isMobile()`). Hasta el 04-10-2026 eran
+`sui-checkbox` dentro de un `<label>` a mano: tocar el texto no marcaba nada.
 
-- **4 `sui-checkbox` + `<label>` a mano:** `pages/settings/team/team.html:228` y `:301`
-  (permisos), `components/option-sections-manager/option-sections-manager.html:191` y `:214`.
-- **1 nativo:** `pages/sales-channels/facebook/facebook.html:69`.
-
-**Antes de migrarlos:** los 4 de `sui-checkbox` hoy están en 24/28 px (`bp.controlSize()`,
-regla de controles grandes del dueño, 28-09-2026). Desde el 03-10-2026 el label tiene `size`
-(`large` 24 / `xlarge` 28): al migrar se le pasa `[size]="bp.controlSize()"` y no se achican.
+**Uso de hoy que debería ser este componente (1):** el nativo de
+`pages/sales-channels/facebook/facebook.html:66`. Al migrarlo se le pasa `[size]="bp.controlSize()"`.
 
 ## Tamaño en mobile y en web
 
@@ -70,11 +69,11 @@ dueño, 28-09-2026).
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| casilla con texto en un formulario | `2xlarge` (fila de 44 como mínimo, casilla 28, label 16/24) | `large` (casilla 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 (tabla, filtros) | — | `medium` (casilla 20, label 14/20) | propuesta, falta aprobación |
+| casilla con texto en un formulario | `xlarge` (casilla 28, label 16/24; sin descripción la fila mide 28, no 44: `2xlarge` pendiente, ver D16) | `large` (casilla 24, label 16/24) | D16 (fila de checkbox, radio y switch; dueño 06-10-2026) |
+| lista densa de desktop (tabla, filtros) | — | `large` (casilla 24): no baja a `medium` | D16, dueño 06-10-2026 |
 
 ```html
-<sui-checkbox-label [size]="bp.isMobile() ? '2xlarge' : 'large'" label="Recordar mi dirección" [(active)]="recordar" />
+<sui-checkbox-label [size]="bp.controlSize()" label="Recordar mi dirección" [(active)]="recordar" />
 ```
 
 | size | casilla | label | sublabel / descripción | alto de la fila sin descripción |
@@ -84,22 +83,43 @@ 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: misma casilla 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 la misma casilla 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), así que el área táctil es la fila entera, no solo
 la casilla. Con `xlarge` el contenido baja 2 px para que la línea del label (24) quede centrada
 con la casilla (28).
 
-Sin descripción, la fila en `xlarge` mide 28 px (lo que mide la casilla): 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
-en `xlarge` y en `2xlarge`.
+Sin descripción, la fila en `xlarge` mide 28 px (lo que mide la casilla), por debajo del piso de 44;
+`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` | casilla 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 |
@@ -151,6 +171,52 @@ Implementa `ControlValueAccessor` (`[(ngModel)]`, `formControlName`).
   «casilla, no marcada» sin el texto.
 - Deshabilitado baja la opacidad del bloque a 0.5 (convención del proyecto).
 
+## Bien y mal
+
+Casilla suelta con el texto en un `<label>` aparte
+
+```html
+<!-- ❌ mal: tocar el texto no marcaba nada (así estaba pages/settings/team/team.html:237 hasta el 04-10-2026) -->
+<label class="team__permission-check">
+  <sui-checkbox [size]="bp.controlSize()" [checked]="hasPermission(perm)" (checkedChange)="togglePermission(perm)" />
+  <span>{{ PERMISSION_LABELS[perm] }}</span>
+</label>
+```
+
+```html
+<!-- ✅ bien (como pages/settings/team/team.html:237 hoy) -->
+<sui-checkbox-label [size]="bp.controlSize()"
+  [label]="PERMISSION_LABELS[perm]" [active]="hasPermission(perm)" (activeChange)="togglePermission(perm)" />
+```
+
+Estado con el nombre de otro control
+
+```html
+<!-- ❌ mal: aquí el estado se llama active; [(checked)] no existe -->
+<sui-checkbox-label label="Gestionar productos" [(checked)]="permisos.productos" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-checkbox-label [size]="bp.controlSize()" label="Gestionar productos" [(active)]="permisos.productos" />
+```
+
+Casilla con texto armada a mano
+
+```html
+<!-- ❌ mal: input nativo + label, sin tamaño ni foco del DS (pages/sales-channels/facebook/facebook.html:66) -->
+<label class="fb-channel__sync-item">
+  <input type="checkbox" [checked]="item.checked" (change)="toggleSync(item.id)" />
+  <span>{{ item.label }}</span>
+</label>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-checkbox-label [size]="bp.controlSize()"
+  [label]="item.label" [active]="item.checked" (activeChange)="toggleSync(item.id)" />
+```
+
 ## Ejemplo
 
 ```html