{
  "name": "Modal",
  "tagName": "noora-modal",
  "elementClassName": "NooraModal",
  "className": "noora-modal",
  "modulePath": "./priv/static/noora-web-components.js",
  "description": "Presents focused content above the current page.",
  "usage": "<noora-modal title=\"Edit profile\"><button slot=\"trigger\">Open</button><p>Profile form</p></noora-modal>",
  "attributes": [
    {
      "name": "title",
      "property": "title",
      "type": "string",
      "description": "Sets the modal title."
    },
    {
      "name": "description",
      "property": "description",
      "type": "string",
      "description": "Sets the large-header description."
    },
    {
      "name": "header-type",
      "property": "headerType",
      "type": "string",
      "values": ["default", "icon", "success", "info", "warning", "error"],
      "default": "default",
      "description": "Controls the header icon and semantics."
    },
    {
      "name": "header-size",
      "property": "headerSize",
      "type": "string",
      "values": ["small", "large"],
      "default": "large",
      "description": "Controls header dimensions."
    },
    {
      "name": "open",
      "property": "open",
      "type": "boolean",
      "default": false,
      "description": "Controls whether the modal is open."
    },
    {
      "name": "close-on-escape",
      "property": "closeOnEscape",
      "type": "boolean",
      "default": true,
      "description": "Closes the modal when Escape is pressed."
    },
    {
      "name": "close-on-interact-outside",
      "property": "closeOnInteractOutside",
      "type": "boolean",
      "default": true,
      "description": "Closes the modal when its backdrop is activated."
    }
  ],
  "readonlyProperties": [],
  "slots": [
    {
      "name": "trigger",
      "description": "The control that opens the modal."
    },
    {
      "name": "header-icon",
      "description": "A custom icon for icon headers."
    },
    {
      "name": "header-button",
      "description": "A custom header action."
    },
    {
      "name": "",
      "description": "The modal body."
    },
    {
      "name": "footer",
      "description": "The modal footer."
    }
  ],
  "cssParts": [
    {
      "name": "backdrop",
      "description": "The page backdrop."
    },
    {
      "name": "content",
      "description": "The modal surface."
    },
    {
      "name": "header",
      "description": "The modal header."
    },
    {
      "name": "body",
      "description": "The modal body."
    },
    {
      "name": "footer",
      "description": "The modal footer."
    }
  ],
  "events": [
    {
      "name": "noora-open-change",
      "type": "CustomEvent<{ open: boolean }>",
      "description": "Emitted when the modal opens or closes."
    },
    {
      "name": "noora-dismiss",
      "type": "CustomEvent<{ reason: \"close-button\" | \"escape\" | \"outside\" | \"action\" }>",
      "description": "Emitted when the modal is dismissed without a direct open-property assignment."
    }
  ],
  "notes": [
    "Opening and closing emits a `noora-open-change` event.",
    "Slotted footer buttons can use `data-action=\"close\"` to close the modal."
  ],
  "examples": [
    {
      "id": "header-types",
      "title": "Header types",
      "description": "Use default, custom-icon, success, information, warning, or error headers.",
      "markup": "<noora-modal title=\"Default Modal\" description=\"A standard modal with default header styling\" header-type=\"default\" header-size=\"large\"><noora-button slot=\"trigger\">Default Modal</noora-button><p>This is a basic modal with default header styling.</p><noora-button slot=\"footer\" variant=\"secondary\" data-action=\"close\">Cancel</noora-button><noora-button slot=\"footer\">Confirm</noora-button></noora-modal>\n<noora-modal title=\"Custom Icon Modal\" description=\"Modal with custom icon in header\" header-type=\"icon\" header-size=\"large\"><noora-button slot=\"trigger\">Icon Modal</noora-button><noora-icon slot=\"header-icon\" name=\"mail\"></noora-icon><noora-text-input label=\"Email\" name=\"email\" value=\"\" type=\"email\" required placeholder=\"hello@tuist.dev\"></noora-text-input><noora-button slot=\"footer\" variant=\"secondary\" data-action=\"close\">Cancel</noora-button><noora-button slot=\"footer\">Send</noora-button></noora-modal>\n<noora-modal title=\"Success\" description=\"Operation completed successfully\" header-type=\"success\" header-size=\"large\"><noora-button slot=\"trigger\">Success Modal</noora-button><p>Your operation has been completed successfully!</p><noora-button slot=\"footer\" data-action=\"close\">Close</noora-button></noora-modal>\n<noora-modal title=\"Information\" description=\"Important information about this action\" header-type=\"info\" header-size=\"large\"><noora-button slot=\"trigger\">Info Modal</noora-button><p>Here's some important information you should know before proceeding.</p><noora-button slot=\"footer\" data-action=\"close\">Got it</noora-button></noora-modal>\n<noora-modal title=\"Warning\" description=\"This action requires your attention\" header-type=\"warning\" header-size=\"large\"><noora-button slot=\"trigger\">Warning Modal</noora-button><p>This action may have consequences. Please review before continuing.</p><noora-button slot=\"footer\" variant=\"secondary\" data-action=\"close\">Cancel</noora-button><noora-button slot=\"footer\" variant=\"destructive\">Continue</noora-button></noora-modal>\n<noora-modal title=\"Error\" description=\"Something went wrong\" header-type=\"error\" header-size=\"large\"><noora-button slot=\"trigger\">Error Modal</noora-button><p>An error occurred while processing your request. Please try again.</p><noora-button slot=\"footer\">Retry</noora-button></noora-modal>"
    },
    {
      "id": "header-sizes",
      "title": "Header sizes",
      "description": "Small headers omit the description while large headers show it.",
      "markup": "<noora-modal title=\"Small Header\" description=\"This description won't be shown because header size is small\" header-type=\"default\" header-size=\"small\"><noora-button slot=\"trigger\">Small Header</noora-button><p>Modal with small header - description is not displayed.</p><noora-button slot=\"footer\" data-action=\"close\">Close</noora-button></noora-modal>\n<noora-modal title=\"Large Header\" description=\"This description is visible because header size is large\" header-type=\"default\" header-size=\"large\"><noora-button slot=\"trigger\">Large Header</noora-button><p>Modal with large header - description is displayed below the title.</p><noora-button slot=\"footer\" data-action=\"close\">Close</noora-button></noora-modal>"
    },
    {
      "id": "footers",
      "title": "Footer variations",
      "description": "Use no footer, one action, or multiple actions.",
      "markup": "<noora-modal title=\"Modal Without Footer\" description=\"This modal has no footer section\" header-type=\"default\" header-size=\"large\"><noora-button slot=\"trigger\">No Footer</noora-button><p>This modal doesn't have a footer. Users can close it using the X button in the header.</p></noora-modal>\n<noora-modal title=\"Single Action\" description=\"Modal with only one action button\" header-type=\"success\" header-size=\"large\"><noora-button slot=\"trigger\">Single Action</noora-button><p>This modal has only one action in the footer.</p><noora-button slot=\"footer\" data-action=\"close\">Got it</noora-button></noora-modal>\n<noora-modal title=\"Multiple Actions\" description=\"Modal with several action buttons\" header-type=\"warning\" header-size=\"large\"><noora-button slot=\"trigger\">Multiple Actions</noora-button><p>This modal demonstrates multiple action buttons in the footer.</p><noora-button slot=\"footer\" variant=\"secondary\">Save Draft</noora-button><noora-button slot=\"footer\" variant=\"secondary\" data-action=\"close\">Cancel</noora-button><noora-button slot=\"footer\">Publish</noora-button></noora-modal>"
    }
  ]
}