{
  "tag": "ed-toast-item",
  "kind": "component",
  "summary": "A transient, floating notification that auto-dismisses after a configurable duration. Wraps\n`<ed-notification>` for consistent visuals and pairs with `<ed-toast-stack>` for positioned stacking\nand screen-reader announcements via the stack's shared live region.",
  "status": "experimental",
  "since": "1.0",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/toast-item/",
  "usage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/toast-item/usage/",
  "playwright": "getByTestId('…')",
  "dependencies": [
    "ed-notification"
  ],
  "use": [
    "Brief, non-critical confirmations of a completed action — \"Saved\", \"Upload complete\", \"Copied to clipboard\"",
    "Low-priority status updates that are helpful but safe to miss — background sync finished, a draft was auto-saved",
    "A brief confirmation after a clerk saves, sends or exports something, which disappears by itself without a click",
    "An error message — then without auto-dismiss"
  ],
  "notFor": [
    {
      "when": "A message the user must not miss — a persistent status that must stay visible",
      "instead": "a [Notification](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/notification)"
    },
    {
      "when": "A decision or confirmation the user has to make",
      "instead": "an [Alert Dialog](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/alert-dialog)"
    },
    {
      "when": "A failure that needs context or a decision",
      "instead": "an inline message or an [Alert Dialog](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/alert-dialog)"
    }
  ],
  "rules": [
    {
      "id": "toast-item/fire-and-forget",
      "rule": "Never put information or actions in an auto-dismissing toast that the user must see or must act on.",
      "why": "A toast is fire-and-forget — it will vanish."
    },
    {
      "id": "toast-item/toast-function",
      "rule": "Make toasts with `toast()`, not as markup — it finds or creates the stack, with or without `<ed-app>`. A hand-placed `<ed-toast-item>` does not move into an open modal's stack.",
      "why": "Only the toasts the library created are handed into an open modal; one placed by hand stays beneath it until it closes.",
      "check": "error"
    },
    {
      "id": "toast-item/library-modals",
      "rule": "Open modals with [Dialog](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/dialog), [Drawer](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/drawer) or [Alert Dialog](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/alert-dialog) — under a modal from outside the library the toasts are out of the keyboard's reach.",
      "why": "Under a native `showModal()` the toasts are inert. Under an MUI dialog, F8 cannot reach them past its focus trap, and its `aria-hidden` hides any stack that sits inside the element it hides.",
      "check": "error"
    },
    {
      "id": "toast-item/one-region",
      "rule": "Use one notification region for the whole product, so toasts gather in a single, predictable place: top-end — the right in left-to-right languages, the built-in default — or bottom-end, the same corner consistently across the product. Never place toasts in the center of the screen or on the start side (the left in left-to-right languages).",
      "check": "error"
    },
    {
      "id": "toast-item/region-label",
      "rule": "A custom `label` on a placed stack replaces the F8 hint in the region's name.",
      "why": "The default name, \"Notifications, press F8 to focus\", is how screen-reader users learn the shortcut.",
      "check": "warning"
    },
    {
      "id": "toast-item/stack-custom-properties",
      "rule": "Style the stacks only through the `--ed-toast-stack-*` custom properties, set on `:root` or inline on a stack you placed.",
      "why": "Class selectors do not reach the built-in stacks in dialogs, which sit in a dialog's shadow root.",
      "check": "error"
    },
    {
      "id": "toast-item/short-message",
      "rule": "Keep the message to one line where possible, two at most, and move anything longer to a message that stays on screen — never pack long text, multiple paragraphs, or several actions into a toast.",
      "check": "error"
    },
    {
      "id": "toast-item/limit-visible",
      "rule": "Limit how many toasts are visible at once to a handful (about 3-5), letting older ones clear as new ones arrive — never an unlimited pile, and never let high activity flood the corner.",
      "check": "warning"
    },
    {
      "id": "toast-item/built-in-timing",
      "rule": "Don't set your own timing — the component does it: simple messages auto-dismiss after 5 seconds, danger, warning, and action-carrying toasts stay until dismissed, and the countdown pauses while the pointer is over a toast or keyboard focus is inside it, so users get time to read and act. Never let a toast vanish faster than it can be read, never leave a routine confirmation on screen indefinitely, and never make an error or warning toast auto-dismiss.",
      "why": "Error, failure, and other critical messages must not disappear on their own — the danger and warning variants stay until dismissed for that reason.",
      "check": "error"
    },
    {
      "id": "toast-item/action",
      "rule": "Keep any single optional action short (for example an \"Undo\" or \"Retry\"), and make that same action reachable elsewhere in the interface too — never rely on a toast's action as the only way to reach it, especially while a modal dialog is open."
    }
  ],
  "api": {
    "attributes": [
      {
        "name": "variant",
        "property": "variant",
        "type": "'new' | 'warning' | 'brand' | 'ai' | 'info' | 'neutral' | 'success' | 'danger'",
        "default": "'info'",
        "description": "The toast's theme variant."
      },
      {
        "name": "sensitivity",
        "property": "sensitivity",
        "type": "'polite' | 'assertive' | undefined",
        "description": "Announcement urgency for assistive tech, mirroring `aria-live`. When unset it is derived\nfrom `variant`: `danger`/`warning` → `assertive`, everything else → `polite`."
      },
      {
        "name": "open",
        "property": "open",
        "type": "boolean",
        "default": "false",
        "description": "Whether the toast is open. Toggle to show/hide; reflects to the attribute."
      },
      {
        "name": "duration",
        "property": "duration",
        "type": "number | 'infinity' | undefined",
        "description": "Auto-dismiss duration in milliseconds. The string `'infinity'` (case-insensitive) disables the\ntimer. When left unset, the duration is resolved at show time: `Infinity` for `danger`/`warning`\nvariants or when an `action` slot is filled, `5000` for all other variants. An explicit value\nalways wins regardless of variant or slot content."
      },
      {
        "name": "dir",
        "property": "dir",
        "type": "string"
      },
      {
        "name": "lang",
        "property": "lang",
        "type": "string"
      }
    ],
    "properties": [],
    "methods": [
      {
        "name": "connectedMoveCallback",
        "description": "An atomic move (`moveBefore`) keeps the toast as it is; defining this is what stops the browser\nfrom running the disconnect/connect pair for it, which would restart the show and the timer."
      },
      {
        "name": "show",
        "description": "Shows the toast. Returns a promise that resolves when the opening animation completes, or when\nthe show is called off by `hide()` or a cancelled `ed-show`."
      },
      {
        "name": "hide",
        "description": "Hides the toast. Returns a promise that resolves when the closing animation completes — at once\nfor a toast still waiting for its first update, whose open this calls off."
      }
    ],
    "events": [
      {
        "name": "OWN_EVENT",
        "react": "onOwnEvent",
        "type": "EdAfterShowEvent"
      },
      {
        "name": "ed-show",
        "react": "onEdShow",
        "description": "Emitted before the toast opens. Cancelable; calling `preventDefault()` keeps it closed. Like all four, not composed: it stops at the shadow root the toast sits in."
      },
      {
        "name": "ed-after-show",
        "react": "onEdAfterShow",
        "description": "Emitted after the toast has fully opened and all animations are complete. Not composed."
      },
      {
        "name": "ed-hide",
        "react": "onEdHide",
        "description": "Emitted before the toast closes. Cancelable; calling `preventDefault()` keeps it open, with its dismiss timer still running. Not composed."
      },
      {
        "name": "ed-after-hide",
        "react": "onEdAfterHide",
        "description": "Emitted after the toast has fully closed and all animations are complete. Not composed."
      }
    ],
    "slots": [
      {
        "name": "",
        "description": "The toast title (required)."
      },
      {
        "name": "description",
        "description": "Optional description content shown below the title."
      },
      {
        "name": "action",
        "description": "Action buttons (typically one `<ed-button>`)."
      },
      {
        "name": "icon",
        "description": "Override the default variant icon."
      }
    ],
    "cssProperties": [],
    "parts": [
      {
        "name": "base",
        "description": "The host wrapper that owns the entrance/exit motion."
      },
      {
        "name": "notification",
        "description": "The inner `<ed-notification>` element."
      }
    ],
    "states": []
  },
  "import": "import '@eurodata/eurodata-ui/dist/components/toast-item/toast-item.js';",
  "react": {
    "component": "EdToastItem",
    "import": "import EdToastItem from '@eurodata/eurodata-ui/dist/react/toast-item/index.js';"
  }
}