{
  "$schema": "../manifest.schema.json",
  "schemaVersion": "1.0.0",
  "name": "ds-richtip",
  "description": "Rich content tooltip component",
  "docUrl": "https://design.soracom.io/design-system/elements/richtip/",
  "category": "elements",
  "htmlElements": [
    "div",
    "details"
  ],
  "isWebComponent": false,
  "modifiers": {
    "state": {
      "support": "subset",
      "values": [
        "--active"
      ]
    },
    "visual-state": {
      "support": "all"
    },
    "color": {
      "support": "all"
    },
    "position": {
      "support": "custom",
      "values": [
        "--tip-top-left",
        "--tip-top",
        "--tip-top-right",
        "--tip-bottom-left",
        "--tip-bottom",
        "--tip-bottom-right",
        "--tip-left-top",
        "--tip-left",
        "--tip-left-bottom",
        "--tip-right-top",
        "--tip-right",
        "--tip-right-bottom"
      ]
    }
  },
  "cssCustomProperties": [
    {
      "name": "--ds-richtip-max-width",
      "default": "340px",
      "description": "Maximum width of the rich tooltip content"
    }
  ],
  "structure": {
    "parts": {
      "trigger": {
        "element": "summary",
        "alternativeElements": [
          "button",
          "i",
          "div"
        ],
        "selector": "summary, [class*=\"__button\"]",
        "required": true,
        "position": [
          "first"
        ]
      },
      "content": {
        "element": "div",
        "selector": "[class*=\"__content\"]",
        "required": true,
        "position": [
          "after trigger"
        ]
      }
    },
    "patterns": {
      "hover": "<div class=\"ds-richtip\"><i class=\"ds-icon --icon-info __button\"></i><div class=\"__content\">{content}</div></div>",
      "details": "<details class=\"ds-richtip\"><summary><i class=\"ds-icon --icon-info\"></i></summary><div class=\"__content\">{content}</div></details>"
    }
  },
  "attributes": {
    "open": {
      "description": "Opens the rich tooltip when the component uses a native details element.",
      "appliesTo": [
        {
          "elements": [
            "details"
          ]
        }
      ]
    }
  },
  "dataAttributes": [],
  "examples": [
    {
      "name": "basic",
      "html": "<div class=\"ds-richtip\"><i class=\"ds-icon --icon-info ds-richtip__button\"></i><div class=\"ds-richtip__content\">Global multicarrier cellular connectivity <strong>built for IoT & M2M</strong>. Pay as you go with no commitments and all the <a href=\"#\">tools you need</a> to manage and secure your IoT network and devices.</div></div>"
    },
    {
      "name": "text-trigger",
      "html": "<div class=\"ds-richtip\"><div class=\"ds-richtip__button ds-text\">Text Content</div><div class=\"ds-richtip__content\">Rich tooltip content with <strong>formatting</strong>.</div></div>"
    },
    {
      "name": "button-trigger",
      "html": "<div class=\"ds-richtip\"><button class=\"ds-button ds-richtip__button\"><span>Button label</span></button><div class=\"ds-richtip__content\">Rich tooltip content with <strong>formatting</strong>.</div></div>"
    },
    {
      "name": "details",
      "html": "<details class=\"ds-richtip\"><summary><i class=\"ds-icon --icon-info\"></i></summary><div class=\"ds-richtip__content\">Click the icon to toggle this rich content tooltip.</div></details>"
    },
    {
      "name": "active",
      "html": "<div class=\"ds-richtip --active\"><i class=\"ds-icon --icon-info ds-richtip__button\"></i><div class=\"ds-richtip__content\">This tooltip is always visible with the <code>--active</code> modifier.</div></div>"
    }
  ]
}