@ajuarezso/sui-design-system 0.22.0 → 0.23.1

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

@@ -51,18 +51,28 @@ Regla corta: **color libre que se guarda → color-picker · una de N categoría
 **Usos de hoy que rompen la regla:**
 
 - **1 nativo → `sui-color-picker` con `[alpha]="false"`:**
-  `components/add-product-modal/add-product-modal.html:293` (color de cada opción cuando el grupo
+  `components/add-product-modal/add-product-modal.html:302` (color de cada opción cuando el grupo
   se muestra «como colores»; guarda `swatchHex` de 6 caracteres).
 
 ## Tamaño en mobile y en web
 
-| uso | mobile | web |
-|---|---|---|
-| botón que abre el panel | 32 px de alto (no hay `size`) | 32 px |
+| size | botón que abre el panel | puntos del panel | fuente |
+|---|---|---|---|
+| `medium` (default) | 38 (6 + 24 del punto + 6, más 2 de borde), texto 14 | 24, separados 4 | Figma |
+| `large` | 44 (9 + 24 + 9 + 2), texto 16 | 32 (`sui-color-dot` `large`), separados 12: paso de 44 entre centros, 5 por fila | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono. Size nuevo del 04-10-2026 |
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| color picker | `large` | `medium` | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono |
+
+```html
+<sui-color-picker [size]="bp.isMobile() ? 'large' : 'medium'" [(value)]="color" />
+```
 
-**No tiene un tamaño grande para mobile.** El botón mide unos 32 px de alto y los puntos de
-color del panel 24 px. En mobile funciona, pero queda debajo de los 44 px de área táctil.
-Agrandarlo es una decisión del DS.
+Los puntos se **ven y se tocan** de 32: el dibujo de `sui-color-dot` usa sus dos pseudo-elementos
+(punto y anillo), así que no hay dónde colgar un área invisible. La separación de 12 deja 44 entre
+centros, lo que evita tocar el vecino. Los controles del espectro, los sliders y el campo hex no
+cambian con `size`.
 
 ## «No usar»: por qué no hoy y cuándo sí
 
@@ -88,6 +98,7 @@ Agrandarlo es una decisión del DS.
 | `eyedropper` | `boolean` | `true` |
 | `showFormatLabel` | `boolean` | `true` |
 | `disabled` | `boolean` | `false` |
+| `size` | `'medium' \| 'large'` | `'medium'` |
 | `ariaLabel` | `string` | `'Seleccionar color'` |
 
 | output | payload |
@@ -108,6 +119,10 @@ Agrandarlo es una decisión del DS.
 - Acepta 3, 4, 6 u 8 caracteres con o sin `#`, y siempre emite con `#`.
 - El botón muestra el nombre en español si el color es uno de los 10 («Naranja»); si no, el hex
   en mayúsculas.
+- La muestra de color del botón es un `<span>` con el dibujo de `sui-color-dot` en `selected`, no
+  un `sui-color-dot`: hasta el 04-10-2026 quedaba un botón (`role="radio"`) dentro del botón. El
+  campo hex ya no lleva `inputmode="text"` (no cambiaba nada y es lo que rompe la acción del
+  teclado en Android).
 - Elegir un recomendado **cierra** el panel; arrastrar el espectro no.
 - El panel vive en un overlay del CDK: escapa a cualquier `overflow: hidden` del contenedor.
 - No implementa `ControlValueAccessor`: se usa con `[(value)]`.

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

@@ -38,8 +38,8 @@ 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 `'Navigate'` y `'Select'`. | 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 están en inglés. | propuesta |
+| `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 |
 | `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
@@ -63,10 +63,10 @@ No tiene tamaños: 48 px de alto, textos 12/16, hasta 600 px de ancho.
 
 | input | tipo | default |
 |---|---|---|
-| `navigateLabel` | `string` | `'Navigate'` |
-| `selectLabel` | `string` | `'Select'` |
-| `helpText` | `string \| null` | `"Not what you're looking for? Try the"` |
-| `helpLink` | `SuiLinkConfig \| string \| null` | `'Help Center'` |
+| `navigateLabel` | `string` | `'Navegar'` |
+| `selectLabel` | `string` | `'Seleccionar'` |
+| `helpText` | `string \| null` | `'¿No es lo que buscas? Prueba el'` |
+| `helpLink` | `SuiLinkConfig \| string \| null` | `'Centro de ayuda'` |
 
 | output | payload |
 |---|---|
@@ -78,8 +78,8 @@ No tiene tamaños: 48 px de alto, textos 12/16, hasta 600 px de ancho.
 
 ## Trampas
 
-- **Los cuatro textos vienen en inglés.** Si no se pasan, el pie dice «Navigate», «Select», «Not
-  what you're looking for? Try the» y «Help Center».
+- **Los cuatro textos por defecto están en español desde el 04-10-2026**: «Navegar», «Seleccionar»,
+  «¿No es lo que buscas? Prueba el» y «Centro de ayuda». El link no lleva a ningún lado si no le pasas `href`.
 - **`helpText: null` saca también el link**; `helpLink: null` saca solo el link y deja el texto.
 - **Promete flechas que nadie cablea**: ni `sui-command-menu-item` ni el modal mueven la selección
   con ↑ ↓.

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

@@ -41,7 +41,7 @@ más oscuro) y con texto (lupa naranja, X para limpiar).
 
 | prop | regla | fuente |
 |---|---|---|
