@brightspot/ui 5.0.3-css-bloat.1 → 5.0.3

package/dist/custom-elements.json

@@ -1529,6 +1529,187 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/badge/Badge.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A badge component for highlighting important information.\n\nBadges help highlight notifications, status, or new messages.\nPrimarily used for communicating secondary or additional information.",
+          "name": "Badge",
+          "cssProperties": [
+            {
+              "description": "Text color (overrides theme color)",
+              "name": "--badge-color-foreground"
+            },
+            {
+              "description": "Background color (overrides theme color)",
+              "name": "--badge-color-background"
+            },
+            {
+              "description": "Border radius size (overrides shape default, default: 999px)",
+              "name": "--badge-radius-size"
+            },
+            {
+              "description": "Horizontal padding (overrides size default)",
+              "name": "--badge-px"
+            },
+            {
+              "description": "Vertical padding (overrides size default)",
+              "name": "--badge-py"
+            },
+            {
+              "description": "Size of the dot affordance (default: 6px)",
+              "name": "--badge-dot-size"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Label text or child elements (e.g., btu-icon + text)",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "'info' | 'primary' | 'error' | 'success' | 'warning'"
+              },
+              "default": "'info'",
+              "description": "Style of the badge.\n- 'info': Informational (default)\n- 'primary': Primary action or emphasis\n- 'error': Error or danger state\n- 'success': Success or completion state\n- 'warning': Warning or caution state",
+              "attribute": "variant"
+            },
+            {
+              "kind": "field",
+              "name": "dot",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Should a dot be displayed before the label?",
+              "attribute": "dot"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'sm' | 'md' | 'lg'"
+              },
+              "default": "'sm'",
+              "description": "Size variant.\n- 'sm': Small (default)\n- 'md': Medium\n- 'lg': Large",
+              "attribute": "size"
+            },
+            {
+              "kind": "method",
+              "name": "emit",
+              "parameters": [
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "K"
+                  },
+                  "description": "Event name from CustomEventMap"
+                },
+                {
+                  "name": "detail",
+                  "optional": true,
+                  "type": {
+                    "text": "UnpackCustomEvent<CustomEventMap[K]>"
+                  },
+                  "description": "Optional event detail payload"
+                }
+              ],
+              "description": "Dispatches a type-safe CustomEvent with standardized configuration.\n\nAll events are configured with:\n- bubbles: true (event propagates up the DOM tree)\n- cancelable: false (event cannot be cancelled)\n- composed: true (event crosses shadow DOM boundaries)",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "inheritedFrom": {
+                "name": "EventEmitterMixin",
+                "module": "src/util/EventEmitterMixin.ts"
+              }
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired after first render and initialization",
+              "name": "btu-badge-ready"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "'info' | 'primary' | 'error' | 'success' | 'warning'"
+              },
+              "default": "'info'",
+              "description": "Style of the badge.\n- 'info': Informational (default)\n- 'primary': Primary action or emphasis\n- 'error': Error or danger state\n- 'success': Success or completion state\n- 'warning': Warning or caution state",
+              "fieldName": "variant",
+              "attribute": "variant"
+            },
+            {
+              "name": "dot",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Should a dot be displayed before the label?",
+              "fieldName": "dot",
+              "attribute": "dot"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'sm' | 'md' | 'lg'"
+              },
+              "default": "'sm'",
+              "description": "Size variant.\n- 'sm': Small (default)\n- 'md': Medium\n- 'lg': Large",
+              "fieldName": "size",
+              "attribute": "size"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "EventEmitterMixin",
+              "module": "/src/util/EventEmitterMixin.js"
+            },
+            {
+              "name": "ReadyMixin",
+              "module": "/src/util/ReadyMixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "btu-badge",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Badge",
+            "module": "src/components/badge/Badge.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "btu-badge",
+          "declaration": {
+            "name": "Badge",
+            "module": "src/components/badge/Badge.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/button-group/ButtonGroup.ts",
@@ -1883,252 +2064,71 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/badge/Badge.ts",
+      "path": "src/components/checkbox/Checkbox.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "A badge component for highlighting important information.\n\nBadges help highlight notifications, status, or new messages.\nPrimarily used for communicating secondary or additional information.",
-          "name": "Badge",
+          "description": "A checkbox component for selecting one or more options from a set.\n\nUses a hidden native checkbox internally for accessibility and form\nparticipation. Styled via the `btu-checkbox` Tailwind plugin classes.\nThe component manages its own `className` — do not modify it externally\nafter initialization (classes present at connection time are preserved).",
+          "name": "Checkbox",
           "cssProperties": [
             {
-              "description": "Text color (overrides theme color)",
-              "name": "--badge-color-foreground"
+              "description": "Background and border color when checked or indeterminate, and tinted background/border on unchecked hover (default: oklch(var(--btu-theme-primary-700)))",
+              "name": "--checkbox-color-primary"
             },
             {
-              "description": "Background color (overrides theme color)",
-              "name": "--badge-color-background"
+              "description": "Border color in the unchecked state (default: oklch(var(--btu-theme-gray-300)))",
+              "name": "--checkbox-color-border"
             },
             {
-              "description": "Border radius size (overrides shape default, default: 999px)",
-              "name": "--badge-radius-size"
+              "description": "Border and text color in the error state (default: oklch(var(--btu-theme-error-600)))",
+              "name": "--checkbox-color-error"
             },
             {
-              "description": "Horizontal padding (overrides size default)",
-              "name": "--badge-px"
+              "description": "Corner rounding of the checkbox square (default: 4px)",
+              "name": "--checkbox-border-radius"
             },
             {
-              "description": "Vertical padding (overrides size default)",
-              "name": "--badge-py"
+              "description": "Distance between the checkbox and the label (default: 0.75rem)",
+              "name": "--checkbox-label-spacing"
             },
             {
-              "description": "Size of the dot affordance (default: 6px)",
-              "name": "--badge-dot-size"
-            }
-          ],
-          "slots": [
+              "description": "[Internal] Width and height of the checkbox square, set by the size variant (sm: 1rem, md: 1.25rem). Use the `size` attribute instead of overriding directly — the icon must scale in tandem.",
+              "name": "--checkbox-box-size"
+            },
             {
-              "description": "Label text or child elements (e.g., btu-icon + text)",
-              "name": ""
+              "description": "[Internal] Width and height of the icon inside the box, set by the size variant (sm: 0.75rem, md: 0.875rem). Use the `size` attribute instead of overriding directly.",
+              "name": "--checkbox-icon-size"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "variant",
+              "name": "label",
               "type": {
-                "text": "'info' | 'primary' | 'error' | 'success' | 'warning'"
+                "text": "string | undefined"
               },
-              "default": "'info'",
-              "description": "Style of the badge.\n- 'info': Informational (default)\n- 'primary': Primary action or emphasis\n- 'error': Error or danger state\n- 'success': Success or completion state\n- 'warning': Warning or caution state",
-              "attribute": "variant"
+              "description": "The text label displayed next to the checkbox.",
+              "attribute": "label"
             },
             {
               "kind": "field",
-              "name": "dot",
+              "name": "description",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "Should a dot be displayed before the label?",
-              "attribute": "dot"
+              "description": "Optional helper text displayed below the label.",
+              "attribute": "description"
             },
             {
               "kind": "field",
               "name": "size",
               "type": {
-                "text": "'sm' | 'md' | 'lg'"
+                "text": "'sm' | 'md'"
               },
               "default": "'sm'",
-              "description": "Size variant.\n- 'sm': Small (default)\n- 'md': Medium\n- 'lg': Large",
-              "attribute": "size"
-            },
-            {
-              "kind": "method",
-              "name": "emit",
-              "parameters": [
-                {
-                  "name": "type",
-                  "type": {
-                    "text": "K"
-                  },
-                  "description": "Event name from CustomEventMap"
-                },
-                {
-                  "name": "detail",
-                  "optional": true,
-                  "type": {
-                    "text": "UnpackCustomEvent<CustomEventMap[K]>"
-                  },
-                  "description": "Optional event detail payload"
-                }
-              ],
-              "description": "Dispatches a type-safe CustomEvent with standardized configuration.\n\nAll events are configured with:\n- bubbles: true (event propagates up the DOM tree)\n- cancelable: false (event cannot be cancelled)\n- composed: true (event crosses shadow DOM boundaries)",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
-              "inheritedFrom": {
-                "name": "EventEmitterMixin",
-                "module": "src/util/EventEmitterMixin.ts"
-              }
-            }
-          ],
-          "events": [
-            {
-              "type": {
-                "text": "CustomEvent"
-              },
-              "description": "Fired after first render and initialization",
-              "name": "btu-badge-ready"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "variant",
-              "type": {
-                "text": "'info' | 'primary' | 'error' | 'success' | 'warning'"
-              },
-              "default": "'info'",
-              "description": "Style of the badge.\n- 'info': Informational (default)\n- 'primary': Primary action or emphasis\n- 'error': Error or danger state\n- 'success': Success or completion state\n- 'warning': Warning or caution state",
-              "fieldName": "variant",
-              "attribute": "variant"
-            },
-            {
-              "name": "dot",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Should a dot be displayed before the label?",
-              "fieldName": "dot",
-              "attribute": "dot"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "'sm' | 'md' | 'lg'"
-              },
-              "default": "'sm'",
-              "description": "Size variant.\n- 'sm': Small (default)\n- 'md': Medium\n- 'lg': Large",
-              "fieldName": "size",
-              "attribute": "size"
-            }
-          ],
-          "mixins": [
-            {
-              "name": "EventEmitterMixin",
-              "module": "/src/util/EventEmitterMixin.js"
-            },
-            {
-              "name": "ReadyMixin",
-              "module": "/src/util/ReadyMixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "btu-badge",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Badge",
-            "module": "src/components/badge/Badge.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "btu-badge",
-          "declaration": {
-            "name": "Badge",
-            "module": "src/components/badge/Badge.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/checkbox/Checkbox.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "A checkbox component for selecting one or more options from a set.\n\nUses a hidden native checkbox internally for accessibility and form\nparticipation. Styled via the `btu-checkbox` Tailwind plugin classes.\nThe component manages its own `className` — do not modify it externally\nafter initialization (classes present at connection time are preserved).",
-          "name": "Checkbox",
-          "cssProperties": [
-            {
-              "description": "Background and border color when checked or indeterminate, and tinted background/border on unchecked hover (default: oklch(var(--btu-theme-primary-700)))",
-              "name": "--checkbox-color-primary"
-            },
-            {
-              "description": "Border color in the unchecked state (default: oklch(var(--btu-theme-gray-300)))",
-              "name": "--checkbox-color-border"
-            },
-            {
-              "description": "Border and text color in the error state (default: oklch(var(--btu-theme-error-600)))",
-              "name": "--checkbox-color-error"
-            },
-            {
-              "description": "Corner rounding of the checkbox square (default: 4px)",
-              "name": "--checkbox-border-radius"
-            },
-            {
-              "description": "Distance between the checkbox and the label (default: 0.75rem)",
-              "name": "--checkbox-label-spacing"
-            },
-            {
-              "description": "[Internal] Width and height of the checkbox square, set by the size variant (sm: 1rem, md: 1.25rem). Use the `size` attribute instead of overriding directly — the icon must scale in tandem.",
-              "name": "--checkbox-box-size"
-            },
-            {
-              "description": "[Internal] Width and height of the icon inside the box, set by the size variant (sm: 0.75rem, md: 0.875rem). Use the `size` attribute instead of overriding directly.",
-              "name": "--checkbox-icon-size"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The text label displayed next to the checkbox.",
-              "attribute": "label"
-            },
-            {
-              "kind": "field",
-              "name": "description",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Optional helper text displayed below the label.",
-              "attribute": "description"
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "'sm' | 'md'"
-              },
-              "default": "'sm'",
-              "description": "Controls the scale of the checkbox and associated typography.",
-              "attribute": "size",
-              "reflects": true
+              "description": "Controls the scale of the checkbox and associated typography.",
+              "attribute": "size",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -4544,273 +4544,83 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/icon/Icon.ts",
+      "path": "src/components/empty-state/EmptyState.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "An icon component for displaying Lucide icons.\n\nIcons inherit parent text color by default or can use gradient fills.\nAll icons are from the Lucide icon library (https://lucide.dev/icons/).\nSupports both direct SVG rendering and mask-based gradient fills.",
-          "name": "Icon",
+          "description": "An empty state component for displaying placeholder content when no data is available.\n\nSupports a graphic slot for icons/images/pictures/SVGs, a heading, a description,\nand an actions slot for buttons or links. Available in three sizes (sm, md, lg)\nwith semantic heading levels.\n\n## Architecture: Light DOM + Pseudo-Slots\n\nThis component uses **Light DOM** (no Shadow Root) with pseudo-slots:\n- User-provided children are physically moved into internal containers\n- Movement is based on `slot` attributes\n- The `onFind` utility detects and redistributes newly-added children (one-time per element)\n\n### Node Redistribution Rules\n- `slot=\"graphic\"` - Moved to graphic container (icon, image, picture, or SVG)\n- `slot=\"actions\"` - Moved to an internal `btu-button-group` (variant=\"spaced\")\n\n### Actions composition\n\nThe actions container IS a `btu-button-group` with `variant=\"spaced\"`. Its `size`\nis mapped from the empty-state `size` prop (sm→small, md→medium, lg→large) so all\nchild `btu-button` / `btu-icon-button` elements get consistent sizing and group\nsemantics (`role=\"group\"`, roving tabindex, disabled propagation) for free.",
+          "name": "EmptyState",
           "cssProperties": [
             {
-              "description": "Icon size (overrides size default)",
-              "name": "--icon-size"
+              "description": "Maximum width of the content block (default: min(75cqw, 360px))",
+              "name": "--empty-state-max-width"
             },
             {
-              "description": "SVG stroke width as a unitless number in viewBox units; scales visually with icon size (default: 2)",
-              "name": "--icon-stroke-width"
+              "description": "Heading text color (default: gray-900)",
+              "name": "--empty-state-color-heading"
             },
             {
-              "description": "Icon fill color for filled icons (e.g., \"currentColor\")",
-              "name": "--icon-fill"
+              "description": "Description text color (default: gray-500)",
+              "name": "--empty-state-color-description"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Pseudo-slot for icon, image, picture, or SVG graphic. When the child is a `btu-icon`, the component overrides its `size` attribute based on the empty-state `size` prop (sm→md, md→lg, lg→xl). Use an `img`, `picture`, or inline `svg` for full size control.",
+              "name": "graphic"
             },
             {
-              "description": "SVG data URI for mask-based rendering",
-              "name": "--icon-svg"
+              "description": "Pseudo-slot for action buttons. Children are moved into an internal `btu-button-group` (variant=\"spaced\"), so size and disabled state are managed by the group.",
+              "name": "actions"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "tagName",
-              "static": true,
-              "readonly": true
+              "name": "heading",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Heading text displayed in the empty state.",
+              "attribute": "heading"
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "description",
               "type": {
-                "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
+                "text": "string | undefined"
               },
-              "default": "'md'",
-              "description": "Size of the icon.\n- 'xs': Extra small (0.75rem)\n- 'sm': Small (1rem)\n- 'md': Medium (1.25rem, default)\n- 'lg': Large (1.5rem)\n- 'xl': Extra large (1.75rem)",
-              "attribute": "size"
+              "description": "Description text displayed below the heading.",
+              "attribute": "description"
             },
             {
               "kind": "field",
-              "name": "symbol",
+              "name": "size",
               "type": {
-                "text": "string"
+                "text": "'sm' | 'md' | 'lg'"
               },
-              "default": "'circle-dashed'",
-              "description": "Lucide icon name to display.\nSee https://lucide.dev/icons/ for available icons.",
-              "attribute": "symbol"
+              "default": "'md'",
+              "description": "Size variant of the empty state. Affects spacing, description text, graphic size,\nand — when `heading-level` is unset — the default heading level (sm→5, md→4, lg→3).",
+              "attribute": "size"
             },
             {
               "kind": "field",
-              "name": "gradient",
+              "name": "headingLevel",
               "type": {
-                "text": "IconGradientColor | undefined"
+                "text": "number | undefined"
               },
-              "description": "Theme color to use for gradient fill.\nWhen set, icon displays with gradient. When undefined, icon inherits parent text color.",
-              "attribute": "gradient"
+              "description": "Heading level (1-6). When set to a valid integer 1-6, overrides the size-based\ndefault and drives both the semantic h1-h6 tag and the visual heading size\n(btu-heading-1 through btu-heading-6). Invalid values log a warning and fall\nback to the size-based default.",
+              "attribute": "heading-level"
             },
             {
               "kind": "field",
-              "name": "emphasize",
+              "name": "initialClasses",
               "type": {
-                "text": "boolean | 'pulse' | undefined"
+                "text": "string[]"
               },
-              "description": "Emphasize mode — renders a tonal circle with ring behind the icon.\nColors are derived from `currentColor` via oklch relative color syntax.\nDefaults to primary; override with Tailwind `text-*` classes or `style=\"color: ...\"`.\nSet as a boolean for the static circle, or `\"pulse\"` for a one-shot ring animation.\nNot intended for use with `gradient` — the two features target\nconflicting rendering modes.",
-              "attribute": "emphasize",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "emit",
-              "parameters": [
-                {
-                  "name": "type",
-                  "type": {
-                    "text": "K"
-                  },
-                  "description": "Event name from CustomEventMap"
-                },
-                {
-                  "name": "detail",
-                  "optional": true,
-                  "type": {
-                    "text": "UnpackCustomEvent<CustomEventMap[K]>"
-                  },
-                  "description": "Optional event detail payload"
-                }
-              ],
-              "description": "Dispatches a type-safe CustomEvent with standardized configuration.\n\nAll events are configured with:\n- bubbles: true (event propagates up the DOM tree)\n- cancelable: false (event cannot be cancelled)\n- composed: true (event crosses shadow DOM boundaries)",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
-              "inheritedFrom": {
-                "name": "EventEmitterMixin",
-                "module": "src/util/EventEmitterMixin.ts"
-              }
-            }
-          ],
-          "events": [
-            {
-              "type": {
-                "text": "CustomEvent"
-              },
-              "description": "Fired after first render and initialization",
-              "name": "btu-icon-ready"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "size",
-              "type": {
-                "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
-              },
-              "default": "'md'",
-              "description": "Size of the icon.\n- 'xs': Extra small (0.75rem)\n- 'sm': Small (1rem)\n- 'md': Medium (1.25rem, default)\n- 'lg': Large (1.5rem)\n- 'xl': Extra large (1.75rem)",
-              "fieldName": "size",
-              "attribute": "size"
-            },
-            {
-              "name": "symbol",
-              "type": {
-                "text": "string"
-              },
-              "default": "'circle-dashed'",
-              "description": "Lucide icon name to display.\nSee https://lucide.dev/icons/ for available icons.",
-              "fieldName": "symbol",
-              "attribute": "symbol"
-            },
-            {
-              "name": "gradient",
-              "type": {
-                "text": "IconGradientColor | undefined"
-              },
-              "description": "Theme color to use for gradient fill.\nWhen set, icon displays with gradient. When undefined, icon inherits parent text color.",
-              "fieldName": "gradient",
-              "attribute": "gradient"
-            },
-            {
-              "name": "emphasize",
-              "type": {
-                "text": "boolean | 'pulse' | undefined"
-              },
-              "description": "Emphasize mode — renders a tonal circle with ring behind the icon.\nColors are derived from `currentColor` via oklch relative color syntax.\nDefaults to primary; override with Tailwind `text-*` classes or `style=\"color: ...\"`.\nSet as a boolean for the static circle, or `\"pulse\"` for a one-shot ring animation.\nNot intended for use with `gradient` — the two features target\nconflicting rendering modes.",
-              "fieldName": "emphasize",
-              "attribute": "emphasize"
-            }
-          ],
-          "mixins": [
-            {
-              "name": "EventEmitterMixin",
-              "module": "/src/util/EventEmitterMixin.js"
-            },
-            {
-              "name": "ReadyMixin",
-              "module": "/src/util/ReadyMixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "btu-icon",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Icon",
-            "module": "src/components/icon/Icon.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "btu-icon",
-          "declaration": {
-            "name": "Icon",
-            "module": "src/components/icon/Icon.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/empty-state/EmptyState.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "An empty state component for displaying placeholder content when no data is available.\n\nSupports a graphic slot for icons/images/pictures/SVGs, a heading, a description,\nand an actions slot for buttons or links. Available in three sizes (sm, md, lg)\nwith semantic heading levels.\n\n## Architecture: Light DOM + Pseudo-Slots\n\nThis component uses **Light DOM** (no Shadow Root) with pseudo-slots:\n- User-provided children are physically moved into internal containers\n- Movement is based on `slot` attributes\n- The `onFind` utility detects and redistributes newly-added children (one-time per element)\n\n### Node Redistribution Rules\n- `slot=\"graphic\"` - Moved to graphic container (icon, image, picture, or SVG)\n- `slot=\"actions\"` - Moved to an internal `btu-button-group` (variant=\"spaced\")\n\n### Actions composition\n\nThe actions container IS a `btu-button-group` with `variant=\"spaced\"`. Its `size`\nis mapped from the empty-state `size` prop (sm→small, md→medium, lg→large) so all\nchild `btu-button` / `btu-icon-button` elements get consistent sizing and group\nsemantics (`role=\"group\"`, roving tabindex, disabled propagation) for free.",
-          "name": "EmptyState",
-          "cssProperties": [
-            {
-              "description": "Maximum width of the content block (default: min(75cqw, 360px))",
-              "name": "--empty-state-max-width"
-            },
-            {
-              "description": "Heading text color (default: gray-900)",
-              "name": "--empty-state-color-heading"
-            },
-            {
-              "description": "Description text color (default: gray-500)",
-              "name": "--empty-state-color-description"
-            }
-          ],
-          "slots": [
-            {
-              "description": "Pseudo-slot for icon, image, picture, or SVG graphic. When the child is a `btu-icon`, the component overrides its `size` attribute based on the empty-state `size` prop (sm→md, md→lg, lg→xl). Use an `img`, `picture`, or inline `svg` for full size control.",
-              "name": "graphic"
-            },
-            {
-              "description": "Pseudo-slot for action buttons. Children are moved into an internal `btu-button-group` (variant=\"spaced\"), so size and disabled state are managed by the group.",
-              "name": "actions"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "heading",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Heading text displayed in the empty state.",
-              "attribute": "heading"
-            },
-            {
-              "kind": "field",
-              "name": "description",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Description text displayed below the heading.",
-              "attribute": "description"
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "'sm' | 'md' | 'lg'"
-              },
-              "default": "'md'",
-              "description": "Size variant of the empty state. Affects spacing, description text, graphic size,\nand — when `heading-level` is unset — the default heading level (sm→5, md→4, lg→3).",
-              "attribute": "size"
-            },
-            {
-              "kind": "field",
-              "name": "headingLevel",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "Heading level (1-6). When set to a valid integer 1-6, overrides the size-based\ndefault and drives both the semantic h1-h6 tag and the visual heading size\n(btu-heading-1 through btu-heading-6). Invalid values log a warning and fall\nback to the size-based default.",
-              "attribute": "heading-level"
-            },
-            {
-              "kind": "field",
-              "name": "initialClasses",
-              "type": {
-                "text": "string[]"
-              },
-              "privacy": "private",
-              "default": "[]"
+              "privacy": "private",
+              "default": "[]"
             },
             {
               "kind": "method",
@@ -4983,205 +4793,75 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/linear-progress/LinearProgress.ts",
+      "path": "src/components/icon/Icon.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "A horizontal linear progress bar for showing task completion.",
-          "name": "LinearProgress",
+          "description": "An icon component for displaying Lucide icons.\n\nIcons inherit parent text color by default or can use gradient fills.\nAll icons are from the Lucide icon library (https://lucide.dev/icons/).\nSupports both direct SVG rendering and mask-based gradient fills.",
+          "name": "Icon",
           "cssProperties": [
             {
-              "description": "Custom progress bar color (overrides theme color)",
-              "name": "--progress-color"
+              "description": "Icon size (overrides size default)",
+              "name": "--icon-size"
             },
             {
-              "description": "Track/background color (overrides default gray-100)",
-              "name": "--track-color"
+              "description": "SVG stroke width as a unitless number in viewBox units; scales visually with icon size (default: 2)",
+              "name": "--icon-stroke-width"
+            },
+            {
+              "description": "Icon fill color for filled icons (e.g., \"currentColor\")",
+              "name": "--icon-fill"
+            },
+            {
+              "description": "SVG data URI for mask-based rendering",
+              "name": "--icon-svg"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "color",
+              "name": "tagName",
+              "static": true,
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
               "type": {
-                "text": "ProgressColors"
+                "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
               },
-              "default": "'primary'",
-              "description": "Color theme of the progress indicator.\nSupports: black, white, primary, teal, gray, purple, rose, error, warning, success",
-              "attribute": "color",
-              "inheritedFrom": {
-                "name": "ProgressMixin",
-                "module": "src/util/ProgressMixin.ts"
-              }
+              "default": "'md'",
+              "description": "Size of the icon.\n- 'xs': Extra small (0.75rem)\n- 'sm': Small (1rem)\n- 'md': Medium (1.25rem, default)\n- 'lg': Large (1.5rem)\n- 'xl': Extra large (1.75rem)",
+              "attribute": "size"
             },
             {
               "kind": "field",
-              "name": "thickness",
+              "name": "symbol",
               "type": {
-                "text": "number | undefined"
+                "text": "string"
               },
-              "description": "Stroke width of the progress indicator.",
-              "attribute": "thickness",
-              "inheritedFrom": {
-                "name": "ProgressMixin",
-                "module": "src/util/ProgressMixin.ts"
-              }
+              "default": "'circle-dashed'",
+              "description": "Lucide icon name to display.\nSee https://lucide.dev/icons/ for available icons.",
+              "attribute": "symbol"
             },
             {
               "kind": "field",
-              "name": "_progress",
+              "name": "gradient",
               "type": {
-                "text": "number"
+                "text": "IconGradientColor | undefined"
               },
-              "privacy": "private",
-              "default": "0",
-              "inheritedFrom": {
-                "name": "ProgressMixin",
-                "module": "src/util/ProgressMixin.ts"
-              }
+              "description": "Theme color to use for gradient fill.\nWhen set, icon displays with gradient. When undefined, icon inherits parent text color.",
+              "attribute": "gradient"
             },
             {
               "kind": "field",
-              "name": "progress",
-              "description": "Progress value for determinate variant. Clamped to 0–100.",
-              "attribute": "progress",
-              "inheritedFrom": {
-                "name": "ProgressMixin",
-                "module": "src/util/ProgressMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Optional label text to display with the progress indicator.",
-              "attribute": "label",
-              "inheritedFrom": {
-                "name": "ProgressMixin",
-                "module": "src/util/ProgressMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "initialAnimation",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "true",
-              "description": "Whether to animate progress from 0 to target value when component first becomes visible.",
-              "attribute": "initial-animation",
-              "inheritedFrom": {
-                "name": "ProgressMixin",
-                "module": "src/util/ProgressMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "ariaLabel",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Optional aria-label attribute for screen readers.\nDescribes what the progress indicator represents.",
-              "attribute": "aria-label",
-              "inheritedFrom": {
-                "name": "ProgressMixin",
-                "module": "src/util/ProgressMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "ariaLabelledBy",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Optional aria-labelledby attribute for screen readers.\nReferences the ID of an element that labels the progress indicator.",
-              "attribute": "aria-labelledby",
-              "inheritedFrom": {
-                "name": "ProgressMixin",
-                "module": "src/util/ProgressMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "ariaValueText",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Optional aria-valuetext attribute for screen readers.\nProvides human-readable text alternative for progress value.",
-              "attribute": "aria-valuetext",
-              "inheritedFrom": {
-                "name": "ProgressMixin",
-                "module": "src/util/ProgressMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "completionAnnouncement",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Optional message to announce to screen readers when progress reaches 100%.\nIf not provided, no announcement will be made on completion.",
-              "attribute": "completion-announcement",
-              "inheritedFrom": {
-                "name": "ProgressMixin",
-                "module": "src/util/ProgressMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "_isAnimationInitialized",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false",
-              "inheritedFrom": {
-                "name": "ProgressMixin",
-                "module": "src/util/ProgressMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "_intersectionObserver",
-              "type": {
-                "text": "IntersectionObserver | undefined"
-              },
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "ProgressMixin",
-                "module": "src/util/ProgressMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "_hasCompletedAt100",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false",
-              "inheritedFrom": {
-                "name": "ProgressMixin",
-                "module": "src/util/ProgressMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "_hostTag",
+              "name": "emphasize",
               "type": {
-                "text": "'btu-linear-progress' | 'btu-circular-progress'"
+                "text": "boolean | 'pulse' | undefined"
               },
-              "privacy": "private",
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "ProgressMixin",
-                "module": "src/util/ProgressMixin.ts"
-              }
+              "description": "Emphasize mode — renders a tonal circle with ring behind the icon.\nColors are derived from `currentColor` via oklch relative color syntax.\nDefaults to primary; override with Tailwind `text-*` classes or `style=\"color: ...\"`.\nSet as a boolean for the static circle, or `\"pulse\"` for a one-shot ring animation.\nNot intended for use with `gradient` — the two features target\nconflicting rendering modes.",
+              "attribute": "emphasize",
+              "reflects": true
             },
             {
               "kind": "method",
@@ -5221,21 +4901,50 @@
                 "text": "CustomEvent"
               },
               "description": "Fired after first render and initialization",
-              "name": "btu-linear-progress-ready"
+              "name": "btu-icon-ready"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
+              },
+              "default": "'md'",
+              "description": "Size of the icon.\n- 'xs': Extra small (0.75rem)\n- 'sm': Small (1rem)\n- 'md': Medium (1.25rem, default)\n- 'lg': Large (1.5rem)\n- 'xl': Extra large (1.75rem)",
+              "fieldName": "size",
+              "attribute": "size"
             },
             {
+              "name": "symbol",
               "type": {
-                "text": "CustomEvent"
+                "text": "string"
               },
-              "description": "Fired when progress reaches 100",
-              "name": "btu-linear-progress-complete"
+              "default": "'circle-dashed'",
+              "description": "Lucide icon name to display.\nSee https://lucide.dev/icons/ for available icons.",
+              "fieldName": "symbol",
+              "attribute": "symbol"
+            },
+            {
+              "name": "gradient",
+              "type": {
+                "text": "IconGradientColor | undefined"
+              },
+              "description": "Theme color to use for gradient fill.\nWhen set, icon displays with gradient. When undefined, icon inherits parent text color.",
+              "fieldName": "gradient",
+              "attribute": "gradient"
+            },
+            {
+              "name": "emphasize",
+              "type": {
+                "text": "boolean | 'pulse' | undefined"
+              },
+              "description": "Emphasize mode — renders a tonal circle with ring behind the icon.\nColors are derived from `currentColor` via oklch relative color syntax.\nDefaults to primary; override with Tailwind `text-*` classes or `style=\"color: ...\"`.\nSet as a boolean for the static circle, or `\"pulse\"` for a one-shot ring animation.\nNot intended for use with `gradient` — the two features target\nconflicting rendering modes.",
+              "fieldName": "emphasize",
+              "attribute": "emphasize"
             }
           ],
           "mixins": [
-            {
-              "name": "ProgressMixin",
-              "module": "/src/util/ProgressMixin.js"
-            },
             {
               "name": "EventEmitterMixin",
               "module": "/src/util/EventEmitterMixin.js"
@@ -5249,186 +4958,65 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "btu-linear-progress",
-          "customElement": true,
-          "attributes": [
+          "tagName": "btu-icon",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Icon",
+            "module": "src/components/icon/Icon.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "btu-icon",
+          "declaration": {
+            "name": "Icon",
+            "module": "src/components/icon/Icon.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/icon-button/IconButton.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Surfaces the different actions someone can perform in an interface where space is limited.\n\nUses an icon to communicate the action and supports multiple visual types and sizes.\nTooltip support is built-in for accessibility in compact layouts.",
+          "name": "IconButton",
+          "members": [
             {
-              "name": "color",
+              "kind": "field",
+              "name": "name",
               "type": {
-                "text": "ProgressColors"
+                "text": "string | undefined"
+              },
+              "description": "Optional name for the button which can be used to identify the button in a callback.",
+              "attribute": "name"
+            },
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "IconButtonType"
               },
               "default": "'primary'",
-              "description": "Color theme of the progress indicator.\nSupports: black, white, primary, teal, gray, purple, rose, error, warning, success",
-              "fieldName": "color",
-              "attribute": "color",
-              "inheritedFrom": {
-                "name": "ProgressMixin",
-                "module": "src/util/ProgressMixin.ts"
-              }
+              "description": "Specifies the type of icon-button, controlling the visual style.",
+              "attribute": "type"
             },
             {
-              "name": "thickness",
+              "kind": "field",
+              "name": "symbol",
               "type": {
-                "text": "number | undefined"
+                "text": "string | undefined"
               },
-              "description": "Stroke width of the progress indicator.",
-              "fieldName": "thickness",
-              "attribute": "thickness",
-              "inheritedFrom": {
-                "name": "ProgressMixin",
-                "module": "src/util/ProgressMixin.ts"
-              }
-            },
-            {
-              "name": "progress",
-              "description": "Progress value for determinate variant. Clamped to 0–100.",
-              "fieldName": "progress",
-              "attribute": "progress",
-              "inheritedFrom": {
-                "name": "ProgressMixin",
-                "module": "src/util/ProgressMixin.ts"
-              }
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Optional label text to display with the progress indicator.",
-              "fieldName": "label",
-              "attribute": "label",
-              "inheritedFrom": {
-                "name": "ProgressMixin",
-                "module": "src/util/ProgressMixin.ts"
-              }
-            },
-            {
-              "name": "initial-animation",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "true",
-              "description": "Whether to animate progress from 0 to target value when component first becomes visible.",
-              "fieldName": "initialAnimation",
-              "attribute": "initial-animation",
-              "inheritedFrom": {
-                "name": "ProgressMixin",
-                "module": "src/util/ProgressMixin.ts"
-              }
-            },
-            {
-              "name": "aria-label",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Optional aria-label attribute for screen readers.\nDescribes what the progress indicator represents.",
-              "fieldName": "ariaLabel",
-              "attribute": "aria-label",
-              "inheritedFrom": {
-                "name": "ProgressMixin",
-                "module": "src/util/ProgressMixin.ts"
-              }
-            },
-            {
-              "name": "aria-labelledby",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Optional aria-labelledby attribute for screen readers.\nReferences the ID of an element that labels the progress indicator.",
-              "fieldName": "ariaLabelledBy",
-              "attribute": "aria-labelledby",
-              "inheritedFrom": {
-                "name": "ProgressMixin",
-                "module": "src/util/ProgressMixin.ts"
-              }
-            },
-            {
-              "name": "aria-valuetext",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Optional aria-valuetext attribute for screen readers.\nProvides human-readable text alternative for progress value.",
-              "fieldName": "ariaValueText",
-              "attribute": "aria-valuetext",
-              "inheritedFrom": {
-                "name": "ProgressMixin",
-                "module": "src/util/ProgressMixin.ts"
-              }
-            },
-            {
-              "name": "completion-announcement",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Optional message to announce to screen readers when progress reaches 100%.\nIf not provided, no announcement will be made on completion.",
-              "fieldName": "completionAnnouncement",
-              "attribute": "completion-announcement",
-              "inheritedFrom": {
-                "name": "ProgressMixin",
-                "module": "src/util/ProgressMixin.ts"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "LinearProgress",
-            "module": "src/components/linear-progress/LinearProgress.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "btu-linear-progress",
-          "declaration": {
-            "name": "LinearProgress",
-            "module": "src/components/linear-progress/LinearProgress.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/icon-button/IconButton.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Surfaces the different actions someone can perform in an interface where space is limited.\n\nUses an icon to communicate the action and supports multiple visual types and sizes.\nTooltip support is built-in for accessibility in compact layouts.",
-          "name": "IconButton",
-          "members": [
-            {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Optional name for the button which can be used to identify the button in a callback.",
-              "attribute": "name"
-            },
-            {
-              "kind": "field",
-              "name": "type",
-              "type": {
-                "text": "IconButtonType"
-              },
-              "default": "'primary'",
-              "description": "Specifies the type of icon-button, controlling the visual style.",
-              "attribute": "type"
-            },
-            {
-              "kind": "field",
-              "name": "symbol",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Lucide icon symbol.",
-              "attribute": "symbol"
+              "description": "Lucide icon symbol.",
+              "attribute": "symbol"
             },
             {
               "kind": "field",
@@ -5941,150 +5529,205 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/popover/Popover.ts",
+      "path": "src/components/linear-progress/LinearProgress.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",
+          "description": "A horizontal linear progress bar for showing task completion.",
+          "name": "LinearProgress",
           "cssProperties": [
             {
-              "description": "Panel background color (default: var(--btu-theme-white))",
-              "name": "--popover-color-background"
-            },
-            {
-              "description": "Panel text color (default: oklch(var(--btu-theme-gray-900)))",
-              "name": "--popover-color-content"
-            },
-            {
-              "description": "Panel corner radius (default: theme borderRadius.lg)",
-              "name": "--popover-border-radius"
-            },
-            {
-              "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": "Custom progress bar color (overrides theme color)",
+              "name": "--progress-color"
             },
             {
-              "description": "Rich HTML content displayed inside the popover panel",
-              "name": "content"
+              "description": "Track/background color (overrides default gray-100)",
+              "name": "--track-color"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "position",
+              "name": "color",
               "type": {
-                "text": "'top' | 'bottom' | 'left' | 'right'"
+                "text": "ProgressColors"
               },
-              "default": "'bottom'",
-              "description": "Position relative to the trigger element.\nAuto-flips when constrained by the viewport.",
-              "attribute": "position"
+              "default": "'primary'",
+              "description": "Color theme of the progress indicator.\nSupports: black, white, primary, teal, gray, purple, rose, error, warning, success",
+              "attribute": "color",
+              "inheritedFrom": {
+                "name": "ProgressMixin",
+                "module": "src/util/ProgressMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "trigger",
+              "name": "thickness",
               "type": {
-                "text": "'click' | 'hover' | 'focus'"
+                "text": "number | undefined"
               },
-              "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"
+              "description": "Stroke width of the progress indicator.",
+              "attribute": "thickness",
+              "inheritedFrom": {
+                "name": "ProgressMixin",
+                "module": "src/util/ProgressMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "delay",
+              "name": "_progress",
               "type": {
                 "text": "number"
               },
-              "default": "300",
-              "description": "Show delay in milliseconds (hover trigger only).",
-              "attribute": "delay"
+              "privacy": "private",
+              "default": "0",
+              "inheritedFrom": {
+                "name": "ProgressMixin",
+                "module": "src/util/ProgressMixin.ts"
+              }
             },
             {
               "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"
+              "name": "progress",
+              "description": "Progress value for determinate variant. Clamped to 0–100.",
+              "attribute": "progress",
+              "inheritedFrom": {
+                "name": "ProgressMixin",
+                "module": "src/util/ProgressMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "noArrow",
+              "name": "label",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "Hide the arrow pseudo-element.",
-              "attribute": "no-arrow"
+              "description": "Optional label text to display with the progress indicator.",
+              "attribute": "label",
+              "inheritedFrom": {
+                "name": "ProgressMixin",
+                "module": "src/util/ProgressMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "open",
+              "name": "initialAnimation",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "Programmatic open/close state (reflected).",
-              "attribute": "open",
-              "reflects": true
-            },
+              "default": "true",
+              "description": "Whether to animate progress from 0 to target value when component first becomes visible.",
+              "attribute": "initial-animation",
+              "inheritedFrom": {
+                "name": "ProgressMixin",
+                "module": "src/util/ProgressMixin.ts"
+              }
+            },
             {
               "kind": "field",
-              "name": "panelLabel",
+              "name": "ariaLabel",
               "type": {
-                "text": "string"
+                "text": "string | null"
               },
-              "default": "''",
-              "description": "Accessible label for the popover panel (applied as aria-label on the dialog).",
-              "attribute": "panel-label"
+              "default": "null",
+              "description": "Optional aria-label attribute for screen readers.\nDescribes what the progress indicator represents.",
+              "attribute": "aria-label",
+              "inheritedFrom": {
+                "name": "ProgressMixin",
+                "module": "src/util/ProgressMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "_onTriggerMouseLeave",
-              "privacy": "private"
+              "name": "ariaLabelledBy",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Optional aria-labelledby attribute for screen readers.\nReferences the ID of an element that labels the progress indicator.",
+              "attribute": "aria-labelledby",
+              "inheritedFrom": {
+                "name": "ProgressMixin",
+                "module": "src/util/ProgressMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "_onTriggerFocusIn",
-              "privacy": "private"
+              "name": "ariaValueText",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Optional aria-valuetext attribute for screen readers.\nProvides human-readable text alternative for progress value.",
+              "attribute": "aria-valuetext",
+              "inheritedFrom": {
+                "name": "ProgressMixin",
+                "module": "src/util/ProgressMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "_onTriggerFocusOut",
-              "privacy": "private"
+              "name": "completionAnnouncement",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Optional message to announce to screen readers when progress reaches 100%.\nIf not provided, no announcement will be made on completion.",
+              "attribute": "completion-announcement",
+              "inheritedFrom": {
+                "name": "ProgressMixin",
+                "module": "src/util/ProgressMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "_onPanelMouseEnter",
-              "privacy": "private"
+              "name": "_isAnimationInitialized",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "inheritedFrom": {
+                "name": "ProgressMixin",
+                "module": "src/util/ProgressMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "_onPanelMouseLeave",
-              "privacy": "private"
+              "name": "_intersectionObserver",
+              "type": {
+                "text": "IntersectionObserver | undefined"
+              },
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "ProgressMixin",
+                "module": "src/util/ProgressMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "_onNativeToggle",
-              "privacy": "private"
+              "name": "_hasCompletedAt100",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "inheritedFrom": {
+                "name": "ProgressMixin",
+                "module": "src/util/ProgressMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "_onKeyDown",
-              "privacy": "private"
+              "name": "_hostTag",
+              "type": {
+                "text": "'btu-linear-progress' | 'btu-circular-progress'"
+              },
+              "privacy": "private",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "ProgressMixin",
+                "module": "src/util/ProgressMixin.ts"
+              }
             },
             {
               "kind": "method",
@@ -6123,114 +5766,158 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired when the popover opens",
-              "name": "btu-popover-show"
+              "description": "Fired after first render and initialization",
+              "name": "btu-linear-progress-ready"
             },
             {
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired when the popover closes",
-              "name": "btu-popover-hide"
+              "description": "Fired when progress reaches 100",
+              "name": "btu-linear-progress-complete"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "ProgressMixin",
+              "module": "/src/util/ProgressMixin.js"
+            },
+            {
+              "name": "EventEmitterMixin",
+              "module": "/src/util/EventEmitterMixin.js"
+            },
+            {
+              "name": "ReadyMixin",
+              "module": "/src/util/ReadyMixin.js"
             }
           ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "btu-linear-progress",
+          "customElement": true,
           "attributes": [
             {
-              "name": "position",
+              "name": "color",
               "type": {
-                "text": "'top' | 'bottom' | 'left' | 'right'"
+                "text": "ProgressColors"
               },
-              "default": "'bottom'",
-              "description": "Position relative to the trigger element.\nAuto-flips when constrained by the viewport.",
-              "fieldName": "position",
-              "attribute": "position"
+              "default": "'primary'",
+              "description": "Color theme of the progress indicator.\nSupports: black, white, primary, teal, gray, purple, rose, error, warning, success",
+              "fieldName": "color",
+              "attribute": "color",
+              "inheritedFrom": {
+                "name": "ProgressMixin",
+                "module": "src/util/ProgressMixin.ts"
+              }
             },
             {
-              "name": "trigger",
+              "name": "thickness",
               "type": {
-                "text": "'click' | 'hover' | 'focus'"
+                "text": "number | undefined"
               },
-              "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"
+              "description": "Stroke width of the progress indicator.",
+              "fieldName": "thickness",
+              "attribute": "thickness",
+              "inheritedFrom": {
+                "name": "ProgressMixin",
+                "module": "src/util/ProgressMixin.ts"
+              }
             },
             {
-              "name": "delay",
-              "type": {
-                "text": "number"
-              },
-              "default": "300",
-              "description": "Show delay in milliseconds (hover trigger only).",
-              "fieldName": "delay",
-              "attribute": "delay"
+              "name": "progress",
+              "description": "Progress value for determinate variant. Clamped to 0–100.",
+              "fieldName": "progress",
+              "attribute": "progress",
+              "inheritedFrom": {
+                "name": "ProgressMixin",
+                "module": "src/util/ProgressMixin.ts"
+              }
             },
             {
-              "name": "offset",
+              "name": "label",
               "type": {
-                "text": "PopoverOffset | null"
+                "text": "string | undefined"
               },
-              "default": "null",
-              "description": "Gap between trigger and popover (sm=4px, md=8px, lg=12px, xl=16px).",
-              "fieldName": "offset",
-              "attribute": "offset"
+              "description": "Optional label text to display with the progress indicator.",
+              "fieldName": "label",
+              "attribute": "label",
+              "inheritedFrom": {
+                "name": "ProgressMixin",
+                "module": "src/util/ProgressMixin.ts"
+              }
             },
             {
-              "name": "noArrow",
+              "name": "initial-animation",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "Hide the arrow pseudo-element.",
-              "fieldName": "noArrow"
+              "default": "true",
+              "description": "Whether to animate progress from 0 to target value when component first becomes visible.",
+              "fieldName": "initialAnimation",
+              "attribute": "initial-animation",
+              "inheritedFrom": {
+                "name": "ProgressMixin",
+                "module": "src/util/ProgressMixin.ts"
+              }
             },
             {
-              "name": "open",
+              "name": "aria-label",
               "type": {
-                "text": "boolean"
+                "text": "string | null"
               },
-              "default": "false",
-              "description": "Programmatic open/close state (reflected).",
-              "fieldName": "open",
-              "attribute": "open"
+              "default": "null",
+              "description": "Optional aria-label attribute for screen readers.\nDescribes what the progress indicator represents.",
+              "fieldName": "ariaLabel",
+              "attribute": "aria-label",
+              "inheritedFrom": {
+                "name": "ProgressMixin",
+                "module": "src/util/ProgressMixin.ts"
+              }
             },
             {
-              "name": "panel-label",
+              "name": "aria-labelledby",
               "type": {
-                "text": "string"
+                "text": "string | null"
               },
-              "default": "''",
-              "description": "Accessible label for the popover panel (applied as aria-label on the dialog).",
-              "fieldName": "panelLabel",
-              "attribute": "panel-label"
+              "default": "null",
+              "description": "Optional aria-labelledby attribute for screen readers.\nReferences the ID of an element that labels the progress indicator.",
+              "fieldName": "ariaLabelledBy",
+              "attribute": "aria-labelledby",
+              "inheritedFrom": {
+                "name": "ProgressMixin",
+                "module": "src/util/ProgressMixin.ts"
+              }
             },
             {
-              "name": "no-arrow",
+              "name": "aria-valuetext",
               "type": {
-                "text": "boolean"
+                "text": "string | null"
               },
-              "default": "false",
-              "description": "Hide the arrow pseudo-element.",
-              "attribute": "noArrow",
-              "fieldName": "noArrow"
-            }
-          ],
-          "mixins": [
-            {
-              "name": "EventEmitterMixin",
-              "module": "/src/util/EventEmitterMixin.js"
+              "default": "null",
+              "description": "Optional aria-valuetext attribute for screen readers.\nProvides human-readable text alternative for progress value.",
+              "fieldName": "ariaValueText",
+              "attribute": "aria-valuetext",
+              "inheritedFrom": {
+                "name": "ProgressMixin",
+                "module": "src/util/ProgressMixin.ts"
+              }
             },
             {
-              "name": "ReadyMixin",
-              "module": "/src/util/ReadyMixin.js"
+              "name": "completion-announcement",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Optional message to announce to screen readers when progress reaches 100%.\nIf not provided, no announcement will be made on completion.",
+              "fieldName": "completionAnnouncement",
+              "attribute": "completion-announcement",
+              "inheritedFrom": {
+                "name": "ProgressMixin",
+                "module": "src/util/ProgressMixin.ts"
+              }
             }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "btu-popover",
-          "customElement": true
+          ]
         }
       ],
       "exports": [
@@ -6238,16 +5925,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Popover",
-            "module": "src/components/popover/Popover.ts"
+            "name": "LinearProgress",
+            "module": "src/components/linear-progress/LinearProgress.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "btu-popover",
+          "name": "btu-linear-progress",
           "declaration": {
-            "name": "Popover",
-            "module": "src/components/popover/Popover.ts"
+            "name": "LinearProgress",
+            "module": "src/components/linear-progress/LinearProgress.ts"
           }
         }
       ]
@@ -6270,307 +5957,667 @@
               "name": "--pagination-color-foreground"
             }
           ],
-          "slots": [
+          "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"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "page",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "Current page number (1-based)",
+              "attribute": "page"
+            },
+            {
+              "kind": "field",
+              "name": "pageSize",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "Number of items per page",
+              "attribute": "page-size"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables all pagination controls",
+              "attribute": "disabled"
+            },
+            {
+              "kind": "field",
+              "name": "loading",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Shows loading spinner and dims controls",
+              "attribute": "loading"
+            },
+            {
+              "kind": "field",
+              "name": "hideOnSinglePage",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Hide controls when there is only one page",
+              "attribute": "hide-on-single-page"
+            },
+            {
+              "kind": "field",
+              "name": "pageSizeChanger",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Show the page size dropdown",
+              "attribute": "page-size-changer"
+            },
+            {
+              "kind": "field",
+              "name": "pageSizeOptions",
+              "type": {
+                "text": "string"
+              },
+              "default": "'10, 20, 50'",
+              "description": "Comma-separated page size options",
+              "attribute": "page-size-options"
+            },
+            {
+              "kind": "field",
+              "name": "totalItems",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "Total number of items across all pages",
+              "attribute": "total-items"
+            },
+            {
+              "kind": "field",
+              "name": "boundaryButtons",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Show first and last page buttons",
+              "attribute": "boundary-buttons"
+            },
+            {
+              "kind": "field",
+              "name": "hideTotalCount",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Hide the item count display (e.g., \"1-10 of 200\")",
+              "attribute": "hide-total-count"
+            },
+            {
+              "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.",
+              "attribute": "page-jumper"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Accessible label for the pagination nav landmark",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "_parsedPageSizeOptions",
+              "type": {
+                "text": "number[]"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "_totalPages",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "_startItem",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "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"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_goToLastPage",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_manageBoundaryFocus",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "clickedButton",
+                  "type": {
+                    "text": "IconButton"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_onBuiltinPageSizeSelect",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_onBuiltinJumperSelect",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "emit",
+              "parameters": [
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "K"
+                  },
+                  "description": "Event name from CustomEventMap"
+                },
+                {
+                  "name": "detail",
+                  "optional": true,
+                  "type": {
+                    "text": "UnpackCustomEvent<CustomEventMap[K]>"
+                  },
+                  "description": "Optional event detail payload"
+                }
+              ],
+              "description": "Dispatches a type-safe CustomEvent with standardized configuration.\n\nAll events are configured with:\n- bubbles: true (event propagates up the DOM tree)\n- cancelable: false (event cannot be cancelled)\n- composed: true (event crosses shadow DOM boundaries)",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "inheritedFrom": {
+                "name": "EventEmitterMixin",
+                "module": "src/util/EventEmitterMixin.ts"
+              }
+            }
+          ],
+          "events": [
             {
-              "description": "Custom page-size selector (replaces built-in dropdown). Consumer manages all behavior.",
-              "name": "page-size"
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired after first render",
+              "name": "btu-pagination-ready"
             },
             {
-              "description": "Custom jumper content (replaces built-in page jumper dropdown). Consumer manages all behavior.",
-              "name": "jumper"
+              "type": {
+                "text": "CustomEvent<{page: number, pageSize: number}>"
+              },
+              "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"
             }
           ],
-          "members": [
+          "attributes": [
             {
-              "kind": "field",
               "name": "page",
               "type": {
                 "text": "number"
               },
               "default": "1",
               "description": "Current page number (1-based)",
+              "fieldName": "page",
               "attribute": "page"
             },
             {
-              "kind": "field",
-              "name": "pageSize",
+              "name": "page-size",
               "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"
             },
             {
-              "kind": "field",
-              "name": "hideOnSinglePage",
+              "name": "hide-on-single-page",
               "type": {
                 "text": "boolean"
               },
               "default": "true",
               "description": "Hide controls when there is only one page",
+              "fieldName": "hideOnSinglePage",
               "attribute": "hide-on-single-page"
             },
             {
-              "kind": "field",
-              "name": "pageSizeChanger",
+              "name": "page-size-changer",
               "type": {
                 "text": "boolean"
               },
               "default": "true",
               "description": "Show the page size dropdown",
+              "fieldName": "pageSizeChanger",
               "attribute": "page-size-changer"
             },
             {
-              "kind": "field",
-              "name": "pageSizeOptions",
+              "name": "page-size-options",
               "type": {
                 "text": "string"
               },
               "default": "'10, 20, 50'",
               "description": "Comma-separated page size options",
+              "fieldName": "pageSizeOptions",
               "attribute": "page-size-options"
             },
             {
-              "kind": "field",
-              "name": "totalItems",
+              "name": "total-items",
               "type": {
                 "text": "number"
               },
               "default": "0",
               "description": "Total number of items across all pages",
+              "fieldName": "totalItems",
               "attribute": "total-items"
             },
             {
-              "kind": "field",
-              "name": "boundaryButtons",
+              "name": "boundary-buttons",
               "type": {
                 "text": "boolean"
               },
               "default": "true",
               "description": "Show first and last page buttons",
+              "fieldName": "boundaryButtons",
               "attribute": "boundary-buttons"
             },
             {
-              "kind": "field",
-              "name": "hideTotalCount",
+              "name": "hide-total-count",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Hide the item count display (e.g., \"1-10 of 200\")",
+              "fieldName": "hideTotalCount",
               "attribute": "hide-total-count"
             },
             {
-              "kind": "field",
-              "name": "pageJumper",
+              "name": "page-jumper",
               "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))",
+              "name": "--popover-color-background"
+            },
+            {
+              "description": "Panel text color (default: oklch(var(--btu-theme-gray-900)))",
+              "name": "--popover-color-content"
+            },
+            {
+              "description": "Panel corner radius (default: theme borderRadius.lg)",
+              "name": "--popover-border-radius"
+            },
+            {
+              "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": "_parsedPageSizeOptions",
+              "name": "position",
               "type": {
-                "text": "number[]"
+                "text": "'top' | 'bottom' | 'left' | 'right'"
               },
-              "privacy": "private",
-              "readonly": true
+              "default": "'bottom'",
+              "description": "Position relative to the trigger element.\nAuto-flips when constrained by the viewport.",
+              "attribute": "position"
             },
             {
               "kind": "field",
-              "name": "_totalPages",
+              "name": "trigger",
               "type": {
-                "text": "number"
+                "text": "'click' | 'hover' | 'focus'"
               },
-              "privacy": "private",
-              "readonly": true
+              "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": "_startItem",
+              "name": "delay",
               "type": {
                 "text": "number"
               },
-              "privacy": "private",
-              "readonly": true
+              "default": "300",
+              "description": "Show delay in milliseconds (hover trigger only).",
+              "attribute": "delay"
             },
             {
               "kind": "field",
-              "name": "_endItem",
+              "name": "offset",
               "type": {
-                "text": "number"
+                "text": "PopoverOffset | null"
               },
-              "privacy": "private",
-              "readonly": true
+              "default": "null",
+              "description": "Gap between trigger and popover (sm=4px, md=8px, lg=12px, xl=16px).",
+              "attribute": "offset"
             },
             {
-              "kind": "method",
-              "name": "_setupSlots",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
+              "kind": "field",
+              "name": "noArrow",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Hide the arrow pseudo-element.",
+              "attribute": "no-arrow"
             },
             {
-              "kind": "method",
-              "name": "_goToFirstPage",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "open",
+              "type": {
+                "text": "boolean"
               },
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
+              "default": "false",
+              "description": "Programmatic open/close state (reflected).",
+              "attribute": "open",
+              "reflects": true
             },
             {
-              "kind": "method",
-              "name": "_goToPreviousPage",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "panelLabel",
+              "type": {
+                "text": "string"
               },
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
+              "default": "''",
+              "description": "Accessible label for the popover panel (applied as aria-label on the dialog).",
+              "attribute": "panel-label"
+            },
+            {
+              "kind": "field",
+              "name": "_onTriggerMouseLeave",
+              "privacy": "private"
             },
             {
-              "kind": "method",
-              "name": "_goToNextPage",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "_onTriggerFocusIn",
+              "privacy": "private"
             },
             {
-              "kind": "method",
-              "name": "_goToLastPage",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "_onTriggerFocusOut",
+              "privacy": "private"
             },
             {
-              "kind": "method",
-              "name": "_manageBoundaryFocus",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "clickedButton",
-                  "type": {
-                    "text": "IconButton"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "_onPanelMouseEnter",
+              "privacy": "private"
             },
             {
-              "kind": "method",
-              "name": "_onBuiltinPageSizeSelect",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "_onPanelMouseLeave",
+              "privacy": "private"
             },
             {
-              "kind": "method",
-              "name": "_onBuiltinJumperSelect",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "_onNativeToggle",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_onKeyDown",
+              "privacy": "private"
             },
             {
               "kind": "method",
@@ -6609,143 +6656,96 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired after first render",
-              "name": "btu-pagination-ready"
-            },
-            {
-              "type": {
-                "text": "CustomEvent<{page: number, pageSize: number}>"
-              },
-              "description": "Fired on page navigation",
-              "name": "btu-pagination-change"
+              "description": "Fired when the popover opens",
+              "name": "btu-popover-show"
             },
             {
               "type": {
-                "text": "CustomEvent<{page: number, pageSize: number}>"
+                "text": "CustomEvent"
               },
-              "description": "Fired on page size change",
-              "name": "btu-pagination-page-size-change"
+              "description": "Fired when the popover closes",
+              "name": "btu-popover-hide"
             }
           ],
           "attributes": [
             {
-              "name": "page",
+              "name": "position",
               "type": {
-                "text": "number"
+                "text": "'top' | 'bottom' | 'left' | 'right'"
               },
-              "default": "1",
-              "description": "Current page number (1-based)",
-              "fieldName": "page",
-              "attribute": "page"
+              "default": "'bottom'",
+              "description": "Position relative to the trigger element.\nAuto-flips when constrained by the viewport.",
+              "fieldName": "position",
+              "attribute": "position"
             },
             {
-              "name": "page-size",
+              "name": "trigger",
               "type": {
-                "text": "number"
+                "text": "'click' | 'hover' | 'focus'"
               },
-              "default": "0",
-              "description": "Number of items per page",
-              "fieldName": "pageSize",
-              "attribute": "page-size"
+              "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": "disabled",
+              "name": "delay",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "description": "Disables all pagination controls",
-              "fieldName": "disabled",
-              "attribute": "disabled"
+              "default": "300",
+              "description": "Show delay in milliseconds (hover trigger only).",
+              "fieldName": "delay",
+              "attribute": "delay"
             },
             {
-              "name": "loading",
+              "name": "offset",
               "type": {
-                "text": "boolean"
+                "text": "PopoverOffset | null"
               },
-              "default": "false",
-              "description": "Shows loading spinner and dims controls",
-              "fieldName": "loading",
-              "attribute": "loading"
+              "default": "null",
+              "description": "Gap between trigger and popover (sm=4px, md=8px, lg=12px, xl=16px).",
+              "fieldName": "offset",
+              "attribute": "offset"
             },
             {
-              "name": "hide-on-single-page",
+              "name": "noArrow",
               "type": {
                 "text": "boolean"
               },
-              "default": "true",
-              "description": "Hide controls when there is only one page",
-              "fieldName": "hideOnSinglePage",
-              "attribute": "hide-on-single-page"
+              "default": "false",
+              "description": "Hide the arrow pseudo-element.",
+              "fieldName": "noArrow"
             },
             {
-              "name": "page-size-changer",
+              "name": "open",
               "type": {
                 "text": "boolean"
               },
-              "default": "true",
-              "description": "Show the page size dropdown",
-              "fieldName": "pageSizeChanger",
-              "attribute": "page-size-changer"
+              "default": "false",
+              "description": "Programmatic open/close state (reflected).",
+              "fieldName": "open",
+              "attribute": "open"
             },
             {
-              "name": "page-size-options",
+              "name": "panel-label",
               "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": "true",
-              "description": "Show first and last page buttons",
-              "fieldName": "boundaryButtons",
-              "attribute": "boundary-buttons"
-            },
-            {
-              "name": "hide-total-count",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Hide the item count display (e.g., \"1-10 of 200\")",
-              "fieldName": "hideTotalCount",
-              "attribute": "hide-total-count"
+              "default": "''",
+              "description": "Accessible label for the popover panel (applied as aria-label on the dialog).",
+              "fieldName": "panelLabel",
+              "attribute": "panel-label"
             },
             {
-              "name": "page-jumper",
+              "name": "no-arrow",
               "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"
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Accessible label for the pagination nav landmark",
-              "fieldName": "label",
-              "attribute": "label"
+              "description": "Hide the arrow pseudo-element.",
+              "attribute": "noArrow",
+              "fieldName": "noArrow"
             }
           ],
           "mixins": [
@@ -6762,7 +6762,7 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "btu-pagination",
+          "tagName": "btu-popover",
           "customElement": true
         }
       ],
@@ -6771,16 +6771,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Pagination",
-            "module": "src/components/pagination/Pagination.ts"
+            "name": "Popover",
+            "module": "src/components/popover/Popover.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "btu-pagination",
+          "name": "btu-popover",
           "declaration": {
-            "name": "Pagination",
-            "module": "src/components/pagination/Pagination.ts"
+            "name": "Popover",
+            "module": "src/components/popover/Popover.ts"
           }
         }
       ]