luxen-ui 0.6.2 → 0.8.0

package/dist/metadata/carousel.json

@@ -0,0 +1,388 @@
+{
+  "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": []
+}

package/dist/metadata/close-button.json

@@ -0,0 +1,90 @@
+{
+  "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>"
+    }
+  ]
+}

package/dist/metadata/dialog.json

@@ -0,0 +1,163 @@
+{
+  "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": []
+}