@ajuarezso/sui-design-system 0.25.0 → 0.25.2

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

@@ -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
 
@@ -48,17 +49,15 @@ Regla corta: **casilla con texto → este · casilla sin texto → `sui-checkbox
 | `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

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

@@ -79,8 +79,8 @@ Criterio de la app: **D16, tamaño por dispositivo** (canon, dueño, 05-10-2026)
 380 px o más y, en lo que se toca, también la tablet (`pointer: coarse`). La columna «web» es la
 computadora (`pointer: fine`) y, en lo que no se toca, también la tablet. En el celular chico
 (< 380 px) va `medium` a la vista, sin achicar el área de 44 de lo que se toca. **Nada en `small` ni
-`xsmall`**, salvo lo que el componente solo tiene en chico. Hoy la app corta con
-`BreakpointsService.isMobile()` (≤ 767 px), que todavía no mira el puntero ni los 380 px.
+`xsmall`**, salvo lo que el componente solo tiene en chico. En la app, `BreakpointsService` ya
+tiene las señales de D16: `celular()` (380–767 px), `celularChico()`, `toque()` y `tactil()`.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
@@ -93,10 +93,29 @@ readonly bp = inject(BreakpointsService); // master-pedidos: src/app/services/br
 ```
 
 ```html
-<sui-circular-progress-bar [value]="60" [size]="bp.isMobile() ? 64 : 56" ariaLabel="Perfil completado" />
+<sui-circular-progress-bar [value]="60" [size]="bp.celular() ? 64 : 56" ariaLabel="Perfil completado" />
 ```
 
-`size` es un número: el ternario devuelve `64 : 56`, no `'64' : '56'`.
+`size` es un número: el ternario devuelve `64 : 56`, no `'64' : '56'`. Va `bp.celular()` y no
+`bp.isMobile()`: `isMobile()` también incluye el celular chico, que en lo que no se toca lleva el
+valor de web (D16, dueño 05-10-2026).
+
+### Por dispositivo (D16)
+
+No se toca: sube un paso solo en el celular de 380 px o más (P1 b). El celular chico y la tablet
+van con el valor de la computadora.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380 px) | `56` en fila o card · `72` lo principal · `48` junto al texto | valor «web» |
+| celular (380–767 px) | `64` en fila o card · `80` lo principal · `48` junto al texto | valor «mobile» |
+| tablet táctil (`pointer: coarse`) | `56` · `72` · `48` | valor «web»: no se toca, no necesita crecer |
+| computadora (`pointer: fine`) | `56` · `72` · `48` | |
+
+Ultrawide (≥ 1920 px): igual que la computadora; el espacio extra no agranda el anillo.
+
+En master-pedidos: no hay helper; `[size]="bp.celular() ? 64 : 56"` en una fila o card y
+`[size]="bp.celular() ? 80 : 72"` en lo principal. Junto a un texto, `[size]="48"` fijo.
 
 ## API
 
@@ -126,11 +145,50 @@ Outputs: ninguno.
 - Sin `ariaLabel` se anuncia «Progreso» (04-10-2026: antes quedaba sin nombre). Pasa uno que diga
   qué avanza («Perfil completado»).
 
+## Bien y mal
+
+El tamaño es un número
+
+```html
+<!-- ❌ mal: un string no tipa con 48 | 56 | 64 | 72 | 80 -->
+<sui-circular-progress-bar [value]="60" size="64" ariaLabel="Perfil completado" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-circular-progress-bar [value]="60" [size]="bp.celular() ? 64 : 56" ariaLabel="Perfil completado" />
+```
+
+Anillo de 48 solo
+
+```html
+<!-- ❌ mal: en 48 no hay número al centro, y nada al lado dice cuánto va -->
+<sui-circular-progress-bar [value]="60" [size]="48" />
+```
+
+```html
+<!-- ✅ bien: el texto de al lado dice el número; el anillo dice qué mide -->
+<sui-circular-progress-bar [value]="60" [size]="48" ariaLabel="Perfil completado" />
+<span>Perfil 60 % completo</span>
+```
+
+Grosor a mano
+
+```html
+<!-- ❌ mal: strokeWidth pisa el grosor que ya sale de la guía por tamaño -->
+<sui-circular-progress-bar [value]="80" [size]="72" [strokeWidth]="10" ariaLabel="Meta del día" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-circular-progress-bar [value]="80" [size]="bp.celular() ? 80 : 72" ariaLabel="Meta del día" />
+```
+
 ## Ejemplo
 
 ```html
 <div class="perfil">
