@ajuarezso/sui-design-system 0.18.10 → 0.20.0

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

@@ -0,0 +1,103 @@
+---
+name: sui-compact-avatar-group
+selector: sui-compact-avatar-group
+resumen: Varias personas en una píldora baja con el «+N» en texto, para tablas y filas apretadas
+alternativas: [sui-avatar-group (la pila grande, para cards y cabeceras), sui-avatar (una sola persona)]
+---
+
+# sui-compact-avatar-group
+
+Story: [Atoms/Avatar/Compact Avatar Group](https://sui-design-system.web.app/?path=/docs/atoms-avatar-compact-avatar-group--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** cuando hay que mostrar varias personas **en poco alto**: una celda de tabla, una fila
+de lista. Es una píldora blanca con los avatares casi pegados y el «+N» como texto.
+
+**No lo uses** para:
+
+- Una card o una cabecera con espacio: `sui-avatar-group`.
+- Una sola persona: `sui-avatar`.
+
+## Qué variante usar
+
+> **La guía del DS dice qué es, sus tamaños y sus dos estilos, no cuándo usar cada uno.** Lo
+> marcado «según la guía del DS» sale de su texto o de su código; el resto es **propuesta,
+> falta aprobación**.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos directos**. El DS lo usa dentro
+> de `sui-table`.
+
+### Lo que sí dice la guía del DS
+
+- **Para qué es**: la versión más compacta del avatar group.
+- **Tamaños**: 40, 32 y 24; el default de la guía es 40 (en SUI, `'32'`).
+- **Estilos**: `default` (píldora blanca con sombra) y `stroke` (además, un borde `stroke-soft-200`).
+
+### `size`, `appearance`, `max` y `count`
+
+| input | valor | cuándo | fuente |
+|---|---|---|---|
+| `size` | `'24'` | Celda de tabla. | propuesta |
+| `size` | `'32'` (default SUI) | Fila de una lista. | propuesta |
+| `size` | `'40'` (default de la guía) | Dentro de una card. | propuesta |
+| `appearance` | `default` | Sobre un fondo gris o de color: la sombra lo separa. | propuesta |
+| `appearance` | `stroke` | Sobre blanco, donde la sombra sola no alcanza a marcar el borde. | propuesta |
+| `max` | `3` (default) | Tres avatares visibles. | propuesta |
+| `count` | — | Solo si el total no está en `items` (vienen 3 caras pero son 12 personas): `count="+9"`. Si no, se calcula solo. | propuesta |
+
+Usos de hoy que rompen la regla: **0** (no hay usos).
+
+## 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 |
+|---|---|---|
+| fila o celda de tabla | `'32'` | `'24'` |
+| dentro de una card | `'40'` | `'32'` |
+
+```html
+<sui-compact-avatar-group [size]="bp.isMobile() ? '32' : '24'" [items]="repartidores" />
+```
+
+## «No usar»: por qué no hoy y cuándo sí
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| todo el componente (0 usos) | no hay tablas con varias personas por fila | la columna «repartidores» en la tabla de locales del super admin |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `size` | `'24' \| '32' \| '40'` | `'32'` |
+| `appearance` | `'default' \| 'stroke'` | `'default'` |
+| `items` | `readonly SuiAvatarGroupItem[]` | `[]` |
+| `max` | `number` | `3` |
+| `count` | `string \| null` | `null` |
+
+Outputs: ninguno.
+<!-- api:fin -->
+
+`items` usa `SuiAvatarGroupItem` (ver `sui-avatar-group`).
+
+## Trampas
+
+- **`size` es un string**: `size="32"`, no `[size]="32"` (con número no compila).
+- **El estilo se llama `appearance`**, no `variant` ni `style` (el atributo `style` es del HTML).
+- **`size` no es el de `sui-avatar`**: `'24'` → avatar `sm`, `'32'` → `md`, `'40'` → `lg`.
+- **`count` gana sobre el cálculo**: si lo pasas, se muestra aunque no sobre nadie.
+- Las reglas de foto y color de cada persona son las de `sui-avatar`.
+
+## Ejemplo
+
+```html
+<sui-compact-avatar-group size="24" appearance="stroke" [items]="repartidoresDelLocal" />
+```

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

@@ -0,0 +1,190 @@
+---
+name: sui-compact-button
+selector: sui-compact-button
+resumen: Botón de solo ícono, chico, para cuando falta espacio
+alternativas: [sui-button (acción con texto, o de ícono con onlyIcon en tamaños de 28 a 52), sui-link-button (acción que se lee como texto), sui-topbar-button (ícono de la barra superior)]
+---
+
+# sui-compact-button
+
+Story: [Atoms/Button/Compact Button](https://sui-design-system.web.app/?path=/docs/atoms-button-compact-button--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** para una acción de un solo ícono donde no entra un botón: cerrar en la cabecera de un
+modal o sheet, «más» o «quitar» en una fila, el − / + de una cantidad, las flechas flotantes de un
+carrusel o un mapa.
+
+**No lo uses** para:
+
+- **Una acción con texto**: `sui-button` o `sui-link-button`.
+- **El ícono de la barra superior**: `sui-topbar-button`.
+- **Un ícono decorativo** que no hace nada: `sui-icon`.
+
+## Qué variante usar
+
+> **La guía del DS no dice cuándo usar cada estilo.** Su página muestra los cuatro estilos, los
+> dos tamaños, el radio completo y el deshabilitado, sin do/don't. Las reglas de abajo son
+> **canon (aprobado por el dueño, 03-10-2026)** salvo donde dice otra fuente.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app`: 11 compact-buttons en 7 archivos, sin
+> contar prototipos ni vitrinas (`master-preview`, `master-prototipos`, `mockup-sheets-*`,
+> `dx/*`, `master-rutina`, `master-medico`, `dev-index`). Estilos: 6 `ghost`, 3 `stroke` (uno
+> por error, ver abajo), 2 `white`, 0 `modifiable`. Tamaños: 6 `large`, 3 `medium`, 2 `xlarge`.
+> 4 con `fullRadius`, 1 con `disabled`.
+
+### Lo que sí dice la guía del DS
+
+- **Para qué es**: botones para cuando el espacio es limitado.
+- **Defaults**: `stroke` + `large` + sin `fullRadius`. Igual que SUI.
+- **Tamaños**: solo `large` (24 px, ícono 20) y `medium` (20 px, ícono 18; en SUI, 16). `xlarge`
+  y los tres más grandes son extensión de SUI.
+- **`modifiable` no tiene color, fondo ni hover propios**: hereda el color del contenedor.
+- **Deshabilitado**: sin borde, sin fondo y sin sombra; el ícono en `text-disabled-300`.
+
+### `variantStyle`
+
+| variantStyle | cuándo | ejemplo real de la app | fuente |
+|---|---|---|---|
+| `stroke` (default) | Acciones de una fila o una card: «más», «editar», el − / + de una cantidad. | `components/product-detail-view/product-detail-view.html:169` (− / +) | canon (aprobado por el dueño, 03-10-2026) |
+| `ghost` | Cerrar en la cabecera de un modal o un sheet. | `components/store-ratings-modal/store-ratings-modal.html:33` («Cerrar») | canon (aprobado por el dueño, 03-10-2026) |
+| `white` | Flotante sobre un mapa o una foto, siempre con `fullRadius`. | `pages/customer/store-browser/arrastre-carrusel.ts:102` (flechas del carrusel) | canon (aprobado por el dueño, 03-10-2026) |
+| `modifiable` | Hereda el color del contenedor: el cerrar del alert (ya lo trae `sui-alert` adentro). | (sin uso directo; vive dentro de `sui-alert`) | hereda el color: según la guía del DS · dónde va: canon (aprobado por el dueño, 03-10-2026) |
+
+**Usos de hoy que rompen la regla:**
+
+- **1 bug: `variant="ghost"` en vez de `variantStyle`.** `pages/super-admin/master-settings/master-settings.html:647`
+  («Quitar este nivel»). `variant` no es un input del compact-button: el atributo se ignora y el
+  botón sale `stroke`. Pasar a `variantStyle="ghost"`.
+- **A discutir — 5 `ghost` para acciones de fila** (quitar, más):
+  `components/option-sections-manager/option-sections-manager.html:39` y `:146`,
+  `components/add-product-modal/add-product-modal.html:306`,
+  `pages/super-admin/master-settings/master-settings.html:111` y `:647`. Este canon dice `stroke`
+  para filas y `ghost` solo para cerrar; el canon de `sui-button` permite `ghost` para editar y
+  borrar en filas. Los dos canon se contradicen: hay que elegir uno.
+
+### `size`
+
+| size | px (ícono) | cuándo | fuente |
+|---|---|---|---|
+| `medium` | 20 (16) | Solo desktop, filas muy densas (tablas). | escala: según la guía del DS · cuándo: canon (aprobado por el dueño, 03-10-2026) |
+| `large` (default) | 24 (20) | Desktop, dentro de cards. | default según la guía del DS · cuándo: canon (aprobado por el dueño, 03-10-2026) |
+| `xlarge` | 28 (24) | Cabeceras de modal en desktop; flechas de carrusel que solo se ven con mouse. | extensión de SUI · canon (aprobado por el dueño, 03-10-2026) |
+| `2xlarge` | 32 (20) | **El mínimo en mobile**: filas y cards que se tocan con el dedo. | extensión de SUI · canon (aprobado por el dueño, 03-10-2026). **En el repo del DS, todavía no en el paquete publicado 0.19.0** |
+| `3xlarge` | 36 (20) | Cerrar en modales y sheets en mobile. | ídem: canon; en el repo, no en 0.19.0 |
+| `4xlarge` | 40 (24) | Flotantes sobre el mapa (volver, centrar). | ídem: canon; en el repo, no en 0.19.0 |
+
+**Usos de hoy que rompen la regla** (pantallas del cliente, que se usan en el teléfono, con
+botones de 20 o 24 px):
+
+- **4 casos**: `components/product-detail-view/product-detail-view.html:169` y `:173` (− / + en
+  `large` → `2xlarge`), `components/store-ratings-modal/store-ratings-modal.html:33` (cerrar en
+  `medium` → `3xlarge`), `pages/customer/order-history/order-history.html:383` (flecha de la fila
+  en `large` → `2xlarge`).
+- **La migración está bloqueada** hasta que se publique la versión del DS con `2xlarge`,
+  `3xlarge` y `4xlarge`.
+
+### `fullRadius`
+
+| fullRadius | cuándo | fuente |
+|---|---|---|
+| `false` (default, radio 6) | Lo normal: filas, cards, cabeceras. | default según la guía del DS · cuándo: propuesta |
+| `true` (círculo) | Flotante (`white`) sobre mapa o foto. | canon (aprobado por el dueño, 03-10-2026) |
+| `true` (círculo) | El − / + de una cantidad, para que se lea como un stepper. | propuesta (es lo que ya hace `product-detail-view`) |
+
+### `disabled`, `href`, `ariaLabel`
+
+| prop | cuándo | fuente |
+|---|---|---|
+| `disabled` | Se llegó al límite: no hay más stock para sumar, no se puede quitar el último. | cómo se ve: según la guía del DS · cuándo: propuesta |
+| `href` | Solo si el botón navega sin otra acción (volver a una ruta). Pinta un `<a>`; `rel` ya viene en `'noopener noreferrer'`. | propuesta |
+| `ariaLabel` (requerido) | Lo que hace, no lo que muestra: «Cerrar», «Quitar opción», «Agregar uno»; nunca «X» ni «Ícono». | propuesta (el input es obligatorio) |
+| `type="submit"` | Solo dentro de un `<form>`. | 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.
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| acciones de fila o card (más, quitar, − / +) | `2xlarge` (32) | `large` (24); `medium` (20) en tablas densas | canon (aprobado por el dueño, 03-10-2026) |
+| cerrar en la cabecera de un modal o sheet | `3xlarge` (36) | `xlarge` (28) | canon (aprobado por el dueño, 03-10-2026) |
+| flotante sobre el mapa o una foto | `4xlarge` (40) | `xlarge` (28) | canon (aprobado por el dueño, 03-10-2026) |
+
+```html
+<sui-compact-button icon="close-line" variantStyle="ghost" ariaLabel="Cerrar"
+                    [size]="bp.isMobile() ? '3xlarge' : 'xlarge'" (clicked)="cerrar()" />
+```
+
+**`2xlarge`, `3xlarge` y `4xlarge` están en el repo del DS y todavía no en el paquete publicado
+(0.19.0).** Hasta publicarlos, el patrón de arriba no compila. Aun en `4xlarge` (40) el botón queda
+por debajo de 44: deja 4 px de aire alrededor (gap o padding del contenedor) para que el dedo no
+toque el vecino. `medium` y `large` no van en mobile: hoy hay 4 en pantallas del cliente (ver
+«`size`» arriba).
+
+## «No usar»: por qué no hoy y cuándo sí
+
+Ningún valor del compact-button está en «no usar»: los cuatro estilos y los seis tamaños tienen
+un caso. `modifiable` no tiene un uso directo hoy porque el único lugar donde va (el cerrar del
+alert) ya lo trae `sui-alert` adentro.
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `icon` | `string` | — (requerido) |
+| `variantStyle` | `'stroke' \| 'ghost' \| 'modifiable' \| 'white'` | `'stroke'` |
+| `size` | `'medium' \| 'large' \| 'xlarge' \| '2xlarge' \| '3xlarge' \| '4xlarge'` | `'large'` |
+| `fullRadius` | `boolean` | `false` |
+| `disabled` | `boolean` | `false` |
+| `href` | `string \| null` | `null` |
+| `target` | `string \| null` | `null` |
+| `rel` | `string \| null` | `'noopener noreferrer'` |
+| `type` | `'button' \| 'submit' \| 'reset'` | `'button'` |
+| `ariaLabel` | `string` | — (requerido) |
+
+| output | payload |
+|---|---|
+| `clicked` | `MouseEvent` |
+<!-- api:fin -->
+
+El clic se escucha con `(clicked)`. `icon` recibe el nombre RemixIcon, sin el prefijo `ri-`.
+
+## Trampas
+
+- **El estilo se llama `variantStyle`**, no `variant`. `variant="ghost"` no da error de
+  compilación: se ignora y sale `stroke` (pasó en `master-settings.html:647`).
+- **`icon` y `ariaLabel` son obligatorios**: sin `ariaLabel` no compila.
+- **El output es `(clicked)`**. `(click)` sobre el host también llega porque el clic burbujea; hoy 6
+  usos lo escuchan así (`product-detail-view.html:169` y `:173`, `master-settings.html:647`,
+  `arrastre-carrusel.ts:102` y `:104`, `order-history.html:383`). Usa `(clicked)`, que ya respeta
+  `disabled`.
+- **El paquete publicado (0.19.0) solo trae `medium`, `large` y `xlarge`.** Pasar `2xlarge` con un
+  cast compila, pero el botón sale sin tamaño y con ícono de 16: no lo hagas hasta que se publique.
+- En `medium` el ícono mide 16, no los 18 de la guía.
+- `modifiable` en hover pinta blanco al 16 %: pensado para fondos oscuros o de color. Sobre blanco
+  casi no se nota. Se ajusta con `--sui-compact-button-hover-bg` y `--sui-compact-button-active-bg`.
+- Al presionar, `stroke`, `ghost` y `white` se ponen oscuros (`bg-surface-800`) con el ícono
+  blanco: es el estado activo del Figma, no un error.
+- Ya trae el arreglo de iOS para el `:active` pegado: no lo agregues.
+
+## Ejemplo
+
+```html
+<!-- Cerrar en la cabecera de un sheet, en mobile -->
+<sui-compact-button icon="close-line" variantStyle="ghost" size="xlarge" ariaLabel="Cerrar" (clicked)="cerrar()" />
+
+<!-- Acción de una fila en desktop -->
+<sui-compact-button icon="more-2-line" ariaLabel="Opciones de la sección" (clicked)="abrirMenu()" />
+
+<!-- Flotante sobre el mapa -->
+<sui-compact-button icon="arrow-left-line" variantStyle="white" [fullRadius]="true" size="xlarge"
+                    ariaLabel="Volver" (clicked)="volver()" />
+```

package/docs/sui-content-divider/README.md

@@ -0,0 +1,124 @@
+---
+name: sui-content-divider
+selector: sui-content-divider
+resumen: Línea con algo encima: el «o» entre dos opciones, la cabecera de un grupo o un botón entre bloques
+alternativas: [sui-divider (la línea sola, horizontal o vertical)]
+---
+
+# sui-content-divider
+
+Story: [Atoms/Divider/Content Divider](https://sui-design-system.web.app/?path=/docs/atoms-divider-content-divider--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** cuando la separación **dice algo**:
+
+- El «o» entre dos formas de hacer lo mismo (entrar con Google **o** con el correo).
+- La cabecera de un grupo dentro de una lista o un modal («Con pocos pedidos», «Ayer»).
+- Un botón entre dos bloques (agregar algo ahí, ver el resto).
+
+**No lo uses** para una línea sola: eso es `sui-divider`, que pesa menos y tiene vertical.
+
+## Qué variante usar
+
+> **En la guía del DS este componente se llama «Divider»** y trae: línea (default), línea con
+> espacio, línea con texto («OR»), solo texto, texto con fondo («a menudo va en modales») y
+> contenido al centro. Los cuatro tipos con botones vienen del Figma del DS, no de la guía. Lo
+> marcado «según la guía del DS» sale de su texto o de sus ejemplos; el resto es **propuesta,
+> falta aprobación**.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app`: **1 content-divider**
+> (`pages/super-admin/master-drivers/master-drivers.html:190`, `solid-text` «Con pocos
+> pedidos»), sin contar prototipos ni vitrinas (`master-preview`, `master-prototipos`,
+> `mockup-sheets-*`, `dx/*`, `_guia-*`, `master-rutina`, `master-medico`, `master-ejercicios`,
+> `dev-index`).
+
+| type | cuándo | ejemplo | fuente |
+|---|---|---|---|
+| `text-line` | El «o» entre dos formas de hacer lo mismo. | `text="o"` entre «Continuar con Google» y el formulario de correo | según la guía del DS («OR») |
+| `solid-text` | Cabecera de un grupo dentro de una lista o un modal, con fondo. | «Con pocos pedidos» (`master-drivers.html:190`) | según la guía del DS («a menudo en modales») |
+| `text` | Cabecera de grupo sin fondo, en una lista partida por fecha o por tipo. | «Ayer», «Esta semana» | según la guía del DS (existe) · propuesta (cuándo) |
+| `line` (default) | **No usar** (ver abajo). | — | según la guía del DS (default) |
+| `line-spacing` | **No usar** (ver abajo). | — | según la guía del DS |
+| `icon-button` | **No usar** hoy (ver abajo). | `icon="add-line"` | propuesta, falta aprobación |
+| `text-button` | **No usar** hoy (ver abajo). | «Ver 12 más» | propuesta, falta aprobación |
+| `icon-button-group` | **No usar** hoy (ver abajo). | Subir · agregar · bajar | propuesta, falta aprobación |
+| `text-button-group` | **No usar** hoy (ver abajo). | «Producto» · «Sección» | propuesta, falta aprobación |
+
+| propiedad | regla | fuente |
+|---|---|---|
+| `text` | Se escribe en sentence case («o», «Con pocos pedidos»): el componente lo pasa a MAYÚSCULAS. | propuesta, falta aprobación |
+| `icon` | Solo en `icon-button`. Nombre Remix sin `ri-`. | propuesta, falta aprobación |
+| `ariaLabel` | **Obligatorio en `icon-button`**: sin él el lector dice «Acción». | propuesta, falta aprobación |
+| `items` | Solo en los `-group`: de 2 a 3, cada uno con `ariaLabel` si es ícono. | propuesta, falta aprobación |
+| `disabled` | El botón existe pero hoy no aplica (lista ya completa). | propuesta, falta aprobación |
+
+**Corregido el 03-10-2026:** los 2 «o» que estaban hechos a mano (login y registro) ya son `type="text-line"`.
+
+## No usar: por qué no hoy y cuándo sí
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| `line` y `line-spacing` | `sui-divider` hace lo mismo, pesa menos y tiene vertical; el espacio lo pone el `gap`. | Ninguno. |
+| `icon-button` | No hay editores donde se inserte algo entre dos bloques. | «Agregar opción aquí» entre dos opciones en el editor de opciones del producto. |
+| `text-button` | Ninguna pantalla de hoy corta una lista con un botón para ver el resto. | «Ver 12 más» al final de una lista cortada (reseñas, historial). |
+| `icon-button-group` / `text-button-group` | No hay editores con bloques que se mueven o se insertan. | Mover, agregar o elegir qué insertar entre secciones de la carta. |
+
+## Tamaño en mobile y en web
+
+Criterio de la app: **en mobile se lee y se toca con el dedo, así que va más grande; en web
+(desktop), más chico.** Mobile es `≤ 767 px`, el mismo corte de `BreakpointsService.isMobile()`
+en master-pedidos. Fuente: canon del dueño (03-10-2026), el mismo patrón que ya usan 27 controles
+de la app.
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| Cualquiera | tamaño único | tamaño único | lo que hay en el DS |
+
+**No tiene tamaños**: el texto mide 11–12 px y los botones 32 px en las dos plataformas. En mobile
+los botones (`icon-button`, `text-button`, grupos) quedan debajo de los 44 px del dedo; es otra
+razón para no usarlos hoy. Si un flujo nuevo los necesita en mobile, se pide al DS un tamaño grande.
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `type` | `'line' \| 'line-spacing' \| 'text-line' \| 'text' \| 'solid-text' \| 'icon-button' \| 'icon-button-group' \| 'text-button' \| 'text-button-group'` | `'line'` |
+| `text` | `string` | `''` |
+| `icon` | `string \| null` | `null` |
+| `ariaLabel` | `string \| null` | `null` |
+| `disabled` | `boolean` | `false` |
+| `items` | `readonly SuiContentDividerItem[]` | `[]` |
+
+| output | payload |
+|---|---|
+| `buttonClick` | `MouseEvent` |
+| `itemClick` | `{ item: SuiContentDividerItem; index: number; event: MouseEvent }` |
+<!-- api:fin -->
+
+Outputs: `(buttonClick)` en `icon-button` y `text-button`; `(itemClick)` con
+`{ item, index, event }` en los `-group`.
+
+## Trampas
+
+- **Todo el texto sale en MAYÚSCULAS** por CSS: escribirlo normal.
+- **`text` y `solid-text` alinean a la izquierda**, no al centro (así está en el Figma).
+- `text-line` usa 11 px; `text` y `solid-text`, 12 px.
+- Sin `ariaLabel`, el `icon-button` se anuncia como «Acción» y los ítems de grupo como
+  «Acción 0», «Acción 1».
+- `line` y `line-spacing` existen, pero la línea sola es `sui-divider`.
+
+## Ejemplo
+
+```html
+<!-- Login: Google o correo -->
+<sui-social-button brand="google" label="Continuar con Google" />
+<sui-content-divider type="text-line" text="o" />
+<form>…</form>
+
+<!-- Cabecera de grupo en una lista -->
+<sui-content-divider type="solid-text" text="Con pocos pedidos" />
+```

package/docs/sui-divider/README.md

@@ -0,0 +1,102 @@
+---
+name: sui-divider
+selector: sui-divider
+resumen: Línea de 1 px que separa bloques (horizontal) o datos en una fila (vertical)
+alternativas: [sui-content-divider (línea con texto o botones encima, o el «o» entre dos opciones)]
+---
+
+# sui-divider
+
+Story: [Atoms/Divider/Divider](https://sui-design-system.web.app/?path=/docs/atoms-divider-divider--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** para separar con una línea:
+
+- **horizontal**: bloques dentro de una card, filas de una lista, secciones de un formulario, el
+  subtotal del total.
+- **vertical**: datos en una misma fila («4,7 | 25–35 min | Envío S/ 3.00»).
+
+**No lo uses** para:
+
+- Una línea con texto o botones encima (el «o» del login, la cabecera de un grupo):
+  `sui-content-divider`.
+- Separar cosas que ya separa el espacio. Si el `gap` alcanza, la línea sobra.
+- Dos acciones en texto: el canon del alert es el punto medio «·», no una línea.
+
+**Toda línea de separación es `<sui-divider>`**, no un `<div>` con `height: 1px` y
+`background: var(--sui-stroke-soft-200)`.
+
+## Qué variante usar
+
+> **La guía del DS llama «Divider» a lo que en SUI es `sui-content-divider`** (línea, línea con
+> espacio, línea con texto, texto, texto con fondo y contenido al centro). Su variante «Line»
+> («una línea horizontal simple», la default) es este componente. La guía no trae la vertical ni
+> dice cuándo separar con línea y cuándo con espacio. Lo marcado «según la guía del DS» sale de
+> ahí; el resto es **propuesta, falta aprobación**.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app`: **13 dividers en 10 pantallas**, todos
+> horizontales, sin contar prototipos ni vitrinas (`master-preview`, `master-prototipos`,
+> `mockup-sheets-*`, `dx/*`, `_guia-*`, `master-rutina`, `master-medico`, `master-ejercicios`,
+> `dev-index`).
+
+| orientation | cuándo | ejemplo real | fuente |
+|---|---|---|---|
+| `horizontal` (default) | Separa bloques o filas. El espacio arriba y abajo lo pone el `gap` del padre, no el divider. | `pages/driver/driver-dashboard/driver-dashboard.html:1124` (entre filas, `@if (!last)`) | según la guía del DS («Line») |
+| `vertical` | Separa datos cortos en una sola fila. El padre necesita alto (si no, mide 16 px). | — (sin usos) | propuesta, falta aprobación |
+
+**Corregido el 03-10-2026:** las 26 líneas hechas a mano (mi-negocio, checkout, carrito, billetera y movimientos) ya son `sui-divider`. Seis conservan un `margin` propio porque sus vecinos se separan con margen y no con el `gap` del padre; pasarlo al `gap` es un cambio aparte.
+
+El «o» del login y del registro también pasó a `sui-content-divider type="text-line"`.
+
+## No usar: por qué no hoy y cuándo sí
+
+Nada: las dos orientaciones tienen caso. La vertical no tiene usos hoy, pero el caso existe
+(la fila de nota, tiempo y envío de un local).
+
+## Tamaño en mobile y en web
+
+Criterio de la app: **en mobile se lee y se toca con el dedo, así que va más grande; en web
+(desktop), más chico.** Mobile es `≤ 767 px`, el mismo corte de `BreakpointsService.isMobile()`
+en master-pedidos. Fuente: canon del dueño (03-10-2026), el mismo patrón que ya usan 27 controles
+de la app.
+
+**No aplica**: es 1 px en las dos plataformas. Lo que cambia por plataforma es el `gap` del padre,
+que separa los bloques (la regla de spacing de la app: 20/16/12 según el breakpoint).
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` |
+
+Outputs: ninguno.
+<!-- api:fin -->
+
+## Trampas
+
+- **No tiene margen**: el espacio sale del `gap` del padre. Un divider entre dos bloques sin
+  `gap` queda pegado.
+- **El vertical mide `height: 100%`**: dentro de un padre sin alto queda en 16 px. En un flex,
+  `align-items: center` + alto en el padre.
+- Es `display: block` (horizontal) e `inline-block` (vertical).
+- Lleva `role="separator"` y `aria-orientation`. Va **entre** filas (`@if (!last)`), no uno por
+  fila: el último sobra.
+
+## Ejemplo
+
+```html
+<!-- Entre filas de una lista -->
+@for (f of filas; track f.id; let last = $last) {
+  <app-fila [fila]="f" />
+  @if (!last) { <sui-divider /> }
+}
+
+<!-- Datos en una fila -->
+<div class="meta">
+  <span>4,7</span><sui-divider orientation="vertical" /><span>25–35 min</span>
+</div>
+```

package/docs/sui-emoji/README.md

@@ -0,0 +1,138 @@
+---
+name: sui-emoji
+selector: sui-emoji
+resumen: Un emoji 3D animado (Fluent) para los momentos con emoción: estados vacíos, celebraciones, onboarding
+alternativas: [sui-icon (ícono funcional, monocromo), sui-empty-state (el estado vacío completo, que ya trae su emoji)]
+---
+
+# sui-emoji
+
+Story: [Atoms/Emoji](https://sui-design-system.web.app/?path=/docs/atoms-emoji--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** donde la pantalla tiene que **sentirse**, no solo funcionar: un estado vacío, «¡Pedido
+confirmado!», los pasos de una landing, la barra de calificación.
+
+**No lo uses** para:
+
+- Un ícono funcional (un botón, una fila, un menú): eso es `sui-icon`. Un emoji no es un ícono.
+- Muchos a la vez animados: cada uno es un APNG de ~1 MB en bucle.
+- Una imagen propia que no es un emoji (la moneda de sol): un `<img>`.
+
+## Qué variante usar
+
+> **La guía del DS no tiene este componente**: es propio de SUI. Lo marcado «canon» ya es regla
+> del proyecto; el resto es **propuesta, falta aprobación**.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app`: 10 emojis en 3 archivos, sin contar
+> prototipos ni vitrinas. El catálogo tiene 59.
+
+### Dónde va
+
+| caso | cómo | fuente |
+|---|---|---|
+| Estados vacíos y celebraciones | Emoji animado, uno solo, en `xl`. Nada de íconos genéricos en un estado vacío. | canon (preferencia del dueño: emojis animados en los estados vacíos) |
+| Pasos de una landing | `lg`, uno por paso. | propuesta |
+| Junto a un título o dentro de un texto | `md` o `sm`, como acento. | propuesta |
+| Como ícono de un botón | No: el botón lleva `leftIcon`. | propuesta |
+
+### `size`
+
+| valor | px | cuándo | fuente |
+|---|---|---|---|
+| `xl` | 48 | Estado vacío, celebración. | propuesta |
+| `lg` | 32 | Pasos de una landing, la barra de calificación. | propuesta |
+| `md` (default) | 24 | Acompaña un título. | propuesta |
+| `sm` | 20 | Dentro de una línea de texto. | propuesta |
+| `xs` | 16 | No usar hoy. | propuesta |
+| `full` | 100 % | Llena su caja: lo usa `sui-empty-state`. | propuesta |
+
+### `animated`, `src`, `name`, `ariaLabel`
+
+| input | cuándo | fuente |
+|---|---|---|
+| `animated` (default `true`) | Uno solo → animado. **Varios a la vez → `false`.** Ojo: solo las 5 caritas de la calificación (`pensive-face` … `grinning-face-smiling-eyes`) tienen copia estática; para el resto, `false` no cambia nada. | propuesta (la regla ya está escrita en `sui-emoji.ts`) |
+| `name` | Uno del catálogo. Si no está, se agrega al catálogo del DS. | propuesta |
+| `src` | Un emoji que no está en el catálogo, mientras se agrega. **Nunca** un `<img>` suelto con la URL del emoji. | propuesta |
+| `ariaLabel` | Solo si el emoji dice algo que el texto no dice. Si no, queda decorativo (`aria-hidden`). | propuesta |
+
+**Usos de hoy que romperían la propuesta:**
+
+- **2 emojis como ícono de botón**: «Encargarme yo» en `pages/orders/orders.html:322` y `:353` → `leftIcon`.
+- **5 animados a la vez** en `pages/public/landing-customers/landing-customers.html:160`–`:184`
+  (más otro en `:56`). No tienen copia estática: o se acepta el peso en la landing o se generan
+  las copias.
+- **Un catálogo paralelo**: `core/fluent-emoji.ts` arma sus propias URLs (otro CDN incluido) y lo
+  importan 8 archivos (`components/permission-prime-modal/permission-prime-modal.ts`,
+  `pages/role-selector/role-selector.ts`, `pages/customer/order-tracking/order-tracking.ts`…).
+- **10 `<img>` con un emoji**, fuera del componente: `pages/products/add-product/add-product.html:122`
+  (la URL del paquete escrita a mano, y 3 más en el mismo archivo),
+  `components/location-flow-outlet/location-flow-outlet.html:14`,
+  `pages/customer/order-tracking/order-tracking.html:249`. No cuentan las imágenes de los rubros
+  (`pages/customer/store-browser/store-browser.html:193` y similares): vienen de datos y no son
+  del catálogo.
+
+## 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 |
+|---|---|---|
+| estado vacío, celebración | `xl` (48) | `xl` (48) |
+| pasos de una landing | `lg` (32) | `xl` (48) |
+| dentro de un texto | `md` (24) | `sm` (20) |
+
+```html
+<sui-emoji name="hamburger" [size]="bp.isMobile() ? 'lg' : 'xl'" />
+```
+
+El emoji no se toca, así que la regla del dedo no aplica: en los casos de ilustración va igual o
+más grande en web, donde sobra espacio. El tamaño con nombre más grande es `xl` (48); para uno más
+grande, `size="full"` dentro de una caja con el alto que se quiera.
+
+## «No usar»: por qué no hoy y cuándo sí
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| `size` `xs` | a 16 px un emoji ya no se distingue | dentro de un tag de categoría, solo con copia estática |
+| como ícono de botón o de fila | un emoji no es un ícono | ninguno |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `name` | `SuiEmojiName \| null` | `null` |
+| `src` | `string \| null` | `null` |
+| `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | `'md'` |
+| `ariaLabel` | `string \| null` | `null` |
+| `animated` | `boolean` | `true` |
+
+Outputs: ninguno.
+<!-- api:fin -->
+
+## Trampas
+
+- **Pesan**: los animados son APNG de ~1 MB y 73 fotogramas cada uno, servidos desde
+  `raw.githubusercontent.com`. Si ese servidor se cae, no hay emoji.
+- **`animated=false` solo sirve para 5**: las caritas. El resto no tiene copia estática.
+- **`src` gana sobre `name`.**
+- **No toma color**: no responde a `currentColor` ni al tema.
+- Sin `ariaLabel` es decorativo: el lector de pantalla no lo dice.
+- `loading="lazy"`: fuera de la pantalla, no carga hasta que se acerca.
+
+## Ejemplo
+
+```html
+<!-- Celebración -->
+<sui-emoji name="party-popper" size="xl" />
+
+<!-- La barra de calificación: cinco juntos, estáticos -->
+<sui-emoji name="neutral-face" size="lg" [animated]="false" ariaLabel="Regular" />
+```