luxen-ui 0.1.0

package/dist/elements/tabs/tabs.js

@@ -0,0 +1,210 @@
+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 { property } from 'lit/decorators.js';
+import { LuxenElement } from '../../shared/luxen-element';
+import { uniqueId } from '../../registry';
+/**
+ * @summary A tabs component that progressively enhances light DOM markup
+ * with ARIA roles, keyboard navigation, and animated indicators.
+ *
+ * @example
+ * ```html
+ * <l-tabs variant="enclosed">
+ *   <div>
+ *     <button>Tab 1</button>
+ *     <button>Tab 2</button>
+ *   </div>
+ *   <div>Content 1</div>
+ *   <div>Content 2</div>
+ * </l-tabs>
+ * ```
+ *
+ * @event change - Fired when the active tab changes. Detail: `{ index: number, name: string | null }`.
+ *
+ * @customElement l-tabs
+ */
+export class LuxenTabs extends LuxenElement {
+    constructor() {
+        super(...arguments);
+        this._instanceId = uniqueId('tabs');
+        this._tablistEl = null;
+        this._tabs = [];
+        this._panels = [];
+        /** Visual variant. */
+        this.variant = 'line';
+        /** Index of the active tab (0-based). */
+        this.value = '0';
+        /** Stretch tabs to fill container width. */
+        this.fullWidth = false;
+        /** Tab orientation. */
+        this.orientation = 'horizontal';
+        // --- Event handlers ---
+        this._onClick = (e) => {
+            const tab = e.target.closest('[role="tab"]');
+            if (!tab)
+                return;
+            const index = this._tabs.indexOf(tab);
+            if (index >= 0) {
+                this._selectTab(index);
+                tab.focus();
+            }
+        };
+        this._onKeyDown = (e) => {
+            const target = e.target;
+            if (target.getAttribute('role') !== 'tab')
+                return;
+            const isHorizontal = this.orientation === 'horizontal';
+            const prevKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp';
+            const nextKey = isHorizontal ? 'ArrowRight' : 'ArrowDown';
+            let index = this._tabs.indexOf(target);
+            switch (e.key) {
+                case nextKey:
+                    e.preventDefault();
+                    index = (index + 1) % this._tabs.length;
+                    this._selectTab(index);
+                    this._tabs[index].focus();
+                    break;
+                case prevKey:
+                    e.preventDefault();
+                    index = (index - 1 + this._tabs.length) % this._tabs.length;
+                    this._selectTab(index);
+                    this._tabs[index].focus();
+                    break;
+                case 'Home':
+                    e.preventDefault();
+                    this._selectTab(0);
+                    this._tabs[0].focus();
+                    break;
+                case 'End':
+                    e.preventDefault();
+                    this._selectTab(this._tabs.length - 1);
+                    this._tabs[this._tabs.length - 1].focus();
+                    break;
+            }
+        };
+    }
+    createRenderRoot() {
+        return this;
+    }
+    // --- Lifecycle ---
+    connectedCallback() {
+        super.connectedCallback();
+        // Defer setup to let light DOM children parse
+        requestAnimationFrame(() => this._setup());
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._teardown();
+    }
+    updated(changed) {
+        if (changed.has('value') && this._tabs.length) {
+            this._selectTab(Number(this.value), false);
+        }
+        if (changed.has('orientation') && this._tablistEl) {
+            this._tablistEl.setAttribute('aria-orientation', this.orientation);
+        }
+    }
+    // --- Setup / Teardown ---
+    _setup() {
+        const children = Array.from(this.children);
+        if (children.length < 2)
+            return;
+        // First child is the tablist container
+        this._tablistEl = children[0];
+        this._tablistEl.setAttribute('role', 'tablist');
+        this._tablistEl.setAttribute('aria-orientation', this.orientation);
+        // Buttons inside tablist become tabs
+        this._tabs = Array.from(this._tablistEl.querySelectorAll('button'));
+        // Remaining children become panels
+        this._panels = children.slice(1);
+        const activeIndex = Number(this.value) || 0;
+        // Enhance tabs
+        for (let i = 0; i < this._tabs.length; i++) {
+            const tab = this._tabs[i];
+            const panel = this._panels[i];
+            const name = tab.getAttribute('name') ?? String(i);
+            const tabId = `${this._instanceId}-tab-${name}`;
+            const panelId = `${this._instanceId}-panel-${name}`;
+            tab.setAttribute('role', 'tab');
+            tab.setAttribute('id', tabId);
+            tab.setAttribute('aria-selected', String(i === activeIndex));
+            tab.setAttribute('tabindex', i === activeIndex ? '0' : '-1');
+            if (panel) {
+                tab.setAttribute('aria-controls', panelId);
+                panel.setAttribute('role', 'tabpanel');
+                panel.setAttribute('id', panelId);
+                panel.setAttribute('aria-labelledby', tabId);
+                panel.setAttribute('tabindex', '0');
+                if (i !== activeIndex) {
+                    panel.hidden = true;
+                }
+                else {
+                    panel.hidden = false;
+                }
+            }
+        }
+        // Attach listeners
+        this._tablistEl.addEventListener('click', this._onClick);
+        this._tablistEl.addEventListener('keydown', this._onKeyDown);
+        // Initial indicator position
+        requestAnimationFrame(() => this._updateIndicator());
+    }
+    _teardown() {
+        this._tablistEl?.removeEventListener('click', this._onClick);
+        this._tablistEl?.removeEventListener('keydown', this._onKeyDown);
+    }
+    // --- Tab selection ---
+    _selectTab(index, emitEvent = true) {
+        if (index < 0 || index >= this._tabs.length)
+            return;
+        for (let i = 0; i < this._tabs.length; i++) {
+            const tab = this._tabs[i];
+            const panel = this._panels[i];
+            const isActive = i === index;
+            tab.setAttribute('aria-selected', String(isActive));
+            tab.setAttribute('tabindex', isActive ? '0' : '-1');
+            if (panel) {
+                panel.hidden = !isActive;
+            }
+        }
+        this.value = String(index);
+        this._updateIndicator();
+        if (emitEvent) {
+            const name = this._tabs[index]?.getAttribute('name') ?? null;
+            this.emit('change', { detail: { index, name } });
+        }
+    }
+    // --- Indicator ---
+    _updateIndicator() {
+        if (!this._tablistEl)
+            return;
+        const activeTab = this._tabs[Number(this.value)];
+        if (!activeTab)
+            return;
+        const isVertical = this.orientation === 'vertical';
+        if (isVertical) {
+            this._tablistEl.style.setProperty('--_indicator-top', `${activeTab.offsetTop}px`);
+            this._tablistEl.style.setProperty('--_indicator-height', `${activeTab.offsetHeight}px`);
+        }
+        else {
+            this._tablistEl.style.setProperty('--_indicator-left', `${activeTab.offsetLeft}px`);
+            this._tablistEl.style.setProperty('--_indicator-width', `${activeTab.offsetWidth}px`);
+        }
+    }
+}
+__decorate([
+    property({ reflect: true })
+], LuxenTabs.prototype, "variant", void 0);
+__decorate([
+    property({ reflect: true })
+], LuxenTabs.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'full-width' })
+], LuxenTabs.prototype, "fullWidth", void 0);
+__decorate([
+    property({ reflect: true })
+], LuxenTabs.prototype, "orientation", void 0);

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

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

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

