luxen-ui 0.3.0 → 0.5.0

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/html/elements/story/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,cAAc,SAAS,CAAC;AAGxB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,UAAU,CAAC;KACvB;CACF"}

package/dist/elements/story/index.js

@@ -0,0 +1,4 @@
+import { define } from '../../define';
+import { LuxenStory } from './story';
+export * from './story';
+define('story', LuxenStory);

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

@@ -0,0 +1,48 @@
+import { LuxenElement } from '../../shared/luxen-element';
+/**
+ * @summary A single story declaration inside an `<l-stories>` row.
+ *
+ * Renders the clickable thumbnail (poster image + centered play overlay).
+ * The viewer reads `src`, `poster`, `label`, `handle`, `duration`, and
+ * `tracks` to play this story when opened.
+ *
+ * @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).
+ *
+ * @customElement l-story
+ */
+export declare class LuxenStory extends LuxenElement {
+    createRenderRoot(): this;
+    /** Video URL. */
+    src: string;
+    /** Thumbnail poster image. Falls back to the first video frame. */
+    poster: string;
+    /** Optional short looping preview video (URL of a small dedicated MP4, typically 2-3s, 480p, no audio). When set, the thumbnail renders this video muted+looped+autoplayed in place of `poster`. Gated by an `IntersectionObserver` so off-screen previews don't play. */
+    preview: string;
+    /** Caption shown below the thumbnail (or overlaid, depending on appearance) and used as the trigger `aria-label`. */
+    label: string;
+    /** Override the progress duration in seconds. Defaults to the video's metadata duration. */
+    duration: number;
+    /** Mark this story as already viewed (faded ring). Reflected. */
+    seen: boolean;
+    /** Pulse the thumbnail to draw attention (animated halo + subtle breathing scale). Reflected. */
+    pulse: boolean;
+    /** Chapter start times within the video, comma-separated seconds (e.g. `0,5,12,20`). `0` is implicit if omitted. Empty = single chapter spanning the full video. */
+    chapters: string;
+    /** Comma-separated VTT track URLs for captions. */
+    tracks: string;
+    /** Parsed chapter start times. Always begins with `0`, sorted, deduplicated. Empty `chapters` returns `[0]`. */
+    getChapterStarts(): number[];
+    private _previewVideo?;
+    private _io?;
+    connectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    disconnectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'l-story': LuxenStory;
+    }
+}
+//# sourceMappingURL=story.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"story.d.ts","sourceRoot":"","sources":["../../../src/html/elements/story/story.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D;;;;;;;;;;;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,iGAAiG;IAEjG,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;IAMpB,MAAM;CAwChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,UAAU,CAAC;KACvB;CACF"}

package/dist/elements/story/story.js

