@brightspot/ui 6.4.2-rc.1 → 6.4.2

package/dist/custom-elements.json

@@ -7207,151 +7207,133 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/pagination/Pagination.ts",
+      "path": "src/components/popover/Popover.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "A pagination component for navigating through paged content.\n\nSupports multiple layout variants (Search, Widget, Widget Small, Calendar)\nthrough configurable props and pseudo-slots.\n\n**Page size modes:**\n\n- **Built-in** (default): When no `slot=\"page-size\"` is provided and `page-size-changer`\n  is true, Pagination renders its own `btu-dropdown` from the `page-size-options` attribute.\n  Events, label sync, and page size changes are managed automatically.\n\n- **Custom slot**: When a child has `slot=\"page-size\"`, the built-in dropdown is suppressed.\n  The consumer owns all behavior — event handling, label sync, etc. Use this for non-standard\n  selectors like a calendar week/month toggle.\n\n**Page jumper modes:**\n\n- **Built-in**: When `page-jumper` is true and no `slot=\"jumper\"` is provided, Pagination\n  renders a dropdown with \"Page 1\" through \"Page N\" items. Fully reactive — updates\n  automatically when page, page size, or total items change.\n\n- **Custom slot**: When a child has `slot=\"jumper\"`, the built-in dropdown is suppressed.\n  The consumer owns all behavior. Use this for custom jumper content like a \"Today\" button.",
-          "name": "Pagination",
+          "description": "A popover component for displaying rich interactive content anchored to a trigger element.\n\nUses the native HTML Popover API for top-layer rendering, light dismiss (click-outside\nand Escape for click triggers), and focus management. CSS anchor positioning handles\nviewport-aware placement.\n\nFor click triggers (`popover=\"auto\"`), the browser provides:\n- Light dismiss (Escape key and click-outside)\n- Top-layer rendering (no z-index needed)\n- Focus restoration on close\n- `autofocus` support — add `autofocus` to an element inside `slot=\"content\"`\n  to have it receive focus when the popover opens",
+          "name": "Popover",
           "cssProperties": [
             {
-              "description": "Background color for dropdowns, buttons, and jumper",
-              "name": "--pagination-color-background"
+              "description": "Panel background color (default: var(--btu-theme-white); inverted: var(--btu-theme-black))",
+              "name": "--popover-color-background"
             },
             {
-              "description": "Text/icon color",
-              "name": "--pagination-color-foreground"
-            }
-          ],
-          "slots": [
-            {
-              "description": "Custom page-size selector (replaces built-in dropdown). Consumer manages all behavior.",
-              "name": "page-size"
+              "description": "Panel text color (default: oklch(var(--btu-theme-gray-900)); inverted: var(--btu-theme-white))",
+              "name": "--popover-color-content"
             },
             {
-              "description": "Custom jumper content (replaces built-in page jumper dropdown). Consumer manages all behavior.",
-              "name": "jumper"
-            }
-          ],
-          "members": [
+              "description": "Panel corner radius (default: theme borderRadius.lg)",
+              "name": "--popover-border-radius"
+            },
             {
-              "kind": "field",
-              "name": "page",
-              "type": {
-                "text": "number"
-              },
-              "default": "1",
-              "description": "Current page number (1-based)",
-              "attribute": "page"
+              "description": "Edge width, panel and arrow (default: 1px; 0 removes it)",
+              "name": "--popover-border-width"
             },
             {
-              "kind": "field",
-              "name": "pageSize",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "Number of items per page",
-              "attribute": "page-size"
+              "description": "Edge color, panel and arrow (default: oklch(var(--btu-theme-gray-200)))",
+              "name": "--popover-border-color"
             },
             {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disables all pagination controls",
-              "attribute": "disabled"
+              "description": "Gap between trigger and panel (default: 8px; see btu-popover-offset-{sm|md|lg|xl})",
+              "name": "--popover-offset"
             },
             {
-              "kind": "field",
-              "name": "loading",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Shows loading spinner and dims controls",
-              "attribute": "loading"
+              "description": "Width/height of the pointer arrow (default: 8px)",
+              "name": "--popover-arrow-size"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The element that activates the popover",
+              "name": "trigger"
             },
