@ajuarezso/sui-design-system 0.19.0 → 0.20.0

package/docs/sui-brand-logo/README.md

@@ -0,0 +1,143 @@
+---
+name: sui-brand-logo
+selector: sui-brand-logo
+resumen: El logo oficial de otra marca (WhatsApp, Google, Apple, Instagram…) en su color, sin tocarlo
+alternativas: [sui-icon (el mismo logo como ícono monocromo de una línea), sui-logo (el logo de Master Pedidos), sui-social-button (botón de entrar con Google o Apple)]
+---
+
+# sui-brand-logo
+
+Story: [Atoms/Brand Logo](https://sui-design-system.web.app/?path=/docs/atoms-brand-logo--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** cuando **la marca es el contenido**: «Escríbenos por WhatsApp», los logos de redes de
+un negocio, una tarjeta de contacto. Va con su color oficial y no se tiñe.
+
+**No lo uses** para:
+
+- Un ícono más dentro de un botón o de una fila de íconos monocromos: ahí va `sui-icon`
+  (`whatsapp-line`, `apple-fill`), que toma el color del texto.
+- El botón de entrar con Google o Apple: `sui-social-button`, que ya lo trae adentro.
+- El logo de Master Pedidos: `sui-logo`.
+
+Regla corta: **la marca es lo que se muestra → brand-logo · es un ícono más → sui-icon.**
+
+## Qué variante usar
+
+> **La guía del DS no tiene página para este componente.** Todo es **propuesta, falta
+> aprobación**.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos directos**. Lo usan por dentro
+> `sui-content-card` (`type="brand"`), `sui-social-button`, `sui-content-label`,
+> `sui-dropdown-item` y `sui-radio-card`. Además hay 9 logos de marca hechos con `sui-icon`
+> (`whatsapp-line`, `apple-fill`), que están bien donde son un ícono más.
+
+### `company`
+
+| valor | cuándo | fuente |
+|---|---|---|
+| `whatsapp` | Soporte y contacto con el negocio. | propuesta |
+| `google`, `apple` | Entrar con esa cuenta (vía `sui-social-button`). | propuesta |
+| `instagram`, `facebook` | Las redes del negocio o de la app. | propuesta |
+| las otras 23 (`adobe`, `notion`, `slack`, `stripe`…) | No usar hoy. | propuesta |
+
+**No hay TikTok** en el catálogo (son 28 marcas), aunque la app hace publicidad ahí.
+
+### `variant`
+
+| valor | cuándo | fuente |
+|---|---|---|
+| `original` (default) | El normal: sobre fondo claro, con su color oficial. | propuesta |
+| `white` | Sobre fondo oscuro o sobre foto. | propuesta |
+| `black` | No usar hoy. | propuesta |
+
+### `size`
+
+| valor | px | cuándo | fuente |
+|---|---|---|---|
+| `xs` | 16 | Dentro de un texto o de un tag. | propuesta |
+| `sm` | 20 | Dentro de un botón (lo usa `sui-social-button`). | propuesta |
+| `md` (default) | 24 | Fila de una lista. | propuesta |
+| `lg` | 32 | Tarjeta de contacto (el tamaño del Figma). | propuesta |
+| `xl` | 40 | Tarjeta grande. | propuesta |
+| `2xl` | 48 | Lo pide `sui-content-label` en tamaño grande. | propuesta |
+
+### `href`, `target`, `rel`, `disabled`, `ariaLabel`
+
+| input | cuándo | fuente |
+|---|---|---|
+| `href` + `target="_blank"` | El logo lleva a la red social. `rel` ya viene en `noopener noreferrer`. | propuesta |
+| `ariaLabel` | Con `href`, siempre: «Síguenos en Instagram». Sin `href`, el default («Instagram logo») alcanza. | propuesta |
+| `disabled` | No usar hoy. | propuesta |
+
+Usos de hoy que rompen la regla: **0**.
+
+## Tamaño en mobile y en web
+
+En mobile se lee y se toca con el dedo, así que va más grande; 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) va directo el valor de mobile. Todo es **propuesta**.
+
+| uso | mobile | web |
+|---|---|---|
+| tarjeta de contacto, fila | `lg` (32) | `md` (24) |
+| como link (con `href`, se toca) | `2xl` (48) | `lg` (32) |
+
+```html
+<sui-brand-logo company="instagram" [size]="bp.isMobile() ? '2xl' : 'lg'" [href]="url" target="_blank"
+                ariaLabel="Síguenos en Instagram" />
+```
+
+Con `href` el logo **es** el área táctil: en mobile tiene que medir 44 px o más, y el único
+tamaño que llega es `2xl` (48). Si se quiere un logo de 32 px tocable, el link va en un
+contenedor de 44 px.
+
+## «No usar»: por qué no hoy y cuándo sí
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| las 23 marcas ajenas | la app no se relaciona con Adobe, Notion, Slack… | una integración real (pagos con Stripe o PayPal) |
+| `variant` `black` | no hay un fondo donde vaya | una fila de «nos encuentras en» o de aliados donde el color distrae |
+| `disabled` | un logo apagado no explica nada | una integración que el local todavía no conectó, con el motivo al lado |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `company` | `SuiBrandLogoCompany` | — (requerido) |
+| `variant` | `'original' \| 'black' \| 'white'` | `'original'` |
+| `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'` | `'md'` |
+| `href` | `string \| null` | `null` |
+| `target` | `string \| null` | `null` |
+| `rel` | `string \| null` | `'noopener noreferrer'` |
+| `disabled` | `boolean` | `false` |
+| `ariaLabel` | `string \| null` | `null` |
+
+Outputs: ninguno.
+<!-- api:fin -->
+
+## Trampas
+
+- **Los SVG no vienen en el paquete npm.** Se piden a `/assets/brand/brand-logos/<marca>-<variant>.svg`:
+  la app tiene que tener la carpeta copiada en `src/assets/brand/brand-logos/` (hoy la tiene, 84
+  archivos). Si falta, sale una imagen rota.
+- **No se tiñe**: es un `<img>`. Si necesitas otro color, es `sui-icon`.
+- **`variant` es el color**, no el tamaño ni la forma.
+- Con `href` y `disabled` a la vez, no se vuelve link.
+- El `aria-label` por defecto está en inglés («WhatsApp logo»): pasa `ariaLabel` en español.
+
+## Ejemplo
+
+```html
+<!-- Tarjeta de soporte -->
+<sui-brand-logo company="whatsapp" size="lg" />
+
+<!-- Red del negocio, como link -->
+<sui-brand-logo company="instagram" size="md" [href]="tenant.instagramUrl" target="_blank"
+                ariaLabel="Síguenos en Instagram" />
+```

