@actabldesign/bellhop-core 0.0.8 → 0.0.12

package/dist/collection/components/bh-pagination/bh-pagination.css

@@ -21,63 +21,6 @@
   border-top: 1px solid var(--color-neutral-200, #e2e4eb);
 }
 
-/* -----------------------------------------------------------------------------
-   Size Variants
-   ----------------------------------------------------------------------------- */
-
-.pagination-sm {
-  padding: var(--sp-2, 0.5rem) var(--sp-3, 0.75rem);
-  gap: var(--sp-3, 0.75rem);
-}
-
-.pagination-sm .pagination-info-text,
-.pagination-sm .pagination-page-size-label {
-  font-size: 0.75rem;
-}
-
-.pagination-sm .pagination-btn {
-  width: 28px;
-  height: 28px;
-}
-
-.pagination-sm .pagination-btn .material-symbols-outlined {
-  font-size: 18px;
-}
-
-.pagination-sm .pagination-select {
-  height: 28px;
-  font-size: 0.75rem;
-  padding: 0 var(--sp-5, 1.25rem) 0 var(--sp-2, 0.5rem);
-}
-
-.pagination-md {
-  /* Default - no changes needed */
-}
-
-.pagination-lg {
-  padding: var(--sp-4, 1rem) var(--sp-5, 1.25rem);
-  gap: var(--sp-5, 1.25rem);
-}
-
-.pagination-lg .pagination-info-text,
-.pagination-lg .pagination-page-size-label {
-  font-size: 0.9375rem;
-}
-
-.pagination-lg .pagination-btn {
-  width: 40px;
-  height: 40px;
-}
-
-.pagination-lg .pagination-btn .material-symbols-outlined {
-  font-size: 24px;
-}
-
-.pagination-lg .pagination-select {
-  height: 40px;
-  font-size: 0.9375rem;
-}
-
 /* -----------------------------------------------------------------------------
    Disabled State
    ----------------------------------------------------------------------------- */
@@ -108,7 +51,9 @@
 
 .pagination-controls {
   display: flex;
+  justify-content: space-between;
   align-items: center;
+  width: 100%;
   gap: var(--sp-4, 1rem);
 }
 
