@ajuarezso/sui-design-system 0.24.1 → 0.25.1

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

@@ -26,8 +26,8 @@ del día en una card chica.
 > **En la guía del DS se llama «Progress Circle»** («un gráfico simple para mostrar qué tan
 > completo está algo»). Trae cinco tamaños (80, 72, 64, 56 y 48; default 80), `value` y `max`,
 > y **un solo color** (el primario del DS, que en SUI es el azul de información). No dice cuándo
-> usar cada tamaño. Lo marcado «según la guía del DS» sale de ahí; el resto es **propuesta,
-> falta aprobación**.
+> usar cada tamaño. Lo marcado «según la guía del DS» sale de ahí. Lo marcado canon está
+> aprobado; lo que sigue en **propuesta, falta aprobación** espera decisión.
 >
 > 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-*`,
@@ -38,10 +38,10 @@ del día en una card chica.
 | size | número al centro | cuándo | fuente |
 |---|---|---|---|
 | `48` | no (solo el anillo) | Junto a un texto que ya dice el porcentaje. | según la guía del DS |
-| `56` | sí, 12 px | Web: en una fila o una card. | según la guía del DS (tamaño) · propuesta (cuándo) |
-| `64` (default SUI) | sí, 14 px | Mobile: en una fila o una card. | según la guía del DS (tamaño) · propuesta (cuándo) |
-| `72` | sí, 14 px | Web: lo principal de la pantalla. | según la guía del DS (tamaño) · propuesta (cuándo) |
-| `80` (default de la guía) | sí, 14 px | Mobile: lo principal de la pantalla. | según la guía del DS (tamaño) · propuesta (cuándo) |
+| `56` | sí, 12 px | Web: en una fila o una card. | según la guía del DS (tamaño) · cuándo: canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `64` (default SUI) | sí, 14 px | Mobile: en una fila o una card. | según la guía del DS (tamaño) · cuándo: canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `72` | sí, 14 px | Web: lo principal de la pantalla. | según la guía del DS (tamaño) · cuándo: canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `80` (default de la guía) | sí, 14 px | Mobile: lo principal de la pantalla. | según la guía del DS (tamaño) · cuándo: canon (aprobado por el dueño, 05-10-2026, bloque B1) |
 
 ### `color` — misma regla que `sui-progress-bar`
 
@@ -58,9 +58,9 @@ del día en una card chica.
 | propiedad | valor | cuándo | fuente |
 |---|---|---|---|
 | `number` | `true` (default) | Lo normal: el porcentaje al centro. | según la guía del DS |
-| `number` | `false` | El texto de al lado ya dice el número. | propuesta, falta aprobación |
-| `strokeWidth` | número | **No usar** (ver abajo). | propuesta, falta aprobación |
-| `ariaLabel` | texto | Siempre: lo que mide («Perfil completado»). | propuesta, falta aprobación |
+| `number` | `false` | El texto de al lado ya dice el número. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `strokeWidth` | número | **No usar** (ver abajo). | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `ariaLabel` | texto | Siempre: lo que mide («Perfil completado»). | canon (aprobado por el dueño, 05-10-2026, bloque B5) |
 
 Usos de hoy que rompen la regla: **0** (no hay usos).
 
@@ -74,26 +74,48 @@ Usos de hoy que rompen la regla: **0** (no hay usos).
 
 ## Tamaño en mobile y en web
 
-Criterio de la app: **en mobile se lee y se toca con el dedo, así que va más grande; en web
-(desktop), más chico.** Mobile es `≤ 767 px`, el mismo corte de `BreakpointsService.isMobile()`
-en master-pedidos. Fuente: canon del dueño (03-10-2026), el mismo patrón que ya usan 27 controles
-de la app.
+Criterio de la app: **D16, tamaño por dispositivo** (canon, dueño, 05-10-2026), que reemplaza al
+«tamaño por plataforma» del 03-10-2026 (mobile grande, web chico). La columna «mobile» es el celular de
+380 px o más y, en lo que se toca, también la tablet (`pointer: coarse`). La columna «web» es la
+computadora (`pointer: fine`) y, en lo que no se toca, también la tablet. En el celular chico
+(< 380 px) va `medium` a la vista, sin achicar el área de 44 de lo que se toca. **Nada en `small` ni
+`xsmall`**, salvo lo que el componente solo tiene en chico. En la app, `BreakpointsService` ya
+tiene las señales de D16: `celular()` (380–767 px), `celularChico()`, `toque()` y `tactil()`.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| Junto a un texto que ya dice el número | `48` | `48` | propuesta, falta aprobación |
-| En una fila o card | `64` | `56` | propuesta, falta aprobación |
-| Lo principal de la pantalla | `80` | `72` | propuesta, falta aprobación |
+| Junto a un texto que ya dice el número | `48` | `48` | canon (dueño, 05-10-2026, P1 b) |
+| En una fila o card | `64` | `56` | canon (dueño, 05-10-2026, P1 b) |
+| Lo principal de la pantalla | `80` | `72` | canon (dueño, 05-10-2026, P1 b) |
 
 ```ts
 readonly bp = inject(BreakpointsService); // master-pedidos: src/app/services/breakpoints.service.ts
 ```
 
 ```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
 