-| `placeholder` | **Siempre**, en español y diciendo qué se busca: «Busca pedidos, locales o repartidores…». El default es `'Search or jump to'`. | canon (CANON-SUI §5: copy en español, elipsis `…`) |
+| `placeholder` | **Siempre**, en español y diciendo qué se busca: «Busca pedidos, locales o repartidores…». El default genérico es `'Buscar o ir a…'`. | canon (CANON-SUI §5: copy en español, elipsis `…`) |
 | `shortcut` | `true` solo en web; en mobile `false` (no hay teclado físico). | canon (README de `sui-kbd`) |
 | `button` | Déjalo en `true`: la X de limpiar ahorra borrar a mano. El ícono de info del estado vacío no hace nada. | propuesta |
 
@@ -66,7 +66,7 @@ No tiene tamaños: 48 px de alto (14 + 20 + 13 + 1 de borde), texto 14/20, hasta
 | input | tipo | default |
 |---|---|---|
 | `value` | `string` | `''` |
-| `placeholder` | `string` | `'Search or jump to'` |
+| `placeholder` | `string` | `'Buscar o ir a…'` |
 | `shortcut` | `boolean` | `true` |
 | `button` | `boolean` | `true` |
 

package/docs/sui-compact-avatar-group/README.md

@@ -25,8 +25,8 @@ de lista. Es una píldora blanca con los avatares casi pegados y el «+N» como
 > marcado «según la guía del DS» sale de su texto o de su código; el resto es **propuesta,
 > falta aprobación**.
 >
-> Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos directos**. El DS lo usa dentro
-> de `sui-table`.
+> Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos directos**. En el DS no lo
+> monta ningún componente: `sui-table` solo lo nombra como contenido que se proyecta en una celda.
 
 ### Lo que sí dice la guía del DS
 
@@ -94,7 +94,8 @@ Outputs: ninguno.
 - **El estilo se llama `appearance`**, no `variant` ni `style` (el atributo `style` es del HTML).
 - **`size` no es el de `sui-avatar`**: `'24'` → avatar `sm`, `'32'` → `md`, `'40'` → `lg`.
 - **`count` gana sobre el cálculo**: si lo pasas, se muestra aunque no sobre nadie.
-- Las reglas de foto y color de cada persona son las de `sui-avatar`.
+- Las reglas de foto y color de cada persona son las de `sui-avatar`: el `color` por rol va
+  explícito en cada item (canon, aprobado por el dueño, 03-10-2026); sin él cae a `slate`.
 
 ## Ejemplo
 

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

@@ -27,11 +27,11 @@ carrusel o un mapa.
 > dos tamaños, el radio completo y el deshabilitado, sin do/don't. Las reglas de abajo son
 > **canon (aprobado por el dueño, 03-10-2026)** salvo donde dice otra fuente.
 >
-> Uso medido el 03-10-2026 en `master-pedidos/src/app`: 11 compact-buttons en 7 archivos, sin
+> Uso medido el 04-10-2026 en `master-pedidos/src/app`: 11 compact-buttons en 7 archivos, sin
 > contar prototipos ni vitrinas (`master-preview`, `master-prototipos`, `mockup-sheets-*`,
 > `dx/*`, `master-rutina`, `master-medico`, `dev-index`). Estilos: 6 `ghost`, 3 `stroke` (uno
-> por error, ver abajo), 2 `white`, 0 `modifiable`. Tamaños: 6 `large`, 3 `medium`, 2 `xlarge`.
-> 4 con `fullRadius`, 1 con `disabled`.
+> por error, ver abajo), 2 `white`, 0 `modifiable`. Tamaños: 3 `large`, 2 `medium`, 2 `xlarge` y
+> 4 por `bp` (`2xlarge`/`large` y `3xlarge`/`medium`). 4 con `fullRadius`, 1 con `disabled`.
 
 ### Lo que sí dice la guía del DS
 
@@ -47,21 +47,20 @@ carrusel o un mapa.
 | variantStyle | cuándo | ejemplo real de la app | fuente |
 |---|---|---|---|
 | `stroke` (default) | Acciones de una fila o una card: «más», «editar», el − / + de una cantidad. | `components/product-detail-view/product-detail-view.html:169` (− / +) | canon (aprobado por el dueño, 03-10-2026) |
-| `ghost` | Cerrar en la cabecera de un modal o un sheet. | `components/store-ratings-modal/store-ratings-modal.html:33` («Cerrar») | canon (aprobado por el dueño, 03-10-2026) |
+| `ghost` | Cerrar en la cabecera de un modal o un sheet, y acciones de fila sin caja (quitar, más, editar) donde el `stroke` recarga una lista densa. | `components/store-ratings-modal/store-ratings-modal.html:33` («Cerrar») · `components/option-sections-manager/option-sections-manager.html:38` (quitar) | cerrar: canon (aprobado por el dueño, 03-10-2026) · filas: canon (dueño, 04-10-2026), igual que en `sui-button` |
 | `white` | Flotante sobre un mapa o una foto, siempre con `fullRadius`. | `pages/customer/store-browser/arrastre-carrusel.ts:102` (flechas del carrusel) | canon (aprobado por el dueño, 03-10-2026) |
 | `modifiable` | Hereda el color del contenedor: el cerrar del alert (ya lo trae `sui-alert` adentro). | (sin uso directo; vive dentro de `sui-alert`) | hereda el color: según la guía del DS · dónde va: canon (aprobado por el dueño, 03-10-2026) |
 
 **Usos de hoy que rompen la regla:**
 