@@ -0,0 +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"}

package/dist/elements/toast/index.js

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

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

@@ -0,0 +1,72 @@
+import { LuxenElement } from '../../shared/luxen-element';
+declare global {
+    interface Element {
+        /** @see https://developer.mozilla.org/en-US/docs/Web/API/Element/setHTML */
+        setHTML(input: string, options?: Record<string, unknown>): void;
+    }
+}
+/** Minimal custom element for toast items — no render, no shadow DOM. */
+export declare class LuxenToastItem extends HTMLElement {
+}
+interface ToastOptionsBase {
+    /** Optional heading text displayed above the message. */
+    heading?: string;
+    /** Override the element's variant for this toast. */
+    variant?: string;
+    /** Override auto-dismiss duration (ms) for this toast. 0 = no auto-dismiss. */
+    duration?: number;
+    /** Iconify icon name (e.g. 'lucide:check'). Replaces the accent bar. */
+    icon?: string;
+    /** Show a countdown progress bar at the bottom. Default `false`. */
+    timer?: boolean;
+}
+export type ToastOptions = (ToastOptionsBase & {
+    text: string;
+    html?: never;
+}) | (ToastOptionsBase & {
+    text?: never;
+    /** HTML content (sanitized via the Sanitizer API). */ html: string;
+});
+/**
+ * @summary A toast notification container that generates toast items internally.
+ * @customElement l-toast
+ *
+ * @event show - Emitted when a toast begins to show. Cancelable.
+ * @event after-show - Emitted after the show animation completes.
+ * @event hide - Emitted when a toast begins to hide. Cancelable.
+ * @event after-hide - Emitted after the hide animation completes and toast is removed.
+ *
+ * @cssproperty --gap - Gap between stacked toast items.
+ * @cssproperty --width - Width of the toast stack.
+ * @cssproperty --show-duration - Duration of the show animation.
+ * @cssproperty --hide-duration - Duration of the hide animation.
+ */
+export declare class LuxenToast extends LuxenElement {
+    /** Use light DOM — no Shadow DOM. */
+    createRenderRoot(): this;
+    /** Position of the toast stack on the screen. */
+    placement: 'top-start' | 'top-center' | 'top-end' | 'bottom-start' | 'bottom-center' | 'bottom-end';
+    /** Default auto-dismiss delay in milliseconds. 0 disables auto-dismiss. */
+    duration: number;
+    /** Default variant for toast items: info, success, warning, danger. */
+    variant: string;
+    private _timers;
+    private _positionCache;
+    private _documentHidden;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Create and show a toast notification. */
+    toast(options: ToastOptions): HTMLElement;
+    private _startTimer;
+    private _pauseTimer;
+    private _resumeTimer;
+    private _hideToast;
+    private _capturePositions;
+    private _animatePositions;
+    private _onVisibilityChange;
+    private _onKeyDown;
+}
+/** Show a toast notification. Auto-creates `<l-toast>` if none exists in the DOM. */
+export declare function toast(options: ToastOptions): HTMLElement;
+export {};
+//# sourceMappingURL=toast.d.ts.map

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

