{
  "$schema": "../manifest.schema.json",
  "schemaVersion": "1.0.0",
  "name": "ds-notice",
  "description": "Notice/alert component",
  "docUrl": "https://design.soracom.io/design-system/elements/notice/",
  "category": "elements",
  "htmlElements": [
    "div",
    "a"
  ],
  "isWebComponent": false,
  "modifiers": {
    "color": {
      "support": "all"
    },
    "gradient": {
      "support": "all"
    },
    "visual-state": {
      "support": "all"
    },
    "variant": {
      "support": "custom",
      "values": [
        "--plain",
        "--light",
        "--strong",
        "--fee",
        "--flag",
        "--pinned",
        "--flow-down"
      ]
    },
    "layout": {
      "support": "custom",
      "values": [
        "--center"
      ]
    },
    "state": {
      "support": "subset",
      "values": [
        "--loading",
        "--loading-refresh"
      ]
    },
    "icon": {
      "support": "all"
    },
    "indent": {
      "support": "all"
    }
  },
  "structure": {
    "parts": {
      "pinnedTag": {
        "element": "span",
        "alternativeElements": [
          "p"
        ],
        "selector": ".ds-tag.--pinned",
        "optional": true,
        "position": [
          "first"
        ]
      },
      "close": {
        "element": "button",
        "selector": ".__close, .ds-button.--close",
        "optional": true,
        "position": [
          "first"
        ]
      },
      "heading": {
        "element": "h2",
        "alternativeElements": [
          "h3",
          "h4"
        ],
        "optional": true
      },
      "action": {
        "element": "a",
        "alternativeElements": [
          "button"
        ],
        "selector": ".ds-button",
        "optional": true,
        "position": [
          "last"
        ]
      }
    },
    "patterns": {
      "basic": "<div class=\"ds-notice\"><p>{content}</p></div>",
      "heading": "<div class=\"ds-notice\"><h3>{title}</h3><p>{content}</p></div>",
      "dismissible": "<div class=\"ds-notice\"><button class=\"ds-button --close\" type=\"button\"><span>{closeLabel}</span></button><p>{content}</p></div>"
    }
  },
  "attributes": {
    "href": {
      "description": "Navigation target when the notice root or its action is an anchor.",
      "appliesTo": [
        {
          "elements": [
            "a"
          ]
        },
        {
          "part": "action",
          "elements": [
            "a"
          ]
        }
      ]
    }
  },
  "dataAttributes": [
    {
      "name": "data-ds-message",
      "description": "Message text that hides the notice contents and renders the SDS message state.",
      "valueType": "string"
    }
  ],
  "examples": [
    {
      "name": "basic",
      "html": "<div class=\"ds-notice\"><p>Notice message</p></div>"
    },
    {
      "name": "alert",
      "html": "<div class=\"ds-notice --alert\"><p>Alert notice with automatic warning icon.</p></div>"
    },
    {
      "name": "warning",
      "html": "<div class=\"ds-notice --warning\"><p>Warning notice with automatic notice icon.</p></div>"
    },
    {
      "name": "success",
      "html": "<div class=\"ds-notice --success\"><p>Success notice with automatic check icon.</p></div>"
    },
    {
      "name": "info",
      "html": "<div class=\"ds-notice --info\"><p>Info notice with automatic info icon.</p></div>"
    },
    {
      "name": "strong",
      "html": "<div class=\"ds-notice --strong\"><p>Strong notice with full background and contrasting text.</p></div>"
    },
    {
      "name": "plain",
      "html": "<div class=\"ds-notice --plain\"><p>Plain notice with transparent background.</p></div>"
    },
    {
      "name": "light",
      "html": "<div class=\"ds-notice --light\"><p>Light notice with reduced background opacity.</p></div>"
    },
    {
      "name": "fee",
      "html": "<div class=\"ds-notice --fee\"><p>Fee notice with gradient styling.</p></div>"
    },
    {
      "name": "flag",
      "html": "<div class=\"ds-notice --flag\"><p>Flag-style notice.</p></div>"
    },
    {
      "name": "pinned",
      "html": "<div class=\"ds-notice --pinned\"><p>Pinned notice with no border radius, for top-of-page placement.</p></div>"
    },
    {
      "name": "center",
      "html": "<div class=\"ds-notice --center\"><p>Centered notice.</p></div>"
    },
    {
      "name": "message",
      "html": "<div class=\"ds-notice\" data-ds-message=\"No additional information\"><p>Notice content</p></div>"
    },
    {
      "name": "with-icon",
      "html": "<div class=\"ds-notice --icon-star\"><p>Custom icon notice.</p></div>"
    },
    {
      "name": "color-blue",
      "html": "<div class=\"ds-notice --color-blue\"><p>Blue notice.</p></div>"
    },
    {
      "name": "with-close-button",
      "html": "<div class=\"ds-notice --info\"><button class=\"ds-button --close\" title=\"Close\"><span>Close</span></button><p>Notice with a close button.</p></div>"
    },
    {
      "name": "with-heading",
      "html": "<div class=\"ds-notice --alert\"><h3>Important Notice</h3><p>Alert notice with a heading.</p></div>"
    }
  ]
}