@ajuarezso/sui-design-system 0.19.0 → 0.21.0

package/docs/sui-button/README.md

@@ -0,0 +1,209 @@
+---
+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 |
+
+## Tamaño en mobile y en web
+
+En mobile se toca con el dedo: 40 px como mínimo y 48 en la acción principal. En web, 28–40.
+
+| 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 | `medium` (40) | `small` (36) / `xsmall` (32) | canon (aprobado por el dueño, 03-10-2026) |
+| acción en una tabla densa | — (no hay tablas en mobile) | `2xsmall` (28) | canon (aprobado por el dueño, 03-10-2026) |
+| CTA de landing | `xlarge` (52) | `large` (48) | propuesta, falta aprobación |
+
+Patrón (la app ya lo usa en 27 lugares; `bp` = `BreakpointsService`, mobile hasta 767 px):
+
+```html
+<sui-button [size]="bp.isMobile() ? 'large' : 'medium'" …/>
+```
+
+## 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())" />
+```

package/docs/sui-card/README.md

@@ -0,0 +1,168 @@
+---
+name: sui-card
+selector: sui-card
+resumen: Superficie con borde, radio y sombra que agrupa contenido, con slots de header, cuerpo, media y footer
+alternativas: [sui-content-card (una fila «cara + nombre + detalle» dentro de su cajita), sui-radio-card / sui-checkbox-card / sui-switch-card (la card ES la opción que se elige), sui-product-card (un producto de la carta), sui-store-card (un local en un listado del cliente), sui-modal-sheet (contenido encima de la pantalla)]
+---
+
+# sui-card
+
+Story: [Molecules/Card/Card](https://sui-design-system.web.app/?path=/docs/molecules-card-card--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** como la superficie de una sección o de un ítem: un bloque de KPIs, un gráfico con su
+título, una fila de lista que se toca, un formulario corto dentro de una página.
+
+**No lo uses** para:
+
+- Una fila «foto o ícono + nombre + detalle»: eso es `sui-content-card` (o `sui-content-label`
+  dentro de una card que ya existe).
+- Una opción que se elige: `sui-radio-card`, `sui-checkbox-card` o `sui-switch-card` ya traen la
+  card, el estado elegido y el área táctil.
+- Un producto de la carta o un local del listado del cliente: `sui-product-card` y
+  `sui-store-card`.
+- Contenido que aparece encima de la pantalla: `sui-modal` / `sui-modal-sheet`.
+
+Regla corta: **agrupa contenido → card · es una fila con cara → content-card · se elige → card de
+selección.**
+
+## Qué variante usar
+
+> **La guía del DS no tiene página de la card.** Nada de lo que sigue sale de una guía: lo
+> marcado «propuesta» sale de cómo la usa la app y falta el ok del dueño; lo «canon» ya está
+> aprobado.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app` (sin `master-preview`,
+> `master-prototipos`, `mockup-*`, `dx/*`, `_guia-*`, `master-rutina`, `master-medico`,
+> `master-ejercicios`): **253 cards en 79 archivos**. Variantes: 227 `default` explícito, 24 sin
+> `variant` (también default), 2 `elevated`, 0 `flat`. Tamaños: 95 `small`, 123 `medium`
+> explícito + 21 sin `size`, 14 `large`, 0 `xlarge`. 9 con `[interactive]`. Slots: 23
+> `sui-card-header`, 11 `sui-card-footer`, 4 `sui-card-media`.
+
+### `variant`
+
+| variant | cuándo | fuente |
+|---|---|---|
+| `default` | Lo normal: la card sobre el fondo de la app (borde + sombra x-small). 251 de 253. | propuesta (práctica de la app) |
+| `elevated` | La card flota sobre un mapa, una foto o un fondo de color, donde el borde se pierde y hace falta la sombra media. Precedente: el seguimiento público del pedido (`pages/public/pedido-en-vivo/pedido-en-vivo.html:19`, `:69`). | propuesta |
+| `flat` | Ver «No usar». | propuesta |
+
+### `size` (padding × gap entre slots)
+
+| size | medidas | cuándo | fuente |
+|---|---|---|---|
+| `small` | 16 / 12 | Filas de una lista de cards, KPIs chicos, cards tocables. **Toda card en mobile.** | propuesta |
+| `medium` (default) | 20 / 16 | Secciones en web. | propuesta |
+| `large` | 24 / 20 | La sección principal de una pantalla de web (los 14 de hoy son gráficos de reportes y los pasos del onboarding). | propuesta |
+| `xlarge` | 28 / 24 | Ver «No usar». Extensión SUI (no está en Figma). | propuesta |
+
+### `interactive`
+
+| valor | cuándo | fuente |
+|---|---|---|
+| `true` | La card entera es **una** acción: abre un detalle o lleva a otra pantalla («Mis direcciones», una factura). Da cursor, hover, foco y el arreglo de iOS. | propuesta |
+| `false` (default) | La card tiene 2 acciones o más adentro, o ninguna. Las acciones van como botones dentro. | propuesta |
+
+### Slots
+
+| slot | cuándo | fuente |
+|---|---|---|
+| `[sui-card-header]` | Título de la card a la izquierda y, si hace falta, una acción chica a la derecha (`sui-link-button` «Ver todo»). | propuesta |
+| cuerpo (sin atributo) | El contenido. **Con 2 bloques o más, envuélvelos en un div propio con `display:flex; flex-direction:column; gap`** (ver Trampas). | canon (memoria del proyecto, 10-05-2026) |
+| `[sui-card-media]` | Gráfico, mapa o foto de borde a borde, al final. Si después va un footer, la media deja de comerse el borde inferior. | propuesta |
+| `[sui-card-footer]` | La acción de la card o un resumen. Si son dos botones, siguen el orden de `sui-modal-footer` (secundario a la izquierda, primario a la derecha). | canon (orden de botones, CLAUDE.md) |
+
+**Usos de hoy que rompen las reglas:**
+
+- **18 cards en 6 archivos con `gap` puesto en la clase del `sui-card`**, que no llega a los hijos
+  del cuerpo: `pages/central/central-inicio/central-inicio.html:36` (×6),
+  `pages/super-admin/master-semanas/master-semanas.html:21` (×4),
+  `pages/central/central-ingresos/central-ingresos.html:36` (×3), `pages/invoices/invoices.html:19`
+  (×2), `pages/driver/driver-history/driver-history.html:17` (×2) y
+  `pages/driver/driver-wallet/driver-wallet.html:154` (ahí además el `flex-direction: row` del host
+  no pone el badge al lado del monto: el cuerpo es un solo hijo).
+- **3 cards tocables armadas a mano** (`(click)` o `routerLink` sin `[interactive]`): sin foco, sin
+  hover y sin el arreglo de iOS. `pages/super-admin/master-users/master-users.html:156` (con
+  `role="button"` y `touchstart` a mano), `pages/super-admin/master-settings/master-settings.html:601`,
+  `pages/driver/driver-dashboard/driver-dashboard.html:990`.
+
+## Tamaño en mobile y en web
+
+El `size` de la card es su padding, no un área táctil: no tiene que llegar a 44. Lo que importa en
+mobile es no perder ancho.
+
+| uso | mobile | web |
+|---|---|---|
+| sección, KPI, gráfico | `small` (16) | `medium` (20) |
+| sección principal de un reporte | `small` | `large` (24) |
+| fila de lista tocable | `small` | `small` |
+
+```html
+<sui-card [size]="bp.isMobile() ? 'small' : 'medium'"> … </sui-card>
+```
+
+`bp` es el `BreakpointsService` de la app. Va al ritmo de los gaps de página (12 / 16 / 20 por
+breakpoint). Si la card es tocable, el alto de la fila (≥ 44) lo da su contenido, no el `size`.
+
+## «No usar»: por qué no hoy y cuándo sí
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| `variant="flat"` (0 usos) | la app siempre pone la card sobre el fondo gris, donde la sombra ayuda | una card dentro de otra superficie blanca (un sheet, otra card), donde la sombra dobla el borde |
+| `size="xlarge"` (0 usos) | ninguna pantalla lo pide; no está en Figma | un hero de desktop (la portada de un reporte impreso) |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `variant` | `'default' \| 'elevated' \| 'flat'` | `'default'` |
+| `size` | `'small' \| 'medium' \| 'large' \| 'xlarge'` | `'medium'` |
+| `interactive` | `boolean` | `false` |
+
+Outputs: ninguno.
+<!-- api:fin -->
+
+Slots: `[sui-card-header]`, cuerpo (`<ng-content>`), `[sui-card-media]`, `[sui-card-footer]`.
+
+## Trampas
+
+- **El `gap` del host separa slots, no hijos.** El cuerpo va dentro de `.sui-card__body` (flex en
+  columna, sin gap). Poner `gap` en una clase del `sui-card` no separa nada de lo que proyectas: se
+  necesita un wrapper propio (`<div class="x__card-body">` con flex y gap).
+- Sin header ni footer el host queda con `gap: 0` (`:has(> .sui-card__body:only-child)`).
+- **`interactive` no trae output, pero sí teclado** (desde 03-10-2026): pone `role="button"`,
+  `tabindex="0"`, hover y foco, y **Enter / Espacio hacen click en la card**, así que tu `(click)`
+  (o el `routerLink` de un `<a>` que la envuelve) también responde al teclado. No agregues
+  `(keydown.enter)` además: se dispararía dos veces. Una tecla dentro de un campo o botón
+  proyectado es de ese control, no de la card.
+- Los slots son **atributos** (`sui-card-header`), no `slot="…"`.
+- El host tiene `overflow: hidden` y radio 16: lo que sobresalga (un badge colgado de la esquina)
+  se corta.
+- `sui-card-media` rompe el padding con margen negativo leído de `--sui-card-padding-x`; si le
+  cambias el padding a la card desde afuera, la media queda corrida.
+- En modo oscuro `elevated` usa `--sui-card-elevated-border` para el borde (la sombra no se ve).
+
+## Ejemplo
+
+```html
+<!-- Sección con título, dos bloques y una acción -->
+<sui-card [size]="bp.isMobile() ? 'small' : 'medium'">
+  <div sui-card-header class="ganancias__head">
+    <h3>Tus días del mes</h3>
+    <sui-link-button variant="primary" size="small" (click)="verTodo()">Ver todo</sui-link-button>
+  </div>
+  <div class="ganancias__card-body">   <!-- display:flex; flex-direction:column; gap:12px -->
+    <span>Martes 3 · 6 entregas · S/ 42.00</span>
+    <span>Miércoles 4 · 4 entregas · S/ 28.50</span>
+  </div>
+</sui-card>
+
+<!-- Fila tocable -->
+<sui-card size="small" [interactive]="true" (click)="abrirDirecciones()">
+  …
+</sui-card>
+```