{
  "tag": "ed-popover",
  "kind": "component",
  "summary": "Popovers display contextual content and interactive elements in a floating panel.",
  "status": "experimental",
  "since": "1.0",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/popover/",
  "usage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/popover/usage/",
  "playwright": "getByTestId('…')",
  "dependencies": [
    "ed-popup"
  ],
  "use": [
    "Revealing contextual, interactive content — a preview card, a quick inline edit, a small form, or a small set of contextual actions — right next to the element that triggered it",
    "A quick inline change, such as setting a due date or an assignee, without leaving the list"
  ],
  "notFor": [
    {
      "when": "A text hint, even one with formatting or a simple link — the [Tooltip](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/tooltip) renders HTML and stays open while hovered (built-in)",
      "instead": "[Tooltip](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/tooltip)"
    },
    {
      "when": "Large, lengthy, or task-blocking content",
      "instead": "[Dialog](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/dialog) or [Drawer](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/drawer)"
    },
    {
      "when": "A menu of commands or navigation actions",
      "instead": "[Dropdown](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/dropdown)"
    }
  ],
  "rules": [
    {
      "id": "popover/interactive-anchor",
      "rule": "Anchor it to a clearly visible, interactive control such as a button — never to static text, a decorative element, or any other non-interactive element.",
      "check": "error"
    },
    {
      "id": "popover/nothing-essential",
      "rule": "Never put anything essential to the user's main task in a popover, or hide content there that is critical to it — a popover holds secondary, supplementary content."
    },
    {
      "id": "popover/small-content",
      "rule": "Keep its content small and single-purpose — one focused task or one piece of information. Never overfill it: content large enough to need internal scrolling, headings, or several sections has outgrown the pattern.",
      "check": "error"
    },
    {
      "id": "popover/rarely",
      "rule": "Reach for it rarely — it is a niche pattern in eurodata products; when in doubt, the content usually has a better home inline, in a [Tooltip](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/tooltip), or in a [Drawer](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/drawer)."
    },
    {
      "id": "popover/click-to-open",
      "rule": "Open it by clicking its anchor, never by hover alone — click works on touch as well as with a mouse, and hover fails on touch devices. Don't add your own toggle — the wired anchor toggles it automatically.",
      "check": "warning"
    },
    {
      "id": "popover/keep-arrow",
      "rule": "Keep the built-in arrow pointing at the trigger, so users can tell at a glance what opened the panel.",
      "check": "error"
    },
    {
      "id": "popover/built-in-positioning",
      "rule": "Don't add your own positioning — the component keeps it close to its anchor and repositions it automatically to stay on screen.",
      "check": "error"
    },
    {
      "id": "popover/dismissal",
      "rule": "Give users a predictable way to dismiss it — clicking outside and Escape work built-in — and add a clear close or confirm control inside when the panel holds a task to complete.",
      "check": "warning"
    },
    {
      "id": "popover/autofocus",
      "rule": "When the panel opens a form, mark its first field `autofocus` — the popover honors it on open (built-in) — so keyboard and screen-reader users land in the right place.",
      "check": "error"
    },
    {
      "id": "popover/accessible-name",
      "rule": "Give the popover an accessible name with a host `aria-label`.",
      "why": "It is announced as a dialog, and an unnamed dialog tells a screen-reader user nothing.",
      "check": "error",
      "covered": true
    },
    {
      "id": "popover/name-the-object",
      "rule": "Name the specific object in the labels of any actions inside it, especially destructive ones (\"Delete invoice RE-2025-003\", not \"Delete\").",
      "check": "warning"
    },
    {
      "id": "popover/actions-are-shortcuts",
      "rule": "Treat actions offered in a popover as a shortcut, keeping the same actions reachable from a visible control elsewhere in the interface."
    },
    {
      "id": "popover/one-open",
      "rule": "Never expect two popovers to stay open at once — opening one closes any other (built-in)."
    }
  ],
  "api": {
    "attributes": [
      {
        "name": "placement",
        "property": "placement",
        "type": "'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'top' | 'bottom' | 'right-start' | 'right-end' | 'left-start' | 'left-end'",
        "default": "'top'",
        "description": "The preferred placement of the popover. Note that the actual placement may vary as needed to keep the popover\ninside of the viewport."
      },
      {
        "name": "open",
        "property": "open",
        "type": "boolean",
        "default": "false",
        "description": "Shows or hides the popover."
      },
      {
        "name": "distance",
        "property": "distance",
        "type": "number",
        "default": "8",
        "description": "The distance in pixels from which to offset the popover away from its target."
      },
      {
        "name": "skidding",
        "property": "skidding",
        "type": "number",
        "default": "0",
        "description": "The distance in pixels from which to offset the popover along its target."
      },
      {
        "name": "for",
        "property": "for",
        "type": "null | string",
        "default": "null",
        "description": "The ID of the popover's anchor element. This must be an interactive/focusable element such as a button."
      },
      {
        "name": "without-arrow",
        "property": "withoutArrow",
        "type": "boolean",
        "default": "false",
        "description": "Removes the arrow from the popover."
      },
      {
        "name": "aria-label",
        "property": "ariaLabel",
        "type": "null | string",
        "default": "null",
        "description": "The popover's accessible name. Mirrored onto the internal dialog node, where the dialog role\nlives — an aria-label left on the host alone would sit on a role-less element and be ignored\nby assistive tech (house pattern: ed-checkbox)."
      },
      {
        "name": "dir",
        "property": "dir",
        "type": "string"
      },
      {
        "name": "lang",
        "property": "lang",
        "type": "string"
      }
    ],
    "properties": [],
    "methods": [
      {
        "name": "show",
        "description": "Shows the popover."
      },
      {
        "name": "hide",
        "description": "Hides the popover."
      }
    ],
    "events": [
      {
        "name": "ed-show",
        "react": "onEdShow",
        "description": "Emitted before the popover shows. Cancelable; calling `preventDefault()` keeps it closed."
      },
      {
        "name": "ed-after-show",
        "react": "onEdAfterShow",
        "description": "Emitted after the popover has shown and all animations are complete."
      },
      {
        "name": "ed-hide",
        "react": "onEdHide",
        "description": "Emitted before the popover hides. Cancelable; calling `preventDefault()` keeps it open."
      },
      {
        "name": "ed-after-hide",
        "react": "onEdAfterHide",
        "description": "Emitted after the popover has hidden and all animations are complete."
      }
    ],
    "slots": [
      {
        "name": "",
        "description": "The popover's content. Interactive elements such as buttons and links are supported."
      }
    ],
    "cssProperties": [
      {
        "name": "--ed-popover-arrow-size",
        "default": "0.375rem",
        "description": "The size of the tiny arrow that points to the popover (set to zero to remove)."
      },
      {
        "name": "--ed-popover-max-width",
        "default": "25rem",
        "description": "The maximum width of the popover's body content."
      },
      {
        "name": "--ed-show-duration",
        "default": "var(--ed-transition-fast)",
        "description": "The speed of the show animation."
      },
      {
        "name": "--ed-hide-duration",
        "default": "var(--ed-transition-fast)",
        "description": "The speed of the hide animation."
      }
    ],
    "parts": [
      {
        "name": "dialog",
        "description": "The native dialog element that contains the popover content."
      },
      {
        "name": "panel",
        "description": "The floating surface holding the content. Carries the frame, background and shadow."
      },
      {
        "name": "popup",
        "description": "The internal `<ed-popup>` element that positions the popover."
      },
      {
        "name": "popup__popup",
        "description": "The popup's exported `popup` part. Use this to target the popover's popup container."
      },
      {
        "name": "popup__arrow",
        "description": "The popup's exported `arrow` part. Use this to target the popover's arrow."
      }
    ],
    "states": [
      {
        "name": "open",
        "description": "Applied when the popover is open."
      }
    ]
  },
  "import": "import '@eurodata/eurodata-ui/dist/components/popover/popover.js';",
  "react": {
    "component": "EdPopover",
    "import": "import EdPopover from '@eurodata/eurodata-ui/dist/react/popover/index.js';"
  }
}