luxen-ui 0.6.2 → 0.8.0

package/dist/elements/stories-viewer/stories-viewer.js

@@ -4,10 +4,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html, nothing, unsafeCSS } from 'lit';
+import { nothing, unsafeCSS } from 'lit';
+import { html } from 'lit/static-html.js';
 import { property, query, state } from 'lit/decorators.js';
 import { map } from 'lit/directives/map.js';
 import { LuxenElement } from '../../shared/luxen-element.js';
+import { staticTag } from '../../static-tag.js';
 import hostStyles from '../../shared/styles/host.styles.js';
 import rawStyles from './stories-viewer.css?inline';
 const styles = unsafeCSS(rawStyles);
@@ -509,6 +511,8 @@ export class LuxenStoriesViewer extends LuxenElement {
         const chapterStarts = this._chapterStarts.length
             ? this._chapterStarts
             : (currentStory?.getChapterStarts() ?? [0]);
+        const iconTag = staticTag('icon');
+        const spinnerTag = staticTag('spinner');
         return html `
       <dialog
         part="dialog"
@@ -551,20 +555,20 @@ export class LuxenStoriesViewer extends LuxenElement {
             <slot name="header">
               ${currentStory?.poster
             ? html `<img
-                    class="header-thumb"
-                    src=${currentStory.poster}
-                    alt=""
-                  />`
+                      class="header-thumb"
+                      src=${currentStory.poster}
+                      alt=""
+                    />`
             : nothing}
               ${currentStory?.label
             ? html `<div class="header-text">
-                    <div
-                      part="header-label"
-                      class="header-label"
-                    >
-                      ${currentStory.label}
-                    </div>
-                  </div>`
+                      <div
+                        part="header-label"
+                        class="header-label"
+                      >
+                        ${currentStory.label}
+                      </div>
+                    </div>`
             : nothing}
             </slot>
           </header>
@@ -582,7 +586,7 @@ export class LuxenStoriesViewer extends LuxenElement {
                 aria-label="Close"
                 @click=${() => this.close()}
               >
-                <l-icon name="mdi:close"></l-icon>
+                <${iconTag} name="mdi:close"></${iconTag}>
               </button>
             </slot>
             <button
@@ -593,7 +597,7 @@ export class LuxenStoriesViewer extends LuxenElement {
               aria-pressed=${this._paused ? 'true' : 'false'}
               @click=${() => (this._paused ? this.play() : this.pause())}
             >
-              <l-icon name=${this._paused ? 'mdi:play' : 'mdi:pause'}></l-icon>
+              <${iconTag} name=${this._paused ? 'mdi:play' : 'mdi:pause'}></${iconTag}>
             </button>
             <button
               type="button"
@@ -606,7 +610,7 @@ export class LuxenStoriesViewer extends LuxenElement {
             this.emit('mute-change', { detail: { muted: this.muted } });
         }}
             >
-              <l-icon name=${this.muted ? 'mdi:volume-off' : 'mdi:volume-high'}></l-icon>
+              <${iconTag} name=${this.muted ? 'mdi:volume-off' : 'mdi:volume-high'}></${iconTag}>
             </button>
           </div>
 
@@ -618,13 +622,13 @@ export class LuxenStoriesViewer extends LuxenElement {
             ?muted=${this.muted}
           ></video>
 
-          <l-spinner
+          <${spinnerTag}
             part="spinner"
             class="spinner"
             aria-label="Loading"
             data-no-gesture
             data-state=${this._loading ? 'loading' : 'idle'}
-          ></l-spinner>
+          ></${spinnerTag}>
 
           <!-- Tap zones: invisible overlays that translate clicks into previous/next.
                Sit BELOW header / overlay / chevron buttons in z-order, above the video. -->
@@ -666,7 +670,7 @@ export class LuxenStoriesViewer extends LuxenElement {
               aria-label="Previous story"
               @click=${() => this.previousStory()}
             >
-              <l-icon name="mdi:chevron-left"></l-icon>
+              <${iconTag} name="mdi:chevron-left"></${iconTag}>
             </button>`}
         ${isLastStory
             ? nothing
@@ -677,7 +681,7 @@ export class LuxenStoriesViewer extends LuxenElement {
               aria-label="Next story"
               @click=${() => this.nextStory()}
             >
-              <l-icon name="mdi:chevron-right"></l-icon>
+              <${iconTag} name="mdi:chevron-right"></${iconTag}>
             </button>`}
       </dialog>
     `;

package/dist/elements/story/story.d.ts

@@ -9,6 +9,15 @@ import { LuxenElement } from '../../shared/luxen-element.js';
  * @slot cta - Overlay surfaced by the viewer when this story is active (e.g. product card, link).
  * @slot header - Header overlay (e.g. avatar + author).
  *
+ * @cssproperty --pulse-color - Color of the attention pulse ring (only with the `pulse` attribute).
+ * @cssproperty --pulse-scale - Peak scale of the pulse animation. Default `1.2`.
+ * @cssproperty --pulse-duration - Duration of one pulse cycle. Default `1.6s`.
+ *
+ * @cssClass .l-story-trigger - The clickable thumbnail button wrapper.
+ * @cssClass .l-story-thumb - The poster/video thumbnail frame (ring + offset).
+ * @cssClass .l-story-play - The centered play-icon overlay.
+ * @cssClass .l-story-label - The caption text below the thumbnail.
+ *
  * @customElement l-story
  */
 export declare class LuxenStory extends LuxenElement {
@@ -38,6 +47,6 @@ export declare class LuxenStory extends LuxenElement {
     connectedCallback(): void;
     updated(changed: Map<string, unknown>): void;
     disconnectedCallback(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit").TemplateResult;
 }
 //# sourceMappingURL=story.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"story.d.ts","sourceRoot":"","sources":["../../../src/html/elements/story/story.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAE7D;;;;;;;;;;;GAWG;AACH,qBAAa,UAAW,SAAQ,YAAY;IACjC,gBAAgB;IAIzB,iBAAiB;IAEjB,GAAG,SAAM;IAET,mEAAmE;IAEnE,MAAM,SAAM;IAEZ,0QAA0Q;IAE1Q,OAAO,SAAM;IAEb,qHAAqH;IAErH,KAAK,SAAM;IAEX,4FAA4F;IAE5F,QAAQ,SAAK;IAEb,iEAAiE;IAEjE,IAAI,UAAS;IAEb,mGAAmG;IAEnG,KAAK,UAAS;IAEd,oKAAoK;IAEpK,QAAQ,SAAM;IAEd,mDAAmD;IAEnD,MAAM,SAAM;IAEZ,gHAAgH;IAChH,gBAAgB,IAAI,MAAM,EAAE;IAWE,OAAO,CAAC,aAAa,CAAC,CAAmB;IAEvE,OAAO,CAAC,GAAG,CAAC,CAAuB;IAE1B,iBAAiB;IAOjB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAwBrC,oBAAoB;IAKpB,MAAM;CAwChB"}
+{"version":3,"file":"story.d.ts","sourceRoot":"","sources":["../../../src/html/elements/story/story.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAG7D;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBAAa,UAAW,SAAQ,YAAY;IACjC,gBAAgB;IAIzB,iBAAiB;IAEjB,GAAG,SAAM;IAET,mEAAmE;IAEnE,MAAM,SAAM;IAEZ,0QAA0Q;IAE1Q,OAAO,SAAM;IAEb,qHAAqH;IAErH,KAAK,SAAM;IAEX,4FAA4F;IAE5F,QAAQ,SAAK;IAEb,iEAAiE;IAEjE,IAAI,UAAS;IAEb,mGAAmG;IAEnG,KAAK,UAAS;IAEd,oKAAoK;IAEpK,QAAQ,SAAM;IAEd,mDAAmD;IAEnD,MAAM,SAAM;IAEZ,gHAAgH;IAChH,gBAAgB,IAAI,MAAM,EAAE;IAWE,OAAO,CAAC,aAAa,CAAC,CAAmB;IAEvE,OAAO,CAAC,GAAG,CAAC,CAAuB;IAE1B,iBAAiB;IAOjB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAwBrC,oBAAoB;IAKpB,MAAM;CA2ChB"}

package/dist/elements/story/story.js

@@ -4,9 +4,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html, nothing } from 'lit';
+import { nothing } from 'lit';
+import { html } from 'lit/static-html.js';
 import { property, query } from 'lit/decorators.js';
 import { LuxenElement } from '../../shared/luxen-element.js';
+import { staticTag } from '../../static-tag.js';
 /**
  * @summary A single story declaration inside an `<l-stories>` row.
  *
@@ -17,6 +19,15 @@ import { LuxenElement } from '../../shared/luxen-element.js';
  * @slot cta - Overlay surfaced by the viewer when this story is active (e.g. product card, link).
  * @slot header - Header overlay (e.g. avatar + author).
  *
+ * @cssproperty --pulse-color - Color of the attention pulse ring (only with the `pulse` attribute).
+ * @cssproperty --pulse-scale - Peak scale of the pulse animation. Default `1.2`.
+ * @cssproperty --pulse-duration - Duration of one pulse cycle. Default `1.6s`.
+ *
+ * @cssClass .l-story-trigger - The clickable thumbnail button wrapper.
+ * @cssClass .l-story-thumb - The poster/video thumbnail frame (ring + offset).
+ * @cssClass .l-story-play - The centered play-icon overlay.
+ * @cssClass .l-story-label - The caption text below the thumbnail.
+ *
  * @customElement l-story
  */
 export class LuxenStory extends LuxenElement {
@@ -89,6 +100,7 @@ export class LuxenStory extends LuxenElement {
         this._io = undefined;
     }
     render() {
+        const iconTag = staticTag('icon');
         return html `
       <button
         type="button"
@@ -99,29 +111,29 @@ export class LuxenStory extends LuxenElement {
         <span class="l-story-thumb">
           ${this.preview
             ? html `<video
-                data-preview
-                src=${this.preview}
-                poster=${this.poster || nothing}
-                muted
-                loop
-                playsinline
-                autoplay
-                preload="auto"
-                aria-hidden="true"
-              ></video>`
+                  data-preview
+                  src=${this.preview}
+                  poster=${this.poster || nothing}
+                  muted
+                  loop
+                  playsinline
+                  autoplay
+                  preload="auto"
+                  aria-hidden="true"
+                ></video>`
             : this.poster
                 ? html `<img
-                  src=${this.poster}
-                  alt=""
-                  loading="lazy"
-                  decoding="async"
-                />`
+                    src=${this.poster}
+                    alt=""
+                    loading="lazy"
+                    decoding="async"
+                  />`
                 : nothing}
           <span
             class="l-story-play"
             aria-hidden="true"
           >
-            <l-icon name="mdi:play"></l-icon>
+            <${iconTag} name="mdi:play"></${iconTag}>
           </span>
         </span>
         ${this.label ? html `<span class="l-story-label">${this.label}</span>` : nothing}

package/dist/elements/toast/toast.d.ts

@@ -42,6 +42,11 @@ export type ToastOptions = (ToastOptionsBase & {
  * @cssproperty --width - Width of the toast stack.
  * @cssproperty --show-duration - Duration of the show animation.
  * @cssproperty --hide-duration - Duration of the hide animation.
+ *
+ * @cssClass .l-toast-accent - The left accent bar, colored by variant.
+ * @cssClass .l-toast-icon - The leading icon, colored by variant (replaces the accent bar).
+ * @cssClass .l-toast-content - The content column wrapping the heading and message.
+ * @cssClass .l-toast-timer - The countdown progress bar (for timed toasts).
  */
 export declare class Toast extends LuxenElement {
     /** Use light DOM — no Shadow DOM. */

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

@@ -1 +1 @@
-{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/html/elements/toast/toast.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAI7D,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,OAAO;QACf,4EAA4E;QAC5E,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC;KACjE;CACF;AAED,yEAAyE;AACzE,qBAAa,SAAU,SAAQ,WAAW;CAAG;AAE7C,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAErE,MAAM,MAAM,cAAc,GACtB,WAAW,GACX,YAAY,GACZ,SAAS,GACT,cAAc,GACd,eAAe,GACf,YAAY,CAAC;AAEjB,UAAU,gBAAgB;IACxB,yDAAyD;IACzD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qDAAqD;IACrD,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wEAAwE;IACxE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,MAAM,YAAY,GACpB,CAAC,gBAAgB,GAAG;IAAsC,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC,GACvF,CAAC,gBAAgB,GAAG;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,sDAAsD,CAAC,IAAI,EAAE,MAAM,CAAC;CACrE,CAAC,CAAC;AASP;;;;;;;;;;;;;GAaG;AACH,qBAAa,KAAM,SAAQ,YAAY;IACrC,qCAAqC;IAC5B,gBAAgB;IAIzB,iDAAiD;IACpB,SAAS,EAAE,cAAc,CAAa;IAEnE,2EAA2E;IAChC,QAAQ,SAAQ;IAE3D,+EAA+E;IAClD,OAAO,CAAC,EAAE,YAAY,CAAC;IAEpD,OAAO,CAAC,OAAO,CAA0C;IACzD,OAAO,CAAC,cAAc,CAAmC;IACzD,OAAO,CAAC,eAAe,CAAS;IAEvB,iBAAiB;IAWjB,oBAAoB;IAM7B,4CAA4C;IAC5C,KAAK,CAAC,OAAO,EAAE,YAAY,GAAG,WAAW;IAqLzC,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,WAAW;IAcnB,OAAO,CAAC,YAAY;IAapB,OAAO,CAAC,UAAU;IAgDlB,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,iBAAiB;IAsBzB,OAAO,CAAC,mBAAmB,CAQzB;IAIF,OAAO,CAAC,UAAU,CAShB;CACH;AAkBD,qFAAqF;AACrF,wBAAgB,KAAK,CAAC,OAAO,EAAE,YAAY,GAAG,WAAW,CAExD"}
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/html/elements/toast/toast.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAI7D,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,OAAO;QACf,4EAA4E;QAC5E,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC;KACjE;CACF;AAED,yEAAyE;AACzE,qBAAa,SAAU,SAAQ,WAAW;CAAG;AAE7C,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAErE,MAAM,MAAM,cAAc,GACtB,WAAW,GACX,YAAY,GACZ,SAAS,GACT,cAAc,GACd,eAAe,GACf,YAAY,CAAC;AAEjB,UAAU,gBAAgB;IACxB,yDAAyD;IACzD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qDAAqD;IACrD,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wEAAwE;IACxE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,MAAM,YAAY,GACpB,CAAC,gBAAgB,GAAG;IAAsC,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC,GACvF,CAAC,gBAAgB,GAAG;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,sDAAsD,CAAC,IAAI,EAAE,MAAM,CAAC;CACrE,CAAC,CAAC;AASP;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAAa,KAAM,SAAQ,YAAY;IACrC,qCAAqC;IAC5B,gBAAgB;IAIzB,iDAAiD;IACpB,SAAS,EAAE,cAAc,CAAa;IAEnE,2EAA2E;IAChC,QAAQ,SAAQ;IAE3D,+EAA+E;IAClD,OAAO,CAAC,EAAE,YAAY,CAAC;IAEpD,OAAO,CAAC,OAAO,CAA0C;IACzD,OAAO,CAAC,cAAc,CAAmC;IACzD,OAAO,CAAC,eAAe,CAAS;IAEvB,iBAAiB;IAWjB,oBAAoB;IAM7B,4CAA4C;IAC5C,KAAK,CAAC,OAAO,EAAE,YAAY,GAAG,WAAW;IAqLzC,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,WAAW;IAcnB,OAAO,CAAC,YAAY;IAapB,OAAO,CAAC,UAAU;IAgDlB,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,iBAAiB;IAsBzB,OAAO,CAAC,mBAAmB,CAQzB;IAIF,OAAO,CAAC,UAAU,CAShB;CACH;AAkBD,qFAAqF;AACrF,wBAAgB,KAAK,CAAC,OAAO,EAAE,YAAY,GAAG,WAAW,CAExD"}

package/dist/elements/toast/toast.js

@@ -26,6 +26,11 @@ export class ToastItem extends HTMLElement {
  * @cssproperty --width - Width of the toast stack.
  * @cssproperty --show-duration - Duration of the show animation.
  * @cssproperty --hide-duration - Duration of the hide animation.
+ *
+ * @cssClass .l-toast-accent - The left accent bar, colored by variant.
+ * @cssClass .l-toast-icon - The leading icon, colored by variant (replaces the accent bar).
+ * @cssClass .l-toast-content - The content column wrapping the heading and message.
+ * @cssClass .l-toast-timer - The countdown progress bar (for timed toasts).
  */
 export class Toast extends LuxenElement {
     constructor() {

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

@@ -19,6 +19,8 @@ export type TreeSelection = 'single' | 'multiple' | 'leaf' | 'none';
  * @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: TreeItem[] }`.
+ *
+ * @customElement l-tree
  */
 export declare class Tree extends LuxenElement {
     static styles: import("lit").CSSResult[];

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,+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"}
+{"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;;;;;;;;;;;;;;;;;;;GAmBG;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

@@ -40,6 +40,8 @@ const styles = unsafeCSS(rawStyles);
  * @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: TreeItem[] }`.
+ *
+ * @customElement l-tree
  */
 export class Tree extends LuxenElement {
     constructor() {

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

@@ -25,6 +25,8 @@ import { LuxenElement } from '../../shared/luxen-element.js';
  * @event expand - Fired when the item is expanded.
  * @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`.
+ *
+ * @customElement l-tree-item
  */
 export declare class TreeItem extends LuxenElement {
     static styles: import("lit").CSSResult[];

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,+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"}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;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

@@ -48,6 +48,8 @@ const styles = unsafeCSS(rawStyles);
  * @event expand - Fired when the item is expanded.
  * @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`.
+ *
+ * @customElement l-tree-item
  */
 export class TreeItem extends LuxenElement {
     constructor() {

package/dist/metadata/avatar.json

@@ -0,0 +1,83 @@
+{
+  "name": "avatar",
+  "displayName": "Avatar",
+  "type": "shadow",
+  "isCustomElement": true,
+  "tag": "l-avatar",
+  "nativeTag": null,
+  "selector": "l-avatar",
+  "summary": "An avatar component for displaying user images, initials, or a default icon.",
+  "status": "stable",
+  "appearances": [],
+  "import": {
+    "css": "luxen-ui/css/avatar",
+    "js": "luxen-ui/avatar"
+  },
+  "properties": [
+    {
+      "name": "src",
+      "attribute": "src",
+      "type": "string",
+      "default": "''",
+      "reflects": false,
+      "description": ""
+    },
+    {
+      "name": "name",
+      "attribute": "name",
+      "type": "string",
+      "default": "''",
+      "reflects": false,
+      "description": ""
+    },
+    {
+      "name": "size",
+      "attribute": "size",
+      "type": "string",
+      "default": "'md'",
+      "reflects": true,
+      "description": ""
+    },
+    {
+      "name": "badge",
+      "attribute": "badge",
+      "type": "number",
+      "default": "0",
+      "reflects": false,
+      "description": ""
+    },
+    {
+      "name": "interactive",
+      "attribute": "interactive",
+      "type": "boolean",
+      "default": "false",
+      "reflects": true,
+      "description": ""
+    }
+  ],
+  "attributes": [],
+  "events": [],
+  "methods": [],
+  "slots": [],
+  "cssClasses": [
+    {
+      "name": ".l-avatar-group",
+      "description": "Flex wrapper that overlaps a row of stacked avatars."
+    }
+  ],
+  "cssParts": [],
+  "cssProperties": [
+    {
+      "name": "--color",
+      "default": null,
+      "description": "Background fill color for initials and the default icon."
+    },
+    {
+      "name": "--appearance",
+      "default": null,
+      "description": "Set to `circle` for a fully circular avatar (default is a rounded square)."
+    }
+  ],
+  "commands": [],
+  "examples": []
+}

package/dist/metadata/badge.json

@@ -0,0 +1,59 @@
+{
+  "name": "badge",
+  "displayName": "Badge",
+  "type": "custom",
+  "isCustomElement": true,
+  "tag": "l-badge",
+  "nativeTag": null,
+  "selector": "l-badge",
+  "summary": "A badge component for displaying small status indicators.",
+  "status": "stable",
+  "appearances": [],
+  "import": {
+    "css": "luxen-ui/css/badge",
+    "js": "luxen-ui/badge"
+  },
+  "properties": [
+    {
+      "name": "variant",
+      "attribute": "variant",
+      "type": "BadgeVariant | undefined",
+      "default": null,
+      "reflects": true,
+      "description": "Style variant: `info`, `success`, `warning`, `danger`, or `neutral` (default)"
+    },
+    {
+      "name": "pill",
+      "attribute": "pill",
+      "type": "boolean",
+      "default": "false",
+      "reflects": true,
+      "description": "Display as pill shape"
+    },
+    {
+      "name": "size",
+      "attribute": "size",
+      "type": "BadgeSize | undefined",
+      "default": null,
+      "reflects": true,
+      "description": "Badge size: `sm`, `lg`. Default is md."
+    },
+    {
+      "name": "appearance",
+      "attribute": "appearance",
+      "type": "BadgeAppearance | undefined",
+      "default": null,
+      "reflects": true,
+      "description": "Visual appearance: `filled`, `filled-outlined`, `accent`. Default is outlined."
+    }
+  ],
+  "attributes": [],
+  "events": [],
+  "methods": [],
+  "slots": [],
+  "cssClasses": [],
+  "cssParts": [],
+  "cssProperties": [],
+  "commands": [],
+  "examples": []
+}

package/dist/metadata/button.json

@@ -0,0 +1,138 @@
+{
+  "name": "button",
+  "displayName": "Button",
+  "type": "native",
+  "isCustomElement": false,
+  "tag": null,
+  "nativeTag": "button",
+  "selector": ".l-button",
+  "summary": "Buttons trigger actions such as submitting forms, confirming dialogs, or navigating.",
+  "status": "stable",
+  "appearances": [],
+  "import": {
+    "css": "luxen-ui/css/button",
+    "js": null
+  },
+  "properties": [],
+  "attributes": [
+    {
+      "name": "disabled",
+      "data": false,
+      "values": [],
+      "description": "Disables the button."
+    },
+    {
+      "name": "command",
+      "data": false,
+      "values": [],
+      "description": "Invoker command (`show-modal`, `close`, `show-popover`, etc.)."
+    },
+    {
+      "name": "commandfor",
+      "data": false,
+      "values": [],
+      "description": "ID of the target element for `command`."
+    },
+    {
+      "name": "data-variant",
+      "data": true,
+      "values": [
+        "primary",
+        "destructive"
+      ],
+      "description": "Visual variant. Default is the secondary style."
+    },
+    {
+      "name": "data-size",
+      "data": true,
+      "values": [
+        "sm",
+        "lg",
+        "xl"
+      ],
+      "description": "Control size. Default is md."
+    },
+    {
+      "name": "data-icon-only",
+      "data": true,
+      "values": [],
+      "description": "Icon-only mode (square button, width equals height). Auto-detected for a single icon child."
+    },
+    {
+      "name": "data-press-effect",
+      "data": true,
+      "values": [],
+      "description": "Press effect (scale + translate on active)."
+    }
+  ],
+  "events": [],
+  "methods": [],
+  "slots": [],
+  "cssClasses": [
+    {
+      "name": ".l-button",
+      "description": "Base button style."
+    }
+  ],
+  "cssParts": [],
+  "cssProperties": [
+    {
+      "name": "--height",
+      "default": "32px",
+      "description": "Button height (md size)."
+    },
+    {
+      "name": "--padding-inline",
+      "default": "0.625rem",
+      "description": "Horizontal padding."
+    },
+    {
+      "name": "--background-color",
+      "default": null,
+      "description": "Background color."
+    },
+    {
+      "name": "--background-color-hover",
+      "default": null,
+      "description": "Background color on hover."
+    },
+    {
+      "name": "--background-color-active",
+      "default": null,
+      "description": "Background color on press."
+    },
+    {
+      "name": "--text-color",
+      "default": null,
+      "description": "Text color."
+    },
+    {
+      "name": "--text-color-hover",
+      "default": null,
+      "description": "Text color on hover."
+    },
+    {
+      "name": "--border-color",
+      "default": null,
+      "description": "Border color."
+    },
+    {
+      "name": "--border-color-hover",
+      "default": null,
+      "description": "Border color on hover."
+    },
+    {
+      "name": "--font-size",
+      "default": null,
+      "description": "Font size."
+    }
+  ],
+  "commands": [],
+  "examples": [
+    {
+      "title": "Primary",
+      "language": "html",
+      "code": "<button class=\"l-button\" data-variant=\"primary\">Save</button>"
+    }
+  ]
+}

package/dist/metadata/carousel-item.json

@@ -0,0 +1,32 @@
+{
+  "name": "carousel-item",
+  "displayName": "Carousel item",
+  "type": "custom",
+  "isCustomElement": true,
+  "tag": "l-carousel-item",
+  "nativeTag": null,
+  "selector": "l-carousel-item",
+  "summary": "A single slide inside an `<l-carousel>`.",
+  "status": "stable",
+  "appearances": [],
+  "import": {
+    "css": null,
+    "js": "luxen-ui/carousel-item"
+  },
+  "properties": [],
+  "attributes": [],
+  "events": [],
+  "methods": [],
+  "slots": [],
+  "cssClasses": [],
+  "cssParts": [],
+  "cssProperties": [
+    {
+      "name": "--aspect-ratio",
+      "default": null,
+      "description": "Aspect ratio of the slide."
+    }
+  ],
+  "commands": [],
+  "examples": []
+}