{
  "name": "ds-plan",
  "description": "Plan/pricing display component",
  "docUrl": "https://design.soracom.io/design-system/web-components/plan/",
  "category": "specialized",
  "htmlElements": [
    "ds-plan"
  ],
  "isWebComponent": true,
  "modifiers": {
    "size": {
      "support": "subset",
      "values": [
        "--xsmall",
        "--small",
        "--medium",
        "--large"
      ]
    }
  },
  "attributes": {
    "plan": {
      "description": "SORACOM plan key. Unknown keys render with fallback colors and a normalized label.",
      "allowUnknown": true
    },
    "bundle": {
      "description": "Optional bundle label displayed after the plan label."
    },
    "imsi": {
      "description": "Optional IMSI label displayed after the bundle label.",
      "pattern": "^\\d{15}$"
    },
    "icon": {
      "description": "Optional icon name added to the rendered ds-tag as a --icon-* modifier.",
      "pattern": "^((--)?icon-)?[a-z0-9]+(-[a-z0-9]+)*$"
    },
    "bundle-icon": {
      "description": "Optional icon name added to the bundle label as a --icon-* modifier.",
      "pattern": "^((--)?icon-)?[a-z0-9]+(-[a-z0-9]+)*$"
    },
    "imsi-icon": {
      "description": "Optional icon name added to the IMSI label as a --icon-* modifier.",
      "pattern": "^((--)?icon-)?[a-z0-9]+(-[a-z0-9]+)*$"
    },
    "size": {
      "description": "Display size.",
      "values": [
        "xsmall",
        "small",
        "medium",
        "large"
      ]
    },
    "type": {
      "description": "Optional input control type.",
      "values": [
        "checkbox",
        "radio"
      ]
    },
    "name": {
      "description": "Input name used when type is radio or checkbox."
    },
    "css": {
      "description": "CSS loading mode. Global CSS is the default and does not need to be specified.",
      "values": [
        "global"
      ],
      "default": "global"
    },
    "ds-wrapper": {
      "description": "Internal wrapper marker set by the component."
    }
  },
  "registries": {
    "plans": {
      "path": "./plans.json",
      "description": "Supported SORACOM plan keys, display names, background color classes, and text color classes."
    }
  },
  "examples": [
    {
      "name": "basic",
      "html": "<ds-plan>plan01s</ds-plan>"
    },
    {
      "name": "with-plan-attr",
      "html": "<ds-plan plan=\"planX3\"></ds-plan>"
    },
    {
      "name": "xsmall",
      "html": "<ds-plan plan=\"planX3\" size=\"xsmall\"></ds-plan>"
    },
    {
      "name": "small",
      "html": "<ds-plan plan=\"planX3\" size=\"small\"></ds-plan>"
    },
    {
      "name": "medium",
      "html": "<ds-plan plan=\"planX3\" size=\"medium\"></ds-plan>"
    },
    {
      "name": "large",
      "html": "<ds-plan plan=\"planX3\" size=\"large\"></ds-plan>"
    },
    {
      "name": "with-bundle",
      "html": "<ds-plan plan=\"planK\" bundle=\"K bundle\"></ds-plan>"
    },
    {
      "name": "with-imsi",
      "html": "<ds-plan plan=\"planUS\" bundle=\"5GB\" imsi=\"295050123456789\"></ds-plan>"
    },
    {
      "name": "with-icon",
      "html": "<ds-plan plan=\"planX3\" icon=\"chart\"></ds-plan>"
    },
    {
      "name": "with-label-icons",
      "html": "<ds-plan plan=\"planUS\" bundle=\"5GB\" imsi=\"295050123456789\" bundle-icon=\"archive\" imsi-icon=\"sim\"></ds-plan>"
    },
    {
      "name": "as-checkbox",
      "html": "<ds-plan plan=\"planX3\" type=\"checkbox\"></ds-plan>"
    },
    {
      "name": "as-radio",
      "html": "<ds-plan plan=\"planX3\" type=\"radio\" name=\"selected-plan\"></ds-plan>"
    },
    {
      "name": "global-css",
      "html": "<ds-plan plan=\"planX3\" css=\"global\"></ds-plan>"
    }
  ]
}