@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/docs/sui-button/README.md

@@ -0,0 +1,330 @@
+---
+name: sui-button
+selector: sui-button
+resumen: Botón base para que la persona dispare una acción
+alternativas: [sui-link-button (acción que se lee como texto), sui-compact-button (ícono de 20-40 px en filas y barras), sui-fancy-button (el CTA héroe), sui-social-button (entrar con Google/Apple), sui-button-group (opciones que se ven como un solo control)]
+---
+
+# sui-button
+
+<!-- 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-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/Button](https://sui-design-system.web.app/?path=/docs/atoms-button-button--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** por defecto para cualquier acción. Se cambia a otro componente solo por una razón
+concreta: se lee como texto dentro de un párrafo (`sui-link-button`), es un ícono suelto en
+una fila o barra apretada (`sui-compact-button`), es login con una marca (`sui-social-button`).
+
+**No lo uses** para:
+
+- Navegar sin acción: un `<a>` o `sui-link-button` con `href`.
+- Prender/apagar algo: `sui-switch`. Elegir varias opciones cortas a la vez: `sui-button-group`.
+- Mostrar carga: **no tiene `loading`**. Pon un spinner en `slot="start"` y `disabled`.
+
+## Qué variante usar
+
+El botón tiene dos ejes: `variant` (el peso: cuánto llama la atención) y `color` (qué hace:
+`primary` naranja de marca, `neutral`, `error` destructivo). Las combinaciones se eligen juntas.
+
+> **La guía del DS no dice cuándo usar cada variante ni cada color.** Su página del botón
+> muestra las 12 combinaciones, los tamaños, el estado deshabilitado y la API; no trae
+> do/don't ni jerarquía. La tabla de variantes de abajo es **canon (aprobado por el dueño,
+> 03-10-2026)** sobre la base que ya fijaba `sui-modal-footer`; solo `ghost` `primary` queda a
+> discutir.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app`: 397 botones, sin contar prototipos ni
+> vitrinas (`master-preview`, `master-prototipos`, `mockup-sheets-*`, `dx/*`, `master-rutina`,
+> `master-medico`, `dev-index`). Combinaciones: 127 `stroke neutral`, 123 `filled primary`,
+> 31 `stroke error`, 26 `ghost neutral`, 21 `filled neutral`, 15 `ghost error`, 13 `lighter`,
+> 7 `ghost primary`, 7 `stroke primary`, 7 `filled error`, 20 con variante o color dinámico.
+
+### Lo que sí dice la guía del DS
+
+- **Defaults**: `filled` + `primary` + `medium`. Igual que SUI.
+- **Tamaños**: `medium` (40), `small` (36), `xsmall` (32) y el más chico de 28 (`2xsmall` en SUI).
+  `large` y `xlarge` **no están en la guía**: son extensión de SUI.
+- **Hermanos**: `sui-link-button` es la acción que se integra en un texto; `sui-compact-button`,
+  la de cuando falta espacio; `sui-button-group`, botones pegados en una sola línea;
+  `sui-fancy-button`, el mismo botón con un acabado más vistoso.
+- **Dentro de un alert la acción va en `actions[]` del alert** (links), nunca un `sui-button`
+  proyectado, tampoco `lighter` (canon, dueño 04-10-2026; ver `sui-alert`). Hoy hay 5 `sui-button`
+  proyectados en alerts por migrar.
+
+La base de la jerarquía no se inventa: la fija **`sui-modal-footer`**, que ya está en el DS y la
+usa toda la app. Ahí el secundario está fijo en `stroke` + `neutral`, el primario es `filled`, y
+el destructivo es el primario con `color: 'error'`. Las reglas de abajo extienden eso a
+cualquier grupo de botones.
+
+| variant + color | cuándo | ejemplo real de la app | fuente |
+|---|---|---|---|
+| `filled` `primary` (default) | **La** acción principal del grupo. Una sola por grupo visible: dos `filled` juntos = ninguno es principal. | `pages/orders/orders.html:236` («Aceptar pedido») · `pages/customer/cart/cart.html:196` («Continuar») | ya es canon (sui-modal-footer) |
+| `stroke` `neutral` | Toda acción secundaria: Cancelar, Volver, Editar, Ver detalle. Va a la izquierda del primario. | `pages/orders/orders.html:320` («Encargarme yo») · `pages/envios/envios.html:177` («Ver seguimiento») | ya es canon (sui-modal-footer) |
+| `filled` `error` | **Confirmar** algo destructivo: el último paso, dentro de la confirmación. Nunca el botón que abre la confirmación. | `pages/customer/order-history/order-history.html:133` («Sí», confirma cancelar) | canon (aprobado por el dueño, 03-10-2026) |
+| `stroke` `error` | **Abrir** una acción destructiva (lleva a la confirmación) o el «Rechazar» de un par Aprobar/Rechazar. | `pages/customer/about/about.html:76` («Eliminar cuenta») · `pages/super-admin/master-approvals/master-approvals.html:99` («Rechazar») | canon (aprobado por el dueño, 03-10-2026) |
+| `ghost` `neutral` / `ghost` `error` | Acción terciaria sin caja: íconos de editar/borrar en filas, «Cerrar», acciones de baja jerarquía en zonas densas. Vale igual en `sui-compact-button`. | `pages/super-admin/master-gastos/master-gastos.html:80` (editar) · `pages/customer/cart/cart.html:107` («Vaciar carrito») | canon (aprobado por el dueño, 03-10-2026) · ghost en filas también en compact-button: canon (dueño, 04-10-2026) |
+| `filled` `neutral` | Salir a otra app: WhatsApp, abrir el mapa. Es la práctica de hoy (21 usos, 13 de WhatsApp), no un principio: **falta criterio**. | `pages/driver/driver-order-detail/driver-order-detail.html:534` («WhatsApp») · `:589` («Abrir mapa») | canon (aprobado por el dueño, 03-10-2026) |
+| `ghost` `primary` | «Ver todas», «Reporte», «Detalles» en la cabecera de una card. **A discutir**: se pisa con `sui-link-button`, que según la guía es la acción que se lee como texto. | `pages/overview/components/overview-sales/overview-sales.html:5` | a discutir |
+| `stroke` `primary` | No usar. El secundario siempre es neutral. | — | canon (aprobado por el dueño, 03-10-2026) |
+| `lighter` (cualquier color) | No usar en botones nuevos. En `neutral` su fondo (`bg-weak-50`) es **el mismo que el de `disabled`**: se lee como apagado. Lo existente pasa a `stroke` (secundaria) o `ghost` (terciaria). | — | canon (aprobado por el dueño, 03-10-2026) |
+
+**Usos de hoy que rompen el canon** (sin prototipos):
+
+- **13 `lighter` → `stroke` o `ghost`** (7 `neutral`, 5 `error`, 1 `primary`). Ejemplos:
+  `pages/mi-negocio/mi-negocio.html:135` («Cambiar plan»), `pages/customer/cart/cart.html:31`
+  («Quitar no disponibles»), `pages/customer/order-tracking/order-tracking.html:740` («Cancelar
+  pedido», `lighter error` → `stroke error`). 4 de los 13 son los que viven dentro de un alert
+  (`pages/overview/overview.html:39`, `pages/mi-negocio/mi-negocio.html:383`, `cart.html:31`,
+  `pages/role-selector/role-selector.html:59`): ahí la salida correcta es `actions[]` del alert.
+- **7 `stroke primary` → `stroke neutral`.** Ejemplos: `pages/customer/checkout/checkout.html:117`
+  («Agregar dirección de entrega»), `pages/customer/profile/profile.html:131`,
+  `pages/super-admin/master-drivers/master-drivers.html:462`.
+- **4 `filled error` que no confirman nada destructivo (+1 a discutir):**
+  `pages/empresa/about/about.html:46` y `pages/repartidor/about/about.html:46` («Eliminar mi cuenta»
+  abre un modal → `stroke error`, como ya lo hace `pages/customer/about/about.html:76`);
+  `pages/driver/driver-dashboard/driver-dashboard.html:139` («Recargar S/ X para pagar»: urgente,
+  no destructivo → `filled primary`); `pages/super-admin/master-settings/master-settings.html:725`
+  («Salir» → `stroke neutral`). A discutir: `driver-dashboard.html:144` («Acepto y pago S/ X» de una
+  multa) — es dinero que sale, pero no borra nada.
+- **7 `ghost primary` a discutir** (si se decide que son links): `components/product-categories/product-categories.html:17`,
+  `pages/overview/components/overview-visitors/overview-visitors.html:5`, `pages/customer/profile/profile.html:90`.
+- **2 `filled primary` en la misma vista:** `pages/products/add-product/add-product.html:276`
+  («Aplicar») y `:281` («Continuar»). No se recalculó: la búsqueda fue por cercanía de líneas y
+  puede haber más.
+
+### `size`
+
+Uso medido el 04-10-2026: 123 `large`, 93 `small`, 58 `medium` (5 por default), 50 `xsmall`, 29 `2xsmall`, 44 dinámicos.
+
+| size | cuándo | fuente |
+|---|---|---|
+| `large` (48 px) | Footers de modal y CTA táctiles en mobile. | ya es canon (default de sui-modal-footer); extensión de SUI, la guía no lo tiene |
+| `medium` (40 px, default) | Todo botón en la computadora: CTA, formularios, acciones de cards, filas, cabeceras y tablas. En el celular chico (< 380 px), a la vista, con el área de 44. La tablet va como el celular. | default según la guía del DS; el «cuándo»: canon (aprobado por el dueño, 05-10-2026, bloque B1) y, para filas, cabeceras y tablas, canon (dueño, 05-10-2026, D16); solo en web (en el teléfono manda el piso táctil de 44) |
+| `small` (36) / `xsmall` (32) | No usar: son chicos. Las acciones de cards, filas y cabeceras van en `medium` en web y `large` en el teléfono. | escala según la guía del DS; no usarlos: canon (dueño, 05-10-2026, D16), reemplaza el «cuándo» del bloque B13 |
+| `2xsmall` (28) | No usar: es chico. Las acciones de ícono en tablas van en `medium` `onlyIcon`; si de verdad no entra, `sui-compact-button`. | escala según la guía del DS; no usarlo: canon (dueño, 05-10-2026, D16), reemplaza el «cuándo» del bloque B13 |
+| `xlarge` (52) | Extensión de SUI. Sin uso hoy. | canon (aprobado por el dueño, 03-10-2026) |
+
+En la app el patrón responsive es `size={bp.sizeControl()}`: `large` en el celular y la tablet
+táctil, `medium` en la computadora (D16, dueño 05-10-2026). **No uses `bp.controlSize()` en un
+botón**: es el de checkbox/radio/switch y da `large` en la computadora. Ver «Por dispositivo (D16)».
+
+## «No usar»: por qué no hoy y cuándo sí
+
+Nada se borra del DS. Lo marcado «no usar» no tiene caso en la app de hoy; si un
+flujo nuevo cae en la columna de la derecha, se usa (aprobado por el dueño, 03-10-2026).
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| `stroke` `primary` | el secundario es neutral; dos naranjas compiten por ser el principal | landings con dos CTA de marca sobre fondo oscuro |
+| `lighter` (los 3 colores) | en `neutral` tiene el mismo fondo que `disabled`: parece apagado | botones sobre un banner o una superficie teñida, donde `stroke` se ve pesado. **Dentro de un alert, nunca**: ahí van `actions[]` (canon, dueño 04-10-2026) |
+| `ghost` `primary` | lo hace mejor `sui-link-button` `primary` («Ver todas») | una acción con ícono en una barra de herramientas donde todo va sin caja |
+| `sui-social-button` Facebook, X, LinkedIn, GitHub, Dropbox | no hay login con esas cuentas | «Continuar con Facebook» o botones de compartir en redes |
+| `sui-social-button` `onlyIcon` | Apple exige el texto en su botón de login | una fila de «compartir en» fuera del login |
+| `sui-app-store-badge` `alternative` | el `preferred` es el oficial de cada tienda | landings o piezas sobre fondo oscuro o de color |
+| `sui-app-store-badge` otras tiendas | la app no está publicada ahí | Huawei AppGallery o Galaxy Store si se publica ahí |
+| `sui-fancy-button` | estilo de marketing (brillo, degradé) | el CTA principal de una landing, «Mejorar plan» o una campaña |
+| `sui-button-group` (0 usos) | hoy no hay opciones combinables pegadas | días del horario del local o filtros que se suman |
+| `sui-topbar-button` (0 usos) | las barras de la app tienen sus íconos propios | si se unifica la barra superior del admin con la del DS |
+
+## Tamaño en mobile y en web
+
+En mobile se toca con el dedo: **44 px como mínimo** (piso táctil, canon del dueño 04-10-2026) y 48
+en la acción principal. En la computadora, `medium` (40); la tablet va como el celular; en el celular chico
+(< 380 px), `medium` a la vista con el área de 44. Nada en `small`, `xsmall` ni `2xsmall` (canon, dueño,
+05-10-2026, D16).
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| acción principal de la pantalla o footer de modal | `large` (48) | `medium` (40) | canon (aprobado por el dueño, 03-10-2026) (footer de modal siempre `large`) |
+| acción dentro de una card o una fila | `large` (48) | `medium` (40) | mobile: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono — antes `medium` (40), que no llega · web: canon (dueño, 05-10-2026, D16), antes `small` / `xsmall` |
+| acción en una tabla | — (no hay tablas en mobile) | `medium` (40) | canon (dueño, 05-10-2026, D16), antes `2xsmall` (03-10-2026) |
+| CTA de landing | `xlarge` (52) | `large` (48) | propuesta, falta aprobación |
+
+Patrón (`bp` = `BreakpointsService`). Medido el 06-10-2026 en `master-pedidos/src/app`, sin
+prototipos ni vitrinas: 399 de 412 `sui-button` ya van con `bp.sizeControl()`; quedan 5 con
+`sizeAccionesCard()` de `master-drivers.ts:243` (`bp.isMobile()` solo: deja la tablet en `medium`),
+1 con `bp.controlSize()` (`checkout.html:392`), 1 en `small` (`notifications.html:50`), 2 sin
+`size` y 4 en `large` fijo (2 en el footer de `copy-text-dialog`, donde va bien; `cart.html:190` y
+`master-orders.html:662` no son footer de modal y en la computadora irían en `medium`):
+
+```html
+<sui-button size={bp.sizeControl()} …/>
+```
+
+### Piso táctil de 44 en el teléfono (canon, dueño 04-10-2026)
+
+Todo lo que se toca con el dedo mide **44 px como mínimo en el teléfono** (≤767 px). Cómo se
+cumple, sin cambiar nada de los sizes que ya existen:
+
+- **Componente cuyo size mayor no llega a 44 → se le crea el size siguiente** de su escala:
+  `xlarge` si el tope era `large` (tab-chips 44), `2xlarge` si ya existía `xlarge`
+  (segmented-control 44, checkbox/radio/switch-label con fila de 44, rating 44), `5xlarge` en
+  compact-button (44). Los «botones con otro acabado» siguen a `sui-button`: fancy-button y
+  social-button suman `large` (48). El size nuevo sigue la regla de tamaños de abajo.
+- **X de cierre y controles chicos** (X de alert, banner, toast, notification, content-card y tag;
+  puntos del stepper; lápiz/tacho de image-upload; clear y ojo de sui-input): el dibujo no cambia,
+  se amplía el **área** con un `::before` invisible de 44 solo en ≤767 px, sin pisar al vecino
+  (donde no entra a lo ancho, como los puntos del stepper, se agranda solo el alto).
+- Un size existente que no llega (p. ej. `sui-button` `medium` 40) **no se agranda**: en el
+  teléfono se usa el size que sí llega.
+
+### Regla de tamaños para todo el DS (aprobada por el dueño, 03-10-2026)
+
+Vale para todos los componentes que tienen `size` `large` / `xlarge`:
+
+- **Alto, padding y área táctil crecen en cada paso.**
+- **El texto sube un solo escalón: hasta `medium` va en 14 px; `large` y `xlarge` van en 16 px.**
+  Labels, botones, chips, tabs e ítems usan `--sui-type-label-md-*`; valores y placeholders de
+  campos, `--sui-type-paragraph-md-*`. El line-height acompaña (24). Siempre con token (un
+  fallback `var(--token, 16px)` está bien), nunca px sueltos.
+- **El texto secundario chico no cambia**: hints, contadores, sublabels y captions de 12.
+- **Los íconos se quedan en 20.**
+- Si la línea de 24 movería el alto medido, se baja el padding para que el alto total quede igual.
+- **Excepción (canon, dueño 04-10-2026):** `sui-badge` mantiene su escala propia 12 / 14 / 16
+  (14 en `large`, 16 en `xlarge`), y los chips cuya escala arranca en 12 (`sui-tag`,
+  `sui-status-badge`) la siguen.
+
+En large y xlarge el texto sube a 16 px (regla del 03-10-2026): el botón ya usa Label/Medium 16/24
+en esos dos tamaños.
+
+### Por dispositivo (D16)
+
+Fila `button` de la tabla D16 (dueño, 05-10-2026). Se toca, así que va por tipo de puntero además
+del ancho.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380 px) | `large` (48) | D16 pide `medium` con área tocable de 44; mientras el DS no estire el área de los `medium`, va `large` (interino) |
+| celular (380–767 px) | `large` (48) | |
+| tablet táctil (`pointer: coarse`) | `large` (48) | también se toca con el dedo: Apple pide 44 pt en el iPad |
+| computadora (`pointer: fine`) | `medium` (40) | también en tablas, filas y cabeceras; `small`, `xsmall` y `2xsmall` no se usan |
+
+Footer de modal: `large` en todos (D2). Ultrawide (≥ 1920 px): igual que la computadora, `medium`;
+el espacio extra va a ancho y columnas, no a botones más grandes.
+
+En master-pedidos: `size={bp.sizeControl()}`.
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| prop | atributo | tipo | default |
+|---|---|---|---|
+| `color` | `color` | `"error" \| "neutral" \| "primary"` | `'primary'` |
+| `disabled` | `disabled` | `boolean` | `false` |
+| `leftIcon` | `left-icon` | `null \| string` | `null` |
+| `onlyIcon` | `only-icon` | `boolean` | `false` |
+| `rightIcon` | `right-icon` | `null \| string` | `null` |
+| `size` | `size` | `"2xsmall" \| "large" \| "medium" \| "small" \| "xlarge" \| "xsmall"` | `'medium'` |
+| `type` | `type` | `"button" \| "reset" \| "submit"` | `'button'` |
+| `variant` | `variant` | `"filled" \| "ghost" \| "lighter" \| "stroke"` | `'filled'` |
+
+Eventos: ninguno.
+
+Slots: `start`, `(por defecto)`, `end`.
+
+### Diferencias con el SUI Angular
+
+Ninguna en nombres de props, eventos y valores.
+<!-- api:fin -->
+
+El clic se escucha con `click` nativo sobre el host. `leftIcon` y `rightIcon` reciben el nombre
+RemixIcon, sin el prefijo `ri-`.
+
+Slots: `<slot>` (el texto), `slot="start"`, `slot="end"` (íconos que no son RemixIcon, spinner).
+
+```ts
+// Exportado desde sui-button.ts; lo usan sui-modal-footer, sui-drawer-footer y el footer de filtros.
+interface SuiFooterButtonConfig {
+  label: string;
+  disabled?: boolean;
+  color?: 'primary' | 'error';   // solo lo lee el botón primario
+}
+```
+
+## Trampas
+
+- **No es un `<button>` nativo.** El host es `<sui-button role="button">`. `type="submit"`
+  funciona porque intercepta el clic y llama a `form.requestSubmit()` del `<form>` más cercano;
+  fuera de un `<form>` no hace nada.
+- **Teclado como un `<button>` nativo** (desde el 04-10-2026): Enter dispara el `click` al
+  bajar la tecla y Espacio al soltarla, una sola vez aunque se mantenga apretada, y Espacio ya no
+  scrollea la página. Antes, con `type="button"` (el default), ninguna de las dos hacía nada.
+- **El output no existe**: aquí es `click`. En `sui-link-button`, `sui-compact-button`,
+  `sui-fancy-button` y `sui-social-button` es `clicked`.
+- **La prop de peso se llama distinto en cada hermano:** `variant` aquí, `variantStyle` en
+  compact-button y social-button, `type` en fancy-button (donde el `type` HTML es `htmlType`).
+- **`primary` es naranja (`#fa7319`)**, no el azul del Figma de origen.
+- `onlyIcon` no define el ícono: va con `leftIcon` (o el slot `start`). Solo con `onlyIcon` el
+  botón sale vacío. Y **no hay input `ariaLabel`**: un botón de solo ícono queda sin nombre para
+  el lector de pantalla salvo que pongas `aria-label="…"` en el host a mano.
+- El ícono mide 20 px en todos los tamaños.
+- El radio es pill (999 px) en todos los tamaños, decisión del proyecto; el Figma de origen usa 8/10 px.
+- `disabled` usa `pointer-events: none` y colores con `!important`: no se puede pintar un
+  disabled propio desde afuera.
+- Ya trae el arreglo de iOS para el `:active` pegado (`touchstart`/`touchend`): no lo agregues.
+
+## Bien y mal
+
+**Botón de ícono en una cabecera**
+
+```html
+<!-- ❌ mal: small (36) no llega a 44 en el teléfono y en la computadora va medium (pages/notifications/notifications.html:50) -->
+<sui-button variant="stroke" color="neutral" size="small" only-icon left-icon="check-double-line"
+            aria-label="Marcar todas como leídas" onClick={() => markAllAsRead()} />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-button variant="stroke" color="neutral" size={bp.sizeControl()} only-icon left-icon="check-double-line"
+            aria-label="Marcar todas como leídas" onClick={() => markAllAsRead()} />
+```
+
+**El helper equivocado para el tamaño**
+
+```html
+<!-- ❌ mal: controlSize() es de checkbox/radio/switch y da large en la computadora (pages/customer/checkout/checkout.html:392) -->
+<sui-button size={bp.controlSize()} onClick={() => applyCoupon()}>Aplicar</sui-button>
+```
+
+```html
+<!-- ✅ bien: large en celular y tablet táctil, medium en la computadora -->
+<sui-button size={bp.sizeControl()} onClick={() => applyCoupon()}>Aplicar</sui-button>
+```
+
+**El botón que abre una confirmación de borrar**
+
+```html
+<!-- ❌ mal: filled error es para confirmar; este solo abre el modal (pages/empresa/about/about.html:46, igual en repartidor/about) -->
+<sui-button variant="filled" color="error" size={bp.sizeControl()} onClick={() => openDeleteModal()}>Eliminar mi cuenta</sui-button>
+```
+
+```html
+<!-- ✅ bien: stroke error abre; el filled error queda para el «Sí, eliminar» del modal -->
+<sui-button variant="stroke" color="error" size={bp.sizeControl()} onClick={() => openDeleteModal()}>Eliminar mi cuenta</sui-button>
+```
+
+## Ejemplo
+
+```html
+<!-- Par de acciones: secundario a la izquierda, primario a la derecha -->
+<sui-button variant="stroke" color="neutral" onClick={() => cancelar()}>Cancelar</sui-button>
+<sui-button onClick={() => guardar()}>Guardar</sui-button>
+
+<!-- Abre una acción destructiva (la confirmación usa filled error) -->
+<sui-button variant="stroke" color="error" left-icon="delete-bin-line" onClick={() => abrirConfirmacion()}>
+  Eliminar cuenta
+</sui-button>
+
+<!-- Solo ícono -->
+<sui-button variant="ghost" color="neutral" size={bp.sizeControl()} left-icon="pencil-line" only-icon
+            aria-label="Editar" onClick={() => editar()} />
+```

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

@@ -0,0 +1,265 @@
+---
+name: sui-button-group
+selector: sui-button-group
+resumen: Opciones pegadas en una fila que se prenden y se apagan, varias a la vez
+alternativas: [sui-segmented-control (cambiar de vista o elegir una sola opción), sui-checkbox (opciones que se suman dentro de un formulario largo), sui-tab-chips (filtros en chips que se pueden desplazar)]
+---
+
+# sui-button-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-button-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.
+>
+> **La API de aquí no es igual a la de Angular.** Lo que el texto nombre y figure en «Diferencias con
+> el SUI Angular» (dentro de API) aquí no existe.
+
+Story: [Atoms/Button/Button Group](https://sui-design-system.web.app/?path=/docs/atoms-button-button-group--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Hoy no se usa** (0 usos en la app).
+
+**Úsalo** para elegir **varias** opciones cortas que se combinan y se ven juntas: los días de
+atención de un local (L M M J V S D), filtros que se suman en una barra.
+
+**No lo uses** para:
+
+- **Cambiar de vista** (lista / mapa, día / semana / mes) o elegir **una sola** opción:
+  `sui-segmented-control`.
+- **Acciones** (guardar, exportar): son `sui-button` sueltos; el grupo marca qué está prendido,
+  no dispara acciones.
+- **Opciones largas** o que no entran en una fila del teléfono: `sui-checkbox` en lista.
+
+## Qué variante usar
+
+> **La guía del DS no dice cuándo usarlo**: lo define como «botones pegados en una línea
+> horizontal». **Su ejemplo es «Grid view / List view / Gallery view», o sea cambiar de vista, y
+> el dueño decidió lo contrario el 03-10-2026: cambiar de vista va con `sui-segmented-control`.**
+> El button-group queda para elegir varias opciones a la vez. 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`: **0** button-groups, sin contar
+> prototipos ni vitrinas.
+
+### Lo que sí dice la guía del DS
+
+- **Para qué es**: un conjunto de botones pegados en una línea horizontal.
+- **Tamaños**: `small` (default), `xsmall` y el más chico (`xxsmall` en la guía, `2xsmall` en SUI).
+- **La selección no es del componente**: la guía la arma con un toggle group aparte. En SUI viene
+  incluida (`multi`, `value` + `valueChange`, `change`) y es extensión de SUI.
+
+### `multi`
+
+| multi | cuándo | ejemplo de copy | fuente |
+|---|---|---|---|
+| `true` | Elegir días u opciones que se combinan. | L M M J V S D (días de atención) | canon (aprobado por el dueño, 03-10-2026) |
+| `false` (default) | No: elegir una sola o cambiar de vista va con `sui-segmented-control`. | — | cambiar de vista: canon (aprobado por el dueño, 03-10-2026) · elegir una sola: canon (decisión del dueño 04-10-2026: 2–4 opciones excluyentes → `sui-segmented-control`; más opciones → `sui-tab-chips`) |
+
+### `size`
+
+| size | alto | cuándo | fuente |
+|---|---|---|---|
+| `large` | 48 | Mobile: los días del horario y las opciones de un formulario, para tocar con el dedo. Label/Medium (16/24), ícono 20, radius 12. | canon (aprobado por el dueño, 03-10-2026) · extensión SUI |
+| `medium` | 40 | Web: lo normal (días del horario, formularios, filtros, tablas). Mobile: cuando la fila es larga (los 7 días) y `large` no entra en 360 px. Label/Small (14/20), ícono 20, radius 10. | alto y tipografía: canon (aprobado por el dueño, 03-10-2026), extensión SUI · web: canon (dueño, 05-10-2026, D16) · mobile con la fila larga: propuesta |
+| `small` (default) | 36 | No usar: es chico. En web va `medium`. | escala según la guía del DS · no usarlo: canon (dueño, 05-10-2026, D16), reemplaza el «cuándo» del bloque B1 |
+| `xsmall` | 32 | No usar: es chico. Las barras de filtros van en `medium`. | escala según la guía del DS · no usarlo: canon (dueño, 05-10-2026, D16) |
+| `2xsmall` | 24 | No usar: es chico. En una tabla o una card densa va `medium`. | escala según la guía del DS · no usarlo: canon (dueño, 05-10-2026, D16), reemplaza el «cuándo» del bloque B1 |
+
+### `items` (lo que lleva cada opción)
+
+| contenido | cuándo | fuente |
+|---|---|---|
+| solo `label` | Lo normal: textos de una a tres letras o una palabra («L», «Delivery»). | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `leftIcon` + `label` | Cuando el ícono ayuda a distinguir opciones parecidas (moto / bici / auto). | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| solo ícono (`leftIcon`, sin `label`) | Desktop, opciones universales; **`ariaLabel` obligatorio** en cada una. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `disabled: true` en una opción | La opción existe pero hoy no se puede elegir (un día que el local no atiende por regla). | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| cuántas | De 2 a 7. Con más, no entra en el ancho del teléfono: lista de `sui-checkbox`. | propuesta (el Figma dibuja de 2 a 6; los días son 7) |
+
+### `value`, `ariaLabel`, `change`
+
+| prop | cuándo | fuente |
+|---|---|---|
+| `value` + `valueChange` | Con `multi`, un `string[]` con los `value` prendidos. | según el código |
+| `ariaLabel` | Siempre: dice qué se elige («Días de atención»). El host es `role="group"`. | según el código |
+| `change` | Cuando hay que reaccionar al cambio (guardar, filtrar); si alcanza con el `model`, no hace falta. | según el código |
+
+## Tamaño en mobile y en web
+
+En mobile se toca con el dedo: el área táctil tiene que medir **44 px o más**. En la tablet
+(`pointer: coarse`) va igual que en el celular, porque también se toca; en la computadora
+(`pointer: fine`), `medium`; en el celular chico (< 380 px), `medium` a la vista sin bajar el área de 44.
+Nada en `small` ni `xsmall` (canon, dueño, 05-10-2026, D16; reemplaza al «tamaño por plataforma» del
+03-10-2026, que bajaba la web a `small`). La app lo resuelve con `BreakpointsService`
+(`src/app/services/breakpoints.service.ts`): la señal `bp.tactil()` (celular por ancho o pantalla
+táctil) ya incluye la tablet; ver «Por dispositivo (D16)» abajo. Medido el 04-10-2026 en `master-pedidos`: 166 `size`
+con `bp` (142 `large`/`medium`, 22 `large`/`small`, 2 `medium`/`xsmall`); los 24 que bajan de `medium` se migran.
+
+Desde el 03-10-2026 el grupo tiene `large` (48) y `medium` (40), la misma escala de `sui-button`,
+así que el par es el de toda la app.
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| días del horario, opciones en un formulario | `large` (48) | `medium` (40) | mobile: canon (aprobado por el dueño, 03-10-2026) · web: canon (dueño, 05-10-2026, D16), antes `small` |
+| fila larga que no entra a 48 en 360 px (los 7 días con texto) | `medium` (40) | `medium` (40) | mobile: propuesta, falta aprobación (espera P18) · web: canon (dueño, 05-10-2026, D16) |
+| barra de filtros | `large` | `medium` (40) | web: canon (dueño, 05-10-2026, D16) · mobile: propuesta, falta aprobación |
+| dentro de una tabla o una card densa | no va en mobile | `medium` (40) | no va en mobile: canon (aprobado por el dueño, 05-10-2026, bloque B7) · web: canon (dueño, 05-10-2026, D16), antes `2xsmall` |
+
+```html
+<sui-button-group items={dias} multi value={diasAbiertos} onValueChange={(e) => (diasAbiertos = e.detail)} aria-label="Días de atención"
+                  size={bp.tactil() ? 'large' : 'medium'} />
+```
+
+En mobile, cada opción va ancha (los 7 días repartidos en todo el ancho, no apretados a la
+izquierda) — propuesta, falta aprobación. **El componente no lo hace solo**: el host es
+`inline-flex` y no hay un input de ancho completo, así que hoy lo tendría que resolver quien lo usa
+con CSS. Si las opciones no entran ni en `medium`, va una lista de `sui-checkbox`.
+
+### Por dispositivo (D16)
+
+Fila `button-group` (+ `-item`) de la tabla D16 (dueño, 05-10-2026). Se toca, así que va por tipo de
+puntero además del ancho.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380 px) | `large` (48) | D16 pide `medium` con área tocable de 44; mientras el DS no estire el área de los `medium`, va `large` (interino) |
+| celular (380–767 px) | `large` (48) | `medium` (40) si los 7 días no entran: **pendiente (P18)**, falta decidir entre `stretch`, lista de `checkbox-label` o bajar el tope |
+| tablet táctil (`pointer: coarse`) | `large` (48) | también se toca con el dedo: Apple pide 44 pt en el iPad |
+| computadora (`pointer: fine`) | `medium` (40) | también en tablas y cards densas |
+
+Ultrawide (≥ 1920 px): igual que la computadora, `medium`; el espacio extra va a ancho y columnas,
+no a controles más grandes.
+
+En master-pedidos: `size={bp.tactil() ? 'large' : 'medium'}` (no hay helper propio; da el mismo
+par que `bp.sizeControl()`). `bp.isMobile()` solo no sirve: deja la tablet en `medium`.
+
+## «No usar»: por qué no hoy y cuándo sí
+
+Nada se borra del DS. Lo marcado «no usar» no tiene caso en la app de hoy; si un flujo nuevo cae
+en la columna de la derecha, se usa (aprobado por el dueño, 03-10-2026).
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| `sui-button-group` (0 usos) | hoy no hay opciones combinables pegadas | días del horario del local (L M M J V S D) o filtros que se suman |
+| `multi` en `false` (una sola opción) | cambiar de vista y elegir una sola van con `sui-segmented-control` | una barra de herramientas de desktop donde el resto ya son button-groups y una opción es excluyente |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| prop | atributo | tipo | default |
+|---|---|---|---|
+| `ariaLabel` | `aria-label` | `string` | `''` |
+| `items` | — (solo por propiedad JS) | `readonly SuiButtonGroupEntry[]` | `[]` |
+| `multi` | `multi` | `boolean` | `false` |
+| `size` | `size` | `"2xsmall" \| "large" \| "medium" \| "small" \| "xsmall"` | `'small'` |
+| `value` | `value` | `string \| string[]` | `''` |
+
+| evento | `event.detail` |
+|---|---|
+| `suiChange` | `string \| string[]` |
+| `valueChange` | `string \| string[]` |
+
+### Diferencias con el SUI Angular
+
+- **Eventos de Angular que aquí no existen:** `change`
+- **Eventos solo de aquí:** `suiChange`
+<!-- api:fin -->
+
+```ts
+interface SuiButtonGroupEntry {
+  value: string;        // único: es lo que se guarda en value
+  label?: string;
+  leftIcon?: string;    // RemixIcon, sin el prefijo ri-
+  rightIcon?: string;
+  disabled?: boolean;
+  ariaLabel?: string;   // obligatorio en la práctica si no hay label
+}
+```
+
+## Trampas
+
+- **En una sola opción (`multi` en `false`) no se puede apagar** la que está prendida: tocarla otra
+  vez no hace nada. Es el comportamiento de un segmented control, otra razón para usar ese.
+- **`value` cambia de tipo con `multi`**: `string` en una sola, `string[]` en varias, y el
+  `model` es `string | string[]`. El signal que se enlaza con `value` + `valueChange` tiene que ser
+  `signal<string | string[]>` (con `signal<string[]>` no compila); al leerlo, estrecha con
+  `Array.isArray`. El default es `''`: con `multi`, arráncalo en `[]` o en un arreglo.
+- **Dos opciones con el mismo texto** (los dos «M» de martes y miércoles) se distinguen solo por
+  `value`; ponles `ariaLabel` con el nombre completo.
+- **El output es `change`**, no `clicked` ni `valueChange` a mano: `value` + `valueChange` ya usa el
+  `valueChange` del `model`.
+- Las opciones van por `items`, no proyectando `sui-button-group-item` adentro: el grupo es quien
+  pone las puntas redondeadas y junta los bordes.
+- El estado prendido es sutil (fondo gris y texto más oscuro), no naranja. En un formulario,
+  acompáñalo con un texto que diga cuántas hay elegidas.
+- Ya trae el arreglo de iOS para el `:active` pegado: no lo agregues.
+
+## Bien y mal
+
+Hoy no hay usos en la app: los pares salen de «Cuándo no» y de «Trampas».
+
+**Cambiar de vista**
+
+```html
+<!-- ❌ mal: elegir una sola vista no es un button-group; con multi en false ni se puede apagar la prendida -->
+<sui-button-group items={vistas} value={vista} onValueChange={(e) => (vista = e.detail)} aria-label="Vista" size="medium" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-segmented-control tabs={vistas} active={vista} onActiveChange={(e) => (vista = e.detail)} aria-label="Vista"
+                       size={bp.tactil() ? '2xlarge' : 'medium'} />
+```
+
+**Opciones proyectadas en vez de `items`**
+
+```html
+<!-- ❌ mal: el grupo no tiene ng-content (los ítems no se pintan) e items es obligatorio -->
+<sui-button-group aria-label="Días de atención">
+  <sui-button-group-item label="L" />
+  <sui-button-group-item label="M" />
+</sui-button-group>
+```
+
+```html
+<!-- ✅ bien: las opciones van en items, con ariaLabel en los dos «M» -->
+<sui-button-group items={dias} multi value={diasAbiertos} onValueChange={(e) => (diasAbiertos = e.detail)} aria-label="Días de atención"
+                  size={bp.tactil() ? 'large' : 'medium'} />
+```
+
+**Sin `size`**
+
+```html
+<!-- ❌ mal: sin size queda en small (36): chico en la computadora y sin los 44 del dedo en el teléfono -->
+<sui-button-group items={dias} multi value={diasAbiertos} onValueChange={(e) => (diasAbiertos = e.detail)} aria-label="Días de atención" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-button-group items={dias} multi value={diasAbiertos} onValueChange={(e) => (diasAbiertos = e.detail)} aria-label="Días de atención"
+                  size={bp.tactil() ? 'large' : 'medium'} />
+```
+
+## Ejemplo
+
+```html
+<!-- Días de atención del local -->
+<sui-button-group items={dias} multi value={diasAbiertos} onValueChange={(e) => (diasAbiertos = e.detail)} aria-label="Días de atención"
+                  size={bp.tactil() ? 'large' : 'medium'} />
+```
+
+```ts
+readonly dias: SuiButtonGroupEntry[] = [
+  { value: 'lu', label: 'L', ariaLabel: 'Lunes' }, { value: 'ma', label: 'M', ariaLabel: 'Martes' },
+  { value: 'mi', label: 'M', ariaLabel: 'Miércoles' }, { value: 'ju', label: 'J', ariaLabel: 'Jueves' },
+  { value: 'vi', label: 'V', ariaLabel: 'Viernes' }, { value: 'sa', label: 'S', ariaLabel: 'Sábado' },
+  { value: 'do', label: 'D', ariaLabel: 'Domingo' },
+];
+readonly diasAbiertos = signal<string | string[]>(['lu', 'ma', 'mi', 'ju', 'vi']);
+```