@ajuarezso/sui-design-system 0.24.1 → 0.25.0

package/docs/sui-button-group/README.md

@@ -47,57 +47,60 @@ atención de un local (L M M J V S D), filtros que se suman en una barra.
 | multi | cuándo | ejemplo de copy | fuente |
 |---|---|---|---|
 | `true` | Elegir días u opciones que se combinan. | L M M J V S D (días de atención) | canon (aprobado por el dueño, 03-10-2026) |
-| `false` (default) | No: elegir una sola o cambiar de vista va con `sui-segmented-control`. | — | cambiar de vista: canon (aprobado por el dueño, 03-10-2026) · elegir una sola en general: propuesta |
+| `false` (default) | No: elegir una sola o cambiar de vista va con `sui-segmented-control`. | — | cambiar de vista: canon (aprobado por el dueño, 03-10-2026) · elegir una sola: canon (decisión del dueño 04-10-2026: 2–4 opciones excluyentes → `sui-segmented-control`; más opciones → `sui-tab-chips`) |
 
 ### `size`
 
 | size | alto | cuándo | fuente |
 |---|---|---|---|
 | `large` | 48 | Mobile: los días del horario y las opciones de un formulario, para tocar con el dedo. Label/Medium (16/24), ícono 20, radius 12. | canon (aprobado por el dueño, 03-10-2026) · extensión SUI |
-| `medium` | 40 | Mobile cuando la fila es larga (los 7 días) y `large` no entra en 360 px. Label/Small (14/20), ícono 20, radius 10. | alto y tipografía: canon (aprobado por el dueño, 03-10-2026), extensión SUI · cuándo: propuesta |
-| `small` (default) | 36 | Web: los días del horario, formularios. | escala según la guía del DS · cuándo: propuesta |
-| `xsmall` | 32 | Barras de filtros en desktop. | escala según la guía del DS · cuándo: propuesta |
-| `2xsmall` | 24 | Solo desktop, dentro de una tabla o una card densa. Muy chico para el dedo. | escala según la guía del DS · cuándo: propuesta |
+| `medium` | 40 | Web: lo normal (días del horario, formularios, filtros, tablas). Mobile: cuando la fila es larga (los 7 días) y `large` no entra en 360 px. Label/Small (14/20), ícono 20, radius 10. | alto y tipografía: canon (aprobado por el dueño, 03-10-2026), extensión SUI · web: canon (dueño, 05-10-2026, D16) · mobile con la fila larga: propuesta |
+| `small` (default) | 36 | No usar: es chico. En web va `medium`. | escala según la guía del DS · no usarlo: canon (dueño, 05-10-2026, D16), reemplaza el «cuándo» del bloque B1 |
+| `xsmall` | 32 | No usar: es chico. Las barras de filtros van en `medium`. | escala según la guía del DS · no usarlo: canon (dueño, 05-10-2026, D16) |
+| `2xsmall` | 24 | No usar: es chico. En una tabla o una card densa va `medium`. | escala según la guía del DS · no usarlo: canon (dueño, 05-10-2026, D16), reemplaza el «cuándo» del bloque B1 |
 
 ### `items` (lo que lleva cada opción)
 
 | contenido | cuándo | fuente |
 |---|---|---|
-| solo `label` | Lo normal: textos de una a tres letras o una palabra («L», «Delivery»). | propuesta |
-| `leftIcon` + `label` | Cuando el ícono ayuda a distinguir opciones parecidas (moto / bici / auto). | propuesta |
-| solo ícono (`leftIcon`, sin `label`) | Desktop, opciones universales; **`ariaLabel` obligatorio** en cada una. | propuesta |
-| `disabled: true` en una opción | La opción existe pero hoy no se puede elegir (un día que el local no atiende por regla). | propuesta |
+| solo `label` | Lo normal: textos de una a tres letras o una palabra («L», «Delivery»). | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `leftIcon` + `label` | Cuando el ícono ayuda a distinguir opciones parecidas (moto / bici / auto). | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| solo ícono (`leftIcon`, sin `label`) | Desktop, opciones universales; **`ariaLabel` obligatorio** en cada una. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `disabled: true` en una opción | La opción existe pero hoy no se puede elegir (un día que el local no atiende por regla). | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 | cuántas | De 2 a 7. Con más, no entra en el ancho del teléfono: lista de `sui-checkbox`. | propuesta (el Figma dibuja de 2 a 6; los días son 7) |
 
 ### `value`, `ariaLabel`, `change`
 
 | prop | cuándo | fuente |
 |---|---|---|
