{
  "name": "drawer",
  "title": {
    "es": "Drawer",
    "en": "Drawer"
  },
  "summary": {
    "es": "Panel lateral para filtros, ajustes o detalles.",
    "en": "Side panel for filters, settings or details."
  },
  "category": "overlays",
  "status": "stable",
  "nivel": "componentes",
  "updated": "2026-09-29",
  "license": "MIT",
  "page": "https://componentes-lovat.vercel.app/c/drawer/",
  "requires": [
    "button",
    "text-field",
    "dialog"
  ],
  "files": [
    {
      "type": "html",
      "url": "https://componentes-lovat.vercel.app/raw/drawer/drawer.html",
      "content": "<button class=\"c-btn c-btn--outline\" type=\"button\" commandfor=\"drawer-filters\" command=\"show-modal\">Abrir filtros</button>\n\n<dialog class=\"c-drawer\" id=\"drawer-filters\" aria-labelledby=\"drawer-title\" aria-describedby=\"drawer-desc\" closedby=\"any\">\n  <form class=\"c-drawer__form\" method=\"dialog\">\n    <div class=\"c-drawer__header\">\n      <h2 class=\"c-drawer__title\" id=\"drawer-title\">Filtros</h2>\n      <p class=\"c-drawer__description\" id=\"drawer-desc\">Ajusta qué proyectos ves en la lista.</p>\n    </div>\n    <div class=\"c-drawer__panel\">\n      <div class=\"c-field\"><label class=\"c-label\" for=\"drawer-q\">Buscar</label><span class=\"c-input\"><input class=\"c-input__field\" id=\"drawer-q\" type=\"search\" placeholder=\"Nombre del proyecto\"></span></div>\n      <div class=\"c-field\"><label class=\"c-label\" for=\"drawer-owner\">Responsable</label><span class=\"c-input\"><input class=\"c-input__field\" id=\"drawer-owner\" placeholder=\"Cualquiera\"></span></div>\n    </div>\n    <div class=\"c-drawer__footer\">\n      <button class=\"c-btn c-btn--ghost\" value=\"reset\">Limpiar</button>\n      <button class=\"c-btn c-btn--primary\" value=\"apply\">Aplicar</button>\n    </div>\n    <button class=\"c-btn c-btn--ghost c-btn--icon c-drawer__close\" type=\"button\" commandfor=\"drawer-filters\" command=\"close\" aria-label=\"Cerrar\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M18 6 6 18\"/><path d=\"m6 6 12 12\"/></svg></button>\n  </form>\n</dialog>\n"
    },
    {
      "type": "css",
      "url": "https://componentes-lovat.vercel.app/raw/drawer/drawer.css",
      "content": "/* drawer · Componentes (MIRÓ Labs). Diseño de coss ui (MIT, © coss.com, antes Origin UI).\n   Generado por tools/build_css.py desde drawer.tw.json. No editar a mano. Necesita tokens.css. */\n.c-drawer__close{position:absolute;inset-inline-end:calc(var(--spacing)*2);top:calc(var(--spacing)*2)}\n.c-drawer__footer{margin-top:auto}\n.c-drawer{display:flex}\n.c-drawer__header{display:flex}\n.c-drawer__footer{display:flex}\n.c-drawer{max-height:100%;min-height:calc(var(--spacing)*0);width:calc(100% - (calc(var(--spacing)*12)));width:100%;max-width:var(--container-md);min-width:calc(var(--spacing)*0);flex-direction:column}\n.c-drawer__header{flex-direction:column}\n.c-drawer__footer{flex-direction:column-reverse}\n.c-drawer__header{gap:calc(var(--spacing)*2)}\n.c-drawer__footer{gap:calc(var(--spacing)*2)}\n.c-drawer{border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px;background-color:var(--popover)}\n.c-drawer__header{padding:calc(var(--spacing)*6)}\n.c-drawer__panel{padding:calc(var(--spacing)*6)}\n.c-drawer__footer{padding-inline:calc(var(--spacing)*6)}\n.c-drawer__panel{padding-top:calc(var(--spacing)*1)}\n.c-drawer__footer{padding-top:calc(var(--spacing)*4);padding-bottom:calc(var(--spacing)*6)}\n.c-drawer__description{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}\n.c-drawer__title{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));--tw-leading:1;line-height:1;--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}\n.c-drawer__description{color:var(--muted-foreground)}\n.c-drawer{color:var(--popover-foreground);--tw-shadow-alpha:5%;--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000000d),0 4px 6px -4px var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}\n@supports (color:lab(0% 0 0)){\n.c-drawer{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,lab(0% 0 0/.05)),0 4px 6px -4px var(--tw-shadow-color,lab(0% 0 0/.05))}\n}\n.c-drawer{transition-property:opacity,translate;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);will-change:transform}\n.c-drawer:not(:is(.dark *)){background-clip:padding-box}\n.c-drawer:before{content:var(--tw-content);pointer-events:none;content:var(--tw-content);position:absolute;content:var(--tw-content);inset:calc(var(--spacing)*0);content:var(--tw-content);--tw-shadow:0 1px var(--tw-shadow-color,#0000000a)}\n@supports (color:color-mix(in lab, red, red)){\n.c-drawer:before{--tw-shadow:0 1px var(--tw-shadow-color,color-mix(in oklab,var(--color-black)4%,transparent))}\n}\n.c-drawer:before{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}\n@media not all and (min-width:40rem){\n.c-drawer__header{padding-bottom:calc(var(--spacing)*4)}\n.c-drawer:before{content:var(--tw-content);display:none}\n}\n@media (min-width:40rem){\n.c-drawer__footer{flex-direction:row;justify-content:flex-end}\n}\n.c-drawer:is(.dark *):before{content:var(--tw-content);--tw-shadow:0 -1px var(--tw-shadow-color,#ffffff0f)}\n@supports (color:color-mix(in lab, red, red)){\n.c-drawer:is(.dark *):before{--tw-shadow:0 -1px var(--tw-shadow-color,color-mix(in oklab,var(--color-white)6%,transparent))}\n}\n.c-drawer:is(.dark *):before{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}\n/* propio */\n.c-drawer{position:fixed;padding:0;margin:0 0 0 auto;height:100dvh;max-height:100dvh;color:var(--popover-foreground);opacity:0;translate:2rem 0;transition:opacity .2s ease-in-out,translate .2s ease-in-out,overlay .2s allow-discrete,display .2s allow-discrete}\n.c-drawer[open]{display:flex;opacity:1;translate:0 0}\n@starting-style{.c-drawer[open]{opacity:0;translate:2rem 0}}\n.c-drawer::backdrop{background:color-mix(in oklab,#000 32%,transparent);backdrop-filter:blur(4px);opacity:0;transition:opacity .2s,overlay .2s allow-discrete,display .2s allow-discrete}\n.c-drawer[open]::backdrop{opacity:1}\n@starting-style{.c-drawer[open]::backdrop{opacity:0}}\n.c-drawer__close{position:absolute}\n.c-drawer__form{display:contents}\n.c-drawer__panel{display:grid;gap:1rem;overflow-y:auto}\nhtml:has(.c-drawer[open]:modal){overflow:hidden}\n"
    },
    {
      "type": "standalone",
      "url": "https://componentes-lovat.vercel.app/r/drawer.html"
    }
  ],
  "tokensFile": "https://componentes-lovat.vercel.app/tokens.css",
  "darkTheme": "add class 'dark' to <html>",
  "contexto": "herramienta",
  "densidad": "media",
  "tono": "sobria",
  "states": [
    "closed",
    "open"
  ],
  "use": {
    "es": [
      "Para tareas secundarias sin perder la página de vista."
    ],
    "en": [
      "For secondary tasks without losing the page."
    ]
  },
  "avoid": {
    "es": [
      "Para confirmaciones cortas: usa un diálogo."
    ],
    "en": [
      "For short confirmations: use a dialog."
    ]
  },
  "a11y": {
    "roles": [
      "dialog"
    ],
    "keyboard": [
      {
        "keys": "Esc",
        "es": "Cierra",
        "en": "Closes"
      },
      {
        "keys": "Tab",
        "es": "Recorre solo el panel",
        "en": "Cycles within the panel"
      }
    ],
    "notes": {
      "es": [
        "También es <dialog> nativo: foco atrapado, Esc y clic fuera cierran.",
        "Entra desde la derecha; con «reducir movimiento» aparece sin deslizar."
      ],
      "en": [
        "Also a native <dialog>: focus trapped, Esc and outside click close it.",
        "Slides in from the right; with reduced motion it appears without sliding."
      ]
    },
    "test": {
      "es": [
        "Abre «Filtros», pulsa Esc: el foco vuelve a «Abrir filtros»."
      ],
      "en": [
        "Open “Filters”, press Esc: focus returns to “Open filters”."
      ]
    }
  },
  "issues": {
    "es": [],
    "en": []
  },
  "credits": [
    {
      "source": "coss ui (MIT) · sheet.tsx",
      "url": "https://coss.com/ui"
    },
    {
      "source": "W3C WAI-ARIA APG, Dialog (Modal)",
      "url": "https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/"
    }
  ],
  "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/drawer.html"
}