{
  "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` (sets `--hb-toast-accent` for border, icon/status tint, progress bar; panel uses `--bulma-background` / text tokens), `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": [
      {
        "name": "--bulma-column-gap",
        "valueType": "number",
        "defaultValue": "",
        "description": "Edge insets and internal gaps in the toast shell."
      },
      {
        "name": "--bulma-radius",
        "valueType": "number",
        "defaultValue": "",
        "description": "Card corner radius for the floating surface."
      },
      {
        "name": "--bulma-border-weak",
        "valueType": "color",
        "defaultValue": "",
        "description": "Hairline border and dividers."
      },
      {
        "name": "--bulma-shadow",
        "valueType": "string",
        "defaultValue": "",
        "description": "Drop shadow for the toast panel."
      },
      {
        "name": "--bulma-text",
        "valueType": "color",
        "defaultValue": "",
        "description": "Secondary lines and meta text."
      },
      {
        "name": "--bulma-text-strong",
        "valueType": "color",
        "defaultValue": "",
        "description": "Title and strong header tone."
      },
      {
        "name": "--bulma-block-spacing",
        "valueType": "number",
        "defaultValue": "",
        "description": "Vertical rhythm in header and footer stacks."
      }
    ],
    "parts": [
      {
        "name": "toast",
        "description": "Outer notification card: `--bulma-background` surface, `level` → `--hb-toast-accent` (start border, progress, icon tints)."
      },
      {
        "name": "status",
        "description": "Status row under the title: timeout countdown, `progress` percentage, or `small` meta text."
      }
    ]
  },
  "contributors": [],
  "htmlSlots": [
    {
      "name": "header_icon",
      "description": "Leading icon slot (default Bootstrap Icons bell). The `img` prop is reserved on the public API but is not rendered by this build."
    },
    {
      "name": "header_strong",
      "description": "Optional slot for the bold title line (mirrors `title` when empty)."
    },
    {
      "name": "header_small",
      "description": "Overrides computed status chip text (timeout / progress / elapsed)."
    },
    {
      "name": "body",
      "description": "Main copy under the header; mirrors `content` when empty."
    }
  ],
  "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-i9tTWkPUFEyO1wk8ASssjbm4tm/xJWMzXs0FVp2mlEM88KVyviPEIdpys79T44x8",
  "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.76.5"
}