luxen-ui 0.6.2 → 0.8.0

package/dist/metadata/index.json

@@ -0,0 +1,4062 @@
+{
+  "version": "0.8.0",
+  "elements": [
+    {
+      "name": "avatar",
+      "displayName": "Avatar",
+      "type": "shadow",
+      "isCustomElement": true,
+      "tag": "l-avatar",
+      "nativeTag": null,
+      "selector": "l-avatar",
+      "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": ""
+        },
+        {
+          "name": "name",
+          "attribute": "name",
+          "type": "string",
+          "default": "''",
+          "reflects": false,
+          "description": ""
+        },
+        {
+          "name": "size",
+          "attribute": "size",
+          "type": "string",
+          "default": "'md'",
+          "reflects": true,
+          "description": ""
+        },
+        {
+          "name": "badge",
+          "attribute": "badge",
+          "type": "number",
+          "default": "0",
+          "reflects": false,
+          "description": ""
+        },
+        {
+          "name": "interactive",
+          "attribute": "interactive",
+          "type": "boolean",
+          "default": "false",
+          "reflects": true,
+          "description": ""
+        }
+      ],
+      "attributes": [],
+      "events": [],
+      "methods": [],
+      "slots": [],
+      "cssClasses": [
+        {
+          "name": ".l-avatar-group",
+          "description": "Flex wrapper that overlaps a row of stacked avatars."
+        }
+      ],
+      "cssParts": [],
+      "cssProperties": [
+        {
+          "name": "--color",
+          "default": null,
+          "description": "Background fill color for initials and the default icon."
+        },
+        {
+          "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",
+      "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": "button",
+      "displayName": "Button",
+      "type": "native",
+      "isCustomElement": false,
+      "tag": null,
+      "nativeTag": "button",
+      "selector": ".l-button",
+      "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": "32px",
+          "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": null,
+          "description": "Font size."
+        }
+      ],
+      "commands": [],
+      "examples": [
+        {
+          "title": "Primary",
+          "language": "html",
+          "code": "<button class=\"l-button\" data-variant=\"primary\">Save</button>"
+        }
+      ]
+    },
+    {
+      "name": "carousel",
+      "displayName": "Carousel",
+      "type": "shadow",
+      "isCustomElement": true,
+      "tag": "l-carousel",
+      "nativeTag": null,
+      "selector": "l-carousel",
+      "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. Detail: `{ index: number }`.",
+          "cancelable": false
+        },
+        {
+          "name": "slides-in-view",
+          "description": "Fired when the set of slides in view changes. Detail: `{ 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": "custom",
+      "isCustomElement": true,
+      "tag": "l-carousel-item",
+      "nativeTag": null,
+      "selector": "l-carousel-item",
+      "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": "close-button",
+      "displayName": "Close button",
+      "type": "native",
+      "isCustomElement": false,
+      "tag": null,
+      "nativeTag": "button",
+      "selector": ".l-close",
+      "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": "dialog",
+      "displayName": "Dialog",
+      "type": "shadow",
+      "isCustomElement": true,
+      "tag": "l-dialog",
+      "nativeTag": null,
+      "selector": "l-dialog",
+      "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."
+        },
+        {
+          "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 opens. Not cancelable.",
+          "cancelable": false
+        },
+        {
+          "name": "after-show",
+          "description": "Fired after the open animation completes.",
+          "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.",
+          "cancelable": false
+        }
+      ],
+      "methods": [],
+      "slots": [
+        {
+          "name": "",
+          "description": "Body content."
+        },
+        {
+          "name": "title",
+          "description": "Custom heading element. Overrides the default `<h2>` rendered from the `title` property."
+        },
+        {
+          "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",
+      "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",
+      "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",
+      "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' | 'bottom' | undefined",
+          "default": null,
+          "reflects": true,
+          "description": "Edge the drawer slides in from. Defaults to the start (inline-start) edge."
+        },
+        {
+          "name": "title",
+          "attribute": "title",
+          "type": "string",
+          "default": "''",
+          "reflects": false,
+          "description": "Dialog title rendered in the header."
+        },
+        {
+          "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 opens. Not cancelable.",
+          "cancelable": false
+        },
+        {
+          "name": "after-show",
+          "description": "Fired after the open animation completes.",
+          "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.",
+          "cancelable": false
+        }
+      ],
+      "methods": [],
+      "slots": [
+        {
+          "name": "",
+          "description": "Body content."
+        },
+        {
+          "name": "close",
+          "description": "Close button (typically `<button class=\"l-close\">`)."
+        },
+        {
+          "name": "footer",
+          "description": "Footer actions."
+        },
+        {
+          "name": "title",
+          "description": "Custom heading element. Overrides the default `<h2>` rendered from the `title` property."
+        }
+      ],
+      "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 `bottom`)."
+        },
+        {
+          "name": "--border-radius",
+          "default": "6px",
+          "description": "Drawer border radius on the inner edges."
+        },
+        {
+          "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",
+      "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."
+        }
+      ],
+      "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. Detail: `{ 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."
+        },
+        {
+          "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": "custom",
+      "isCustomElement": true,
+      "tag": "l-dropdown-item",
+      "nativeTag": null,
+      "selector": "l-dropdown-item",
+      "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."
+        }
+      ],
+      "attributes": [],
+      "events": [],
+      "methods": [
+        {
+          "name": "getTextLabel",
+          "params": [],
+          "returns": "string",
+          "description": "Returns the text label of this item."
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "Label text."
+        },
+        {
+          "name": "prefix",
+          "description": "Leading content (e.g. icon)."
+        },
+        {
+          "name": "suffix",
+          "description": "Trailing content."
+        }
+      ],
+      "cssClasses": [],
+      "cssParts": [],
+      "cssProperties": [
+        {
+          "name": "--color",
+          "default": null,
+          "description": "Text color."
+        }
+      ],
+      "commands": [],
+      "examples": []
+    },
+    {
+      "name": "icon",
+      "displayName": "Icon",
+      "type": "shadow",
+      "isCustomElement": true,
+      "tag": "l-icon",
+      "nativeTag": null,
+      "selector": "l-icon",
+      "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-otp",
+      "displayName": "Input OTP",
+      "type": "progressive",
+      "isCustomElement": true,
+      "tag": "l-input-otp",
+      "nativeTag": null,
+      "selector": "l-input-otp",
+      "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",
+      "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. Detail: `{ 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",
+      "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",
+      "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",
+      "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",
+      "summary": "A rich text editor built on Tiptap (ProseMirror). Form-associated: its value is the editor HTML.",
+      "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": "validationTarget",
+          "attribute": null,
+          "type": "HTMLElement | undefined",
+          "default": null,
+          "reflects": false,
+          "description": ""
+        }
+      ],
+      "attributes": [],
+      "events": [
+        {
+          "name": "change",
+          "description": "Fired when the content changes. `detail` is `{ html, json }`.",
+          "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": "rating",
+      "displayName": "Rating",
+      "type": "shadow",
+      "isCustomElement": true,
+      "tag": "l-rating",
+      "nativeTag": null,
+      "selector": "l-rating",
+      "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": "{{",
+          "description": "name: string, value: string, checked: boolean, sourceEvent: Event }} change - Emitted when the rating value changes in edit mode.",
+          "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",
+      "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": "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."
+        }
+      ],
+      "cssParts": [],
+      "cssProperties": [
+        {
+          "name": "--border-radius",
+          "default": "4px",
+          "description": "Border radius."
+        },
+        {
+          "name": "--border-color",
+          "default": null,
+          "description": "Border color (adapts to light/dark)."
+        }
+      ],
+      "commands": [],
+      "examples": [
+        {
+          "title": "Basic",
+          "language": "html",
+          "code": "<select class=\"l-select\">\n<option>One</option>\n<option>Two</option>\n</select>"
+        }
+      ]
+    },
+    {
+      "name": "skeleton",
+      "displayName": "Skeleton",
+      "type": "custom",
+      "isCustomElement": true,
+      "tag": "l-skeleton",
+      "nativeTag": null,
+      "selector": "l-skeleton",
+      "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": "spinner",
+      "displayName": "Spinner",
+      "type": "shadow",
+      "isCustomElement": true,
+      "tag": "l-spinner",
+      "nativeTag": null,
+      "selector": "l-spinner",
+      "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",
+      "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.",
+          "cancelable": false
+        },
+        {
+          "name": "hide",
+          "description": "Fired before the bar hides. Cancelable.",
+          "cancelable": true
+        },
+        {
+          "name": "after-hide",
+          "description": "Fired after the hide animation completes.",
+          "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",
+      "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. Detail: `{ 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",
+      "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 opens.",
+          "cancelable": false
+        },
+        {
+          "name": "after-show",
+          "description": "Fired after the open transition completes.",
+          "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.",
+          "cancelable": false
+        },
+        {
+          "name": "story-change",
+          "description": "Fired when the active story changes. Detail: `{ index: number, story: LuxenStory }`.",
+          "cancelable": false
+        },
+        {
+          "name": "story-end",
+          "description": "Fired when the active story finishes playback. Detail: `{ index: number }`.",
+          "cancelable": false
+        },
+        {
+          "name": "chapter-change",
+          "description": "Fired when the active chapter (within a story) changes. Detail: `{ chapter: number, story: LuxenStory }`.",
+          "cancelable": false
+        },
+        {
+          "name": "mute-change",
+          "description": "Fired when the mute state changes. Detail: `{ 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",
+      "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": "tabs",
+      "displayName": "Tabs",
+      "type": "progressive",
+      "isCustomElement": true,
+      "tag": "l-tabs",
+      "nativeTag": null,
+      "selector": "l-tabs",
+      "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. Detail: `{ index: number, name: string | null }`.",
+          "cancelable": false
+        }
+      ],
+      "methods": [],
+      "slots": [],
+      "cssClasses": [],
+      "cssParts": [],
+      "cssProperties": [],
+      "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": "toast",
+      "displayName": "Toast",
+      "type": "custom",
+      "isCustomElement": true,
+      "tag": "l-toast",
+      "nativeTag": null,
+      "selector": "l-toast",
+      "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.",
+          "cancelable": true
+        },
+        {
+          "name": "after-show",
+          "description": "Emitted after the show animation completes.",
+          "cancelable": false
+        },
+        {
+          "name": "hide",
+          "description": "Emitted when a toast begins to hide. Cancelable.",
+          "cancelable": true
+        },
+        {
+          "name": "after-hide",
+          "description": "Emitted after the hide animation completes and toast is removed.",
+          "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",
+      "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. Default: dark in light mode, light in dark mode."
+        },
+        {
+          "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",
+      "summary": "A hierarchical tree view composed of `<l-tree-item>` children.",
+      "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. Detail: `{ 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",
+      "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": "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. Emits `lazy-load` the first time a lazy item opens."
+        }
+      ],
+      "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": []
+    }
+  ]
+}