{
  "$schema": "../manifest.schema.json",
  "schemaVersion": "1.0.0",
  "name": "ds-required",
  "description": "Required field indicator",
  "docUrl": "https://design.soracom.io/design-system/web-components/required/",
  "category": "utility",
  "htmlElements": [
    "ds-required"
  ],
  "isWebComponent": true,
  "modifiers": {},
  "attributes": {
    "css": {
      "description": "CSS loading mode. Global CSS is used by default; shadow loads base CSS into Shadow DOM.",
      "values": [
        "global",
        "shadow"
      ],
      "default": "global",
      "appliesTo": [
        {
          "elements": [
            "ds-required"
          ]
        }
      ]
    }
  },
  "dataAttributes": [],
  "webComponentApi": {
    "tagName": "ds-required",
    "className": "DsRequired",
    "observedAttributes": []
  },
  "examples": [
    {
      "name": "basic",
      "html": "<ds-required></ds-required>"
    },
    {
      "name": "in-label",
      "html": "<label class=\"ds-field\"><div class=\"ds-text --label\">Name <ds-required></ds-required></div><div class=\"ds-input\"><input type=\"text\" placeholder=\"Enter name\" required></div></label>"
    },
    {
      "name": "native-abbr",
      "html": "<abbr class=\"--required\" title=\"required\">*</abbr>"
    }
  ]
}