@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,182 @@
+---
+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
+
+<!-- generado por scripts/gen-docs.mjs — no editar a mano; `npm run docs` -->
+
+> **De dónde sale este doc.** El criterio es el del SUI Angular (`sui-command-menu-search`); la API es la de este
+> paquete, leída del código. Los ejemplos se pasaron de Angular de forma mecánica: lo literal va como
+> atributo (`only-icon`, `size="large"`), lo dinámico entre llaves (`size={expr}` → `el.size = expr`)
+> y los eventos como `onValueChange={…}` → `el.addEventListener('valueChange', …)`. `@if`, `@for` y
+> `<ng-template>` quedan como en Angular: se leen como pseudocódigo.
+
+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` | La X de limpiar **solo en la computadora** (`true`): ahorra borrar a mano. En el celular y en la tablet táctil, `false` hasta que el DS tenga un size de 44 (la X mide 20): se toca, así que la tablet va con el celular (D16). El ícono de info del estado vacío no hace nada. | canon (aprobado por el dueño, 05-10-2026, bloque B13) |
+
+## Tamaño en mobile y en web
+
+No tiene tamaños: 48 px de alto (14 + 20 + 13 + 1 de borde), texto 14/20 (16 en ≤ 767 px, anti-zoom de iOS, desde 0.26.0), hasta 600 px de ancho.
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| buscador del command menu | igual, sin chip ⌘K ni X | igual, con chip ⌘K y X | canon para el chip (README de `sui-kbd`) y la X (B13 + D16: la tablet táctil va sin X); el resto, propuesta |
+
+```html
+<sui-command-menu-search value={q} onValueChange={(e) => (q = e.detail)} placeholder="Busca pedidos, locales o repartidores…"
+                         shortcut={!bp.isMobile()} button={!bp.tactil()} />   <!-- bp = BreakpointsService -->
+```
+
+### Por dispositivo (D16)
+
+No aplica: no tiene input `size` (48 px de alto en todos los dispositivos; el texto sube a 16 solo por ancho, ≤ 767 px), así que D16 no
+lo mueve. Por dispositivo solo cambian dos cosas, y no con la misma señal:
+
+- **La X de limpiar se toca** (`sui-compact-button` `medium`, 20 px): va apagada en el celular **y en
+  la tablet táctil**, porque D16 pone la tablet con el celular en lo que se toca (Apple pide 44
+  también en iPad). `bp.tactil()`, no `bp.isMobile()`: `isMobile()` solo mira el ancho (≤ 767 px) y
+  en un iPad la dejaría prendida.
+- **El chip ⌘K no se toca**: sigue la regla de `sui-kbd`, apagado en el celular (`!bp.isMobile()`).
+
+En master-pedidos: `shortcut={!bp.isMobile()} button={!bp.tactil()}`, sin `size`.
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| prop | atributo | tipo | default |
+|---|---|---|---|
+| `ariaLabel` | `aria-label` | `null \| string` | `null` |
+| `button` | `button` | `boolean` | `true` |
+| `placeholder` | `placeholder` | `string` | `'Buscar o ir a…'` |
+| `shortcut` | `shortcut` | `boolean` | `true` |
+| `value` | `value` | `string` | `''` |
+
+| evento | `event.detail` |
+|---|---|
+| `cleared` | `void` |
+| `valueChange` | `string` |
+
+### Diferencias con el SUI Angular
+
+Ninguna en nombres de props, eventos y valores.
+<!-- api:fin -->
+
+<!-- textos:inicio -->
+### Textos
+
+Lo que el componente escribe solo sale de `provideSuiTextos` (español por defecto, se cambia en vivo; ver `docs/TEXTOS.md`). El input de la última columna le gana al texto global.
+
+| clave | por defecto | se pisa con |
+|---|---|---|
+| `comun.limpiarBusqueda` | Limpiar búsqueda | — |
+| `menuComandos.placeholder` | Buscar o ir a… | `placeholder` |
+<!-- textos:fin -->
+
+`value` no es `model`, pero el par `value` + `valueChange` permite `value` + `valueChange`. La X emite
+`valueChange('')` y `cleared`, y devuelve el foco al campo.
+
+## Trampas
+
+- **Sin `value` + `valueChange` 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.
+- **El nombre accesible es el placeholder** si no pasas `ariaLabel`.
+- Lleva `enterkeyhint="search"` y **no** `inputmode` (D14: `inputmode="search"` le quita la lupa al
+  teclado de Android). Texto en 16 en ≤ 767 px. Las dos cosas desde 0.26.0.
+- No tiene `disabled`.
+- El ícono de info del estado vacío es decorativo: no abre ayuda ni tiene `aria-label`.
+
+## Bien y mal
+
+Devolver el texto al campo
+
+```html
+<!-- ❌ mal: sin [(value)] el componente no sabe que hay texto; la X nunca aparece -->
+<sui-command-menu-search placeholder="Busca pedidos, locales o repartidores…"
+                         onValueChange={(e) => buscar(e.detail)} />
+```
+
+```html
+<!-- ✅ bien: el filtro sale de q (un computed), no del evento -->
+<sui-command-menu-search value={q} onValueChange={(e) => (q = e.detail)} placeholder="Busca pedidos, locales o repartidores…" />
+```
+
+Chip ⌘K y X en el celular
+
+```html
+<!-- ❌ mal (en el celular y en la tablet táctil): ⌘K sin teclado físico y una X de 20 px para el dedo -->
+<sui-command-menu-search value={q} onValueChange={(e) => (q = e.detail)} placeholder="Busca pedidos, locales o repartidores…"
+                         shortcut button />
+```
+
+```html
+<!-- ✅ bien: la X se toca, así que también se apaga en la tablet táctil (bp.tactil()) -->
+<sui-command-menu-search value={q} onValueChange={(e) => (q = e.detail)} placeholder="Busca pedidos, locales o repartidores…"
+                         shortcut={!bp.isMobile()} button={!bp.tactil()} />
+```
+
+Buscar dentro de una pantalla
+
+```html
+<!-- ❌ mal: suelto, sin caja, parece texto; y no lleva la lupa en el teclado -->
+<sui-command-menu-search value={q} onValueChange={(e) => (q = e.detail)} placeholder="Buscar pedido…" />
+```
+
+```html
+<!-- ✅ bien: el buscador de una pantalla es sui-input search -->
+<sui-input type="search" size={bp.sizeControl()} placeholder="Buscar pedido…" value={q} onValueChange={(e) => (q = e.detail)} />
+```
+
+## Ejemplo
+
+```html
+<sui-command-menu-search
+  value={q} onValueChange={(e) => (q = e.detail)}
+  placeholder="Busca pedidos, locales o repartidores…"
+  shortcut={!bp.isMobile()}
+  button={!bp.tactil()}
+  onCleared={() => resultados.set([])} />
+```

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

@@ -0,0 +1,176 @@
+---
+name: sui-compact-avatar-group
+selector: sui-compact-avatar-group
+resumen: Varias personas en una píldora baja con el «+N» en texto, para tablas y filas apretadas
+alternativas: [sui-avatar-group (la pila grande, para cards y cabeceras), sui-avatar (una sola persona)]
+---
+
+# sui-compact-avatar-group
+
+<!-- generado por scripts/gen-docs.mjs — no editar a mano; `npm run docs` -->
+
+> **De dónde sale este doc.** El criterio es el del SUI Angular (`sui-compact-avatar-group`); la API es la de este
+> paquete, leída del código. Los ejemplos se pasaron de Angular de forma mecánica: lo literal va como
+> atributo (`only-icon`, `size="large"`), lo dinámico entre llaves (`size={expr}` → `el.size = expr`)
+> y los eventos como `onValueChange={…}` → `el.addEventListener('valueChange', …)`. `@if`, `@for` y
+> `<ng-template>` quedan como en Angular: se leen como pseudocódigo.
+
+Story: [Atoms/Avatar/Compact Avatar Group](https://sui-design-system.web.app/?path=/docs/atoms-avatar-compact-avatar-group--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** cuando hay que mostrar varias personas **en poco alto**: una celda de tabla, una fila
+de lista. Es una píldora blanca con los avatares casi pegados y el «+N» como texto.
+
+**No lo uses** para:
+
+- Una card o una cabecera con espacio: `sui-avatar-group`.
+- Una sola persona: `sui-avatar`.
+
+## Qué variante usar
+
+> **La guía del DS dice qué es, sus tamaños y sus dos estilos, no cuándo usar cada uno.** Lo
+> marcado «según la guía del DS» sale de su texto o de su código. Lo marcado canon está
+> aprobado; lo que sigue en **propuesta, falta aprobación** espera decisión.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos 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
+
+- **Para qué es**: la versión más compacta del avatar group.
+- **Tamaños**: 40, 32 y 24; el default de la guía es 40 (en SUI, `'32'`).
+- **Estilos**: `default` (píldora blanca con sombra) y `stroke` (además, un borde `stroke-soft-200`).
+
+### `size`, `appearance`, `max` y `count`
+
+| input | valor | cuándo | fuente |
+|---|---|---|---|
+| `size` | `'24'` | Celda de tabla. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `size` | `'32'` (default SUI) | Fila de una lista. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `size` | `'40'` (default de la guía) | Dentro de una card. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `appearance` | `default` | Sobre un fondo gris o de color: la sombra lo separa. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `appearance` | `stroke` | Sobre blanco, donde la sombra sola no alcanza a marcar el borde. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `max` | `3` (default) | Tres avatares visibles. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `count` | — | Solo si el total no está en `items` (vienen 3 caras pero son 12 personas): `count="+9"`. Si no, se calcula solo. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+
+Usos de hoy que rompen la regla: **0** (no hay usos).
+
+## Tamaño en mobile y en web
+
+En mobile va más grande por legibilidad (el grupo no se toca: el área la da la fila); en web, más chico. En las
+pantallas que se usan en los dos (panel del local, super admin) se elige con el servicio de
+breakpoints de la app (`bp`, en `services/breakpoints.service.ts`); en las que solo existen en
+el celular (cliente, repartidor) también va `bp.celular()`, porque el celular chico (< 380 px) toma
+el valor de web (D16, dueño 05-10-2026). No se toca, así que la tablet va con el valor de web.
+Es **canon (dueño, 05-10-2026, P1 b)**: un paso más grande en el celular que en computadora, y
+se migra todo ahora, no solo al tocar cada pantalla.
+
+| uso | mobile | web |
+|---|---|---|
+| fila o celda de tabla | `'32'` | `'24'` |
+| dentro de una card | `'40'` | `'32'` |
+
+```html
+<sui-compact-avatar-group size={bp.celular() ? '32' : '24'} items={repartidores} />
+```
+
+### Por dispositivo (D16)
+
+No se toca: sube un paso solo en el celular de 380 px o más; el resto va con el valor de web.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380) | valor web: `'24'` fila · `'32'` card | lo que no se toca va como en la computadora (D16) |
+| celular (380–767) | valor mobile: `'32'` fila · `'40'` card | P1 b: un paso más que en la computadora |
+| tablet táctil (`pointer: coarse`) | valor web: `'24'` fila · `'32'` card | no se toca: el puntero no lo mueve |
+| computadora (`pointer: fine`) | valor web: `'24'` fila · `'32'` card | |
+
+Ultrawide: igual que la computadora; el espacio extra no agranda el grupo.
+
+En master-pedidos: `size={bp.celular() ? '32' : '24'}` en una fila y `size={bp.celular() ? '40' : '32'}`
+en una card (no hay helper: `bp.sizeAvatar()` usa la escala de `sui-avatar`, no `'24'`/`'32'`/`'40'`).
+`bp.isMobile()` no sirve: incluye al celular chico.
+
+## «No usar»: por qué no hoy y cuándo sí
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| todo el componente (0 usos) | no hay tablas con varias personas por fila | la columna «repartidores» en la tabla de locales del super admin |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| prop | atributo | tipo | default |
+|---|---|---|---|
+| `appearance` | `appearance` | `"default" \| "stroke"` | `'default'` |
+| `count` | `count` | `null \| string` | `null` |
+| `items` | — (solo por propiedad JS) | `readonly SuiCompactAvatarGroupItem[]` | `[]` |
+| `max` | `max` | `number` | `3` |
+| `size` | `size` | `"24" \| "32" \| "40"` | `'32'` |
+
+Eventos: ninguno.
+
+### Diferencias con el SUI Angular
+
+Ninguna en nombres de props, eventos y valores.
+<!-- api:fin -->
+
+`items` usa `SuiAvatarGroupItem` (ver `sui-avatar-group`).
+
+## Trampas
+
+- **`size` es un string**: `size="32"`, no `size="32"` (con número no compila).
+- **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`: el `color` por rol va
+  explícito en cada item (canon, aprobado por el dueño, 03-10-2026); sin él cae a `slate`.
+
+## Bien y mal
+
+El size es un string
+
+```html
+<!-- ❌ mal: con números no compila; el tipo es '24' | '32' | '40' -->
+<sui-compact-avatar-group size={bp.celular() ? 32 : 24} items={repartidores} />
+```
+
+```html
+<!-- ✅ bien: los valores van entre comillas (fila: '32' en el celular, '24' en el resto) -->
+<sui-compact-avatar-group size={bp.celular() ? '32' : '24'} items={repartidores} />
+```
+
+Tamaño en el celular chico
+
+```html
+<!-- ❌ mal: isMobile() también sube el celular chico, que va con el valor de web (D16) -->
+<sui-compact-avatar-group size={bp.isMobile() ? '32' : '24'} items={repartidores} />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-compact-avatar-group size={bp.celular() ? '32' : '24'} items={repartidores} />
+```
+
+El «+N» a mano
+
+```html
+<!-- ❌ mal: items ya trae a todos; count fijo gana al cálculo y miente cuando cambia la lista -->
+<sui-compact-avatar-group size={bp.celular() ? '32' : '24'} appearance="stroke" items={repartidores}
+                          count="+3" />
+```
+
+```html
+<!-- ✅ bien: count solo si items trae menos personas que el total -->
+<sui-compact-avatar-group size={bp.celular() ? '32' : '24'} appearance="stroke" items={repartidores} />
+```
+
+## Ejemplo
+
+```html
+<!-- celda de la tabla de locales: '32' en el celular de 380 px o más, '24' en el resto (D16) -->
+<sui-compact-avatar-group size={bp.celular() ? '32' : '24'} appearance="stroke" items={repartidoresDelLocal} />
+```

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