-- **1 bug: `variant="ghost"` en vez de `variantStyle`.** `pages/super-admin/master-settings/master-settings.html:647`
+- **1 bug: `variant="ghost"` en vez de `variantStyle`.** `pages/super-admin/master-settings/master-settings.html:658`
   («Quitar este nivel»). `variant` no es un input del compact-button: el atributo se ignora y el
   botón sale `stroke`. Pasar a `variantStyle="ghost"`.
-- **A discutir — 5 `ghost` para acciones de fila** (quitar, más):
-  `components/option-sections-manager/option-sections-manager.html:39` y `:146`,
-  `components/add-product-modal/add-product-modal.html:306`,
-  `pages/super-admin/master-settings/master-settings.html:111` y `:647`. Este canon dice `stroke`
-  para filas y `ghost` solo para cerrar; el canon de `sui-button` permite `ghost` para editar y
-  borrar en filas. Los dos canon se contradicen: hay que elegir uno.
+- **Resuelto — `ghost` en acciones de fila** (canon, dueño 04-10-2026): se permite, igual que en
+  `sui-button`. Los 5 usos de hoy quedan bien: `components/option-sections-manager/option-sections-manager.html:38`
+  y `:148`, `components/add-product-modal/add-product-modal.html:315`,
+  `pages/super-admin/master-settings/master-settings.html:113` y `:658` (este último sigue con el
+  bug de `variant` en vez de `variantStyle`).
 
 ### `size`
 
@@ -70,19 +69,18 @@ carrusel o un mapa.
 | `medium` | 20 (16) | Solo desktop, filas muy densas (tablas). | escala: según la guía del DS · cuándo: canon (aprobado por el dueño, 03-10-2026) |
 | `large` (default) | 24 (20) | Desktop, dentro de cards. | default según la guía del DS · cuándo: canon (aprobado por el dueño, 03-10-2026) |
 | `xlarge` | 28 (24) | Cabeceras de modal en desktop; flechas de carrusel que solo se ven con mouse. | extensión de SUI · canon (aprobado por el dueño, 03-10-2026) |
-| `2xlarge` | 32 (20) | **El mínimo en mobile**: filas y cards que se tocan con el dedo. | extensión de SUI · canon (aprobado por el dueño, 03-10-2026). **En el repo del DS, todavía no en el paquete publicado 0.19.0** |
-| `3xlarge` | 36 (20) | Cerrar en modales y sheets en mobile. | ídem: canon; en el repo, no en 0.19.0 |
-| `4xlarge` | 40 (24) | Flotantes sobre el mapa (volver, centrar). | ídem: canon; en el repo, no en 0.19.0 |
+| `2xlarge` | 32 (20) | **El mínimo en mobile**: filas y cards que se tocan con el dedo. | extensión de SUI · canon (aprobado por el dueño, 03-10-2026). Publicado desde 0.20.0 |
+| `3xlarge` | 36 (20) | Cerrar en modales y sheets en mobile. | ídem: canon; publicado desde 0.20.0 |
+| `4xlarge` | 40 (24) | Flotantes sobre el mapa (volver, centrar). | ídem: canon; publicado desde 0.20.0 |
+| `5xlarge` | 44 (24) | **El del teléfono** cuando el botón se toca solo: cerrar un modal o sheet, flotantes sobre el mapa. El ícono se queda en 24 como `4xlarge`: crece el área, no el dibujo. | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono |
 
-**Usos de hoy que rompen la regla** (pantallas del cliente, que se usan en el teléfono, con
-botones de 20 o 24 px):
+**Migración a tamaños de mobile: hecha** (medido el 04-10-2026). Los 4 casos del cliente ya usan
+`bp`: `components/product-detail-view/product-detail-view.html:169` y `:173` y
+`pages/customer/order-history/order-history.html:382` con `2xlarge`/`large`, y
+`components/store-ratings-modal/store-ratings-modal.html:33` con `3xlarge` en mobile.
 
-- **4 casos**: `components/product-detail-view/product-detail-view.html:169` y `:173` (− / + en
-  `large` → `2xlarge`), `components/store-ratings-modal/store-ratings-modal.html:33` (cerrar en
-  `medium` → `3xlarge`), `pages/customer/order-history/order-history.html:383` (flecha de la fila
-  en `large` → `2xlarge`).
-- **La migración está bloqueada** hasta que se publique la versión del DS con `2xlarge`,
-  `3xlarge` y `4xlarge`.
+**Uso de hoy que rompe la regla:** `store-ratings-modal.html:33` cierra en web con `medium` (20);
+la tabla de abajo pide `xlarge` (28).
 
 ### `fullRadius`
 
@@ -106,29 +104,29 @@ botones de 20 o 24 px):
 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.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| acciones de fila o card (más, quitar, − / +) | `2xlarge` (32) | `large` (24); `medium` (20) en tablas densas | canon (aprobado por el dueño, 03-10-2026) |
-| cerrar en la cabecera de un modal o sheet | `3xlarge` (36) | `xlarge` (28) | canon (aprobado por el dueño, 03-10-2026) |
-| flotante sobre el mapa o una foto | `4xlarge` (40) | `xlarge` (28) | canon (aprobado por el dueño, 03-10-2026) |
+| acciones de fila o card (más, quitar, − / +) | `5xlarge` (44); si la fila no lo deja entrar, `2xlarge` (32) con aire alrededor | `large` (24); `medium` (20) en tablas densas | 44: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono · la excepción de 32: propuesta, falta aprobación |
+| cerrar en la cabecera de un modal o sheet | `5xlarge` (44) | `xlarge` (28) | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono (antes `3xlarge`, 03-10-2026) |
+| flotante sobre el mapa o una foto | `5xlarge` (44) | `xlarge` (28) | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono (antes `4xlarge`, 03-10-2026) |
 
 ```html
 <sui-compact-button icon="close-line" variantStyle="ghost" ariaLabel="Cerrar"
-                    [size]="bp.isMobile() ? '3xlarge' : 'xlarge'" (clicked)="cerrar()" />
+                    [size]="bp.isMobile() ? '5xlarge' : 'xlarge'" (clicked)="cerrar()" />
 ```
 
