{
  "$schema": "../manifest.schema.json",
  "schemaVersion": "1.0.0",
  "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"
    }
  },
  "cssCustomProperties": [
    {
      "name": "--ds-scale-pc",
      "default": "0%",
      "description": "Percentage width of the filled scale bar"
    },
    {
      "name": "--ds-scale-width",
      "default": "100%",
      "description": "Width of the overall scale"
    }
  ],
  "attributes": {},
  "dataAttributes": [],
  "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>"
    }
  ]
}