luxen-ui 0.4.0 → 0.6.0

package/dist/elements/tree/index.js

@@ -1,4 +1,4 @@
-import { define } from '../../define';
-import { LuxenTree } from './tree';
-export * from './tree';
-define('tree', LuxenTree);
+import { define } from '../../define.js';
+import { Tree } from './tree.js';
+export * from './tree.js';
+define('tree', Tree);

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

@@ -1,6 +1,6 @@
 import { type PropertyValues } from 'lit';
-import { LuxenElement } from '../../shared/luxen-element';
-import type { LuxenTreeItem } from '../tree-item/tree-item';
+import { LuxenElement } from '../../shared/luxen-element.js';
+import type { TreeItem } from '../tree-item/tree-item.js';
 export type TreeSelection = 'single' | 'multiple' | 'leaf' | 'none';
 /**
  * A hierarchical tree view composed of `<l-tree-item>` children.
@@ -18,9 +18,9 @@ export type TreeSelection = 'single' | 'multiple' | 'leaf' | 'none';
  * @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 declare class LuxenTree extends LuxenElement {
+export declare class Tree extends LuxenElement {
     static styles: import("lit").CSSResult[];
     private _mutationObserver?;
     private _lastFocusedItem;
@@ -44,9 +44,9 @@ export declare class LuxenTree extends LuxenElement {
     /** Returns all items in document (flat) order, including nested ones. */
     getAllItems({ includeDisabled }?: {
         includeDisabled?: boolean | undefined;
-    }): LuxenTreeItem[];
+    }): TreeItem[];
     /** Returns currently selected items. */
-    getSelection(): LuxenTreeItem[];
+    getSelection(): TreeItem[];
     /** Expands every item that has children. */
     expandAll(): void;
     /** Collapses every item. */

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

