{
  "tag": "ed-notification",
  "kind": "component",
  "summary": "Notifications display important inline messages with a title, optional description, and optional action / close.",
  "status": "experimental",
  "level": "atom",
  "since": "1.0",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/notification/",
  "usage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/notification/usage/",
  "playwright": "getByTestId('…')",
  "dependencies": [
    "ed-button",
    "ed-icon"
  ],
  "use": [
    "A persistent, contextual message tied to a specific region, form, or workflow — shown inline, right where the message is relevant",
    "System or task status — notices, warnings, errors, consequential successes — when the message concerns a specific place on the page and can render inline right there",
    "A collapsible message with a short title and longer details, such as validation errors in an import",
    "Error and critical messages about content the user has on screen — anchored to the affected form, region, or workflow"
  ],
  "notFor": [
    {
      "when": "Feedback that has no anchor on the page — from quick self-dismissing confirmations to global failures arriving detached from the visible content",
      "instead": "a [Toast](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/toast-item); a critical failure without an on-screen anchor (a background job, a dropped connection) belongs in a danger toast, which is equally persistent until dismissed"
    },
    {
      "when": "A decision the user must make right now before they can continue",
      "instead": "an [Alert Dialog](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/alert-dialog)"
    },
    {
      "when": "A small, always-on status label attached to a single item, row, or tab",
      "instead": "a [Badge](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/badge)"
    }
  ],
  "rules": [
    {
      "id": "notification/anchor-critical-messages",
      "rule": "Anchor errors and critical status to the content they concern with an inline notification, and keep them visible until the user manually dismisses them — never let an error or critical message auto-dismiss or disappear on its own, and never communicate a failure or critical warning with something that vanishes by itself.",
      "why": "In payroll, accounting, and tax products a missed or misunderstood message can cause real data errors.",
      "check": "error"
    },
    {
      "id": "notification/open",
      "rule": "A notification shows only while `open` is set; give a status that should always show `open` in the markup.",
      "check": "warning"
    },
    {
      "id": "notification/match-severity",
      "rule": "Match the severity style to the message's real urgency, so a minor notice does not look like a critical one."
    },
    {
      "id": "notification/not-color-alone",
      "rule": "Reinforce severity with the colored style, the matching icon, and clear wording together — never rely on color alone to signal severity.",
      "check": "error"
    },
    {
      "id": "notification/title",
      "rule": "Give every notification a short, meaningful title that can be grasped at a glance.",
      "check": "error"
    },
    {
      "id": "notification/description",
      "rule": "Add a description only when extra detail is genuinely needed, and collapse a long or secondary description behind the built-in show-more / show-less toggle to keep the message compact."
    },
    {
      "id": "notification/close-button",
      "rule": "Provide a close button when it is safe for the user to dismiss the message themselves."
    },
    {
      "id": "notification/one-action",
      "rule": "Limit it to a single, clearly labeled action affordance — never crowd the message with several action buttons.",
      "why": "The layout does not wrap gracefully.",
      "check": "error"
    },
    {
      "id": "notification/few-at-once",
      "rule": "Never show many notifications at once so they compete for attention; surface only what is currently relevant.",
      "check": "warning"
    }
  ],
  "api": {
    "attributes": [
      {
        "name": "variant",
        "property": "variant",
        "type": "'new' | 'warning' | 'brand' | 'ai' | 'info' | 'neutral' | 'success' | 'danger'",
        "default": "'info'",
        "description": "The notification's theme variant."
      },
      {
        "name": "open",
        "property": "open",
        "type": "boolean",
        "default": "false",
        "description": "Indicates whether the notification is open. Toggle to show/hide; reflects to the attribute."
      },
      {
        "name": "closable",
        "property": "closable",
        "type": "boolean",
        "default": "false",
        "description": "When set, renders a close button that hides the notification on click."
      },
      {
        "name": "collapsible",
        "property": "collapsible",
        "type": "boolean",
        "default": "false",
        "description": "When set, the description is hidden behind a toggle in the title row. Only meaningful when a `description` slot is provided."
      },
      {
        "name": "static-open",
        "property": "staticOpen",
        "type": "boolean",
        "default": "false",
        "description": "Internal escape hatch for components (e.g. `<ed-toast-item>`) that own animation at a higher level.\nWhen `true`, `connectedCallback` skips the first-paint re-trigger workaround, and the `open`\nwatcher toggles `base.hidden` synchronously without running animations or emitting show/hide\nevents. The notification renders fully open immediately when `open` is `true`."
      },
      {
        "name": "without-live-region",
        "property": "withoutLiveRegion",
        "type": "boolean",
        "default": "false",
        "description": "Renders without the live-region role, for a host that owns announcements itself.\n`<ed-toast-item>` sets it: the toast stack announces every toast through one shared region, and\na second live region on the composed notification makes a screen reader read the toast twice."
      },
      {
        "name": "dir",
        "property": "dir",
        "type": "string"
      },
      {
        "name": "lang",
        "property": "lang",
        "type": "string"
      }
    ],
    "properties": [],
    "methods": [
      {
        "name": "show",
        "description": "Shows the notification."
      },
      {
        "name": "hide",
        "description": "Hides the notification."
      },
      {
        "name": "getPropertyDescriptor",
        "static": true,
        "parameters": [
          {
            "name": "name",
            "type": "PropertyKey"
          },
          {
            "name": "key",
            "type": "string | symbol"
          },
          {
            "name": "options",
            "type": "PropertyDeclaration"
          }
        ],
        "returns": "PropertyDescriptor | undefined",
        "description": "Wraps the accessor of reflected properties so they always hold a valid value, as a native\nreflected IDL attribute does (`button.type = undefined` reads `submit`):\n\n- A property that declares `useDefault` takes the first value set on an element for its\n  default. That value is its field initializer's: the constructor has finished before markup,\n  a framework or any other code can set anything. Every later `null` or `undefined` means what\n  a dropped prop means on a native element — the attribute is removed: with the attribute\n  there, it is removed and Lit's `useDefault` restores the default without writing it; without\n  one, the property is set to the default. A value set and cleared again before the element\n  updates still writes the default once, from the pending reflection.\n- A Boolean is coerced with `Boolean()`, so `undefined` is `false`.\n\nLit's `useDefault` keeps the initial default out of the DOM. Setting the default explicitly\nwrites it, as `button.type = 'submit'` writes `type`."
      }
    ],
    "events": [
      {
        "name": "ed-show",
        "react": "onEdShow",
        "description": "Emitted before the notification opens. Cancelable; calling `preventDefault()` keeps it closed."
      },
      {
        "name": "ed-after-show",
        "react": "onEdAfterShow",
        "description": "Emitted after the notification opens and all animations are complete."
      },
      {
        "name": "ed-hide",
        "react": "onEdHide",
        "description": "Emitted before the notification closes. Cancelable; calling `preventDefault()` keeps it open."
      },
      {
        "name": "ed-after-hide",
        "react": "onEdAfterHide",
        "description": "Emitted after the notification closes and all animations are complete."
      }
    ],
    "slots": [
      {
        "name": "",
        "description": "The notification's title (required, vertically centered against the icon)."
      },
      {
        "name": "description",
        "description": "Optional description content shown below the title row. When `collapsible` is set, this content is hidden until the user expands the toggle."
      },
      {
        "name": "icon",
        "description": "Override the default variant icon."
      },
      {
        "name": "action",
        "description": "Action buttons placed in the title row toolbar. One button is recommended."
      }
    ],
    "cssProperties": [],
    "parts": [
      {
        "name": "base",
        "description": "The container that wraps the whole notification."
      },
      {
        "name": "icon",
        "description": "The icon cell."
      },
      {
        "name": "title",
        "description": "The title cell."
      },
      {
        "name": "toggle",
        "description": "The collapse toggle button (rendered only when `collapsible`)."
      },
      {
        "name": "description",
        "description": "The description cell. Always in the DOM, and hidden while the slot is empty or while `collapsible` is collapsed."
      },
      {
        "name": "action",
        "description": "The action slot wrapper."
      },
      {
        "name": "close-button",
        "description": "The close button (rendered only when `closable`)."
      }
    ],
    "states": []
  },
  "import": "import '@eurodata/eurodata-ui/dist/components/notification/notification.js';",
  "react": {
    "component": "EdNotification",
    "import": "import EdNotification from '@eurodata/eurodata-ui/dist/react/notification/index.js';"
  }
}