@@ -123,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

@@ -27,24 +27,25 @@ un `<button role="radio">`: se toca.
 
 > **En la guía del DS es la fila «Recommended Colors» del selector de color**: muestras para
 > elegir un color recomendado. No dice cuándo usar cada estado. Lo marcado «según la guía del
-> DS» sale de ahí; el resto es **propuesta, falta aprobación**.
+> DS» sale de ahí. Lo marcado canon está aprobado; lo que sigue en **propuesta, falta aprobación**
+> espera decisión.
 >
 > 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 |
 |---|---|---|---|
 | `color` | los 10 (`gray`, `blue`, `orange`, `red`, `green`, `yellow`, `purple`, `sky`, `pink`, `teal`) | El color literal que se ofrece. **No significan nada**: son la paleta `-500`, no los tokens de estado del badge. Se ofrecen en ese orden. | según la guía del DS (colores recomendados) |
-| `customHex` | `#rrggbb` | Un color exacto que no está en los 10 (el de una variante de producto). Pisa a `color`. | propuesta, falta aprobación |
+| `customHex` | `#rrggbb` | Un color exacto que no está en los 10 (el de una variante de producto). Pisa a `color`. | canon (aprobado por el dueño, 05-10-2026, bloque B3) |
 | `state` | `default` | Opción disponible. | según la guía del DS |
 | `state` | `selected` | El color elegido. Uno solo por fila; lo setea la pantalla. | según la guía del DS |
-| `state` | `disabled` | Un color que no se puede elegir (agotado en esa variante). | propuesta, falta aprobación |
-| `state` | `hover` | **No usar** (ver abajo). | propuesta, falta aprobación |
+| `state` | `disabled` | Un color que no se puede elegir (agotado en esa variante). | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
+| `state` | `hover` | **No usar** (ver abajo). | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 | `size` | `medium` (default) · `large` | `medium` 24 (Figma) en web; `large` 32 en mobile. En `large` el dot mide 22, 18 en hover y 16 seleccionado, con anillo de 24. | `medium`: según la guía del DS · `large`: canon (aprobado por el dueño, 03-10-2026), extensión SUI |
-| `ariaLabel` | texto | El nombre del color para el lector de pantalla. Por default dice «Rojo», «Celeste»; con `customHex`, el hex. Con hex propio, pasar el nombre («Rojo vino»). | propuesta, falta aprobación |
+| `ariaLabel` | texto | El nombre del color para el lector de pantalla. Por default dice «Rojo», «Celeste»; con `customHex`, el hex. Con hex propio, pasar el nombre («Rojo vino»). | canon (aprobado por el dueño, 05-10-2026, bloque B5) |
 
 Usos de hoy que rompen la regla: **0** (no hay usos).
 
@@ -57,23 +58,43 @@ Usos de hoy que rompen la regla: **0** (no hay usos).
 
 ## Tamaño en mobile y en web
 