-**`2xlarge`, `3xlarge` y `4xlarge` están en el repo del DS y todavía no en el paquete publicado
-(0.19.0).** Hasta publicarlos, el patrón de arriba no compila. Aun en `4xlarge` (40) el botón queda
-por debajo de 44: deja 4 px de aire alrededor (gap o padding del contenedor) para que el dedo no
-toque el vecino. `medium` y `large` no van en mobile: hoy hay 4 en pantallas del cliente (ver
-«`size`» arriba).
+`2xlarge`, `3xlarge` y `4xlarge` están publicados desde la 0.20.0 (la app usa la 0.22.0); `5xlarge`
+(44) se agregó el 04-10-2026 para llegar al piso táctil del teléfono. Si una fila o card no deja
+entrar un botón de 44, `2xlarge` (32) con aire alrededor (gap o padding) es la excepción, para que el
+dedo no toque el vecino. `medium` y `large` no
+van en mobile.
 
 ## «No usar»: por qué no hoy y cuándo sí
 
-Ningún valor del compact-button está en «no usar»: los cuatro estilos y los seis tamaños tienen
+Ningún valor del compact-button está en «no usar»: los cuatro estilos y los siete tamaños tienen
 un caso. `modifiable` no tiene un uso directo hoy porque el único lugar donde va (el cerrar del
 alert) ya lo trae `sui-alert` adentro.
 
@@ -141,7 +139,7 @@ alert) ya lo trae `sui-alert` adentro.
 |---|---|---|
 | `icon` | `string` | — (requerido) |
 | `variantStyle` | `'stroke' \| 'ghost' \| 'modifiable' \| 'white'` | `'stroke'` |
-| `size` | `'medium' \| 'large' \| 'xlarge' \| '2xlarge' \| '3xlarge' \| '4xlarge'` | `'large'` |
+| `size` | `'medium' \| 'large' \| 'xlarge' \| '2xlarge' \| '3xlarge' \| '4xlarge' \| '5xlarge'` | `'large'` |
 | `fullRadius` | `boolean` | `false` |
 | `disabled` | `boolean` | `false` |
 | `href` | `string \| null` | `null` |
@@ -160,14 +158,12 @@ El clic se escucha con `(clicked)`. `icon` recibe el nombre RemixIcon, sin el pr
 ## Trampas
 
 - **El estilo se llama `variantStyle`**, no `variant`. `variant="ghost"` no da error de
-  compilación: se ignora y sale `stroke` (pasó en `master-settings.html:647`).
+  compilación: se ignora y sale `stroke` (pasa hoy en `master-settings.html:658`).
 - **`icon` y `ariaLabel` son obligatorios**: sin `ariaLabel` no compila.
 - **El output es `(clicked)`**. `(click)` sobre el host también llega porque el clic burbujea; hoy 6
-  usos lo escuchan así (`product-detail-view.html:169` y `:173`, `master-settings.html:647`,
-  `arrastre-carrusel.ts:102` y `:104`, `order-history.html:383`). Usa `(clicked)`, que ya respeta
+  usos lo escuchan así (`product-detail-view.html:169` y `:173`, `master-settings.html:658`,
+  `arrastre-carrusel.ts:102` y `:104`, `order-history.html:382`). Usa `(clicked)`, que ya respeta
   `disabled`.
-- **El paquete publicado (0.19.0) solo trae `medium`, `large` y `xlarge`.** Pasar `2xlarge` con un
-  cast compila, pero el botón sale sin tamaño y con ícono de 16: no lo hagas hasta que se publique.
 - En `medium` el ícono mide 16, no los 18 de la guía.
 - `modifiable` en hover pinta blanco al 16 %: pensado para fondos oscuros o de color. Sobre blanco
   casi no se nota. Se ajusta con `--sui-compact-button-hover-bg` y `--sui-compact-button-active-bg`.
@@ -178,13 +174,14 @@ El clic se escucha con `(clicked)`. `icon` recibe el nombre RemixIcon, sin el pr
 ## Ejemplo
 
 ```html
-<!-- Cerrar en la cabecera de un sheet, en mobile -->
-<sui-compact-button icon="close-line" variantStyle="ghost" size="xlarge" ariaLabel="Cerrar" (clicked)="cerrar()" />
+<!-- Cerrar en la cabecera de un sheet: 5xlarge (44) en mobile, xlarge en web -->
+<sui-compact-button icon="close-line" variantStyle="ghost" [size]="bp.isMobile() ? '5xlarge' : 'xlarge'"
+                    ariaLabel="Cerrar" (clicked)="cerrar()" />
 
 <!-- Acción de una fila en desktop -->
 <sui-compact-button icon="more-2-line" ariaLabel="Opciones de la sección" (clicked)="abrirMenu()" />
 
 <!-- Flotante sobre el mapa -->
-<sui-compact-button icon="arrow-left-line" variantStyle="white" [fullRadius]="true" size="xlarge"
-                    ariaLabel="Volver" (clicked)="volver()" />
+<sui-compact-button icon="arrow-left-line" variantStyle="white" [fullRadius]="true"
+                    [size]="bp.isMobile() ? '5xlarge' : 'xlarge'" ariaLabel="Volver" (clicked)="volver()" />
 ```

