{
  "$schema": "../manifest.schema.json",
  "schemaVersion": "1.0.0",
  "name": "ds-icon",
  "description": "Icon component with SDS icon set",
  "docUrl": "https://design.soracom.io/design-system/images/icons/",
  "category": "elements",
  "htmlElements": [
    "i",
    "ds-icon"
  ],
  "isWebComponent": true,
  "modifiers": {
    "size": {
      "support": "custom",
      "values": [
        "--4xsmall",
        "--3xsmall",
        "--2xsmall",
        "--xsmall",
        "--small",
        "--medium",
        "--large",
        "--xlarge",
        "--2xlarge",
        "--3xlarge",
        "--4xlarge",
        "--huge",
        "--xhuge",
        "--2xhuge",
        "--3xhuge",
        "--4xhuge",
        "--xxtiny",
        "--xtiny",
        "--tiny",
        "--xxsmall",
        "--xxlarge",
        "--xxhuge",
        "--massive",
        "--xmassive",
        "--xxmassive"
      ]
    },
    "color": {
      "support": "all"
    },
    "visual-state": {
      "support": "all"
    },
    "shape": {
      "support": "subset",
      "values": [
        "--round",
        "--square",
        "--rounded"
      ]
    },
    "animation": {
      "support": "subset",
      "values": [
        "--spin",
        "--pulse",
        "--glow",
        "--blink"
      ]
    },
    "indent": {
      "support": "all"
    },
    "icon": {
      "support": "all"
    }
  },
  "attributes": {
    "icon": {
      "description": "Icon name rendered as the corresponding --icon-* class.",
      "pattern": "^[a-z0-9]+(-[a-z0-9]+)*$",
      "allowUnknown": true,
      "appliesTo": [
        {
          "elements": [
            "ds-icon"
          ]
        }
      ]
    },
    "color": {
      "description": "SDS color name rendered as the corresponding --color-* class.",
      "pattern": "^[a-z0-9]+(-[a-z0-9]+)*$",
      "allowUnknown": true,
      "appliesTo": [
        {
          "elements": [
            "ds-icon"
          ]
        }
      ]
    },
    "size": {
      "description": "Icon size.",
      "values": [
        "4xsmall",
        "3xsmall",
        "2xsmall",
        "xsmall",
        "small",
        "medium",
        "large",
        "xlarge",
        "2xlarge",
        "3xlarge",
        "4xlarge",
        "huge",
        "xhuge",
        "2xhuge",
        "3xhuge",
        "4xhuge",
        "xxtiny",
        "xtiny",
        "tiny",
        "xxsmall",
        "xxlarge",
        "xxhuge",
        "massive",
        "xmassive",
        "xxmassive"
      ],
      "appliesTo": [
        {
          "elements": [
            "ds-icon"
          ]
        }
      ]
    },
    "state": {
      "description": "Visual state applied to the icon.",
      "values": [
        "alert",
        "warning",
        "success",
        "info",
        "muted"
      ],
      "appliesTo": [
        {
          "elements": [
            "ds-icon"
          ]
        }
      ]
    },
    "animation": {
      "description": "One or more comma-separated icon animations.",
      "pattern": "^(spin|pulse|glow|blink)(\\s*,\\s*(spin|pulse|glow|blink))*$",
      "appliesTo": [
        {
          "elements": [
            "ds-icon"
          ]
        }
      ]
    },
    "css": {
      "description": "CSS loading mode. Global CSS is used by default; shadow loads component CSS into Shadow DOM.",
      "values": [
        "global",
        "shadow"
      ],
      "default": "global",
      "appliesTo": [
        {
          "elements": [
            "ds-icon"
          ]
        }
      ]
    }
  },
  "dataAttributes": [],
  "webComponentApi": {
    "tagName": "ds-icon",
    "className": "DsIcon",
    "observedAttributes": [
      "icon",
      "color",
      "size",
      "state",
      "animation"
    ]
  },
  "registries": {
    "icons": {
      "path": "./ds-icons.json",
      "description": "SDS icon metadata, including names, aliases, categories, and source URLs."
    }
  },
  "examples": [
    {
      "name": "basic",
      "html": "<i class=\"ds-icon --icon-user\"></i>"
    },
    {
      "name": "star",
      "html": "<i class=\"ds-icon --icon-star\"></i>"
    },
    {
      "name": "settings",
      "html": "<i class=\"ds-icon --icon-settings\"></i>"
    },
    {
      "name": "search",
      "html": "<i class=\"ds-icon --icon-search\"></i>"
    },
    {
      "name": "close",
      "html": "<i class=\"ds-icon --icon-close\"></i>"
    },
    {
      "name": "check",
      "html": "<i class=\"ds-icon --icon-check\"></i>"
    },
    {
      "name": "warning",
      "html": "<i class=\"ds-icon --icon-warning\"></i>"
    },
    {
      "name": "info",
      "html": "<i class=\"ds-icon --icon-info\"></i>"
    },
    {
      "name": "edit",
      "html": "<i class=\"ds-icon --icon-edit\"></i>"
    },
    {
      "name": "trash",
      "html": "<i class=\"ds-icon --icon-trash\"></i>"
    },
    {
      "name": "download",
      "html": "<i class=\"ds-icon --icon-download\"></i>"
    },
    {
      "name": "upload",
      "html": "<i class=\"ds-icon --icon-upload\"></i>"
    },
    {
      "name": "_comment_sizes",
      "html": "Size examples"
    },
    {
      "name": "xsmall",
      "html": "<i class=\"ds-icon --icon-user --xsmall\"></i>"
    },
    {
      "name": "small",
      "html": "<i class=\"ds-icon --icon-user --small\"></i>"
    },
    {
      "name": "medium",
      "html": "<i class=\"ds-icon --icon-user --medium\"></i>"
    },
    {
      "name": "large",
      "html": "<i class=\"ds-icon --icon-user --large\"></i>"
    },
    {
      "name": "xlarge",
      "html": "<i class=\"ds-icon --icon-user --xlarge\"></i>"
    },
    {
      "name": "2xlarge",
      "html": "<i class=\"ds-icon --icon-user --2xlarge\"></i>"
    },
    {
      "name": "huge",
      "html": "<i class=\"ds-icon --icon-user --huge\"></i>"
    },
    {
      "name": "_comment_colors",
      "html": "Color examples"
    },
    {
      "name": "color-red",
      "html": "<i class=\"ds-icon --icon-heart --color-red\"></i>"
    },
    {
      "name": "color-blue",
      "html": "<i class=\"ds-icon --icon-settings --color-blue\"></i>"
    },
    {
      "name": "color-green",
      "html": "<i class=\"ds-icon --icon-check --color-green\"></i>"
    },
    {
      "name": "color-celeste",
      "html": "<i class=\"ds-icon --icon-star --color-celeste\"></i>"
    },
    {
      "name": "_comment_visual_states",
      "html": "Visual state examples"
    },
    {
      "name": "alert-state",
      "html": "<i class=\"ds-icon --icon-warning --alert\"></i>"
    },
    {
      "name": "success-state",
      "html": "<i class=\"ds-icon --icon-check --success\"></i>"
    },
    {
      "name": "info-state",
      "html": "<i class=\"ds-icon --icon-info --info\"></i>"
    },
    {
      "name": "_comment_shapes",
      "html": "Shape modifiers"
    },
    {
      "name": "round",
      "html": "<i class=\"ds-icon --icon-user --round --large\"></i>"
    },
    {
      "name": "square",
      "html": "<i class=\"ds-icon --icon-user --square --large\"></i>"
    },
    {
      "name": "rounded",
      "html": "<i class=\"ds-icon --icon-user --rounded --large\"></i>"
    },
    {
      "name": "_comment_animations",
      "html": "Animation examples"
    },
    {
      "name": "spin",
      "html": "<i class=\"ds-icon --icon-refresh --spin\"></i>"
    },
    {
      "name": "pulse",
      "html": "<i class=\"ds-icon --icon-heart --pulse\"></i>"
    },
    {
      "name": "glow",
      "html": "<i class=\"ds-icon --icon-star --glow\"></i>"
    },
    {
      "name": "blink",
      "html": "<i class=\"ds-icon --icon-bell --blink\"></i>"
    },
    {
      "name": "_comment_indents",
      "html": "Indent examples"
    },
    {
      "name": "indent-small",
      "html": "<i class=\"ds-icon --icon-user --xlarge --indent-small\"></i>"
    },
    {
      "name": "indent-medium",
      "html": "<i class=\"ds-icon --icon-user --xlarge --indent-medium\"></i>"
    },
    {
      "name": "_comment_complex",
      "html": "Complex combinations"
    },
    {
      "name": "round-large-colored",
      "html": "<i class=\"ds-icon --icon-star --round --large --color-celeste\"></i>"
    },
    {
      "name": "loading-spinner",
      "html": "<i class=\"ds-icon --icon-refresh --spin --medium\"></i>"
    },
    {
      "name": "alert-blink",
      "html": "<i class=\"ds-icon --icon-bell --alert --blink\"></i>"
    }
  ]
}