@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/docs/sui-day-cell/README.md

@@ -0,0 +1,207 @@
+---
+name: sui-day-cell
+selector: sui-day-cell
+resumen: Un día del calendario, con sus estados de elegido, rango, hoy, marcado y bloqueado
+alternativas: [sui-datepicker (el calendario completo, que ya la trae), sui-tab-chips (pocos días para elegir, con nombre: hoy, mañana)]
+---
+
+# sui-day-cell
+
+<!-- generado por scripts/gen-docs.mjs — no editar a mano; `npm run docs` -->
+
+> **De dónde sale este doc.** El criterio es el del SUI Angular (`sui-day-cell`); la API es la de este
+> paquete, leída del código. Los ejemplos se pasaron de Angular de forma mecánica: lo literal va como
+> atributo (`only-icon`, `size="large"`), lo dinámico entre llaves (`size={expr}` → `el.size = expr`)
+> y los eventos como `onValueChange={…}` → `el.addEventListener('valueChange', …)`. `@if`, `@for` y
+> `<ng-template>` quedan como en Angular: se leen como pseudocódigo.
+
+Story: [Molecules/Date & Time/Day Cell](https://sui-design-system.web.app/?path=/docs/molecules-date-time-day-cell--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** solo para **armar un calendario propio** que el `sui-datepicker` no cubre: una grilla
+de la semana con los días de turno del repartidor, o un mes con los días que el local cerró.
+
+**No lo uses** para:
+
+- Un calendario normal: `sui-datepicker` ya arma la grilla, las filas y la banda del rango.
+- Elegir entre pocos días: `sui-tab-chips` (la hoja del pedido programado ya lo hace así).
+- Mostrar una fecha como texto: un `<span>` con la fecha formateada.
+
+## Qué variante usar
+
+> **La guía del DS no tiene página para este componente** (vive dentro del datepicker). Las
+> filas que describen lo que el componente ya hace van «según el código»; las reglas marcadas canon
+> están aprobadas.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos directos**. Lo usa por dentro
+> `sui-datepicker`.
+
+### `type` y `rangePosition`
+
+| valor | cuándo | fuente |
+|---|---|---|
+| `type="basic"` (default) | Calendario de una fecha. | según el código |
+| `type="range"` | Calendario de rango. Va con `rangePosition`. | según el código |
+| `rangePosition="start"` | Primer día del rango (fondo naranja, esquina izquierda). | según el código |
+| `rangePosition="end"` | Último día (fondo naranja, esquina derecha). | según el código |
+| `rangePosition="in"` | Días del medio (texto naranja, sin fondo propio: la banda la pinta la fila). | según el código |
+| `rangePosition=null` | Fuera del rango. | según el código |
+
+### Estados
+
+| input | cuándo | fuente |
+|---|---|---|
+| `selected` | El día elegido (fondo naranja). Uno solo en `basic`. | según el código |
+| `today` | Hoy: un punto debajo del número. Siempre, para que la persona se ubique. | según el código |
+| `marked` | El día tiene algo (pedidos, un turno). Si además es hoy, gana el punto de hoy. | según el código |
+| `disabled` | Fuera de `min`/`max` o no se puede elegir (local cerrado ese día). | según el código |
+| `outOfMonth` | Días del mes anterior o siguiente que completan la grilla: se ven apagados. | según el código |
+| `ariaLabel` | Siempre que el número solo no alcance: «Martes 7 de octubre, con pedidos». El default dice «Día 7». | canon (aprobado por el dueño, 05-10-2026, bloque B5) |
+
+Usos de hoy que rompen la regla: **0**.
+
+## Tamaño en mobile y en web
+
+Tiene `size`: **`medium`** (default, 40 × 40, Figma) y **`large`** (44 × 44, número en 16/24). El
+`sui-datepicker` `xlarge` pinta sus días en `large`. En el `sui-datepicker` el paso entre celdas es
+de 44 px en mobile (gap 4) y 48 en web (gap 8) con `medium`, y 48 (gap 4) con `large`.
+
+| size | celda | texto | uso | fuente |
+|---|---|---|---|---|
+| `large` | **44 × 44** | 16/24 | celular y tablet táctil: lo que se toca llega a 44 (en 390 entran 7 × 44 con gap 4 = 332) | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono · tablet: D16, dueño 05-10-2026 |
+| `medium` (default) | 40 × 40 | 14/20 | computadora | medido (Figma 437:174) |
+
+Los puntos de hoy y de marcado no cambian con el size.
+
+```html
+<!-- La grilla da el paso: gap 4 -->
+<div class="semana" style={{ 'gap': (4) + 'px' }}>
+  @for (d of dias(); track d.fecha) {
+    <sui-day-cell size={bp.tactil() ? 'large' : 'medium'} day={d.numero} today={d.esHoy}
+                  marked={d.conTurno} onClicked={() => elegir(d)} />
+  }
+</div>
+```
+
+### Por dispositivo (D16)
+
+La celda se toca: sigue «lo que se toca» de D16. Su size grande es `large` (44), el único que llega
+al piso del dedo.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380) | `large` | interino: D16 pide `medium` con área de 44, pero el DS todavía no la estira; 7 × 44 + 6 × 4 = 332 entra en 360 |
+| celular (380–767) | `large` | gap 4 en la grilla |
+| tablet táctil (`pointer: coarse`) | `large` | Apple pide 44 también en iPad |
+| computadora (`pointer: fine`) | `medium` | 40 × 40, el de Figma |
+
+Ultrawide: igual que la computadora. Fuente: D16, dueño 05-10-2026.
+
+En master-pedidos: `size={bp.tactil() ? 'large' : 'medium'}`. `bp.sizeControl()` devuelve lo
+mismo (`'large' | 'medium'`), pero está documentado para botón y campo; la expresión deja claro de
+dónde sale. Si la grilla va con `sui-day-label`, la cabecera también tiene que medir 44 en `large`
+(ver su README).
+
+## «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 suelto (0 usos) | no hay calendarios propios | la semana de turnos del repartidor o el mes de cierres del local |
+| `type="range"` suelto | el rango completo lo resuelve el datepicker, con la banda | ninguno fuera del datepicker |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| prop | atributo | tipo | default |
+|---|---|---|---|
+| `ariaLabel` | `aria-label` | `null \| string` | `null` |
+| `day` | `day` | `number \| string` | — (requerido) |
+| `disabled` | `disabled` | `boolean` | `false` |
+| `marked` | `marked` | `boolean` | `false` |
+| `outOfMonth` | `out-of-month` | `boolean` | `false` |
+| `rangePosition` | `range-position` | `"end" \| "in" \| "start" \| null` | `null` |
+| `selected` | `selected` | `boolean` | `false` |
+| `size` | `size` | `"large" \| "medium"` | `'medium'` |
+| `today` | `today` | `boolean` | `false` |
+| `type` | `type` | `"basic" \| "range"` | `'basic'` |
+
+| evento | `event.detail` |
+|---|---|
+| `clicked` | `MouseEvent` |
+
+### Diferencias con el SUI Angular
+
+Ninguna en nombres de props, eventos y valores.
+<!-- api:fin -->
+
+<!-- textos:inicio -->
+### Textos
+
+Lo que el componente escribe solo sale de `provideSuiTextos` (español por defecto, se cambia en vivo; ver `docs/TEXTOS.md`). El input de la última columna le gana al texto global.
+
+| clave | por defecto | se pisa con |
+|---|---|---|
+| `fecha.dia` | Día {n} | `ariaLabel` |
+<!-- textos:fin -->
+
+## Trampas
+
+- **`day` es el número del día, no una fecha.** Toda la lógica (qué día es, si es hoy) la hace
+  quien lo usa.
+- **La banda del rango no la pinta la celda**: en `in` solo cambia el color del texto. La franja
+  continua la dibuja la fila en el datepicker; suelta, un rango se ve como números naranjas sueltos.
+- `today` y `marked` juntos: se ve solo el punto de hoy.
+- `outOfMonth` no la bloquea: se puede tocar igual. Para bloquearla, `disabled`.
+- Ya trae el arreglo de iOS para el `:active` pegado.
+- Sin `ariaLabel` se anuncia «Día N», sin mes: dentro de `sui-datepicker` ya recibe la fecha
+  completa. Hoy lleva `aria-current="date"` y, en `type="range"`, `start`/`end` salen
+  `aria-selected` (04-10-2026).
+
+## Bien y mal
+
+El día de la grilla
+
+```html
+<!-- ❌ mal: day es el número, no una fecha; la celda no sabe qué día es (Trampas) -->
+<sui-day-cell day={d.fecha} today />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-day-cell day={d.fecha.getDate()} today={d.esHoy} size={bp.tactil() ? 'large' : 'medium'} />
+```
+
+Días del mes vecino que no se eligen
+
+```html
+<!-- ❌ mal: outOfMonth solo los apaga; se pueden tocar igual (Trampas) -->
+<sui-day-cell day={d.numero} out-of-month onClicked={() => elegir(d)} />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-day-cell day={d.numero} out-of-month disabled onClicked={() => elegir(d)} />
+```
+
+Un día con algo
+
+```html
+<!-- ❌ mal: el lector de pantalla dice «Día 12», sin mes ni qué tiene (canon B5) -->
+<sui-day-cell day="12" marked />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-day-cell day="12" marked aria-label="Domingo 12 de octubre, con pedidos" />
+```
+
+## Ejemplo
+
+```html
+<sui-day-cell day="7" today />
+<sui-day-cell day="9" selected />
+<sui-day-cell day="12" marked aria-label="Domingo 12 de octubre, con pedidos" />
+```