-Criterio de la app: **en mobile se lee y se toca con el dedo, así que va más grande; en web
-(desktop), más chico.** Mobile es `≤ 767 px`, el mismo corte de `BreakpointsService.isMobile()`
-en master-pedidos. Fuente: canon del dueño (03-10-2026), el mismo patrón que ya usan 27 controles
-de la app.
+Criterio de la app: **D16, tamaño por dispositivo** (canon, dueño, 05-10-2026), que reemplaza al
+«tamaño por plataforma» del 03-10-2026 (mobile grande, web chico). La columna «mobile» es el celular de
+380 px o más y, en lo que se toca, también la tablet (`pointer: coarse`). La columna «web» es la
+computadora (`pointer: fine`) y, en lo que no se toca, también la tablet. En el celular chico
+(< 380 px) va `medium` a la vista, sin achicar el área de 44 de lo que se toca. **Nada en `small` ni
+`xsmall`**, salvo lo que el componente solo tiene en chico. En la app, `BreakpointsService` ya
+tiene las señales de D16: `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 -->
@@ -103,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

@@ -38,20 +38,20 @@ Regla corta: **color libre que se guarda → color-picker · una de N categoría
 | prop | cuándo | fuente |
 |---|---|---|
 | `value` | El hex guardado (`[(value)]`). Sin valor, el botón muestra el `placeholder`. | según la guía del DS (popover con botón) |
-| `placeholder` | «Elegir color» (default). Cambiarlo solo si el campo dice qué color es («Color de la variante»). | propuesta, falta aprobación |
-| `alpha` | **`false` por defecto en la app**: la base guarda 6 caracteres (`#rrggbb`). Con `true` (default del componente) puede emitir 8. | propuesta, falta aprobación |
+| `placeholder` | «Elige un color» (default, imperativo con tuteo). Cambiarlo solo si el campo dice qué color es, también en imperativo («Elige el color de la variante»). | canon (dueño, 05-10-2026, P4 a); el default cambió en la 0.25.0 (antes «Elegir color») |
+| `alpha` | **`false` por defecto en la app**: la base guarda 6 caracteres (`#rrggbb`). Con `true` (default del componente) puede emitir 8. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 | `colors` | Acotar los recomendados a los que tengan sentido para el caso. Default: los 10 de SUI. | según la guía del DS (sección «Recommended Colors») |
-| `recommendedLabel` | «Colores recomendados» (default). | propuesta, falta aprobación |
-| `presetsOnly` | Solo la grilla de recomendados, sin espectro ni hex: cuando el color tiene que salir de la paleta. | propuesta, falta aprobación |
-| `eyedropper` | Dejar el default (`true`): solo aparece donde el navegador lo soporta (Chromium de escritorio). | propuesta, falta aprobación |
-| `showFormatLabel` | `false`: el «Hex» con flecha es decorativo, no cambia de formato. | propuesta, falta aprobación |
-| `disabled` | El campo existe pero no se puede tocar ahora. | propuesta, falta aprobación |
-| `ariaLabel` | Siempre que el botón no tenga un label al lado que diga qué color es. | propuesta, falta aprobación |
+| `recommendedLabel` | «Colores recomendados» (default). | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `presetsOnly` | Solo la grilla de recomendados, sin espectro ni hex: cuando el color tiene que salir de la paleta. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `eyedropper` | Dejar el default (`true`): solo aparece donde el navegador lo soporta (Chromium de escritorio). | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `showFormatLabel` | `false`: el «Hex» con flecha es decorativo, no cambia de formato. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `disabled` | El campo existe pero no se puede tocar ahora. | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
+| `ariaLabel` | Siempre que el botón no tenga un label al lado que diga qué color es. | canon (aprobado por el dueño, 05-10-2026, bloque B5) |
 
 **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 |
@@ -91,7 +108,7 @@ cambian con `size`.
 |---|---|---|
 | `colors` | `readonly SuiColorDotColor[]` | `SUI_COLOR_DOT_COLORS` |
 | `value` · model, `[(value)]` | `string \| null` | `null` |
-| `placeholder` | `string` | `'Elegir color'` |
+| `placeholder` | `string` | `'Elige un color'` |
 | `recommendedLabel` | `string` | `'Colores recomendados'` |
 | `presetsOnly` | `boolean` | `false` |
 | `alpha` | `boolean` | `true` |
@@ -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

@@ -39,7 +39,7 @@ No tiene variantes. Se decide el copy y si va el bloque de ayuda.
 | prop | regla | fuente |
 |---|---|---|
 | `navigateLabel` · `selectLabel` | **Siempre en español**: «Moverte» y «Abrir» (o «Elegir»). Los defaults son `'Navegar'` y `'Seleccionar'`. | canon (CANON-SUI §5: copy en español, tuteo) |
-| `helpText` + `helpLink` | Solo si hay adónde mandar a la persona (el WhatsApp de soporte). Si no, `[helpText]="null"` saca el bloque entero. Los defaults dicen «¿No es lo que buscas? Prueba el» + «Centro de ayuda». | propuesta |
+| `helpText` + `helpLink` | Solo si hay adónde mandar a la persona (el WhatsApp de soporte). Si no, `[helpText]="null"` saca el bloque entero. Los defaults dicen «¿No es lo que buscas? Prueba el» + «Centro de ayuda». | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 | `helpLink` como objeto | `{ label, href, target }` dibuja un `<a>` de verdad; con `target: '_blank'` pone `rel="noopener noreferrer"` solo. | API |
 
 ## Tamaño en mobile y en web