package/docs/sui-button/README.md

@@ -0,0 +1,192 @@
+---
+name: sui-button
+selector: sui-button
+resumen: Botón base para que la persona dispare una acción
+alternativas: [sui-link-button (acción que se lee como texto), sui-compact-button (ícono de 20-28 px en filas y barras), sui-fancy-button (el CTA héroe), sui-social-button (entrar con Google/Apple), sui-button-group (opciones que se ven como un solo control)]
+---
+
+# sui-button
+
+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` o `sui-button-group`.
+- Mostrar carga: **no tiene `loading`**. Pon un spinner en `[data-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. Así que la tabla de variantes sigue siendo **propuesta, falta
+> aprobación**, salvo lo que ya es canon de SUI por `sui-modal-footer`.
+>
+> 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 es un link, no un `sui-button`** (ver `sui-alert`). Hoy hay 5
+  `sui-button` proyectados en alerts.
+
+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:204` («Continuar») | ya es canon (sui-modal-footer) |
+| `stroke` `neutral` | Toda acción secundaria: Cancelar, Volver, Editar, Ver detalle. Va a la izquierda del primario. | `pages/orders/orders.html:320` («Encargarme yo») · `pages/envios/envios.html:175` («Ver seguimiento») | ya es canon (sui-modal-footer) |
+| `filled` `error` | **Confirmar** algo destructivo: el último paso, dentro de la confirmación. Nunca el botón que abre la confirmación. | `pages/customer/order-history/order-history.html:132` («Sí», confirma cancelar) | canon (aprobado por el dueño, 03-10-2026) |
+| `stroke` `error` | **Abrir** una acción destructiva (lleva a la confirmación) o el «Rechazar» de un par Aprobar/Rechazar. | `pages/customer/about/about.html:76` («Eliminar cuenta») · `pages/super-admin/master-approvals/master-approvals.html:99` («Rechazar») | canon (aprobado por el dueño, 03-10-2026) |
+| `ghost` `neutral` / `ghost` `error` | Acción terciaria sin caja: íconos de editar/borrar en filas, «Cerrar», acciones de baja jerarquía en zonas densas. | `pages/super-admin/master-gastos/master-gastos.html:80` (editar) · `pages/customer/cart/cart.html:107` («Vaciar carrito») | canon (aprobado por el dueño, 03-10-2026) |
+| `filled` `neutral` | Salir a otra app: WhatsApp, abrir el mapa. Es la práctica de hoy (21 usos, 13 de WhatsApp), no un principio: **falta criterio**. | `pages/driver/driver-order-detail/driver-order-detail.html:515` («WhatsApp») · `:567` («Abrir mapa») | canon (aprobado por el dueño, 03-10-2026) |
+| `ghost` `primary` | «Ver todas», «Reporte», «Detalles» en la cabecera de una card. **A discutir**: se pisa con `sui-link-button`, que según la guía es la acción que se lee como texto. | `pages/overview/components/overview-sales/overview-sales.html:5` | a discutir |
+| `stroke` `primary` | No usar. El secundario siempre es neutral. | — | canon (aprobado por el dueño, 03-10-2026) |
+| `lighter` (cualquier color) | No usar en botones nuevos. En `neutral` su fondo (`bg-weak-50`) es **el mismo que el de `disabled`**: se lee como apagado. Lo existente pasa a `stroke` (secundaria) o `ghost` (terciaria). | — | canon (aprobado por el dueño, 03-10-2026) |
+
+**Usos de hoy que romperían la propuesta** (sin prototipos):
+
+- **13 `lighter` → `stroke` o `ghost`** (7 `neutral`, 5 `error`, 1 `primary`). Ejemplos:
+  `pages/mi-negocio/mi-negocio.html:133` («Cambiar plan»), `pages/customer/cart/cart.html:33`
+  («Quitar no disponibles»), `pages/customer/order-tracking/order-tracking.html:737` («Cancelar
+  pedido», `lighter error` → `stroke error`). 4 de los 13 son los que viven dentro de un alert
+  (`pages/overview/overview.html:41`, `pages/mi-negocio/mi-negocio.html:381`, `cart.html:33`,
+  `pages/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:714`
+  («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 de hoy: 123 `large`, 91 `small`, 60 `medium`, 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) | CTA en desktop y formularios. | default según la guía del DS; el «cuándo» es propuesta |
+| `small` (36) / `xsmall` (32) | Acciones dentro de cards, filas y cabeceras de sección. | escala según la guía del DS; el «cuándo» es propuesta |
+| `2xsmall` (28) | Acciones de ícono en tablas y filas densas. Si el espacio es de verdad chico, mirar antes `sui-compact-button`. | escala según la guía del DS; el «cuándo» es propuesta |
+| `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 ya es `[size]="bp.isMobile() ? 'large' : 'medium'"` (o
+`bp.controlSize()`).
+
+## «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 dentro de un alert o banner teñido, donde `stroke` se ve pesado |
+| `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 |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `variant` | `'filled' \| 'stroke' \| 'lighter' \| 'ghost'` | `'filled'` |
+| `color` | `'primary' \| 'neutral' \| 'error'` | `'primary'` |
+| `size` | `'2xsmall' \| 'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge'` | `'medium'` |
+| `onlyIcon` | `boolean` | `false` |
+| `disabled` | `boolean` | `false` |
+| `leftIcon` | `string \| null` | `null` |
+| `rightIcon` | `string \| null` | `null` |
+| `type` | `'button' \| 'submit' \| 'reset'` | `'button'` |
+
+Outputs: ninguno.
+<!-- api:fin -->
+
+El clic se escucha con `(click)` nativo sobre el host. `leftIcon` y `rightIcon` reciben el nombre
+RemixIcon, sin el prefijo `ri-`.
+
+Slots: `<ng-content>` (el texto), `[data-slot=start]`, `[data-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.
+- **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.
+
+## Ejemplo
+
+```html
+<!-- Par de acciones: secundario a la izquierda, primario a la derecha -->
+<sui-button variant="stroke" color="neutral" (click)="cancelar()">Cancelar</sui-button>
+<sui-button (click)="guardar()">Guardar</sui-button>
+
+<!-- Abre una acción destructiva (la confirmación usa filled error) -->
+<sui-button variant="stroke" color="error" leftIcon="delete-bin-line" (click)="abrirConfirmacion()">
+  Eliminar cuenta
+</sui-button>
+
+<!-- Solo ícono -->
+<sui-button variant="ghost" color="neutral" size="2xsmall" leftIcon="pencil-line" [onlyIcon]="true"
+            aria-label="Editar" (click)="editar()" />
+```

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

@@ -0,0 +1,178 @@
+---
+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
+
+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)]`, `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 en general: propuesta |
+
+### `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 | 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 · cuándo: propuesta |
+| `small` (default) | 36 | Web: los días del horario, formularios. | escala según la guía del DS · cuándo: propuesta |
+| `xsmall` | 32 | Barras de filtros en desktop. | escala según la guía del DS · cuándo: propuesta |
+| `2xsmall` | 24 | Solo desktop, dentro de una tabla o una card densa. Muy chico para el dedo. | escala según la guía del DS · cuándo: propuesta |
+
+### `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»). | propuesta |
+| `leftIcon` + `label` | Cuando el ícono ayuda a distinguir opciones parecidas (moto / bici / auto). | propuesta |
+| solo ícono (`leftIcon`, sin `label`) | Desktop, opciones universales; **`ariaLabel` obligatorio** en cada una. | propuesta |
+| `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). | propuesta |
+| 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)]` | Con `multi`, un `string[]` con los `value` prendidos. | propuesta |
+| `ariaLabel` | Siempre: dice qué se elige («Días de atención»). El host es `role="group"`. | propuesta |
+| `(change)` | Cuando hay que reaccionar al cambio (guardar, filtrar); si alcanza con el `model`, no hace falta. | propuesta |
+
+## 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 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.
+
+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) | `small` (36) | canon (aprobado por el dueño, 03-10-2026) |
+| fila larga que no entra a 48 en 360 px (los 7 días con texto) | `medium` (40) | `small` (36) | propuesta, falta aprobación |
+| barra de filtros | `large` | `xsmall` (32) | propuesta, falta aprobación |
+| dentro de una tabla o una card densa | no va en mobile | `2xsmall` (24) | propuesta |
+
+```html
+<sui-button-group [items]="dias" [multi]="true" [(value)]="diasAbiertos" ariaLabel="Días de atención"
+                  [size]="bp.isMobile() ? 'large' : 'small'" />
+```
+
+En mobile, cada opción tiene que ser ancha (los 7 días repartidos en todo el ancho, no apretados a
+la izquierda). Si las opciones no entran ni en `medium`, va una lista de `sui-checkbox`.
+
+## «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` -->
+
+| input | tipo | default |
+|---|---|---|
+| `items` | `readonly SuiButtonGroupEntry[]` | — (requerido) |
+| `size` | `'small' \| 'xsmall' \| '2xsmall' \| 'medium' \| 'large'` | `'small'` |
+| `multi` | `boolean` | `false` |
+| `value` · model, `[(value)]` | `string \| string[]` | `''` |
+| `ariaLabel` | `string` | `''` |
+
+| output | payload |
+|---|---|
+| `change` | `string \| string[]` |
+<!-- 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)]` 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)]` 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.
+
+## Ejemplo
+
+```html
+<!-- Días de atención del local -->
+<sui-button-group [items]="dias" [multi]="true" [(value)]="diasAbiertos" ariaLabel="Días de atención" />
+```
+
+```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']);
+```

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