@@ -155,7 +100,7 @@
 
 .pagination-select:focus {
   outline: none;
-  border-color: var(--color-brand-500, #6366f1);
+  border-color: var(--color-brand-600);
   box-shadow: 0 0 0 3px var(--color-brand-100, #e0e1fc);
 }
 
@@ -213,6 +158,125 @@
   cursor: not-allowed;
 }
 
+/* -----------------------------------------------------------------------------
+   Page Numbers Display
+   ----------------------------------------------------------------------------- */
+
+.pagination-pages {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-1, 0.25rem);
+}
+
+.pagination-page-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 32px;
+  height: 32px;
+  padding: 0 var(--sp-2, 0.5rem);
+  border: 1px solid transparent;
+  border-radius: var(--radius-md, 6px);
+  background-color: transparent;
+  color: var(--color-neutral-700, #4d5266);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.pagination-page-btn:hover:not(:disabled) {
+  background-color: var(--color-neutral-100, #f0f1f5);
+  color: var(--color-neutral-900, #141624);
+}
+
+.pagination-page-btn-active {
+  background-color: var(--color-brand-600);
+  color: var(--color-white, #fff);
+  border-color: var(--color-brand-600);
+}
+
+.pagination-page-btn-active:hover:not(:disabled) {
+  background-color: var(--color-brand-600);
+  border-color: var(--color-brand-600);
+  color: var(--color-white, #fff);
+}
+
+.pagination-page-btn:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--color-brand-400);
+}
+
+.pagination-page-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.pagination-ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 24px;
+  color: var(--color-neutral-400, #939ab4);
+  font-size: 0.875rem;
+  user-select: none;
+}
+
+/* -----------------------------------------------------------------------------
+   Compact Mode - Page Input
+   ----------------------------------------------------------------------------- */
+
+.pagination-page-display {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2, 0.5rem);
+}
+
+.pagination-page-text {
+  font-size: 0.875rem;
+  color: var(--color-neutral-700, #4d5266);
+  white-space: nowrap;
+}
+
+.pagination-page-input {
+  width: 60px;
+  height: 32px;
+  padding: 0 var(--sp-2, 0.5rem);
+  border: 1px solid var(--color-neutral-300, #c0c4d4);
+  border-radius: var(--radius-md, 6px);
+  font-size: 0.875rem;
+  text-align: center;
+  color: var(--color-neutral-900, #141624);
+  background-color: var(--color-white, #fff);
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.pagination-page-input:hover:not(:disabled) {
+  border-color: var(--color-neutral-400, #939ab4);
+}
+
+.pagination-page-input:focus {
+  outline: none;
+  border-color: var(--color-brand-500, #6366f1);
+  box-shadow: 0 0 0 3px var(--color-brand-100, #e0e1fc);
+}
+
+.pagination-page-input:disabled {
+  background-color: var(--color-neutral-100, #f0f1f5);
+  cursor: not-allowed;
+}
+
+/* Remove number input spinners */
+.pagination-page-input::-webkit-inner-spin-button,
+.pagination-page-input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.pagination-page-input[type='number'] {
+  -moz-appearance: textfield;
+}
+
 /* -----------------------------------------------------------------------------
    Responsive Adjustments
    ----------------------------------------------------------------------------- */

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

@@ -25,13 +25,13 @@ export class BhPagination {
      */
     showItemCount = true;
     /**
-     * Show first/last page buttons
+     * Compact mode - shows input field instead of page numbers
      */
-    showFirstLastButtons = true;
+    compact = false;
     /**
-     * Size variant of the pagination
+     * Maximum number of page numbers to show (for non-compact mode)
      */
-    size = 'md';
+    maxPageNumbers = 5;
     /**
      * Whether the pagination is disabled
      */
@@ -104,13 +104,41 @@ export class BhPagination {
                 this.internalPage = newPage;
                 this.page = newPage;
             }
-            this.bhPageSizeChange.emit({ page: this.internalPage, pageSize: newPageSize });
+            this.bhPageSizeChange.emit({
+                page: this.internalPage,
+                pageSize: newPageSize,
+            });
         }
     }
-    goToFirst = () => this.goToPage(1);
     goToPrevious = () => this.goToPage(this.internalPage - 1);
     goToNext = () => this.goToPage(this.internalPage + 1);
-    goToLast = () => this.goToPage(this.totalPages);
+    handlePageInputChange(event) {
+        const input = event.target;
+        const pageNumber = parseInt(input.value, 10);
+        if (!isNaN(pageNumber)) {
+            this.goToPage(pageNumber);
+        }
+    }
+    getPageNumbers() {
+        const totalPages = this.totalPages;
+        const currentPage = this.internalPage;
+        const maxPages = this.maxPageNumbers;
+        if (totalPages <= maxPages) {
+            return Array.from({ length: totalPages }, (_, i) => i + 1);
+        }
+        const pages = [];
+        const half = Math.floor(maxPages / 2);
+        let start = Math.max(1, currentPage - half);
+        let end = Math.min(totalPages, start + maxPages - 1);
+        // Adjust start if we're near the end
+        if (end - start < maxPages - 1) {
+            start = Math.max(1, end - maxPages + 1);
+        }
+        for (let i = start; i <= end; i++) {
+            pages.push(i);
+        }
+        return pages;
+    }
     getInfoText() {
         if (this.totalItems === 0) {
             return 'No results';
@@ -125,13 +153,35 @@ export class BhPagination {
             .replace('{page}', String(this.internalPage))
             .replace('{totalPages}', String(this.totalPages));
     }
+    renderPageNumbers() {
+        if (this.compact) {
+            // Compact mode: Page X of Y
+            return (h("div", { class: "pagination-page-display" }, h("span", { class: "pagination-page-text" }, "Page"), h("input", { type: "number", class: "pagination-page-input", value: String(this.internalPage), min: "1", max: String(this.totalPages), disabled: this.disabled, onChange: (e) => this.handlePageInputChange(e), "aria-label": "Page number" }), h("span", { class: "pagination-page-text" }, "of ", this.totalPages)));
+        }
+        // Non-compact mode: numbered buttons
+        const pageNumbers = this.getPageNumbers();
+        const showStartEllipsis = pageNumbers[0] > 1;
+        const showEndEllipsis = pageNumbers[pageNumbers.length - 1] < this.totalPages;
+        return (h("div", { class: "pagination-pages" }, showStartEllipsis &&
+            pageNumbers[0] > 2 && [
+            h("button", { type: "button", class: "pagination-page-btn", onClick: () => this.goToPage(1), disabled: this.disabled, "aria-label": "Go to page 1", key: "page-1" }, "1"),
+            h("span", { class: "pagination-ellipsis", key: "ellipsis-start" }, "..."),
+        ], pageNumbers.map((pageNum) => (h("button", { type: "button", class: {
+                'pagination-page-btn': true,
+                'pagination-page-btn-active': pageNum === this.internalPage,
+            }, onClick: () => this.goToPage(pageNum), disabled: this.disabled, "aria-label": `Go to page ${pageNum}`, "aria-current": pageNum === this.internalPage ? 'page' : undefined, key: `page-${pageNum}` }, pageNum))), showEndEllipsis &&
+            pageNumbers[pageNumbers.length - 1] < this.totalPages - 1 && [
+            h("span", { class: "pagination-ellipsis", key: "ellipsis-end" }, "..."),
+            h("button", { type: "button", class: "pagination-page-btn", onClick: () => this.goToPage(this.totalPages), disabled: this.disabled, "aria-label": `Go to page ${this.totalPages}`, key: `page-${this.totalPages}` }, this.totalPages),
+        ]));
+    }
     render() {
         const paginationClasses = {
-            'pagination': true,
-            [`pagination-${this.size}`]: true,
+            pagination: true,
             'pagination-disabled': this.disabled,
+            'pagination-compact': this.compact,
         };
-        return (h("div", { key: '9e9cbcde6a010fdbbbd809a3f576b40fe7f905cc', class: paginationClasses, role: "navigation", "aria-label": "Pagination" }, h("div", { key: '212d0b1627b0897ceecd0298e8928a4ec11441d7', class: "pagination-info" }, h("span", { key: 'ab37b52387fd66f583b67fd96ce396b6649d31d0', class: "pagination-info-text" }, this.getInfoText())), h("div", { key: '46793889c3efa38e28171759ea3fb2b22ddcb03c', class: "pagination-controls" }, this.showPageSizeSelector && (h("div", { key: '87eccc7848ef35ad61605d2b9539cf40add8a79c', class: "pagination-page-size" }, h("span", { key: 'b3ff61dceff7cc57240c724150fee5b199a17ed8', class: "pagination-page-size-label" }, this.rowsPerPageLabel), h("select", { key: 'ab2ddd0f5f2b3501ff06d5717f2ed543a3446651', class: "pagination-select", onChange: (e) => this.handlePageSizeChange(e), disabled: this.disabled, "aria-label": "Select page size" }, this.pageSizeOptions.map((size) => (h("option", { key: size, value: String(size), selected: size === this.internalPageSize }, size)))))), h("div", { key: 'fddb9153daa2703afbd384f972332040c76efa25', class: "pagination-nav" }, this.showFirstLastButtons && (h("button", { key: '5637468db69936eb008bf96d8e77ca8c860fa9e2', type: "button", class: "pagination-btn", onClick: this.goToFirst, disabled: !this.canGoPrevious, "aria-label": "Go to first page" }, h("span", { key: '37699a8026bdecf7858d3c5a0aa313f99acd6d28', class: "material-symbols-outlined" }, "first_page"))), h("button", { key: '590190edfc67218a19f647eb562b233d598cbbea', type: "button", class: "pagination-btn", onClick: this.goToPrevious, disabled: !this.canGoPrevious, "aria-label": "Go to previous page" }, h("span", { key: '45881aefbbc5e51adaa451ba3454a73a684613cb', class: "material-symbols-outlined" }, "chevron_left")), h("button", { key: '5d0592a32bba88bbe60f41318d3cd1d03a103f5d', type: "button", class: "pagination-btn", onClick: this.goToNext, disabled: !this.canGoNext, "aria-label": "Go to next page" }, h("span", { key: 'ae875c91c0d56757df0a78dcd645958e08e3ebde', class: "material-symbols-outlined" }, "chevron_right")), this.showFirstLastButtons && (h("button", { key: 'd97749c9c057100f145546b8a163681eb29b7358', type: "button", class: "pagination-btn", onClick: this.goToLast, disabled: !this.canGoNext, "aria-label": "Go to last page" }, h("span", { key: '58adc8bcac84c4af6bc67650e2fef83dfbeaa1e7', class: "material-symbols-outlined" }, "last_page")))))));
+        return (h("div", { key: '6d6af19e9b034f162c8aa0cb68d6e9ecdb8b4379', class: paginationClasses, role: "navigation", "aria-label": "Pagination" }, h("div", { key: 'db25c2a72f58170e01c056e3bebb7ecdb2c542d4', class: "pagination-controls" }, this.showPageSizeSelector && (h("div", { key: '70c08c54eb6466cecf11e847a260fc2fc7cfc5d7', class: "pagination-page-size" }, h("span", { key: 'f4440ea7825c078475859f3ea4c61dcffa1c5377', class: "pagination-page-size-label" }, this.rowsPerPageLabel), h("select", { key: '00afde5da29dcb405be13ae72e1964a9b35d8b37', class: "pagination-select", onChange: (e) => this.handlePageSizeChange(e), disabled: this.disabled, "aria-label": "Select page size" }, this.pageSizeOptions.map((size) => (h("option", { key: size, value: String(size), selected: size === this.internalPageSize }, size)))))), h("div", { key: '9a67b12e3f99ac14d78c258d152a5520f93d4578', class: "pagination-nav" }, h("button", { key: '7df0dcc92fe17ee8be2dd01c1b09b7781a5b4909', type: "button", class: "pagination-btn", onClick: this.goToPrevious, disabled: !this.canGoPrevious, "aria-label": "Go to previous page" }, h("span", { key: '28a2db05556dd973ec0418e116f5773e669a2066', class: "material-symbols-outlined" }, "chevron_left")), this.renderPageNumbers(), h("button", { key: 'ebf00789de88ee1e40d658dd8a874f0fb36eec70', type: "button", class: "pagination-btn", onClick: this.goToNext, disabled: !this.canGoNext, "aria-label": "Go to next page" }, h("span", { key: '9f8865e63ec0f68fecaa7475b76118857d263f67', class: "material-symbols-outlined" }, "chevron_right")))), this.showItemCount && (h("div", { key: 'ec5b745d761b38953654a7127d8f714c40e9de9d', class: "pagination-info" }, h("span", { key: 'abf649c0642981cdd0e7dfba0065735a0ed2cdf2', class: "pagination-info-text" }, this.getInfoText())))));
     }
     static get is() { return "bh-pagination"; }
     static get encapsulation() { return "shadow"; }
@@ -265,7 +315,7 @@ export class BhPagination {
                 "attribute": "show-item-count",
                 "defaultValue": "true"
             },
-            "showFirstLastButtons": {
+            "compact": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -277,39 +327,33 @@ export class BhPagination {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Show first/last page buttons"
+                    "text": "Compact mode - shows input field instead of page numbers"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "show-first-last-buttons",
-                "defaultValue": "true"
+                "attribute": "compact",
+                "defaultValue": "false"
             },
-            "size": {
-                "type": "string",
+            "maxPageNumbers": {
+                "type": "number",
                 "mutable": false,
                 "complexType": {
-                    "original": "PaginationSize",
-                    "resolved": "\"lg\" | \"md\" | \"sm\"",
-                    "references": {
-                        "PaginationSize": {
-                            "location": "local",
-                            "path": "/Users/brunabites/localsites/bellhopOS/packages/bellhop-core/src/components/bh-pagination/bh-pagination.tsx",
-                            "id": "src/components/bh-pagination/bh-pagination.tsx::PaginationSize"
-                        }
-                    }
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Size variant of the pagination"
+                    "text": "Maximum number of page numbers to show (for non-compact mode)"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "size",
-                "defaultValue": "'md'"
+                "attribute": "max-page-numbers",
+                "defaultValue": "5"
             },
             "disabled": {
                 "type": "boolean",
@@ -416,7 +460,7 @@ export class BhPagination {
                     "references": {
                         "PaginationChangeEvent": {
                             "location": "local",
-                            "path": "/Users/brunabites/localsites/bellhopOS/packages/bellhop-core/src/components/bh-pagination/bh-pagination.tsx",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-pagination/bh-pagination.tsx",
                             "id": "src/components/bh-pagination/bh-pagination.tsx::PaginationChangeEvent"
                         }
                     }
@@ -437,7 +481,7 @@ export class BhPagination {
                     "references": {
                         "PaginationChangeEvent": {
                             "location": "local",
-                            "path": "/Users/brunabites/localsites/bellhopOS/packages/bellhop-core/src/components/bh-pagination/bh-pagination.tsx",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-pagination/bh-pagination.tsx",
                             "id": "src/components/bh-pagination/bh-pagination.tsx::PaginationChangeEvent"
                         }
                     }

package/dist/collection/components/bh-pagination/bh-pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"bh-pagination.js","sourceRoot":"","sources":["../../../src/components/bh-pagination/bh-pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAgB,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAc/E,MAAM,OAAO,YAAY;IACvB;;OAEG;IACsB,IAAI,GAAW,CAAC,CAAC;IAE1C;;OAEG;IACK,UAAU,GAAW,CAAC,CAAC;IAE/B;;OAEG;IACsB,QAAQ,GAAW,EAAE,CAAC;IAE/C;;OAEG;IACK,eAAe,GAAa,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC;IAEtD;;OAEG;IACK,oBAAoB,GAAY,IAAI,CAAC;IAE7C;;OAEG;IACK,aAAa,GAAY,IAAI,CAAC;IAEtC;;OAEG;IACK,oBAAoB,GAAY,IAAI,CAAC;IAE7C;;OAEG;IACK,IAAI,GAAmB,IAAI,CAAC;IAEpC;;OAEG;IACK,QAAQ,GAAY,KAAK,CAAC;IAElC;;OAEG;IACK,gBAAgB,GAAW,gBAAgB,CAAC;IAEpD;;OAEG;IACK,mBAAmB,GAAW,6CAA6C,CAAC;IAEpF;;OAEG;IACK,aAAa,GAAW,6BAA6B,CAAC;IAErD,YAAY,GAAW,CAAC,CAAC;IACzB,gBAAgB,GAAW,EAAE,CAAC;IAEvC;;OAEG;IACM,YAAY,CAAuC;IAE5D;;OAEG;IACM,gBAAgB,CAAuC;IAEhE,iBAAiB;QACf,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC;QAC9B,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,QAAQ,CAAC;IACxC,CAAC;IAED,IAAY,UAAU;QACpB,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC;IACzE,CAAC;IAED,IAAY,SAAS;QACnB,IAAI,IAAI,CAAC,UAAU,KAAK,CAAC;YAAE,OAAO,CAAC,CAAC;QACpC,OAAO,CAAC,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC;IAC7D,CAAC;IAED,IAAY,OAAO;QACjB,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;IAC9E,CAAC;IAED,IAAY,aAAa;QACvB,OAAO,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;IACjD,CAAC;IAED,IAAY,SAAS;QACnB,OAAO,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC/D,CAAC;IAEO,QAAQ,CAAC,OAAe;QAC9B,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAE1B,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;QAC7D,IAAI,IAAI,KAAK,IAAI,CAAC,YAAY,EAAE,CAAC;YAC/B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;YACzB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;YACjB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;QACpE,CAAC;IACH,CAAC;IAEO,oBAAoB,CAAC,KAAY;QACvC,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAE1B,MAAM,MAAM,GAAG,KAAK,CAAC,MAA2B,CAAC;QACjD,MAAM,WAAW,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QAE/C,IAAI,WAAW,KAAK,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC1C,IAAI,CAAC,gBAAgB,GAAG,WAAW,CAAC;YACpC,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC;YAE5B,yFAAyF;YACzF,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,GAAG,WAAW,CAAC,CAAC,CAAC;YAC5E,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;YAE3D,IAAI,OAAO,KAAK,IAAI,CAAC,YAAY,EAAE,CAAC;gBAClC,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC;gBAC5B,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;YACtB,CAAC;YAED,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,YAAY,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC,CAAC;QACjF,CAAC;IACH,CAAC;IAEO,SAAS,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IACnC,YAAY,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC;IAC1D,QAAQ,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC;IACtD,QAAQ,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAEhD,WAAW;QACjB,IAAI,IAAI,CAAC,UAAU,KAAK,CAAC,EAAE,CAAC;YAC1B,OAAO,YAAY,CAAC;QACtB,CAAC;QAED,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,UAAU,GAAG,CAAC,EAAE,CAAC;YAC9C,OAAO,IAAI,CAAC,mBAAmB;iBAC5B,OAAO,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;iBAC1C,OAAO,CAAC,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;iBACtC,OAAO,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;QACjD,CAAC;QAED,OAAO,IAAI,CAAC,aAAa;aACtB,OAAO,CAAC,QAAQ,EAAE,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;aAC5C,OAAO,CAAC,cAAc,EAAE,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;IACtD,CAAC;IAED,MAAM;QACJ,MAAM,iBAAiB,GAAG;YACxB,YAAY,EAAE,IAAI;YAClB,CAAC,cAAc,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;YACjC,qBAAqB,EAAE,IAAI,CAAC,QAAQ;SACrC,CAAC;QAEF,OAAO,CACL,4DAAK,KAAK,EAAE,iBAAiB,EAAE,IAAI,EAAC,YAAY,gBAAY,YAAY;YAEtE,4DAAK,KAAK,EAAC,iBAAiB;gBAC1B,6DAAM,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,WAAW,EAAE,CAAQ,CAC1D;YAGN,4DAAK,KAAK,EAAC,qBAAqB;gBAE7B,IAAI,CAAC,oBAAoB,IAAI,CAC5B,4DAAK,KAAK,EAAC,sBAAsB;oBAC/B,6DAAM,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,gBAAgB,CAAQ;oBACvE,+DACE,KAAK,EAAC,mBAAmB,EACzB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAC7C,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBACZ,kBAAkB,IAE5B,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAClC,cAAQ,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,KAAK,IAAI,CAAC,gBAAgB,IAC7E,IAAI,CACE,CACV,CAAC,CACK,CACL,CACP;gBAGD,4DAAK,KAAK,EAAC,gBAAgB;oBACxB,IAAI,CAAC,oBAAoB,IAAI,CAC5B,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,gBAAgB,EACtB,OAAO,EAAE,IAAI,CAAC,SAAS,EACvB,QAAQ,EAAE,CAAC,IAAI,CAAC,aAAa,gBAClB,kBAAkB;wBAE7B,6DAAM,KAAK,EAAC,2BAA2B,iBAAkB,CAClD,CACV;oBAED,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,gBAAgB,EACtB,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,QAAQ,EAAE,CAAC,IAAI,CAAC,aAAa,gBAClB,qBAAqB;wBAEhC,6DAAM,KAAK,EAAC,2BAA2B,mBAAoB,CACpD;oBAET,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,gBAAgB,EACtB,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,QAAQ,EAAE,CAAC,IAAI,CAAC,SAAS,gBACd,iBAAiB;wBAE5B,6DAAM,KAAK,EAAC,2BAA2B,oBAAqB,CACrD;oBAER,IAAI,CAAC,oBAAoB,IAAI,CAC5B,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,gBAAgB,EACtB,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,QAAQ,EAAE,CAAC,IAAI,CAAC,SAAS,gBACd,iBAAiB;wBAE5B,6DAAM,KAAK,EAAC,2BAA2B,gBAAiB,CACjD,CACV,CACG,CACF,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Event, EventEmitter, h, State } from '@stencil/core';\n\nexport type PaginationSize = 'sm' | 'md' | 'lg';\n\nexport interface PaginationChangeEvent {\n  page: number;\n  pageSize: number;\n}\n\n@Component({\n  tag: 'bh-pagination',\n  styleUrl: 'bh-pagination.css',\n  shadow: true,\n})\nexport class BhPagination {\n  /**\n   * Current page (1-indexed)\n   */\n  @Prop({ mutable: true }) page: number = 1;\n\n  /**\n   * Total number of items\n   */\n  @Prop() totalItems: number = 0;\n\n  /**\n   * Number of items per page\n   */\n  @Prop({ mutable: true }) pageSize: number = 10;\n\n  /**\n   * Available page size options\n   */\n  @Prop() pageSizeOptions: number[] = [10, 25, 50, 100];\n\n  /**\n   * Show page size selector\n   */\n  @Prop() showPageSizeSelector: boolean = true;\n\n  /**\n   * Show item count info (e.g., \"Showing 1 to 10 of 100 results\")\n   */\n  @Prop() showItemCount: boolean = true;\n\n  /**\n   * Show first/last page buttons\n   */\n  @Prop() showFirstLastButtons: boolean = true;\n\n  /**\n   * Size variant of the pagination\n   */\n  @Prop() size: PaginationSize = 'md';\n\n  /**\n   * Whether the pagination is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Label for \"Rows per page\" text (for i18n)\n   */\n  @Prop() rowsPerPageLabel: string = 'Rows per page:';\n\n  /**\n   * Label template for showing results (use {start}, {end}, {total} placeholders)\n   */\n  @Prop() showingResultsLabel: string = 'Showing {start} to {end} of {total} results';\n\n  /**\n   * Label template for page info when total items unknown (use {page}, {totalPages} placeholders)\n   */\n  @Prop() pageInfoLabel: string = 'Page {page} of {totalPages}';\n\n  @State() internalPage: number = 1;\n  @State() internalPageSize: number = 10;\n\n  /**\n   * Emitted when the page changes\n   */\n  @Event() bhPageChange!: EventEmitter<PaginationChangeEvent>;\n\n  /**\n   * Emitted when page size changes\n   */\n  @Event() bhPageSizeChange!: EventEmitter<PaginationChangeEvent>;\n\n  componentWillLoad() {\n    this.internalPage = this.page;\n    this.internalPageSize = this.pageSize;\n  }\n\n  private get totalPages(): number {\n    return Math.max(1, Math.ceil(this.totalItems / this.internalPageSize));\n  }\n\n  private get startItem(): number {\n    if (this.totalItems === 0) return 0;\n    return (this.internalPage - 1) * this.internalPageSize + 1;\n  }\n\n  private get endItem(): number {\n    return Math.min(this.internalPage * this.internalPageSize, this.totalItems);\n  }\n\n  private get canGoPrevious(): boolean {\n    return this.internalPage > 1 && !this.disabled;\n  }\n\n  private get canGoNext(): boolean {\n    return this.internalPage < this.totalPages && !this.disabled;\n  }\n\n  private goToPage(newPage: number) {\n    if (this.disabled) return;\n\n    const page = Math.max(1, Math.min(newPage, this.totalPages));\n    if (page !== this.internalPage) {\n      this.internalPage = page;\n      this.page = page;\n      this.bhPageChange.emit({ page, pageSize: this.internalPageSize });\n    }\n  }\n\n  private handlePageSizeChange(event: Event) {\n    if (this.disabled) return;\n\n    const select = event.target as HTMLSelectElement;\n    const newPageSize = parseInt(select.value, 10);\n\n    if (newPageSize !== this.internalPageSize) {\n      this.internalPageSize = newPageSize;\n      this.pageSize = newPageSize;\n\n      // Reset to page 1 when page size changes, or adjust if current page is now out of bounds\n      const newTotalPages = Math.max(1, Math.ceil(this.totalItems / newPageSize));\n      const newPage = Math.min(this.internalPage, newTotalPages);\n\n      if (newPage !== this.internalPage) {\n        this.internalPage = newPage;\n        this.page = newPage;\n      }\n\n      this.bhPageSizeChange.emit({ page: this.internalPage, pageSize: newPageSize });\n    }\n  }\n\n  private goToFirst = () => this.goToPage(1);\n  private goToPrevious = () => this.goToPage(this.internalPage - 1);\n  private goToNext = () => this.goToPage(this.internalPage + 1);\n  private goToLast = () => this.goToPage(this.totalPages);\n\n  private getInfoText(): string {\n    if (this.totalItems === 0) {\n      return 'No results';\n    }\n\n    if (this.showItemCount && this.totalItems > 0) {\n      return this.showingResultsLabel\n        .replace('{start}', String(this.startItem))\n        .replace('{end}', String(this.endItem))\n        .replace('{total}', String(this.totalItems));\n    }\n\n    return this.pageInfoLabel\n      .replace('{page}', String(this.internalPage))\n      .replace('{totalPages}', String(this.totalPages));\n  }\n\n  render() {\n    const paginationClasses = {\n      'pagination': true,\n      [`pagination-${this.size}`]: true,\n      'pagination-disabled': this.disabled,\n    };\n\n    return (\n      <div class={paginationClasses} role=\"navigation\" aria-label=\"Pagination\">\n        {/* Info section */}\n        <div class=\"pagination-info\">\n          <span class=\"pagination-info-text\">{this.getInfoText()}</span>\n        </div>\n\n        {/* Controls section */}\n        <div class=\"pagination-controls\">\n          {/* Page size selector */}\n          {this.showPageSizeSelector && (\n            <div class=\"pagination-page-size\">\n              <span class=\"pagination-page-size-label\">{this.rowsPerPageLabel}</span>\n              <select\n                class=\"pagination-select\"\n                onChange={(e) => this.handlePageSizeChange(e)}\n                disabled={this.disabled}\n                aria-label=\"Select page size\"\n              >\n                {this.pageSizeOptions.map((size) => (\n                  <option key={size} value={String(size)} selected={size === this.internalPageSize}>\n                    {size}\n                  </option>\n                ))}\n              </select>\n            </div>\n          )}\n\n          {/* Navigation buttons */}\n          <div class=\"pagination-nav\">\n            {this.showFirstLastButtons && (\n              <button\n                type=\"button\"\n                class=\"pagination-btn\"\n                onClick={this.goToFirst}\n                disabled={!this.canGoPrevious}\n                aria-label=\"Go to first page\"\n              >\n                <span class=\"material-symbols-outlined\">first_page</span>\n              </button>\n            )}\n\n            <button\n              type=\"button\"\n              class=\"pagination-btn\"\n              onClick={this.goToPrevious}\n              disabled={!this.canGoPrevious}\n              aria-label=\"Go to previous page\"\n            >\n              <span class=\"material-symbols-outlined\">chevron_left</span>\n            </button>\n\n            <button\n              type=\"button\"\n              class=\"pagination-btn\"\n              onClick={this.goToNext}\n              disabled={!this.canGoNext}\n              aria-label=\"Go to next page\"\n            >\n              <span class=\"material-symbols-outlined\">chevron_right</span>\n            </button>\n\n            {this.showFirstLastButtons && (\n              <button\n                type=\"button\"\n                class=\"pagination-btn\"\n                onClick={this.goToLast}\n                disabled={!this.canGoNext}\n                aria-label=\"Go to last page\"\n              >\n                <span class=\"material-symbols-outlined\">last_page</span>\n              </button>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"bh-pagination.js","sourceRoot":"","sources":["../../../src/components/bh-pagination/bh-pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, EventEmitter, h, State } from '@stencil/core';\n\nexport interface PaginationChangeEvent {\n  page: number;\n  pageSize: number;\n}\n\n@Component({\n  tag: 'bh-pagination',\n  styleUrl: 'bh-pagination.css',\n  shadow: true,\n})\nexport class BhPagination {\n  /**\n   * Current page (1-indexed)\n   */\n  @Prop({ mutable: true }) page: number = 1;\n\n  /**\n   * Total number of items\n   */\n  @Prop() totalItems: number = 0;\n\n  /**\n   * Number of items per page\n   */\n  @Prop({ mutable: true }) pageSize: number = 10;\n\n  /**\n   * Available page size options\n   */\n  @Prop() pageSizeOptions: number[] = [10, 25, 50, 100];\n\n  /**\n   * Show page size selector\n   */\n  @Prop() showPageSizeSelector: boolean = true;\n\n  /**\n   * Show item count info (e.g., \"Showing 1 to 10 of 100 results\")\n   */\n  @Prop() showItemCount: boolean = true;\n\n  /**\n   * Compact mode - shows input field instead of page numbers\n   */\n  @Prop() compact: boolean = false;\n\n  /**\n   * Maximum number of page numbers to show (for non-compact mode)\n   */\n  @Prop() maxPageNumbers: number = 5;\n\n  /**\n   * Whether the pagination is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Label for \"Rows per page\" text (for i18n)\n   */\n  @Prop() rowsPerPageLabel: string = 'Rows per page:';\n\n  /**\n   * Label template for showing results (use {start}, {end}, {total} placeholders)\n   */\n  @Prop() showingResultsLabel: string =\n    'Showing {start} to {end} of {total} results';\n\n  /**\n   * Label template for page info when total items unknown (use {page}, {totalPages} placeholders)\n   */\n  @Prop() pageInfoLabel: string = 'Page {page} of {totalPages}';\n\n  @State() internalPage: number = 1;\n  @State() internalPageSize: number = 10;\n\n  /**\n   * Emitted when the page changes\n   */\n  @Event() bhPageChange!: EventEmitter<PaginationChangeEvent>;\n\n  /**\n   * Emitted when page size changes\n   */\n  @Event() bhPageSizeChange!: EventEmitter<PaginationChangeEvent>;\n\n  componentWillLoad() {\n    this.internalPage = this.page;\n    this.internalPageSize = this.pageSize;\n  }\n\n  private get totalPages(): number {\n    return Math.max(1, Math.ceil(this.totalItems / this.internalPageSize));\n  }\n\n  private get startItem(): number {\n    if (this.totalItems === 0) return 0;\n    return (this.internalPage - 1) * this.internalPageSize + 1;\n  }\n\n  private get endItem(): number {\n    return Math.min(this.internalPage * this.internalPageSize, this.totalItems);\n  }\n\n  private get canGoPrevious(): boolean {\n    return this.internalPage > 1 && !this.disabled;\n  }\n\n  private get canGoNext(): boolean {\n    return this.internalPage < this.totalPages && !this.disabled;\n  }\n\n  private goToPage(newPage: number) {\n    if (this.disabled) return;\n\n    const page = Math.max(1, Math.min(newPage, this.totalPages));\n    if (page !== this.internalPage) {\n      this.internalPage = page;\n      this.page = page;\n      this.bhPageChange.emit({ page, pageSize: this.internalPageSize });\n    }\n  }\n\n  private handlePageSizeChange(event: Event) {\n    if (this.disabled) return;\n\n    const select = event.target as HTMLSelectElement;\n    const newPageSize = parseInt(select.value, 10);\n\n    if (newPageSize !== this.internalPageSize) {\n      this.internalPageSize = newPageSize;\n      this.pageSize = newPageSize;\n\n      // Reset to page 1 when page size changes, or adjust if current page is now out of bounds\n      const newTotalPages = Math.max(\n        1,\n        Math.ceil(this.totalItems / newPageSize)\n      );\n      const newPage = Math.min(this.internalPage, newTotalPages);\n\n      if (newPage !== this.internalPage) {\n        this.internalPage = newPage;\n        this.page = newPage;\n      }\n\n      this.bhPageSizeChange.emit({\n        page: this.internalPage,\n        pageSize: newPageSize,\n      });\n    }\n  }\n\n  private goToPrevious = () => this.goToPage(this.internalPage - 1);\n  private goToNext = () => this.goToPage(this.internalPage + 1);\n\n  private handlePageInputChange(event: Event) {\n    const input = event.target as HTMLInputElement;\n    const pageNumber = parseInt(input.value, 10);\n\n    if (!isNaN(pageNumber)) {\n      this.goToPage(pageNumber);\n    }\n  }\n\n  private getPageNumbers(): number[] {\n    const totalPages = this.totalPages;\n    const currentPage = this.internalPage;\n    const maxPages = this.maxPageNumbers;\n\n    if (totalPages <= maxPages) {\n      return Array.from({ length: totalPages }, (_, i) => i + 1);\n    }\n\n    const pages: number[] = [];\n    const half = Math.floor(maxPages / 2);\n\n    let start = Math.max(1, currentPage - half);\n    let end = Math.min(totalPages, start + maxPages - 1);\n\n    // Adjust start if we're near the end\n    if (end - start < maxPages - 1) {\n      start = Math.max(1, end - maxPages + 1);\n    }\n\n    for (let i = start; i <= end; i++) {\n      pages.push(i);\n    }\n\n    return pages;\n  }\n\n  private getInfoText(): string {\n    if (this.totalItems === 0) {\n      return 'No results';\n    }\n\n    if (this.showItemCount && this.totalItems > 0) {\n      return this.showingResultsLabel\n        .replace('{start}', String(this.startItem))\n        .replace('{end}', String(this.endItem))\n        .replace('{total}', String(this.totalItems));\n    }\n\n    return this.pageInfoLabel\n      .replace('{page}', String(this.internalPage))\n      .replace('{totalPages}', String(this.totalPages));\n  }\n\n  private renderPageNumbers() {\n    if (this.compact) {\n      // Compact mode: Page X of Y\n      return (\n        <div class=\"pagination-page-display\">\n          <span class=\"pagination-page-text\">Page</span>\n          <input\n            type=\"number\"\n            class=\"pagination-page-input\"\n            value={String(this.internalPage)}\n            min=\"1\"\n            max={String(this.totalPages)}\n            disabled={this.disabled}\n            onChange={(e) => this.handlePageInputChange(e)}\n            aria-label=\"Page number\"\n          />\n          <span class=\"pagination-page-text\">of {this.totalPages}</span>\n        </div>\n      );\n    }\n\n    // Non-compact mode: numbered buttons\n    const pageNumbers = this.getPageNumbers();\n    const showStartEllipsis = pageNumbers[0] > 1;\n    const showEndEllipsis =\n      pageNumbers[pageNumbers.length - 1] < this.totalPages;\n\n    return (\n      <div class=\"pagination-pages\">\n        {showStartEllipsis &&\n          pageNumbers[0] > 2 && [\n            <button\n              type=\"button\"\n              class=\"pagination-page-btn\"\n              onClick={() => this.goToPage(1)}\n              disabled={this.disabled}\n              aria-label=\"Go to page 1\"\n              key=\"page-1\"\n            >\n              1\n            </button>,\n            <span class=\"pagination-ellipsis\" key=\"ellipsis-start\">\n              ...\n            </span>,\n          ]}\n\n        {pageNumbers.map((pageNum) => (\n          <button\n            type=\"button\"\n            class={{\n              'pagination-page-btn': true,\n              'pagination-page-btn-active': pageNum === this.internalPage,\n            }}\n            onClick={() => this.goToPage(pageNum)}\n            disabled={this.disabled}\n            aria-label={`Go to page ${pageNum}`}\n            aria-current={pageNum === this.internalPage ? 'page' : undefined}\n            key={`page-${pageNum}`}\n          >\n            {pageNum}\n          </button>\n        ))}\n\n        {showEndEllipsis &&\n          pageNumbers[pageNumbers.length - 1] < this.totalPages - 1 && [\n            <span class=\"pagination-ellipsis\" key=\"ellipsis-end\">\n              ...\n            </span>,\n            <button\n              type=\"button\"\n              class=\"pagination-page-btn\"\n              onClick={() => this.goToPage(this.totalPages)}\n              disabled={this.disabled}\n              aria-label={`Go to page ${this.totalPages}`}\n              key={`page-${this.totalPages}`}\n            >\n              {this.totalPages}\n            </button>,\n          ]}\n      </div>\n    );\n  }\n\n  render() {\n    const paginationClasses = {\n      pagination: true,\n      'pagination-disabled': this.disabled,\n      'pagination-compact': this.compact,\n    };\n\n    return (\n      <div class={paginationClasses} role=\"navigation\" aria-label=\"Pagination\">\n        {/* Controls section - reordered */}\n        <div class=\"pagination-controls\">\n          {/* Page size selector - now first */}\n          {this.showPageSizeSelector && (\n            <div class=\"pagination-page-size\">\n              <span class=\"pagination-page-size-label\">\n                {this.rowsPerPageLabel}\n              </span>\n              <select\n                class=\"pagination-select\"\n                onChange={(e) => this.handlePageSizeChange(e)}\n                disabled={this.disabled}\n                aria-label=\"Select page size\"\n              >\n                {this.pageSizeOptions.map((size) => (\n                  <option\n                    key={size}\n                    value={String(size)}\n                    selected={size === this.internalPageSize}\n                  >\n                    {size}\n                  </option>\n                ))}\n              </select>\n            </div>\n          )}\n\n          {/* Navigation with page numbers/input in middle */}\n          <div class=\"pagination-nav\">\n            <button\n              type=\"button\"\n              class=\"pagination-btn\"\n              onClick={this.goToPrevious}\n              disabled={!this.canGoPrevious}\n              aria-label=\"Go to previous page\"\n            >\n              <span class=\"material-symbols-outlined\">chevron_left</span>\n            </button>\n\n            {/* Page numbers or input */}\n            {this.renderPageNumbers()}\n\n            <button\n              type=\"button\"\n              class=\"pagination-btn\"\n              onClick={this.goToNext}\n              disabled={!this.canGoNext}\n              aria-label=\"Go to next page\"\n            >\n              <span class=\"material-symbols-outlined\">chevron_right</span>\n            </button>\n          </div>\n        </div>\n\n        {/* Info section - now on right */}\n        {this.showItemCount && (\n          <div class=\"pagination-info\">\n            <span class=\"pagination-info-text\">{this.getInfoText()}</span>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/bh-picker-menu/bh-picker-menu.css

@@ -214,9 +214,7 @@
   min-width: 320px;
   background: var(--color-white);
   border-radius: var(--radius-md);
-  box-shadow: 0px 32px 64px -12px rgba(64, 73, 104, 0.14),
-    0px 0px 1px 1px rgba(64, 73, 104, 0.1);
-  border: 1px solid var(--color-neutral-200);
+  box-shadow: var(--shadow-lg); 
   overflow: hidden;
   flex-shrink: 0;
   position: relative;

package/dist/collection/components/bh-pie-chart/bh-pie-chart.js

@@ -132,7 +132,7 @@ export class BhPieChart {
     render() {
         const segments = this.getSegments();
         const innerRadius = this.getInnerRadius();
-        return (h(Host, { key: 'b0778f7ed499f578b25907f73be6e7ddbbd9fa17' }, h("div", { key: '440259b95d6e65282452619ee2a0cfc890f45443', class: "pie-chart-container", style: { width: `${this.size}px`, height: `${this.size}px` } }, h("svg", { key: '183c562c5a65095667964dc5a80b84fdf28d7704', width: this.size, height: this.size, viewBox: "0 0 160 160", class: "pie-chart-svg" }, h("circle", { key: '1afac01e292252211943372018476565dabefbb2', cx: "80", cy: "80", r: "80", fill: "transparent", class: "pie-background" }), segments.map((segment, index) => (h("g", { key: index, class: "pie-segment-group" }, h("path", { d: segment.path, fill: segment.color, class: { 'pie-segment': true, animated: this.animated }, style: { animationDelay: this.animated ? `${index * 0.03}s` : '0s' }, onMouseEnter: (e) => this.handleSegmentHover(e, segment), onMouseLeave: this.handleSegmentLeave })))), this.hole !== 'none' && (h("circle", { key: 'bb64355e6be750e413926fca053c2bc100aa821e', cx: "80", cy: "80", r: innerRadius, fill: "white", class: "pie-inner-hole" })))), h("bh-chart-tooltip", { key: '1760b14f54066a4ae146e9802a9888e7f44bce19', visible: this.tooltipVisible, x: this.tooltipX, y: this.tooltipY, items: this.tooltipSegment
+        return (h(Host, { key: '0bd86f47684f8fa73b3460af4d245337136fc319' }, h("div", { key: '9a7c0944d029a7065735ff647f1e2502af2bb783', class: "pie-chart-container", style: { width: `${this.size}px`, height: `${this.size}px` } }, h("svg", { key: 'c272bad8a5050cbc28ac803ea68b27b7179f1d1a', width: this.size, height: this.size, viewBox: "0 0 160 160", class: "pie-chart-svg" }, h("circle", { key: '21503d47d3ad7976bc2c2b5926785c2144d579ea', cx: "80", cy: "80", r: "80", fill: "transparent", class: "pie-background" }), segments.map((segment, index) => (h("g", { key: index, class: "pie-segment-group" }, h("path", { d: segment.path, fill: segment.color, class: { 'pie-segment': true, animated: this.animated }, style: { animationDelay: this.animated ? `${index * 0.03}s` : '0s' }, onMouseEnter: (e) => this.handleSegmentHover(e, segment), onMouseLeave: this.handleSegmentLeave })))), this.hole !== 'none' && (h("circle", { key: 'f42c781fc5378af859f7a460ac0665cfd3360599', cx: "80", cy: "80", r: innerRadius, fill: "white", class: "pie-inner-hole" })))), h("bh-chart-tooltip", { key: '179c0d15c9895199dc6d169e400c6f4ff832215b', visible: this.tooltipVisible, x: this.tooltipX, y: this.tooltipY, items: this.tooltipSegment
                 ? [
                     {
                         label: this.tooltipSegment.name,
@@ -165,7 +165,7 @@ export class BhPieChart {
                     "references": {
                         "PieChartData": {
                             "location": "local",
-                            "path": "/Users/brunabites/localsites/bellhopOS/packages/bellhop-core/src/components/bh-pie-chart/bh-pie-chart.tsx",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-pie-chart/bh-pie-chart.tsx",
                             "id": "src/components/bh-pie-chart/bh-pie-chart.tsx::PieChartData"
                         }
                     }
@@ -189,7 +189,7 @@ export class BhPieChart {
                     "references": {
                         "PieChartHole": {
                             "location": "local",
-                            "path": "/Users/brunabites/localsites/bellhopOS/packages/bellhop-core/src/components/bh-pie-chart/bh-pie-chart.tsx",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-pie-chart/bh-pie-chart.tsx",
                             "id": "src/components/bh-pie-chart/bh-pie-chart.tsx::PieChartHole"
                         }
                     }