atomicuilibrary 0.0.1

package/dist/collection/components/pagination/pagination.js

@@ -0,0 +1,2033 @@
+import { h } from "@stencil/core";
+export class Pagination {
+    el;
+    /**
+     * Hide navigation buttons (next, previous, first, last) in dropdown/input modes
+     */
+    hideNavButtons = false;
+    /**
+     * Current active page (1-based)
+     */
+    currentPage = 1;
+    /**
+     * Total number of items
+     */
+    totalItems = 0;
+    /**
+     * Number of items per page
+     */
+    itemsPerPage = 10;
+    /**
+     * Maximum number of page buttons to show
+     */
+    maxVisiblePages = 5;
+    /**
+     * Type of pagination to display
+     */
+    type = 'basic';
+    /**
+     * Size of the pagination component
+     */
+    size = 'md';
+    /**
+     * Visual variant of the pagination
+     */
+    variant = 'default';
+    /**
+     * Color theme
+     */
+    theme = 'primary';
+    /**
+     * Whether to show first/last buttons
+     */
+    showFirstLast = true;
+    /**
+     * Whether to show previous/next buttons
+     */
+    showPrevNext = true;
+    /**
+     * Whether to show page size selector
+     */
+    showPageSize = false;
+    /**
+     * Whether to show total count
+     */
+    showTotal = false;
+    /**
+     * Whether to show jump to page input
+     */
+    showJumpTo = false;
+    /**
+     * Custom text for previous button
+     */
+    prevText = 'Previous';
+    /**
+     * Custom text for next button
+     */
+    nextText = 'Next';
+    /**
+     * Custom text for first button
+     */
+    firstText = 'First';
+    /**
+     * Custom text for last button
+     */
+    lastText = 'Last';
+    /**
+     * Available page sizes for selector
+     */
+    pageSizes = [10, 25, 50, 100];
+    /**
+     * Whether pagination is disabled
+     */
+    disabled = false;
+    /**
+     * Whether to show only icons (no text labels)
+     */
+    iconOnly = false;
+    /**
+     * Whether to use infinite scroll style (shows loading state)
+     */
+    infinite = false;
+    /**
+     * Loading state for infinite scroll
+     */
+    loading = false;
+    /**
+     * Whether to use compact mode (for dropdown and input types)
+     */
+    compact = false;
+    /**
+     * Enable keyboard navigation
+     */
+    keyboardNav = true;
+    shape = 'default';
+    /**
+     * Pill-shaped buttons (shorthand for shape="pill")
+     */
+    pill = false;
+    /**
+     * Circle-shaped buttons (shorthand for shape="circle")
+     */
+    circle = false;
+    /**
+     * Custom prev icon (emoji or SVG string)
+     */
+    prevIcon = '';
+    /**
+     * Custom next icon (emoji or SVG string)
+     */
+    nextIcon = '';
+    /**
+     * Custom first icon (emoji or SVG string)
+     */
+    firstIcon = '';
+    /**
+     * Custom last icon (emoji or SVG string)
+     */
+    lastIcon = '';
+    /**
+     * Mobile breakpoint (px)
+     */
+    mobileBreakpoint = 768;
+    /**
+     * Auto-switch to compact mode on mobile
+     */
+    responsiveMode = true;
+    /**
+     * RTL support
+     */
+    rtl = false;
+    /**
+     * Show tooltip on ellipsis hover with hidden page numbers
+     */
+    ellipsisTooltip = true;
+    /**
+     * Enable page transition animations
+     */
+    pageTransition = true;
+    /**
+     * Sync current page with URL query parameter
+     */
+    urlSync = false;
+    /**
+     * URL parameter name for page number
+     */
+    urlParam = 'page';
+    autoHide = true;
+    getEffectiveShape() {
+        if (this.shape !== 'default')
+            return this.shape;
+        if (this.circle)
+            return 'circle';
+        if (this.pill)
+            return 'pill';
+        return 'default';
+    }
+    /**
+     * Enable quick jump buttons (+5, -5)
+     */
+    quickJump = false;
+    /**
+     * Quick jump step size
+     */
+    quickJumpStep = 5;
+    /**
+     * Make pagination sticky
+     */
+    sticky = false;
+    /**
+     * Sticky position (top or bottom)
+     */
+    stickyPosition = 'bottom';
+    /**
+     * Auto-switch to compact when pages exceed threshold
+     */
+    smartCompact = false;
+    /**
+     * Page count threshold for smart compact mode
+     */
+    smartCompactThreshold = 20;
+    /**
+     * Enable swipe gestures on mobile
+     */
+    swipeGestures = true;
+    /**
+     * Show progress indicator
+     */
+    showProgress = false;
+    /**
+     * If true, shows a checkmark (tick) next to selected items in internal dropdowns.
+     */
+    showSelectedMarker = true;
+    /**
+     * Layout buttons without gaps, inside a single border-radius container
+     */
+    segmented = false;
+    /**
+     * Hide page number buttons completely
+     */
+    hideNumbers = false;
+    /**
+     * Show custom label (e.g. "3 OF 10") instead of or alongside numbers
+     */
+    showLabel = false;
+    /**
+     * Template for the label when showLabel is true. Uses {current} and {total} placeholders.
+     */
+    labelTemplate = '{current} OF {total}';
+    /**
+     * Only join navigation arrows (prev/next) together
+     */
+    arrowsJoined = false;
+    /**
+     * Layout the pagination vertically
+     */
+    vertical = false;
+    /**
+     * Persist page to localStorage
+     */
+    persistPage = false;
+    /**
+     * LocalStorage key for persistence
+     */
+    storageKey = 'pagination-page';
+    /**
+     * Emitted when page changes
+     */
+    pageChange;
+    /**
+     * Emitted when items per page changes
+     */
+    itemsPerPageChange;
+    /**
+     * Emitted when validation error occurs
+     */
+    validationError;
+    jumpToPage = null;
+    inputError = '';
+    pageInputValue = '1';
+    showEllipsisTooltip = false;
+    ellipsisPages = [];
+    isTransitioning = false;
+    isMobile = false;
+    openDropdown = null;
+    handleTotalChange() {
+        if (this.currentPage > this.totalPages && this.totalPages > 0) {
+            this.currentPage = this.totalPages;
+        }
+    }
+    handleCurrentPageChange(newValue) {
+        this.syncPageInputState(newValue);
+    }
+    handleOpenDropdownChange(newValue) {
+        // Elevate host z-index in the light DOM so the panel stacks above
+        // sibling ui-pagination shadow hosts (shadow DOM z-index is isolated)
+        this.el.classList.toggle('has-open-dropdown', newValue !== null);
+    }
+    paginationRef;
+    touchStartX = 0;
+    touchEndX = 0;
+    handleOutsideClick = (e) => {
+        if (!this.openDropdown)
+            return;
+        const path = e.composedPath();
+        if (!path.includes(this.el)) {
+            this.openDropdown = null;
+        }
+    };
+    componentWillLoad() {
+        // Initial responsive check
+        if (this.responsiveMode && typeof window !== 'undefined') {
+            this.checkMobileView();
+        }
+        // URL sync - read from URL on load
+        if (this.urlSync && typeof window !== 'undefined') {
+            const urlPage = this.getPageFromURL();
+            if (urlPage && urlPage !== this.currentPage) {
+                this.currentPage = urlPage;
+            }
+        }
+        // LocalStorage persistence - read from storage on load
+        if (this.persistPage && typeof window !== 'undefined') {
+            const storedPage = this.getPageFromStorage();
+            if (storedPage && storedPage !== this.currentPage) {
+                this.currentPage = storedPage;
+            }
+        }
+        this.syncPageInputState(this.currentPage);
+    }
+    componentDidLoad() {
+        // Close dropdown on outside click
+        if (typeof window !== 'undefined') {
+            document.addEventListener('pointerdown', this.handleOutsideClick, true);
+            window.addEventListener('click', this.handleOutsideClick);
+        }
+        // Responsive mode - add listener
+        if (this.responsiveMode && typeof window !== 'undefined') {
+            window.addEventListener('resize', this.checkMobileView);
+        }
+        // Swipe gestures for mobile
+        if (this.swipeGestures && this.paginationRef) {
+            this.paginationRef.addEventListener('touchstart', this.handleTouchStart, { passive: true });
+            this.paginationRef.addEventListener('touchend', this.handleTouchEnd, { passive: true });
+        }
+    }
+    disconnectedCallback() {
+        if (typeof window !== 'undefined') {
+            window.removeEventListener('resize', this.checkMobileView);
+            window.removeEventListener('click', this.handleOutsideClick);
+            document.removeEventListener('pointerdown', this.handleOutsideClick, true);
+        }
+        if (this.swipeGestures && this.paginationRef) {
+            this.paginationRef.removeEventListener('touchstart', this.handleTouchStart);
+            this.paginationRef.removeEventListener('touchend', this.handleTouchEnd);
+        }
+    }
+    checkMobileView = () => {
+        if (typeof window !== 'undefined') {
+            this.isMobile = window.innerWidth < this.mobileBreakpoint;
+        }
+    };
+    handleKeyDown = (e) => {
+        if (!this.keyboardNav || this.disabled)
+            return;
+        switch (e.key) {
+            case 'ArrowLeft':
+                e.preventDefault();
+                if (this.rtl) {
+                    this.handlePageChange(this.currentPage + 1);
+                }
+                else {
+                    this.handlePageChange(this.currentPage - 1);
+                }
+                break;
+            case 'ArrowRight':
+                e.preventDefault();
+                if (this.rtl) {
+                    this.handlePageChange(this.currentPage - 1);
+                }
+                else {
+                    this.handlePageChange(this.currentPage + 1);
+                }
+                break;
+            case 'Home':
+                e.preventDefault();
+                this.handlePageChange(1);
+                break;
+            case 'End':
+                e.preventDefault();
+                this.handlePageChange(this.totalPages);
+                break;
+        }
+    };
+    // URL Sync helpers
+    getPageFromURL() {
+        if (typeof window === 'undefined')
+            return null;
+        const params = new URLSearchParams(window.location.search);
+        const page = params.get(this.urlParam);
+        return page ? parseInt(page, 10) : null;
+    }
+    updateURL(page) {
+        if (typeof window === 'undefined')
+            return;
+        const url = new URL(window.location.href);
+        url.searchParams.set(this.urlParam, page.toString());
+        window.history.pushState({}, '', url.toString());
+    }
+    // LocalStorage helpers
+    getPageFromStorage() {
+        if (typeof window === 'undefined')
+            return null;
+        const stored = localStorage.getItem(this.storageKey);
+        return stored ? parseInt(stored, 10) : null;
+    }
+    savePageToStorage(page) {
+        if (typeof window === 'undefined')
+            return;
+        localStorage.setItem(this.storageKey, page.toString());
+    }
+    // Swipe gesture handlers
+    handleTouchStart = (e) => {
+        this.touchStartX = e.changedTouches[0].screenX;
+    };
+    handleTouchEnd = (e) => {
+        this.touchEndX = e.changedTouches[0].screenX;
+        this.handleSwipe();
+    };
+    handleSwipe() {
+        const swipeThreshold = 50;
+        const diff = this.touchStartX - this.touchEndX;
+        if (Math.abs(diff) > swipeThreshold) {
+            if (diff > 0) {
+                this.handlePageChange(this.rtl ? this.currentPage - 1 : this.currentPage + 1);
+            }
+            else {
+                this.handlePageChange(this.rtl ? this.currentPage + 1 : this.currentPage - 1);
+            }
+        }
+    }
+    // Quick jump handler
+    handleQuickJump(direction) {
+        const step = this.quickJumpStep;
+        const newPage = direction === 'forward'
+            ? Math.min(this.currentPage + step, this.totalPages)
+            : Math.max(this.currentPage - step, 1);
+        this.handlePageChange(newPage);
+    }
+    // Progress calculation
+    get progressPercentage() {
+        return (this.currentPage / this.totalPages) * 100;
+    }
+    get totalPages() {
+        return Math.ceil(this.totalItems / this.itemsPerPage);
+    }
+    get visiblePages() {
+        const totalPages = this.totalPages;
+        const current = this.currentPage;
+        const maxVisible = this.maxVisiblePages;
+        if (totalPages <= maxVisible) {
+            return Array.from({ length: totalPages }, (_, i) => i + 1);
+        }
+        const half = Math.floor(maxVisible / 2);
+        let start = Math.max(1, current - half);
+        let end = Math.min(totalPages, start + maxVisible - 1);
+        if (end - start + 1 < maxVisible) {
+            start = Math.max(1, end - maxVisible + 1);
+        }
+        return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+    }
+    handlePageChange(page) {
+        this.openDropdown = null;
+        this.jumpToPage = null;
+        if (page < 1 || page > this.totalPages || page === this.currentPage || this.disabled) {
+            return;
+        }
+        // Page transition animation
+        if (this.pageTransition) {
+            this.isTransitioning = true;
+            setTimeout(() => this.isTransitioning = false, 300);
+        }
+        this.currentPage = page;
+        this.syncPageInputState(page);
+        // URL sync
+        if (this.urlSync) {
+            this.updateURL(page);
+        }
+        // LocalStorage persistence
+        if (this.persistPage) {
+            this.savePageToStorage(page);
+        }
+        this.pageChange.emit({ page, itemsPerPage: this.itemsPerPage });
+    }
+    handleItemsPerPageChange(itemsPerPage) {
+        this.openDropdown = null;
+        this.itemsPerPage = itemsPerPage;
+        this.currentPage = 1; // Reset to first page when changing page size
+        this.syncPageInputState(1);
+        this.itemsPerPageChange.emit(itemsPerPage);
+        this.pageChange.emit({ page: 1, itemsPerPage });
+    }
+    handleJumpToPage() {
+        this.openDropdown = null;
+        const rawValue = this.pageInputValue.trim();
+        // Validate input
+        if (!rawValue) {
+            this.jumpToPage = null;
+            this.inputError = 'Please enter a valid number';
+            this.validationError.emit('Please enter a valid number');
+            return;
+        }
+        const requestedPage = Number(rawValue);
+        if (isNaN(requestedPage)) {
+            this.inputError = 'Please enter a valid number';
+            this.validationError.emit('Please enter a valid number');
+            return;
+        }
+        if (requestedPage < 1) {
+            this.inputError = `Page number must be at least 1`;
+            this.validationError.emit(this.inputError);
+            return;
+        }
+        if (requestedPage > this.totalPages) {
+            this.inputError = `Page number cannot exceed ${this.totalPages}`;
+            this.validationError.emit(this.inputError);
+            return;
+        }
+        // Clear error and navigate
+        this.inputError = '';
+        this.jumpToPage = requestedPage;
+        const page = Math.max(1, Math.min(this.totalPages, requestedPage));
+        this.handlePageChange(page);
+    }
+    syncPageInputState(page) {
+        const normalizedPage = Number.isFinite(page) && page > 0 ? page : 1;
+        this.jumpToPage = normalizedPage;
+        this.pageInputValue = normalizedPage.toString();
+    }
+    getPageInputWidth() {
+        const totalPageDigits = Math.max(1, this.totalPages.toString().length);
+        const currentValueDigits = Math.max(0, this.pageInputValue.trim().length);
+        const digits = Math.max(2, totalPageDigits, currentValueDigits);
+        const padding = this.size === 'sm' ? '1.75rem' : this.size === 'lg' ? '2.5rem' : '2rem';
+        const maxVisibleDigits = this.size === 'sm' ? 4 : this.size === 'lg' ? 8 : 6;
+        const visibleDigits = Math.min(digits, maxVisibleDigits);
+        return `calc(${visibleDigits}ch + ${padding})`;
+    }
+    handleInputChange(e) {
+        const value = typeof e.detail === 'string' ? e.detail : `${e.detail ?? ''}`;
+        this.pageInputValue = value;
+        if (value === '') {
+            this.jumpToPage = null;
+            this.inputError = '';
+            return;
+        }
+        const numValue = Number(value);
+        if (isNaN(numValue)) {
+            this.inputError = 'Please enter a valid number';
+            this.validationError.emit(this.inputError);
+            return;
+        }
+        this.jumpToPage = numValue;
+        // Clear error if value is now valid
+        if (numValue >= 1 && numValue <= this.totalPages) {
+            this.inputError = '';
+        }
+    }
+    renderPageSizeSelector() {
+        if (!this.showPageSize)
+            return null;
+        const isPremium = ['glass', 'modern', 'premium'].includes(this.variant);
+        const isOpen = this.openDropdown === 'pageSize';
+        return (h("div", { class: {
+                'pagination-size-selector': true,
+                'pagination-size-premium': isPremium,
+                'pagination-size-selector-open': isOpen
+            }, onClick: (e) => e.stopPropagation() }, h("span", { class: "pagination-size-label" }, "Show:"), h("div", { class: { 'pg-dropdown': true, 'pg-dropdown-open-host': isOpen } }, h("button", { class: { 'pg-dropdown-trigger': true, 'pg-dropdown-open': isOpen }, onClick: () => { this.openDropdown = isOpen ? null : 'pageSize'; }, disabled: this.disabled, type: "button" }, h("span", null, this.itemsPerPage), h("svg", { class: { 'pg-dropdown-arrow': true, 'pg-arrow-up': isOpen }, width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2.5", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "m6 9 6 6 6-6" }))), isOpen && (h("div", { class: "pg-dropdown-panel" }, this.pageSizes.map(size => (h("div", { class: { 'pg-dropdown-item': true, 'pg-dropdown-item-selected': size === this.itemsPerPage }, onClick: () => { this.handleItemsPerPageChange(size); this.openDropdown = null; } }, h("span", null, size), size === this.itemsPerPage && (h("svg", { class: "pg-dropdown-check", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M20 6 9 17l-5-5" })))))))))));
+    }
+    getPageLabel() {
+        return this.labelTemplate
+            .replace('{current}', this.currentPage.toString())
+            .replace('{total}', this.totalPages.toString());
+    }
+    getNavIcon(type) {
+        if (this.vertical) {
+            if (type === 'first')
+                return this.firstIcon || 'chevrons-up';
+            if (type === 'prev')
+                return this.prevIcon || 'chevron-up';
+            if (type === 'next')
+                return this.nextIcon || 'chevron-down';
+            if (type === 'last')
+                return this.lastIcon || 'chevrons-down';
+        }
+        if (type === 'first')
+            return this.firstIcon || 'chevrons-left';
+        if (type === 'prev')
+            return this.prevIcon || 'chevron-left';
+        if (type === 'next')
+            return this.nextIcon || 'chevron-right';
+        if (type === 'last')
+            return this.lastIcon || 'chevrons-right';
+        return '';
+    }
+    renderBasicPagination() {
+        const { currentPage, totalPages, visiblePages, showFirstLast, showPrevNext } = this;
+        const canGoPrev = currentPage > 1;
+        const canGoNext = currentPage < totalPages;
+        return (h("div", { class: "pagination-basic" }, showFirstLast && (h("ui-button", { variant: this.getButtonVariant(-1), size: this.size === 'sm' ? 'sm' : this.size === 'lg' ? 'lg' : 'md',
+            // class={`pagination-btn pagination-first ${!canGoPrev ? 'disabled' : ''}`}
+            onClick: () => this.handlePageChange(1), disabled: !canGoPrev || this.disabled, ariaLabel: "First page", icon: this.iconOnly ? "chevrons-left" : undefined, iconLibrary: "lucide", label: this.iconOnly ? undefined : this.firstText, shape: this.getEffectiveShape() })), showPrevNext && (h("ui-button", { variant: this.getButtonVariant(-1), size: this.size === 'sm' ? 'sm' : this.size === 'lg' ? 'lg' : 'md',
+            // class={{
+            //   'pagination-btn': true,
+            //   'pagination-prev': true,
+            //   'pagination-joined': this.arrowsJoined || this.segmented,
+            //   'disabled': !canGoPrev
+            // }}
+            onClick: () => this.handlePageChange(currentPage - 1), disabled: !canGoPrev || this.disabled, ariaLabel: "Previous page", icon: this.iconOnly || this.arrowsJoined ? this.getNavIcon('prev') : undefined, iconLibrary: "lucide", label: this.iconOnly || this.arrowsJoined ? undefined : this.prevText, shape: this.getEffectiveShape() })), this.showLabel && (h("div", { class: {
+                'pagination-label': true,
+                'pagination-joined': this.segmented
+            } }, this.getPageLabel())), !this.hideNumbers && (h("div", { class: {
+                'pagination-pages': true,
+                'pagination-joined': this.segmented
+            } }, visiblePages.map(page => (h("ui-button", { key: page, variant: this.getButtonVariant(page), size: this.size === 'sm' ? 'sm' : this.size === 'lg' ? 'lg' : 'md',
+            // class={{
+            //   'pagination-btn': true,
+            //   'pagination-page': true,
+            //   'active': page === currentPage
+            // }}
+            onClick: () => this.handlePageChange(page), disabled: this.disabled, label: `${page}`, shape: this.getEffectiveShape() }))))), showPrevNext && (h("ui-button", { variant: this.getButtonVariant(-1), size: this.size === 'sm' ? 'sm' : this.size === 'lg' ? 'lg' : 'md',
+            // class={{
+            //   'pagination-btn': true,
+            //   'pagination-next': true,
+            //   'pagination-joined': this.arrowsJoined || this.segmented,
+            //   'disabled': !canGoNext
+            // }}
+            onClick: () => this.handlePageChange(currentPage + 1), disabled: !canGoNext || this.disabled, ariaLabel: "Next page", icon: this.iconOnly || this.arrowsJoined ? this.getNavIcon('next') : undefined, iconLibrary: "lucide", label: this.iconOnly || this.arrowsJoined ? undefined : this.nextText, shape: this.getEffectiveShape() })), showFirstLast && (h("ui-button", { variant: this.getButtonVariant(-1), size: this.size === 'sm' ? 'sm' : this.size === 'lg' ? 'lg' : 'md',
+            //// class={`pagination-btn pagination-last ${!canGoNext ? 'disabled' : ''}`}
+            onClick: () => this.handlePageChange(totalPages), disabled: !canGoNext || this.disabled, ariaLabel: "Last page", icon: this.iconOnly ? "chevrons-right" : undefined, iconLibrary: "lucide", label: this.iconOnly ? undefined : this.lastText, shape: this.getEffectiveShape() })), this.quickJump && (h("ui-button", { variant: this.getButtonVariant(-1), size: this.size === 'sm' ? 'sm' : this.size === 'lg' ? 'lg' : 'md',
+            //// class={`pagination-btn pagination-quick-backward ${!canGoPrev ? 'disabled' : ''}`}
+            onClick: () => this.handleQuickJump('backward'), disabled: !canGoPrev || this.disabled, ariaLabel: `Jump back ${this.quickJumpStep} pages`, icon: "chevrons-left", iconLibrary: "lucide", shape: this.getEffectiveShape() })), this.quickJump && (h("ui-button", { variant: this.getButtonVariant(-1), size: this.size === 'sm' ? 'sm' : this.size === 'lg' ? 'lg' : 'md',
+            // class={`pagination-btn pagination-quick-forward ${!canGoNext ? 'disabled' : ''}`}
+            onClick: () => this.handleQuickJump('forward'), disabled: !canGoNext || this.disabled, ariaLabel: `Jump forward ${this.quickJumpStep} pages`, icon: "chevrons-right", iconLibrary: "lucide", shape: this.getEffectiveShape() }))));
+    }
+    renderCompactPagination() {
+        const { currentPage, totalPages } = this;
+        const canGoPrev = currentPage > 1;
+        const canGoNext = currentPage < totalPages;
+        return (h("div", { class: "pagination-compact" }, h("ui-button", { variant: "ghost", size: "sm", iconOnly: true, icon: "chevron-left", iconLibrary: "lucide", iconSize: "14px",
+            // class={`pagination-btn pagination-prev ${!canGoPrev ? 'disabled' : ''}`}
+            onClick: () => this.handlePageChange(currentPage - 1), disabled: !canGoPrev || this.disabled, ariaLabel: "Previous page", shape: this.getEffectiveShape() }), h("span", { class: "pagination-info" }, currentPage, " of ", totalPages), h("ui-button", { variant: "ghost", size: "sm", iconOnly: true, icon: "chevron-right", iconLibrary: "lucide", iconSize: "14px",
+            // class={`pagination-btn pagination-next ${!canGoNext ? 'disabled' : ''}`}
+            onClick: () => this.handlePageChange(currentPage + 1), disabled: !canGoNext || this.disabled, ariaLabel: "Next page", shape: this.getEffectiveShape() })));
+    }
+    renderDetailedPagination() {
+        const startItem = (this.currentPage - 1) * this.itemsPerPage + 1;
+        const endItem = Math.min(this.currentPage * this.itemsPerPage, this.totalItems);
+        return (h("div", { class: "pagination-detailed" }, this.renderBasicPagination(), h("div", { class: "pagination-details" }, this.showTotal && (h("span", { class: "pagination-total" }, "Showing ", startItem, "-", endItem, " of ", this.totalItems, " items")), this.renderPageSizeSelector(), this.showJumpTo && (h("div", { class: "pagination-jump" }, h("label", null, "Go to page:"), h("ui-input", { type: "number", min: 1, max: this.totalPages, value: this.jumpToPage, class: this.inputError ? 'has-error' : '', onInputChange: (e) => this.handleInputChange(e), onInputKeydown: (e) => e.detail.key === 'Enter' && this.handleJumpToPage(), disabled: this.disabled, size: "sm", variant: "plain", showTypeIcon: false, style: { width: this.getPageInputWidth() } }), h("ui-button", { variant: "primary", size: "sm",
+            //// pagination-jump-btn"
+            onClick: () => this.handleJumpToPage(), disabled: this.disabled, label: "Go", shape: this.getEffectiveShape() }))))));
+    }
+    renderMinimalPagination() {
+        const { currentPage, totalPages } = this;
+        const canGoPrev = currentPage > 1;
+        const canGoNext = currentPage < totalPages;
+        return (h("div", { class: "pagination-minimal" }, h("ui-button", { variant: "ghost", size: "sm", iconOnly: true, icon: "chevrons-left", iconLibrary: "lucide", iconSize: "14px",
+            // class={`pagination-btn pagination-prev ${!canGoPrev ? 'disabled' : ''}`}
+            onClick: () => this.handlePageChange(currentPage - 1), disabled: !canGoPrev || this.disabled, ariaLabel: "Previous page", shape: this.getEffectiveShape() }), h("div", { class: "pagination-input-group" }, h("ui-input", { type: "number", min: 1, max: totalPages, value: this.jumpToPage || this.currentPage, onInputChange: (e) => this.handleInputChange(e), onInputBlur: () => this.handleJumpToPage(), onInputKeydown: (e) => e.detail.key === 'Enter' && this.handleJumpToPage(), disabled: this.disabled, class: `pagination-page-input ${this.inputError ? 'has-error' : ''}`, size: "sm", variant: "plain", showTypeIcon: false, style: { width: this.getPageInputWidth() } }), h("span", { class: "pagination-separator" }, "of"), h("span", { class: "pagination-total-pages" }, totalPages)), h("ui-button", { variant: "ghost", size: "sm", iconOnly: true, icon: "chevrons-right", iconLibrary: "lucide", iconSize: "14px",
+            // class={`pagination-btn pagination-next ${!canGoNext ? 'disabled' : ''}`}
+            onClick: () => this.handlePageChange(currentPage + 1), disabled: !canGoNext || this.disabled, ariaLabel: "Next page", shape: this.getEffectiveShape() })));
+    }
+    renderAdvancedPagination() {
+        return (h("div", { class: "pagination-advanced" }, h("div", { class: "pagination-controls" }, this.renderPageSizeSelector(), this.showTotal && (h("div", { class: "pagination-summary" }, "Showing ", ((this.currentPage - 1) * this.itemsPerPage) + 1, " to ", Math.min(this.currentPage * this.itemsPerPage, this.totalItems), " of ", this.totalItems, " entries"))), this.renderBasicPagination(), this.showJumpTo && (h("div", { class: "pagination-jump-section" }, h("label", null, "Jump to page:"), h("ui-input", { type: "text", inputmode: "numeric", pattern: "[0-9]*", value: this.currentPage.toString(), size: this.size, onInputChange: (e) => this.handleInputChange(e), class: {
+                'pagination-page-input': true,
+                'has-error': this.inputError !== ''
+            }, style: { width: this.getPageInputWidth() }, error: this.inputError !== '', showError: false, disabled: this.disabled }), h("ui-button", { variant: "primary", size: "sm",
+            ////class="pagination-btn"
+            onClick: () => this.handleJumpToPage(), disabled: this.disabled, label: "Go", shape: this.getEffectiveShape() })))));
+    }
+    renderInfinitePagination() {
+        return (h("div", { class: "pagination-infinite" }, h("div", { class: "pagination-loading" }, this.loading ? (h("ui-loader", { size: "xs", color: "currentColor" })) : (h("ui-button", { variant: "primary",
+            // pagination-load-more"
+            onClick: () => this.handlePageChange(this.currentPage + 1), disabled: this.currentPage >= this.totalPages || this.disabled, label: "Load More", shape: this.getEffectiveShape() }))), this.showTotal && (h("div", { class: "pagination-infinite-info" }, "Showing ", this.currentPage * this.itemsPerPage, " of ", this.totalItems, " items"))));
+    }
+    renderDropdownPagination() {
+        const pageOptions = [];
+        for (let i = 1; i <= this.totalPages; i++) {
+            pageOptions.push({
+                label: `Page ${i} of ${this.totalPages}`,
+                value: i.toString()
+            });
+        }
+        return (h("div", { class: "pagination-dropdown-container" }, this.showTotal && (h("div", { class: "pagination-total" }, this.totalItems, " Items")), this.renderPageSizeSelector(), !this.hideNavButtons && (h("ui-button", { variant: "ghost", iconOnly: true, icon: "chevron-left", iconLibrary: "lucide",
+            // pagination-prev"
+            onClick: () => this.handlePageChange(this.currentPage - 1), disabled: this.currentPage === 1 || this.disabled, ariaLabel: "Previous page", shape: "circle" })), h("div", { class: { 'pagination-dropdown-wrapper': true, 'pagination-dropdown-wrapper-open': this.openDropdown === 'page' }, onClick: (e) => e.stopPropagation() }, h("div", { class: { 'pg-dropdown': true, 'pg-dropdown-open-host': this.openDropdown === 'page' } }, h("button", { class: { 'pg-dropdown-trigger': true, 'pg-dropdown-trigger-wide': true, 'pg-dropdown-open': this.openDropdown === 'page' }, onClick: () => { this.openDropdown = this.openDropdown === 'page' ? null : 'page'; }, disabled: this.disabled, type: "button" }, h("span", null, "Page ", this.currentPage, " of ", this.totalPages), h("svg", { class: { 'pg-dropdown-arrow': true, 'pg-arrow-up': this.openDropdown === 'page' }, width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2.5", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "m6 9 6 6 6-6" }))), this.openDropdown === 'page' && (h("div", { class: "pg-dropdown-panel pg-dropdown-panel-scroll" }, pageOptions.map(opt => (h("div", { class: { 'pg-dropdown-item': true, 'pg-dropdown-item-selected': opt.value === this.currentPage.toString() }, onClick: () => { this.handlePageChange(parseInt(opt.value)); this.openDropdown = null; } }, h("span", null, opt.label), opt.value === this.currentPage.toString() && (h("svg", { class: "pg-dropdown-check", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M20 6 9 17l-5-5" })))))))))), !this.hideNavButtons && (h("ui-button", { variant: "ghost", iconOnly: true, icon: "chevron-right", iconLibrary: "lucide",
+            // pagination-next"
+            onClick: () => this.handlePageChange(this.currentPage + 1), disabled: this.currentPage === this.totalPages || this.disabled, ariaLabel: "Next page", shape: "circle" }))));
+    }
+    renderInputPagination() {
+        return (h("div", { class: "pagination-input-container" }, this.showTotal && (h("div", { class: "pagination-total" }, this.totalItems, " Total")), this.renderPageSizeSelector(), !this.hideNavButtons && (h("ui-button", { variant: "ghost", iconOnly: true, icon: this.getNavIcon('first'), iconLibrary: "lucide",
+            // pagination-first"
+            onClick: () => this.handlePageChange(1), disabled: this.currentPage === 1 || this.disabled, ariaLabel: "First page", shape: "circle" })), !this.hideNavButtons && (h("ui-button", { variant: "ghost", iconOnly: true, icon: this.getNavIcon('prev'), iconLibrary: "lucide",
+            // pagination-prev"
+            onClick: () => this.handlePageChange(this.currentPage - 1), disabled: this.currentPage === 1 || this.disabled, ariaLabel: "Previous page", shape: "circle" })), h("ui-input", { type: "text", inputmode: "numeric", pattern: "[0-9]*", class: `pagination-page-input ${this.inputError ? 'has-error' : ''}`, value: this.pageInputValue, onInputChange: (e) => this.handleInputChange(e), onInputKeydown: (e) => e.detail.key === 'Enter' && this.handleJumpToPage(), onFocusInternal: () => { this.inputError = ''; }, disabled: this.disabled, size: this.size, variant: "plain", showTypeIcon: false, showError: false, style: { width: this.getPageInputWidth() } }), h("span", { class: "pagination-input-label" }, "of ", h("strong", null, this.totalPages)), !this.hideNavButtons && (h("ui-button", { variant: "ghost", iconOnly: true, icon: this.getNavIcon('next'), iconLibrary: "lucide",
+            // pagination-next"
+            onClick: () => this.handlePageChange(this.currentPage + 1), disabled: this.currentPage === this.totalPages || this.disabled, ariaLabel: "Next page", shape: "circle" })), !this.hideNavButtons && (h("ui-button", { variant: "ghost", iconOnly: true, icon: this.getNavIcon('last'), iconLibrary: "lucide",
+            // pagination-last"
+            onClick: () => this.handlePageChange(this.totalPages), disabled: this.currentPage === this.totalPages || this.disabled, shape: "circle" }))));
+    }
+    renderIndicatorPagination() {
+        const pages = Array.from({ length: this.totalPages }, (_, i) => i + 1);
+        return (h("div", { class: "pagination-indicator-container" }, this.showPrevNext && (h("ui-button", { variant: this.getButtonVariant(-1), iconOnly: true, icon: "chevron-left", iconLibrary: "lucide",
+            //class="pagination-nav-btn"
+            onClick: () => this.handlePageChange(this.currentPage - 1), disabled: this.currentPage === 1 || this.disabled, ariaLabel: "Previous page", shape: this.getEffectiveShape() })), h("div", { class: "pagination-indicators" }, pages.map(page => (h("div", { class: {
+                'pagination-indicator': true,
+                'pagination-indicator-active': page === this.currentPage
+            }, onClick: () => !this.disabled && this.handlePageChange(page), role: "button", tabindex: this.disabled ? -1 : 0, "aria-label": `Go to page ${page}`, "aria-current": page === this.currentPage ? 'page' : undefined }, h("div", { class: "pagination-indicator-dot" }), page === this.currentPage && (h("div", { class: "pagination-indicator-label" }, page)))))), this.showPrevNext && (h("ui-button", { variant: this.getButtonVariant(-1), iconOnly: true, icon: "chevron-right", iconLibrary: "lucide",
+            //class="pagination-nav-btn"
+            onClick: () => this.handlePageChange(this.currentPage + 1), disabled: this.currentPage === this.totalPages || this.disabled, ariaLabel: "Next page", shape: this.getEffectiveShape() })), this.showTotal && (h("div", { class: "pagination-total" }, this.currentPage, " / ", this.totalPages))));
+    }
+    getButtonVariant(page) {
+        if (page === this.currentPage) {
+            if (this.variant === 'soft')
+                return 'soft';
+            if (this.variant === 'glass')
+                return 'glass';
+            if (this.variant === 'modern')
+                return 'primary';
+            if (this.variant === 'premium')
+                return 'primary';
+            return this.theme;
+        }
+        if (this.variant === 'outlined')
+            return 'outline';
+        if (this.variant === 'floating')
+            return 'raised';
+        if (this.variant === 'glass')
+            return 'glass';
+        if (this.variant === 'soft')
+            return 'soft';
+        if (this.variant === 'modern')
+            return 'ghost';
+        if (this.variant === 'minimalist')
+            return 'plain';
+        if (this.variant === 'premium')
+            return 'ghost';
+        if (this.variant === 'underline')
+            return 'ghost';
+        return 'ghost';
+    }
+    render() {
+        // Auto-hide when only one page
+        if (this.autoHide && this.totalPages <= 1 && !this.infinite) {
+            return null;
+        }
+        // Smart compact mode - auto-switch based on page count
+        const effectiveType = this.smartCompact && this.totalPages > this.smartCompactThreshold
+            ? 'compact'
+            : (this.responsiveMode && this.isMobile ? 'compact' : this.type);
+        const effectiveShape = this.shape !== 'default' ? this.shape : (this.circle ? 'circle' : (this.pill ? 'pill' : 'default'));
+        const classes = {
+            'ui-pagination': true,
+            [`pagination-${effectiveType}`]: true,
+            [`pagination-${this.size}`]: true,
+            [`pagination-${this.variant}`]: true,
+            [`pagination-theme-${this.theme}`]: this.theme !== 'default',
+            [`pagination-shape-${effectiveShape}`]: effectiveShape !== 'default',
+            'pagination-disabled': this.disabled,
+            'pagination-segmented': this.segmented,
+            'pagination-arrows-joined': this.arrowsJoined,
+            'pagination-vertical': this.vertical,
+            'pagination-rtl': this.rtl,
+            'pagination-mobile': this.isMobile,
+            'pagination-sticky': this.sticky,
+            [`pagination-sticky-${this.stickyPosition}`]: this.sticky,
+            'pagination-transitioning': this.isTransitioning,
+            'pagination-has-container': ['floating', 'glass', 'modern', 'premium'].includes(this.variant),
+            'pagination-dropdown-open': this.openDropdown !== null,
+        };
+        return (h("div", { class: classes, onKeyDown: this.handleKeyDown, tabindex: this.keyboardNav && !this.disabled ? 0 : -1, role: "navigation", "aria-label": "Pagination Navigation", ref: (el) => this.paginationRef = el }, h("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", class: "sr-only" }, "Page ", this.currentPage, " of ", this.totalPages), this.showProgress && (h("div", { class: "pagination-progress-bar" }, h("div", { class: "pagination-progress-fill", style: { width: `${this.progressPercentage}%` } }))), h("div", { class: "pagination-main-content" }, this.infinite ? this.renderInfinitePagination() :
+            effectiveType === 'basic' ? this.renderBasicPagination() :
+                effectiveType === 'compact' ? this.renderCompactPagination() :
+                    effectiveType === 'detailed' ? this.renderDetailedPagination() :
+                        effectiveType === 'minimal' ? this.renderMinimalPagination() :
+                            effectiveType === 'advanced' ? this.renderAdvancedPagination() :
+                                effectiveType === 'dropdown' ? this.renderDropdownPagination() :
+                                    effectiveType === 'input' ? this.renderInputPagination() :
+                                        effectiveType === 'indicator' ? this.renderIndicatorPagination() :
+                                            this.renderBasicPagination()), this.showTotal && effectiveType !== 'detailed' && effectiveType !== 'advanced' && effectiveType !== 'dropdown' && (h("div", { class: "pagination-total" }, "Total ", this.totalItems, " items"))));
+    }
+    static get is() { return "ui-pagination"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pagination.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pagination.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "hideNavButtons": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hide navigation buttons (next, previous, first, last) in dropdown/input modes"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-nav-buttons",
+                "defaultValue": "false"
+            },
+            "currentPage": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current active page (1-based)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "current-page",
+                "defaultValue": "1"
+            },
+            "totalItems": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Total number of items"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "total-items",
+                "defaultValue": "0"
+            },
+            "itemsPerPage": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of items per page"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "items-per-page",
+                "defaultValue": "10"
+            },
+            "maxVisiblePages": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum number of page buttons to show"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-visible-pages",
+                "defaultValue": "5"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PaginationType",
+                    "resolved": "\"advanced\" | \"basic\" | \"compact\" | \"detailed\" | \"dropdown\" | \"indicator\" | \"input\" | \"minimal\"",
+                    "references": {
+                        "PaginationType": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/pagination/types.ts::PaginationType",
+                            "referenceLocation": "PaginationType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Type of pagination to display"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'basic'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PaginationSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "PaginationSize": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/pagination/types.ts::PaginationSize",
+                            "referenceLocation": "PaginationSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the pagination component"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PaginationVariant",
+                    "resolved": "\"default\" | \"filled\" | \"floating\" | \"glass\" | \"minimalist\" | \"modern\" | \"outlined\" | \"premium\" | \"soft\" | \"underline\"",
+                    "references": {
+                        "PaginationVariant": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/pagination/types.ts::PaginationVariant",
+                            "referenceLocation": "PaginationVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual variant of the pagination"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StatusColor",
+                    "resolved": "\"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\"",
+                    "references": {
+                        "StatusColor": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::StatusColor",
+                            "referenceLocation": "StatusColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color theme"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "theme",
+                "defaultValue": "'primary'"
+            },
+            "showFirstLast": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show first/last buttons"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-first-last",
+                "defaultValue": "true"
+            },
+            "showPrevNext": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show previous/next buttons"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-prev-next",
+                "defaultValue": "true"
+            },
+            "showPageSize": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show page size selector"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-page-size",
+                "defaultValue": "false"
+            },
+            "showTotal": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show total count"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-total",
+                "defaultValue": "false"
+            },
+            "showJumpTo": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show jump to page input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-jump-to",
+                "defaultValue": "false"
+            },
+            "prevText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom text for previous button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "prev-text",
+                "defaultValue": "'Previous'"
+            },
+            "nextText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom text for next button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "next-text",
+                "defaultValue": "'Next'"
+            },
+            "firstText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom text for first button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "first-text",
+                "defaultValue": "'First'"
+            },
+            "lastText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom text for last button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "last-text",
+                "defaultValue": "'Last'"
+            },
+            "pageSizes": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "number[]",
+                    "resolved": "number[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Available page sizes for selector"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[10, 25, 50, 100]"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether pagination is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "iconOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show only icons (no text labels)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-only",
+                "defaultValue": "false"
+            },
+            "infinite": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to use infinite scroll style (shows loading state)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "infinite",
+                "defaultValue": "false"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Loading state for infinite scroll"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "compact": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to use compact mode (for dropdown and input types)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "compact",
+                "defaultValue": "false"
+            },
+            "keyboardNav": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable keyboard navigation"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "keyboard-nav",
+                "defaultValue": "true"
+            },
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Shape",
+                    "resolved": "\"circle\" | \"default\" | \"pill\" | \"rounded\" | \"square\"",
+                    "references": {
+                        "Shape": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::Shape",
+                            "referenceLocation": "Shape"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shape",
+                "defaultValue": "'default'"
+            },
+            "pill": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Pill-shaped buttons (shorthand for shape=\"pill\")"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pill",
+                "defaultValue": "false"
+            },
+            "circle": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Circle-shaped buttons (shorthand for shape=\"circle\")"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "circle",
+                "defaultValue": "false"
+            },
+            "prevIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom prev icon (emoji or SVG string)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "prev-icon",
+                "defaultValue": "''"
+            },
+            "nextIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom next icon (emoji or SVG string)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "next-icon",
+                "defaultValue": "''"
+            },
+            "firstIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom first icon (emoji or SVG string)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "first-icon",
+                "defaultValue": "''"
+            },
+            "lastIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom last icon (emoji or SVG string)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "last-icon",
+                "defaultValue": "''"
+            },
+            "mobileBreakpoint": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Mobile breakpoint (px)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mobile-breakpoint",
+                "defaultValue": "768"
+            },
+            "responsiveMode": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Auto-switch to compact mode on mobile"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "responsive-mode",
+                "defaultValue": "true"
+            },
+            "rtl": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "RTL support"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rtl",
+                "defaultValue": "false"
+            },
+            "ellipsisTooltip": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show tooltip on ellipsis hover with hidden page numbers"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ellipsis-tooltip",
+                "defaultValue": "true"
+            },
+            "pageTransition": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable page transition animations"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "page-transition",
+                "defaultValue": "true"
+            },
+            "urlSync": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sync current page with URL query parameter"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "url-sync",
+                "defaultValue": "false"
+            },
+            "urlParam": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "URL parameter name for page number"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "url-param",
+                "defaultValue": "'page'"
+            },
+            "autoHide": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-hide",
+                "defaultValue": "true"
+            },
+            "quickJump": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable quick jump buttons (+5, -5)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "quick-jump",
+                "defaultValue": "false"
+            },
+            "quickJumpStep": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Quick jump step size"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "quick-jump-step",
+                "defaultValue": "5"
+            },
+            "sticky": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Make pagination sticky"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sticky",
+                "defaultValue": "false"
+            },
+            "stickyPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TopBottom",
+                    "resolved": "\"bottom\" | \"top\"",
+                    "references": {
+                        "TopBottom": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::TopBottom",
+                            "referenceLocation": "TopBottom"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sticky position (top or bottom)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sticky-position",
+                "defaultValue": "'bottom'"
+            },
+            "smartCompact": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Auto-switch to compact when pages exceed threshold"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "smart-compact",
+                "defaultValue": "false"
+            },
+            "smartCompactThreshold": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Page count threshold for smart compact mode"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "smart-compact-threshold",
+                "defaultValue": "20"
+            },
+            "swipeGestures": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable swipe gestures on mobile"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "swipe-gestures",
+                "defaultValue": "true"
+            },
+            "showProgress": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show progress indicator"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-progress",
+                "defaultValue": "false"
+            },
+            "showSelectedMarker": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, shows a checkmark (tick) next to selected items in internal dropdowns."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-selected-marker",
+                "defaultValue": "true"
+            },
+            "segmented": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Layout buttons without gaps, inside a single border-radius container"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "segmented",
+                "defaultValue": "false"
+            },
+            "hideNumbers": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hide page number buttons completely"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-numbers",
+                "defaultValue": "false"
+            },
+            "showLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show custom label (e.g. \"3 OF 10\") instead of or alongside numbers"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-label",
+                "defaultValue": "false"
+            },
+            "labelTemplate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Template for the label when showLabel is true. Uses {current} and {total} placeholders."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-template",
+                "defaultValue": "'{current} OF {total}'"
+            },
+            "arrowsJoined": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Only join navigation arrows (prev/next) together"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "arrows-joined",
+                "defaultValue": "false"
+            },
+            "vertical": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Layout the pagination vertically"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "vertical",
+                "defaultValue": "false"
+            },
+            "persistPage": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Persist page to localStorage"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "persist-page",
+                "defaultValue": "false"
+            },
+            "storageKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "LocalStorage key for persistence"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "storage-key",
+                "defaultValue": "'pagination-page'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "jumpToPage": {},
+            "inputError": {},
+            "pageInputValue": {},
+            "showEllipsisTooltip": {},
+            "ellipsisPages": {},
+            "isTransitioning": {},
+            "isMobile": {},
+            "openDropdown": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pageChange",
+                "name": "pageChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when page changes"
+                },
+                "complexType": {
+                    "original": "{ page: number; itemsPerPage: number }",
+                    "resolved": "{ page: number; itemsPerPage: number; }",
+                    "references": {}
+                }
+            }, {
+                "method": "itemsPerPageChange",
+                "name": "itemsPerPageChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when items per page changes"
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "validationError",
+                "name": "validationError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when validation error occurs"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "totalItems",
+                "methodName": "handleTotalChange"
+            }, {
+                "propName": "itemsPerPage",
+                "methodName": "handleTotalChange"
+            }, {
+                "propName": "currentPage",
+                "methodName": "handleCurrentPageChange"
+            }, {
+                "propName": "openDropdown",
+                "methodName": "handleOpenDropdownChange"
+            }];
+    }
+}