{
  "name": "ds-scale",
  "description": "Scale/gauge component",
  "docUrl": "https://design.soracom.io/design-system/elements/scale/",
  "category": "elements",
  "htmlElements": [
    "div"
  ],
  "isWebComponent": false,
  "modifiers": {
    "variant": {
      "support": "custom",
      "values": [
        "--progress",
        "--excess",
        "--caution-90",
        "--caution-95",
        "--caution-100"
      ]
    },
    "color": {
      "support": "all"
    }
  },
  "examples": [
    {
      "name": "basic",
      "html": "<div class=\"ds-scale\" style=\"--ds-scale-pc: 50%\"></div>"
    },
    {
      "name": "empty",
      "html": "<div class=\"ds-scale\" style=\"--ds-scale-pc: 0%\"></div>"
    },
    {
      "name": "full",
      "html": "<div class=\"ds-scale\" style=\"--ds-scale-pc: 100%\"></div>"
    },
    {
      "name": "progress",
      "html": "<div class=\"ds-scale --progress\" style=\"--ds-scale-pc: 65%\"></div>"
    },
    {
      "name": "with-color",
      "html": "<div class=\"ds-scale --color-orange\" style=\"--ds-scale-pc: 60%\"></div>"
    },
    {
      "name": "progress-with-color",
      "html": "<div class=\"ds-scale --progress --color-orange\" style=\"--ds-scale-pc: 60%\"></div>"
    },
    {
      "name": "caution-90",
      "html": "<div class=\"ds-scale --caution-90\" style=\"--ds-scale-pc: 90%\"></div>"
    },
    {
      "name": "caution-95",
      "html": "<div class=\"ds-scale --caution-95\" style=\"--ds-scale-pc: 95%\"></div>"
    },
    {
      "name": "caution-100",
      "html": "<div class=\"ds-scale --caution-100\" style=\"--ds-scale-pc: 100%\"></div>"
    },
    {
      "name": "excess",
      "html": "<div class=\"ds-scale --excess\" style=\"--ds-scale-pc: 100%\"></div>"
    },
    {
      "name": "with-calc",
      "html": "<div class=\"ds-scale\" style=\"--ds-scale-pc: calc(750 / 1000 * 100%)\"></div>"
    }
  ]
}