@@ -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

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

@@ -37,7 +37,8 @@ select.** La tabla completa está en el README de `sui-dropdown-menu`.
 > **La guía del DS define el command menu como el buscador que deja saltar rápido desde cualquier
 > pantalla**, armado dentro de un diálogo, con input, lista, grupos con título, items y un pie con
 > teclas. El item tiene dos tamaños, `small` (default) y `medium`, y el elegido se marca con fondo
-> `bg-weak-50`. No trae do/don't. Lo demás es **propuesta, falta aprobación**.
+> `bg-weak-50`. No trae do/don't. Lo marcado canon está aprobado; lo que sigue en **propuesta, falta
+> aprobación** espera decisión.
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-dropdown-menu`):
 > **0 usos**. Solo aparece en la vitrina `master-preview`.
@@ -46,20 +47,20 @@ select.** La tabla completa está en el README de `sui-dropdown-menu`.
 
 | type | cuándo | fuente |
 |---|---|---|
-| `left-icon` | Ir a una **pantalla** o una sección: «Pedidos», «Mi negocio», «Recargas». | según la guía del DS (item con ícono); el cuándo es propuesta |
-| `avatar` | Una **persona**: repartidor, cliente, dueño de local (`avatar` con `src` o `initials`). | propuesta |
-| `company` | Un **local**: su logo en `avatar.src`. | propuesta |
-| `basic` (default) | Una búsqueda reciente o un resultado sin imagen («Pedido #1234»). | propuesta |
-| `brand` | Un servicio externo con su logo (Yape, WhatsApp), proyectado en `slot="brand"`. | propuesta |
-| `country` | No usar hoy: todo es Perú. | propuesta |
+| `left-icon` | Ir a una **pantalla** o una sección: «Pedidos», «Mi negocio», «Recargas». | según la guía del DS (item con ícono); el cuándo: canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `avatar` | Una **persona**: repartidor, cliente, dueño de local (`avatar` con `src` o `initials`). | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `company` | Un **local**: su logo en `avatar.src`. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `basic` (default) | Una búsqueda reciente o un resultado sin imagen («Pedido #1234»). | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `brand` | Un servicio externo con su logo (Yape, WhatsApp), proyectado en `slot="brand"`. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `country` | No usar hoy: todo es Perú. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 
 ### `size` y los extras
 
 | prop | cuándo | fuente |
 |---|---|---|
 | `size="small"` (default, 40) | Listas de resultados de una línea (`title` + `sublabel`). | según la guía del DS (default `small`) |
-| `size="medium"` (64) | Cuando el resultado necesita una segunda línea (`description`) para distinguirse: «Pedido #1234» · «Juan Pérez · S/ 45.00». | según la guía del DS (existe); el cuándo es propuesta |
-| `badge` | Un estado corto que ayuda a elegir («Pendiente», «Cerrado»). String = gris `lighter`; objeto `SuiBadgeConfig` para color. | propuesta |
+| `size="medium"` (64) | Cuando el resultado necesita una segunda línea (`description`) para distinguirse: «Pedido #1234» · «Juan Pérez · S/ 45.00». | según la guía del DS (existe); el cuándo: canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `badge` | Un estado corto que ayuda a elegir («Pendiente», «Cerrado»). String = gris `lighter`; objeto `SuiBadgeConfig` para color. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 | `shortcut` | El atajo de esa acción (`sui-kbd`). Solo web. | canon (README de `sui-kbd`: en mobile no se pinta) |
 | `showButton` | Una flecha a la derecha cuando el resultado abre otra pantalla. | propuesta |
 
@@ -70,13 +71,31 @@ buscador de mobile, la fila `small` mide 40 y queda debajo de los 44 del dedo.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| resultado de una línea | `medium` (64) | `small` (40) | propuesta, falta aprobación |
-| resultado con descripción | `medium` (64) | `medium` (64) | propuesta |
+| resultado de una línea | `medium` (64) | **pendiente** (hoy `small`, 40, el default) | mobile: canon (decisión del dueño 04-10-2026, piso táctil 44: `small` mide 40, `medium` es el único size que llega) · web: pendiente (D16, dueño 05-10-2026: el tamaño cambia el layout) |
+| resultado con descripción | `medium` (64) | `medium` (64) | mobile: canon (decisión del dueño 04-10-2026, piso táctil 44) · web: lo impone el código (`description` solo se pinta en `medium`) |
 
 ```html
