{
  "tag": "ed-drawer",
  "kind": "component",
  "summary": "Drawers slide in from a container to expose additional options and information.",
  "status": "experimental",
  "since": "1.0",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/drawer/",
  "usage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/drawer/usage/",
  "playwright": "getByTestId('…')",
  "dependencies": [
    "ed-button",
    "ed-icon"
  ],
  "use": [
    "Looking at a record's details or history beside the list, so the user keeps the list in view",
    "A collection's filters, in whichever mode the screen needs — modal, `contained`, or `contained` with `push` all serve a filter panel; see the [Filter patterns](https://test-apps.eurodata.de/a/eurodata-ui/docs/patterns/filter)",
    "Navigation menus where space is tight or the menu stays hidden until summoned"
  ],
  "notFor": [
    {
      "when": "A short yes/no confirmation or a single destructive decision",
      "instead": "[Alert Dialog](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/alert-dialog)"
    },
    {
      "when": "A focused, self-contained task that needs the user's full attention centered on screen",
      "instead": "[Dialog](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/dialog)"
    },
    {
      "when": "A small piece of contextual content anchored to one specific control or element",
      "instead": "[Popover](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/popover) or [Tooltip](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/tooltip)"
    },
    {
      "when": "Primary navigation that must stay permanently visible",
      "instead": "[Side Menu](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/side-menu)"
    }
  ],
  "rules": [
    {
      "id": "drawer/title",
      "rule": "Give every drawer a short, descriptive title — never open a titleless drawer.",
      "why": "It is required for accessibility — a screen reader announces it as the panel's name — and it tells sighted users what the panel is for.",
      "check": "error"
    },
    {
      "id": "drawer/mode-by-task",
      "rule": "Pick the mode by the main task it sits beside: a settings pane or contextual help can live in the default modal drawer, while details of a selected row need `without-modality` or push — the user keeps working with the page, so the drawer must not block it. Use the contained push mode when the user needs to reference or work with the main page while the panel is open: it shifts content aside instead of covering it, so both stay usable, while the default drawer is a modal overlay that blocks the page."
    },
    {
      "id": "drawer/without-modality-needs-contained",
      "rule": "Use `without-modality` only together with `contained` — on any other drawer it is ignored, with a console warning.",
      "why": "A drawer at the viewport edge is always modal: it needs the top layer for its position, and only a modal dialog is put there.",
      "check": "error",
      "covered": true
    },
    {
      "id": "drawer/contained-owns-height",
      "rule": "Use `contained` only inside an area that owns its height and scrolling.",
      "why": "A contained drawer needs `overflow: hidden` on its parent. Where the page's content container does the scrolling, that stops the whole page from scrolling; where the document scrolls instead, the drawer stretches over the full height of the content, not the visible part."
    },
    {
      "id": "drawer/app-navigation-built-in",
      "rule": "Don't build your own navigation drawer inside the app shell — the shell does it, serving its navigation slot as a drawer below the mobile breakpoint. Hand-build a navigation drawer only outside the shell.",
      "check": "error"
    },
    {
      "id": "drawer/placement",
      "rule": "Open supplementary and detail panels from the trailing (right) edge, and navigation from the leading (left) edge. Prefer top or bottom placement for shallow, full-width content and mobile-style sheets.",
      "check": "error"
    },
    {
      "id": "drawer/way-out",
      "rule": "Keep a visible close control and the Escape key working at all times — never open a drawer without a visible way out. The contained push drawer is the one exception: it sits beside the page as part of it, so Escape does not close it (built-in) and its visible close control is the way out.",
      "check": "warning"
    },
    {
      "id": "drawer/light-dismiss",
      "rule": "Turn on `light-dismiss` for every modal drawer — it is off by default — since closing a drawer means going back. Where the drawer holds unsaved changes to a record, `drawer/unsaved-changes` asks before it closes, whichever way it closes.",
      "check": "error",
      "covered": true
    },
    {
      "id": "drawer/button-labels",
      "rule": "Use action-specific button labels that name the action and its object (Noun + Verb), never \"Yes\", \"No\", or \"OK\" — the [Button usage guide](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/button/usage) carries the full labeling rules.",
      "check": "warning"
    },
    {
      "id": "drawer/footer-buttons",
      "rule": "Make the action that completes the drawer's task the footer's accent button and place it first, so it renders leftmost in the right-aligned footer; every other footer button gets an explicit `appearance=\"outlined\"` (`plain` for the lowest emphasis). The accent limit and the explicit appearance are Button's rules, [`button/one-accent-per-scope`](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/button/usage#rule-button-one-accent-per-scope) — the drawer is a scope of its own — and [`button/explicit-secondary-appearance`](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/button/usage#rule-button-explicit-secondary-appearance).",
      "check": "error"
    },
    {
      "id": "drawer/unsaved-changes",
      "rule": "Warn the user before closing when the drawer holds unsaved changes to a record — never silently discard them, whichever way the drawer closes. A drawer that only sets up an action — a filter, an export — closes without asking."
    },
    {
      "id": "drawer/size",
      "rule": "Size the drawer to suit its content and let it shrink on small screens — never so narrow that its content feels cramped or labels wrap awkwardly.",
      "check": "error"
    },
    {
      "id": "drawer/no-stacking",
      "rule": "Never stack a drawer or another modal on top of an open drawer. The unsaved-changes warning is the only acceptable exception.",
      "check": "error"
    }
  ],
  "api": {
    "attributes": [
      {
        "name": "open",
        "property": "open",
        "type": "boolean",
        "default": "false",
        "description": "Indicates whether or not the drawer is open. Toggle this attribute to show and hide the drawer."
      },
      {
        "name": "label",
        "property": "label",
        "type": "string",
        "default": "''",
        "description": "The drawer's label as displayed in the header. You should always include a relevant label, as it is required for\nproper accessibility. If you need to display HTML, use the `label` slot instead."
      },
      {
        "name": "aria-label",
        "property": "ariaLabel",
        "type": "null | string",
        "default": "null",
        "description": "The drawer's accessible name, overriding the visible label. Mirrored onto the internal\ndialog node, where the dialog role lives — an aria-label left on the host alone would sit\non a role-less element and be ignored by assistive tech (house pattern: ed-checkbox)."
      },
      {
        "name": "placement",
        "property": "placement",
        "type": "'start' | 'end' | 'top' | 'bottom'",
        "default": "'end'",
        "description": "The direction from which the drawer will open."
      },
      {
        "name": "without-header",
        "property": "withoutHeader",
        "type": "boolean",
        "default": "false",
        "description": "Disables the header. This will also remove the default close button."
      },
      {
        "name": "without-close",
        "property": "withoutClose",
        "type": "boolean",
        "default": "false",
        "description": "Disables the default close button while keeping the header visible."
      },
      {
        "name": "light-dismiss",
        "property": "lightDismiss",
        "type": "boolean",
        "default": "false",
        "description": "When enabled, the drawer will be closed when the user clicks outside of it."
      },
      {
        "name": "with-footer",
        "property": "withFooter",
        "type": "boolean",
        "default": "false",
        "description": "Only required for SSR. Set to `true` if you're slotting in a `footer` element so the server-rendered markup\nincludes the footer before the component hydrates on the client."
      },
      {
        "name": "contained",
        "property": "contained",
        "type": "boolean",
        "default": "false",
        "description": "By default, the drawer slides out of the viewport. To make it slide out of its parent element, set this attribute and add `position: relative` and `overflow: hidden` to the parent."
      },
      {
        "name": "push",
        "property": "push",
        "type": "boolean",
        "default": "false",
        "description": "When used with `contained`, the drawer pushes adjacent content aside instead of overlaying it. The parent element must be a flex container."
      },
      {
        "name": "without-modality",
        "property": "withoutModality",
        "type": "boolean",
        "default": "false",
        "description": "Opens the drawer without blocking what it covers: no backdrop, and the content behind it stays\noperable. Use it for a panel the user works alongside rather than instead of.\n\nRequires `contained`. A drawer at the viewport edge relies on the top layer for its position and\nstacking, and only a modal dialog is put there — so this is ignored, with a warning, on a drawer\nthat is not contained.\n\nInverted because a boolean attribute cannot express `false`: its absence is the only way to\nspell the default, so the default has to be the unset state.\n\n`push` implies it — a drawer that moves content aside rather than covering it blocks nothing."
      },
      {
        "name": "dir",
        "property": "dir",
        "type": "string"
      },
      {
        "name": "lang",
        "property": "lang",
        "type": "string"
      }
    ],
    "properties": [],
    "methods": [
      {
        "name": "connectedMoveCallback",
        "description": "An atomic move (`moveBefore`) runs this instead of the disconnect/reconnect pair. Firefox 151\nleaves a modal `<dialog>` in a shadow root open but no longer modal after it; Chromium 149 keeps\nit modal. Reopen only what the move broke."
      }
    ],
    "events": [
      {
        "name": "ed-show",
        "react": "onEdShow",
        "description": "Emitted when the drawer opens. Cancelable; calling `preventDefault()` keeps it closed."
      },
      {
        "name": "ed-after-show",
        "react": "onEdAfterShow",
        "description": "Emitted after the drawer opens and all animations are complete."
      },
      {
        "name": "ed-hide",
        "react": "onEdHide",
        "type": "{ source: Element }",
        "description": "Emitted before the drawer closes. You can inspect `event.detail.source` to see which element caused the drawer to close. If the source is the drawer element itself, the user has pressed [[Escape]] or the drawer has been closed programmatically. Avoid using this unless closing the drawer will result in destructive behavior such as data loss. Cancelable; calling `preventDefault()` keeps it open."
      },
      {
        "name": "ed-after-hide",
        "react": "onEdAfterHide",
        "description": "Emitted after the drawer closes and all animations are complete."
      }
    ],
    "slots": [
      {
        "name": "",
        "description": "The drawer's main content."
      },
      {
        "name": "label",
        "description": "The drawer's label. Alternatively, you can use the `label` attribute."
      },
      {
        "name": "header-actions",
        "description": "Optional actions to add to the header. Works best with `<ed-button>`."
      },
      {
        "name": "footer",
        "description": "The drawer's footer, usually one or more buttons representing various options."
      }
    ],
    "cssProperties": [
      {
        "name": "--ed-drawer-spacing",
        "description": "The amount of space around and between the drawer's content."
      },
      {
        "name": "--ed-drawer-size",
        "description": "The preferred size of the drawer. This will be applied to the drawer's width or height depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens."
      },
      {
        "name": "--ed-show-duration",
        "default": "var(--ed-transition-normal)",
        "description": "The animation duration when showing the drawer."
      },
      {
        "name": "--ed-hide-duration",
        "default": "var(--ed-transition-normal)",
        "description": "The animation duration when hiding the drawer."
      },
      {
        "name": "--ed-drawer-backdrop-filter",
        "description": "A CSS filter, e.g. `blur(4px)`, applied to the backdrop element behind the drawer."
      }
    ],
    "parts": [
      {
        "name": "panel",
        "description": "The drawer's sliding surface, the element the header, body and footer sit in. Carries the frame, background and shadow. At the viewport edge it is a native `<dialog>`, a `contained` drawer renders a `<div>` instead — the part is the same in both, so one selector reaches either."
      },
      {
        "name": "overlay",
        "description": "The backdrop a `contained` drawer draws over its siblings. `contained` only."
      },
      {
        "name": "header",
        "description": "The drawer's header. This element wraps the title and header actions."
      },
      {
        "name": "header-actions",
        "description": "Optional actions to add to the header. Works best with `<ed-button>`."
      },
      {
        "name": "title",
        "description": "The drawer's title."
      },
      {
        "name": "close-button",
        "description": "The close button, a `<ed-button>`."
      },
      {
        "name": "close-button__base",
        "description": "The close button's exported `base` part."
      },
      {
        "name": "body",
        "description": "The drawer's body."
      },
      {
        "name": "footer",
        "description": "The drawer's footer."
      }
    ],
    "states": []
  },
  "import": "import '@eurodata/eurodata-ui/dist/components/drawer/drawer.js';",
  "react": {
    "component": "EdDrawer",
    "import": "import EdDrawer from '@eurodata/eurodata-ui/dist/react/drawer/index.js';"
  }
}