{
  "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": [
      "--xsmall",
      "--small",
      "--medium",
      "--large"
    ]
  },
  "registries": {
    "plans": {
      "path": "./plans.json",
      "description": "Supported SORACOM plan keys, display names, and 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": "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>"
    }
  ]
}