package/docs/sui-day-label/README.md

@@ -0,0 +1,142 @@
+---
+name: sui-day-label
+selector: sui-day-label
+resumen: La inicial del día de la semana arriba de cada columna del calendario
+alternativas: [sui-datepicker (el calendario completo, que ya la trae), sui-button-group (elegir días de la semana: L M M J V S D)]
+---
+
+# sui-day-label
+
+<!-- generado por scripts/gen-docs.mjs — no editar a mano; `npm run docs` -->
+
+> **De dónde sale este doc.** El criterio es el del SUI Angular (`sui-day-label`); la API es la de este
+> paquete, leída del código. Los ejemplos se pasaron de Angular de forma mecánica: lo literal va como
+> atributo (`only-icon`, `size="large"`), lo dinámico entre llaves (`size={expr}` → `el.size = expr`)
+> y los eventos como `onValueChange={…}` → `el.addEventListener('valueChange', …)`. `@if`, `@for` y
+> `<ng-template>` quedan como en Angular: se leen como pseudocódigo.
+
+Story: [Molecules/Date & Time/Day Label](https://sui-design-system.web.app/?path=/docs/molecules-date-time-day-label--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** solo como **cabecera de columna** de un calendario armado a mano con `sui-day-cell`.
+
+**No lo uses** para:
+
+- Un calendario normal: `sui-datepicker` ya pone LU, MA, MI, JU, VI, SÁ, DO.
+- **Elegir días de la semana** (el horario del local o los turnos del repartidor): eso se toca,
+  y esto es solo texto. Va `sui-button-group` `multi`.
+- El nombre de un día en una lista («Lunes»): texto normal.
+
+## Qué variante usar
+
+> **La guía del DS no tiene página para este componente** (vive dentro del datepicker). Las
+> reglas marcadas canon están aprobadas; lo que sigue en propuesta espera decisión.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos directos**. Lo usa por dentro
+> `sui-datepicker`.
+
+| input | valor | cuándo | fuente |
+|---|---|---|---|
+| `label` | dos letras en mayúsculas | Lo normal, igual que el datepicker: `LU MA MI JU VI SÁ DO`. La semana arranca el lunes. | propuesta |
+| `label` | una letra | No usar: «M» es martes y miércoles a la vez. | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `label` | tres letras o más | No usar: «MIÉ» entra justo en 40 px, pero rompe el formato de dos letras del datepicker; «LUNES» ya no entra. | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+
+Usos de hoy que rompen la regla: **0**.
+
+## Tamaño en mobile y en web
+
+**No tiene `size`.** Mide 40 × 40, igual que `sui-day-cell` `medium`, para que las columnas calcen.
+No se toca: el tamaño solo importa para alinear. Con `sui-day-cell` `large` (44) la columna ya no
+calza sola: el `sui-datepicker` `xlarge` le pone `width: 44px` desde afuera, y un calendario armado a
+mano tiene que hacer lo mismo.
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| cabecera de columna | 40 × 40 (44 de ancho, desde afuera, si las celdas van en `large`) | 40 × 40 | medido · 44: `sui-datepicker.scss`, size `xlarge` |
+
+```html
+@for (d of ['LU','MA','MI','JU','VI','SÁ','DO']; track d) { <sui-day-label label={d} /> }
+```
+
+### Por dispositivo (D16)
+
+No aplica: **no tiene `size`** y no se toca, así que no sube en ningún dispositivo. Lo único que
+cambia es su ancho, que sigue al de la celda: 44 donde `sui-day-cell` va en `large` (celular chico,
+celular y tablet táctil), 40 en la computadora. Fuente: D16, dueño 05-10-2026.
+
+En master-pedidos: sin `size`; el ancho de 44 sale de la misma señal que la celda,
+`bp.tactil()`.
+
+## «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 suelto (0 usos) | no hay calendarios propios | la cabecera de una semana de turnos armada con `sui-day-cell` |
+| una letra o tres | ambiguo, o rompe el formato del datepicker | ninguno |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| prop | atributo | tipo | default |
+|---|---|---|---|
+| `label` | `label` | `string` | `''` |
+
+Eventos: ninguno.
+
+### Diferencias con el SUI Angular
+
+Ninguna en nombres de props, eventos y valores.
+<!-- api:fin -->
+
+## Trampas
+
+- El host lleva `role="columnheader"`: tiene sentido dentro de un `role="grid"`; suelto, confunde
+  al lector de pantalla.
+- Acepta cualquier texto, pero el ancho es fijo de 40 px: lo que no entra se corta.
+
+## Bien y mal
+
+La cabecera de la semana
+
+```html
+<!-- ❌ mal: «M» es martes y miércoles a la vez (canon B4) -->
+@for (d of ['L','M','M','J','V','S','D']; track $index) { <sui-day-label label={d} /> }
+```
+
+```html
+<!-- ✅ bien -->
+@for (d of ['LU','MA','MI','JU','VI','SÁ','DO']; track d) { <sui-day-label label={d} /> }
+```
+
+Elegir los días que abre el local
+
+```html
+<!-- ❌ mal: es solo texto (columnheader); no se toca ni se marca -->
+@for (d of dias; track d.value) { <sui-day-label label={d.label} onClick={() => alternar(d)} /> }
+```
+
+```html
+<!-- ✅ bien: size por D16 (celular `large`, o `medium` si los 7 no entran: P18, pendiente) -->
+<sui-button-group multi items={dias} size={bp.sizeControl()} value={diasAbiertos} onValueChange={(e) => (diasAbiertos = e.detail)} />
+```
+
+Cabecera sobre celdas de 44
+
+```html
+<!-- ❌ mal: la etiqueta mide 40 y la celda large 44; las columnas se corren -->
+<sui-day-label label="LU" />
+```
+
+```html
+<!-- ✅ bien: el mismo ancho que la celda, como hace el datepicker xlarge -->
+<sui-day-label label="LU" style={{ 'width': (bp.tactil() ? 44 : 40) + 'px' }} style={{ 'max-width': (bp.tactil() ? 44 : 40) + 'px' }} />
+```
+
+## Ejemplo
+
+```html
+<sui-day-label label="LU" />
+```

package/docs/sui-divider/README.md

@@ -0,0 +1,169 @@
+---
+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
+
+<!-- generado por scripts/gen-docs.mjs — no editar a mano; `npm run docs` -->
+
+> **De dónde sale este doc.** El criterio es el del SUI Angular (`sui-divider`); la API es la de este
+> paquete, leída del código. Los ejemplos se pasaron de Angular de forma mecánica: lo literal va como
+> atributo (`only-icon`, `size="large"`), lo dinámico entre llaves (`size={expr}` → `el.size = expr`)
+> y los eventos como `onValueChange={…}` → `el.addEventListener('valueChange', …)`. `@if`, `@for` y
+> `<ng-template>` quedan como en Angular: se leen como pseudocódigo.
+
+Story: [Atoms/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 quedó aprobado por el dueño (canon, 05-10-2026).
+>
+> Uso medido el 04-10-2026 en `master-pedidos/src/app`: **39 dividers en 14 archivos** (los 13 de
+> antes + las 26 líneas a mano que se pasaron el 03-10-2026), 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:1127` (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) | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+
+**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. Quedan **dos líneas a mano** (medido el 06-10-2026):
+`pages/driver/driver-dashboard/driver-dashboard.html:410` (`.dashboard__votaciones-sep`) y
+`pages/customer/viaje/viaje.html:111` (`.vj__ruta-divisor`).
+
+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: **D16, tamaño por dispositivo** (canon, dueño, 05-10-2026), que reemplaza al
+«tamaño por plataforma» del 03-10-2026 (mobile grande, web chico). La columna «mobile» es el celular de
+380 px o más y, en lo que se toca, también la tablet (`pointer: coarse`). La columna «web» es la
+computadora (`pointer: fine`) y, en lo que no se toca, también la tablet. En el celular chico
+(< 380 px) va `medium` a la vista, sin achicar el área de 44 de lo que se toca. **Nada en `small` ni
+`xsmall`**, salvo lo que el componente solo tiene en chico. En la app, `BreakpointsService` ya
+mira el puntero y los 380 px: `bp.tactil()` (celular o pantalla táctil), `bp.celular()` (380–767) y
+`bp.celularChico()` (< 380).
+
+### Por dispositivo (D16)
+
+**No aplica**: no tiene `size` y es 1 px en todos los dispositivos (celular chico, celular, tablet
+táctil, computadora y ultrawide). Lo que cambia es el `gap` del padre, que separa los bloques (la
+regla de spacing de la app: 20/16/12 según el breakpoint). Fuente: D16, dueño 05-10-2026.
+
+En master-pedidos: sin `size`.
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| prop | atributo | tipo | default |
+|---|---|---|---|
+| `orientation` | `orientation` | `"horizontal" \| "vertical"` | `'horizontal'` |
+
+Eventos: ninguno.
+
+### Diferencias con el SUI Angular
+
+Ninguna en nombres de props, eventos y valores.
+<!-- 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.
+
+## Bien y mal
+
+Separar dos bloques dentro de una card
+
+```html
+<!-- ❌ mal: línea hecha a mano (pages/driver/driver-dashboard/driver-dashboard.html:410, .scss:1527) -->
+<div class="dashboard__votaciones-sep"></div>
+```
+
+```html
+<!-- ✅ bien: la línea la pone el divider; la clase se queda solo con el margin, como en checkout y carrito -->
+<sui-divider class="dashboard__votaciones-sep" />
+```
+
+Una línea entre las filas de una lista
+
+```html
+<!-- ❌ mal: uno por fila; el último sobra y queda pegado al borde (Trampas) -->
+@for (f of filas; track f.id) {
+  <app-fila fila={f} />
+  <sui-divider />
+}
+```
+
+```html
+<!-- ✅ bien -->
+@for (f of filas; track f.id; let last = $last) {
+  <app-fila fila={f} />
+  @if (!last) { <sui-divider /> }
+}
+```
+
+Datos en una fila
+
+```html
+<!-- ❌ mal: el padre no tiene alto ni centra; la línea queda de 16 px y descolgada (Trampas) -->
+<div><span>4.7</span><sui-divider orientation="vertical" /><span>25–35 min</span></div>
+```
+
+```html
+<!-- ✅ bien: .meta { display: flex; align-items: center; height: 20px; gap: 8px } -->
+<div class="meta"><span>4.7</span><sui-divider orientation="vertical" /><span>25–35 min</span></div>
+```
+
+## 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>
+```