{
  "version": "0.14.0",
  "elements": [
    {
      "name": "alert",
      "displayName": "Alert",
      "type": "custom",
      "isCustomElement": true,
      "tag": "l-alert",
      "nativeTag": null,
      "selector": "l-alert",
      "subItemOf": null,
      "summary": "A callout box that highlights contextual information with a semantic color and a leading icon.",
      "status": "stable",
      "appearances": [],
      "import": {
        "css": "luxen-ui/css/alert",
        "js": "luxen-ui/alert"
      },
      "properties": [
        {
          "name": "variant",
          "attribute": "variant",
          "type": "AlertVariant | undefined",
          "default": null,
          "reflects": true,
          "description": "Semantic variant: `info`, `success`, `warning`, or `danger`. Default is neutral."
        },
        {
          "name": "icon",
          "attribute": "icon",
          "type": "string | undefined",
          "default": null,
          "reflects": false,
          "description": "Iconify icon name (e.g. `lucide:bell`) overriding the variant's default icon."
        },
        {
          "name": "withoutIcon",
          "attribute": "without-icon",
          "type": "boolean",
          "default": "false",
          "reflects": false,
          "description": "Hide the leading icon entirely."
        },
        {
          "name": "dismissible",
          "attribute": "dismissible",
          "type": "boolean",
          "default": "false",
          "reflects": true,
          "description": "Show a close button that dismisses the alert when clicked."
        }
      ],
      "attributes": [],
      "events": [
        {
          "name": "hide",
          "description": "Emitted when a dismissible alert is about to close. Cancelable — call `event.preventDefault()` to keep it open.",
          "cancelable": true
        },
        {
          "name": "after-hide",
          "description": "Emitted after the dismiss animation completes and the alert is removed from the DOM. Not cancelable.",
          "cancelable": false
        }
      ],
      "methods": [],
      "slots": [],
      "cssClasses": [
        {
          "name": ".l-alert-icon",
          "description": "The leading icon, colored by variant (auto-injected)."
        },
        {
          "name": ".l-alert-content",
          "description": "Wrapper the authored children are moved into; stacks them vertically (auto-injected)."
        },
        {
          "name": ".l-alert-title",
          "description": "Optional bold heading placed above the body content. Use a real heading element (e.g. `<h3 class=\"l-alert-title\">`) when the alert is a section callout so it is reachable by heading navigation."
        }
      ],
      "cssParts": [],
      "cssProperties": [
        {
          "name": "--gap",
          "default": "0.75rem",
          "description": "Gap between the icon, content, and close button."
        },
        {
          "name": "--padding",
          "default": "1rem",
          "description": "Inner padding."
        },
        {
          "name": "--border-radius",
          "default": "8px",
          "description": "Corner radius."
        }
      ],
      "commands": [],
      "examples": [
        {
          "title": null,
          "language": "html",
          "code": "<l-alert variant=\"warning\" dismissible>\n  <span class=\"l-alert-title\">Heads up</span>\n  This action cannot be undone.\n</l-alert>"
        }
      ]
    },
    {
      "name": "alert-dialog",
      "displayName": "Alert dialog",
      "type": "shadow",
      "isCustomElement": true,
      "tag": "l-alert-dialog",
      "nativeTag": null,
      "selector": "l-alert-dialog",
      "subItemOf": null,
      "summary": "An interruptive confirmation dialog built on `<l-dialog>`. Renders its own\ncancel/confirm actions and exposes `role=\"alertdialog\"`. Use it to confirm a\nconsequential action (delete, publish, discard) — not for generic content.\n\nOpen and close by toggling the `open` property (or the `--show` / `--hide`\nInvoker commands). The dialog closes automatically when the user picks an\naction, unless the matching `confirm` / `cancel` event is canceled.",
      "status": "stable",
      "appearances": [],
      "import": {
        "css": null,
        "js": "luxen-ui/alert-dialog"
      },
      "properties": [
        {
          "name": "confirmText",
          "attribute": "confirm-text",
          "type": "string",
          "default": "'Confirm'",
          "reflects": false,
          "description": "Label for the confirm action."
        },
        {
          "name": "cancelText",
          "attribute": "cancel-text",
          "type": "string",
          "default": "'Cancel'",
          "reflects": false,
          "description": "Label for the cancel action."
        },
        {
          "name": "tone",
          "attribute": "tone",
          "type": "'danger' | undefined",
          "default": null,
          "reflects": true,
          "description": "Visual tone. `danger` renders the confirm action as destructive."
        },
        {
          "name": "loading",
          "attribute": "loading",
          "type": "boolean",
          "default": "false",
          "reflects": true,
          "description": "Show a busy state on the confirm action (spinner + `aria-disabled`); the\ncancel action stays operable as an escape hatch."
        },
        {
          "name": "title",
          "attribute": "title",
          "type": "string",
          "default": "''",
          "reflects": false,
          "description": "Dialog title rendered in the header and used as the dialog's accessible name."
        },
        {
          "name": "open",
          "attribute": "open",
          "type": "boolean",
          "default": "false",
          "reflects": true,
          "description": "Whether the dialog is open."
        },
        {
          "name": "lightDismiss",
          "attribute": "light-dismiss",
          "type": "boolean",
          "default": "false",
          "reflects": true,
          "description": "Close when the backdrop is clicked."
        },
        {
          "name": "withoutHeader",
          "attribute": "without-header",
          "type": "boolean",
          "default": "false",
          "reflects": true,
          "description": "Hide the header entirely (title and close slot)."
        }
      ],
      "attributes": [],
      "events": [
        {
          "name": "confirm",
          "description": "Fired when the user accepts. Cancelable — `preventDefault()` keeps it open for async work.",
          "cancelable": true
        },
        {
          "name": "cancel",
          "description": "Fired when the user dismisses (cancel action, Escape). Cancelable — `preventDefault()` keeps it open.",
          "cancelable": true
        },
        {
          "name": "show",
          "description": "Fired when the dialog is about to open. Cancelable.",
          "cancelable": true
        },
        {
          "name": "hide",
          "description": "Fired when the dialog is about to close via the `open` property. Cancelable. (The confirm, cancel, and Escape paths close natively and emit `confirm`/`cancel` instead of `hide`.)",
          "cancelable": true
        },
        {
          "name": "after-show",
          "description": "Fired after the open animation completes. Not cancelable.",
          "cancelable": false
        },
        {
          "name": "after-hide",
          "description": "Fired after the close animation completes. Not cancelable.",
          "cancelable": false
        }
      ],
      "methods": [],
      "slots": [
        {
          "name": "",
          "description": "Description text. Provides the dialog's accessible description."
        },
        {
          "name": "title",
          "description": "Custom heading element. Overrides the default `<h2>` rendered from the `title` property. Also provides the dialog's accessible name."
        },
        {
          "name": "cancel",
          "description": "Replaces the built-in cancel action (e.g. a link). Keep it focusable."
        },
        {
          "name": "confirm",
          "description": "Replaces the built-in confirm action."
        },
        {
          "name": "close",
          "description": "Close button (typically `<button class=\"l-close\">`)."
        },
        {
          "name": "footer",
          "description": "Footer actions."
        }
      ],
      "cssClasses": [],
      "cssParts": [
        {
          "name": "dialog",
          "description": "The native `<dialog>` element."
        },
        {
          "name": "header",
          "description": "The header wrapper containing the title."
        },
        {
          "name": "title",
          "description": "The dialog title heading."
        },
        {
          "name": "body",
          "description": "The body wrapper around the description."
        },
        {
          "name": "footer",
          "description": "The footer wrapper around the actions."
        },
        {
          "name": "button",
          "description": "Both built-in action buttons."
        },
        {
          "name": "cancel",
          "description": "The built-in cancel button."
        },
        {
          "name": "confirm",
          "description": "The built-in confirm button."
        }
      ],
      "cssProperties": [
        {
          "name": "--width",
          "default": "31rem",
          "description": "Dialog width."
        },
        {
          "name": "--border-radius",
          "default": "6px",
          "description": "Dialog border radius."
        },
        {
          "name": "--padding",
          "default": "1.5rem",
          "description": "Padding applied to the header, footer, and inline-padding of the body."
        },
        {
          "name": "--show-duration",
          "default": "200ms",
          "description": "Open transition duration."
        },
        {
          "name": "--hide-duration",
          "default": "200ms",
          "description": "Close transition duration."
        },
        {
          "name": "--backdrop",
          "default": null,
          "description": "Backdrop color."
        },
        {
          "name": "--backdrop-blur",
          "default": "0",
          "description": "Backdrop blur amount (any CSS length)."
        }
      ],
      "commands": [
        {
          "name": "--show",
          "description": "Sets `open = true`."
        },
        {
          "name": "--hide",
          "description": "Sets `open = false`."
        }
      ],
      "examples": []
    },
    {
      "name": "avatar",
      "displayName": "Avatar",
      "type": "shadow",
      "isCustomElement": true,
      "tag": "l-avatar",
      "nativeTag": null,
      "selector": "l-avatar",
      "subItemOf": null,
      "summary": "An avatar component for displaying user images, initials, or a default icon.",
      "status": "stable",
      "appearances": [],
      "import": {
        "css": "luxen-ui/css/avatar",
        "js": "luxen-ui/avatar"
      },
      "properties": [
        {
          "name": "src",
          "attribute": "src",
          "type": "string",
          "default": "''",
          "reflects": false,
          "description": "Image URL. Falls back to initials (then the default icon) if it fails to load."
        },
        {
          "name": "name",
          "attribute": "name",
          "type": "string",
          "default": "''",
          "reflects": false,
          "description": "Name used as the accessible label and to derive the initials fallback."
        },
        {
          "name": "size",
          "attribute": "size",
          "type": "string",
          "default": "'md'",
          "reflects": true,
          "description": "Avatar size: `xs`, `sm`, `md` (default), `lg`, or `xl`."
        },
        {
          "name": "badge",
          "attribute": "badge",
          "type": "number",
          "default": "0",
          "reflects": false,
          "description": "Count shown in the corner badge. `0` hides the badge."
        },
        {
          "name": "interactive",
          "attribute": "interactive",
          "type": "boolean",
          "default": "false",
          "reflects": true,
          "description": "Render as a `<button>` with focus ring and hover states."
        }
      ],
      "attributes": [],
      "events": [],
      "methods": [],
      "slots": [],
      "cssClasses": [
        {
          "name": ".l-avatar-group",
          "description": "Flex wrapper that overlaps a row of stacked avatars."
        }
      ],
      "cssParts": [
        {
          "name": "base",
          "description": "The avatar container that paints `--color`; style it (e.g. `color`) to override the auto-derived text color."
        }
      ],
      "cssProperties": [
        {
          "name": "--size",
          "default": "40px",
          "description": "Box size (any length). Set it inline (e.g. `style=\"--size: 20px\"`) for an arbitrary size beyond the `size` token scale; the font then follows proportionally. The `size` attribute sets it to the matching token."
        },
        {
          "name": "--color",
          "default": null,
          "description": "Background fill color for initials and the default icon."
        },
        {
          "name": "--text-color",
          "default": null,
          "description": "Initials/icon color over `--color`. Defaults to an auto-derived readable color; set it to enforce a specific brand color (overrides the automatic choice)."
        },
        {
          "name": "--appearance",
          "default": null,
          "description": "Set to `circle` for a fully circular avatar (default is a rounded square)."
        }
      ],
      "commands": [],
      "examples": []
    },
    {
      "name": "badge",
      "displayName": "Badge",
      "type": "custom",
      "isCustomElement": true,
      "tag": "l-badge",
      "nativeTag": null,
      "selector": "l-badge",
      "subItemOf": null,
      "summary": "A badge component for displaying small status indicators.",
      "status": "stable",
      "appearances": [],
      "import": {
        "css": "luxen-ui/css/badge",
        "js": "luxen-ui/badge"
      },
      "properties": [
        {
          "name": "variant",
          "attribute": "variant",
          "type": "BadgeVariant | undefined",
          "default": null,
          "reflects": true,
          "description": "Style variant: `info`, `success`, `warning`, `danger`, or `neutral` (default)"
        },
        {
          "name": "pill",
          "attribute": "pill",
          "type": "boolean",
          "default": "false",
          "reflects": true,
          "description": "Display as pill shape"
        },
        {
          "name": "size",
          "attribute": "size",
          "type": "BadgeSize | undefined",
          "default": null,
          "reflects": true,
          "description": "Badge size: `sm`, `lg`. Default is md."
        },
        {
          "name": "appearance",
          "attribute": "appearance",
          "type": "BadgeAppearance | undefined",
          "default": null,
          "reflects": true,
          "description": "Visual appearance: `filled`, `filled-outlined`, `accent`. Default is outlined."
        }
      ],
      "attributes": [],
      "events": [],
      "methods": [],
      "slots": [],
      "cssClasses": [],
      "cssParts": [],
      "cssProperties": [],
      "commands": [],
      "examples": []
    },
    {
      "name": "breadcrumb",
      "displayName": "Breadcrumb",
      "type": "native",
      "isCustomElement": false,
      "tag": null,
      "nativeTag": "nav",
      "selector": ".l-breadcrumb",
      "subItemOf": null,
      "summary": "A navigation trail showing the current page's position in the site hierarchy. Built on a native `<nav><ol>` per the WAI-ARIA APG pattern.",
      "status": "stable",
      "appearances": [],
      "import": {
        "css": "luxen-ui/css/breadcrumb",
        "js": null
      },
      "properties": [],
      "attributes": [
        {
          "name": "aria-label",
          "data": false,
          "values": [],
          "description": "Names the navigation landmark (use `\"Breadcrumb\"`)."
        },
        {
          "name": "aria-current",
          "data": false,
          "values": [],
          "description": "Set to `page` on the current crumb's `<a>`."
        },
        {
          "name": "data-unstyled-links",
          "data": true,
          "values": [],
          "description": "Opt out of Luxen's link theming (color, underline, hover) so you can apply your own link class. Layout, separators, scroll, and current-page behavior stay."
        }
      ],
      "events": [],
      "methods": [],
      "slots": [],
      "cssClasses": [
        {
          "name": ".l-breadcrumb",
          "description": "Breadcrumb navigation on a `<nav>` wrapping an `<ol>` of `<li><a>` crumbs."
        }
      ],
      "cssParts": [],
      "cssProperties": [
        {
          "name": "--gap",
          "default": "0.5rem",
          "description": "Space between crumbs and around the separator."
        },
        {
          "name": "--separator-color",
          "default": "var(--l-color-text-tertiary)",
          "description": "Separator glyph color."
        },
        {
          "name": "--separator",
          "default": "'/'",
          "description": "Divider glyph; any character (e.g. `'›'`) or a `url()` image."
        }
      ],
      "commands": [],
      "examples": [
        {
          "title": "Basic",
          "language": "html",
          "code": "<nav class=\"l-breadcrumb\" aria-label=\"Breadcrumb\">\n<ol>\n<li><a href=\"/\">Home</a></li>\n<li><a href=\"/products\">Products</a></li>\n<li><a href=\"/products/bags\" aria-current=\"page\">Bags</a></li>\n</ol>\n</nav>"
        }
      ]
    },
    {
      "name": "button",
      "displayName": "Button",
      "type": "native",
      "isCustomElement": false,
      "tag": null,
      "nativeTag": "button",
      "selector": ".l-button",
      "subItemOf": null,
      "summary": "Buttons trigger actions such as submitting forms, confirming dialogs, or navigating.",
      "status": "stable",
      "appearances": [],
      "import": {
        "css": "luxen-ui/css/button",
        "js": null
      },
      "properties": [],
      "attributes": [
        {
          "name": "disabled",
          "data": false,
          "values": [],
          "description": "Disables the button."
        },
        {
          "name": "command",
          "data": false,
          "values": [],
          "description": "Invoker command (`show-modal`, `close`, `show-popover`, etc.)."
        },
        {
          "name": "commandfor",
          "data": false,
          "values": [],
          "description": "ID of the target element for `command`."
        },
        {
          "name": "data-variant",
          "data": true,
          "values": [
            "primary",
            "destructive"
          ],
          "description": "Visual variant. Default is the secondary style."
        },
        {
          "name": "data-size",
          "data": true,
          "values": [
            "sm",
            "lg",
            "xl"
          ],
          "description": "Control size. Default is md."
        },
        {
          "name": "data-icon-only",
          "data": true,
          "values": [],
          "description": "Icon-only mode (square button, width equals height). Auto-detected for a single icon child."
        },
        {
          "name": "data-press-effect",
          "data": true,
          "values": [],
          "description": "Press effect (scale + translate on active)."
        }
      ],
      "events": [],
      "methods": [],
      "slots": [],
      "cssClasses": [
        {
          "name": ".l-button",
          "description": "Base button style."
        }
      ],
      "cssParts": [],
      "cssProperties": [
        {
          "name": "--height",
          "default": "36px",
          "description": "Button height (md size)."
        },
        {
          "name": "--padding-inline",
          "default": "0.625rem",
          "description": "Horizontal padding."
        },
        {
          "name": "--background-color",
          "default": null,
          "description": "Background color."
        },
        {
          "name": "--background-color-hover",
          "default": null,
          "description": "Background color on hover."
        },
        {
          "name": "--background-color-active",
          "default": null,
          "description": "Background color on press."
        },
        {
          "name": "--text-color",
          "default": null,
          "description": "Text color."
        },
        {
          "name": "--text-color-hover",
          "default": null,
          "description": "Text color on hover."
        },
        {
          "name": "--border-color",
          "default": null,
          "description": "Border color."
        },
        {
          "name": "--border-color-hover",
          "default": null,
          "description": "Border color on hover."
        },
        {
          "name": "--font-size",
          "default": "0.875rem",
          "description": "Label font size. Stays 14px across all sizes; override to opt into a larger label."
        }
      ],
      "commands": [],
      "examples": [
        {
          "title": "Primary",
          "language": "html",
          "code": "<button class=\"l-button\" data-variant=\"primary\">Save</button>"
        }
      ]
    },
    {
      "name": "button-group",
      "displayName": "Button group",
      "type": "custom",
      "isCustomElement": true,
      "tag": "l-button-group",
      "nativeTag": null,
      "selector": "l-button-group",
      "subItemOf": null,
      "summary": "Visually joins related `.l-button` elements into a single segmented\ncontrol. The joined appearance is pure CSS; this element adds the group\nsemantics (`role=\"group\"`, `aria-label`).",
      "status": "stable",
      "appearances": [],
      "import": {
        "css": "luxen-ui/css/button-group",
        "js": "luxen-ui/button-group"
      },
      "properties": [
        {
          "name": "label",
          "attribute": "label",
          "type": "string | undefined",
          "default": null,
          "reflects": true,
          "description": "Accessible label announced for the group. Not displayed on screen."
        },
        {
          "name": "orientation",
          "attribute": "orientation",
          "type": "ButtonGroupOrientation",
          "default": "'horizontal'",
          "reflects": true,
          "description": "Layout direction of the buttons. Visual only (drives the CSS via the\nreflected attribute): ARIA 1.2 does not allow `aria-orientation` on\n`role=\"group\"`, so no ARIA attribute is set."
        }
      ],
      "attributes": [],
      "events": [],
      "methods": [],
      "slots": [],
      "cssClasses": [],
      "cssParts": [],
      "cssProperties": [],
      "commands": [],
      "examples": [
        {
          "title": null,
          "language": "html",
          "code": "<l-button-group label=\"Alignment\">\n  <button class=\"l-button\">Left</button>\n  <button class=\"l-button\">Center</button>\n  <button class=\"l-button\">Right</button>\n</l-button-group>"
        }
      ]
    },
    {
      "name": "carousel",
      "displayName": "Carousel",
      "type": "shadow",
      "isCustomElement": true,
      "tag": "l-carousel",
      "nativeTag": null,
      "selector": "l-carousel",
      "subItemOf": null,
      "summary": "Carousel custom element based on Embla Carousel.",
      "status": "stable",
      "appearances": [],
      "import": {
        "css": null,
        "js": "luxen-ui/carousel"
      },
      "properties": [
        {
          "name": "embla",
          "attribute": null,
          "type": "EmblaCarouselType",
          "default": null,
          "reflects": false,
          "description": ""
        },
        {
          "name": "autoplay",
          "attribute": "autoplay",
          "type": "number",
          "default": "0",
          "reflects": true,
          "description": "Choose a delay between transitions in milliseconds (default: 4000)."
        },
        {
          "name": "autoplayOptions",
          "attribute": "autoplay-options",
          "type": "any",
          "default": null,
          "reflects": false,
          "description": "Configure autoplay options."
        },
        {
          "name": "axis",
          "attribute": "axis",
          "type": "AxisOptionType",
          "default": "'x'",
          "reflects": false,
          "description": "Choose scroll axis between x and y."
        },
        {
          "name": "align",
          "attribute": "align",
          "type": "AlignmentOptionType",
          "default": "'start'",
          "reflects": false,
          "description": "Align the slides relative to the carousel viewport."
        },
        {
          "name": "breakpoints",
          "attribute": "breakpoints",
          "type": "any",
          "default": "{}",
          "reflects": true,
          "description": "Breakpoint overrides for options."
        },
        {
          "name": "loop",
          "attribute": "loop",
          "type": "boolean",
          "default": "false",
          "reflects": false,
          "description": "Enables infinite looping."
        },
        {
          "name": "dragFree",
          "attribute": "drag-free",
          "type": "boolean",
          "default": "false",
          "reflects": false,
          "description": "Enables momentum scrolling (drag free)."
        },
        {
          "name": "duration",
          "attribute": "duration",
          "type": "number",
          "default": "20",
          "reflects": false,
          "description": "Set scroll duration when triggered by API methods."
        },
        {
          "name": "skipSnaps",
          "attribute": "skip-snaps",
          "type": "boolean",
          "default": "false",
          "reflects": false,
          "description": "Allow skipping scroll snaps on vigorous drag."
        },
        {
          "name": "slidesToScroll",
          "attribute": "slides-to-scroll",
          "type": "SlidesToScrollOptionType",
          "default": "1",
          "reflects": false,
          "description": "Group slides together for navigation."
        },
        {
          "name": "startIndex",
          "attribute": "start-index",
          "type": "number",
          "default": "0",
          "reflects": false,
          "description": "Set the initial scroll snap index."
        },
        {
          "name": "containScroll",
          "attribute": "contain-scroll",
          "type": "ScrollContainOptionType",
          "default": "'trimSnaps'",
          "reflects": false,
          "description": "Clear leading and trailing empty space."
        },
        {
          "name": "single",
          "attribute": "single",
          "type": "boolean",
          "default": "false",
          "reflects": false,
          "description": ""
        },
        {
          "name": "withDots",
          "attribute": "with-dots",
          "type": "boolean",
          "default": "false",
          "reflects": false,
          "description": ""
        },
        {
          "name": "withScrollbar",
          "attribute": "with-scrollbar",
          "type": "boolean",
          "default": "false",
          "reflects": false,
          "description": ""
        },
        {
          "name": "withFullscreen",
          "attribute": "with-fullscreen",
          "type": "boolean",
          "default": "false",
          "reflects": false,
          "description": ""
        },
        {
          "name": "dotAppearance",
          "attribute": "dot-appearance",
          "type": "'circle' | 'bar'",
          "default": "'bar'",
          "reflects": false,
          "description": ""
        },
        {
          "name": "maxVisibleDots",
          "attribute": "max-visible-dots",
          "type": "number",
          "default": "0",
          "reflects": false,
          "description": "Maximum number of dots rendered at once. When the snap count exceeds this,\na sliding window keeps the active dot in view and shrinks the edge dot(s)\non the side where dots are hidden. `0` (default) renders all dots."
        },
        {
          "name": "scrollButtonsPosition",
          "attribute": "scroll-buttons-position",
          "type": "'inside' | 'outside'",
          "default": "'inside'",
          "reflects": false,
          "description": ""
        },
        {
          "name": "next",
          "attribute": null,
          "type": null,
          "default": null,
          "reflects": false,
          "description": ""
        },
        {
          "name": "previous",
          "attribute": null,
          "type": null,
          "default": null,
          "reflects": false,
          "description": ""
        }
      ],
      "attributes": [],
      "events": [
        {
          "name": "select",
          "description": "Fired when the active slide changes. Bubbles. Properties: `index: number`.",
          "cancelable": false
        },
        {
          "name": "slides-in-view",
          "description": "Fired when the set of slides in view changes. Properties: `indexes: number[]`.",
          "cancelable": false
        },
        {
          "name": "fullscreen",
          "description": "Fired when the fullscreen button is activated.",
          "cancelable": false
        }
      ],
      "methods": [
        {
          "name": "options",
          "params": [],
          "returns": "EmblaOptionsType",
          "description": ""
        },
        {
          "name": "goToSlide",
          "params": [
            {
              "name": "index",
              "type": "number"
            },
            {
              "name": "jump",
              "type": "boolean"
            }
          ],
          "returns": null,
          "description": ""
        },
        {
          "name": "slideNodes",
          "params": [],
          "returns": null,
          "description": ""
        },
        {
          "name": "slidesInView",
          "params": [],
          "returns": null,
          "description": ""
        },
        {
          "name": "isActive",
          "params": [],
          "returns": null,
          "description": ""
        },
        {
          "name": "renderFullscreenButton",
          "params": [],
          "returns": null,
          "description": ""
        },
        {
          "name": "renderNextPreviousButtons",
          "params": [],
          "returns": null,
          "description": ""
        }
      ],
      "slots": [],
      "cssClasses": [],
      "cssParts": [
        {
          "name": "viewport",
          "description": "The carousel viewport container."
        },
        {
          "name": "container",
          "description": "The slides container slot."
        },
        {
          "name": "scroll-buttons",
          "description": "The scroll buttons wrapper."
        },
        {
          "name": "button",
          "description": "Any navigation button."
        },
        {
          "name": "button-previous",
          "description": "The previous slide navigation button."
        },
        {
          "name": "button-next",
          "description": "The next slide navigation button."
        },
        {
          "name": "button-dot",
          "description": "Any dot navigation button."
        },
        {
          "name": "dots",
          "description": "The dots navigation wrapper."
        },
        {
          "name": "button-fullscreen",
          "description": "The fullscreen button."
        },
        {
          "name": "button-icon",
          "description": "Any button icon SVG."
        }
      ],
      "cssProperties": [
        {
          "name": "--slide-height",
          "default": null,
          "description": "Height of slides in vertical axis mode."
        },
        {
          "name": "--slide-size",
          "default": null,
          "description": "Width of each slide (e.g. `100%`, `calc(100% / 3)`)."
        },
        {
          "name": "--slide-gap",
          "default": null,
          "description": "Gap between slides."
        },
        {
          "name": "--button-size",
          "default": null,
          "description": "Size of navigation buttons."
        },
        {
          "name": "--button-arrow-size",
          "default": null,
          "description": "Size of arrow icons inside buttons."
        },
        {
          "name": "--button-arrow-color",
          "default": null,
          "description": "Color of arrow icons."
        },
        {
          "name": "--button-offset",
          "default": null,
          "description": "Offset of inside-positioned buttons from edges."
        },
        {
          "name": "--button-border-color",
          "default": null,
          "description": "Border color of buttons."
        },
        {
          "name": "--button-border-radius",
          "default": null,
          "description": "Border radius of buttons."
        },
        {
          "name": "--button-bg",
          "default": null,
          "description": "Background color of buttons."
        },
        {
          "name": "--button-color",
          "default": null,
          "description": "Text/icon color of buttons."
        },
        {
          "name": "--dot-color",
          "default": null,
          "description": "Color of inactive dots."
        },
        {
          "name": "--dot-color-active",
          "default": null,
          "description": "Color of active dot."
        },
        {
          "name": "--dot-margin",
          "default": null,
          "description": "Margin around dots container."
        },
        {
          "name": "--dot-edge-scale",
          "default": "0.5",
          "description": "Scale factor applied to edge dots that signal more dots exist beyond the visible window ()."
        }
      ],
      "commands": [],
      "examples": []
    },
    {
      "name": "carousel-item",
      "displayName": "Carousel item",
      "type": "shadow",
      "isCustomElement": true,
      "tag": "l-carousel-item",
      "nativeTag": null,
      "selector": "l-carousel-item",
      "subItemOf": "carousel",
      "summary": "A single slide inside an `<l-carousel>`.",
      "status": "stable",
      "appearances": [],
      "import": {
        "css": null,
        "js": "luxen-ui/carousel-item"
      },
      "properties": [],
      "attributes": [],
      "events": [],
      "methods": [],
      "slots": [],
      "cssClasses": [],
      "cssParts": [],
      "cssProperties": [
        {
          "name": "--aspect-ratio",
          "default": null,
          "description": "Aspect ratio of the slide."
        }
      ],
      "commands": [],
      "examples": []
    },
    {
      "name": "checkbox",
      "displayName": "Checkbox",
      "type": "native",
      "isCustomElement": false,
      "tag": null,
      "nativeTag": "input",
      "selector": ".l-checkbox",
      "subItemOf": null,
      "summary": "Checkboxes let users select one or more options, or toggle a single setting on or off.",
      "status": "stable",
      "appearances": [],
      "import": {
        "css": "luxen-ui/css/checkbox",
        "js": null
      },
      "properties": [],
      "attributes": [
        {
          "name": "checked",
          "data": false,
          "values": [],
          "description": "Whether the checkbox is checked."
        },
        {
          "name": "disabled",
          "data": false,
          "values": [],
          "description": "Disables the checkbox."
        },
        {
          "name": "required",
          "data": false,
          "values": [],
          "description": "Marks the checkbox as required for form submission."
        },
        {
          "name": "indeterminate",
          "data": false,
          "values": [],
          "description": "Indeterminate state (DOM property `el.indeterminate = true`; renders a dash). Typically the parent of a group."
        },
        {
          "name": "aria-invalid",
          "data": false,
          "values": [],
          "description": "Set to `true` to force the invalid style (otherwise applied via `:user-invalid`). `l-form-field` manages this automatically."
        }
      ],
      "events": [],
      "methods": [],
      "slots": [],
      "cssClasses": [
        {
          "name": ".l-checkbox",
          "description": "Base checkbox style, applied to `<input type=\"checkbox\">`. Inside `l-form-field` a bare checkbox is auto-styled, so the class is optional there."
        }
      ],
      "cssParts": [],
      "cssProperties": [
        {
          "name": "--size",
          "default": "1.25em",
          "description": "Box size."
        },
        {
          "name": "--accent",
          "default": "var(--l-form-control-activated-color)",
          "description": "Checked/indeterminate fill color."
        },
        {
          "name": "--checkmark",
          "default": null,
          "description": "Checkmark icon as a `url()`. Override to swap the SVG (color is baked into the image)."
        }
      ],
      "commands": [],
      "examples": [
        {
          "title": "Default",
          "language": "html",
          "code": "<input type=\"checkbox\" class=\"l-checkbox\" checked />"
        },
        {
          "title": "In a field (no class needed)",
          "language": "html",
          "code": "<l-form-field>\n<label>Subscribe to the newsletter</label>\n<input type=\"checkbox\" />\n<l-hint>One email a month.</l-hint>\n</l-form-field>"
        }
      ]
    },
    {
      "name": "close-button",
      "displayName": "Close button",
      "type": "native",
      "isCustomElement": false,
      "tag": null,
      "nativeTag": "button",
      "selector": ".l-close",
      "subItemOf": null,
      "summary": "A circular/square icon button that renders an X via CSS mask, for dismissing dialogs and panels.",
      "status": "stable",
      "appearances": [
        "ring",
        "square",
        "circle"
      ],
      "import": {
        "css": "luxen-ui/css/close-button/ring",
        "js": null
      },
      "properties": [],
      "attributes": [
        {
          "name": "data-appearance",
          "data": true,
          "values": [
            "ring",
            "square",
            "circle"
          ],
          "description": "Visual appearance (matches the imported appearance CSS)."
        },
        {
          "name": "command",
          "data": false,
          "values": [],
          "description": "Invoker command (typically `close`)."
        },
        {
          "name": "commandfor",
          "data": false,
          "values": [],
          "description": "ID of the target element to close."
        }
      ],
      "events": [],
      "methods": [],
      "slots": [],
      "cssClasses": [
        {
          "name": ".l-close",
          "description": "Base close button with X icon via CSS mask."
        }
      ],
      "cssParts": [],
      "cssProperties": [
        {
          "name": "--size",
          "default": "36px",
          "description": "Button size."
        },
        {
          "name": "--icon-color",
          "default": null,
          "description": "Icon color."
        },
        {
          "name": "--icon-size",
          "default": "24px",
          "description": "Icon size."
        },
        {
          "name": "--ring-color",
          "default": null,
          "description": "Hover ring color (`ring` appearance only)."
        },
        {
          "name": "--ring-tickness",
          "default": null,
          "description": "Hover ring thickness (`ring` appearance only)."
        }
      ],
      "commands": [],
      "examples": [
        {
          "title": "Ring appearance",
          "language": "html",
          "code": "<button class=\"l-close\" data-appearance=\"ring\" aria-label=\"Close\"></button>"
        }
      ]
    },
    {
      "name": "combobox",
      "displayName": "Combobox",
      "type": "shadow",
      "isCustomElement": true,
      "tag": "l-combobox",
      "nativeTag": null,
      "selector": "l-combobox",
      "subItemOf": null,
      "summary": "A searchable text input with a filtered list of options.",
      "status": "stable",
      "appearances": [],
      "import": {
        "css": null,
        "js": "luxen-ui/combobox"
      },
      "properties": [
        {
          "name": "value",
          "attribute": "value",
          "type": "string",
          "default": "''",
          "reflects": true,
          "description": "Selected value (the chosen option's `value`)."
        },
        {
          "name": "placeholder",
          "attribute": "placeholder",
          "type": "string",
          "default": "''",
          "reflects": false,
          "description": "Placeholder text in the input."
        },
        {
          "name": "label",
          "attribute": "label",
          "type": "string",
          "default": "''",
          "reflects": false,
          "description": "Accessible label for the input."
        },
        {
          "name": "size",
          "attribute": "size",
          "type": "ComboboxSize",
          "default": "'md'",
          "reflects": true,
          "description": "Control size."
        },
        {
          "name": "withClear",
          "attribute": "with-clear",
          "type": "boolean",
          "default": "false",
          "reflects": true,
          "description": "Show a button to clear the value."
        },
        {
          "name": "allowCustom",
          "attribute": "allow-custom",
          "type": "boolean",
          "default": "false",
          "reflects": true,
          "description": "Accept a typed value that matches no option."
        },
        {
          "name": "highlight",
          "attribute": "highlight",
          "type": "boolean",
          "default": "true",
          "reflects": false,
          "description": "Wrap the matching substring of each option in `<mark>`."
        },
        {
          "name": "placement",
          "attribute": "placement",
          "type": "Placement",
          "default": "'bottom-start'",
          "reflects": false,
          "description": "Panel placement relative to the control."
        },
        {
          "name": "filter",
          "attribute": null,
          "type": "ComboboxFilter",
          "default": "defaultFilter",
          "reflects": false,
          "description": "Override the option filter. `(item, query) => boolean`."
        }
      ],
      "attributes": [],
      "events": [
        {
          "name": "change",
          "description": "Fired when an option is selected. Bubbles. Not cancelable. Properties: `value: string`.",
          "cancelable": false
        },
        {
          "name": "input",
          "description": "Fired as the user types. Bubbles. Not cancelable. Properties: `value: string` (the query).",
          "cancelable": false
        },
        {
          "name": "show",
          "description": "Fired before the list opens. Cancelable.",
          "cancelable": true
        },
        {
          "name": "hide",
          "description": "Fired before the list closes. Cancelable.",
          "cancelable": true
        }
      ],
      "methods": [
        {
          "name": "formResetCallback",
          "params": [],
          "returns": null,
          "description": ""
        },
        {
          "name": "formStateRestoreCallback",
          "params": [
            {
              "name": "state",
              "type": "string"
            }
          ],
          "returns": null,
          "description": ""
        },
        {
          "name": "show",
          "params": [],
          "returns": null,
          "description": ""
        },
        {
          "name": "hide",
          "params": [],
          "returns": null,
          "description": ""
        }
      ],
      "slots": [],
      "cssClasses": [],
      "cssParts": [
        {
          "name": "base",
          "description": "The host wrapper."
        },
        {
          "name": "control",
          "description": "The input control row (input + clear + chevron)."
        },
        {
          "name": "input",
          "description": "The text input."
        },
        {
          "name": "panel",
          "description": "The floating popover panel."
        },
        {
          "name": "listbox",
          "description": "The options container."
        },
        {
          "name": "option",
          "description": "Each option row."
        },
        {
          "name": "empty",
          "description": "The \"no results\" message."
        }
      ],
      "cssProperties": [
        {
          "name": "--height",
          "default": null,
          "description": "Control height. Defaults to the form-control height."
        },
        {
          "name": "--border-radius",
          "default": null,
          "description": "Control + panel radius."
        },
        {
          "name": "--background",
          "default": null,
          "description": "Panel background."
        }
      ],
      "commands": [],
      "examples": [
        {
          "title": null,
          "language": "html",
          "code": "<l-combobox label=\"Country\" name=\"country\" placeholder=\"Search…\">\n  <datalist>\n    <option value=\"us\">United States</option>\n    <option value=\"fr\">France</option>\n  </datalist>\n</l-combobox>"
        }
      ]
    },
    {
      "name": "dialog",
      "displayName": "Dialog",
      "type": "shadow",
      "isCustomElement": true,
      "tag": "l-dialog",
      "nativeTag": null,
      "selector": "l-dialog",
      "subItemOf": null,
      "summary": "A modal dialog rendered in the top layer via the native `<dialog>` element.\n\nOpen and close by toggling the `open` property (or the `--show` / `--hide`\nInvoker commands). There are no public `show()` / `close()` methods.",
      "status": "stable",
      "appearances": [],
      "import": {
        "css": null,
        "js": "luxen-ui/dialog"
      },
      "properties": [
        {
          "name": "title",
          "attribute": "title",
          "type": "string",
          "default": "''",
          "reflects": false,
          "description": "Dialog title rendered in the header and used as the dialog's accessible name."
        },
        {
          "name": "open",
          "attribute": "open",
          "type": "boolean",
          "default": "false",
          "reflects": true,
          "description": "Whether the dialog is open."
        },
        {
          "name": "lightDismiss",
          "attribute": "light-dismiss",
          "type": "boolean",
          "default": "false",
          "reflects": true,
          "description": "Close when the backdrop is clicked."
        },
        {
          "name": "withoutHeader",
          "attribute": "without-header",
          "type": "boolean",
          "default": "false",
          "reflects": true,
          "description": "Hide the header entirely (title and close slot)."
        }
      ],
      "attributes": [],
      "events": [
        {
          "name": "show",
          "description": "Fired when the dialog is about to open. Cancelable — call `event.preventDefault()` to keep it closed.",
          "cancelable": true
        },
        {
          "name": "after-show",
          "description": "Fired after the open animation completes. Not cancelable.",
          "cancelable": false
        },
        {
          "name": "hide",
          "description": "Fired when the dialog is about to close. Cancelable — call `event.preventDefault()` to keep it open.",
          "cancelable": true
        },
        {
          "name": "after-hide",
          "description": "Fired after the close animation completes. Not cancelable.",
          "cancelable": false
        }
      ],
      "methods": [],
      "slots": [
        {
          "name": "",
          "description": "Body content."
        },
        {
          "name": "title",
          "description": "Custom heading element. Overrides the default `<h2>` rendered from the `title` property. Also provides the dialog's accessible name."
        },
        {
          "name": "close",
          "description": "Close button (typically `<button class=\"l-close\">`)."
        },
        {
          "name": "footer",
          "description": "Footer actions."
        }
      ],
      "cssClasses": [],
      "cssParts": [
        {
          "name": "dialog",
          "description": "The native `<dialog>` element."
        },
        {
          "name": "header",
          "description": "The header wrapper containing the title and close slot."
        },
        {
          "name": "title",
          "description": "The dialog title heading."
        },
        {
          "name": "body",
          "description": "The body wrapper around the default slot."
        },
        {
          "name": "footer",
          "description": "The footer wrapper around the footer slot."
        }
      ],
      "cssProperties": [
        {
          "name": "--width",
          "default": "31rem",
          "description": "Dialog width."
        },
        {
          "name": "--border-radius",
          "default": "6px",
          "description": "Dialog border radius."
        },
        {
          "name": "--padding",
          "default": "1.5rem",
          "description": "Padding applied to the header, footer, and inline-padding of the body. Set to `0` to remove all internal spacing (e.g. for edge-to-edge media)."
        },
        {
          "name": "--show-duration",
          "default": "200ms",
          "description": "Open transition duration."
        },
        {
          "name": "--hide-duration",
          "default": "200ms",
          "description": "Close transition duration."
        },
        {
          "name": "--backdrop",
          "default": null,
          "description": "Backdrop color."
        },
        {
          "name": "--backdrop-blur",
          "default": "0",
          "description": "Backdrop blur amount (any CSS length). `0` means no blur; set e.g. `4px` for a subtle frost."
        }
      ],
      "commands": [
        {
          "name": "--show",
          "description": "Sets `open = true`."
        },
        {
          "name": "--hide",
          "description": "Sets `open = false`."
        }
      ],
      "examples": []
    },
    {
      "name": "disclosure",
      "displayName": "Disclosure",
      "type": "native",
      "isCustomElement": false,
      "tag": null,
      "nativeTag": "details",
      "selector": ".l-disclosure",
      "subItemOf": null,
      "summary": "A headless, animated disclosure built on native `<details>`/`<summary>`.",
      "status": "stable",
      "appearances": [],
      "import": {
        "css": "luxen-ui/css/disclosure",
        "js": null
      },
      "properties": [],
      "attributes": [
        {
          "name": "open",
          "data": false,
          "values": [],
          "description": "Native attribute — starts the disclosure expanded."
        },
        {
          "name": "name",
          "data": false,
          "values": [],
          "description": "Native attribute — groups disclosures into an exclusive accordion."
        },
        {
          "name": "data-marker",
          "data": true,
          "values": [
            "arrow",
            "plus"
          ],
          "description": "Marker icon: `arrow` rotates 180° when open; `plus` rotates 45° into a cross."
        },
        {
          "name": "data-variant",
          "data": true,
          "values": [],
          "description": "bordered — Adds border, background, and border-radius."
        },
        {
          "name": "disabled",
          "data": false,
          "values": [],
          "description": "Disables interaction (set on `<details>` or `<summary>`)."
        }
      ],
      "events": [
        {
          "name": "toggle",
          "description": "Fires when the disclosure opens or closes (`e.newState` is `\"open\"` or `\"closed\"`).",
          "cancelable": false
        }
      ],
      "methods": [],
      "slots": [],
      "cssClasses": [
        {
          "name": ".l-disclosure",
          "description": "Headless base — layout, animation, and marker behavior only."
        }
      ],
      "cssParts": [],
      "cssProperties": [
        {
          "name": "--marker-size",
          "default": "20px",
          "description": "Marker icon size."
        },
        {
          "name": "--marker-color",
          "default": "var(--l-color-text-tertiary)",
          "description": "Marker icon color ()."
        }
      ],
      "commands": [],
      "examples": [
        {
          "title": "Bordered with arrow marker",
          "language": "html",
          "code": "<details class=\"l-disclosure\" data-variant=\"bordered\" data-marker=\"arrow\">\n<summary>Details</summary>\n<div>Content</div>\n</details>"
        }
      ]
    },
    {
      "name": "divider",
      "displayName": "Divider",
      "type": "custom",
      "isCustomElement": true,
      "tag": "l-divider",
      "nativeTag": null,
      "selector": "l-divider",
      "subItemOf": null,
      "summary": "Dividers visually separate or group elements.",
      "status": "stable",
      "appearances": [],
      "import": {
        "css": "luxen-ui/css/divider",
        "js": "luxen-ui/divider"
      },
      "properties": [
        {
          "name": "orientation",
          "attribute": "orientation",
          "type": "DividerOrientation",
          "default": "'horizontal'",
          "reflects": true,
          "description": "The divider's orientation."
        },
        {
          "name": "label",
          "attribute": "label",
          "type": "string | undefined",
          "default": null,
          "reflects": true,
          "description": "Optional text label displayed over the divider line."
        }
      ],
      "attributes": [],
      "events": [],
      "methods": [],
      "slots": [],
      "cssClasses": [],
      "cssParts": [],
      "cssProperties": [
        {
          "name": "--color",
          "default": null,
          "description": "The color of the divider line."
        },
        {
          "name": "--thickness",
          "default": null,
          "description": "The thickness of the divider line."
        },
        {
          "name": "--spacing",
          "default": null,
          "description": "The spacing between the divider and its neighboring elements."
        }
      ],
      "commands": [],
      "examples": [
        {
          "title": null,
          "language": "html",
          "code": "<l-divider></l-divider>"
        }
      ]
    },
    {
      "name": "drawer",
      "displayName": "Drawer",
      "type": "shadow",
      "isCustomElement": true,
      "tag": "l-drawer",
      "nativeTag": null,
      "selector": "l-drawer",
      "subItemOf": null,
      "summary": "A drawer that slides in from a screen edge. Extends `<l-dialog>`.\n\nOpen and close by toggling the `open` property (or the `--show` / `--hide`\nInvoker commands). Always opens as modal.",
      "status": "stable",
      "appearances": [],
      "import": {
        "css": null,
        "js": "luxen-ui/drawer"
      },
      "properties": [
        {
          "name": "placement",
          "attribute": "placement",
          "type": "'start' | 'end' | 'top' | 'bottom' | undefined",
          "default": null,
          "reflects": true,
          "description": "Edge the drawer slides in from. Defaults to the start (inline-start) edge."
        },
        {
          "name": "inset",
          "attribute": "inset",
          "type": "boolean",
          "default": "false",
          "reflects": true,
          "description": "Detach the drawer from the viewport edges, floating it with a uniform gap and rounded corners."
        },
        {
          "name": "title",
          "attribute": "title",
          "type": "string",
          "default": "''",
          "reflects": false,
          "description": "Dialog title rendered in the header and used as the dialog's accessible name."
        },
        {
          "name": "open",
          "attribute": "open",
          "type": "boolean",
          "default": "false",
          "reflects": true,
          "description": "Whether the dialog is open."
        },
        {
          "name": "lightDismiss",
          "attribute": "light-dismiss",
          "type": "boolean",
          "default": "false",
          "reflects": true,
          "description": "Close when the backdrop is clicked."
        },
        {
          "name": "withoutHeader",
          "attribute": "without-header",
          "type": "boolean",
          "default": "false",
          "reflects": true,
          "description": "Hide the header entirely (title and close slot)."
        }
      ],
      "attributes": [],
      "events": [
        {
          "name": "show",
          "description": "Fired when the drawer is about to open. Cancelable — call `event.preventDefault()` to keep it closed.",
          "cancelable": true
        },
        {
          "name": "after-show",
          "description": "Fired after the open animation completes. Not cancelable.",
          "cancelable": false
        },
        {
          "name": "hide",
          "description": "Fired when the drawer is about to close. Cancelable — call `event.preventDefault()` to keep it open.",
          "cancelable": true
        },
        {
          "name": "after-hide",
          "description": "Fired after the close animation completes. Not cancelable.",
          "cancelable": false
        }
      ],
      "methods": [],
      "slots": [
        {
          "name": "",
          "description": "Body content."
        },
        {
          "name": "title",
          "description": "Custom heading element. Overrides the default `<h2>` rendered from the `title` property. Also provides the dialog's accessible name."
        },
        {
          "name": "close",
          "description": "Close button (typically `<button class=\"l-close\">`)."
        },
        {
          "name": "footer",
          "description": "Footer actions."
        }
      ],
      "cssClasses": [],
      "cssParts": [
        {
          "name": "dialog",
          "description": "The native `<dialog>` element."
        },
        {
          "name": "header",
          "description": "The header wrapper containing the title and close slot."
        },
        {
          "name": "title",
          "description": "The drawer title heading."
        },
        {
          "name": "body",
          "description": "The body wrapper around the default slot."
        },
        {
          "name": "footer",
          "description": "The footer wrapper around the footer slot."
        }
      ],
      "cssProperties": [
        {
          "name": "--size",
          "default": "320px",
          "description": "Drawer size on the axis perpendicular to its edge (width for `start`/`end`, height for `top`/`bottom`)."
        },
        {
          "name": "--border-radius",
          "default": "6px",
          "description": "Drawer border radius on the inner edges (all corners when `inset`)."
        },
        {
          "name": "--inset-gap",
          "default": "1rem",
          "description": "Gap between the drawer and the viewport edges when `inset` is set."
        },
        {
          "name": "--shadow",
          "default": null,
          "description": "Drop shadow applied to the floating panel when `inset` is set. Set to `none` to remove it."
        },
        {
          "name": "--show-duration",
          "default": "200ms",
          "description": "Open transition duration."
        },
        {
          "name": "--hide-duration",
          "default": "200ms",
          "description": "Close transition duration."
        },
        {
          "name": "--backdrop",
          "default": null,
          "description": "Backdrop color."
        },
        {
          "name": "--width",
          "default": "31rem",
          "description": "Dialog width."
        },
        {
          "name": "--padding",
          "default": "1.5rem",
          "description": "Padding applied to the header, footer, and inline-padding of the body. Set to `0` to remove all internal spacing (e.g. for edge-to-edge media)."
        },
        {
          "name": "--backdrop-blur",
          "default": "0",
          "description": "Backdrop blur amount (any CSS length). `0` means no blur; set e.g. `4px` for a subtle frost."
        }
      ],
      "commands": [
        {
          "name": "--show",
          "description": "Sets `open = true`."
        },
        {
          "name": "--hide",
          "description": "Sets `open = false`."
        }
      ],
      "examples": []
    },
    {
      "name": "dropdown",
      "displayName": "Dropdown",
      "type": "shadow",
      "isCustomElement": true,
      "tag": "l-dropdown",
      "nativeTag": null,
      "selector": "l-dropdown",
      "subItemOf": null,
      "summary": "A dropdown menu anchored to a trigger element.",
      "status": "stable",
      "appearances": [],
      "import": {
        "css": null,
        "js": "luxen-ui/dropdown"
      },
      "properties": [
        {
          "name": "open",
          "attribute": "open",
          "type": "boolean",
          "default": "false",
          "reflects": true,
          "description": "Whether the dropdown is open."
        },
        {
          "name": "placement",
          "attribute": "placement",
          "type": "Placement",
          "default": "'bottom-start'",
          "reflects": false,
          "description": "Preferred placement of the panel."
        },
        {
          "name": "distance",
          "attribute": "distance",
          "type": "number",
          "default": "4",
          "reflects": false,
          "description": "Distance in pixels from the trigger."
        },
        {
          "name": "disabled",
          "attribute": "disabled",
          "type": "boolean",
          "default": "false",
          "reflects": true,
          "description": "Disables the dropdown trigger."
        },
        {
          "name": "minWidth",
          "attribute": "min-width",
          "type": "'trigger' | undefined",
          "default": null,
          "reflects": false,
          "description": "Floor the panel's width at the trigger's width. Set to `trigger` so the\npanel is never narrower than the trigger; it still grows with its content.\nUseful for select-like triggers (a date-range or filter button) where the\npanel should line up with the control. Re-applies if the trigger resizes\nwhile open."
        }
      ],
      "attributes": [],
      "events": [
        {
          "name": "show",
          "description": "Fired before the dropdown opens. Cancelable.",
          "cancelable": true
        },
        {
          "name": "after-show",
          "description": "Fired after the open animation completes.",
          "cancelable": false
        },
        {
          "name": "hide",
          "description": "Fired before the dropdown closes. Cancelable.",
          "cancelable": true
        },
        {
          "name": "after-hide",
          "description": "Fired after the close animation completes.",
          "cancelable": false
        },
        {
          "name": "select",
          "description": "Fired when an item is selected, including items nested in submenus. Bubbles. Properties: `item: DropdownItem`.",
          "cancelable": false
        }
      ],
      "methods": [
        {
          "name": "show",
          "params": [],
          "returns": null,
          "description": ""
        },
        {
          "name": "hide",
          "params": [],
          "returns": null,
          "description": ""
        },
        {
          "name": "toggle",
          "params": [],
          "returns": null,
          "description": ""
        }
      ],
      "slots": [
        {
          "name": "trigger",
          "description": "The element that triggers the dropdown."
        },
        {
          "name": "header",
          "description": "Optional content rendered above the menu items (e.g. a user profile row). Use an `<l-divider>` (or `<hr>`) after it to separate from items."
        },
        {
          "name": "",
          "description": "Menu content (`l-dropdown-item` elements). Drop an `<l-divider>` (or `<hr>`) between items to render a section separator, or an `<l-dropdown-label>` to caption a group of items. Nest items with `slot=\"submenu\"` inside an item to create a submenu."
        },
        {
          "name": "footer",
          "description": "Optional content rendered below the menu items (e.g. a version label or shortcut row). Use an `<l-divider>` (or `<hr>`) before it to separate from items."
        }
      ],
      "cssClasses": [],
      "cssParts": [
        {
          "name": "panel",
          "description": "The floating menu container."
        }
      ],
      "cssProperties": [
        {
          "name": "--background",
          "default": null,
          "description": "Panel background color."
        },
        {
          "name": "--border-radius",
          "default": "8px",
          "description": "Panel border radius."
        },
        {
          "name": "--padding",
          "default": "0.25rem",
          "description": "Panel inner padding. Slotted `<l-divider>` elements bleed by this amount on each side to span the panel edges."
        },
        {
          "name": "--shadow",
          "default": null,
          "description": "Panel box shadow."
        },
        {
          "name": "--show-duration",
          "default": "150",
          "description": "Show animation duration in ms."
        },
        {
          "name": "--hide-duration",
          "default": "150",
          "description": "Hide animation duration in ms."
        }
      ],
      "commands": [],
      "examples": []
    },
    {
      "name": "dropdown-item",
      "displayName": "Dropdown item",
      "type": "shadow",
      "isCustomElement": true,
      "tag": "l-dropdown-item",
      "nativeTag": null,
      "selector": "l-dropdown-item",
      "subItemOf": "dropdown",
      "summary": "A menu item for use inside `<l-dropdown>`.",
      "status": "stable",
      "appearances": [],
      "import": {
        "css": null,
        "js": "luxen-ui/dropdown-item"
      },
      "properties": [
        {
          "name": "value",
          "attribute": "value",
          "type": "string",
          "default": "''",
          "reflects": false,
          "description": "The value associated with this item."
        },
        {
          "name": "disabled",
          "attribute": "disabled",
          "type": "boolean",
          "default": "false",
          "reflects": true,
          "description": "Disables the item."
        },
        {
          "name": "type",
          "attribute": "type",
          "type": "'normal' | 'checkbox'",
          "default": "'normal'",
          "reflects": false,
          "description": "The type of item: `normal` or `checkbox`."
        },
        {
          "name": "checked",
          "attribute": "checked",
          "type": "boolean",
          "default": "false",
          "reflects": true,
          "description": "Whether the checkbox item is checked."
        },
        {
          "name": "submenuOpen",
          "attribute": "submenu-open",
          "type": "boolean",
          "default": "false",
          "reflects": true,
          "description": "Whether this item's submenu is open. Managed by the parent `l-dropdown`."
        },
        {
          "name": "hasSubmenu",
          "attribute": null,
          "type": "boolean",
          "default": null,
          "reflects": false,
          "description": "Whether this item has nested `slot=\"submenu\"` items."
        }
      ],
      "attributes": [],
      "events": [],
      "methods": [
        {
          "name": "getTextLabel",
          "params": [],
          "returns": "string",
          "description": "Returns the text label of this item (excludes nested submenu items)."
        },
        {
          "name": "getSubmenuItems",
          "params": [],
          "returns": "DropdownItem[]",
          "description": "Returns the enabled `l-dropdown-item` elements slotted into this item's submenu."
        },
        {
          "name": "openSubmenu",
          "params": [],
          "returns": null,
          "description": "Opens this item's submenu panel. No-op without submenu items."
        },
        {
          "name": "closeSubmenu",
          "params": [],
          "returns": null,
          "description": "Closes this item's submenu panel, including any open nested submenus."
        }
      ],
      "slots": [
        {
          "name": "",
          "description": "Label text."
        },
        {
          "name": "prefix",
          "description": "Leading content (e.g. icon)."
        },
        {
          "name": "suffix",
          "description": "Trailing content."
        },
        {
          "name": "submenu",
          "description": "Nested `l-dropdown-item` elements rendered in a submenu panel anchored to this item. Drop an `<hr>` between them for a separator."
        }
      ],
      "cssClasses": [],
      "cssParts": [
        {
          "name": "submenu",
          "description": "The floating submenu panel."
        }
      ],
      "cssProperties": [
        {
          "name": "--color",
          "default": null,
          "description": "Text color."
        }
      ],
      "commands": [],
      "examples": []
    },
    {
      "name": "dropdown-label",
      "displayName": "Dropdown label",
      "type": "shadow",
      "isCustomElement": true,
      "tag": "l-dropdown-label",
      "nativeTag": null,
      "selector": "l-dropdown-label",
      "subItemOf": "dropdown",
      "summary": "A non-interactive section label for grouping items inside `<l-dropdown>`.",
      "status": "stable",
      "appearances": [],
      "import": {
        "css": null,
        "js": "luxen-ui/dropdown-label"
      },
      "properties": [],
      "attributes": [],
      "events": [],
      "methods": [],
      "slots": [
        {
          "name": "",
          "description": "Label text."
        }
      ],
      "cssClasses": [],
      "cssParts": [],
      "cssProperties": [
        {
          "name": "--color",
          "default": "var(--l-color-text-tertiary)",
          "description": "Text color."
        }
      ],
      "commands": [],
      "examples": []
    },
    {
      "name": "form-field",
      "displayName": "Form field",
      "type": "progressive",
      "isCustomElement": true,
      "tag": "l-form-field",
      "nativeTag": null,
      "selector": "l-form-field",
      "subItemOf": null,
      "summary": "Progressively enhances a label + control + messages group: wires the\naccessibility plumbing (`id`/`for`, `aria-describedby`, `aria-invalid`,\nrequired marker) and picks an inline or stacked layout from the control type.\n\nStyling stays on the control (`.l-checkbox`, …); inside a field a bare control\nis auto-styled by the element CSS. Add `unstyled` to keep the ARIA wiring while\nopting out of that auto-styling (e.g. for a third-party control).",
      "status": "stable",
      "appearances": [],
      "import": {
        "css": "luxen-ui/css/form-field",
        "js": "luxen-ui/form-field"
      },
      "properties": [
        {
          "name": "layout",
          "attribute": "layout",
          "type": "'inline' | 'stacked' | undefined",
          "default": null,
          "reflects": true,
          "description": "Layout, derived from the control type (`inline` for checkbox/radio/switch, otherwise `stacked`). Set one to force it."
        },
        {
          "name": "required",
          "attribute": "required",
          "type": "boolean",
          "default": "false",
          "reflects": true,
          "description": "Reflected when the control is required. Drives the label marker."
        },
        {
          "name": "optional",
          "attribute": "optional",
          "type": "boolean",
          "default": "false",
          "reflects": true,
          "description": "Reflected when the control is not required."
        },
        {
          "name": "invalid",
          "attribute": "invalid",
          "type": "boolean",
          "default": "false",
          "reflects": true,
          "description": "Reflected once the control is invalid after interaction (or set to force the invalid state)."
        },
        {
          "name": "unstyled",
          "attribute": "unstyled",
          "type": "boolean",
          "default": "false",
          "reflects": true,
          "description": "Opt out of auto-styling the control; the ARIA wiring is preserved."
        }
      ],
      "attributes": [],
      "events": [],
      "methods": [],
      "slots": [
        {
          "name": "",
          "description": "A `<label>`, one form control (a native `input` / `select` / `textarea`, or a form-associated custom element such as `l-slider`), and optional `.l-hint` / `.l-error` message elements, in any order."
        }
      ],
      "cssClasses": [
        {
          "name": ".l-hint",
          "description": "Helper text element. Always visible; linked via `aria-describedby`."
        },
        {
          "name": ".l-error",
          "description": "Error message element. Hidden until invalid, then revealed with `role=\"alert\"` and linked via `aria-describedby`."
        }
      ],
      "cssParts": [],
      "cssProperties": [],
      "commands": [],
      "examples": [
        {
          "title": null,
          "language": "html",
          "code": "<l-form-field>\n  <label>Subscribe to the newsletter</label>\n  <input type=\"checkbox\" />\n  <p class=\"l-hint\">One email a month, unsubscribe anytime.</p>\n  <p class=\"l-error\">Please make a choice to continue.</p>\n</l-form-field>"
        }
      ]
    },
    {
      "name": "icon",
      "displayName": "Icon",
      "type": "shadow",
      "isCustomElement": true,
      "tag": "l-icon",
      "nativeTag": null,
      "selector": "l-icon",
      "subItemOf": null,
      "summary": "An icon component that renders icons from any Iconify icon set. Decorative by default. Set `label` for meaningful icons.",
      "status": "stable",
      "appearances": [],
      "import": {
        "css": null,
        "js": "luxen-ui/icon"
      },
      "properties": [
        {
          "name": "name",
          "attribute": "name",
          "type": "string",
          "default": "''",
          "reflects": false,
          "description": "The icon name in Iconify format (e.g. `mdi:home`, `lucide:check`)."
        },
        {
          "name": "label",
          "attribute": "label",
          "type": "string | undefined",
          "default": null,
          "reflects": false,
          "description": "Accessible label. When set, the icon becomes meaningful (`role=\"img\"` + `aria-label`). When absent, the icon is decorative."
        }
      ],
      "attributes": [],
      "events": [],
      "methods": [],
      "slots": [],
      "cssClasses": [],
      "cssParts": [],
      "cssProperties": [
        {
          "name": "--color",
          "default": "currentColor",
          "description": "The color of the icon."
        }
      ],
      "commands": [],
      "examples": []
    },
    {
      "name": "input",
      "displayName": "Input",
      "type": "native",
      "isCustomElement": false,
      "tag": null,
      "nativeTag": "input",
      "selector": ".l-input",
      "subItemOf": null,
      "summary": "Inputs let users enter and edit text, numbers, dates, and other single-line values.",
      "status": "stable",
      "appearances": [],
      "import": {
        "css": "luxen-ui/css/input",
        "js": null
      },
      "properties": [],
      "attributes": [
        {
          "name": "type",
          "data": false,
          "values": [
            "text",
            "search",
            "number",
            "password",
            "email",
            "url",
            "tel",
            "date",
            "time"
          ],
          "description": "Native input type. `date`/`time` get custom picker icons; `search` gets a custom clear button."
        },
        {
          "name": "data-size",
          "data": true,
          "values": [
            "xs",
            "sm",
            "md",
            "lg",
            "xl"
          ],
          "description": "Control height on the shared `--l-size-control-*` scale (default `md`). Affects only the height, not the label or hint/error."
        },
        {
          "name": "placeholder",
          "data": false,
          "values": [],
          "description": "Native placeholder text."
        },
        {
          "name": "disabled",
          "data": false,
          "values": [],
          "description": "Disables the input."
        },
        {
          "name": "required",
          "data": false,
          "values": [],
          "description": "Marks the input as required for form submission."
        },
        {
          "name": "readonly",
          "data": false,
          "values": [],
          "description": "Makes the input read-only."
        },
        {
          "name": "aria-invalid",
          "data": false,
          "values": [],
          "description": "Set to `true` to force the invalid style (otherwise applied via `:user-invalid`). `l-form-field` manages this automatically."
        }
      ],
      "events": [],
      "methods": [],
      "slots": [],
      "cssClasses": [
        {
          "name": ".l-input",
          "description": "Base input style, applied to a text-like `<input>` (text, search, number, password, email, url, tel, date, time, …). Inside `l-form-field` or `l-input-group` a bare text input is auto-styled, so the class is optional there."
        }
      ],
      "cssParts": [],
      "cssProperties": [
        {
          "name": "--height",
          "default": "var(--l-form-control-height)",
          "description": "Control height."
        },
        {
          "name": "--border-radius",
          "default": "var(--l-form-control-border-radius)",
          "description": "Control border radius."
        },
        {
          "name": "--calendar-icon",
          "default": null,
          "description": "Date picker glyph as a `url()`. Masked, so color is taken from the control, not the image."
        },
        {
          "name": "--clock-icon",
          "default": null,
          "description": "Time picker glyph as a `url()`."
        },
        {
          "name": "--clear-icon",
          "default": null,
          "description": "Search clear glyph as a `url()`."
        }
      ],
      "commands": [],
      "examples": [
        {
          "title": "Default",
          "language": "html",
          "code": "<input type=\"text\" class=\"l-input\" placeholder=\"Placeholder text\" />"
        },
        {
          "title": "With a trailing unit",
          "language": "html",
          "code": "<l-input-group>\n<input type=\"number\" placeholder=\"Placeholder text\" />\n<span>cm</span>\n</l-input-group>"
        },
        {
          "title": "With a leading icon",
          "language": "html",
          "code": "<l-input-group>\n<l-icon name=\"lucide:search\"></l-icon>\n<input type=\"search\" placeholder=\"Search\" />\n</l-input-group>"
        },
        {
          "title": "Password with a show/hide toggle",
          "language": "html",
          "code": "<l-input-group password-toggle>\n<input type=\"password\" autocomplete=\"current-password\" />\n</l-input-group>"
        },
        {
          "title": "In a field (no class needed)",
          "language": "html",
          "code": "<l-form-field>\n<label>Email</label>\n<input type=\"email\" />\n<l-hint>We'll never share it.</l-hint>\n</l-form-field>"
        }
      ]
    },
    {
      "name": "input-group",
      "displayName": "Input group",
      "type": "progressive",
      "isCustomElement": true,
      "tag": "l-input-group",
      "nativeTag": null,
      "selector": "l-input-group",
      "subItemOf": "input",
      "summary": "Groups a text input with leading or trailing adornments — icons, units, buttons — inside one bordered field.\n\nLayout is pure CSS: children render in DOM order, so an `<l-icon>` placed\nbefore the `<input>` is a leading adornment and a `<span>` after it is a\ntrailing one. JavaScript only layers behavior on top: `password-toggle`\ninjects a show/hide button at upgrade time (without JS the field stays a\nplain password input — no dead button), and clicking the group's empty area\nfocuses the input.",
      "status": "stable",
      "appearances": [],
      "import": {
        "css": null,
        "js": "luxen-ui/input-group"
      },
      "properties": [
        {
          "name": "passwordToggle",
          "attribute": "password-toggle",
          "type": "boolean",
          "default": "false",
          "reflects": true,
          "description": "Inject a show/hide toggle button after the inner `input[type=\"password\"]`."
        },
        {
          "name": "size",
          "attribute": "size",
          "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | undefined",
          "default": "md",
          "reflects": true,
          "description": "Control size — maps the height to the shared `--l-size-control-*` scale ()."
        }
      ],
      "attributes": [],
      "events": [],
      "methods": [],
      "slots": [],
      "cssClasses": [
        {
          "name": ".l-input-group-toggle",
          "description": "The injected show/hide password button."
        }
      ],
      "cssParts": [],
      "cssProperties": [
        {
          "name": "--height",
          "default": "var(--l-form-control-height)",
          "description": "Control height."
        },
        {
          "name": "--border-radius",
          "default": "var(--l-form-control-border-radius)",
          "description": "Corner radius."
        }
      ],
      "commands": [],
      "examples": [
        {
          "title": null,
          "language": "html",
          "code": "<l-input-group password-toggle>\n  <input type=\"password\" autocomplete=\"current-password\" />\n</l-input-group>"
        }
      ]
    },
    {
      "name": "input-otp",
      "displayName": "Input OTP",
      "type": "progressive",
      "isCustomElement": true,
      "tag": "l-input-otp",
      "nativeTag": null,
      "selector": "l-input-otp",
      "subItemOf": null,
      "summary": "Stripe-style OTP input with visual digit cells over a hidden native input.",
      "status": "stable",
      "appearances": [],
      "import": {
        "css": "luxen-ui/css/input-otp",
        "js": "luxen-ui/input-otp"
      },
      "properties": [
        {
          "name": "separatorAfter",
          "attribute": "separator-after",
          "type": "number | undefined",
          "default": null,
          "reflects": true,
          "description": "Position after which to insert a visual separator (e.g., 3 for a 3-3 grouping)."
        }
      ],
      "attributes": [
        {
          "name": "size",
          "data": false,
          "values": [
            "sm",
            "lg"
          ],
          "description": "Cell size. Default is md."
        }
      ],
      "events": [],
      "methods": [],
      "slots": [],
      "cssClasses": [],
      "cssParts": [],
      "cssProperties": [
        {
          "name": "--digits",
          "default": null,
          "description": "Number of digit boxes (default: 6). Must match input's maxlength."
        },
        {
          "name": "--cell-size",
          "default": null,
          "description": "Cell width and height (default: 2.75rem). Font size scales automatically."
        },
        {
          "name": "--cell-gap",
          "default": null,
          "description": "Space between cells (default: 0.5rem)."
        },
        {
          "name": "--cell-bg-color",
          "default": null,
          "description": "Cell background color."
        },
        {
          "name": "--cell-border-color",
          "default": null,
          "description": "Cell border color."
        },
        {
          "name": "--cell-border-radius",
          "default": null,
          "description": "Cell border-radius."
        },
        {
          "name": "--cell-focus-color",
          "default": null,
          "description": "Border + ring color of the active (focused) cell."
        },
        {
          "name": "--cell-focus-ring",
          "default": null,
          "description": "`box-shadow` of the active cell ring (defaults to a 1px solid ring; set to `none` to disable)."
        }
      ],
      "commands": [],
      "examples": []
    },
    {
      "name": "input-stepper",
      "displayName": "Input stepper",
      "type": "progressive",
      "isCustomElement": true,
      "tag": "l-input-stepper",
      "nativeTag": null,
      "selector": "l-input-stepper",
      "subItemOf": null,
      "summary": "A stepper control that enhances a native `<input type=\"number\">` with\ndecrement/increment buttons and an optional animated number track.",
      "status": "stable",
      "appearances": [
        "default",
        "rounded"
      ],
      "import": {
        "css": "luxen-ui/css/input-stepper/default",
        "js": "luxen-ui/input-stepper"
      },
      "properties": [
        {
          "name": "min",
          "attribute": "min",
          "type": "number | undefined",
          "default": null,
          "reflects": false,
          "description": "Minimum allowed value. Falls back to the input's `min` attribute."
        },
        {
          "name": "max",
          "attribute": "max",
          "type": "number | undefined",
          "default": null,
          "reflects": false,
          "description": "Maximum allowed value. Falls back to the input's `max` attribute."
        },
        {
          "name": "step",
          "attribute": "step",
          "type": "number | undefined",
          "default": null,
          "reflects": false,
          "description": "Step increment. Falls back to the input's `step` attribute."
        },
        {
          "name": "size",
          "attribute": "size",
          "type": "InputStepperSize",
          "default": "'md'",
          "reflects": true,
          "description": "Control size."
        },
        {
          "name": "withRoller",
          "attribute": "with-roller",
          "type": "boolean",
          "default": "false",
          "reflects": true,
          "description": "Enable the animated number roller overlay."
        },
        {
          "name": "decrementIcon",
          "attribute": "decrement-icon",
          "type": "string",
          "default": "'lucide:minus'",
          "reflects": false,
          "description": "Icon name for the decrement button."
        },
        {
          "name": "incrementIcon",
          "attribute": "increment-icon",
          "type": "string",
          "default": "'lucide:plus'",
          "reflects": false,
          "description": "Icon name for the increment button."
        }
      ],
      "attributes": [],
      "events": [
        {
          "name": "change",
          "description": "Fired when the value changes. Bubbles. Properties: `value: number`.",
          "cancelable": false
        }
      ],
      "methods": [
        {
          "name": "decrement",
          "params": [],
          "returns": null,
          "description": "Decrease the value by one step."
        },
        {
          "name": "increment",
          "params": [],
          "returns": null,
          "description": "Increase the value by one step."
        }
      ],
      "slots": [],
      "cssClasses": [],
      "cssParts": [],
      "cssProperties": [
        {
          "name": "--border-color",
          "default": "--l-color-border",
          "description": "Border color of the stepper container (default appearance) and of each button (rounded appearance)."
        },
        {
          "name": "--border-radius",
          "default": "--radius-md",
          "description": "Border radius of the stepper container (default appearance)."
        }
      ],
      "commands": [],
      "examples": [
        {
          "title": null,
          "language": "html",
          "code": "<l-input-stepper>\n  <input type=\"number\" min=\"0\" max=\"10\" value=\"5\" />\n</l-input-stepper>"
        }
      ]
    },
    {
      "name": "kbd",
      "displayName": "Kbd",
      "type": "native",
      "isCustomElement": false,
      "tag": null,
      "nativeTag": "kbd",
      "selector": ".l-kbd",
      "subItemOf": null,
      "summary": "Displays keyboard keys or shortcuts inline with text.",
      "status": "stable",
      "appearances": [],
      "import": {
        "css": "luxen-ui/css/kbd",
        "js": null
      },
      "properties": [],
      "attributes": [],
      "events": [],
      "methods": [],
      "slots": [],
      "cssClasses": [
        {
          "name": ".l-kbd",
          "description": "Base class for keyboard key styling on `<kbd>` elements."
        }
      ],
      "cssParts": [],
      "cssProperties": [],
      "commands": [],
      "examples": [
        {
          "title": "Single key",
          "language": "html",
          "code": "<kbd class=\"l-kbd\">Esc</kbd>"
        }
      ]
    },
    {
      "name": "popover",
      "displayName": "Popover",
      "type": "shadow",
      "isCustomElement": true,
      "tag": "l-popover",
      "nativeTag": null,
      "selector": "l-popover",
      "subItemOf": null,
      "summary": "A popover that displays interactive content anchored to a trigger.",
      "status": "stable",
      "appearances": [],
      "import": {
        "css": null,
        "js": "luxen-ui/popover"
      },
      "properties": [
        {
          "name": "for",
          "attribute": "for",
          "type": "string",
          "default": "''",
          "reflects": false,
          "description": "The HTML id of the element triggering the popover."
        },
        {
          "name": "placement",
          "attribute": "placement",
          "type": "Placement",
          "default": "'bottom'",
          "reflects": false,
          "description": "The preferred placement of the popover."
        },
        {
          "name": "distance",
          "attribute": "distance",
          "type": "number",
          "default": "8",
          "reflects": false,
          "description": "The distance in pixels from the target element."
        },
        {
          "name": "open",
          "attribute": "open",
          "type": "boolean",
          "default": "false",
          "reflects": true,
          "description": "Whether or not the popover is visible."
        },
        {
          "name": "withoutArrow",
          "attribute": "without-arrow",
          "type": "boolean",
          "default": "false",
          "reflects": true,
          "description": "Hide the directional arrow."
        },
        {
          "name": "fullWidth",
          "attribute": "full-width",
          "type": "boolean",
          "default": "false",
          "reflects": true,
          "description": "Stretch the popover to the viewport width. Useful for mega menus."
        },
        {
          "name": "trigger",
          "attribute": "trigger",
          "type": "string",
          "default": "'click'",
          "reflects": false,
          "description": "Space-separated list of trigger modes: `click`, `hover`, `focus`, `manual`."
        }
      ],
      "attributes": [],
      "events": [],
      "methods": [
        {
          "name": "show",
          "params": [],
          "returns": null,
          "description": ""
        },
        {
          "name": "hide",
          "params": [],
          "returns": null,
          "description": ""
        },
        {
          "name": "toggle",
          "params": [],
          "returns": null,
          "description": ""
        }
      ],
      "slots": [
        {
          "name": "",
          "description": "Popover content."
        }
      ],
      "cssClasses": [],
      "cssParts": [
        {
          "name": "body",
          "description": "The popover container."
        },
        {
          "name": "arrow",
          "description": "The directional arrow element."
        }
      ],
      "cssProperties": [
        {
          "name": "--background",
          "default": null,
          "description": "Background color. Default: `Canvas`."
        },
        {
          "name": "--color",
          "default": null,
          "description": "Text color. Default: inherited."
        },
        {
          "name": "--border-radius",
          "default": "8px",
          "description": "Border radius."
        },
        {
          "name": "--max-width",
          "default": "320px",
          "description": "Maximum width."
        },
        {
          "name": "--shadow",
          "default": null,
          "description": "Box shadow."
        },
        {
          "name": "--arrow-size",
          "default": "8px",
          "description": "Arrow size."
        },
        {
          "name": "--show-duration",
          "default": "150ms",
          "description": "Show animation duration."
        },
        {
          "name": "--hide-duration",
          "default": "150ms",
          "description": "Hide animation duration."
        }
      ],
      "commands": [],
      "examples": []
    },
    {
      "name": "progress",
      "displayName": "Progress",
      "type": "native",
      "isCustomElement": false,
      "tag": null,
      "nativeTag": "progress",
      "selector": ".l-progress",
      "subItemOf": null,
      "summary": "A progress bar built on the native `<progress>` element.",
      "status": "stable",
      "appearances": [],
      "import": {
        "css": "luxen-ui/css/progress",
        "js": null
      },
      "properties": [],
      "attributes": [
        {
          "name": "value",
          "data": false,
          "values": [],
          "description": "Current progress between `0` and `1` (omit for indeterminate)."
        },
        {
          "name": "data-orientation",
          "data": true,
          "values": [],
          "description": "vertical — Vertical orientation."
        }
      ],
      "events": [],
      "methods": [],
      "slots": [],
      "cssClasses": [
        {
          "name": ".l-progress",
          "description": "Base progress bar style."
        }
      ],
      "cssParts": [],
      "cssProperties": [
        {
          "name": "--size",
          "default": "4px",
          "description": "Bar thickness."
        },
        {
          "name": "--track-color",
          "default": null,
          "description": "Track background color."
        },
        {
          "name": "--indicator-color",
          "default": null,
          "description": "Fill/indicator color."
        },
        {
          "name": "--indeterminate-animation",
          "default": null,
          "description": "Animation name for the indeterminate state."
        }
      ],
      "commands": [],
      "examples": [
        {
          "title": "Determinate",
          "language": "html",
          "code": "<progress class=\"l-progress\" value=\"0.5\"></progress>"
        }
      ]
    },
    {
      "name": "prose-editor",
      "displayName": "Prose editor",
      "type": "shadow",
      "isCustomElement": true,
      "tag": "l-prose-editor",
      "nativeTag": null,
      "selector": "l-prose-editor",
      "subItemOf": null,
      "summary": "A rich text editor built on Tiptap (ProseMirror). Form-associated: its value is the editor HTML.\n\n### Keyboard — APG Toolbar pattern\nThe generated toolbar buttons follow the\n[APG Toolbar pattern](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/):\nexactly one button holds `tabindex=\"0\"` at a time (roving tabindex).\n**ArrowRight** / **ArrowLeft** move focus to the next / previous button,\nwrapping around. **Home** / **End** jump to the first / last button.\nA single Tab enters and leaves the toolbar without stepping through every\nbutton. Slotted `toolbar-start` / `toolbar-end` focusables are excluded\nfrom roving management — they are consumer-controlled content and their\ntab order is handled by the consumer.",
      "status": "stable",
      "appearances": [],
      "import": {
        "css": "luxen-ui/css/prose-editor",
        "js": "luxen-ui/prose-editor"
      },
      "properties": [
        {
          "name": "editor",
          "attribute": null,
          "type": "Editor",
          "default": null,
          "reflects": false,
          "description": "The Tiptap editor instance. Available after the first render."
        },
        {
          "name": "initialHtml",
          "attribute": "initial-html",
          "type": "string",
          "default": "''",
          "reflects": false,
          "description": "Initial HTML content."
        },
        {
          "name": "initialJson",
          "attribute": "initial-json",
          "type": "string",
          "default": "''",
          "reflects": false,
          "description": "Initial content as a serialized ProseMirror JSON string."
        },
        {
          "name": "editorClass",
          "attribute": "editor-class",
          "type": "string",
          "default": "'prose'",
          "reflects": false,
          "description": "Class applied to the `.ProseMirror` editable element (e.g. for Tailwind Typography `prose`)."
        },
        {
          "name": "toolbar",
          "attribute": "toolbar",
          "type": "ToolbarCommandName[]",
          "default": "[]",
          "reflects": false,
          "description": "Explicit list of toolbar commands. Overrides `toolbar-preset` when set."
        },
        {
          "name": "toolbarPreset",
          "attribute": "toolbar-preset",
          "type": "'default' | 'minimal'",
          "default": "'default'",
          "reflects": false,
          "description": "Built-in toolbar layout used when `toolbar` is not set."
        },
        {
          "name": "toolbarPlacement",
          "attribute": "toolbar-placement",
          "type": "'top' | 'bottom'",
          "default": "'top'",
          "reflects": true,
          "description": "Where the toolbar sits relative to the content."
        },
        {
          "name": "autofocus",
          "attribute": "autofocus",
          "type": "boolean",
          "default": "false",
          "reflects": true,
          "description": "Focus the editor on creation."
        },
        {
          "name": "placeholder",
          "attribute": "placeholder",
          "type": "string",
          "default": "''",
          "reflects": false,
          "description": "Placeholder shown when the editor is empty."
        },
        {
          "name": "emojiDataSource",
          "attribute": "emoji-data-source",
          "type": "string",
          "default": "''",
          "reflects": false,
          "description": "URL the emoji picker fetches its data from. Point this at a locally served\n`emojibase-data` JSON to run fully offline (no CDN). Defaults to the\npicker's bundled CDN source."
        },
        {
          "name": "validationTarget",
          "attribute": null,
          "type": "HTMLElement | undefined",
          "default": null,
          "reflects": false,
          "description": ""
        }
      ],
      "attributes": [],
      "events": [
        {
          "name": "change",
          "description": "Fired when the content changes. Bubbles. Properties: `html: string`, `json: JSONContent`.",
          "cancelable": false
        },
        {
          "name": "add-file",
          "description": "Fired when the attachment toolbar button is clicked.",
          "cancelable": false
        }
      ],
      "methods": [
        {
          "name": "getHTML",
          "params": [],
          "returns": "string",
          "description": "Get the current content as an HTML string. Empty paragraph resolves to `''`."
        },
        {
          "name": "getJSON",
          "params": [],
          "returns": "JSONContent",
          "description": "Get the current content as ProseMirror JSON."
        },
        {
          "name": "clear",
          "params": [],
          "returns": null,
          "description": "Remove all content."
        },
        {
          "name": "focus",
          "params": [],
          "returns": null,
          "description": ""
        },
        {
          "name": "blur",
          "params": [],
          "returns": null,
          "description": ""
        },
        {
          "name": "toggleBold",
          "params": [],
          "returns": null,
          "description": ""
        },
        {
          "name": "toggleItalic",
          "params": [],
          "returns": null,
          "description": ""
        },
        {
          "name": "toggleUnderline",
          "params": [],
          "returns": null,
          "description": ""
        },
        {
          "name": "toggleStrike",
          "params": [],
          "returns": null,
          "description": ""
        },
        {
          "name": "toggleHighlight",
          "params": [],
          "returns": null,
          "description": ""
        },
        {
          "name": "toggleHeading",
          "params": [
            {
              "name": "level",
              "type": "1 | 2 | 3"
            }
          ],
          "returns": null,
          "description": ""
        },
        {
          "name": "toggleBulletList",
          "params": [],
          "returns": null,
          "description": ""
        },
        {
          "name": "toggleOrderedList",
          "params": [],
          "returns": null,
          "description": ""
        },
        {
          "name": "toggleBlockquote",
          "params": [],
          "returns": null,
          "description": ""
        },
        {
          "name": "toggleCodeBlock",
          "params": [],
          "returns": null,
          "description": ""
        },
        {
          "name": "setHorizontalRule",
          "params": [],
          "returns": null,
          "description": ""
        },
        {
          "name": "undo",
          "params": [],
          "returns": null,
          "description": ""
        },
        {
          "name": "redo",
          "params": [],
          "returns": null,
          "description": ""
        },
        {
          "name": "toggleLink",
          "params": [],
          "returns": null,
          "description": ""
        },
        {
          "name": "formResetCallback",
          "params": [],
          "returns": null,
          "description": ""
        }
      ],
      "slots": [
        {
          "name": "toolbar-start",
          "description": "Content placed before the generated toolbar buttons."
        },
        {
          "name": "toolbar-end",
          "description": "Content placed after the generated toolbar buttons."
        }
      ],
      "cssClasses": [],
      "cssParts": [
        {
          "name": "wrapper",
          "description": "The editor frame wrapping the toolbar and content."
        },
        {
          "name": "toolbar",
          "description": "The toolbar row."
        },
        {
          "name": "toolbar-button",
          "description": "Any toolbar button."
        },
        {
          "name": "divider",
          "description": "A toolbar divider."
        },
        {
          "name": "editor",
          "description": "The container around the editable content."
        }
      ],
      "cssProperties": [
        {
          "name": "--border-color",
          "default": null,
          "description": "Color of the editor frame border."
        },
        {
          "name": "--border-width",
          "default": null,
          "description": "Width of the editor frame border."
        },
        {
          "name": "--border-radius",
          "default": null,
          "description": "Corner radius of the editor frame."
        },
        {
          "name": "--background",
          "default": null,
          "description": "Background color of the editor."
        },
        {
          "name": "--color",
          "default": null,
          "description": "Text color of the editor."
        },
        {
          "name": "--toolbar-background",
          "default": null,
          "description": "Background color of the toolbar."
        },
        {
          "name": "--toolbar-padding",
          "default": null,
          "description": "Padding around the toolbar."
        },
        {
          "name": "--toolbar-gap",
          "default": null,
          "description": "Gap between toolbar buttons."
        },
        {
          "name": "--toolbar-divider-color",
          "default": null,
          "description": "Color of toolbar dividers."
        },
        {
          "name": "--toolbar-button-size",
          "default": null,
          "description": "Size of toolbar buttons."
        },
        {
          "name": "--toolbar-button-radius",
          "default": null,
          "description": "Corner radius of toolbar buttons."
        },
        {
          "name": "--toolbar-button-color",
          "default": null,
          "description": "Icon color of inactive toolbar buttons."
        },
        {
          "name": "--toolbar-button-color-active",
          "default": null,
          "description": "Icon color of hovered/active toolbar buttons."
        },
        {
          "name": "--toolbar-button-background-hover",
          "default": null,
          "description": "Background of hovered toolbar buttons."
        },
        {
          "name": "--toolbar-button-background-active",
          "default": null,
          "description": "Background of active toolbar buttons."
        },
        {
          "name": "--content-padding",
          "default": "0.75rem 1rem",
          "description": "Padding inside the editable content region."
        },
        {
          "name": "--content-min-height",
          "default": "8rem",
          "description": "Minimum height of the editable content region."
        },
        {
          "name": "--placeholder-color",
          "default": null,
          "description": "Placeholder text color."
        }
      ],
      "commands": [],
      "examples": []
    },
    {
      "name": "radio",
      "displayName": "Radio",
      "type": "native",
      "isCustomElement": false,
      "tag": null,
      "nativeTag": "input",
      "selector": ".l-radio",
      "subItemOf": null,
      "summary": "Radios let users pick a single option from a set of mutually exclusive choices.",
      "status": "stable",
      "appearances": [],
      "import": {
        "css": "luxen-ui/css/radio",
        "js": null
      },
      "properties": [],
      "attributes": [
        {
          "name": "name",
          "data": false,
          "values": [],
          "description": "Groups radios so only one can be selected at a time. Every radio in a group shares the same `name`."
        },
        {
          "name": "value",
          "data": false,
          "values": [],
          "description": "The value submitted with the form when this radio is the selected one in its group."
        },
        {
          "name": "checked",
          "data": false,
          "values": [],
          "description": "Whether the radio is selected."
        },
        {
          "name": "disabled",
          "data": false,
          "values": [],
          "description": "Disables the radio."
        },
        {
          "name": "required",
          "data": false,
          "values": [],
          "description": "Marks the group as required for form submission."
        },
        {
          "name": "aria-invalid",
          "data": false,
          "values": [],
          "description": "Set to `true` to force the invalid style (otherwise applied via `:user-invalid`). `l-form-field` manages this automatically."
        }
      ],
      "events": [],
      "methods": [],
      "slots": [],
      "cssClasses": [
        {
          "name": ".l-radio",
          "description": "Base radio style, applied to `<input type=\"radio\">`. Inside `l-form-field` a bare radio is auto-styled, so the class is optional there."
        }
      ],
      "cssParts": [],
      "cssProperties": [
        {
          "name": "--size",
          "default": "1.25em",
          "description": "Box size."
        },
        {
          "name": "--accent",
          "default": "var(--l-form-control-activated-color)",
          "description": "Selected fill color."
        },
        {
          "name": "--dot",
          "default": null,
          "description": "Selected dot icon as a `url()`. Override to swap the SVG (color is baked into the image)."
        }
      ],
      "commands": [],
      "examples": [
        {
          "title": "Default",
          "language": "html",
          "code": "<input type=\"radio\" class=\"l-radio\" name=\"plan\" value=\"free\" checked />"
        },
        {
          "title": "In a field (no class needed)",
          "language": "html",
          "code": "<l-form-field>\n<label>Free</label>\n<input type=\"radio\" name=\"plan\" value=\"free\" />\n</l-form-field>"
        }
      ]
    },
    {
      "name": "rating",
      "displayName": "Rating",
      "type": "shadow",
      "isCustomElement": true,
      "tag": "l-rating",
      "nativeTag": null,
      "selector": "l-rating",
      "subItemOf": null,
      "summary": "Displays a star rating, optionally interactive.",
      "status": "stable",
      "appearances": [],
      "import": {
        "css": null,
        "js": "luxen-ui/rating"
      },
      "properties": [
        {
          "name": "editMode",
          "attribute": "edit-mode",
          "type": "boolean",
          "default": "false",
          "reflects": true,
          "description": ""
        },
        {
          "name": "labels",
          "attribute": "labels",
          "type": "string[]",
          "default": "[]",
          "reflects": true,
          "description": ""
        },
        {
          "name": "value",
          "attribute": "value",
          "type": "number",
          "default": "0",
          "reflects": true,
          "description": ""
        },
        {
          "name": "length",
          "attribute": "length",
          "type": "number",
          "default": "5",
          "reflects": true,
          "description": ""
        },
        {
          "name": "getIcon",
          "attribute": null,
          "type": "(value: number) => string | undefined",
          "default": null,
          "reflects": false,
          "description": "Optional callback returning a CSS `url()` string for a given position (1-based)."
        }
      ],
      "attributes": [],
      "events": [
        {
          "name": "change",
          "description": "Emitted when the rating value changes in edit mode. Bubbles. Properties: `name: string`, `value: string`, `checked: boolean`, `sourceEvent: Event`.",
          "cancelable": false
        }
      ],
      "methods": [
        {
          "name": "formResetCallback",
          "params": [],
          "returns": null,
          "description": ""
        },
        {
          "name": "formStateRestoreCallback",
          "params": [
            {
              "name": "state",
              "type": "string"
            },
            {
              "name": "_mode",
              "type": "'restore' | 'autocomplete'"
            }
          ],
          "returns": null,
          "description": ""
        }
      ],
      "slots": [],
      "cssClasses": [],
      "cssParts": [
        {
          "name": "label",
          "description": "The label element shown in edit mode."
        }
      ],
      "cssProperties": [
        {
          "name": "--icon-size",
          "default": "20px",
          "description": "The size of each icon."
        },
        {
          "name": "--active-color",
          "default": "gold",
          "description": "The fill color for rated icons."
        },
        {
          "name": "--inactive-color",
          "default": "#ddd",
          "description": "The fill color for empty icons."
        },
        {
          "name": "--spacing",
          "default": "0px",
          "description": "The spacing between icons."
        },
        {
          "name": "--icon",
          "default": null,
          "description": "Custom SVG shape as a `url()`. Defaults to a 5-pointed star."
        }
      ],
      "commands": [],
      "examples": []
    },
    {
      "name": "select",
      "displayName": "Select",
      "type": "native",
      "isCustomElement": false,
      "tag": null,
      "nativeTag": "select",
      "selector": ".l-select",
      "subItemOf": null,
      "summary": "A styled native `<select>` using the customizable `base-select` appearance.",
      "status": "stable",
      "appearances": [],
      "import": {
        "css": "luxen-ui/css/select",
        "js": null
      },
      "properties": [],
      "attributes": [
        {
          "name": "data-size",
          "data": true,
          "values": [
            "xs",
            "sm",
            "md",
            "lg",
            "xl"
          ],
          "description": "Control height on the shared `--l-size-control-*` scale (default `md`)."
        },
        {
          "name": "disabled",
          "data": false,
          "values": [],
          "description": "Disables the select."
        },
        {
          "name": "required",
          "data": false,
          "values": [],
          "description": "Marks the field as required."
        },
        {
          "name": "multiple",
          "data": false,
          "values": [],
          "description": "Allows multiple selections."
        }
      ],
      "events": [
        {
          "name": "change",
          "description": "Fires when an option is selected.",
          "cancelable": false
        },
        {
          "name": "input",
          "description": "Fires when the value changes.",
          "cancelable": false
        }
      ],
      "methods": [],
      "slots": [],
      "cssClasses": [
        {
          "name": ".l-select",
          "description": "Base select element with `appearance: base-select`."
        },
        {
          "name": ".l-select-item",
          "description": "Option styling with checkmark indicator."
        },
        {
          "name": ".l-select-item-media",
          "description": "Leading image/icon inside a rich option."
        },
        {
          "name": ".l-select-item-text",
          "description": "Column wrapper stacking title + description."
        },
        {
          "name": ".l-select-item-title",
          "description": "Primary label of a rich option."
        },
        {
          "name": ".l-select-item-description",
          "description": "Secondary line of a rich option (hidden in the trigger)."
        }
      ],
      "cssParts": [],
      "cssProperties": [
        {
          "name": "--height",
          "default": "var(--l-form-control-height)",
          "description": "Control height (set via `data-size` or directly)."
        },
        {
          "name": "--border-radius",
          "default": "var(--l-form-control-border-radius)",
          "description": "Trigger border radius."
        },
        {
          "name": "--caret-color",
          "default": "var(--l-form-control-placeholder-color)",
          "description": "Chevron color."
        },
        {
          "name": "--caret-icon",
          "default": "mdi:chevron-down",
          "description": "Chevron mask image; override with any `url()` to re-skin."
        }
      ],
      "commands": [],
      "examples": [
        {
          "title": "Basic",
          "language": "html",
          "code": "<select class=\"l-select\">\n<option class=\"l-select-item\">One</option>\n<option class=\"l-select-item\">Two</option>\n</select>"
        }
      ]
    },
    {
      "name": "skeleton",
      "displayName": "Skeleton",
      "type": "custom",
      "isCustomElement": true,
      "tag": "l-skeleton",
      "nativeTag": null,
      "selector": "l-skeleton",
      "subItemOf": null,
      "summary": "A skeleton loading placeholder.",
      "status": "stable",
      "appearances": [],
      "import": {
        "css": "luxen-ui/css/skeleton",
        "js": "luxen-ui/skeleton"
      },
      "properties": [],
      "attributes": [
        {
          "name": "shape",
          "data": false,
          "values": [
            "circle",
            "text"
          ],
          "description": "Placeholder shape. Default is a block."
        },
        {
          "name": "animation",
          "data": false,
          "values": [
            "pulse",
            "wave"
          ],
          "description": "Loading animation. Default is `pulse`."
        }
      ],
      "events": [],
      "methods": [],
      "slots": [],
      "cssClasses": [],
      "cssParts": [],
      "cssProperties": [
        {
          "name": "--width",
          "default": null,
          "description": "Width of the skeleton"
        },
        {
          "name": "--height",
          "default": null,
          "description": "Height of the skeleton"
        }
      ],
      "commands": [],
      "examples": []
    },
    {
      "name": "slider",
      "displayName": "Slider",
      "type": "shadow",
      "isCustomElement": true,
      "tag": "l-slider",
      "nativeTag": null,
      "selector": "l-slider",
      "subItemOf": null,
      "summary": "Pick a numeric value or a min–max range by dragging a thumb.",
      "status": "stable",
      "appearances": [],
      "import": {
        "css": "luxen-ui/css/slider",
        "js": "luxen-ui/slider"
      },
      "properties": [
        {
          "name": "min",
          "attribute": "min",
          "type": "number",
          "default": "0",
          "reflects": true,
          "description": "Minimum value."
        },
        {
          "name": "max",
          "attribute": "max",
          "type": "number",
          "default": "100",
          "reflects": true,
          "description": "Maximum value."
        },
        {
          "name": "step",
          "attribute": "step",
          "type": "number",
          "default": "1",
          "reflects": true,
          "description": "Step increment."
        },
        {
          "name": "value",
          "attribute": "value",
          "type": "number",
          "default": "0",
          "reflects": true,
          "description": "Single-thumb value."
        },
        {
          "name": "range",
          "attribute": "range",
          "type": "boolean",
          "default": "false",
          "reflects": true,
          "description": "Enable a two-thumb min–max range."
        },
        {
          "name": "minValue",
          "attribute": "min-value",
          "type": "number",
          "default": "0",
          "reflects": true,
          "description": "Lower value (range mode)."
        },
        {
          "name": "maxValue",
          "attribute": "max-value",
          "type": "number",
          "default": "100",
          "reflects": true,
          "description": "Upper value (range mode)."
        },
        {
          "name": "label",
          "attribute": "label",
          "type": "string",
          "default": "''",
          "reflects": false,
          "description": "Accessible label for the slider (and base for the range thumbs' names)."
        },
        {
          "name": "size",
          "attribute": "size",
          "type": "SliderSize",
          "default": "'md'",
          "reflects": true,
          "description": "Control size."
        },
        {
          "name": "orientation",
          "attribute": "orientation",
          "type": "SliderOrientation",
          "default": "'horizontal'",
          "reflects": true,
          "description": "Layout axis. Vertical sliders increase upward."
        },
        {
          "name": "withTooltip",
          "attribute": "with-tooltip",
          "type": "boolean",
          "default": "false",
          "reflects": true,
          "description": "Show a tooltip with the current value while a thumb is focused or dragged."
        },
        {
          "name": "valueFormatter",
          "attribute": null,
          "type": "(value: number) => string | undefined",
          "default": null,
          "reflects": false,
          "description": "Formats a value for the tooltip and the `aria-valuetext` announcement.\nAssign a function `(value: number) => string`, e.g. to add a unit or currency."
        },
        {
          "name": "values",
          "attribute": null,
          "type": "number[]",
          "default": null,
          "reflects": false,
          "description": "Current thumb values, low to high."
        }
      ],
      "attributes": [],
      "events": [
        {
          "name": "input",
          "description": "Fired continuously while a thumb moves. Bubbles. Not cancelable. Properties: `value: number`, `values: number[]`.",
          "cancelable": false
        },
        {
          "name": "change",
          "description": "Fired when a thumb is released. Bubbles. Not cancelable. Properties: `value: number`, `values: number[]`.",
          "cancelable": false
        }
      ],
      "methods": [
        {
          "name": "formResetCallback",
          "params": [],
          "returns": null,
          "description": ""
        },
        {
          "name": "formStateRestoreCallback",
          "params": [
            {
              "name": "state",
              "type": "string"
            }
          ],
          "returns": null,
          "description": ""
        }
      ],
      "slots": [],
      "cssClasses": [],
      "cssParts": [
        {
          "name": "base",
          "description": "The slider container."
        },
        {
          "name": "track",
          "description": "The full-width rail."
        },
        {
          "name": "indicator",
          "description": "The filled portion of the rail."
        },
        {
          "name": "thumb",
          "description": "Each draggable thumb."
        },
        {
          "name": "tooltip",
          "description": "The value tooltip shown above a thumb when `with-tooltip` is set."
        }
      ],
      "cssProperties": [
        {
          "name": "--track-size",
          "default": null,
          "description": "Thickness of the rail."
        },
        {
          "name": "--thumb-size",
          "default": null,
          "description": "Diameter of each thumb."
        },
        {
          "name": "--track-color",
          "default": null,
          "description": "Color of the unfilled rail."
        },
        {
          "name": "--indicator-color",
          "default": null,
          "description": "Color of the filled portion."
        },
        {
          "name": "--thumb-color",
          "default": null,
          "description": "Background color of the thumbs."
        }
      ],
      "commands": [],
      "examples": [
        {
          "title": null,
          "language": "html",
          "code": "<l-slider label=\"Volume\" min=\"0\" max=\"100\" value=\"40\" name=\"volume\"></l-slider>"
        },
        {
          "title": "Range (min–max)",
          "language": "html",
          "code": "```html\n<l-slider label=\"Price\" range min=\"0\" max=\"100\" min-value=\"20\" max-value=\"70\" name=\"price\"></l-slider>\n```"
        }
      ]
    },
    {
      "name": "spinner",
      "displayName": "Spinner",
      "type": "shadow",
      "isCustomElement": true,
      "tag": "l-spinner",
      "nativeTag": null,
      "selector": "l-spinner",
      "subItemOf": null,
      "summary": "A spinner component for indicating loading state.",
      "status": "stable",
      "appearances": [],
      "import": {
        "css": null,
        "js": "luxen-ui/spinner"
      },
      "properties": [],
      "attributes": [],
      "events": [],
      "methods": [],
      "slots": [],
      "cssClasses": [],
      "cssParts": [
        {
          "name": "base",
          "description": "The SVG container element."
        }
      ],
      "cssProperties": [
        {
          "name": "--size",
          "default": "1em",
          "description": "The size of the spinner (width and height)."
        },
        {
          "name": "--indicator-color",
          "default": null,
          "description": "The color of the spinner."
        },
        {
          "name": "--speed",
          "default": null,
          "description": "The duration of one full spin cycle."
        }
      ],
      "commands": [],
      "examples": []
    },
    {
      "name": "sticky-bar",
      "displayName": "Sticky bar",
      "type": "shadow",
      "isCustomElement": true,
      "tag": "l-sticky-bar",
      "nativeTag": null,
      "selector": "l-sticky-bar",
      "subItemOf": null,
      "summary": "A bar docked to the viewport edge, revealed in the top layer when a referenced element scrolls out of view.",
      "status": "stable",
      "appearances": [],
      "import": {
        "css": null,
        "js": "luxen-ui/sticky-bar"
      },
      "properties": [
        {
          "name": "for",
          "attribute": "for",
          "type": "string",
          "default": "''",
          "reflects": false,
          "description": "HTML id of the element to track. When that element leaves the viewport, the bar reveals. Omit for a permanently visible bar."
        },
        {
          "name": "root",
          "attribute": "root",
          "type": "string",
          "default": "''",
          "reflects": false,
          "description": "HTML id of the scrolling ancestor used as the IntersectionObserver root. Omit to use the viewport. Useful for nested scroll containers (CMS preview panes, modals)."
        },
        {
          "name": "placement",
          "attribute": "placement",
          "type": "'bottom' | 'top'",
          "default": "'bottom'",
          "reflects": true,
          "description": "Edge to dock against."
        }
      ],
      "attributes": [],
      "events": [
        {
          "name": "show",
          "description": "Fired before the bar reveals. Cancelable.",
          "cancelable": true
        },
        {
          "name": "after-show",
          "description": "Fired after the reveal animation completes. Not cancelable.",
          "cancelable": false
        },
        {
          "name": "hide",
          "description": "Fired before the bar hides. Cancelable.",
          "cancelable": true
        },
        {
          "name": "after-hide",
          "description": "Fired after the hide animation completes. Not cancelable.",
          "cancelable": false
        }
      ],
      "methods": [],
      "slots": [
        {
          "name": "",
          "description": "Bar content. Owns its own background, padding, and typography."
        }
      ],
      "cssClasses": [],
      "cssParts": [],
      "cssProperties": [
        {
          "name": "--show-duration",
          "default": "200ms",
          "description": "Reveal animation duration."
        },
        {
          "name": "--hide-duration",
          "default": "200ms",
          "description": "Dismiss animation duration."
        },
        {
          "name": "--offset",
          "default": "0px",
          "description": "Distance from the active edge. Use to clear a sticky header when `placement=\"top\"`."
        }
      ],
      "commands": [],
      "examples": []
    },
    {
      "name": "stories",
      "displayName": "Stories",
      "type": "custom",
      "isCustomElement": true,
      "tag": "l-stories",
      "nativeTag": null,
      "selector": "l-stories",
      "subItemOf": null,
      "summary": "A horizontal row of `<l-story>` thumbnails. Click opens the linked\n`<l-stories-viewer>` (matched by `for` → `id`). If `for` is omitted and no\nviewer exists, a singleton viewer is appended to `<body>` on first click.",
      "status": "experimental",
      "appearances": [],
      "import": {
        "css": "luxen-ui/css/stories",
        "js": "luxen-ui/stories"
      },
      "properties": [
        {
          "name": "for",
          "attribute": "for",
          "type": "string",
          "default": "''",
          "reflects": true,
          "description": "ID of the linked `<l-stories-viewer>`."
        },
        {
          "name": "appearance",
          "attribute": "appearance",
          "type": "StoriesAppearance",
          "default": "'rounded'",
          "reflects": true,
          "description": "Visual appearance of the thumbnails."
        }
      ],
      "attributes": [],
      "events": [
        {
          "name": "story-open",
          "description": "Fired when the viewer opens. Properties: `index: number`, `story: LuxenStory`.",
          "cancelable": false
        }
      ],
      "methods": [
        {
          "name": "open",
          "params": [
            {
              "name": "index",
              "type": null
            }
          ],
          "returns": null,
          "description": "Open the linked viewer at the given index."
        },
        {
          "name": "stories",
          "params": [],
          "returns": "LuxenStory[]",
          "description": "All `<l-story>` children."
        }
      ],
      "slots": [],
      "cssClasses": [],
      "cssParts": [],
      "cssProperties": [
        {
          "name": "--size",
          "default": null,
          "description": "Thumbnail size (width). Default per appearance."
        },
        {
          "name": "--radius",
          "default": null,
          "description": "Thumbnail border radius. Default per appearance (`--radius-full` for rounded, `1rem` for portrait)."
        },
        {
          "name": "--gap",
          "default": "1rem",
          "description": "Gap between thumbnails."
        },
        {
          "name": "--ring-color",
          "default": null,
          "description": "Ring color around fresh thumbnails."
        },
        {
          "name": "--ring-color-seen",
          "default": null,
          "description": "Ring color for `[seen]` thumbnails."
        },
        {
          "name": "--ring-width",
          "default": "2px",
          "description": "Ring width."
        },
        {
          "name": "--label-color",
          "default": null,
          "description": "Label text color."
        }
      ],
      "commands": [],
      "examples": [
        {
          "title": null,
          "language": "html",
          "code": "<l-stories for=\"brand\">\n  <l-story src=\"…video.mp4\" poster=\"…jpg\" label=\"Notre concept\"></l-story>\n  <l-story src=\"…video2.mp4\" label=\"Collant Essentiel\"></l-story>\n</l-stories>\n<l-stories-viewer id=\"brand\"></l-stories-viewer>"
        }
      ]
    },
    {
      "name": "stories-viewer",
      "displayName": "Stories viewer",
      "type": "shadow",
      "isCustomElement": true,
      "tag": "l-stories-viewer",
      "nativeTag": null,
      "selector": "l-stories-viewer",
      "subItemOf": "stories",
      "summary": "Fullscreen modal that plays a sequence of `<l-story>` videos with an\nInstagram-style segmented progress bar, previous/next navigation, mute toggle,\nand auto-advance.\n\nLinked to one or more `<l-stories>` rows via matching `id` ↔ `for`. Open\nprogrammatically via `open()` or by clicking a thumbnail in a linked row.",
      "status": "experimental",
      "appearances": [],
      "import": {
        "css": null,
        "js": "luxen-ui/stories-viewer"
      },
      "properties": [
        {
          "name": "open",
          "attribute": "open",
          "type": "boolean",
          "default": "false",
          "reflects": true,
          "description": "Whether the viewer is open."
        },
        {
          "name": "index",
          "attribute": "index",
          "type": "number",
          "default": "0",
          "reflects": true,
          "description": "Active story index (0-based)."
        },
        {
          "name": "muted",
          "attribute": "muted",
          "type": "boolean",
          "default": "true",
          "reflects": true,
          "description": "Whether playback is muted. so autoplay always succeeds across browsers. The user can unmute via the dedicated button or the `m` keyboard shortcut."
        },
        {
          "name": "loop",
          "attribute": "loop",
          "type": "boolean",
          "default": "false",
          "reflects": true,
          "description": "Loop the active story instead of advancing."
        },
        {
          "name": "autoAdvance",
          "attribute": "auto-advance",
          "type": "boolean",
          "default": "true",
          "reflects": true,
          "description": "Move to the next story when the current one ends; close after the last story."
        },
        {
          "name": "lightDismiss",
          "attribute": "light-dismiss",
          "type": "boolean",
          "default": "true",
          "reflects": true,
          "description": "Close when the backdrop is clicked."
        },
        {
          "name": "chapter",
          "attribute": "chapter",
          "type": "number",
          "default": "0",
          "reflects": true,
          "description": "Active chapter index within the current story. Reflected."
        },
        {
          "name": "stories",
          "attribute": null,
          "type": "LuxenStory[]",
          "default": "[]",
          "reflects": false,
          "description": "Internal: the playlist set by the source `<l-stories>`."
        },
        {
          "name": "source",
          "attribute": null,
          "type": "LuxenStories | null",
          "default": "null",
          "reflects": false,
          "description": "Internal: the source `<l-stories>` element that opened the viewer."
        }
      ],
      "attributes": [],
      "events": [
        {
          "name": "show",
          "description": "Fired when the viewer is about to open. Cancelable — call `event.preventDefault()` to keep it closed.",
          "cancelable": true
        },
        {
          "name": "after-show",
          "description": "Fired after the open transition completes. Not cancelable.",
          "cancelable": false
        },
        {
          "name": "hide",
          "description": "Fired when the viewer is about to close. Cancelable.",
          "cancelable": true
        },
        {
          "name": "after-hide",
          "description": "Fired after the close transition completes. Not cancelable.",
          "cancelable": false
        },
        {
          "name": "story-change",
          "description": "Fired when the active story changes. Properties: `index: number`, `story: LuxenStory`.",
          "cancelable": false
        },
        {
          "name": "story-end",
          "description": "Fired when the active story finishes playback. Properties: `index: number`.",
          "cancelable": false
        },
        {
          "name": "chapter-change",
          "description": "Fired when the active chapter (within a story) changes. Properties: `chapter: number`, `story: LuxenStory`.",
          "cancelable": false
        },
        {
          "name": "mute-change",
          "description": "Fired when the mute state changes. Properties: `muted: boolean`.",
          "cancelable": false
        }
      ],
      "methods": [
        {
          "name": "openAt",
          "params": [
            {
              "name": "stories",
              "type": "LuxenStory[]"
            },
            {
              "name": "index",
              "type": null
            },
            {
              "name": "source",
              "type": "LuxenStories | null"
            }
          ],
          "returns": null,
          "description": "Open the viewer at the given index with an explicit playlist."
        },
        {
          "name": "close",
          "params": [],
          "returns": null,
          "description": ""
        },
        {
          "name": "next",
          "params": [],
          "returns": null,
          "description": "Advance one chapter, or to the next story at the chapter boundary."
        },
        {
          "name": "previous",
          "params": [],
          "returns": null,
          "description": "Retreat one chapter, restart the current chapter past 1s in, or cross into the previous story."
        },
        {
          "name": "nextStory",
          "params": [],
          "returns": null,
          "description": "Jump to the next story, skipping any remaining chapters in the current story."
        },
        {
          "name": "previousStory",
          "params": [],
          "returns": null,
          "description": "Jump to the previous story regardless of current chapter. Lands on chapter 0 of the previous story."
        },
        {
          "name": "play",
          "params": [],
          "returns": null,
          "description": ""
        },
        {
          "name": "pause",
          "params": [],
          "returns": null,
          "description": ""
        }
      ],
      "slots": [
        {
          "name": "cta",
          "description": "Default CTA overlay (e.g. shoppable card). Per-story `slot=\"cta\"` inside `<l-story>` overrides this when that story is active."
        },
        {
          "name": "header",
          "description": "Default header overlay (e.g. avatar + author). Per-story override available the same way."
        },
        {
          "name": "close",
          "description": "Override the default close button."
        }
      ],
      "cssClasses": [],
      "cssParts": [
        {
          "name": "dialog",
          "description": "The native `<dialog>` element."
        },
        {
          "name": "frame",
          "description": "The aspect-ratio video frame."
        },
        {
          "name": "progress",
          "description": "The progress bar wrapper."
        },
        {
          "name": "progress-segment",
          "description": "A single progress segment."
        },
        {
          "name": "progress-fill",
          "description": "The fill element inside an active segment."
        },
        {
          "name": "video",
          "description": "The `<video>` element."
        },
        {
          "name": "overlay",
          "description": "The overlay wrapper that hosts CTA/header slots."
        },
        {
          "name": "header",
          "description": "The top-left header area (story thumbnail + label fallback, or consumer-supplied content via the `header` slot)."
        },
        {
          "name": "header-label",
          "description": "The default story label inside the header."
        },
        {
          "name": "actions",
          "description": "The top-right vertical button stack (close, play/pause, mute)."
        },
        {
          "name": "button-close",
          "description": "The close button."
        },
        {
          "name": "button-pause",
          "description": "The play/pause toggle."
        },
        {
          "name": "button-mute",
          "description": "The mute toggle."
        },
        {
          "name": "button-previous",
          "description": "The previous story button."
        },
        {
          "name": "button-next",
          "description": "The next story button."
        },
        {
          "name": "spinner",
          "description": "The loading spinner shown while the current video is buffering."
        }
      ],
      "cssProperties": [
        {
          "name": "--width",
          "default": "min(420px, 100vw)",
          "description": "Frame width."
        },
        {
          "name": "--progress-color",
          "default": "white",
          "description": "Active progress fill color."
        },
        {
          "name": "--progress-bg",
          "default": "rgb(255 255 255 / 35%)",
          "description": "Inactive progress segment background."
        },
        {
          "name": "--progress-gap",
          "default": "4px",
          "description": "Gap between segments."
        },
        {
          "name": "--show-duration",
          "default": "200ms",
          "description": "Open transition duration."
        },
        {
          "name": "--hide-duration",
          "default": "200ms",
          "description": "Close transition duration."
        },
        {
          "name": "--backdrop",
          "default": "var(--l-backdrop-strong)",
          "description": "Backdrop color. — darker than `--l-backdrop` to focus attention on the immersive frame, but still translucent so the page stays perceptible."
        }
      ],
      "commands": [],
      "examples": []
    },
    {
      "name": "story",
      "displayName": "Story",
      "type": "custom",
      "isCustomElement": true,
      "tag": "l-story",
      "nativeTag": null,
      "selector": "l-story",
      "subItemOf": "stories",
      "summary": "A single story declaration inside an `<l-stories>` row.\n\nRenders the clickable thumbnail (poster image + centered play overlay).\nThe viewer reads `src`, `poster`, `label`, `handle`, `duration`, and\n`tracks` to play this story when opened.",
      "status": "experimental",
      "appearances": [],
      "import": {
        "css": "luxen-ui/css/story",
        "js": "luxen-ui/story"
      },
      "properties": [
        {
          "name": "src",
          "attribute": "src",
          "type": "string",
          "default": "''",
          "reflects": true,
          "description": "Video URL."
        },
        {
          "name": "poster",
          "attribute": "poster",
          "type": "string",
          "default": "''",
          "reflects": true,
          "description": "Thumbnail poster image. Falls back to the first video frame."
        },
        {
          "name": "preview",
          "attribute": "preview",
          "type": "string",
          "default": "''",
          "reflects": true,
          "description": "Optional short looping preview video (URL of a small dedicated MP4, typically 2-3s, 480p, no audio). When set, the thumbnail renders this video muted+looped+autoplayed in place of `poster`. Gated by an `IntersectionObserver` so off-screen previews don't play."
        },
        {
          "name": "label",
          "attribute": "label",
          "type": "string",
          "default": "''",
          "reflects": true,
          "description": "Caption shown below the thumbnail (or overlaid, depending on appearance) and used as the trigger `aria-label`."
        },
        {
          "name": "duration",
          "attribute": "duration",
          "type": "number",
          "default": "0",
          "reflects": false,
          "description": "Override the progress duration in seconds. Defaults to the video's metadata duration."
        },
        {
          "name": "seen",
          "attribute": "seen",
          "type": "boolean",
          "default": "false",
          "reflects": true,
          "description": "Mark this story as already viewed (faded ring). Reflected."
        },
        {
          "name": "pulse",
          "attribute": "pulse",
          "type": "boolean",
          "default": "false",
          "reflects": true,
          "description": "Pulse the thumbnail with an animated halo + a subtle scale tap to draw attention. Reflected."
        },
        {
          "name": "chapters",
          "attribute": "chapters",
          "type": "string",
          "default": "''",
          "reflects": false,
          "description": "Chapter start times within the video, comma-separated seconds (e.g. `0,5,12,20`). `0` is implicit if omitted. Empty = single chapter spanning the full video."
        },
        {
          "name": "tracks",
          "attribute": "tracks",
          "type": "string",
          "default": "''",
          "reflects": false,
          "description": "Comma-separated VTT track URLs for captions."
        }
      ],
      "attributes": [],
      "events": [],
      "methods": [
        {
          "name": "getChapterStarts",
          "params": [],
          "returns": "number[]",
          "description": "Parsed chapter start times. Always begins with `0`, sorted, deduplicated. Empty `chapters` returns `[0]`."
        }
      ],
      "slots": [
        {
          "name": "cta",
          "description": "Overlay surfaced by the viewer when this story is active (e.g. product card, link)."
        },
        {
          "name": "header",
          "description": "Header overlay (e.g. avatar + author)."
        }
      ],
      "cssClasses": [
        {
          "name": ".l-story-trigger",
          "description": "The clickable thumbnail button wrapper."
        },
        {
          "name": ".l-story-thumb",
          "description": "The poster/video thumbnail frame (ring + offset)."
        },
        {
          "name": ".l-story-play",
          "description": "The centered play-icon overlay."
        },
        {
          "name": ".l-story-label",
          "description": "The caption text below the thumbnail."
        }
      ],
      "cssParts": [],
      "cssProperties": [
        {
          "name": "--pulse-color",
          "default": null,
          "description": "Color of the attention pulse ring (only with the `pulse` attribute)."
        },
        {
          "name": "--pulse-scale",
          "default": "1.2",
          "description": "Peak scale of the pulse animation."
        },
        {
          "name": "--pulse-duration",
          "default": "1.6s",
          "description": "Duration of one pulse cycle."
        }
      ],
      "commands": [],
      "examples": []
    },
    {
      "name": "switch",
      "displayName": "Switch",
      "type": "native",
      "isCustomElement": false,
      "tag": null,
      "nativeTag": "input",
      "selector": ".l-switch",
      "subItemOf": null,
      "summary": "Switches toggle a single setting on or off, taking effect immediately.",
      "status": "stable",
      "appearances": [],
      "import": {
        "css": "luxen-ui/css/switch",
        "js": null
      },
      "properties": [],
      "attributes": [
        {
          "name": "role",
          "data": false,
          "values": [],
          "description": "Must be `switch`. Promotes the native checkbox to a switch for assistive tech and triggers the switch skin / inline field layout."
        },
        {
          "name": "checked",
          "data": false,
          "values": [],
          "description": "Whether the switch is on."
        },
        {
          "name": "disabled",
          "data": false,
          "values": [],
          "description": "Disables the switch."
        },
        {
          "name": "required",
          "data": false,
          "values": [],
          "description": "Marks the switch as required for form submission."
        },
        {
          "name": "aria-invalid",
          "data": false,
          "values": [],
          "description": "Set to `true` to force the invalid style (otherwise applied via `:user-invalid`). `l-form-field` manages this automatically."
        }
      ],
      "events": [],
      "methods": [],
      "slots": [],
      "cssClasses": [
        {
          "name": ".l-switch",
          "description": "Base switch style, applied to `<input type=\"checkbox\" role=\"switch\">`. The `role=\"switch\"` is required so assistive tech announces \"on/off\" (not \"checked\") and `l-form-field` lays it out inline. Inside `l-form-field` a bare switch is auto-styled, so the class is optional there."
        }
      ],
      "cssParts": [],
      "cssProperties": [
        {
          "name": "--size",
          "default": "1.25em",
          "description": "Track height; the whole control scales from it."
        },
        {
          "name": "--accent",
          "default": "var(--l-form-control-activated-color)",
          "description": "Track fill when on."
        }
      ],
      "commands": [],
      "examples": [
        {
          "title": "Default",
          "language": "html",
          "code": "<input type=\"checkbox\" role=\"switch\" class=\"l-switch\" checked />"
        },
        {
          "title": "In a field (no class needed)",
          "language": "html",
          "code": "<l-form-field>\n<label>Email notifications</label>\n<input type=\"checkbox\" role=\"switch\" />\n<l-hint>We'll only email you about account activity.</l-hint>\n</l-form-field>"
        }
      ]
    },
    {
      "name": "tabs",
      "displayName": "Tabs",
      "type": "progressive",
      "isCustomElement": true,
      "tag": "l-tabs",
      "nativeTag": null,
      "selector": "l-tabs",
      "subItemOf": null,
      "summary": "A tabs component that progressively enhances light DOM markup\nwith ARIA roles, keyboard navigation, and animated indicators.",
      "status": "stable",
      "appearances": [
        "line",
        "enclosed"
      ],
      "import": {
        "css": "luxen-ui/css/tabs/line",
        "js": "luxen-ui/tabs"
      },
      "properties": [
        {
          "name": "variant",
          "attribute": "variant",
          "type": "TabsVariant",
          "default": "'line'",
          "reflects": true,
          "description": "Visual variant."
        },
        {
          "name": "value",
          "attribute": "value",
          "type": "string",
          "default": "'0'",
          "reflects": true,
          "description": "Index of the active tab (0-based)."
        },
        {
          "name": "fullWidth",
          "attribute": "full-width",
          "type": "boolean",
          "default": "false",
          "reflects": true,
          "description": "Stretch tabs to fill container width."
        },
        {
          "name": "orientation",
          "attribute": "orientation",
          "type": "TabsOrientation",
          "default": "'horizontal'",
          "reflects": true,
          "description": "Tab orientation."
        }
      ],
      "attributes": [],
      "events": [
        {
          "name": "change",
          "description": "Fired when the active tab changes. Bubbles. Properties: `index: number`, `name: string | null`.",
          "cancelable": false
        }
      ],
      "methods": [],
      "slots": [],
      "cssClasses": [],
      "cssParts": [],
      "cssProperties": [
        {
          "name": "--indicator-color",
          "default": "var(--l-color-text-primary)",
          "description": "`line` variant: color of the active underline that slides under the selected tab."
        },
        {
          "name": "--indicator-thickness",
          "default": "2px",
          "description": "`line` variant: thickness of the active underline."
        },
        {
          "name": "--track-color",
          "default": "var(--l-color-border)",
          "description": "`line` variant: color of the static bottom border the tabs sit on."
        },
        {
          "name": "--track-thickness",
          "default": "1px",
          "description": "`line` variant: thickness of the static bottom border."
        }
      ],
      "commands": [],
      "examples": [
        {
          "title": null,
          "language": "html",
          "code": "<l-tabs variant=\"enclosed\">\n  <div>\n    <button>Tab 1</button>\n    <button>Tab 2</button>\n  </div>\n  <div>Content 1</div>\n  <div>Content 2</div>\n</l-tabs>"
        }
      ]
    },
    {
      "name": "textarea",
      "displayName": "Textarea",
      "type": "native",
      "isCustomElement": false,
      "tag": null,
      "nativeTag": "textarea",
      "selector": ".l-textarea",
      "subItemOf": null,
      "summary": "Textareas let users enter and edit multi-line text.",
      "status": "stable",
      "appearances": [],
      "import": {
        "css": "luxen-ui/css/textarea",
        "js": null
      },
      "properties": [],
      "attributes": [
        {
          "name": "rows",
          "data": false,
          "values": [],
          "description": "Number of visible text lines — sets the initial height."
        },
        {
          "name": "data-size",
          "data": true,
          "values": [
            "xs",
            "sm",
            "md",
            "lg",
            "xl"
          ],
          "description": "Single-line min-height on the shared `--l-size-control-*` scale (default `md`). Affects only the control, not the label or hint/error."
        },
        {
          "name": "data-resize",
          "data": true,
          "values": [
            "vertical",
            "none",
            "both",
            "auto"
          ],
          "description": "User resize handle. Defaults to `vertical`. `auto` grows the box with its content via `field-sizing` (progressive: falls back to the `rows` height where unsupported)."
        },
        {
          "name": "placeholder",
          "data": false,
          "values": [],
          "description": "Native placeholder text."
        },
        {
          "name": "disabled",
          "data": false,
          "values": [],
          "description": "Disables the textarea."
        },
        {
          "name": "required",
          "data": false,
          "values": [],
          "description": "Marks the textarea as required for form submission."
        },
        {
          "name": "readonly",
          "data": false,
          "values": [],
          "description": "Makes the textarea read-only."
        },
        {
          "name": "maxlength",
          "data": false,
          "values": [],
          "description": "Native maximum character count."
        },
        {
          "name": "aria-invalid",
          "data": false,
          "values": [],
          "description": "Set to `true` to force the invalid style (otherwise applied via `:user-invalid`). `l-form-field` manages this automatically."
        }
      ],
      "events": [],
      "methods": [],
      "slots": [],
      "cssClasses": [
        {
          "name": ".l-textarea",
          "description": "Base textarea style, applied to a `<textarea>`. Inside `l-form-field` a bare textarea is auto-styled, so the class is optional there."
        }
      ],
      "cssParts": [],
      "cssProperties": [
        {
          "name": "--height",
          "default": "var(--l-form-control-height)",
          "description": "Single-line min-height; `rows` grows the control from here."
        },
        {
          "name": "--border-radius",
          "default": "var(--l-form-control-border-radius)",
          "description": "Control border radius."
        }
      ],
      "commands": [],
      "examples": [
        {
          "title": "Default",
          "language": "html",
          "code": "<textarea class=\"l-textarea\" rows=\"4\" placeholder=\"Placeholder text\"></textarea>"
        },
        {
          "title": "In a field (no class needed)",
          "language": "html",
          "code": "<l-form-field>\n<label>Message</label>\n<textarea rows=\"4\"></textarea>\n<p class=\"l-hint\">Tell us what's on your mind.</p>\n</l-form-field>"
        },
        {
          "title": "Auto-growing",
          "language": "html",
          "code": "<textarea class=\"l-textarea\" data-resize=\"auto\" rows=\"2\"></textarea>"
        }
      ]
    },
    {
      "name": "toast",
      "displayName": "Toast",
      "type": "custom",
      "isCustomElement": true,
      "tag": "l-toast",
      "nativeTag": null,
      "selector": "l-toast",
      "subItemOf": null,
      "summary": "A toast notification container that generates toast items internally.",
      "status": "stable",
      "appearances": [],
      "import": {
        "css": "luxen-ui/css/toast",
        "js": "luxen-ui/toast"
      },
      "properties": [
        {
          "name": "placement",
          "attribute": "placement",
          "type": "ToastPlacement",
          "default": "'top-end'",
          "reflects": true,
          "description": "Position of the toast stack on the screen."
        },
        {
          "name": "duration",
          "attribute": "duration",
          "type": "number",
          "default": "5000",
          "reflects": true,
          "description": "Default auto-dismiss delay in milliseconds. 0 disables auto-dismiss."
        },
        {
          "name": "variant",
          "attribute": "variant",
          "type": "ToastVariant | undefined",
          "default": null,
          "reflects": true,
          "description": "Default variant for toast items: `info`, `success`, `warning`, `danger`."
        }
      ],
      "attributes": [],
      "events": [
        {
          "name": "show",
          "description": "Emitted when a toast begins to show. Cancelable. Properties: `toast`.",
          "cancelable": true
        },
        {
          "name": "after-show",
          "description": "Emitted after the show animation completes. Not cancelable. Properties: `toast`.",
          "cancelable": false
        },
        {
          "name": "hide",
          "description": "Emitted when a toast begins to hide. Cancelable. Properties: `toast`.",
          "cancelable": true
        },
        {
          "name": "after-hide",
          "description": "Emitted after the hide animation completes and toast is removed. Properties: `toast`.",
          "cancelable": false
        }
      ],
      "methods": [
        {
          "name": "toast",
          "params": [
            {
              "name": "options",
              "type": "ToastOptions"
            }
          ],
          "returns": "HTMLElement",
          "description": "Create and show a toast notification."
        }
      ],
      "slots": [],
      "cssClasses": [
        {
          "name": ".l-toast-accent",
          "description": "The left accent bar, colored by variant."
        },
        {
          "name": ".l-toast-icon",
          "description": "The leading icon, colored by variant (replaces the accent bar)."
        },
        {
          "name": ".l-toast-content",
          "description": "The content column wrapping the heading and message."
        },
        {
          "name": ".l-toast-timer",
          "description": "The countdown progress bar (for timed toasts)."
        }
      ],
      "cssParts": [],
      "cssProperties": [
        {
          "name": "--gap",
          "default": null,
          "description": "Gap between stacked toast items."
        },
        {
          "name": "--width",
          "default": null,
          "description": "Width of the toast stack."
        },
        {
          "name": "--show-duration",
          "default": null,
          "description": "Duration of the show animation."
        },
        {
          "name": "--hide-duration",
          "default": null,
          "description": "Duration of the hide animation."
        }
      ],
      "commands": [],
      "examples": []
    },
    {
      "name": "tooltip",
      "displayName": "Tooltip",
      "type": "shadow",
      "isCustomElement": true,
      "tag": "l-tooltip",
      "nativeTag": null,
      "selector": "l-tooltip",
      "subItemOf": null,
      "summary": "A tooltip that displays contextual text on hover or focus.",
      "status": "stable",
      "appearances": [],
      "import": {
        "css": null,
        "js": "luxen-ui/tooltip"
      },
      "properties": [
        {
          "name": "for",
          "attribute": "for",
          "type": "string",
          "default": "''",
          "reflects": false,
          "description": "The HTML id of the element triggering the tooltip."
        },
        {
          "name": "placement",
          "attribute": "placement",
          "type": "Placement",
          "default": "'top'",
          "reflects": false,
          "description": "The preferred placement of the tooltip."
        },
        {
          "name": "distance",
          "attribute": "distance",
          "type": "number",
          "default": "8",
          "reflects": false,
          "description": "The distance in pixels from the target element."
        },
        {
          "name": "open",
          "attribute": "open",
          "type": "boolean",
          "default": "false",
          "reflects": true,
          "description": "Whether or not the tooltip is visible."
        },
        {
          "name": "withoutArrow",
          "attribute": "without-arrow",
          "type": "boolean",
          "default": "false",
          "reflects": true,
          "description": "Hide the directional arrow."
        },
        {
          "name": "trigger",
          "attribute": "trigger",
          "type": "string",
          "default": "'hover focus'",
          "reflects": false,
          "description": "Space-separated list of trigger modes: `hover`, `focus`, `click`, `manual`."
        }
      ],
      "attributes": [],
      "events": [],
      "methods": [
        {
          "name": "show",
          "params": [],
          "returns": null,
          "description": ""
        },
        {
          "name": "hide",
          "params": [],
          "returns": null,
          "description": ""
        },
        {
          "name": "toggle",
          "params": [],
          "returns": null,
          "description": ""
        }
      ],
      "slots": [
        {
          "name": "",
          "description": "Tooltip content (text or rich HTML)."
        }
      ],
      "cssClasses": [],
      "cssParts": [
        {
          "name": "body",
          "description": "The tooltip popover container."
        },
        {
          "name": "arrow",
          "description": "The directional arrow element."
        }
      ],
      "cssProperties": [
        {
          "name": "--background-color",
          "default": null,
          "description": "Background color for this tooltip instance. Defaults to the global `--l-tooltip-background-color` token (a neutral inverse surface, dark in light mode / light in dark mode) — override that token to re-skin every tooltip at once."
        },
        {
          "name": "--text-color",
          "default": null,
          "description": "Text color. If unset, auto-derived from `--background-color` luminance."
        },
        {
          "name": "--border-radius",
          "default": "4px",
          "description": "Border radius."
        },
        {
          "name": "--max-width",
          "default": "180px",
          "description": "Maximum width."
        },
        {
          "name": "--arrow-size",
          "default": "6px",
          "description": "Arrow size."
        },
        {
          "name": "--show-duration",
          "default": "150ms",
          "description": "Show animation duration."
        },
        {
          "name": "--hide-duration",
          "default": "150ms",
          "description": "Hide animation duration."
        }
      ],
      "commands": [],
      "examples": []
    },
    {
      "name": "tree",
      "displayName": "Tree",
      "type": "shadow",
      "isCustomElement": true,
      "tag": "l-tree",
      "nativeTag": null,
      "selector": "l-tree",
      "subItemOf": null,
      "summary": "A hierarchical tree view composed of `<l-tree-item>` children.\n\nThe host carries `role=\"tree\"`, so give it an accessible name with\n`aria-label` or `aria-labelledby` (e.g. `<l-tree aria-label=\"Files\">`).",
      "status": "stable",
      "appearances": [],
      "import": {
        "css": null,
        "js": "luxen-ui/tree"
      },
      "properties": [
        {
          "name": "selection",
          "attribute": "selection",
          "type": "TreeSelection",
          "default": "'single'",
          "reflects": true,
          "description": "Selection behaviour:\n- `single` (default): at most one item selected via `aria-selected`.\n- `multiple`: any number of items selected. Checkboxes are rendered.\n- `leaf`: only leaf items can be selected (single). Branches just toggle.\n- `none`: purely navigable, no selection state."
        },
        {
          "name": "independent",
          "attribute": "independent",
          "type": "boolean",
          "default": "false",
          "reflects": true,
          "description": "When set with `selection=\"multiple\"`, parent and children selection are decoupled:\ntoggling a parent does NOT toggle its descendants and vice versa.\nWithout it, selection cascades both ways and branches may become indeterminate."
        }
      ],
      "attributes": [],
      "events": [
        {
          "name": "selection-change",
          "description": "Fired when the selected items change. Properties: `selection: TreeItem[]`.",
          "cancelable": false
        }
      ],
      "methods": [
        {
          "name": "getAllItems",
          "params": [
            {
              "name": "{ includeDisabled = true }",
              "type": null
            }
          ],
          "returns": "TreeItem[]",
          "description": "Returns all items in document (flat) order, including nested ones."
        },
        {
          "name": "getSelection",
          "params": [],
          "returns": "TreeItem[]",
          "description": "Returns currently selected items."
        },
        {
          "name": "expandAll",
          "params": [],
          "returns": null,
          "description": "Expands every item that has children."
        },
        {
          "name": "collapseAll",
          "params": [],
          "returns": null,
          "description": "Collapses every item."
        }
      ],
      "slots": [
        {
          "name": "",
          "description": "One or more `l-tree-item` elements."
        }
      ],
      "cssClasses": [],
      "cssParts": [
        {
          "name": "base",
          "description": "The root tree container."
        }
      ],
      "cssProperties": [
        {
          "name": "--indent-size",
          "default": "1rem",
          "description": "Horizontal indent per depth level."
        },
        {
          "name": "--indent-guide-width",
          "default": "1px",
          "description": "Thickness of the vertical guide line between a parent and its children. Set to `0` to hide guides."
        },
        {
          "name": "--indent-guide-style",
          "default": "solid",
          "description": "Line style of the guide (`solid`, `dashed`, `dotted`, `double`…)."
        },
        {
          "name": "--indent-guide-color",
          "default": null,
          "description": "Color of the guide line."
        },
        {
          "name": "--row-height",
          "default": "1.75rem",
          "description": "Minimum row height."
        },
        {
          "name": "--row-padding-inline",
          "default": "0.25rem",
          "description": "Inner inline padding of the row; also drives the content slot left indent and the indent guide column."
        },
        {
          "name": "--chevron-size",
          "default": "1.125rem",
          "description": "Size of the expand/collapse chevron box."
        },
        {
          "name": "--item-gap",
          "default": "0.375rem",
          "description": "Horizontal gap between chevron, prefix, label and suffix on the row; also drives the content slot left indent."
        }
      ],
      "commands": [],
      "examples": []
    },
    {
      "name": "tree-item",
      "displayName": "Tree item",
      "type": "shadow",
      "isCustomElement": true,
      "tag": "l-tree-item",
      "nativeTag": null,
      "selector": "l-tree-item",
      "subItemOf": "tree",
      "summary": "A node inside `<l-tree>`. Nested `<l-tree-item>` children become sub-nodes.",
      "status": "stable",
      "appearances": [],
      "import": {
        "css": null,
        "js": "luxen-ui/tree-item"
      },
      "properties": [
        {
          "name": "expanded",
          "attribute": "expanded",
          "type": "boolean",
          "default": "false",
          "reflects": true,
          "description": "Whether the item is expanded."
        },
        {
          "name": "selected",
          "attribute": "selected",
          "type": "boolean",
          "default": "false",
          "reflects": true,
          "description": "Whether the item is selected."
        },
        {
          "name": "indeterminate",
          "attribute": "indeterminate",
          "type": "boolean",
          "default": "false",
          "reflects": true,
          "description": "Whether the checkbox is indeterminate (some descendants selected)."
        },
        {
          "name": "disabled",
          "attribute": "disabled",
          "type": "boolean",
          "default": "false",
          "reflects": true,
          "description": "Whether the item is disabled."
        },
        {
          "name": "lazy",
          "attribute": "lazy",
          "type": "boolean",
          "default": "false",
          "reflects": true,
          "description": "Marks this item as having children that will be loaded on first expand."
        },
        {
          "name": "loading",
          "attribute": "loading",
          "type": "boolean",
          "default": "false",
          "reflects": true,
          "description": "Whether the item is currently loading (shows a spinner)."
        },
        {
          "name": "showCheckbox",
          "attribute": null,
          "type": "boolean",
          "default": null,
          "reflects": false,
          "description": "Set by `<l-tree>`: whether a checkbox is shown."
        },
        {
          "name": "depth",
          "attribute": null,
          "type": "number",
          "default": null,
          "reflects": false,
          "description": "Set by `<l-tree>`: depth of the item in the tree (0 = root)."
        },
        {
          "name": "hasChildren",
          "attribute": null,
          "type": "boolean",
          "default": null,
          "reflects": false,
          "description": "Whether this item has nested tree-item children."
        }
      ],
      "attributes": [],
      "events": [
        {
          "name": "expand",
          "description": "Fired when the item is expanded.",
          "cancelable": false
        },
        {
          "name": "collapse",
          "description": "Fired when the item is collapsed.",
          "cancelable": false
        },
        {
          "name": "lazy-load",
          "description": "Fired when a lazy item is expanded for the first time. Consumers should append children and set `lazy=false`.",
          "cancelable": false
        }
      ],
      "methods": [
        {
          "name": "setPosition",
          "params": [
            {
              "name": "level",
              "type": "number"
            },
            {
              "name": "posInSet",
              "type": "number"
            },
            {
              "name": "setSize",
              "type": "number"
            }
          ],
          "returns": null,
          "description": "Set by `<l-tree>`: ARIA position within the tree. `level` is 1-based depth,\n`posInSet`/`setSize` describe the item's rank among its siblings. These let\nscreen readers announce \"level 2, 3 of 5\" even when `lazy` children keep the\nfull set out of the DOM."
        },
        {
          "name": "getChildrenItems",
          "params": [
            {
              "name": "{ includeDisabled = true }",
              "type": null
            }
          ],
          "returns": "TreeItem[]",
          "description": "Returns the child `<l-tree-item>` elements directly under this one."
        },
        {
          "name": "isLeaf",
          "params": [],
          "returns": "boolean",
          "description": "Returns true if this item has no expandable children."
        },
        {
          "name": "getTextLabel",
          "params": [],
          "returns": "string",
          "description": "Returns the text label of this item."
        },
        {
          "name": "toggle",
          "params": [],
          "returns": null,
          "description": "Toggle expand state. Opening a `lazy` item emits `lazy-load` (via `updated`)."
        }
      ],
      "slots": [
        {
          "name": "",
          "description": "Label content (kept to a single row)."
        },
        {
          "name": "prefix",
          "description": "Leading content before the label (e.g. icon)."
        },
        {
          "name": "suffix",
          "description": "Trailing content."
        },
        {
          "name": "expand-icon",
          "description": "Icon shown when the item is collapsed."
        },
        {
          "name": "collapse-icon",
          "description": "Icon shown when the item is expanded."
        },
        {
          "name": "content",
          "description": "Block content that belongs to the item but not to its header row (e.g. comment body, action bar). Hidden when a branch is collapsed."
        }
      ],
      "cssClasses": [],
      "cssParts": [
        {
          "name": "base",
          "description": "The item row."
        },
        {
          "name": "expand-button",
          "description": "The chevron toggle area."
        },
        {
          "name": "checkbox",
          "description": "The native checkbox input."
        },
        {
          "name": "label",
          "description": "The label container."
        },
        {
          "name": "branch",
          "description": "Wrapper around the content and children slots; carries the indent guide."
        },
        {
          "name": "content",
          "description": "The content slot wrapper (block area between the row and the children)."
        },
        {
          "name": "children",
          "description": "The nested items container."
        }
      ],
      "cssProperties": [],
      "commands": [],
      "examples": []
    }
  ]
}