luxen-ui 0.4.0 → 0.5.0

package/dist/elements/tree/tree.js

@@ -15,7 +15,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _LuxenTree_selection_accessor_storage, _LuxenTree_independent_accessor_storage;
+var _Tree_selection_accessor_storage, _Tree_independent_accessor_storage;
 import { html, unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';
 import { LuxenElement } from '../../shared/luxen-element';
@@ -39,14 +39,14 @@ const styles = unsafeCSS(rawStyles);
  * @cssproperty --chevron-size - Size of the expand/collapse chevron box. Default `1.125rem`.
  * @cssproperty --item-gap - Horizontal gap between chevron, prefix, label and suffix on the row; also drives the content slot left indent. Default `0.375rem`.
  *
- * @event selection-change - Fired when the selected items change. Detail: `{ selection: LuxenTreeItem[] }`.
+ * @event selection-change - Fired when the selected items change. Detail: `{ selection: TreeItem[] }`.
  */
-export class LuxenTree extends LuxenElement {
+export class Tree extends LuxenElement {
     constructor() {
         super(...arguments);
         this._lastFocusedItem = null;
-        _LuxenTree_selection_accessor_storage.set(this, 'single');
-        _LuxenTree_independent_accessor_storage.set(this, false);
+        _Tree_selection_accessor_storage.set(this, 'single');
+        _Tree_independent_accessor_storage.set(this, false);
         // --- Selection handling ---
         this._onItemToggle = (event) => {
             const { item, checked } = event.detail;
@@ -184,9 +184,7 @@ export class LuxenTree extends LuxenElement {
                 case '*': {
                     event.preventDefault();
                     // Expand all siblings of the current item.
-                    const siblings = (current.parentElement
-                        ? Array.from(current.parentElement.children)
-                        : []).filter((el) => el.tagName === tagName('tree-item').toUpperCase());
+                    const siblings = (current.parentElement ? Array.from(current.parentElement.children) : []).filter((el) => el.tagName === tagName('tree-item').toUpperCase());
                     for (const sib of siblings) {
                         if (!sib.isLeaf())
                             sib.expanded = true;
@@ -203,15 +201,15 @@ export class LuxenTree extends LuxenElement {
      * - `leaf`: only leaf items can be selected (single). Branches just toggle.
      * - `none`: purely navigable, no selection state.
      */
-    get selection() { return __classPrivateFieldGet(this, _LuxenTree_selection_accessor_storage, "f"); }
-    set selection(value) { __classPrivateFieldSet(this, _LuxenTree_selection_accessor_storage, value, "f"); }
+    get selection() { return __classPrivateFieldGet(this, _Tree_selection_accessor_storage, "f"); }
+    set selection(value) { __classPrivateFieldSet(this, _Tree_selection_accessor_storage, value, "f"); }
     /**
      * When set with `selection="multiple"`, parent and children selection are decoupled:
      * toggling a parent does NOT toggle its descendants and vice versa.
      * Without it, selection cascades both ways and branches may become indeterminate.
      */
-    get independent() { return __classPrivateFieldGet(this, _LuxenTree_independent_accessor_storage, "f"); }
-    set independent(value) { __classPrivateFieldSet(this, _LuxenTree_independent_accessor_storage, value, "f"); }
+    get independent() { return __classPrivateFieldGet(this, _Tree_independent_accessor_storage, "f"); }
+    set independent(value) { __classPrivateFieldSet(this, _Tree_independent_accessor_storage, value, "f"); }
     connectedCallback() {
         super.connectedCallback();
         this._mutationObserver = new MutationObserver(() => this._syncAll());
@@ -422,11 +420,11 @@ export class LuxenTree extends LuxenElement {
     `;
     }
 }
-_LuxenTree_selection_accessor_storage = new WeakMap(), _LuxenTree_independent_accessor_storage = new WeakMap();
-LuxenTree.styles = [hostStyles, styles];
+_Tree_selection_accessor_storage = new WeakMap(), _Tree_independent_accessor_storage = new WeakMap();
+Tree.styles = [hostStyles, styles];
 __decorate([
     property({ reflect: true })
-], LuxenTree.prototype, "selection", null);
+], Tree.prototype, "selection", null);
 __decorate([
     property({ type: Boolean, reflect: true })
-], LuxenTree.prototype, "independent", null);
+], Tree.prototype, "independent", null);

package/dist/elements/tree-item/index.d.ts

@@ -1,8 +1,8 @@
-import { LuxenTreeItem } from './tree-item';
+import { TreeItem } from './tree-item';
 export * from './tree-item';
 declare global {
     interface HTMLElementTagNameMap {
-        'l-tree-item': LuxenTreeItem;
+        'l-tree-item': TreeItem;
     }
 }
 //# sourceMappingURL=index.d.ts.map

package/dist/elements/tree-item/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/html/elements/tree-item/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,cAAc,aAAa,CAAC;AAG5B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,aAAa,CAAC;KAC9B;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/html/elements/tree-item/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,cAAc,aAAa,CAAC;AAG5B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,QAAQ,CAAC;KACzB;CACF"}

package/dist/elements/tree-item/index.js

@@ -1,4 +1,4 @@
 import { define } from '../../define';
-import { LuxenTreeItem } from './tree-item';
+import { TreeItem } from './tree-item';
 export * from './tree-item';
-define('tree-item', LuxenTreeItem);
+define('tree-item', TreeItem);

package/dist/elements/tree-item/tree-item.d.ts

@@ -26,7 +26,7 @@ import { LuxenElement } from '../../shared/luxen-element';
  * @event collapse - Fired when the item is collapsed.
  * @event lazy-load - Fired when a lazy item is expanded for the first time. Consumers should append children and set `lazy=false`.
  */
-export declare class LuxenTreeItem extends LuxenElement {
+export declare class TreeItem extends LuxenElement {
     static styles: import("lit").CSSResult[];
     private _internals;
     private _childObserver?;
@@ -56,7 +56,7 @@ export declare class LuxenTreeItem extends LuxenElement {
     /** Returns the child `<l-tree-item>` elements directly under this one. */
     getChildrenItems({ includeDisabled }?: {
         includeDisabled?: boolean | undefined;
-    }): LuxenTreeItem[];
+    }): TreeItem[];
     /** Returns true if this item has no expandable children. */
     isLeaf(): boolean;
     /** Returns the text label of this item. */

package/dist/elements/tree-item/tree-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tree-item.d.ts","sourceRoot":"","sources":["../../../src/html/elements/tree-item/tree-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE3D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAO1D;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,qBAAa,aAAc,SAAQ,YAAY;IAC7C,OAAgB,MAAM,4BAAwB;IAE9C,OAAO,CAAC,UAAU,CAA0B;IAC5C,OAAO,CAAC,cAAc,CAAC,CAAmB;IAE1C,oCAAoC;IAEpC,QAAQ,CAAC,QAAQ,UAAS;IAE1B,oCAAoC;IAEpC,QAAQ,CAAC,QAAQ,UAAS;IAE1B,yEAAyE;IAEzE,QAAQ,CAAC,aAAa,UAAS;IAE/B,oCAAoC;IAEpC,QAAQ,CAAC,QAAQ,UAAS;IAE1B,8EAA8E;IAE9E,QAAQ,CAAC,IAAI,UAAS;IAEtB,+DAA+D;IAE/D,QAAQ,CAAC,OAAO,UAAS;IAEzB,sDAAsD;IACtD,IAAI,YAAY,CAAC,KAAK,EAAE,OAAO,EAG9B;IACD,IAAI,YAAY,IAAI,OAAO,CAE1B;IACD,OAAO,CAAC,aAAa,CAAS;IAE9B,mEAAmE;IACnE,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAGtB;IACD,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,OAAO,CAAC,MAAM,CAAK;IAEnB,uDAAuD;IACvD,IAAI,WAAW,IAAI,OAAO,CAEzB;IACD,OAAO,CAAC,YAAY,CAAS;IAE7B,0EAA0E;IAC1E,gBAAgB,CAAC,EAAE,eAAsB,EAAE;;KAAK,GAAG,aAAa,EAAE;IAOlE,4DAA4D;IAC5D,MAAM,IAAI,OAAO;IAIjB,2CAA2C;IAC3C,YAAY,IAAI,MAAM;IAUb,iBAAiB;IAQjB,oBAAoB;IAKpB,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAe9C,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,aAAa;IAmBrB,+EAA+E;IAC/E,MAAM;IASN,OAAO,CAAC,iBAAiB,CAUvB;IAEO,MAAM;CAwFhB"}
+{"version":3,"file":"tree-item.d.ts","sourceRoot":"","sources":["../../../src/html/elements/tree-item/tree-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE3D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAO1D;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,qBAAa,QAAS,SAAQ,YAAY;IACxC,OAAgB,MAAM,4BAAwB;IAE9C,OAAO,CAAC,UAAU,CAA0B;IAC5C,OAAO,CAAC,cAAc,CAAC,CAAmB;IAE1C,oCAAoC;IAEpC,QAAQ,CAAC,QAAQ,UAAS;IAE1B,oCAAoC;IAEpC,QAAQ,CAAC,QAAQ,UAAS;IAE1B,yEAAyE;IAEzE,QAAQ,CAAC,aAAa,UAAS;IAE/B,oCAAoC;IAEpC,QAAQ,CAAC,QAAQ,UAAS;IAE1B,8EAA8E;IAE9E,QAAQ,CAAC,IAAI,UAAS;IAEtB,+DAA+D;IAE/D,QAAQ,CAAC,OAAO,UAAS;IAEzB,sDAAsD;IACtD,IAAI,YAAY,CAAC,KAAK,EAAE,OAAO,EAG9B;IACD,IAAI,YAAY,IAAI,OAAO,CAE1B;IACD,OAAO,CAAC,aAAa,CAAS;IAE9B,mEAAmE;IACnE,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAGtB;IACD,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,OAAO,CAAC,MAAM,CAAK;IAEnB,uDAAuD;IACvD,IAAI,WAAW,IAAI,OAAO,CAEzB;IACD,OAAO,CAAC,YAAY,CAAS;IAE7B,0EAA0E;IAC1E,gBAAgB,CAAC,EAAE,eAAsB,EAAE;;KAAK,GAAG,QAAQ,EAAE;IAO7D,4DAA4D;IAC5D,MAAM,IAAI,OAAO;IAIjB,2CAA2C;IAC3C,YAAY,IAAI,MAAM;IAUb,iBAAiB;IAQjB,oBAAoB;IAKpB,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAe9C,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,aAAa;IAmBrB,+EAA+E;IAC/E,MAAM;IASN,OAAO,CAAC,iBAAiB,CAUvB;IAEO,MAAM;CAwFhB"}

package/dist/elements/tree-item/tree-item.js

@@ -15,7 +15,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _LuxenTreeItem_expanded_accessor_storage, _LuxenTreeItem_selected_accessor_storage, _LuxenTreeItem_indeterminate_accessor_storage, _LuxenTreeItem_disabled_accessor_storage, _LuxenTreeItem_lazy_accessor_storage, _LuxenTreeItem_loading_accessor_storage;
+var _TreeItem_expanded_accessor_storage, _TreeItem_selected_accessor_storage, _TreeItem_indeterminate_accessor_storage, _TreeItem_disabled_accessor_storage, _TreeItem_lazy_accessor_storage, _TreeItem_loading_accessor_storage;
 import { html, unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';
 import { LuxenElement } from '../../shared/luxen-element';
@@ -49,16 +49,16 @@ const styles = unsafeCSS(rawStyles);
  * @event collapse - Fired when the item is collapsed.
  * @event lazy-load - Fired when a lazy item is expanded for the first time. Consumers should append children and set `lazy=false`.
  */
-export class LuxenTreeItem extends LuxenElement {
+export class TreeItem extends LuxenElement {
     constructor() {
         super(...arguments);
         this._internals = this.attachInternals();
-        _LuxenTreeItem_expanded_accessor_storage.set(this, false);
-        _LuxenTreeItem_selected_accessor_storage.set(this, false);
-        _LuxenTreeItem_indeterminate_accessor_storage.set(this, false);
-        _LuxenTreeItem_disabled_accessor_storage.set(this, false);
-        _LuxenTreeItem_lazy_accessor_storage.set(this, false);
-        _LuxenTreeItem_loading_accessor_storage.set(this, false);
+        _TreeItem_expanded_accessor_storage.set(this, false);
+        _TreeItem_selected_accessor_storage.set(this, false);
+        _TreeItem_indeterminate_accessor_storage.set(this, false);
+        _TreeItem_disabled_accessor_storage.set(this, false);
+        _TreeItem_lazy_accessor_storage.set(this, false);
+        _TreeItem_loading_accessor_storage.set(this, false);
         this._showCheckbox = false;
         this._depth = 0;
         this._hasChildren = false;
@@ -73,23 +73,23 @@ export class LuxenTreeItem extends LuxenElement {
         };
     }
     /** Whether the item is expanded. */
-    get expanded() { return __classPrivateFieldGet(this, _LuxenTreeItem_expanded_accessor_storage, "f"); }
-    set expanded(value) { __classPrivateFieldSet(this, _LuxenTreeItem_expanded_accessor_storage, value, "f"); }
+    get expanded() { return __classPrivateFieldGet(this, _TreeItem_expanded_accessor_storage, "f"); }
+    set expanded(value) { __classPrivateFieldSet(this, _TreeItem_expanded_accessor_storage, value, "f"); }
     /** Whether the item is selected. */
-    get selected() { return __classPrivateFieldGet(this, _LuxenTreeItem_selected_accessor_storage, "f"); }
-    set selected(value) { __classPrivateFieldSet(this, _LuxenTreeItem_selected_accessor_storage, value, "f"); }
+    get selected() { return __classPrivateFieldGet(this, _TreeItem_selected_accessor_storage, "f"); }
+    set selected(value) { __classPrivateFieldSet(this, _TreeItem_selected_accessor_storage, value, "f"); }
     /** Whether the checkbox is indeterminate (some descendants selected). */
-    get indeterminate() { return __classPrivateFieldGet(this, _LuxenTreeItem_indeterminate_accessor_storage, "f"); }
-    set indeterminate(value) { __classPrivateFieldSet(this, _LuxenTreeItem_indeterminate_accessor_storage, value, "f"); }
+    get indeterminate() { return __classPrivateFieldGet(this, _TreeItem_indeterminate_accessor_storage, "f"); }
+    set indeterminate(value) { __classPrivateFieldSet(this, _TreeItem_indeterminate_accessor_storage, value, "f"); }
     /** Whether the item is disabled. */
-    get disabled() { return __classPrivateFieldGet(this, _LuxenTreeItem_disabled_accessor_storage, "f"); }
-    set disabled(value) { __classPrivateFieldSet(this, _LuxenTreeItem_disabled_accessor_storage, value, "f"); }
+    get disabled() { return __classPrivateFieldGet(this, _TreeItem_disabled_accessor_storage, "f"); }
+    set disabled(value) { __classPrivateFieldSet(this, _TreeItem_disabled_accessor_storage, value, "f"); }
     /** Marks this item as having children that will be loaded on first expand. */
-    get lazy() { return __classPrivateFieldGet(this, _LuxenTreeItem_lazy_accessor_storage, "f"); }
-    set lazy(value) { __classPrivateFieldSet(this, _LuxenTreeItem_lazy_accessor_storage, value, "f"); }
+    get lazy() { return __classPrivateFieldGet(this, _TreeItem_lazy_accessor_storage, "f"); }
+    set lazy(value) { __classPrivateFieldSet(this, _TreeItem_lazy_accessor_storage, value, "f"); }
     /** Whether the item is currently loading (shows a spinner). */
-    get loading() { return __classPrivateFieldGet(this, _LuxenTreeItem_loading_accessor_storage, "f"); }
-    set loading(value) { __classPrivateFieldSet(this, _LuxenTreeItem_loading_accessor_storage, value, "f"); }
+    get loading() { return __classPrivateFieldGet(this, _TreeItem_loading_accessor_storage, "f"); }
+    set loading(value) { __classPrivateFieldSet(this, _TreeItem_loading_accessor_storage, value, "f"); }
     /** Set by `<l-tree>`: whether a checkbox is shown. */
     set showCheckbox(value) {
         this._showCheckbox = value;
@@ -279,23 +279,23 @@ export class LuxenTreeItem extends LuxenElement {
     `;
     }
 }
-_LuxenTreeItem_expanded_accessor_storage = new WeakMap(), _LuxenTreeItem_selected_accessor_storage = new WeakMap(), _LuxenTreeItem_indeterminate_accessor_storage = new WeakMap(), _LuxenTreeItem_disabled_accessor_storage = new WeakMap(), _LuxenTreeItem_lazy_accessor_storage = new WeakMap(), _LuxenTreeItem_loading_accessor_storage = new WeakMap();
-LuxenTreeItem.styles = [hostStyles, styles];
+_TreeItem_expanded_accessor_storage = new WeakMap(), _TreeItem_selected_accessor_storage = new WeakMap(), _TreeItem_indeterminate_accessor_storage = new WeakMap(), _TreeItem_disabled_accessor_storage = new WeakMap(), _TreeItem_lazy_accessor_storage = new WeakMap(), _TreeItem_loading_accessor_storage = new WeakMap();
+TreeItem.styles = [hostStyles, styles];
 __decorate([
     property({ type: Boolean, reflect: true })
-], LuxenTreeItem.prototype, "expanded", null);
+], TreeItem.prototype, "expanded", null);
 __decorate([
     property({ type: Boolean, reflect: true })
-], LuxenTreeItem.prototype, "selected", null);
+], TreeItem.prototype, "selected", null);
 __decorate([
     property({ type: Boolean, reflect: true })
-], LuxenTreeItem.prototype, "indeterminate", null);
+], TreeItem.prototype, "indeterminate", null);
 __decorate([
     property({ type: Boolean, reflect: true })
-], LuxenTreeItem.prototype, "disabled", null);
+], TreeItem.prototype, "disabled", null);
 __decorate([
     property({ type: Boolean, reflect: true })
-], LuxenTreeItem.prototype, "lazy", null);
+], TreeItem.prototype, "lazy", null);
 __decorate([
     property({ type: Boolean, reflect: true })
-], LuxenTreeItem.prototype, "loading", null);
+], TreeItem.prototype, "loading", null);

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' | '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' | '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,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,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"}

