{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toast",
  "type": "registry:ui",
  "title": "Toast (MIAN)",
  "description": "Temporary notifications. Mian.toast() from script, or data-mn-toast on a button. Pause on hover, stack, dismiss.",
  "categories": [
    "feedback",
    "toast",
    "snackbar",
    "notification",
    "flash message"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/toast.css",
      "type": "registry:file",
      "target": "mian/components/toast.css",
      "content": ".mn-toaster {\n  position: fixed; z-index: 100; inset-block-end: 1rem; inset-inline-end: 1rem;\n  display: flex; flex-direction: column-reverse; gap: .6rem;\n  width: min(24rem, calc(100vw - 2rem));\n  pointer-events: none;\n}\n.mn-toaster[data-position=\"top-right\"] { inset-block: 1rem auto; flex-direction: column; }\n.mn-toaster[data-position=\"top-center\"] { inset-block: 1rem auto; inset-inline: 50% auto; translate: -50% 0; flex-direction: column; }\n.mn-toaster[data-position=\"bottom-center\"] { inset-inline: 50% auto; translate: -50% 0; }\n.mn-toast {\n  --_t: var(--_ct, var(--mn-fg));\n  pointer-events: auto;\n  display: grid; grid-template-columns: auto 1fr auto; gap: .15rem .7rem; align-items: start;\n  padding: .85rem .9rem;\n  border: var(--mn-border-w) solid var(--mn-border); border-radius: var(--mn-radius-box);\n  background: var(--mn-popover); color: var(--mn-fg);\n  box-shadow: var(--mn-shadow-lg);\n  font-size: var(--mn-text-sm); line-height: 1.45;\n  animation: var(--mn-enter) calc(var(--mn-enter-duration) + 40ms) var(--mn-ease-enter);\n}\n.mn-toast:not(:has(.mn-toast-icon)) { grid-template-columns: 1fr auto; }\n.mn-toast[data-leaving] { animation: mn-toast-out 180ms var(--mn-ease) forwards; }\n.mn-toast-icon { grid-row: span 2; color: var(--_t); padding-top: .1rem; display: flex; }\n.mn-toast-icon svg { width: 1.1rem; height: 1.1rem; }\n.mn-toast-title { font-weight: 600; }\n.mn-toast-desc { color: var(--mn-muted); grid-column: -3 / -2; }\n.mn-toast:not(:has(.mn-toast-icon)) .mn-toast-desc { grid-column: 1; }\n.mn-toast-close { grid-row: 1 / span 2; grid-column: -2; align-self: start; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; margin: -.2rem -.3rem 0 0; border: 0; border-radius: 6px; background: none; color: var(--mn-muted); cursor: pointer; }\n.mn-toast-close:hover { background: var(--mn-hover); color: var(--mn-fg); }\n.mn-toast-close:focus-visible { outline: none; box-shadow: var(--mn-focus); }\n.mn-toast-close svg { width: .9rem; height: .9rem; }\n.mn-toast-action { margin-top: .5rem; grid-column: -3 / -2; justify-self: start; }\n@keyframes mn-toast-in { from { opacity: 0; transform: translateY(8px) scale(.97); } }\n@keyframes mn-toast-out { to { opacity: 0; transform: translateX(16px); } }"
    },
    {
      "path": "mian/examples/toast.html",
      "type": "registry:file",
      "target": "mian/examples/toast.html",
      "content": "<!-- Triggers -->\n<button class=\"mn-btn mn-btn-outline\" data-mn-toast=\"Event created\" data-mn-toast-description=\"Sunday, 14 December at 09:00\">Default</button>\n<button class=\"mn-btn mn-btn-outline\" data-mn-toast=\"Saved\" data-mn-toast-description=\"Your changes are live.\" data-mn-toast-color=\"success\">Success</button>\n<button class=\"mn-btn mn-btn-outline\" data-mn-toast=\"Could not connect\" data-mn-toast-description=\"Check your network and try again.\" data-mn-toast-color=\"danger\">Error</button>\n\n<!-- From script, with an action -->\n<button class=\"mn-btn\" onclick=\"Mian.toast({ title: 'Message archived', action: { label: 'Undo', onClick: () => Mian.toast({ title: 'Restored', color: 'success' }) } })\">Archive</button>"
    }
  ],
  "docs": "MIAN components are HTML + CSS classes, not React components. The styles are already included in mian-base; this item adds the component's CSS section and example markup for reference. Docs: https://mian.ro/components/toast",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": true,
      "classes": [
        "Mian.toast({ title, description, color, duration, action, position })",
        "data-mn-toast=\"Title\"",
        "mn-toaster[data-position]"
      ],
      "accessibility": [
        "The toaster is a polite live region; danger toasts use role=\"alert\". Timers pause on hover and focus so there is time to read and act.",
        "Never put the only path to an action in a toast."
      ],
      "intents": [
        "toast notification",
        "snackbar",
        "saved message",
        "temporary notification"
      ]
    }
  }
}