-| `[(value)]` | Con `multi`, un `string[]` con los `value` prendidos. | propuesta |
-| `ariaLabel` | Siempre: dice qué se elige («Días de atención»). El host es `role="group"`. | propuesta |
-| `(change)` | Cuando hay que reaccionar al cambio (guardar, filtrar); si alcanza con el `model`, no hace falta. | propuesta |
+| `[(value)]` | Con `multi`, un `string[]` con los `value` prendidos. | según el código |
+| `ariaLabel` | Siempre: dice qué se elige («Días de atención»). El host es `role="group"`. | según el código |
+| `(change)` | Cuando hay que reaccionar al cambio (guardar, filtrar); si alcanza con el `model`, no hace falta. | según el código |
 
 ## Tamaño en mobile y en web
 
-En mobile se toca con el dedo: el área táctil tiene que medir **44 px o más**. En web, con mouse,
-va un tamaño más chico. La app ya lo resuelve con `BreakpointsService`
-(`src/app/services/breakpoints.service.ts`, mobile = hasta 767 px):
-`[size]="bp.isMobile() ? 'large' : 'small'"`. Medido el 04-10-2026 en `master-pedidos`: 166 `[size]`
-con `bp` (142 `large`/`medium`, 22 `large`/`small`, 2 `medium`/`xsmall`). Regla del dueño, 03-10-2026.
+En mobile se toca con el dedo: el área táctil tiene que medir **44 px o más**. En la tablet
+(`pointer: coarse`) va igual que en el celular, porque también se toca; en la computadora
+(`pointer: fine`), `medium`; en el celular chico (< 380 px), `medium` a la vista sin bajar el área de 44.
+Nada en `small` ni `xsmall` (canon, dueño, 05-10-2026, D16; reemplaza al «tamaño por plataforma» del
+03-10-2026, que bajaba la web a `small`). Hoy la app lo resuelve con `BreakpointsService`
+(`src/app/services/breakpoints.service.ts`, mobile = hasta 767 px): `[size]="bp.isMobile() ? 'large' : 'medium'"`,
+que todavía deja la tablet en `medium` (el helper de D16 está propuesto en la hoja de decisiones). Medido el 04-10-2026 en `master-pedidos`: 166 `[size]`
+con `bp` (142 `large`/`medium`, 22 `large`/`small`, 2 `medium`/`xsmall`); los 24 que bajan de `medium` se migran.
 
 Desde el 03-10-2026 el grupo tiene `large` (48) y `medium` (40), la misma escala de `sui-button`,
 así que el par es el de toda la app.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| días del horario, opciones en un formulario | `large` (48) | `small` (36) | canon (aprobado por el dueño, 03-10-2026) |
