@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,235 @@
+---
+name: sui-content-card
+selector: sui-content-card
+resumen: Fila «cara + nombre + detalle» dentro de su propia cajita, con badge y una X opcional para quitarla
+alternativas: [sui-content-label (la misma fila sin caja, dentro de una card que ya existe), sui-card (contenido libre), sui-radio-card / sui-checkbox-card (la fila se elige)]
+---
+
+# sui-content-card
+
+<!-- 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-content-card`); la API es la de este
+> paquete, leída del código. Los ejemplos se pasaron de Angular de forma mecánica: lo literal va como
+> atributo (`only-icon`, `size="large"`), lo dinámico entre llaves (`size={expr}` → `el.size = expr`)
+> y los eventos como `onValueChange={…}` → `el.addEventListener('valueChange', …)`. `@if`, `@for` y
+> `<ng-template>` quedan como en Angular: se leen como pseudocódigo.
+>
+> **La API de aquí no es igual a la de Angular.** Lo que el texto nombre y figure en «Diferencias con
+> el SUI Angular» (dentro de API) aquí no existe.
+
+Story: [Molecules/Card/Content Card](https://sui-design-system.web.app/?path=/docs/molecules-card-content-card--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** para una fila suelta que representa a alguien o algo, con su propia caja: el top de
+locales, clientes y repartidores del resumen del super admin, una persona del equipo que se puede
+quitar, un método de pago guardado.
+
+**No lo uses** para:
+
+- Filas dentro de una card que ya pone el borde: `sui-content-label` (si no, queda caja dentro de
+  caja).
+- Una fila que se elige: `sui-radio-card` o `sui-checkbox-card`.
+- Una fila que se toca para abrir un detalle: hoy no tiene `interactive`; usa `sui-card
+  [interactive]` con un `sui-content-label` adentro.
+
+Regla corta: **fila suelta con caja → content-card · filas dentro de una card → content-label ·
+se elige → card de selección.**
+
+## Qué variante usar
+
+> **La guía del DS no tiene página de la content card.** Es un `sui-content-label size="medium"`
+> envuelto en una card con la X. Lo que sigue es práctica de la app («propuesta») salvo lo
+> aprobado («canon»).
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-card`): **4
+> content-cards, todas en `pages/super-admin/master-overview/master-overview.html`**. Tipos:
+> `avatar` (o `left-icon` cuando el local no tiene logo). Las 4 con `dismissible="false"`; 1 con
+> `badge` (la nota del local).
+
+### `type` (el leading)
+
+| type | cuándo | fuente |
+|---|---|---|
+| `avatar` (`avatar`) | Una persona o un local con foto. El color de las iniciales va por rol: local `orange`, repartidor `green`, cliente `blue`. | canon (avatar por rol) · el uso: canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `left-icon` (`icon`) | La misma fila cuando no hay foto: `store-2-line` para el local sin logo. | canon (aprobado por el dueño, 05-10-2026, bloque B2; precedente `master-overview.html:224`) |
+| `basic` | Ver «No usar». | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `company` (`avatar` + `companyLogoSrc`) | Ver «No usar». | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `brand` (`brand`) | Ver «No usar». | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `card-provider` (`brand`) | Ver «No usar». | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+
+### Las piezas
+
+| prop | cuándo | fuente |
+|---|---|---|
+| `title` | Siempre. El nombre, nunca un id (regla de la pasada de UX). | canon (CLAUDE.md, «un identificador nunca es el título») |
+| `subtitle` | El dato que se compara entre filas: «214 pedidos este mes», «38 calificaciones». | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `badge` | Un dato chico que se compara de un vistazo (la nota). El color sigue el significado del badge: `red` si está mal. | canon (aprobado por el dueño, 05-10-2026, bloque B3; badge: canon de colores) |
+| `dismissible` | La X solo cuando quitar la fila ES la acción (sacar a alguien del equipo, borrar una tarjeta). **El default es `true`**: pasa `false` siempre que no. | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
+| `dismissAriaLabel` | Siempre que haya X: «Quitar a Rosa del equipo», no el default «Descartar». | propuesta |
+| `sublabel` | Ver «No usar». | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `disabled` | Ver «No usar». | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+
+**Usos de hoy que rompen las reglas:** 0. Las 4 apagan la X a mano: el default de `dismissible`
+no le sirve a ningún uso de hoy.
+
+## Tamaño en mobile y en web
+
+La fila mide 74 en las dos: leading de 40 + padding 16 × 2 + borde 1 × 2 (`sui-content-card.scss:19,21`; Figma la dibuja en 72 con el borde por dentro). El `size` cambia **solo la X de quitar**:
+
+| size | X visible | área táctil | glyph | fuente |
+|---|---|---|---|---|
+| `medium` (default) | 20 × 20 | 20 × 20 | 20 | Figma |
+| `large` | 32 × 32 (radius 8 al hover) | 44 × 44 en el teléfono, 40 × 40 en web (`::before` invisible) | 20 | canon (aprobado por el dueño, 03-10-2026): extensión SUI · 44: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono |
+
+En `large` el glyph queda en el mismo lugar que en `medium` (la caja grande se come el aire del
+gap con margen negativo), así que la fila se ve igual: lo que crece es dónde se puede tocar. En el teléfono el área
+táctil de `large` es de **44** (desde el 04-10-2026; 40 en web).
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| fila | 74, sin cambio | 74, sin cambio | medido del `.scss` |
+| X para quitar | `large` (32, área 44) | `medium` (20) | mobile: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono · web: canon (aprobado por el dueño, 05-10-2026, bloque B1) (el tamaño `large` es extensión SUI aprobada el 03-10-2026) |
+
+```html
+<sui-content-card … size={bp.tactil() ? 'large' : 'medium'} onDismiss={() => quitar(item)} />
+```
+
+### Por dispositivo (D16)
+
+No está en la tabla por componente de D16 (dueño, 05-10-2026). La fila no cambia; el `size` solo
+mueve la X, que **se toca**, así que va como «lo que se toca».
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380 px) | `large` (32, área 44) | interino: D16 pide `medium` con área de 44, pero la X `medium` tiene área de 20; hasta que el DS la estire, el mismo que el celular |
+| celular (380–767 px) | `large` (32, área 44) | |
+| tablet táctil (`pointer: coarse`) | `large` (32, área 40) | también se toca. Ojo: el área de 44 del `::before` está bajo `@media (max-width: 767px)` (`sui-content-card.scss:118`), así que en la tablet se queda en 40 hasta que el DS la prenda con `pointer: coarse` |
+| computadora (`pointer: fine`) | `medium` (20) | |
+
+Ultrawide (≥ 1920 px): igual que la computadora. Con `dismissible="false"` (los 4 usos de hoy) el
+`size` no cambia nada y no hace falta pasarlo. El badge de adentro **no se toca**: su `size` va
+dentro del objeto `badge` con `bp.sizeBadge()` (como `master-overview.html:335`).
+
+En master-pedidos: `size={bp.tactil() ? 'large' : 'medium'}` (no hay helper propio).
+
+## «No usar»: por qué no hoy y cuándo sí
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| `type="basic"` (0 usos) | las 4 filas tienen cara | un dato sin cara: una dirección guardada |
+| `type="company"` (0 usos) | no se listan empleados | un empleado con el logo de su local en la esquina |
+| `type="brand"` (0 usos) | no hay servicios conectados | WhatsApp o Mapbox conectado, con su logo |
+| `type="card-provider"` (0 usos) | no hay pago con tarjeta guardada | una tarjeta guardada, cuando entre Culqi / Niubiz |
+| `sublabel` (0 usos) | ninguna fila lo pide | «(tú)» en la lista del equipo |
+| `disabled` (0 usos) | ninguna fila está apagada | un repartidor suspendido en la lista de su local |
+| `dismissible` en mobile con `size="medium"` | la X mide 20 | nunca: en mobile va `size="large"` |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| prop | atributo | tipo | default |
+|---|---|---|---|
+| `avatar` | `avatar` | `SuiAvatarConfig \| null \| string` | `null` |
+| `badge` | `badge` | `SuiBadgeConfig \| null \| string` | `null` |
+| `brand` | `brand` | `"adobe" \| "amazon" \| "apple" \| "bitcoin" \| "discord" \| "dropbox" \| "facebook" \| "figma" \| "framer" \| "github" \| "google" \| "instagram" \| "linkedin" \| "microsoft" \| "netflix" \| "notion" \| "paypal" \| "pinterest" \| "slack" \| "spotify" \| "stripe" \| "telegram" \| "twitch" \| "webflow" \| "whatsapp" \| "wise" \| "x-twitter" \| "youtube" \| null` | `null` |
+| `cardTitle` | `card-title` | `string` | `''` |
+| `companyLogoSrc` | `company-logo-src` | `null \| string` | `null` |
+| `disabled` | `disabled` | `boolean` | `false` |
+| `dismissAriaLabel` | `dismiss-aria-label` | `string` | `'Descartar'` |
+| `dismissible` | `dismissible` | `boolean` | `true` |
+| `icon` | `icon` | `null \| string` | `null` |
+| `size` | `size` | `"large" \| "medium"` | `'medium'` |
+| `sublabel` | `sublabel` | `string` | `''` |
+| `subtitle` | `subtitle` | `string` | `''` |
+| `type` | `type` | `"avatar" \| "basic" \| "brand" \| "card-provider" \| "company" \| "left-icon"` | `'basic'` |
+
+| evento | `event.detail` |
+|---|---|
+| `dismiss` | `MouseEvent` |
+
+### Diferencias con el SUI Angular
+
+- **Props de Angular que aquí no existen:** `title`
+- **Props solo de aquí:** `cardTitle`
+<!-- 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 |
+|---|---|---|
+| `varios.descartar` | Descartar | `dismissAriaLabel` |
+<!-- textos:fin -->
+
+## Trampas
+
+- **`dismissible` arranca en `true`**: sin `dismissible="false"` aparece una X que no hace nada.
+- **Aquí se llama `title` / `subtitle`**; en `sui-content-label` la misma fila es `label` /
+  `description`.
+- **`badge` con string sale naranja `lighter` `small`** (en MAYÚSCULAS); en el content-label el
+  mismo string sale `medium`.
+- `card-provider` toma el logo de `brand` y lo pone en una cajita de 32 × 24 (no hay assets de
+  tarjetas en el DS).
+- No tiene `interactive` ni output de toque: la fila no se puede tocar entera.
+- El host borra el atributo `title` del DOM y lleva `role="group"` con `aria-label` = `title`.
+
+## Bien y mal
+
+**La nota como badge**
+
+```html
+<!-- ❌ mal: badge en string sale naranja lighter small, en MAYÚSCULAS (prototipo: master-prototipos.html:146) -->
+<sui-content-card type="avatar" avatar={{ initials: yo.iniciales, color: 'orange' }} title={yo.nombre}
+                  badge="★ 5.0" dismissible="false" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-content-card type="avatar" avatar={{ initials: yo.iniciales, color: 'orange' }} title={yo.nombre}
+                  badge={{ label: '5.0 ★', color: 'orange', variant: 'lighter', size: bp.sizeBadge() }}
+                  dismissible="false" />
+```
+
+**Una fila que no se quita**
+
+```html
+<!-- ❌ mal: dismissible arranca en true; sale una X que no hace nada -->
+<sui-content-card type="avatar" avatar={avatarDe(c, 'blue')} title={c.nombre} subtitle={c.detalle} />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-content-card type="avatar" avatar={avatarDe(c, 'blue')} title={c.nombre} subtitle={c.detalle}
+                  dismissible="false" />
+```
+
+**Una fila que sí se quita**
+
+```html
+<!-- ❌ mal: la X en medium mide 20 en el celular y se anuncia como «Descartar» -->
+<sui-content-card type="avatar" avatar={m.avatar} title={m.nombre} onDismiss={() => quitar(m)} />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-content-card type="avatar" avatar={m.avatar} title={m.nombre} size={bp.tactil() ? 'large' : 'medium'}
+                  dismissAriaLabel={'Quitar a ' + m.nombre + ' del equipo'} onDismiss={() => quitar(m)} />
+```
+
+## Ejemplo
+
+```html
+<sui-content-card
+  type="avatar"
+  avatar={{ src: local.logo, initials: 'SA', color: 'orange' }}
+  title={local.nombre}
+  subtitle={local.pedidos + ' pedidos este mes'}
+  badge={{ label: '4.6 ★', color: 'orange', variant: 'lighter', size: bp.sizeBadge() }}
+  dismissible="false" />
+```

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