+            {
+              "description": "Rich HTML content displayed inside the popover panel",
+              "name": "content"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "hideOnSinglePage",
+              "name": "position",
               "type": {
-                "text": "boolean"
+                "text": "'top' | 'bottom' | 'left' | 'right'"
               },
-              "default": "true",
-              "description": "Hide controls when there is only one page",
-              "attribute": "hide-on-single-page"
+              "default": "'bottom'",
+              "description": "Position relative to the trigger element.\nAuto-flips when constrained by the viewport.",
+              "attribute": "position"
             },
             {
               "kind": "field",
-              "name": "pageSizeChanger",
+              "name": "trigger",
               "type": {
-                "text": "boolean"
+                "text": "'click' | 'hover' | 'focus'"
               },
-              "default": "true",
-              "description": "Show the page size dropdown",
-              "attribute": "page-size-changer"
+              "default": "'click'",
+              "description": "How the popover is activated.\n- 'click': Toggle on click with light dismiss\n- 'hover': Show on mouseenter with delay\n- 'focus': Show on focusin",
+              "attribute": "trigger"
             },
             {
               "kind": "field",
-              "name": "pageSizeOptions",
+              "name": "delay",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "default": "'10, 20, 50'",
-              "description": "Comma-separated page size options",
-              "attribute": "page-size-options"
+              "default": "300",
+              "description": "Show delay in milliseconds (hover trigger only).",
+              "attribute": "delay"
             },
             {
               "kind": "field",
-              "name": "totalItems",
+              "name": "offset",
               "type": {
-                "text": "number"
+                "text": "PopoverOffset | null"
               },
-              "default": "0",
-              "description": "Total number of items across all pages",
-              "attribute": "total-items"
+              "default": "null",
+              "description": "Gap between trigger and popover (sm=4px, md=8px, lg=12px, xl=16px).",
+              "attribute": "offset"
             },
             {
               "kind": "field",
-              "name": "boundaryButtons",
+              "name": "noArrow",
               "type": {
                 "text": "boolean"
               },
-              "default": "true",
-              "description": "Show first and last page buttons",
-              "attribute": "boundary-buttons"
+              "default": "false",
+              "description": "Hide the arrow pseudo-element.",
+              "attribute": "no-arrow"
             },
             {
               "kind": "field",
-              "name": "hideTotalCount",
+              "name": "inverted",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Hide the item count display (e.g., \"1-10 of 200\")",
-              "attribute": "hide-total-count"
+              "description": "Invert the panel surface (dark on light pages, light on dark pages).\nOpt-in, since the panel holds arbitrary rich content.",
+              "attribute": "inverted"
             },
             {
               "kind": "field",
-              "name": "pageJumper",
+              "name": "open",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Show the page jumper dropdown. Intended for moderate page counts (under ~100 pages).\nFor large datasets, use a custom `slot=\"jumper\"` with a virtualized or input-based control.",
-              "attribute": "page-jumper"
+              "description": "Programmatic open/close state (reflected).",
+              "attribute": "open",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "panelLabel",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "Accessible label for the pagination nav landmark",
-              "attribute": "label"
+              "default": "''",
+              "description": "Accessible label for the popover panel (applied as aria-label on the dialog).",
+              "attribute": "panel-label"
             },
             {
               "kind": "field",
@@ -7364,175 +7346,43 @@
             },
             {
               "kind": "field",
-              "name": "_parsedPageSizeOptions",
-              "type": {
-                "text": "number[]"
-              },
-              "privacy": "private",
-              "readonly": true
+              "name": "_onTriggerMouseLeave",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "_totalPages",
-              "type": {
-                "text": "number"
-              },
-              "privacy": "private",
-              "readonly": true
+              "name": "_onTriggerFocusIn",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "_startItem",
-              "type": {
-                "text": "number"
-              },
-              "privacy": "private",
-              "readonly": true
+              "name": "_onTriggerFocusOut",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "_endItem",
-              "type": {
-                "text": "number"
-              },
-              "privacy": "private",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "_setupSlots",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "_goToFirstPage",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "_goToPreviousPage",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "_goToNextPage",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
+              "name": "_onPanelMouseEnter",
+              "privacy": "private"
             },
             {
-              "kind": "method",
-              "name": "_goToLastPage",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "_onPanelMouseLeave",
+              "privacy": "private"
             },
             {
-              "kind": "method",
-              "name": "_manageBoundaryFocus",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "clickedButton",
-                  "type": {
-                    "text": "IconButton"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "_onNativeToggle",
+              "privacy": "private"
             },
             {
-              "kind": "method",
-              "name": "_onBuiltinPageSizeSelect",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "_onKeyDown",
+              "privacy": "private"
             },
             {
-              "kind": "method",
-              "name": "_onBuiltinJumperSelect",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "_onViewportChange",
+              "privacy": "private"
             },
             {
               "kind": "method",
@@ -7571,360 +7421,473 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired after first render",
-              "name": "btu-pagination-ready"
+              "description": "Fired when the popover opens",
+              "name": "btu-popover-show"
             },
             {
               "type": {
-                "text": "CustomEvent<{page: number, pageSize: number}>"
+                "text": "CustomEvent"
               },
-              "description": "Fired on page navigation",
-              "name": "btu-pagination-change"
+              "description": "Fired when the popover closes",
+              "name": "btu-popover-hide"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "position",
+              "type": {
+                "text": "'top' | 'bottom' | 'left' | 'right'"
+              },
+              "default": "'bottom'",
+              "description": "Position relative to the trigger element.\nAuto-flips when constrained by the viewport.",
+              "fieldName": "position",
+              "attribute": "position"
             },
             {
+              "name": "trigger",
               "type": {
-                "text": "CustomEvent<{page: number, pageSize: number}>"
+                "text": "'click' | 'hover' | 'focus'"
               },
-              "description": "Fired on page size change",
-              "name": "btu-pagination-page-size-change"
+              "default": "'click'",
+              "description": "How the popover is activated.\n- 'click': Toggle on click with light dismiss\n- 'hover': Show on mouseenter with delay\n- 'focus': Show on focusin",
+              "fieldName": "trigger",
+              "attribute": "trigger"
+            },
+            {
+              "name": "delay",
+              "type": {
+                "text": "number"
+              },
+              "default": "300",
+              "description": "Show delay in milliseconds (hover trigger only).",
+              "fieldName": "delay",
+              "attribute": "delay"
+            },
+            {
+              "name": "offset",
+              "type": {
+                "text": "PopoverOffset | null"
+              },
+              "default": "null",
+              "description": "Gap between trigger and popover (sm=4px, md=8px, lg=12px, xl=16px).",
+              "fieldName": "offset",
+              "attribute": "offset"
+            },
+            {
+              "name": "noArrow",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Hide the arrow pseudo-element.",
+              "fieldName": "noArrow"
+            },
+            {
+              "name": "inverted",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Invert the panel surface (dark on light pages, light on dark pages).\nOpt-in, since the panel holds arbitrary rich content.",
+              "fieldName": "inverted",
+              "attribute": "inverted"
+            },
+            {
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Programmatic open/close state (reflected).",
+              "fieldName": "open",
+              "attribute": "open"
+            },
+            {
+              "name": "panel-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Accessible label for the popover panel (applied as aria-label on the dialog).",
+              "fieldName": "panelLabel",
+              "attribute": "panel-label"
+            },
+            {
+              "name": "no-arrow",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Hide the arrow pseudo-element.",
+              "attribute": "noArrow",
+              "fieldName": "noArrow"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "EventEmitterMixin",
+              "module": "/src/util/EventEmitterMixin.js"
+            },
+            {
+              "name": "ReadyMixin",
+              "module": "/src/util/ReadyMixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "btu-popover",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Popover",
+            "module": "src/components/popover/Popover.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "btu-popover",
+          "declaration": {
+            "name": "Popover",
+            "module": "src/components/popover/Popover.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/pagination/Pagination.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A pagination component for navigating through paged content.\n\nSupports multiple layout variants (Search, Widget, Widget Small, Calendar)\nthrough configurable props and pseudo-slots.\n\n**Page size modes:**\n\n- **Built-in** (default): When no `slot=\"page-size\"` is provided and `page-size-changer`\n  is true, Pagination renders its own `btu-dropdown` from the `page-size-options` attribute.\n  Events, label sync, and page size changes are managed automatically.\n\n- **Custom slot**: When a child has `slot=\"page-size\"`, the built-in dropdown is suppressed.\n  The consumer owns all behavior — event handling, label sync, etc. Use this for non-standard\n  selectors like a calendar week/month toggle.\n\n**Page jumper modes:**\n\n- **Built-in**: When `page-jumper` is true and no `slot=\"jumper\"` is provided, Pagination\n  renders a dropdown with \"Page 1\" through \"Page N\" items. Fully reactive — updates\n  automatically when page, page size, or total items change.\n\n- **Custom slot**: When a child has `slot=\"jumper\"`, the built-in dropdown is suppressed.\n  The consumer owns all behavior. Use this for custom jumper content like a \"Today\" button.",
+          "name": "Pagination",
+          "cssProperties": [
+            {
+              "description": "Background color for dropdowns, buttons, and jumper",
+              "name": "--pagination-color-background"
+            },
+            {
+              "description": "Text/icon color",
+              "name": "--pagination-color-foreground"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Custom page-size selector (replaces built-in dropdown). Consumer manages all behavior.",
+              "name": "page-size"
+            },
+            {
+              "description": "Custom jumper content (replaces built-in page jumper dropdown). Consumer manages all behavior.",
+              "name": "jumper"
             }
           ],
-          "attributes": [
+          "members": [
             {
+              "kind": "field",
               "name": "page",
               "type": {
                 "text": "number"
               },
               "default": "1",
               "description": "Current page number (1-based)",
-              "fieldName": "page",
               "attribute": "page"
             },
             {
-              "name": "page-size",
+              "kind": "field",
+              "name": "pageSize",
               "type": {
                 "text": "number"
               },
               "default": "0",
               "description": "Number of items per page",
-              "fieldName": "pageSize",
               "attribute": "page-size"
             },
             {
+              "kind": "field",
               "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Disables all pagination controls",
-              "fieldName": "disabled",
               "attribute": "disabled"
             },
             {
+              "kind": "field",
               "name": "loading",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Shows loading spinner and dims controls",
-              "fieldName": "loading",
               "attribute": "loading"
             },
             {
-              "name": "hide-on-single-page",
+              "kind": "field",
+              "name": "hideOnSinglePage",
               "type": {
                 "text": "boolean"
               },
               "default": "true",
               "description": "Hide controls when there is only one page",
-              "fieldName": "hideOnSinglePage",
               "attribute": "hide-on-single-page"
             },
             {
-              "name": "page-size-changer",
+              "kind": "field",
+              "name": "pageSizeChanger",
               "type": {
                 "text": "boolean"
               },
               "default": "true",
               "description": "Show the page size dropdown",
-              "fieldName": "pageSizeChanger",
               "attribute": "page-size-changer"
             },
             {
-              "name": "page-size-options",
+              "kind": "field",
+              "name": "pageSizeOptions",
               "type": {
                 "text": "string"
               },
               "default": "'10, 20, 50'",
               "description": "Comma-separated page size options",
-              "fieldName": "pageSizeOptions",
               "attribute": "page-size-options"
             },
             {
-              "name": "total-items",
+              "kind": "field",
+              "name": "totalItems",
               "type": {
                 "text": "number"
               },
               "default": "0",
               "description": "Total number of items across all pages",
-              "fieldName": "totalItems",
               "attribute": "total-items"
             },
             {
-              "name": "boundary-buttons",
+              "kind": "field",
+              "name": "boundaryButtons",
               "type": {
                 "text": "boolean"
               },
               "default": "true",
               "description": "Show first and last page buttons",
-              "fieldName": "boundaryButtons",
               "attribute": "boundary-buttons"
             },
             {
-              "name": "hide-total-count",
+              "kind": "field",
+              "name": "hideTotalCount",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Hide the item count display (e.g., \"1-10 of 200\")",
-              "fieldName": "hideTotalCount",
               "attribute": "hide-total-count"
             },
             {
-              "name": "page-jumper",
+              "kind": "field",
+              "name": "pageJumper",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Show the page jumper dropdown. Intended for moderate page counts (under ~100 pages).\nFor large datasets, use a custom `slot=\"jumper\"` with a virtualized or input-based control.",
-              "fieldName": "pageJumper",
               "attribute": "page-jumper"
             },
             {
+              "kind": "field",
               "name": "label",
               "type": {
                 "text": "string | undefined"
               },
               "description": "Accessible label for the pagination nav landmark",
-              "fieldName": "label",
               "attribute": "label"
-            }
-          ],
-          "mixins": [
-            {
-              "name": "EventEmitterMixin",
-              "module": "/src/util/EventEmitterMixin.js"
-            },
-            {
-              "name": "ReadyMixin",
-              "module": "/src/util/ReadyMixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "btu-pagination",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Pagination",
-            "module": "src/components/pagination/Pagination.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "btu-pagination",
-          "declaration": {
-            "name": "Pagination",
-            "module": "src/components/pagination/Pagination.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/popover/Popover.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "A popover component for displaying rich interactive content anchored to a trigger element.\n\nUses the native HTML Popover API for top-layer rendering, light dismiss (click-outside\nand Escape for click triggers), and focus management. CSS anchor positioning handles\nviewport-aware placement.\n\nFor click triggers (`popover=\"auto\"`), the browser provides:\n- Light dismiss (Escape key and click-outside)\n- Top-layer rendering (no z-index needed)\n- Focus restoration on close\n- `autofocus` support — add `autofocus` to an element inside `slot=\"content\"`\n  to have it receive focus when the popover opens",
-          "name": "Popover",
-          "cssProperties": [
-            {
-              "description": "Panel background color (default: var(--btu-theme-white); inverted: var(--btu-theme-black))",
-              "name": "--popover-color-background"
-            },
-            {
-              "description": "Panel text color (default: oklch(var(--btu-theme-gray-900)); inverted: var(--btu-theme-white))",
-              "name": "--popover-color-content"
-            },
-            {
-              "description": "Panel corner radius (default: theme borderRadius.lg)",
-              "name": "--popover-border-radius"
-            },
-            {
-              "description": "Edge width, panel and arrow (default: 1px; 0 removes it)",
-              "name": "--popover-border-width"
-            },
-            {
-              "description": "Edge color, panel and arrow (default: oklch(var(--btu-theme-gray-200)))",
-              "name": "--popover-border-color"
-            },
-            {
-              "description": "Gap between trigger and panel (default: 8px; see btu-popover-offset-{sm|md|lg|xl})",
-              "name": "--popover-offset"
-            },
-            {
-              "description": "Width/height of the pointer arrow (default: 8px)",
-              "name": "--popover-arrow-size"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The element that activates the popover",
-              "name": "trigger"
             },
-            {
-              "description": "Rich HTML content displayed inside the popover panel",
-              "name": "content"
-            }
-          ],
-          "members": [
             {
               "kind": "field",
-              "name": "position",
+              "name": "_initialClassesCaptured",
               "type": {
-                "text": "'top' | 'bottom' | 'left' | 'right'"
+                "text": "boolean"
               },
-              "default": "'bottom'",
-              "description": "Position relative to the trigger element.\nAuto-flips when constrained by the viewport.",
-              "attribute": "position"
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "trigger",
+              "name": "_parsedPageSizeOptions",
               "type": {
-                "text": "'click' | 'hover' | 'focus'"
+                "text": "number[]"
               },
-              "default": "'click'",
-              "description": "How the popover is activated.\n- 'click': Toggle on click with light dismiss\n- 'hover': Show on mouseenter with delay\n- 'focus': Show on focusin",
-              "attribute": "trigger"
+              "privacy": "private",
+              "readonly": true
             },
             {
               "kind": "field",
-              "name": "delay",
+              "name": "_totalPages",
               "type": {
                 "text": "number"
               },
-              "default": "300",
-              "description": "Show delay in milliseconds (hover trigger only).",
-              "attribute": "delay"
-            },
-            {
-              "kind": "field",
-              "name": "offset",
-              "type": {
-                "text": "PopoverOffset | null"
-              },
-              "default": "null",
-              "description": "Gap between trigger and popover (sm=4px, md=8px, lg=12px, xl=16px).",
-              "attribute": "offset"
+              "privacy": "private",
+              "readonly": true
             },
             {
               "kind": "field",
-              "name": "noArrow",
+              "name": "_startItem",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "description": "Hide the arrow pseudo-element.",
-              "attribute": "no-arrow"
+              "privacy": "private",
+              "readonly": true
             },
             {
               "kind": "field",
-              "name": "inverted",
+              "name": "_endItem",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "description": "Invert the panel surface (dark on light pages, light on dark pages).\nOpt-in, since the panel holds arbitrary rich content.",
-              "attribute": "inverted"
+              "privacy": "private",
+              "readonly": true
             },
             {
-              "kind": "field",
-              "name": "open",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Programmatic open/close state (reflected).",
-              "attribute": "open",
-              "reflects": true
+              "kind": "method",
+              "name": "_setupSlots",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
             },
             {
-              "kind": "field",
-              "name": "panelLabel",
-              "type": {
-                "text": "string"
+              "kind": "method",
+              "name": "_goToFirstPage",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
-              "default": "''",
-              "description": "Accessible label for the popover panel (applied as aria-label on the dialog).",
-              "attribute": "panel-label"
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "_initialClassesCaptured",
-              "type": {
-                "text": "boolean"
-              },
+              "kind": "method",
+              "name": "_goToPreviousPage",
               "privacy": "private",
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "_onTriggerMouseLeave",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "_onTriggerFocusIn",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "_onTriggerFocusOut",
-              "privacy": "private"
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "_onPanelMouseEnter",
-              "privacy": "private"
+              "kind": "method",
+              "name": "_goToNextPage",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "_onPanelMouseLeave",
-              "privacy": "private"
+              "kind": "method",
+              "name": "_goToLastPage",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "_onNativeToggle",
-              "privacy": "private"
+              "kind": "method",
+              "name": "_manageBoundaryFocus",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "clickedButton",
+                  "type": {
+                    "text": "IconButton"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "_onKeyDown",
-              "privacy": "private"
+              "kind": "method",
+              "name": "_onBuiltinPageSizeSelect",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "_onViewportChange",
-              "privacy": "private"
+              "kind": "method",
+              "name": "_onBuiltinJumperSelect",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
@@ -7963,106 +7926,143 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired when the popover opens",
-              "name": "btu-popover-show"
+              "description": "Fired after first render",
+              "name": "btu-pagination-ready"
             },
             {
               "type": {
-                "text": "CustomEvent"
+                "text": "CustomEvent<{page: number, pageSize: number}>"
               },
-              "description": "Fired when the popover closes",
-              "name": "btu-popover-hide"
+              "description": "Fired on page navigation",
+              "name": "btu-pagination-change"
+            },
+            {
+              "type": {
+                "text": "CustomEvent<{page: number, pageSize: number}>"
+              },
+              "description": "Fired on page size change",
+              "name": "btu-pagination-page-size-change"
             }
           ],
           "attributes": [
             {
-              "name": "position",
+              "name": "page",
               "type": {
-                "text": "'top' | 'bottom' | 'left' | 'right'"
+                "text": "number"
               },
-              "default": "'bottom'",
-              "description": "Position relative to the trigger element.\nAuto-flips when constrained by the viewport.",
-              "fieldName": "position",
-              "attribute": "position"
+              "default": "1",
+              "description": "Current page number (1-based)",
+              "fieldName": "page",
+              "attribute": "page"
             },
             {
-              "name": "trigger",
+              "name": "page-size",
               "type": {
-                "text": "'click' | 'hover' | 'focus'"
+                "text": "number"
               },
-              "default": "'click'",
-              "description": "How the popover is activated.\n- 'click': Toggle on click with light dismiss\n- 'hover': Show on mouseenter with delay\n- 'focus': Show on focusin",
-              "fieldName": "trigger",
-              "attribute": "trigger"
+              "default": "0",
+              "description": "Number of items per page",
+              "fieldName": "pageSize",
+              "attribute": "page-size"
             },
             {
-              "name": "delay",
+              "name": "disabled",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "default": "300",
-              "description": "Show delay in milliseconds (hover trigger only).",
-              "fieldName": "delay",
-              "attribute": "delay"
+              "default": "false",
+              "description": "Disables all pagination controls",
+              "fieldName": "disabled",
+              "attribute": "disabled"
             },
             {
-              "name": "offset",
+              "name": "loading",
               "type": {
-                "text": "PopoverOffset | null"
+                "text": "boolean"
               },
-              "default": "null",
-              "description": "Gap between trigger and popover (sm=4px, md=8px, lg=12px, xl=16px).",
-              "fieldName": "offset",
-              "attribute": "offset"
+              "default": "false",
+              "description": "Shows loading spinner and dims controls",
+              "fieldName": "loading",
+              "attribute": "loading"
             },
             {
-              "name": "noArrow",
+              "name": "hide-on-single-page",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "Hide the arrow pseudo-element.",
-              "fieldName": "noArrow"
+              "default": "true",
+              "description": "Hide controls when there is only one page",
+              "fieldName": "hideOnSinglePage",
+              "attribute": "hide-on-single-page"
             },
             {
-              "name": "inverted",
+              "name": "page-size-changer",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "Invert the panel surface (dark on light pages, light on dark pages).\nOpt-in, since the panel holds arbitrary rich content.",
-              "fieldName": "inverted",
-              "attribute": "inverted"
+              "default": "true",
+              "description": "Show the page size dropdown",
+              "fieldName": "pageSizeChanger",
+              "attribute": "page-size-changer"
             },
             {
-              "name": "open",
+              "name": "page-size-options",
+              "type": {
+                "text": "string"
+              },
+              "default": "'10, 20, 50'",
+              "description": "Comma-separated page size options",
+              "fieldName": "pageSizeOptions",
+              "attribute": "page-size-options"
+            },
+            {
+              "name": "total-items",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "Total number of items across all pages",
+              "fieldName": "totalItems",
+              "attribute": "total-items"
+            },
+            {
+              "name": "boundary-buttons",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "Programmatic open/close state (reflected).",
-              "fieldName": "open",
-              "attribute": "open"
+              "default": "true",
+              "description": "Show first and last page buttons",
+              "fieldName": "boundaryButtons",
+              "attribute": "boundary-buttons"
             },
             {
-              "name": "panel-label",
+              "name": "hide-total-count",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "Accessible label for the popover panel (applied as aria-label on the dialog).",
-              "fieldName": "panelLabel",
-              "attribute": "panel-label"
+              "default": "false",
+              "description": "Hide the item count display (e.g., \"1-10 of 200\")",
+              "fieldName": "hideTotalCount",
+              "attribute": "hide-total-count"
             },
             {
-              "name": "no-arrow",
+              "name": "page-jumper",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Hide the arrow pseudo-element.",
-              "attribute": "noArrow",
-              "fieldName": "noArrow"
+              "description": "Show the page jumper dropdown. Intended for moderate page counts (under ~100 pages).\nFor large datasets, use a custom `slot=\"jumper\"` with a virtualized or input-based control.",
+              "fieldName": "pageJumper",
+              "attribute": "page-jumper"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Accessible label for the pagination nav landmark",
+              "fieldName": "label",
+              "attribute": "label"
             }
           ],
           "mixins": [
@@ -8079,7 +8079,7 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "btu-popover",
+          "tagName": "btu-pagination",
           "customElement": true
         }
       ],
@@ -8088,16 +8088,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Popover",
-            "module": "src/components/popover/Popover.ts"
+            "name": "Pagination",
+            "module": "src/components/pagination/Pagination.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "btu-popover",
+          "name": "btu-pagination",
           "declaration": {
-            "name": "Popover",
-            "module": "src/components/popover/Popover.ts"
+            "name": "Pagination",
+            "module": "src/components/pagination/Pagination.ts"
           }
         }
       ]