-| fila larga que no entra a 48 en 360 px (los 7 días con texto) | `medium` (40) | `small` (36) | propuesta, falta aprobación |
-| barra de filtros | `large` | `xsmall` (32) | propuesta, falta aprobación |
-| dentro de una tabla o una card densa | no va en mobile | `2xsmall` (24) | propuesta |
+| días del horario, opciones en un formulario | `large` (48) | `medium` (40) | mobile: canon (aprobado por el dueño, 03-10-2026) · web: canon (dueño, 05-10-2026, D16), antes `small` |
+| fila larga que no entra a 48 en 360 px (los 7 días con texto) | `medium` (40) | `medium` (40) | mobile: propuesta, falta aprobación (espera P18) · web: canon (dueño, 05-10-2026, D16) |
+| barra de filtros | `large` | `medium` (40) | web: canon (dueño, 05-10-2026, D16) · mobile: propuesta, falta aprobación |
+| dentro de una tabla o una card densa | no va en mobile | `medium` (40) | no va en mobile: canon (aprobado por el dueño, 05-10-2026, bloque B7) · web: canon (dueño, 05-10-2026, D16), antes `2xsmall` |
 
 ```html
 <sui-button-group [items]="dias" [multi]="true" [(value)]="diasAbiertos" ariaLabel="Días de atención"
-                  [size]="bp.isMobile() ? 'large' : 'small'" />
+                  [size]="bp.isMobile() ? 'large' : 'medium'" />
 ```
 
 En mobile, cada opción va ancha (los 7 días repartidos en todo el ancho, no apretados a la

package/docs/sui-button-group-item/README.md

@@ -27,26 +27,29 @@ apagar algo suelto está `sui-switch`; para una acción, `sui-button`.
 | prop | valor | cuándo | fuente |
 |---|---|---|---|
 | `size` | `large` · `medium` · `small` · `xsmall` · `2xsmall` | El mismo del grupo; lo pone el grupo. Altos 48 · 40 · 36 · 32 · 24. | `small` a `2xsmall`: escala según la guía del DS · `large` y `medium`: canon (aprobado por el dueño, 03-10-2026), extensión SUI |
-| `active` | `true` | La opción está elegida; lo calcula el grupo desde `value`. | propuesta |
-| `disabled` | `true` | La opción existe pero hoy no se puede elegir; viene de `disabled` en la entrada de `items`. | propuesta |
-| `label` | texto | Una a tres letras o una palabra. | propuesta |
-| `leftIcon` / `rightIcon` | RemixIcon | Ícono a la izquierda si ayuda a distinguir; a la derecha, sin caso. Sin `label` queda cuadrado. | propuesta |
-| `ariaLabel` | texto | Obligatorio si no hay `label`, o si dos opciones tienen el mismo texto. | propuesta |
+| `active` | `true` | La opción está elegida; lo calcula el grupo desde `value`. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `disabled` | `true` | La opción existe pero hoy no se puede elegir; viene de `disabled` en la entrada de `items`. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `label` | texto | Una a tres letras o una palabra. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `leftIcon` / `rightIcon` | RemixIcon | Ícono a la izquierda si ayuda a distinguir; a la derecha, sin caso. Sin `label` queda cuadrado. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `ariaLabel` | texto | Obligatorio si no hay `label`, o si dos opciones tienen el mismo texto. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 
 ## Tamaño en mobile y en web
 
-En mobile se toca con el dedo: el área táctil tiene que medir **44 px o más**. En web, con mouse,
-va un tamaño más chico. La app ya lo resuelve con `BreakpointsService`
-(`src/app/services/breakpoints.service.ts`, mobile = hasta 767 px):
-`[size]="bp.isMobile() ? 'large' : 'small'"`. Medido el 04-10-2026 en `master-pedidos`: 166 `[size]`
-con `bp` (142 `large`/`medium`, 22 `large`/`small`, 2 `medium`/`xsmall`). Regla del dueño, 03-10-2026.
+En mobile se toca con el dedo: el área táctil tiene que medir **44 px o más**. En la tablet
+(`pointer: coarse`) va igual que en el celular, porque también se toca; en la computadora
+(`pointer: fine`), `medium`; en el celular chico (< 380 px), `medium` a la vista sin bajar el área de 44.
+Nada en `small` ni `xsmall` (canon, dueño, 05-10-2026, D16; reemplaza al «tamaño por plataforma» del
+03-10-2026, que bajaba la web a `small`). Hoy la app lo resuelve con `BreakpointsService`
+(`src/app/services/breakpoints.service.ts`, mobile = hasta 767 px): `[size]="bp.isMobile() ? 'large' : 'medium'"`,
+que todavía deja la tablet en `medium` (el helper de D16 está propuesto en la hoja de decisiones). Medido el 04-10-2026 en `master-pedidos`: 166 `[size]`
+con `bp` (142 `large`/`medium`, 22 `large`/`small`, 2 `medium`/`xsmall`); los 24 que bajan de `medium` se migran.
 
 El tamaño lo pone el grupo: es el mismo `size` de `sui-button-group` (ver su README).
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| dentro de un grupo | `large` (48) · `medium` (40) si la fila no entra | `small` (36) | canon (aprobado por el dueño, 03-10-2026) |
-| suelto (barra de herramientas) | no va en mobile | `xsmall` o `2xsmall` | propuesta |
+| dentro de un grupo | `large` (48) · `medium` (40) si la fila no entra | `medium` (40) | mobile: canon (aprobado por el dueño, 03-10-2026) · web: canon (dueño, 05-10-2026, D16), antes `small` |
+| suelto (barra de herramientas) | no va en mobile | `medium` (40) | no va en mobile: canon (aprobado por el dueño, 05-10-2026, bloque B7) · web: canon (dueño, 05-10-2026, D16), antes `xsmall` o `2xsmall` |
 
 ## «No usar»: por qué no hoy y cuándo sí
 
@@ -97,6 +100,6 @@ en la columna de la derecha, se usa (aprobado por el dueño, 03-10-2026).
 <sui-button-group [items]="dias" [multi]="true" [(value)]="diasAbiertos" ariaLabel="Días de atención" />
 
 <!-- Suelto, solo en el caso de «cuándo sí» -->
-<sui-button-group-item leftIcon="bold" ariaLabel="Negrita" size="xsmall"
+<sui-button-group-item leftIcon="bold" ariaLabel="Negrita" size="medium"
                        [active]="negrita()" (clicked)="negrita.set(!negrita())" />
 ```

package/docs/sui-card/README.md

@@ -45,8 +45,8 @@ selección.**
 
 | variant | cuándo | fuente |
 |---|---|---|
-| `default` | Lo normal: la card sobre el fondo de la app (borde + sombra x-small). 251 de 253. | propuesta (práctica de la app) |
-| `elevated` | La card flota sobre un mapa, una foto o un fondo de color, donde el borde se pierde y hace falta la sombra media. Precedente: el seguimiento público del pedido (`pages/public/pedido-en-vivo/pedido-en-vivo.html:19`, `:69`). | propuesta |
+| `default` | Lo normal: la card sobre el fondo de la app (borde + sombra x-small). 251 de 253. | canon (aprobado por el dueño, 05-10-2026, bloque B2) (práctica de la app) |
+| `elevated` | La card flota sobre un mapa, una foto o un fondo de color, donde el borde se pierde y hace falta la sombra media. Precedente: el seguimiento público del pedido (`pages/public/pedido-en-vivo/pedido-en-vivo.html:19`, `:69`). | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 | `flat` | Ver «No usar». | propuesta |
 
 ### `size` (padding × gap entre slots)
@@ -54,16 +54,16 @@ selección.**
 | size | medidas | cuándo | fuente |
 |---|---|---|---|
 | `small` | 16 / 12 | Filas de una lista de cards, KPIs chicos, cards tocables. **Toda card en mobile.** | propuesta |
-| `medium` (default) | 20 / 16 | Secciones en web. | propuesta |
-| `large` | 24 / 20 | La sección principal de una pantalla de web (los 14 de hoy son gráficos de reportes y los pasos del onboarding). | propuesta |
-| `xlarge` | 28 / 24 | Ver «No usar». Extensión SUI (no está en Figma). | propuesta |
+| `medium` (default) | 20 / 16 | Secciones en web. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `large` | 24 / 20 | La sección principal de una pantalla de web (los 14 de hoy son gráficos de reportes y los pasos del onboarding). | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `xlarge` | 28 / 24 | Ver «No usar». Extensión SUI (no está en Figma). | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 
 ### `interactive`
 
 | valor | cuándo | fuente |
 |---|---|---|
-| `true` | La card entera es **una** acción: abre un detalle o lleva a otra pantalla («Mis direcciones», una factura). Da cursor, hover, foco y el arreglo de iOS. | propuesta |
-| `false` (default) | La card tiene 2 acciones o más adentro, o ninguna. Las acciones van como botones dentro. | propuesta |
+| `true` | La card entera es **una** acción: abre un detalle o lleva a otra pantalla («Mis direcciones», una factura). Da cursor, hover, foco y el arreglo de iOS. | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
+| `false` (default) | La card tiene 2 acciones o más adentro, o ninguna. Las acciones van como botones dentro. | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
 
 ### Slots
 
@@ -71,7 +71,7 @@ selección.**
 |---|---|---|
 | `[sui-card-header]` | Título de la card a la izquierda y, si hace falta, una acción chica a la derecha (`sui-link-button` «Ver todo»). | propuesta |
 | cuerpo (sin atributo) | El contenido. **Con 2 bloques o más, envuélvelos en un div propio con `display:flex; flex-direction:column; gap`** (ver Trampas). | canon (memoria del proyecto, 10-05-2026) |
-| `[sui-card-media]` | Gráfico, mapa o foto de borde a borde, al final. Si después va un footer, la media deja de comerse el borde inferior. | propuesta |
+| `[sui-card-media]` | Gráfico, mapa o foto de borde a borde, al final. Si después va un footer, la media deja de comerse el borde inferior. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 | `[sui-card-footer]` | La acción de la card o un resumen. Si son dos botones, siguen el orden de `sui-modal-footer` (secundario a la izquierda, primario a la derecha). | canon (orden de botones, CLAUDE.md) |
 
 **Usos de hoy que rompen las reglas** (revisado el 04-10-2026):

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

@@ -26,7 +26,7 @@ igual en el celular, sin tocar nada.
 ## Qué variante usar
 
 > La guía del DS no tiene página para este componente: sale del Figma del DS (set «Chart Legends»).
-> Todo lo de abajo es **propuesta**, salvo lo marcado «según el componente» o «canon».
+> 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` (sin prototipos ni vitrinas): **1 uso**, más
 > **5 leyendas hechas a mano** y **9 gráficos con la leyenda de ECharts**.
@@ -35,12 +35,12 @@ igual en el celular, sin tocar nada.
 
 | campo | valor | cuándo | fuente |
 |---|---|---|---|
-| `label` | nombre corto | El nombre de la serie, tal como se dice en la app: «Entregados», «Yape». | propuesta |
-| `color` | sin pasar | **Lo normal** en categorías sin bien ni mal (canales, métodos de pago, distritos): el componente reparte azul, naranja, rojo, verde… en orden. | según el componente (orden) · cuándo: propuesta |
+| `label` | nombre corto | El nombre de la serie, tal como se dice en la app: «Entregados», «Yape». | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `color` | sin pasar | **Lo normal** en categorías sin bien ni mal (canales, métodos de pago, distritos): el componente reparte azul, naranja, rojo, verde… en orden. | según el componente (orden) · cuándo: canon (aprobado por el dueño, 05-10-2026, bloque B3) |
 | `color` | el del estado | Cuando la serie **es un estado**: entregados `green`, cancelados `red`, pendientes `orange`. Mismo significado que en `sui-badge`. | canon (colores con significado del badge) |
-| `customColor` | el color que ya usa el gráfico | Solo cuando el gráfico tiene su propia paleta y el punto tiene que coincidir. Va el mismo valor en los dos lados. | propuesta |
-| `value` | número o texto | Cuando el número importa para leer el gráfico: «42», «S/ 1,200.00», «38 %». | propuesta |
-| `disabled` | `true` | Una serie sin datos en el período: se ve, apagada, para que no parezca que falta. | propuesta |
+| `customColor` | el color que ya usa el gráfico | Solo cuando el gráfico tiene su propia paleta y el punto tiene que coincidir. Va el mismo valor en los dos lados. | canon (aprobado por el dueño, 05-10-2026, bloque B3) |
+| `value` | número o texto | Cuando el número importa para leer el gráfico: «42», «S/ 1,200.00», «38 %». | canon (aprobado por el dueño, 05-10-2026, bloque B3) |
+| `disabled` | `true` | Una serie sin datos en el período: se ve, apagada, para que no parezca que falta. | canon (aprobado por el dueño, 05-10-2026, bloque B3) |
 
 Los 12 valores de `color`, uno por uno y con su regla, están en el README de `sui-chart-legend-dot`.
 
@@ -51,8 +51,8 @@ Para que el gráfico y la leyenda pinten **el mismo color**, ECharts recibe la p
 
 | orientation | cuándo | fuente |
 |---|---|---|
-| `horizontal` (default) | Debajo de un gráfico de barras o de líneas. Si no entra, baja a la línea siguiente. | propuesta |
-| `vertical` | Al lado de una dona o un pie, con el `value` de cada serie. En mobile, debajo de la dona. | propuesta |
+| `horizontal` (default) | Debajo de un gráfico de barras o de líneas. Si no entra, baja a la línea siguiente. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `vertical` | Al lado de una dona o un pie, con el `value` de cada serie. En mobile, debajo de la dona. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 
 ### Usos de hoy que romperían la regla
 
@@ -75,8 +75,8 @@ para el dedo; lo que cambia por plataforma es la orientación.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| bajo barras o líneas | `horizontal` (envuelve) | `horizontal` | propuesta |
-| junto a una dona | `vertical`, **debajo** de la dona | `vertical`, a la derecha | propuesta |
+| bajo barras o líneas | `horizontal` (envuelve) | `horizontal` | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| junto a una dona | `vertical`, **debajo** de la dona | `vertical`, a la derecha | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 
 ```html
 <!-- Junto a una dona: vertical en las dos; el layout la pone debajo en mobile y a la derecha en web -->

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,7 +71,7 @@ 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.

package/docs/sui-checkbox/README.md

@@ -52,8 +52,8 @@ 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`
 
@@ -61,7 +61,7 @@ Regla corta: **se suma y se confirma después → checkbox · se aplica ya → s
 |---|---|---|---|
 | `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 |
+| `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). | 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.
@@ -105,7 +105,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

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)
 

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

@@ -43,10 +43,10 @@ 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 |
 

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,16 +74,19 @@ 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. Hoy la app corta con
+`BreakpointsService.isMobile()` (≤ 767 px), que todavía no mira el puntero ni los 380 px.
 
 | 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

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

@@ -27,7 +27,8 @@ 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-*`,
@@ -38,13 +39,13 @@ un `<button role="radio">`: se toca.
 | 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,10 +58,13 @@ 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. Hoy la app corta con
+`BreakpointsService.isMobile()` (≤ 767 px), que todavía no mira el puntero ni los 380 px.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|

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

@@ -38,15 +38,15 @@ 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:**
 
@@ -91,7 +91,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` |

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