@ajuarezso/sui-design-system 0.21.0 → 0.23.0

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

@@ -0,0 +1,100 @@
+---
+name: sui-command-menu-footer
+selector: sui-command-menu-footer
+resumen: Pie del buscador ⌘K (command menu) con las teclas para moverse y elegir, y un link de ayuda
+alternativas: [sui-modal-footer (botones de un modal), sui-kbd (una tecla suelta), sui-dropdown-caption (texto de pie de un menú flotante)]
+---
+
+# sui-command-menu-footer
+
+Story: [Organisms/Command Menu/Command Menu Footer](https://sui-design-system.web.app/?path=/docs/organisms-command-menu-command-menu-footer--docs)
+
+La última de las tres piezas del command menu (ver README de `sui-command-menu-item`): dos grupos
+de teclas (↑ ↓ «Navegar», ↵ «Seleccionar») y a la derecha un texto con un link de ayuda.
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** al pie de un command menu **en desktop**, para enseñar las teclas.
+
+**No lo uses** para:
+
+- Mobile: no hay teclado físico; las teclas no dicen nada (README de `sui-kbd`). No se pinta.
+- Un command menu que **no** se mueve con flechas: si el pie dice «↑ ↓ Navegar», las flechas tienen
+  que funcionar. `sui-command-menu-item` no las trae; las cablea quien arma el menú.
+- Botones de un modal: `sui-modal-footer`.
+
+Regla corta: **command menu en desktop con flechas cableadas → footer · mobile → nada.**
+
+## Qué variante usar
+
+> **La guía del DS lo pone como parte opcional del command menu**: un pie para mostrar atajos de
+> teclado o información extra. No trae do/don't. Todo lo de abajo es **propuesta, falta
+> aprobación**, salvo lo marcado canon.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-dropdown-menu`):
+> **0 usos**.
+
+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 |
+| `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
+
+No tiene tamaños: 48 px de alto, textos 12/16, hasta 600 px de ancho.
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| pie del command menu | no se pinta | 48 px | canon para mobile (README de `sui-kbd`: en mobile las teclas no se muestran) |
+
+```html
+@if (!bp.isMobile()) {
+  <sui-command-menu-footer navigateLabel="Moverte" selectLabel="Abrir" [helpText]="null" />
+}
+```
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `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 |
+|---|---|
+| `helpClicked` | `MouseEvent` |
+<!-- api:fin -->
+
+`helpLink` como string dibuja un botón que solo emite `helpClicked`; como `SuiLinkConfig`
+(`{ label, href?, target?, rel? }`) dibuja un `<a>`, y un `href` interno navega dentro de la app.
+
+## Trampas
+
+- **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 ↑ ↓.
+- Hasta 600 px el texto de ayuda se oculta (queda solo el link): pasa en un modal angosto aunque sea
+  desktop.
+- Las teclas son íconos fijos (↑ ↓ ↵); no se pueden cambiar.
+
+## Ejemplo
+
+```html
+@if (!bp.isMobile()) {
+  <sui-command-menu-footer
+    navigateLabel="Moverte"
+    selectLabel="Abrir"
+    helpText="¿No es lo que buscas? Escríbenos por"
+    [helpLink]="{ label: 'WhatsApp', href: 'https://wa.me/51931819925', target: '_blank' }" />
+}
+```

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

@@ -0,0 +1,140 @@
+---
+name: sui-command-menu-item
+selector: sui-command-menu-item
+resumen: Fila de resultado del buscador ⌘K (command menu) que lleva a una pantalla, un pedido o una persona
+alternativas: [sui-dropdown-item (fila de un menú de acciones anclado a un botón), sui-filter-item (fila de un panel de filtros), sui-content-card (resultado que se ve en una lista de la pantalla)]
+---
+
+# sui-command-menu-item
+
+Story: [Organisms/Command Menu/Command Menu Item](https://sui-design-system.web.app/?path=/docs/organisms-command-menu-command-menu-item--docs)
+
+**SUI no tiene un componente «command menu» entero.** Se arma con tres piezas dentro de un
+`sui-modal`: `sui-command-menu-search` arriba, la lista de `sui-command-menu-item` en el medio
+(con cabeceras de grupo `sui-content-divider`) y `sui-command-menu-footer` abajo. Quien lo arma pone
+el filtrado, el teclado y el atajo ⌘K.
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** para los resultados de un buscador que **lleva a algún lado**: abrir un pedido, ir a una
+pantalla del panel, abrir la ficha de un repartidor o un local. Es el patrón del super admin o del
+panel del local **en desktop**, donde hay teclado.
+
+**No lo uses** para:
+
+- Acciones sobre algo concreto (editar, archivar): `sui-dropdown-item` dentro de un
+  `sui-dropdown-menu`.
+- Elegir un valor de un formulario: `sui-select`.
+- La lista de resultados de una pantalla de búsqueda (la del cliente buscando tiendas): ahí van las
+  cards de la pantalla, no filas de palette.
+- Un menú en mobile: el ⌘K es un patrón de teclado.
+
+Regla corta: **buscar y saltar → command menu · actuar sobre algo → dropdown · elegir un valor →
+select.** La tabla completa está en el README de `sui-dropdown-menu`.
+
+## Qué variante usar
+
+> **La guía del DS define el command menu como el buscador que deja saltar rápido desde cualquier
+> pantalla**, armado dentro de un diálogo, con input, lista, grupos con título, items y un pie con
+> teclas. El item tiene dos tamaños, `small` (default) y `medium`, y el elegido se marca con fondo
+> `bg-weak-50`. No trae do/don't. Lo demás es **propuesta, falta aprobación**.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-dropdown-menu`):
+> **0 usos**. Solo aparece en la vitrina `master-preview`.
+
+### `type` — qué va a la izquierda
+
+| type | cuándo | fuente |
+|---|---|---|
+| `left-icon` | Ir a una **pantalla** o una sección: «Pedidos», «Mi negocio», «Recargas». | según la guía del DS (item con ícono); el cuándo es propuesta |
+| `avatar` | Una **persona**: repartidor, cliente, dueño de local (`avatar` con `src` o `initials`). | propuesta |
+| `company` | Un **local**: su logo en `avatar.src`. | propuesta |
+| `basic` (default) | Una búsqueda reciente o un resultado sin imagen («Pedido #1234»). | propuesta |
+| `brand` | Un servicio externo con su logo (Yape, WhatsApp), proyectado en `slot="brand"`. | propuesta |
+| `country` | No usar hoy: todo es Perú. | propuesta |
+
+### `size` y los extras
+
+| prop | cuándo | fuente |
+|---|---|---|
+| `size="small"` (default, 40) | Listas de resultados de una línea (`title` + `sublabel`). | según la guía del DS (default `small`) |
+| `size="medium"` (64) | Cuando el resultado necesita una segunda línea (`description`) para distinguirse: «Pedido #1234» · «Juan Pérez · S/ 45.00». | según la guía del DS (existe); el cuándo es propuesta |
+| `badge` | Un estado corto que ayuda a elegir («Pendiente», «Cerrado»). String = gris `lighter`; objeto `SuiBadgeConfig` para color. | propuesta |
+| `shortcut` | El atajo de esa acción (`sui-kbd`). Solo web. | canon (README de `sui-kbd`: en mobile no se pinta) |
+| `showButton` | Una flecha a la derecha cuando el resultado abre otra pantalla. | propuesta |
+
+## Tamaño en mobile y en web
+
+El command menu es un patrón de desktop. En mobile no hay ⌘K ni flechas; si se reusa la lista en un
+buscador de mobile, la fila `small` mide 40 y queda debajo de los 44 del dedo.
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| resultado de una línea | `medium` (64) | `small` (40) | propuesta, falta aprobación |
+| resultado con descripción | `medium` (64) | `medium` (64) | propuesta |
+
+```html
+<sui-command-menu-item [size]="bp.isMobile() ? 'medium' : 'small'" … />   <!-- bp = BreakpointsService -->
+```
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `type` | `'basic' \| 'left-icon' \| 'avatar' \| 'brand' \| 'company' \| 'country'` | `'basic'` |
+| `size` | `'small' \| 'medium'` | `'small'` |
+| `title` | `string` | — (requerido) |
+| `sublabel` | `string \| null` | `null` |
+| `description` | `string \| null` | `null` |
+| `icon` | `string \| null` | `null` |
+| `avatar` | `SuiAvatarConfig \| string \| null` | `null` |
+| `flagName` | `SuiFlagName \| null` | `null` |
+| `badge` | `SuiBadgeConfig \| string \| null` | `null` |
+| `shortcut` | `string \| null` | `null` |
+| `showButton` | `boolean` | `false` |
+
+| output | payload |
+|---|---|
+| `clicked` | `MouseEvent` |
+| `buttonClicked` | `MouseEvent` |
+<!-- api:fin -->
+
+Slot: `[slot=brand]` (solo con `type="brand"`). `avatar` acepta un string (la URL) o
+`SuiAvatarConfig` (`{ src?, initials?, color? }`).
+
+## Trampas
+
+- **`(clicked)` nunca sale.** El componente declara el output pero no lo conecta a ningún clic (el
+  host no escucha `click` y el template no llama a `onClick`; el spec no lo prueba). Escucha el
+  `(click)` nativo del host: `<sui-command-menu-item (click)="ir(r)" … />`.
+- **Enter y Espacio no hacen nada.** Tiene `role="button"` y `tabindex="0"`, así que se enfoca con
+  Tab, pero activarlo con teclado lo tiene que cablear quien lo usa (`(keydown.enter)`).
+- **No hay estado «elegido»** para la navegación con flechas: el fondo `weak-50` sale con hover y
+  con `:focus-visible`. Para mover la selección con ↑ ↓ hay que mover el foco entre filas.
+- `description` solo se ve en `medium`.
+- `showButton` pinta una flecha con `ariaLabel="Abrir"` fijo, y su clic sale por `buttonClicked`
+  (no burbujea al item).
+- `type="left-icon"` sin `icon` en `small` cae al ícono `apps-line`; en `medium` queda el círculo vacío.
+- Mide como máximo 600 px de ancho.
+- El host borra el atributo `title` nativo (no aparece el tooltip gris del navegador).
+
+## Ejemplo
+
+```html
+<sui-modal [(open)]="buscadorAbierto" size="large" [fullscreen]="true">
+  <sui-command-menu-search [(value)]="q" placeholder="Busca pedidos, locales o repartidores…"
+                           [shortcut]="!bp.isMobile()" />
+  <sui-content-divider type="text" text="Pantallas" />
+  @for (p of pantallas(); track p.ruta) {
+    <sui-command-menu-item type="left-icon" [icon]="p.icono" [title]="p.nombre"
+                           [size]="bp.isMobile() ? 'medium' : 'small'"
+                           (click)="ir(p.ruta)" (keydown.enter)="ir(p.ruta)" />
+  }
+  @if (!bp.isMobile()) {
+    <sui-command-menu-footer navigateLabel="Moverte" selectLabel="Abrir" [helpText]="null" />
+  }
+</sui-modal>
+```

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

@@ -0,0 +1,105 @@
+---
+name: sui-command-menu-search
+selector: sui-command-menu-search
+resumen: Campo de arriba del buscador ⌘K (command menu), sin caja y con borde inferior
+alternativas: [sui-input type="search" (buscador de una pantalla), sui-dropdown-search (filtrar los items de un menú flotante)]
+---
+
+# sui-command-menu-search
+
+Story: [Organisms/Command Menu/Command Menu Search](https://sui-design-system.web.app/?path=/docs/organisms-command-menu-command-menu-search--docs)
+
+Es la primera de las tres piezas del command menu (ver README de `sui-command-menu-item`): el
+campo, el chip ⌘K y un botón para limpiar. **No busca**: emite el texto y quien lo usa filtra.
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** arriba de un command menu armado dentro de un `sui-modal`: el buscador que salta a
+pedidos, locales, repartidores o pantallas del panel en desktop.
+
+**No lo uses** para:
+
+- El buscador de una pantalla o de una lista a la vista: `sui-input type="search"` (ya lleva
+  `enterkeyhint="search"`, tamaños y label).
+- Filtrar las opciones de un menú anclado a un botón: `sui-dropdown-search`.
+- Fuera del command menu: no tiene caja, solo un borde abajo; suelto parece texto.
+
+Regla corta: **buscar en toda la app → command-menu-search · buscar en una pantalla → sui-input
+search · filtrar un menú → dropdown-search.**
+
+## Qué variante usar
+
+> **La guía del DS define el command menu como el buscador que deja saltar rápido desde cualquier
+> pantalla**; el input es su primera parte. No dice nada del chip ni del botón de la derecha (salen
+> del Figma del DS). Todo lo de abajo es **propuesta, falta aprobación**, salvo lo marcado canon.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-dropdown-menu`):
+> **0 usos**.
+
+Los tres estados salen solos del `value`: vacío (lupa gris, placeholder gris), hover (placeholder
+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 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 |
+
+## Tamaño en mobile y en web
+
+No tiene tamaños: 48 px de alto (14 + 20 + 13 + 1 de borde), texto 14/20, hasta 600 px de ancho.
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| buscador del command menu | igual, sin chip ⌘K | igual, con chip ⌘K | canon para el chip (README de `sui-kbd`); el resto, propuesta |
+
+```html
+<sui-command-menu-search [(value)]="q" placeholder="Busca pedidos, locales o repartidores…"
+                         [shortcut]="!bp.isMobile()" />   <!-- bp = BreakpointsService -->
+```
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `value` | `string` | `''` |
+| `placeholder` | `string` | `'Buscar o ir a…'` |
+| `shortcut` | `boolean` | `true` |
+| `button` | `boolean` | `true` |
+
+| output | payload |
+|---|---|
+| `valueChange` | `string` |
+| `cleared` | `void` |
+<!-- api:fin -->
+
+`value` no es `model`, pero el par `value` + `valueChange` permite `[(value)]`. La X emite
+`valueChange('')` y `cleared`, y devuelve el foco al campo.
+
+## Trampas
+
+- **Sin `[(value)]` no funciona bien.** El componente no guarda lo que se escribe: solo lo emite. Si
+  no se le devuelve el `value`, la X nunca aparece y la lupa no cambia: el estado «con texto» sale
+  del input `value`, no de lo escrito.
+- **El chip dice ⌘K, fijo.** En Windows el atajo es Ctrl+K y el chip no cambia; tampoco hay atajo
+  real: el `keydown` global lo cablea quien arma el command menu.
+- **iOS hace zoom al enfocarlo**: el campo está en 14 px y la regla de la app pide 16 px en los
+  inputs de mobile (CLAUDE.md, «Responsive mobile»).
+- **El teclado no trae la lupa**: el `<input>` es `type="text"` sin `enterkeyhint="search"` (CLAUDE.md,
+  «La lupa del teclado»).
+- **El campo no tiene nombre accesible**: solo placeholder, sin `aria-label`.
+- No tiene `disabled`.
+- El ícono de info del estado vacío es decorativo: no abre ayuda ni tiene `aria-label`.
+
+## Ejemplo
+
+```html
+<sui-command-menu-search
+  [(value)]="q"
+  placeholder="Busca pedidos, locales o repartidores…"
+  [shortcut]="!bp.isMobile()"
+  (cleared)="resultados.set([])" />
+```

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,22 @@ 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 14 · 12, radio 12); el texto y los íconos siguen en 14/20 y 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).
 
 Las opciones del menú siguen al `size` como en `sui-select`: 36 hasta `medium`, **44 en `large`**, y
 **44 en mobile (≤ 767 px) con cualquier tamaño**.
@@ -101,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 |
 |---|---|
@@ -116,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»).