{
  "name": "drawer-with-create-form",
  "kind": "block",
  "primary": "div",
  "page": "/packages/web-components/components/drawer/drawer.examples.html",
  "slots": [],
  "nested": [],
  "attrs": {
    "data-artifact-item": "",
    "data-artifact-label": "form drawer — create"
  },
  "html": "<button-ui text=\"+ New project\" variant=\"outline\" size=\"sm\" onclick=\"this.nextElementSibling.open=true\"></button-ui>\n      <drawer-ui side=\"right\" size=\"md\" text=\"New project\">\n        <section slot=\"body\">\n          <col-ui gap=\"3\">\n            <field-ui label=\"Project name\" required>\n              <input-ui placeholder=\"My awesome project\"></input-ui>\n            </field-ui>\n            <field-ui label=\"Description\">\n              <textarea-ui placeholder=\"Optional description…\" rows=\"3\"></textarea-ui>\n            </field-ui>\n            <field-ui label=\"Status\">\n              <select-ui value=\"active\">\n                <option value=\"active\">Active</option>\n                <option value=\"draft\">Draft</option>\n                <option value=\"archived\">Archived</option>\n              </select-ui>\n            </field-ui>\n            <check-ui label=\"Notify team members\" checked></check-ui>\n          </col-ui>\n        </section>\n        <footer slot=\"footer\">\n          <row-ui gap=\"2\" justify=\"end\">\n            <button-ui text=\"Cancel\" variant=\"ghost\" onclick=\"this.closest('drawer-ui').open=false\"></button-ui>\n            <button-ui text=\"Create project\" variant=\"primary\"></button-ui>\n          </row-ui>\n        </footer>\n      </drawer-ui>",
  "source": "packages/web-components/components/drawer/drawer.examples.html",
  "metadata": {
    "domain": "forms",
    "description": "Create form drawer — drawer with labeled form fields and sticky footer Cancel/Save actions. Standard shape for '+ New X' triggers.",
    "keywords": [
      "drawer",
      "form",
      "create",
      "new",
      "fields",
      "input",
      "footer",
      "actions",
      "cancel",
      "save",
      "sticky",
      "scrollable",
      "side",
      "panel"
    ]
  },
  "captured_at": "2026-06-10T20:25:14.783Z",
  "template": [
    {
      "id": "root",
      "component": "Text",
      "textContent": "Active Draft Archived",
      "variant": "body"
    }
  ]
}