# `` separador decorativo. glifo tipográfico repetido, SVG, GIF o cualquier HTML interno. vanilla, light DOM, fallback con texto plano sin JS. --- ## uso mínimo ```html ``` renderiza tres `✦` centrados. --- ## atributos | atributo | tipo / valores | default | descripción | |-----------|---------------------|---------|-------------| | `glyph` | string (1 carácter) | `✦` | el glifo a repetir. ignorado si hay children. | | `repeat` | number | `3` | cuántas veces repetir el glyph (clamp: 1-50). ignorado si hay children. | | `lang` | `es` · `en` · `ca` | `es` | idioma del `aria-label` por defecto. | si hay **children** (texto, ``, ``, etc.), se renderizan tal cual centrados y el par `glyph`/`repeat` se ignora. --- ## CSS variables | variable | default | qué controla | |-------------------------|----------------------|---------------------------| | `--r-divider-color` | `--r-fg` → `#1a1a1a` | color de los glifos | | `--r-divider-size` | `1.2rem` | tamaño tipográfico | | `--r-divider-gap` | `1rem` | separación entre items | | `--r-divider-margin` | `1.5rem auto` | margen exterior | | `--r-divider-opacity` | `0.7` | transparencia general | --- ## tres ejemplos ### 1) mínimo ```html ``` ### 2) glifo personalizado ```html ``` ### 3) contenido custom ```html ``` --- ## accesibilidad el componente se anota como `role="separator"` con `aria-orientation="horizontal"` y un `aria-label` traducido (`separador decorativo` / `decorative separator` / `separador decoratiu`). los glifos individuales llevan `aria-hidden="true"` para que el screen reader anuncie el divider una sola vez. si quieres sobrescribir el label, pasa `aria-label="..."` y se respeta. --- ## comportamiento sin JS el `` se renderiza como inline. los children (si los hay) son visibles, los atributos `glyph`/`repeat` se ignoran (sin JS no hay quien los repita). para fallback estilado, añade al ``: ```html ``` --- *retals · vanilla, forever · meowrhino studio*