{
  "$schema": "../manifest.schema.json",
  "schemaVersion": "1.2.0",
  "name": "ds-heading",
  "description": "Heading component with hierarchy",
  "docUrl": "https://design.soracom.io/design-system/elements/heading/",
  "category": "elements",
  "usageNotes": [
    "Heading sizes and line heights use shared global typography tokens: `--heading-size-*` and `--heading-line-height-*`.",
    "Set `--heading-size-scale` and `--heading-line-height-scale` on `:root`, `:host`, or any container. Both default to `1`; local scales replace inherited values without compounding. Text scales are independent.",
    "Use `--ds-heading-size` and `--ds-heading-line-height` for component-specific base overrides before scaling. Private `--_heading-*` properties are implementation details. Deprecated `--ds-heading-size-*` and `--ds-heading-line-height-*` token names remain read aliases; migrate token overrides to the new global names."
  ],
  "htmlElements": [
    "h1",
    "h2",
    "h3",
    "h4",
    "h5",
    "h6",
    "div"
  ],
  "isWebComponent": false,
  "modifiers": {
    "size": {
      "support": "custom",
      "values": [
        "--4xsmall",
        "--3xsmall",
        "--2xsmall",
        "--xsmall",
        "--small",
        "--medium",
        "--large",
        "--xlarge",
        "--2xlarge",
        "--3xlarge",
        "--4xlarge",
        "--huge",
        "--xhuge",
        "--2xhuge",
        "--3xhuge",
        "--4xhuge",
        "--xxsmall",
        "--xxlarge",
        "--xxhuge"
      ]
    },
    "color": {
      "support": "all"
    },
    "visual-state": {
      "support": "all"
    },
    "notification-state": {
      "support": "all"
    },
    "layout": {
      "support": "custom",
      "values": [
        "--left",
        "--center",
        "--right",
        "--middle"
      ]
    },
    "icon": {
      "support": "all"
    },
    "indent": {
      "support": "all"
    }
  },
  "cssCustomProperties": [
    {
      "name": "--ds-heading-size",
      "description": "Component base font size before --heading-size-scale is applied. Native heading levels and size modifiers select their matching global tokens; an unmodified .ds-heading defaults to --heading-size-large."
    },
    {
      "name": "--ds-heading-line-height",
      "description": "Component base line height before --heading-line-height-scale is applied. Native heading levels and size modifiers select their matching global tokens; an unmodified .ds-heading defaults to --heading-line-height-large. Use a unitless number for line-count sizing."
    }
  ],
  "attributes": {},
  "dataAttributes": [
    {
      "name": "data-notification-counter",
      "description": "Displays a numeric counter badge on the heading root. Used with a --notification modifier.",
      "valueType": "number"
    }
  ],
  "examples": [
    {
      "name": "basic",
      "html": "<h2>Heading Text</h2>"
    },
    {
      "name": "h1",
      "html": "<h1>Heading 1</h1>"
    },
    {
      "name": "h3",
      "html": "<h3>Heading 3</h3>"
    },
    {
      "name": "h4",
      "html": "<h4>Heading 4</h4>"
    },
    {
      "name": "small",
      "html": "<h2 class=\"--small\">Small Heading</h2>"
    },
    {
      "name": "large",
      "html": "<h2 class=\"--large\">Large Heading</h2>"
    },
    {
      "name": "xlarge",
      "html": "<h2 class=\"--xlarge\">Extra Large Heading</h2>"
    },
    {
      "name": "2xlarge",
      "html": "<h2 class=\"--2xlarge\">2XL Heading</h2>"
    },
    {
      "name": "color-blue",
      "html": "<h2 class=\"--color-blue\">Blue Heading</h2>"
    },
    {
      "name": "alert",
      "html": "<h2 class=\"--alert\">Alert Heading</h2>"
    },
    {
      "name": "with-icon",
      "html": "<h2 class=\"--icon-star\">Starred Heading</h2>"
    },
    {
      "name": "ds-heading-class",
      "html": "<div class=\"ds-heading --large\">Div as heading</div>"
    },
    {
      "name": "scaled-heading",
      "html": "<div style=\"--heading-size-scale: 1.1; --heading-line-height-scale: 1.2;\"><h2>Scaled heading</h2><div class=\"ds-heading --small\">Scaled small heading</div></div>"
    }
  ]
}