{
  "name": "color-scheme-icon",
  "displayName": "Color scheme icon",
  "type": "shadow",
  "isCustomElement": true,
  "tag": "l-color-scheme-icon",
  "nativeTag": null,
  "selector": "l-color-scheme-icon",
  "subItemOf": null,
  "summary": "A sun that morphs into a moon. Purely presentational: it shows a\ncolor scheme, it does not choose or store one.\n\nThe two glyphs are a single shape — the disc grows, a mask slides in to carve\nthe crescent, and the rays retract in a ripple — so the change reads as one\nobject turning rather than two icons swapping. That is why this is authored\nSVG rather than an `<l-icon>`: an Iconify icon is opaque, and you cannot grow\none into another or animate a mask inside it.\n\nUse it wherever a scheme needs a glyph and the surrounding element is already\nthe control — a `menuitemcheckbox` row, a button, a legend. With no `scheme`\nit follows the page's scheme from `luxen-ui/color-scheme`, so it needs no\nwiring; set `scheme` to pin it.",
  "status": "stable",
  "appearances": [],
  "import": {
    "css": null,
    "js": "luxen-ui/color-scheme-icon"
  },
  "properties": [
    {
      "name": "scheme",
      "attribute": "scheme",
      "type": "ColorScheme | undefined",
      "default": null,
      "reflects": true,
      "description": "Which glyph to show. Leave it unset and the icon follows the page's scheme\n(`colorScheme.current` — a stored override, else the OS preference), so it\nstays in step with every other control without wiring. Set it to pin the\nglyph, for a legend or a preview that must not move."
    },
    {
      "name": "label",
      "attribute": "label",
      "type": "string | undefined",
      "default": null,
      "reflects": false,
      "description": "Accessible label. When set, the glyph becomes meaningful (`role=\"img\"`);\nwhen absent it is decorative and hidden from assistive tech — the right\ndefault inside a row or button that already carries the name."
    }
  ],
  "attributes": [],
  "events": [],
  "methods": [],
  "slots": [],
  "cssClasses": [],
  "cssParts": [
    {
      "name": "base",
      "description": "The root `<svg>`, for overriding the morph's timing or tilt."
    }
  ],
  "cssProperties": [
    {
      "name": "--size",
      "default": "1em",
      "description": "Width and height of the glyph."
    },
    {
      "name": "--color",
      "default": "currentColor",
      "description": "Glyph color."
    }
  ],
  "commands": [],
  "examples": [
    {
      "title": "In a menu row, where the row is the control",
      "language": "html",
      "code": "```html\n<l-dropdown-item type=\"checkbox\" checked>\n<l-color-scheme-icon slot=\"prefix\" scheme=\"dark\"></l-color-scheme-icon>\nDark theme\n</l-dropdown-item>\n```"
    }
  ]
}