atomicuilibrary 0.0.1

package/dist/esm/ui-scroll-top.entry.js

@@ -0,0 +1,457 @@
+import { r as registerInstance, a as getElement, h, H as Host } from './index-DUsoYu9r.js';
+
+const scrollTopCss = () => `.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:contents;--z-index:1000}.scroll-top{position:fixed;z-index:var(--z-index, 1000);display:flex;align-items:center;justify-content:center;padding:0;border:none;cursor:pointer;background:transparent !important;transition:all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);opacity:0;transform:scale(0);pointer-events:none}.scroll-top.scroll-top-strategy-absolute{position:absolute}.scroll-top.scroll-top-visible{opacity:1 !important;pointer-events:auto !important;transform:scale(1)}.scroll-top.scroll-top-visible.scroll-top-bottom-center,.scroll-top.scroll-top-visible.scroll-top-top-center{transform:translateX(-50%) scale(1) !important}.scroll-top.scroll-top-visible.scroll-top-center{transform:translate(-50%, -50%) scale(1) !important}.scroll-top.scroll-top-visible.scroll-top-center-left,.scroll-top.scroll-top-visible.scroll-top-center-right{transform:translateY(-50%) scale(1) !important}.scroll-top{font-family:inherit;font-weight:600;user-select:none;overflow:visible}.scroll-top.scroll-top-glassy{backdrop-filter:blur(12px) saturate(180%);-webkit-backdrop-filter:blur(12px) saturate(180%)}.scroll-top-visible{opacity:1 !important;visibility:visible !important}.scroll-top:hover{box-shadow:0 6px 20px rgba(0, 0, 0, 0.2);filter:brightness(1.1)}.scroll-top:active{transform:scale(0.92) !important}.scroll-top-shape-circle{border-radius:50%}.scroll-top-shape-square,.scroll-top-shape-sharp{border-radius:0}.scroll-top-shape-rounded{border-radius:12px}.scroll-top-shape-pill,.scroll-top-shape-oval{border-radius:999px}.scroll-top-shape-chip{border-radius:100px}.scroll-top-sm{width:40px;height:40px;font-size:14px}.scroll-top-md{width:50px;height:50px;font-size:16px}.scroll-top-lg{width:64px;height:64px;font-size:18px}.scroll-top-bottom-right{right:24px;bottom:24px}.scroll-top-bottom-left{left:24px;bottom:24px}.scroll-top-bottom-center{left:50%;bottom:24px;transform:translateX(-50%)}.scroll-top-top-center{top:24px;left:50%;transform:translateX(-50%)}.scroll-top-center-left{top:50%;left:24px;transform:translateY(-50%)}.scroll-top-center-right{top:50%;right:24px;transform:translateY(-50%)}.scroll-top-center{top:50%;left:50%;transform:translate(-50%, -50%)}.scroll-top-top-right{right:24px;top:24px}.scroll-top-top-left{left:24px;top:24px}.scroll-top-anim-scale{transform:scale(0.5)}.scroll-top-anim-scale.scroll-top-visible{transform:scale(1)}.scroll-top-bottom-center.scroll-top-anim-scale{transform:translateX(-50%) scale(0.5)}.scroll-top-bottom-center.scroll-top-anim-scale.scroll-top-visible{transform:translateX(-50%) scale(1)}.scroll-top-anim-fade{transform:none}.scroll-top-anim-slide.scroll-top-bottom-right{transform:translateY(40px)}.scroll-top-anim-slide.scroll-top-bottom-left{transform:translateY(40px)}.scroll-top-anim-slide.scroll-top-bottom-center{transform:translate(-50%, 40px)}.scroll-top-anim-slide.scroll-top-top-right{transform:translateY(-40px)}.scroll-top-anim-slide.scroll-top-top-left{transform:translateY(-40px)}.scroll-top-anim-slide.scroll-top-visible{transform:translate(0, 0) !important}.scroll-top-bottom-center.scroll-top-anim-slide.scroll-top-visible{transform:translate(-50%, 0) !important}.scroll-top-sm{width:40px;height:40px;min-width:40px}.scroll-top-md{width:56px;height:56px;min-width:56px}.scroll-top-lg{width:72px;height:72px;min-width:72px}.progress-ring{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;transform:rotate(-90deg)}.progress-ring__circle{transition:stroke-dashoffset 0.1s}.scroll-top-anchors{position:absolute;background:var(--bg-primary, #ffffff);border-radius:12px;box-shadow:0 10px 25px rgba(0, 0, 0, 0.2);width:200px;max-height:300px;overflow:hidden;display:flex;flex-direction:column;z-index:1000;border:1px solid rgba(0, 0, 0, 0.05);animation:scroll-top-menu-fade 0.3s cubic-bezier(0.4, 0, 0.2, 1)}.scroll-top-glassy .scroll-top-anchors{background:rgba(255, 255, 255, 0.8);backdrop-filter:blur(16px)}.scroll-top-anchors-bottom-right{bottom:120%;right:0;transform-origin:bottom right}.scroll-top-anchors-bottom-left{bottom:120%;left:0;transform-origin:bottom left}.scroll-top-anchors-bottom-center{bottom:120%;left:50%;transform:translateX(-50%);transform-origin:bottom center}.scroll-top-anchors-top-right{top:120%;right:0;transform-origin:top right}.scroll-top-anchors-top-left{top:120%;left:0;transform-origin:top left}@keyframes scroll-top-menu-fade{from{opacity:0;transform:scale(0.9) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}.scroll-top-anchors-header{padding:12px 16px;font-size:11px;font-weight:800;text-transform:uppercase;color:var(--text-muted, #6b7280);background:rgba(0, 0, 0, 0.02);border-bottom:1px solid rgba(0, 0, 0, 0.05);letter-spacing:0.1em}.scroll-top-anchors-list{overflow-y:auto;padding:4px}.scroll-top-anchor-item{width:100%;padding:10px 12px;text-align:left;background:transparent;border:none;border-radius:6px;font-size:13px;color:var(--text-secondary, #374151);cursor:pointer;transition:all 0.2s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scroll-top-anchor-item:hover{background:rgba(0, 0, 0, 0.05);color:var(--text-primary, #111827)}.progress-value{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);font-size:10px;font-weight:700;z-index:3;opacity:0.8}.scroll-top-content{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 12px}.scroll-top-with-label{width:auto !important;min-width:50px;border-radius:30px !important}.scroll-top-label{font-size:0.85em;white-space:nowrap}.scroll-top-icon{display:flex;align-items:center;justify-content:center}:host([target]) .scroll-top{position:absolute}`;
+
+const ScrollTop = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    /**
+     * 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 watchers() { return {
+        "persistenceId": [{
+                "onPersistenceIdChange": 0
+            }],
+        "mode": [{
+                "handleModeChange": 0
+            }],
+        "textDirection": [{
+                "onTextDirectionChange": 0
+            }]
+    }; }
+};
+ScrollTop.style = scrollTopCss();
+
+export { ScrollTop as ui_scroll_top };