{ "name": "accordion", "title": { "es": "Acordeón", "en": "Accordion" }, "summary": { "es": "Secciones que se abren y cierran. Funciona sin JavaScript.", "en": "Sections that open and close. Works without JavaScript." }, "category": "disclosure", "status": "stable", "nivel": "componentes", "updated": "2026-09-29", "license": "MIT", "page": "https://componentes-lovat.vercel.app/c/accordion/", "requires": [], "files": [ { "type": "html", "url": "https://componentes-lovat.vercel.app/raw/accordion/accordion.html", "content": "
\n
\n ¿Qué es Componentes?\n
Una colección de componentes web en HTML, CSS y JavaScript, sin dependencias, listos para copiar.
\n
\n
\n ¿Puedo usarlos en proyectos comerciales?\n
Sí. El código tiene licencia MIT: úsalo y cita la fuente.
\n
\n
\n ¿Funcionan sin JavaScript?\n
Este sí: es el elemento details del navegador. Con el mismo name, abrir uno cierra los demás.
\n
\n
\n" }, { "type": "css", "url": "https://componentes-lovat.vercel.app/raw/accordion/accordion.css", "content": "/* accordion · Componentes (MIRÓ Labs). Diseño de coss ui (MIT, © coss.com, antes Origin UI).\n Generado por tools/build_css.py desde accordion.tw.json. No editar a mano. Necesita tokens.css. */\n.c-accordion__indicator{pointer-events:none}\n.c-accordion__trigger{display:flex}\n.c-accordion__indicator{width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}\n.c-accordion{width:100%;max-width:var(--container-md)}\n.c-accordion__trigger{flex:1}\n.c-accordion__indicator{flex-shrink:0;--tw-translate-y:calc(var(--spacing)*.5);translate:var(--tw-translate-x)var(--tw-translate-y)}\n.c-accordion__trigger{cursor:pointer;align-items:flex-start;justify-content:space-between;gap:calc(var(--spacing)*4)}\n.c-accordion__panel{overflow:hidden}\n.c-accordion__trigger{border-radius:calc(var(--radius) - 2px)}\n.c-accordion__item{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}\n.c-accordion__trigger{padding-block:calc(var(--spacing)*4)}\n.c-accordion__content{padding-top:calc(var(--spacing)*0);padding-bottom:calc(var(--spacing)*4)}\n.c-accordion__trigger{text-align:left;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}\n.c-accordion__panel{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}\n.c-accordion__trigger{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}\n.c-accordion__panel{color:var(--muted-foreground)}\n.c-accordion__indicator{opacity:.8}\n.c-accordion__trigger{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}\n.c-accordion__indicator{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.2s;transition-duration:.2s;--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}\n.c-accordion__trigger{--tw-outline-style:none;outline-style:none}\n.c-accordion__item:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}\n.c-accordion__trigger:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(3px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color:var(--ring)}\n/* propio */\n.c-accordion__trigger{list-style:none}\n.c-accordion__trigger::-webkit-details-marker{display:none}\n.c-accordion__item[open]>.c-accordion__trigger .c-accordion__indicator{rotate:180deg}\n/* Altura animada donde el navegador lo permite (Chrome 131+); en los demás abre sin animar. */\n@supports (interpolate-size: allow-keywords){\n .c-accordion{interpolate-size:allow-keywords}\n .c-accordion__item::details-content{height:0;overflow:hidden;transition:height .2s ease-in-out,content-visibility .2s allow-discrete}\n .c-accordion__item[open]::details-content{height:auto}\n}\n" }, { "type": "standalone", "url": "https://componentes-lovat.vercel.app/r/accordion.html" } ], "tokensFile": "https://componentes-lovat.vercel.app/tokens.css", "darkTheme": "add class 'dark' to ", "contexto": "ambos", "densidad": "media", "tono": "sobria", "states": [ "rest", "hover", "focus", "open" ], "use": { "es": [ "Para preguntas frecuentes y paneles largos." ], "en": [ "For FAQs and long panels." ] }, "avoid": { "es": [ "Para el contenido principal." ], "en": [ "For the main content." ] }, "a11y": { "roles": [ "group", "button (summary)" ], "keyboard": [ { "keys": "Enter / Espacio", "es": "Abre o cierra", "en": "Opens or closes" } ], "notes": { "es": [ "Es
nativo: el navegador anuncia expandido o contraído.", "Con el mismo name, abrir uno cierra los demás.", "La altura se anima en Chrome 131+ (interpolate-size)." ], "en": [ "It is native
: the browser announces expanded or collapsed.", "With the same name, opening one closes the others.", "Height animates in Chrome 131+ (interpolate-size)." ] }, "test": { "es": [ "Abre la segunda pregunta: la primera se cierra." ], "en": [ "Open the second question: the first one closes." ] } }, "issues": { "es": [], "en": [] }, "credits": [ { "source": "coss ui (MIT) · accordion.tsx", "url": "https://coss.com/ui" }, { "source": "W3C WAI-ARIA APG, Accordion", "url": "https://www.w3.org/WAI/ARIA/apg/patterns/accordion/" } ], "changes": [ { "date": "2026-09-29", "es": "Diseño de coss ui en HTML, CSS y JS sin dependencias", "en": "coss ui design in dependency-free HTML, CSS and JS" } ], "partes": [], "pieza": "https://componentes-lovat.vercel.app/r/accordion.html" }