-<sui-command-menu-item [size]="bp.isMobile() ? 'medium' : 'small'" … />   <!-- bp = BreakpointsService -->
+<sui-command-menu-item [size]="bp.tactil() ? 'medium' : 'small'" … />   <!-- bp = BreakpointsService -->
 ```
 
+### Por dispositivo (D16)
+
+Se toca, así que la tablet va con el celular. En la computadora D16 lo deja **pendiente**: `small`
+(40) y `medium` (64) no son el mismo ítem más chico o más grande, porque `description` solo se pinta
+en `medium`; elegir uno cambia qué se lee en la fila.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380) | — | D16 no lo fija: el ⌘K no se arma en el celular. Si se reusa la lista, solo `medium` llega a 44 |
+| celular (380–767) | `medium` | el único que llega a 44 |
+| tablet táctil (`pointer: coarse`) | `medium` | Apple pide 44 también en iPad |
+| computadora (`pointer: fine`) | **pendiente** | falta decidir (D16, nota ⁵); hoy queda el default `small`, y con `description` va `medium` fijo |
+
+Ultrawide: igual que la computadora.
+
+En master-pedidos: `[size]="bp.tactil() ? 'medium' : 'small'"` (no hay helper; el `'small'` es el
+default de hoy mientras la computadora sigue pendiente). Con `description`: `size="medium"` en todos.
+
 ## API
 
 <!-- api:inicio -->
@@ -121,16 +140,57 @@ Slot: `[slot=brand]` (solo con `type="brand"`). `avatar` acepta un string (la UR
 - Mide como máximo 600 px de ancho.
 - El host borra el atributo `title` nativo (no aparece el tooltip gris del navegador).
 
+## Bien y mal
+
+Abrir el resultado
+
+```html
+<!-- ❌ mal: (clicked) nunca sale; el componente no lo conecta a ningún clic -->
+<sui-command-menu-item type="left-icon" icon="file-list-3-line" title="Pedidos"
+                       (clicked)="ir('/empresa/pedidos')" />
+```
+
+```html
+<!-- ✅ bien: el (click) nativo del host, y Enter cableado a mano -->
+<sui-command-menu-item type="left-icon" icon="file-list-3-line" title="Pedidos"
+                       (click)="ir('/empresa/pedidos')" (keydown.enter)="ir('/empresa/pedidos')" />
+```
+
+Resultado con segunda línea
+
+```html
+<!-- ❌ mal: size queda en small (default) y description no se pinta -->
+<sui-command-menu-item title="Pedido #1234" description="Juan Pérez · S/ 45.00" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-command-menu-item size="medium" title="Pedido #1234" description="Juan Pérez · S/ 45.00" />
+```
+
+Ir a una pantalla
+
+```html
+<!-- ❌ mal: left-icon sin icon; en medium (celular y tablet) deja el círculo vacío -->
+<sui-command-menu-item type="left-icon" [size]="bp.tactil() ? 'medium' : 'small'" title="Recargas" />
+```
+
+```html
+<!-- ✅ bien: el size de una línea sigue la expresión vigente (la computadora está pendiente) -->
+<sui-command-menu-item type="left-icon" [size]="bp.tactil() ? 'medium' : 'small'" icon="wallet-3-line"
+                       title="Recargas" />
+```
+
 ## Ejemplo
 
 ```html
 <sui-modal [(open)]="buscadorAbierto" size="large" [fullscreen]="true">
   <sui-command-menu-search [(value)]="q" placeholder="Busca pedidos, locales o repartidores…"
-                           [shortcut]="!bp.isMobile()" />
+                           [shortcut]="!bp.isMobile()" [button]="!bp.tactil()" />
   <sui-content-divider type="text" text="Pantallas" />
   @for (p of pantallas(); track p.ruta) {
     <sui-command-menu-item type="left-icon" [icon]="p.icono" [title]="p.nombre"
-                           [size]="bp.isMobile() ? 'medium' : 'small'"
+                           [size]="bp.tactil() ? 'medium' : 'small'"
                            (click)="ir(p.ruta)" (keydown.enter)="ir(p.ruta)" />
   }
   @if (!bp.isMobile()) {