luxen-ui 0.6.2 → 0.8.0

package/dist/metadata/disclosure.json

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

package/dist/metadata/divider.json

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

package/dist/metadata/drawer.json

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

package/dist/metadata/dropdown-item.json

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

package/dist/metadata/dropdown.json

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

package/dist/metadata/icon.json

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