@ajuarezso/sui-design-system 0.21.0 → 0.23.0

package/docs/sui-button/README.md

@@ -2,7 +2,7 @@
 name: sui-button
 selector: sui-button
 resumen: Botón base para que la persona dispare una acción
-alternativas: [sui-link-button (acción que se lee como texto), sui-compact-button (ícono de 20-28 px en filas y barras), sui-fancy-button (el CTA héroe), sui-social-button (entrar con Google/Apple), sui-button-group (opciones que se ven como un solo control)]
+alternativas: [sui-link-button (acción que se lee como texto), sui-compact-button (ícono de 20-40 px en filas y barras), sui-fancy-button (el CTA héroe), sui-social-button (entrar con Google/Apple), sui-button-group (opciones que se ven como un solo control)]
 ---
 
 # sui-button
@@ -18,7 +18,7 @@ una fila o barra apretada (`sui-compact-button`), es login con una marca (`sui-s
 **No lo uses** para:
 
 - Navegar sin acción: un `<a>` o `sui-link-button` con `href`.
-- Prender/apagar algo: `sui-switch` o `sui-button-group`.
+- Prender/apagar algo: `sui-switch`. Elegir varias opciones cortas a la vez: `sui-button-group`.
 - Mostrar carga: **no tiene `loading`**. Pon un spinner en `[data-slot=start]` y `disabled`.
 
 ## Qué variante usar
@@ -28,8 +28,9 @@ El botón tiene dos ejes: `variant` (el peso: cuánto llama la atención) y `col
 
 > **La guía del DS no dice cuándo usar cada variante ni cada color.** Su página del botón
 > muestra las 12 combinaciones, los tamaños, el estado deshabilitado y la API; no trae
-> do/don't ni jerarquía. Así que la tabla de variantes sigue siendo **propuesta, falta
-> aprobación**, salvo lo que ya es canon de SUI por `sui-modal-footer`.
+> do/don't ni jerarquía. La tabla de variantes de abajo es **canon (aprobado por el dueño,
+> 03-10-2026)** sobre la base que ya fijaba `sui-modal-footer`; solo `ghost` `primary` queda a
+> discutir.
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app`: 397 botones, sin contar prototipos ni
 > vitrinas (`master-preview`, `master-prototipos`, `mockup-sheets-*`, `dx/*`, `master-rutina`,
@@ -45,8 +46,9 @@ El botón tiene dos ejes: `variant` (el peso: cuánto llama la atención) y `col
 - **Hermanos**: `sui-link-button` es la acción que se integra en un texto; `sui-compact-button`,
   la de cuando falta espacio; `sui-button-group`, botones pegados en una sola línea;
   `sui-fancy-button`, el mismo botón con un acabado más vistoso.
-- **Dentro de un alert la acción es un link, no un `sui-button`** (ver `sui-alert`). Hoy hay 5
-  `sui-button` proyectados en alerts.
+- **Dentro de un alert la acción va en `actions[]` del alert** (links), nunca un `sui-button`
+  proyectado, tampoco `lighter` (canon, dueño 04-10-2026; ver `sui-alert`). Hoy hay 5 `sui-button`
+  proyectados en alerts por migrar.
 
 La base de la jerarquía no se inventa: la fija **`sui-modal-footer`**, que ya está en el DS y la
 usa toda la app. Ahí el secundario está fijo en `stroke` + `neutral`, el primario es `filled`, y
@@ -55,23 +57,23 @@ cualquier grupo de botones.
 
 | variant + color | cuándo | ejemplo real de la app | fuente |
 |---|---|---|---|
-| `filled` `primary` (default) | **La** acción principal del grupo. Una sola por grupo visible: dos `filled` juntos = ninguno es principal. | `pages/orders/orders.html:236` («Aceptar pedido») · `pages/customer/cart/cart.html:204` («Continuar») | ya es canon (sui-modal-footer) |
-| `stroke` `neutral` | Toda acción secundaria: Cancelar, Volver, Editar, Ver detalle. Va a la izquierda del primario. | `pages/orders/orders.html:320` («Encargarme yo») · `pages/envios/envios.html:175` («Ver seguimiento») | ya es canon (sui-modal-footer) |
-| `filled` `error` | **Confirmar** algo destructivo: el último paso, dentro de la confirmación. Nunca el botón que abre la confirmación. | `pages/customer/order-history/order-history.html:132` («Sí», confirma cancelar) | canon (aprobado por el dueño, 03-10-2026) |
+| `filled` `primary` (default) | **La** acción principal del grupo. Una sola por grupo visible: dos `filled` juntos = ninguno es principal. | `pages/orders/orders.html:236` («Aceptar pedido») · `pages/customer/cart/cart.html:196` («Continuar») | ya es canon (sui-modal-footer) |
+| `stroke` `neutral` | Toda acción secundaria: Cancelar, Volver, Editar, Ver detalle. Va a la izquierda del primario. | `pages/orders/orders.html:320` («Encargarme yo») · `pages/envios/envios.html:177` («Ver seguimiento») | ya es canon (sui-modal-footer) |
+| `filled` `error` | **Confirmar** algo destructivo: el último paso, dentro de la confirmación. Nunca el botón que abre la confirmación. | `pages/customer/order-history/order-history.html:133` («Sí», confirma cancelar) | canon (aprobado por el dueño, 03-10-2026) |
 | `stroke` `error` | **Abrir** una acción destructiva (lleva a la confirmación) o el «Rechazar» de un par Aprobar/Rechazar. | `pages/customer/about/about.html:76` («Eliminar cuenta») · `pages/super-admin/master-approvals/master-approvals.html:99` («Rechazar») | canon (aprobado por el dueño, 03-10-2026) |
-| `ghost` `neutral` / `ghost` `error` | Acción terciaria sin caja: íconos de editar/borrar en filas, «Cerrar», acciones de baja jerarquía en zonas densas. | `pages/super-admin/master-gastos/master-gastos.html:80` (editar) · `pages/customer/cart/cart.html:107` («Vaciar carrito») | canon (aprobado por el dueño, 03-10-2026) |
-| `filled` `neutral` | Salir a otra app: WhatsApp, abrir el mapa. Es la práctica de hoy (21 usos, 13 de WhatsApp), no un principio: **falta criterio**. | `pages/driver/driver-order-detail/driver-order-detail.html:515` («WhatsApp») · `:567` («Abrir mapa») | canon (aprobado por el dueño, 03-10-2026) |
+| `ghost` `neutral` / `ghost` `error` | Acción terciaria sin caja: íconos de editar/borrar en filas, «Cerrar», acciones de baja jerarquía en zonas densas. Vale igual en `sui-compact-button`. | `pages/super-admin/master-gastos/master-gastos.html:80` (editar) · `pages/customer/cart/cart.html:107` («Vaciar carrito») | canon (aprobado por el dueño, 03-10-2026) · ghost en filas también en compact-button: canon (dueño, 04-10-2026) |
+| `filled` `neutral` | Salir a otra app: WhatsApp, abrir el mapa. Es la práctica de hoy (21 usos, 13 de WhatsApp), no un principio: **falta criterio**. | `pages/driver/driver-order-detail/driver-order-detail.html:534` («WhatsApp») · `:589` («Abrir mapa») | canon (aprobado por el dueño, 03-10-2026) |
 | `ghost` `primary` | «Ver todas», «Reporte», «Detalles» en la cabecera de una card. **A discutir**: se pisa con `sui-link-button`, que según la guía es la acción que se lee como texto. | `pages/overview/components/overview-sales/overview-sales.html:5` | a discutir |
 | `stroke` `primary` | No usar. El secundario siempre es neutral. | — | canon (aprobado por el dueño, 03-10-2026) |
 | `lighter` (cualquier color) | No usar en botones nuevos. En `neutral` su fondo (`bg-weak-50`) es **el mismo que el de `disabled`**: se lee como apagado. Lo existente pasa a `stroke` (secundaria) o `ghost` (terciaria). | — | canon (aprobado por el dueño, 03-10-2026) |
 
-**Usos de hoy que romperían la propuesta** (sin prototipos):
+**Usos de hoy que rompen el canon** (sin prototipos):
 
 - **13 `lighter` → `stroke` o `ghost`** (7 `neutral`, 5 `error`, 1 `primary`). Ejemplos:
-  `pages/mi-negocio/mi-negocio.html:133` («Cambiar plan»), `pages/customer/cart/cart.html:33`
-  («Quitar no disponibles»), `pages/customer/order-tracking/order-tracking.html:737` («Cancelar
+  `pages/mi-negocio/mi-negocio.html:135` («Cambiar plan»), `pages/customer/cart/cart.html:31`
+  («Quitar no disponibles»), `pages/customer/order-tracking/order-tracking.html:740` («Cancelar
   pedido», `lighter error` → `stroke error`). 4 de los 13 son los que viven dentro de un alert
-  (`pages/overview/overview.html:41`, `pages/mi-negocio/mi-negocio.html:381`, `cart.html:33`,
+  (`pages/overview/overview.html:39`, `pages/mi-negocio/mi-negocio.html:383`, `cart.html:31`,
   `pages/role-selector/role-selector.html:59`): ahí la salida correcta es `actions[]` del alert.
 - **7 `stroke primary` → `stroke neutral`.** Ejemplos: `pages/customer/checkout/checkout.html:117`
   («Agregar dirección de entrega»), `pages/customer/profile/profile.html:131`,
@@ -80,7 +82,7 @@ cualquier grupo de botones.
   `pages/empresa/about/about.html:46` y `pages/repartidor/about/about.html:46` («Eliminar mi cuenta»
   abre un modal → `stroke error`, como ya lo hace `pages/customer/about/about.html:76`);
   `pages/driver/driver-dashboard/driver-dashboard.html:139` («Recargar S/ X para pagar»: urgente,
-  no destructivo → `filled primary`); `pages/super-admin/master-settings/master-settings.html:714`
+  no destructivo → `filled primary`); `pages/super-admin/master-settings/master-settings.html:725`
   («Salir» → `stroke neutral`). A discutir: `driver-dashboard.html:144` («Acepto y pago S/ X» de una
   multa) — es dinero que sale, pero no borra nada.
 - **7 `ghost primary` a discutir** (si se decide que son links): `components/product-categories/product-categories.html:17`,
@@ -91,7 +93,7 @@ cualquier grupo de botones.
 
 ### `size`
 
-Uso de hoy: 123 `large`, 91 `small`, 60 `medium`, 50 `xsmall`, 29 `2xsmall`, 44 dinámicos.
+Uso medido el 04-10-2026: 123 `large`, 93 `small`, 58 `medium` (5 por default), 50 `xsmall`, 29 `2xsmall`, 44 dinámicos.
 
 | size | cuándo | fuente |
 |---|---|---|
@@ -112,7 +114,7 @@ flujo nuevo cae en la columna de la derecha, se usa (aprobado por el dueño, 03-
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
 |---|---|---|
 | `stroke` `primary` | el secundario es neutral; dos naranjas compiten por ser el principal | landings con dos CTA de marca sobre fondo oscuro |
-| `lighter` (los 3 colores) | en `neutral` tiene el mismo fondo que `disabled`: parece apagado | botones dentro de un alert o banner teñido, donde `stroke` se ve pesado |
+| `lighter` (los 3 colores) | en `neutral` tiene el mismo fondo que `disabled`: parece apagado | botones sobre un banner o una superficie teñida, donde `stroke` se ve pesado. **Dentro de un alert, nunca**: ahí van `actions[]` (canon, dueño 04-10-2026) |
 | `ghost` `primary` | lo hace mejor `sui-link-button` `primary` («Ver todas») | una acción con ícono en una barra de herramientas donde todo va sin caja |
 | `sui-social-button` Facebook, X, LinkedIn, GitHub, Dropbox | no hay login con esas cuentas | «Continuar con Facebook» o botones de compartir en redes |
 | `sui-social-button` `onlyIcon` | Apple exige el texto en su botón de login | una fila de «compartir en» fuera del login |
@@ -124,21 +126,59 @@ flujo nuevo cae en la columna de la derecha, se usa (aprobado por el dueño, 03-
 
 ## Tamaño en mobile y en web
 
-En mobile se toca con el dedo: 40 px como mínimo y 48 en la acción principal. En web, 28–40.
+En mobile se toca con el dedo: **44 px como mínimo** (piso táctil, canon del dueño 04-10-2026) y 48
+en la acción principal. En web, 28–40.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
 | acción principal de la pantalla o footer de modal | `large` (48) | `medium` (40) | canon (aprobado por el dueño, 03-10-2026) (footer de modal siempre `large`) |
-| acción dentro de una card o una fila | `medium` (40) | `small` (36) / `xsmall` (32) | canon (aprobado por el dueño, 03-10-2026) |
+| acción dentro de una card o una fila | `large` (48) | `small` (36) / `xsmall` (32) | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono — antes `medium` (40), que no llega |
 | acción en una tabla densa | — (no hay tablas en mobile) | `2xsmall` (28) | canon (aprobado por el dueño, 03-10-2026) |
 | CTA de landing | `xlarge` (52) | `large` (48) | propuesta, falta aprobación |
 
-Patrón (la app ya lo usa en 27 lugares; `bp` = `BreakpointsService`, mobile hasta 767 px):
+Patrón (`bp` = `BreakpointsService`, mobile hasta 767 px). Medido el 04-10-2026: 9 `sui-button` con este
+par exacto y 30 con algún tamaño por `bp`; en toda la app hay 142 `[size]` con este mismo par:
 
 ```html
 <sui-button [size]="bp.isMobile() ? 'large' : 'medium'" …/>
 ```
 
+### Piso táctil de 44 en el teléfono (canon, dueño 04-10-2026)
+
+Todo lo que se toca con el dedo mide **44 px como mínimo en el teléfono** (≤767 px). Cómo se
+cumple, sin cambiar nada de los sizes que ya existen:
+
+- **Componente cuyo size mayor no llega a 44 → se le crea el size siguiente** de su escala:
+  `xlarge` si el tope era `large` (tab-chips 44), `2xlarge` si ya existía `xlarge`
+  (segmented-control 44, checkbox/radio/switch-label con fila de 44, rating 44), `5xlarge` en
+  compact-button (44). Los «botones con otro acabado» siguen a `sui-button`: fancy-button y
+  social-button suman `large` (48). El size nuevo sigue la regla de tamaños de abajo.
+- **X de cierre y controles chicos** (X de alert, banner, toast, notification, content-card y tag;
+  puntos del stepper; lápiz/tacho de image-upload; clear y ojo de sui-input): el dibujo no cambia,
+  se amplía el **área** con un `::before` invisible de 44 solo en ≤767 px, sin pisar al vecino
+  (donde no entra a lo ancho, como los puntos del stepper, se agranda solo el alto).
+- Un size existente que no llega (p. ej. `sui-button` `medium` 40) **no se agranda**: en el
+  teléfono se usa el size que sí llega.
+
+### Regla de tamaños para todo el DS (aprobada por el dueño, 03-10-2026)
+
+Vale para todos los componentes que tienen `size` `large` / `xlarge`:
+
+- **Alto, padding y área táctil crecen en cada paso.**
+- **El texto sube un solo escalón: hasta `medium` va en 14 px; `large` y `xlarge` van en 16 px.**
+  Labels, botones, chips, tabs e ítems usan `--sui-type-label-md-*`; valores y placeholders de
+  campos, `--sui-type-paragraph-md-*`. El line-height acompaña (24). Siempre con token (un
+  fallback `var(--token, 16px)` está bien), nunca px sueltos.
+- **El texto secundario chico no cambia**: hints, contadores, sublabels y captions de 12.
+- **Los íconos se quedan en 20.**
+- Si la línea de 24 movería el alto medido, se baja el padding para que el alto total quede igual.
+- **Excepción (canon, dueño 04-10-2026):** `sui-badge` mantiene su escala propia 12 / 14 / 16
+  (14 en `large`, 16 en `xlarge`), y los chips cuya escala arranca en 12 (`sui-tag`,
+  `sui-status-badge`) la siguen.
+
+En large y xlarge el texto sube a 16 px (regla del 03-10-2026): el botón ya usa Label/Medium 16/24
+en esos dos tamaños.
+
 ## API
 
 <!-- api:inicio -->
@@ -177,6 +217,9 @@ interface SuiFooterButtonConfig {
 - **No es un `<button>` nativo.** El host es `<sui-button role="button">`. `type="submit"`
   funciona porque intercepta el clic y llama a `form.requestSubmit()` del `<form>` más cercano;
   fuera de un `<form>` no hace nada.
+- **Teclado como un `<button>` nativo** (desde el 04-10-2026): Enter dispara el `(click)` al
+  bajar la tecla y Espacio al soltarla, una sola vez aunque se mantenga apretada, y Espacio ya no
+  scrollea la página. Antes, con `type="button"` (el default), ninguna de las dos hacía nada.
 - **El output no existe**: aquí es `(click)`. En `sui-link-button`, `sui-compact-button`,
   `sui-fancy-button` y `sui-social-button` es `(clicked)`.
 - **La prop de peso se llama distinto en cada hermano:** `variant` aquí, `variantStyle` en

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

@@ -82,8 +82,8 @@ atención de un local (L M M J V S D), filtros que se suman en una barra.
 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'"`, 27 usos hoy en `master-pedidos` (16 `large`/`small`,
-9 `large`/`medium`, 2 `medium`/`xsmall`). Regla del dueño, 03-10-2026.
+`[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.
 
 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.
@@ -100,8 +100,10 @@ así que el par es el de toda la app.
                   [size]="bp.isMobile() ? 'large' : 'small'" />
 ```
 
-En mobile, cada opción tiene que ser ancha (los 7 días repartidos en todo el ancho, no apretados a
-la izquierda). Si las opciones no entran ni en `medium`, va una lista de `sui-checkbox`.
+En mobile, cada opción va ancha (los 7 días repartidos en todo el ancho, no apretados a la
+izquierda) — propuesta, falta aprobación. **El componente no lo hace solo**: el host es
+`inline-flex` y no hay un input de ancho completo, así que hoy lo tendría que resolver quien lo usa
+con CSS. Si las opciones no entran ni en `medium`, va una lista de `sui-checkbox`.
 
 ## «No usar»: por qué no hoy y cuándo sí
 

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

@@ -38,8 +38,8 @@ apagar algo suelto está `sui-switch`; para una acción, `sui-button`.
 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'"`, 27 usos hoy en `master-pedidos` (16 `large`/`small`,
-9 `large`/`medium`, 2 `medium`/`xsmall`). Regla del dueño, 03-10-2026.
+`[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.
 
 El tamaño lo pone el grupo: es el mismo `size` de `sui-button-group` (ver su README).
 
@@ -84,7 +84,7 @@ en la columna de la derecha, se usa (aprobado por el dueño, 03-10-2026).
   mandan el `MouseEvent`.
 - **`active` no se prende solo al tocarlo**: el ítem solo avisa; quien lo usa (normalmente el grupo)
   tiene que cambiar `active`.
-- Los íconos miden 20 en `small` y `xsmall`, y 16 en `2xsmall`.
+- Los íconos miden 20 en `large`, `medium`, `small` y `xsmall`, y 16 en `2xsmall`.
 - Suelto no recibe las puntas redondeadas del grupo: esas reglas dependen de los atributos
   `data-sui-first` y `data-sui-last` que pone `sui-button-group`.
 - Es un `<button type="button">` con `aria-pressed`: el lector de pantalla lo anuncia como botón de

package/docs/sui-card/README.md

@@ -35,10 +35,11 @@ selección.**
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app` (sin `master-preview`,
 > `master-prototipos`, `mockup-*`, `dx/*`, `_guia-*`, `master-rutina`, `master-medico`,
-> `master-ejercicios`): **253 cards en 79 archivos**. Variantes: 227 `default` explícito, 24 sin
+> `master-ejercicios`): **253 cards en 79 archivos** (254 en 80 si solo se excluyen `master-preview`,
+> `master-prototipos`, `mockup-sheets-`, `dx/`, `master-rutina`, `master-medico` y `dev-index`). Variantes: 227 `default` explícito, 24 sin
 > `variant` (también default), 2 `elevated`, 0 `flat`. Tamaños: 95 `small`, 123 `medium`
 > explícito + 21 sin `size`, 14 `large`, 0 `xlarge`. 9 con `[interactive]`. Slots: 23
-> `sui-card-header`, 11 `sui-card-footer`, 4 `sui-card-media`.
+> `sui-card-header`, 11 `sui-card-footer`, 4 `sui-card-media`. Al 04-10-2026 son 12 con `[interactive]`.
 
 ### `variant`
 
@@ -73,30 +74,27 @@ selección.**
 | `[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-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:**
+**Usos de hoy que rompen las reglas** (revisado el 04-10-2026):
 
-- **18 cards en 6 archivos con `gap` puesto en la clase del `sui-card`**, que no llega a los hijos
-  del cuerpo: `pages/central/central-inicio/central-inicio.html:36` (×6),
-  `pages/super-admin/master-semanas/master-semanas.html:21` (×4),
-  `pages/central/central-ingresos/central-ingresos.html:36` (×3), `pages/invoices/invoices.html:19`
-  (×2), `pages/driver/driver-history/driver-history.html:17` (×2) y
-  `pages/driver/driver-wallet/driver-wallet.html:154` (ahí además el `flex-direction: row` del host
-  no pone el badge al lado del monto: el cuerpo es un solo hijo).
-- **3 cards tocables armadas a mano** (`(click)` o `routerLink` sin `[interactive]`): sin foco, sin
-  hover y sin el arreglo de iOS. `pages/super-admin/master-users/master-users.html:156` (con
-  `role="button"` y `touchstart` a mano), `pages/super-admin/master-settings/master-settings.html:601`,
-  `pages/driver/driver-dashboard/driver-dashboard.html:990`.
+- **Los 18 `gap` puestos en la clase del `sui-card`** (central-inicio, master-semanas,
+  central-ingresos, invoices, driver-history, driver-wallet) ya van con un wrapper `…-body` propio
+  desde el 03-10-2026 (commit `103f76fa` de la app). Quedan 0.
+- **3 cards tocables con `[interactive]` y además `(keydown.enter)`**: la card ya dispara el click
+  con Enter, así que el handler corre **dos veces** (ver Trampas).
+  `pages/super-admin/master-users/master-users.html:156`,
+  `pages/super-admin/master-settings/master-settings.html:611` (con `routerLink`) y
+  `pages/driver/driver-dashboard/driver-dashboard.html:990`. Se borra el `(keydown.enter)`.
 
 ## Tamaño en mobile y en web
 
 El `size` de la card es su padding, no un área táctil: no tiene que llegar a 44. Lo que importa en
 mobile es no perder ancho.
 
-| uso | mobile | web |
-|---|---|---|
-| sección, KPI, gráfico | `small` (16) | `medium` (20) |
-| sección principal de un reporte | `small` | `large` (24) |
-| fila de lista tocable | `small` | `small` |
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| sección, KPI, gráfico | `small` (16) | `medium` (20) | propuesta, falta aprobación |
+| sección principal de un reporte | `small` | `large` (24) | propuesta, falta aprobación |
+| fila de lista tocable | `small` | `small` | propuesta, falta aprobación |
 
 ```html
 <sui-card [size]="bp.isMobile() ? 'small' : 'medium'"> … </sui-card>

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

@@ -21,7 +21,7 @@ igual en el celular, sin tocar nada.
   (`legend: {…}`), que es interactiva. Esta no tiene clic.
 - Un estado o una categoría que no viene de un gráfico: `sui-badge` o `sui-status-badge`.
 - Esconder los números en un tooltip: en el celular no hay hover (así lo hizo bien
-  `pages/super-admin/master-drivers/master-drivers.html:226`).
+  `pages/super-admin/master-drivers/master-drivers.html:228`).
 
 ## Qué variante usar
 
@@ -39,7 +39,7 @@ igual en el celular, sin tocar nada.
 | `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 |
 | `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», «38 %». | 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 |
 
 Los 12 valores de `color`, uno por uno y con su regla, están en el README de `sui-chart-legend-dot`.
@@ -60,10 +60,10 @@ Para que el gráfico y la leyenda pinten **el mismo color**, ECharts recibe la p
   con `customColor` o la paleta del DS: `components/marketing-channels/marketing-channels.html:10`,
   `components/customer-segments/customer-segments.html:26`,
   `pages/overview/components/overview-retention/overview-retention.html:12`,
-  `pages/reports/reports.html:59` y `:80`.
+  `pages/reports/reports.html:60` y `:81`.
 - **A discutir — 9 gráficos con la leyenda de ECharts**: `pages/super-admin/master-semanas/master-semanas.ts:187`
-  (y `:248`, `:288`, `:335`), `pages/super-admin/master-overview/master-overview.ts:264` y `:401`,
-  `pages/reports/reports.ts:338` y `:381`, `core/utils/chart-barras-repartidores.ts:166`. Si nadie
+  (y `:248`, `:288`, `:335`), `pages/super-admin/master-overview/master-overview.ts:266` y `:403`,
+  `pages/reports/reports.ts:339` y `:382`, `core/utils/chart-barras-repartidores.ts:166`. Si nadie
   apaga series tocándolas, pasarían a `sui-chart-legend` (fuente, tamaño y color del DS en vez de
   `#525252` y 12 px puestos a mano). `pages/reports/` tiene además la leyenda a mano: hay dos
   leyendas para el mismo gráfico.
@@ -79,7 +79,8 @@ para el dedo; lo que cambia por plataforma es la orientación.
 | junto a una dona | `vertical`, **debajo** de la dona | `vertical`, a la derecha | propuesta |
 
 ```html
-<sui-chart-legend [orientation]="bp.isMobile() ? 'horizontal' : 'vertical'" [items]="metodos()" />
+<!-- Junto a una dona: vertical en las dos; el layout la pone debajo en mobile y a la derecha en web -->
+<sui-chart-legend orientation="vertical" [items]="metodos()" />
 ```
 
 El texto de 12 px queda chico en mobile y el componente no tiene un tamaño mayor: no se cambia aquí.
@@ -120,7 +121,7 @@ interface SuiChartLegendItem {
   del gráfico: si ECharts usa otra paleta, el punto y la barra no coinciden. Usa
   `SUI_CHART_LEGEND_HEX` en el gráfico o pasa el color.
 - El orden automático empieza en **azul**, no en el naranja de la marca.
-- `value` sale a 4 px del nombre, en negro (el nombre va en gris): el formato («S/ 1,200», «38 %») lo arma quien la usa.
+- `value` sale a 4 px del nombre, en negro (el nombre va en gris): el formato («S/ 1,200.00», «38 %») lo arma quien la usa.
 - Host con `role="list"` y cada item `role="listitem"`; el punto es decorativo.
 - `items` es obligatorio.
 

package/docs/sui-checkbox/README.md

@@ -69,14 +69,15 @@ Regla: **`[size]="bp.controlSize()"`** en toda pantalla. Así ya están los 5 us
 **Usos de hoy que rompen la regla de componente:**
 
 - **4 `sui-checkbox` envueltos en un `<label>` hecho a mano con su texto → `sui-checkbox-label`.**
-  `pages/settings/team/team.html:225` y `:294` (permisos: «Gestionar productos»…),
-  `components/option-sections-manager/option-sections-manager.html:188` (categorías) y `:210`
-  (productos).
+  `pages/settings/team/team.html:228` y `:301` (permisos: «Gestionar productos»…),
+  `components/option-sections-manager/option-sections-manager.html:191` (categorías) y `:214`
+  (productos). Además, tocar el texto no marca nada: un `<label>` solo activa controles nativos
+  y `sui-checkbox` no lo es, así que hoy solo responde la casilla.
 - **1 checkbox nativo → `sui-checkbox-label`:** `pages/sales-channels/facebook/facebook.html:69`
   («Qué se sincroniza»).
-- **Ojo antes de migrar:** `sui-checkbox-label` **no tiene `size`**; su casilla queda en 20 px.
-  Los 4 de arriba hoy están en 24/28 px. Migrarlos sin que el DS le sume `size` al label los
-  achica, contra la regla de controles grandes. Primero el `size` en el DS, después la migración.
+- **Al migrar, pásale el tamaño:** `sui-checkbox-label` tiene `size` (`medium` 20, `large` 24,
+  `xlarge` 28) desde el 03-10-2026. Con `[size]="bp.controlSize()"` los 4 de arriba siguen en
+  24/28 px; sin él caen a 20.
 - El de `components/product-detail-view/product-detail-view.html:204` está bien pelado: la fila
   es propia (foto, nombre, precio) y es la fila la que recibe el clic.
 
@@ -118,6 +119,7 @@ cae en la columna de la derecha, se usa.
 | `checked` · model, `[(checked)]` | `boolean` | `false` |
 | `indeterminate` | `boolean` | `false` |
 | `disabled` | `boolean` | `false` |
+| `focusable` | `boolean` | `true` |
 
 Outputs: ninguno.
 <!-- api:fin -->
@@ -133,6 +135,9 @@ Implementa `ControlValueAccessor`: funciona con `[(ngModel)]` y `formControlName
   se ve el guion aunque cambie `checked`.
 - El relleno marcado es el `primary` del proyecto (naranja), no el azul del Figma de origen.
 - Espacio **y** Enter lo marcan (un checkbox nativo solo responde a Espacio).
+- **`[focusable]="false"` lo saca del Tab** (tabindex -1). Es para cuando un padre ya es el
+  control enfocable y la casilla solo dibuja el estado (`sui-checkbox-card` lo usa). Poner
+  `tabindex="-1"` en el host no sirve: el binding del componente lo pisa (revisión 04-10-2026).
 - El tilde es un SVG dibujado a mano: no se cambia el ícono.
 - Ya trae el arreglo de iOS para el `:active` pegado: no lo agregues.
 

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

@@ -29,28 +29,33 @@ una → radio-card.**
 
 > **La guía del DS no tiene página de la checkbox card.** De la guía sale solo lo del checkbox que
 > lleva adentro: **«para selecciones simples y múltiples»**. La frontera con el switch («se
-> confirma después con Guardar → checkbox») ya es canon desde el README de `sui-switch-label`.
+> confirma después con Guardar → checkbox») sale de la misma guía: el switch es «para prender o
+> apagar un ajuste de forma inmediata».
 >
-> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-card`): **3
-> checkbox-cards en 2 archivos**, los 3 `left-icon` con ícono y descripción (formas de entrega en
-> mi-negocio y en locales administrados). 2 con `bp.controlSize()`, 1 sin `size`. Hay **5
-> `sui-switch-card` que deberían ser este componente** (los métodos de pago de mi-negocio).
+> Uso medido el 04-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-card`): **13
+> checkbox-cards en 3 archivos**, todas con `bp.controlSize()`. Tipos: 6 `left-icon` (formas de
+> entrega en mi-negocio y en locales administrados; efectivo, transferencia y tarjeta en los
+> métodos de pago), 5 `basic` (los ajustes con «Guardar…» de
+> `pages/super-admin/master-settings/master-settings.html`) y 2 `company` (Yape y Plin, con la
+> inicial en `slot="leading"`). Las 10 de métodos de pago y de master-settings eran
+> `sui-switch-card` hasta el 03-10-2026.
 
 ### `type` (el leading)
 
 | type | cuándo | fuente |
 |---|---|---|
-| `left-icon` (`icon`, `emoji` o `iconSrc`) | Lo normal: un ícono que dice de qué va la opción. | propuesta (los 3 de hoy) |
-| `basic` | Ver «No usar». | propuesta |
+| `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`, `company` | Ver «No usar». El logo lo proyectas tú con `slot="leading"`. | propuesta |
+| `card-provider`, `brand` | Ver «No usar». El logo lo proyectas tú con `slot="leading"`. | propuesta |
 
 ### 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 (los 3 de hoy) |
+| `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 |
@@ -65,17 +70,15 @@ una → radio-card.**
 | `large` | Desktop, vía `bp.controlSize()`. | canon (aprobado por el dueño, 28-09-2026) |
 | `medium` (default), `small` | No usar en pantallas nuevas. | canon (aprobado por el dueño, 28-09-2026) |
 
-**Usos de hoy que rompen las reglas:**
-
-- **1 sin `size`**: `pages/super-admin/master-administrados/master-administrados.html:172`.
-- **5 `sui-switch-card` que se guardan con «Guardar cambios»** y por lo tanto van aquí: los métodos
-  de pago de `pages/mi-negocio/mi-negocio.html:1181`, `:1190`, `:1199`, `:1208`, `:1217`
-  («Puedes seleccionar varias», dice la misma pantalla).
+**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
+guardaban con un botón se corrigieron el 03-10-2026.
 
 ## Tamaño en mobile y en web
 
-La card entera es el área táctil (≥ 72 con descripción): llega al piso de 44 sola. El `size`
-cambia solo la casilla.
+La card entera es el área táctil: 74 px con descripción (16 + 40 + 16 de padding y contenido,
+más 2 de borde) y 54 px la más chica (`basic`, sin descripción, `medium`). Llega al piso de 44
+sola. El `size` cambia solo la casilla.
 
 | uso | mobile | web |
 |---|---|---|
@@ -89,9 +92,8 @@ cambia solo la casilla.
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
 |---|---|---|
-| `type="basic"` (0 usos) | las opciones de hoy llevan ícono | opciones de texto que se suman (los días de atención, los tamaños de un producto) |
 | `type="avatar"` (0 usos) | no se elige gente de a varios | elegir a varios repartidores para mandarles un aviso |
-| `type="brand"` / `"company"` / `"card-provider"` (0 usos) | no hay integraciones ni tarjetas | prender varias integraciones a la vez (logo proyectado), varias sucursales de un local |
+| `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 |
 
 ## API
@@ -135,6 +137,9 @@ Slot: `[slot=leading]` (solo para `card-provider`, `brand` y `company`). Impleme
 - El leading de 40 × 40 ya trae `box-sizing: border-box` (el proyecto no tiene reset global): si
   proyectas una imagen con padding o borde propios, ponle `box-sizing` tú.
 - `badge` con string sale **azul `light` `small`**.
+- **El host es el único control** (role checkbox, tab stop, Espacio y Enter): la casilla de la
+  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.
 
 ## Ejemplo
 

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

@@ -13,9 +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. **Pendiente de decisión:** no tiene `size` (20 px), así que en una pantalla nueva de
-mobile choca con la regla de controles grandes; hasta que el DS le sume `size`, en mobile
-`sui-checkbox-card` es la salida grande.
+formulario. En mobile va con `[size]="bp.controlSize()"` (casilla de 28 px), como los demás
+controles.
 
 **No lo uses** para:
 
@@ -49,12 +48,12 @@ 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. | propuesta, falta aprobación |
 | `indeterminate` | El «seleccionar todo» de un grupo, cuando hay algunas marcadas. Hoy no usar (ver abajo). | propuesta, falta aprobación |
 | `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 pasan a 14/20, 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`. 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):**
 
-- **4 `sui-checkbox` + `<label>` a mano:** `pages/settings/team/team.html:225` y `:294`
-  (permisos), `components/option-sections-manager/option-sections-manager.html:188` y `:210`.
+- **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()`,
@@ -71,17 +70,36 @@ dueño, 28-09-2026).
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| casilla con texto en un formulario | `xlarge` (casilla 28, label 16/24) | `large` (casilla 24, label 16/24) | canon (aprobado por el dueño, 03-10-2026) |
+| 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 |
 
 ```html
-<sui-checkbox-label [size]="bp.controlSize()" label="Recordar mi dirección" [(active)]="recordar" />
+<sui-checkbox-label [size]="bp.isMobile() ? '2xlarge' : 'large'" label="Recordar mi dirección" [(active)]="recordar" />
 ```
 
+| size | casilla | label | sublabel / descripción | alto de la fila sin descripción |
+|---|---|---|---|---|
+| `medium` (default, Figma) | 20 | 14/20 | 12/16 | 20 |
+| `large` | 24 | 16/24 | 12/16 | 24 |
+| `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.
+
 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`.
+
+**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.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -103,7 +121,7 @@ con la casilla (28).
 | `description` | `string \| null` | `null` |
 | `badge` | `SuiBadgeConfig \| string \| null` | `null` |
 | `link` | `SuiLinkConfig \| string \| null` | `null` |
-| `size` | `'medium' \| 'large' \| 'xlarge'` | `'medium'` |
+| `size` | `'medium' \| 'large' \| 'xlarge' \| '2xlarge'` | `'medium'` |
 | `flip` | `boolean` | `false` |
 | `disabled` | `boolean` | `false` |
 | `indeterminate` | `boolean` | `false` |
@@ -119,7 +137,8 @@ Implementa `ControlValueAccessor` (`[(ngModel)]`, `formControlName`).
 ## Trampas
 
 - **El estado se llama `active`, no `checked`.** `[(checked)]` aquí no existe.
-- **No tiene `size`**: la casilla siempre mide 20 px.
+- **`size` arranca en `medium`** (casilla de 20 px): sin `[size]="bp.controlSize()"` queda chica
+  en el teléfono.
 - **`link` solo se dibuja si hay `description`.** Sin descripción desaparece sin avisar.
 - **`description` cambia el label de peso** (regular → medio) y abre el bloque en columna.
 - El badge con string sale **naranja `light`**; en `sui-checkbox-card` el default es azul.
@@ -127,6 +146,9 @@ Implementa `ControlValueAccessor` (`[(ngModel)]`, `formControlName`).
 - `link` con `href` es un `<a>` real; con `target: '_blank'` agrega `rel="noopener noreferrer"`.
   Sin `href`, emite `linkClick` y no marca la casilla.
 - `flip` cambia el orden con CSS `order`: el lector de pantalla y el Tab siguen viendo la casilla primero.
+- La casilla de adentro es el tab stop y toma su nombre del `label` y su descripción de la
+  `description` (`aria-labelledby` / `aria-describedby`) (revisión 04-10-2026). Antes el lector decía
+  «casilla, no marcada» sin el texto.
 - Deshabilitado baja la opacidad del bloque a 0.5 (convención del proyecto).
 
 ## Ejemplo

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

@@ -120,6 +120,8 @@ Outputs: ninguno.
 - El default de SUI es **64**; el de la guía, **80**.
 - El porcentaje se redondea a entero.
 - El azul es `--sui-state-information-base`, no el naranja de `--sui-primary-base`.
+- Sin `ariaLabel` se anuncia «Progreso» (04-10-2026: antes quedaba sin nombre). Pasa uno que diga
+  qué avanza («Perfil completado»).
 
 ## Ejemplo
 

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

@@ -32,7 +32,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:289` elige el color de una variante con
+> `components/add-product-modal/add-product-modal.html:302` 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 |