@@ -0,0 +1,288 @@
+---
+name: sui-compact-button
+selector: sui-compact-button
+resumen: Botón de solo ícono, chico, para cuando falta espacio
+alternativas: [sui-button (acción con texto, o de ícono con onlyIcon en tamaños de 28 a 52), sui-link-button (acción que se lee como texto), sui-topbar-button (ícono de la barra superior)]
+---
+
+# sui-compact-button
+
+<!-- generado por scripts/gen-docs.mjs — no editar a mano; `npm run docs` -->
+
+> **De dónde sale este doc.** El criterio es el del SUI Angular (`sui-compact-button`); la API es la de este
+> paquete, leída del código. Los ejemplos se pasaron de Angular de forma mecánica: lo literal va como
+> atributo (`only-icon`, `size="large"`), lo dinámico entre llaves (`size={expr}` → `el.size = expr`)
+> y los eventos como `onValueChange={…}` → `el.addEventListener('valueChange', …)`. `@if`, `@for` y
+> `<ng-template>` quedan como en Angular: se leen como pseudocódigo.
+
+Story: [Atoms/Button/Compact Button](https://sui-design-system.web.app/?path=/docs/atoms-button-compact-button--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** para una acción de un solo ícono donde no entra un botón: cerrar en la cabecera de un
+modal o sheet, «más» o «quitar» en una fila, el − / + de una cantidad, las flechas flotantes de un
+carrusel o un mapa.
+
+**No lo uses** para:
+
+- **Una acción con texto**: `sui-button` o `sui-link-button`.
+- **El ícono de la barra superior**: `sui-topbar-button`.
+- **Un ícono decorativo** que no hace nada: `sui-icon`.
+
+## Qué variante usar
+
+> **La guía del DS no dice cuándo usar cada estilo.** Su página muestra los cuatro estilos, los
+> 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 06-10-2026 en `master-pedidos/src/app`: 12 compact-buttons en 8 archivos, sin
+> contar prototipos ni vitrinas (`master-preview`, `master-prototipos`, `mockup-sheets-*`,
+> `dx/*`, `master-rutina`, `master-medico`, `dev-index`). Estilos: 7 `ghost`, 3 `stroke` (uno
+> por error, ver abajo), 2 `white`, 0 `modifiable`. Tamaños: 7 por `bp` (6 `5xlarge`/`large` y 1
+> `5xlarge`/`medium`, los 7 con `bp.isMobile()`), 2 `large` fijo, 1 `medium` fijo y 2 `xlarge`
+> fijo. 4 con `fullRadius`, 1 con `disabled`.
+>
+> Las líneas citadas en este README son las de **apertura del elemento** (`<sui-compact-button`),
+> aunque el `size` o el `click` estén unas líneas más abajo.
+
+### Lo que sí dice la guía del DS
+
+- **Para qué es**: botones para cuando el espacio es limitado.
+- **Defaults**: `stroke` + `large` + sin `fullRadius`. Igual que SUI.
+- **Tamaños**: solo `large` (24 px, ícono 20) y `medium` (20 px, ícono 18; en SUI, 16). `xlarge`
+  y los tres más grandes son extensión de SUI.
+- **`modifiable` no tiene color, fondo ni hover propios**: hereda el color del contenedor.
+- **Deshabilitado**: sin borde, sin fondo y sin sombra; el ícono en `text-disabled-300`.
+
+### `variantStyle`
+
+| 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, 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:**
+
+- **Sin estilo explícito.** `pages/super-admin/master-settings/master-settings.html:649` («Quitar este
+  nivel»). Antes llevaba `variant="ghost"` (que el compact-button ignora); medido el 06-10-2026, ya
+  no lleva `variant`, pero tampoco `variantStyle`, así que sigue saliendo `stroke`. Pasar a
+  `variantStyle="ghost"` (además tiene `size="medium"` fijo y `click`: ver «Bien y mal»).
+- **Resuelto — `ghost` en acciones de fila** (canon, dueño 04-10-2026): se permite, igual que en
+  `sui-button`. En estos usos el **`ghost` queda bien**:
+  `components/option-sections-manager/option-sections-manager.html:38` y `:148`,
+  `components/add-product-modal/add-product-modal.html:317` y
+  `pages/super-admin/master-categorias/master-categorias.html:91` y `:98`. El **tamaño** no: los
+  cinco rompen D16 (ver «Usos de hoy que rompen la regla» en `size`).
+
+### `size`
+
+| size | px (ícono) | cuándo | fuente |
+|---|---|---|---|
+| `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). 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 |
+
+**Migración a tamaños de mobile: a medias** (medido el 06-10-2026). 7 usos ya llevan `bp` con
+`5xlarge` en el celular, pero los 7 con `bp.isMobile()`, que mira solo el ancho: en la tablet quedan
+con el tamaño de web (24 o 20). Hay que pasarlos a `bp.tactil()` (D16):
+
+- `components/product-detail-view/product-detail-view.html:169` y `:173` (− / +)
+- `pages/customer/order-history/order-history.html:382` (ver detalle)
+- `components/store-ratings-modal/store-ratings-modal.html:33` (cerrar)
+- `components/add-product-modal/add-product-modal.html:317` (quitar opción)
+- `components/option-sections-manager/option-sections-manager.html:38` (más) y `:148` (quitar opción)
+
+**Usos de hoy que rompen la regla** (además de los 7 de arriba):
+
+- `store-ratings-modal.html:33` cierra en web con `medium` (20); la tabla de abajo pide `xlarge` (28).
+- `pages/super-admin/master-settings/master-settings.html:649` («Quitar este nivel»): `size="medium"`
+  fijo, así que mide 20 en el celular y la tablet. Va `size={bp.tactil() ? '5xlarge' : 'large'}`.
+- `pages/super-admin/master-categorias/master-categorias.html:91` (fijar) y `:98` (editar):
+  `size="large"` fijo, 24 en el celular y la tablet. Va `size={bp.tactil() ? '5xlarge' : 'large'}`.
+
+Las flechas de `arrastre-carrusel.ts:102` y `:104` llevan `xlarge` fijo y están bien: solo aparecen
+con mouse.
+
+### `fullRadius`
+
+| fullRadius | cuándo | fuente |
+|---|---|---|
+| `false` (default, radio 6) | Lo normal: filas, cards, cabeceras. | default según la guía del DS · cuándo: canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `true` (círculo) | Flotante (`white`) sobre mapa o foto. | canon (aprobado por el dueño, 03-10-2026) |
+| `true` (círculo) | El − / + de una cantidad, para que se lea como un stepper. | canon (aprobado por el dueño, 05-10-2026, bloque B2) (es lo que ya hace `product-detail-view`) |
+
+### `disabled`, `href`, `ariaLabel`
+
+| prop | cuándo | fuente |
+|---|---|---|
+| `disabled` | Se llegó al límite: no hay más stock para sumar, no se puede quitar el último. | cómo se ve: según la guía del DS · cuándo: canon (aprobado por el dueño, 05-10-2026, bloque B8) |
+| `href` | Solo si el botón navega sin otra acción (volver a una ruta). Pinta un `<a>`; `rel` ya viene en `'noopener noreferrer'`. | canon (aprobado por el dueño, 05-10-2026, bloque B10) |
+| `ariaLabel` (requerido) | Lo que hace, no lo que muestra: «Cerrar», «Quitar opción», «Agregar uno»; nunca «X» ni «Ícono». | canon (aprobado por el dueño, 05-10-2026, bloque B5) (el input es obligatorio) |
+| `type="submit"` | Solo dentro de un `<form>`. | canon (aprobado por el dueño, 05-10-2026, bloque B10) |
+
+## Tamaño en mobile y en web
+
+En mobile se toca con el dedo: el área táctil tiene que medir **44 px o más**. En la tablet
+(`pointer: coarse`) va igual que en el celular, porque también se toca; en la computadora
+(`pointer: fine`), el tamaño de web de la tabla de abajo. El compact-button no tiene un área tocable
+más grande que lo que se ve, así que en el celular chico (< 380 px) también va el de 44.
+Nada en `small` ni `xsmall` (canon, dueño, 05-10-2026, D16; reemplaza al «tamaño por plataforma» del
+03-10-2026, que bajaba la web a `small`). La app lo resuelve con `BreakpointsService`
+(`src/app/services/breakpoints.service.ts`): `bp.tactil()` es verdadero en todo celular (hasta 767 px)
+y en toda pantalla táctil (`pointer: coarse`), así que cubre la tablet; `bp.isMobile()` solo mira el
+ancho y deja la tablet con el tamaño de web.
+`sui-compact-button` tiene su propia escala (de `medium` 20 a `5xlarge` 44) y no tiene `small`: D16 no
+lo mueve por el nombre; la tabla de abajo sigue igual.
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| 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" variant-style="ghost" aria-label="Cerrar"
+                    size={bp.tactil() ? '5xlarge' : 'xlarge'} onClicked={() => cerrar()} />
+```
+
+`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.
+
+### Por dispositivo (D16)
+
+Fila propia en la tabla de D16 (dueño, 05-10-2026): el compact-button tiene **escala propia** y no
+tiene `small`, así que D16 no lo mueve por el nombre; lo que manda es llegar a 44 donde se toca.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380 px) | `5xlarge` (44) | escala propia: el área tocable es el botón mismo (no hay un `medium` con área de 44), así que va el mismo que en el celular |
+| celular (380–767 px) | `5xlarge` (44) | `2xlarge` (32) con aire solo si la fila no lo deja entrar (propuesta, falta aprobación) |
+| tablet táctil (`pointer: coarse`) | `5xlarge` (44) | igual que el celular: también se toca |
+| computadora (`pointer: fine`) | `large` (24) en filas y cards · `xlarge` (28) en el cerrar y los flotantes | `medium` (20) solo en tablas densas |
+
+Ultrawide (≥ 1920 px): igual que la computadora; el espacio extra va a columnas, no a botones más grandes.
+Una flecha que **solo aparece con mouse** (las del carrusel, `arrastre-carrusel.ts:102`) no necesita
+`bp`: va `xlarge` fijo.
+
+En master-pedidos: `size={bp.tactil() ? '5xlarge' : 'large'}` (filas y cards) o
+`size={bp.tactil() ? '5xlarge' : 'xlarge'}` (cerrar y flotantes). No hay helper `size*` propio:
+`bp.sizeControl()` devuelve `large`/`medium`, que aquí miden 24/20.
+
+## «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 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.
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| prop | atributo | tipo | default |
+|---|---|---|---|
+| `ariaLabel` | `aria-label` | `string` | — (requerido) |
+| `disabled` | `disabled` | `boolean` | `false` |
+| `fullRadius` | `full-radius` | `boolean` | `false` |
+| `href` | `href` | `null \| string` | `null` |
+| `icon` | `icon` | `string` | — (requerido) |
+| `rel` | `rel` | `null \| string` | `'noopener noreferrer'` |
+| `size` | `size` | `"2xlarge" \| "3xlarge" \| "4xlarge" \| "5xlarge" \| "large" \| "medium" \| "xlarge"` | `'large'` |
+| `target` | `target` | `null \| string` | `null` |
+| `type` | `type` | `"button" \| "reset" \| "submit"` | `'button'` |
+| `variantStyle` | `variant-style` | `"ghost" \| "modifiable" \| "stroke" \| "white"` | `'stroke'` |
+
+| evento | `event.detail` |
+|---|---|
+| `clicked` | `MouseEvent` |
+
+### Diferencias con el SUI Angular
+
+Ninguna en nombres de props, eventos y valores.
+<!-- api:fin -->
+
+El clic se escucha con `clicked`. `icon` recibe el nombre RemixIcon, sin el prefijo `ri-`.
+
+## 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:649`).
+- **`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:649`,
+  `arrastre-carrusel.ts:102` y `:104`, `order-history.html:382`). Usa `clicked`, que ya respeta
+  `disabled`.
+- 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`.
+- Al presionar, `stroke`, `ghost` y `white` se ponen oscuros (`bg-surface-800`) con el ícono
+  blanco: es el estado activo del Figma, no un error.
+- Ya trae el arreglo de iOS para el `:active` pegado: no lo agregues.
+
+## Bien y mal
+
+**Una acción de fila con size fijo**
+
+```html
+<!-- ❌ mal: size fijo; en el celular y la tablet mide 20 o 24 (master-settings.html:649, master-categorias.html:98) -->
+<sui-compact-button icon="pencil-line" variant-style="ghost" size="large"
+                    ariaLabel={'Editar ' + f.nombre} onClicked={() => abrir(f.id)} />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-compact-button icon="pencil-line" variant-style="ghost" size={bp.tactil() ? '5xlarge' : 'large'}
+                    ariaLabel={'Editar ' + f.nombre} onClicked={() => abrir(f.id)} />
+```
+
+**El cerrar de un modal**
+
+```html
+<!-- ❌ mal: en web cierra en medium (20) y la tablet queda con el de web (store-ratings-modal.html:33) -->
+<sui-compact-button icon="close-line" variant-style="ghost" aria-label="Cerrar"
+                    size={bp.isMobile() ? '5xlarge' : 'medium'} onClicked={() => onClosed()} />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-compact-button icon="close-line" variant-style="ghost" aria-label="Cerrar"
+                    size={bp.tactil() ? '5xlarge' : 'xlarge'} onClicked={() => onClosed()} />
+```
+
+**El − / + de una cantidad**
+
+```html
+<!-- ❌ mal: (click) escucha al host; (clicked) es el que respeta disabled (product-detail-view.html:173) -->
+<sui-compact-button icon="add-line" full-radius size={bp.tactil() ? '5xlarge' : 'large'}
+                    disabled={sinStock} aria-label="Agregar uno" onClick={() => sumar()} />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-compact-button icon="add-line" full-radius size={bp.tactil() ? '5xlarge' : 'large'}
+                    disabled={sinStock} aria-label="Agregar uno" onClicked={() => sumar()} />
+```
+
+## Ejemplo
+
+```html
+<!-- Cerrar en la cabecera de un sheet: 5xlarge (44) donde se toca, xlarge en la computadora -->
+<sui-compact-button icon="close-line" variant-style="ghost" size={bp.tactil() ? '5xlarge' : 'xlarge'}
+                    aria-label="Cerrar" onClicked={() => cerrar()} />
+
+<!-- Acción de una fila en desktop -->
+<sui-compact-button icon="more-2-line" aria-label="Opciones de la sección" onClicked={() => abrirMenu()} />
+
+<!-- Flotante sobre el mapa -->
+<sui-compact-button icon="arrow-left-line" variant-style="white" full-radius
+                    size={bp.tactil() ? '5xlarge' : 'xlarge'} aria-label="Volver" onClicked={() => volver()} />
+```