{
  "name": "ds-theme",
  "description": "Theme selector web component for light, system, and dark color modes",
  "docUrl": "https://design.soracom.io/design-system/web-components/theme/",
  "category": "utility",
  "htmlElements": [
    "ds-theme"
  ],
  "isWebComponent": true,
  "modifiers": {},
  "webComponentApi": {
    "tagName": "ds-theme",
    "className": "DsTheme",
    "observedAttributes": [
      "name",
      "storage-key",
      "value"
    ],
    "properties": {
      "value": {
        "type": "'light' | 'system' | 'dark'",
        "description": "Current theme selection. System removes data-ds-theme; light and dark set it explicitly."
      }
    },
    "events": [
      {
        "name": "ds-theme-change",
        "description": "Dispatched when the selected theme changes with detail { value: 'light' | 'system' | 'dark' }."
      }
    ]
  },
  "accessibility": {
    "role": "radiogroup",
    "ariaAttributes": [
      "aria-label"
    ],
    "notes": [
      "Renders native radio inputs inside a labelled SDS theme switch."
    ]
  },
  "examples": [
    {
      "name": "basic",
      "html": "<ds-theme></ds-theme>"
    },
    {
      "name": "initial-light",
      "html": "<ds-theme value=\"light\"></ds-theme>"
    },
    {
      "name": "custom-storage-key",
      "html": "<ds-theme storage-key=\"example:theme\"></ds-theme>"
    }
  ]
}