luxen-ui 0.6.2 → 0.8.0

package/dist/metadata/tabs.json

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

package/dist/metadata/toast.json

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

package/dist/metadata/tooltip.json

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

package/dist/metadata/tree-item.json

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

package/dist/metadata/tree.json

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

package/dist/registry.d.ts

@@ -1,5 +1,5 @@
 /** Every component base name the library ships. */
-export type ElementBaseName = 'avatar' | 'badge' | 'carousel' | 'carousel-item' | 'dialog' | 'divider' | 'drawer' | 'dropdown' | 'dropdown-item' | 'icon' | 'input-otp' | 'input-stepper' | 'popover' | 'skeleton' | 'spinner' | 'rating' | 'sticky-bar' | 'stories' | 'story' | 'stories-viewer' | 'tabs' | 'toast' | 'toast-item' | 'tooltip' | 'tree' | 'tree-item';
+export type ElementBaseName = 'avatar' | 'badge' | 'carousel' | 'carousel-item' | 'dialog' | 'divider' | 'drawer' | 'dropdown' | 'dropdown-item' | 'icon' | 'input-otp' | 'input-stepper' | 'popover' | 'prose-editor' | 'skeleton' | 'spinner' | 'rating' | 'sticky-bar' | 'stories' | 'story' | 'stories-viewer' | 'tabs' | 'toast' | 'toast-item' | 'tooltip' | 'tree' | 'tree-item';
 /** Set the global prefix. Must be called before defining elements. */
 export declare function setPrefix(prefix: {
     element: string;

package/dist/registry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../src/html/registry.ts"],"names":[],"mappings":"AAAA,mDAAmD;AACnD,MAAM,MAAM,eAAe,GACvB,QAAQ,GACR,OAAO,GACP,UAAU,GACV,eAAe,GACf,QAAQ,GACR,SAAS,GACT,QAAQ,GACR,UAAU,GACV,eAAe,GACf,MAAM,GACN,WAAW,GACX,eAAe,GACf,SAAS,GACT,UAAU,GACV,SAAS,GACT,QAAQ,GACR,YAAY,GACZ,SAAS,GACT,OAAO,GACP,gBAAgB,GAChB,MAAM,GACN,OAAO,GACP,YAAY,GACZ,SAAS,GACT,MAAM,GACN,WAAW,CAAC;AAMhB,sEAAsE;AACtE,wBAAgB,SAAS,CAAC,MAAM,EAAE;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAGxE;AAED,gCAAgC;AAChC,wBAAgB,SAAS,IAAI;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAE5D;AAED,gEAAgE;AAChE,wBAAgB,OAAO,CAAC,QAAQ,EAAE,eAAe,GAAG,MAAM,CAEzD;AAED,sEAAsE;AACtE,wBAAgB,GAAG,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAExC;AAID,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE7C;AAED,kDAAkD;AAClD,wBAAgB,YAAY,CAAC,QAAQ,EAAE,eAAe,GAAG,OAAO,CAE/D;AAED,qEAAqE;AACrE,wBAAgB,cAAc,CAAC,QAAQ,EAAE,eAAe,GAAG,IAAI,CAE9D"}
+{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../src/html/registry.ts"],"names":[],"mappings":"AAAA,mDAAmD;AACnD,MAAM,MAAM,eAAe,GACvB,QAAQ,GACR,OAAO,GACP,UAAU,GACV,eAAe,GACf,QAAQ,GACR,SAAS,GACT,QAAQ,GACR,UAAU,GACV,eAAe,GACf,MAAM,GACN,WAAW,GACX,eAAe,GACf,SAAS,GACT,cAAc,GACd,UAAU,GACV,SAAS,GACT,QAAQ,GACR,YAAY,GACZ,SAAS,GACT,OAAO,GACP,gBAAgB,GAChB,MAAM,GACN,OAAO,GACP,YAAY,GACZ,SAAS,GACT,MAAM,GACN,WAAW,CAAC;AAMhB,sEAAsE;AACtE,wBAAgB,SAAS,CAAC,MAAM,EAAE;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAGxE;AAED,gCAAgC;AAChC,wBAAgB,SAAS,IAAI;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAE5D;AAED,gEAAgE;AAChE,wBAAgB,OAAO,CAAC,QAAQ,EAAE,eAAe,GAAG,MAAM,CAEzD;AAED,sEAAsE;AACtE,wBAAgB,GAAG,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAExC;AAID,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE7C;AAED,kDAAkD;AAClD,wBAAgB,YAAY,CAAC,QAAQ,EAAE,eAAe,GAAG,OAAO,CAE/D;AAED,qEAAqE;AACrE,wBAAgB,cAAc,CAAC,QAAQ,EAAE,eAAe,GAAG,IAAI,CAE9D"}