@@ -0,0 +1,161 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { property, query } from 'lit/decorators.js';
+import { LuxenElement } from '../../shared/luxen-element';
+/**
+ * @summary A single story declaration inside an `<l-stories>` row.
+ *
+ * Renders the clickable thumbnail (poster image + centered play overlay).
+ * The viewer reads `src`, `poster`, `label`, `handle`, `duration`, and
+ * `tracks` to play this story when opened.
+ *
+ * @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).
+ *
+ * @customElement l-story
+ */
+export class LuxenStory extends LuxenElement {
+    constructor() {
+        super(...arguments);
+        /** Video URL. */
+        this.src = '';
+        /** Thumbnail poster image. Falls back to the first video frame. */
+        this.poster = '';
+        /** Optional short looping preview video (URL of a small dedicated MP4, typically 2-3s, 480p, no audio). When set, the thumbnail renders this video muted+looped+autoplayed in place of `poster`. Gated by an `IntersectionObserver` so off-screen previews don't play. */
+        this.preview = '';
+        /** Caption shown below the thumbnail (or overlaid, depending on appearance) and used as the trigger `aria-label`. */
+        this.label = '';
+        /** Override the progress duration in seconds. Defaults to the video's metadata duration. */
+        this.duration = 0;
+        /** Mark this story as already viewed (faded ring). Reflected. */
+        this.seen = false;
+        /** Pulse the thumbnail to draw attention (animated halo + subtle breathing scale). Reflected. */
+        this.pulse = false;
+        /** Chapter start times within the video, comma-separated seconds (e.g. `0,5,12,20`). `0` is implicit if omitted. Empty = single chapter spanning the full video. */
+        this.chapters = '';
+        /** Comma-separated VTT track URLs for captions. */
+        this.tracks = '';
+    }
+    createRenderRoot() {
+        return this;
+    }
+    /** Parsed chapter start times. Always begins with `0`, sorted, deduplicated. Empty `chapters` returns `[0]`. */
+    getChapterStarts() {
+        const raw = this.chapters
+            .split(',')
+            .map((s) => parseFloat(s.trim()))
+            .filter((n) => Number.isFinite(n) && n >= 0);
+        const set = new Set([0, ...raw]);
+        const list = Array.from(set);
+        list.sort((a, b) => a - b);
+        return list;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.hasAttribute('role')) {
+            this.setAttribute('role', 'listitem');
+        }
+    }
+    updated(changed) {
+        // Set up / tear down the IntersectionObserver when the preview URL toggles.
+        if (changed.has('preview')) {
+            this._io?.disconnect();
+            this._io = undefined;
+            if (this.preview && this._previewVideo) {
+                this._io = new IntersectionObserver((entries) => {
+                    for (const entry of entries) {
+                        const v = entry.target;
+                        if (entry.isIntersecting) {
+                            if (v.paused)
+                                v.play().catch(() => { });
+                        }
+                        else if (!v.paused) {
+                            v.pause();
+                        }
+                    }
+                }, { threshold: 0.1 });
+                this._io.observe(this._previewVideo);
+            }
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._io?.disconnect();
+        this._io = undefined;
+    }
+    render() {
+        return html `
+      <button
+        type="button"
+        class="l-story-trigger"
+        aria-label=${this.label || 'Open story'}
+        data-story-trigger
+      >
+        <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>`
+            : this.poster
+                ? html `<img
+                  src=${this.poster}
+                  alt=""
+                  loading="lazy"
+                  decoding="async"
+                />`
+                : nothing}
+          <span
+            class="l-story-play"
+            aria-hidden="true"
+          >
+            <l-icon name="mdi:play"></l-icon>
+          </span>
+        </span>
+        ${this.label ? html `<span class="l-story-label">${this.label}</span>` : nothing}
+      </button>
+    `;
+    }
+}
+__decorate([
+    property({ reflect: true })
+], LuxenStory.prototype, "src", void 0);
+__decorate([
+    property({ reflect: true })
+], LuxenStory.prototype, "poster", void 0);
+__decorate([
+    property({ reflect: true })
+], LuxenStory.prototype, "preview", void 0);
+__decorate([
+    property({ reflect: true })
+], LuxenStory.prototype, "label", void 0);
+__decorate([
+    property({ type: Number })
+], LuxenStory.prototype, "duration", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LuxenStory.prototype, "seen", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LuxenStory.prototype, "pulse", void 0);
+__decorate([
+    property()
+], LuxenStory.prototype, "chapters", void 0);
+__decorate([
+    property()
+], LuxenStory.prototype, "tracks", void 0);
+__decorate([
+    query('video[data-preview]')
+], LuxenStory.prototype, "_previewVideo", void 0);

package/dist/elements/tabs/index.d.ts

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

package/dist/elements/tabs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/html/elements/tabs/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACnC,cAAc,QAAQ,CAAC;AAGvB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,SAAS,CAAC;KACrB;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/html/elements/tabs/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,cAAc,QAAQ,CAAC;AAGvB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,IAAI,CAAC;KAChB;CACF"}

package/dist/elements/tabs/index.js

@@ -1,4 +1,4 @@
 import { define } from '../../define';
-import { LuxenTabs } from './tabs';
+import { Tabs } from './tabs';
 export * from './tabs';
-define('tabs', LuxenTabs);
+define('tabs', Tabs);

package/dist/elements/tabs/tabs.d.ts

@@ -21,7 +21,7 @@ export type TabsOrientation = 'horizontal' | 'vertical';
  *
  * @customElement l-tabs
  */
-export declare class LuxenTabs extends LuxenElement {
+export declare class Tabs extends LuxenElement {
     createRenderRoot(): this;
     private _instanceId;
     private _tablistEl;

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

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/html/elements/tabs/tabs.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAG1D,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG,MAAM,CAAC;AAC9C,MAAM,MAAM,eAAe,GAAG,YAAY,GAAG,UAAU,CAAC;AAExD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBAAa,SAAU,SAAQ,YAAY;IAChC,gBAAgB;IAIzB,OAAO,CAAC,WAAW,CAAoB;IACvC,OAAO,CAAC,UAAU,CAA4B;IAC9C,OAAO,CAAC,KAAK,CAA2B;IACxC,OAAO,CAAC,OAAO,CAAqB;IAEpC,sBAAsB;IAEtB,OAAO,EAAE,WAAW,CAAU;IAE9B,yCAAyC;IAEzC,KAAK,SAAO;IAEZ,4CAA4C;IAE5C,SAAS,UAAS;IAElB,uBAAuB;IAEvB,WAAW,EAAE,eAAe,CAAgB;IAInC,iBAAiB;IAMjB,oBAAoB;IAKpB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAW9C,OAAO,CAAC,MAAM;IAoDd,OAAO,CAAC,SAAS;IAOjB,OAAO,CAAC,UAAU;IA2BlB,OAAO,CAAC,gBAAgB;IAkBxB,OAAO,CAAC,QAAQ,CAQd;IAEF,OAAO,CAAC,UAAU,CAkChB;CACH"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/html/elements/tabs/tabs.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAG1D,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG,MAAM,CAAC;AAC9C,MAAM,MAAM,eAAe,GAAG,YAAY,GAAG,UAAU,CAAC;AAExD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBAAa,IAAK,SAAQ,YAAY;IAC3B,gBAAgB;IAIzB,OAAO,CAAC,WAAW,CAAoB;IACvC,OAAO,CAAC,UAAU,CAA4B;IAC9C,OAAO,CAAC,KAAK,CAA2B;IACxC,OAAO,CAAC,OAAO,CAAqB;IAEpC,sBAAsB;IAEtB,OAAO,EAAE,WAAW,CAAU;IAE9B,yCAAyC;IAEzC,KAAK,SAAO;IAEZ,4CAA4C;IAE5C,SAAS,UAAS;IAElB,uBAAuB;IAEvB,WAAW,EAAE,eAAe,CAAgB;IAInC,iBAAiB;IAMjB,oBAAoB;IAKpB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAW9C,OAAO,CAAC,MAAM;IAoDd,OAAO,CAAC,SAAS;IAOjB,OAAO,CAAC,UAAU;IA2BlB,OAAO,CAAC,gBAAgB;IAkBxB,OAAO,CAAC,QAAQ,CAQd;IAEF,OAAO,CAAC,UAAU,CAkChB;CACH"}

package/dist/elements/tabs/tabs.js

@@ -27,7 +27,7 @@ import { uniqueId } from '../../registry';
  *
  * @customElement l-tabs
  */
-export class LuxenTabs extends LuxenElement {
+export class Tabs extends LuxenElement {
     constructor() {
         super(...arguments);
         this._instanceId = uniqueId('tabs');
@@ -198,13 +198,13 @@ export class LuxenTabs extends LuxenElement {
 }
 __decorate([
     property({ reflect: true })
-], LuxenTabs.prototype, "variant", void 0);
+], Tabs.prototype, "variant", void 0);
 __decorate([
     property({ reflect: true })
-], LuxenTabs.prototype, "value", void 0);
+], Tabs.prototype, "value", void 0);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'full-width' })
-], LuxenTabs.prototype, "fullWidth", void 0);
+], Tabs.prototype, "fullWidth", void 0);
 __decorate([
     property({ reflect: true })
-], LuxenTabs.prototype, "orientation", void 0);
+], Tabs.prototype, "orientation", void 0);

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

@@ -1,9 +1,9 @@
-import { LuxenToast, LuxenToastItem } from './toast';
+import { Toast, ToastItem } from './toast';
 export * from './toast';
 declare global {
     interface HTMLElementTagNameMap {
-        'l-toast': LuxenToast;
-        'l-toast-item': LuxenToastItem;
+        'l-toast': Toast;
+        'l-toast-item': ToastItem;
     }
 }
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/html/elements/toast/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACrD,cAAc,SAAS,CAAC;AAIxB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,UAAU,CAAC;QACtB,cAAc,EAAE,cAAc,CAAC;KAChC;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/html/elements/toast/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAC3C,cAAc,SAAS,CAAC;AAIxB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,KAAK,CAAC;QACjB,cAAc,EAAE,SAAS,CAAC;KAC3B;CACF"}

package/dist/elements/toast/index.js

@@ -1,5 +1,5 @@
 import { define } from '../../define';
-import { LuxenToast, LuxenToastItem } from './toast';
+import { Toast, ToastItem } from './toast';
 export * from './toast';
-define('toast', LuxenToast);
-define('toast-item', LuxenToastItem);
+define('toast', Toast);
+define('toast-item', ToastItem);

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

@@ -6,7 +6,7 @@ declare global {
     }
 }
 /** Minimal custom element for toast items — no render, no shadow DOM. */
-export declare class LuxenToastItem extends HTMLElement {
+export declare class ToastItem extends HTMLElement {
 }
 interface ToastOptionsBase {
     /** Optional heading text displayed above the message. */
@@ -41,7 +41,7 @@ export type ToastOptions = (ToastOptionsBase & {
  * @cssproperty --show-duration - Duration of the show animation.
  * @cssproperty --hide-duration - Duration of the hide animation.
  */
-export declare class LuxenToast extends LuxenElement {
+export declare class Toast extends LuxenElement {
     /** Use light DOM — no Shadow DOM. */
     createRenderRoot(): this;
     /** Position of the toast stack on the screen. */

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,4BAA4B,CAAC;AAI1D,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,cAAe,SAAQ,WAAW;CAAG;AAElD,UAAU,gBAAgB;IACxB,yDAAyD;IACzD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+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,UAAW,SAAQ,YAAY;IAC1C,qCAAqC;IAC5B,gBAAgB;IAIzB,iDAAiD;IACpB,SAAS,EAClC,WAAW,GACX,YAAY,GACZ,SAAS,GACT,cAAc,GACd,eAAe,GACf,YAAY,CAAa;IAE7B,2EAA2E;IAChC,QAAQ,SAAQ;IAE3D,uEAAuE;IAC1C,OAAO,SAAM;IAE1C,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,4BAA4B,CAAC;AAI1D,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,UAAU,gBAAgB;IACxB,yDAAyD;IACzD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+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,EAClC,WAAW,GACX,YAAY,GACZ,SAAS,GACT,cAAc,GACd,eAAe,GACf,YAAY,CAAa;IAE7B,2EAA2E;IAChC,QAAQ,SAAQ;IAE3D,uEAAuE;IAC1C,OAAO,SAAM;IAE1C,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

@@ -11,7 +11,7 @@ import { LuxenElement } from '../../shared/luxen-element';
 import { property } from 'lit/decorators.js';
 import { tagName, cls, uniqueId } from '../../registry';
 /** Minimal custom element for toast items — no render, no shadow DOM. */
-export class LuxenToastItem extends HTMLElement {
+export class ToastItem extends HTMLElement {
 }
 /**
  * @summary A toast notification container that generates toast items internally.
@@ -27,7 +27,7 @@ export class LuxenToastItem extends HTMLElement {
  * @cssproperty --show-duration - Duration of the show animation.
  * @cssproperty --hide-duration - Duration of the hide animation.
  */
-export class LuxenToast extends LuxenElement {
+export class Toast extends LuxenElement {
     constructor() {
         super(...arguments);
         /** Position of the toast stack on the screen. */
@@ -349,13 +349,13 @@ export class LuxenToast extends LuxenElement {
 }
 __decorate([
     property({ reflect: true })
-], LuxenToast.prototype, "placement", void 0);
+], Toast.prototype, "placement", void 0);
 __decorate([
     property({ type: Number, reflect: true })
-], LuxenToast.prototype, "duration", void 0);
+], Toast.prototype, "duration", void 0);
 __decorate([
     property({ reflect: true })
-], LuxenToast.prototype, "variant", void 0);
+], Toast.prototype, "variant", void 0);
 // ── Standalone function ───────────────────────────────────────────────────────
 let _defaultInstance = null;
 function _getDefault() {

package/dist/elements/tooltip/index.d.ts

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

package/dist/elements/tooltip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/html/elements/tooltip/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,cAAc,WAAW,CAAC;AAG1B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,YAAY,CAAC;KAC3B;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/html/elements/tooltip/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,cAAc,WAAW,CAAC;AAG1B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,OAAO,CAAC;KACtB;CACF"}

package/dist/elements/tooltip/index.js

@@ -1,4 +1,4 @@
 import { define } from '../../define';
-import { LuxenTooltip } from './tooltip';
+import { Tooltip } from './tooltip';
 export * from './tooltip';
-define('tooltip', LuxenTooltip);
+define('tooltip', Tooltip);

package/dist/elements/tooltip/tooltip.css

@@ -1,7 +1,6 @@
 :host {
-  --background: var(--l-color-bg-fill-brand, light-dark(#1f2937, #f9fafb));
-  --color: light-dark(#fff, #111827);
-  --radius: 4px;
+  --background-color: var(--l-color-bg-fill-brand, light-dark(#1f2937, #f9fafb));
+  --border-radius: 4px;
   --max-width: 180px;
   --arrow-size: 6px;
   --show-duration: 150ms;
@@ -18,20 +17,29 @@
   max-width: var(--max-width);
   padding: 4px 8px;
   border: 0;
-  border-radius: var(--radius);
-  background: var(--background);
-  color: var(--color);
+  border-radius: var(--border-radius);
+  background: var(--background-color);
+  color: var(
+    --text-color,
+    oklch(from var(--background-color) calc(0.59 - 0.41 * sign(l - 0.5)) 0 0)
+  );
   font-size: 0.8125rem;
   line-height: 1.4;
   filter: drop-shadow(0 1px 2px rgb(0 0 0 / 16%));
   pointer-events: none;
 }
 
+@supports (color: contrast-color(red vs black, white)) {
+  [popover] {
+    color: var(--text-color, contrast-color(var(--background-color) vs #111827, #fff to AA));
+  }
+}
+
 i {
   position: absolute;
   display: block;
   width: var(--arrow-size);
   height: var(--arrow-size);
-  background: var(--background);
+  background: var(--background-color);
   transform: rotate(45deg);
 }

package/dist/elements/tooltip/tooltip.d.ts

@@ -10,15 +10,15 @@ import type { Placement } from '@floating-ui/dom';
  * @csspart body - The tooltip popover container.
  * @csspart arrow - The directional arrow element.
  *
- * @cssproperty --background - Background color. Default: dark in light mode, light in dark mode.
- * @cssproperty --color - Text color.
- * @cssproperty --radius - Border radius. Default `4px`.
+ * @cssproperty --background-color - Background color. Default: dark in light mode, light in dark mode.
+ * @cssproperty --text-color - Text color. If unset, auto-derived from `--background-color` luminance.
+ * @cssproperty --border-radius - Border radius. Default `4px`.
  * @cssproperty --max-width - Maximum width. Default `180px`.
  * @cssproperty --arrow-size - Arrow size. Default `6px`.
  * @cssproperty --show-duration - Show animation duration. Default `150ms`.
  * @cssproperty --hide-duration - Hide animation duration. Default `150ms`.
  */
-export declare class LuxenTooltip extends LuxenElement {
+export declare class Tooltip extends LuxenElement {
     static styles: import("lit").CSSResult[];
     private _tooltipId;
     private _floating;

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/html/elements/tooltip/tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAQlD;;;;;;;;;;;;;;;;GAgBG;AACH,qBAAa,YAAa,SAAQ,YAAY;IAC5C,OAAgB,MAAM,4BAAwB;IAE9C,OAAO,CAAC,UAAU,CAAuB;IAEzC,OAAO,CAAC,SAAS,CAId;IAEH,yDAAyD;IAEzD,QAAQ,CAAC,GAAG,SAAM;IAElB,8CAA8C;IAE9C,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAS;IAEtC,sDAAsD;IAEtD,QAAQ,CAAC,QAAQ,SAAK;IAEtB,6CAA6C;IAE7C,QAAQ,CAAC,IAAI,UAAS;IAEtB,kCAAkC;IAElC,QAAQ,CAAC,YAAY,UAAS;IAE9B,kFAAkF;IAElF,QAAQ,CAAC,OAAO,SAAiB;IAEjC,OAAO,CAAC,WAAW;IAInB,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,CAAC,YAAY;IAKX,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAU9C,IAAI;IAIJ,IAAI;IAIJ,MAAM;YAIQ,iBAAiB;IAwB/B,OAAO,CAAC,eAAe,CAIrB;IAEF,OAAO,CAAC,eAAe,CAGrB;IAEF,OAAO,CAAC,UAAU,CAEhB;IACF,OAAO,CAAC,WAAW,CAEjB;IACF,OAAO,CAAC,QAAQ,CAEd;IAEF,OAAO,CAAC,UAAU,CAKhB;IAEF,OAAO,CAAC,oBAAoB;IAW5B,OAAO,CAAC,uBAAuB;IAOtB,MAAM;CAoBhB"}
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/html/elements/tooltip/tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAQlD;;;;;;;;;;;;;;;;GAgBG;AACH,qBAAa,OAAQ,SAAQ,YAAY;IACvC,OAAgB,MAAM,4BAAwB;IAE9C,OAAO,CAAC,UAAU,CAAuB;IAEzC,OAAO,CAAC,SAAS,CAId;IAEH,yDAAyD;IAEzD,QAAQ,CAAC,GAAG,SAAM;IAElB,8CAA8C;IAE9C,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAS;IAEtC,sDAAsD;IAEtD,QAAQ,CAAC,QAAQ,SAAK;IAEtB,6CAA6C;IAE7C,QAAQ,CAAC,IAAI,UAAS;IAEtB,kCAAkC;IAElC,QAAQ,CAAC,YAAY,UAAS;IAE9B,kFAAkF;IAElF,QAAQ,CAAC,OAAO,SAAiB;IAEjC,OAAO,CAAC,WAAW;IAInB,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,CAAC,YAAY;IAKX,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAU9C,IAAI;IAIJ,IAAI;IAIJ,MAAM;YAIQ,iBAAiB;IAwB/B,OAAO,CAAC,eAAe,CAIrB;IAEF,OAAO,CAAC,eAAe,CAGrB;IAEF,OAAO,CAAC,UAAU,CAEhB;IACF,OAAO,CAAC,WAAW,CAEjB;IACF,OAAO,CAAC,QAAQ,CAEd;IAEF,OAAO,CAAC,UAAU,CAKhB;IAEF,OAAO,CAAC,oBAAoB;IAW5B,OAAO,CAAC,uBAAuB;IAOtB,MAAM;CAoBhB"}

package/dist/elements/tooltip/tooltip.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 _LuxenTooltip_for_accessor_storage, _LuxenTooltip_placement_accessor_storage, _LuxenTooltip_distance_accessor_storage, _LuxenTooltip_open_accessor_storage, _LuxenTooltip_withoutArrow_accessor_storage, _LuxenTooltip_trigger_accessor_storage;
+var _Tooltip_for_accessor_storage, _Tooltip_placement_accessor_storage, _Tooltip_distance_accessor_storage, _Tooltip_open_accessor_storage, _Tooltip_withoutArrow_accessor_storage, _Tooltip_trigger_accessor_storage;
 import { html, nothing, unsafeCSS } from 'lit';
 import { LuxenElement } from '../../shared/luxen-element';
 import { property } from 'lit/decorators.js';
@@ -33,15 +33,15 @@ const styles = unsafeCSS(rawStyles);
  * @csspart body - The tooltip popover container.
  * @csspart arrow - The directional arrow element.
  *
- * @cssproperty --background - Background color. Default: dark in light mode, light in dark mode.
- * @cssproperty --color - Text color.
- * @cssproperty --radius - Border radius. Default `4px`.
+ * @cssproperty --background-color - Background color. Default: dark in light mode, light in dark mode.
+ * @cssproperty --text-color - Text color. If unset, auto-derived from `--background-color` luminance.
+ * @cssproperty --border-radius - Border radius. Default `4px`.
  * @cssproperty --max-width - Maximum width. Default `180px`.
  * @cssproperty --arrow-size - Arrow size. Default `6px`.
  * @cssproperty --show-duration - Show animation duration. Default `150ms`.
  * @cssproperty --hide-duration - Hide animation duration. Default `150ms`.
  */
-export class LuxenTooltip extends LuxenElement {
+export class Tooltip extends LuxenElement {
     constructor() {
         super(...arguments);
         this._tooltipId = uniqueId('tooltip');
@@ -50,12 +50,12 @@ export class LuxenTooltip extends LuxenElement {
             getFloatingElement: () => this._popover,
             getArrowElement: () => this._arrowEl,
         });
-        _LuxenTooltip_for_accessor_storage.set(this, '');
-        _LuxenTooltip_placement_accessor_storage.set(this, 'top');
-        _LuxenTooltip_distance_accessor_storage.set(this, 8);
-        _LuxenTooltip_open_accessor_storage.set(this, false);
-        _LuxenTooltip_withoutArrow_accessor_storage.set(this, false);
-        _LuxenTooltip_trigger_accessor_storage.set(this, 'hover focus');
+        _Tooltip_for_accessor_storage.set(this, '');
+        _Tooltip_placement_accessor_storage.set(this, 'top');
+        _Tooltip_distance_accessor_storage.set(this, 8);
+        _Tooltip_open_accessor_storage.set(this, false);
+        _Tooltip_withoutArrow_accessor_storage.set(this, false);
+        _Tooltip_trigger_accessor_storage.set(this, 'hover focus');
         // --- Trigger event handlers ---
         this._onPointerEnter = () => {
             if (!this._hasTrigger('hover'))
@@ -88,23 +88,23 @@ export class LuxenTooltip extends LuxenElement {
         };
     }
     /** The HTML id of the element triggering the tooltip. */
-    get for() { return __classPrivateFieldGet(this, _LuxenTooltip_for_accessor_storage, "f"); }
-    set for(value) { __classPrivateFieldSet(this, _LuxenTooltip_for_accessor_storage, value, "f"); }
+    get for() { return __classPrivateFieldGet(this, _Tooltip_for_accessor_storage, "f"); }
+    set for(value) { __classPrivateFieldSet(this, _Tooltip_for_accessor_storage, value, "f"); }
     /** The preferred placement of the tooltip. */
-    get placement() { return __classPrivateFieldGet(this, _LuxenTooltip_placement_accessor_storage, "f"); }
-    set placement(value) { __classPrivateFieldSet(this, _LuxenTooltip_placement_accessor_storage, value, "f"); }
+    get placement() { return __classPrivateFieldGet(this, _Tooltip_placement_accessor_storage, "f"); }
+    set placement(value) { __classPrivateFieldSet(this, _Tooltip_placement_accessor_storage, value, "f"); }
     /** The distance in pixels from the target element. */
-    get distance() { return __classPrivateFieldGet(this, _LuxenTooltip_distance_accessor_storage, "f"); }
-    set distance(value) { __classPrivateFieldSet(this, _LuxenTooltip_distance_accessor_storage, value, "f"); }
+    get distance() { return __classPrivateFieldGet(this, _Tooltip_distance_accessor_storage, "f"); }
+    set distance(value) { __classPrivateFieldSet(this, _Tooltip_distance_accessor_storage, value, "f"); }
     /** Whether or not the tooltip is visible. */
-    get open() { return __classPrivateFieldGet(this, _LuxenTooltip_open_accessor_storage, "f"); }
-    set open(value) { __classPrivateFieldSet(this, _LuxenTooltip_open_accessor_storage, value, "f"); }
+    get open() { return __classPrivateFieldGet(this, _Tooltip_open_accessor_storage, "f"); }
+    set open(value) { __classPrivateFieldSet(this, _Tooltip_open_accessor_storage, value, "f"); }
     /** Hide the directional arrow. */
-    get withoutArrow() { return __classPrivateFieldGet(this, _LuxenTooltip_withoutArrow_accessor_storage, "f"); }
-    set withoutArrow(value) { __classPrivateFieldSet(this, _LuxenTooltip_withoutArrow_accessor_storage, value, "f"); }
+    get withoutArrow() { return __classPrivateFieldGet(this, _Tooltip_withoutArrow_accessor_storage, "f"); }
+    set withoutArrow(value) { __classPrivateFieldSet(this, _Tooltip_withoutArrow_accessor_storage, value, "f"); }
     /** Space-separated list of trigger modes: `hover`, `focus`, `click`, `manual`. */
-    get trigger() { return __classPrivateFieldGet(this, _LuxenTooltip_trigger_accessor_storage, "f"); }
-    set trigger(value) { __classPrivateFieldSet(this, _LuxenTooltip_trigger_accessor_storage, value, "f"); }
+    get trigger() { return __classPrivateFieldGet(this, _Tooltip_trigger_accessor_storage, "f"); }
+    set trigger(value) { __classPrivateFieldSet(this, _Tooltip_trigger_accessor_storage, value, "f"); }
     _hasTrigger(type) {
         return this.trigger.split(' ').includes(type);
     }
@@ -131,7 +131,7 @@ export class LuxenTooltip extends LuxenElement {
     }
     updated(changed) {
         if (changed.has('open')) {
-            this._handleOpenChange();
+            void this._handleOpenChange();
         }
         if (changed.has('for')) {
             this._removeTriggerListeners(changed.get('for'));
@@ -209,23 +209,23 @@ export class LuxenTooltip extends LuxenElement {
     `;
     }
 }
