luxen-ui 0.6.2 → 0.8.0

package/dist/metadata/prose-editor.json

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

package/dist/metadata/rating.json

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

package/dist/metadata/select.json

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

package/dist/metadata/skeleton.json

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

package/dist/metadata/spinner.json

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