{
  "$schema": "../manifest.schema.json",
  "schemaVersion": "1.0.0",
  "name": "ds-text",
  "description": "Styled text component",
  "docUrl": "https://design.soracom.io/design-system/elements/text/",
  "category": "elements",
  "htmlElements": [
    "div",
    "p",
    "span",
    "h1",
    "h2",
    "h3",
    "h4",
    "h5",
    "h6",
    "label",
    "summary",
    "li",
    "a",
    "strong",
    "em"
  ],
  "isWebComponent": false,
  "modifiers": {
    "size": {
      "support": "custom",
      "values": [
        "--4xsmall",
        "--3xsmall",
        "--2xsmall",
        "--xsmall",
        "--small",
        "--medium",
        "--medium-bold",
        "--large",
        "--xlarge",
        "--2xlarge",
        "--3xlarge",
        "--4xlarge",
        "--huge",
        "--xhuge",
        "--2xhuge",
        "--3xhuge",
        "--4xhuge",
        "--xxsmall",
        "--xxlarge",
        "--xxhuge"
      ]
    },
    "color": {
      "support": "all"
    },
    "visual-state": {
      "support": "all"
    },
    "notification-state": {
      "support": "all"
    },
    "variant": {
      "support": "custom",
      "values": [
        "--inset",
        "--fee",
        "--fee-light",
        "--fee-strong",
        "--addon",
        "--label",
        "--note",
        "--nowrap",
        "--no-wrap"
      ]
    },
    "layout": {
      "support": "custom",
      "values": [
        "--end",
        "--right"
      ]
    },
    "icon": {
      "support": "all"
    },
    "indent": {
      "support": "all"
    }
  },
  "attributes": {
    "href": {
      "description": "Navigation target when ds-text is applied to an anchor element.",
      "appliesTo": [
        {
          "elements": [
            "a"
          ]
        }
      ]
    }
  },
  "dataAttributes": [
    {
      "name": "data-notification-counter",
      "description": "Displays a numeric counter badge on the text root. Used with a --notification modifier.",
      "valueType": "number"
    }
  ],
  "examples": [
    {
      "name": "basic",
      "html": "<p class=\"ds-text\">Text content</p>"
    },
    {
      "name": "small",
      "html": "<p class=\"ds-text --small\">Small text</p>"
    },
    {
      "name": "large",
      "html": "<p class=\"ds-text --large\">Large text</p>"
    },
    {
      "name": "xsmall",
      "html": "<p class=\"ds-text --xsmall\">Extra small text</p>"
    },
    {
      "name": "xlarge",
      "html": "<p class=\"ds-text --xlarge\">Extra large text</p>"
    },
    {
      "name": "bold",
      "html": "<p class=\"ds-text --medium-bold\">Bold medium text</p>"
    },
    {
      "name": "color-red",
      "html": "<p class=\"ds-text --color-red\">Red text</p>"
    },
    {
      "name": "color-blue",
      "html": "<p class=\"ds-text --color-blue\">Blue text</p>"
    },
    {
      "name": "alert",
      "html": "<p class=\"ds-text --alert\">Alert text</p>"
    },
    {
      "name": "with-icon",
      "html": "<p class=\"ds-text --icon-star\">Text with icon</p>"
    },
    {
      "name": "inset",
      "html": "<p class=\"ds-text --inset\">Inset text with padding</p>"
    },
    {
      "name": "fee",
      "html": "<p class=\"ds-text --fee\">Fee text with gradient icon</p>"
    },
    {
      "name": "note",
      "html": "<p class=\"ds-text --note\">Note text with left border accent</p>"
    },
    {
      "name": "nowrap",
      "html": "<p class=\"ds-text --nowrap\">Text that does not wrap</p>"
    },
    {
      "name": "as-span",
      "html": "<span class=\"ds-text --small\">Inline text element</span>"
    }
  ]
}