-_LuxenTooltip_for_accessor_storage = new WeakMap(), _LuxenTooltip_placement_accessor_storage = new WeakMap(), _LuxenTooltip_distance_accessor_storage = new WeakMap(), _LuxenTooltip_open_accessor_storage = new WeakMap(), _LuxenTooltip_withoutArrow_accessor_storage = new WeakMap(), _LuxenTooltip_trigger_accessor_storage = new WeakMap();
-LuxenTooltip.styles = [hostStyles, styles];
+_Tooltip_for_accessor_storage = new WeakMap(), _Tooltip_placement_accessor_storage = new WeakMap(), _Tooltip_distance_accessor_storage = new WeakMap(), _Tooltip_open_accessor_storage = new WeakMap(), _Tooltip_withoutArrow_accessor_storage = new WeakMap(), _Tooltip_trigger_accessor_storage = new WeakMap();
+Tooltip.styles = [hostStyles, styles];
 __decorate([
     property()
-], LuxenTooltip.prototype, "for", null);
+], Tooltip.prototype, "for", null);
 __decorate([
     property()
-], LuxenTooltip.prototype, "placement", null);
+], Tooltip.prototype, "placement", null);
 __decorate([
     property({ type: Number })
-], LuxenTooltip.prototype, "distance", null);
+], Tooltip.prototype, "distance", null);
 __decorate([
     property({ type: Boolean, reflect: true })
-], LuxenTooltip.prototype, "open", null);
+], Tooltip.prototype, "open", null);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'without-arrow' })
-], LuxenTooltip.prototype, "withoutArrow", null);
+], Tooltip.prototype, "withoutArrow", null);
 __decorate([
     property()
-], LuxenTooltip.prototype, "trigger", null);
+], Tooltip.prototype, "trigger", null);

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/html/elements/tree/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACnC,cAAc,QAAQ,CAAC;AAGvB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,SAAS,CAAC;KACrB;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/html/elements/tree/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,cAAc,QAAQ,CAAC;AAGvB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,IAAI,CAAC;KAChB;CACF"}