atomicuilibrary 0.0.1

package/dist/collection/components/scroll-top/scroll-top.js

@@ -0,0 +1,1178 @@
+import { h, Host } from "@stencil/core";
+export class ScrollTop {
+    el;
+    /**
+     * Scroll mode: 'top', 'bottom', or 'both'
+     */
+    mode = 'top';
+    /**
+     * Threshold (in pixels) before button appears
+     */
+    threshold = 300;
+    /**
+     * Scroll behavior
+     */
+    behavior = 'smooth';
+    /**
+     * Position of the button
+     */
+    position = 'bottom-right';
+    /**
+     * Enable quick-jump menu to headings
+     */
+    quickJump = false;
+    /**
+     * Positioning strategy: 'fixed' (screen) or 'absolute' (container)
+     */
+    strategy = 'fixed';
+    /**
+     * Icon to display (can be emoji, text, or HTML)
+     */
+    icon = 'arrow-up';
+    /**
+     * Optional text label
+     */
+    label;
+    /**
+     * Button size
+     */
+    size = 'md';
+    /**
+     * Color scheme
+     */
+    color = 'primary';
+    /**
+     * Button variant
+     */
+    variant = 'solid';
+    /**
+     * Target element selector to scroll (default is window)
+     */
+    target;
+    /**
+     * Show SVG progress ring
+     */
+    showProgress = false;
+    /**
+     * Progress ring color
+     */
+    progressColor;
+    /**
+     * Show percentage text inside progress ring
+     */
+    showProgressValue = false;
+    /**
+     * Use glassmorphism effect (backdrop-filter)
+     */
+    glassy = false;
+    /**
+     * Use magnetic pull effect
+     */
+    magnetic = false;
+    /**
+     * Strength of magnetic pull (0 to 1)
+     */
+    magneticStrength = 0.3;
+    /**
+     * Radius of magnetic pull in pixels
+     */
+    magneticRadius = 150;
+    /**
+     * Auto-hide after inactivity
+     */
+    autoHide = false;
+    /**
+     * Unique ID to persist the draggable position in localStorage
+     */
+    persistenceId;
+    onPersistenceIdChange() {
+        this.loadPersistedPosition();
+    }
+    /**
+     * Allow dragging the scroll-top to reposition it
+     */
+    isDraggable = false;
+    /**
+     * Auto-hide delay in ms
+     */
+    autoHideHoldTime = 3000;
+    /**
+     * Button shape
+     */
+    shape = 'rounded';
+    /**
+     * Library to use for icons
+     */
+    iconLibrary = 'default';
+    /**
+     * Entrance animation
+     */
+    animation = 'scale';
+    /**
+     * Tooltip text
+     */
+    tooltip;
+    /**
+     * Z-index level
+     */
+    zIndex = 1000;
+    /**
+     * Portal to body to avoid stacking context issues
+     */
+    portal = false;
+    /**
+     * Enable haptic feedback
+     */
+    haptic = false;
+    /**
+     * Show skeleton placeholder
+     */
+    skeleton = false;
+    /**
+     * Show loading state
+     */
+    loading = false;
+    /**
+     * Explicit text direction
+     */
+    textDirection = 'auto';
+    isVisible = false;
+    isUserScrolling = false;
+    scrollProgress = 0;
+    dir = 'ltr';
+    pulse = false;
+    anchors = [];
+    isMenuOpen = false;
+    magneticTransform = { x: 0, y: 0 };
+    dragOffset = { x: 0, y: 0 };
+    isDragging = false;
+    targetElement;
+    autoHideTimer;
+    pulseTimer;
+    dragStartPos = { x: 0, y: 0 };
+    initialOffset = { x: 0, y: 0 };
+    handleModeChange() {
+        this.triggerPulse();
+    }
+    onTextDirectionChange() {
+        this.updateDir();
+    }
+    componentWillLoad() {
+        this.updateDir();
+        this.loadPersistedPosition();
+        // Compute initial scroll-based state here to avoid mutating state in componentDidLoad.
+        // Uses window/document.documentElement as default; custom target is resolved in componentDidLoad.
+        this.computeScrollState(document.documentElement, window.pageYOffset ?? document.documentElement?.scrollTop ?? 0);
+    }
+    componentDidLoad() {
+        // Portal: only move once, here, after element is fully connected.
+        if (this.portal && document.body && this.el.parentNode !== document.body) {
+            document.body.appendChild(this.el);
+        }
+        this.initTarget();
+    }
+    componentDidUpdate() {
+        if (!this.targetElement) {
+            this.initTarget();
+        }
+    }
+    scanAnchors() {
+        if (!this.quickJump)
+            return;
+        const headings = Array.from(document.querySelectorAll('h1[id], h2[id], h3[id], h4[id], h5[id], h6[id], [data-ui-anchor]'));
+        this.anchors = headings.map(el => ({
+            title: el.getAttribute('data-ui-anchor-title') || el.textContent.trim(),
+            id: el.id || (el.hasAttribute('data-ui-anchor') ? (el.getAttribute('data-ui-anchor') ?? '') : '')
+        })).filter(a => !!a.id && !!a.title);
+    }
+    loadPersistedPosition() {
+        if (this.persistenceId && this.isDraggable) {
+            const saved = localStorage.getItem(`ui-scroll-top-pos-${this.persistenceId}`);
+            if (saved) {
+                try {
+                    this.dragOffset = JSON.parse(saved);
+                }
+                catch (e) {
+                    console.error('Failed to load ScrollTop position', e);
+                }
+            }
+        }
+    }
+    savePersistedPosition() {
+        if (this.persistenceId && this.isDraggable) {
+            localStorage.setItem(`ui-scroll-top-pos-${this.persistenceId}`, JSON.stringify(this.dragOffset));
+        }
+    }
+    triggerPulse() {
+        this.pulse = true;
+        if (this.pulseTimer)
+            clearTimeout(this.pulseTimer);
+        this.pulseTimer = setTimeout(() => (this.pulse = false), 600);
+    }
+    updateDir() {
+        if (this.textDirection === 'rtl') {
+            this.dir = 'rtl';
+        }
+        else if (this.textDirection === 'ltr') {
+            this.dir = 'ltr';
+        }
+        else {
+            const computed = getComputedStyle(this.el).direction;
+            this.dir = computed === 'rtl' ? 'rtl' : 'ltr';
+        }
+    }
+    initTarget() {
+        this.targetElement = this.target ? document.querySelector(this.target) : window;
+        if (this.targetElement) {
+            this.targetElement.addEventListener('scroll', this.handleScroll);
+            // Re-compute state with the resolved target — does NOT touch isUserScrolling.
+            const element = this.targetElement instanceof Window ? document.documentElement : this.targetElement;
+            const scrollTop = this.targetElement instanceof Window
+                ? window.pageYOffset || document.documentElement.scrollTop
+                : this.targetElement.scrollTop;
+            this.computeScrollState(element, scrollTop);
+        }
+    }
+    /** Computes isVisible and scrollProgress without touching isUserScrolling. Safe to call from componentWillLoad. */
+    computeScrollState(element, scrollTop) {
+        if (this.mode === 'top') {
+            this.isVisible = scrollTop > this.threshold;
+        }
+        else if (this.mode === 'bottom') {
+            const scrollHeight = element.scrollHeight - element.clientHeight;
+            this.isVisible = scrollTop < (scrollHeight - this.threshold);
+        }
+        else {
+            const scrollHeight = element.scrollHeight - element.clientHeight;
+            const isNearTop = scrollTop < this.threshold;
+            const isNearBottom = scrollTop > (scrollHeight - this.threshold);
+            this.isVisible = !isNearTop || !isNearBottom;
+        }
+        if (this.showProgress) {
+            const scrollHeight = element.scrollHeight - element.clientHeight;
+            if (scrollHeight > 0) {
+                this.scrollProgress = Math.min(100, Math.max(0, (scrollTop / scrollHeight) * 100));
+            }
+        }
+    }
+    disconnectedCallback() {
+        if (this.targetElement) {
+            this.targetElement.removeEventListener('scroll', this.handleScroll);
+        }
+        this.clearAutoHideTimer();
+        this.clearPulseTimer();
+    }
+    clearPulseTimer() {
+        if (this.pulseTimer) {
+            clearTimeout(this.pulseTimer);
+            this.pulseTimer = null;
+        }
+    }
+    clearAutoHideTimer() {
+        if (this.autoHideTimer) {
+            clearTimeout(this.autoHideTimer);
+            this.autoHideTimer = null;
+        }
+    }
+    handleScroll = () => {
+        const element = this.targetElement instanceof Window ? document.documentElement : this.targetElement;
+        const scrollTop = this.targetElement instanceof Window
+            ? window.pageYOffset || document.documentElement.scrollTop
+            : this.targetElement.scrollTop;
+        const wasVisible = this.isVisible;
+        this.computeScrollState(element, scrollTop);
+        // isUserScrolling is only updated on real scroll events (not during init).
+        if (this.autoHide && this.isVisible) {
+            this.isUserScrolling = true;
+            this.clearAutoHideTimer();
+            this.autoHideTimer = setTimeout(() => {
+                this.isUserScrolling = false;
+            }, this.autoHideHoldTime);
+        }
+        else if (!this.autoHide) {
+            this.isUserScrolling = true;
+        }
+        if (!wasVisible && this.isVisible && this.haptic && 'vibrate' in navigator) {
+            navigator.vibrate(30);
+        }
+    };
+    handleAction = () => {
+        if (this.haptic && 'vibrate' in navigator) {
+            navigator.vibrate(50);
+        }
+        if (this.targetElement instanceof Window) {
+            let targetTop = 0;
+            if (this.mode === 'bottom') {
+                targetTop = document.documentElement.scrollHeight;
+            }
+            else if (this.mode === 'both') {
+                const currentScroll = window.pageYOffset || document.documentElement.scrollTop;
+                const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+                targetTop = currentScroll > scrollHeight / 2 ? 0 : document.documentElement.scrollHeight;
+            }
+            window.scrollTo({
+                top: targetTop,
+                behavior: this.behavior,
+            });
+        }
+        else {
+            const target = this.targetElement;
+            let targetTop = 0;
+            if (this.mode === 'bottom') {
+                targetTop = target.scrollHeight;
+            }
+            else if (this.mode === 'both') {
+                const scrollHeight = target.scrollHeight - target.clientHeight;
+                targetTop = target.scrollTop > scrollHeight / 2 ? 0 : target.scrollHeight;
+            }
+            target.scrollTo({
+                top: targetTop,
+                behavior: this.behavior,
+            });
+        }
+    };
+    handleMouseMove(ev) {
+        if (!this.magnetic || !this.isVisible)
+            return;
+        const rect = this.el.getBoundingClientRect();
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+        const dx = ev.clientX - centerX;
+        const dy = ev.clientY - centerY;
+        const dist = Math.sqrt(dx * dx + dy * dy);
+        if (dist < this.magneticRadius) {
+            const influence = 1 - (dist / this.magneticRadius);
+            this.magneticTransform = {
+                x: dx * this.magneticStrength * influence,
+                y: dy * this.magneticStrength * influence
+            };
+        }
+        else if (this.magneticTransform.x !== 0 || this.magneticTransform.y !== 0) {
+            this.magneticTransform = { x: 0, y: 0 };
+        }
+    }
+    handleContextMenu = (ev) => {
+        if (this.quickJump) {
+            ev.preventDefault();
+            this.scanAnchors(); // Refresh anchors before opening
+            this.isMenuOpen = !this.isMenuOpen;
+        }
+    };
+    jumpTo = (id) => {
+        const el = document.getElementById(id);
+        if (el) {
+            el.scrollIntoView({ behavior: 'smooth' });
+        }
+        this.isMenuOpen = false;
+    };
+    // DRAG HANDLERS
+    onMouseDown(ev) {
+        if (!this.isDraggable)
+            return;
+        this.isDragging = true;
+        this.dragStartPos = { x: ev.clientX, y: ev.clientY };
+        this.initialOffset = { ...this.dragOffset };
+        this.isMenuOpen = false; // Close menu when starting to drag
+        document.addEventListener('mousemove', this.onMouseMove);
+        document.addEventListener('mouseup', this.onMouseUp);
+    }
+    onMouseMove = (ev) => {
+        if (!this.isDragging)
+            return;
+        const dx = ev.clientX - this.dragStartPos.x;
+        const dy = ev.clientY - this.dragStartPos.y;
+        this.dragOffset = {
+            x: this.initialOffset.x + dx,
+            y: this.initialOffset.y + dy
+        };
+    };
+    onMouseUp = () => {
+        this.isDragging = false;
+        document.removeEventListener('mousemove', this.onMouseMove);
+        document.removeEventListener('mouseup', this.onMouseUp);
+        this.savePersistedPosition();
+    };
+    render() {
+        if (this.skeleton) {
+            return (h(Host, { class: `scroll-top-skeleton scroll-top-${this.position} scroll-top-${this.size}` }, h("div", { class: "skeleton-btn" })));
+        }
+        const isShowing = this.isVisible && (!this.autoHide || this.isUserScrolling);
+        const containerClasses = {
+            'scroll-top': true,
+            [`scroll-top-${this.position}`]: true,
+            [`scroll-top-${this.size}`]: true,
+            [`scroll-top-${this.color}`]: true,
+            [`scroll-top-variant-${this.variant}`]: true,
+            [`scroll-top-shape-${this.shape}`]: true,
+            [`scroll-top-anim-${this.animation}`]: true,
+            'scroll-top-visible': isShowing,
+            'scroll-top-active': this.isUserScrolling,
+            'scroll-top-with-label': !!this.label,
+            'scroll-top-loading': this.loading,
+            'scroll-top-pulse': this.pulse,
+            'scroll-top-glassy': this.glassy,
+            'scroll-top-rtl': this.dir === 'rtl',
+            'scroll-top-strategy-absolute': this.strategy === 'absolute',
+        };
+        const containerStyle = {
+            '--z-index': `${this.zIndex}`,
+            '--magnetic-x': `${this.magneticTransform.x}px`,
+            '--magnetic-y': `${this.magneticTransform.y}px`,
+            '--drag-x': `${this.dragOffset.x}px`,
+            '--drag-y': `${this.dragOffset.y}px`,
+            'transform': `translate(calc(var(--magnetic-x, 0px) + var(--drag-x, 0px)), calc(var(--magnetic-y, 0px) + var(--drag-y, 0px)))`,
+            'transition': (this.magneticTransform.x === 0 && !this.isDragging) ? 'transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)' : 'none',
+            'pointer-events': isShowing ? 'auto' : 'none',
+            'cursor': this.isDraggable ? (this.isDragging ? 'grabbing' : 'grab') : 'pointer',
+        };
+        const radius = 22;
+        const circumference = 2 * Math.PI * radius;
+        const offset = circumference - (this.scrollProgress / 100) * circumference;
+        const currentIcon = this.loading ? 'loading' :
+            this.mode === 'top' ? this.icon :
+                this.mode === 'bottom' ? (this.icon === 'arrow-up' ? 'arrow-down' : this.icon) :
+                    (this.scrollProgress > 50 ? (this.icon === 'arrow-up' ? 'arrow-up' : this.icon) : (this.icon === 'arrow-up' ? 'arrow-down' : this.icon));
+        return (h(Host, { style: this.portal ? { display: 'contents' } : {} }, h("ui-button", { variant: this.variant === 'solid' ? 'primary' : this.variant, class: containerClasses, style: containerStyle, onClick: () => this.handleAction(), onKeyDown: (e) => e.key === 'Enter' && this.handleAction(), onContextMenu: this.handleContextMenu, disabled: !isShowing, ariaLabel: this.mode === 'top' ? 'Scroll to top' : 'Scroll to bottom', "aria-haspopup": this.quickJump ? 'true' : 'false', "aria-expanded": this.isMenuOpen ? 'true' : 'false', title: this.quickJump ? 'Right-click for sections' : (this.tooltip || (this.mode === 'top' ? 'Top' : 'Bottom')), icon: currentIcon, iconLibrary: this.iconLibrary, loading: this.loading, label: this.label }, this.showProgress && (h("svg", { class: "progress-ring", width: "100%", height: "100%", viewBox: "0 0 60 60", slot: "start" }, h("circle", { class: "progress-ring__background", stroke: "rgba(255,255,255,0.1)", "stroke-width": "3", fill: "transparent", r: radius, cx: "30", cy: "30" }), h("circle", { class: "progress-ring__circle", stroke: this.progressColor || 'currentColor', "stroke-width": "3", "stroke-dasharray": `${circumference} ${circumference}`, style: { strokeDashoffset: `${offset}` }, "stroke-linecap": "round", fill: "transparent", r: radius, cx: "30", cy: "30" }))), this.showProgress && this.showProgressValue && (h("span", { class: "progress-value", slot: "start" }, Math.round(this.scrollProgress), "%")), this.isMenuOpen && (h("div", { class: `scroll-top-anchors scroll-top-anchors-${this.position}`, slot: "end" }, h("div", { class: "scroll-top-anchors-header" }, "Quick Jump"), h("div", { class: "scroll-top-anchors-list" }, this.anchors.map(anchor => (h("ui-button", { key: anchor.id, variant: "ghost", class: "scroll-top-anchor-item", onClick: (ev) => { ev.stopPropagation(); this.jumpTo(anchor.id); }, label: anchor.title, block: true })))))))));
+    }
+    static get is() { return "ui-scroll-top"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["scroll-top.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["scroll-top.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TopBottom | 'both'",
+                    "resolved": "\"both\" | \"bottom\" | \"top\"",
+                    "references": {
+                        "TopBottom": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::TopBottom",
+                            "referenceLocation": "TopBottom"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Scroll mode: 'top', 'bottom', or 'both'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mode",
+                "defaultValue": "'top'"
+            },
+            "threshold": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Threshold (in pixels) before button appears"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "threshold",
+                "defaultValue": "300"
+            },
+            "behavior": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'auto' | 'smooth'",
+                    "resolved": "\"auto\" | \"smooth\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Scroll behavior"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "behavior",
+                "defaultValue": "'smooth'"
+            },
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'bottom-right' | 'bottom-left' | 'bottom-center' | 'top-right' | 'top-left' | 'top-center' | 'center-left' | 'center-right' | 'center'",
+                    "resolved": "\"bottom-center\" | \"bottom-left\" | \"bottom-right\" | \"center\" | \"center-left\" | \"center-right\" | \"top-center\" | \"top-left\" | \"top-right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Position of the button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "position",
+                "defaultValue": "'bottom-right'"
+            },
+            "quickJump": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable quick-jump menu to headings"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "quick-jump",
+                "defaultValue": "false"
+            },
+            "strategy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'fixed' | 'absolute'",
+                    "resolved": "\"absolute\" | \"fixed\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Positioning strategy: 'fixed' (screen) or 'absolute' (container)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "strategy",
+                "defaultValue": "'fixed'"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon to display (can be emoji, text, or HTML)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon",
+                "defaultValue": "'arrow-up'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional text label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "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": "Button size"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary' | 'dark' | 'success' | 'warning' | 'danger' | 'info'",
+                    "resolved": "\"danger\" | \"dark\" | \"info\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color scheme"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color",
+                "defaultValue": "'primary'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'solid' | 'outline' | 'ghost'",
+                    "resolved": "\"ghost\" | \"outline\" | \"solid\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Button variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'solid'"
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Target element selector to scroll (default is window)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "target"
+            },
+            "showProgress": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show SVG progress ring"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-progress",
+                "defaultValue": "false"
+            },
+            "progressColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Progress ring color"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "progress-color"
+            },
+            "showProgressValue": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show percentage text inside progress ring"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-progress-value",
+                "defaultValue": "false"
+            },
+            "glassy": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use glassmorphism effect (backdrop-filter)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "glassy",
+                "defaultValue": "false"
+            },
+            "magnetic": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use magnetic pull effect"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "magnetic",
+                "defaultValue": "false"
+            },
+            "magneticStrength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Strength of magnetic pull (0 to 1)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "magnetic-strength",
+                "defaultValue": "0.3"
+            },
+            "magneticRadius": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Radius of magnetic pull in pixels"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "magnetic-radius",
+                "defaultValue": "150"
+            },
+            "autoHide": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Auto-hide after inactivity"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-hide",
+                "defaultValue": "false"
+            },
+            "persistenceId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Unique ID to persist the draggable position in localStorage"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "persistence-id"
+            },
+            "isDraggable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allow dragging the scroll-top to reposition it"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-draggable",
+                "defaultValue": "false"
+            },
+            "autoHideHoldTime": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Auto-hide delay in ms"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-hide-hold-time",
+                "defaultValue": "3000"
+            },
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'circle' | 'square' | 'rounded' | 'oval' | 'sharp' | 'chip'",
+                    "resolved": "\"chip\" | \"circle\" | \"oval\" | \"rounded\" | \"sharp\" | \"square\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Button shape"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shape",
+                "defaultValue": "'rounded'"
+            },
+            "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": "Library to use for icons"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-library",
+                "defaultValue": "'default'"
+            },
+            "animation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'fade' | 'scale' | 'slide'",
+                    "resolved": "\"fade\" | \"scale\" | \"slide\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Entrance animation"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "animation",
+                "defaultValue": "'scale'"
+            },
+            "tooltip": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tooltip"
+            },
+            "zIndex": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Z-index level"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "z-index",
+                "defaultValue": "1000"
+            },
+            "portal": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Portal to body to avoid stacking context issues"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "portal",
+                "defaultValue": "false"
+            },
+            "haptic": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable haptic feedback"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "haptic",
+                "defaultValue": "false"
+            },
+            "skeleton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show skeleton placeholder"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "skeleton",
+                "defaultValue": "false"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show loading state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "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"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text-direction",
+                "defaultValue": "'auto'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isVisible": {},
+            "isUserScrolling": {},
+            "scrollProgress": {},
+            "dir": {},
+            "pulse": {},
+            "anchors": {},
+            "isMenuOpen": {},
+            "magneticTransform": {},
+            "dragOffset": {},
+            "isDragging": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "persistenceId",
+                "methodName": "onPersistenceIdChange"
+            }, {
+                "propName": "mode",
+                "methodName": "handleModeChange"
+            }, {
+                "propName": "textDirection",
+                "methodName": "onTextDirectionChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "mousemove",
+                "method": "handleMouseMove",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "mousedown",
+                "method": "onMouseDown",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }];
+    }
+}