@@ -0,0 +1,198 @@
+---
+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
+
+<!-- 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-content-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/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; las reglas marcadas canon
+> están aprobadas; lo que sigue en propuesta espera decisión.
+>
+> Uso medido el 04-10-2026 en `master-pedidos/src/app`: **3 content-dividers en 3 archivos**:
+> `pages/auth/login/login.html:61` y `pages/auth/register/register.html:97` (`text-line` «o») y
+> `pages/super-admin/master-drivers/master-drivers.html:192` (`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:192`) | 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) · cuándo: canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `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"` | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `text-button` | **No usar** hoy (ver abajo). | «Ver 12 más» | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `icon-button-group` | **No usar** hoy (ver abajo). | Subir · agregar · bajar | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `text-button-group` | **No usar** hoy (ver abajo). | «Producto» · «Sección» | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+
+| propiedad | regla | fuente |
+|---|---|---|
+| `text` | Se escribe en sentence case («o», «Con pocos pedidos»): el componente lo pasa a MAYÚSCULAS. | canon (CANON-SUI §5.1: sentence case, nunca ALL CAPS a mano) |
+| `icon` | Solo en `icon-button`. Nombre Remix sin `ri-`. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `ariaLabel` | **Obligatorio en `icon-button`**: sin él el lector dice «Acción». | canon (aprobado por el dueño, 05-10-2026, bloque B5) |
+| `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). | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
+
+**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: **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. Hoy la app corta con
+`BreakpointsService.isMobile()` (≤ 767 px), que todavía no mira el puntero ni los 380 px.
+
+| 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.
+
+### Por dispositivo (D16)
+
+No aplica: **no tiene `size`** (texto de 11–12 y botones de 32 en todos los dispositivos, del
+celular chico al ultrawide). Con D16 los botones de 32 quedan bajo los 44 también en la tablet
+táctil (`pointer: coarse`), no solo en el celular: una razón más para no usar los tipos con botón
+hasta que el DS tenga un tamaño grande.
+
+En master-pedidos: no hay helper ni `size`; solo `type` y `text`.
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| prop | atributo | tipo | default |
+|---|---|---|---|
+| `ariaLabel` | `aria-label` | `null \| string` | `null` |
+| `disabled` | `disabled` | `boolean` | `false` |
+| `icon` | `icon` | `null \| string` | `null` |
+| `items` | — (solo por propiedad JS) | `SuiContentDividerItem[]` | `[]` |
+| `text` | `text` | `string` | `''` |
+| `type` | `type` | `"icon-button" \| "icon-button-group" \| "line" \| "line-spacing" \| "solid-text" \| "text" \| "text-button" \| "text-button-group" \| "text-line"` | `'line'` |
+
+| evento | `event.detail` |
+|---|---|
+| `buttonClick` | `MouseEvent` |
+| `itemClick` | `SuiContentDividerItemClick` |
+
+### 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 |
+|---|---|---|
+| `comun.accion` | Acción | `ariaLabel` |
+| `comun.accionN` | Acción {n} | `ariaLabel` de cada ítem |
+<!-- textos:fin -->
+
+Outputs: `buttonClick` en `icon-button` y `text-button`; `itemClick` con
+`{ item, index, event }` en los `-group`.
+
+## Trampas
+
+- **El texto de `text-line`, `text` y `solid-text` sale en MAYÚSCULAS** por CSS: escribirlo normal.
+  Los botones (`text-button`, `text-button-group`) no van en mayúsculas.
+- **`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`.
+
+## Bien y mal
+
+**El «o» entre Google y el correo**
+
+```html
+<!-- ❌ mal: el «o» armado a mano, como estaba en login.html:61 y register.html:97 hasta el 03-10-2026 -->
+<div class="auth-page__divider"><span>o</span></div>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-content-divider type="text-line" text="o" />
+```
+
+**Cabecera de grupo en MAYÚSCULAS a mano**
+
+```html
+<!-- ❌ mal: el componente ya lo pasa a MAYÚSCULAS; el texto va en sentence case (CANON-SUI §5.1) -->
+<sui-content-divider type="solid-text" text="CON POCOS PEDIDOS" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-content-divider type="solid-text" text="Con pocos pedidos" />
+```
+
+**Una línea sola entre dos bloques**
+
+```html
+<!-- ❌ mal: `line` no dice nada; la línea sola es `sui-divider`, que pesa menos -->
+<sui-content-divider type="line" />
+```
+
+```html
+<!-- ✅ bien -->
+<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" />
+```