{
  "definitions": {
    "events": {
      "$ref": "#/definitions/Events",
      "$schema": "http://json-schema.org/draft-07/schema#",
      "definitions": {
        "Events": {
          "additionalProperties": false,
          "properties": {
            "action": {
              "additionalProperties": false,
              "properties": {
                "action": {
                  "type": "string"
                },
                "id": {
                  "type": "string"
                }
              },
              "required": [
                "id"
              ],
              "type": "object"
            },
            "changeVisibility": {
              "additionalProperties": false,
              "properties": {
                "disappear": {
                  "type": "boolean"
                },
                "id": {
                  "type": "string"
                },
                "show": {
                  "type": "boolean"
                }
              },
              "required": [
                "id",
                "show"
              ],
              "type": "object"
            }
          },
          "required": [
            "changeVisibility",
            "action"
          ],
          "type": "object"
        }
      }
    },
    "component": {
      "$ref": "#/definitions/Component",
      "$schema": "http://json-schema.org/draft-07/schema#",
      "definitions": {
        "Component": {
          "additionalProperties": false,
          "properties": {
            "buttons": {
              "items": {
                "$ref": "#/definitions/TToastButton"
              },
              "type": "array"
            },
            "content": {
              "type": "string"
            },
            "id": {
              "type": "string"
            },
            "img": {
              "type": "string"
            },
            "level": {
              "enum": [
                "info",
                "success",
                "warning",
                "danger",
                "primary",
                "secondary",
                "light",
                "dark"
              ],
              "type": "string"
            },
            "position": {
              "enum": [
                "top-left",
                "top-center",
                "top-right",
                "bottom-left",
                "bottom-center",
                "bottom-right"
              ],
              "type": "string"
            },
            "progress": {
              "type": "string"
            },
            "show": {
              "enum": [
                "yes",
                "no"
              ],
              "type": "string"
            },
            "small": {
              "type": "string"
            },
            "style": {
              "type": "string"
            },
            "timeout": {
              "type": [
                "string",
                "number"
              ]
            },
            "title": {
              "type": "string"
            }
          },
          "required": [
            "show",
            "title",
            "img",
            "content"
          ],
          "type": "object"
        },
        "TToastButton": {
          "additionalProperties": false,
          "properties": {
            "action": {
              "type": "string"
            },
            "color": {
              "type": "string"
            },
            "icon": {
              "type": "string"
            },
            "text": {
              "type": "string"
            },
            "themeColor": {
              "enum": [
                "info",
                "success",
                "warning",
                "danger",
                "primary",
                "secondary",
                "light",
                "dark"
              ],
              "type": "string"
            },
            "type": {
              "enum": [
                "confirm",
                "cancel"
              ],
              "type": "string"
            }
          },
          "required": [
            "type"
          ],
          "type": "object"
        }
      }
    }
  },
  "description": "Bulma-styled notification toast: `show`, `title`, `content`, optional `img`, `small`, `level`, `position`, `timeout`, string `progress` for a bar, and `buttons` for actions. Slots customize header and body; dispatches visibility and button `action` events.",
  "storybookArgs": {
    "show": {
      "control": {
        "type": "boolean"
      }
    },
    "small": {
      "control": {
        "type": "text"
      }
    },
    "title": {
      "control": {
        "type": "text"
      }
    },
    "img": {
      "control": {
        "type": "text"
      }
    },
    "level": {
      "control": {
        "type": "select"
      },
      "options": [
        "primary",
        "secondary",
        "success",
        "danger",
        "warning",
        "info",
        "light",
        "dark"
      ]
    },
    "content": {
      "control": {
        "type": "text"
      }
    },
    "changeVisibility": {
      "action": "changeVisibility"
    },
    "timeout": {
      "control": {
        "type": "number"
      }
    },
    "progress": {
      "control": {
        "type": "text"
      }
    },
    "position": {
      "control": {
        "type": "select"
      },
      "options": [
        "top-left",
        "top-center",
        "top-right",
        "bottom-left",
        "bottom-center",
        "bottom-right"
      ]
    },
    "buttons": {
      "control": {
        "type": "object"
      }
    },
    "action": {
      "action": "action"
    }
  },
  "styleSetup": {
    "vars": [],
    "parts": [
      {
        "name": "toast",
        "description": "Root notification surface."
      },
      {
        "name": "status",
        "description": "Timeout, progress percentage, or elapsed-time chip (below title)."
      }
    ]
  },
  "contributors": [],
  "htmlSlots": [
    {
      "name": "header_icon",
      "description": "Optional icon markup (default: bell)."
    },
    {
      "name": "header_strong",
      "description": ""
    },
    {
      "name": "header_small",
      "description": "Overrides status chip text (timeout / % / elapsed); default is computed from props."
    },
    {
      "name": "body",
      "description": ""
    }
  ],
  "i18n": [],
  "examples": [
    {
      "name": "default",
      "data": {
        "small": "11 mins ago",
        "title": "Notice",
        "show": "yes",
        "content": "Hello, world! This is a toast message.",
        "img": "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_17e7e03606d%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_17e7e03606d%22%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2274.4296875%22%20y%3D%22104.5%22%3E200x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
      }
    },
    {
      "name": "timeout",
      "data": {
        "timeout": 3000,
        "small": "11 mins ago",
        "title": "Notice",
        "show": "yes",
        "content": "Hello, world! This is a toast message.",
        "img": "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_17e7e03606d%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_17e7e03606d%22%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2274.4296875%22%20y%3D%22104.5%22%3E200x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
      }
    },
    {
      "name": "timeoutwithtimer",
      "data": {
        "timeout": 12000,
        "title": "Notice",
        "show": "yes",
        "level": "warning",
        "content": "Hello, world! This is a toast message.",
        "img": "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_17e7e03606d%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_17e7e03606d%22%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2274.4296875%22%20y%3D%22104.5%22%3E200x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
      }
    },
    {
      "name": "progress25",
      "description": "Shows a 25% progress, header displays percentage when small is empty.",
      "data": {
        "show": "yes",
        "title": "Upload",
        "content": "Uploading your file...",
        "level": "info",
        "progress": "25",
        "img": "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_17e7e03606d%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_17e7e03606d%22%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2274.4296875%22%20y%3D%22104.5%22%3E200x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
      }
    },
    {
      "name": "progress70",
      "description": "Shows a 70% progress.",
      "data": {
        "show": "yes",
        "title": "Processing",
        "content": "Working on your request...",
        "level": "warning",
        "progress": "70",
        "img": "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_17e7e03606d%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_17e7e03606d%22%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2274.4296875%22%20y%3D%22104.5%22%3E200x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
      }
    },
    {
      "name": "progressWithSmall",
      "description": "When small is provided, it overrides percentage display.",
      "data": {
        "show": "yes",
        "title": "Sync",
        "content": "Synchronizing...",
        "level": "secondary",
        "small": "in progress",
        "progress": "40",
        "img": "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_17e7e03606d%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_17e7e03606d%22%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2274.4296875%22%20y%3D%22104.5%22%3E200x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
      }
    },
    {
      "name": "progressComplete",
      "description": "100% progress shows a full bar.",
      "data": {
        "show": "yes",
        "title": "Completed",
        "content": "All done!",
        "level": "success",
        "progress": "100",
        "img": "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_17e7e03606d%20text%20%7B%20fill%3Argba(255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_17e7e03606d%22%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2274.4296875%22%20y%3D%22104.5%22%3E200x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
      }
    },
    {
      "name": "withButtons",
      "description": "Toast with confirmation buttons.",
      "data": {
        "show": "yes",
        "title": "Confirmation",
        "content": "Are you sure you want to proceed?",
        "level": "light",
        "buttons": [
          {
            "type": "cancel",
            "action": "btn-cancel"
          },
          {
            "type": "confirm",
            "action": "btn-confirm",
            "text": "Yes, proceed",
            "icon": "bi-check-circle"
          }
        ],
        "img": "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_17e7e03606d%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_17e7e03606d%22%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2274.4296875%22%20y%3D%22104.5%22%3E200x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
      }
    }
  ],
  "iifeIntegrity": "sha384-5Jp3Ie7pfMPRiMMcWqE5G2us6a/Ghfc6fEY/xBp2xMUa9/m07xEHpsycj53w2Iyp",
  "dependencies": [],
  "screenshots": [],
  "licenses": [
    {
      "type": "Apache-2.0",
      "path": "LICENSE.md",
      "cost": 0,
      "currency": "EUR"
    }
  ],
  "readmePath": "README.md",
  "name": "hb-toast",
  "category": "overlays",
  "tags": [
    "overlays",
    "notifications"
  ],
  "size": {},
  "iifePath": "main.iife.js",
  "repoName": "@htmlbricks/hb-toast",
  "version": "0.71.32"
}