atomicuilibrary 0.0.1

package/dist/collection/components/snackbar/snackbar.js

@@ -0,0 +1,1759 @@
+import { h } from "@stencil/core";
+import { sanitizeHTML } from "../../utils/security";
+export class Snackbar {
+    element;
+    /**
+     * Position of the snackbar container
+     */
+    position = 'top-right';
+    /**
+     * Maximum number of visible snackbars
+     */
+    maxVisible = 5;
+    /**
+     * Stack mode for snackbars (only applies when maxVisible > 1)
+     */
+    stackMode = 'stack';
+    /**
+     * Open animation mode for snackbars
+     */
+    openMode = 'slide-down';
+    /**
+     * Default variant for snackbars
+     */
+    variant = 'filled';
+    /**
+     * Default size for snackbars
+     */
+    size = 'md';
+    /**
+     * Default theme for notifications
+     */
+    theme = 'auto';
+    /**
+     * Enable card stacking mode - notifications stack like cards and expand on hover
+     */
+    cardStack = false;
+    /**
+     * Default group threshold (ms) - identical messages within this window are coalesced
+     */
+    groupThreshold = 3000;
+    /**
+     * Global default duration (ms) for notifications. 0 is infinite.
+     */
+    duration = 5000;
+    /**
+     * Enable smart grouping (coalescing) of identical messages
+     */
+    coalesce = false;
+    /**
+     * Maximum duration cap (ms). Any item duration above this value is clamped. 0 = no cap.
+     */
+    maxDuration = 0;
+    /**
+     * Show a live countdown chip (e.g. "3s") inside the notification before it closes.
+     * Only visible when duration > 0 and progress is set to 'bar' or 'ring'.
+     */
+    showCountdown = false;
+    /**
+     * Explicit text direction for this notification instance only.
+     * 'auto' reads the CSS computed direction of the element.
+     * 'rtl' / 'ltr' override immediately without touching the page layout.
+     */
+    textDirection = 'auto';
+    onTextDirectionChange() {
+        this.updateDir();
+    }
+    /**
+     * Default library for icons
+     */
+    iconLibrary = 'lucide';
+    /**
+     * Move snackbar to the bottom of the body automatically on load
+     */
+    portal = true;
+    /**
+     * Pause timers when the cursor hovers over the snackbar
+     */
+    pauseOnHover = true;
+    /**
+     * Pause timers when the window loses focus (e.g. tab switch)
+     */
+    pauseOnFocusLoss = true;
+    /**
+     * Sound mode: 'none' | 'synth' | 'custom'
+     */
+    soundMode = 'synth';
+    /**
+     * Enable CSS particle burst on 'sovereign' type notifications.
+     * Set to false to disable all particle effects.
+     */
+    particles = true;
+    /**
+     * Enable slot support for custom notification layouts
+     */
+    enableSlots = false;
+    /**
+     * Event emitted when a snackbar is closed
+     */
+    snackbarClosed;
+    /**
+     * Event emitted when a snackbar is added
+     */
+    snackbarAdded;
+    /**
+     * Event emitted when a snackbar is updated
+     */
+    snackbarUpdated;
+    /**
+     * Event emitted when a snackbar link is clicked
+     */
+    snackbarLinkClicked;
+    /**
+     * Event emitted when a snackbar action button is clicked
+     */
+    snackbarActionClicked;
+    snackbars = [];
+    visibleSnackbars = [];
+    animatedItems = new Set();
+    isHovered = false;
+    expandedSnackbars = new Set();
+    dragX = {};
+    isDragging = null;
+    dir = 'ltr';
+    /** Per-notification remaining seconds for the countdown chip (reactive) */
+    countdownSeconds = {};
+    timers = {};
+    startX = 0;
+    componentWillLoad() {
+        this.updateVisibleSnackbars();
+        // Detect RTL direction from ancestral context
+        this.updateDir();
+        // Add global key listener
+        window.addEventListener('keydown', this.handleGlobalKeyDown);
+        // Portal to body if requested
+        if (this.portal && document.body && this.element.parentElement !== document.body) {
+            document.body.appendChild(this.element);
+        }
+        window.addEventListener('blur', () => this.handleWindowBlur());
+        window.addEventListener('focus', () => this.handleWindowFocus());
+    }
+    updateDir() {
+        // Explicit prop takes priority — never reads nor touches the page dir
+        if (this.textDirection === 'rtl') {
+            this.dir = 'rtl';
+            return;
+        }
+        if (this.textDirection === 'ltr') {
+            this.dir = 'ltr';
+            return;
+        }
+        // 'auto': respect only the element's own CSS computed direction
+        // (inherited from a parent that has dir set — NOT the global html element)
+        const computed = getComputedStyle(this.element).direction;
+        this.dir = (computed === 'rtl') ? 'rtl' : 'ltr';
+    }
+    disconnectedCallback() {
+        window.removeEventListener('keydown', this.handleGlobalKeyDown);
+        window.removeEventListener('blur', () => this.handleWindowBlur());
+        window.removeEventListener('focus', () => this.handleWindowFocus());
+    }
+    handleGlobalKeyDown = (e) => {
+        if (e.key === 'Escape' && this.snackbars.length > 0) {
+            e.preventDefault();
+            e.stopPropagation();
+            this.closeAll();
+        }
+    };
+    positionChanged() {
+        this.updateVisibleSnackbars();
+    }
+    maxVisibleChanged() {
+        this.updateVisibleSnackbars();
+    }
+    stackModeChanged() {
+        this.updateVisibleSnackbars();
+    }
+    handleWindowBlur() {
+        if (this.pauseOnFocusLoss)
+            this.isHovered = true;
+    }
+    handleWindowFocus() {
+        if (this.pauseOnFocusLoss) {
+            this.isHovered = false;
+            // Reset times to avoid jumps
+            const now = Date.now();
+            Object.values(this.timers).forEach(timer => {
+                timer.lastTime = now;
+            });
+        }
+    }
+    updateVisibleSnackbars() {
+        this.visibleSnackbars = [...this.snackbars]
+            .sort((a, b) => {
+            if (a.priority === 'urgent' && b.priority !== 'urgent')
+                return -1;
+            if (a.priority !== 'urgent' && b.priority === 'urgent')
+                return 1;
+            return 0;
+        })
+            .slice(0, this.maxVisible);
+    }
+    async add(item) {
+        if (this.coalesce) {
+            const existingIndex = this.snackbars.findIndex(it => it.message === item.message &&
+                it.type === item.type);
+            if (existingIndex !== -1) {
+                const existingId = this.snackbars[existingIndex].id;
+                const history = this.snackbars[existingIndex].history || [];
+                this.update(existingId, {
+                    count: (this.snackbars[existingIndex].count || 1) + 1,
+                    duration: item.duration || this.snackbars[existingIndex].duration || this.duration,
+                    history: [...history, { message: item.message, title: item.title, timestamp: Date.now() }]
+                });
+                return existingId;
+            }
+        }
+        const id = this.generateId();
+        const snackbarItem = {
+            id,
+            type: item.type || 'info',
+            title: item.title,
+            message: item.message,
+            html: item.html || false,
+            avatar: item.avatar,
+            icon: item.icon,
+            iconLibrary: item.iconLibrary || this.iconLibrary,
+            link: item.link,
+            action: item.action,
+            actions: item.actions || [],
+            duration: item.duration === 0 ? 0 : this.clampDuration(item.duration || this.duration),
+            variant: item.variant || this.variant,
+            size: item.size || this.size,
+            customClass: item.customClass,
+            closable: item.closable !== false,
+            count: 1,
+            haptic: item.haptic || (item.type === 'error'),
+            sound: item.sound,
+            progress: item.progress || 'bar',
+            priority: item.priority || (item.type === 'error' ? 'urgent' : 'high'),
+            theme: item.theme || this.theme,
+            input: item.input,
+            sticky: !!item.sticky,
+            onClose: item.onClose,
+            slot: item.slot,
+            history: [{ message: item.message, title: item.title, timestamp: Date.now() }]
+        };
+        if (snackbarItem.type === 'sovereign' && this.particles) {
+            this.spawnParticles(id);
+        }
+        if (snackbarItem.haptic && 'vibrate' in navigator) {
+            if (snackbarItem.type === 'sovereign') {
+                navigator.vibrate([100, 30, 100, 30, 100]);
+            }
+            else {
+                navigator.vibrate(snackbarItem.type === 'error' ? [50, 50, 50] : 30);
+            }
+        }
+        if (this.soundMode === 'synth') {
+            this.playSynthSound(snackbarItem.type);
+        }
+        else if (snackbarItem.sound) {
+            new Audio(snackbarItem.sound).play().catch(() => { });
+        }
+        if (this.stackMode === 'stack' || this.stackMode === 'lifo') {
+            this.snackbars = [snackbarItem, ...this.snackbars];
+        }
+        else {
+            this.snackbars = [...this.snackbars, snackbarItem];
+        }
+        if (this.snackbars.length > this.maxVisible) {
+            const toRemove = this.snackbars[this.snackbars.length - 1];
+            this.close(toRemove.id);
+        }
+        this.updateVisibleSnackbars();
+        this.startTimer(id, snackbarItem.duration ?? 0);
+        this.snackbarAdded.emit({ id, item: snackbarItem });
+        return id;
+    }
+    clampDuration(ms) {
+        if (this.maxDuration > 0 && ms > this.maxDuration)
+            return this.maxDuration;
+        return ms;
+    }
+    async close(id) {
+        const index = this.snackbars.findIndex(item => item.id === id);
+        if (index === -1)
+            return;
+        if (this.timers[id]) {
+            cancelAnimationFrame(this.timers[id].id);
+            delete this.timers[id];
+        }
+        this.animatedItems.add(`${id}-closing`);
+        // Immediate removal to keep UI responsive as requested
+        if (this.snackbars[index]?.onClose)
+            this.snackbars[index].onClose();
+        this.snackbarClosed.emit({ id, item: this.snackbars[index] });
+        this.snackbars = this.snackbars.filter(item => item.id !== id);
+        this.animatedItems.delete(id);
+        this.animatedItems.delete(`${id}-closing`);
+        // Clean up countdown state for this item
+        if (this.countdownSeconds[id] !== undefined) {
+            const { [id]: _removed, ...rest } = this.countdownSeconds;
+            this.countdownSeconds = rest;
+        }
+        this.updateVisibleSnackbars();
+    }
+    async closeAll() {
+        Object.values(this.timers).forEach(t => cancelAnimationFrame(t.id));
+        this.timers = {};
+        this.snackbars.forEach(item => {
+            if (item.onClose)
+                item.onClose();
+            this.snackbarClosed.emit({ id: item.id, item });
+        });
+        this.snackbars = [];
+        this.visibleSnackbars = [];
+        this.animatedItems.clear();
+    }
+    async closeNext() {
+        if (this.snackbars.length === 0)
+            return;
+        let idToClose;
+        if (this.stackMode === 'queue') {
+            // FIFO: close the oldest item (last in array since newest is first)
+            idToClose = this.snackbars[this.snackbars.length - 1].id;
+        }
+        else {
+            // stack / lifo: close the top-most (first in array = newest)
+            idToClose = this.snackbars[0].id;
+        }
+        await this.close(idToClose);
+    }
+    /**
+     * Returns all current notifications
+     */
+    async getAll() {
+        return [...this.snackbars];
+    }
+    /**
+     * Pause timer for a specific notification
+     */
+    async pause(id) {
+        if (this.timers[id]) {
+            cancelAnimationFrame(this.timers[id].id);
+            this.timers[id].id = 0;
+        }
+    }
+    /**
+     * Resume timer for a specific notification
+     */
+    async resume(id) {
+        if (this.timers[id] && this.timers[id].id === 0 && this.timers[id].remaining > 0) {
+            this.timers[id].lastTime = Date.now();
+            const loop = () => {
+                if (!this.timers[id])
+                    return;
+                const now = Date.now();
+                const delta = now - this.timers[id].lastTime;
+                this.timers[id].lastTime = now;
+                if (!this.isHovered)
+                    this.timers[id].remaining -= delta;
+                if (this.timers[id].remaining <= 0) {
+                    this.close(id);
+                }
+                else {
+                    this.timers[id].id = requestAnimationFrame(loop);
+                }
+            };
+            this.timers[id].id = requestAnimationFrame(loop);
+        }
+    }
+    /**
+     * Replace an existing notification completely
+     */
+    async replace(id, newItem) {
+        const index = this.snackbars.findIndex(it => it.id === id);
+        if (index === -1)
+            return;
+        const replacedItem = { ...newItem, id };
+        const newSnackbars = [...this.snackbars];
+        newSnackbars[index] = replacedItem;
+        this.snackbars = newSnackbars;
+        this.updateVisibleSnackbars();
+        // Restart timer
+        if (this.timers[id]) {
+            cancelAnimationFrame(this.timers[id].id);
+            delete this.timers[id];
+        }
+        if ((replacedItem.duration ?? 0) > 0)
+            this.startTimer(id, replacedItem.duration);
+        this.snackbarUpdated.emit({ id, item: replacedItem });
+    }
+    async promise(promise, data) {
+        const id = await this.add({
+            type: 'loading',
+            message: data.loading,
+            duration: 0,
+            closable: true
+        });
+        try {
+            const res = await (typeof promise === 'function' ? promise() : promise);
+            const successMsg = typeof data.success === 'function' ? data.success(res) : data.success;
+            this.update(id, {
+                type: 'success',
+                message: successMsg,
+                duration: data.duration || 4000,
+                closable: true
+            });
+            return res;
+        }
+        catch (err) {
+            const errorMsg = typeof data.error === 'function' ? data.error(err) : data.error;
+            this.update(id, {
+                type: 'error',
+                message: errorMsg,
+                duration: data.duration || 5000,
+                closable: true
+            });
+            throw err;
+        }
+    }
+    async undoable(data) {
+        const id = await this.add({
+            message: data.message,
+            title: data.title,
+            type: data.type || 'neutral',
+            duration: data.duration || 6000,
+            action: data.action || {
+                label: 'UNDO',
+                onClick: () => {
+                    data.onUndo();
+                    this.close(id);
+                }
+            },
+            link: data.link
+        });
+        const listener = (event) => {
+            if (event.detail.id === id) {
+                if (data.onDismiss)
+                    data.onDismiss();
+                this.element.removeEventListener('snackbarClosed', listener);
+            }
+        };
+        this.element.addEventListener('snackbarClosed', listener);
+        return id;
+    }
+    async update(id, updates) {
+        const index = this.snackbars.findIndex(it => it.id === id);
+        if (index !== -1) {
+            const countChanged = updates.count !== undefined && updates.count !== this.snackbars[index].count;
+            const updatedItem = { ...this.snackbars[index], ...updates };
+            const newSnackbars = [...this.snackbars];
+            newSnackbars[index] = updatedItem;
+            this.snackbars = newSnackbars;
+            this.updateVisibleSnackbars();
+            if (countChanged) {
+                this.triggerBadgePulse(id);
+            }
+            if (updates.duration !== undefined) {
+                if (this.timers[id]) {
+                    cancelAnimationFrame(this.timers[id].id);
+                    delete this.timers[id];
+                }
+                if (updates.duration > 0) {
+                    this.startTimer(id, updates.duration);
+                }
+            }
+            this.snackbarUpdated.emit({ id, item: updatedItem });
+        }
+    }
+    generateId() {
+        return `snackbar-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    }
+    startTimer(id, duration) {
+        const item = this.snackbars.find(s => s.id === id);
+        if (duration <= 0 || (item && item.sticky))
+            return;
+        this.timers[id] = {
+            remaining: duration,
+            lastTime: Date.now(),
+            duration: duration,
+            id: 0
+        };
+        const loop = () => {
+            if (!this.timers[id])
+                return;
+            const now = Date.now();
+            const delta = now - this.timers[id].lastTime;
+            this.timers[id].lastTime = now;
+            if (!this.isHovered) {
+                this.timers[id].remaining -= delta;
+            }
+            const progress = Math.min(100, Math.max(0, 100 - (this.timers[id].remaining / this.timers[id].duration) * 100));
+            const progressBar = this.getProgressBarElement(id);
+            if (progressBar) {
+                progressBar.style.width = `${progress}%`;
+            }
+            const progressRing = this.getProgressRingElement(id);
+            if (progressRing) {
+                const offset = 56.5 - (progress / 100) * 56.5;
+                progressRing.style.strokeDashoffset = `${offset}`;
+            }
+            // Countdown chip — update reactive state once per second so Stencil
+            // re-renders the value without direct DOM manipulation (which would be
+            // overwritten on the next virtual-DOM reconciliation).
+            if (this.showCountdown) {
+                const newSecs = Math.ceil(this.timers[id].remaining / 1000);
+                if (this.countdownSeconds[id] !== newSecs) {
+                    this.countdownSeconds = { ...this.countdownSeconds, [id]: newSecs };
+                }
+            }
+            if (this.timers[id].remaining <= 0) {
+                this.close(id);
+            }
+            else {
+                this.timers[id].id = requestAnimationFrame(loop);
+            }
+        };
+        this.timers[id].id = requestAnimationFrame(loop);
+    }
+    getProgressBarElement(id) {
+        return this.element.shadowRoot?.querySelector(`[data-snackbar-id="${id}"] .snackbar-progress`);
+    }
+    getProgressRingElement(id) {
+        return this.element.shadowRoot?.querySelector(`[data-snackbar-id="${id}"] .snackbar-progress-ring circle`);
+    }
+    handleCloseClick = (id) => {
+        this.close(id);
+    };
+    handleLinkClick = (id, item) => {
+        if (item.link) {
+            this.snackbarLinkClicked.emit({ id, item, link: item.link });
+        }
+    };
+    playSynthSound(type) {
+        try {
+            const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+            const oscillator = audioCtx.createOscillator();
+            const gainNode = audioCtx.createGain();
+            oscillator.connect(gainNode);
+            gainNode.connect(audioCtx.destination);
+            if (type === 'success' || type === 'sovereign') {
+                oscillator.type = 'sine';
+                oscillator.frequency.setValueAtTime(880, audioCtx.currentTime);
+                oscillator.frequency.exponentialRampToValueAtTime(1320, audioCtx.currentTime + 0.1);
+                gainNode.gain.setValueAtTime(0.05, audioCtx.currentTime);
+                gainNode.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.3);
+            }
+            else if (type === 'error' || type === 'warning') {
+                oscillator.type = 'square';
+                oscillator.frequency.setValueAtTime(220, audioCtx.currentTime);
+                oscillator.frequency.exponentialRampToValueAtTime(110, audioCtx.currentTime + 0.1);
+                gainNode.gain.setValueAtTime(0.05, audioCtx.currentTime);
+                gainNode.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.4);
+            }
+            else {
+                oscillator.type = 'sine';
+                oscillator.frequency.setValueAtTime(440, audioCtx.currentTime);
+                gainNode.gain.setValueAtTime(0.03, audioCtx.currentTime);
+                gainNode.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.2);
+            }
+            oscillator.start();
+            oscillator.stop(audioCtx.currentTime + 0.5);
+        }
+        catch (e) { }
+    }
+    toggleExpand(id) {
+        const newExpanded = new Set(this.expandedSnackbars);
+        if (newExpanded.has(id)) {
+            newExpanded.delete(id);
+        }
+        else {
+            newExpanded.add(id);
+        }
+        this.expandedSnackbars = newExpanded;
+    }
+    triggerBadgePulse(id) {
+        const badge = this.element.shadowRoot?.querySelector(`[data-snackbar-id="${id}"] .snackbar-badge`);
+        if (badge) {
+            badge.classList.remove('pulse');
+            void badge.offsetWidth;
+            badge.classList.add('pulse');
+        }
+    }
+    spawnParticles(id) {
+        if (typeof window === 'undefined')
+            return;
+        // Lightweight CSS-only particle burst.
+        // All motion is handled by @keyframes in snackbar.scss — no WAAPI needed.
+        const EMOJIS = ['✨', '⭐', '💫', '🌟'];
+        const COUNTS = { burst: 10, float: 8, glint: 6 };
+        setTimeout(() => {
+            const container = this.element.shadowRoot?.querySelector(`[data-snackbar-id="${id}"]`);
+            if (!container)
+                return;
+            if (getComputedStyle(container).position === 'static') {
+                container.style.position = 'relative';
+                container.style.overflow = 'visible';
+            }
+            const spawn = (type, index, total) => {
+                const p = document.createElement('span');
+                p.className = `sb-particle sb-particle--${type}`;
+                const angle = (Math.PI * 2 * index) / total;
+                const velocity = 80 + Math.random() * 120;
+                const tx = Math.round(Math.cos(angle) * velocity);
+                const ty = Math.round(Math.sin(angle) * velocity);
+                const rotation = Math.round(Math.random() * 1080 - 540);
+                const duration = (1.0 + Math.random() * 0.8).toFixed(2);
+                const delay = (Math.random() * 0.15).toFixed(2);
+                if (type === 'burst') {
+                    const size = (6 + Math.random() * 6).toFixed(1);
+                    p.style.cssText = `--tx:${tx};--ty:${ty};--r:${rotation};--d:${duration}s;--delay:${delay}s;--size:${size}px`;
+                }
+                else if (type === 'float') {
+                    const size = (12 + Math.random() * 10).toFixed(1);
+                    p.textContent = EMOJIS[Math.floor(Math.random() * EMOJIS.length)];
+                    p.style.cssText = `--tx:${tx};--ty:${ty};--r:${rotation};--d:${duration}s;--delay:${delay}s;--size:${size}px`;
+                }
+                else {
+                    const size = (4 + Math.random() * 5).toFixed(1);
+                    const ox = Math.round((Math.random() - 0.5) * 60);
+                    const oy = Math.round((Math.random() - 0.5) * 30);
+                    p.style.cssText = `top:calc(50% + ${oy}px);left:calc(50% + ${ox}px);--d:${(0.6 + Math.random() * 0.5).toFixed(2)}s;--delay:${delay}s;--size:${size}px`;
+                }
+                container.appendChild(p);
+                // Remove after the animation finishes (duration + delay + 50ms grace)
+                const cleanupMs = (parseFloat(duration) + parseFloat(delay)) * 1000 + 50;
+                setTimeout(() => p.remove(), cleanupMs);
+            };
+            let bi = 0, fi = 0, gi = 0;
+            const total = COUNTS.burst + COUNTS.float + COUNTS.glint;
+            for (let i = 0; i < total; i++) {
+                const roll = i % 3;
+                if (roll === 0 && bi < COUNTS.burst) {
+                    spawn('burst', bi++, COUNTS.burst);
+                }
+                else if (roll === 1 && fi < COUNTS.float) {
+                    spawn('float', fi++, COUNTS.float);
+                }
+                else if (gi < COUNTS.glint) {
+                    spawn('glint', gi++, COUNTS.glint);
+                }
+            }
+        }, 80);
+    }
+    handleKeyDown = (e, id, index) => {
+        if (e.key === 'Delete' || e.key === 'Backspace') {
+            this.close(id);
+        }
+        else if (e.key === 'ArrowDown') {
+            const next = this.element.shadowRoot?.querySelector(`[data-stack-index="${index + 1}"]`);
+            if (next)
+                next.focus();
+        }
+        else if (e.key === 'ArrowUp') {
+            const prev = this.element.shadowRoot?.querySelector(`[data-stack-index="${index - 1}"]`);
+            if (prev)
+                prev.focus();
+        }
+    };
+    handleActionClick = (id, item) => {
+        this.snackbarActionClicked.emit({ id, item });
+        if (item.action && item.action.onClick) {
+            item.action.onClick();
+        }
+    };
+    handleMouseDown = (e, id) => {
+        this.isDragging = id;
+        this.startX = e.clientX;
+        this.dragX = { ...this.dragX, [id]: 0 };
+        document.addEventListener('mousemove', this.handleMouseMove);
+        document.addEventListener('mouseup', this.handleMouseUp);
+    };
+    handleMouseMove = (e) => {
+        if (!this.isDragging)
+            return;
+        const currentX = e.clientX;
+        const diff = currentX - this.startX;
+        this.dragX = { ...this.dragX, [this.isDragging]: diff };
+    };
+    handleMouseUp = () => {
+        if (!this.isDragging)
+            return;
+        const id = this.isDragging;
+        const offset = this.dragX[id] || 0;
+        if (Math.abs(offset) > 120) {
+            this.dragX = { ...this.dragX, [id]: offset > 0 ? 500 : -500 };
+            setTimeout(() => this.close(id), 200);
+        }
+        else {
+            this.dragX = { ...this.dragX, [id]: 0 };
+        }
+        this.isDragging = null;
+        document.removeEventListener('mousemove', this.handleMouseMove);
+        document.removeEventListener('mouseup', this.handleMouseUp);
+    };
+    handleMouseEnter = () => {
+        if (!this.pauseOnHover)
+            return;
+        this.isHovered = true;
+        const now = Date.now();
+        Object.values(this.timers).forEach(timer => {
+            timer.lastTime = now;
+        });
+    };
+    handleTouchStart = (e, id) => {
+        this.isDragging = id;
+        this.startX = e.touches[0].clientX;
+        this.dragX = { ...this.dragX, [id]: 0 };
+    };
+    handleTouchMove = (e, id) => {
+        if (this.isDragging !== id)
+            return;
+        const currentX = e.touches[0].clientX;
+        const diff = currentX - this.startX;
+        // RTL: invert resistance direction
+        const isRight = this.dir === 'rtl' ? this.position.includes('left') : this.position.includes('right');
+        const isLeft = this.dir === 'rtl' ? this.position.includes('right') : this.position.includes('left');
+        const resistance = (isRight && diff < 0) || (isLeft && diff > 0) ? 0.2 : 1;
+        this.dragX = { ...this.dragX, [id]: diff * resistance };
+        if (Math.abs(diff) > 10)
+            e.preventDefault();
+    };
+    handleTouchEnd = (id) => {
+        if (this.isDragging !== id)
+            return;
+        const offset = this.dragX[id] || 0;
+        const threshold = 100;
+        // RTL: mirror the dismiss direction for left/right anchored positions
+        const isRight = this.dir === 'rtl' ? this.position.includes('left') : this.position.includes('right');
+        const isLeft = this.dir === 'rtl' ? this.position.includes('right') : this.position.includes('left');
+        const shouldDismiss = (isRight && offset > threshold) ||
+            (isLeft && offset < -threshold) ||
+            (this.position.includes('center') && Math.abs(offset) > threshold);
+        if (shouldDismiss) {
+            this.dragX = { ...this.dragX, [id]: offset > 0 ? 500 : -500 };
+            setTimeout(() => this.close(id), 200);
+        }
+        else {
+            this.dragX = { ...this.dragX, [id]: 0 };
+        }
+        this.isDragging = null;
+    };
+    handleMouseLeave = () => {
+        if (!this.pauseOnHover)
+            return;
+        this.isHovered = false;
+        const now = Date.now();
+        Object.values(this.timers).forEach(timer => {
+            timer.lastTime = now;
+        });
+    };
+    handleInputSubmit = (id, item, value) => {
+        if (item.input && item.input.onSubmit) {
+            item.input.onSubmit(value);
+            this.close(id);
+        }
+    };
+    renderIcon(item) {
+        if (item.avatar) {
+            return (h("div", { class: "snackbar-avatar" }, h("img", { src: item.avatar, alt: "" })));
+        }
+        if (item.icon) {
+            return (h("div", { class: "snackbar-custom-icon" }, h("ui-icon", { name: item.icon, library: item.iconLibrary || this.iconLibrary, size: "1.5rem" })));
+        }
+        const type = item.type;
+        if (type === 'success') {
+            return (h("div", { class: `snackbar-icon-draw ${type}` }, h("svg", { viewBox: "0 0 52 52" }, h("circle", { class: "circle", cx: "26", cy: "26", r: "25", fill: "none" }), h("path", { class: "check", fill: "none", d: "M14.1 27.2l7.1 7.2 16.7-16.8" }))));
+        }
+        if (type === 'error') {
+            return (h("div", { class: `snackbar-icon-draw ${type}` }, h("svg", { viewBox: "0 0 52 52" }, h("circle", { class: "circle", cx: "26", cy: "26", r: "25", fill: "none" }), h("path", { class: "cross", fill: "none", d: "M16 16 36 36 M36 16 16 36" }))));
+        }
+        const icons = {
+            success: h("ui-icon", { name: "check-circle", library: this.iconLibrary, size: "1.25em", style: { color: 'var(--color-success-600)' } }),
+            error: h("ui-icon", { name: "alert-circle", library: this.iconLibrary, size: "1.25em", style: { color: 'var(--color-danger-600)' } }),
+            warning: h("ui-icon", { name: "alert-triangle", library: this.iconLibrary, size: "1.25em", style: { color: 'var(--color-warning-600)' } }),
+            info: h("ui-icon", { name: "info", library: this.iconLibrary, size: "1.25em", style: { color: 'var(--color-info-600)' } }),
+            neutral: h("ui-icon", { name: "bell", library: this.iconLibrary, size: "1.25em", style: { color: 'var(--color-neutral-600, #6b7280)' } }),
+            loading: h("span", { class: "snackbar-loading-spinner" }),
+            sovereign: h("ui-icon", { name: "crown", library: this.iconLibrary, size: "1.25em", style: { color: '#fbbf24' } })
+        };
+        return h("div", { class: `snackbar-icon ${type}` }, icons[type]);
+    }
+    getAriaLive(item) {
+        if (item.priority === 'urgent')
+            return 'assertive';
+        return (item.priority === 'high' || item.type === 'error') ? 'polite' : 'off';
+    }
+    render() {
+        const containerClasses = `snackbar-container ${this.position} ${this.cardStack ? 'card-stack' : ''} ${this.isHovered ? 'hovered' : ''} ${this.dir === 'rtl' ? 'rtl' : ''}`;
+        return (h("div", { key: '2ca2794f89a74dc183c6490ffcc65e493eaaea30', class: containerClasses, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, role: (this.visibleSnackbars.some(s => s.type === 'error' || s.priority === 'urgent')) ? 'alert' : 'status', "aria-atomic": "true" }, this.snackbars.length > 1 && (h("ui-button", { key: 'e8288b58adc2f402e120dcacbb3d88993d535123', variant: "ghost", size: "sm", icon: "list-x", iconLibrary: this.iconLibrary, iconSize: "14px", onClick: () => this.closeAll(), ariaLabel: "Clear all notifications", class: "snackbar-clear-all", label: `Clear All (${this.snackbars.length})` }, h("span", { key: '608cb677315ac751d626e2d615ca4636e9d4a11e', class: "kb-hint", slot: "end" }, "Esc"))), this.cardStack && !this.isHovered && this.snackbars.length > 1 && (h("div", { key: '63bfc95aa5d3b7b5daa77cd286eadf2a57fcfcb4', class: "stack-count-badge", onClick: () => { this.isHovered = true; }, title: "Click to expand all notifications" }, h("span", { key: '1b3e099e53747efe22a51b6d27aacf7e7b2ad069', class: "stack-count-number" }, this.snackbars.length), h("span", { key: 'e2c05e3e0334dfe39043a0bdbc05680de497f473', class: "stack-count-label" }, "notifications"))), this.visibleSnackbars.map((item, index) => {
+            const stackOffset = this.cardStack && !this.isHovered ? index : 0;
+            const isClosing = this.animatedItems.has(`${item.id}-closing`);
+            return (h("div", { key: item.id, "data-snackbar-id": item.id, "data-stack-index": index, class: `snackbar-item ${item.type} ${item.variant || 'filled'} ${item.size || 'md'} ${this.openMode} ${item.customClass || ''} ${this.isDragging === item.id ? 'dragging' : ''} ${isClosing ? 'closing' : ''} theme-${item.theme || this.theme}`, style: {
+                    animationDelay: `${index * 0.1}s`,
+                    '--stack-index': `${stackOffset}`,
+                    'transform': this.dragX[item.id] ? `translateX(${this.dragX[item.id]}px) rotate(${this.dragX[item.id] / 20}deg)` : undefined,
+                    'opacity': this.dragX[item.id] ? `${Math.max(0, 1 - Math.abs(this.dragX[item.id]) / 400)}` : undefined,
+                    'cursor': this.isDragging === item.id ? 'grabbing' : undefined
+                }, role: this.getAriaLive(item) !== 'off' ? 'log' : undefined, "aria-live": this.getAriaLive(item), onMouseDown: (e) => this.handleMouseDown(e, item.id), onKeyDown: (e) => this.handleKeyDown(e, item.id, index), onTouchStart: (e) => this.handleTouchStart(e, item.id), onTouchMove: (e) => this.handleTouchMove(e, item.id), onTouchEnd: () => this.handleTouchEnd(item.id), tabIndex: 0 }, h("div", { class: "item-main-row" }, this.renderIcon(item), h("div", { class: "snackbar-content" }, h("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' } }, item.title && h("div", { class: "snackbar-title", "aria-label": `Title: ${item.title}` }, item.title), (item.count ?? 0) > 1 && (h("ui-button", { variant: "ghost", size: "sm", onClick: () => this.toggleExpand(item.id), ariaLabel: `${item.count} occurrences. Click to toggle history.`, label: `${item.count}`, icon: this.expandedSnackbars.has(item.id) ? 'chevron-up' : 'chevron-down', iconLibrary: this.iconLibrary, iconSize: "10px", iconPosition: "right" }))), this.expandedSnackbars.has(item.id) && item.history && (h("div", { class: "snackbar-history" }, item.history.map((historyEntry, i) => (h("div", { class: "history-item", key: i }, h("span", { class: "history-time" }, new Date(historyEntry.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })), h("span", { class: "history-msg" }, historyEntry.message)))))), item.html ? (h("div", { class: "snackbar-message", innerHTML: sanitizeHTML(item.message), role: "document" })) : item.slot ? (h("div", { class: "snackbar-slot-content" }, h("slot", { name: item.slot }))) : (h("p", { class: "snackbar-message", "aria-label": `Message: ${item.message}` }, item.message))), item.closable !== false && (h("ui-button", { variant: "ghost", size: "sm", iconOnly: true, icon: "x", iconLibrary: this.iconLibrary, iconSize: "1.2em", onButtonClick: () => this.handleCloseClick(item.id), ariaLabel: "Close snackbar", class: "snackbar-close" }))), item.input && (h("div", { class: "snackbar-quick-input" }, h("ui-input", { type: item.input.type || 'text', placeholder: item.input.placeholder, onInputKeydown: (e) => {
+                    if (e.detail.key === 'Enter')
+                        this.handleInputSubmit(item.id, item, e.detail.target.value);
+                }, autoFocus: true, size: "sm", fullWidth: true }))), (item.link || item.action || (item.actions && item.actions.length > 0)) && (h("div", { class: "snackbar-actions" }, item.action && (h("ui-button", { variant: "ghost", size: "sm", onButtonClick: () => this.handleActionClick(item.id, item), icon: item.action.icon, iconLibrary: this.iconLibrary, iconSize: "12px", label: item.action.label })), item.actions && item.actions.map(action => (h("ui-button", { variant: action.variant, size: "sm", onButtonClick: () => {
+                    if (action.onClick)
+                        action.onClick();
+                    this.handleActionClick(item.id, item);
+                },
+                // class={`snackbar-action-btn variant-${action.variant || 'secondary'}`}
+                icon: action.icon, iconLibrary: this.iconLibrary, iconSize: "12px", label: action.label }))), item.link && (h("a", { class: "snackbar-link", href: item.link.url, onClick: (e) => {
+                    e.preventDefault();
+                    this.handleLinkClick(item.id, item);
+                } }, item.link.text)))), (item.duration ?? 0) > 0 && item.progress === 'ring' && (h("svg", { class: "snackbar-progress-ring", viewBox: "0 0 20 20", "aria-hidden": "true" }, h("circle", { cx: "10", cy: "10", r: "9" }))), (item.duration ?? 0) > 0 && item.progress !== 'ring' && (h("div", { class: `snackbar-progress ${item.type}`, "aria-hidden": "true" })), (item.duration ?? 0) > 0 && this.showCountdown && !item.sticky && (h("span", { class: "snackbar-countdown", "aria-hidden": "true" }, this.countdownSeconds[item.id] ?? Math.ceil((item.duration ?? 0) / 1000), "s")), item.history && item.history.length > 1 && (h("div", { class: "snackbar-history-indicator" }, h("ui-button", { variant: "ghost", size: "sm", onButtonClick: (e) => {
+                    const originalEvent = e.detail; // Get the native event from CustomEvent detail
+                    originalEvent.stopPropagation();
+                    const itemEl = originalEvent.currentTarget.closest('.snackbar-item');
+                    const isExpanded = itemEl?.classList.toggle('history-expanded');
+                    const btn = originalEvent.currentTarget;
+                    btn.label = isExpanded ? `Hide history` : `View previous history (${(item.history ?? []).length - 1})`;
+                }, label: `View previous history (${(item.history ?? []).length - 1})` }), h("div", { class: "snackbar-history-list" }, item.history.slice(0, -1).reverse().map(historyEntry => (h("div", { class: "history-item" }, h("span", { class: "history-time" }, new Date(historyEntry.timestamp).toLocaleTimeString()), h("span", { class: "history-msg" }, historyEntry.message)))))))));
+        }), this.enableSlots && h("slot", { key: '5a2fd1ebe5ba293ecf8dae3e83cbfe40ce25c995' })));
+    }
+    componentDidRender() {
+        this.visibleSnackbars.forEach(item => {
+            if (!this.animatedItems.has(item.id)) {
+                this.animatedItems.add(item.id);
+                setTimeout(() => {
+                    const element = this.element.shadowRoot?.querySelector(`[data-snackbar-id="${item.id}"]`);
+                    if (element)
+                        element.classList.add('show');
+                }, 10);
+            }
+        });
+    }
+    static get is() { return "ui-snackbar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["snackbar.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["snackbar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SnackbarPosition",
+                    "resolved": "\"bottom-center\" | \"bottom-left\" | \"bottom-right\" | \"top-center\" | \"top-left\" | \"top-right\"",
+                    "references": {
+                        "SnackbarPosition": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/snackbar/types.ts::SnackbarPosition",
+                            "referenceLocation": "SnackbarPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Position of the snackbar container"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "position",
+                "defaultValue": "'top-right'"
+            },
+            "maxVisible": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum number of visible snackbars"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-visible",
+                "defaultValue": "5"
+            },
+            "stackMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SnackbarStackMode",
+                    "resolved": "\"lifo\" | \"queue\" | \"stack\"",
+                    "references": {
+                        "SnackbarStackMode": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/snackbar/types.ts::SnackbarStackMode",
+                            "referenceLocation": "SnackbarStackMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Stack mode for snackbars (only applies when maxVisible > 1)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "stack-mode",
+                "defaultValue": "'stack'"
+            },
+            "openMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SnackbarOpenMode",
+                    "resolved": "\"bounce\" | \"fade\" | \"scale\" | \"slide-down\" | \"slide-left\" | \"slide-right\" | \"slide-up\" | \"spring\"",
+                    "references": {
+                        "SnackbarOpenMode": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/snackbar/types.ts::SnackbarOpenMode",
+                            "referenceLocation": "SnackbarOpenMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Open animation mode for snackbars"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "open-mode",
+                "defaultValue": "'slide-down'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ComponentVariant",
+                    "resolved": "\"bordered\" | \"borderless\" | \"color\" | \"danger\" | \"dark\" | \"default\" | \"dots-only\" | \"elevated\" | \"error\" | \"filled\" | \"flat\" | \"ghost\" | \"glass\" | \"gradient\" | \"info\" | \"inverse\" | \"light\" | \"minimal\" | \"neutral\" | \"outlined\" | \"panel\" | \"plain\" | \"primary\" | \"quaternary\" | \"raised\" | \"secondary\" | \"segmented\" | \"soft\" | \"solid\" | \"standard\" | \"success\" | \"surface\" | \"tertiary\" | \"text\" | \"underlined\" | \"warning\"",
+                    "references": {
+                        "ComponentVariant": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::ComponentVariant",
+                            "referenceLocation": "ComponentVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Default variant for snackbars"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'filled'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BasicSize",
+                    "resolved": "\"default\" | \"large\" | \"lg\" | \"md\" | \"medium\" | \"sm\" | \"small\"",
+                    "references": {
+                        "BasicSize": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::BasicSize",
+                            "referenceLocation": "BasicSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Default size for snackbars"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Theme",
+                    "resolved": "\"auto\" | \"dark\" | \"default\" | \"green\" | \"light\"",
+                    "references": {
+                        "Theme": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::Theme",
+                            "referenceLocation": "Theme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Default theme for notifications"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "theme",
+                "defaultValue": "'auto'"
+            },
+            "cardStack": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable card stacking mode - notifications stack like cards and expand on hover"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "card-stack",
+                "defaultValue": "false"
+            },
+            "groupThreshold": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Default group threshold (ms) - identical messages within this window are coalesced"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "group-threshold",
+                "defaultValue": "3000"
+            },
+            "duration": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Global default duration (ms) for notifications. 0 is infinite."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "duration",
+                "defaultValue": "5000"
+            },
+            "coalesce": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable smart grouping (coalescing) of identical messages"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "coalesce",
+                "defaultValue": "false"
+            },
+            "maxDuration": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum duration cap (ms). Any item duration above this value is clamped. 0 = no cap."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-duration",
+                "defaultValue": "0"
+            },
+            "showCountdown": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show a live countdown chip (e.g. \"3s\") inside the notification before it closes.\r\nOnly visible when duration > 0 and progress is set to 'bar' or 'ring'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-countdown",
+                "defaultValue": "false"
+            },
+            "textDirection": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TextDirection",
+                    "resolved": "\"auto\" | \"ltr\" | \"rtl\"",
+                    "references": {
+                        "TextDirection": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::TextDirection",
+                            "referenceLocation": "TextDirection"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Explicit text direction for this notification instance only.\r\n'auto' reads the CSS computed direction of the element.\r\n'rtl' / 'ltr' override immediately without touching the page layout."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text-direction",
+                "defaultValue": "'auto'"
+            },
+            "iconLibrary": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconLibrary",
+                    "resolved": "\"bootstrap\" | \"default\" | \"emoji\" | \"fontawesome\" | \"google\" | \"iconoir\" | \"icons8\" | \"ionicons\" | \"lucide\" | \"remixicon\" | \"se\"",
+                    "references": {
+                        "IconLibrary": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::IconLibrary",
+                            "referenceLocation": "IconLibrary"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Default library for icons"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-library",
+                "defaultValue": "'lucide'"
+            },
+            "portal": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Move snackbar to the bottom of the body automatically on load"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "portal",
+                "defaultValue": "true"
+            },
+            "pauseOnHover": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Pause timers when the cursor hovers over the snackbar"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pause-on-hover",
+                "defaultValue": "true"
+            },
+            "pauseOnFocusLoss": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Pause timers when the window loses focus (e.g. tab switch)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pause-on-focus-loss",
+                "defaultValue": "true"
+            },
+            "soundMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'none' | 'synth' | 'custom'",
+                    "resolved": "\"custom\" | \"none\" | \"synth\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sound mode: 'none' | 'synth' | 'custom'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sound-mode",
+                "defaultValue": "'synth'"
+            },
+            "particles": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable CSS particle burst on 'sovereign' type notifications.\r\nSet to false to disable all particle effects."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "particles",
+                "defaultValue": "true"
+            },
+            "enableSlots": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable slot support for custom notification layouts"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enable-slots",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "snackbars": {},
+            "visibleSnackbars": {},
+            "animatedItems": {},
+            "isHovered": {},
+            "expandedSnackbars": {},
+            "dragX": {},
+            "isDragging": {},
+            "dir": {},
+            "countdownSeconds": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "snackbarClosed",
+                "name": "snackbarClosed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when a snackbar is closed"
+                },
+                "complexType": {
+                    "original": "{ id: string; item: SnackbarItem }",
+                    "resolved": "{ id: string; item: SnackbarItem; }",
+                    "references": {
+                        "SnackbarItem": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/snackbar/types.ts::SnackbarItem",
+                            "referenceLocation": "SnackbarItem"
+                        }
+                    }
+                }
+            }, {
+                "method": "snackbarAdded",
+                "name": "snackbarAdded",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when a snackbar is added"
+                },
+                "complexType": {
+                    "original": "{ id: string; item: SnackbarItem }",
+                    "resolved": "{ id: string; item: SnackbarItem; }",
+                    "references": {
+                        "SnackbarItem": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/snackbar/types.ts::SnackbarItem",
+                            "referenceLocation": "SnackbarItem"
+                        }
+                    }
+                }
+            }, {
+                "method": "snackbarUpdated",
+                "name": "snackbarUpdated",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when a snackbar is updated"
+                },
+                "complexType": {
+                    "original": "{ id: string; item: SnackbarItem }",
+                    "resolved": "{ id: string; item: SnackbarItem; }",
+                    "references": {
+                        "SnackbarItem": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/snackbar/types.ts::SnackbarItem",
+                            "referenceLocation": "SnackbarItem"
+                        }
+                    }
+                }
+            }, {
+                "method": "snackbarLinkClicked",
+                "name": "snackbarLinkClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when a snackbar link is clicked"
+                },
+                "complexType": {
+                    "original": "{ id: string; item: SnackbarItem; link: { text: string; url: string } }",
+                    "resolved": "{ id: string; item: SnackbarItem; link: { text: string; url: string; }; }",
+                    "references": {
+                        "SnackbarItem": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/snackbar/types.ts::SnackbarItem",
+                            "referenceLocation": "SnackbarItem"
+                        }
+                    }
+                }
+            }, {
+                "method": "snackbarActionClicked",
+                "name": "snackbarActionClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when a snackbar action button is clicked"
+                },
+                "complexType": {
+                    "original": "{ id: string; item: SnackbarItem }",
+                    "resolved": "{ id: string; item: SnackbarItem; }",
+                    "references": {
+                        "SnackbarItem": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/snackbar/types.ts::SnackbarItem",
+                            "referenceLocation": "SnackbarItem"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "add": {
+                "complexType": {
+                    "signature": "(item: Omit<SnackbarItem, \"id\">) => Promise<string>",
+                    "parameters": [{
+                            "name": "item",
+                            "type": "{ slot?: string; html?: boolean; input?: { placeholder?: string; label?: string; type?: \"number\" | \"text\" | \"password\" | \"email\"; onSubmit: (value: string) => void; }; link?: { text: string; url: string; }; progress?: \"bar\" | \"ring\"; title?: string; type: StatusColor; onClose?: () => void; action?: { label: string; icon?: string; onClick?: () => void; }; size?: BasicSize; history?: { message: string; title?: string; timestamp: number; }[]; sticky?: boolean; icon?: string; iconLibrary?: string; avatar?: string; theme?: Theme; variant?: ComponentVariant; message: string; actions?: { label: string; icon?: string; onClick?: () => void; variant?: StatusColor; }[]; haptic?: boolean; count?: number; closable?: boolean; sound?: string; customClass?: string; duration?: number; priority?: \"low\" | \"high\" | \"normal\" | \"urgent\"; }",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Omit": {
+                            "location": "global",
+                            "id": "global::Omit"
+                        },
+                        "SnackbarItem": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/snackbar/types.ts::SnackbarItem",
+                            "referenceLocation": "SnackbarItem"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "(id: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "id",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "closeAll": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "closeNext": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "getAll": {
+                "complexType": {
+                    "signature": "() => Promise<SnackbarItem[]>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "SnackbarItem": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/snackbar/types.ts::SnackbarItem",
+                            "referenceLocation": "SnackbarItem"
+                        }
+                    },
+                    "return": "Promise<SnackbarItem[]>"
+                },
+                "docs": {
+                    "text": "Returns all current notifications",
+                    "tags": []
+                }
+            },
+            "pause": {
+                "complexType": {
+                    "signature": "(id: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "id",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Pause timer for a specific notification",
+                    "tags": []
+                }
+            },
+            "resume": {
+                "complexType": {
+                    "signature": "(id: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "id",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Resume timer for a specific notification",
+                    "tags": []
+                }
+            },
+            "replace": {
+                "complexType": {
+                    "signature": "(id: string, newItem: Omit<SnackbarItem, \"id\">) => Promise<void>",
+                    "parameters": [{
+                            "name": "id",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "newItem",
+                            "type": "{ slot?: string; html?: boolean; input?: { placeholder?: string; label?: string; type?: \"number\" | \"text\" | \"password\" | \"email\"; onSubmit: (value: string) => void; }; link?: { text: string; url: string; }; progress?: \"bar\" | \"ring\"; title?: string; type: StatusColor; onClose?: () => void; action?: { label: string; icon?: string; onClick?: () => void; }; size?: BasicSize; history?: { message: string; title?: string; timestamp: number; }[]; sticky?: boolean; icon?: string; iconLibrary?: string; avatar?: string; theme?: Theme; variant?: ComponentVariant; message: string; actions?: { label: string; icon?: string; onClick?: () => void; variant?: StatusColor; }[]; haptic?: boolean; count?: number; closable?: boolean; sound?: string; customClass?: string; duration?: number; priority?: \"low\" | \"high\" | \"normal\" | \"urgent\"; }",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Omit": {
+                            "location": "global",
+                            "id": "global::Omit"
+                        },
+                        "SnackbarItem": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/snackbar/types.ts::SnackbarItem",
+                            "referenceLocation": "SnackbarItem"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Replace an existing notification completely",
+                    "tags": []
+                }
+            },
+            "promise": {
+                "complexType": {
+                    "signature": "<T>(promise: Promise<T> | (() => Promise<T>), data: { loading: string; success: string | ((res: T) => string); error: string | ((err: any) => string); duration?: number; }) => Promise<T>",
+                    "parameters": [{
+                            "name": "promise",
+                            "type": "Promise<T> | (() => Promise<T>)",
+                            "docs": ""
+                        }, {
+                            "name": "data",
+                            "type": "{ loading: string; success: string | ((res: T) => string); error: string | ((err: any) => string); duration?: number; }",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "T": {
+                            "location": "global",
+                            "id": "global::T"
+                        }
+                    },
+                    "return": "Promise<T>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "undoable": {
+                "complexType": {
+                    "signature": "(data: { message: string; title?: string; type?: SnackbarType; onUndo: () => void; onDismiss?: () => void; duration?: number; action?: SnackbarItem[\"action\"]; link?: SnackbarItem[\"link\"]; }) => Promise<string>",
+                    "parameters": [{
+                            "name": "data",
+                            "type": "{ message: string; title?: string; type?: StatusColor; onUndo: () => void; onDismiss?: () => void; duration?: number; action?: { label: string; icon?: string; onClick?: () => void; }; link?: { text: string; url: string; }; }",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "SnackbarType": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/snackbar/types.ts::SnackbarType",
+                            "referenceLocation": "SnackbarType"
+                        },
+                        "SnackbarItem": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/snackbar/types.ts::SnackbarItem",
+                            "referenceLocation": "SnackbarItem"
+                        },
+                        "CustomEvent": {
+                            "location": "global",
+                            "id": "global::CustomEvent"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "update": {
+                "complexType": {
+                    "signature": "(id: string, updates: Partial<SnackbarItem>) => Promise<void>",
+                    "parameters": [{
+                            "name": "id",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "updates",
+                            "type": "{ id?: string; type?: StatusColor; title?: string; message?: string; html?: boolean; avatar?: string; icon?: string; iconLibrary?: string; link?: { text: string; url: string; }; action?: { label: string; icon?: string; onClick?: () => void; }; actions?: { label: string; icon?: string; onClick?: () => void; variant?: StatusColor; }[]; duration?: number; variant?: ComponentVariant; size?: BasicSize; customClass?: string; closable?: boolean; theme?: Theme; input?: { placeholder?: string; label?: string; type?: \"number\" | \"text\" | \"password\" | \"email\"; onSubmit: (value: string) => void; }; count?: number; haptic?: boolean; sound?: string; progress?: \"bar\" | \"ring\"; priority?: \"low\" | \"high\" | \"normal\" | \"urgent\"; sticky?: boolean; onClose?: () => void; slot?: string; history?: { message: string; title?: string; timestamp: number; }[]; }",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Partial": {
+                            "location": "global",
+                            "id": "global::Partial"
+                        },
+                        "SnackbarItem": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/snackbar/types.ts::SnackbarItem",
+                            "referenceLocation": "SnackbarItem"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "element"; }
+    static get watchers() {
+        return [{
+                "propName": "textDirection",
+                "methodName": "onTextDirectionChange"
+            }, {
+                "propName": "position",
+                "methodName": "positionChanged"
+            }, {
+                "propName": "maxVisible",
+                "methodName": "maxVisibleChanged"
+            }, {
+                "propName": "stackMode",
+                "methodName": "stackModeChanged"
+            }];
+    }
+}