package/dist/skills/luxen-ui/SKILL.md

@@ -46,6 +46,7 @@ import 'luxen-ui';
 | Drawer | Custom element | `<l-drawer>` | [references/drawer.md](references/drawer.md) |
 | Select | CSS class | `.l-select` | [references/select.md](references/select.md) |
 | Progress | CSS class | `.l-progress` | [references/progress.md](references/progress.md) |
+| Sticky bar | Custom element | `<l-sticky-bar>` | [references/sticky-bar.md](references/sticky-bar.md) |
 | Toast | Custom element | `<l-toast>` | [references/toast.md](references/toast.md) |
 | Tree | Custom element | `<l-tree>` | [references/tree.md](references/tree.md) |
 

package/dist/skills/luxen-ui/references/sticky-bar.md

@@ -0,0 +1,148 @@
+---
+outline: deep
+---
+
+<style scoped>
+.phone-deck {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24px;
+  justify-content: center;
+  padding: 24px 0;
+}
+.phone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+.phone .label {
+  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
+  font-size: 11px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--vp-c-text-2);
+}
+.phone iframe {
+  width: 340px;
+  height: 640px;
+  border: 10px solid #18181b;
+  border-radius: 40px;
+  background: var(--vp-c-bg);
+  box-shadow: 0 24px 48px -12px rgb(0 0 0 / 0.25);
+}
+</style>
+
+# Sticky Bar
+
+A bar docked to the viewport edge, painted in the document's **top layer**. Pass `for="<id>"` to track an element; the bar reveals when that element scrolls out of view (e.g. an Add to cart button on a mobile product page). Omit `for` for a permanently visible bar.
+
+Common use cases: mobile product Add to cart, sticky save action on long forms, post-form newsletter signup, cookie banners, environment indicators, promo announcements.
+
+<ElementSpec
+  tag="l-sticky-bar"
+  type="shadow"
+/>
+
+## Examples
+
+### Mobile product page
+
+The canonical use: an Add to cart CTA stays reachable while the customer scrolls product details. Each iframe below is its own document — the sticky bar paints in its top layer and `IntersectionObserver` resolves against the iframe's viewport, so production behavior is faithfully simulated.
+
+Both demos start with the bar **revealed** (the Add to cart button sits below the fold). Scroll inside a phone to bring the button into view — the bar hides. Keep scrolling past the button — the bar reveals again.
+
+<div class="phone-deck">
+  <div class="phone">
+    <span class="label">placement="bottom"</span>
+    <iframe src="/previews/sticky-bar-mobile-bottom.html" title="Sticky bar — bottom placement"></iframe>
+  </div>
+  <div class="phone">
+    <span class="label">placement="top"</span>
+    <iframe src="/previews/sticky-bar-mobile-top.html" title="Sticky bar — top placement"></iframe>
+  </div>
+</div>
+
+> The top phone uses `style="--offset: var(--header-height)"` to dock under the in-page sticky header — `--header-height` is defined once at `:root` and shared between the header's `height` and the bar's offset, so they stay in sync.
+
+```html
+<button
+  id="add-to-cart"
+  class="l-button"
+  data-variant="primary"
+>
+  Add to cart — €42
+</button>
+
+<l-sticky-bar for="add-to-cart">
+  <div
+    class="flex items-center justify-between gap-3 border-t border-[var(--l-color-divider)] bg-white px-4 py-3 dark:bg-zinc-900"
+  >
+    <span class="text-sm font-semibold text-primary">Magic Mouse — €42</span>
+    <button
+      class="l-button"
+      data-variant="primary"
+      data-size="sm"
+    >
+      Add to cart
+    </button>
+  </div>
+</l-sticky-bar>
+```
+
+## Accessibility
+
+The element is a positioning shell — it adds no role of its own. Slotted content keeps its native semantics: a `<button>` stays a button, a `<form>` stays a form, links remain in the focus order.
+
+| Check | Description |
+|-------|-------------|
+| Motion | Respects `prefers-reduced-motion` — the slide animation collapses to instant |
+| Focus order | Slotted content stays in the natural focus order. Do not focus-trap inside the bar — it is not a dialog |
+| Contrast | The bar inherits text and background from slotted content — apply your own contrast tokens |
+
+### Rules
+- Keep the bar action self-explanatory (e.g. duplicate the in-page button label, do not introduce a new verb)
+- Use `--offset` to clear a sticky header when `placement="top"` to avoid overlap
+- Do not nest live regions or modal-like behavior inside the bar
+
+## API reference
+
+### Importing
+
+```js
+import 'luxen-ui/sticky-bar';
+```
+
+### Attributes & Properties
+
+<ApiTable :data="[
+  { Attribute: 'for', Description: 'HTML id of the element to track. The bar reveals when it leaves the viewport. Omit for a permanently visible bar' },
+  { Attribute: 'placement', Description: '`bottom` (default) or `top`. Edge to dock against' },
+  { Attribute: 'root', Description: 'HTML id of the scrolling ancestor used as the IntersectionObserver root. Omit to use the viewport. Useful for nested scroll containers' },
+]" />
+
+### Events
+
+<ApiTable :data="[
+  { Event: 'show', Description: 'Fired before the bar reveals. Cancelable' },
+  { Event: 'after-show', Description: 'Fired after the reveal animation completes' },
+  { Event: 'hide', Description: 'Fired before the bar hides. Cancelable' },
+  { Event: 'after-hide', Description: 'Fired after the hide animation completes' },
+]" />
+
+### Slots
+
+<ApiTable :data="[
+  { Slot: '(default)', Description: 'Bar content. Owns its own background, padding, and typography' },
+]" />
+
+### CSS custom properties
+
+<ApiTable :data="[
+  { Name: '--show-duration', Description: 'Reveal animation duration. Default `200ms`' },
+  { Name: '--hide-duration', Description: 'Dismiss animation duration. Default `200ms`' },
+  { Name: '--offset', Description: 'Distance from the active edge. Default `0px`. Use to clear a sticky header when `placement=&quot;top&quot;`' },
+]" />
+
+> **Top layer.** The bar uses `popover="manual"` internally, so it paints in the document's top layer — `z-index` is not needed and would be ignored. Target `l-sticky-bar:popover-open` to style the revealed state.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "luxen-ui",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Modern web components and CSS-first UI library built with Lit. Framework-agnostic, customizable prefix, design tokens.",
   "keywords": [
     "custom-elements",
@@ -101,13 +101,13 @@
     "css-extras": "^0.4.0",
     "http-server": "^14.1.1",
     "playwright": "^1.59.1",
-    "postcss": "^8.5.10",
+    "postcss": "^8.5.14",
     "postcss-import": "^16.1.1",
     "tinyglobby": "^0.2.16",
     "typescript": "^6.0.3",
     "vite": "^8.0.10",
-    "vite-plugin-dts": "^4.5.4",
-    "vite-plus": "^0.1.19"
+    "vite-plugin-dts": "^5.0.0",
+    "vite-plus": "^0.1.20"
   },
   "customElements": "dist/custom-elements.json",
   "scripts": {