@@ -0,0 +1,102 @@
+---
+name: sui-button-group-item
+selector: sui-button-group-item
+resumen: Cada opción de un sui-button-group; no se usa suelto
+alternativas: [sui-button-group (el grupo, que ya pinta sus ítems desde items[]), sui-segmented-control (elegir una sola opción), sui-switch (prender o apagar algo suelto)]
+---
+
+# sui-button-group-item
+
+Story: [Atoms/Button/Button Group Item](https://sui-design-system.web.app/?path=/docs/atoms-button-button-group-item--docs)
+
+## Cuándo usarlo / cuándo no
+
+**No lo uses directo.** `sui-button-group` lo pinta solo a partir de su `items[]`: el grupo le pasa
+`size`, `active` y `disabled`, y es quien le redondea las puntas y le junta los bordes. Las reglas de
+uso (cuándo un button-group, qué tamaño, qué lleva cada opción) están en el README de
+`sui-button-group`.
+
+**Suelto** mantiene su propio borde y se ve como un botón de alternar aislado. Para prender o
+apagar algo suelto está `sui-switch`; para una acción, `sui-button`.
+
+## Qué variante usar
+
+> **La guía del DS lo trata como parte del grupo** («ButtonGroup.Item»), sin props propias más
+> que la de componer. Hoy hay **0** usos directos en la app, ni del grupo.
+
+| prop | valor | cuándo | fuente |
+|---|---|---|---|
+| `size` | `large` · `medium` · `small` · `xsmall` · `2xsmall` | El mismo del grupo; lo pone el grupo. Altos 48 · 40 · 36 · 32 · 24. | `small` a `2xsmall`: escala según la guía del DS · `large` y `medium`: canon (aprobado por el dueño, 03-10-2026), extensión SUI |
+| `active` | `true` | La opción está elegida; lo calcula el grupo desde `value`. | propuesta |
+| `disabled` | `true` | La opción existe pero hoy no se puede elegir; viene de `disabled` en la entrada de `items`. | propuesta |
+| `label` | texto | Una a tres letras o una palabra. | propuesta |
+| `leftIcon` / `rightIcon` | RemixIcon | Ícono a la izquierda si ayuda a distinguir; a la derecha, sin caso. Sin `label` queda cuadrado. | propuesta |
+| `ariaLabel` | texto | Obligatorio si no hay `label`, o si dos opciones tienen el mismo texto. | propuesta |
+
+## 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 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.
+
+El tamaño lo pone el grupo: es el mismo `size` de `sui-button-group` (ver su README).
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| dentro de un grupo | `large` (48) · `medium` (40) si la fila no entra | `small` (36) | canon (aprobado por el dueño, 03-10-2026) |
+| suelto (barra de herramientas) | no va en mobile | `xsmall` o `2xsmall` | propuesta |
+
+## «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-item` suelto | el grupo ya lo pinta desde `items[]`, y suelto se lee como un switch mal dibujado | un botón de alternar en una barra de herramientas de desktop (negrita en un editor de texto) |
+| `rightIcon` | en un grupo de opciones cortas, un ícono a la derecha no agrega nada | una opción que abre un menú (con `arrow-down-s-line`) |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `label` | `string` | `''` |
+| `leftIcon` | `string` | `''` |
+| `rightIcon` | `string` | `''` |
+| `size` | `'small' \| 'xsmall' \| '2xsmall' \| 'medium' \| 'large'` | `'small'` |
+| `active` | `boolean` | `false` |
+| `disabled` | `boolean` | `false` |
+| `ariaLabel` | `string` | `''` |
+
+| output | payload |
+|---|---|
+| `clicked` | `void` |
+<!-- api:fin -->
+
+## Trampas
+
+- **El output es `(clicked)` y no lleva payload** (`void`), a diferencia de los otros botones, que
+  mandan el `MouseEvent`.
+- **`active` no se prende solo al tocarlo**: el ítem solo avisa; quien lo usa (normalmente el grupo)
+  tiene que cambiar `active`.
+- Los íconos miden 20 en `small` y `xsmall`, y 16 en `2xsmall`.
+- Suelto no recibe las puntas redondeadas del grupo: esas reglas dependen de los atributos
+  `data-sui-first` y `data-sui-last` que pone `sui-button-group`.
+- Es un `<button type="button">` con `aria-pressed`: el lector de pantalla lo anuncia como botón de
+  alternar.
+
+## Ejemplo
+
+```html
+<!-- Lo normal: no se escribe a mano, lo arma el grupo -->
+<sui-button-group [items]="dias" [multi]="true" [(value)]="diasAbiertos" ariaLabel="Días de atención" />
+
+<!-- Suelto, solo en el caso de «cuándo sí» -->
+<sui-button-group-item leftIcon="bold" ariaLabel="Negrita" size="xsmall"
+                       [active]="negrita()" (clicked)="negrita.set(!negrita())" />
+```