luxen-ui 0.6.2 → 0.8.0

package/dist/metadata/input-otp.json

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

package/dist/metadata/input-stepper.json

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

package/dist/metadata/kbd.json

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

package/dist/metadata/popover.json

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

package/dist/metadata/progress.json

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