{
  "name": "ToastProvider",
  "source": "src/components/Toast.tsx",
  "propsType": "ToastProviderProps",
  "description": "Renders the queue and supplies `useToast`.\n\nThe live region is the CONTAINER, declared once and always present. A region\nthat appears at the same moment as its content is not reliably announced —\nassistive tech has to be watching the node before the text lands in it.",
  "import": "import { ToastProvider } from 'ionbase-ui';",
  "status": "stable",
  "summary": "Renders the toast queue and supplies the `useToast` hook. Mount once, near the app root.",
  "useWhen": [
    "the app shows toasts anywhere — this is the only way to get `useToast`"
  ],
  "useInstead": [
    {
      "when": "you only need one persistent in-page message",
      "use": "Alert",
      "why": "no provider, no queue, and it stays put"
    }
  ],
  "variants": {
    "placement": {
      "top-left": {
        "use": "rare — for RTL layouts or where the top-right is occupied"
      },
      "top-right": {
        "use": "the common desktop choice, out of the way of primary content"
      },
      "bottom-left": {
        "use": "keeps toasts clear of a right-hand panel"
      },
      "bottom-right": {
        "use": "close to where a save or submit action usually sits"
      }
    }
  },
  "slots": {
    "children": {
      "accepts": "any",
      "note": "your app — the provider wraps it. Anywhere inside, `const { toast, dismiss } = useToast()`: `toast(options)` takes Toast's own props (`intent`, `title`, `message`, `action`, `duration`, `dismissLabel`), queues one and returns its id; `dismiss(id)` removes it. Outside a ToastProvider, useToast throws."
    }
  },
  "a11y": {
    "guarantees": [
      "the live region is the container, declared once and always present — a region that appears at the same moment as its content is not reliably announced",
      "`limit` drops the oldest toasts, so the stack can never cover the page"
    ],
    "requires": [
      "mounting exactly one ToastProvider — a second live region competes with the first",
      "a `label` that is unique among the page's landmarks when the app has its own section called Notifications — the region is a landmark, and two with one name fail axe `landmark-unique`"
    ]
  },
  "antiPatterns": [
    {
      "dont": "mounting a ToastProvider per route or per page",
      "why": "toasts queued before the switch are unmounted mid-announcement, and two live regions announce over each other"
    },
    {
      "dont": "placing it inside a Modal",
      "why": "the toasts are removed from the tree when the modal closes, and hidden from assistive tech while it is open"
    },
    {
      "dont": "raising `limit` to keep everything",
      "why": "an unbounded stack covers the content the toasts are about"
    },
    {
      "dont": "calling `useToast().show(...)` or `useToast().success(...)`",
      "why": "neither exists. `useToast()` returns `{ toast, dismiss }`: call `toast({ intent: 'success', title })`"
    }
  ],
  "stylesheet": "src/styles/toast.css",
  "tokens": [
    "--border-subtle",
    "--border-width-default",
    "--border-width-thick",
    "--font-family-sans",
    "--font-weight-medium",
    "--font-weight-regular",
    "--icon-error",
    "--icon-information",
    "--icon-primary",
    "--icon-secondary",
    "--icon-size-md",
    "--icon-success",
    "--icon-warning",
    "--ion-duration-base",
    "--ion-ease-out",
    "--ion-shadow-shadow-lg",
    "--ion-toast-icon",
    "--radius-md",
    "--radius-sm",
    "--ring-focus",
    "--spacing-12",
    "--spacing-16",
    "--spacing-32",
    "--spacing-4",
    "--surface-hover",
    "--surface-raised",
    "--text-default",
    "--text-link",
    "--text-link-hover",
    "--text-secondary",
    "--type-body",
    "--type-body-line-height",
    "--type-body-sm",
    "--type-body-sm-line-height"
  ],
  "props": {
    "children": {
      "type": "React.ReactNode",
      "required": false,
      "origin": "own"
    },
    "placement": {
      "type": "ToastPlacement | undefined",
      "required": false,
      "origin": "own",
      "description": "Where the stack sits. Not a Figma variant — position is the queue's concern.",
      "values": [
        "top-left",
        "top-right",
        "bottom-left",
        "bottom-right"
      ]
    },
    "limit": {
      "type": "number | undefined",
      "required": false,
      "origin": "own",
      "description": "Oldest are dropped past this. Prevents an unbounded stack covering the page."
    },
    "label": {
      "type": "string | undefined",
      "required": false,
      "origin": "own",
      "description": "The live region's accessible name. The region is a landmark, and landmark\nnames must be unique on a page: an app with its own section called\n\"Notifications\" fails axe `landmark-unique` on every page that has one\nunless this is changed."
    }
  },
  "propCounts": {
    "own": 4,
    "aria": 0,
    "dom": 0,
    "other": 0
  }
}