@@ -1 +1 @@
-{"version":3,"file":"tree.d.ts","sourceRoot":"","sources":["../../../src/html/elements/tree/tree.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE3D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAM5D,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AAEpE;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAAa,SAAU,SAAQ,YAAY;IACzC,OAAgB,MAAM,4BAAwB;IAE9C,OAAO,CAAC,iBAAiB,CAAC,CAAmB;IAC7C,OAAO,CAAC,gBAAgB,CAA8B;IAEtD;;;;;;OAMG;IAEH,QAAQ,CAAC,SAAS,EAAE,aAAa,CAAY;IAE7C;;;;OAIG;IAEH,QAAQ,CAAC,WAAW,UAAS;IAEpB,iBAAiB;IAUjB,oBAAoB;IAMpB,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAQ9C,yEAAyE;IACzE,WAAW,CAAC,EAAE,eAAsB,EAAE;;KAAK,GAAG,aAAa,EAAE;IAO7D,wCAAwC;IACxC,YAAY,IAAI,aAAa,EAAE;IAI/B,4CAA4C;IAC5C,SAAS;IAMT,4BAA4B;IAC5B,WAAW;IAQX,OAAO,CAAC,QAAQ;IAWhB,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,cAAc;IAUtB,2DAA2D;IAC3D,OAAO,CAAC,aAAa;IAcrB,OAAO,CAAC,aAAa,CAGnB;IAEF,OAAO,CAAC,kBAAkB;IAoB1B,OAAO,CAAC,mBAAmB;IAQ3B,OAAO,CAAC,WAAW;IAcnB,OAAO,CAAC,oBAAoB;IAS5B,0EAA0E;IAC1E,OAAO,CAAC,mBAAmB;IA6B3B,OAAO,CAAC,oBAAoB;IAM5B,OAAO,CAAC,QAAQ,CAqDd;IAEF,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,UAAU,CAMhB;IAEF,OAAO,CAAC,UAAU,CAyEhB;IAEO,MAAM;CAehB"}
+{"version":3,"file":"tree.d.ts","sourceRoot":"","sources":["../../../src/html/elements/tree/tree.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE3D,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAE7D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAM1D,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AAEpE;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAAa,IAAK,SAAQ,YAAY;IACpC,OAAgB,MAAM,4BAAwB;IAE9C,OAAO,CAAC,iBAAiB,CAAC,CAAmB;IAC7C,OAAO,CAAC,gBAAgB,CAAyB;IAEjD;;;;;;OAMG;IAEH,QAAQ,CAAC,SAAS,EAAE,aAAa,CAAY;IAE7C;;;;OAIG;IAEH,QAAQ,CAAC,WAAW,UAAS;IAEpB,iBAAiB;IAUjB,oBAAoB;IAMpB,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAQ9C,yEAAyE;IACzE,WAAW,CAAC,EAAE,eAAsB,EAAE;;KAAK,GAAG,QAAQ,EAAE;IAOxD,wCAAwC;IACxC,YAAY,IAAI,QAAQ,EAAE;IAI1B,4CAA4C;IAC5C,SAAS;IAMT,4BAA4B;IAC5B,WAAW;IAQX,OAAO,CAAC,QAAQ;IAWhB,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,cAAc;IAUtB,2DAA2D;IAC3D,OAAO,CAAC,aAAa;IAcrB,OAAO,CAAC,aAAa,CAGnB;IAEF,OAAO,CAAC,kBAAkB;IAoB1B,OAAO,CAAC,mBAAmB;IAQ3B,OAAO,CAAC,WAAW;IAcnB,OAAO,CAAC,oBAAoB;IAS5B,0EAA0E;IAC1E,OAAO,CAAC,mBAAmB;IA6B3B,OAAO,CAAC,oBAAoB;IAM5B,OAAO,CAAC,QAAQ,CAqDd;IAEF,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,UAAU,CAMhB;IAEF,OAAO,CAAC,UAAU,CAqEhB;IAEO,MAAM;CAehB"}

package/dist/elements/tree/tree.js

@@ -15,12 +15,12 @@ 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';
-import { tagName } from '../../registry';
-import hostStyles from '../../shared/styles/host.styles';
+import { LuxenElement } from '../../shared/luxen-element.js';
+import { tagName } from '../../registry.js';
+import hostStyles from '../../shared/styles/host.styles.js';
 import rawStyles from './tree.css?inline';
 const styles = unsafeCSS(rawStyles);
 /**
@@ -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,2 @@
-import { LuxenTreeItem } from './tree-item';
-export * from './tree-item';
-declare global {
-    interface HTMLElementTagNameMap {
-        'l-tree-item': LuxenTreeItem;
-    }
-}
+export * from './tree-item.js';
 //# 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":"AAEA,cAAc,gBAAgB,CAAC"}

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

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

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

@@ -1,5 +1,5 @@
 import { type PropertyValues } from 'lit';
-import { LuxenElement } from '../../shared/luxen-element';
+import { LuxenElement } from '../../shared/luxen-element.js';
 /**
  * A node inside `<l-tree>`. Nested `<l-tree-item>` children become sub-nodes.
  *
@@ -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,+BAA+B,CAAC;AAO7D;;;;;;;;;;;;;;;;;;;;;;;;;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,12 +15,12 @@ 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';
-import { tagName } from '../../registry';
-import hostStyles from '../../shared/styles/host.styles';
+import { LuxenElement } from '../../shared/luxen-element.js';
+import { tagName } from '../../registry.js';
+import hostStyles from '../../shared/styles/host.styles.js';
 import rawStyles from './tree-item.css?inline';
 const styles = unsafeCSS(rawStyles);
 /**
@@ -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/index.d.ts

@@ -1,6 +1,8 @@
-export { LuxenElement } from './shared/luxen-element';
-export { LuxenFormAssociatedElement } from './shared/luxen-form-associated-element';
-export { define } from './define';
-export { setPrefix, getPrefix, tagName, cls } from './registry';
-export type { ElementBaseName } from './registry';
+export { LuxenElement } from './shared/luxen-element.js';
+export { LuxenFormAssociatedElement } from './shared/luxen-form-associated-element.js';
+export { define } from './define.js';
+export { setPrefix, getPrefix, tagName, cls } from './registry.js';
+export type { ElementBaseName } from './registry.js';
+export { defineConfig } from './config.js';
+export type { LuxenConfig, LuxenEmitTypesConfig } from './config.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/html/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,0BAA0B,EAAE,MAAM,wCAAwC,CAAC;AACpF,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC;AAChE,YAAY,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/html/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,0BAA0B,EAAE,MAAM,2CAA2C,CAAC;AACvF,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACnE,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,YAAY,EAAE,WAAW,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC"}

package/dist/index.js

@@ -1,4 +1,5 @@
-export { LuxenElement } from './shared/luxen-element';
-export { LuxenFormAssociatedElement } from './shared/luxen-form-associated-element';
-export { define } from './define';
-export { setPrefix, getPrefix, tagName, cls } from './registry';
+export { LuxenElement } from './shared/luxen-element.js';
+export { LuxenFormAssociatedElement } from './shared/luxen-form-associated-element.js';
+export { define } from './define.js';
+export { setPrefix, getPrefix, tagName, cls } from './registry.js';
+export { defineConfig } from './config.js';

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/shared/luxen-form-associated-element.d.ts

@@ -1,4 +1,4 @@
-import { LuxenElement } from './luxen-element';
+import { LuxenElement } from './luxen-element.js';
 /**
  * Base class for form-associated Luxen custom elements.
  * Implements the Form Associated Custom Elements API via ElementInternals.

package/dist/shared/luxen-form-associated-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"luxen-form-associated-element.d.ts","sourceRoot":"","sources":["../../src/html/shared/luxen-form-associated-element.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C;;;;;;GAMG;AACH,qBAAa,0BAA2B,SAAQ,YAAY;IAC1D,MAAM,CAAC,cAAc,UAAQ;IAE7B,gBAAgB;IAChB,QAAQ,CAAC,UAAU,EAAE,gBAAgB,CAAC;IAGtC,IAAI,SAAM;IAGV,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAEjB,gEAAgE;IAChE,SAAS,CAAC,iBAAiB,SAAM;IAEjC,yDAAyD;IACzD,aAAa,UAAS;;IAOtB,gDAAgD;IAChD,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;IAED,2EAA2E;IAC3E,IAAI,UAAU,IAAI,QAAQ,CAEzB;IAED;;;OAGG;IACH,IAAI,gBAAgB,IAAI,WAAW,GAAG,SAAS,CAE9C;IAID,wCAAwC;IACxC,SAAS,CAAC,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAM7C,aAAa,IAAI,OAAO;IAIxB,cAAc,IAAI,OAAO;IAMzB,yDAAyD;IACzD,iBAAiB,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IASxC,mEAAmE;IACnE,SAAS,CAAC,WAAW,CAAC,KAAK,GAAE,kBAAuB,EAAE,OAAO,SAAK,EAAE,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI;IAK/F,IAAI,QAAQ,IAAI,aAAa,CAE5B;IAED,IAAI,iBAAiB,IAAI,MAAM,CAE9B;IAED,IAAI,YAAY,IAAI,OAAO,CAE1B;IAED,iFAAiF;IACjF,OAAO,CAAC,mBAAmB;IAY3B,OAAO,CAAC,YAAY;IAUpB,sBAAsB,CAAC,KAAK,EAAE,eAAe,GAAG,IAAI,GAAG,IAAI;IAE3D,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAI7C,iBAAiB,IAAI,IAAI;IAMzB,wBAAwB,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,GAAG,cAAc,GAAG,IAAI;CAGjF"}
+{"version":3,"file":"luxen-form-associated-element.d.ts","sourceRoot":"","sources":["../../src/html/shared/luxen-form-associated-element.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD;;;;;;GAMG;AACH,qBAAa,0BAA2B,SAAQ,YAAY;IAC1D,MAAM,CAAC,cAAc,UAAQ;IAE7B,gBAAgB;IAChB,QAAQ,CAAC,UAAU,EAAE,gBAAgB,CAAC;IAGtC,IAAI,SAAM;IAGV,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAEjB,gEAAgE;IAChE,SAAS,CAAC,iBAAiB,SAAM;IAEjC,yDAAyD;IACzD,aAAa,UAAS;;IAOtB,gDAAgD;IAChD,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;IAED,2EAA2E;IAC3E,IAAI,UAAU,IAAI,QAAQ,CAEzB;IAED;;;OAGG;IACH,IAAI,gBAAgB,IAAI,WAAW,GAAG,SAAS,CAE9C;IAID,wCAAwC;IACxC,SAAS,CAAC,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAM7C,aAAa,IAAI,OAAO;IAIxB,cAAc,IAAI,OAAO;IAMzB,yDAAyD;IACzD,iBAAiB,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IASxC,mEAAmE;IACnE,SAAS,CAAC,WAAW,CAAC,KAAK,GAAE,kBAAuB,EAAE,OAAO,SAAK,EAAE,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI;IAK/F,IAAI,QAAQ,IAAI,aAAa,CAE5B;IAED,IAAI,iBAAiB,IAAI,MAAM,CAE9B;IAED,IAAI,YAAY,IAAI,OAAO,CAE1B;IAED,iFAAiF;IACjF,OAAO,CAAC,mBAAmB;IAY3B,OAAO,CAAC,YAAY;IAUpB,sBAAsB,CAAC,KAAK,EAAE,eAAe,GAAG,IAAI,GAAG,IAAI;IAE3D,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAI7C,iBAAiB,IAAI,IAAI;IAMzB,wBAAwB,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,GAAG,cAAc,GAAG,IAAI;CAGjF"}

package/dist/shared/luxen-form-associated-element.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { property } from 'lit/decorators.js';
-import { LuxenElement } from './luxen-element';
+import { LuxenElement } from './luxen-element.js';
 /**
  * Base class for form-associated Luxen custom elements.
  * Implements the Form Associated Custom Elements API via ElementInternals.

package/dist/{skills/luxen-ui/references → templates/elements}/badge.md

@@ -20,7 +20,7 @@ Add `appearance="filled"` (tinted background, no border), `appearance="filled-ou
 ```html
 <div class="flex flex-col gap-3">
   <div class="flex flex-wrap items-center gap-2">
-    <span class="text-sm text-color-tertiary w-28">Outlined</span>
+    <span class="text-sm text-tertiary w-28">Outlined</span>
     <l-badge>Default</l-badge>
     <l-badge variant="info">Info</l-badge>
     <l-badge variant="success">Success</l-badge>
@@ -28,7 +28,7 @@ Add `appearance="filled"` (tinted background, no border), `appearance="filled-ou
     <l-badge variant="danger">Danger</l-badge>
   </div>
   <div class="flex flex-wrap items-center gap-2">
-    <span class="text-sm text-color-tertiary w-28">Filled</span>
+    <span class="text-sm text-tertiary w-28">Filled</span>
     <l-badge appearance="filled">Default</l-badge>
     <l-badge
       appearance="filled"
@@ -52,7 +52,7 @@ Add `appearance="filled"` (tinted background, no border), `appearance="filled-ou
     >
   </div>
   <div class="flex flex-wrap items-center gap-2">
-    <span class="text-sm text-color-tertiary w-28">Filled outlined</span>
+    <span class="text-sm text-tertiary w-28">Filled outlined</span>
     <l-badge appearance="filled-outlined">Default</l-badge>
     <l-badge
       appearance="filled-outlined"
@@ -76,7 +76,7 @@ Add `appearance="filled"` (tinted background, no border), `appearance="filled-ou
     >
   </div>
   <div class="flex flex-wrap items-center gap-2">
-    <span class="text-sm text-color-tertiary w-28">Accent</span>
+    <span class="text-sm text-tertiary w-28">Accent</span>
     <l-badge appearance="accent">Default</l-badge>
     <l-badge
       appearance="accent"
@@ -109,7 +109,7 @@ Add the `pill` attribute for a fully rounded shape.
 ```html
 <div class="flex flex-col gap-3">
   <div class="flex flex-wrap items-center gap-2">
-    <span class="text-sm text-color-tertiary w-28">Outlined</span>
+    <span class="text-sm text-tertiary w-28">Outlined</span>
     <l-badge pill>Default</l-badge>
     <l-badge
       pill
@@ -133,7 +133,7 @@ Add the `pill` attribute for a fully rounded shape.
     >
   </div>
   <div class="flex flex-wrap items-center gap-2">
-    <span class="text-sm text-color-tertiary w-28">Filled</span>
+    <span class="text-sm text-tertiary w-28">Filled</span>
     <l-badge
       pill
       appearance="filled"
@@ -165,7 +165,7 @@ Add the `pill` attribute for a fully rounded shape.
     >
   </div>
   <div class="flex flex-wrap items-center gap-2">
-    <span class="text-sm text-color-tertiary w-28">Filled outlined</span>
+    <span class="text-sm text-tertiary w-28">Filled outlined</span>
     <l-badge
       pill
       appearance="filled-outlined"
@@ -197,7 +197,7 @@ Add the `pill` attribute for a fully rounded shape.
     >
   </div>
   <div class="flex flex-wrap items-center gap-2">
-    <span class="text-sm text-color-tertiary w-28">Accent</span>
+    <span class="text-sm text-tertiary w-28">Accent</span>
     <l-badge
       pill
       appearance="accent"

package/dist/{skills/luxen-ui/references → templates/elements}/button.md

@@ -302,7 +302,7 @@ Add an `<l-spinner>` inside the button. The spinner inherits the button's text c
   { Name: '--background-color-hover', Description: 'Background on hover' },
   { Name: '--background-color-active', Description: 'Background on press' },
   { Name: '--text-color', Description: 'Text color' },
-  { Name: '--text-color-hover', Description: 'Text color on hover' },
+  { Name: '--text-hover', Description: 'Text color on hover' },
   { Name: '--border-color', Description: 'Border color' },
   { Name: '--border-color-hover', Description: 'Border color on hover' },
   { Name: '--font-size', Description: 'Font size' },

package/dist/templates/elements/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.