package/docs/sui-compact-select/README.md

@@ -31,7 +31,7 @@ Regla corta: **filtro suelto en una barra, ancho al texto → compact · campo c
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos**. Los filtros de las barras del
 > panel usan `sui-select` sin label (6: `pages/customers/customers.html:38`,
-> `pages/settings/team/team.html:66`, `pages/drivers/drivers.html:72`…), que se estira a todo el ancho.
+> `pages/settings/team/team.html:67`, `pages/drivers/drivers.html:73`…), que se estira a todo el ancho.
 
 | prop | cuándo | fuente |
 |---|---|---|
@@ -42,18 +42,19 @@ Regla corta: **filtro suelto en una barra, ancho al texto → compact · campo c
 | `selected` / `selectedChange` | La opción elegida (objeto entero). O `formControlName`, nunca los dos. | API |
 | `placeholder` | El filtro sin elegir: «Todos». Corto. | propuesta, falta aprobación |
 | `value` / `icon` | Lo que muestra el campo cuando no hay `items` (modo «solo campo», el menú lo arma la pantalla). | API |
-| `error` | No usar hoy: un filtro no tiene error. | — |
+| `error` | No usar hoy: un filtro no tiene error. | propuesta, falta aprobación |
 | `disabled` | Mientras carga la lista. | según la guía del DS |
 | `clicked` | Solo si la pantalla arma su propio menú (sin `items`). | API |
 
-**Candidatos de hoy:** los 6 filtros de barra del panel en web (arriba). En mobile siguen como
-`sui-select` `large` a todo el ancho, porque este no pasa de 40 px.
+**Candidatos de hoy:** los 6 filtros de barra del panel en web (arriba). En mobile pueden seguir
+como `sui-select` `large` a todo el ancho o pasar a este en `large` (48, desde el 03-10-2026).
 
 ## Tamaño en mobile y en web
 
 Tiene los tres tamaños de la guía —`medium` (40), `small` (36), `xsmall` (32)— y **`large` (48)**,
 extensión SUI para mobile: mide lo mismo que un `sui-button` `large` de la misma barra. En `large`
-crece el aire (padding 12 a los lados, radio 12) y los íconos siguen en 20.
+crece el aire (padding 12 a los lados, 14 a la izquierda en `type="basic"`; radio 12) y los íconos
+siguen en 20. Alto: padding 11 + línea 24 + 11 + borde 2 = 48.
 
 En large y xlarge el texto sube a 16 px (regla del 03-10-2026): el valor y las opciones del menú
 van en 16/24 en `large` y el padding vertical baja para que el alto siga en 48 (trigger) y 44 (opción).
@@ -104,6 +105,7 @@ Las opciones del menú siguen al `size` como en `sui-select`: 36 hasta `medium`,
 | `selected` · model, `[(selected)]` | `SuiCompactSelectItem<T> \| null` | `null` |
 | `error` | `boolean` | `false` |
 | `disabled` | `boolean` | `false` |
+| `ariaLabel` | `string \| null` | `null` |
 
 | output | payload |
 |---|---|
@@ -119,6 +121,8 @@ Implementa `ControlValueAccessor` (el valor es el `value` de la opción).
   se entera de lo que escribe `selected`.
 - Sin `items` no abre nada: solo emite `(clicked)`.
 - `type="icon"` **no muestra texto**: solo el ícono de la opción elegida.
+  Pásale `ariaLabel` («Ordenar por»): es el nombre que lee el lector de pantalla (desde el
+  04-10-2026; sin él usa el label de la opción elegida o el placeholder).
 - El menú mide al menos 200 px aunque el campo sea más angosto.
 - Las opciones miden 36 px en web hasta `medium`; 44 en `large` y en mobile (ver «Tamaño»).
 

package/docs/sui-compact-select-for-input/README.md

@@ -30,7 +30,7 @@ Regla corta: **el campo cambia según una elección corta pegada a él → este
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos**. Candidato: el gasto del super
 > admin pone «Monto» (`type="number"`) y «Moneda» (PEN/USD) como dos campos separados,
-> `pages/super-admin/master-gastos/master-gastos.html:193` y `:200`.
+> `pages/super-admin/master-gastos/master-gastos.html:195` y `:203`.
 
 | prop | cuándo | fuente |
 |---|---|---|
@@ -70,7 +70,7 @@ de la guía no descontaba el borde del input). Ahora el campo mide exacto.
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
 |---|---|---|
-| el componente entero (0 usos) | todo es en soles y con +51 | la moneda de un gasto (`master-gastos.html:193`) o teléfonos de otro país |
+| el componente entero (0 usos) | todo es en soles y con +51 | la moneda de un gasto (`master-gastos.html:195`) o teléfonos de otro país |
 | `country` con bandera | solo hay teléfonos de Perú | repartidores o clientes con número extranjero |
 
 ## API

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

@@ -65,20 +65,21 @@ no le sirve a ningún uso de hoy.
 
 ## Tamaño en mobile y en web
 
-La fila mide 72 (leading de 40 + padding 16) en las dos. El `size` cambia **solo la X de quitar**:
+La fila mide 74 en las dos: leading de 40 + padding 16 × 2 + borde 1 × 2 (`sui-content-card.scss:19,21`; Figma la dibuja en 72 con el borde por dentro). El `size` cambia **solo la X de quitar**:
 
 | size | X visible | área táctil | glyph | fuente |
 |---|---|---|---|---|
 | `medium` (default) | 20 × 20 | 20 × 20 | 20 | Figma |