@@ -0,0 +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"}

package/dist/elements/toast/toast.js

@@ -0,0 +1,375 @@
+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;
+};
+/* eslint-disable no-shadow -- the local `toast` HTMLElement intentionally
+   shadows the module-level `toast()` export; renaming would touch ~50 lines
+   without behavioral benefit. */
+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 {
+}
+/**
+ * @summary A toast notification container that generates toast items internally.
+ * @customElement l-toast
+ *
+ * @event show - Emitted when a toast begins to show. Cancelable.
+ * @event after-show - Emitted after the show animation completes.
+ * @event hide - Emitted when a toast begins to hide. Cancelable.
+ * @event after-hide - Emitted after the hide animation completes and toast is removed.
+ *
+ * @cssproperty --gap - Gap between stacked toast items.
+ * @cssproperty --width - Width of the toast stack.
+ * @cssproperty --show-duration - Duration of the show animation.
+ * @cssproperty --hide-duration - Duration of the hide animation.
+ */
+export class LuxenToast extends LuxenElement {
+    constructor() {
+        super(...arguments);
+        /** Position of the toast stack on the screen. */
+        this.placement = 'top-end';
+        /** Default auto-dismiss delay in milliseconds. 0 disables auto-dismiss. */
+        this.duration = 5000;
+        /** Default variant for toast items: info, success, warning, danger. */
+        this.variant = '';
+        this._timers = new WeakMap();
+        this._positionCache = new WeakMap();
+        this._documentHidden = false;
+        // ── Document visibility ──────────────────────────────────────────────────────
+        this._onVisibilityChange = () => {
+            this._documentHidden = document.hidden;
+            const items = this.querySelectorAll(`:scope > ${tagName('toast-item')}`);
+            if (document.hidden) {
+                for (const item of items)
+                    this._pauseTimer(item);
+            }
+            else {
+                for (const item of items)
+                    this._resumeTimer(item);
+            }
+        };
+        // ── Keyboard ──────────────────────────────────────────────────────────────────
+        this._onKeyDown = (e) => {
+            if (e.key !== 'Escape')
+                return;
+            if (!this.matches(':popover-open'))
+                return;
+            const last = this.querySelector(`:scope > ${tagName('toast-item')}:last-of-type`);
+            if (last) {
+                e.preventDefault();
+                this._hideToast(last);
+            }
+        };
+    }
+    /** Use light DOM — no Shadow DOM. */
+    createRenderRoot() {
+        return this;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.popover = 'manual';
+        this.setAttribute('role', 'log');
+        this.setAttribute('aria-live', 'polite');
+        this.setAttribute('aria-relevant', 'additions');
+        document.addEventListener('keydown', this._onKeyDown);
+        document.addEventListener('visibilitychange', this._onVisibilityChange);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('keydown', this._onKeyDown);
+        document.removeEventListener('visibilitychange', this._onVisibilityChange);
+    }
+    /** Create and show a toast notification. */
+    toast(options) {
+        const { heading, variant = this.variant, duration = this.duration } = options;
+        // Build toast DOM
+        const uid = uniqueId('toast');
+        const toast = document.createElement(tagName('toast-item'));
+        if (variant)
+            toast.setAttribute('variant', variant);
+        toast.setAttribute('role', variant === 'danger' ? 'alert' : 'status');
+        toast.setAttribute('aria-atomic', 'true');
+        if (options.icon) {
+            const icon = document.createElement('iconify-icon');
+            icon.setAttribute('icon', options.icon);
+            icon.setAttribute('width', '20');
+            icon.setAttribute('height', '20');
+            icon.setAttribute('aria-hidden', 'true');
+            icon.className = cls('toast-icon');
+            toast.appendChild(icon);
+        }
+        else {
+            const accent = document.createElement('div');
+            accent.className = cls('toast-accent');
+            accent.setAttribute('aria-hidden', 'true');
+            toast.appendChild(accent);
+        }
+        const content = document.createElement('div');
+        content.className = cls('toast-content');
+        const textWrap = document.createElement('div');
+        if (heading) {
+            const headingEl = document.createElement('div');
+            headingEl.id = `${uid}-heading`;
+            headingEl.className = `${cls('toast-heading')} font-medium`;
+            headingEl.textContent = heading;
+            textWrap.appendChild(headingEl);
+            toast.setAttribute('aria-labelledby', `${uid}-heading`);
+        }
+        const messageEl = document.createElement('div');
+        messageEl.id = `${uid}-message`;
+        messageEl.className = cls('toast-message');
+        if ('html' in options && options.html) {
+            messageEl.setHTML(options.html);
+        }
+        else {
+            messageEl.textContent = options.text ?? '';
+        }
+        textWrap.appendChild(messageEl);
+        toast.setAttribute(heading ? 'aria-describedby' : 'aria-labelledby', `${uid}-message`);
+        content.appendChild(textWrap);
+        toast.appendChild(content);
+        const closeBtn = document.createElement('button');
+        closeBtn.type = 'button';
+        closeBtn.className = cls('close');
+        closeBtn.setAttribute('data-appearance', 'ring');
+        closeBtn.setAttribute('aria-label', 'Close');
+        closeBtn.addEventListener('click', () => this._hideToast(toast));
+        toast.appendChild(closeBtn);
+        // Timer bar (opt-in)
+        if (options.timer && duration > 0 && isFinite(duration)) {
+            const timerBar = document.createElement('div');
+            timerBar.className = cls('toast-timer');
+            timerBar.setAttribute('aria-hidden', 'true');
+            timerBar.style.setProperty('--_timer-duration', `${duration}ms`);
+            toast.appendChild(timerBar);
+        }
+        // FLIP: capture existing positions
+        this._capturePositions();
+        // Insert into container
+        if (this.placement.includes('bottom')) {
+            this.appendChild(toast);
+        }
+        else {
+            this.prepend(toast);
+        }
+        // Show popover if not already open
+        if (!this.matches(':popover-open')) {
+            this.showPopover();
+        }
+        // Dispatch show
+        if (!this.emit('show', { cancelable: true, detail: { toast } })) {
+            toast.remove();
+            return toast;
+        }
+        // Trigger show animation on next frame
+        requestAnimationFrame(() => {
+            toast.setAttribute('showing', '');
+            this._animatePositions();
+            const onShown = (e) => {
+                if (e.target !== toast)
+                    return;
+                toast.removeEventListener('transitionend', onShown);
+                this.emit('after-show', { detail: { toast } });
+            };
+            toast.addEventListener('transitionend', onShown);
+        });
+        // Auto-dismiss timer (0 or Infinity = persistent)
+        if (duration > 0 && isFinite(duration)) {
+            this._startTimer(toast, duration);
+        }
+        // Pause/resume timer on hover and focus
+        toast.addEventListener('pointerenter', () => this._pauseTimer(toast));
+        toast.addEventListener('pointerleave', () => this._resumeTimer(toast));
+        toast.addEventListener('focusin', () => this._pauseTimer(toast));
+        toast.addEventListener('focusout', () => this._resumeTimer(toast));
+        // ── Swipe-to-dismiss ──────────────────────────────────────────────────────
+        let swipeStart = null;
+        let swiping = false;
+        toast.addEventListener('pointerdown', (e) => {
+            if (e.button !== 0)
+                return;
+            if (e.target.closest('button, a, [role="button"]'))
+                return;
+            swipeStart = { x: e.clientX, y: e.clientY };
+            swiping = false;
+            toast.setPointerCapture(e.pointerId);
+            toast.style.transition = 'none';
+        });
+        // Only allow swiping away from the screen edge, never inward
+        const clampDelta = (dx) => this.placement.endsWith('-start')
+            ? Math.min(dx, 0)
+            : this.placement.endsWith('-end')
+                ? Math.max(dx, 0)
+                : dx;
+        toast.addEventListener('pointermove', (e) => {
+            if (!swipeStart)
+                return;
+            const deltaX = clampDelta(e.clientX - swipeStart.x);
+            const deltaY = e.clientY - swipeStart.y;
+            const buffer = e.pointerType === 'touch' ? 10 : 2;
+            if (!swiping && Math.abs(deltaX) < buffer)
+                return;
+            // If vertical movement dominates, cancel swipe tracking
+            if (!swiping && Math.abs(deltaY) > Math.abs(deltaX)) {
+                swipeStart = null;
+                return;
+            }
+            swiping = true;
+            this._pauseTimer(toast);
+            toast.style.transform = `translateX(${deltaX}px)`;
+            toast.style.opacity = `${1 - Math.abs(deltaX) / 300}`;
+        });
+        toast.addEventListener('pointerup', (e) => {
+            if (!swipeStart)
+                return;
+            const deltaX = clampDelta(e.clientX - swipeStart.x);
+            swipeStart = null;
+            toast.style.transition = '';
+            if (swiping && Math.abs(deltaX) > 50) {
+                const dir = deltaX > 0 ? 1 : -1;
+                toast.style.transform = `translateX(${dir * 120}%)`;
+                toast.style.opacity = '0';
+                toast.addEventListener('transitionend', () => this._hideToast(toast), { once: true });
+            }
+            else {
+                toast.style.transform = '';
+                toast.style.opacity = '';
+                if (swiping)
+                    this._resumeTimer(toast);
+            }
+            swiping = false;
+        });
+        return toast;
+    }
+    // ── Timer management ──────────────────────────────────────────────────────────
+    _startTimer(toast, duration) {
+        const timeoutId = window.setTimeout(() => this._hideToast(toast), duration);
+        this._timers.set(toast, {
+            remaining: duration,
+            startTime: performance.now(),
+            timeoutId,
+            paused: false,
+        });
+    }
+    _pauseTimer(toast) {
+        const timer = this._timers.get(toast);
+        if (!timer || timer.paused)
+            return;
+        clearTimeout(timer.timeoutId);
+        timer.remaining -= performance.now() - timer.startTime;
+        timer.paused = true;
+        // Use the Web Animations API to pause the countdown bar. CSS `animation-play-state`
+        // cannot be used here because browsers defer style recalculations while the tab is
+        // hidden, so the animation runs to completion before the style change takes effect.
+        const timerBar = toast.querySelector(`.${cls('toast-timer')}`);
+        if (timerBar)
+            for (const anim of timerBar.getAnimations())
+                anim.pause();
+    }
+    _resumeTimer(toast) {
+        const timer = this._timers.get(toast);
+        if (!timer || !timer.paused || timer.remaining <= 0 || this._documentHidden)
+            return;
+        timer.startTime = performance.now();
+        timer.timeoutId = window.setTimeout(() => this._hideToast(toast), timer.remaining);
+        timer.paused = false;
+        const timerBar = toast.querySelector(`.${cls('toast-timer')}`);
+        if (timerBar)
+            for (const anim of timerBar.getAnimations())
+                anim.play();
+    }
+    // ── Hide a toast ──────────────────────────────────────────────────────────────
+    _hideToast(toast) {
+        // Clear timer
+        const timer = this._timers.get(toast);
+        if (timer) {
+            clearTimeout(timer.timeoutId);
+            this._timers.delete(toast);
+        }
+        // Prevent double-hide
+        if (!toast.hasAttribute('showing'))
+            return;
+        // Dispatch hide
+        if (!this.emit('hide', { cancelable: true, detail: { toast } }))
+            return;
+        this._capturePositions();
+        // Remove showing class to trigger exit transition
+        toast.removeAttribute('showing');
+        const remove = () => {
+            toast.remove();
+            this._animatePositions();
+            this.emit('after-hide', { detail: { toast } });
+            // Close popover if no toasts remain
+            const remaining = this.querySelectorAll(`:scope > ${tagName('toast-item')}`);
+            if (remaining.length === 0 && this.matches(':popover-open')) {
+                this.hidePopover();
+            }
+        };
+        // Handle zero-duration transitions (reduced motion)
+        const duration = parseFloat(getComputedStyle(toast).transitionDuration);
+        if (duration === 0) {
+            remove();
+        }
+        else {
+            const onEnd = (e) => {
+                if (e.target !== toast)
+                    return;
+                toast.removeEventListener('transitionend', onEnd);
+                remove();
+            };
+            toast.addEventListener('transitionend', onEnd);
+        }
+    }
+    // ── FLIP animation for reordering ─────────────────────────────────────────────
+    _capturePositions() {
+        const items = this.querySelectorAll(`:scope > ${tagName('toast-item')}`);
+        for (const child of items) {
+            this._positionCache.set(child, child.getBoundingClientRect());
+        }
+    }
+    _animatePositions() {
+        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches)
+            return;
+        const items = this.querySelectorAll(`:scope > ${tagName('toast-item')}`);
+        for (const child of items) {
+            const oldRect = this._positionCache.get(child);
+            if (!oldRect)
+                continue;
+            const newRect = child.getBoundingClientRect();
+            const deltaY = oldRect.top - newRect.top;
+            if (Math.abs(deltaY) < 1)
+                continue;
+            child.animate([{ transform: `translateY(${deltaY}px)` }, { transform: 'translateY(0)' }], { duration: 200, easing: 'cubic-bezier(0.2, 0, 0, 1)' });
+        }
+    }
+}
+__decorate([
+    property({ reflect: true })
+], LuxenToast.prototype, "placement", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], LuxenToast.prototype, "duration", void 0);
+__decorate([
+    property({ reflect: true })
+], LuxenToast.prototype, "variant", void 0);
+// ── Standalone function ───────────────────────────────────────────────────────
+let _defaultInstance = null;
+function _getDefault() {
+    if (!_defaultInstance || !_defaultInstance.isConnected) {
+        _defaultInstance =
+            document.querySelector(tagName('toast')) ??
+                document.createElement(tagName('toast'));
+        if (!_defaultInstance.isConnected) {
+            document.body.appendChild(_defaultInstance);
+        }
+    }
+    return _defaultInstance;
+}
+/** Show a toast notification. Auto-creates `<l-toast>` if none exists in the DOM. */
+export function toast(options) {
+    return _getDefault().toast(options);
+}