-  <sui-circular-progress-bar [value]="60" [size]="56" ariaLabel="Perfil completado" />
+  <sui-circular-progress-bar [value]="60" [size]="bp.celular() ? 64 : 56" ariaLabel="Perfil completado" />
   <span>Completa tu perfil para empezar a repartir</span>
 </div>
 ```

package/docs/sui-color-dot/README.md

@@ -33,7 +33,7 @@ un `<button role="radio">`: se toca.
 > Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos**, sin contar prototipos ni
 > vitrinas (`master-preview`, `master-prototipos`, `mockup-sheets-*`, `dx/*`, `_guia-*`,
 > `master-rutina`, `master-medico`, `master-ejercicios`, `dev-index`). Candidato:
-> `components/add-product-modal/add-product-modal.html:302` elige el color de una variante con
+> `components/add-product-modal/add-product-modal.html:304` elige el color de una variante con
 > `<input type="color">`, que abre un selector distinto en iOS, Android y escritorio.
 
 | propiedad | valor | cuándo | fuente |
@@ -63,21 +63,38 @@ Criterio de la app: **D16, tamaño por dispositivo** (canon, dueño, 05-10-2026)
 380 px o más y, en lo que se toca, también la tablet (`pointer: coarse`). La columna «web» es la
 computadora (`pointer: fine`) y, en lo que no se toca, también la tablet. En el celular chico
 (< 380 px) va `medium` a la vista, sin achicar el área de 44 de lo que se toca. **Nada en `small` ni
-`xsmall`**, salvo lo que el componente solo tiene en chico. Hoy la app corta con
-`BreakpointsService.isMobile()` (≤ 767 px), que todavía no mira el puntero ni los 380 px.
+`xsmall`**, salvo lo que el componente solo tiene en chico. En la app, `BreakpointsService` ya
+tiene las señales de D16: `tactil()` (todo celular por ancho y toda pantalla `pointer: coarse`),
+`celular()`, `celularChico()` y `toque()`.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| Cualquiera | `large` (32 × 32) | `medium` (24 × 24) | canon (aprobado por el dueño, 03-10-2026) |
+| Cualquiera | `large` (32 × 32) | `medium` (24 × 24) | canon (aprobado por el dueño, 03-10-2026) · «mobile» incluye la tablet táctil: D16, dueño 05-10-2026 |
 | Separación entre dots | 12 px | 4 px | propuesta, falta aprobación |
 
 ```html
-<sui-color-dot [color]="c" [size]="bp.isMobile() ? 'large' : 'medium'" [state]="c === elegido() ? 'selected' : 'default'" />
+<sui-color-dot [color]="c" [size]="bp.tactil() ? 'large' : 'medium'" [state]="c === elegido() ? 'selected' : 'default'" />
 ```
 
 `large` mide 32, todavía por debajo de los 44 px del dedo: los 12 px de separación completan el
 área para no tocar el vecino.
 
+### Por dispositivo (D16)
+
+Fila de `color-dot` en la tabla de D16 (dueño, 05-10-2026): se toca.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380 px) | `large` (32), interino | D16 pide `medium` con área tocable de 44, pero el DS todavía no la estira (P20, pendiente). Hasta entonces se queda `large` |
+| celular (380–767 px) | `large` (32) | separación de 12 px entre dots |
+| tablet táctil (`pointer: coarse`) | `large` (32) | separación de 12 px; con `isMobile()` el iPad caía en `medium` |
+| computadora (`pointer: fine`) | `medium` (24) | separación de 4 px |
+
+Ultrawide (≥ 1920 px): igual que la computadora, `medium`.
+
+En master-pedidos: `[size]="bp.tactil() ? 'large' : 'medium'"` (da lo mismo que `bp.sizeControl()`,
+el helper de botón y campo).
+
 ## API
 
 <!-- api:inicio -->
@@ -107,6 +124,45 @@ lo pasa a `selected`.
 - Con `customHex`, el `color` se ignora.
 - `medium` mide 24 × 24 y `large` 32 × 32: los dos quedan por debajo de los 44 del dedo. En mobile va `large` con 12 px de separación entre dots.
 
+## Bien y mal
+
+Un estado no es un color
+
+```html
+<!-- ❌ mal: el dot es un botón para elegir color, no dice «en línea» -->
+<sui-color-dot color="green" ariaLabel="En línea" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-badge type="with-dot" color="green" [size]="bp.sizeBadge()">En línea</sui-badge>
+```
+
+El dot no se marca solo
+
+```html
+<!-- ❌ mal: avisa el toque pero nadie le pasa el state; nunca se ve elegido -->
+<sui-color-dot [color]="c" [size]="bp.tactil() ? 'large' : 'medium'" (clicked)="elegido.set(c)" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-color-dot [color]="c" [size]="bp.tactil() ? 'large' : 'medium'"
+  [state]="c === elegido() ? 'selected' : 'default'" (clicked)="elegido.set(c)" />
+```
+
+Color propio sin nombre
+
+```html
+<!-- ❌ mal: con customHex el lector de pantalla dice «Color #7b2d3a» -->
+<sui-color-dot customHex="#7b2d3a" [size]="bp.tactil() ? 'large' : 'medium'" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-color-dot customHex="#7b2d3a" ariaLabel="Rojo vino" [size]="bp.tactil() ? 'large' : 'medium'" />
+```
+
 ## Ejemplo
 
 ```html

package/docs/sui-color-picker/README.md

@@ -51,7 +51,7 @@ Regla corta: **color libre que se guarda → color-picker · una de N categoría
 **Usos de hoy que rompen la regla:**
 
 - **1 nativo → `sui-color-picker` con `[alpha]="false"`:**
-  `components/add-product-modal/add-product-modal.html:302` (color de cada opción cuando el grupo
+  `components/add-product-modal/add-product-modal.html:304` (color de cada opción cuando el grupo
   se muestra «como colores»; guarda `swatchHex` de 6 caracteres).
 
 ## Tamaño en mobile y en web
@@ -63,10 +63,10 @@ Regla corta: **color libre que se guarda → color-picker · una de N categoría
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| color picker | `large` | `medium` | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono |
+| color picker | `large` | `medium` | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono · «mobile» incluye la tablet táctil: D16, dueño 05-10-2026 |
 
 ```html
-<sui-color-picker [size]="bp.isMobile() ? 'large' : 'medium'" [(value)]="color" />
+<sui-color-picker [size]="bp.tactil() ? 'large' : 'medium'" [(value)]="color" />
 ```
 
 Los puntos se **ven y se tocan** de 32: el dibujo de `sui-color-dot` usa sus dos pseudo-elementos
@@ -74,6 +74,23 @@ Los puntos se **ven y se tocan** de 32: el dibujo de `sui-color-dot` usa sus dos
 centros, lo que evita tocar el vecino. Los controles del espectro, los sliders y el campo hex no
 cambian con `size`.
 
+### Por dispositivo (D16)
+
+No tiene fila propia en la tabla de D16 (dueño, 05-10-2026): se toca (es un botón que abre un
+panel), así que va «lo que se toca». Los puntos del panel siguen el mismo `size`.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380 px) | `large` (44), interino | D16 pide `medium` con área tocable de 44, pero el botón `medium` mide 38 y el DS todavía no estira el área. Hasta entonces se queda `large` |
+| celular (380–767 px) | `large` (44) | puntos de 32 separados 12 |
+| tablet táctil (`pointer: coarse`) | `large` (44) | con `isMobile()` el iPad caía en `medium` |
+| computadora (`pointer: fine`) | `medium` (38) | puntos de 24 separados 4 |
+
+Ultrawide (≥ 1920 px): igual que la computadora, `medium`.
+
+En master-pedidos: no hay helper propio; `[size]="bp.tactil() ? 'large' : 'medium'"` (da lo mismo
+que `bp.sizeControl()`, el helper de botón y campo).
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -127,13 +144,54 @@ cambian con `size`.
 - El panel vive en un overlay del CDK: escapa a cualquier `overflow: hidden` del contenedor.
 - No implementa `ControlValueAccessor`: se usa con `[(value)]`.
 
+## Bien y mal
+
+Color de una variante
+
+```html
+<!-- ❌ mal: selector nativo, distinto en iOS, Android y escritorio (components/add-product-modal/add-product-modal.html:304) -->
+<input type="color" [value]="v.swatchHex || '#cccccc'"
+  (input)="setValueField(gi, vi, 'swatchHex', $any($event.target).value)" aria-label="Elegir color" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-color-picker [size]="bp.tactil() ? 'large' : 'medium'" [alpha]="false" [showFormatLabel]="false"
+  [value]="v.swatchHex ?? null" (valueChange)="setValueField(gi, vi, 'swatchHex', $event)" />
+```
+
+Guardar `#rrggbb`
+
+```html
+<!-- ❌ mal: alpha viene en true; si bajan la opacidad se guarda #rrggbbaa -->
+<sui-color-picker [size]="bp.tactil() ? 'large' : 'medium'" [showFormatLabel]="false" [(value)]="color" />
+```
+
+```html
+<!-- ✅ bien: [alpha]="false" deja el valor en 6 caracteres -->
+<sui-color-picker [size]="bp.tactil() ? 'large' : 'medium'" [alpha]="false" [showFormatLabel]="false" [(value)]="color" />
+```
+
+En el teléfono
+
+```html
+<!-- ❌ mal: sin size queda en medium: botón de 38 y puntos de 24 casi pegados (4 de separación), por debajo de los 44 del dedo -->
+<sui-color-picker [alpha]="false" [showFormatLabel]="false" [(value)]="color" />
+```
+
+```html
+<!-- ✅ bien: en táctil va large: botón de 44 y puntos de 32 con 44 entre centros, sin tocar el vecino -->
+<sui-color-picker [size]="bp.tactil() ? 'large' : 'medium'" [alpha]="false" [showFormatLabel]="false" [(value)]="color" />
+```
+
 ## Ejemplo
 
 ```html
 <sui-color-picker
   [alpha]="false"
   [showFormatLabel]="false"
-  placeholder="Color de la variante"
+  [size]="bp.tactil() ? 'large' : 'medium'"
+  placeholder="Elige el color de la variante"
   [value]="opcion.swatchHex ?? null"
   (valueChange)="cambiarColor(opcion, $event)" />
 ```

package/docs/sui-command-menu-footer/README.md

@@ -56,6 +56,12 @@ No tiene tamaños: 48 px de alto, textos 12/16, hasta 600 px de ancho.
 }
 ```
 
+### Por dispositivo (D16)
+
+No aplica: no tiene input `size` (48 px fijo en todos los dispositivos), así que D16 no lo mueve. Lo
+único que cambia por dispositivo es **si se pinta**: en el celular no (no hay teclado físico).
+En master-pedidos: `@if (!bp.isMobile())` alrededor del pie, sin `[size]`.
+
 ## API
 
 <!-- api:inicio -->
@@ -87,6 +93,49 @@ No tiene tamaños: 48 px de alto, textos 12/16, hasta 600 px de ancho.
   desktop.
 - Las teclas son íconos fijos (↑ ↓ ↵); no se pueden cambiar.
 
+## Bien y mal
+
+Pie en el celular
+
+```html
+<!-- ❌ mal: en el celular las teclas ↑ ↓ ↵ no dicen nada (README de sui-kbd) -->
+<sui-command-menu-footer navigateLabel="Moverte" selectLabel="Abrir" [helpText]="null" />
+```
+
+```html
+<!-- ✅ bien -->
+@if (!bp.isMobile()) {
+  <sui-command-menu-footer navigateLabel="Moverte" selectLabel="Abrir" [helpText]="null" />
+}
+```
+
+Link de ayuda sin destino
+
+```html
+<!-- ❌ mal: los defaults pintan «Centro de ayuda» sin href ni (helpClicked): el link no hace nada -->
+<sui-command-menu-footer navigateLabel="Moverte" selectLabel="Abrir" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-command-menu-footer
+  navigateLabel="Moverte" selectLabel="Abrir"
+  helpText="¿No es lo que buscas? Escríbenos por"
+  [helpLink]="{ label: 'WhatsApp', href: 'https://wa.me/51931819925', target: '_blank' }" />
+```
+
+Sacar la ayuda entera
+
+```html
+<!-- ❌ mal: helpLink null saca solo el link y deja «¿No es lo que buscas? Prueba el» colgando -->
+<sui-command-menu-footer navigateLabel="Moverte" selectLabel="Abrir" [helpLink]="null" />
+```
+
+```html
+<!-- ✅ bien: helpText null saca el texto y el link -->
+<sui-command-menu-footer navigateLabel="Moverte" selectLabel="Abrir" [helpText]="null" />
+```
+
 ## Ejemplo
 
 ```html