-| `large` | 32 × 32 (radius 8 al hover) | 40 × 40 (`::before` invisible) | 20 | canon (aprobado por el dueño, 03-10-2026): extensión SUI |
+| `large` | 32 × 32 (radius 8 al hover) | 44 × 44 en el teléfono, 40 × 40 en web (`::before` invisible) | 20 | canon (aprobado por el dueño, 03-10-2026): extensión SUI · 44: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono |
 
 En `large` el glyph queda en el mismo lugar que en `medium` (la caja grande se come el aire del
-gap con margen negativo), así que la fila se ve igual: lo que crece es dónde se puede tocar.
+gap con margen negativo), así que la fila se ve igual: lo que crece es dónde se puede tocar. En el teléfono el área
+táctil de `large` es de **44** (desde el 04-10-2026; 40 en web).
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| fila | 72, sin cambio | 72, sin cambio | Figma |
-| X para quitar | `large` (32, área 40) | `medium` (20) | propuesta: el tamaño es extensión SUI aprobada (03-10-2026); el «cuándo» falta aprobarlo |
+| fila | 74, sin cambio | 74, sin cambio | medido del `.scss` |
+| X para quitar | `large` (32, área 44) | `medium` (20) | propuesta: el tamaño es extensión SUI aprobada (03-10-2026); el «cuándo» falta aprobarlo |
 
 ```html
 <sui-content-card … [size]="bp.isMobile() ? 'large' : 'medium'" (dismiss)="quitar(item)" />

package/docs/sui-content-divider/README.md

@@ -27,16 +27,16 @@ Story: [Atoms/Divider/Content Divider](https://sui-design-system.web.app/?path=/
 > marcado «según la guía del DS» sale de su texto o de sus ejemplos; el resto es **propuesta,
 > falta aprobación**.
 >
-> Uso medido el 03-10-2026 en `master-pedidos/src/app`: **1 content-divider**
-> (`pages/super-admin/master-drivers/master-drivers.html:190`, `solid-text` «Con pocos
-> pedidos»), sin contar prototipos ni vitrinas (`master-preview`, `master-prototipos`,
+> Uso medido el 04-10-2026 en `master-pedidos/src/app`: **3 content-dividers en 3 archivos**:
+> `pages/auth/login/login.html:61` y `pages/auth/register/register.html:97` (`text-line` «o») y
+> `pages/super-admin/master-drivers/master-drivers.html:192` (`solid-text` «Con pocos pedidos»), sin contar prototipos ni vitrinas (`master-preview`, `master-prototipos`,
 > `mockup-sheets-*`, `dx/*`, `_guia-*`, `master-rutina`, `master-medico`, `master-ejercicios`,
 > `dev-index`).
 
 | type | cuándo | ejemplo | fuente |
 |---|---|---|---|
 | `text-line` | El «o» entre dos formas de hacer lo mismo. | `text="o"` entre «Continuar con Google» y el formulario de correo | según la guía del DS («OR») |
-| `solid-text` | Cabecera de un grupo dentro de una lista o un modal, con fondo. | «Con pocos pedidos» (`master-drivers.html:190`) | según la guía del DS («a menudo en modales») |
+| `solid-text` | Cabecera de un grupo dentro de una lista o un modal, con fondo. | «Con pocos pedidos» (`master-drivers.html:192`) | según la guía del DS («a menudo en modales») |
 | `text` | Cabecera de grupo sin fondo, en una lista partida por fecha o por tipo. | «Ayer», «Esta semana» | según la guía del DS (existe) · propuesta (cuándo) |
 | `line` (default) | **No usar** (ver abajo). | — | según la guía del DS (default) |
 | `line-spacing` | **No usar** (ver abajo). | — | según la guía del DS |

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

@@ -73,11 +73,15 @@ content-card · ajuste → switch-label.**
 
 No se toca, así que no tiene que llegar a 44. El `size` es de lectura, no de dedo.
 
-| uso | mobile | web |
-|---|---|---|
-| consejos y pasos | `large` | `large` |
-| filas de dato | `medium` | `medium` |
-| fila que se toca (soporte) | `large`, o dale a la fila un alto mínimo de 44 | `medium` |
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| consejos y pasos | `large` | `large` | propuesta, falta aprobación |
+| filas de dato | `medium` | `medium` | propuesta, falta aprobación |
+| fila que se toca (soporte) | `large`, o dale a la fila un alto mínimo de 44 | `medium` | propuesta, falta aprobación |
+
+Alto de la fila, medido: `medium` 40 (máx. entre el leading de 40 y el texto 20 + 4 + 16) y
+`large` 48 (máx. entre 48 y 24 + 4 + 20). Lo que se toca es lo que la envuelve: «Contactar soporte»
+va dentro de un `<a>` con padding 12 y borde 1, que da 66.
 
 ```html
 <sui-content-label [size]="bp.isMobile() ? 'large' : 'medium'" … />   <!-- solo si la fila se toca -->
@@ -130,7 +134,8 @@ No se toca, así que no tiene que llegar a 44. El `size` es de lectura, no de de
   salen `slate`, no el color del rol.
 - `left-icon` sin `icon` no dibuja nada a la izquierda.
 - El `toggle` es un `sui-switch` `medium` fijo y solo el interruptor se toca, no la fila.
-- El host lleva `role="group"` y `aria-label` = `label`.
+- El host lleva `role="group"` y `aria-label` = `label`. El `toggle` toma su nombre del `label`
+  (y su descripción de `description`) con `aria-labelledby` (revisión 04-10-2026).
 
 ## Ejemplo
 

package/docs/sui-counter-input/README.md

@@ -31,14 +31,14 @@ Regla corta: **se ajusta de a uno y tiene tope → counter · se tipea → input
 > con − y + a los lados) y no dice cuándo usarlo. Todo lo de abajo es **propuesta, falta
 > aprobación**, salvo lo que se indica.
 >
-> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-badge`, más
-> `master-ejercicios`): **4 usos en 4 archivos**, todos con `min=1`. Tamaños: 2 `large`, 2 `medium`.
-> 1 con `label`, 2 con `ariaLabel`, 2 sin ninguno de los dos.
+> Uso medido el 04-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-badge`, más
+> `master-ejercicios`): **4 usos en 4 archivos**, todos con `min=1`. Tamaños: 2 `large`, 2
+> `bp.isMobile() ? 'large' : 'medium'`. Los 4 con `ariaLabel` (1 además con `label`).
 
 | prop | cuándo | fuente |
 |---|---|---|
-| `min` | `1` en cantidades de compra: en 1 el − se apaga y quitar queda en el tacho (evita borrar por error). | propuesta (ya es práctica en los 4 usos: `pages/customer/cart/cart.html:82`) |
-| `max` | Siempre el tope real: stock, tope por pedido, cupo del viaje. Sin dato, 99. | propuesta (ya es práctica: `pages/customer/restaurant-menu/restaurant-menu.html:480`) |
+| `min` | `1` en cantidades de compra: en 1 el − se apaga y quitar queda en el tacho (evita borrar por error). | propuesta (ya es práctica en los 4 usos: `pages/customer/cart/cart.html:80`) |
+| `max` | Siempre el tope real: stock, tope por pedido, cupo del viaje. Sin dato, 99. | propuesta (ya es práctica: `pages/customer/restaurant-menu/restaurant-menu.html:479`) |
 | `step` | `1`. Otro paso no tiene caso hoy. | propuesta, falta aprobación |
 | `label` | Cuando es un campo de un formulario («Pasajeros»). | según la guía del DS (su ejemplo lleva label) |
 | `hint` | El tope dicho en palabras: «Hasta 4 pasajeros». | propuesta (ya es práctica: `components/cambiar-pasajeros/cambiar-pasajeros.html:7`) |
@@ -48,12 +48,8 @@ Regla corta: **se ajusta de a uno y tiene tope → counter · se tipea → input
 | `error` + `errorMessage` | No usar hoy: el contador no deja salir del rango. | — |
 | `required` · `sublabel` · `tooltip` | No usar hoy: una cantidad siempre tiene valor. | — |
 
-**Usos de hoy que rompen la regla:**
-
-- **2 sin `label` ni `ariaLabel`** (el lector de pantalla dice solo «grupo»):
-  `pages/customer/cart/cart.html:82`, `pages/customer/restaurant-menu/restaurant-menu.html:480`.
-- **2 en `medium` en pantallas del teléfono** → `large`: `pages/customer/cart/cart.html:82`,
-  `pages/customer/viaje/viaje.html:190`.
+**Usos de hoy que rompen la regla:** ninguno (medido el 04-10-2026). Los 2 sin nombre para el
+lector y los 2 en `medium` fijo en el teléfono se corrigieron en la app el 03-10-2026 (`f96cf735`).
 
 ## Tamaño en mobile y en web
 
@@ -70,16 +66,19 @@ dentro de la píldora). El ícono es de 20 hasta `large` y de 24 en `xlarge`.
 | `medium` (default) · `small` · `xsmall` | 40 · 36 · 32 | 24 | según la guía del DS |
 | `2xsmall` | 28 | 24 | extensión SUI |
 
-En large y xlarge el texto sube a 16 px (regla del 03-10-2026): el número va en 16/24; el alto del
+En large y xlarge el texto sube a 16 px (canon, aprobado por el dueño el 03-10-2026): el número va en 16/24; el alto del
 campo no cambia (lo ponen los botones).
 
+**En el teléfono va en `xlarge`: botones − y + de 44** (canon (dueño, 04-10-2026): piso táctil 44 en el teléfono). `large` deja los botones
+en 40, por debajo del piso; no hace falta un size nuevo porque `xlarge` ya llega.
+
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| cantidad junto al CTA (detalle del producto) | `large` (48), igual que el botón | `large` | propuesta (ya es práctica en `restaurant-menu.html:480`) |
-| cantidad en una fila (carrito, pasajeros) | `large` (48) | `medium` (40) | propuesta, falta aprobación |
+| cantidad junto al CTA (detalle del producto) | `xlarge` (52, botones de 44) | `large` | mobile: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono · web: propuesta |
+| cantidad en una fila (carrito, pasajeros) | `xlarge` (52, botones de 44) | `medium` (40) | mobile: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono · web: propuesta, falta aprobación |
 
 ```html
-<sui-counter-input [size]="bp.isMobile() ? 'large' : 'medium'" … />   <!-- bp = BreakpointsService -->
+<sui-counter-input [size]="bp.isMobile() ? 'xlarge' : 'medium'" … />   <!-- bp = BreakpointsService -->
 ```
 
 ## «No usar»: por qué no hoy y cuándo sí
@@ -130,9 +129,11 @@ campo no cambia (lo ponen los botones).
   (ya recortado a `min`/`max`) y el padre lo aplica. Con solo `[value]` y sin `(valueChange)` el
   número no se mueve.
 - `min` y `max` arrancan en −∞ y +∞: sin pasarlos, el contador baja a negativos.
-- Los botones de 24 px de `medium` para abajo no llegan a los 40 de un dedo: en mobile, `large`
-  o `xlarge` (ver «Tamaño en mobile y en web»).
-- Sin `label` ni `ariaLabel` el grupo no tiene nombre para el lector de pantalla.
+- Los botones − y + miden 24 px de `medium` para abajo, 40 en `large` y 44 en `xlarge`: solo
+  `xlarge` llega a los 44 del área táctil del teléfono (ver «Tamaño en mobile y en web»).
+- El número (`role="spinbutton"`) toma su nombre del `label` visible (`aria-labelledby`); si se
+  pasa `ariaLabel`, manda ese. Recibe foco y responde a ↑/↓ (un paso) e Inicio/Fin (al
+  mínimo/máximo, si están definidos) desde el 04-10-2026; antes solo se operaba con − y +.
 - El campo es una píldora (radio completo), decisión de SUI; el Figma de origen usa 10/8 px.
 
 ## Ejemplo

package/docs/sui-date-selector/README.md

@@ -2,7 +2,7 @@
 name: sui-date-selector
 selector: sui-date-selector
 resumen: La cabecera de un calendario con el mes y las flechas de anterior y siguiente
-alternativas: [sui-datepicker (el calendario completo, que ya la trae), sui-tab-chips (elegir entre pocos días: hoy, mañana, sábado)]
+alternativas: [sui-datepicker (el calendario completo, que ya la trae), sui-segmented-control (2 a 4 días o períodos fijos), sui-tab-chips (5 o más)]
 ---
 
 # sui-date-selector
@@ -19,7 +19,8 @@ del mes, las ganancias del repartidor por mes).
 
 - Un calendario completo: `sui-datepicker` ya lo trae adentro.
 - Elegir entre pocos días: `sui-tab-chips` (como la hoja de pedido programado).
-- Cambiar entre períodos fijos («Hoy», «Esta semana», «Este mes»): `sui-tab-chips`, como el super admin.
+- Cambiar entre períodos fijos («Hoy», «Esta semana», «Este mes»): `sui-segmented-control` si son 2 a 4,
+  `sui-tab-chips` si son 5 o más. **Período o filtro con 2 a 4 opciones excluyentes → `sui-segmented-control`; con 5 o más, o si no caben y tienen que deslizarse → `sui-tab-chips`** (canon, dueño 04-10-2026).
 
 ## Qué variante usar
 
@@ -35,27 +36,29 @@ del mes, las ganancias del repartidor por mes).
 | `leftIcon` + `rightIcon` | `true` / `true` (default) | Lo normal: se puede ir atrás y adelante. | propuesta |
 | `rightIcon` | `false` | Ya se está en el período actual y no hay futuro que mirar (ganancias, gastos). Mejor que dejar la flecha y que no haga nada. | propuesta |
 | `leftIcon` | `false` | Ya se está en el primer período con datos (el mes en que se abrió el local). | propuesta |
-| los dos en `false` | — | No usar: sin flechas es un título; va un texto. | no usar |
+| los dos en `false` | — | No usar: sin flechas es un título; va un texto. | propuesta |
 | `disabled` | `true` | Mientras carga el período nuevo, para que no se encadenen toques. | propuesta |
 
 Usos de hoy que rompen la regla: **0**.
 
 ## Tamaño en mobile y en web
 
-**No tiene `size`.** Mide 288 × 36 y las flechas son `sui-compact-button` `large` de **24 px**:
-en mobile **no llegan** a los 44 px.
+Tiene `size`: **`medium`** (default, 288 × 36, flechas `sui-compact-button` de 24, Figma) y
+**`large`** (52 de alto, flechas de **44 × 44** con el ícono en 20, mes en 16/24). El
+`sui-datepicker` `xlarge` usa `large`.
 
-| uso | mobile | web | fuente |
-|---|---|---|---|
-| cabecera de un período | — **no hay tamaño** | 288 × 36, flechas de 24 | medido |
+| size | barra | flechas | texto | uso | fuente |
+|---|---|---|---|---|---|
+| `large` | 52 (44 + 4 de aire arriba y abajo) | **44 × 44** | 16/24 | mobile | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono |
+| `medium` (default) | 36 | 24 × 24 | 14/20 | web | medido (Figma 442:192) |
 
 ```html
-<!-- Web -->
-<sui-date-selector label="Octubre 2026" [rightIcon]="!esMesActual()" (prev)="mesAnterior()" (next)="mesSiguiente()" />
+<sui-date-selector [size]="bp.isMobile() ? 'large' : 'medium'" label="Octubre 2026"
+                   [rightIcon]="!esMesActual()" (prev)="mesAnterior()" (next)="mesSiguiente()" />
 ```
 
-**Sin tamaño suficiente para mobile.** En el celular, hasta que el DS le sume un `size`, se arma
-con `sui-compact-button` `xlarge` (o `sui-button` `onlyIcon` `large`) a los lados de un título.
+Dentro del `sui-datepicker` `large` (y en mobile con `small`–`large`) el datepicker agranda las
+flechas a 40 por su cuenta; con `xlarge` usa este `size="large"` (44).
 
 ## «No usar»: por qué no hoy y cuándo sí
 
@@ -75,6 +78,7 @@ con `sui-compact-button` `xlarge` (o `sui-button` `onlyIcon` `large`) a los lado
 | `leftIcon` | `boolean` | `true` |
 | `rightIcon` | `boolean` | `true` |
 | `disabled` | `boolean` | `false` |
+| `size` | `'medium' \| 'large'` | `'medium'` |
 
 | output | payload |
 |---|---|